/* ============================================================================
   UGC Pack · versión «mezcla» (Rafa, 10-10-2026)
   Maqueta, textos y títulos de la web actual (Archivo 900 + cursiva Newsreader + aerógrafo #sprayGrain: el «estilo ugcpack»).
   De Eductix se toma solo la piel: colores, fondo, formas, sombras, espaciado, botones, animaciones y la maqueta del temario.
   Se carga después de styles.css y ugc.css; no cambia ningún gancho de los scripts.
   ============================================================================ */
:root {
  --bg-cream: #EAF0EF;            /* fondo de página de Eductix */
  --bg-cream-soft: #E3EBE9;
  --paper: #F3FAF5;               /* superficie menta de las tarjetas */
  --ink: #0A0915;                 /* texto principal */
  --ink-soft: #36403D;            /* texto secundario */
  --ink-mute: #5B6662;
  --accent: #0D883C;              /* verde de acción */
  --accent-dim: #003B2D;          /* verde oscuro: hover, etiquetas, títulos de tarjeta */
  --accent-soft: rgba(13, 136, 60, 0.08);
  --border: rgba(0, 59, 45, 0.08);
  --border-strong: rgba(0, 59, 45, 0.16);
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xs: none; --shadow-hover: none;   /* Eductix no usa sombras: el relieve lo da el color */
  --r-md: 20px; --r-lg: 20px; --r-xl: 20px;
  --verde: #0D883C;
  --section-y: clamp(36px, 4.2vw, 60px);   /* 60 arriba y abajo: 120 entre secciones, como Eductix */
  --ease-out: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-x: cubic-bezier(0.44, 0, 0.56, 1);
}
body { background: var(--bg-cream); color: var(--ink); }
::selection { background: var(--accent); color: #fff; }

/* Títulos: el estilo ugcpack (Archivo 900, cursiva Newsreader y aerógrafo) en el verde oscuro de Eductix; la cursiva en el verde de acción */
h1, h2, .section-title, .ugc-hero h1, .tell h3, .step h3, .fit h3, .tier .name, .final-cta h2 { color: var(--accent-dim); }
.ugc-hero h1 .h1-sub, .final-cta h2 .h1-sub { color: var(--accent-dim); }
.italic, em.italic, .section-title .italic, .ugc-hero h1 .italic, .final-cta h2 .italic { color: var(--accent); }
/* Subrayado de fondo verde en el H1 de las landings (Rafa, 13-10-2026): la palabra clave en blanco sobre el verde de acción, sin
   partirse entre líneas. El aerógrafo #sprayGrain del título también le da el borde granulado. */
.ugc-hero h1 .marca-h1 { display: inline-block; white-space: nowrap; background: var(--accent); color: #fff; padding: 0 .1em .02em; margin: 0 -.02em; line-height: 1.02; }
.lead, .lede, .sec-head .lead, .ugc-section .sec-head .lead { color: var(--ink-soft); }

/* Fondo del hero: degradado de blanco a gris verdoso, rejilla fina y tres manchas de color desenfocadas (Eductix) */
.ugc-hero { position: relative; isolation: isolate; }
.ugc-hero::before { content: ""; position: absolute; z-index: -2; top: calc(-1 * var(--hdr)); bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    linear-gradient(rgba(0,59,45,.035) 1px, transparent 1px) 0 0 / 68px 68px,
    linear-gradient(90deg, rgba(0,59,45,.035) 1px, transparent 1px) 0 0 / 68px 68px,
    linear-gradient(180deg, #FFFFFF 0%, var(--bg-cream) 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%); pointer-events: none; }
.ugc-hero::after { content: ""; position: absolute; z-index: -1; top: -10%; right: -8%; width: 60%; height: 90%; pointer-events: none; opacity: .22; filter: blur(110px);
  background: radial-gradient(40% 45% at 30% 40%, #003B2D 0 60%, transparent 61%), radial-gradient(35% 40% at 70% 55%, #0D883C 0 60%, transparent 61%), radial-gradient(30% 35% at 55% 20%, #A5A6F6 0 60%, transparent 61%); }
.hero-media::before { background: none; }   /* el halo terracota/esmeralda de detrás del móvil se sustituye por las manchas */

/* Cabecera: transparente sobre el fondo, sin línea; en móvil, menta */
.site-header { background: rgba(234, 240, 239, 0.82); border-bottom: 0; }
@media (max-width: 900px) { .site-header { background: #F3FAF5; } }
.brand em { color: var(--accent); }

/* Botones de Eductix: pastilla plana verde, 53 px, flecha que gira 45° y fondo a casi negro al pasar (0,5 s, curva de Framer) */
.btn, .btn.accent { height: 53px; padding: 0 22px; gap: 10px; border: 0; border-radius: 60px; background: var(--accent); color: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-weight: 600; transition: background-color .5s var(--ease-x), color .5s var(--ease-x), transform .2s var(--ease-x); }
.btn:hover, .btn.accent:hover { background: var(--ink); color: #fff; transform: none; box-shadow: none; filter: none; }
.btn:active { transform: scale(.98); box-shadow: none; }
.btn::after { transition: transform .5s var(--ease-x); }
.btn:hover::after { transform: rotate(-45deg); }
.btn.large { height: 56px; padding: 0 24px; }
.btn.ghost { background: transparent; color: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-dim); }
.btn.ghost:hover { background: var(--accent-dim); color: #fff; }
.btn.dark { background: var(--ink); box-shadow: none; } .btn.dark:hover { background: var(--accent); }
.hero-btns .hero-alt, .hero-alt { color: var(--accent-dim); }
.hero-btns .hero-alt:hover, .hero-alt:hover { color: var(--accent); }

/* Pretítulos: pastilla con borde fino, como las etiquetas de sección de Eductix (el texto sigue en mayúscula mono de ugcpack) */
.sec-head .kicker, .hero-head .kicker, .cta-head .kicker { padding: 7px 14px; border: 1px solid var(--ink-soft); border-radius: 60px; color: var(--ink); letter-spacing: .1em; line-height: 1; }
.ugc-section.ink .sec-head .kicker { border-color: rgba(243,250,245,.4); color: #F3FAF5; }

/* Tarjetas: menta, radio 20, sin borde ni sombra */
.tell, .tier, .step, .fit, .promise > li, .agent, details.acc, .lead-card, .pr-card, .faq-list details.acc, .mejora-card { border: 0 !important; box-shadow: none !important; background: var(--paper); border-radius: 20px; }
.tier.hot { background: var(--accent); }
.tier.hot .name, .tier.hot .tagline, .tier.hot .price, .tier.hot .tier-list li, .tier.hot .tier-list li strong, .tier.hot .tier-safe { color: #fff; }
.tier.hot .tier-list .i, .tier.hot .tier-safe .i { color: #fff; }
.tier.hot .rec { background: #F3FAF5; color: var(--ink); }
.tier.hot .btn { background: #F3FAF5; color: var(--accent-dim); } .tier.hot .btn:hover { background: var(--ink); color: #fff; }
.tier:hover, .promise > li:hover { transform: none; box-shadow: none !important; }
.badge-plus { background: var(--accent); color: #fff; } .badge-plus.std { background: #F3FAF5; color: var(--ink); } .badge-plus.on-dark { background: rgba(243,250,245,.16); color: #F3FAF5; }

/* Secciones oscuras (muestras y agentes): el verde oscuro de Eductix */
.ugc-section.ink, .final-cta { background: #003B2D; }
.ugc-section.ink .section-title, .ugc-section.ink h2, .final-cta h2 { color: #fff; }
.ugc-section.ink .section-title .italic, .final-cta h2 .italic { color: #8FD8A9; }
.ugc-section.ink .sec-head .lead, .final-cta p { color: rgba(243,250,245,.75); }

/* Separadores: Eductix no los usa; el ritmo lo dan los 120 px entre secciones */
.section-sep { display: none; }

/* Pie: verde oscuro de lado a lado */
.site-footer { background: #003B2D; color: rgba(243,250,245,.75); max-width: none; width: 100%; padding: 40px max(var(--col), calc((100% - 1200px) / 2)); border: 0; }
.site-footer a, .site-footer .handle { color: rgba(243,250,245,.75); } .site-footer a:hover { color: #fff; }

/* Animaciones: aparición de Eductix (sube 24 px, 0,6 s, curva de Framer) */
.reveal { transition-duration: .6s !important; transition-timing-function: var(--ease-x) !important; }

/* ============================================================================
   Temario con la maqueta de Eductix: columna izquierda fija (pretítulo, título ugcpack, descripción y botón al pie)
   y a la derecha la lista de módulos sin cajas, con línea fina, «Módulo NN» en verde, pastillas y triángulo
   ============================================================================ */
.temario-split { display: grid; grid-template-columns: minmax(0, 410px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.temario-split > .sec-head { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0; max-width: none; min-height: min(560px, calc(100vh - var(--hdr) - 48px)); }
.temario-split > .sec-head .temario-pie { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.temario-split .syllabus { max-width: none; gap: 0; }
.temario-split .syllabus details.acc { background: transparent !important; border-radius: 0; border-bottom: 1px solid rgba(0,88,67,.25) !important; }
.temario-split .syllabus details.acc > summary { padding: 22px 0; }
.temario-split .syllabus .bk { color: var(--accent); }
.temario-split .syllabus .bt b { font-family: var(--sans); font-weight: 900; color: var(--accent-dim); filter: url(#sprayGrain); }
.temario-split .syllabus .bm { color: var(--accent); }
.temario-split .syllabus .chev { width: 22px; height: 22px; color: var(--accent); }
.temario-split .block .acc-content { padding: 0 0 22px; }
@media (max-width: 1099px) { .temario-split { grid-template-columns: minmax(0, 1fr); } .temario-split > .sec-head { position: static; min-height: 0; } }
.sec-head .kicker, .hero-head .kicker, .cta-head .kicker { width: fit-content; align-self: flex-start; }
.sec-head.center .kicker { align-self: center; }
.temario-split > .sec-head { grid-column: 1; grid-row: 1; max-width: 410px; margin-bottom: 0; }
.temario-split > .syllabus { grid-column: 2; grid-row: 1; }
@media (max-width: 1099px) { .temario-split > .sec-head, .temario-split > .syllabus { grid-column: 1; grid-row: auto; max-width: none; } }
.tier.hot .price small { color: rgba(255,255,255,.8); }
.tier.hot .precio-oferta-txt, .tier.hot .precio-oferta-txt b { color: #fff; }
.tier.hot .precio-oferta-txt s { color: rgba(255,255,255,.7); }

/* ============================================================================
   Correcciones de Rafa (10-10-2026, ronda de liquid glass)
   ============================================================================ */
:root {
  /* Espaciado título → texto de apoyo → CTA, el mismo en todas las cabeceras */
  --space-heading-body: 8px;
  --space-body-cta: 24px;
  /* Liquid glass: solo en las tarjetas de «Así se hizo» (kit) y en la tarjeta Standard de «Después del Kit Personaje» */
  --glass-blur: 18px;
  --glass-saturate: 1.6;
  --glass-bg: rgba(243, 250, 245, 0.62);             /* texto #36403D / #003B2D sobre él: más de 7:1 (AA de sobra) */
  --glass-bg-solid: rgba(243, 250, 245, 0.92);       /* sin backdrop-filter o con transparencia reducida */
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.85);      /* brillo especular del borde de arriba */
  --glass-lowlight: rgba(255, 255, 255, 0.18);       /* borde de abajo, más tenue */
  --glass-inner: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 var(--glass-lowlight), inset 0 0 24px rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 10px 30px -18px rgba(0, 59, 45, 0.35);
}

/* 1 · Tags: solo texto (sin pastilla, borde, fondo ni radio) */
.kicker, .sec-head .kicker, .hero-head .kicker, .cta-head .kicker, .lead-head .kicker, .badge-plus, .badge-plus.std, .badge-plus.on-dark, .tier .rec, .tier.hot .rec {
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; height: auto; }
.badge-plus { color: var(--accent); } .badge-plus.std { color: var(--ink-soft); } .tier.hot .rec { color: #fff; }
.badge-plus.sm { margin-left: 0; }

/* 2 · Temario («4 módulos y 3 plantillas» y el del index, por coherencia): pretítulo, descripción encima del título, gap 8 */
.syllabus .bc { display: flex; flex-direction: column; gap: 8px; }
.syllabus .bc > .bd { order: 1; } .syllabus .bc > .bt { order: 2; }

/* 4 · Liquid glass */
.glass-bg { position: relative; isolation: isolate; }
.glass-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 50% at 12% 30%, rgba(13,136,60,.22), transparent 70%), radial-gradient(34% 46% at 88% 70%, rgba(165,166,246,.30), transparent 70%), radial-gradient(30% 40% at 55% 95%, rgba(0,59,45,.14), transparent 70%); }
#como-queda .step, #despues .tier:not(.hot) {
  position: relative; overflow: hidden; background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important; border-top-color: var(--glass-highlight) !important; border-bottom-color: var(--glass-lowlight) !important;
  box-shadow: var(--glass-inner), var(--glass-shadow) !important;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1); }
#como-queda .step::after, #despues .tier:not(.hot)::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%) 120% 0 / 250% 100% no-repeat; transition: background-position .3s cubic-bezier(.2,.7,.2,1); }
#como-queda .step:hover, #despues .tier:not(.hot):hover { transform: translateY(-3px) !important; }
#como-queda .step:hover::after, #despues .tier:not(.hot):hover::after { background-position: -20% 0; }
#como-queda .step { padding: 10px; }
#como-queda .step > h3, #como-queda .step > p { padding-inline: 8px; } #como-queda .step > p { padding-bottom: 10px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #como-queda .step, #despues .tier:not(.hot) { background: var(--glass-bg-solid) !important; } }
@media (prefers-reduced-transparency: reduce) { #como-queda .step, #despues .tier:not(.hot) { background: var(--glass-bg-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { #como-queda .step, #despues .tier:not(.hot), #como-queda .step::after, #despues .tier:not(.hot)::after { transition: none; } #como-queda .step:hover, #despues .tier:not(.hot):hover { transform: none !important; } }

/* 5 · «Standard» en el título: el verde de acento de las cursivas de los titulares (var(--accent)), mismo peso */
.section-title strong { color: var(--accent); font-weight: inherit; }

/* 6 · «Empieza hoy» centrado: la pastilla ya no se alinea a la izquierda y todo el bloque va al centro */
.final-cta, .final-cta .cta-head, .final-cta .hero-actions { align-items: center; text-align: center; }
.final-cta .cta-head .kicker { align-self: center; }
.final-cta h2, .final-cta p { margin-inline: auto; }

/* 7 · Espaciado sistémico título → texto → CTA (sin márgenes heredados que se sumen) */
.hero-head, .sec-head, .cta-head, .lead-head { gap: var(--space-heading-body); }
.hero-head > *, .sec-head > *, .cta-head > *, .lead-head > *, .final-cta h2, .final-cta p { margin-top: 0; margin-bottom: 0; }
.hero-copy { gap: var(--space-body-cta); }
.final-cta { gap: var(--space-body-cta); }
.temario-split > .sec-head .temario-pie { gap: var(--space-body-cta); }
.sec-head + .hero-actions, .sec-head + .sec-cta { margin-top: 0; }
.ugc-hero h1 .h1-sub { margin-top: var(--space-heading-body); }
.sec-head .kicker, .hero-head .kicker, .cta-head .kicker, .lead-head .kicker { margin-bottom: 4px; }   /* pretítulo → título: 12 en total */
.final-cta .kicker, .ugc-section.ink .kicker, .ugc-section.ink .sec-head .kicker { color: #8FD8A9 !important; }

/* ---------- Ronda 3 (Rafa, 11-10-2026) ---------- */
/* Fondo de lado a lado: sin el rectángulo blanco del hero; las manchas viven en el fondo de la página y en las secciones de glass ocupan todo el ancho */
html { overflow-x: clip; }
.ugc-hero::before, .ugc-hero::after { content: none; }
body { background:
  radial-gradient(520px 420px at 82% 260px, rgba(13,136,60,.10), transparent 70%),
  radial-gradient(440px 380px at 96% 120px, rgba(165,166,246,.16), transparent 70%),
  var(--bg-cream) no-repeat; }
.glass-bg::before { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }

/* «Qué te llevas» / Temario: descripción y botón justo debajo del título (8 y 24), no empujados al pie */
.temario-split > .sec-head { min-height: 0; gap: var(--space-heading-body); }
.temario-split > .sec-head .temario-pie { margin-top: 0; }

/* Radios concéntricos: radio de la tarjeta = radio de la imagen (20) + su margen interior (10) */
#como-queda .step { border-radius: 30px; }
#como-queda .step .step-media { border-radius: 20px; }

/* Títulos con algo más de aire entre líneas y respecto al texto de apoyo */
.section-title, .ugc-section h2, .final-cta h2 { line-height: 1.08; }
:root { --space-heading-body: 12px; }

/* «Y deja que ella venda por ti.» en blanco sobre el verde oscuro del cierre */
.final-cta h2 .h1-sub { color: #fff; }
.glass-bg::before { top: -160px; bottom: -160px; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }

/* ---------- Sin cortes entre secciones ni con la cabecera (Rafa, 11-10-2026) ---------- */
/* Cabecera: transparente arriba; al hacer scroll, un velo que se funde hacia abajo (sin línea ni borde duro) */
.site-header { background: transparent !important; border-bottom: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.site-header::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -28px 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-x);
  background: rgba(234, 240, 239, 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
body.is-scrolled .site-header::before { opacity: 1; }
.site-header { isolation: isolate; }
@media (max-width: 900px) { .site-header::before { background: rgba(243, 250, 245, 0.9); } }
/* El hero no recorta nada */
.ugc-hero { overflow: visible !important; }
/* Bloques verde oscuro: entran y salen fundidos con el fondo de la página, sin línea dura */
.final-cta { background: linear-gradient(180deg, var(--bg-cream) 0, #003B2D 180px) !important; padding-top: calc(clamp(64px, 8vw, 112px) + 80px) !important; }
.site-footer { background: #003B2D; }
.ugc-section.ink { background: linear-gradient(180deg, var(--bg-cream) 0, #003B2D 160px, #003B2D calc(100% - 160px), var(--bg-cream) 100%) !important; padding-top: calc(var(--section-y) + 100px) !important; padding-bottom: calc(var(--section-y) + 100px) !important; }

/* ---------- Ronda 4 (Rafa, 11-10-2026) ---------- */
/* Ilustraciones de fieltro: más aire hasta el pretítulo */
.sec-head > .ilu, .cta-head > .ilu, .lead-head > .ilu, .part-head > .ilu, picture.cta-ilu, picture.ilu + .kicker { margin-bottom: 16px; }

/* Liquid glass también en «Lee gratis el Módulo 1» y en las preguntas: mismos tokens, mismo fallback y mismo hover */
.glass-bg .lead-card, .glass-bg .faq-list details.acc {
  position: relative; background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important; border-top-color: var(--glass-highlight) !important; border-bottom-color: var(--glass-lowlight) !important;
  box-shadow: var(--glass-inner), var(--glass-shadow) !important; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.glass-bg .lead-card:hover, .glass-bg .faq-list details.acc:hover { transform: translateY(-2px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-bg .lead-card, .glass-bg .faq-list details.acc { background: var(--glass-bg-solid) !important; } }
@media (prefers-reduced-transparency: reduce) { .glass-bg .lead-card, .glass-bg .faq-list details.acc { background: var(--glass-bg-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .glass-bg .lead-card:hover, .glass-bg .faq-list details.acc:hover { transform: none; } }

/* Menos densidad en el hero y el cierre: la cursiva y la línea final bajan de tamaño (la jerarquía la lleva el titular),
   y el cierre usa el tamaño de título de sección, no el del hero */
.ugc-hero h1 .italic, .final-cta h2 .italic { font-size: .78em; line-height: 1.08; margin-top: .12em; }
.ugc-hero h1 .h1-sub, .final-cta h2 .h1-sub { font-size: .4em; margin-top: .7em; }
.final-cta h2 { font-size: var(--fs-h2) !important; max-width: 20ch; }

/* Móvil: 24 px entre tarjetas en todas las rejillas y listas de tarjetas (Rafa, 11-10-2026) */
@media (max-width: 809px) {
  .steps-4, .tiers, .tells-grid, .promise, .faq-list, .for-who, .mejora-cards, .agents, .agents-grid, .reel-strip, .downloads-list, .tier + .tier { gap: 24px !important; row-gap: 24px !important; }
}
/* La cursiva larga del kit («con una cara que no cambia nunca.») en dos líneas equilibradas y no en una sola tira:
   tamaño reducido (menos peso visual) pero con el ritmo de titular. Las cursivas cortas (index: «que parecen reales.») siguen en una línea */
.ugc-hero h1 .italic, .final-cta h2 .italic { max-width: 10.5em; text-wrap: balance; }
.final-cta h2 .italic { margin-inline: auto; }

/* ---------- Bloques oscuros y cabecera sin degradados (Rafa, 11-10-2026) ----------
   Los bloques verde oscuro son superficies de color sólido con radio, separadas del borde de la ventana:
   el cambio de fondo es un objeto con forma, no una franja ni un fundido. */
.ugc-section.ink { background: #003B2D !important; width: auto; max-width: none; margin: 0 8px !important; border-radius: 32px;
  padding-top: calc(var(--section-y) + 24px) !important; padding-bottom: calc(var(--section-y) + 24px) !important; }
.final-cta { background: #003B2D !important; margin: 0 8px !important; width: auto !important; border-radius: 32px 32px 0 0;
  padding-top: clamp(64px, 8vw, 112px) !important; }
.site-footer { margin: 0 8px 8px !important; width: auto !important; border-radius: 0 0 32px 32px; }
@media (max-width: 809px) { .ugc-section.ink, .final-cta, .site-footer { margin-inline: 4px !important; } .ugc-section.ink { border-radius: 24px; } .final-cta { border-radius: 24px 24px 0 0; } .site-footer { border-radius: 0 0 24px 24px; } }

/* Cabecera al hacer scroll: barra flotante de glass dentro del ancho del contenido, sin franja de lado a lado ni fundido */
.site-header::before { inset: 8px max(8px, calc((100% - 1240px) / 2)) !important; border-radius: 999px; background: rgba(243, 250, 245, 0.78);
  -webkit-mask-image: none !important; mask-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.2), 0 10px 30px -18px rgba(0,59,45,.4); border: 1px solid rgba(255,255,255,.55); }
/* Cierre del kit: una sola línea de título que remata la frase del hero; la cursiva va en línea, no en bloque */
.final-cta h2 .italic { display: inline; font-size: 1em; max-width: none; margin: 0; }

/* ---------- Ronda 5 (Rafa, 11-10-2026) ---------- */
:root { --highlight: #FFD95A; }   /* amarillo de marcador: único color nuevo, solo para subrayar la oferta; contrasta con los verdes y el texto oscuro va encima (AA) */

/* Subrayado de marcador para la oferta (en los dos tamaños) */
.subrayado { background: linear-gradient(transparent 58%, var(--highlight) 58%, var(--highlight) 92%, transparent 92%) no-repeat; padding: 0 2px; margin: 0 -2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; color: var(--ink); }

/* Escritorio: la barra flotante de la cabecera abraza el botón con 8 px por todos los lados y deja 24 px al logo */
.site-header::before { left: calc(var(--page-x) - 24px) !important; right: calc(var(--page-x) - 8px) !important; }

/* Escritorio: tarjetas de «Cómo queda» más juntas (8 px, la calle de la rejilla) */
@media (min-width: 810px) { #como-queda .steps-4 { gap: 8px; } }

/* Barra de compra flotante: el texto al tamaño del texto base */
.sticky-buy .label, .sticky-buy .btn { font-size: var(--fs-body) !important; }

/* Móvil */
@media (max-width: 809px) {
  /* Preguntas: 16 px entre tarjetas */
  .faq-list { gap: 16px !important; row-gap: 16px !important; }
  /* Cabecera: logo centrado; al hacer scroll la barra de glass se ajusta al logo (24 px a cada lado) con una transición muy suave */
  /* En reposo el logo va a la izquierda, con el texto alineado al margen de la página (el relleno de 24 px de la pastilla sale
     hacia fuera); al hacer scroll se desliza al centro y se le pone la pastilla (Rafa, 11-10-2026) */
  .site-header, .site-header.site-header--start { justify-content: flex-start; }
  .site-header .brand { margin-left: -25px; }   /* 24 de relleno + 1 de borde: el logo cae justo en el margen */
  body.is-scrolled .site-header .brand { transform: translateX(calc(50vw - 50% - var(--page-x) + 25px)); }
  .site-header .burger { position: absolute; right: var(--col); }
  .site-header::before { display: none; }
  .site-header .brand { padding: 10px 24px; border-radius: 999px; border: 1px solid transparent; background: transparent;
    transition: transform .6s cubic-bezier(.22,1,.36,1), background-color .6s cubic-bezier(.22,1,.36,1), box-shadow .6s cubic-bezier(.22,1,.36,1), border-color .6s cubic-bezier(.22,1,.36,1), -webkit-backdrop-filter .6s, backdrop-filter .6s; }
  body.is-scrolled .site-header .brand { background: rgba(243, 250, 245, 0.78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    border-color: rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 30px -18px rgba(0,59,45,.4); }
}
@media (max-width: 809px) and (prefers-reduced-motion: reduce) { .site-header .brand { transition: none; } }

/* «Cómo queda»: radios un poco menores, concéntricos (tarjeta 24 = imagen 14 + 10 de relleno) */
#como-queda .step { border-radius: 24px; }
#como-queda .step .step-media { border-radius: 14px; }

/* «Recomendado»: la única etiqueta que va en pastilla, blanca sobre la tarjeta verde, para que se lea como sello */
.tier.hot .rec { background: #fff !important; color: var(--accent-dim) !important; padding: 6px 12px !important; border-radius: 999px !important; line-height: 1; }

/* Pie: todo en blanco (marca, correo y enlaces legales); el hover lo marca el subrayado */
.site-footer, .site-footer .handle, .site-footer a { color: #fff !important; }
.site-footer a { text-underline-offset: 3px; } .site-footer a:hover { text-decoration: underline; }

/* Módulo 1 en móvil: la portada del PDF alineada a la izquierda, con el título y el texto de la tarjeta */
@media (max-width: 900px) { .lead-cover { align-self: flex-start !important; align-items: flex-start; } }

/* Premium: tarjeta clara de jazmín (Rafa, 11-10-2026). Manchas lila, azul y blanco como las del fondo, con un toque crema
   de flor; sobre ella el verde (precio, botón, iconos) contrasta. Texto oscuro: el normal en --ink-soft y las palabras clave
   en --ink y con más peso, así la jerarquía se lee sin perder AA (más de 7:1 en los dos sobre el tono más oscuro, el lila) */
.tier.hot {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(165, 166, 246, 0.70) 0%, rgba(165, 166, 246, 0) 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(150, 196, 255, 0.55) 0%, rgba(150, 196, 255, 0) 62%),
    radial-gradient(70% 55% at 18% 12%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 82% 88%, rgba(255, 244, 214, 0.85) 0%, rgba(255, 244, 214, 0) 70%),
    linear-gradient(160deg, #F6F4FF 0%, #E9EDFF 55%, #E3EEFF 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 40px -24px rgba(70, 72, 160, 0.45) !important; }
.tier.hot .name, .tier.hot .price, .tier.hot .precio-oferta-txt, .tier.hot .precio-oferta-txt b { color: var(--accent-dim) !important; }
.tier.hot .precio-oferta-txt b { color: var(--accent) !important; }
.tier.hot .tagline { color: var(--ink) !important; }
.tier.hot .price small, .tier.hot .precio-oferta-txt s, .tier.hot .tier-safe { color: var(--ink-soft) !important; }
.tier.hot .tier-list li, .tier.hot .tier-list li span { color: var(--ink-soft) !important; }
.tier.hot .tier-list li strong { color: var(--ink) !important; font-weight: 700; }
.tier.hot .tier-list .i, .tier.hot .tier-safe .i { color: var(--accent) !important; }
.tier.hot .btn { background: var(--accent) !important; color: #fff !important; } .tier.hot .btn:hover { background: var(--ink) !important; }
.tier.hot .rec { background: var(--accent) !important; color: #fff !important; }
.tier.hot .tier-list, .tier.hot hr, .tier.hot .precio-oferta-txt { border-color: rgba(0, 59, 45, 0.14) !important; }

/* Hero: más aire entre los botones y las garantías (pago único, descarga, garantía): 24 px, el mismo token que texto–botón */
.ugc-hero .hero-actions { gap: var(--space-body-cta, 24px); }

/* ============================================================
   Hero: «una cara, todos tus anuncios» (11-10-2026). Sustituye al móvil. Tres piezas reales del curso en abanico (la ficha,
   el anuncio y otra escena) con la misma etiqueta «Nora» y el sello «La misma cara en cada vídeo»: la propuesta de valor se
   ve sin leer. Primero móvil: el abanico cabe en 343 px; en escritorio ocupa las columnas 8 a 12
   ============================================================ */
.cara-fan { --cw: min(54%, 236px); --ease-fan: cubic-bezier(.22, 1, .36, 1);
  position: relative; display: grid; place-items: center; width: 100%; max-width: 560px; margin-inline: auto; padding: 22px 0 30px; }
.cara-fan::before { display: none; }
.cara { grid-area: 1 / 1; position: relative; margin: 0; width: var(--cw); aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden;
  container-type: inline-size; background: #1d2421; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 2px 4px rgba(0,59,45,.06), 0 22px 44px -22px rgba(0,59,45,.42); }
.cara img, .cara video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.c-anuncio { z-index: 2; }
.c-anuncio video { object-position: 38% 50%; }
.c-ficha, .c-escena { z-index: 1; animation: cara-abre 1s var(--ease-fan) .25s both; }
.c-ficha { --to: translateX(-54%) rotate(-7deg) scale(.84); transform: var(--to); }
.c-escena { --to: translateX(54%) rotate(7deg) scale(.84); transform: var(--to); }
@keyframes cara-abre { from { transform: translateX(0) rotate(0) scale(.84); opacity: 0; } to { transform: var(--to); opacity: 1; } }
/* Los botones del vídeo, dentro de la tarjeta del anuncio (los tamaños van en cqi, como en el móvil) */
.c-anuncio .vbtn { top: 6cqi; }
.c-anuncio .vbtn.play { left: 6cqi; }
.c-anuncio .vbtn.sound { right: 6cqi; }
/* Etiqueta «Nora» en todas: misma persona en las tres piezas */
.cara-tag { position: absolute; z-index: 3; left: 50%; bottom: 6cqi; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1; color: #fff;
  background: rgba(12, 18, 16, .52); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.cara-tag-d { font-weight: 400; color: rgba(255,255,255,.8); }
/* El avatar usa el WebP que ya baja la portada (11-10-2026): con el JPG eran 117 KB más en la carga, para 18 px */
.cara-av { --a: 18px; width: var(--a); height: var(--a); border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px var(--accent);
  background: url("assets/img/paso-01-nora.webp") no-repeat calc(var(--a) * -2.27) calc(var(--a) * -0.77) / calc(var(--a) * 3.529) auto; }
/* En el vídeo central la etiqueta sube un poco: abajo la tapa el sello */
.c-anuncio .cara-tag { bottom: 14cqi; }
/* Marco de reconocimiento sobre la cara, en las dos piezas fijas: cuatro esquinas que se ajustan al cargar y respiran despacio */
.cara-scan { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); height: var(--h); pointer-events: none;
  --c: rgba(255,255,255,.95); --l: 22%;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 2px, linear-gradient(var(--c), var(--c)) top left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 2px, linear-gradient(var(--c), var(--c)) top right / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l);
  background-repeat: no-repeat; filter: drop-shadow(0 0 6px rgba(0,0,0,.35));
  animation: cara-fija .9s var(--ease-fan) 1s both, cara-respira 4s ease-in-out 2s infinite; }
@keyframes cara-fija { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }
@keyframes cara-respira { 50% { transform: scale(1.05); } }
/* El sello: la propuesta de valor, centrado bajo el abanico y montado sobre el borde del anuncio */
.cara-claim { position: absolute; z-index: 4; left: 50%; bottom: 0; translate: -50% 0; margin: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px; white-space: nowrap; font-size: var(--fs-sm, 15px); font-weight: 600; color: var(--ink);
  background: var(--glass-bg-solid); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border); box-shadow: var(--glass-inner), 0 12px 28px -16px rgba(0,59,45,.45);
  animation: cara-sello .8s var(--ease-fan) 1.1s both; }
.cara-claim .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--accent); color: #fff; stroke-width: 3; flex: none; }
@keyframes cara-sello { from { opacity: 0; translate: -50% 10px; } to { opacity: 1; translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .c-ficha, .c-escena, .cara-scan, .cara-claim { animation: none; } }

/* Móvil: 343 px de ancho; las laterales asoman lo justo para leerse sin salirse */
@media (max-width: 860px) {
  .cara-fan { --cw: min(52%, 220px); }
  .c-ficha { --to: translateX(-46%) rotate(-6deg) scale(.84); } .c-escena { --to: translateX(46%) rotate(6deg) scale(.84); }   /* las laterales no tocan el borde de la pantalla */
  .cara { border-radius: 20px; }
  .cara-tag { font-size: 11px; padding: 3px 8px 3px 3px; gap: 5px; }
  .cara-av { --a: 16px; }
  .c-ficha .cara-tag-d, .c-escena .cara-tag-d { display: none; }   /* en las laterales, que son pequeñas, solo el nombre */
}
/* Escritorio: el abanico en las columnas 8 a 12 y a la altura de la pantalla, como el móvil de antes */
@media (min-width: 861px) {
  .ugc-hero .hero-copy { grid-column: 1 / 8; }
  .ugc-hero .hero-media.cara-fan { grid-column: 8 / -1; justify-self: stretch; width: 100%; max-width: none;
    --cw: min(52%, calc((min(720px, 100svh - var(--hdr) - 2 * var(--hero-pad)) - 52px) * 9 / 16)); }
}
/* Escritorio: el abanico, metido entre los bordes del contenido (las laterales giradas sobresalían 22 px por la derecha) */
@media (min-width: 861px) { .ugc-hero .hero-media.cara-fan { padding-inline: 24px 26px; } }
/* En las laterales la etiqueta va hacia fuera, donde no la tapa el vídeo central */
.c-ficha .cara-tag { left: 8cqi; translate: 0 0; }
.c-escena .cara-tag { left: auto; right: 8cqi; translate: 0 0; }
.c-ficha .cara-tag-d, .c-escena .cara-tag-d { display: none; }   /* en las laterales, solo «Nora»: lo que asoma no da para más */
@media (max-width: 860px) { .c-ficha .cara-tag { left: 3cqi; } .c-escena .cara-tag { right: 3cqi; } }

/* ============================================================================
   SISTEMA UNIFICADO (11-10-2026). Una sola regla para las dos landings.
   · Liquid glass = toda superficie que agrupa contenido sobre fondo claro: tarjetas de problema, promesas, pasos, «para
     quién», prompt, planes, Módulo 1 y preguntas. Material de byrafa.design: gel con barrido especular en diagonal,
     cuerpo que se aclara arriba y se posa abajo, filo grabado, brillo superior, dispersión fría en la base y sombra corta.
   · Sin glass: listas de texto (temario, listas de los planes), medios (fotos, vídeos, agentes), bloques oscuros
     (salvo la ventana de Claude, que es cristal oscuro) y la tarjeta Premium, que es su propio material: cristal de jazmín.
   · Luz: un único campo de luz fijo detrás de toda la página (verde, lila, cielo y crema). El cristal la deja pasar y la
     va recogiendo al hacer scroll; sustituye a las manchas sueltas por sección.
   ============================================================================ */
:root {
  --glass-blur: 24px;
  --glass-saturate: 1.6;
  --glass-fill:
    linear-gradient(125deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.12) 26%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(246,251,248,.40) 50%, rgba(246,251,248,.52) 100%);
  --glass-bg-solid: rgba(246, 251, 248, 0.94);
  --glass-border: rgba(0, 59, 45, 0.10);
  --glass-rim: inset 0 0 0 .5px rgba(0, 59, 45, .05), inset 0 1px 0 rgba(255,255,255,.95), inset 0 12px 28px -20px rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(255,255,255,.35), inset 0 -10px 22px -14px rgba(120, 150, 255, .16);
  --glass-depth: 0 8px 22px -12px rgba(0, 59, 45, .16), 0 1px 2px rgba(0, 59, 45, .05);
  --title: var(--accent-dim);
  --hair: rgba(0, 59, 45, 0.12);
}

/* Campo de luz fijo */
body::before { content: ""; position: fixed; inset: -10vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34vmax 30vmax at 8% 18%, rgba(13, 136, 60, .16), transparent 70%),
    radial-gradient(30vmax 28vmax at 92% 12%, rgba(165, 166, 246, .26), transparent 70%),
    radial-gradient(28vmax 26vmax at 86% 82%, rgba(150, 196, 255, .22), transparent 70%),
    radial-gradient(24vmax 22vmax at 22% 88%, rgba(255, 238, 200, .30), transparent 70%);
  animation: luz-deriva 48s ease-in-out infinite alternate; }
@keyframes luz-deriva { to { transform: translate3d(3vw, -4vh, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
.glass-bg::before { display: none !important; }   /* las manchas por sección ya no hacen falta */

/* El material */
.ugc-section:not(.ink) :is(.tell, .promise > li, .steps-4 > .step, .fit, .pr-shot, .pr-prompt, .tier:not(.hot), .lead-card, .faq-list details.acc, .mejora-card) {
  position: relative; background: var(--glass-fill) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-rim), var(--glass-depth) !important;
  transition: transform .5s var(--ease-x, cubic-bezier(.44,0,.56,1)), box-shadow .5s var(--ease-x, cubic-bezier(.44,0,.56,1)); }
@media (hover: hover) {
  .ugc-section:not(.ink) :is(.tell, .promise > li, .steps-4 > .step, .fit, .tier:not(.hot), .lead-card, .faq-list details.acc):hover {
    transform: translateY(-2px); box-shadow: var(--glass-rim), 0 14px 30px -14px rgba(0, 59, 45, .22), 0 1px 2px rgba(0, 59, 45, .05) !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ugc-section:not(.ink) :is(.tell, .promise > li, .steps-4 > .step, .fit, .pr-shot, .pr-prompt, .tier:not(.hot), .lead-card, .faq-list details.acc, .mejora-card) { background: var(--glass-bg-solid) !important; } }
@media (prefers-reduced-transparency: reduce) {
  .ugc-section:not(.ink) :is(.tell, .promise > li, .steps-4 > .step, .fit, .pr-shot, .pr-prompt, .tier:not(.hot), .lead-card, .faq-list details.acc, .mejora-card) { background: var(--glass-bg-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .ugc-section :is(.tell, .promise > li, .step, .fit, .tier, .lead-card, details.acc):hover { transform: none !important; } }
/* El brillo que recorre la tarjeta al pasar el ratón, ahora con el mismo ángulo que el barrido del material */
#como-queda .step::after, #despues .tier:not(.hot)::after { background: linear-gradient(125deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%) no-repeat 140% 0 / 200% 100% !important; }

/* Pasos de «Así se hizo»: el mismo componente en las dos landings (relleno de 10, radios concéntricos 24 / 14) */
.steps-4 > .step { padding: 10px !important; border-radius: 24px !important; overflow: hidden; }
.steps-4 > .step .step-media { border-radius: 14px !important; }
.steps-4 > .step > :is(h3, p) { padding-inline: 8px; } .steps-4 > .step > p { padding-bottom: 10px; }

/* Tonos: un solo color de título y un solo filete */
.ugc-section:not(.ink) :is(h2, h3, .tier .name, .tells-claim), .tells-claim span { color: var(--title); }
.ugc-section:not(.ink) .tells-claim .italic { color: var(--accent); }
.syllabus details, .syllabus .block, .lessons li, .tier-list, .tier hr, .pr-prompt hr { border-color: var(--hair) !important; }
.step-media, .pr-img { background: #E3EBE9 !important; }   /* el fondo de las imágenes mientras cargan: el mismo gris verdoso (el crema era del naranja) */
.lock { background: transparent !important; border: 1px solid var(--hair) !important; }
.fit.no { opacity: 1; }
.fit li .i, .fit .ico, .fit li svg { background: none !important; box-shadow: none !important; border: 0 !important; }

/* Etiquetas de texto alineadas al margen (ya no son pastillas: fuera el margen negativo óptico) */
.badge-plus, .b-tags, .b-tags > *, .agent-tag { margin-left: 0 !important; margin-inline: 0 !important; }

/* Enlaces secundarios sobre verde oscuro: en blanco, con su subrayado */
:is(.ink, .final-cta) .hero-alt { color: #fff !important; text-decoration-color: rgba(255,255,255,.5) !important; }
:is(.ink, .final-cta) .hero-alt:hover { text-decoration-color: #fff !important; }

/* La ventana de Claude: cristal oscuro sobre el verde (deja ver el bloque a través) */
.agentes-win { background: linear-gradient(125deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%), rgba(6, 22, 17, .62) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -10px 22px -14px rgba(120,150,255,.18), 0 18px 40px -20px rgba(0,0,0,.5) !important; }
/* Los tokens antiguos apuntan al material nuevo: las reglas con id (#como-queda, #despues, .glass-bg) pintan lo mismo */
:root { --glass-bg: var(--glass-fill); --glass-highlight: var(--glass-border); --glass-lowlight: var(--glass-border);
  --glass-inner: var(--glass-rim); --glass-shadow: var(--glass-depth); }

/* Radios: todas las tarjetas de cristal a 24 px; la imagen del prompt, concéntrica con su relleno */
.ugc-section:not(.ink) :is(.tell, .promise > li, .fit, .pr-shot, .pr-prompt, .tier, .lead-card, .faq-list details.acc, .mejora-card) { border-radius: 24px !important; }
.pr-img { border-radius: 12px !important; }
/* Premium: el mismo cristal, teñido de jazmín (deja pasar el campo de luz) */
.tier.hot { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }

/* ============================================================
   Hero del kit: la ficha de Nora (12-10-2026). Primero móvil. Un único cristal vertical (el de la portada es un abanico
   de tres fotos): nombre, sello «Identidad fijada», retrato base y vídeo a la misma altura, y tres líneas del descriptor
   ============================================================ */
.ficha-hero { width: 100%; display: flex; justify-content: center; }
.ficha-hero::before { display: none; }
.ficha { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 28px; position: relative; overflow: hidden;
  background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim), 0 24px 50px -26px rgba(0, 59, 45, .35), 0 1px 2px rgba(0, 59, 45, .05);
  animation: ficha-entra 1s var(--ease-fan, cubic-bezier(.22,1,.36,1)) .15s both; }
/* La luz cruza el cristal una vez al cargar */
.ficha::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat -60% 0 / 220% 100%;
  animation: ficha-brillo 1.6s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ficha-brillo { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.ficha-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.ficha-k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ficha-sello { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); }
.ficha-sello .i { width: 14px; height: 14px; }
.ficha-nombre { margin: 0; padding: 0 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--serif); font-style: italic; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1; color: var(--title); }
.ficha-nombre span { font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--ink-soft); }
.ficha-media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha-tile { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #E3EBE9; container-type: inline-size; isolation: isolate; }
.ficha-tile img, .ficha-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-tile img { object-position: 50% 0; }
.ficha-tile video { object-position: 50% 30%; }
.ficha-tile figcaption { position: absolute; z-index: 3; left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; color: #fff;
  background: rgba(12, 18, 16, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.ficha-tile .vbtn { top: 8px; height: 30px; min-width: 30px; }
.ficha-tile .vbtn.play { left: 8px; }
.ficha-tile .vbtn.sound { right: 8px; width: 30px; padding: 0; }
.ficha-tile .vbtn.sound .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ficha-datos { margin: 0; padding: 0 4px 4px; display: flex; flex-direction: column; }
.ficha-datos > div { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.35; }
.ficha-datos dt { flex: 0 0 56px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.ficha-datos dd { margin: 0; color: var(--ink); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ficha { background: var(--glass-bg-solid); } }
@media (prefers-reduced-transparency: reduce) { .ficha { background: var(--glass-bg-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .ficha, .ficha::after { animation: none; } .ficha::after { display: none; } }
@media (min-width: 861px) {
  .ugc-hero .hero-media.ficha-hero { grid-column: 8 / -1; justify-self: end; width: 100%; }
  .ficha { padding: 20px; gap: 18px; }
}

/* Botones: un solo tamaño de letra en todas las llamadas (cabecera, hero, tarjetas, cierre y barra flotante): 16 px */
:root { --fs-btn: 1rem; }
.btn, .btn.large, .hero-actions .btn.large, .tier .btn.large, .site-header .btn, .sticky-buy .btn, .sticky-buy .label { font-size: var(--fs-btn) !important; }
.pr-title, .promise > li h3, .ugc-section:not(.ink) .tier .name { color: var(--title) !important; }
/* «Para quién es»: iconos sueltos como en las listas de los planes (sin círculo) */
.ticks .tick { background: none !important; box-shadow: none !important; border: 0 !important; width: 18px !important; height: 18px !important; }
.ticks .tick.ok { color: var(--accent); } .ticks .tick.ko { color: #C2413A; }
/* Móvil: 16 px entre tarjetas en todas las listas (el fragmento que pasó Rafa) */
@media (max-width: 809px) { .fit-2, .steps-4, .tiers, .tells-grid, .promise, .faq-list, .for-who, .mejora-cards, .agents, .agents-grid, .reel-strip, .downloads-list { gap: 16px !important; row-gap: 16px !important; } .tier + .tier { margin-top: 0 !important; } }

/* Temario: en todos los tamaños, número de módulo → título → descripción (Rafa, 12-10-2026) */
.syllabus .bc > .bk { order: 0 !important; } .syllabus .bc > .bt { order: 1 !important; } .syllabus .bc > .bd { order: 2 !important; }

/* Ficha de Nora: 16 px por fuera y los de dentro en proporción (antes 28 → 16; ahora 16 → 9) */
.ficha { border-radius: 16px; }
.ficha-tile { border-radius: 9px; }

/* ============================================================
   Ocho agentes (12-10-2026): sin tarjetas. Ilustración recortada (sin fondo), nombre, rol y descripción, sobre el verde
   ============================================================ */
.team-flow .agent { background: none !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; color: #fff !important; }
.team-flow .agent img { aspect-ratio: 640 / 590 !important; object-fit: contain !important; object-position: center bottom !important; width: 100%; height: auto;
  filter: drop-shadow(0 18px 18px rgba(0, 20, 14, .45)); }
.team-flow .agent .agent-txt { position: static !important; padding: 8px 8px 0 !important; background: none !important; }
.team-flow .agent-name { color: #fff; }
.team-flow .agent-tag { color: #A9E8CD; opacity: 1; }
.team-flow .agent-do { color: rgba(255, 255, 255, .78); opacity: 1; }
@media (hover: hover) { .team-flow .agent:hover { transform: none; } .team-flow .agent:hover img { transform: translateY(-4px) rotate(-1.5deg); } }
.team-flow .agent img { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
/* Un 10 % más grandes (Rafa, 12-10-2026): la ilustración ocupa el 110 % de su columna, centrada (5 % a cada lado, dentro del hueco
   entre columnas: el recorte tiene aire a los lados), y el texto baja con ella. En móvil, la columna de la ilustración pasa de 38 % a 42 %. */
@media (min-width: 861px) { .team-flow .agent img { width: 110%; max-width: none; margin-inline: -5%; } }
/* Móvil: fila con la ilustración a la izquierda y el texto alineado a ella */
@media (max-width: 860px) {
  .team-flow .agents > .agent > picture, .team-flow .director-card > picture { width: 42% !important; }
  .team-flow .agent img { aspect-ratio: 640 / 590 !important; object-position: center !important; }
  .team-flow .agents .agent-txt, .team-flow .director-card .agent-txt { padding: 0 0 0 12px !important; }
}

/* Flechas dibujadas a mano: trazo irregular de punta redonda, que se dibuja al entrar en pantalla */
.flujo-flecha { width: 40px; height: 64px; }
.flecha-mano { width: 26px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
@supports (animation-timeline: view()) {
  .flecha-mano { stroke-dasharray: 1; stroke-dashoffset: 1; animation: flecha-traza linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  @keyframes flecha-traza { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .flecha-mano { animation: none !important; stroke-dashoffset: 0 !important; } }

/* ============================================================
   CTA con liquid glass (recuperado, Rafa 12-10-2026). La receta del botón original (degradado verde con brillo arriba,
   filo especular, sombra interior abajo y halo verde) en el verde de la mezcla, con las capas de byrafa.design: barrido
   especular en diagonal, filo grabado de 0,5 px, dispersión fría en la base. Blanco sobre el centro (#0D883C): 4,56:1 (AA)
   ============================================================ */
.btn, .btn.accent, .tier.hot .btn, .sticky-buy .btn, .site-header .btn {
  color: #fff !important; font-weight: 700; border: 1px solid rgba(255, 255, 255, .22) !important;
  background:
    linear-gradient(125deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.08) 100%),
    linear-gradient(180deg, #1BA556 0%, #0D883C 52%, #086A2E 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.5), inset 0 10px 18px -12px rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.14), inset 0 -8px 16px -10px rgba(120,170,255,.28),
    0 6px 18px rgba(13,136,60,.35), 0 2px 6px rgba(13,136,60,.22) !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .25s ease !important; }
.btn:hover, .btn.accent:hover, .tier.hot .btn:hover, .sticky-buy .btn:hover, .site-header .btn:hover {
  color: #fff !important; transform: translateY(-1px); filter: saturate(1.12) brightness(1.04);
  background:
    linear-gradient(125deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.08) 100%),
    linear-gradient(180deg, #1BA556 0%, #0D883C 52%, #086A2E 100%) !important;
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.6), inset 0 10px 18px -12px rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.14), inset 0 -8px 16px -10px rgba(120,170,255,.3),
    0 12px 28px rgba(13,136,60,.48), 0 4px 10px rgba(13,136,60,.28) !important; }
.btn:active { transform: translateY(0) scale(.98); box-shadow: inset 0 2px 6px rgba(0,0,0,.18), 0 2px 6px rgba(13,136,60,.22) !important; }
/* Secundario («Acceso Standard»): el mismo cristal claro de las tarjetas, con el texto en verde oscuro */
.btn.ghost, .btn.ghost:hover {
  color: var(--accent-dim) !important; border: 1px solid var(--glass-border) !important; background: var(--glass-fill) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-rim), 0 6px 16px -6px rgba(0,59,45,.18) !important; filter: none; }
.btn.ghost:hover { transform: translateY(-1px); box-shadow: var(--glass-rim), 0 12px 24px -10px rgba(0,59,45,.24) !important; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none !important; transition: none !important; } }
/* Botón de la barra flotante: 24 px a cada lado del texto */
.sticky-buy .btn { padding-inline: 24px !important; }

/* ============================================================
   Etiquetas: tres familias, iguales en toda la web (12-10-2026)
   1 · Rótulos (mono, mayúsculas): pretítulos de sección, número de módulo, «Qué es», datos de la ficha, rol del agente,
       «pago único · impuestos incluidos». 12 px, 600, espaciado 0,1 em. Verde oscuro de título; los secundarios, en gris.
   2 · Etiquetas de plan (sans): «Standard», «★ Premium», «Solo en Premium por 149 €», «Recomendado», «Identidad fijada».
       13 px, 700. Premium en verde, Standard en gris; sobre verde oscuro, menta.
   3 · Pastillas sobre foto o vídeo: «Nora · vídeo», «Ventana · luz fría», «Retrato base · 4 vistas». 12 px, 600, cristal oscuro.
   Un solo menta sobre verde oscuro: #A9E8CD (había dos).
   ============================================================ */
:root { --mint: #A9E8CD; }
.kicker, .sec-head .kicker, .hero-head .kicker, .cta-head .kicker, .lead-head .kicker, .bk, .pr-k, .ficha-k, .ficha-datos dt, .agent-tag, .price small {
  font-family: var(--mono) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
.kicker, .sec-head .kicker, .hero-head .kicker, .lead-head .kicker, .bk, .pr-k { color: var(--title) !important; }
.ficha-k, .ficha-datos dt, .price small { color: var(--ink-soft) !important; }
.final-cta .kicker, .ugc-section.ink .kicker, .ugc-section.ink .sec-head .kicker, .team-flow .agent-tag { color: var(--mint) !important; }
.ugc-section.ink .section-title .italic, .final-cta h2 .italic { color: var(--mint) !important; }
.flujo-flecha { color: var(--mint); } #prompt .flujo-flecha { color: var(--accent-dim); }

.badge-plus, .badge-plus.sm, .b-tags > *, .tier .rec, .tier.hot .rec, .ficha-sello {
  font-family: var(--sans) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
.badge-plus, .b-tags > :not(.std):not(.badge-plus.std), .ficha-sello { color: var(--accent) !important; }
.badge-plus.std, .b-tags > .std { color: var(--ink-soft) !important; }
.badge-plus.on-dark { color: var(--mint) !important; }

.cara-tag, .ficha-tile figcaption, .step-media .chip, .look-chip, .step-media .lock-pill, .step-media > span:not(.cara-scan) {
  font-family: var(--sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #fff !important;
  background: rgba(12, 18, 16, .52) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2) !important; border-radius: 999px !important; }
/* Precio de oferta: rótulo en verde oscuro y la cifra en verde, igual en Standard y en Premium */
.precio-oferta-txt { color: var(--accent-dim) !important; } .precio-oferta-txt b { color: var(--accent) !important; }
/* «Para quién es»: el icono, centrado en la primera línea del texto aunque salte a varias (1lh = alto de línea real) */
.ticks .tick { margin-top: 4px !important; margin-top: calc((1lh - 18px) / 2) !important; align-self: start; justify-self: start; display: grid; place-items: center; }
.ticks .tick .i { width: 18px; height: 18px; }

/* ============================================================
   Etiquetas de plan como chips de liquid glass, siempre (Rafa, 12-10-2026): «Standard», «★ Premium», «Solo en Premium
   por 149 €», «Recomendado» e «Identidad fijada». Mismo cristal que las tarjetas en pequeño; sobre verde oscuro, cristal
   oscuro. Alineación óptica: el texto del chip cae en el margen (el relleno sale hacia fuera con margen negativo)
   ============================================================ */
.badge-plus, .badge-plus.sm, .badge-plus.std, .tier .rec, .tier.hot .rec, .ficha-sello {
  display: inline-flex !important; align-items: center; gap: 5px; height: 26px; padding: 0 10px !important; border-radius: 999px !important; white-space: nowrap; line-height: 1 !important;
  background: var(--glass-fill) !important; -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-rim), 0 2px 6px -2px rgba(0, 59, 45, .14) !important; }
.tier .rec, .tier.hot .rec { color: var(--accent) !important; }
.badge-plus.on-dark {
  background: linear-gradient(125deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 40%), rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -6px 12px -8px rgba(120,170,255,.25) !important; }
.b-tags { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
/* Óptica: en columnas alineadas a la izquierda, el texto del primer chip va al margen */
.b-tags > :first-child, .tell .badge-plus, .ugc-section .sec-head:not(.center) > .badge-plus { margin-left: -11px !important; }

/* «Para quién es»: el centrado del icono sin depender de la unidad lh (alto de línea fijo de 1,55) */
.ticks li { line-height: 1.55; }
.ticks .tick { margin-top: calc((1.55em - 18px) / 2) !important; }

/* Móvil: el hueco entre bloques de las secciones apiladas (fragmento de Rafa) */
@media (max-width: 560px) { .ugc-section.stack, .ugc-section.ink > .inner.stack { gap: var(--s-8); } }
.bh > .badge-plus { margin-left: -11px !important; }
.badge-plus.on-dark, .badge-plus.std, .badge-plus.sm { height: 26px !important; padding: 0 10px !important; }
.badge-plus.on-dark, .badge-plus.std, .badge-plus.sm, .tier.hot .rec { border-radius: 999px !important; }

/* Móvil (Rafa, 12-10-2026): un solo ancho para todo lo que es superficie. Bloques oscuros, cierre, pie, tarjetas, tira de
   vídeos y botón flotante, entre los mismos bordes de 16 px. Los chips, con una sangría óptica pequeña (-4 px, Rafa 12-10-2026;
   en escritorio es -11 px): el texto del chip queda casi al margen sin que la caja se salga */
@media (max-width: 860px) {
  .ugc-section.ink, .final-cta, .site-footer { margin-inline: 16px !important; }
  .ugc-section.ink > .inner, .final-cta, .site-footer { padding-inline: 16px !important; }
  .ugc-section.ink .reel-strip { margin-inline: 0 !important; }
  .b-tags > :first-child, .tell .badge-plus, .ugc-section .sec-head:not(.center) > .badge-plus, .bh > .badge-plus { margin-left: -4px !important; }
}
@media (max-width: 480px) { .sticky-buy { width: calc(100vw - 32px); } .sticky-buy .btn { width: 100%; } }
@media (max-width: 860px) { .ugc-section.ink { padding-inline: 16px !important; } .ugc-section.ink > .inner { padding-inline: 0 !important; } }
@media (max-width: 860px) { .ugc-section.ink .sec-head > :is(h2, p, .section-title, .lead) { padding-left: 0 !important; padding-inline: 0 !important; } }

/* Modal de pago: todo en blanco (cabecera, cuerpo, condiciones y el propio formulario de Stripe, que la API pide en #FFFFFF)
   y aire abajo para la zona segura del iPhone (barra de inicio) */
.checkout-modal, .checkout-modal-head, .checkout-body, .checkout-legal, .checkout-trust { background: #fff !important; }
.checkout-legal { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 640px) { .checkout-overlay { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } }

/* ============================================================
   Rendimiento en WebKit (iPhone), 10-10-2026. En un iPhone real el título del hero salía a un tercio de su tamaño y el
   botón sin fondo: la capa fija animada del campo de luz obligaba a WebKit a componer en capas todo lo que la solapaba,
   y en capa WebKit pinta los filtros SVG (el spray de los títulos) a 1/3 en pantallas 3×.
   · El campo de luz pasa a ser un fondo estático que se desplaza con la página (sin position: fixed ni animación).
   · Los botones y los chips no llevan backdrop-filter (son opacos o diminutos): el desenfoque queda solo en las tarjetas.
   ============================================================ */
body { position: relative; }
body::before { position: absolute !important; inset: 0 !important; animation: none !important; transform: none !important;
  background:
    radial-gradient(760px 620px at 6% 320px, rgba(13, 136, 60, .14), transparent 70%),
    radial-gradient(700px 600px at 96% 980px, rgba(165, 166, 246, .24), transparent 70%),
    radial-gradient(680px 560px at 90% 1680px, rgba(150, 196, 255, .20), transparent 70%),
    radial-gradient(620px 520px at 14% 2240px, rgba(255, 238, 200, .28), transparent 70%) !important;
  background-size: 100% 2600px !important; background-repeat: repeat-y !important; }
.btn, .btn.accent, .btn:hover, .tier.hot .btn, .sticky-buy .btn, .site-header .btn,
.badge-plus, .badge-plus.sm, .badge-plus.std, .badge-plus.on-dark, .tier .rec, .ficha-sello { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.ficha-tile picture { position: absolute; inset: 0; }
/* El desenfoque, solo donde hay detalle detrás. Sobre el campo de luz (degradados ya difusos) no cambia nada en pantalla y
   cada elemento le cuesta a WebKit una capa de GPU: el aspecto de cristal lo dan el relleno, los filos y el brillo.
   Se queda en la barra flotante de la cabecera y en el fondo del pago cuando está abierto */
body *:not(.site-header):not(.checkout-overlay):not(.brand) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.checkout-overlay:not(.show) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.vbtn, .cara-tag, .ficha-tile figcaption, .look-chip, .step-media .chip { background: rgba(12, 18, 16, .62) !important; }
.cara-claim { background: rgba(246, 251, 248, .96) !important; }

/* Textos bloqueados (desenfocados junto a un botón de acceso): el texto va en data-t y se pinta con ::before, así no se puede
   seleccionar ni copiar en ningún navegador (WebKit ignoraba user-select sin prefijo) */
.blur[data-t]::before { content: attr(data-t); }
.blur, .download-card.is-blur, .step.is-locked { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none; }

/* Ofertas temporales (promo.js, Rafa, 11-10-2026). Sin oferta en curso, nada de esto se ve y los precios quedan como siempre.
   Con oferta: el precio nuevo y el de siempre tachado en cada botón, la etiqueta del descuento con la cuenta atrás encima del botón
   del hero (primer pantallazo), el descuento en las tarjetas de precio y la cuenta atrás en la barra fija del móvil. */
html:not(.promo) .solo-promo { display: none !important; }
html.promo .solo-sin-promo { display: none !important; }
.px-antes { font-weight: 500; opacity: .6; text-decoration-thickness: 1.5px; }
.promo-cuenta, [data-promo="cuenta"] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-dto { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: var(--fs-xs); line-height: 1; letter-spacing: .01em; white-space: nowrap; }
/* Alineación óptica: la pastilla se sale 6 px a la izquierda para que su texto quede en la línea del titular */
.promo-hero { display: inline-flex; align-items: stretch; gap: 12px; margin: 0 0 0 -6px; padding: 6px 18px 6px 6px; border-radius: 999px;
  background: rgba(13, 136, 60, .08); box-shadow: inset 0 0 0 1px rgba(13, 136, 60, .2); color: var(--ink);
  font-size: var(--fs-sm); line-height: 1.25; text-wrap: balance; }
.promo-hero b { font-weight: 700; }
/* 11-10-2026 (Rafa: «el 16 se siente raro, mucho espacio arriba y abajo»): la etiqueta del descuento era de una línea al lado de
   un texto de dos y flotaba en medio. Ahora ocupa todo el alto de la cápsula (pastilla dentro de pastilla, mismos 6 px de aire en
   los tres lados) y la cifra sube de tamaño. La cuenta atrás va en negrita y «Termina en», en gris: lo que mete prisa es el reloj. */
.promo-hero .px-dto { justify-content: center; padding: 0 14px; font-size: var(--fs-body); letter-spacing: -.01em; }
.promo-hero-t > span { color: var(--ink-soft); }
.promo-hero .promo-cuenta { color: var(--ink); font-weight: 600; }
/* Móvil: a todo el ancho, como el botón de debajo (Rafa, 11-10-2026), y con sus mismos bordes: sin el margen óptico de escritorio */
@media (max-width: 860px) { .ugc-hero .promo-hero { display: flex; align-self: stretch; margin-left: 0; } }
.final-cta .promo-hero { margin-left: 0; }
.tier .price .price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tier .price .px-antes { font-size: .5em; font-weight: 600; letter-spacing: -0.01em; }
.sticky-buy .label .solo-promo strong { color: var(--accent); }
.promo-hero-t { display: flex; flex-direction: column; justify-content: center; gap: 2px; }

/* ============================================================
   Pago único, visible (Rafa, 11-10-2026): bajo el precio, un chip de cristal con «Pago único. Sin suscripción.» en vez del
   rótulo gris, que pasaba desapercibido. Debajo, en el rótulo de siempre, «Impuestos incluidos». El «para siempre» lo dice el titular.
   ============================================================ */
.section-title .nw { white-space: nowrap; }
.tier .price { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tier .price .price-once { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; min-height: 36px; padding: 6px 14px 6px 12px; border-radius: 999px;
  font-family: var(--sans); font-size: var(--fs-sm, 15px); font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--accent-dim); text-wrap: balance; text-align: center;
  background: var(--glass-fill); -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-rim), 0 2px 6px -2px rgba(0, 59, 45, .14); }
.tier .price .price-once strong { font-weight: 700; }
.tier .price .price-once .i { width: 20px; height: 20px; flex: none; color: var(--accent); stroke-width: 2; }
.tier.hot .price .price-once { color: var(--accent-dim) !important; }

/* Escritorio: el banner de la oferta, del mismo ancho que el botón de compra (Rafa, 11-10-2026). Rejilla de dos columnas: la
   primera mide lo que el botón y en ella van el banner y el botón; «O elige Standard» sigue a la derecha del botón y las garantías
   ocupan toda la fila. Sin el margen óptico de -6 px: los dos bordes caen en la misma línea. */
@media (min-width: 861px) {
  .ugc-hero .hero-actions:has(> .promo-hero) { display: grid; grid-template-columns: max-content auto; justify-content: start; align-items: center; column-gap: var(--s-4); }
  .ugc-hero .hero-actions:has(> .promo-hero) > .hero-btns { display: contents; }
  .ugc-hero .hero-actions:has(> .promo-hero) > .promo-hero { grid-column: 1; display: flex; margin-left: 0; }
  .ugc-hero .hero-actions:has(> .promo-hero) .btn { grid-column: 1; justify-content: center; }
  .ugc-hero .hero-actions:has(> .promo-hero) .hero-alt { grid-column: 2; justify-self: start; }
  .ugc-hero .hero-actions:has(> .promo-hero) > :not(.promo-hero):not(.hero-btns) { grid-column: 1 / -1; }
}

/* ============================================================
   Cursiva manuscrita en los títulos (Rafa, 11-10-2026): Dancing Script 600 en vez de Newsreader cursiva, en todas las cursivas
   de título (portada, kit, secciones, cierre, gracias y descargas) para que sigan siendo una sola voz. Es letra ligada de verdad,
   así que va sin espaciado negativo; con un 6 % más de cuerpo iguala la altura de la x de Archivo 900.
   ============================================================ */
:root { --hand: 'Dancing Script', 'Newsreader', cursive; }
.ugc-hero h1 .italic, .final-cta h2 .italic, .section-title .italic, .tells-turn .italic, .thanks h1 .italic, .downloads h1 .italic, h1 .italic, h2 .italic {
  font-family: var(--hand) !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.section-title .italic, .tells-turn .italic, h2 .italic { font-size: 1.06em; }
/* En el hero y el cierre, la cursiva va a menor escala que el titular, como antes (.78 em con Newsreader): Dancing Script tiene la x
   algo más baja, así que .84 em. La q y la p bajan más que en Newsreader: aire debajo y menos arriba */
.ugc-hero h1 .italic, .final-cta h2 .italic { font-size: .84em; line-height: 1.1; margin-top: -0.02em !important; margin-bottom: 0.12em; }

/* Titular del hero un poco más pequeño en escritorio (Rafa, 11-10-2026: menos carga visual): de 64 a 52 px como mucho (50 px a 1440 de ancho) */
@media (min-width: 861px) { .ugc-hero h1 { font-size: clamp(2.5rem, 1.75rem + 1.5vw, 3.25rem) !important; } }

/* Fondo blanco en toda la página (Rafa, 11-10-2026); el mismo blanco que la pantalla de carga */
body { background: #fff !important; }

/* «Lo que funciona» (la tarjeta bloqueada de Premium): sin caja ni borde, directamente en la tarjeta; el botón, a su ancho */
.lock { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.lock .btn { width: auto !important; max-width: 100%; align-self: start; justify-self: start; }
/* Móvil: botón pequeño de verdad (44 px de alto, el mínimo táctil) y sin el precio tachado, que ya sale en el chip de arriba y en los precios */
@media (max-width: 860px) {
  .lock .btn { height: 44px !important; padding: 0 18px !important; font-size: 0.9375rem !important; gap: 6px !important; }
  .lock .btn s { display: none !important; }
}
/* Más aire en «Lo que funciona» (Rafa, 11-10-2026): 12 px entre el rótulo y el texto difuminado, y 20 px entre ese texto y el botón */
.lock { gap: 20px !important; }
.lock .lock-k { row-gap: 12px !important; }
/* «No solo te enseñamos a generar vídeos…» entre dos líneas finas (Rafa, 11-10-2026), 48 px de aire por dentro. El grano de aerosol
   pasa a los textos: en el párrafo también ondularía las líneas */
.tells-claim { filter: none !important; border-top: 1px solid rgba(0, 59, 45, .18); border-bottom: 1px solid rgba(0, 59, 45, .18); padding-block: 48px; align-self: stretch; }
.tells-claim > span { filter: url(#sprayGrain); }