/* Tokens de marca (CLAUDE.md §4) y piezas compartidas: encabezado, botón, pie y entrada al hacer scroll */
:root {
  /* Fondo claro (2026-10-07): la marca dejó de permitir fondos negros. El blanco es un derivado frío del
     oscuro de marca, y ese oscuro (#020A0A) pasa a ser el color del texto. */
  --orange: #FF6600;
  /* Un solo naranja para las palabras destacadas de los títulos, botones y el plan destacado.
     #FF6600 sobre blanco da ~2.9:1 (debajo del 3:1 de texto grande); aprobado así en títulos de 26-40 px en peso 800.
     Si una auditoría lo pide, se cambia solo aquí (alternativa: #E65C00, ~3.6:1). Cifras y texto chico siguen en #CC5500. */
  --orange-title: #FF6600;
  /* Un solo efecto al pasar el cursor para todos los paneles. Para hacerlo más o menos marcado se cambia solo --lift. */
  --lift: -8px;       /* paneles grandes */
  --lift-sm: -4px;    /* filas pequeñas dentro de un panel */
  --ease-lift: cubic-bezier(.2,.8,.2,1);
  --lift-hover: translateY(var(--lift)) scale(1.008);
  --lift-shadow: 0 56px 110px -34px rgba(2,10,10,.24), 0 18px 40px -20px rgba(2,10,10,.16),
    0 0 0 1px rgba(255,102,0,.28), inset 0 1px 0 rgba(255,255,255,1);
  --cyan: #00A8C6;
  --bg: #F4F6F5;
  --surface: #FFFFFF;
  --ink: #020A0A;
  --text: rgba(2,10,10,.92);
  --text-soft: rgba(2,10,10,.68);
  --line: rgba(2,10,10,.14);
  /* Borde de campos y controles: 3.7:1 sobre el fondo, lo que pide AA para elementos de interfaz */
  --line-strong: rgba(2,10,10,.5);
  --error: #B3261E;
  /* Texto sobre naranja: el blanco da 2.9:1 y no pasa AA; el oscuro de marca da más de 7:1 */
  --on-orange: #020A0A;
  /* El naranja y el cian de marca dan menos de 3:1 como texto sobre claro: se usan estas versiones oscurecidas (4.6:1 o más).
     Los colores de marca exactos quedan para botones, barras y acentos. */
  --orange-text: #B84A00;
  --cyan-text: #007A91;
  --grad: linear-gradient(90deg, #FF6600, #00A8C6);
  --grad-text: linear-gradient(90deg, #B84A00, #007A91);

  /* Escala de tamaños acordada el 2026-10-07 (medida en motionsites.ai, 390 y 1440 px). Ajuste 22b (R12): las familias
     son las de la Guía de Estilo del 9 oct (styles/fonts.css): Montserrat en títulos y botones, Roboto en el cuerpo. Sin Inter. */
  --font-sans: var(--font-copy);
  --font-display: var(--font-heading);
  --font-body: var(--font-copy);
  --text-h1: clamp(2.375rem, 1.96rem + 1.7vw, 3.5rem);       /* 38 a 56 px */
  --text-h2: clamp(1.5rem, 1.22rem + 1.15vw, 2.25rem);       /* 24 a 36 px */
  --text-h3: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);       /* 18 a 20 px */
  --text-lead: clamp(1rem, .95rem + .2vw, 1.125rem);         /* 16 a 18 px */
  --text-figure: clamp(2rem, 1.8rem + .8vw, 2.5rem);         /* 32 a 40 px */
  --text-figure-main: clamp(3rem, 2.44rem + 2.3vw, 4.5rem);  /* 48 a 72 px */

  --radius: 4px;
  --radius-pill: 999px;
  --gutter: clamp(16px, 4vw, 48px);
  --space-section: clamp(72px, 11vh, 128px);
  /* Alto que ocupa el menú arriba de la página: separación superior + barra + aire */
  --header-offset: 12px;
  --bar-height: 44px;
  --header-height: 68px;
  /* Escala de la página completa en monitores grandes (abajo, "Pantallas grandes"); 1 hasta 1800 px de ancho */
  --page-zoom: 1;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-press: 140ms;
  --duration-hover: 200ms;

  /* Capas: contenido < encabezado < formulario (el diálogo usa la capa superior del navegador) */
  --layer-header: 10;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font: 400 1rem/1.6 var(--font-body); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: calc(var(--layer-header) + 1);
  padding: 12px 16px; background: var(--ink); color: var(--bg);
  font: 700 .875rem/1 var(--font-display); border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* Palabra destacada de los títulos */
.hl { color: var(--orange-title); }

h2 {
  font: 700 var(--text-h2)/1.15 var(--font-display);
  letter-spacing: -.02em; text-wrap: balance;
}
.lead { max-width: 52ch; font-size: var(--text-lead); color: var(--text-soft); }

/* Botón único de acción */
.cta {
  position: relative; isolation: isolate;
  display: inline-block; padding: 19px 34px;
  background: var(--orange); color: var(--on-orange);
  font: 800 14px/1 var(--font-display);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: transform var(--duration-press) var(--ease-out);
}
/* El brillo va en una capa aparte para animar solo opacidad, no la sombra */
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 14px 36px -12px rgba(255,102,0,.7);
  opacity: .55; transition: opacity var(--duration-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover::after { opacity: 1; }
}
.cta:active { transform: scale(.97); }
.cta.is-compact { padding: 16px 18px; font-size: 12px; letter-spacing: .1em; }
.cta.is-compact::after { opacity: 0; }

/* Botones "Habla con un experto" (.btn--invita): mientras el botón está a la vista (.is-live, lo pone
   scripts/pulse-in-view.js) hace un zoom corto cada 3.6 s y una luz recorre su borde. La luz es una capa con un
   degradado fijo (::before) que solo gira (rotate, linear, velocidad constante), tapada por otra naranja a 2.5 px del borde (::after).
   Solo transform y opacity: ni el degradado ni la sombra se animan. Sin .is-live es el botón de siempre.
   Como overflow: hidden recortaría el brillo de .cta::after, aquí el brillo va en la sombra del propio botón. */
.cta.btn--invita {
  overflow: hidden; box-shadow: 0 14px 36px -12px rgba(255,102,0,.385);
  transition: transform var(--duration-press) var(--ease-out), box-shadow var(--duration-hover) var(--ease-out);
}
.cta.btn--invita > span { position: relative; z-index: 1; }
.cta.btn--invita::before {
  /* Centrada con left y margin, no con translate: así la animación es solo rotate y la lleva el compositor.
     (Con translate(-50%, -50%) dentro del transform animado, el navegador recalculaba cada fotograma.)
     120 % del ancho cubre la diagonal del botón en cualquier ángulo. */
  content: ''; position: absolute; z-index: -2; left: -10%; top: 50%; width: 120%; aspect-ratio: 1; margin-top: -60%; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(0,168,198,0) 58%, rgba(0,168,198,.95) 74%, #FFFFFF 87%, rgba(255,255,255,0) 90%, transparent 100%);
}
.cta.btn--invita::after { inset: 2.5px; background: var(--orange); box-shadow: none; opacity: 1; transition: none; }
.cta.btn--invita.is-live { animation: pulsoCta 3.6s ease-in-out .4s infinite; }
.cta.btn--invita.is-live::before { opacity: 1; animation: giroBorde 3.2s linear infinite; will-change: transform; }
/* En el menú el botón va pegado al logo y al borde de la píldora: zoom más corto para que no se salga ni tape nada */
.cta.btn--invita.is-compact.is-live, .cta.btn--invita.menu-cta.is-live { animation-name: pulsoCtaChico; }
/* Al pasar el cursor o al presionar, el zoom se detiene y queda la respuesta normal del botón */
.cta.btn--invita:active { animation: none; }
@media (hover: hover) and (pointer: fine) {
  .cta.btn--invita:hover { animation: none; box-shadow: 0 14px 36px -12px rgba(255,102,0,.7); }
}
/* El del menú superior nunca llevó brillo */
.cta.btn--invita.is-compact, .cta.btn--invita.is-compact:hover { box-shadow: none; }
@keyframes pulsoCta { 0% { transform: scale(1); } 9% { transform: scale(1.09); } 20% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes pulsoCtaChico { 0% { transform: scale(1); } 9% { transform: scale(1.04); } 20% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes giroBorde { to { transform: rotate(360deg); } }

/* Menú único: píldora blanca arriba y centrada. Logo a la izquierda, enlaces y botón a la derecha.
   Va en el flujo de la página: se ve solo arriba y se va con el scroll (decisión del 13 y 16 de octubre).
   Ocupa --header-height (separación + barra + aire), así el contenido empieza justo debajo. z-index: el desplegable queda sobre el hero. */
.site-header {
  position: relative; z-index: var(--layer-header);
  box-sizing: content-box; height: var(--bar-height);
  padding: var(--header-offset) var(--gutter) calc(var(--header-height) - var(--header-offset) - var(--bar-height));
  pointer-events: none;
  /* Mismo fondo que lo que sigue: blanco sobre el hero y las páginas legales, gris en Artículos */
  background: var(--surface);
}
.site-header:has(~ .articles) { background: none; }
.site-header .bar {
  position: relative; pointer-events: auto;
  max-width: 1040px; height: var(--bar-height); margin-inline: auto; padding: 0 5px 0 18px;
  display: flex; align-items: center; gap: 6px;
  /* Sin backdrop-filter: retrasaba el primer scroll (130–136 ms en vez de <100 ms, medido el 2026-10-16).
     Arriba solo queda sobre el fondo blanco del encabezado, así que el desenfoque no se notaba. */
  background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: 0 14px 34px -20px rgba(2,10,10,.4);
}
.site-header .brand { margin-right: 10px; padding-block: 8px; }
.site-header .brand img { width: 72px; }
.site-nav { display: flex; gap: 2px; margin-right: auto; }
.site-header .bar > .cta { padding: 11px 16px; font-size: 11px; }
.site-header .cta { font-family: var(--font-heading); font-weight: 700; }
.site-nav a {
  /* 9 px (antes 13). Ajuste 12 (opción A): con "Preguntas frecuentes" los siete enlaces, el logo y el botón miden
     1013 px; la barra pasa de 860 a 1040 px (sobra aire entre los enlaces y el botón) */
  display: grid; place-items: center; height: 34px; padding-inline: 9px;
  font: 600 .8125rem/1 var(--font-heading); white-space: nowrap;
  color: var(--text-soft); text-decoration: none;
  border-radius: var(--radius-pill);
  transition: color var(--duration-hover) var(--ease-out), background-color var(--duration-hover) var(--ease-out), box-shadow var(--duration-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--ink); background: rgba(2,10,10,.05); }
}
.site-nav a:active { background: rgba(2,10,10,.1); }
/* Página activa (aria-current="page" en Artículos): píldora gris clara con borde, como en la referencia */
.site-nav a[aria-current] { color: var(--ink); background: rgba(2,10,10,.06); box-shadow: inset 0 0 0 1px var(--line-strong); }
.site-nav .menu-cta, .menu-toggle { display: none; }

/* Celular y tableta: el botón sigue a la vista y los enlaces pasan a un desplegable bajo la píldora.
   Empieza en 1099 px (antes 939, y 859 antes de eso): con "Preguntas frecuentes" la barra completa necesita 1013 px.
   Desde 1100 px la ventana, con el zoom de la página (0.94 ahí), deja de sobra para la barra de 1040 px.
   La barra crece un poco para que el botón del menú conserve 44 px de área táctil */
@media (max-width: 1099px) {
  :root { --bar-height: 50px; --header-height: 74px; }
  .site-header .bar { padding-left: 16px; }
  .site-header .brand { margin-right: auto; }
  .site-header .brand img { width: 72px; }
  .menu-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
  }
  .menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px;
  }
  .menu-toggle .bars { position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ''; position: absolute; left: 0; }
  .menu-toggle .bars::before { top: -6px; }
  .menu-toggle .bars::after { top: 6px; }
  .site-nav {
    display: none; position: absolute; inset: calc(100% + 8px) 0 auto; margin: 0;
    flex-direction: column; gap: 4px; padding: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 24px 48px -22px rgba(2,10,10,.45);
  }
  .site-header.is-open .site-nav { display: flex; }
  /* Abierto, el desplegable queda sobre el aviso de cookies (que está una capa arriba de la barra) */
  .site-header.is-open { z-index: calc(var(--layer-header) + 2); }
  .site-nav a { height: 48px; justify-items: start; font-size: 1rem; }
  .site-nav .menu-cta { display: block; margin-top: 6px; text-align: center; }
}
/* En pantallas muy angostas el botón de la barra no cabe: queda el del desplegable */
@media (max-width: 379px) { .site-header .bar > .cta { display: none; } }

/* Cristal claro: tarjetas de las secciones, cierre, aviso y panel de cookies */
.glass {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; color: #333333;
  background:
    radial-gradient(90% 70% at 100% 100%, rgba(255,102,0,.05), transparent 100%),
    radial-gradient(70% 50% at 0% 0%, rgba(0,168,198,.04), transparent 100%),
    linear-gradient(160deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.62) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 40px 90px -34px rgba(2,10,10,.14), 0 12px 30px -20px rgba(2,10,10,.08), inset 0 1px 0 rgba(255,255,255,.95);
}
.glass::before {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 38%, rgba(255,255,255,.35) 62%, rgba(255,102,0,.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background-color: rgba(255,255,255,.96); }
}
html.zoom-open { overflow: hidden; }
@keyframes k1-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } }
@keyframes k1-fade { from { opacity: 0; } }

/* Etiqueta de revisión: solo existe en preproducción (data-env en <html>) */
.badge { display: none; }
[data-env="preproduccion"] .badge {
  display: block; position: fixed; z-index: var(--layer-header); pointer-events: none;
  left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  padding: 8px 12px; background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: var(--radius-pill);
  font: 600 10px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-soft);
}


/* Flecha para volver al inicio (scripts/to-top.js). Esquina inferior derecha, sobre la etiqueta
   "Imagen ilustrativa" (que vive dentro del hero y ya no se ve cuando la flecha aparece). */
.to-top {
  position: fixed; z-index: var(--layer-header);
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  color: #333333; background: #FFFFFF; border: 1px solid #E8E8E8; border-radius: 50%; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(51,51,51,.35);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out), border-color var(--duration-hover) var(--ease-out);
}
.to-top.is-shown { opacity: 1; pointer-events: auto; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.to-top:focus-visible { color: var(--orange); border-color: var(--orange); outline: 2px solid #333333; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { color: var(--orange); border-color: var(--orange); }
}

/* Entrada al hacer scroll: ordena la lectura de cada sección. El contenido siempre está en el HTML;
   sin soporte o con movimiento reducido se muestra fijo. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes rise { from { opacity: .15; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  /* Al pasar el cursor los paneles cambian sombra y borde, sin desplazarse */
  :root { --lift-hover: none; --lift-sm: 0px; }
  .cta, .cta::after, .cta.btn--invita, .site-nav a, .to-top { transition: none; }
  .cta.btn--invita.is-live, .cta.btn--invita.is-live::before { animation: none; }
  .cta.btn--invita.is-live::before { opacity: 0; }
}

/* Pantallas grandes (2026-10-16): de 1440 hacia arriba el contenido se quedaba en 1120 px con textos de 14–56 px,
   una isla en 2560 y en 4K. Toda la página se escala igual (zoom), así el diseño no cambia: solo crece.
   Por ancho Y alto, para que un ultrapanorámico (3440×1440) no crezca más que su altura. Nada cambia en 1800 px o menos.
   Con zoom, vh/svh/dvh también se multiplican: las alturas de pantalla se dividen entre --page-zoom (hero y ventanas).
   De 1024 a 1800 px el zoom lo calcula scripts/page-zoom-boot.js (0.8 a 1.1, continuo) y lo escribe en
   <html>, que gana sobre estas reglas; de 1800 px hacia arriba mandan estas. El panel no carga ese script. */
@media (min-width: 1800px) and (min-height: 880px) { :root { --page-zoom: 1.1; } }
@media (min-width: 2400px) and (min-height: 1200px) { :root { --page-zoom: 1.33; } }
@media (min-width: 3000px) and (min-height: 1650px) { :root { --page-zoom: 1.6; } }
@media (min-width: 3600px) and (min-height: 1900px) { :root { --page-zoom: 2; } }
html { zoom: var(--page-zoom); }