/* Motum OS — capa de elevación de marca para páginas de contenido (guías, sectores, comparativas, calculadoras, docs, legales).
   Se carga DESPUÉS del <style> inline de cada página: solo eleva, no reemplaza el layout.
   Sin animaciones continuas ni blur: estas páginas son SEO-first y deben seguir livianas. */

/* ── Tipografía de marca ── */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:'Archivo','Inter',system-ui,sans-serif;letter-spacing:-.015em}
.kick,.bc,.brand b,kbd,code,pre,samp{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ── Fondo técnico: grilla + brillos de marca (sin blur ni animación) ── */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(112,137,164,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(112,137,164,.065) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000 30%,transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 0,#000 30%,transparent 85%)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52% 38% at 80% -8%,rgba(224,145,47,.12),transparent 68%),
    radial-gradient(44% 34% at -10% 14%,rgba(69,120,168,.11),transparent 70%),
    radial-gradient(64% 48% at 50% 112%,rgba(224,145,47,.05),transparent 72%)}

/* ── Título con acabado metálico ── */
@supports((-webkit-background-clip:text) or (background-clip:text)){
  h1{background:linear-gradient(180deg,#ffffff 52%,#bcc9d9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#EAEDF1}
}
::selection{background:rgba(224,145,47,.28);color:#fff}

/* ── Cards: profundidad, hairline cobre y hover con vida ── */
.card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(16,34,47,.62),rgba(13,28,43,.45));
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,0 16px 34px -24px rgba(0,0,0,.8);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,145,47,.38),transparent);opacity:.6;pointer-events:none}
.card:hover{transform:translateY(-2px);border-color:rgba(112,137,164,.36);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 44px -22px rgba(0,0,0,.85),0 0 0 1px rgba(224,145,47,.08)}

/* ── Cajas destacadas y CTA ── */
.box,.cta{box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -26px rgba(0,0,0,.85)}
.cta{transition:box-shadow .25s ease,border-color .25s ease}
.cta:hover{border-color:rgba(224,145,47,.6);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 48px -24px rgba(0,0,0,.9),0 0 34px -6px rgba(224,145,47,.22)}

/* ── Botones ── */
.btn{background:linear-gradient(135deg,#E0912F,#c07a22);box-shadow:0 12px 26px -14px rgba(224,145,47,.6);
  transition:filter .15s ease,transform .15s ease}
.btn:hover{filter:brightness(1.08);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover{border-color:rgba(224,145,47,.5);filter:none}

/* ── Chips de sectores ── */
.sectors span,.sectors a{transition:border-color .15s ease,background .15s ease}
.sectors a:hover{border-color:rgba(224,145,47,.55)}

/* ── FAQ / details ── */
details{transition:border-color .2s ease}
details[open]{border-color:rgba(224,145,47,.42)}
summary{transition:color .15s ease}
summary:hover{color:#ffb454}

/* ── Tablas (comparativas) ── */
tbody tr{transition:background .12s ease}
tbody tr:hover{background:rgba(224,145,47,.045)}
thead th{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em}

/* ── Formularios (calculadoras) ── */
input,select,textarea,button{font-family:inherit}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid rgba(224,145,47,.6);outline-offset:1px}

/* ── Accesibilidad y detalles finales ── */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #E0912F;outline-offset:2px;border-radius:6px}
html{scroll-behavior:smooth;scrollbar-color:#45607A #0a121c}
footer{border-top-color:rgba(112,137,164,.22)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .card:hover,.btn:hover{transform:none}
}

/* ── Transición entre páginas (View Transitions API, progressive enhancement) ── */
@media not (prefers-reduced-motion: reduce){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:mvtOut .2s ease both}
  ::view-transition-new(root){animation:mvtIn .28s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes mvtOut{to{opacity:0}}
@keyframes mvtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Tablas responsive (móvil = dispositivo primario de la audiencia) ──
   En pantallas chicas, si una tabla es más ancha que el viewport, que scrollee horizontal
   dentro de sí misma en vez de romper el layout de la página. Las guías usan <table> "pelada";
   planes/comparar ya envuelven en .tablewrap (para esas es redundante e inofensivo). */
@media(max-width:640px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}