/* Los 4 Elementos · landing v3 · base: preview de Alex (7-sept-2026), con las adiciones de producción al final */
/* ⚠️ color-scheme NO es decorativo aquí. Los desplegables nativos (el <select> de país y el de
   provincia del formulario de pago) los pinta el NAVEGADOR, y para un iframe de otro origen usa el
   esquema de color de la PÁGINA DE ARRIBA, no el del iframe. Sin esta línea, Whop pinta el texto de
   las opciones en blanco (su tema oscuro) y el navegador pinta el fondo del desplegable en claro:
   blanco sobre blanco, ilegible. Detectado el 9-sept-2026 en una compra de prueba real. */
:root{color-scheme:dark}
/* Fuentes autoalojadas (Fontsource, subsets latin + latin-ext; el español entra entero en latin): sin ir a Google Fonts,
   sin dos conexiones extra ni la ida y vuelta del CSS. Cormorant Garamond 500/600/700 + cursivas 500/600; Manrope variable 200-800. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-ext-600-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#1A0F0A; --bg2:#20130C; --bg3:#2A1910;
  --cream:#F3E9D8; --cream-70:rgba(243,233,216,.74); --cream-45:rgba(243,233,216,.48);
  --line:rgba(243,233,216,.13);
  --gold:#D9A64E; --gold-2:#B9852C; --ember:#C8642E; --wa:#25D366;
  --aire:#B9CFDC; --fuego:#E4813A; --tierra:#B08652; --agua:#5FA3BC;
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* grano fino (SVG de ruido fractal, cero bytes) para dar textura a los fondos planos */
  --weave:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 16L16 0M-4 4l8-8M12 20l8-8' stroke='%23D9A64E' stroke-opacity='.17' stroke-width='1'/%3E%3Cpath d='M0 0l16 16M-4 12l8 8M12-4l8 8' stroke='%23D9A64E' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .78 0 0 0 0 .45 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* textura premium para secciones de fondo plano: grano + dos luces suaves + viñeta hacia abajo */
.tex{position:relative;isolation:isolate}
.tex::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.085;mix-blend-mode:screen;background-image:var(--grain);pointer-events:none}
/* segunda textura, distinta del grano: trama tejida en dorado sobre un marrón algo más cálido, con brasa abajo a la izquierda (sección de mensajes) */
section.tex2{position:relative;isolation:isolate;background:linear-gradient(180deg,#24150F 0%,#1D120C 100%);border-top:1px solid rgba(217,166,78,.16)}
section.tex2::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--weave);opacity:.6;-webkit-mask-image:radial-gradient(125% 95% at 50% 45%,#000 35%,transparent 100%);mask-image:radial-gradient(125% 95% at 50% 45%,#000 35%,transparent 100%)}
section.tex2::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 6% 100%,rgba(200,100,46,.17),transparent 70%),radial-gradient(45% 40% at 96% 0%,rgba(217,166,78,.12),transparent 70%)}
.tex::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 88% 0%,rgba(217,166,78,.16),transparent 65%),radial-gradient(ellipse 55% 40% at 0% 100%,rgba(200,100,46,.11),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 28%,rgba(0,0,0,.2) 100%)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font:400 1.05rem/1.65 var(--sans);padding-top:48px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
[hidden]{display:none!important}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
section{padding:clamp(60px,8vw,108px) 0;position:relative;scroll-margin-top:64px}
section.alt{background:var(--bg2)}
.center{text-align:center}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.05rem,4.5vw,3.5rem);line-height:1.12}
h2{font-size:clamp(1.75rem,3.5vw,2.7rem);line-height:1.15}
h3{font-size:1.65rem;line-height:1.2}
p{margin:0 0 1em;color:var(--cream-70)}
p.lead{color:var(--cream);font-size:1.12rem}
.eyebrow{display:inline-block;font:700 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.micro{font:italic 500 1.2rem/1.4 var(--display);color:var(--cream-70);margin:16px 0 0}
.cta{margin-top:34px}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:linear-gradient(180deg,#E6B862,#C38E33);color:#1A0F0A;font:800 1.08rem/1.15 var(--sans);padding:19px 38px;border-radius:999px;text-decoration:none;box-shadow:0 12px 34px rgba(217,166,78,.26),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s,box-shadow .15s;border:0;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(217,166,78,.38),inset 0 1px 0 rgba(255,255,255,.35)}
.btn small{font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.78}
/* flecha gorda (Alex, 8-sept): icono relleno en vez del carácter → */
.btn .arr{width:1.15em;height:1.15em;fill:currentColor;margin-left:.5em;vertical-align:-.22em;flex:none}
.btn.is-closed{background:var(--bg3);color:var(--cream-45);box-shadow:none;pointer-events:none}
.btn-wa{background:var(--wa);color:#08301B;box-shadow:0 12px 34px rgba(37,211,102,.22)}
.btn-wa:hover{box-shadow:0 16px 40px rgba(37,211,102,.32)}
.btn-wa svg{width:20px;height:20px;margin-right:8px;vertical-align:-4px}
.ph{position:relative;border:1px dashed rgba(243,233,216,.32);background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 10px,transparent 10px 20px),var(--bg3);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream-45);font:700 .7rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:16px}

/* iconos dorados (sprite SVG al principio del body) */
.ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--gold)}
.ic svg{width:20px;height:20px;fill:currentColor}
.gift{display:inline-flex;vertical-align:-3px;margin-right:8px;color:var(--gold)}
.gift svg{width:22px;height:22px;fill:currentColor}
h2 .ic{vertical-align:-2px;margin-right:6px}

/* 1 · Barra de cierre */
.bar{position:fixed;inset:0 0 auto 0;height:48px;background:#0E0704;border-bottom:1px solid rgba(217,166,78,.35);z-index:40;display:flex;align-items:center}
.bar .wrap{display:flex;align-items:center;justify-content:center;gap:14px;font:600 .74rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-70);white-space:nowrap}
.bar b{color:var(--cream);font-weight:800}
.bar .price{color:var(--gold)}
.bar .cd{font-variant-numeric:tabular-nums;color:var(--gold);letter-spacing:.1em;text-transform:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(200,100,46,.7);animation:pulse 1.8s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,100,46,.7)}70%{box-shadow:0 0 0 8px rgba(200,100,46,0)}100%{box-shadow:0 0 0 0 rgba(200,100,46,0)}}
.sep{color:rgba(217,166,78,.5)}
.m-only{display:none}

/* 2 · Hero (con la imagen del círculo a sangre detrás del titular) */
.hero{padding-top:clamp(64px,9vw,120px);min-height:min(88vh,860px);display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% -10%,rgba(217,166,78,.16),transparent 70%)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,15,10,.58) 0%,rgba(26,15,10,.62) 40%,rgba(26,15,10,.86) 78%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1 .a{display:block;color:var(--cream-70);font-weight:500;font-style:italic;font-size:.78em;margin-bottom:.35em}
.hero h1 .hl{color:var(--gold)}
.hero .paren{font-size:1.02rem;color:var(--cream-70);margin:26px auto 0;max-width:60ch}

/* 3 · VSL: sección a todo el ancho con el fondo de los cuatro elementos (como el cch97), vídeo centrado y cita debajo */
.vsl-sec{position:relative;overflow:hidden;padding:clamp(64px,8vw,110px) 0}
.vsl-bg{position:absolute;inset:0;z-index:0}
.vsl-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.vsl-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(26,15,10,.32) 18%,rgba(26,15,10,.32) 82%,var(--bg) 100%)}
.vsl-sec .wrap{position:relative;z-index:1}
.vsl{position:relative;border-radius:18px;overflow:hidden;background:#120906;border:1px solid rgba(217,166,78,.4);box-shadow:0 30px 80px rgba(0,0,0,.6);max-width:900px;margin:0 auto}
.vsl .screen{position:relative;aspect-ratio:16/9;background:#120906}
.vsl .screen img,.vsl .screen video,.vsl .screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
/* la portada de Vimeo ya trae su propio botón de play dibujado: el nuestro cubre todo el cuadro, invisible pero clicable y accesible */
.vsl .screen .play{left:0;top:0;width:100%;height:100%;transform:none;border-radius:0;background:transparent;box-shadow:none;opacity:0}
.vsl .screen .play:hover{transform:none;background:transparent}
.cita{margin:clamp(28px,4vw,44px) auto 0;max-width:720px;font:italic 600 clamp(1.15rem,2.6vw,1.7rem)/1.45 var(--display);color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.75)}
.cita span{display:block}
.cita mark{background:var(--gold);color:#1A0F0A;padding:0 .28em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(217,166,78,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(0,0,0,.4);border:0;cursor:pointer;padding:0;color:#1A0F0A;z-index:2;transition:transform .15s,background .15s}
.play:hover{transform:translate(-50%,-50%) scale(1.06);background:var(--gold)}
.play svg{width:32px;height:32px;fill:currentColor;margin-left:5px}

/* 4 · Beneficios: los cuatro elementos uno a uno al hacer scroll (escenario pegajoso de una pantalla; el recorrido mide 4 pantallas) */
.els-sec{padding:0}
/* PC: recorrido de 2,25 pantallas (antes 3): un 25 % menos de scroll para pasar los cuatro elementos (Alex, 8-sept). Móvil mantiene 4 × 100svh más abajo. */
.els-track{position:relative;height:calc(3.25 * 100vh);height:calc(3.25 * 100svh)}
.els-stage{position:sticky;top:48px;height:calc(100vh - 48px);height:calc(100svh - 48px);overflow:hidden;background:var(--bg)}
/* el titular de la sección vive dentro del escenario, sobre los vídeos, y se queda mientras pasan los cuatro */
.els-title{position:absolute;z-index:2;left:24px;right:24px;top:clamp(28px,5vh,56px);margin:0 auto;max-width:820px;color:var(--cream);text-shadow:0 2px 22px rgba(0,0,0,.65)}
/* textura y vida detrás del texto: grano fino, un resplandor del color del elemento que respira y polvo de brasa que sube (cero bytes, solo CSS) */
.els-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.els-fx::before{content:'';position:absolute;inset:0;opacity:.1;mix-blend-mode:screen;background-image:var(--grain)}
.els-fx .glow{position:absolute;left:50%;top:26%;width:min(140vw,980px);height:min(72vw,560px);transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--el-color,var(--gold)),transparent 72%);opacity:.18;filter:blur(26px);animation:elsBreathe 7s ease-in-out infinite;transition:background 1s ease}
.els-fx .dust{position:absolute;inset:-30% 0 0 0;background-image:radial-gradient(circle,rgba(230,184,98,.9) 0 1.2px,transparent 2.4px),radial-gradient(circle,rgba(243,233,216,.65) 0 .8px,transparent 1.9px);background-size:190px 270px,270px 350px;background-position:0 0,95px 140px;opacity:.55;animation:elsRise 24s linear infinite}
.els-fx .dust.b{background-size:250px 330px,330px 430px;opacity:.35;animation-duration:38s;animation-direction:reverse}
@keyframes elsBreathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.15}50%{transform:translate(-50%,-50%) scale(1.14);opacity:.27}}
@keyframes elsRise{from{background-position:0 0,95px 140px}to{background-position:0 -540px,95px -560px}}
.els-track[data-elemento=aire] .glow{--el-color:var(--aire)}
.els-track[data-elemento=fuego] .glow{--el-color:var(--fuego)}
.els-track[data-elemento=tierra] .glow{--el-color:var(--tierra)}
.els-track[data-elemento=agua] .glow{--el-color:var(--agua)}
/* el botón vive dentro del escenario y aparece con el Agua, abajo y centrado, sobre el vídeo */
.els-cta{position:absolute;left:16px;right:16px;bottom:clamp(26px,6vh,64px);z-index:3;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.els-track[data-elemento=agua] .els-cta{opacity:1;transform:none;pointer-events:auto}
.els-cta .micro{margin-top:14px;color:var(--cream);text-shadow:0 2px 16px rgba(0,0,0,.75)}
.els-media{position:absolute;inset:0}
.els-bg{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s ease}
.els-bg.is-active{opacity:1}
.els-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
/* el loop de vídeo se posa sobre la imagen (que hace de póster) y se funde cuando ya reproduce */
.els-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .8s ease;pointer-events:none}
.els-bg video.is-ready{opacity:1}
.els-media::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,15,10,.7) 0%,transparent 30%),linear-gradient(90deg,rgba(26,15,10,.62) 0%,rgba(26,15,10,.3) 40%,transparent 60%);pointer-events:none}
.els-cards{position:relative;height:100%;display:flex;align-items:center;text-align:left}
/* el texto va directamente sobre el vídeo, grande y sin caja: el nombre del elemento en su color, el subtítulo en cursiva y la frase debajo */
.el{position:absolute;left:24px;width:min(560px,calc(100% - 48px));opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;pointer-events:none;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.el.is-active{opacity:1;transform:none;pointer-events:auto}
.el .tag{font:600 clamp(3.6rem,8.5vw,7.5rem)/.95 var(--display);letter-spacing:-.01em;text-transform:none;margin:0 0 6px}
.el h3{font:italic 500 clamp(1.7rem,3vw,2.6rem)/1.15 var(--display);color:var(--cream);margin:0 0 18px}
.el p{margin:0;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;color:var(--cream);max-width:30ch}
/* sin JS o con movimiento reducido: los cuatro apilados y legibles */
html.no-js .els-fx,html.reduce-motion .els-fx{display:none}
html.no-js .els-cta,html.reduce-motion .els-cta{position:static;opacity:1;transform:none;pointer-events:auto;padding:32px 0 clamp(60px,8vw,108px)}
html.no-js .els-track,html.reduce-motion .els-track{height:auto}
html.no-js .els-stage,html.reduce-motion .els-stage{position:static;height:auto;overflow:visible;padding:clamp(60px,8vw,108px) 0 0}
html.no-js .els-title,html.reduce-motion .els-title{position:static;padding:0 24px;margin:0 auto 32px;text-shadow:none}
html.no-js .els-media,html.reduce-motion .els-media{display:none}
html.no-js .els-cards,html.reduce-motion .els-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;height:auto}
html.no-js .el,html.reduce-motion .el{position:static;width:auto;opacity:1;transform:none;pointer-events:auto}
html.no-js .els-dots,html.reduce-motion .els-dots{display:none}
.el.aire .tag{color:var(--aire)}
.el.fuego .tag{color:var(--fuego)}
.el.tierra .tag{color:var(--tierra)}
.el.agua .tag{color:var(--agua)}

/* 5 · Semanas (con una imagen por elemento) */
.weeks{margin-top:44px}
.week{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:34px 0;border-top:1px solid var(--line);align-items:end}
.week:last-of-type{border-bottom:1px solid var(--line)}
.week .when{font:700 .72rem/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-45)}
.week .when .meta{display:flex;flex-direction:column}
.week .when .wk{color:var(--gold);display:inline-flex;align-items:center;gap:7px}
.week .when .wk svg{width:14px;height:14px;fill:currentColor}
.week .when b{display:block;font:600 2.2rem/1 var(--display);letter-spacing:.04em;margin:6px 0 4px}
.week .when picture{display:block;margin-top:16px}
.week .when img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.week.aire .when b{color:var(--aire)} .week.fuego .when b{color:var(--fuego)} .week.tierra .when b{color:var(--tierra)} .week.agua .when b{color:var(--agua)}
.week h3{margin-bottom:12px}
.week ul{margin:0;padding-left:20px;color:var(--cream-70)}
.week li{margin-bottom:8px}
.week .take{margin:16px 0 0;font:italic 500 1.12rem/1.4 var(--display);color:var(--gold)}
.weeks-close{margin:36px 0 0;font-weight:700;color:var(--cream);font-size:1.12rem}
.when-fechas{margin:16px auto 0;max-width:760px;font:400 .95rem/1.6 var(--sans);color:var(--cream-70);text-align:center}
/* hora local del visitante (main.js § 2c); vacío = está en la hora de Madrid y no se pinta */
.local{display:inline;font-style:normal;color:var(--gold)}
.local:empty{display:none}
.local.blk{display:block;margin-top:8px;font-size:.92rem}
.local.blk:empty{display:none}
.week .when .local{display:block;margin-top:4px;font:600 .82rem/1.3 var(--sans);color:var(--gold)}
.when-fechas b{color:var(--cream);font-weight:700}

/* 6 · WhatsApp */
.wa{padding:clamp(44px,6vw,72px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wa h3{font-size:1.9rem}
.wa p{margin:6px 0 22px}
.wa .wa-avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;margin:0 auto 18px;border:2px solid rgba(217,166,78,.75);box-shadow:0 0 0 7px rgba(217,166,78,.12);background:var(--bg3)}

/* 7 · Bonus: tarjetas grandes con el mockup a un lado (alternando) y píldoras de etiqueta y valor */
.bonus-list{margin-top:28px;display:grid;gap:18px}
.bonus{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);border:1px solid rgba(217,166,78,.32);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,rgba(217,166,78,.1),rgba(255,255,255,.02) 45%,transparent 75%),var(--bg2);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.bonus:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,38%)}
.bonus:nth-child(even) .thumb{order:2}
.bonus .thumb{position:relative;background:var(--bg3);min-height:220px}
.bonus .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bonus .thumb::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(217,166,78,.14);pointer-events:none}
.bonus .txt{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bonus-top{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;font:800 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(217,166,78,.45);padding:8px 12px;border-radius:999px;white-space:nowrap}
.pill svg{width:14px;height:14px;fill:currentColor}
.val{flex:none;white-space:nowrap;font:800 .74rem/1 var(--sans);letter-spacing:.08em;color:#1A0F0A;background:linear-gradient(180deg,#E6B862,#C38E33);padding:9px 12px;border-radius:999px}
.bonus h3{font-size:1.5rem;margin:0}
.bonus p{margin:0;font-size:1rem}
.bases{font-size:.86rem;color:var(--cream-45)}
.bonus-h2{margin-top:64px}

/* 8 · Oferta: la tarjeta flota sobre el paisaje de los cuatro elementos (brasas abajo, agua, tierra y bruma en los bordes) */
.oferta-sec{position:relative;overflow:hidden}
.sec-bg{position:absolute;inset:0;z-index:0}
.sec-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.sec-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(26,15,10,.42) 16%,rgba(26,15,10,.42) 84%,var(--bg) 100%)}
/* 11 · Bio: foto del tipi (Julio con el tambor junto al fuego) ya difuminada en el archivo, bajo el grano */
.bio-sec{overflow:hidden}
.bio-bg{z-index:-2}
.bio-bg img{opacity:.6;transform:scale(1.04)}
.bio-bg::after{background:linear-gradient(180deg,var(--bg) 0%,rgba(26,15,10,.6) 20%,rgba(26,15,10,.64) 80%,var(--bg) 100%)}
/* 13 · Cierre: la foto real del círculo de fuego en la Casa del Perdón */
.close-sec{position:relative;isolation:isolate;overflow:hidden;padding:clamp(96px,12vw,160px) 0}
.close-bg{z-index:-1}
.close-bg img{object-position:center 66%}
.close-bg::after{background:linear-gradient(180deg,var(--bg) 0%,rgba(26,15,10,.56) 24%,rgba(26,15,10,.46) 68%,rgba(26,15,10,.92) 100%),radial-gradient(60% 50% at 50% 100%,rgba(217,166,78,.14),transparent 70%)}
.close-sec .wrap{position:relative;z-index:1}
/* halo oscuro detrás del bloque de texto para que todo lea sobre la foto */
.close-sec .wrap::before{content:'';position:absolute;inset:-48px -90px;z-index:-1;background:radial-gradient(58% 68% at 50% 50%,rgba(18,10,6,.66),transparent 76%);pointer-events:none}
.close h2,.close .sub{text-shadow:0 2px 26px rgba(0,0,0,.75)}
.close .micro{color:var(--cream);text-shadow:0 2px 16px rgba(0,0,0,.85)}
.oferta-sec .wrap{position:relative;z-index:1}
.offer{border:1px solid rgba(217,166,78,.5);border-radius:22px;padding:clamp(30px,5vw,60px);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(217,166,78,.14),transparent 70%),rgba(32,19,12,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.oferta-h2{margin:0 auto clamp(28px,4vw,44px);max-width:760px}
.cd-title{margin:0;font:700 .78rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-70)}
.cdbig{display:flex;gap:10px;justify-content:center;margin:12px 0 30px}
.cdbig div{min-width:70px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:10px 8px}
.cdbig b{display:block;font:600 2.1rem/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums}
.cdbig span{font:700 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-45)}
/* bloque de precio al estilo del cch97: banda "PAGO ÚNICO" grande, precio anterior tachado grande y precio actual enorme */
.pago{font:800 clamp(1.35rem,2.8vw,1.9rem)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);padding:16px 20px;margin:6px calc(-1 * clamp(30px,5vw,60px)) 20px;background:linear-gradient(90deg,transparent 0%,rgba(217,166,78,.2) 20%,rgba(217,166,78,.2) 80%,transparent 100%);border-top:1px solid rgba(217,166,78,.25);border-bottom:1px solid rgba(217,166,78,.25)}
.price-row{display:flex;align-items:baseline;justify-content:center;gap:22px;margin:0 0 4px}
.price-row .old{font:500 clamp(2.1rem,4vw,3rem)/1 var(--display);text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:3px;color:var(--cream-70)}
.price-row .new{font:700 clamp(4.6rem,9vw,6.6rem)/1 var(--display);color:var(--gold);text-shadow:0 0 34px rgba(217,166,78,.32)}
.iva{font-size:1.02rem;color:var(--cream-70);letter-spacing:.04em;margin-bottom:30px}
.stack{list-style:none;margin:0 auto;padding:0;max-width:640px;text-align:left}
.stack li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);color:var(--cream);align-items:flex-start}
.stack li:last-child{border-bottom:1px solid var(--line)}
.stack .ic{margin-top:3px}
/* garantía: tarjeta propia, separada de la oferta, con su sello a la izquierda */
.guar{margin-top:22px;border:1px solid rgba(217,166,78,.4);border-radius:22px;padding:clamp(26px,4vw,48px);background:rgba(32,19,12,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 80px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.guar .seal{margin:0;width:210px;height:210px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px rgba(217,166,78,.14),0 22px 44px rgba(0,0,0,.5)}
.guar .seal img{width:100%;height:100%;object-fit:cover;object-position:56% 52%}
.guar-txt{max-width:64ch}
.guar-txt p{text-align:left}
.guar .kick{font:700 .7rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-45);margin-bottom:10px}
.guar h3{color:var(--gold);margin-bottom:16px}
.guar .hard{color:var(--cream);font-weight:700}
.guar-txt p:last-child{margin-bottom:0}

/* 9 · Testimonios */
.vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;justify-content:center;margin-top:40px}
/* PC: 8 pistas y cada vídeo ocupa 2, para que la última fila vaya centrada si no llega a 4 (16-sept, al retirar un testimonio) */
@media (min-width:821px){
  .vids{grid-template-columns:repeat(8,minmax(0,1fr))}
  .vids .vid{grid-column:span 2}
  .vids .vid:nth-child(4n+1):nth-last-child(3){grid-column:2 / span 2}
  .vids .vid:nth-child(4n+1):nth-last-child(2){grid-column:3 / span 2}
  .vids .vid:nth-child(4n+1):last-child{grid-column:4 / span 2}
}
.vids-note{margin:22px 0 0;font-size:.86rem;color:var(--cream-45)}
/* etiqueta (país / "testimonio múltiple") y nombre apilados abajo: así no pisan la frase quemada en las portadas del C7D (Alex, 8-sept) */
.vid{aspect-ratio:480/864;border-radius:16px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#3A2415,#120906 75%);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:0 16px 18px}
.vid img,.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid picture{position:absolute;inset:0}
.vid .play{top:50%;width:64px;height:64px}
.vid .play svg{width:26px;height:26px}
.vid .t{position:relative;z-index:1;order:1;margin:0 0 6px;font:700 .72rem/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-70);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.vid .q{position:relative;z-index:1;order:2;font:italic 600 1.35rem/1.25 var(--display);color:var(--cream);text-shadow:0 2px 12px rgba(0,0,0,.8);pointer-events:none}
.vid::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(10,5,3,.85));pointer-events:none}
.vid.is-playing::after,.vid.is-playing .q,.vid.is-playing .t{display:none}

/* 10 · Para quién */
.checks{list-style:none;padding:0;margin:34px 0 0;text-align:left;max-width:760px;margin-inline:auto}
.checks li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:1.08rem;color:var(--cream);align-items:flex-start}
.checks li:last-child{border-bottom:1px solid var(--line)}
.checks .ic{margin-top:4px}
/* mosaico de mensajes: columnas tipo masonry (capturas de alturas distintas + burbujas de texto) */
.mosaic{column-count:4;column-gap:12px;margin-top:40px}
.mosaic>*{display:block;break-inside:avoid;margin:0 0 12px}
.mosaic img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.mosaic .ph{aspect-ratio:4/5;font-size:.62rem;letter-spacing:.1em}
/* burbuja de WhatsApp para los mensajes que llegaron como texto (mismo aspecto que en cantochamanico.com) */
.wa-card{display:flex;flex-direction:column;padding:14px 14px 16px;border-radius:12px;border:1px solid var(--line);text-align:left;background-color:#0b141a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%237a96a3' stroke-opacity='0.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='26' r='8'/%3E%3Cpath d='M58 16l6 12h-12z'/%3E%3Cpath d='M120 46h10m-5-5v10'/%3E%3Ccircle cx='30' cy='72' r='6'/%3E%3Cpath d='M52 66h16v12h-16z'/%3E%3Cpath d='M92 70l9 5-9 5z'/%3E%3Cpath d='M18 110l5-9 5 9z'/%3E%3Ccircle cx='64' cy='116' r='7'/%3E%3Cpath d='M98 112h13v11h-13z'/%3E%3Cpath d='M128 120l-4 9'/%3E%3Cpath d='M88 114c4 0 7 3 7 7'/%3E%3C/g%3E%3C/svg%3E");background-size:140px 140px}
.wa-card .d{align-self:center;margin-bottom:12px;font:500 .7rem/1 var(--sans);letter-spacing:.03em;color:#cfd9de;background:rgba(22,33,40,.92);border-radius:7px;padding:5px 10px}
.wa-card .row{display:flex;gap:9px;align-items:flex-start}
.wa-card .av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;color:#fff;font:600 1rem var(--sans);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.wa-card .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.wa-card .bub{position:relative;flex:1;min-width:0;background:#202c33;border-radius:4px 12px 12px 12px;padding:9px 12px 24px;box-shadow:0 1px 1px rgba(0,0,0,.3)}
.wa-card .n{font:700 .92rem/1.15 var(--sans);margin-bottom:5px}
.wa-card p{margin:0;font:400 .92rem/1.5 var(--sans);color:#e9edef}
.wa-card .tm{position:absolute;right:11px;bottom:7px;display:inline-flex;align-items:center;gap:4px;font:400 .7rem/1 var(--sans);color:rgba(233,237,239,.6)}
.wa-card .tm svg{width:16px;height:11px}
.after{margin:40px auto 0;max-width:64ch}

/* 11 · Bio */
.bio{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;margin-top:40px;text-align:left}
.bio .photo{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:var(--bg3)}
.bio .photo img{width:100%;height:100%;object-fit:cover}
.bio .name{font:600 2rem/1.1 var(--display);margin:0 0 6px}
.bio .sub{font:italic 500 1.2rem/1.35 var(--display);color:var(--gold);margin-bottom:22px}

/* 12 · FAQ */
.faq{max-width:820px;margin:34px auto 0;text-align:left}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font:600 1.32rem/1.3 var(--display);color:var(--cream)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font:500 1.8rem/1 var(--display);color:var(--gold);flex:none}
details[open] summary::after{content:'–'}
details p{padding-right:40px}
details p:last-child{padding-bottom:22px}

/* 13 · Cierre */
.close h2{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.08}
.close .sub{font:italic 500 1.5rem/1.3 var(--display);color:var(--cream-70);margin:10px 0 0}
/* cuándo y cómo: ficha tipo entrada (tres celdas con icono en anillo, dato pequeño arriba y valor grande en Cormorant), separadas por línea punteada */
.when-wrap{position:relative;max-width:760px;margin:34px auto 0;border-radius:16px;box-shadow:0 26px 60px rgba(0,0,0,.45)}
/* muescas laterales de entrada: dos agujeros transparentes por máscara (se ve la foto a través) y un aro dorado que remata cada corte */
.when-card{list-style:none;padding:0;margin:0;position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;border:1px solid rgba(217,166,78,.42);border-radius:16px;background:linear-gradient(180deg,rgba(34,20,13,.84),rgba(20,11,7,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);-webkit-mask-image:radial-gradient(circle at 0 50%,transparent 11px,#000 12px),radial-gradient(circle at 100% 50%,transparent 11px,#000 12px);-webkit-mask-composite:source-in;-webkit-mask-repeat:no-repeat;mask-image:radial-gradient(circle at 0 50%,transparent 11px,#000 12px),radial-gradient(circle at 100% 50%,transparent 11px,#000 12px);mask-composite:intersect;mask-repeat:no-repeat}
.when-wrap::before,.when-wrap::after{content:'';position:absolute;top:50%;width:24px;height:24px;border-radius:50%;border:1px solid rgba(217,166,78,.55);transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.when-wrap::before{left:0;clip-path:inset(0 0 0 50%)}
.when-wrap::after{left:100%;clip-path:inset(0 50% 0 0)}
.when-card::before{content:'';position:absolute;inset:0;opacity:.09;mix-blend-mode:screen;background-image:var(--grain);pointer-events:none}
.when-card::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 28%,var(--gold) 72%,transparent);pointer-events:none}
.when-card li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 18px 26px}
.when-card li+li::before{content:'';position:absolute;left:0;top:20px;bottom:20px;border-left:1px dashed rgba(217,166,78,.38)}
.when-card .ic{width:46px;height:46px;border-radius:50%;border:1px solid rgba(217,166,78,.6);background:rgba(217,166,78,.09);box-shadow:0 0 0 5px rgba(217,166,78,.07);display:grid;place-items:center}
.when-card .ic svg{width:21px;height:21px;fill:var(--gold)}
.when-card div{display:flex;flex-direction:column;gap:4px}
.when-card small{font:700 .7rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.when-card b{font:600 1.4rem/1.15 var(--display);color:var(--gold);text-shadow:0 0 18px rgba(217,166,78,.25)}

/* 14 · Footer */
footer{padding:40px 0 56px;border-top:1px solid var(--line);font-size:.8rem;color:var(--cream-45);text-align:center;line-height:1.8}
footer a{color:var(--cream-70);text-decoration:none;margin:0 4px}
footer a:hover{color:var(--gold)}
footer .rc{margin-top:10px;font-size:.74rem}

/* Modal de captura (patrón C7D, con los tokens de esta página) */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(10,5,3,.82)}
.modal-card{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg2);border:1px solid rgba(217,166,78,.45);border-radius:18px;padding:36px 28px 28px;margin:0;display:flex;flex-direction:column;gap:16px;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.modal-x{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;background:transparent;color:var(--cream-45);font-size:28px;line-height:1;cursor:pointer;padding:0}
.modal-x:hover{color:var(--cream)}
.modal-card h3{font-size:1.9rem}
.lm-sub{margin:-6px 0 0;color:var(--cream-70);font-size:.95rem}
.lf-nota{margin:0;color:var(--cream);font-size:1rem;line-height:1.55}
.lf-field{display:flex;flex-direction:column;gap:6px}
.lf-field>span{font:700 .68rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-45)}
.lf-field input,.cc-panel input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;color:var(--cream);font:500 1rem var(--sans);padding:12px 14px;outline:none;transition:border-color .15s;-webkit-appearance:none;appearance:none}
.lf-field input:focus,.cc-panel input:focus{border-color:var(--gold)}
.lf-field input.bad{border-color:var(--ember)}
.phone-row{display:flex;gap:10px}
.phone-row input{flex:1;min-width:0}
.cc{flex:none;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;color:var(--cream);font:600 1rem var(--sans);padding:12px 12px;cursor:pointer}
.cc #lf-cc-flag{color:var(--cream-45);font-size:.8rem;letter-spacing:.08em;display:inline-flex;align-items:center}
.cc .flag,.cc-panel li .i .flag{display:block;width:20px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(243,233,216,.14)}
.cc-panel li .i{display:flex;align-items:center}
.cc-panel{border:1px solid var(--line);background:var(--bg);border-radius:10px;margin-top:8px;padding:8px 10px 0}
.cc-panel ul{list-style:none;margin:0;padding:6px 0;max-height:200px;overflow:auto}
.cc-panel li{padding:8px 6px;cursor:pointer;display:grid;grid-template-columns:34px 1fr auto;gap:12px;font-size:.95rem;border-radius:6px}
.cc-panel li:hover,.cc-panel li[aria-selected="true"]{background:var(--bg3)}
.cc-panel li .i,.cc-panel li .d{color:var(--cream-45)}
.cc-panel li.vacio{display:block;color:var(--cream-45);cursor:default}
.lf-error{margin:0;color:#F0A070;font-size:.95rem}
.lf-submit{width:100%}
.lf-submit[disabled]{opacity:.6;cursor:wait}
.lf-legal{margin:0;color:var(--cream-45);font-size:.8rem;line-height:1.5}
body.modal-open{overflow:hidden}
/* pop-up estilo "dos pasos" (patrón del funnel de referencia: datos → pago): línea dorada arriba, pasos, placeholders, fila de confianza, honeypot oculto */
.modal-card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 28%,var(--gold) 72%,transparent)}
.lm-step{display:flex;align-items:center;justify-content:center;gap:10px;margin:-8px 0 -4px;font:700 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.lm-step span{display:inline-flex;align-items:center;gap:7px}
.lm-step i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid rgba(217,166,78,.5);display:grid;place-items:center;font-size:.66rem;color:var(--gold)}
.lm-step .on{color:var(--gold)}
.lm-step .on i{background:var(--gold);color:#1A0F0A;border-color:var(--gold)}
.lm-step .sep{width:26px;height:1px;background:rgba(217,166,78,.35)}
.modal-card h3{text-align:center}
.lm-sub{text-align:center}
.lf-field input::placeholder{color:rgba(243,233,216,.35)}
.lf-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.lf-trust{list-style:none;padding:0;margin:-4px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font:600 .74rem/1.3 var(--sans);color:var(--cream-70)}
.lf-trust li{display:inline-flex;align-items:center;gap:6px}
.lf-trust svg{width:13px;height:13px;fill:var(--gold);flex:none}
.lf-nota b{color:var(--gold)}
.lf-submit .arr{width:1.1em;height:1.1em}
/* páginas de pago (/checkout) y gracias (/gracias) */
.chk-top{position:fixed;top:0;left:0;right:0;z-index:40;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(26,15,10,.92);border-bottom:1px solid var(--line);font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-70);backdrop-filter:blur(6px)}
.chk-top svg{width:14px;height:14px;fill:var(--gold)}
.chk{max-width:1040px;margin:0 auto;padding:40px 20px 80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:start}
.chk-resumen h1{font:600 clamp(2rem,3.6vw,2.7rem)/1.1 var(--display);margin:6px 0 10px}
.chk-kicker{font:700 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0}
.chk-resumen .sub{color:var(--cream-70);margin-bottom:22px}
.chk-lista{list-style:none;padding:0;margin:0 0 22px}
.chk-lista li{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);color:var(--cream);align-items:flex-start}
.chk-lista li:last-child{border-bottom:1px solid var(--line)}
.chk-lista svg{width:16px;height:16px;fill:var(--gold);flex:none;margin-top:5px}
.chk-precio{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.chk-precio b{font:600 3rem/1 var(--display);color:var(--gold)}
.chk-precio small{font:700 .7rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.chk-garantia{font:italic 500 1.05rem/1.5 var(--display);color:var(--cream-70)}
.chk-pago{background:var(--bg2);border:1px solid rgba(217,166,78,.35);border-radius:18px;padding:18px;min-height:420px;position:relative}
.chk-pago::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,transparent,var(--gold) 28%,var(--gold) 72%,transparent)}
.chk-sin{margin:0;padding:20px;color:var(--cream);line-height:1.6}
.chk-sin a{color:var(--gold)}
.gracias{max-width:640px;margin:0 auto;padding:56px 20px 80px;text-align:center}
.gracias h1{font:600 clamp(2.2rem,5vw,3.2rem)/1.1 var(--display);margin:14px 0 10px}
.gracias .pasos{list-style:none;padding:0;margin:30px 0;text-align:left}
.gracias .pasos li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:var(--cream)}
.gracias .pasos li:last-child{border-bottom:1px solid var(--line)}
.gracias .pasos i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#1A0F0A;display:grid;place-items:center;font:800 .9rem var(--sans)}
@media (max-width:820px){
  .chk{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .chk-pago{order:-1;padding:12px}
  .lm-step{font-size:.62rem}
  .lf-trust{gap:6px 12px}
}

@media (prefers-reduced-motion:reduce){.dot{animation:none}.btn,.play{transition:none}}

@media (max-width:820px){
  body{padding-top:62px}
  .bar{height:62px}
  .bar .wrap{flex-direction:column;gap:3px;font-size:.74rem;white-space:normal;text-align:center}
  .bar b{font-size:.8rem}
  .d-only,.sep{display:none}
  .m-only{display:inline}
  .dot{position:absolute;left:14px;top:50%;transform:translateY(-50%)}
  .hero{min-height:0;padding-top:clamp(56px,12vw,80px)}
  .hero .bg img{object-position:center 55%}
  /* móvil: la tarjeta arriba y el elemento debajo, reutilizando la imagen/vídeo 16:9 recortada por su lado derecho */
  .els-track{height:calc(4 * 100vh);height:calc(4 * 100svh)}
  .els-stage{top:62px;height:calc(100vh - 62px);height:calc(100svh - 62px)}
  /* móvil: titular grande arriba, copy centrado, y el vídeo en el 58 % inferior del escenario, recortado sobre el centro de cada elemento */
  .els-title{left:16px;right:16px;top:20px;font-size:clamp(1.55rem,6.2vw,1.9rem);line-height:1.15}
  .els-media{top:42%}
  /* recorte por el centro de luz de cada elemento (medido: aire 80 %, fuego 72 %, tierra 78 %, agua 73 % del ancho) */
  .els-bg img,.els-bg video{object-position:100% center}
  .els-bg.fuego img,.els-bg.fuego video{object-position:92% center}
  .els-bg.agua img,.els-bg.agua video{object-position:96% center}
  .els-media::after{background:linear-gradient(0deg,rgba(26,15,10,.72) 0%,transparent 34%),linear-gradient(180deg,var(--bg) 0%,rgba(26,15,10,.3) 26%,transparent 52%)}
  .els-cta{bottom:22px}
  .els-cards{align-items:flex-start;padding-top:112px;justify-content:center}
  .el{left:16px;width:calc(100% - 32px);transform:translateY(14px);text-align:center}
  .el.is-active{transform:none}
  .el .tag{font-size:clamp(3.2rem,16vw,4.6rem);margin-bottom:2px}
  .el h3{font-size:1.65rem;margin-bottom:12px}
  .el p{font-size:1.05rem;line-height:1.5;margin:0 auto;max-width:34ch}
  html.no-js .els-cards,html.reduce-motion .els-cards{grid-template-columns:1fr;padding-bottom:0}
  /* móvil: la ficha de la semana (icono + #N, elemento, fecha corta) a la izquierda y la imagen a la derecha, a la misma altura */
  .week{grid-template-columns:1fr;gap:14px;align-items:start}
  .week .when{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
  .week .when .wk{font-size:.74rem;letter-spacing:.2em}
  .week .when .wk svg{width:15px;height:15px}
  .week .when b{font-size:2.1rem;margin:6px 0 4px}
  .week .when .date{font-size:.72rem}
  .week .when picture{margin:0}
  .week .when img{aspect-ratio:5/4}
  .bonus,.bonus:nth-child(even){grid-template-columns:1fr}
  .bonus:nth-child(even) .thumb{order:0}
  .bonus .thumb{min-height:0;aspect-ratio:16/10}
  .bonus .txt{padding:20px 20px 22px}
  .bonus h3{font-size:1.35rem}
  .vids{grid-template-columns:repeat(2,1fr);gap:12px}
  /* si el número de vídeos es impar, el último va centrado a ancho de columna (no se queda solo a la izquierda) */
  .vids .vid:last-child:nth-child(odd){grid-column:1 / -1;width:calc(50% - 6px);justify-self:center}
  .vid .q{font-size:1.15rem}
  .mosaic{column-count:2;column-gap:10px}
  .mosaic>*{margin-bottom:10px}
  /* móvil: la ficha se apila en tres filas (icono a la izquierda, datos a la derecha) con línea punteada horizontal */
  .when-card{grid-template-columns:1fr;text-align:left}
  .when-card li{flex-direction:row;align-items:center;gap:14px;padding:14px 18px}
  .when-card li+li::before{left:18px;right:18px;top:0;bottom:auto;border-left:0;border-top:1px dashed rgba(217,166,78,.38)}
  .when-card b{font-size:1.3rem}
  .close-sec .wrap::before{inset:-30px -20px}
  /* burbujas a media pantalla: sin avatar y más ajustadas para que el texto respire */
  .wa-card{padding:10px 9px 11px}
  .wa-card .av{display:none}
  .wa-card .d{margin-bottom:9px;padding:4px 8px}
  .wa-card .bub{padding:8px 9px 22px;border-radius:12px}
  .wa-card .n{font-size:.86rem}
  .wa-card p{font-size:.86rem;line-height:1.45}
  .bio{grid-template-columns:1fr;gap:26px}
  .bio .photo{max-width:260px}
  .guar{gap:18px}
  .guar .seal{width:160px;height:160px}
  .price-row .new{font-size:4.4rem}
  .price-row .old{font-size:2rem}
  .pago{font-size:1.25rem;margin-left:calc(-1 * clamp(30px,5vw,60px));margin-right:calc(-1 * clamp(30px,5vw,60px))}
  .cdbig div{min-width:58px}
  .btn{padding:17px 26px;font-size:1rem}
  .vsl-sec{padding:56px 0 64px}
  .vsl .screen .play{top:50%;width:60px;height:60px}
  .vsl .screen .play svg{width:24px;height:24px}
}

/* Rendimiento (9-sept, Lighthouse móvil): las secciones por debajo de los elementos no se maquetan ni se pintan hasta que se
   acercan al viewport. El hilo principal se iba en estilo/maquetación/pintado de una página de 25.000 px antes de mostrar el
   hero. Las alturas son las medidas reales (móvil / PC) para que la barra de scroll no baile; en cuanto una sección se ha
   mostrado, el navegador recuerda su altura real. Navegadores sin soporte lo ignoran y pintan todo como antes. */
#semanas,#incluye,#oferta,#testimonios,#para-quien,#julio,#faq,#cierre{content-visibility:auto}
#semanas{contain-intrinsic-size:auto 3400px}
#incluye{contain-intrinsic-size:auto 4520px}
#oferta{contain-intrinsic-size:auto 2850px}
#testimonios{contain-intrinsic-size:auto 2350px}
#para-quien{contain-intrinsic-size:auto 3360px}
#julio{contain-intrinsic-size:auto 1400px}
#faq{contain-intrinsic-size:auto 865px}
/* titular de la FAQ (revisión de Charly, 16-sept): «voz» en cursiva y en una sola línea en pantallas anchas */
#faq .faq-h2 em{font-style:italic;color:var(--ember)}
#faq .faq-sub{color:var(--cream-70);font-size:1.05rem;margin:10px auto 0;max-width:60ch}
@media (min-width:1000px){#faq .faq-h2{white-space:nowrap;font-size:clamp(2rem,3vw,2.55rem)}}
#cierre{contain-intrinsic-size:auto 700px}
@media (min-width: 821px){
  #semanas{contain-intrinsic-size:auto 2220px}
  #incluye{contain-intrinsic-size:auto 2740px}
  #oferta{contain-intrinsic-size:auto 2370px}
  #testimonios{contain-intrinsic-size:auto 1530px}
  #para-quien{contain-intrinsic-size:auto 2580px}
  #julio{contain-intrinsic-size:auto 840px}
  #faq{contain-intrinsic-size:auto 790px}
  #cierre{contain-intrinsic-size:auto 745px}
}

/* /checkout · pedido con order bumps (9-sept) */
.pedido{margin:0 0 16px}
.pedido .chk-kicker{margin-bottom:10px}
.pedido .linea{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--line);color:var(--cream)}
.pedido .linea b{font:600 1.35rem/1 var(--display);color:var(--cream);white-space:nowrap}
.pedido .tramo{margin:0 0 14px;font:500 .8rem/1.4 var(--sans);color:var(--cream-45)}
.pedido .tramo b{color:var(--gold);font-weight:700}
.bump .box{width:24px;height:24px;margin-top:2px;border:2px solid var(--gold);border-radius:6px;background:transparent;display:grid;place-items:center;transition:background .15s}
.bump .box svg{width:14px;height:14px;fill:#1A0F0A;opacity:0}
.bump.is-on,.bump:has(input:checked){border-style:solid;background:rgba(217,166,78,.13)}
.bump.is-on .box,.bump:has(input:checked) .box{background:var(--gold)}
.bump.is-on .box svg,.bump:has(input:checked) .box svg{opacity:1}
.bump .txt{min-width:0}
.bump .oferta{display:inline-block;font:800 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#1A0F0A;background:var(--gold);border-radius:999px;padding:5px 8px;margin:0 0 8px}
.bump .titulo{display:block;font:700 .98rem/1.3 var(--sans);color:var(--cream);margin:0 0 6px}
.bump .titulo b{color:var(--gold);white-space:nowrap}
.pedido .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0 2px;border-top:1px solid rgba(217,166,78,.35);margin-top:6px;color:var(--cream)}
.pedido .total span{font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-70)}
.pedido .total b{font:600 2.2rem/1 var(--display);color:var(--gold)}
.pedido .total small{display:block;text-align:right;font:700 .7rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.chk-pago .cargando{margin:0;padding:24px 8px;text-align:center;font:italic 500 1rem/1.5 var(--display);color:var(--cream-70)}
.chk-cerrado{margin:0;padding:22px;color:var(--cream);line-height:1.6;text-align:center}
.chk-cerrado b{display:block;font:600 1.5rem/1.2 var(--display);color:var(--gold);margin-bottom:8px}
@media (max-width:820px){
  .pedido .total b{font-size:1.9rem}
}

/* ── /checkout v2 (9-sept) · anatomía de skills/whop-checkout ────────────────
   B1 cabecera · B3 selector acumulativo · B4 cómo se paga · B6 recap ·
   B7 aviso del banco · B8 botón propio con estados · B9 soporte.
   Sustituye a las dos casillas sueltas (.bump), que quedan sin uso. */
.chk-cabecera{max-width:1040px;margin:0 auto;padding:36px 20px 0;text-align:left}
.chk-cabecera h1{font:600 clamp(2rem,3.6vw,2.7rem)/1.1 var(--display);margin:6px 0 10px}
.chk-cabecera .sub{color:var(--cream-70);margin:0}
.chk{padding-top:22px}

/* B3 · paquetes acumulativos */
.paquetes.destaca{animation:paqDestaca 1.4s ease}
@keyframes paqDestaca{0%,100%{filter:none}25%,60%{filter:brightness(1.28)}}
.paq .marca{width:20px;height:20px;margin-top:3px;border:2px solid rgba(217,166,78,.6);border-radius:50%;display:grid;place-items:center;transition:border-color .15s}
.paq .marca::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .15s}
.paq.is-on,.paq:has(input:checked){border-color:var(--gold);background:rgba(217,166,78,.11)}
.paq.is-on .marca,.paq:has(input:checked) .marca{border-color:var(--gold)}
.paq.is-on .marca::after,.paq:has(input:checked) .marca::after{transform:scale(1)}
.paq .txt{min-width:0}
.paq .cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.paq .cab b{font:700 .98rem/1.3 var(--sans);color:var(--cream)}
.paq .cab em{font:600 1.15rem/1 var(--display);font-style:normal;color:var(--gold);white-space:nowrap}
.paq .reco{display:inline-block;font:800 .7rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#1A0F0A;background:var(--gold);border-radius:999px;padding:5px 9px;margin:7px 0 0}
.paq .det{display:block;margin:6px 0 0;font:400 .86rem/1.5 var(--sans);color:var(--cream-70)}
.micro{margin:10px 0 0;font:400 .85rem/1.5 var(--sans);color:var(--cream-70)}

/* B4 · cómo funciona el pago */
.chk-como{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.chk-como .chk-kicker{margin-bottom:8px}
.chk-como ol{margin:0;padding-left:18px;display:grid;gap:5px}
.chk-como li{font:400 .87rem/1.5 var(--sans);color:var(--cream-70)}

/* B6 · recap */
.chk-recap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 0 0;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);font:600 .92rem/1.4 var(--sans);color:var(--cream)}
.chk-recap button{background:none;border:0;padding:0;font:500 .84rem/1.4 var(--sans);color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Moneda local: solo se pinta si la compradora está fuera de la zona euro */
.chk-moneda{margin:10px 0 0;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.02);font:400 .84rem/1.5 var(--sans);color:var(--cream-70)}
.chk-moneda button{background:none;border:0;padding:0;font:500 .84rem/1.5 var(--sans);color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* B7 · aviso del banco */
.chk-banco{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border:1px solid rgba(217,166,78,.35);border-radius:12px;background:rgba(217,166,78,.09);font:400 .85rem/1.55 var(--sans);color:var(--cream-70)}
.chk-banco svg{width:18px;height:18px;fill:var(--gold);flex:none;margin-top:2px}
.chk-banco b{color:var(--cream)}

/* B8 · botón propio */
.chk-accion{margin:14px 0 0}
.chk-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 20px;border:0;border-radius:14px;background:var(--gold);color:#1A0F0A;font:800 .96rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:filter .18s,opacity .18s}
.chk-cta svg{width:19px;height:19px;fill:#1A0F0A;transition:transform .18s}
.chk-cta:hover:not(:disabled){filter:brightness(1.08)}
.chk-cta:hover:not(:disabled) svg{transform:translateX(3px)}
.chk-cta:disabled{cursor:default;opacity:.55}
.chk-cta.is-espera{background:rgba(217,166,78,.3);color:var(--cream-70)}
.chk-cta.is-espera svg{display:none}
.chk-error{margin:12px 0 0;padding:12px 14px;border:1px solid rgba(214,106,92,.55);border-radius:12px;background:rgba(214,106,92,.12);font:400 .87rem/1.55 var(--sans);color:var(--cream)}
.chk-error b{display:block;margin-bottom:4px}
.chk-error .det{display:block;margin-top:6px;font-size:.78rem;color:var(--cream-45)}

/* B9 · soporte */
.chk-soporte{margin:14px 0 0;font:400 .84rem/1.55 var(--sans);color:var(--cream-45);text-align:center}
.chk-soporte a{color:var(--gold)}

/* Montaje no destructivo del embed: puede haber varias instancias montadas a la vez y solo
   se ve la del paquete elegido. Las demás se sacan de pantalla en vez de ocultarlas con
   display:none, que puede romper los campos de tarjeta al volver a mostrarlos. */
#whop-wrap{position:relative}
.whop-host.oculto{position:absolute;left:-10000px;top:0;width:100%;pointer-events:none}

/* B3 debajo del botón: es la posición que midió mejor un test de la comunidad (30 %→60 %).
   Se marca visualmente porque llega después de la decisión de pagar, no antes. */
.paquetes.bajo-cta{margin-top:22px;padding-top:18px;border-top:1px dashed rgba(217,166,78,.3)}
/* Aquí la etiqueta no es un rótulo de sistema: es la frase que tiene que hacer que se
   lo lleven. En versales pierde la forma de las palabras y se lee peor, así que va en
   caja normal y a tamaño de lectura. */
.paquetes.bajo-cta legend{font:600 1.02rem/1.35 var(--display);letter-spacing:normal;text-transform:none;color:var(--cream);margin-bottom:12px}
.paquetes.bloqueado{opacity:.5;pointer-events:none}
.paq-nota{margin:10px 0 0;padding:9px 12px;border:1px solid rgba(217,166,78,.35);border-radius:10px;background:rgba(217,166,78,.09);font:500 .82rem/1.5 var(--sans);color:var(--cream)}

@media (max-width:820px){
  .chk-cabecera{padding:26px 20px 0}
  .paq .cab{flex-direction:column;gap:2px}
  .chk-cta{padding:16px}
}

/* Los 4 Elementos · /checkout v3 "La Escalera" — capa final de dirección de arte.
   Va PEGADO AL FINAL de styles.css, después del bloque "/checkout v2": solo repinta,
   ningún bloque cambia de sitio y ningún id ni clase existente desaparece (hay JS colgando).
   Base: dirección 3 (jerarquía) + injertos de la 2 (oficio) y la 1 (materia).
   Alturas del embed MEDIDAS el 9-sept-2026 en producción con ?prueba=…&dir=0 / &dir=1:
     escritorio 1280 → iframe 681 (dir oculta) / 865 (dir visible)
     móvil 390    → iframe 712 (dir oculta) / 896 (dir visible)
   OJO: :root{color-scheme:dark} de la línea 7 de styles.css NO se toca. Sin él los
   desplegables nativos del formulario de Whop salen blanco sobre blanco. */

/* 14-sept-2026: el formulario de Whop va en tema CLARO (crema #F4EBDB, ver checkout.html). Con el oscuro,
   Chrome en Windows pintaba la lista del desplegable de país en blanco con letra blanca, ni con
   :root{color-scheme:dark} ni forzando color-scheme:dark en el iframe (probado). En claro la letra es negra.
   El iframe se deja con su color-scheme:normal (lo pone el cargador de Whop), que casa con el tema claro. */

:root{
  /* Ritmo vertical deliberadamente desigual (razón ~1,7). No es una escala de 8pt:
     una escala uniforme es lo que hace que "todo pese lo mismo". Cada peldaño significa algo:
       --r1 dentro de una misma frase visual · --r2 línea a línea · --r3 bloque hermano
       --r4 fase del camino de compra · --r5 EL CORTE: solo se usa después del botón. */
  --r1:6px; --r2:12px; --r3:20px; --r4:36px; --r5:56px;

  /* Radios escalonados. La píldora queda RESERVADA al botón: es lo que lo hace dominar
     por forma, no solo por color. 12 = el mismo border-radius que se le pasa al embed
     (data-whop-checkout-theme-border-radius), para que el marco no parezca un injerto. */
  --rad-tarjeta:18px; --rad-marco:12px; --rad-nota:10px; --rad-chip:7px;

  /* Filos con significado, en vez de un 1px al 10 % repetido por toda la página.
     --hilo es el injerto de la dirección 1: un borde direccional (la luz viene de
     arriba-izquierda) pintado en border-box. Mata de raíz el borde uniforme de plantilla. */
  --hilo:linear-gradient(152deg,rgba(243,233,216,.52) 0%,rgba(217,166,78,.92) 16%,rgba(185,133,44,.30) 48%,rgba(217,166,78,.62) 76%,rgba(118,76,26,.40) 100%);
  --hilo-h:linear-gradient(90deg,transparent,rgba(217,166,78,.72) 20%,rgba(243,233,216,.55) 50%,rgba(217,166,78,.72) 80%,transparent);
  --filo-oro:rgba(217,166,78,.32);    /* borde de objeto: el mismo .32 medido en .bonus */
  --filo-luz:rgba(243,233,216,.07);   /* reflejo superior: de dónde viene la luz */

  /* Mismo SVG de ruido que --grain, con el alfa de la feColorMatrix bajado de .6 a .13
     (injerto de la dirección 1). --grain solo funciona bajo un pseudo con opacity y
     mix-blend-mode; este viaja DENTRO de una pila de background-image sin capa extra.
     Se usa en DOS superficies, no en seis: la banda de cabecera y la tarjeta de pago. */
  --grain-fino:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .78 0 0 0 0 .45 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23nf)'/%3E%3C/svg%3E");

  /* RESERVA DEL EMBED. Medida, no adivinada (ver cabecera). El valor de serie es el de
     config.js hoy: checkout.ocultarDireccion:false → el formulario de dirección SE VE.
     Si algún día se pone en true, bajar a 700px / 730px y no queda hueco muerto. */
  --whop-reserva:880px;

  --e-out:cubic-bezier(.23,1,.32,1);
  --e-soft:cubic-bezier(.45,0,.55,1);
}
::selection{background:rgba(217,166,78,.30);color:#1A0F0A}

/* ═══ 0 · BARRA FIJA · lo más callado de la página ═══════════════════════════ */
.chk-top{
  border-bottom:0;
  box-shadow:0 1px 0 rgba(217,166,78,.22);
  letter-spacing:.18em;
}
/* Banda de trama tejida (la misma --weave de las secciones .tex2 de la landing) en vez
   del filete plano: materia, no borde. Se apaga en los extremos. */
.chk-top::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:3px;pointer-events:none;
  background-image:var(--weave);opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}

/* ═══ 1 · CABECERA · escalón de identidad ═══════════════════════════════════
   Continuidad literal con la página de ventas: la MISMA fotografía del hero, ya
   cacheada para quien llega por el camino normal (coste real: 0 bytes). NO va en
   position:fixed —una foto fija detrás de un checkout que hace scroll es un efecto
   acoplado al scroll—: es una banda a sangre que se va con la página. */
.chk-cabecera{
  position:relative;isolation:isolate;
  padding:clamp(38px,5vw,58px) 20px clamp(26px,3.4vw,38px);
  text-align:left;
}
.chk-cabecera::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;width:100vw;transform:translateX(-50%);
  top:-48px;bottom:0;                      /* -48px: la banda pasa por debajo de la barra fija */
  /* Fallback sin image-set(): banda cálida digna. */
  background-image:
    var(--grain-fino),
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(217,166,78,.16),transparent 70%),
    linear-gradient(180deg,rgba(18,10,6,.74) 0%,rgba(20,12,7,.80) 48%,rgba(23,13,8,.94) 86%,var(--bg) 100%),
    url(img/hero-1920.webp);
  background-image:
    var(--grain-fino),
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(217,166,78,.16),transparent 70%),
    linear-gradient(180deg,rgba(18,10,6,.74) 0%,rgba(20,12,7,.80) 48%,rgba(23,13,8,.94) 86%,var(--bg) 100%),
    image-set(url(img/hero-1920.avif) type("image/avif"),url(img/hero-1920.webp) type("image/webp"));
  background-size:180px 180px,100% 100%,100% 100%,cover;
  background-position:0 0,0 0,0 0,center 34%;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
}
/* Canto de la banda: hilo dorado que se apaga a los lados. */
.chk-cabecera::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:0;width:100vw;height:2px;transform:translateX(-50%);
  background:var(--hilo-h);
  box-shadow:0 -18px 34px -14px rgba(0,0,0,.6);
}
/* El kicker vuelve a la medida real del .eyebrow de la landing: .74rem / .2em
   (el bloque de checkout lo había dejado en .7rem / .18em). */
.chk-kicker{font:700 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}
/* "Paso 2 de 2" con la barra que lo demuestra: tramo cumplido apagado, tramo actual vivo. */
.chk-cabecera .chk-kicker{display:flex;align-items:center;gap:12px}
.chk-cabecera .chk-kicker::after{
  content:'';flex:none;width:46px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-2) 0 46%,transparent 46% 54%,var(--gold) 54% 100%);
}
/* h1 a la escala real de la página de ventas (hasta 3,5rem = 56px). El bloque de
   checkout lo tenía topado en 2,7rem: el mismo titular, dos cuerpos distintos. */
.chk-cabecera h1{
  font:600 clamp(2.05rem,4.5vw,3.5rem)/1.12 var(--display);
  letter-spacing:-.005em;color:var(--cream);
  margin:14px 0 12px;text-wrap:balance;
  text-shadow:0 2px 26px rgba(12,6,3,.6);   /* sostiene el 4,5:1 sobre la zona clara de la foto */
}
.chk-cabecera .sub{font:400 1.05rem/1.65 var(--sans);color:var(--cream-70);max-width:56ch;margin:0;text-wrap:pretty}

/* ═══ 2 · REJILLA ═══════════════════════════════════════════════════════════ */
.chk{
  grid-template-columns:minmax(0,.86fr) minmax(0,1.15fr);
  gap:0 clamp(32px,5vw,64px);
  padding:var(--r4) 20px 96px;
}

/* ═══ 3 · COLUMNA IZQUIERDA · marginalia, no objeto ═════════════════════════
   .chk-resumen es un <section> y se comía el `padding:clamp(60px,8vw,108px) 0` de la
   regla genérica de secciones (medido en producción: 102,4px). .chk-pago, que también
   es <section>, se lo pisa con su propio padding. Resultado hasta hoy: la columna de
   contexto arrancaba 102px por debajo del canto de la tarjeta, con .chk{align-items:start}.
   Es un fallo VIVO y es la mitad de la sensación de "página floja". */
.chk-resumen{
  padding:0;scroll-margin-top:0;
  position:sticky;top:72px;   /* el formulario mide ~870px y esta columna ~380: sin sticky,
                                 medio metro de vacío al lado del botón y la garantía fuera de pantalla */
}
.chk-lista{margin:0 0 var(--r4)}
/* Filetes en degradado que se apagan hacia la derecha. Cuatro celdas regladas idénticas
   son cuatro objetos del mismo peso en la columna que no decide nada. */
.chk-lista li{
  border-top:0;padding:11px 0;gap:12px;align-items:flex-start;
  font:400 .94rem/1.55 var(--sans);color:var(--cream-70);text-wrap:pretty;
  background-image:linear-gradient(90deg,rgba(243,233,216,.22),rgba(243,233,216,.05) 62%,transparent);
  background-size:100% 1px;background-position:0 0;background-repeat:no-repeat;
}
.chk-lista li:first-child{background-image:none}
.chk-lista li:last-child{border-bottom:0}
.chk-lista svg{width:15px;height:15px;margin-top:5px}
/* Cuatro encuentros, uno por elemento: cada visto lleva el color de SU elemento, en el
   mismo orden que la página de ventas. Es semántico, cuesta cero y ninguna máquina lo
   saca de un valor por defecto. */
.chk-lista li:nth-child(1) svg{fill:var(--aire)}
.chk-lista li:nth-child(2) svg{fill:var(--fuego)}
.chk-lista li:nth-child(3) svg{fill:var(--tierra)}
.chk-lista li:nth-child(4) svg{fill:var(--agua)}

/* El ancla de la columna: la garantía con SU sello, el activo real que ya existe en el
   proyecto (14 KB, cacheado desde la landing) y con el mismo tratamiento que allí:
   recorte circular a object-position 56% 52% y aro dorado de 6px (.guar .seal). */
/* Sin filo lateral: la cursiva de Cormorant y el sello ya dicen que esto es una promesa
   personal, no una nota de sistema. Un borde de acento más habría hecho patrón. */
.chk-garantia{
  position:relative;margin:0;padding:0;
  font:italic 500 1.12rem/1.55 var(--display);color:var(--cream);text-wrap:pretty;
}
.chk-garantia::before{
  content:'';display:block;width:84px;height:84px;border-radius:50%;margin:0 0 14px;
  background-image:url(img/garantia-sello-480.webp);
  background-image:image-set(url(img/garantia-sello-480.avif) type("image/avif"),url(img/garantia-sello-480.webp) type("image/webp"));
  background-size:cover;background-position:56% 52%;background-repeat:no-repeat;
  box-shadow:0 0 0 6px rgba(217,166,78,.14),0 16px 30px -12px rgba(0,0,0,.55);
}

/* ═══ 4 · LA TARJETA DE PAGO · el objeto ═══════════════════════════════════
   Borde de hilo direccional en border-box (injerto de la dirección 1) + trama tejida
   enmascarada al tercio superior + grano. Materia selectiva: dos superficies en toda
   la página, no seis. */
.chk-pago{
  isolation:isolate;
  border:1px solid transparent;
  border-radius:var(--rad-tarjeta);
  padding:26px 24px 28px;
  min-height:auto;
  background:
    var(--grain-fino) 0 0/180px 180px repeat padding-box,
    linear-gradient(178deg,#24160E 0%,var(--bg2) 46%,#1D120B 100%) padding-box,
    var(--hilo) border-box;
  box-shadow:
    inset 0 1px 0 var(--filo-luz),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 30px 80px -28px rgba(0,0,0,.72);
}
.chk-pago::before{                    /* el filete dorado de arriba, un punto más presente */
  height:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 26%,var(--gold) 74%,transparent);
}
.chk-pago::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:var(--rad-tarjeta);
  background-image:var(--weave);opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 34%);
          mask-image:linear-gradient(180deg,#000,transparent 34%);
}

/* ═══ 5 · B2 · EL PEDIDO · escalón de precio ════════════════════════════════
   El precio vivía a 1,35rem = 21,6px: más pequeño que el subtítulo de la página. Y la
   regla .pedido .total{2.2rem} del CSS no la usa nadie (no hay ningún .total en el HTML).
   Aquí la fila deja de ser flex, se apila y la cifra sube a ~46px: por debajo del h1 de
   56px de la landing, que es lo que mantiene el tono íntimo. */
/* ⛔ Aquí había un borde lateral de 3px en dorado con degradado hacia la derecha, con un
   comentario que lo llamaba "intención, no plantilla". Era justo al revés: el borde de acento
   en un solo lado es el tic más reconocible de una interfaz generada, y estaba puesto en el
   bloque MÁS importante de la página. Se cambia por la receta de tarjeta REAL de la página de
   ventas, medida en la página viva: fondo --bg2, borde dorado al 32 %, radio 18. */
.pedido{
  position:relative;margin:0 0 var(--r4);
  padding:17px 19px 16px;
  border:1px solid rgba(217,166,78,.32);
  border-radius:var(--rad-card,18px);
  background:var(--bg2);
}
.pedido .chk-kicker{margin-bottom:var(--r2)}
.pedido .linea{display:block;border-top:0;padding:0;margin:0}
.pedido .linea>span{display:block;font:500 .94rem/1.4 var(--sans);color:var(--cream-70);margin-bottom:5px;text-wrap:pretty}
/* El símbolo € es un nodo de texto suelto dentro del <b> y no se puede seleccionar: el <b>
   lleva el tamaño del SÍMBOLO y el número, que sí tiene id, se multiplica por 2,15em.
   Resultado 46px / 21,6px. Si algún día el € deja de ser texto suelto, la cifra vuelve a
   21,6px: degrada al aspecto de hoy, no se rompe. */
.pedido .linea b{
  display:flex;align-items:baseline;gap:.14em;
  font:600 1.35rem/1 var(--display);color:var(--gold);letter-spacing:-.015em;
  font-variant-numeric:tabular-nums lining-nums;   /* el JS lo repinta al cambiar de paquete: no debe bailar */
  font-feature-settings:'tnum' 1,'lnum' 1;
}
#chk-total-arriba{font-size:2.15em;line-height:.92}
/* El tramo de la escalera es la única frase de pérdida de la página y estaba en el color
   más apagado del sistema (cream-45 ≈ 4,3:1 sobre este fondo: suspende AA). */
.pedido .tramo{
  margin:9px 0 0;font:500 .84rem/1.5 var(--sans);color:var(--cream-70);
  font-variant-numeric:tabular-nums;text-wrap:pretty;
}
.pedido .tramo b{color:var(--gold);font-weight:700}

/* ═══ 6 · B4 · CÓMO SE PAGA · sin caja ══════════════════════════════════════
   .chk-como, .chk-recap, .chk-moneda, .chk-banco y .paq-nota eran cinco cajas casi
   idénticas (1px + radio 10-14 + fondo al 2-9 %) apiladas. ESA es la firma de plantilla
   que el cliente está viendo sin saber nombrar. A partir de aquí queda UNA sola caja
   rellena (el aviso del banco) y UN solo marco (el formulario). */
.chk-como{
  margin:0 0 var(--r4);padding:16px 0 0;
  border:0;background:none;border-radius:0;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,var(--filo-oro),transparent 62%) 1;  /* filete dibujado, no uniforme */
}
.chk-como .chk-kicker{margin-bottom:var(--r2);color:var(--cream-70)}
.chk-como ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:paso}
.chk-como li{
  counter-increment:paso;
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:baseline;
  font:400 .9rem/1.55 var(--sans);color:var(--cream-70);text-wrap:pretty;
}
/* Numerales serif colgados en el margen: recurso editorial real, no icono de librería.
   El número de un paso y el de un importe son de la misma familia a propósito. */
.chk-como li::before{
  content:counter(paso);
  font:600 1.35rem/1 var(--display);color:var(--gold);opacity:.72;
  text-align:right;font-variant-numeric:lining-nums;
}

/* ═══ 7 · B5 · EL MARCO DEL FORMULARIO · y el SEGUNDO 0 ═════════════════════
   El iframe es lo único que no se puede pintar por dentro y es el objeto más grande de
   la página. Tres decisiones:
   1) El fondo del marco es EXACTAMENTE el #20130C que se le pasa al embed en
      data-whop-checkout-theme-background-color, y el radio el mismo 12: sin costura.
   2) RESERVA DE ALTURA MEDIDA (--whop-reserva). El embed tarda ~7 s en dar su primer
      estado y ~9,6 s en estar listo: sin reserva, el botón y el selector saltan hacia
      abajo justo cuando se está leyendo. Cuando el pago no está activo el JS pone
      wrap.hidden y la reserva desaparece con él: nunca deja un hueco muerto.
   3) NADA de overflow: las instancias .oculto viven en left:-10000px. */
#whop-wrap{
  min-height:var(--whop-reserva);
  border-radius:var(--rad-marco);
  background:var(--bg2);
  box-shadow:inset 0 0 0 1px rgba(217,166,78,.16),inset 0 1px 0 var(--filo-luz);
  transition:box-shadow 180ms var(--e-out);
}
/* El foco SÍ llega al iframe en el documento de arriba: el marco puede acusar recibo
   aunque no veamos el campo. Es la única manera de que teclear ahí dentro se sienta
   parte de esta página y no de un injerto. */
#whop-wrap:focus-within{
  box-shadow:inset 0 0 0 1px var(--filo-oro),inset 0 1px 0 var(--filo-luz),0 0 0 3px rgba(217,166,78,.14);
}
/* SEGUNDO 0. Antes de este bloque, los primeros ~9 segundos eran una línea de texto en
   medio de la nada: ese es el fotograma en el que se decide "esto está flojo". Ahora el
   marco ya tiene su forma final y dentro hay UN punto que respira. Un esqueleto de
   campos fantasma con latido sería el componente más genérico de la UI moderna. */
/* Se SUPERPONE al marco en vez de ocupar sitio: así el formulario puede montarse debajo sin
   empujar nada, y este mensaje solo se retira cuando el embed dice que está listo (lo hace
   refrescarBoton() en checkout.html). Si ocupara flujo, al montar habría un salto de altura. */
.chk-pago .cargando{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0;padding:24px;
  font:italic 500 1.06rem/1.5 var(--display);color:var(--cream-70);text-align:center;
}
.chk-pago .cargando::before{
  content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);
  animation:l4ePulso 1.35s var(--e-soft) infinite;
}
@keyframes l4ePulso{0%,100%{opacity:.28;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}

/* ═══ 8 · B6 · RECAP Y MONEDA · línea de ticket, no cajas ═══════════════════ */
.chk-recap{
  margin:var(--r3) 0 0;padding:13px 2px;
  border:0;border-top:1px solid rgba(217,166,78,.26);border-bottom:1px solid rgba(217,166,78,.26);
  border-radius:0;background:none;
  align-items:baseline;gap:10px;
  font:700 .97rem/1.4 var(--sans);color:var(--cream);
  font-variant-numeric:tabular-nums lining-nums;
}
#chk-recap-txt{order:0;min-width:0;text-wrap:pretty}
/* El punteado entre el concepto y "cambiar" es el gesto de un recibo impreso: dice
   "esto es la cuenta" sin una palabra más. */
.chk-recap::before{
  content:'';order:1;flex:1 1 24px;align-self:baseline;height:0;margin-bottom:.30em;
  border-bottom:1px dotted rgba(243,233,216,.26);
}
#chk-cambiar{
  order:2;flex:none;position:relative;
  font:600 .86rem/1.4 var(--sans);
  text-decoration-color:rgba(217,166,78,.45);
  transition:color 150ms ease,text-decoration-color 150ms ease;
}
#chk-cambiar::after{content:'';position:absolute;inset:-14px -10px}   /* zona de toque de 44px sin mover layout */
@media (hover:hover) and (pointer:fine){
  #chk-cambiar:hover{color:#EFC378;text-decoration-color:#EFC378}
}
/* Nota al margen. Sin filo lateral: tres bordes de acento en la misma página son un patrón
   aunque cada uno se defienda por separado. La marca del rombo ya vive en el fleurón. */
.chk-moneda{
  position:relative;margin:var(--r2) 0 0;padding:0 0 0 18px;
  border:0;border-radius:0;background:none;
  font:400 .85rem/1.6 var(--sans);color:var(--cream-70);text-wrap:pretty;
}
.chk-moneda::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:6px;height:6px;transform:rotate(45deg);
  background:var(--gold);opacity:.55;
}

/* ═══ 9 · B7 · AVISO DEL BANCO · la ÚNICA caja rellena en reposo ════════════
   Es el bloque con dato medido detrás (llevó el fallo del 44 % a cero). Se queda DORADO:
   pintarlo de fuego lo convierte en advertencia cuando es una tranquilización, y mete un
   segundo acento de color a 12px del botón, que es donde menos puede haber competencia.
   No necesita otro color: necesita ser la única caja. */
.chk-banco{
  margin:var(--r2) 0 0;padding:14px 15px;gap:12px;
  border:1px solid rgba(217,166,78,.34);
  border-radius:var(--rad-nota);
  background:linear-gradient(180deg,rgba(217,166,78,.13),rgba(217,166,78,.07));
  box-shadow:inset 0 1px 0 rgba(243,233,216,.10);
  font:400 .87rem/1.6 var(--sans);color:var(--cream-70);text-wrap:pretty;
  transition:border-color 220ms ease,box-shadow 220ms ease,background 220ms ease;
}
.chk-banco svg{width:19px;height:19px;margin-top:.16em}
.chk-banco b{color:var(--cream);font-weight:700}
/* Estado "cobro en vuelo": el JS añade #paquetes.bloqueado al pulsar el botón (checkout.html,
   línea 317). Es el único momento en que el móvil de la compradora importa de verdad, así que
   el aviso sube de intensidad EXACTAMENTE en el segundo en que el fallo ocurre. */
.chk-pago:has(#paquetes.bloqueado) .chk-banco{
  border-color:rgba(217,166,78,.62);
  background:linear-gradient(180deg,rgba(217,166,78,.20),rgba(217,166,78,.11));
  box-shadow:inset 0 1px 0 rgba(243,233,216,.16),0 0 0 4px rgba(217,166,78,.09);
}

/* ═══ 10 · B8 · EL BOTÓN · la misma pieza que acaba de pulsar en la landing ══
   El .btn de la marca es: píldora 999, degradado 180deg #E6B862→#C38E33, 1,08rem/1.15,
   caja NORMAL y sin tracking, padding 19/38, ancho 298px, y la sub-línea en versales a
   .72rem/.16em. El checkout tenía la FORMA de un botón de sistema y la TIPOGRAFÍA de la
   sub-línea: .96rem con .1em de tracking y versales. Aquí se devuelven las dos cosas. */
.chk-accion{position:relative;margin:var(--r2) 0 0;isolation:isolate}
/* Charco de luz detrás del botón: la mirada se dirige antes por luminancia que por tamaño.
   Estático, sin animación. */
.chk-accion::before{
  content:'';position:absolute;z-index:-1;left:50%;top:-14px;
  width:118%;height:112px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(52% 60% at 50% 44%,rgba(217,166,78,.20),transparent 72%);
}
.chk-cta{
  width:100%;
  /* La píldora de la marca es del TAMAÑO DE UN BOTÓN (298px). A 478px medidos en la
     columna de escritorio, con radio 999, deja de ser el mismo objeto y pasa a ser una
     barra cápsula. Se le pone techo y se centra; en móvil la columna ya mide ~309px,
     que es prácticamente la medida original. Para volver a ancho completo: quitar
     max-width en la media query de escritorio, una línea. */
  min-height:60px;padding:19px 30px;
  border:0;border-radius:999px;
  background:linear-gradient(180deg,#E6B862,#C38E33);
  color:#1A0F0A;                                   /* 8,5:1 sobre el dorado */
  font:800 1.08rem/1.15 var(--sans);
  letter-spacing:.01em;text-transform:none;
  box-shadow:0 12px 34px rgba(217,166,78,.26),inset 0 1px 0 rgba(255,255,255,.35);
  /* propiedades explícitas, nunca `all`: `all` anima también el fondo y deja un barrido sucio */
  transition:transform 150ms var(--e-out),box-shadow 150ms var(--e-out),background 150ms ease;
  touch-action:manipulation;
}
/* La etiqueta llega en MAYÚSCULAS desde el HTML (checkout.html línea 90) y el HTML es
   intocable: se devuelve a caja normal desde CSS. Los otros dos textos que escribe el JS
   ("Preparando el pago…", "Esperando a tu banco…") ya vienen en caja normal y no cambian. */
#chk-cta-txt{display:block;text-transform:lowercase}
#chk-cta-txt::first-letter{text-transform:uppercase}
.chk-cta svg{width:20px;height:20px;transition:transform 170ms var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .chk-cta:hover:not(:disabled){
    filter:none;                                   /* el brightness antiguo lavaba el degradado */
    background:linear-gradient(180deg,#F0C674,#CE9739);
    transform:translateY(-1px);
    box-shadow:0 16px 40px rgba(217,166,78,.38),inset 0 1px 0 rgba(255,255,255,.35);
  }
  .chk-cta:hover:not(:disabled) svg{transform:translateX(3px)}
}
/* En un botón ancho, 0.97 es un viaje demasiado largo: se ve el salto en los cantos.
   0.985 y 100ms —la respuesta a un dedo tiene que llegar antes de que el dedo se levante. */
.chk-cta:active:not(:disabled){
  transform:translateY(1px) scale(.985);
  box-shadow:0 4px 12px -6px rgba(217,166,78,.42),inset 0 2px 5px rgba(0,0,0,.20);
  transition-duration:100ms;
}
/* ESPERA. Antes eran dos atenuaciones apiladas (fondo al 30 % + opacity .55): el texto
   quedaba por debajo del contraste mínimo y el botón parecía roto, no ocupado. */
.chk-cta:disabled{cursor:default;opacity:1;filter:none}
.chk-cta.is-espera{
  background:rgba(217,166,78,.15);color:var(--cream-70);
  font-weight:700;letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px var(--filo-oro);
  transform:none;
}
.chk-cta.is-espera svg{display:none}
/* El mismo punto que respira del cargando: un solo gesto para decir "trabajando" en toda
   la página. Y sin charco de luz mientras no se puede pulsar. */
.chk-cta.is-espera::before{
  content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold);
  animation:l4ePulso 1.35s var(--e-soft) infinite;
}
.chk-accion:has(.is-espera)::before{opacity:.3}

/* La micro-frase que empieza por "Porque…" es una firma de voz de esta marca y en la
   landing va SIEMPRE en Cormorant cursiva a 1,2rem. El bloque de checkout la había
   aplastado a Manrope .85rem, que suena a otra web. */
.micro,.chk-accion .micro,#chk-micro,.paquetes .micro{
  font:italic 500 1.2rem/1.4 var(--display);color:var(--cream-70);margin:16px 0 0;text-wrap:pretty;
}
#chk-micro{text-align:center;max-width:46ch;margin-inline:auto}

/* ERROR. Sin rojo de sistema —la marca no tiene rojo, tiene brasa—: se pasa a --ember,
   que además es el color con el que la página de ventas marca la urgencia. */
/* Sin pestaña lateral: el borde va uniforme y es el COLOR el que dice que esto es un error,
   no un grosor asimétrico. La marca no tiene rojo, tiene brasa. */
.chk-error{
  margin:var(--r2) 0 0;padding:13px 15px;
  border:1px solid rgba(200,100,46,.7);
  border-radius:var(--rad-nota);
  background:linear-gradient(180deg,rgba(200,100,46,.16),rgba(200,100,46,.09));
  font:400 .89rem/1.6 var(--sans);color:var(--cream);text-wrap:pretty;
}
.chk-error b{display:block;margin-bottom:5px;color:#F2B98A}
/* estaba en cream-45 (≈4,3:1): es el mensaje del banco, no puede ser texto de adorno */
.chk-error .det{margin-top:7px;font-size:.8rem;color:var(--cream-70)}

/* ═══ 11 · B3 · COMPLEMENTOS · entre la tarjeta y el botón ══════════════════
   Posición pedida por Alex y respaldada por las dos referencias vivas que capturamos: el
   complemento va bajo los campos de tarjeta y encima del botón de compra. El comprador
   mete la tarjeta sin ruido, ve la oferta y pulsa viendo el total.
   Dos casillas INDEPENDIENTES, no un selector: cada complemento es su propia decisión.
   El aire de arriba (36px) las separa del formulario; el de abajo (20px) las cose al
   recap y al botón, que es lo que viene justo después. */
.bumps{position:relative;margin:var(--r4) 0 var(--r3)}
.bumps-tit{
  margin:0 0 14px;
  font:600 1.06rem/1.35 var(--display);color:var(--cream);letter-spacing:normal;
}

/* La casilla. Borde dorado punteado como en la landing, pero el punteado aquí SÍ tiene
   función: dice "esto es opcional y se añade", no "esto es una caja más". */
.bump2{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:13px;align-items:start;
  padding:15px 17px;margin:0 0 10px;cursor:pointer;
  border:1px dashed rgba(217,166,78,.42);border-radius:var(--rad-card,16px);
  background:rgba(217,166,78,.035);
  transition:background .22s var(--e-soft,ease),border-color .22s var(--e-soft,ease);
}
.bump2 input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bump2 .caja{
  width:22px;height:22px;margin-top:2px;flex:none;display:grid;place-items:center;
  border:2px solid rgba(217,166,78,.62);border-radius:6px;background:transparent;
  transition:background .15s ease,border-color .15s ease;
}
.bump2 .caja svg{width:14px;height:14px;fill:#1A0F0A;opacity:0;transition:opacity .15s ease}
.bump2 .txt{min-width:0}
.bump2 .cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bump2 .cab b{font:700 .97rem/1.35 var(--sans);color:var(--cream)}
.bump2 .cab em{
  font:600 1.05rem/1 var(--display);font-style:normal;color:var(--gold);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.bump2 .det{display:block;margin:7px 0 0;font:400 .87rem/1.55 var(--sans);color:var(--cream-70)}
/* Foto del complemento, la misma que en el checkout del C7D (14-sept). Debajo del texto, como allí,
   pero con techo de anchura: a ancho completo el Kit (cuadrado) se comía media pantalla del móvil. */
.bump2 .foto{display:block;margin:10px 0 0;max-width:220px}
.bump2 .foto img{display:block;width:100%;height:auto;border-radius:var(--rad-nota,10px);border:1px solid var(--filo-oro,rgba(217,166,78,.32))}

/* Marcada: el punteado se vuelve línea, el fondo sube y la caja se llena de oro.
   Tres señales, no una: en móvil una sola es fácil de no ver. */
.bump2.is-on,.bump2:has(input:checked){
  border-style:solid;border-color:var(--gold);background:rgba(217,166,78,.12);
}
.bump2.is-on .caja,.bump2:has(input:checked) .caja{background:var(--gold);border-color:var(--gold)}
.bump2.is-on .caja svg,.bump2:has(input:checked) .caja svg{opacity:1}
@media (hover:hover) and (pointer:fine){
  .bump2:hover{background:rgba(217,166,78,.075);border-color:rgba(217,166,78,.6)}
}
.bump2:active{transform:scale(.996)}
.bump2:focus-within{outline:2px solid var(--gold);outline-offset:3px}

/* Bloqueado mientras el cobro está en vuelo. */
.bumps.bloqueado{opacity:.5;pointer-events:none}

/* El aviso de que el formulario se ha renovado. En rojo brasa cuando hay que volver a
   escribir la tarjeta, en dorado cuando solo es informativo: son dos cosas distintas y
   el comprador tiene que distinguirlas de un vistazo. */
.paq-nota{
  margin:12px 0 0;padding:11px 13px;border-radius:11px;
  border:1px solid rgba(217,166,78,.35);background:rgba(217,166,78,.09);
  font:400 .85rem/1.55 var(--sans);color:var(--cream-70);
}
.paq-nota b{color:var(--cream)}
.paq-nota.es-aviso{border-color:rgba(200,100,46,.5);background:rgba(200,100,46,.12)}

/* El destaque al pulsar "cambiar": anillo que se expande y muere. */
.bumps.destaca{border-radius:16px}
.bumps.destaca::after{
  content:'';position:absolute;inset:-8px;border-radius:20px;pointer-events:none;
  border:1px solid var(--gold);animation:l4eAnillo 1.4s ease forwards;
}
@keyframes l4eAnillo{0%{opacity:0;transform:scale(.985)}25%{opacity:.9}100%{opacity:0;transform:scale(1.01)}}

/* ═══ 12 · B9 · SOPORTE Y ESTADOS FINALES ═══════════════════════════════════ */
.chk-soporte{
  margin:var(--r4) 0 0;padding-top:16px;border-top:1px solid var(--line);
  /* cream-45 ≈ 4,3:1 sobre el fondo de la tarjeta: por debajo del mínimo para texto
     funcional, y este texto dice cómo pedir ayuda. */
  font:400 .85rem/1.6 var(--sans);color:var(--cream-70);text-align:center;text-wrap:pretty;
}
.chk-soporte a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(217,166,78,.45)}
.chk-sin{padding:22px 4px;font:400 .97rem/1.65 var(--sans);color:var(--cream);text-wrap:pretty}
.chk-cerrado{padding:26px 6px;text-wrap:pretty}
.chk-cerrado b{font:600 1.7rem/1.2 var(--display);color:var(--gold);margin-bottom:10px}

/* ═══ 13 · FOCO VISIBLE ═════════════════════════════════════════════════════
   La página no tenía ninguno. En un checkout mucha gente tabula del formulario al botón,
   y con un iframe de por medio perder el foco de vista es perder la compra. Los radios
   están ocultos visualmente pero siguen siendo focalizables: el aro va en la ficha. */
.chk-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:999px}
.chk-recap button:focus-visible,
.chk-soporte a:focus-visible,
.chk-sin a:focus-visible,
.chk-cerrado a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ═══ 14 · MÓVIL ════════════════════════════════════════════════════════════
   Aquí compra la mayoría, y aquí .chk-pago sube con order:-1 (regla ya existente): la
   columna de contexto cae POR DEBAJO del botón y del selector. Medido en producción a
   390px: el botón está en y=1566 y la garantía en y=2780 de un documento de 3013.
   Así que en móvil esa columna NO es persuasión previa: es el cierre tranquilizador de
   después. Se diseña como tal —compacta, callada, con el sello pequeño— y no se gasta
   ahí la herencia cara. Lo que tranquiliza ANTES de pulsar vive todo dentro de .chk-pago:
   la barra fija, el aviso del banco y la micro-frase. */
@media (max-width:820px){
  :root{--whop-reserva:910px}   /* iframe 896 medido a 390px con la dirección visible (700px si se oculta) */

  .chk-cabecera{padding:clamp(26px,7vw,38px) 20px 26px}
  .chk-cabecera::before{
    background-image:
      var(--grain-fino),
      radial-gradient(ellipse 90% 60% at 50% -10%,rgba(217,166,78,.16),transparent 70%),
      linear-gradient(180deg,rgba(18,10,6,.72) 0%,rgba(20,12,7,.80) 46%,rgba(23,13,8,.95) 88%,var(--bg) 100%),
      url(img/hero-m-720x900.webp);
    background-image:
      var(--grain-fino),
      radial-gradient(ellipse 90% 60% at 50% -10%,rgba(217,166,78,.16),transparent 70%),
      linear-gradient(180deg,rgba(18,10,6,.72) 0%,rgba(20,12,7,.80) 46%,rgba(23,13,8,.95) 88%,var(--bg) 100%),
      image-set(url(img/hero-m-720x900.avif) type("image/avif"),url(img/hero-m-720x900.webp) type("image/webp"));
    background-position:0 0,0 0,0 0,center 26%;   /* 18 KB, no los 41 KB del hero de escritorio */
  }
  .chk-cabecera h1{font-size:clamp(1.95rem,7.6vw,2.4rem);margin:12px 0 10px}
  .chk-cabecera .sub{font-size:1rem}
  .chk-cabecera .chk-kicker::after{width:36px}

  .chk{grid-template-columns:1fr;gap:var(--r5) 0;padding:var(--r3) 16px 72px}
  .chk-pago{padding:18px 15px 22px;border-radius:16px}
  .chk-resumen{position:static;top:auto}

  .pedido{padding:14px 15px 13px}
  .pedido .linea b{font-size:1.2rem}            /* la cifra queda en ~41px */

  #whop-wrap{border-radius:var(--rad-marco)}
  .chk-cta{padding:18px 20px;min-height:58px;font-size:1.02rem}
  #chk-micro{font-size:1.1rem}

  .paquetes.bajo-cta{margin-top:44px;padding-top:30px}
  /* se recupera la fila: el título envuelve y el precio se queda anclado arriba a la
     derecha. En columna, el precio caía debajo del título y dejaba de leerse como el
     precio DE esa opción. */
  .paq .cab{flex-direction:row;align-items:baseline;gap:10px}
  .paq .cab b{flex:1 1 auto;min-width:0}
  .paq .cab em{flex:none;font-size:1.16rem}
  .chk-recap{flex-wrap:wrap}
  .chk-recap::before{flex-basis:16px}

  /* cierre tranquilizador, compacto: sello pequeño y lista apretada */
  .chk-lista{margin-bottom:var(--r3)}
  .chk-lista li{font-size:.9rem;padding:9px 0}
  .chk-garantia{font-size:1.05rem;padding-left:14px}
  .chk-garantia::before{width:62px;height:62px;margin-bottom:12px;box-shadow:0 0 0 5px rgba(217,166,78,.14),0 12px 24px -10px rgba(0,0,0,.5)}
}
@media (min-width:821px){
  /* techo de píldora: 360px es un botón, 478px era una barra cápsula */
  .chk-cta{max-width:360px;margin-inline:auto}
}

/* ═══ 15 · MOVIMIENTO REDUCIDO ══════════════════════════════════════════════
   No es "cero animación": se quedan el color y la opacidad, que ayudan a entender qué ha
   cambiado. Se va todo lo que se mueve de sitio o late. El relieve, que es lo que sostiene
   la dirección, no depende de ninguna animación. */
@media (prefers-reduced-motion:reduce){
  .chk-cta,.chk-cta svg,.paq,.paq .marca,.paq .marca::after,#chk-cambiar{transition:none}
  .chk-cta:hover:not(:disabled),.chk-cta:active:not(:disabled){transform:none}
  .chk-cta:hover:not(:disabled) svg{transform:none}
  .paq.is-on::before,.paq:has(input:checked)::before{opacity:1}
  .paq .marca::after{transition:opacity 140ms ease;transform:scale(1)}
  .chk-pago .cargando::before,.chk-cta.is-espera::before{animation:none;opacity:.9}
  .paquetes.destaca{animation:none;box-shadow:0 0 0 2px var(--gold)}
}

/* === Código de descuento (15-sept) · C7D para quien hizo Tu Primer Canto ===========================
   Lo aplica Whop dentro del formulario. En el pedido y en el pop-up solo se enseña, para que
   nuestra cifra coincida con la del formulario. Mismo vocabulario de píldora que los complementos. */
.pedido .chk-codigo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0;font:600 .9rem/1.4 var(--sans);color:var(--cream)}
.pedido .chk-codigo b{padding:5px 9px;border-radius:999px;background:rgba(217,166,78,.12);box-shadow:inset 0 0 0 1px rgba(217,166,78,.55);font:800 .72rem/1 var(--sans);letter-spacing:.12em;color:var(--gold)}
.pedido .chk-codigo s{font-weight:500;color:var(--cream-70)}
.lm-codigo{margin:2px 0 0;padding:9px 12px;border-radius:10px;background:rgba(217,166,78,.1);box-shadow:inset 0 0 0 1px rgba(217,166,78,.45);font:600 .9rem/1.4 var(--sans);color:var(--cream);text-align:center}

/* === Checkout con Stripe (16-sept) ================================================================
   B5 es ahora el formulario de Stripe (Contact Details + Payment Element), no el embed de Whop.
   - Marco en crema #F4EBDB con el mismo radio 12: el mismo tono que llevaba el embed de Whop desde el 14-sept,
     porque dentro de un iframe los desplegables nativos se leen en claro en cualquier navegador.
   - Reserva de altura para el segundo 0: el Payment Element pinta su propio esqueleto de carga, pero sin reserva
     el botón salta. Medir y ajustar tras las pruebas.
   - El código de descuento ya no vive dentro del formulario: enlace discreto bajo el pedido. */
.stp-marco{
  position:relative;min-height:340px;padding:16px 14px 18px;
  border-radius:var(--rad-marco);background:#F4EBDB;
  box-shadow:inset 0 0 0 1px rgba(217,166,78,.35),0 14px 30px -18px rgba(0,0,0,.55);
}
.stp-marco:focus-within{box-shadow:inset 0 0 0 1px var(--gold),0 0 0 3px rgba(217,166,78,.18),0 14px 30px -18px rgba(0,0,0,.55)}
.stp-marco .cargando{color:#6B5646}
.stp-marco .cargando::before{background:#8C5E17}
#stp-email{margin:0 0 14px}
.chk-prueba{margin:0 0 14px;padding:8px 12px;border-radius:10px;background:rgba(95,160,220,.14);box-shadow:inset 0 0 0 1px rgba(95,160,220,.5);font:700 .74rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#CFE3F5;text-align:center}
.pedido .chk-codigo-quitar,.chk-cupon-abrir{background:none;border:0;padding:0;font:500 .84rem/1.4 var(--sans);color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(217,166,78,.45);cursor:pointer}
.chk-cupon{margin:10px 0 0}
.chk-cupon-form{display:flex;gap:8px;margin:10px 0 0}
.chk-cupon-form input{flex:1;min-width:0;padding:11px 12px;border-radius:10px;border:1px solid rgba(217,166,78,.45);background:rgba(255,255,255,.04);color:var(--cream);font:600 1rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}   /* 16 px: con menos, Safari de iPhone amplía la página al tocar el campo */
.chk-error:focus{outline:none}
.chk-cupon-form input::placeholder{color:var(--cream-45);text-transform:none;letter-spacing:0}
.chk-cupon-form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.chk-cupon-form button{padding:11px 16px;border-radius:10px;border:0;background:rgba(217,166,78,.2);box-shadow:inset 0 0 0 1px rgba(217,166,78,.6);color:var(--cream);font:700 .86rem/1 var(--sans);cursor:pointer}
.chk-cupon-form button:disabled{opacity:.5;cursor:default}
.chk-cupon-err{margin:8px 0 0;font:500 .82rem/1.5 var(--sans);color:#F2B98A}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:820px){ .stp-marco{min-height:360px;padding:14px 12px 16px} }