/* ============================================================
   PROTOTIPO PRIME — rediseno completo (no toca la web real)
   Tema por variables: OSCURO (por defecto) + CLARO (.theme-claro).
   Tipografia: Anton (impacto) + Archivo (subtitulos) + Inter (texto).
   Paletas y contrastes validados (AA/AAA) en la auditoria.
   ============================================================ */

:root {
  /* TEMA OSCURO (por defecto) */
  --bg: #0B0B0C;
  --bg-2: #121316;
  --surface: #16161A;
  --surface-2: #1E1E22;
  --line: rgba(255, 255, 255, .10);
  --txt: #F4F2EC;
  --muted: #ADB0B8;
  --gold: #F2A93C;          /* ámbar Fable 5 (acento principal) */
  --violet: #8C7CF0;        /* violeta Fable 5 (acento secundario) */
  --coral: #E8553A;
  --on-gold: #11141A;
  /* ámbar de RELLENO (constante en claro/oscuro): cajas sticker y CTA mantienen su brillo */
  --gold-fill: #F2A93C;
  --ink-on-fill: #11141A;
  --violet-fill: #8C7CF0;
  --wa: #0A7A3D;            /* verde WhatsApp accesible (blanco encima = AA) */
  --on-wa: #ffffff;
  --hero-glow: rgba(242, 169, 60, .12);
  --hero-dark: rgba(18, 19, 22, .85);
  --shadow: rgba(0, 0, 0, .55);
  --card-grad: linear-gradient(180deg, #1a1a1f, #141418);
  --max: 1180px;
  /* tipografía de titulares (Anton, como los carruseles) */
  --font-display: 'Anton', sans-serif;
  --display-weight: 400;
}

/* Opciones de tipografia de titulares (se cambian con el boton Aa) */
html.disp-oswald  { --font-display: 'Oswald', sans-serif; --display-weight: 600; }
html.disp-bebas   { --font-display: 'Bebas Neue', sans-serif; --display-weight: 400; }
html.disp-archivo { --font-display: 'Archivo', sans-serif; --display-weight: 800; }
html.disp-anton   { --font-display: 'Anton', sans-serif; --display-weight: 400; }

html.theme-claro {
  /* TEMA CLARO */
  --bg: #F6F4EF;
  --bg-2: #EFEBE3;
  --surface: #FFFFFF;
  --surface-2: #FBF9F4;
  --line: #E7E3DA;
  --txt: #16161A;
  --muted: #5E5A52;
  --gold: #7A5410;          /* oro viejo legible sobre claro (AA en texto pequeno) */
  --on-gold: #FFFFFF;
  --wa: #0A7A3D;
  --on-wa: #ffffff;
  --hero-glow: rgba(154, 107, 20, .14);
  --hero-dark: rgba(239, 235, 227, .6);
  --shadow: rgba(40, 36, 28, .18);
  --card-grad: linear-gradient(180deg, #ffffff, #f7f4ee);
}

/* ============================================================
   BANDA CLARA por seccion: mismo set de tokens que el tema claro,
   pero acotado a una <section>. Los hijos se re-tematizan solos.
   El hero, header, footer y banda de disciplinas siguen oscuros.
   ============================================================ */
.band-light {
  --bg: #F4F5F7;              /* claro NEUTRO frio (nada de crema) */
  --bg-2: #EAECF1;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --line: #E3E6EC;
  --txt: #14161B;
  --muted: #586070;
  --gold: #14161B;            /* en claro el "ambar de TEXTO" pasa a ANTRACITA (sin dorado apagado) */
  --on-gold: #FFFFFF;
  --violet: #4B40A8;          /* acento de TEXTO en claro (legible, sin dorado) */
  --violet-fill: #6A5ACD;     /* violeta de RELLENO legible (blanco encima) */
  --hero-glow: rgba(75, 64, 168, .07);
  --shadow: rgba(18, 22, 33, .12);
  --card-grad: linear-gradient(180deg, #ffffff, #f6f8fb);
  color: var(--txt);   /* titulares sin color propio heredan antracita (no el blanco del body) */
}
.band-light .stat__num, .band-light .precio__num { text-shadow: none; }
.band-light .btn--ghost { border-color: color-mix(in srgb, var(--txt) 26%, transparent); }
.band-light .btn--ghost:hover { background: rgba(0,0,0,.05); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .4s ease, color .4s ease;
}

img { display: block; max-width: 100%; }

.wrap { width: 90%; max-width: var(--max); margin: 0 auto; }
.wrap--narrow { max-width: 820px; }

/* Foco visible accesible (teclado) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.acc__q:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Tipografia ---------- */
/* Kicker = etiqueta ámbar legible; el emoji a la izquierda hace de ancla (sin barra) */
.kicker {
  display: block;
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: .005em;
  color: var(--gold);
  margin-bottom: 16px;
}
/* Eyebrow del hero: etiqueta limpia (sin caja amarilla), "PRIME" en ámbar */
.kicker--pill {
  display: inline-block;
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--txt) 58%, transparent);
}
.kicker--pill strong { font-weight: 800; color: var(--gold); letter-spacing: .26em; }
/* Icono de línea en los kickers (sustituye al emoji); hereda el color del kicker */
.kicker__ic { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sec-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
section { padding: clamp(64px, 7vw, 96px) 0; }
.hl { color: var(--gold); }

/* ---------- Lenguaje Fable 5: cajas sticker, resaltados, manuscrita ---------- */
.box--amber, .box--violet { display: inline-block; padding: 0 .24em .04em; border-radius: 9px; line-height: 1.02; }
.box--amber  { background: var(--gold-fill);  color: var(--ink-on-fill) !important; transform: rotate(-1.6deg); box-shadow: 0 7px 18px rgba(242,169,60,.30); }
.box--violet { background: var(--violet-fill); color: #fff !important;          transform: rotate(1.3deg);  box-shadow: 0 7px 18px rgba(140,124,240,.30); }
/* resaltado de palabra clave en cuerpo (corto) */
.k-amber  { background: var(--gold-fill);  color: var(--ink-on-fill) !important; padding: .02em .22em; border-radius: 5px; font-weight: 700; }
.k-violet { background: var(--violet-fill); color: #fff !important;          padding: .02em .22em; border-radius: 5px; font-weight: 700; }
/* subtítulo manuscrito + squiggle */
.handsub { font-family: 'Kalam', cursive; font-weight: 700; font-size: 1.55em; line-height: 1.25; color: var(--txt); }
.handsub .wig { color: var(--coral); text-decoration: underline wavy var(--coral); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Hero: recorte de Víctor sobre fondo oscuro (sin foto que compita) */
.hero__cutout { width: 100%; max-width: 440px; margin: 0 auto; display: block; object-fit: contain; filter: drop-shadow(0 18px 42px var(--shadow)); }
@media (max-width: 860px) { .hero__cutout { max-width: 300px; } }

/* Transformaciones como polaroids */
.results .carousel__item { background: #fff; padding: 10px 10px 13px; border-radius: 5px; transform: rotate(-1.5deg); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.results .carousel__item:nth-child(even) { transform: rotate(1.4deg); }
/* Fotos en PARES (antes/después): juntas dentro del par, separadas entre pares */
.results .carousel__track { gap: 0; }
.results .carousel__item:nth-child(odd) { margin-right: 8px; }
.results .carousel__item:nth-child(even) { margin-right: 40px; }
.results .carousel__item:last-child { margin-right: 0; }
.results .carousel__item img { border-radius: 3px; border: none; }

/* Banda de disciplinas (acento, como el footer del carrusel) */
.disc { text-align: center; padding: 26px 16px; background: var(--bg-2); border-block: 1px solid var(--line); font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: .2em; font-size: 13px; text-transform: uppercase; color: var(--txt); }
.disc .g { color: var(--gold); } .disc .v { color: var(--violet); }

/* Iconos circulares en tarjetas (idea getindya) */
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(242,169,60,.14); border: 1px solid rgba(242,169,60,.4); margin-bottom: 14px; color: var(--gold); }
.card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.incluye .cards .card:nth-child(even) .card__icon { background: rgba(140,124,240,.16); border-color: rgba(140,124,240,.45); color: var(--violet); }

/* Resaltado de palabra clave en cuerpo (lo aplica el JS a énfasis corto) */
.k-amber  { background: var(--gold-fill);  color: var(--ink-on-fill) !important; padding: .02em .22em; border-radius: 5px; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.k-violet { background: var(--violet-fill); color: #fff !important;          padding: .02em .22em; border-radius: 5px; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.k-coral  { color: var(--coral) !important; font-weight: 800 !important; }
/* En bandas CLARAS el rojo no luce -> el enfasis largo pasa a negrita oscura (en oscuro se queda coral) */
.band-light .k-coral { color: var(--txt) !important; }

/* Caption a mano sobre las polaroids de transformaciones */
.results .carousel__item { position: relative; padding-bottom: 30px; }
.results .carousel__item[data-cap]::after { content: attr(data-cap); position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: 'Kalam', cursive; font-weight: 700; font-size: 17px; color: #1A1F2B; }

/* Vídeo de presentación (facade) en la narrativa */
.intro-video { width: min(100%, 680px); margin: 24px auto 8px; position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 50px var(--shadow); }
.intro-video .video__thumb { width: 100%; height: 100%; object-fit: cover; }
.intro-video .video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70px; height: 70px; border-radius: 50%; border: none; cursor: pointer; background: var(--gold); display: flex; align-items: center; justify-content: center; }
.intro-video .video__play::before { content: ""; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--on-gold); margin-left: 5px; }
.intro-video:hover .video__play { transform: translate(-50%,-50%) scale(1.08); }
.intro-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: var(--gold-fill); color: var(--ink-on-fill); box-shadow: 0 8px 24px rgba(245, 197, 24, .22); }
.btn--gold:hover { box-shadow: 0 12px 30px rgba(245, 197, 24, .38); }
.btn--red { background: #E11D2A; color: #fff; box-shadow: 0 3px 10px rgba(225, 29, 42, .16); }
.btn--red:hover { background: #C8101D; box-shadow: 0 6px 15px rgba(225, 29, 42, .26); }
@keyframes pulse-red { 0%, 100% { box-shadow: 0 8px 24px rgba(225, 29, 42, .30); } 50% { box-shadow: 0 10px 30px rgba(225, 29, 42, .62); } }
@media (prefers-reduced-motion: reduce) { .btn--red { animation: none; } }
.btn--ghost { background: transparent; color: var(--txt); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--txt); background: rgba(127, 127, 127, .08); }
.btn--wa { background: var(--wa); color: var(--on-wa); }
.btn--wa:hover { box-shadow: 0 10px 26px rgba(37, 211, 102, .32); }
.btn--block { width: 100%; }
.btn--big { padding: 16px 28px; font-size: 17px; }
.btn--slim { min-height: 42px; padding: 10px 20px; font-size: 14px; letter-spacing: .01em; }
.wa-ico { width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9.4 3 4 8.3 4 14.9c0 2.6.8 5 2.3 7L4 29l7.3-2.2c1.5.8 3.1 1.2 4.7 1.2 6.6 0 12-5.3 12-11.9S22.6 3 16 3z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9.4 3 4 8.3 4 14.9c0 2.6.8 5 2.3 7L4 29l7.3-2.2c1.5.8 3.1 1.2 4.7 1.2 6.6 0 12-5.3 12-11.9S22.6 3 16 3z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* CTA de cierre intermedio */
.cta-band { text-align: center; padding: 8px 0 4px; }
.incluye .cta-band { margin-top: 32px; }
.cta-band p { color: var(--muted); margin-bottom: 16px; font-size: 17px; }

/* ---------- Aviso prototipo + toggle tema ---------- */
.proto-flag {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: var(--gold); color: var(--on-gold);
  font: 600 12px/1 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; padding: 7px 90px 7px 10px;
}
.theme-toggle, .font-toggle {
  position: fixed; top: 4px; z-index: 10000;
  height: 26px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.30); color: #ffffff;
  font: 700 11px 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.theme-toggle { right: 8px; }
.font-toggle { left: 8px; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr.is-scrolled { box-shadow: 0 8px 30px var(--shadow); }
.hdr__inner { width: 90%; max-width: var(--max); margin: 0 auto; display: flex; align-items: center; gap: 24px; height: 68px; }
.hdr__logo { flex: none; }
.hdr__logo img { height: 42px; width: 42px; border-radius: 50%; object-fit: cover; }
.hdr__disc { margin: 0 auto; font: 800 11px 'Archivo', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hdr__actions { flex: none; }
.hdr__disc .g { color: var(--gold); } .hdr__disc .v { color: var(--violet); }
.hdr__actions { display: flex; align-items: center; gap: 12px; }
.hdr__ig { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; color: var(--txt); border: 1px solid var(--line); transition: color .2s, border-color .2s; flex: none; }
.hdr__ig svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.hdr__ig:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.hdr__nav { display: flex; gap: 26px; margin-left: auto; }
.hdr__nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; padding: 9px 2px; transition: color .2s; }
.hdr__nav a:hover { color: var(--txt); }
.hdr__cta { min-height: 44px; padding: 11px 20px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(540px, 82vh, 780px);
  display: grid; align-items: center;
  padding: clamp(86px, 11vh, 120px) 0 clamp(60px, 8vh, 92px);
  background: #0b0b0c var(--img, none) 70% 18%/cover no-repeat;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.72) 42%, rgba(8,8,10,.30) 78%, rgba(8,8,10,.5) 100%),
    linear-gradient(0deg, rgba(8,8,10,.55), transparent 45%);
}
.hero__grid {
  position: relative; z-index: 1;
  width: 90%; max-width: var(--max); margin: 0 auto;
  display: block;
}
.hero__copy { max-width: 600px; }
.hero__title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(34px, 6vw, 68px); line-height: 1.08; letter-spacing: .005em;
  text-transform: uppercase; margin-bottom: 20px;
}
/* (subrayado del hero retirado: cruzaba el texto al partir en varias lineas) */
.hero__sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 34ch; margin-bottom: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 14px; }
.hero__reassure { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.hero__reassure strong { color: var(--txt); }
.hero__trust { list-style: none; display: flex; gap: 26px; flex-wrap: wrap; }
.hero__trust li { font-size: 14px; color: var(--muted); }
.hero__trust strong { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 30px; color: var(--txt); letter-spacing: .02em; }
.hero__photo { position: relative; }
.hero__photo img { width: 100%; border-radius: 18px; object-fit: cover; aspect-ratio: 4/5; box-shadow: 0 30px 70px var(--shadow); border: 1px solid var(--line); }

/* Placeholders de foto */
.photo-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  background:
    repeating-linear-gradient(45deg, rgba(127,127,127,.04) 0 14px, rgba(127,127,127,.08) 14px 28px),
    var(--card-grad);
  text-align: center;
}
html.theme-claro .photo-ph {
  border-color: color-mix(in srgb, var(--gold) 80%, transparent);
  background:
    repeating-linear-gradient(45deg, rgba(122,84,16,.06) 0 14px, rgba(122,84,16,.12) 14px 28px),
    var(--card-grad);
}
.photo-ph--hero { aspect-ratio: 4/5; width: 100%; box-shadow: 0 30px 70px var(--shadow); }
.photo-ph--about { aspect-ratio: 4/5; width: 100%; }
.photo-ph__tag { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(20px, 2.4vw, 28px); color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.photo-ph__hint { font-size: 13px; color: var(--muted); letter-spacing: .04em; }

/* ============================================================
   FOTO FULL-BLEED detras del contenido de una seccion existente.
   Uso: <section class="... bleed bleed--light|--dark [bleed--diag] bleed--ph"
            style="--img:url('assets/archivo.jpg')">
          <div class="bleed__photo"></div>
          <div class="bleed__scrim"></div>
          <span class="bleed__tag">archivo.jpg</span>  (quitar al subir foto)
          <div class="wrap"> ...contenido... </div>
        </section>
   Sin foto -> se ve un placeholder con textura. El scrim garantiza AA.
   ============================================================ */
.bleed { position: relative; isolation: isolate; }
.bleed > .wrap { position: relative; z-index: 2; }
.bleed__photo {
  position: absolute; inset: 0; z-index: 0;
  background: var(--img, none) center/cover no-repeat;
  background-color: #0c0d11;
}
.bleed--ph .bleed__photo {
  background:
    var(--img, none) center/cover no-repeat,
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 22px, rgba(255,255,255,.08) 22px 44px),
    linear-gradient(135deg, #1a1c22, #0c0d11);
}
.bleed__scrim { position: absolute; inset: 0; z-index: 1; }
.bleed--light .bleed__scrim { background: linear-gradient(180deg, rgba(244,245,247,.72) 0%, rgba(244,245,247,.88) 58%, rgba(244,245,247,.93) 100%); }
.bleed--light.bleed--diag .bleed__scrim { background: linear-gradient(105deg, rgba(245,246,248,.97), rgba(245,246,248,.88) 50%, rgba(245,246,248,.4)); }
.bleed--dark .bleed__scrim { background: radial-gradient(62% 82% at 50% 50%, rgba(11,11,12,.55), rgba(11,11,12,.83)); }
/* Formulario: deja ver más al atleta (degradado lateral en vez de viñeta) */
.contacto.bleed--dark .bleed__photo { background-position: center 22%; }
.contacto.bleed--dark .bleed__scrim { background: linear-gradient(90deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.55) 42%, rgba(10,10,12,.4) 65%, rgba(10,10,12,.55) 100%); }
.bleed__tag {
  position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%);
  font: 700 11px 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap;
}
@media (max-width: 767px) {
  .bleed--light .bleed__scrim { background: linear-gradient(180deg, rgba(244,245,247,.78) 0%, rgba(244,245,247,.9) 72%); }
  .bleed--light.bleed--diag .bleed__scrim { background: linear-gradient(180deg, rgba(245,246,248,.96), rgba(245,246,248,.92)); }
}

/* Divisor full-bleed de imagen DENTRO de una seccion (rompe un bloque claro largo) */
.imgdiv {
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  min-height: clamp(280px, 38vw, 460px);
  margin: clamp(30px, 5vw, 58px) 0;
  background: #0b0b0c var(--img, none) center/cover no-repeat;
}
.imgdiv::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,.62), rgba(8,8,10,.42) 50%, rgba(8,8,10,.66));
}
.imgdiv__inner { position: relative; z-index: 1; padding: 28px 22px; }
.imgdiv__title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(30px, 6vw, 58px); line-height: 1.04; text-transform: uppercase;
  color: #fff; letter-spacing: .02em; text-shadow: 0 4px 30px rgba(0,0,0,.65); margin: 0;
}

/* ---------- Imagen inline (figura con marco) y placeholders ---------- */
.media { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px var(--shadow); }
.media img { width: 100%; display: block; object-fit: cover; }
.media--food img { aspect-ratio: 4/3; }
.media__cap { font-family: 'Kalam', cursive; font-weight: 700; font-size: 16px; color: var(--muted); text-align: center; padding: 10px 14px 4px; }
/* placeholder de imagen inline mientras Víctor genera la foto */
.media-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 20px; border-radius: 16px;
  border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  background:
    repeating-linear-gradient(45deg, rgba(127,127,127,.04) 0 14px, rgba(127,127,127,.08) 14px 28px),
    var(--card-grad);
}
.media-ph__tag { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.media-ph__hint { font-size: 12px; color: var(--muted); }
.media-ph--food { aspect-ratio: 4/3; max-width: 520px; margin: 6px auto 24px; }
.media-ph--polaroid {
  float: right; width: clamp(180px, 32%, 252px); aspect-ratio: 4/5;
  margin: 4px 0 14px 22px; transform: rotate(-2deg);
  background: #fff; border: none; border-radius: 5px; padding: 12px 12px 26px;
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
}
.media-ph--polaroid .media-ph__tag { color: #1A1F2B; }
.media-ph--polaroid .media-ph__hint { color: #5a5a5a; }
@media (max-width: 600px) {
  .media-ph--polaroid { float: none; width: 100%; max-width: 280px; margin: 10px auto 16px; transform: rotate(-1deg); }
}

.hero__scroll { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 22px; text-decoration: none; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ---------- Dolor / narrativa larga ---------- */
.dolor { background: var(--bg-2); }
#narrativa { padding-top: 48px; }
.narrative p { font-size: 19px; line-height: 1.7; color: var(--txt); margin-bottom: 18px; max-width: 64ch; }
.narrative p em { color: var(--gold); font-style: italic; }
.about__copy p { font-size: 18px; line-height: 1.65; }
.narrative .sec-title { margin-top: 40px; }
.narrative .checklist { margin: 8px 0 20px; }
.dolor__lead { font-size: 19px; color: var(--muted); margin-bottom: 32px; max-width: 60ch; }
.checklist { list-style: none; display: grid; gap: 13px; max-width: 760px; }
.checklist li {
  position: relative; padding: 17px 20px 17px 54px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 17px;
}
.checklist li::before {
  content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Metodo ---------- */
.metodo { background: var(--bg); }
.metodo .handsub { margin-bottom: 32px; }   /* más aire entre el subtítulo y las tarjetas */
.incluye { background: var(--bg); }   /* faltaba: sin esto, band-light no pintaba el fondo y el titulo quedaba oscuro/oscuro */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 10px; }
.card {
  background: var(--card-grad);
  border: 1px solid var(--line); border-radius: 20px; padding: 32px 30px;
  box-shadow: 0 14px 34px var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px var(--shadow); border-color: color-mix(in srgb, var(--gold) 42%, transparent); }
.card__n { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 58px; line-height: .9; color: var(--gold); display: block; margin-bottom: 4px; }
.metodo .cards .card:nth-child(even) .card__n { color: var(--violet); }
/* Icono JUNTO al número en las tarjetas del método */
.card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.card__head .card__icon { margin-bottom: 0; }
.card__head .card__n { margin-bottom: 0; }
/* "Te lo cuento en 2 minutos" como texto especial */
.tease-wrap { margin-top: 6px; text-align: center; }
.tease { display: inline-block; white-space: nowrap; text-transform: uppercase; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: .04em; background: var(--gold-fill); color: var(--ink-on-fill); padding: 9px 18px; border-radius: 9px; transform: rotate(-1deg); }
/* "Esto vas a tener en PRIME" — cada tarjeta con su color */
.incluye .sec-title { text-align: center; }
.incluye__hl { display: inline-block; background: var(--gold-fill); color: var(--ink-on-fill); padding: 4px 18px 7px; border-radius: 12px; transform: rotate(-1.8deg); box-shadow: 0 5px 14px rgba(242,169,60,.20); }
.incluye .cards { gap: 20px; }
.incluye .cards .card { border-top: 3px solid var(--line); }
.incluye .card__icon { display: flex; width: 54px; height: 54px; border-radius: 15px; }
.incluye .card__icon svg { width: 28px; height: 28px; }
.incluye .card h3 { display: inline-block; margin-top: 6px; padding: 5px 12px; border-radius: 8px; font-size: 19px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.incluye .cards .card:nth-child(1) { border-top-color: var(--gold-fill); }
.incluye .cards .card:nth-child(1) .card__icon { background: rgba(242,169,60,.16); border-color: rgba(242,169,60,.5); color: var(--gold-fill); }
.incluye .cards .card:nth-child(1) h3 { background: var(--gold-fill); color: var(--ink-on-fill); }
.incluye .cards .card:nth-child(2) { border-top-color: var(--violet-fill); }
.incluye .cards .card:nth-child(2) .card__icon { background: rgba(140,124,240,.18); border-color: rgba(140,124,240,.5); color: var(--violet-fill); }
.incluye .cards .card:nth-child(2) h3 { background: var(--violet-fill); color: #fff; }
.incluye .cards .card:nth-child(3) { border-top-color: var(--coral); }
.incluye .cards .card:nth-child(3) .card__icon { background: rgba(232,85,58,.16); border-color: rgba(232,85,58,.5); color: var(--coral); }
.incluye .cards .card:nth-child(3) h3 { background: var(--coral); color: #fff; }
.incluye .cards .card:nth-child(4) { border-top-color: var(--gold-fill); }
.incluye .cards .card:nth-child(4) .card__icon { background: rgba(242,169,60,.16); border-color: rgba(242,169,60,.5); color: var(--gold-fill); }
.incluye .cards .card:nth-child(4) h3 { background: var(--gold-fill); color: var(--ink-on-fill); }
/* Difuminado de color en una esquina de cada recuadro (más dinámico) */
.incluye .cards .card:nth-child(1) { background: radial-gradient(160px 140px at 100% 0%, rgba(242,169,60,.22), transparent 72%), var(--card-grad); }
.incluye .cards .card:nth-child(2) { background: radial-gradient(160px 140px at 100% 0%, rgba(140,124,240,.26), transparent 72%), var(--card-grad); }
.incluye .cards .card:nth-child(3) { background: radial-gradient(160px 140px at 100% 0%, rgba(232,85,58,.24), transparent 72%), var(--card-grad); }
.incluye .cards .card:nth-child(4) { background: radial-gradient(160px 140px at 100% 0%, rgba(242,169,60,.22), transparent 72%), var(--card-grad); }
.sticky-bar .btn--red { animation: none; }
.card h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 21px; margin: 8px 0 10px; }
.card p { color: var(--muted); font-size: 16px; }

/* ---------- Contador ---------- */
.stats { background: var(--bg-2); border-block: 1px solid var(--line); padding: clamp(46px, 6vw, 72px) 0; }
.stats__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; text-align: center; max-width: 620px; margin: 0 auto; }
.stat { padding: 6px 16px; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--line); }
.stat__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(44px, 6vw, 66px); color: var(--gold); letter-spacing: .02em; text-shadow: 0 0 32px color-mix(in srgb, var(--gold) 30%, transparent); }
.stat__lbl { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
html.theme-claro .stat__num, html.theme-claro .precio__num { text-shadow: none; }

/* ---------- About ---------- */
.about { position: relative; background: var(--bg); }
.about::before { content: ""; position: absolute; inset: 0; background: radial-gradient(680px 460px at 88% 30%, var(--hero-glow), transparent 60%); pointer-events: none; }
.about__grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.about__photo img { width: 100%; border-radius: 18px; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--line); }
/* Foto de Víctor SIN fondo (recorte transparente) en "Mi nombre es..." */
.about__photo--circle { display: flex; align-items: center; justify-content: center; }
.about__photo--circle img { width: clamp(230px, 82%, 330px); aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--gold) 50%, transparent); box-shadow: 0 18px 46px var(--shadow); background: none; }
.about__pillars { list-style: none; display: grid; gap: 16px; margin-top: 22px; }
.about__pillars li { padding-left: 22px; position: relative; color: var(--muted); }
.about__pillars li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.about__pillars strong { color: var(--txt); }

/* Explica como bloque "feature" estilo About (oscuro, foto + titular con fuerza) */
.explica.feature { background: var(--bg); position: relative; overflow: hidden; }
.explica.feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 440px at 14% 26%, var(--hero-glow), transparent 60%); pointer-events: none; }
.explica.feature .about__grid { position: relative; }
.about__grid--rev { grid-template-columns: 1.08fr .92fr; }
.explica .about__copy .sec-title { margin-bottom: 12px; }
.explica .about__copy .handsub { margin-bottom: 18px; }
.explica__body { margin-top: 38px; }
/* Ajustes SOLO ORDENADOR: frase clave + cuerpo de texto más grande */
@media (min-width: 861px) {
  .explica .about__copy p.explica__lead { font-size: 22px; font-weight: 500; line-height: 1.5; margin-top: 4px; }
  .explica .about__copy p.explica__lead strong { font-weight: 800; }
  .narrative p { font-size: 20px; }
  .about__copy p { font-size: 20px; }
  .about__pillars li { font-size: 20px; }
  .card p { font-size: 18px; }
  .precio__after { font-size: 20px; }
  .kicker:not(.kicker--pill) { font-size: 19px; }
  .dolor__lead { font-size: 21px; }
  .quote { font-size: 19px; }
  .contacto__lead { font-size: 18px; }
  .acc__q { font-size: 18px; }
  .acc__a p { font-size: 17px; }
  .precio__note { font-size: 16px; }
  .precio__per { font-size: 20px; }
  .form label { font-size: 15px; }
  .form input { font-size: 17px; }
  .ftr p { font-size: 15px; }
  .ftr__ig { font-size: 16px; }
  .cta-band .btn--red, .minicta .btn--red { padding: 17px 38px; font-size: 18px; }
  .precio__ctas .btn { font-size: 18px; min-height: 56px; }
}
@media (max-width: 860px) { .about__grid--rev { grid-template-columns: 1fr; } }

/* Polaroid con foto real (plato / transformaciones) */
.polaroid { float: right; width: clamp(180px, 32%, 252px); margin: 4px 0 14px 22px; transform: rotate(-2deg); background: #fff; border-radius: 5px; padding: 12px 12px 14px; box-shadow: 0 12px 28px rgba(0,0,0,.42); }
.polaroid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 3px; display: block; }
.polaroid figcaption { font-family: 'Kalam', cursive; font-weight: 700; font-size: 15px; color: #1A1F2B; text-align: center; padding-top: 8px; }
@media (max-width: 600px) { .polaroid { float: none; width: 100%; max-width: 280px; margin: 10px auto 16px; } }

/* ---------- Carrusel resultados ---------- */
.results { background: var(--bg-2); }
.results .wrap { margin-bottom: 28px; }
.carousel { position: relative; width: 94%; max-width: 1280px; margin: 0 auto; }
.carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.carousel__track::-webkit-scrollbar { height: 6px; }
.carousel__track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
.carousel__item { flex: 0 0 clamp(240px, 30vw, 320px); scroll-snap-align: center; }
.carousel__item img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); }
.carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; background: color-mix(in srgb, var(--gold) 92%, transparent); color: var(--on-gold); font-size: 24px; display: none; align-items: center; justify-content: center; transition: background .2s, opacity .2s; }
.carousel__btn:hover { background: var(--gold); }
.carousel__btn[disabled] { opacity: .3; cursor: default; }
.carousel__btn--prev { left: -8px; }
.carousel__btn--next { right: -8px; }
@media (min-width: 768px) { .carousel__btn { display: flex; } }

/* ---------- Testimonios ---------- */
.testi { background: var(--bg); }
.testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testi__card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .3s ease; }
.testi__card:hover { transform: translateY(-4px); }
.testi__card img { width: 100%; height: auto; display: block; }

/* ---------- Como empezar (pasos) ---------- */
.pasos { background: var(--bg); }
.pasos__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; counter-reset: paso; }
.paso { position: relative; background: var(--card-grad); border: 1px solid var(--line); border-radius: 16px; padding: 32px 26px 28px; }
.paso__n { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; margin-bottom: 14px; }
.paso h3 { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.paso p { color: var(--muted); font-size: 16px; }
.paso:not(:last-child)::after { content: ""; position: absolute; top: 54px; right: -10px; width: 20px; height: 2px; background: color-mix(in srgb, var(--gold) 55%, transparent); }
@media (max-width: 860px) { .pasos__grid { grid-template-columns: 1fr; } .paso:not(:last-child)::after { display: none; } }

/* ---------- Narrativa: subtitulo, citas, protocolo ---------- */
.narrative__sub { color: var(--muted); font-size: 16px; margin: -10px 0 26px; }
.metodo__sub { color: var(--muted); font-size: 18px; max-width: 60ch; margin: -12px 0 28px; }
/* Cita = burbuja tipo chat con emoji a la izquierda (sin barra ámbar) */
.quote {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  padding: 16px 20px;
  margin: 14px 0;
  font-size: 17px;
  font-style: italic;
  color: var(--txt);
}
.quote::before {
  content: "💬";
  font-style: normal;
  font-size: 22px;
  line-height: 1.25;
}
.quote:nth-of-type(1)::before { content: "😟"; }
.quote:nth-of-type(2)::before { content: "😮‍💨"; }
.quote:nth-of-type(3)::before { content: "😣"; }
.protocolo {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(26px, 4vw, 40px); color: var(--gold); text-transform: uppercase;
  letter-spacing: .01em; margin: 18px 0; text-align: center;
}

/* ---------- Bloque "explica" (#zxxk3z) ---------- */
.explica { background: var(--bg-2); }

/* ---------- Precio: parrafos verbatim ---------- */
.precio .narrative { margin-bottom: 26px; }
.precio__after { color: var(--muted); font-size: 16px; max-width: 64ch; margin: 22px auto 0; text-align: center; }
.precio__card { text-align: center; }
.precio__card .precio__amount { justify-content: center; }
.precio__ctas { margin-top: 6px; }

/* ---------- Contacto: bloque WhatsApp directo ---------- */
.contacto__wa { margin-top: 22px; display: grid; gap: 12px; justify-items: start; }
.contacto__wa p { color: var(--muted); }
.contacto__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; color: var(--txt); letter-spacing: .02em; }

/* ---------- Mini-CTA final (#ai-DOvYyF) ---------- */
.minicta { background: var(--bg); text-align: center; }
.minicta__inner { display: grid; gap: 16px; justify-items: center; }
.minicta p { color: var(--muted); font-size: 18px; margin-top: -6px; }

/* ---------- Videotestimonios ---------- */
.videos { background: var(--bg); }
.videos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
.video { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; cursor: pointer; background: #000; }
.video__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s ease; }
.video:hover .video__thumb { transform: scale(1.04); opacity: .85; }
.video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: color-mix(in srgb, var(--gold) 92%, transparent);
  display: flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease;
}
.video__play::before { content: ""; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--on-gold); margin-left: 4px; }
.video:hover .video__play { transform: translate(-50%, -50%) scale(1.1); background: var(--gold); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .videos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .videos__grid { grid-template-columns: 1fr; } }

/* ---------- Precio ---------- */
.precio { position: relative; background:
  radial-gradient(760px 440px at 50% 20%, color-mix(in srgb, var(--gold-fill) 9%, transparent), transparent 66%),
  var(--bg-2); }
.precio .wrap { position: relative; }
/* Tarjeta de precio en NEGRO (contraste sobre la banda clara) */
.precio .precio__card { background: linear-gradient(180deg, #18181d, #0e0e12); border-color: color-mix(in srgb, var(--gold-fill) 36%, #2c2c34); color: #F4F2EC; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.precio .precio__card .precio__tag { color: var(--gold-fill); }
.precio .precio__card .precio__num { color: var(--gold-fill); text-shadow: 0 0 32px color-mix(in srgb, var(--gold-fill) 28%, transparent); }
.precio .precio__card .precio__per, .precio .precio__card .precio__note { color: #ADB0B8; }
.precio .precio__card .btn--ghost { color: #F4F2EC; border-color: rgba(255,255,255,.28); }
.precio .precio__card .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.precio__card {
  position: relative;
  max-width: 470px; margin: 10px auto 0; text-align: left;
  background: var(--card-grad);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line)); border-radius: 22px; padding: 40px 34px 34px;
  box-shadow: 0 30px 70px var(--shadow);
}
.precio__card::before { content: ""; position: absolute; inset: -1px; border-radius: 22px; background: radial-gradient(300px 160px at 50% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%); pointer-events: none; }
.precio__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--on-gold); font: 700 12px 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; }
.precio__tag { font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--gold); }
.precio__amount { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; }
.precio__num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 66px; line-height: 1; color: var(--gold); text-shadow: 0 0 34px color-mix(in srgb, var(--gold) 28%, transparent); }
.precio__per { color: var(--muted); font-size: 18px; }
.precio__note { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.precio__list { list-style: none; display: grid; gap: 12px; margin-bottom: 26px; }
.precio__list li { position: relative; padding-left: 30px; font-size: 16px; }
.precio__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.precio__ctas { display: grid; gap: 10px; }
.precio__micro { text-align: center; color: var(--muted); font-size: 13px; margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq { background: var(--bg); }
.acc { display: grid; gap: 12px; margin-top: 10px; }
.acc__item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.acc__h { margin: 0; }
.acc__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--txt);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 18px;
  padding: 19px 56px 19px 22px; position: relative; min-height: 44px;
}
.acc__q::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 18px;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.acc__item.open .acc__q::after { transform: translateY(-50%) rotate(45deg); background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.acc__a { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; }
.acc__a p { padding: 0 22px; color: var(--muted); }
.acc__item.open .acc__a { padding-bottom: 20px; }

/* ---------- Contacto (split: foto + formulario) ---------- */
.contacto { background: var(--bg-2); }
.contacto__split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 600px; }
.contacto__photo { background: var(--img, none) 72% center/cover no-repeat; background-color: #0c0d11; }
.contacto__panel { padding: clamp(44px, 6vw, 84px) clamp(26px, 5vw, 72px); display: flex; align-items: center; }
.contacto__panel-in { width: 100%; max-width: 460px; }
.contacto__panel .sec-title { margin-bottom: 10px; }
.contacto__lead { color: var(--muted); margin-bottom: 22px; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; display: grid; gap: 18px; }
.form label { display: grid; gap: 7px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14px; }
.form input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 15px; color: var(--txt); font-family: 'Inter', sans-serif; font-size: 16px; }
.form input:focus { border-color: var(--gold); }
.form small { color: var(--muted); font-weight: 400; font-size: 12px; }
.form__status { font-size: 14px; color: var(--gold); min-height: 1em; margin: -4px 0 0; }
.form__status:empty { display: none; }

/* ---------- Footer ---------- */
.ftr { background: var(--bg); border-top: 1px solid var(--line); padding: 48px 0; }
.ftr__inner { text-align: center; display: grid; gap: 8px; justify-items: center; }
.ftr__pic { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.ftr p { color: var(--muted); font-size: 14px; }
.ftr__name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .04em; color: var(--txt); }
.ftr__copy { font-size: 12px; color: var(--muted); }
.ftr__ig { display: inline-flex; align-items: center; gap: 9px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--txt); text-decoration: none; border: 1px solid var(--line); padding: 9px 18px; border-radius: 999px; transition: color .2s, border-color .2s; margin: 2px 0 6px; }
.ftr__ig svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.ftr__ig:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* ---------- Sticky movil + burbuja ---------- */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.sticky-bar .btn { padding: 13px; min-height: 50px; }
.sticky-bar .sticky-bar__wa { flex: 1.6; }
.sticky-bar .sticky-bar__go { flex: 1; }
.wa-pill { position: fixed; right: 22px; bottom: 24px; z-index: 950; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px var(--shadow); transition: transform .2s ease; }
.wa-pill:hover { transform: scale(1.08); }
.wa-pill svg { width: 32px; height: 32px; fill: #fff; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { max-width: 320px; margin-top: 8px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 340px; }
  .cards { grid-template-columns: 1fr; }
  .testi__grid { grid-template-columns: repeat(2, 1fr); }
  .contacto__split { grid-template-columns: 1fr; min-height: 0; }
  .contacto__photo { min-height: 300px; background-position: 72% center; }
  .contacto__panel { padding: 34px 30px 40px; }
  .contacto__panel-in { max-width: none; }
  .hdr__nav { display: none; }
  .hdr__cta { margin-left: auto; }
}
@media (max-width: 767px) {
  .sticky-bar { display: flex; }
  .wa-pill { display: none; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .stats__inner { grid-template-columns: 1fr; gap: 26px; }
  .stat + .stat::before { display: none; }
  .stat + .stat { border-top: 1px solid var(--line); padding-top: 22px; }
  /* Cabecera móvil: sin solaparse ni provocar scroll lateral */
  .hdr__cta { display: none; }            /* el WhatsApp ya está en la barra inferior fija */
  .hdr__actions { margin-left: auto; }
  .hdr__logo img { height: 34px; width: 34px; }
  .hdr__disc { font-size: 9.5px; letter-spacing: .06em; }
}
@media (max-width: 460px) {
  .testi__grid { grid-template-columns: 1fr; }
}

/* ---------- MÓVIL: calco del original (títulos centrados, CUERPO a la izquierda) ---------- */
@media (max-width: 640px) {
  /* Margen lateral como el original (~31px) */
  .wrap, .wrap--narrow, .hero__grid { width: 100%; padding-left: 30px; padding-right: 30px; }

  /* TITULARES centrados (como el original), con tu estilo nuevo */
  .hero {
    min-height: clamp(540px, 88vh, 680px); padding: 0 0 40px;
    align-items: end;
    background-size: contain; background-position: top center; background-color: #0b0b0c;
  }
  .hero__bg { background: linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,0) 42%, rgba(8,8,10,.55) 56%, rgba(8,8,10,.96) 78%, rgba(8,8,10,.99) 100%); }
  .hero__copy { text-align: center; max-width: none; }
  .hero__cta { justify-content: center; }
  .hero__title { font-size: clamp(30px, 8vw, 42px); line-height: 1.14; }
  .sec-title { text-align: center; font-size: clamp(26px, 7vw, 36px); margin-bottom: 18px; }
  .handsub { text-align: center; font-size: 1.25em; }
  .metodo__sub, .narrative__sub { text-align: center; }
  .imgdiv__title { font-size: clamp(26px, 8vw, 40px); }

  /* KICKER = banda ámbar centrada (calca "Son las 21:30" del original) */
  .kicker:not(.kicker--pill) {
    display: block; width: 100%; text-align: center;
    background: var(--gold-fill); color: var(--ink-on-fill);
    padding: 11px 16px; border-radius: 10px; margin: 0 0 20px;
    font-size: 16px; letter-spacing: 0;
  }
  .kicker:not(.kicker--pill) .kicker__ic { margin: 0 8px 0 0; vertical-align: -3px; }

  /* CUERPO a la IZQUIERDA y a 16px, EXACTO como el original (no centrado) */
  .narrative p, .about__copy p, .precio .narrative p {
    text-align: left; font-size: 16px; line-height: 1.5; margin-bottom: 16px; max-width: none;
  }
  .about__pillars { text-align: left; }
  .narrative .checklist { gap: 16px; }
  .checklist li { text-align: left; font-size: 16px; padding: 15px 18px 15px 46px; }
  .quote { text-align: left; font-size: 16px; padding: 15px 18px; }
  .precio__after { text-align: center; font-size: 15px; }

  /* Tarjetas: incluye centradas; MÉTODO a la izquierda (icono+número a la izq, como en PC) */
  .cards .card { padding: 26px 22px; }
  .card p { font-size: 15px; }
  .incluye .cards .card { text-align: center; }
  .incluye .card__icon { margin-left: auto; margin-right: auto; }
  .metodo .cards .card { text-align: left; }
  .metodo .card__head { justify-content: flex-start; }
  .metodo .card__head .card__icon { margin: 0; }

  /* Menos hueco encima de "Mejora tu físico y tus marcas" */
  #narrativa { padding-top: 20px; }
  /* "Te lo cuento en 2 minutos" en una sola línea (la mano no salta de renglón) */
  .tease { font-size: 14px; padding: 8px 14px; }

  .acc__q { font-size: 16px; padding: 18px 50px 18px 18px; }
  section { padding: clamp(54px, 12vw, 78px) 0; }
}

/* Barra inferior fija (Escríbeme + Empieza ya) también en ORDENADOR, acompaña el scroll */
@media (min-width: 861px) {
  .sticky-bar { display: flex; justify-content: center; gap: 14px; padding: 12px 16px; }
  .sticky-bar .btn { flex: 0 0 auto; min-width: 240px; min-height: 58px; font-size: 18px; }
  .wa-pill { display: none; }
  body { padding-bottom: 86px; }
}