/* ════════════════════ 1-tokens.css ════════════════════ */
/* ═══════════════════════════════════════════════════════════
   TOKENS — la única fuente de verdad del diseño.
   Cambia un valor aquí y cambia en todo el sitio.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── SUPERFICIES ─────────────────────────────────────────
     Negro cálido, no puro. #000 sobre pantallas OLED corta
     demasiado seco contra el glass; #0D0D0D deja respirar. */
  --bg:            #0D0D0D;
  --bg-hondo:      #080808;   /* zonas que deben hundirse */
  --bg-elevado:    #141414;   /* zonas que deben levantarse */
  --velo:          rgba(13, 13, 13, 0.72);  /* sobre imágenes */

  /* ── ACENTO — azul que vira a verde ──────────────────────
     El color no es plano: recorre de azul suave a cian y cierra
     en verde. Ese recorrido es el que da el contraste bonito;
     un azul sólido a saturación alta cansaba la vista.

     Contraste de --acento sobre --bg: 8.1:1 */
  --acento:        #6FA8FF;   /* azul suave — arranque */
  --acento-2:      #5BC8E8;   /* cian — paso intermedio */
  --acento-3:      #4FD1A5;   /* verde — cierre */

  --grad-acento: linear-gradient(
    102deg,
    var(--acento)   0%,
    var(--acento-2) 48%,
    var(--acento-3) 100%
  );

  --acento-claro:  #9DC4FF;
  --acento-hondo:  #3D7FD6;
  --acento-tinta:  #06121F;   /* texto encima del acento sólido */
  --acento-halo:   rgba(111, 168, 255, 0.10);
  --acento-linea:  rgba(111, 168, 255, 0.26);

  /* ── TEXTO ───────────────────────────────────────────────
     Blanco con una gota de azul, para que no choque con el
     acento. Los tres niveles pasan WCAG AA sobre --bg. */
  --tx:            #F4F8FF;                      /* 18.6:1 */
  --tx-2:          rgba(244, 248, 255, 0.72);    /*  9.7:1 */
  --tx-3:          rgba(244, 248, 255, 0.55);    /*  6.1:1 */
  --tx-linea:      rgba(244, 248, 255, 0.10);    /* divisores */

  /* ── RESPLANDOR ──────────────────────────────────────────
     El brillo que envuelve los titulares. Contenido: la gracia
     está en el desenfoque esmerilado de abajo, no en el halo.
     Un glow fuerte emborrona la letra en vez de encenderla. */
  --luz-1: rgba(255, 255, 255, 0.30);
  --luz-2: rgba(214, 232, 255, 0.16);

  /* Glow del acento: cian, el punto medio del degradado. */
  --luz-a1: rgba(120, 200, 230, 0.42);
  --luz-a2: rgba(79, 209, 165, 0.20);

  /* ── LIQUID GLASS ────────────────────────────────────────
     Tinte casi invisible: el vidrio se define por el borde
     y por lo que se ve a través, no por su color. */
  --vidrio:        rgba(255, 255, 255, 0.026);
  --vidrio-alto:   rgba(255, 255, 255, 0.052);   /* hover */
  --vidrio-borde:  rgba(255, 255, 255, 0.14);
  --vidrio-brillo: rgba(255, 255, 255, 0.30);    /* specular */
  --vidrio-blur:   26px;
  --vidrio-sat:    170%;

  /* ── TIPOGRAFÍA ──────────────────────────────────────────
     Titulares: grotesca geométrica, ancha y de peso alto.
     Manrope es la más cercana en Google Fonts al lettering
     de Artlist. Alternativas del mismo carácter, por si
     quieres probar (es cambiar esta única línea):
       "Figtree"           — algo más humanista
       "Schibsted Grotesk" — más neutra, tipo Helvetica
       "Outfit"            — más geométrica y uniforme      */
  --f-titular: "Manrope", "Inter", -apple-system, sans-serif;
  --f-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --p-titular: 800;
  --p-ui:      400;
  --p-ui-med:  500;

  /* Escala de titulares.
     Una grotesca de peso 800 necesita el tracking más cerrado
     y el interlineado algo más suelto que una serif fina. */
  --fs-display: clamp(2.875rem, 8vw, 6.5rem);    /*  46 → 104px */
  --fs-h2:      clamp(2.125rem, 4.8vw, 3.5rem);  /*  34 →  56px */
  --fs-h3:      clamp(1.25rem, 2vw, 1.625rem);   /*  20 →  26px */

  --lh-titular: 0.94;
  --ls-titular: -0.035em;

  /* Escala de interfaz */
  --fs-cuerpo:  1rem;      /* 16 */
  --fs-chico:   0.875rem;  /* 14 */
  --fs-micro:   0.75rem;   /* 12 */
  --fs-nano:    0.6875rem; /* 11 — solo etiquetas en mayúscula */
  --lh-cuerpo:  1.65;
  --ls-etiqueta: 0.14em;

  /* ── RITMO VERTICAL ──────────────────────────────────────
     Secciones muy espaciadas: 90px como piso absoluto.
     El techo se quedó en 140px — a 180px el hero y la sección
     siguiente sumaban sus márgenes y abrían un vacío de 360px. */
  --s-seccion:  clamp(5.625rem, 9vw, 8.75rem);    /* 90 → 140px */
  --s-bloque:   clamp(2.5rem, 5vw, 4.5rem);       /* 40 →  72px */
  --s-1: 0.25rem;   --s-2: 0.5rem;    --s-3: 0.75rem;
  --s-4: 1rem;      --s-5: 1.5rem;    --s-6: 2rem;
  --s-7: 2.5rem;    --s-8: 3rem;      --s-9: 4rem;

  /* ── MEDIDAS ─────────────────────────────────────────────── */
  --ancho:       1180px;   /* contenedor principal */
  --ancho-texto: 62ch;     /* medida de lectura cómoda */
  --margen:      clamp(1.25rem, 5vw, 3.5rem);

  /* ── RADIOS ──────────────────────────────────────────────── */
  --r-tarjeta: 24px;
  --r-media:   16px;
  --r-chico:   10px;
  --r-pastilla: 100px;

  /* ── MOVIMIENTO ──────────────────────────────────────────── */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --t-rapido:  0.2s;
  --t-medio:   0.4s;
  --t-lento:   0.8s;

  /* ── CAPAS ───────────────────────────────────────────────── */
  --z-fondo: 0;
  --z-cuerpo: 1;
  --z-barra: 90;    /* barra fija de compra */
  --z-menu:  150;   /* velo del menú móvil */
  /* El nav va POR ENCIMA del menú a propósito: el botón que lo
     cierra (la hamburguesa convertida en X) vive ahí. Con el nav
     por debajo, el velo lo tapaba y no había forma de cerrar el
     menú salvo con Escape. */
  --z-nav:   160;
  --z-modal: 200;
}

/* Quien pide menos movimiento, recibe menos movimiento.
   El sitio viejo no tenía esto y era agresivo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════ 2-base.css ════════════════════ */
/* ═══════════════════════════════════════════════════════════
   BASE — reset, tipografía y primitivas de página.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;   /* que las anclas no queden bajo el nav */
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-ui);
  font-size: var(--fs-cuerpo);
  font-weight: var(--p-ui);
  line-height: var(--lh-cuerpo);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  font-synthesis-weight: none;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* Foco visible y consistente. El sitio viejo no tenía ninguno. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--acento); color: var(--acento-tinta); }

/* ── TITULARES ─────────────────────────────────────────────
   Grotesca geométrica: peso alto, tracking cerrado,
   interlineado por debajo de 1 para que las líneas se apilen. */
.display, .t2, .t3 {
  font-family: var(--f-titular);
  font-weight: var(--p-titular);
  line-height: var(--lh-titular);
  letter-spacing: var(--ls-titular);
  text-wrap: balance;
}

.display { font-size: var(--fs-display); }
.t2      { font-size: var(--fs-h2); }
.t3      { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }

/* ── RESPLANDOR ────────────────────────────────────────────
   Va con text-shadow, NO con filter: drop-shadow.

   La diferencia importa. `filter` se aplica al elemento entero
   y se compone con el de sus hijos, así que el halo blanco del
   <h1> se pintaba también encima de la palabra en acento y la
   ensuciaba. `text-shadow` es una propiedad heredada: el hijo
   la sustituye por la suya y cada parte del titular brilla del
   color que le toca. */
.display, .t2 {
  text-shadow:
    0 0 16px var(--luz-1),
    0 0 44px var(--luz-2);
}

/* ── DESENFOQUE ESMERILADO ─────────────────────────────────
   El detalle que hace moderno el titular: su parte baja se ve
   como a través de un vidrio esmerilado.

   backdrop-filter difumina lo que hay PINTADO DETRÁS. Como el
   ::after va después del texto en el orden de pintado, el texto
   forma parte de ese fondo — y se difumina solo por abajo, que
   es donde la máscara deja pasar el efecto. */
/* ── DESENFOQUE ESMERILADO ──────────────────────────────────
   El texto se difumina hacia abajo, fuerte, y sin que se vea
   ninguna línea recta donde empieza.

   POR QUÉ NO CON backdrop-filter:
   backdrop-filter recorta el efecto en el borde de su caja.
   Justo ahí el desenfoque se corta en seco, y cuanto más blur
   se pide, más canta ese canto. Es un límite de la técnica, no
   algo que se arregle suavizando la máscara.

   CÓMO SE HACE AQUÍ:
   se superponen dos copias del mismo texto —lo monta el JS, el
   HTML sigue teniendo una sola—:

     · detrás   una copia con filter: blur(), opaca por abajo
     · delante  el texto nítido, que se desvanece hacia abajo

   Al desvanecerse el de delante va apareciendo el de detrás.
   Como son el mismo texto en la misma posición, no hay borde
   que delate la transición: es un fundido entre dos versiones
   de la misma letra. Y `filter: blur()` sí se derrama fuera de
   la caja, así que el desenfoque puede ser todo lo fuerte que
   haga falta.

   Los topes van en `em` medidos DESDE ABAJO, así muerde siempre
   el mismo trozo de letra tenga el titular una línea o cuatro. */
.esmerilado {
  position: relative;
  display: block;

  /* Dos mandos independientes:
       blur = cuánto se difumina    zona = hasta dónde sube      */
  --esm-blur: 0.105em;  /* ~11px a 104px de titular */

  /* Altura de la franja, medida desde el FONDO DE LA CAJA.
     Ojo con este valor: los descendentes («g», «j») cuelgan unos
     0.21em por debajo de la línea base, así que una franja menor
     que eso solo los tocaba a ellos y dejaba intacto el resto de
     letras, que se apoyan en la base. Para morder la parte baja
     de TODAS hay que pasar de la línea base. */
  --esm-zona: 0.50em;

  /* Aire alrededor, para que el desenfoque no se corte contra el
     borde de la caja. Se queda por debajo de --margen (20px en
     móvil) para que el derrame nunca salga de la pantalla. */
  --esm-aire: 0.55em;
  --esm-aire-lat: 0.34em;

  /* La nítida se apaga en la zona baja. */
  --esm-rampa-fuera: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1)    calc(100% - var(--esm-zona)),
    rgba(0, 0, 0, 0.92) calc(100% - var(--esm-zona) * 0.82),
    rgba(0, 0, 0, 0.74) calc(100% - var(--esm-zona) * 0.64),
    rgba(0, 0, 0, 0.50) calc(100% - var(--esm-zona) * 0.46),
    rgba(0, 0, 0, 0.26) calc(100% - var(--esm-zona) * 0.30),
    rgba(0, 0, 0, 0.09) calc(100% - var(--esm-zona) * 0.15),
    rgba(0, 0, 0, 0)    100%
  );

  /* La borrosa aparece deprisa y luego SE VA APAGANDO hacia el
     filo. Que no llegue opaca al final es lo que hace que se lea
     como desenfoque y no como resplandor: la letra se disuelve,
     no se enciende. Su caja es --esm-aire más alta, de ahí el
     descuento extra. */
  --esm-rampa-dentro: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    calc(100% - var(--esm-aire) - var(--esm-zona) * 1.10),
    rgba(0, 0, 0, 0.74) calc(100% - var(--esm-aire) - var(--esm-zona) * 0.60),
    rgba(0, 0, 0, 0.64) calc(100% - var(--esm-aire) - var(--esm-zona) * 0.20),
    rgba(0, 0, 0, 0.52) calc(100% - var(--esm-aire)),
    rgba(0, 0, 0, 0.44) 100%
  );
}

/* Las dos capas: máscara sin repetir y TRES VECES más ancha que
   la caja, centrada.

   Lo importante es que se ensancha la MÁSCARA, no el elemento.
   Ensanchar el elemento con márgenes negativos daba el aire que
   necesita el halo, pero también empujaba la página 27px fuera
   de la pantalla en móvil. Con mask-size el halo queda cubierto
   y la caja no se mueve. */
.esmerilado .esm-nitida,
.esmerilado .esm-borrosa {
  display: block;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-position: center top;
          mask-position: center top;

  /* Sin esto el desenfoque se corta en vertical a izquierda y
     derecha: `mask-clip` vale `border-box` por defecto y recorta
     todo lo que el filtro derrama fuera de la caja, por muy
     ancha que sea la máscara. `no-clip` desactiva ese recorte. */
  -webkit-mask-clip: no-clip;
          mask-clip: no-clip;
}

/* NÍTIDA — delante, se desvanece hacia abajo.
   Hay que apagarla: si se dejara opaca debajo, se vería la letra
   afilada asomando a través de su propia copia borrosa. */
.esmerilado .esm-nitida {
  position: relative;
  z-index: 1;
  -webkit-mask-image: var(--esm-rampa-fuera);
          mask-image: var(--esm-rampa-fuera);
}

/* BORROSA — detrás. Se estira un poco por los lados y por abajo
   (el padding devuelve el texto a su sitio), como respaldo por
   si el navegador no admite mask-clip: no-clip. El derrame es
   menor que el margen de página, así que nunca desborda. */
.esmerilado .esm-borrosa {
  position: absolute;
  inset: 0 calc(var(--esm-aire-lat) * -1) calc(var(--esm-aire) * -1);
  padding: 0 var(--esm-aire-lat) var(--esm-aire);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  filter: blur(var(--esm-blur));
  -webkit-mask-image: var(--esm-rampa-dentro);
          mask-image: var(--esm-rampa-dentro);

  /* Sin resplandor en esta capa. Era la causa de que el efecto
     pareciese un glow: el halo del titular entraba en la copia,
     el blur lo esparcía y acababa iluminando en vez de
     desenfocar. Aquí solo debe haber tinta difuminada. */
  text-shadow: none;
}

.esmerilado .esm-borrosa .acento {
  filter: none;   /* el drop-shadow del acento, por lo mismo */
}

/* La palabra destacada: degradado azul → cian → verde.
   text-shadow: none corta en seco el halo blanco heredado —
   ese era el brillo feo encima del azul. */
.acento {
  background: var(--grad-acento);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  /* Sin esto, en el modo de alto contraste de Windows la palabra
     DESAPARECE: el sistema fuerza sus propios colores de fondo,
     pero el relleno del texto sigue siendo transparente. */
  forced-color-adjust: none;

  /* Aquí sí drop-shadow: con el texto relleno de degradado y
     transparente, drop-shadow usa la silueta del glifo y pinta
     el halo por fuera. text-shadow se vería a través de la letra. */
  filter:
    drop-shadow(0 0 14px var(--luz-a1))
    drop-shadow(0 0 40px var(--luz-a2));
}

@media (max-width: 700px) {
  .acento { filter: drop-shadow(0 0 10px var(--luz-a1)); }
}

/* Alto contraste: se renuncia al degradado y al resplandor y se
   deja que el sistema ponga sus colores. Legibilidad antes que
   efecto. */
@media (forced-colors: active) {
  .acento {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: currentColor;
    forced-color-adjust: auto;
    filter: none;
  }
  .display, .t2 { text-shadow: none; }
  .esmerilado .esm-borrosa { display: none; }
  .esmerilado .esm-nitida  { -webkit-mask-image: none; mask-image: none; }
}

/* ── TEXTO ─────────────────────────────────────────────────── */
.entradilla {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--tx-2);
  max-width: 54ch;
  text-wrap: pretty;
}

.cuerpo {
  color: var(--tx-2);
  max-width: var(--ancho-texto);
  text-wrap: pretty;
}

.cuerpo strong, .entradilla strong { color: var(--tx); font-weight: var(--p-ui-med); }

.tenue { color: var(--tx-3); }

/* Etiqueta en mayúscula sostenida — el contrapunto a la serif. */
.etiqueta {
  font-size: var(--fs-nano);
  font-weight: var(--p-ui-med);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tx-3);
}

/* Etiqueta de sección con la línea corta delante. */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-nano);
  font-weight: var(--p-ui-med);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: var(--s-5);
}
.rotulo::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--acento);
  opacity: 0.7;
}

/* ── ESTRUCTURA ────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: var(--s-seccion); }
.seccion-ajustada { padding-block: calc(var(--s-seccion) * 0.6); }

/* Cabecera de sección reutilizable */
.seccion-cab { margin-bottom: var(--s-bloque); }
.seccion-cab .entradilla { margin-top: var(--s-5); }

/* Divisor fino — el mismo en todo el sitio. */
.divisor {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tx-linea) 22%,
    var(--tx-linea) 78%,
    transparent
  );
}

/* Solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Saltar al contenido — aparece al tabular */
.saltar {
  position: absolute;
  top: -100%;
  left: var(--margen);
  z-index: var(--z-modal);
  background: var(--acento);
  color: var(--acento-tinta);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-chico);
  font-size: var(--fs-chico);
  font-weight: var(--p-ui-med);
}
.saltar:focus { top: var(--s-4); }

/* ── APARICIÓN AL SCROLL ───────────────────────────────────
   Se esconde SOLO si hay JavaScript (.js lo pone un script en
   línea del <head>, antes del primer pintado). Sin JS nunca se
   oculta nada, y con JS no hay parpadeo de aparecer-desaparecer. */
.js .rev {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--t-lento) var(--ease),
    transform var(--t-lento) var(--ease);
}
.js .rev.visible { opacity: 1; transform: none; }

.rev-d1 { transition-delay: 0.08s; }
.rev-d2 { transition-delay: 0.16s; }
.rev-d3 { transition-delay: 0.24s; }
.rev-d4 { transition-delay: 0.32s; }
.rev-d5 { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
}

/* ── GRANO ─────────────────────────────────────────────────
   Textura sutil sobre todo el sitio: le quita el plano digital
   al negro y ayuda al vidrio a leerse como material. */
.grano {
  position: fixed;
  inset: 0;
  z-index: var(--z-cuerpo);
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px;
}


/* ════════════════════ 3-glass.css ════════════════════ */
/* ═══════════════════════════════════════════════════════════
   LIQUID GLASS
   ───────────────────────────────────────────────────────────
   El vidrio se construye con cuatro capas superpuestas:

     1. FONDO      tinte casi invisible + desenfoque de lo que hay detrás
     2. BORDE      línea de 0.5px con degradado — no es un borde plano,
                   es luz recorriendo el canto. Aquí vive el efecto.
     3. SPECULAR   reflejo que sigue al cursor (la parte "líquida")
     4. PROFUNDIDAD sombra interior arriba + sombra proyectada abajo

   Todo el efecto está en este archivo. Cambiarlo no toca nada más.
   ═══════════════════════════════════════════════════════════ */

.vidrio {
  --v-tinte:  var(--vidrio);
  --v-borde:  var(--vidrio-borde);
  --v-brillo: var(--vidrio-brillo);
  --v-blur:   var(--vidrio-blur);
  --v-radio:  var(--r-tarjeta);

  /* posición del cursor, la escribe el JS — centro por defecto */
  --mx: 50%;
  --my: 0%;

  position: relative;
  border-radius: var(--v-radio);
  background-color: var(--v-tinte);
  isolation: isolate;

  /* CAPA 4 — profundidad */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.045),   /* labio superior */
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.28),          /* canto inferior */
    0 24px 70px -28px rgba(0, 0, 0, 0.85);         /* peso sobre el fondo */

  transition:
    background-color var(--t-medio) var(--ease),
    box-shadow var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease);
}

/* CAPA 1 — desenfoque. Separado en @supports para que los
   navegadores sin backdrop-filter reciban un fondo sólido usable. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .vidrio {
    -webkit-backdrop-filter: blur(var(--v-blur)) saturate(var(--vidrio-sat));
            backdrop-filter: blur(var(--v-blur)) saturate(var(--vidrio-sat));
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background-color: rgba(255, 255, 255, 0.055); }
}

/* ── CAPA 2 · BORDE DE 0.5px CON DEGRADADO ──────────────────
   Técnica: se pinta un degradado en toda la caja y se recorta
   el centro con mask-composite, dejando solo el marco.
   Un `border` normal no puede tener degradado; esto sí. */
.vidrio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 0.5px;
  pointer-events: none;

  background: linear-gradient(
    158deg,
    var(--v-brillo)                 0%,    /* esquina que recibe la luz */
    var(--v-borde)                 18%,
    rgba(255, 255, 255, 0.05)      44%,
    rgba(255, 255, 255, 0.02)      62%,    /* zona en sombra */
    var(--v-borde)                100%     /* rebote inferior */
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  transition: opacity var(--t-medio) var(--ease);
}

/* ── CAPA 3 · SPECULAR QUE SIGUE AL CURSOR ──────────────────
   Lo que hace que el vidrio se sienta líquido y no impreso.
   Invisible hasta que el puntero entra en la tarjeta. */
.vidrio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-medio) var(--ease);

  background: radial-gradient(
    62% 82% at var(--mx) var(--my),
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 38%,
    transparent 72%
  );
}

/* ── ESTADOS ────────────────────────────────────────────────── */
.vidrio:hover {
  background-color: var(--vidrio-alto);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.3),
    0 32px 90px -30px rgba(0, 0, 0, 0.9);
}
.vidrio:hover::after { opacity: 1; }

/* Solo para tarjetas que además se levantan */
.vidrio-flota:hover { transform: translateY(-4px); }

/* ── VARIANTES ──────────────────────────────────────────────── */

/* Más presencia: para paneles que deben separarse del fondo. */
.vidrio-alto {
  --v-tinte:  rgba(255, 255, 255, 0.05);
  --v-borde:  rgba(255, 255, 255, 0.2);
  --v-brillo: rgba(255, 255, 255, 0.4);
  --v-blur:   34px;
}

/* Menos presencia: para superficies grandes donde el vidrio
   no debe competir con el contenido. */
.vidrio-sutil {
  --v-tinte:  rgba(255, 255, 255, 0.015);
  --v-borde:  rgba(255, 255, 255, 0.09);
  --v-brillo: rgba(255, 255, 255, 0.18);
  --v-blur:   18px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.03);
}

/* Vidrio con el canto en oro — reservado para lo que se vende. */
.vidrio-acento {
  --v-borde:  var(--acento-linea);
  --v-brillo: rgba(255, 255, 255, 0.50);
  background-color: rgba(255, 255, 255, 0.045);
}
.vidrio-acento:hover { background-color: rgba(255, 255, 255, 0.075); }

/* Barra flotante (nav): vidrio con más desenfoque y sin sombra
   proyectada, porque está pegado al borde de la pantalla. */
.vidrio-barra {
  --v-tinte: rgba(13, 13, 13, 0.55);
  --v-blur:  28px;
  --v-radio: var(--r-pastilla);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 12px 40px -18px rgba(0, 0, 0, 0.9);
}

/* Redondeo alternativo */
.vidrio-r-media { --v-radio: var(--r-media); }

/* En pantallas chicas el desenfoque cuesta batería y GPU.
   Se baja sin perder el efecto. */
@media (max-width: 700px) {
  .vidrio { --v-blur: 16px; }
  .vidrio-alto { --v-blur: 20px; }
}


/* ════════════════════ 4-components.css ════════════════════ */
/* ═══════════════════════════════════════════════════════════
   COMPONENTES
   ═══════════════════════════════════════════════════════════ */

/* ── BOTONES ────────────────────────────────────────────────
   Pastilla de radio 100px. Un solo botón de acento por vista:
   si todo destaca, nada destaca. */

/* Los botones son vidrio, igual que las tarjetas: llevan un
   anillo especular que se enciende en las curvas y se iluminan
   por dentro al pasar el ratón. */

.btn {
  --mx: 50%;
  --my: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.9375rem 1.75rem;
  border-radius: var(--r-pastilla);
  font-size: var(--fs-chico);
  font-weight: var(--p-ui-med);
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  color: var(--tx);
  transition:
    transform var(--t-rapido) var(--ease),
    box-shadow var(--t-medio) var(--ease),
    background-color var(--t-medio) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn .flecha { transition: transform var(--t-medio) var(--ease); }
.btn:hover .flecha { transform: translateX(3px); }

/* ── ANILLO ESPECULAR ───────────────────────────────────────
   El borde no es una línea plana: es luz recorriendo el canto.
   Se pinta un degradado en toda la caja y se recorta el centro
   con mask-composite, dejando solo el marco de 1px. Los topes
   claros van al principio y al final para que enciendan las dos
   curvas opuestas, que es donde el vidrio real capta la luz. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.70) 0%,     /* curva superior izquierda */
    rgba(255, 255, 255, 0.14) 26%,
    rgba(255, 255, 255, 0.03) 52%,    /* tramo en sombra */
    rgba(255, 255, 255, 0.26) 80%,
    rgba(255, 255, 255, 0.58) 100%    /* curva inferior derecha */
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  transition: opacity var(--t-medio) var(--ease);
}

/* ── ILUMINACIÓN AL PASAR EL RATÓN ──────────────────────────
   Sigue al cursor: el JS escribe --mx/--my. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-medio) var(--ease);
  background: radial-gradient(
    58% 130% at var(--mx) var(--my),
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.07) 42%,
    transparent 72%
  );
}
.btn:hover::after { opacity: 1; }

/* PRINCIPAL — vidrio con la luz del acento naciendo desde abajo.
   Tiene que distinguirse del secundario de un vistazo: si los dos
   son vidrio gris, no hay jerarquía y el usuario no sabe cuál es
   la acción principal. El color aquí es función, no adorno. */
.btn-primario {
  background:
    radial-gradient(125% 175% at 50% 130%,
      rgba(126, 186, 255, 0.72) 0%,
      rgba(91, 200, 232, 0.42)  38%,
      rgba(79, 209, 165, 0.16)  68%,
      rgba(255, 255, 255, 0.05) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
          backdrop-filter: blur(14px) saturate(190%);
  box-shadow:
    inset 0 -14px 28px -14px rgba(180, 235, 255, 0.75),
    0 12px 38px -14px rgba(91, 200, 232, 0.55);
}

.btn-primario:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 -14px 28px -12px rgba(200, 245, 255, 0.95),
    0 20px 54px -14px rgba(91, 200, 232, 0.85);
}

/* Al pasar el ratón el interior se enciende: es el "como si
   iluminara". Teñido hacia el cian, no blanco puro — con blanco
   el foco lavaba el color y el botón salía MÁS gris al pasar
   por encima, justo lo contrario de lo que se busca. */
.btn-primario:hover::after {
  background: radial-gradient(
    62% 140% at var(--mx) var(--my),
    rgba(198, 240, 255, 0.40) 0%,
    rgba(120, 205, 235, 0.18) 45%,
    transparent 74%
  );
}

.btn.grande {
  padding: 1.125rem 2.375rem;
  font-size: 1rem;
}

/* SECUNDARIO — el mismo vidrio, sin la luz de color. */
.btn-vidrio {
  background-color: var(--vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 26px -16px rgba(0, 0, 0, 0.9);
}
.btn-vidrio:hover {
  background-color: var(--vidrio-alto);
  transform: translateY(-2px);
}

/* TERCIARIO — solo texto con subrayado que crece. */
.btn-texto {
  padding: 0;
  color: var(--tx-2);
  font-size: var(--fs-chico);
  position: relative;
}
.btn-texto::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio) var(--ease);
}
.btn-texto:hover { color: var(--tx); }
.btn-texto:hover::after { transform: scaleX(1); }

/* ── CHIPS / ETIQUETAS ──────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--r-pastilla);
  font-size: var(--fs-micro);
  font-weight: var(--p-ui-med);
  letter-spacing: 0.03em;
  color: var(--tx-2);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.chip-acento {
  color: var(--acento);
  background: var(--acento-halo);
  box-shadow: inset 0 0 0 0.5px var(--acento-linea);
}

.chip .punto {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.chip .punto.vivo { animation: latir 2.4s var(--ease-suave) infinite; }

@keyframes latir {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: 0.45; box-shadow: 0 0 0 3px transparent; }
}

/* Chips como filtro (catálogo de guías) */
.filtro {
  padding: 0.5rem 1rem;
  border-radius: var(--r-pastilla);
  font-size: var(--fs-chico);
  color: var(--tx-3);
  background: transparent;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  transition: all var(--t-rapido) var(--ease);
}
.filtro:hover { color: var(--tx); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.2); }
.filtro[aria-pressed="true"] {
  color: var(--acento-tinta);
  background: var(--acento);
  box-shadow: none;
  font-weight: var(--p-ui-med);
}

/* ── TARJETAS ───────────────────────────────────────────────── */
.tarjeta {
  display: flex;
  flex-direction: column;
  padding: var(--s-7);
  height: 100%;
}

.tarjeta-media {
  padding: 0;
  overflow: hidden;
}

.tarjeta-media .media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-hondo);
}

.tarjeta-media .media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.tarjeta-media:hover .media img { transform: scale(1.045); }

/* Degradado al pie de la imagen para que el texto siempre se lea.
   Solo en tarjetas que TIENEN texto debajo: en las que son solo
   imagen (las capturas de clase) no protegía nada y se limitaba a
   ensuciar la parte baja de la captura. */
.tarjeta-media:has(.cuerpo-tarjeta) .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,.72), transparent 55%);
  pointer-events: none;
}

.tarjeta-media .cuerpo-tarjeta {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.tarjeta-titulo {
  font-family: var(--f-titular);
  font-weight: var(--p-titular);
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.tarjeta-texto {
  font-size: var(--fs-chico);
  color: var(--tx-3);
  line-height: 1.6;
  flex: 1;
}

.tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Que envuelva: el pie lleva precio y botón, y en cuanto el
     precio crece («desde $30 USD» en vez de «$97») el botón se
     salía de la tarjeta en móvil. */
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--tx-linea);
}

/* El precio dentro de una tarjeta es dato secundario, no titular:
   a 48px competía con el nombre del producto. */
.tarjeta-pie .precio-num { font-size: clamp(1.75rem, 4vw, 2.25rem); }

/* Rejilla de tarjetas */
.rejilla {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* ── CARRUSEL HORIZONTAL ────────────────────────────────────
   Scroll nativo con snap: funciona con dedo, rueda, teclado y
   los botones. Sin librerías. */

.carrusel { position: relative; }

.carrusel-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 300px);
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  padding-block: var(--s-2) var(--s-5);
  padding-inline: var(--margen);

  /* barra de scroll oculta pero el scroll sigue funcionando */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }

.carrusel-pista > * { scroll-snap-align: start; }

/* El carrusel sangra hasta el borde de la pantalla: es lo que
   comunica "hay más a la derecha" sin decirlo.
   La pista arranca alineada con el contenedor y se derrama por
   la derecha. Nada de márgenes negativos: el carrusel ya vive
   fuera de .contenedor, así que solo hay que calcular el padding
   que lo alinea con el texto de la sección. */
.carrusel-sangrado .carrusel-pista {
  padding-inline: max(
    var(--margen),
    calc((100vw - var(--ancho)) / 2 + var(--margen))
  );
}

.carrusel-tarjetas-grandes .carrusel-pista {
  grid-auto-columns: minmax(300px, 380px);
}

.carrusel-mandos {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.carrusel-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tx-2);
  background: var(--vidrio);
  box-shadow: inset 0 0 0 0.5px var(--vidrio-borde);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  transition: all var(--t-rapido) var(--ease);
}
.carrusel-btn:hover:not(:disabled) {
  color: var(--tx);
  background: var(--vidrio-alto);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.24);
}
.carrusel-btn:disabled { opacity: 0.28; cursor: default; }

.carrusel-progreso {
  flex: 1;
  height: 1px;
  background: var(--tx-linea);
  position: relative;
  overflow: hidden;
  max-width: 180px;
}
.carrusel-progreso span {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: var(--acento);
  transition: width var(--t-medio) var(--ease), transform var(--t-medio) var(--ease);
}

/* ── ACORDEÓN FAQ ───────────────────────────────────────────
   <details> nativo: accesible y funciona sin JavaScript.
   Divisores finos, sin cajas. */

.acordeon {
  border-top: 1px solid var(--tx-linea);
}

.acordeon-item {
  border-bottom: 1px solid var(--tx-linea);
}

.acordeon-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: var(--p-ui-med);
  color: var(--tx-2);
  transition: color var(--t-rapido) var(--ease);
}
.acordeon-item summary::-webkit-details-marker { display: none; }
.acordeon-item summary:hover { color: var(--tx); }
.acordeon-item[open] summary { color: var(--tx); }

/* El signo + que gira hasta convertirse en × */
.acordeon-item .signo {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform var(--t-medio) var(--ease);
}
.acordeon-item .signo::before,
.acordeon-item .signo::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--acento);
  transition: transform var(--t-medio) var(--ease);
}
.acordeon-item .signo::after { transform: rotate(90deg); }
.acordeon-item[open] .signo { transform: rotate(135deg); }

.acordeon-respuesta {
  padding-bottom: var(--s-6);
  color: var(--tx-3);
  font-size: var(--fs-chico);
  line-height: 1.7;
  max-width: 62ch;
}
.acordeon-respuesta strong { color: var(--tx-2); font-weight: var(--p-ui-med); }

.acordeon-item[open] .acordeon-respuesta {
  animation: desplegar var(--t-medio) var(--ease);
}
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── CIFRAS ─────────────────────────────────────────────────── */
/* Las tres cifras SIEMPRE en fila, en cualquier ancho.
   Nada de apilarlas ni de estados intermedios de dos columnas. */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding: var(--s-4);
}

.cifra {
  text-align: center;
  padding: var(--s-6) var(--s-3);
  /* Convierte la celda en contenedor de consulta: así la etiqueta
     puede dimensionarse según el ancho de SU celda y no según el
     de la ventana, que es lo que de verdad importa aquí. */
  container-type: inline-size;
}

.cifra-num {
  font-family: var(--f-titular);
  font-weight: var(--p-titular);
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tx);
}
.cifra-num .sufijo { color: var(--acento); }

.cifra-et {
  margin-top: var(--s-3);
  text-transform: uppercase;
  color: var(--tx-3);

  /* Nunca en dos renglones: si la celda se estrecha, encoge la
     letra en lugar de partir la frase.
     1cqi = 1% del ancho de la celda, así que la fuente sigue al
     contenedor y no a la ventana — que es lo que importa aquí,
     porque el problema es el ancho de la celda. El tope de
     0.75rem impide que crezca de más en pantallas anchas.
     La primera línea es el respaldo para navegadores sin
     consultas de contenedor. */
  /* Suelo de 9.6px: es lo mínimo que sigue leyéndose en mayúsculas
     y lo máximo que cabe en una pantalla de 320px con las tres
     cifras en fila. El techo de 12px evita que crezca de más en
     pantallas anchas. Entre medias manda el ancho de la celda. */
  font-size: var(--fs-micro);
  font-size: clamp(0.6rem, 15cqi, 0.75rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Se muestra una u otra según el sitio disponible. */
.et-corta { display: none; }

@media (max-width: 620px) {
  .et-larga { display: none; }
  .et-corta { display: inline; }
  /* Menos interletraje en pantalla estrecha: a 10px, 0.1em se come
     casi 4px de los 80 que tiene la celda. */
  .cifra-et { letter-spacing: 0.05em; }
}

/* ── AJUSTE DE PANTALLA ESTRECHA ────────────────────────────
   Va DESPUÉS de las reglas base a propósito. Con la misma
   especificidad gana la última que aparece, y estando antes
   (que es donde la puse primero) el `padding` base de .cifra
   anulaba este y la celda seguía perdiendo 24px de ancho.

   Aquí se recupera cada píxel: menos relleno en la caja de
   vidrio, menos hueco entre columnas y casi nada de relleno
   lateral. Es lo que permite que «Proyectos» entre a un tamaño
   legible con las tres cifras en fila. */
@media (max-width: 560px) {
  .cifras { gap: var(--s-2); padding: var(--s-2); }
  .cifra  { padding: var(--s-5) 0.125rem; }
}

/* ── LISTA CON PALOMITAS ────────────────────────────────────── */
.lista-check { display: flex; flex-direction: column; gap: var(--s-4); }

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  font-size: var(--fs-chico);
  color: var(--tx-2);
  line-height: 1.6;
}

.lista-check li::before {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--acento-halo);
  box-shadow: inset 0 0 0 0.5px var(--acento-linea);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── PASOS NUMERADOS ────────────────────────────────────────── */
.pasos { display: flex; flex-direction: column; }

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--tx-linea);
}
.paso:last-child { border-bottom: 0; }

.paso-num {
  font-family: var(--f-titular);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--acento);
  min-width: 2.25rem;
  font-variant-numeric: tabular-nums;
}

.paso-titulo {
  font-size: 1.0625rem;
  font-weight: var(--p-ui-med);
  margin-bottom: var(--s-2);
}
.paso-texto { font-size: var(--fs-chico); color: var(--tx-3); line-height: 1.65; }

/* ── BLOQUE DE PROMPT COPIABLE ──────────────────────────────── */
.prompt {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.prompt-texto {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--tx-2);
  background: rgba(0, 0, 0, 0.32);
  border-radius: var(--r-chico);
  padding: var(--s-5);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.prompt-copiar {
  align-self: flex-start;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: opacity var(--t-rapido) var(--ease);
}
.prompt-copiar:hover { opacity: 0.7; }
.prompt-copiar.copiado { color: var(--tx); }

/* ── AVISO / NOTA ───────────────────────────────────────────── */
.aviso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-6);
}
.aviso-icono { font-size: 1.375rem; line-height: 1; }
.aviso h3 {
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: var(--p-ui-med);
  letter-spacing: normal;
  line-height: 1.4;
  margin-bottom: var(--s-3);
}
.aviso p  { font-size: var(--fs-chico); color: var(--tx-3); line-height: 1.7; }

/* ── TABLA DE PRECIO ────────────────────────────────────────── */
.precio {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.precio-num {
  font-family: var(--f-titular);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.precio-moneda { font-size: var(--fs-chico); color: var(--tx-3); letter-spacing: 0.08em; }


/* ── PROSA ────────────────────────────────────────────────────
   Texto largo para leer, no para ojear: la política de privacidad y
   lo que venga después. Ancho en `ch` y no en píxeles porque lo que
   cansa la vista es el número de LETRAS por línea, no los milímetros:
   pasadas las 70 el ojo pierde el renglón al volver. */
.prosa {
  max-width: 68ch;
  font-size: var(--fs-cuerpo);
  line-height: 1.75;
  color: var(--tx-2);
}

.prosa h2 {
  font-family: var(--f-titular);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-titular);
  color: var(--tx);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
}
.prosa h2:first-child { margin-top: 0; }

.prosa p { margin-bottom: var(--s-4); }
.prosa strong { color: var(--tx); font-weight: 600; }

.prosa ul {
  margin: 0 0 var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.prosa li { list-style: disc; }

.prosa code {
  font-size: 0.9em;
  color: var(--tx);
  background: var(--vidrio);
  border: 1px solid var(--tx-linea);
  border-radius: var(--r-chico, 6px);
  padding: 0.1em 0.4em;
}


/* ════════════════════ 5-layout.css ════════════════════ */
/* ═══════════════════════════════════════════════════════════
   LAYOUT — nav, hero, pie de página.
   ═══════════════════════════════════════════════════════════ */

/* ── NAV ────────────────────────────────────────────────────
   Barra flotante de vidrio, no pegada al borde. Se encoge
   y gana opacidad al bajar. */

.nav {
  position: fixed;
  top: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: calc(100% - var(--margen) * 2);
  max-width: var(--ancho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: 0.6875rem 0.6875rem 0.6875rem 1.5rem;
  transition:
    top var(--t-medio) var(--ease),
    padding var(--t-medio) var(--ease),
    background-color var(--t-medio) var(--ease);
}

.nav.compacta {
  top: var(--s-2);
  --v-tinte: rgba(13, 13, 13, 0.78);
}

.nav-marca {
  font-family: var(--f-titular);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--tx-2);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Sin cursiva: Manrope no tiene una real y el navegador la
   inclinaría a la fuerza, que a este tamaño canta. El contraste
   lo da el peso. */
.nav-marca em { font-style: normal; font-weight: 800; color: var(--tx); }

.nav-enlaces {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  margin-inline: auto;
}

.nav-enlaces a {
  font-size: var(--fs-chico);
  color: var(--tx-3);
  position: relative;
  padding-block: var(--s-2);
  transition: color var(--t-rapido) var(--ease);
}
.nav-enlaces a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio) var(--ease);
}
.nav-enlaces a:hover { color: var(--tx); }
.nav-enlaces a:hover::after,
.nav-enlaces a[aria-current="page"]::after { transform: scaleX(1); }
.nav-enlaces a[aria-current="page"] { color: var(--tx); }

.nav-cta { flex-shrink: 0; }

/* Botón hamburguesa */
.nav-menu-btn {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  place-items: center;
  flex-shrink: 0;
  background: var(--vidrio);
  box-shadow: inset 0 0 0 0.5px var(--vidrio-borde);
}

.nav-menu-btn .barras {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 16px;
}
.nav-menu-btn .barras span {
  height: 1.5px;
  background: var(--tx);
  border-radius: 2px;
  transition: transform var(--t-medio) var(--ease), opacity var(--t-rapido) var(--ease);
}
.nav-menu-btn[aria-expanded="true"] .barras span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-menu-btn[aria-expanded="true"] .barras span:nth-child(2) { opacity: 0; }
.nav-menu-btn[aria-expanded="true"] .barras span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── MENÚ MÓVIL ─────────────────────────────────────────────── */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(8, 8, 8, 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
          backdrop-filter: blur(30px) saturate(160%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-9) var(--margen);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-medio) var(--ease), visibility var(--t-medio);
}
.menu-movil.abierto { opacity: 1; visibility: visible; }

/* :not(.btn) es imprescindible — sin él, el botón de WhatsApp
   heredaba el tamaño de titular (35px) y se iba a 433px de ancho
   en una pantalla de 390. */
.menu-movil a:not(.btn) {
  font-family: var(--f-titular);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--tx-2);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--tx-linea);
  transition: color var(--t-rapido) var(--ease);
}
.menu-movil a:not(.btn):hover { color: var(--tx); }
.menu-movil a .indice {
  font-family: var(--f-ui);
  font-size: var(--fs-micro);
  color: var(--acento);
  vertical-align: super;
  margin-right: var(--s-3);
  letter-spacing: 0.1em;
}

.menu-movil .btn {
  margin-top: var(--s-7);
  align-self: stretch;
  font-size: var(--fs-cuerpo);
  font-family: var(--f-ui);
}

@media (max-width: 940px) {
  .nav-enlaces, .nav-cta { display: none; }
  .nav-menu-btn { display: grid; }
  .nav { padding: 0.5rem 0.5rem 0.5rem 1.25rem; }
}

/* ── HERO ───────────────────────────────────────────────────
   El retrato delante y arriba; el titular debajo.

   Antes la foto era el fondo y el titular caía justo encima de los
   ojos y la boca. Para que el texto se leyera había que bajar la
   foto al 56% de brillo, y a ese brillo no se reconoce a nadie: se
   peleaban por el mismo sitio y perdían los dos. Ahora cada uno
   tiene el suyo. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* minmax(0,1fr) es obligatorio: por defecto un hijo de grid no
     baja de su ancho de contenido y en móvil el titular empujaba
     la página fuera de la pantalla. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  text-align: center;
  padding: calc(var(--s-9) * 1.6) var(--margen) var(--s-9);
  overflow: hidden;
}

/* Un halo detrás del retrato. Sin él, un círculo sobre negro plano
   parece un recorte pegado; con él, la página tiene profundidad y la
   foto se apoya en algo. */
/* El aura de detrás del retrato, en NEGRO.
 *
 * Era un halo azul del acento, y con el retrato pequeño y metido en su
 * aro funcionaba: le daba un fondo del que despegarse. Con el retrato
 * grande y de bordes difuminados hace lo contrario — la foto tiene
 * fondo negro y se estaba fundiendo contra una mancha de color, que es
 * justo el borde que se quería quitar.
 *
 * Ahora hunde en vez de encender: un pozo un punto más oscuro que la
 * página. No se ve como una forma, se nota como profundidad, y la cara
 * queda flotando sin nada alrededor. */
.hero-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 42% at 50% 30%,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.28) 45%,
      transparent 76%);
}

.hero-contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  /* El ancho lo marcan los saltos de línea del titular, no un
     límite en ch: eso estrangulaba también al párrafo. */
  max-width: min(100%, 1100px);
  min-width: 0;
  width: 100%;
}

/* ── EL RETRATO ─────────────────────────────────────────────
   Sin círculo y sin aro: la foto se funde con la página.

   Las tres cosas iban juntas y por eso se van juntas. El recorte
   redondo pedía un borde que lo rematara —el aro—, y el aro obligaba
   a que la foto fuera pequeña: un círculo grande con un filo de
   color alrededor se come la pantalla y encierra la cara. Quitando
   el filo se puede agrandar, y difuminando los bordes ya no hay nada
   que encierre.

   El difuminado es una MÁSCARA y no un velo encima. Un degradado del
   color del fondo puesto por encima parece lo mismo hasta que
   detrás hay algo que no es fondo plano — y aquí detrás está el aura
   azul de `.hero-aura`, que se vería cortada en un rectángulo. */
.hero-retrato {
  position: relative;
  /* El doble que antes. Puede permitírselo porque ya no tiene bordes
     que defender: lo que antes ocupaba pantalla era el aro, no la
     cara. */
  --tam: clamp(16rem, 38vw, 32rem);
  width: var(--tam);
  aspect-ratio: 1;
  flex: none;
  /* El difuminado deja transparente la sexta parte de la caja por
     abajo, y sin recuperarla el titular quedaría colgando de un
     hueco. Se descuenta del TAMAÑO y no en rem fijos: el hueco crece
     con la foto, así que una medida fija cuadraba en el móvil y
     dejaba un vacío en el escritorio. */
  margin-bottom: calc(var(--tam) * -0.17);
}

/* La máscara va en `picture` y no en la imagen: la imagen se amplía
   con `scale` y se saldría de la caja, y así lo que sobra se apaga
   con el mismo degradado en vez de cortarse en recto. */
.hero-retrato picture {
  display: block;
  width: 100%;
  height: 100%;
  /* Óvalo centrado en la cara, no en la caja: la cabeza está en el
     tercio de arriba, y un difuminado centrado en el medio le comía
     el pelo mientras dejaba fondo de sobra abajo.

     Opaco del todo hasta el 46%, y de ahí se apaga hasta el 80%. Ese
     tramo largo es lo que hace que no se vea dónde acaba: un salto
     corto vuelve a leerse como un borde, redondo pero borde. */
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 40%,
    #000 46%, rgba(0, 0, 0, 0.55) 64%, transparent 80%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 40%,
    #000 46%, rgba(0, 0, 0, 0.55) 64%, transparent 80%);
  /* Sin esto el degradado se repite en mosaico y salen varias
     manchas en vez de una. */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero-retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto es cuadrada (3212×3212) y la cabeza ocupa del 12% al 56%
     de la altura. Se acerca menos que antes —1,3 llenaba el círculo
     de cara— porque ahora hacen falta hombros y aire: es lo que se
     va apagando por los lados, y sin nada que apagar el difuminado
     no tiene de qué. Los números salen de mirar la imagen. */
  object-position: 50% 24%;
  transform: scale(1.14);
  transform-origin: 50% 32%;
  /* A plena luz. Aquí ya no hay texto encima que proteger. */
  filter: none;
}

/* Sin tope en ch: «Santiago Clavijo.» a 104px mide más de 1000px
   y con un límite estrecho se partía por la mitad. Los saltos los
   marca el <br> del titular. */
.hero-contenido .display { max-width: none; }

/* Las cuatro etiquetas de disciplina */
.hero-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.hero-contenido .entradilla {
  max-width: min(100%, 46ch);
  text-align: center;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-2);
}

@media (max-width: 700px) {
  .hero {
    /* Eran 121 px, de cuando encima del retrato no había nada más que
       aire. Ahora el difuminado ya deja transparente la parte de
       arriba de la caja, así que el hueco de verdad era ese relleno
       MÁS lo que la máscara apaga: se veía el doble de grande de lo
       que decía el número. */
    padding-top: calc(var(--s-9) * 1.35);
    padding-bottom: var(--s-5);
    gap: var(--s-5);
  }

  /* Se cambia `--tam` y NO `width`.
     Aquí ponía `width: clamp(8.5rem, 42vw, 12rem)` —de cuando el
     retrato era un círculo pequeño— y hacía dos daños: dejaba la foto
     en 164 px de los 350 que hay de ancho, y pisaba el ancho sin
     tocar `--tam`, así que el margen negativo de abajo se seguía
     calculando sobre 256 y se comía 26 px de más.

     En una pantalla estrecha el retrato es lo primero que se ve, y
     con los bordes difuminados la cara ocupa bastante menos que la
     caja: por eso se lleva casi todo el ancho. */
  .hero-retrato { --tam: clamp(15rem, 76vw, 22rem); }
  .hero-contenido { gap: var(--s-5); }

  /* El hueco entre el botón de WhatsApp y «Sobre mí» eran 130 px: los
     40 del hero más los 90 de la sección. En un teléfono eso es media
     pantalla en blanco. Solo se toca la PRIMERA sección, no el ritmo
     del resto de la página. */
  .hero + .seccion { padding-top: calc(var(--s-seccion) * 0.55); }
}

/* Móviles bajos (iPhone SE, gama de entrada Android): con el retrato
   delante hay un elemento más que meter sobre el pliegue, así que
   se recorta el aire de arriba y el círculo. */
@media (max-width: 700px) and (max-height: 730px) {
  .hero {
    padding-top: calc(var(--s-9) * 1.05);
    padding-bottom: var(--s-4);
  }
  .hero-retrato { --tam: clamp(12rem, 62vw, 17rem); }
}

/* ── HERO INTERNO (páginas que no son la home) ──────────────── */
.hero-pagina {
  padding-top: calc(var(--s-9) * 2.4);
  /* Poco margen abajo: la sección siguiente ya aporta el suyo. */
  padding-bottom: var(--s-7);
  position: relative;
}
.hero-pagina .display,
.hero-pagina .entradilla { margin-top: var(--s-6); }

/* Resplandor detrás del titular interno.
   Ojo con la forma del degradado: antes moría en `transparent 68%`
   dentro de una caja de 900×420, y esa parada temprana dibujaba
   un canto —un rectángulo tenue con los bordes cortados—
   alrededor del titular. Ahora la caída es larga y llega a cero
   justo en el borde de la caja, y un blur remata cualquier
   escalón que quede. */
.hero-pagina::before {
  content: "";
  position: absolute;
  top: -4%;
  left: 50%;
  transform: translateX(-50%);
  /* Nunca más ancho que la ventana: al 128% sacaba 55px por cada
     lado y eso sí desbordaba la página de verdad. */
  width: min(1280px, 100%);
  height: 620px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    58% 100% at 50% 0%,
    rgba(255, 255, 255, 0.042) 0%,
    rgba(255, 255, 255, 0.024) 32%,
    rgba(255, 255, 255, 0.010) 58%,
    rgba(255, 255, 255, 0.003) 80%,
    rgba(255, 255, 255, 0)    100%
  );
  filter: blur(36px);
}

/* ── PIE DE PÁGINA ──────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--tx-linea);
  padding-block: var(--s-9) var(--s-7);
  margin-top: var(--s-seccion);
}

.pie-rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
}

.pie-marca {
  font-family: var(--f-titular);
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-4);
}
.pie-marca em { font-style: normal; font-weight: 800; color: var(--tx); }

.pie-lema { font-size: var(--fs-chico); color: var(--tx-3); max-width: 32ch; }

.pie-col h2 {
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tx-3);
  margin-bottom: var(--s-5);
}

.pie-col ul { display: flex; flex-direction: column; gap: var(--s-1); }

/* Alto mínimo de 28px. Antes medían 17px, por debajo del mínimo
   de 24px que pide WCAG 2.5.8 para un objetivo pulsable — en el
   pie de una web que se ve sobre todo en el móvil, eso significa
   fallar el toque. El inline-flex hace que el área pulsable sea
   solo el ancho del texto y no toda la fila. */
.pie-col a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: var(--fs-chico);
  color: var(--tx-2);
  transition: color var(--t-rapido) var(--ease);
}
.pie-col a:hover { color: var(--acento); }

.pie-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--tx-linea);
  font-size: var(--fs-micro);
  color: var(--tx-3);
}

@media (max-width: 780px) {
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .pie-marca-col { grid-column: 1 / -1; }
  .pie-base { flex-direction: column; align-items: flex-start; }
}

/* ── CTA DE CIERRE ──────────────────────────────────────────── */
.cierre {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) var(--margen);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  position: relative;
  overflow: hidden;
}

/* Luz naciendo del borde inferior — rima con el botón.
   Mismo criterio que en .hero-pagina::before: caída larga hasta
   cero en el borde, sin parada temprana que dibuje un canto. */
.cierre::after {
  content: "";
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  aspect-ratio: 2 / 1;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.042) 34%,
    rgba(255, 255, 255, 0.016) 62%,
    rgba(255, 255, 255, 0.004) 82%,
    rgba(255, 255, 255, 0)    100%
  );
  filter: blur(24px);
}

.cierre .entradilla { text-align: center; }


/* ════════════════════ 6-guias.css ════════════════════ */
/* ═══════════════════════════════════════════════════════════
   GUÍAS — catálogo y página de guía.
   ═══════════════════════════════════════════════════════════ */

/* Línea de metadatos bajo el titular */
.guia-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--tx-linea);
  font-size: var(--fs-chico);
  color: var(--tx-3);
  max-width: 62ch;
}
.guia-meta strong { color: var(--tx); font-weight: var(--p-ui-med); }

/* Filtros del catálogo */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Insignia de nivel sobre la portada */
.media-insignia {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: 3;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pastilla);
  font-size: var(--fs-nano);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx);
  background: rgba(13, 13, 13, 0.62);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
}

/* ── INTRODUCCIÓN (markdown del cuerpo) ─────────────────── */
.guia-intro {
  padding: var(--s-8);
  max-width: 74ch;
}
.guia-intro h2 {
  font-family: var(--f-titular);
  font-weight: var(--p-titular);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
}
.guia-intro p { color: var(--tx-2); margin-bottom: var(--s-4); }
.guia-intro p:last-child { margin-bottom: 0; }
.guia-intro strong { color: var(--tx); font-weight: var(--p-ui-med); }

/* ── PASOS ──────────────────────────────────────────────────
   Vertical, no carrusel: una guía se sigue mientras trabajas,
   y el scroll gana al swipe cuando tienes las manos ocupadas.
   Además Google indexa mejor el contenido en flujo. */

.guia-pasos {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  counter-reset: paso;
}

.guia-paso {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s-8);
  align-items: center;
}

/* Alterna el lado de la imagen: el ojo baja en zigzag. */
.guia-paso:nth-child(even) .guia-paso-texto { order: 2; }

.guia-paso-num {
  display: block;
  font-family: var(--f-titular);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--acento);
  opacity: 0.55;
  margin-bottom: var(--s-4);
  font-variant-numeric: tabular-nums;
}

.guia-paso-texto .etiqueta { display: block; margin-bottom: var(--s-3); }
.guia-paso-texto .t3 { margin-bottom: var(--s-4); }
.guia-paso-texto .cuerpo { font-size: var(--fs-chico); }

.guia-paso-texto code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8125em;
  padding: 0.15em 0.45em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--acento);
}

.guia-paso-img {
  overflow: hidden;
  padding: 0;
  position: relative;
}
.guia-paso-img img { width: 100%; height: auto; display: block; }

/* Capturas verticales (móvil): se limitan para no dominar la fila. */
.guia-paso-img.vertical {
  max-width: 320px;
  margin-inline: auto;
}

.guia-paso-img figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--s-5) var(--s-4) var(--s-3);
  background: linear-gradient(to top, rgba(8, 8, 8, 0.88), transparent);
  color: var(--tx-3);
}

@media (max-width: 860px) {
  .guia-paso { grid-template-columns: 1fr; gap: var(--s-6); }
  .guia-paso:nth-child(even) .guia-paso-texto { order: 0; }
  .guia-pasos { gap: var(--s-9); }
}

/* ── CONSEJOS SÍ / NO ───────────────────────────────────── */
.consejo { position: relative; padding-top: var(--s-8); }

.consejo-marca {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
}
.consejo-si  .consejo-marca { color: var(--acento); background: var(--acento-halo); }
.consejo-no  .consejo-marca { color: var(--tx-3); background: rgba(255, 255, 255, 0.05); }

.consejo-si { box-shadow: inset 0 0 0 0.5px var(--acento-linea); }

.consejo-ejemplo {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 1px solid var(--acento-linea);
  font-size: var(--fs-chico);
  font-style: italic;
  color: var(--tx-3);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 var(--r-chico) var(--r-chico) 0;
}
.consejo-no .consejo-ejemplo { border-left-color: var(--tx-linea); }

/* ── CAPTURAS DE CLASE ──────────────────────────────────────
   Son 2560×1440: 16:9 exacto. Con el 16:10 del marco genérico se
   les recortaba un 10% por arriba y por abajo sin motivo. */
.clase-slot .media { aspect-ratio: 16 / 9; }

/* Rejilla en lugar de carrusel: al ser todas de la misma
   proporción, alineadas en cuadrícula quedan ordenadas — y al no
   competir con el scroll horizontal se pueden servir al doble de
   ancho, que es lo que hace falta para distinguir una grabación
   de pantalla. */
.rejilla-clases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

@media (max-width: 900px) { .rejilla-clases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rejilla-clases { grid-template-columns: 1fr; } }

/* ── MURO DE TESTIMONIOS ────────────────────────────────────
   Capturas de mensajes con proporciones muy distintas (de 2.51 a
   1.55). Un marco común las recortaba a cada una por un sitio
   distinto y se comía el texto.

   Con columnas cada captura conserva su alto natural y se apilan
   sin huecos: se leen enteras y el bloque queda ordenado.
   `break-inside: avoid` evita que una imagen se parta entre dos
   columnas. */
.muro-testimonios {
  columns: 3;
  column-gap: var(--s-5);
}

.testimonio {
  break-inside: avoid;
  margin: 0 0 var(--s-5);
  padding: 0;
  overflow: hidden;
  display: block;
}

.testimonio img,
.testimonio picture {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) { .muro-testimonios { columns: 2; } }
@media (max-width: 600px) { .muro-testimonios { columns: 1; } }

/* ── VÍDEO EN TARJETA ───────────────────────────────────── */
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Un vídeo vertical dentro de una caja de 16:10 enseña la franja de
   en medio, y ahí no está la cara: en la guía del podcast se veía el
   techo y la coronilla.

   En el carrusel de resultados la caja se hace alta y cabe entero. En
   el catálogo NO se toca: allí todas las tarjetas tienen que medir lo
   mismo o la rejilla se descuadra, y para eso está `portadaEncuadre`,
   que dice dónde mirar dentro de cada portada. */
.carrusel-tarjetas-grandes .media:has(video[data-vertical]) {
  aspect-ratio: 4 / 5;
}


/* ════════════════════ 7-paginas.css ════════════════════ */
/* ═══════════════════════════════════════════════════════════
   PIEZAS DE PÁGINA — oferta, cupón y barra fija de compra.
   ═══════════════════════════════════════════════════════════ */

/* ── PLANES ─────────────────────────────────────────────────
   Dos productos enfrentados. El destacado no se hace más grande
   —eso descuadra la comparación— sino que se distingue por el
   canto en acento y la etiqueta. */
.planes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-7);
}

.plan-nombre {
  font-family: var(--f-titular);
  font-weight: var(--p-titular);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plan .precio { margin: 0; }

.plan-resumen {
  font-size: var(--fs-chico);
  color: var(--tx-2);
  line-height: 1.6;
}

/* Empuja el botón al fondo para que las dos tarjetas lo alineen
   aunque tengan distinto número de puntos. */
.plan .lista-check { margin-bottom: auto; }

.btn-plan {
  width: 100%;
  margin-top: var(--s-5);
}

.plan-cupon {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  padding-top: var(--s-4);
  border-top: 1px solid var(--tx-linea);
}

@media (max-width: 760px) {
  .planes { grid-template-columns: 1fr; }
  /* En columna, el recomendado va primero: es la opción que
     quieres que se lea antes en una pantalla estrecha. */
  .plan-destacado { order: -1; }
}

/* ── PRECIO + CUPÓN ─────────────────────────────────────────
   Una sola pieza, no dos cajas sueltas. Antes el cupón flotaba
   al lado del precio sin nada que los relacionara y parecía
   perdido en la página. */
.oferta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: var(--s-7);
  max-width: 520px;
  --v-radio: var(--r-tarjeta);
  overflow: hidden;
}

.oferta-precio {
  padding: var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
}

.oferta-precio .precio { margin: 0; }

/* Lado del cupón: se separa con un troquelado de tique, no con
   un borde recto. Es lo que lo hace leer como cupón. */
.oferta-cupon {
  position: relative;
  padding: var(--s-6) var(--s-6) var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  background: linear-gradient(
    100deg,
    rgba(111, 168, 255, 0.10),
    rgba(79, 209, 165, 0.05)
  );
}

.oferta-cupon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    var(--acento-linea) 0 5px,
    transparent 5px 10px
  );
}

/* El código, pulsable para copiarlo. */
.cupon-codigo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  align-self: flex-start;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--r-chico);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 0.5px var(--acento-linea);
  cursor: pointer;
  transition: background var(--t-rapido) var(--ease),
              box-shadow var(--t-rapido) var(--ease);
}
.cupon-codigo:hover {
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 0.5px rgba(111, 168, 255, 0.5);
}

.cupon-codigo .codigo {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--acento);
}

.cupon-codigo .accion {
  font-size: var(--fs-nano);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
  white-space: nowrap;
}
.cupon-codigo.copiado .accion { color: var(--acento-3); }

.oferta-nota {
  font-size: var(--fs-micro);
  color: var(--tx-3);
  line-height: 1.45;
}

/* En pantalla estrecha se apila: el troquelado pasa a ser
   horizontal, arriba del cupón. */
@media (max-width: 560px) {
  .oferta { grid-template-columns: 1fr; }
  .oferta-precio { padding: var(--s-6); }
  .oferta-cupon  { padding: var(--s-6); }
  .oferta-cupon::before {
    left: 8%;
    right: 8%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      var(--acento-linea) 0 5px,
      transparent 5px 10px
    );
  }
}

/* ── BARRA FIJA DE COMPRA (solo móvil) ─────────────────────
   Aparece al bajar; en escritorio no hace falta porque el CTA
   del nav siempre está visible. */
.barra-fija {
  position: fixed;
  bottom: var(--s-4);
  left: var(--margen);
  right: var(--margen);
  z-index: var(--z-barra);   /* por debajo del menú, no lo tapa */
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-6);
  --v-radio: var(--r-pastilla);
  --v-tinte: rgba(13, 13, 13, 0.82);
}

.barra-fija-precio {
  font-family: var(--f-titular);
  font-size: 1.25rem;
  line-height: 1.1;
}

.barra-fija-sub {
  font-size: var(--fs-nano);
  color: var(--tx-3);
  letter-spacing: 0.04em;
}

.barra-fija .btn { padding: 0.75rem 1.375rem; }

@media (max-width: 860px) {
  .barra-fija { display: flex; }
  /* Espacio al final para que la barra no tape el pie. */
  body:has(.barra-fija) .pie { padding-bottom: calc(var(--s-9) + 40px); }
}

/* ── AJUSTES FINOS DE TIPOGRAFÍA EN MÓVIL ──────────────────
   A 120px el titular se sale en pantallas estrechas; el clamp
   ya lo controla, pero el interlineado necesita un respiro. */
@media (max-width: 560px) {
  .display { line-height: 0.94; }
  .hero-contenido { gap: var(--s-5); }
  .rejilla, .rejilla-2 { grid-template-columns: 1fr; }

  /* Los botones grandes sumaban más ancho del que hay en pantalla
     y no llegaban a envolverse. En móvil van a ancho completo. */
  .hero-acciones { width: 100%; flex-direction: column; }
  .hero-acciones .btn { width: 100%; }
  .btn.grande { padding: 1rem 1.5rem; }
}

/* ── ICONO DE TARJETA ───────────────────────────────────────
   El emoji de cada disciplina, en grande. */
.tarjeta-icono {
  font-size: 2rem;
  line-height: 1;
  display: block;
  margin-bottom: var(--s-5);
}

/* Aviso legal al pie de una tarjeta (riesgo en criptomonedas) */
.nota-legal {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--tx-linea);
  font-size: var(--fs-micro);
  color: var(--tx-3);
  line-height: 1.55;
}

/* ── CONTACTO ───────────────────────────────────────────────── */
.contacto-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: start;
}

.contacto-lista {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.contacto-enlace {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  --v-radio: var(--r-media);
  transition:
    transform var(--t-medio) var(--ease),
    background-color var(--t-medio) var(--ease);
}
.contacto-enlace:hover { transform: translateX(6px); }

.contacto-icono {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  border-radius: var(--r-chico);
  background: var(--acento-halo);
  box-shadow: inset 0 0 0 0.5px var(--acento-linea);
}

.contacto-titulo {
  display: block;
  font-size: var(--fs-chico);
  color: var(--tx);
  font-weight: var(--p-ui-med);
  overflow-wrap: anywhere;
}

.contacto-sub {
  display: block;
  font-size: var(--fs-micro);
  color: var(--tx-3);
  margin-top: 2px;
}

.contacto-flecha {
  margin-left: auto;
  color: var(--acento);
  font-size: var(--fs-chico);
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .contacto-rejilla { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* ── RED DE SEGURIDAD CONTRA DESBORDES ──────────────────────
   Nada debe empujar la página más ancha que la pantalla.
   Si algún día un elemento se pasa, aquí se corta el problema
   en vez de romper todo el layout en móvil. */
img, video, picture, svg, table, pre { max-width: 100%; }

.contenedor, .hero-contenido, .seccion-cab, .tarjeta { min-width: 0; }

/* El texto largo sin espacios (URLs, prompts) no rompe la caja. */
.cuerpo, .entradilla, .tarjeta-texto, .acordeon-respuesta { overflow-wrap: break-word; }