/* UGC Pack · landing. Piezas propias sobre el sistema base (styles.css): mismos colores, tipografías y tono.
   v4 · 08-10-2026: escala de espaciado de 4/8 px, escala tipográfica, radios y sombras unificados, iconos Lucide
   de 18 px con trazo 1,5, contraste AA y microinteracciones que respetan «reducir movimiento». */

:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --icon: 18px;
  --ink-mute: #6B6B6B;            /* antes #8a8a8a: 3:1 sobre el crema; ahora 4,9:1 (AA) */
  --r-md: 16px;
  --ok: #1A7A43;            /* 5,4:1 sobre blanco */
  --ko: #CF3A31;
  /* Escala tipográfica fluida, de 360 a 1440 px de ancho: base de 16 a 17 px, razón 1,2 en móvil y 1,3 en escritorio.
     Cada texto usa un paso con nombre; no hay tamaños sueltos. */
  --fs-xs: 0.75rem;                                          /* 12: etiquetas y letra pequeña */
  --fs-sm: clamp(0.875rem, 0.854rem + 0.093vw, 0.9375rem);    /* 14 → 15: texto secundario */
  --fs-body: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem);      /* 16 → 17: texto */
  --fs-lead: clamp(1.0625rem, 1rem + 0.278vw, 1.25rem);       /* 17 → 20: entradillas */
  --fs-h4: clamp(1.1875rem, 1.125rem + 0.278vw, 1.375rem);    /* 19 → 22: títulos de tarjeta */
  --fs-h3: clamp(1.4375rem, 1.3125rem + 0.556vw, 1.8125rem);  /* 23 → 29: subtítulos dentro de una sección */
  --fs-num: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);         /* 28 → 40: cifras */
  --fs-h2: clamp(2rem, 1.667rem + 1.481vw, 3rem);             /* 32 → 48: títulos de sección (H2) */
  --fs-price: clamp(3rem, 2.667rem + 1.481vw, 4rem);          /* 48 → 64: precio de los planes */
  --fs-display: clamp(2.5rem, 2rem + 2.222vw, 4rem);          /* 40 → 64: titular (H1) */
  --t-display: var(--fs-display);
  --t-h2: var(--fs-h2);
  --t-lead: var(--fs-lead);
  --section-y: clamp(56px, 6vw, 88px);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-xs: 0 1px 2px rgba(17,17,17,0.05);
  --shadow-hover: 0 2px 6px rgba(17,17,17,0.05), 0 14px 32px -12px rgba(17,17,17,0.18);
  --hdr: 73px;
  /* Rejilla de 12 columnas (08-10-2026: «todas las secciones alineadas en escritorio»). Cabecera, secciones claras y oscuras,
     separadores y pie comparten los mismos dos bordes: 1200 px de contenido como mucho y, por fuera, el margen lateral --col.
     La calle es de 8 px, el mismo hueco que entre tarjetas: así 2, 3, 4 y 6 tarjetas seguidas caen justo en las columnas. */
  --grid-max: 1200px;                                          /* ancho del contenido, sin los márgenes */
  --grid-gap: var(--s-2);                                      /* calle entre columnas */
  --page-max: calc(var(--grid-max) + 2 * var(--col));          /* caja de una sección: la rejilla y su margen a cada lado */
  --page-x: max(var(--col), (100% - var(--grid-max)) / 2);     /* margen lateral de lo que va de lado a lado (cabecera, cierre) */
}
@media (max-width: 900px) { :root { --hdr: 61px; } }
@media (max-width: 480px) { :root { --col: 16px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html { scrollbar-gutter: stable; }
.kicker, .eyebrow { color: var(--accent-dim); }

/* Iconos (Lucide): un solo tamaño y un solo trazo en todo el sitio */
.i { width: var(--icon); height: var(--icon); flex: none; display: inline-block; vertical-align: middle;
     fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Botones: hover y pulsación */
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 3px; }

/* ============================================================
   Estructura: ancho fijo por sección (el acordeón ya no ensancha la tarjeta) y ritmo vertical
   ============================================================ */
.hub-main { gap: 0; }
.hub-main > section { width: 100%; }
.ugc-section { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--section-y) var(--col); min-width: 0; }
.ugc-section.ink { max-width: none; background: var(--bg); color: var(--bg-cream); }
.ugc-section.ink > .inner { max-width: var(--grid-max); margin: 0 auto; }
.ugc-section.ink .section-title { color: var(--bg-cream); }
.ugc-section.ink .lead { color: rgba(242,239,231,0.72); }
.ugc-section.ink .kicker, .final-cta .kicker { color: #E58A62; }
:root { --verde: #2E7D4F; }   /* verde de marca: número de lecciones del temario, 5,05:1 sobre blanco */
.section-sep { max-width: var(--grid-max); margin: 0 auto; }
/* Cabecera y pie, en los bordes de la rejilla: la marca arranca donde arrancan los títulos y el botón acaba donde acaban las tarjetas */
.site-header { padding-inline: var(--page-x); }
.site-footer { width: calc(100% - 2 * var(--col)); max-width: var(--grid-max); padding-inline: 0; }

.section-title, .ugc-section h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.028em; }
/* Cabecera de sección: etiqueta, pretítulo, título y entradilla en una pila flex, 16 px entre cada uno y los hijos sin margen.
   Todas las secciones llevan pretítulo (08-10-2026) */
.sec-head { max-width: 760px; margin: 0 0 var(--s-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
#skills .sec-head > :not(.badge-plus) { padding-inline: var(--s-3); }   /* ajuste óptico: el texto de debajo arranca donde el de la etiqueta (12 px, su relleno) */
.sec-head .kicker, .hero-head .kicker, .cta-head .kicker { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; letter-spacing: 0.14em; }
.sec-head .section-title { margin: 0; }
.ugc-section .sec-head .lead { margin: 0; max-width: 62ch; font-size: var(--t-lead); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-soft); }
.ugc-section.ink .sec-head .lead { color: rgba(242,239,231,0.72); }
.ugc-section:not(.ink) .sec-head .lead strong { color: var(--ink); }   /* lo destacado de la entradilla, en negro (08-10-2026) */
.sec-head .pre { margin: 0; max-width: 56ch; font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-soft); }
.fine { font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; letter-spacing: 0.03em; color: var(--ink-mute); margin: var(--s-4) 0 0; }
.ugc-section.ink .fine { color: rgba(242,239,231,0.55); }

/* Etiqueta de lo que solo trae el plan superior (sin el «+» delante) */
.badge-plus { display: inline-flex; align-items: center; width: fit-content; height: 28px; padding: 0 var(--s-3); border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-dim); font-family: var(--sans); font-weight: 800; font-size: 0.8125rem; line-height: 1;
  letter-spacing: -0.005em; white-space: nowrap; }
.badge-plus.sm { height: 24px; padding: 0 10px; margin-left: -10px; font-size: var(--fs-xs); }   /* ajuste óptico: el texto alinea con el título */
.badge-plus.std { background: rgba(17,17,17,0.05); color: var(--ink-soft); }   /* Standard, en gris */
.badge-plus.on-dark { background: rgba(192,96,62,0.22); color: #F0B49B; }

/* ============================================================
   Hero: cabe entero en la pantalla (1440×900 y 375×812)
   ============================================================ */
.ugc-hero {
  --hero-pad: clamp(24px, 3.5vh, 48px);
  overflow-x: clip;   /* el halo de detrás del móvil sobresale un 22 % por cada lado: entre 901 y 1100 px creaba scroll horizontal */
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  min-height: calc(100svh - var(--hdr));
  padding: var(--hero-pad) var(--col);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(32px, 5vw, 80px);
}
.hero-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--s-5); }   /* cabecera y botones: 24 px (16 en móvil) */
.hero-head { display: flex; flex-direction: column; gap: var(--s-4); }   /* pretítulo, titular y entradilla: 16 px (12 en móvil) */
.price-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-4); margin: 0 0 var(--s-4);
  border-radius: var(--r-pill); background: var(--accent-dim); color: #fff; font-family: var(--sans); font-weight: 800; font-size: var(--fs-sm);
  line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -8px rgba(164,79,49,0.6); }
.ugc-hero h1 {
  font-family: var(--sans); font-weight: 900; font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.032em;
  margin: 0; color: var(--ink); text-wrap: balance;
  filter: url(#sprayGrain);
}
.ugc-hero h1 .italic, .final-cta h2 .italic {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent);
  font-size: 0.96em; line-height: 1.02; letter-spacing: -0.02em; margin-top: 0.04em;
}
.ugc-hero .lede { margin: 0; max-width: 50ch; font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink-soft); }
/* Línea de valor dentro del titular: el mismo trazo, a media escala y en tinta */
.ugc-hero h1 .h1-sub, .final-cta h2 .h1-sub { display: block; margin-top: 0.32em; font-family: var(--sans); font-weight: 800; font-size: 0.5em; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.final-cta h2 .h1-sub { color: var(--bg-cream); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }   /* botones y garantías, 16 px entre las dos cajas */
.hero-btns { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero-actions .btn.large, .tier .btn.large { height: 56px; padding: 0 var(--s-5); font-size: 1rem; gap: var(--s-2); }
.hero-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-5);
  overflow: visible; white-space: nowrap; font-family: var(--sans); font-weight: 500; font-size: 0.875rem; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-soft); }
.hero-proof li { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof .i { color: var(--accent-dim); }
.hero-proof .l-short { display: none; }

.hero-media { position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-media::before { content: ""; position: absolute; inset: 8% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(192,96,62,0.16), rgba(192,96,62,0) 72%); }

/* Móvil de verdad: 19,5:9, marco fino, esquinas de iPhone, Dynamic Island y sombra en capas */
.phone {
  --ph: min(680px, calc(100svh - var(--hdr) - 2 * var(--hero-pad)));
  position: relative;
  container-type: inline-size;
  height: var(--ph);
  width: calc(var(--ph) * 9 / 19.5);
  aspect-ratio: 9 / 19.5;
  border-radius: 15% / 6.92%;
  background: linear-gradient(145deg, #3a3a3f 0%, #111113 22%, #0b0b0c 60%, #2a2a2e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    0 0 0 1px rgba(17,17,17,0.5),
    0 2px 4px rgba(17,17,17,0.08),
    0 18px 36px -16px rgba(17,17,17,0.34),
    0 44px 88px -32px rgba(17,17,17,0.42);
}
.phone .screen { position: absolute; inset: 2.4cqi; border-radius: 12.8cqi; overflow: hidden; background: #121214; isolation: isolate; }
.phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; display: block; }
.phone .home { position: absolute; z-index: 3; left: 50%; bottom: 2.2cqi; width: 34cqi; height: 1.3cqi; min-height: 3px; translate: -50% 0; border-radius: 999px; background: rgba(255,255,255,0.82); }
.phone .island { position: absolute; z-index: 3; top: 2.6cqi; left: 50%; width: 30cqi; height: 8.8cqi; translate: -50% 0;
  border-radius: 999px; background: #000; box-shadow: 0 0 0 0.35cqi rgba(255,255,255,0.07); }
.phone .island::after { content: ""; position: absolute; right: 9%; top: 50%; width: 3.2cqi; height: 3.2cqi; translate: 0 -50%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3a55 0 22%, #0a0e16 62%); }
.vbtn { position: absolute; z-index: 4; top: 15cqi; height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-pill); color: #fff;
  background: rgba(12,12,12,0.42); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  font-family: var(--sans); font-weight: 700; font-size: 0.8125rem; line-height: 1; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out); }
.vbtn:hover { background: rgba(12,12,12,0.64); border-color: rgba(255,255,255,0.34); }
.vbtn:active { transform: scale(0.94); }
.vbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vbtn.play { left: 4.4cqi; width: 36px; }
.vbtn.sound { right: 4.4cqi; padding: 0 14px 0 11px; }
.vbtn .ico-play, .vbtn.is-paused .ico-pause, .vbtn .ico-on, .vbtn.is-on .ico-off { display: none; }
.vbtn.is-paused .ico-play, .vbtn.is-on .ico-on { display: inline-block; }
@container (max-width: 250px) {
  .vbtn { height: 32px; min-width: 32px; top: 16cqi; }
  .vbtn.play { width: 32px; left: 5.5cqi; }
  .vbtn.sound { width: 32px; padding: 0; right: 5.5cqi; }
  .vbtn.sound .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 860px) {
  .ugc-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; row-gap: var(--s-6);
    align-items: start; padding-top: var(--s-6); padding-bottom: var(--s-6); }   /* móvil: 32 px arriba (08-10-2026) */
  .hero-proof { justify-content: center; }
  .hero-media::before { inset: 4% 0; }
  /* En móvil, tan ancho como quepa sin pasar nunca del alto visible: siempre se ve entero. svh es el alto con las barras del
     navegador desplegadas (también en los navegadores de Instagram y Facebook); se restan la cabecera fija, 16 px de aire arriba
     y abajo y las zonas seguras de la muesca y del indicador de inicio. La primera línea es el respaldo para navegadores sin svh. */
  .phone { width: calc(min(100%, 420px, calc((100vh - var(--hdr) - var(--s-6) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 9 / 19.5)) * 0.8);
           width: calc(min(100%, 420px, calc((100svh - var(--hdr) - var(--s-6) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 9 / 19.5)) * 0.8);   /* al 80 %; con el ancho y no con transform, para no dejar hueco */
           height: auto; margin: 0 auto; }
}
@media (max-width: 560px) {
  .price-pill { height: 28px; padding: 0 var(--s-3); margin-bottom: var(--s-3); }
  .hero-copy { gap: var(--s-5); }   /* móvil: un poco más de aire en el hero (08-10-2026): 24 px entre cabecera y botones */
  .hero-head { gap: var(--s-4); }   /* 16 px entre pretítulo, titular y entradilla */
  .ugc-hero h1 .h1-sub { margin-top: 0.5em; }   /* «Desde casa. Sin cámara.» se separa un poco más del titular */
  .ugc-hero .lede { line-height: 1.45; }
  .hero-actions { align-items: stretch; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: var(--s-3); }   /* 12 px entre los dos botones */
  .hero-actions .btn.large { width: 100%; height: 50px; padding: 0 var(--s-4); justify-content: center; font-size: 0.96875rem; white-space: nowrap; }
  .hero-proof { gap: 10px; font-size: 0.6875rem; letter-spacing: -0.01em; }
  .hero-proof li { gap: 4px; }
}
@media (max-width: 480px) { .hero-proof .l-full { display: none; } .hero-proof .l-short { display: inline; } }
@media (max-width: 360px) {
  .hero-actions .btn.large { font-size: 0.90625rem; }
  .hero-proof { gap: 8px; font-size: 0.65625rem; }
}

/* ============================================================
   Vídeos de muestra
   ============================================================ */
.reel-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 980px) { .reel-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .reel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reel { container-type: inline-size; margin: 0; aspect-ratio: 9 / 16; max-width: 100%; border-radius: var(--r-md); overflow: hidden; background: #1a1a1a; position: relative;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06); transition: transform 0.3s var(--ease-out); }
.reel video, .step-media video, .step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel .vbtn { top: 8px; }
.reel .vbtn.play { left: 8px; }
.reel .vbtn.sound { right: 8px; }

/* ============================================================
   Por qué otros métodos no funcionan (08-10-2026: escrito para quien no sabe nada de IA, sin «modelo» ni «avatar» sin explicar).
   Cada tarjeta: el problema, lo que hacen otros y, al pie, lo que aprendes aquí. Las tres primeras van abiertas porque
   lo enseña Standard; la última, bloqueada, porque lo resuelve la orquestadora de Premium (módulo 12).
   Subgrid: en cada fila, título, texto y solución de las dos tarjetas arrancan a la misma altura.
   ============================================================ */
.tells-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }   /* 8 px entre tarjetas */
@media (max-width: 600px) { .tells-grid { grid-template-columns: 1fr; } }
.tell { position: relative; min-width: 0; grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: var(--s-3); align-content: start;
  padding: var(--s-5); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.tell-head { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }   /* etiqueta del plan y título: 8 px */
.tell h3 { margin: 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.tell p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); }
.tell .good { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); column-gap: var(--s-2); align-content: start; align-items: start; padding-top: var(--s-3);
  border-top: 1px dashed var(--border-strong); color: var(--ok); font-weight: 600; }
.tell .good .i { margin-top: 3px; }
/* Contenido bloqueado: candado, etiqueta, lo valioso desenfocado y el botón de compra en pequeño */
.lock { min-width: 0; margin: 0; display: grid; align-content: start; justify-items: start; gap: var(--s-2); padding: var(--s-3);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: rgba(17,17,17,0.02); }
.lock .lock-k { margin: 0; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); }
.lock-k .i { color: var(--ink-soft); }
.lock-l { font-weight: 700; color: var(--ink); }
.lock-k .blur { filter: blur(4px); user-select: none; color: var(--ink); }
.btn.sm { height: 36px; padding: 0 14px; gap: 6px; font-size: 0.84375rem; }
/* Frase de cierre de «El problema» con la tipografía de los titulares (08-10-2026: se probaron dos letras a mano y se revirtió), un 12,5 % por debajo del H2: de 28 a 42 px (08-10-2026) */
.tells-claim { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); max-width: 860px; margin: var(--s-8) auto 0; text-align: center; font-family: var(--sans); font-weight: 900; font-size: calc(var(--fs-h2) * 0.875);
  line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
/* El remate va siempre en su propia línea: así la segunda frase corta en «hacen:» y no en «no / hacen:» */
.tells-turn { display: flex; flex-direction: column; align-items: center; }
.tells-claim .italic { font-size: 1.04em; }
/* Todos los títulos llevan el grano de aerosol, también la frase de cierre y los títulos de tarjeta (08-10-2026).
   El filtro #sprayGrain es solo turbulencia + desplazamiento: con feGaussianBlur, WebKit (Safari, Instagram en iPhone) lo deja borroso a 1x y a 2x. */
.tells-claim, .tell h3, .step h3, .fit h3, .tier .name, .bt b, .promise h3, .pr-title, .legal-page h1 { filter: url(#sprayGrain); }

/* ============================================================
   Un ejemplo rápido: los cuatro pasos
   ============================================================ */
.steps-4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 980px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); } }
@media (max-width: 560px) { .steps-4 { grid-template-columns: 1fr; gap: var(--s-7); } }
.step { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.step-media { position: relative; aspect-ratio: 4 / 5; max-width: 100%; margin-bottom: var(--s-2); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-cream-soft); box-shadow: var(--shadow-xs); }
.step .sn { color: var(--accent-dim); font-variant-numeric: tabular-nums; }
.steps-4 > .step { container-type: inline-size; }
/* «3. Fotograma inicial» ocupa 10,08 veces el tamaño de letra: con 9,6cqi cabe en una línea aunque la columna sea estrecha (1024 px); en las anchas manda --fs-h4 (08-10-2026) */
.step h3 { margin: 0; font-family: var(--sans); font-weight: 900; font-size: min(var(--fs-h4), 9.6cqi); line-height: 1.2; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }


/* Paso 2: la luz de la escena, con sus dos fuentes y la paleta sacada del propio fotograma. Se «enciende» al entrar en pantalla. */
.look { container-type: inline-size; }
/* Vistas previas en 4:5: cada imagen encuadrada para que se vea la cara (y en el paso 2, la ventana y la lámpara) */
.step-media img, .step-media video { object-position: center 35%; }
.step-media.look img { object-position: center 25%; }
.look img { transition: filter 1.4s var(--ease-out); }
.js .step:not(.is-in) .look img { filter: saturate(0.25) brightness(1.04) contrast(0.9); }
.look-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border-radius: var(--r-pill);
  background: rgba(12,12,12,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 0.6875rem; line-height: 1; white-space: nowrap;
  transition: opacity 0.5s var(--ease-out) 0.5s, translate 0.5s var(--ease-out) 0.5s; }
.look-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85), 0 0 10px var(--c); }
.look-chip.cool { top: 6%; right: 5%; }
.look-chip.warm { top: 29%; left: 5%; transition-delay: 0.75s; }
.look-palette { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 4%; margin: 0; padding: 8px; list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 10px; border-radius: 14px;
  background: rgba(12,12,12,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.look-palette li { --i: 0; display: grid; gap: 5px; justify-items: center; min-width: 0;
  transition: opacity 0.4s var(--ease-out), scale 0.4s var(--ease-out); transition-delay: calc(0.9s + var(--i) * 70ms); }
.look-palette li:nth-child(2) { --i: 1; } .look-palette li:nth-child(3) { --i: 2; } .look-palette li:nth-child(4) { --i: 3; } .look-palette li:nth-child(5) { --i: 4; }
.look-palette li::before { content: ""; width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.look-palette span { font-family: var(--mono); font-size: 0.59375rem; line-height: 1; letter-spacing: 0; color: rgba(255,255,255,0.86); }
.js .step:not(.is-in) .look-chip { opacity: 0; translate: 0 6px; }
.js .step:not(.is-in) .look-palette li { opacity: 0; scale: 0.8; }
@container (max-width: 340px) { .look-palette span { display: none; } }
@container (max-width: 230px) {
  .look-palette { gap: 6px; padding: 7px; border-radius: 11px; }
  .look-chip { font-size: 0.625rem; padding: 4px 7px 4px 5px; gap: 5px; }
  .look-chip i { width: 8px; height: 8px; }
}

/* ============================================================
   Para quién es: check verde y cruz roja en círculo blanco
   ============================================================ */
.fit-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 760px) { .fit-2 { grid-template-columns: 1fr; } }
.fit { min-width: 0; padding: clamp(24px, 3vw, 32px); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); }
.fit.no { background: rgba(255,255,255,0.5); }
.fit h3 { margin: 0 0 var(--s-5); font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.ticks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); }
.tick { width: 28px; height: 28px; margin-top: -2px; display: grid; place-items: center; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgba(17,17,17,0.1), 0 1px 3px rgba(17,17,17,0.08); }
.tick.ok { color: var(--ok); }
.tick.ko { color: var(--ko); }


/* ============================================================
   Planes
   ============================================================ */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); align-items: stretch; }
@media (max-width: 780px) { .tiers { grid-template-columns: 1fr; } }
.tier { position: relative; min-width: 0; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s-4); align-content: start;
  padding: clamp(24px, 3vw, 36px); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.tier.hot { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); background: linear-gradient(180deg, rgba(192,96,62,0.06), var(--paper) 42%); }
.tier .name { margin: 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.1; letter-spacing: -0.02em; }
.tier .tagline { margin: calc(var(--s-2) * -1) 0 0; font-family: var(--sans); font-weight: 500; font-size: clamp(1.125rem, 1.08rem + 0.185vw, 1.25rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }   /* 18 → 20, en palo seco y sin cursiva para que se lea claro (08-10-2026) */
.tier .price { padding: 20px 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-price); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }   /* 20 px arriba y abajo */
.tier .price small { font-family: var(--mono); font-weight: 400; font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--ink-soft); }
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); align-content: start; }
.tier-list li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-body); line-height: 1.45; color: var(--ink-soft); }
.tier-list .i { margin-top: 2px; color: var(--ok); }        /* verde lo que incluye, en los dos planes (08-10-2026)… */
.tier-list li.no { color: var(--ink-mute); }
.tier-list li.no .i { color: var(--ko); }                    /* …y rojo lo que no */
.tier .btn { justify-self: stretch; justify-content: center; text-align: center; }
.tier .rec { position: absolute; top: var(--s-4); right: var(--s-4); padding: 5px 12px; border-radius: var(--r-pill); background: var(--ok); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: 0.78125rem; line-height: 1.2; }
@media (max-width: 560px) { .tier .btn.large { height: 50px; font-size: 0.96875rem; padding: 0 var(--s-4); } }

/* ============================================================
   Acordeones (temario, preguntas y herramientas): ancho fijo, solo se anima la altura
   ============================================================ */
details.acc { margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
details.acc[open] { border-color: var(--border-strong); }
details.acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5);
  cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: var(--fs-body); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); border-radius: inherit; position: static; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: none; display: none; }
details.acc > summary:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }
details.acc .chev { color: var(--ink-soft); transition: transform 0.32s var(--ease-out); }
details.acc[open]:not(.closing) > summary .chev { transform: rotate(180deg); }
details.acc > .acc-body { margin: 0; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.32s var(--ease-out); }
details.acc.opening > .acc-body, details.acc.closing > .acc-body { grid-template-rows: 0fr; }
.acc-inner { min-height: 0; overflow: hidden; }
.acc-content { padding: 0 var(--s-5) var(--s-5); }

/* ============================================================
   Temario: 10 bloques, título y debajo la descripción
   ============================================================ */
/* Cabecera y módulos: 24 px en todos los anchos (08-10-2026). En escritorio, el mismo hueco dentro de la rejilla, con la sección
   centrada (la cabecera en el eje y los módulos en las 10 columnas del medio); dentro de cada módulo el texto sigue a la izquierda */
@media (max-width: 900px) { #que-incluye { display: flex; flex-direction: column; gap: var(--s-5); } }
#que-incluye > .sec-head { margin: 0; }
.syllabus { display: flex; flex-direction: column; gap: var(--s-2); max-width: 920px; }
.syllabus .block { border-radius: var(--r-lg); }
.syllabus .block > summary { align-items: flex-start; padding: var(--s-4) var(--s-5); }   /* chevron arriba a la derecha */
.syllabus .chev { flex: none; }
.bh { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.bc { align-self: stretch; display: flex; flex-direction: column; gap: var(--s-1); }
/* Mismo estilo que el antetítulo de la sección («Temario») */
.bk { font-family: var(--mono); font-weight: 700; font-size: var(--fs-xs); line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dim); }
.bt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.bt b { font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.02em; }
.bd { font-family: var(--sans); font-weight: 400; font-size: var(--fs-sm); line-height: 1.45; letter-spacing: 0; color: var(--ink-soft); }
.bm { color: var(--verde); font-weight: 600; white-space: nowrap; }
.b-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-left: -10px; }   /* módulos de los dos planes: Standard en gris y Premium en naranja */
.b-tags .badge-plus.sm { margin-left: 0; }   /* el ajuste óptico lo lleva el grupo */
.block .acc-content { display: grid; gap: var(--s-5); padding: var(--s-1) var(--s-5) var(--s-5); }
.mod-h { margin: 0 0 var(--s-2); font-family: var(--sans); font-weight: 800; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.mod-h .k { margin-right: var(--s-2); font-family: var(--mono); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dim); }
.lessons { list-style: none; margin: 0; padding: 0; counter-reset: les; columns: 2 260px; column-gap: var(--s-6); }
.lessons li { counter-increment: les; break-inside: avoid; display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: var(--s-2) 0;
  border-top: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); }
.lessons li::before { content: counter(les, decimal-leading-zero); padding-top: 2px; font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-mute); }

/* ============================================================
   Skills incluidas: ventana de Claude animada y botón para volver a verla
   ============================================================ */
.skills-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .skills-2 { grid-template-columns: 1fr; } }
#skills .lead { max-width: 52ch; font-size: var(--t-lead); line-height: 1.55; }
.skill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.skill-list li { padding-left: var(--s-4); border-left: 2px solid var(--accent); }
.skill-list b { display: block; font-family: var(--mono); font-weight: 600; font-size: 0.875rem; line-height: 1.5; color: var(--bg-cream); }
.skill-list span { font-size: var(--fs-body); color: rgba(242,239,231,0.72); }
.cw-wrap { position: relative; width: 100%; max-width: 520px; justify-self: center; }
.claude-win { width: 100%; border: 1px solid rgba(255,255,255,0.8); background: #141414; color: #EDE9DF; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.claude-win .bar { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; background: #1d1d1d; }
.claude-win .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; display: block; }
.claude-win .bar span { margin-left: var(--s-2); font-family: var(--mono); font-size: var(--fs-xs); color: #8f8a80; }
.cw-replay { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: #8f8a80; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease-out); }
.cw-replay:hover { color: #EDE9DF; background: rgba(255,255,255,0.07); }
.cw-replay:active { transform: rotate(-40deg) scale(0.94); }
.cw-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cw-body { padding: 20px 22px 12px; display: flex; flex-direction: column; gap: var(--s-4); }   /* sin alto mínimo: la ventana se ajusta a su contenido */
.cw-prompt { margin: 0; font-family: var(--mono); font-size: 0.875rem; line-height: 1.6; min-height: 2.6em; }
.cw-prompt .p { color: var(--accent); }
.cw-prompt .caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: #EDE9DF; opacity: 0; }
.claude-win.typing .caret { opacity: 1; animation: cw-blink 1s steps(1) infinite; }
@keyframes cw-blink { 50% { opacity: 0; } }
.cw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4);
  font-family: var(--mono); font-size: 0.8125rem; color: #8f8a80; }
.cw-steps li { display: flex; align-items: center; gap: var(--s-2); transition: color 0.2s ease; }
@media (max-width: 520px) { .cw-steps { grid-template-columns: minmax(0, 1fr); } }   /* móvil: una columna, para que «Lorenzo · fotografía» no parta en dos líneas */
.cw-steps li .i { display: none; color: #4a4a4a; }
.cw-steps li:not(.run):not(.done) .st-wait { display: inline-block; }
.cw-steps li.run, .cw-steps li.done { color: #EDE9DF; }
.cw-steps li.run .st-run { display: inline-block; color: var(--accent); animation: cw-spin 0.8s linear infinite; }
.cw-steps li.done .st-done { display: inline-block; color: var(--accent); }
@keyframes cw-spin { to { transform: rotate(360deg); } }
/* Dónde sale el vídeo: un hueco reservado del mismo tamaño que la ficha final, para que nada salte al terminar (08-10-2026).
   Reposo: borde discontinuo, claqueta y «Aquí aparecerá tu vídeo». Mientras trabajan los agentes (.gen): «Generando tu vídeo…» y
   la claqueta late. Al terminar (.show): ficha de archivo con la miniatura y el nombre en gris. Sobresale 12 px por cada lado para que
   la miniatura alinee con el texto de la ventana (ajuste óptico); el borde de 1 px se descuenta del relleno */
.cw-out { margin: 0 -12px; padding: calc(var(--s-3) - 1px); display: flex; align-items: center; gap: var(--s-3); border-radius: var(--r-md);
  border: 1px dashed rgba(255,255,255,0.16); background: rgba(255,255,255,0.02); transition: background-color 0.35s ease, border-color 0.35s ease; }
.cw-out.show { border-color: transparent; background: rgba(255,255,255,0.08); }
.cw-thumb { position: relative; flex: none; width: 64px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: 10px;
  background: rgba(255,255,255,0.04); color: #5c5850; }
.cw-thumb .i { width: 22px; height: 22px; }
.cw-out.gen .cw-thumb .i { color: var(--accent); animation: cw-pulse 1.2s ease-in-out infinite; }
@keyframes cw-pulse { 50% { opacity: 0.35; } }
.cw-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity 0.35s ease; }
.cw-out.show .cw-thumb video { opacity: 1; }
.cw-name { min-width: 0; display: flex; flex-direction: column; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4; }
.cw-ph { color: #8f8a80; }
.cw-out.gen .cw-ph { color: rgba(237,233,223,0.78); }
.cw-file { color: rgba(237,233,223,0.78); }
.cw-out:not(.show) .cw-file, .cw-out.show .cw-ph { display: none; }

/* ============================================================
   Equipo de agentes (Curso + Skills): cada uno con su muñeco, en tarjetas altas
   ============================================================ */
.agent { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-xl); background: var(--bg); isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08); transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.agent picture, .agent img { display: block; width: 100%; }
.agent img { height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.agent-ph { display: block; width: 100%; aspect-ratio: 2 / 3; }   /* hueco mientras falta la mascota: la tarjeta mide lo mismo */
.agent-txt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s-4) var(--s-4) var(--s-5); text-align: center; }
.agent-name { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.01em; }
.agent-tag { font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
.agent-do { margin: var(--s-1) 0 0; max-width: 26ch; font-size: var(--fs-sm); line-height: 1.35; opacity: 0.88; }
.agents .agent-do { min-height: calc(1.35em * 2); }   /* reserva dos líneas: los nombres de una misma fila quedan a la misma altura */
@media (min-width: 861px) and (max-width: 1179px) { .agents .agent-do { min-height: calc(1.35em * 3); } .agents .agent-tag { white-space: nowrap; letter-spacing: 0.06em; } }   /* tarjetas estrechas: mismas líneas en todas, nombres nivelados */
.agent.claro { color: var(--bg-cream); }
.agent.oscuro { color: var(--ink); }
/* Agentes (08-10-2026): de arriba abajo, en el orden en que pasa. El director, una flecha, los siete agentes, otra flecha
   y la ventana de Claude con el vídeo terminado. El director mide lo mismo que una tarjeta de la rejilla y es la única blanca. */
.team-flow { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); --col-agente: calc((100% - 3 * var(--s-2)) / 4); }
.team-flow > .director-card { width: var(--col-agente); }
.flujo-flecha { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #F0B49B; }
.flujo-flecha .i { width: 24px; height: 24px; }
/* 7 agentes: 4 arriba y 3 centrados debajo (flex con salto de línea, no rejilla, para que la fila corta quede en el centro) */
.agents { align-self: stretch; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.agents > .agent { flex: 0 0 var(--col-agente); min-width: 0; }
@media (max-width: 860px) { .team-flow { --col-agente: calc((100% - var(--s-2)) / 2); } }
/* Agentes en móvil: en bloque, uno debajo de otro; la foto a la izquierda y, a la derecha, nombre, etiqueta y frase en columna. Todo en flex. */
@media (max-width: 560px) {
  .agents { flex-direction: column; flex-wrap: nowrap; }
  .team-flow > .director-card, .agents > .agent { flex: none; width: 100%; }
  .agents > .agent, .director-card { display: flex; flex-direction: row; align-items: center; }
  .agents > .agent > picture, .agents > .agent > .agent-ph, .director-card > picture { flex: none; width: 42%; }
  .agent img, .agent-ph { aspect-ratio: 4 / 5; object-position: center 32%; }
  .director-card img { object-position: center 32%; }
  .agents .agent-txt, .director-card .agent-txt { position: static; flex: 1 1 0; min-width: 0; align-items: flex-start; gap: 4px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-3); text-align: left; }
  .agents .agent-do, .director-card .agent-do { min-height: 0; max-width: none; margin: 0; font-size: var(--fs-sm); }
}
@media (hover: hover) { .agent:hover { transform: translateY(-2px); } }

/* ============================================================
   Promesa: tres pasos visuales
   ============================================================ */
.promise { list-style: none; max-width: 1040px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.promise > li { position: relative; min-width: 0; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.p-ico { width: 48px; height: 48px; margin-bottom: var(--s-2); display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent-dim); }
.p-num { font-family: var(--sans); font-weight: 900; font-size: 1.375rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }   /* números en vez de iconos */
.p-n { font-family: var(--mono); font-weight: 600; font-size: var(--fs-xs); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dim); }
.promise h3 { margin: 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -0.02em; }
.promise p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); }
.promise-note { max-width: 620px; margin: var(--s-6) auto 0; text-align: center; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }
@media (max-width: 820px) {
  .promise { grid-template-columns: 1fr; max-width: 560px; }
  .promise > li { padding-top: var(--s-5); }
}

/* ============================================================
   Preguntas frecuentes
   ============================================================ */
#faq .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-2); }
.faq-list details.acc { margin: 0; padding: 0; }
.faq-list details.acc > summary { padding: var(--s-5); font-size: var(--fs-body); padding-right: var(--s-5); }
.faq-list details.acc > summary::after { content: none; }
.faq-list .acc-content a { color: var(--accent-dim); text-decoration: underline; text-underline-offset: 2px; }
.faq-list .acc-content p { margin: 0; max-width: 64ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
/* Respuestas con lista: qué trae cada plan (08-10-2026) */
.faq-list .acc-content { display: flex; flex-direction: column; gap: var(--s-5); }
.faq-group { display: flex; flex-direction: column; gap: var(--s-3); }
.faq-group > b { font-size: var(--fs-body); font-weight: 700; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.faq-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.faq-ul li { display: flex; align-items: flex-start; gap: var(--s-2); max-width: 64ch; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.faq-ul .i { margin-top: 2px; color: var(--ok); }

/* ============================================================
   Cierre: el mismo titular del hero
   ============================================================ */
.final-cta { width: 100%; max-width: none; margin: 0; padding: clamp(64px, 8vw, 112px) var(--col); background: var(--bg); color: var(--bg-cream); text-align: center;
  display: flex; flex-direction: column; gap: var(--s-6); }   /* cabecera y botones: 32 px */
.cta-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }   /* pretítulo, titular y precio: 16 px */
.final-cta h2 { margin: 0; max-width: 17ch; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; color: var(--bg-cream); }
.final-cta h2 .italic { white-space: normal; }
.final-cta p { margin: 0; font-size: var(--fs-lead); color: rgba(242,239,231,0.72); }
.final-cta .hero-actions { align-items: center; }
.final-cta .hero-btns { justify-content: center; }
.final-cta .btn.ghost { color: var(--bg-cream); border-color: rgba(242,239,231,0.32); background: rgba(242,239,231,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.final-cta .btn.ghost:hover { color: #fff; border-color: rgba(242,239,231,0.55); background: rgba(242,239,231,0.1); }
@media (max-width: 560px) { .final-cta .hero-actions { width: 100%; max-width: 420px; margin: 0 auto; } }

/* ============================================================
   Hover y aparición al hacer scroll
   ============================================================ */
@media (hover: hover) {
  .tier:hover, .promise > li:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .tier.hot:hover { box-shadow: var(--shadow-lg), 0 18px 40px -16px rgba(192,96,62,0.35); }
  .reel:hover { transform: translateY(-2px); }
  details.acc:not([open]):hover { border-color: var(--border-strong); }
}
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--ease-out) var(--rd, 0ms), transform 0.4s var(--ease-out) var(--rd, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Varios
   ============================================================ */
/* El cierre oscuro ya separa el pie: sin línea encima */
.final-cta + .site-footer, main:has(> .final-cta:last-child) + .site-footer { border-top: 0; }
/* Pie del pago: la línea de Managed Payments (pago, impuestos y factura) y, debajo, las condiciones, con flex y gap entre las
   dos. Los datos de la línea no se parten y cada frase de las condiciones va entera si cabe. Los enlaces, subrayados como en
   .lead-legal: es donde se aceptan las condiciones */
.checkout-legal { margin: 0; padding: 12px 20px 18px; display: flex; flex-direction: column; gap: var(--s-2); text-align: center; font-size: 0.78125rem; color: var(--ink-soft); text-wrap: balance; }
.checkout-tax { color: var(--ink); }
.checkout-tax > span { white-space: nowrap; }
.checkout-terms > span { display: inline-block; }
.checkout-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.checkout-close .i, .drawer-close .i { width: var(--icon); height: var(--icon); }
/* La barra de compra oculta asomaba 8 px por abajo (bajaba un 120 % de su alto, menos que sus 20 px de margen): ahora sale del todo */
.sticky-buy { transform: translate(-50%, calc(100% + 40px + env(safe-area-inset-bottom, 0px))); }
.sticky-buy.show { transform: translate(-50%, 0); }
@media (max-width: 480px) {
  .sticky-buy { padding: 0; background: none; box-shadow: none; }   /* en móvil solo flota el botón: sin la cápsula negra */
  .sticky-buy .label { display: none; }
  .sticky-buy .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ============================================================
   Botones de compra dentro de las secciones (08-10-2026). La sección con .stack pasa a pila flex y el hueco
   sale del gap: 48 px, los mismos que dejaba el margen de .sec-head (24 px en móvil). En escritorio es la rejilla de 12 columnas
   la que deja esos 48 px (ver «Rejilla de 12 columnas en escritorio»)
   ============================================================ */
@media (max-width: 900px) { .ugc-section.stack, .ugc-section.ink > .inner.stack { display: flex; flex-direction: column; gap: var(--s-7); } }
.stack > .sec-head, .stack > .promise-note { margin-top: 0; margin-bottom: 0; }
.sec-cta.center { align-items: center; }
.sec-cta.center .hero-btns { justify-content: center; }
.ugc-section.ink .btn.ghost { color: var(--bg-cream); border-color: rgba(242,239,231,0.32); background: rgba(242,239,231,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
@media (hover: hover) { .ugc-section.ink .btn.ghost:hover { color: #fff; border-color: rgba(242,239,231,0.55); background: rgba(242,239,231,0.1); } }
@media (max-width: 560px) {
  .ugc-section.stack, .ugc-section.ink > .inner.stack { gap: var(--s-5); }   /* 24 px entre bloques y botones de compra en móvil */
  .sec-cta.center { align-items: stretch; }
}

/* Móvil: las secciones separan sus bloques con gap y no con márgenes («.sec-head { margin: 0 }» en móvil; regla de maquetar en flex) */
@media (max-width: 560px) {
  .ugc-section, .ugc-section.ink > .inner { display: flex; flex-direction: column; gap: 60px; }   /* 60 px entre bloques (08-10-2026) */
  .sec-head { margin: 0; }
  .tells-claim, .promise-note { margin-top: 0; }
}

/* ============================================================
   Compra por impulso (auditoría del 08-10-2026): la garantía pegada a cada botón de plan y la subida a Premium
   en la tarjeta Standard y dentro del pago
   ============================================================ */
.tier-safe { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); }
.tier-safe .i { width: 16px; height: 16px; color: var(--ok); }
@media (max-width: 359px) { .tier { padding-inline: var(--s-4); } }   /* a 320 px, para que el contenido de las tarjetas de plan respire */
.checkout-head-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.checkout-safe { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 0.78125rem; line-height: 1.3; color: var(--ink-soft); }
.checkout-safe .i { width: 14px; height: 14px; color: var(--ok); }
/* Avisos de la ventana de pago (errores y oferta terminada): cada frase en su párrafo, con una línea en blanco entre ellas. Con <br>,
   Chromium no equilibra la frase de después; en párrafos, sí (el balance va en la regla de texto equilibrado). */
.checkout-aviso { padding: 40px 24px; display: flex; flex-direction: column; gap: 1.55em; gap: 1lh; text-align: center; color: var(--accent-dim); }
.checkout-aviso p { margin: 0; }
.bump { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 20px; background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.bump[hidden] { display: none; }
.bump p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 0.84375rem; line-height: 1.45; color: var(--ink-soft); }
.bump strong { font-weight: 500; color: var(--ink); }   /* como las palabras clave de las tarjetas de precio (.tier-list li strong) */
.bump-p { font-weight: 700; color: var(--accent-dim); }
.bump .btn { flex: none; }
@media (max-width: 440px) { .bump { flex-direction: column; align-items: flex-start; gap: var(--s-2); } }   /* en móvil, texto arriba y botón a su ancho: no compite con el botón de pagar */

/* ============================================================
   Biblioteca de prompts, solo en Premium (08-10-2026): un ejemplo de la biblioteca, en cadena como los agentes.
   Arriba «El fotograma» (la foto de Nora en el anuncio, toma b1, recortada para que ocupe mucho menos alto), la flecha
   y debajo «El prompt» que la hizo, traducido y cortado tras el primer bloque y el arranque del segundo. «Acceso Premium»
   lleva a la compra, donde el prompt entero está en el anexo de la biblioteca. Las dos tarjetas comparten ancho, relleno y cabecera.
   ============================================================ */
#prompt .sec-head > .badge-plus { margin-left: calc(var(--s-3) * -1); }   /* ajuste óptico: el texto de la etiqueta cae en la vertical del título */
.pr-demo { min-width: 0; width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }   /* tarjeta, flecha y tarjeta: 16 px, como la cadena de agentes */
.pr-shot, .pr-prompt { align-self: stretch; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--s-6);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pr-img { align-self: stretch; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-md); background: #ECE7DC; }   /* la cara y el dormitorio, sin el alto entero del 9:16 */
.pr-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
#prompt .flujo-flecha { color: var(--accent-dim); }   /* la flecha de los agentes, en terracota sobre fondo claro */
.pr-top { align-self: stretch; display: flex; align-items: baseline; padding-bottom: var(--s-4); }
.pr-title { font-weight: 900; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.pr-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.pr-parts li { display: flex; flex-direction: column; gap: var(--s-1); }
.pr-k { font-family: var(--mono); font-weight: 700; font-size: var(--fs-xs); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dim); }
.pr-parts p { margin: 0; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; text-wrap: pretty; }
.pr-parts .is-cut p { -webkit-mask-image: linear-gradient(#000 10%, transparent 95%); mask-image: linear-gradient(#000 10%, transparent 95%); user-select: none; }
@media (max-width: 820px) {
  .pr-shot, .pr-prompt { padding: var(--s-5); }
}
@media (max-width: 560px) {
  .pr-img { aspect-ratio: 4 / 5; }   /* en el móvil, de la cabeza a los hombros */
  #prompt .sec-head > .badge-plus { margin-left: 0; }   /* sin sobresalir en el margen de 16 px del móvil… */
  #prompt .sec-head > :not(.badge-plus) { padding-inline: var(--s-3); }   /* …así que el texto entra 12 px, como en los agentes */
}
/* En escritorio, la sección entera centrada, como el temario: cabecera en el eje y la demo en las 6 columnas del medio; dentro de cada
   tarjeta el texto sigue a la izquierda (08-10-2026). La colocación está en «Rejilla de 12 columnas en escritorio» */

/* Palabras clave de las viñetas de los planes: en negro y un punto más de peso (08-10-2026) */
.tier-list li strong { font-weight: 500; color: var(--ink); }
.tier-list li.no strong { color: inherit; }   /* en lo que no incluye, solo el peso: el gris se queda */

/* Texto equilibrado en toda la página (08-10-2026: «utiliza siempre text-wrap balance para que el texto sea visualmente armonioso»):
   títulos, entradillas y textos cortos de tarjetas, pasos y listas en balance; los párrafos largos de las preguntas, en pretty. */
h1, h2, h3, h4, .lead, .pre, .lede, .tell p, #ejemplo p, .ticks li, .tier .tagline, .tier-list li, .bd, .agent-do,
.promise li, .promise-note, .tells-claim, .fine, .lock .lock-k, .director-card .agent-do,
.tier-safe, .bump p, .checkout-aviso p { text-wrap: balance; }
.acc-content p, .legal p { text-wrap: pretty; }

/* ============================================================
   Rejilla de 12 columnas en escritorio (08-10-2026: «todas las secciones alineadas en desktop»).
   Cada sección clara, y el .inner de cada oscura, es una rejilla de 12 columnas con calles de 8 px entre los mismos dos bordes que
   la cabecera, los separadores y el pie (tokens --grid-*, arriba). Todo bloque ocupa las 12 columnas salvo que diga otra cosa, y lo
   que va más estrecho se coloca por columnas y no con max-width: así cada borde cae en una línea de la rejilla. Entre bloques, 48 px
   (24 en el temario), los mismos de la pila flex de antes. Por debajo de 901 px (861 en el hero) manda la pila flex de siempre.
   Para verla encima de la página: ?grid en la URL; la tecla G la enciende y la apaga.
   ============================================================ */
.final-cta { padding-inline: var(--page-x); }   /* el cierre, de lado a lado, con el texto dentro de la rejilla */

@media (min-width: 861px) {
  .ugc-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .hero-copy { grid-column: 1 / 8; }   /* titular, entradilla y botones: columnas 1 a 7; la 8 queda libre */
  /* El móvil, en las columnas 9 a 12 y contra el borde derecho: acaba donde acaba el botón de la cabecera. Mide lo de siempre
     (alto de pantalla, 680 px como mucho) y, si no cabe en sus 4 columnas (de 861 a unos 1.100 px), encoge con ellas */
  .hero-media { grid-column: 9 / -1; justify-self: end; width: min(100%, calc(min(680px, 100svh - var(--hdr) - 2 * var(--hero-pad)) * 9 / 19.5)); }
  .hero-media .phone { width: 100%; height: auto; }
}

@media (min-width: 901px) {
  .ugc-section:not(.ink), .ugc-section.ink > .inner {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--s-7); align-content: start; }
  #que-incluye { row-gap: var(--s-5); }
  :where(.ugc-section:not(.ink), .ugc-section.ink > .inner) > * { grid-column: 1 / -1; min-width: 0; }

  /* Cabeceras: las de la izquierda, en las 10 primeras columnas; las centradas, en las 10 del medio */
  .sec-head, .sec-head.center { max-width: none; margin: 0; }
  .ugc-section .sec-head { grid-column: 1 / span 10; }
  .ugc-section .sec-head.center, #que-incluye > .sec-head, #prompt > .sec-head { grid-column: 2 / 12; align-items: center; text-align: center; }
  #prompt .sec-head > .badge-plus { margin-left: 0; }   /* centrada no hay vertical que alinear: sin el ajuste óptico */
  /* Agentes: la etiqueta sobresale su relleno y el título arranca en la columna 1, como en el resto de secciones */
  #skills .sec-head > .badge-plus { margin-left: calc(var(--s-3) * -1); }
  #skills .sec-head > :not(.badge-plus) { padding-inline: 0; }

  /* Bloques que no van a todo el ancho, colocados por columnas */
  .tells-claim { max-width: none; margin: var(--s-4) 0 0; }   /* 64 px por encima: los 48 de la rejilla más 16 */
  .syllabus { max-width: none; }
  .pr-demo { max-width: none; grid-column: 3 / 11; }
  .promise { max-width: none; margin: 0; }
  .promise-note { max-width: none; margin: 0; grid-column: 3 / 11; }
  #faq .faq-list { max-width: none; margin: 0; grid-column: 2 / 12; }
}

/* Desde 1180 px hay sitio: textos de la izquierda en 8 columnas y los centrados en las 8, 10 o 6 del medio */
@media (min-width: 1180px) {
  .ugc-section .sec-head { grid-column: 1 / span 8; }
  .ugc-section .sec-head.center, #que-incluye > .sec-head, #prompt > .sec-head { grid-column: 3 / 11; }
  .tells-claim { grid-column: 2 / 12; }
  .syllabus { grid-column: 2 / 12; }
  .pr-demo, .promise-note { grid-column: 4 / 10; }
  #faq .faq-list { grid-column: 3 / 11; }
  .cw-wrap { max-width: calc(50% - var(--grid-gap) / 2); }   /* la ventana de Claude, en las columnas 4 a 9: bajo la segunda y la tercera tarjeta de agentes */
  /* Páginas de lectura (legales, gracias y descargas): una sola columna de texto, centrada en las 6 columnas del medio (4 a 9).
     main.legal-page gana a la regla en línea de cada página legal */
  main.legal-page, .downloads { max-width: calc((min(var(--grid-max), 100% - 2 * var(--col)) - var(--grid-gap)) / 2 + 2 * var(--col)); }
  .thanks-card { max-width: calc((min(var(--grid-max), 100%) - var(--grid-gap)) / 2); }
}

/* Capa de revisión (app.js, con ?grid): las 12 columnas en rojo, con los mismos tokens que la maquetación */
.grid-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none; width: min(var(--grid-max), 100% - 2 * var(--col)); margin-inline: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.grid-on .grid-overlay { display: grid; }
.grid-overlay i { background: rgba(207,58,49,0.08); box-shadow: inset 1px 0 rgba(207,58,49,0.45), inset -1px 0 rgba(207,58,49,0.45); }
@media (max-width: 900px) { .grid-overlay { grid-template-columns: minmax(0, 1fr); } .grid-overlay i + i { display: none; } }   /* en móvil y tableta, solo los dos bordes */

@media (prefers-reduced-motion: reduce) {
  .agent, .director-card, .progress { transition: none; }
  .agent:hover { transform: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  details.acc > .acc-body, details.acc .chev, .look img, .look-chip, .look-palette li, .tier, .promise > li, .reel, .vbtn, .cw-replay, .cw-out { transition: none; }
  .js .step:not(.is-in) .look img { filter: none; }
  .js .step:not(.is-in) .look-chip, .js .step:not(.is-in) .look-palette li { opacity: 1; translate: none; scale: none; }
  .cw-steps li.run .st-run, .claude-win.typing .caret, .cw-out.gen .cw-thumb .i { animation: none; }
  .cw-thumb video { transition: none; }
  .cw-replay { display: none; }
  html { scroll-behavior: auto; }
  .btn, .btn::after, .sticky-buy { transition: none; }
  .btn:hover, .btn:active, .btn:hover::after { transform: none; }
  .tier:hover, .promise > li:hover, .reel:hover { transform: none; }
}

/* Móvil: el texto base (entradillas, párrafos, listas y notas) un 6,25 % más grande, en proporción; títulos, botones y etiquetas no cambian (08-10-2026).
   16 → 17 px el cuerpo, 17 → 18 px las entradillas y 14 → 14,9 px el texto pequeño */
@media (max-width: 560px) { :root { --fs-sm: 0.9297rem; --fs-body: 1.0625rem; --fs-lead: 1.1289rem; } }

/* ============================================================
   Kit Personaje, captura de correos y mejora del kit (09-10-2026)
   Piezas de kit.html, del bloque «Lee gratis el Módulo 1» (index.html y kit.html, con captura.js), de la oferta del Módulo 1 al
   cerrar el pago y de la mejora del kit en gracias.html y descargas.html (mejora.js). Con los tokens de arriba, flex + gap,
   8 px entre tarjetas, texto equilibrado y el grano de aerosol en todos los títulos.
   ============================================================ */

/* Bloque «¿Aún no lo tienes claro? Lee gratis el Módulo 1»: la portada del PDF a la izquierda y, a la derecha, título, texto y
   formulario. Desde 1180 px va en las 10 columnas del medio, como el temario y las preguntas; por debajo de 641 px, en columna */
.lead-card { min-width: 0; display: flex; align-items: center; gap: clamp(32px, 4.5vw, 64px); padding: clamp(24px, 3.4vw, 48px);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); }
.lead-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.lead-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.lead-head .kicker, .lead-offer-head .kicker, .mejora-head .kicker { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; letter-spacing: 0.14em; }
.lead-head .section-title { margin: 0; }
.lead-head .section-title .italic { display: block; }   /* el título del módulo («Por qué se nota que es IA.») siempre en su línea, como la cursiva del titular */
.lead-sub { margin: 0; max-width: 56ch; font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-soft); text-wrap: balance; }
@media (min-width: 1180px) { #modulo-1 > .lead-card { grid-column: 2 / 12; } }
@media (max-width: 640px) {
  .lead-card { flex-direction: column; align-items: stretch; gap: var(--s-5); }
  .lead-cover { align-self: center; }
}

/* La portada del Módulo 1, la misma del PDF: fondo negro, «01» en terracota, el título en crema y la entradilla en cursiva. Mide en
   cqi para verse igual a cualquier tamaño (sin la línea de la firma debajo desde el 09-10-2026) */
.lead-cover { container-type: inline-size; flex: none; width: clamp(148px, 17vw, 228px); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.pdf-cover { width: 100%; aspect-ratio: 210 / 297; display: flex; flex-direction: column; justify-content: space-between; padding: 12cqi 10cqi 8cqi;
  overflow: hidden; border-radius: 2.4cqi; background: var(--bg); color: var(--bg-cream);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 2px 4px rgba(17,17,17,0.08), 0 18px 36px -16px rgba(17,17,17,0.34), 0 44px 88px -32px rgba(17,17,17,0.42); }
.pdf-top { display: flex; flex-direction: column; align-items: flex-start; gap: 4.6cqi; }
.pdf-k { font-family: var(--mono); font-weight: 600; font-size: 3.8cqi; line-height: 1; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
.pdf-n { padding-top: 5cqi; font-family: var(--sans); font-weight: 900; font-size: 27cqi; line-height: 0.82; letter-spacing: -0.04em; color: var(--accent); }
.pdf-t { font-family: var(--sans); font-weight: 900; font-size: 10.4cqi; line-height: 0.98; letter-spacing: -0.035em; color: var(--bg-cream); text-wrap: balance; }
.pdf-s { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 5.2cqi; line-height: 1.22; color: var(--accent); text-wrap: balance; }
.pdf-f { display: flex; align-items: baseline; justify-content: space-between; gap: 3cqi; padding-top: 4cqi; border-top: 1px solid rgba(242,239,231,0.12); }
.pdf-brand { font-family: var(--sans); font-weight: 500; font-size: 5cqi; line-height: 1; letter-spacing: -0.01em; color: var(--bg-cream); white-space: nowrap; }
.pdf-brand b { font-weight: 900; }
.pdf-brand em { font-family: var(--sans); font-style: normal; font-weight: 800; color: var(--accent); }
.pdf-min { font-family: var(--mono); font-size: 3.2cqi; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }

/* Formulario de captura (captura.js lo pinta igual en el bloque y en la oferta del pago): correo y botón en una fila si caben, la
   casilla de permiso sin marcar debajo y la línea de privacidad. Campo de 16 px o más para que iOS no amplíe al tocarlo */
.lead-slot { min-width: 0; display: flex; flex-direction: column; }
.lead-form { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.lead-form[hidden], .lead-done[hidden], .mejora[hidden], .mejora-cards[hidden] { display: none; }
.lead-row { display: flex; gap: var(--s-2); }
.lead-input { flex: 1 1 auto; min-width: 0; height: 56px; margin: 0; padding: 0 var(--s-5); border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: #fff; font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; line-height: 1; letter-spacing: -0.005em; color: var(--ink);
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.lead-input::placeholder { color: var(--ink-mute); opacity: 1; }
.lead-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(192,96,62,0.16); }
.lead-input[aria-invalid="true"] { border-color: var(--ko); box-shadow: 0 0 0 4px rgba(207,58,49,0.12); }
.lead-input:read-only { color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .lead-input:not(:focus):not([aria-invalid="true"]):hover { border-color: rgba(17,17,17,0.3); } }
.lead-form .btn { flex: none; height: 56px; padding: 0 var(--s-5); justify-content: center; gap: var(--s-2); font-size: 1rem; }
.lead-form .btn:disabled { pointer-events: none; }
.lead-spin { display: none; }
.lead-form .btn[aria-busy="true"] { cursor: progress; }
.lead-form .btn[aria-busy="true"]::after { display: none; }
.lead-form .btn[aria-busy="true"] .lead-spin { display: inline-block; animation: cw-spin 0.8s linear infinite; }
@container (max-width: 520px) {
  .lead-row { flex-direction: column; }
  .lead-input, .lead-form .btn { height: 50px; }
  .lead-form .btn { padding: 0 var(--s-4); font-size: 0.96875rem; }
}
.lead-check { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-1) 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-soft); }
.lead-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.lead-check label { cursor: pointer; text-wrap: balance; }
.lead-check.is-invalid input { outline: 2px solid var(--ko); outline-offset: 2px; }
.lead-error { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; color: var(--ko); text-wrap: balance; }
.lead-error:empty { display: none; }
.lead-legal { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-mute); text-wrap: balance; }
.lead-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lead-legal a:hover { color: var(--accent-dim); }
.lead-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Enviado: el formulario deja sitio a la confirmación, en verde como la de gracias.html */
.lead-done { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: rgba(46,125,79,0.08);
  font-size: var(--fs-body); line-height: 1.5; color: var(--ink-soft); }
.lead-done:focus { outline: none; }
.lead-done .i { margin-top: 2px; color: var(--ok); }
.lead-done p { margin: 0; display: flex; flex-direction: column; gap: var(--s-1); text-wrap: balance; }
.lead-done b { font-weight: 700; color: var(--ink); }
/* Mientras el bloque está a la vista, o su campo tiene el foco, la barra de compra se esconde: dos llamadas a la vez se pisan y,
   en el móvil, con el teclado abierto taparía el botón */
.lead-hide-sticky .sticky-buy, .lead-hide-sticky .sticky-buy.show { transform: translate(-50%, calc(100% + 40px + env(safe-area-inset-bottom, 0px)));
  visibility: hidden; transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), visibility 0s linear 0.35s; }

/* Oferta del Módulo 1 al cerrar el pago sin pagar (una vez por visitante): ocupa el cuerpo de la misma ventana. El pago sigue montado
   debajo, oculto, por si eliges «Volver al pago» */
.checkout-overlay.is-offer .checkout-body > :not(.lead-offer), .checkout-overlay.is-offer .checkout-safe { display: none; }
.checkout-overlay:not(.is-offer) .lead-offer { display: none; }
.lead-offer { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6) var(--s-6) var(--s-5); animation: lead-in 0.24s var(--ease-out); }
.lead-offer:focus { outline: none; }
@keyframes lead-in { from { opacity: 0; transform: translateY(6px); } }
.lead-offer-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.lead-offer-title { margin: 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink);
  text-wrap: balance; filter: url(#sprayGrain); }
.lead-offer-head p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }
.lead-offer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.lead-link { min-height: 36px; padding: 0; border: 0; background: none; font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; color: var(--ink-soft);
  cursor: pointer; text-decoration: underline; text-decoration-color: rgba(17,17,17,0.28); text-underline-offset: 3px; }
.lead-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.lead-offer-actions .btn.sm { padding: 0 var(--s-4); }
@media (max-width: 600px) { .lead-offer { padding: var(--s-5) var(--s-5) var(--s-4); } }

/* Subida con la oferta de 5 días (kit → Standard o Premium; Standard → Premium). En las tres páginas, la oferta en verde va encima y
   las tarjetas de cada plan debajo, a 8 px: en kit.html, dos tarjetas blancas de 6 columnas con el precio al comprar el kit; en
   gracias.html y descargas.html, dentro de un panel como el de la compra confirmada, la oferta con su fecha y su cuenta atrás, y las
   tarjetas con el precio y el botón «Acceso…» de cada plan (los importes, de la API) */
.mejora { container-type: inline-size; min-width: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.mejora-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.mejora-title { margin: 0; font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem); line-height: 1.02; letter-spacing: -0.028em; }
.mejora-head p { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }
.mejora-head .mejora-hasta { font-size: var(--fs-sm); color: var(--ink-soft); }   /* «hasta el miércoles 14 de octubre a las 23:59», debajo de «Oferta limitada» */
.mejora-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.mejora-card { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); }
.mejora-card.hot { padding: calc(var(--s-5) - 1px); border: 2px solid var(--accent); background: linear-gradient(180deg, rgba(192,96,62,0.06), var(--paper) 42%); }
.mejora-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.mejora-card .name { margin: 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); filter: url(#sprayGrain); }
/* Para quién es cada plan, en una frase: «Lo haces tú, paso a paso.» / «Lo hacen por ti, de principio a fin.» */
.mejora-for { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
/* Rediseño post-compra (09-10-2026): el título de la tarjeta es el beneficio; el único precio va en el botón, con el precio normal
   tachado; botones sin relleno (la descarga es la acción principal y la subida, la secundaria) */
.mejora-card-t { margin: 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; filter: url(#sprayGrain); }
.mejora-card .btn.no-arrow { height: auto; min-height: 52px; padding: 12px 12px; font-size: 0.9375rem; white-space: normal; flex-wrap: wrap; column-gap: 0.35em; row-gap: 2px; text-align: center; }
@container (max-width: 330px) { .mejora-card .btn.no-arrow { font-size: 0.875rem; } }   /* en móvil, el precio y el tachado caben en la misma línea */
.mejora-card .btn b { font-weight: 700; }
/* Dentro de cada tarjeta (Rafa, 09-10-2026): «Oferta limitada» en negro y, debajo en pequeño, hasta cuándo vale */
.mejora-card-oferta { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--s-3); border-bottom: 1px dashed var(--border-strong); }
.mejora-card-k { margin: 0; font-family: var(--sans); font-weight: 800; font-size: var(--fs-body); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.mejora-card-oferta .mejora-hasta { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); }
/* Descargas: los módulos de los planes superiores, difuminados y sin acción, con la tarjeta de subida de ese plan debajo */
.download-card.is-blur { filter: blur(1.6px); opacity: .55; pointer-events: none; user-select: none; }   /* se lee qué módulo es, pero no se puede abrir */
.mejora-slot { margin: var(--s-2) 0 0; }
.mejora-slot .mejora-card { background: var(--paper); }
.mejora-card .btn s { font-weight: 500; color: var(--ink-mute); text-decoration-thickness: 1.5px; }
.mejora-card .btn.accent s { color: rgba(255,255,255,0.75); }
.mejora-card.hot .btn.ghost { border-color: var(--accent); }
.mejora-card .tier-list { flex: 1 1 auto; }
.mejora-card .btn { align-self: stretch; justify-content: center; height: 52px; padding: 0 var(--s-4); font-size: 0.96875rem; }
/* La cuenta de la subida (rediseño del 09-10-2026: «29 € más» no decía más de qué). Una suma como la de un ticket: lo que ya se paga
   o se pagó (el kit, el Standard), «+ lo que falta» y, bajo una raya, el total en grande; debajo, el precio del plan sin la oferta.
   Las cifras van a la derecha y en cifras tabulares, para que se lean como una suma */
.cuenta { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px dashed var(--border-strong); }
.cuenta-suma { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.cuenta-suma > div { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); }
.cuenta-suma dt { min-width: 0; text-wrap: balance; }
.cuenta-suma dd { margin: 0; flex: none; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuenta-suma > .cuenta-total { padding-top: var(--s-3); border-top: 1px solid var(--ink); color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.cuenta-total dd { font-family: var(--sans); font-weight: 900; font-size: var(--fs-num); line-height: 1; letter-spacing: -0.03em; }
.cuenta-ref { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
.mejora-msg { margin: 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--bg-cream); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); text-wrap: balance; }
.mejora-msg:empty { display: none; }
@media (min-width: 641px) { #despues .mejora-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 640px) { .mejora-panel .mejora-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mejora-panel .mejora-cards.is-solo { grid-template-columns: minmax(0, 1fr); }   /* una sola subida (Standard → Premium): la tarjeta, a todo el ancho */
.mejora-panel { padding: 0; background: transparent; border: 0; border-radius: 0; }   /* sin doble caja (Rafa, 09-10-2026): el panel no se ve; las tarjetas van en blanco */
/* «Oferta limitada» en el verde de la marca (el de los checks), oscurecido para que lea AA sobre el fondo claro; la fecha en gris */
.mejora-panel .mejora-head { align-items: center; text-align: center; }   /* título y fecha centrados (Rafa, 09-10-2026) */
.mejora-panel .mejora-title { color: #205A37; font-size: clamp(2.75rem, 7vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; }   /* más grande que «Ya es tuyo» */
.mejora-panel .mejora-hasta { color: var(--ink-soft); }
.mejora-panel .mejora-card { background: var(--paper); border-color: var(--border); }
.mejora-panel .mejora-card.hot { border-color: var(--accent); background: linear-gradient(180deg, rgba(192,96,62,0.08), rgba(192,96,62,0) 55%), var(--paper); }
.mejora-panel .mejora-head { padding-inline: 0; }
@media (max-width: 600px) { .mejora-panel { padding: 32px 24px; } }
/* Kit ya mejorado: «Ya tienes Standard» y el botón a las descargas de ese plan, del alto de los de las tarjetas. En una caja
   estrecha ocupa todo el ancho; por debajo de 292 px (móvil de 360) baja a 14,5 px como los del hero, y por debajo de 272 px
   (móvil de 320), donde no cabe en una línea, el texto se parte en dos, centrado */
.mejora-go { display: flex; }
.mejora-go .btn { width: 100%; min-height: 52px; padding: 0 var(--s-5); justify-content: center; font-size: 0.96875rem; }
@container (max-width: 480px) { .mejora-go .btn { flex: 1 1 auto; padding: 0 var(--s-4); } }
@container (max-width: 292px) { .mejora-go .btn { font-size: 0.90625rem; } }
@container (max-width: 272px) { .mejora-go .btn { padding: var(--s-3) var(--s-4); white-space: normal; text-align: center; text-wrap: balance; line-height: 1.25; } }
/* Gracias: la mejora va debajo de la compra confirmada, con el mismo ancho; descargas: entre el material y el pie */
.thanks { gap: var(--s-7); align-content: start; }
/* En el móvil, «Ir a mis descargas» con la medida de los botones del hero en el móvil: con la de escritorio (254 px sin partir)
   ensanchaba la columna a 320 px y la tarjeta y la subida se quedaban sin margen a la derecha */
@media (max-width: 560px) { .thanks-cta .btn.large { height: 50px; padding: 0 var(--s-5); font-size: 0.96875rem; } }
/* «Ir a mis descargas» y «Volver al inicio»: 8 px entre ellos; en el móvil, los dos a todo el ancho y con el texto centrado
   (Rafa, 09-10-2026). En escritorio siguen apilados a la izquierda */
/* Todos los botones a todo el ancho, también en escritorio (Rafa, 09-10-2026) */
.thanks-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); }
.thanks-actions .btn { width: 100%; height: 52px; padding: 0 var(--s-5); justify-content: center; font-size: 0.96875rem; }
.thanks > .mejora { width: 100%; max-width: 640px; }
@media (min-width: 1180px) { .thanks > .mejora { max-width: calc((min(var(--grid-max), 100%) - var(--grid-gap)) / 2); } }
.downloads > .mejora { margin: 40px 0; }

/* Oferta de la subida (Rafa, 09-10-2026): verde, positiva y muy visible, la protagonista. El verde de rafa.prompts (#2E7D4F → #205A37)
   con todo el texto en blanco puro: 5,05:1 sobre el verde más claro, AA también en la letra pequeña. Va dentro de la colección de
   tarjetas (.mejora-cards), encima de ellas y a 8 px, con su radio: en kit.html, «Oferta al comprar el kit» con los dos importes; en
   gracias.html y descargas.html, con la fecha límite y la cuenta atrás viva que pinta mejora.js. El relleno lateral es el de las
   tarjetas más su borde de 1 px, para que el texto arranque donde arranca el de las tarjetas (ajuste óptico) */
.oferta { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  padding: calc(var(--s-5) + 1px); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--verde), #205A37); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.oferta[hidden] { display: none; }
.oferta-head { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.oferta p { margin: 0; color: #fff; text-wrap: balance; }
.oferta-k { font-family: var(--mono); font-weight: 600; font-size: var(--fs-xs); line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; }
.oferta-t { margin: 0; font-family: var(--sans); font-weight: 900; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; color: #fff; text-wrap: balance; filter: url(#sprayGrain); }
.oferta-p { max-width: 62ch; font-size: var(--fs-body); line-height: 1.55; }
/* Cuenta atrás: pastilla oscura sobre el verde (7,3:1), en una línea, que sobresale su relleno para que el texto caiga en la vertical
   del título. role="timer": los lectores de pantalla no la anuncian cada minuto */
.oferta .oferta-reloj { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; margin-left: calc(var(--s-3) * -1); padding: 0 var(--s-3);
  border-radius: var(--r-pill); background: rgba(0,0,0,0.22); font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.oferta-reloj .i { width: 16px; height: 16px; }
/* kit.html · «Después del kit» (rediseño del 09-10-2026), en este orden: el título y la entradilla (lo que trae el kit y que lo pagado
   cuenta) → el verde con los dos totales → las tarjetas de cada plan con su cuenta → el botón, con «No tienes que elegir ahora…»
   debajo. La frase fuerte de la entradilla, en tinta y con peso medio (una frase entera a 800 compite con el título) */
#despues .sec-head .lead strong { font-weight: 600; }
/* «No tienes que elegir ahora…»: el icono va en la línea del texto, para que no se quede solo a la izquierda cuando la frase se parte
   en el móvil */
#despues .sec-cta .tier-safe { display: block; text-align: center; text-wrap: balance; }
#despues .sec-cta .tier-safe .i { vertical-align: -3px; margin-right: 6px; }
/* Cifras y su plan, juntos: «Standard 64 €» no se parte en el título verde */
.oferta-t .nw { white-space: nowrap; }
/* El verde, protagonista: más aire arriba y abajo que una tarjeta (el lateral sigue siendo el de las tarjetas, por el ajuste óptico) y
   el título con los dos importes a tamaño de subtítulo. Con las tarjetas de dos en dos, el antetítulo y el título van sobre la tarjeta
   Standard y el texto sobre la Premium, cada uno en la vertical del texto de su tarjeta (el hueco entre columnas es el de las tarjetas
   más sus dos rellenos) */
#despues .oferta { padding-block: var(--s-6); }
#despues .oferta-t { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.025em; }
@media (min-width: 641px) {
  #despues .oferta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--s-2) + 2 * (var(--s-5) + 1px)); align-items: center; }
}
/* Panel de gracias y descargas estrecho (móviles de 320 a 350 px: caja de 260 px o menos): tarjetas y oferta con 16 px de relleno (el
   texto de las dos sigue en la misma vertical) y botones y cuenta atrás un punto más pequeños, para que «Acceso Premium · 89 €» y
   «Quedan 5 días y 23 horas» quepan en una línea dentro de su caja. Va detrás de las reglas de las tarjetas y de la oferta para ganarles */
@container (max-width: 260px) {
  .mejora-card { padding: var(--s-4); }
  .mejora-card.hot { padding: calc(var(--s-4) - 1px); }
  .mejora-card .btn { gap: 6px; padding: 0 var(--s-3); font-size: 0.84375rem; }
  .oferta { padding: calc(var(--s-4) + 1px); }
  .oferta .oferta-reloj { font-size: 0.8125rem; }
}

/* kit.html · «Cómo queda»: los cuatro pasos de Nora del ejemplo de index.html. Los tres primeros los enseña el kit; el cuarto, el vídeo,
   va desenfocado con la etiqueta «En Standard por 75 €». En el móvil, de dos en dos para que la página siga siendo corta */
.step.is-locked .step-media img { filter: blur(9px) saturate(0.85); scale: 1.12; }
.look-chip.lock-chip { inset: 0; width: fit-content; height: fit-content; margin: auto; padding: 7px 12px 7px 10px; font-size: 0.75rem; }
.look-chip.lock-chip .i { width: 14px; height: 14px; }
/* «En Standard por 75 €» en una línea también en las columnas estrechas del móvil (dos pasos por fila a 320 y 375 px) */
@container (max-width: 190px) {
  .look-chip.lock-chip { gap: 4px; padding: 6px 9px 6px 8px; font-size: 0.6875rem; }
  .look-chip.lock-chip .i { width: 12px; height: 12px; }
}
@container (max-width: 150px) { .look-chip.lock-chip { font-size: 0.625rem; padding: 5px 8px 5px 7px; } }
@media (max-width: 560px) { #como-queda .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); } }

@media (prefers-reduced-motion: reduce) {
  .lead-input { transition: none; }
  .lead-form .btn[aria-busy="true"] .lead-spin, .lead-offer { animation: none; }
  .lead-hide-sticky .sticky-buy { transition: none; }
}
/* En pantallas táctiles el :hover se queda pegado tras tocar: la X del pago se quedaba negra al pasar a la oferta del Módulo 1 */
@media (hover: none) { .checkout-close:hover { background: rgba(17,17,17,0.06); color: var(--ink); transform: none; } }

/* Ilustraciones (fieltro, de la familia de los agentes): decorativas, una por pantalla como mucho */
.ilu { display: block; line-height: 0; }
.ilu img { display: block; max-width: 100%; }
.thanks-ilu { margin-bottom: 20px; padding-top: var(--s-2); }   /* encima del título, con aire por arriba */
.thanks-ilu img { width: 112px; height: 112px; }
@media (min-width: 600px) { .thanks-ilu img { width: 128px; height: 128px; } }

/* kit.html: las pastillas de precio de la oferta no son botones (la oferta solo existe tras comprar el kit): sin clic ni cursor de enlace */
.precio-oferta, .precio-oferta:hover { pointer-events: none; cursor: default; transform: none; box-shadow: none; }

/* Gracias en el móvil: la oferta entra en la primera pantalla (Rafa, 10-10-2026): tarjeta más compacta y menos hueco hasta la oferta */
.thanks-after { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: var(--s-4); }
@media (min-width: 1180px) { .thanks-after { max-width: calc((min(var(--grid-max), 100%) - var(--grid-gap)) / 2); } }
.thanks-after .thanks-help { margin: 0; }
@media (max-width: 600px) {
  .thanks { gap: var(--s-5); }
  .thanks-card { padding: 24px 20px; }
  .thanks-ilu { margin-bottom: 12px; padding-top: 0; }
  .thanks-ilu img { width: 80px; height: 80px; }
  .thanks h1 { margin-bottom: 8px; }
  .thanks .lede { margin-bottom: 16px; }
}