/* ==========================================================================
   EROS FITNESS — SECCIONES DEL LANDING (index.html)
   Mobile-first: los estilos base son para celular (360–430 px);
   los @media (min-width) agregan la versión tablet/escritorio.
   ========================================================================== */

/* ---------- Cabeceras de sección ---------- */
.cabecera { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 72px); }
.cabecera__lead { max-width: 30em; }
.cabecera--centro { justify-items: center; text-align: center; }
.cabecera--centro .lead { margin-inline: auto; }
@media (min-width: 1024px) {
  .cabecera--fila { grid-template-columns: 1.2fr .8fr; align-items: end; gap: 48px; }
  .cabecera--fila .cabecera__lead { justify-self: end; padding-bottom: 10px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  --mx: 0; --my: 0; --p: 0;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: minmax(max(100svh, 640px), auto) auto;
}
.hero__fondo { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hero__halo {
  position: absolute; left: 50%; top: 10%; width: 150vw; height: 72%; transform: translateX(-50%);
  translate: calc(var(--mx) * 30px) calc(var(--my) * 20px);
  background:
    radial-gradient(38% 42% at 50% 42%, rgba(246, 199, 104, .34), rgba(233, 169, 58, .12) 45%, transparent 72%),
    radial-gradient(60% 50% at 50% 60%, rgba(183, 121, 31, .18), transparent 70%);
}
.hero__fondo::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, transparent, var(--ink) 78%); }
.hero__laurel { position: absolute; top: 14%; height: 52%; width: auto; aspect-ratio: 140 / 236; color: var(--gold); opacity: .16; }
.hero__laurel--izq { left: 50%; margin-left: -46vw; }
.hero__laurel--der { right: 50%; margin-right: -46vw; transform: scaleX(-1); }

.hero__palabra {
  position: absolute; left: 0; right: 0; top: 64px; z-index: -1; pointer-events: none; user-select: none;
  display: flex; justify-content: center;
  font: 400 45vw/.8 var(--f-gotica); letter-spacing: -.01em; white-space: nowrap;
}
.hero__palabra span { display: block; }
.hero__palabra--atras { translate: calc(var(--mx) * -26px) calc(var(--p) * 180px); }
.hero__palabra--atras span {
  background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 20px 60px rgba(233, 169, 58, .25));
}
.hero__palabra--frente { z-index: 2; translate: calc(var(--mx) * -26px) calc(var(--p) * 180px); }
.hero__palabra--frente span { color: transparent; -webkit-text-stroke: 1px rgba(249, 216, 142, .5); }

/* El rim-light (drop-shadow) va en la figura y el desvanecido (mask) en la
   imagen: si ambos van en la imagen, la máscara recorta el brillo en el borde
   de la caja y se ve una línea vertical dura junto al brazo. */
.hero__figura {
  position: absolute; z-index: 1; left: 50%; top: 92px;
  height: min(60svh, 560px); aspect-ratio: 827 / 1338;
  transform: translateX(-50%);
  translate: calc(var(--mx) * 14px) calc(var(--my) * 8px + var(--p) * 70px);
  filter: drop-shadow(-8px -4px 22px rgba(246, 199, 104, .28)) drop-shadow(12px 0 30px rgba(233, 169, 58, .18));
}
.hero__img {
  width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%); mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
}

.hero__contenido { position: relative; z-index: 3; grid-row: 1; align-self: end; padding: 0 var(--gutter) 28px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 700 .66rem/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-hi); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(233, 169, 58, .2); animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 8px rgba(233, 169, 58, 0); } }
.hero__titulo {
  font: 400 var(--fs-hero)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.005em;
  text-shadow: 0 10px 40px rgba(11, 10, 8, .6);
}
.hero__titulo .linea { padding-bottom: .06em; margin-bottom: -.06em; }
.hero__titulo em { font-size: 1.02em; text-shadow: none; filter: drop-shadow(0 6px 24px rgba(11, 10, 8, .7)); }
.hero__sub { margin-top: 16px; max-width: 30em; font-size: .95rem; line-height: 1.55; color: var(--text-2); }
.hero__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.hero__ctas .btn { padding-inline: 14px; letter-spacing: .12em; }

.hero__stats { grid-row: 2; position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 8px var(--gutter) 36px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.hero__stats li { display: grid; gap: 4px; padding: 16px 16px 18px; background: var(--ink); }
.hero__num { font: italic 600 1rem/1 var(--f-serif); color: var(--gold); }
.hero__stats strong { font: 400 1.22rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.hero__stats small { font-size: .78rem; color: var(--muted); }
.hero__scroll { display: none; }

/* Entrada del hero (CSS puro, sincronizada con el preloader) */
.js .hero__titulo .linea > span { transform: translateY(112%); animation: sube 1.2s var(--ease) calc(var(--intro) + .12s) forwards; }
.js .hero__titulo .linea:nth-child(2) > span { animation-delay: calc(var(--intro) + .2s); }
.js .hero__titulo .linea:nth-child(3) > span { animation-delay: calc(var(--intro) + .28s); }
.js .hero__figura img { animation: figura-in 1.6s var(--ease) calc(var(--intro) - .1s) both; }
.js .hero__palabra span { animation: palabra-in 1.8s var(--ease) calc(var(--intro) - .15s) both; }
.js .hero__eyebrow, .js .hero__sub, .js .hero__ctas, .js .hero__stats, .js .hero__laurel, .js .hero__scroll { animation: aparece-sube 1.2s var(--ease) calc(var(--intro) + .45s) both; }
.js .hero__ctas { animation-delay: calc(var(--intro) + .55s); }
.js .hero__stats { animation-delay: calc(var(--intro) + .7s); }
@keyframes sube { to { transform: none; } }
@keyframes figura-in { from { opacity: 0; transform: translateY(50px) scale(1.04); } }
@keyframes palabra-in { from { opacity: 0; transform: translateY(18%) scale(.96); letter-spacing: .08em; } }
@keyframes aparece-sube { from { opacity: 0; transform: translateY(24px); } }

@media (min-width: 600px) {
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  .hero__ctas { display: flex; flex-wrap: wrap; }
  .hero__ctas .btn { padding-inline: 28px; }
}

@media (min-width: 1024px) {
  .hero { grid-template-rows: 1fr; min-height: max(100svh, 760px); }
  .hero__palabra { top: 9vh; font-size: min(31vw, 62vh); justify-content: flex-start; padding-left: 26vw; }
  .hero__laurel { top: 16%; height: 64%; }
  .hero__laurel--izq { margin-left: -18vw; }
  .hero__laurel--der { margin-right: -38vw; }
  .hero__halo { left: 60%; width: 90vw; height: 100%; top: 0; }
  .hero__figura { left: 59%; top: auto; bottom: 0; height: min(92svh, 1000px); }
  .hero__img { -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%); mask-image: linear-gradient(180deg, #000 76%, transparent 99%); }
  .hero__contenido { grid-row: 1; align-self: end; padding: 0 0 clamp(96px, 13vh, 150px) var(--gutter); max-width: 50vw; }
  .hero__titulo { font-size: clamp(5.4rem, 8.4vw, 9rem); }
  .hero__sub { font-size: 1.02rem; max-width: 27em; }
  .hero__ctas { margin-top: 28px; }
  .hero__stats {
    grid-row: 1; align-self: end; justify-self: end; grid-template-columns: 1fr; gap: 0;
    width: 250px; margin: 0 var(--gutter) clamp(96px, 13vh, 150px) 0; background: none; border: 0; border-radius: 0;
  }
  .hero__stats li { background: none; padding: 16px 0; border-top: 1px solid var(--line); grid-template-columns: 34px 1fr; column-gap: 8px; }
  .hero__stats li:last-child { border-bottom: 1px solid var(--line); }
  .hero__num { grid-row: span 2; padding-top: 3px; }
  .hero__stats strong { font-size: 1.35rem; }
  .hero__scroll { display: flex; position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 10px; font: 700 .6rem/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
  .hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: gota 2s var(--ease) infinite; transform-origin: top; }
}
@keyframes gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 1440px) {
  .hero__contenido { padding-left: calc((100vw - var(--max)) / 2); }
  .hero__stats { margin-right: calc((100vw - var(--max)) / 2); }
}

/* ==========================================================================
   MARQUEE DE DISCIPLINAS
   ========================================================================== */
/* El marco recorta los 20 px que la cinta inclinada sobresale a cada lado
   (sin él aparecía scroll horizontal en escritorio). */
.marquee-marco { position: relative; z-index: 4; overflow-x: clip; overflow-y: visible; }
@supports not (overflow: clip) { .marquee-marco { overflow: hidden; padding-block: 30px; margin-block: -30px; } }
.marquee { position: relative; z-index: 4; overflow: hidden; padding-block: 16px; background: var(--gold); color: var(--ink); transform: rotate(-1.4deg); margin: -10px -20px 0; box-shadow: 0 20px 60px -20px rgba(233, 169, 58, .45); }
.marquee__pista { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee__grupo { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.marquee span { font: 400 clamp(1.9rem, 1.3rem + 2.6vw, 3.6rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.marquee .hueco { color: transparent; -webkit-text-stroke: 1.2px var(--ink); }
.marquee svg { width: 64px; height: 16px; flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   I · MANIFIESTO
   ========================================================================== */
.manifiesto { overflow: hidden; }
.manifiesto__grid { position: relative; display: grid; gap: 8px; }
.manifiesto__texto {
  --n: 30;
  font: 600 clamp(1.85rem, 1rem + 3.5vw, 4.6rem)/1.1 var(--f-ui); letter-spacing: -.03em; color: var(--text);
  max-width: 19em; text-wrap: pretty;
}
.manifiesto__texto em { font: italic 500 1.12em/1 var(--f-serif); letter-spacing: -.01em; color: var(--gold-hi); }
.manifiesto__texto .w { opacity: clamp(.13, calc(var(--p, 1) * (var(--n) + 4) - var(--i)), 1); transition: opacity .25s linear; }
.manifiesto__firma { display: grid; justify-items: start; gap: 12px; margin-top: 44px; }
.manifiesto__firma .firma-mask { width: min(340px, 72vw); }
.manifiesto__firma p { font: 700 .7rem/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 1024px) {
  .manifiesto__grid { grid-template-columns: 240px 1fr; align-items: start; }
  .manifiesto__grid .eyebrow { position: sticky; top: 120px; }
  .manifiesto__firma { grid-column: 2; justify-items: end; margin-top: 60px; }
}

/* ==========================================================================
   II · MI HISTORIA
   ========================================================================== */
.historia { position: relative; background: var(--ink-2); padding-block: var(--sec); overflow: hidden; }
.historia__pista { display: grid; gap: clamp(90px, 12vw, 160px); max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.historia__intro .lead { margin-top: 26px; }
.historia__pista-ayuda { display: none; }
.capitulo { position: relative; display: grid; gap: 26px; }
.capitulo__num {
  position: absolute; right: -2%; top: -.28em; z-index: 0; pointer-events: none;
  font: 400 clamp(11rem, 44vw, 20rem)/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(233, 169, 58, .3);
}
.capitulo__media { position: relative; z-index: 1; width: 82%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--ink-3); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.capitulo__media img { width: 100%; height: 100%; object-fit: cover; }
.capitulo__media--recorte img { transform: scale(1.18); transform-origin: 50% 46%; }
.capitulo__media--ilustracion { display: grid; place-items: center; border: 1px solid var(--line); background: radial-gradient(80% 60% at 70% 20%, rgba(233, 169, 58, .1), transparent 60%), var(--ink); }
.carpa { width: 100%; height: 100%; padding: 12%; color: var(--gold); }
.js-anim .carpa .trazo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.6, .1, .2, 1); }
.js-anim .visible .carpa .trazo { stroke-dashoffset: 0; }
.carpa__luz { animation: vela 2.8s ease-in-out infinite; filter: drop-shadow(0 0 6px #F6C768); }
@keyframes vela { 50% { opacity: .45; } }
.capitulo__media--desenfoque img { filter: blur(9px) grayscale(.5) brightness(.55) saturate(1.4); transform: scale(1.15); }
.capitulo__ruido { position: absolute; inset: auto 8% 10%; font: italic 500 clamp(1.5rem, 1rem + 2vw, 2.4rem)/1.1 var(--f-serif); color: rgba(239, 232, 220, .78); text-align: center; }
.capitulo__texto { position: relative; z-index: 1; max-width: 32em; }
.capitulo__kicker { font: 700 .7rem/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.capitulo__titulo { font: 400 clamp(2.4rem, 1.6rem + 3vw, 4.2rem)/.95 var(--f-display); text-transform: uppercase; margin-bottom: 16px; }
.capitulo__texto p:not(.capitulo__kicker) { color: var(--text-2); font-size: 1.04rem; }
.capitulo__cita { margin-top: 20px; padding-left: 20px; border-left: 1px solid var(--gold); font: italic 500 clamp(1.3rem, 1.05rem + 1vw, 1.75rem)/1.3 var(--f-serif); color: var(--text); }
.capitulo__remate { margin-top: 16px; font: italic 500 1.4rem/1.3 var(--f-serif) !important; color: var(--gold-hi) !important; }
.historia__barra { display: none; }

@media (min-width: 760px) {
  .capitulo { grid-template-columns: .9fr 1fr; align-items: center; gap: 6vw; }
  .capitulo__media { width: 100%; }
  .capitulo:nth-child(odd) .capitulo__media { order: 2; }
  .capitulo__num { right: auto; left: 38%; top: 50%; transform: translateY(-50%); font-size: min(26vw, 22rem); }
}

/* Modo horizontal (lo activa escenas.js en escritorio si GSAP carga).
   Cada capítulo mide 76vw y su contenido va centrado; escenas.js hace que el
   scroll "asiente" cada capítulo en el centro de la pantalla, así nunca queda
   una tarjeta a medio cortar cuando dejas de bajar. El padding derecho de la
   pista permite centrar también el último capítulo. */
.historia--horizontal { padding: 0; height: 100vh; height: 100svh; }
.historia--horizontal .historia__pista { display: flex; gap: 0; height: 100%; width: max-content; max-width: none; padding: 0 12vw 0 0; margin: 0; will-change: transform; }
.historia--horizontal .historia__panel { flex: none; height: 100%; display: grid; align-content: center; padding: 104px 3vw 96px; }
.historia--horizontal .historia__intro { width: 44vw; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-right: 5vw; }
.historia--horizontal .historia__pista-ayuda { display: flex; align-items: center; gap: 14px; margin-top: 40px; font: 700 .7rem/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.historia--horizontal .historia__pista-ayuda svg { width: 64px; height: 16px; color: var(--gold); animation: empuja 1.8s var(--ease) infinite; }
@keyframes empuja { 50% { transform: translateX(12px); } }
.historia--horizontal .capitulo { width: 76vw; grid-template-columns: auto minmax(0, 29rem); gap: 4.5vw; justify-content: center; align-items: center; }
.historia--horizontal .capitulo .capitulo__media { order: 0; width: auto; height: min(62vh, 600px); }
/* Las fotos son un poco más anchas que su marco para el parallax lateral */
.historia--horizontal .capitulo__media img { width: 112%; max-width: none; margin-left: -6%; }
.historia--horizontal .capitulo__num { left: 24%; top: 50%; font-size: min(46vh, 26rem); transform: translateY(-50%); }
.historia--horizontal .historia__barra { display: flex; align-items: center; position: absolute; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); right: max(var(--gutter), calc((100vw - var(--max)) / 2)); bottom: 38px; height: 16px; }
/* Viñeta en los bordes: el capítulo vecino se asoma difuminado, no cortado */
.historia--horizontal::before, .historia--horizontal::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 11vw; pointer-events: none; }
.historia--horizontal::before { left: 0; background: linear-gradient(90deg, var(--ink-2) 8%, rgba(20, 18, 14, 0)); opacity: clamp(0, calc(var(--hp, 0) * 30), 1); }
.historia--horizontal::after { right: 0; background: linear-gradient(270deg, var(--ink-2) 8%, rgba(20, 18, 14, 0)); opacity: clamp(0, calc((1 - var(--hp, 0)) * 30), 1); }
.historia--horizontal .historia__barra, .historia--horizontal .historia__contador { z-index: 3; }
.historia__contador { display: none; }
.historia--horizontal .historia__contador { display: block; position: absolute; bottom: 64px; right: max(var(--gutter), calc((100vw - var(--max)) / 2)); font: italic 500 1.05rem/1 var(--f-serif); color: var(--muted); letter-spacing: .04em; transition: opacity .5s; }
.historia__contador.oculto { opacity: 0; }
.historia__contador b { font: 400 1.5rem/1 var(--f-display); color: var(--gold-hi); font-style: normal; margin-right: 6px; }
.historia__barra span { flex: 1; height: 1px; background: var(--line); position: relative; }
.historia__barra span::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--hp, 0)); }
.historia__barra svg { position: absolute; left: calc(var(--hp, 0) * (100% - 62px)); width: 64px; height: 16px; color: var(--gold-hi); }

/* ==========================================================================
   III · MI ANTES Y DESPUÉS (mentalidad) + componente comparador
   ========================================================================== */
.mente { overflow: hidden; }
.mente__grid { display: grid; gap: 44px; }
.mente__texto .lead { margin-top: 26px; }
.mente__ayuda { display: flex; align-items: center; gap: 12px; margin-top: 26px; font: 700 .7rem/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.mente__ayuda svg { width: 56px; height: 14px; }
.h2--mixto { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 5.2rem); }
@media (min-width: 960px) {
  .mente__grid { grid-template-columns: 1fr minmax(0, 470px); align-items: center; gap: 6vw; }
}

.cmp {
  --pos: 52%;
  position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: 26px; overflow: hidden;
  background: var(--ink-3); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95), 0 0 0 1px var(--line);
}
.cmp__capa { position: absolute; inset: 0; margin: 0; }
.cmp__capa img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; pointer-events: none; }
.cmp__antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
#mente .cmp__antes img { filter: grayscale(1) blur(3px) brightness(.42) contrast(1.2); transform: scale(1.03); }
.cmp__palabras { position: absolute; display: grid; gap: 6px; pointer-events: none; }
.cmp__palabras--antes { left: 6%; top: 18%; font: italic 500 clamp(1.2rem, 1rem + 1vw, 1.7rem)/1.1 var(--f-serif); color: rgba(239, 232, 220, .72); }
.cmp__palabras--antes li:nth-child(2) { padding-left: 1.2em; }
.cmp__palabras--antes li:nth-child(3) { padding-left: .4em; }
.cmp__palabras--despues { right: 6%; bottom: 9%; text-align: right; font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem)/.95 var(--f-display); text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 4px 24px rgba(11, 10, 8, .8); }
.cmp__etiqueta { position: absolute; top: 18px; left: 18px; padding: 8px 12px; border-radius: 999px; background: rgba(11, 10, 8, .65); border: 1px solid rgba(239, 232, 220, .2); font: 700 .62rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cmp__etiqueta--despues { left: auto; right: 18px; border-color: var(--gold); color: var(--gold-hi); }
.cmp__manija { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; z-index: 3; display: grid; place-items: center; cursor: ew-resize; touch-action: none; }
.cmp__manija::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; margin-left: -.75px; background: linear-gradient(180deg, transparent, var(--gold-hi) 15%, var(--gold) 85%, transparent); box-shadow: 0 0 18px rgba(246, 199, 104, .7); }
.cmp__manija:focus-visible { outline: none; }
.cmp__manija:focus-visible .cmp__perilla { box-shadow: 0 0 0 4px rgba(246, 199, 104, .45); }
.cmp__perilla { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; width: 58px; height: 58px; border-radius: 50%; background: rgba(11, 10, 8, .8); border: 1px solid var(--gold); color: var(--gold-hi); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .4s var(--ease); }
.cmp__perilla svg { width: 18px; height: 18px; }
.cmp__perilla svg:first-child { transform: scaleX(-1); }
.cmp.arrastrando .cmp__perilla, .cmp__manija:hover .cmp__perilla { transform: scale(1.1); }

/* ==========================================================================
   IV · ATLETA HÍBRIDO (bento)
   ========================================================================== */
.hibrido { background: var(--ink-2); }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bento__item { position: relative; isolation: isolate; overflow: hidden; min-width: 0; border-radius: 20px; background: var(--ink-3); border: 1px solid var(--line-soft); min-height: 200px; }
.bento__item > video, .bento__item > img:not(.bento__recorte) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.bento__item:hover > video, .bento__item:hover > img:not(.bento__recorte) { transform: scale(1.05); }
.bento__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 10, 8, .15) 30%, rgba(11, 10, 8, .9)); }
.bento__info { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.bento__disciplina { display: flex; align-items: baseline; gap: 10px; font: 400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--f-display); text-transform: uppercase; }
.bento__disciplina span { font: italic 600 1rem/1 var(--f-serif); color: var(--gold); }
.bento__desc { margin-top: 6px; font-size: .88rem; line-height: 1.45; color: var(--text-2); }
.bento__item--sprint { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.bento__item--sprint > video { object-position: 50% 30%; }
.bento__item--sprint .bento__velo { background: linear-gradient(180deg, rgba(11, 10, 8, .1) 20%, rgba(11, 10, 8, .92) 88%); }
.crono { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 8px; font: 400 clamp(5rem, 3rem + 8vw, 9.5rem)/.82 var(--f-display); letter-spacing: -.01em; }
.crono__valor { display: inline-block; min-width: 3.3ch; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(233, 169, 58, .35)); }
.crono__s { font: italic 500 .34em/1 var(--f-serif); color: var(--gold-hi); }
.bento__nota { font-size: .8rem; color: var(--text-2); max-width: 30em; }
.bento__item--boxeo, .bento__item--running { aspect-ratio: 3 / 4; }
.bento__item--boxeo .bento__desc, .bento__item--running .bento__desc { font-size: .8rem; }
.bento__item--pesas { grid-column: 1 / -1; aspect-ratio: 16 / 12; background: radial-gradient(60% 80% at 72% 60%, rgba(233, 169, 58, .32), transparent 70%), var(--ink); }
.bento__recorte { position: absolute; right: 4%; bottom: 0; height: 96%; width: auto; z-index: -1; transition: transform 1.2s var(--ease); filter: drop-shadow(0 0 30px rgba(233, 169, 58, .25)); }
.bento__item--pesas:hover .bento__recorte { transform: translateY(-8px) scale(1.02); }
.bento__item--pesas .bento__info { right: 45%; top: 20px; bottom: auto; }
.bento__item--tipo { aspect-ratio: auto; min-height: 210px; background: radial-gradient(90% 70% at 0% 0%, rgba(233, 169, 58, .12), transparent 60%), var(--ink); border-color: var(--line); }
.bento__icono { position: absolute; left: 18px; top: 18px; width: 52px; height: 52px; color: var(--gold); transition: transform .8s var(--ease); }
.bento__item--tipo:hover .bento__icono { transform: translateX(6px) rotate(-4deg); }
.bento__marca { position: absolute; right: -4%; top: -8%; font: 400 9rem/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(233, 169, 58, .16); pointer-events: none; }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 290px; gap: 16px; }
  .bento__item { aspect-ratio: auto !important; }
  .bento__item--sprint { grid-column: 1 / 6; grid-row: span 2; }
  .bento__item--boxeo { grid-column: 6 / 9; grid-row: span 2; }
  .bento__item--running { grid-column: 9 / 13; }
  .bento__item--pesas { grid-column: 9 / 13; }
  .bento__item--tipo { grid-column: span 6; grid-row: auto; min-height: 0; }
  .bento__item--tipo .bento__info { left: 110px; bottom: auto; top: 50%; transform: translateY(-50%); right: 30%; }
  .bento__item--tipo .bento__icono { top: 50%; left: 32px; width: 58px; height: 58px; translate: 0 -50%; }
  .bento__marca { font-size: 13rem; top: -18%; }
  .bento__info { left: 24px; right: 24px; bottom: 22px; }
  .bento__item--pesas .bento__info { right: 48%; top: 24px; }
}
@media (min-width: 1024px) { .bento { grid-auto-rows: 290px; } .bento__item--tipo { max-height: 210px; } .bento > .bento__item--tipo { grid-row: 3; } }

/* ==========================================================================
   V · EL MÉTODO EROS (mármol claro)
   ========================================================================== */
.metodo { background: var(--marble); color: var(--ink); overflow: hidden; }
.metodo .h2 { color: #16130E; }
.metodo .h2 em { background: linear-gradient(180deg, #C58A2A, #8A5A12); -webkit-background-clip: text; background-clip: text; }
.metodo .lead { color: #4B4337; }
.metodo .lead strong { color: #16130E; }
.metodo__grid { position: relative; display: grid; gap: 48px; }
.metodo__cabecera .lead { margin-top: 26px; }
.metodo__cita { margin-top: 26px; padding-left: 20px; border-left: 1px solid var(--gold-ink); font: italic 500 1.35rem/1.35 var(--f-serif); color: #3A332A; max-width: 26em; }
.metodo__estatua { position: relative; justify-self: center; width: min(62vw, 300px); display: grid; justify-items: center; }
.metodo__estatua img { position: relative; z-index: 1; width: 78%; height: auto; filter: drop-shadow(0 30px 30px rgba(60, 45, 20, .35)); }
.metodo__pedestal { position: absolute; z-index: 0; left: 0; right: 0; bottom: -20px; height: 42px; border-radius: 4px; background: linear-gradient(180deg, #F7F2E9, #D8CDB8); box-shadow: 0 30px 40px -20px rgba(60, 45, 20, .45), inset 0 1px 0 #fff; }
.metodo__pedestal::before { content: ''; position: absolute; left: 6%; right: 6%; top: -10px; height: 10px; background: linear-gradient(180deg, #EFE6D6, #DCD1BD); border-radius: 3px 3px 0 0; }
.pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pilar { position: relative; padding: 20px 18px 22px; border-radius: 18px; background: rgba(255, 252, 245, .62); border: 1px solid rgba(138, 90, 18, .18); box-shadow: 0 20px 40px -30px rgba(60, 45, 20, .5); }
.pilar__icono { width: 40px; height: 40px; color: var(--gold-ink); margin-bottom: 18px; }
.pilar__num { position: absolute; right: 16px; top: 16px; font: italic 600 1.05rem/1 var(--f-serif); color: var(--gold-ink); }
.pilar h3 { font: 400 1.35rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 8px; color: #16130E; }
.pilar p { font-size: .88rem; line-height: 1.5; color: #4B4337; }

.proceso { position: relative; display: grid; gap: 30px; padding-left: 64px; }
.proceso__linea { position: absolute; left: 22px; top: 8px; bottom: 8px; width: 16px; }
.proceso__linea span { position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: rgba(138, 90, 18, .25); }
.proceso__linea span::after { content: ''; position: absolute; inset: 0; background: var(--gold-ink); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.proceso__linea svg { position: absolute; left: -24px; top: calc(var(--p, 1) * 100% - 40px); width: 64px; height: 16px; color: var(--gold-ink); transform: rotate(90deg); }
.paso { position: relative; }
.paso__num { position: absolute; left: -64px; top: -6px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--marble); border: 1px solid var(--gold-ink); font: italic 600 1.15rem/1 var(--f-serif); color: var(--gold-ink); z-index: 1; }
.paso h3 { font: 400 1.6rem/1 var(--f-display); text-transform: uppercase; color: #16130E; margin-bottom: 8px; }
.paso p { color: #4B4337; font-size: .95rem; max-width: 26em; }
@media (min-width: 1024px) {
  .metodo__grid { grid-template-columns: 1fr 320px; column-gap: 6vw; row-gap: 72px; }
  .metodo__estatua { grid-row: 1; grid-column: 2; align-self: end; width: 100%; }
  .pilares { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .pilar { padding: 28px 24px 30px; }
  .proceso { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 76px 0 0; }
  .proceso__linea { left: 0; right: 0; top: 22px; bottom: auto; width: auto; height: 16px; }
  .proceso__linea span { left: 0; right: 0; top: 7.5px; bottom: auto; width: auto; height: 1px; }
  .proceso__linea span::after { transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
  .proceso__linea svg { top: 0; left: calc(var(--p, 1) * 100% - 62px); transform: none; }
  .paso__num { left: 0; top: -76px; }
}

/* ==========================================================================
   VI · ESPECIALIDADES
   ========================================================================== */
.especialidades { overflow: hidden; }
.espec { border-top: 1px solid var(--line); }
.espec__item {
  position: relative; display: grid; grid-template-columns: 36px 1fr 68px; grid-template-areas: "num nombre mini" "num desc mini";
  column-gap: 14px; row-gap: 6px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line);
}
.espec__num { grid-area: num; align-self: start; padding-top: 6px; font: italic 600 1.05rem/1 var(--f-serif); color: var(--gold); }
.espec__nombre { grid-area: nombre; font: 400 clamp(1.75rem, 1rem + 3.8vw, 5.2rem)/.95 var(--f-display); text-transform: uppercase; transition: transform .7s var(--ease), color .4s; }
.espec__desc { grid-area: desc; font-size: .92rem; color: var(--text-2); line-height: 1.45; }
.espec__mini { grid-area: mini; width: 68px; height: 86px; object-fit: cover; border-radius: 10px; filter: saturate(.9); }
.espec__mini--izq { object-position: 22% 50%; }
.espec__flotante { display: none; }
@media (min-width: 1024px) and (hover: hover) {
  .espec__item { grid-template-columns: 90px 1fr 340px; grid-template-areas: "num nombre desc"; padding: 34px 0; cursor: default; }
  .espec__mini { display: none; }
  .espec__desc { justify-self: end; text-align: right; max-width: 22em; }
  .espec:hover .espec__item { color: rgba(239, 232, 220, .35); }
  .espec__item:hover .espec__nombre { color: var(--gold-hi); transform: translateX(22px); }
  .espec:hover .espec__item:not(:hover) .espec__desc { opacity: .4; }
  .espec__flotante { display: block; position: fixed; left: 0; top: 0; z-index: 30; width: 260px; aspect-ratio: 3 / 4; pointer-events: none; border-radius: 18px; overflow: hidden; opacity: 0; transform: translate3d(var(--fx, 0), var(--fy, 0), 0) rotate(var(--fr, 0deg)) scale(.85); transition: opacity .35s, scale .5s var(--ease); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); border: 1px solid var(--line-2); }
  .espec__flotante.activa { opacity: 1; scale: 1.18; }
  .espec__flotante img { width: 100%; height: 100%; object-fit: cover; }
}

/* ==========================================================================
   VII · ASÍ TRABAJO
   ========================================================================== */
.caracter { overflow: hidden; background: radial-gradient(60% 50% at 80% 40%, rgba(233, 169, 58, .12), transparent 70%), var(--ink); }
.caracter__grid { position: relative; display: grid; }
.caracter__palabras { position: relative; z-index: 2; margin-top: 10px; }
.caracter__p { display: flex; align-items: baseline; gap: .18em; font: 400 clamp(3.5rem, 1rem + 11.5vw, 12.5rem)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.caracter__soy { font: italic 500 .34em/1 var(--f-serif); color: var(--muted); text-transform: none; letter-spacing: 0; }
.caracter__rellena { position: relative; color: transparent; -webkit-text-stroke: 1.2px rgba(233, 169, 58, .55); }
.caracter__rellena::after {
  content: attr(data-texto); position: absolute; left: 0; top: 0; -webkit-text-stroke: 0;
  background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(-10% calc(100% - var(--f, 1) * 100%) -10% 0);
}
.caracter__p:nth-child(1) .caracter__rellena { --f: clamp(0, calc(var(--p, 1) * 3.4 - .2), 1); }
.caracter__p:nth-child(2) .caracter__rellena { --f: clamp(0, calc(var(--p, 1) * 3.4 - 1.2), 1); }
.caracter__p:nth-child(3) .caracter__rellena { --f: clamp(0, calc(var(--p, 1) * 3.4 - 2.2), 1); }
.caracter__p:nth-child(2) { padding-left: 8%; }
.caracter__p:nth-child(3) { padding-left: 3%; }
.caracter__figura { position: absolute; z-index: 1; right: -10%; top: 0; width: 60%; opacity: .9; translate: 0 calc((var(--p, .5) - .5) * -60px); }
.caracter__figura img { width: 100%; height: auto; filter: drop-shadow(0 0 40px rgba(233, 169, 58, .18)); }
/* En celular la figura se desvanece antes de llegar al párrafo de cierre */
@media (max-width: 1023px) {
  .caracter__figura { filter: drop-shadow(0 0 40px rgba(233, 169, 58, .18)); }
  .caracter__figura img { filter: none; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 82%); mask-image: linear-gradient(180deg, #000 45%, transparent 82%); }
}
.caracter__cierre { position: relative; z-index: 2; margin-top: 44px; display: grid; gap: 16px; max-width: 34em; }
.caracter__serif { font: italic 500 clamp(1.7rem, 1.2rem + 2vw, 3rem)/1.15 var(--f-serif); color: var(--gold-hi); }
.caracter__cierre p:not(.caracter__serif) { color: var(--text-2); font-size: 1.04rem; }
@media (min-width: 1024px) {
  .caracter__figura { right: 2%; top: -4%; width: 30%; }
  .caracter__cierre { margin-left: auto; margin-right: 34%; margin-top: 64px; }
}

/* ==========================================================================
   VIII · CALCULADORA
   ========================================================================== */
.calculadora { background: var(--ink-2); }
.calc { display: grid; gap: 14px; }
.calc__form { padding: clamp(20px, 3vw, 36px); display: grid; gap: 24px; }
.calc__tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calc__tres .campo__caja { padding-inline: 12px; }
.campo--rango > span:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.calc__actividad { font: 600 .82rem/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--gold-hi); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--r, 50%), rgba(239, 232, 220, .12) var(--r, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(239, 232, 220, .12); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold-hi); box-shadow: 0 0 0 6px rgba(233, 169, 58, .15); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold-hi); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(246, 199, 104, .45); }
.rango__marcas { display: flex; justify-content: space-between; font-size: .64rem; color: var(--muted); margin-top: -4px; }
.rango__marcas i { font-style: normal; }
.calc__aviso { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 16px; }
.calc__resultado { padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; overflow: hidden; }
.calc__rotulo { font: 700 .7rem/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.calc__kcal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font: 400 clamp(4rem, 3rem + 4vw, 6.4rem)/.85 var(--f-display); }
.calc__kcal span { background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc__kcal small { font: 600 .82rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.calc__base { font-size: .9rem; color: var(--text-2); }
.anillos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block: 6px; }
.anillo { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.anillo svg { width: 100%; max-width: 116px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 7; }
.anillo__fondo { stroke: rgba(239, 232, 220, .08); }
.anillo__valor { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0)); transition: stroke-dashoffset 1.3s var(--ease); }
.anillo[data-macro=p] .anillo__valor { stroke: var(--gold-hi); }
.anillo[data-macro=g] .anillo__valor { stroke: var(--gold-deep); }
.anillo[data-macro=c] .anillo__valor { stroke: var(--marble); }
.anillo p { display: grid; gap: 4px; }
.anillo strong { font: 400 1.5rem/1 var(--f-display); }
.anillo span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.anillo em { font-style: normal; font-size: .72rem; color: var(--text-2); }
@media (min-width: 1024px) {
  .calc { grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
  .calc__resultado { position: sticky; top: 100px; }
}

/* ==========================================================================
   IX · QUIZ
   ========================================================================== */
.quiz__grid { display: grid; gap: 36px; }
.quiz__cabecera .lead { margin-top: 26px; }
.quiz__caja { padding: clamp(22px, 3vw, 40px); min-height: 440px; display: flex; flex-direction: column; }
.quiz__pasos { display: flex; gap: 6px; margin-bottom: 26px; }
.quiz__pasos span { flex: 1; height: 3px; border-radius: 3px; background: rgba(239, 232, 220, .1); transition: background-color .5s; }
.quiz__pasos span.hecho { background: var(--gold); }
.quiz__vista { flex: 1; display: flex; flex-direction: column; }
.quiz__vista > * { animation: quiz-in .7s var(--ease) both; }
@keyframes quiz-in { from { opacity: 0; transform: translateX(24px); } }
.quiz__num { font: 700 .7rem/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.quiz__pregunta { font: 400 clamp(1.8rem, 1.3rem + 2vw, 2.8rem)/1 var(--f-display); text-transform: uppercase; margin-bottom: 22px; }
.quiz__opciones { display: grid; gap: 10px; }
.quiz__op { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 14px 18px; border-radius: 14px; text-align: left; border: 1px solid rgba(239, 232, 220, .14); background: rgba(11, 10, 8, .5); font-weight: 600; font-size: .98rem; line-height: 1.35; transition: border-color .3s, background-color .3s, transform .5s var(--ease); }
.quiz__op b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font: italic 600 .95rem/1 var(--f-serif); color: var(--gold); transition: all .3s; }
.quiz__op small { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.quiz__op:hover, .quiz__op:focus-visible { border-color: var(--gold); background: rgba(233, 169, 58, .07); transform: translateX(4px); }
.quiz__op:hover b { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.quiz__atras { margin-top: auto; padding-top: 22px; align-self: flex-start; min-height: 44px; font: 700 .7rem/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.quiz__atras:hover { color: var(--gold); }
.quiz__res-plan { font: 400 clamp(2.4rem, 1.6rem + 3vw, 3.8rem)/.95 var(--f-display); text-transform: uppercase; margin: 6px 0 14px; background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quiz__res-txt { color: var(--text-2); margin-bottom: 24px; }
.quiz__res-acciones { display: grid; gap: 10px; }
@media (min-width: 600px) { .quiz__res-acciones { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .quiz__grid { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 6vw; } }

/* ==========================================================================
   X · PLANES
   ========================================================================== */
.planes { background: radial-gradient(70% 40% at 50% 30%, rgba(233, 169, 58, .1), transparent 70%), var(--ink); overflow: hidden; }
.planes__lista {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 26px var(--gutter) 30px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.planes__lista::-webkit-scrollbar { display: none; }
.plan {
  position: relative; flex: 0 0 min(86%, 360px); scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 16px; padding: 28px 22px 24px; border-radius: 26px;
  background: linear-gradient(180deg, #1B1813, #100E0A); border: 1px solid var(--line);
  transition: transform .7s var(--ease), border-color .4s, box-shadow .5s;
}
.plan:hover { border-color: var(--line-2); }
.plan__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-height: 30px; }
.plan__tag { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font: 700 .6rem/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.plan__num { font: italic 600 1.2rem/1 var(--f-serif); color: var(--gold); }
.plan__nombre { font: 400 clamp(1.9rem, 1.6rem + 1vw, 2.3rem)/.95 var(--f-display); text-transform: uppercase; }
.plan__meta { font-size: .88rem; color: var(--muted); margin-top: -8px; }
.plan__precio { display: grid; gap: 2px; padding-block: 14px 16px; border-block: 1px solid var(--line-soft); }
.plan__precio s { font-size: .95rem; color: var(--muted); text-decoration-color: rgba(233, 169, 58, .7); }
.plan__precio strong { display: flex; align-items: baseline; gap: 6px; font: 400 clamp(2.8rem, 2.4rem + 1.4vw, 3.5rem)/1 var(--f-display); letter-spacing: .005em; }
.plan__precio strong sup { font-size: .45em; align-self: flex-start; margin-top: .3em; color: var(--gold); }
.plan__precio small { font: 700 .66rem/1 var(--f-ui); letter-spacing: .2em; color: var(--muted); }
.plan__anual { font-size: .84rem; color: var(--text-2); }
.plan__lista { display: grid; gap: 10px; }
.plan__lista li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.4; color: var(--text-2); }
.plan__lista svg { width: 18px; height: 18px; flex: none; color: var(--gold); margin-top: 1px; }
.plan__acciones { margin-top: auto; display: grid; gap: 6px; padding-top: 8px; }
.plan__hablar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: .86rem; font-weight: 600; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(233, 169, 58, .45); text-underline-offset: 4px; transition: color .3s; }
.plan__hablar:hover { color: var(--gold-hi); }
.plan__hablar svg { width: 16px; height: 16px; color: var(--gold); }
.plan--destacado { border-color: rgba(233, 169, 58, .6); box-shadow: 0 40px 90px -50px rgba(233, 169, 58, .55); }
.plan--destacado .plan__tag { background: rgba(233, 169, 58, .14); }
.plan.resaltado { animation: resalta 1.4s var(--ease) 2; }
@keyframes resalta { 50% { box-shadow: 0 0 0 3px var(--gold-hi), 0 40px 90px -30px rgba(233, 169, 58, .8); transform: translateY(-6px); } }

/* VIP Gold: borde metálico animado */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.plan--vip { border-color: transparent; background: radial-gradient(90% 50% at 50% 0%, rgba(246, 199, 104, .2), transparent 70%), linear-gradient(180deg, #221C10, #0F0C07); box-shadow: 0 40px 100px -50px rgba(233, 169, 58, .6); }
.plan--vip::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), #8A5A12, #F6C768, #FFF1C4, #E9A93A, #8A5A12, #F6C768, #8A5A12);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: gira-borde 6s linear infinite;
}
@keyframes gira-borde { to { --ang: 360deg; } }
.plan--vip .plan__tag { background: var(--oro-grad); color: var(--ink); border: 0; }
.plan--vip .plan__nombre { background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan__laurel { position: absolute; right: 14px; bottom: 90px; width: 90px; height: 150px; color: var(--gold); opacity: .08; pointer-events: none; }
.vip-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(11, 10, 8, .5); }
.vip-toggle button { min-height: 38px; border-radius: 999px; font: 700 .7rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); transition: background-color .3s, color .3s; }
.vip-toggle button[aria-pressed=true] { background: var(--oro-grad); color: var(--ink); }
.planes__puntos { display: flex; justify-content: center; gap: 8px; margin-top: -6px; }
.planes__puntos button { width: 28px; height: 28px; display: grid; place-items: center; }
.planes__puntos button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(239, 232, 220, .2); transition: all .4s; }
.planes__puntos button.activo::before { width: 22px; border-radius: 6px; background: var(--gold); }
@media (min-width: 1100px) {
  .planes__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 20px 0 10px; gap: 16px; align-items: stretch; }
  .plan { flex: none; }
  .plan:hover { transform: translateY(-8px); }
  .plan--destacado { transform: translateY(-14px); }
  .plan--destacado:hover { transform: translateY(-20px); }
  .planes__puntos { display: none; }
}

/* Tabla comparativa */
.comparativa { margin-top: clamp(48px, 6vw, 88px); }
.comparativa__titulo { font: 400 clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem)/1 var(--f-display); text-transform: uppercase; margin-bottom: 22px; text-align: center; }
.comparativa__scroll { overflow-x: auto; border-radius: 22px; border: 1px solid var(--line); background: rgba(20, 18, 14, .7); }
.comparativa__tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .82rem; }
.comparativa__tabla th, .comparativa__tabla td { padding: 14px 6px; text-align: center; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.comparativa__tabla tr:last-child td, .comparativa__tabla tr:last-child th { border-bottom: 0; }
.comparativa__tabla th[scope=row] { width: 34%; text-align: left; padding-left: 16px; font-weight: 600; color: var(--text-2); }
.comparativa__tabla thead th { font: 400 .95rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; padding-block: 18px; }
.comparativa__tabla thead th small { display: block; font: 600 .66rem/1.3 var(--f-ui); letter-spacing: .04em; text-transform: none; color: var(--gold); margin-top: 4px; }
.comparativa__tabla .col-vip { background: rgba(233, 169, 58, .08); }
.comparativa__tabla thead .col-vip { color: var(--gold-hi); }
.comparativa__tabla svg { width: 20px; height: 20px; margin: auto; color: var(--gold); }
.comparativa__tabla .no { color: rgba(163, 155, 139, .5); }
.comparativa__ayuda { display: none; }
/* Celular: la tabla conserva un ancho cómodo y se desliza de lado,
   con la columna de características fija a la izquierda. */
@media (max-width: 759px) {
  .comparativa__scroll { overscroll-behavior-x: contain; scrollbar-width: none; }
  .comparativa__scroll::-webkit-scrollbar { display: none; }
  .comparativa__tabla { width: 600px; }
  .comparativa__tabla th[scope=row] { position: sticky; left: 0; z-index: 1; width: 150px; background: #15130F; box-shadow: 1px 0 0 var(--line-soft); }
  .comparativa__tabla thead th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; background: #15130F; }
  .comparativa__ayuda { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font: 700 .64rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  .comparativa__ayuda svg { width: 44px; height: 12px; color: var(--gold); animation: empuja 1.8s var(--ease) infinite; }
}
@media (min-width: 760px) {
  .comparativa__tabla { font-size: .95rem; }
  .comparativa__tabla th, .comparativa__tabla td { padding: 18px 14px; }
  .comparativa__tabla th[scope=row] { padding-left: 28px; width: 30%; }
  .comparativa__tabla thead th { font-size: 1.25rem; }
}

/* ==========================================================================
   XI · RESULTADOS
   ========================================================================== */
.resultados { background: var(--ink-2); overflow: hidden; }
.resultados .cabecera { margin-bottom: 20px; }
.olimpo { display: grid; justify-items: center; text-align: center; gap: 22px; }
.olimpo__nichos { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 12px; align-items: end; width: min(100%, 640px); margin-bottom: 18px; }
.nicho { position: relative; aspect-ratio: 3 / 5; border-radius: 999px 999px 10px 10px; border: 1px dashed rgba(233, 169, 58, .32); background: linear-gradient(180deg, rgba(233, 169, 58, .06), transparent 70%); display: grid; place-items: center; }
.nicho::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: -14px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, rgba(233, 169, 58, .22), rgba(233, 169, 58, .05)); }
.nicho span { font: italic 500 1.6rem/1 var(--f-serif); color: rgba(233, 169, 58, .45); }
.nicho--centro { aspect-ratio: 3 / 5.2; border: 1px solid var(--gold); background: radial-gradient(70% 50% at 50% 40%, rgba(246, 199, 104, .22), transparent 70%), rgba(11, 10, 8, .4); box-shadow: 0 0 60px -10px rgba(233, 169, 58, .35), inset 0 0 40px rgba(233, 169, 58, .08); }
.nicho--centro span { font: 400 clamp(2.4rem, 2rem + 2vw, 3.6rem)/1 var(--f-display); text-transform: uppercase; color: var(--gold-hi); font-style: normal; }
.nicho__laurel { position: absolute; left: 12%; top: 50%; width: 32%; height: auto; aspect-ratio: 140 / 236; color: var(--gold); transform: translateY(-50%); opacity: .8; }
.nicho__laurel--der { left: auto; right: 12%; transform: translateY(-50%) scaleX(-1); }
.olimpo__titulo { max-width: 14em; }
.olimpo .lead { max-width: 34em; }
.olimpo .btn { margin-top: 8px; }
.resultados__carrusel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.resultado { flex: 0 0 min(88%, 420px); scroll-snap-align: center; display: grid; gap: 14px; }
.resultado__info h3 { font: 400 1.6rem/1 var(--f-display); text-transform: uppercase; }
.resultado__info p { color: var(--text-2); font-size: .92rem; }
.resultado__logro { color: var(--gold-hi) !important; font-weight: 700; }
.resultado__frase { font: italic 500 1.2rem/1.35 var(--f-serif) !important; color: var(--text) !important; }

/* ==========================================================================
   XII · VALORACIÓN
   ========================================================================== */
.valoracion { overflow: hidden; }
.valoracion__grid { display: grid; gap: 36px; }
.valoracion__lado .lead { margin-top: 24px; }
.valoracion__pasos { margin-top: 28px; border-top: 1px solid var(--line-soft); }
.valoracion__pasos li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-2); }
.valoracion__pasos span { font: italic 600 1.05rem/1 var(--f-serif); color: var(--gold); min-width: 26px; }
.valoracion__figura { display: none; }
.valoracion__form { padding: clamp(20px, 3.4vw, 40px); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-bottom: 22px; }
.campo--ancho { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .valoracion__grid { grid-template-columns: .85fr 1.15fr; gap: 5vw; align-items: start; }
  .valoracion__lado { position: sticky; top: 100px; }
  .valoracion__figura { display: block; position: relative; width: 76%; margin: 34px 0 0 -4%; }
  .valoracion__figura::before { content: ''; position: absolute; inset: 20% 5% 0; background: radial-gradient(50% 50% at 50% 55%, rgba(233, 169, 58, .35), transparent 70%); }
  .valoracion__figura img { position: relative; width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla .campo:not(.campo--ancho) { grid-column: span 2; }
}

/* ==========================================================================
   XIII · COMUNIDAD
   ========================================================================== */
.comunidad { position: relative; isolation: isolate; overflow: hidden; min-height: 92svh; display: grid; align-content: end; }
.comunidad__media { position: absolute; inset: 0; z-index: -2; }
.comunidad__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Trama fina sobre el video: disimula que el clip original es de baja
   resolución cuando se estira a pantalla completa. */
.comunidad__media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(11, 10, 8, .55) 32%, transparent 36%) 0 0 / 3px 3px; opacity: .55; pointer-events: none; }
.comunidad__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--ink) 4%, rgba(11, 10, 8, .72) 42%, rgba(11, 10, 8, .25) 80%, rgba(11, 10, 8, .6)); }
.comunidad__texto { padding-block: 140px 60px; }
.comunidad__texto .lead { margin: 24px 0 30px; }
.comunidad__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--gutter) calc(var(--sec) * .6); }
.comunidad__fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 16px; border: 1px solid var(--line-soft); }
/* Celular y tablet: el video (horizontal y liviano) va en una franja 16:10 a
   todo el ancho, casi a su tamaño real, en vez de estirarse a pantalla
   completa; el texto queda debajo sobre fondo tinta. */
@media (max-width: 1023px) {
  .comunidad { min-height: 0; display: block; padding-top: var(--sec); }
  .comunidad__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; border-block: 1px solid var(--line); }
  .comunidad__media::after { background: linear-gradient(180deg, transparent 55%, rgba(11, 10, 8, .55)); opacity: 1; }
  .comunidad__velo { display: none; }
  .comunidad__texto { padding-block: 40px 40px; }
}
@media (min-width: 1024px) {
  /* Alto limitado: así el video horizontal no se amplía más de la cuenta */
  .comunidad { min-height: clamp(640px, 88svh, 820px); }
  .comunidad__texto { padding-block: 200px 140px; max-width: calc(var(--max) + var(--gutter) * 2); }
  .comunidad__texto .lead { max-width: 30em; }
  .comunidad__fotos { position: absolute; right: var(--gutter); bottom: 110px; width: min(34vw, 460px); padding: 0; gap: 16px; }
  .comunidad__fotos img:first-child { transform: rotate(-4deg) translateY(30px); }
  .comunidad__fotos img:last-child { transform: rotate(3deg); }
}

/* ==========================================================================
   XIV · FAQ
   ========================================================================== */
.faq__grid { display: grid; gap: 36px; }
.faq__wa { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; min-height: 44px; font-weight: 700; color: var(--gold-hi); border-bottom: 1px solid var(--line-2); }
.faq__wa svg { width: 20px; height: 20px; }
.faq__lista { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 clamp(1.02rem, .95rem + .4vw, 1.25rem)/1.35 var(--f-ui); transition: color .3s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-hi); }
.faq__item summary svg { width: 24px; height: 24px; flex: none; color: var(--gold); transition: transform .5s var(--ease); }
.faq__item[open] summary svg { transform: rotate(135deg); }
.faq__resp { padding: 0 0 24px; color: var(--text-2); max-width: 62ch; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 6vw; }
  .faq__grid > header { position: sticky; top: 110px; align-self: start; }
}

/* ==========================================================================
   XV · TIENDA
   ========================================================================== */
.tienda { background: var(--ink-2); overflow: hidden; }
.tienda__querubin { position: absolute; right: -14%; top: 3%; width: min(760px, 110vw); height: auto; opacity: .06; pointer-events: none; }
.tienda__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prenda a { display: block; }
.prenda figure { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--ink-3); border: 1px solid var(--line-soft); }
.prenda img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.prenda a:hover img { transform: scale(1.06); }
.prenda h3 { margin-top: 14px; font: 700 .92rem/1.3 var(--f-ui); }
.prenda p { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 .64rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.prenda p svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.prenda a:hover p svg { transform: translateX(4px); }
.tienda__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 44px; }
.tienda__ig { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--text-2); }
.tienda__ig svg { width: 20px; height: 20px; color: var(--gold); }
@media (min-width: 1024px) { .tienda__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .prenda:nth-child(even) { margin-top: 48px; } }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
/* El video es vertical y de baja resolución: en vez de estirarlo a pantalla
   completa (se pixelaba), vive dentro de un arco de templo a su tamaño real
   y el titular se monta encima de la parte baja del arco. */
.final {
  --arco-h: min(64svh, 560px);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; text-align: center;
  padding-block: clamp(96px, 9vw, 140px) clamp(88px, 9vw, 140px);
  background: radial-gradient(46% 40% at 50% 30%, rgba(233, 169, 58, .2), transparent 72%), var(--ink);
}
.final__media { position: relative; z-index: -1; width: calc(var(--arco-h) * .6); height: var(--arco-h); }
.final__arco {
  position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 16px 16px;
  border: 1px solid rgba(233, 169, 58, .5); background: var(--ink-3);
  outline: 1px solid rgba(233, 169, 58, .16); outline-offset: 12px;
  box-shadow: 0 0 120px -24px rgba(233, 169, 58, .55), 0 60px 120px -40px rgba(0, 0, 0, .9);
}
.final__arco video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.final__arco::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 8, .05) 30%, rgba(11, 10, 8, .5) 60%, rgba(11, 10, 8, .94) 96%); }
.final__laurel { position: absolute; bottom: 4%; width: calc(var(--arco-h) * .26); height: auto; aspect-ratio: 140 / 236; color: var(--gold); opacity: .38; }
.final__laurel--izq { right: calc(100% + 22px); }
.final__laurel--der { left: calc(100% + 22px); transform: scaleX(-1); }
.final__velo { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url('../img/texturas/marmol-oscuro.svg') center / cover; opacity: .08; }
.final__contenido { position: relative; display: grid; justify-items: center; margin-top: calc(var(--arco-h) * -.3); }
.final__kicker { font: italic 500 clamp(1.3rem, 1.1rem + 1vw, 1.9rem)/1 var(--f-serif); color: var(--gold-hi); margin-bottom: 20px; text-shadow: 0 2px 18px rgba(11, 10, 8, .9); }
.final__titulo { font: 400 clamp(3.4rem, 1.4rem + 8.4vw, 9.6rem)/.86 var(--f-display); text-transform: uppercase; text-shadow: 0 12px 50px rgba(11, 10, 8, .75); }
.final__titulo em { filter: drop-shadow(0 6px 24px rgba(11, 10, 8, .8)); text-shadow: none; }
.final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.final__firma { width: min(300px, 64vw); margin-top: 48px; }
@media (max-width: 599px) {
  .final { --arco-h: min(58svh, 470px); }
  .final__laurel { display: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pie { position: relative; overflow: hidden; background: #080705; border-top: 1px solid var(--line); padding-top: 80px; }
.pie__grid { display: grid; gap: 40px; }
.pie__marca img { width: 150px; height: auto; margin-left: -12px; }
.pie__lema { margin-top: 12px; font: italic 500 1.25rem/1.3 var(--f-serif); color: var(--text-2); }
.pie__col { display: grid; align-content: start; gap: 2px; }
.pie__titulo { font: 700 .68rem/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.pie__col a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-2); transition: color .3s; width: fit-content; }
.pie__col a:hover { color: var(--gold-hi); }
.pie__col svg { width: 18px; height: 18px; color: var(--gold); }
.pie__texto { color: var(--muted); font-size: .92rem; margin-bottom: 8px; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 56px; padding-block: 26px 90px; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--muted); }
.pie__gigante { position: absolute; left: 0; right: 0; bottom: -.2em; display: flex; justify-content: center; pointer-events: none; user-select: none; font: 400 38vw/1 var(--f-gotica); color: transparent; -webkit-text-stroke: 1px rgba(233, 169, 58, .1); z-index: 0; }
.pie .contenedor { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .pie__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .pie__base { padding-bottom: 30px; }
  .pie__gigante { font-size: 26vw; bottom: -.28em; }
}

/* ==========================================================================
   CHECKOUT (drawer lateral)
   ========================================================================== */
.checkout { position: fixed; inset: 0 0 0 auto; width: min(480px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.checkout::backdrop { background: rgba(5, 4, 3, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.checkout__panel { height: 100%; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(90% 30% at 100% 0%, rgba(233, 169, 58, .12), transparent 70%), linear-gradient(180deg, #17140F, #0D0B08); border-left: 1px solid var(--line); padding: 18px clamp(20px, 4vw, 36px) max(32px, env(safe-area-inset-bottom)); }
.checkout[open] .checkout__panel { animation: drawer-in .7s var(--ease); }
.checkout[open]::backdrop { animation: fade-in .4s ease; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.checkout__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.checkout__seguro { display: flex; align-items: center; gap: 8px; font: 700 .68rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.checkout__seguro svg { width: 16px; height: 16px; }
.checkout__cerrar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); }
.checkout__cerrar svg { width: 20px; height: 20px; }
.checkout__titulo { font: 400 2.4rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 16px; }
.checkout__resumen { display: grid; gap: 6px; padding: 18px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(233, 169, 58, .06); margin-bottom: 22px; }
.checkout__resumen h3 { font: 400 1.5rem/1 var(--f-display); text-transform: uppercase; }
.checkout__resumen p { font-size: .88rem; color: var(--text-2); }
.checkout__resumen .checkout__monto { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font: 400 2.2rem/1 var(--f-display); color: var(--gold-hi); }
.checkout__resumen .checkout__monto small { font: 700 .66rem/1 var(--f-ui); letter-spacing: .2em; color: var(--muted); }
.checkout__form { display: grid; gap: 16px; }
.tel { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
.checkout__metodos { text-align: center; font-size: .8rem; color: var(--muted); margin-top: -4px; }
.checkout__alterno { display: grid; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(11, 10, 8, .6); }
.checkout__alterno p { font-size: .9rem; color: var(--text-2); }
.checkout__hablar { text-align: center; font-size: .88rem; color: var(--muted); }
.checkout__hablar a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; }

/* ==========================================================================
   Movimiento reducido: todo quieto y visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee__pista { animation: none; }
  .hero__palabra, .hero__figura, .hero__halo, .caracter__figura { translate: none !important; }
}