/* Sistema Reel · la página de ventas con la temática de editia.pro (Kevin, 1 nov 2026): negro y gris claro como una página de
   Apple, la letra del iPhone, títulos grandes que acaban en punto y una palabra en el amarillo de sus portadas. En las secciones
   claras, esa palabra lleva la barra amarilla detrás, como en sus portadas. Detrás de sus vídeos, la luz morada de su cuarto. */
:root{
  --claro:#F5F5F7;--tx:#F5F5F7;--tx2:#A1A1A6;--tx3:#86868B;--osc:#1D1D1F;--osc2:#6E6E73;
  --amarillo:#FFD43B;--oro:#E9B600;--oro-tx:#8A6500;
  --tarjeta:#1C1C1E;--tarjeta2:#2C2C2E;--tarjeta3:#3A3A3C;
  --morado:124,58,237;--rojo:255,69,58;
  --letra:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:#000;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:#000;color:var(--tx);font-family:var(--letra);font-size:17px;line-height:1.45;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
figure,h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px;border-radius:8px}
.i{width:16px;height:16px;flex:none}
.i-play{display:none}
.pausado [data-pp] .i-pausa{display:none}
.pausado [data-pp] .i-play{display:block}
s{text-decoration-thickness:1.5px}

/* la franja de vista previa y la cabecera */
.aviso-borrador{padding:9px 20px;text-align:center;font-size:13px;line-height:1.35;color:var(--amarillo);background:#111;
  border-bottom:1px solid rgba(255,255,255,.06)}
/* la franja de fundador y la barra de la marca, fijas arriba al hacer scroll (Kevin, 5 nov 2026) */
.arriba{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
:root[data-tema="claro"] .arriba{background:rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.cab{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;max-width:1080px;margin:0 auto}
.marca{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.logo{width:24px;height:24px;border-radius:7px;background:var(--amarillo);position:relative;flex:none}
.logo:after{content:'';position:absolute;left:9.5px;top:7px;border-left:7.5px solid #000;border-top:5px solid transparent;
  border-bottom:5px solid transparent}
.cab-btn{display:none}
.cab-der{display:flex;align-items:center;gap:10px}
.tema{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--tx2);transition:color .15s}
.tema:hover{color:var(--tx)}
.tema .i{grid-area:1/1;width:21px;height:21px}
:root[data-tema="claro"] .tema .sol,:root:not([data-tema="claro"]) .tema .luna{display:none}

/* lo de todas las secciones */
.sec{padding:64px 22px 68px;text-align:center;overflow:hidden}
/* una sección blanca y otra gris, alternas (Kevin, 5 nov 2026: «se ve más dinámico»); en oscuro, negro y un gris casi negro */
.sec.fondo-blanco{background:#fff}
.sec.fondo-gris{background:#F5F5F7}
:root:not([data-tema="claro"]) .sec.fondo-blanco{background:#000}
:root:not([data-tema="claro"]) .sec.fondo-gris{background:#161617}
:root[data-tema="claro"] .fondo-gris{--tarjeta:#FFFFFF}
.claro{background:var(--claro);color:var(--osc)}
h1{font-size:40px;line-height:1.07;font-weight:700;letter-spacing:-.026em;max-width:340px;margin:0 auto;text-wrap:balance}
h2{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.022em;max-width:340px;margin:0 auto;text-wrap:balance}
.sub{font-size:19px;line-height:1.42;color:var(--tx2);margin:14px auto 0;max-width:336px;letter-spacing:-.012em;text-wrap:pretty}
.claro .sub{color:var(--osc2)}
.ac{color:var(--amarillo)}
.claro .ac{color:inherit;background:linear-gradient(transparent 60%,var(--amarillo) 60%,var(--amarillo) 93%,transparent 93%);
  padding:0 3px;margin:0 -3px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 34px;border-radius:999px;
  background:var(--amarillo);color:#000;font-size:19px;font-weight:600;letter-spacing:-.015em;transition:background .15s,transform .15s}
.btn:hover{background:#FFDD5C}
.btn:active{transform:scale(.98)}
.btn.sm{height:40px;padding:0 18px;font-size:15px}
.cta{margin-top:28px}
.lnk{display:inline-flex;align-items:center;gap:4px;color:var(--amarillo);font-size:17px;margin-top:20px}
.lnk .i{width:15px;height:15px}
.micro{font-size:14px;color:var(--tx3);margin-top:18px}
.micro s{color:var(--tx3)}
/* el precio de fundador (Kevin, 5 nov 2026): en amarillo debajo de cada botón, en la oferta y en la barra de abajo */
.micro .fund{color:var(--amarillo);font-weight:600}
.franja-fundador{display:block;padding:9px 20px;text-align:center;font-size:14px;font-weight:600;color:#000;background:var(--amarillo)}
.franja-fundador b{font-weight:800}
.fundador{display:inline-block;margin-top:22px;padding:5px 12px;border-radius:999px;font-size:14px;font-weight:600;color:#000;
  background:var(--amarillo)}
.fundador + .precio{margin-top:12px}
.fundador-n{font-size:17px;font-weight:600;margin-top:10px}
.fundador-n + .precio-n{margin-top:2px;font-size:15px}
.tel{position:relative;aspect-ratio:9/16;border-radius:38px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.tel img{width:100%;height:100%;object-fit:cover}
.tel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.claro .tel{box-shadow:none}
.et{display:flex;justify-content:space-between;font-size:14px;margin:0 4px 8px}
.et b{font-weight:600}
.et span{color:var(--tx3);font-variant-numeric:tabular-nums}
.claro .et span{color:var(--osc2)}
.son{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;pointer-events:none;transition:background .2s}
.son .i{grid-area:1/1;width:16px;height:16px}
.son .i-voz,.suena .son .i-mudo{opacity:0}
.suena .son .i-voz{opacity:1}
.suena .son{background:var(--amarillo);color:#000}
.suena .tel,.tel.suena{box-shadow:0 0 0 2px var(--amarillo)}

/* arriba: la toma en bruto y la editada */
.heroe{padding:26px 22px 56px}
.par-heroe{position:relative;margin:34px auto 0;max-width:380px;text-align:left}
/* el bruto y el editado en un solo vídeo, para que no puedan separarse (Kevin, 5 nov 2026): la máscara le da a cada mitad su forma
   de teléfono y encima van las dos mitades que se tocan para oír cada lado. El vídeo mide 540 + 30 + 540 por 960 (`sacar_v19`) */
.par-ets{display:grid;grid-template-columns:540fr 30fr 540fr;margin:0 4px 8px;font-size:14px}
.par-ets b{font-weight:600}
.par-ets b + b{grid-column:3}
.par-caja{position:relative;aspect-ratio:1110/960}
.par-v{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  -webkit-mask:url(mascara-par.svg) 0 0/100% 100% no-repeat;mask:url(mascara-par.svg) 0 0/100% 100% no-repeat}
.mitad,.par-brillo{position:absolute;top:0;bottom:0;left:0;width:48.6486%;border-radius:12.963%/7.2917%}
.mitad{z-index:1;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .2s}
.mitad.ed,.par-brillo{left:auto;right:0}
.par-brillo{box-shadow:0 0 60px 2px rgba(255,212,59,.4)}   /* el amarillo de los botones, igual hacia todos los lados (Kevin, 5 nov 2026) */
.mitad.suena{box-shadow:inset 0 0 0 2px var(--amarillo)}
.gran-play{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:var(--amarillo);color:#000;display:none;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.gran-play .i{width:26px;height:26px;margin-left:3px}
.bloqueado .gran-play{display:grid}
.pie-video{font-size:14px;color:var(--tx3);margin-top:16px}

/* te llevas el sistema entero (Kevin, 5 nov 2026): lo que sabe Claude y los recursos, cada uno con su dibujo. Lo de dentro de cada
   tarjeta va oscuro en los dos modos, como una pantalla */
.lleva-g{margin:34px auto 0;max-width:420px;display:grid;gap:14px;text-align:left}
.lv{background:var(--tarjeta);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.lv-vis{flex:1 0 auto;position:relative;min-height:232px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#141416;overflow:hidden}
.lv-tx{padding:20px 22px 24px}
.lv h3{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.016em}
.lv p{font-size:15.5px;line-height:1.42;color:var(--osc2);margin-top:6px;text-wrap:pretty}
.lleva-mas{font-size:19px;line-height:1.4;margin:34px auto 0;max-width:320px;text-wrap:pretty}
.lleva .lnk{margin-top:14px}
/* lo que sabe: cada regla se enciende por turnos, como suena en el vídeo */
.reglas{list-style:none;margin:0;padding:22px 20px;width:100%;display:grid;gap:10px}
.reglas li{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'que hilo son' 'que hilo como';align-items:center;
  column-gap:10px;padding:8px 12px;border-radius:14px;background:#1C1C1E;animation:regla 4.8s calc(var(--i) * 1.2s) infinite}
.reglas .que{grid-area:que;font-size:15px;color:#E5E5EA}
.reglas .hilo{grid-area:hilo;height:1px;background:linear-gradient(90deg,#3A3A3C,var(--amarillo));opacity:.35}
.reglas .chip{grid-area:son;justify-self:end;height:26px;line-height:26px;font-size:13.5px;transition:transform .2s}
.reglas small{grid-area:como;justify-self:end;font-size:12px;color:#86868B;margin-top:2px}
@keyframes regla{0%,22%{background:#2A2A1C;box-shadow:inset 0 0 0 1px rgba(255,212,59,.45)}30%,100%{background:#1C1C1E;box-shadow:none}}
/* los momentos de los sonidos: la onda de una voz y dos cintas que pasan */
.lv-sonidos .onda{width:calc(100% - 44px);height:52px}
.lv-sonidos .onda svg{fill:var(--amarillo)}
.cinta{width:100%;overflow:hidden;margin-top:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.cinta > div{display:flex;gap:8px;width:max-content;animation:cinta 34s linear infinite}
.cinta.al-reves > div{animation-direction:reverse;animation-duration:30s}
.cinta .chip{flex:none}
@keyframes cinta{to{transform:translateX(-50%)}}
/* los iconos animados y la muestra de color */
.lv-iconos .v-iconos{grid-template-columns:repeat(3,64px);gap:10px 26px;padding:20px 0}
.lv-iconos .v-iconos img{width:64px;height:64px}
.v-luts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;padding:14px}
.lut{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:#000}
.lut img{width:100%;height:100%;object-fit:cover}
.lut figcaption{position:absolute;left:6px;bottom:6px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:500;
  color:#fff;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lut.suyo{box-shadow:0 0 0 2px var(--amarillo)}
.lut.suyo figcaption{background:var(--amarillo);color:#000}
.cp .v-luts{grid-template-columns:repeat(3,92px);width:auto;padding:0}

/* mira cómo edita */
.demo-caja{max-width:420px;margin:0 auto}
.tel-mini{width:150px;margin:34px auto 0;border-radius:26px}
.paso-n{font-size:14px;color:var(--tx3);margin-top:18px}
.paso-t{font-size:26px;line-height:1.18;font-weight:600;letter-spacing:-.02em;margin:10px auto 0;max-width:330px;min-height:2.36em;
  text-wrap:balance}
.pistas{position:relative;margin-top:24px;text-align:left;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pe{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx3);margin:14px 0 6px}
.pe:first-child{margin-top:0}
.pe .i{width:14px;height:14px}
.carril{position:relative;height:30px;border-radius:8px;background:var(--tarjeta);overflow:hidden}
.carril > *{position:absolute;top:0;bottom:0}
.c-video{height:46px;background:#111}
.tira-caja{position:absolute;inset:0;overflow:hidden}
.tira-caja i{position:absolute;top:0;bottom:0;background-repeat:no-repeat;box-shadow:inset -1px 0 0 rgba(0,0,0,.55)}
.onda-caja{position:absolute;inset:0}
.onda-caja i{position:absolute;top:50%;transform:translateY(-50%);border-radius:2px;background:#E5E5EA}
.c-video .fuera,.c-voz .sombra{z-index:1}
.c-video .chk{z-index:2}
.fuera{background:repeating-linear-gradient(135deg,rgba(var(--rojo),.6) 0 5px,rgba(0,0,0,.55) 5px 10px)}
.c-video .fuera,.c-voz .sombra{opacity:0;transition:opacity .5s}
.con-cortes .c-video .fuera,.con-cortes .c-voz .sombra{opacity:1}
.c-video .chk{top:auto;bottom:4px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--amarillo);color:#000;
  font-size:10px;font-weight:700;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s}
.con-revision .c-video .chk.ok{opacity:1;transform:none}
.c-voz{height:36px;background:none}
.c-voz .bar{top:50%;bottom:auto;transform:translateY(-50%);border-radius:2px;background:#E5E5EA}
.c-voz .sombra{background:rgba(0,0,0,.72)}
.blk{display:flex;align-items:center;padding:0 6px;border-radius:6px;font-size:11px;white-space:nowrap;overflow:hidden;opacity:0;
  transition:opacity .4s,background .2s,color .2s}
.blk b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.c-subs .blk{top:3px;bottom:3px;background:var(--tarjeta3);color:#E5E5EA;box-shadow:inset 0 0 0 1px #000}
.con-subs .c-subs .blk{opacity:1}
.c-subs .blk b{display:none}
.c-subs .blk.on{background:var(--amarillo);color:#000}
.c-efectos .blk{top:3px;bottom:3px;background:rgba(var(--morado),.55);color:#fff}
.con-efectos .c-efectos .blk{opacity:1}
.c-efectos .blk.on{background:rgba(var(--morado),.95)}
.c-efectos .mk{width:18px;margin-left:-9px;display:grid;place-items:center;color:var(--amarillo);font-size:13px;opacity:0;
  transition:opacity .3s,transform .3s}
.con-efectos .c-efectos .mk{opacity:.85}
.c-efectos .mk.on{opacity:1;transform:scale(1.35)}
.cabezal{position:absolute;top:20px;bottom:24px;left:calc(var(--xn,0) * 100%);width:2px;margin-left:-1px;background:var(--amarillo);
  border-radius:1px;pointer-events:none}
.cabezal:before{content:'';position:absolute;top:-6px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--amarillo)}
.dur{display:flex;justify-content:flex-end;font-size:13px;color:var(--tx3);margin-top:8px;font-variant-numeric:tabular-nums}
.ctrl{display:flex;align-items:center;gap:12px;margin-top:20px}
.redondo{width:44px;height:44px;border-radius:50%;background:var(--tarjeta);display:grid;place-items:center;color:#fff;flex:none;
  transition:background .15s}
.redondo:hover{background:var(--tarjeta2)}
.redondo .i{grid-area:1/1;width:18px;height:18px}
.ctrl time{font-size:15px;color:var(--tx2);font-variant-numeric:tabular-nums;min-width:34px;text-align:left}
.segm{display:inline-flex;background:var(--tarjeta);border-radius:12px;padding:3px}
.segm button{padding:8px 14px;border-radius:9px;font-size:15px;color:var(--tx2);transition:background .2s,color .2s}
.segm button.on{background:var(--tarjeta3);color:#fff}
.ctrl [data-otra]{margin-left:auto}

/* los estilos */
.carr{margin:34px -22px 0}
.carr-fila{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px calc(50% - 118px) 10px;
  scrollbar-width:none;overscroll-behavior-x:contain}
.carr-fila::-webkit-scrollbar{display:none}
.slide{flex:none;width:236px;scroll-snap-align:center;opacity:.42;transform:scale(.9);transition:opacity .35s,transform .35s;cursor:pointer}
.slide.on{opacity:1;transform:none;cursor:default}
.slide .tel{border-radius:34px}
.slide video{opacity:0;transition:opacity .3s}
.slide.reproduce video{opacity:1}
/* mientras se baja el vídeo del centro, un «cargando» (solo si tarda más de medio segundo), para que no parezca roto */
.slide .tel::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:3px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0;pointer-events:none}
.carr:not(.pausado) .slide.on:not(.reproduce) .tel::after{animation:girar .8s linear infinite,aparecer .2s .5s forwards}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes aparecer{to{opacity:1}}
.est-n{font-size:14px;color:var(--tx3);margin-top:18px}
.est-t{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:6px 22px 0;text-wrap:balance}
.pedido{font-size:16px;color:#E5E5EA;margin:10px 22px 0;text-wrap:balance}
.pedido span{color:var(--tx3);margin-right:6px}
.pedido b{font-weight:400}
.flechas{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:22px}
.pild{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--tarjeta);
  font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.pild .i{width:15px;height:15px}

/* los silencios, fuera */
.par{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:34px auto 0;max-width:380px;text-align:left}
.par figure{cursor:pointer}
.par .tel{border-radius:24px}
.par .pp{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;background:var(--osc);
  box-shadow:0 0 0 3px var(--claro);display:grid;place-items:center;color:#fff}
.par .pp .i{grid-area:1/1;width:18px;height:18px}
.cifras{margin:36px auto 0;max-width:380px;text-align:left}
.cifra{display:flex;align-items:baseline;gap:10px}
.cifra b{font-size:54px;line-height:1;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cifra span{font-size:17px;color:var(--osc2)}
.cifra.gris b{color:var(--tx3)}
.barra{position:relative;height:6px;border-radius:3px;background:#D2D2D7;margin:14px 0 28px;overflow:hidden}
.barra.am{background:#E6E6EB}
.barra.am i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--k) * 100%);border-radius:3px;background:var(--oro);
  transition:width 1.6s cubic-bezier(.2,.75,.2,1) .25s}
.js .ad:not(.visto) .barra.am i{width:100%}
.frase-buena{font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.018em}
.ad .nota{font-size:13px;color:var(--osc2);margin-top:10px}

/* Claude, solo, no edita así: las carpetas y lo que hay en cada una */
.giro{font-size:21px;line-height:1.35;font-weight:600;letter-spacing:-.016em;color:#fff;max-width:330px;margin:22px auto 0;text-wrap:pretty}
.finder{margin:32px auto 0;max-width:420px;background:#1E1E20;border-radius:16px;overflow:hidden;text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 80px -30px rgba(var(--morado),.75)}
.finder-cab{position:relative;display:flex;align-items:center;gap:7px;height:38px;padding:0 13px;background:#2A2A2D;
  border-bottom:1px solid rgba(255,255,255,.06)}
.finder-cab i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.finder-cab i:nth-child(2){background:#FEBC2E}
.finder-cab i:nth-child(3){background:#28C840}
.finder-cab span{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:600;color:var(--tx2);pointer-events:none}
.carpetas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 6px;padding:18px 8px 20px}
.carpeta{display:block;text-align:center;font-size:12.5px;line-height:1.25;color:#E5E5EA;padding:8px 2px 9px;border-radius:10px;
  transition:background .15s}
.carpeta:hover{background:rgba(255,255,255,.06)}
.carp{width:58px;height:48px;margin:0 auto 8px}
.carpeta em{display:block;font-style:normal;font-size:11px;color:var(--amarillo);margin-top:3px}
.dentro{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-top:50px}
.cartas{margin:22px auto 0;max-width:420px;display:grid;gap:14px;text-align:left}
.cp{background:var(--tarjeta);border-radius:24px;overflow:hidden;scroll-margin-top:24px;transition:box-shadow .3s}
.cp:target,.cp.marcada{box-shadow:0 0 0 2px var(--amarillo)}
.vis{height:212px;position:relative;display:flex;align-items:center;justify-content:center;gap:14px;background:#141416;overflow:hidden}
.tx{padding:16px 20px 21px}
.cp-cab{display:flex;align-items:center;gap:8px;min-height:22px}
.cp-cab .carp{width:22px;height:18px;margin:0}
.cp-cab em.pronto,.carpeta em.pronto{color:var(--tx2);border-color:rgba(161,161,166,.5)}
.cp-cab em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--amarillo);border:1px solid rgba(255,212,59,.5);
  border-radius:999px;padding:2px 9px}
.cp h3{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.016em;margin-top:8px}
.cp p{font-size:15.5px;line-height:1.42;color:var(--tx2);margin-top:6px}
.v-tira{width:100%;padding:0 18px}
.v-tira .tira{position:relative;height:52px;border-radius:9px;background-size:100% 100%;overflow:hidden}
.v-tira .fuera,.v-tira .sombra{position:absolute;top:0;bottom:0}
.v-tira .sombra{background:rgba(20,20,22,.75)}
.onda{position:relative}
.onda svg{width:100%;height:100%;fill:#E5E5EA}
.v-tira .onda{height:40px;margin-top:12px}
.v-estilos{display:flex;align-items:center;gap:10px}
.v-estilos .tel{width:84px;border-radius:16px}
.v-estilos .tel:nth-child(2){width:104px}
.v-marca{width:100%;padding:0 24px;display:flex;flex-direction:column;gap:8px}
.v-marca .b{max-width:80%;padding:8px 12px;border-radius:16px;font-size:14px;line-height:1.3}
.v-marca .p{align-self:flex-start;background:var(--tarjeta2);color:#E5E5EA;border-bottom-left-radius:5px}
.v-marca .r{align-self:flex-end;background:var(--amarillo);color:#000;font-weight:500;border-bottom-right-radius:5px}
.v-chat{width:100%;max-width:320px;padding:0 24px;display:flex;flex-direction:column;gap:9px}
.v-chat .coment{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff;margin-bottom:4px}
.v-chat .coment i{width:28px;height:28px;border-radius:50%;background:#48484A;flex:none}
.v-chat .coment small{display:block;font-size:11.5px;font-weight:400;color:#A1A1A6}
.v-chat .b{align-self:flex-start;max-width:80%;padding:8px 12px;border-radius:16px;border-bottom-left-radius:5px;font-size:14px;
  line-height:1.3;background:var(--tarjeta2);color:#E5E5EA}
.v-chat .boton{align-self:flex-start;padding:7px 14px;border-radius:12px;background:#F5F5F7;color:#000;font-size:13.5px;font-weight:600}
.muestras{display:flex;align-items:center;gap:7px;margin-top:2px}
.muestras i{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.muestras b{font-size:17px;font-weight:700;color:#fff;margin-left:6px}
.v-revisor{display:grid;grid-template-columns:repeat(3,46px);gap:7px}
.v-revisor span{position:relative;width:46px;height:58px;border-radius:8px;overflow:hidden}
.v-revisor img{width:100%;height:100%;object-fit:cover}
.v-revisor span:after{content:'✓';position:absolute;right:3px;bottom:3px;width:15px;height:15px;border-radius:50%;background:var(--amarillo);
  color:#000;font-size:10px;font-weight:700;display:grid;place-items:center}
.v-mini{display:flex;align-items:center;gap:14px}
.v-mini .tel{width:100px;border-radius:16px}
.scan{position:absolute;left:0;right:0;top:40%;height:2px;background:var(--amarillo);box-shadow:0 0 12px 2px rgba(255,212,59,.7)}
.chips{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.chip{height:30px;line-height:30px;padding:0 12px;border-radius:999px;background:var(--tarjeta2);color:#E5E5EA;font-size:13.5px;
  white-space:nowrap}
.chip.am{background:var(--amarillo);color:#000;font-weight:500}
.v-sonidos{width:100%;padding:0 22px}
.v-sonidos .onda{height:56px}
.v-sonidos .onda svg{fill:var(--amarillo)}
.v-sonidos .chips{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:16px}
.v-iconos{display:grid;grid-template-columns:repeat(3,56px);gap:8px 18px}
.v-iconos img{width:56px;height:56px;object-fit:contain}
.grupo{margin:14px auto 0;max-width:420px;background:var(--tarjeta);border-radius:22px;padding:20px;text-align:left;display:flex;gap:14px}
.grupo .i{width:22px;height:22px;color:var(--amarillo);margin-top:2px}
.grupo h3{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.015em}
.grupo p{font-size:15.5px;line-height:1.42;color:var(--tx2);margin-top:5px}
.no-curso{font-size:19px;line-height:1.4;margin:36px auto 0;max-width:300px;color:#fff;text-wrap:pretty}

/* para quién */
.rutas{margin:12px auto 0;max-width:420px;text-align:left}
.ruta{border-left:3px solid var(--oro);padding:2px 0 2px 16px;margin-top:28px}
.ruta small{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--osc2)}
.ruta small .i{width:15px;height:15px}
.ruta p{font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.cuatro{font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.022em;margin:56px auto 0;max-width:320px;text-wrap:balance}
.lnk-osc{display:inline-flex;align-items:center;gap:3px;color:var(--osc);font-size:17px;font-weight:500;margin-top:18px;
  text-decoration:underline;text-decoration-color:var(--oro);text-decoration-thickness:2px;text-underline-offset:4px}
.lnk-osc .i{width:15px;height:15px}
.fuente{font-size:12px;color:var(--osc2);margin:22px auto 0;max-width:420px;text-align:left}

/* la carta */
.fotos{position:relative;width:282px;height:390px;margin:34px auto 0}
.fotos .tel{position:absolute;top:0;left:0;width:216px;border-radius:30px}
.fotos .t1{z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 80px -30px rgba(var(--morado),.9)}
.fotos .t2{left:32px;transform:scale(.92);transform-origin:right center;opacity:.6;z-index:2}
.fotos .t3{left:62px;transform:scale(.84);transform-origin:right center;opacity:.32;z-index:1}
.quien{margin-top:22px}
.quien b{display:block;font-size:17px;font-weight:600}
.quien span{font-size:15px;color:var(--tx3)}
.borr{display:inline-block;font-size:12px;color:var(--amarillo);border:1px solid rgba(255,212,59,.45);border-radius:999px;padding:3px 10px;
  margin-top:22px}
.carta{font-size:19px;line-height:1.45;color:#E5E5EA;max-width:340px;margin:24px auto 0;text-wrap:pretty}
.carta + .carta{margin-top:14px}

/* la oferta */
.oferta{margin:30px auto 0;max-width:420px;background:#fff;border-radius:28px;padding:24px 22px 22px;text-align:left;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 .5px rgba(0,0,0,.05)}
.of-cab{display:flex;gap:14px;align-items:center;padding-bottom:20px;border-bottom:1px solid #E5E5EA}
.app{width:58px;height:58px;border-radius:15px;background:var(--amarillo);position:relative;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.app:after{content:'';position:absolute;left:23px;top:18px;border-left:17px solid #000;border-top:11px solid transparent;
  border-bottom:11px solid transparent}
.of-cab b{display:block;font-size:21px;font-weight:600;letter-spacing:-.016em}
.of-cab span{display:block;font-size:15px;color:var(--osc2);line-height:1.3;margin-top:2px}
.precio{display:flex;align-items:flex-start;gap:12px;margin-top:22px}
.precio s{font-size:24px;color:var(--tx3);margin-top:14px;text-decoration-thickness:2px}
.precio b{font-size:68px;line-height:1;font-weight:700;letter-spacing:-.04em}
.precio-n{font-size:17px;color:var(--osc2);margin-top:8px}
.oferta .btn{width:100%;margin-top:20px}
.pend{display:block;font-size:12px;color:var(--oro-tx);margin-top:8px}
.oferta > .pend{text-align:center}
.letra{font-size:14.5px;line-height:1.45;color:var(--osc2);margin-top:16px}
.letra + .letra{margin-top:8px}
.incl{margin-top:22px;padding-top:20px;border-top:1px solid #E5E5EA}
.incl > b{font-size:15px;font-weight:600}
.incl ul{list-style:none;padding:0;margin:12px 0 0}
.incl li{display:flex;gap:12px;padding:9px 0}
.incl li .i{width:20px;height:20px;color:var(--osc);margin-top:2px}
.incl li b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.012em}
.incl li span{display:block;font-size:14.5px;color:var(--osc2);line-height:1.38;margin-top:2px}

/* la lista de interesados (Kevin, 2 nov 2026: la maqueta A): mientras no se puede comprar, el formulario va donde irá el botón
   de pagar, con «Lista de espera» junto al precio */
.oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pastilla{margin-left:auto;align-self:center;font-size:13px;font-weight:600;color:#000;background:var(--amarillo);border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.lista{margin-top:20px;padding-top:20px;border-top:1px solid #E5E5EA}
.lista-t{display:block;font-size:19px;font-weight:600;letter-spacing:-.016em}
.campo{display:block;width:100%;height:54px;margin-top:12px;padding:0 16px;border-radius:14px;border:1px solid #D2D2D7;background:#fff;
  font:inherit;font-size:17px;color:var(--osc);-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.campo::placeholder{color:#A1A1A6}
.campo:focus{outline:none;border-color:var(--osc);box-shadow:0 0 0 3px rgba(255,212,59,.55)}
.campo[aria-invalid="true"]{border-color:rgb(var(--rojo))}
.campo[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(var(--rojo),.22)}
.opciones{border:0;margin:0;padding:0;min-width:0}
.preg-t{float:left;width:100%;padding:0;font-size:15px;color:var(--osc2);margin-top:16px}
.opciones-g{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:9px}
.opcion{position:relative;display:block;cursor:pointer}
.opcion input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opcion span{display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;background:var(--claro);
  font-size:15.5px;font-weight:500;color:var(--osc);box-shadow:inset 0 0 0 1px #E5E5EA;transition:background .15s,color .15s}
.opcion input:checked + span{background:var(--osc);color:#fff;box-shadow:none}
.opcion input:focus-visible + span{outline:2px solid var(--amarillo);outline-offset:2px}
.lista .btn{width:100%;margin-top:16px}
.lista .btn[disabled]{opacity:.6}
.lista-error{font-size:14px;line-height:1.4;color:#C4001A;text-align:center;margin-top:12px}
.lista-error:empty{display:none}
.lista-nota{font-size:13.5px;line-height:1.4;color:var(--osc2);text-align:center;margin-top:10px}
.lista-nota a,.pie a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.lista-ok{text-align:center;padding-bottom:4px}
.lista-ok[hidden]{display:none}
.lista-ok:focus{outline:none}
.lista-ok i{display:grid;place-items:center;width:52px;height:52px;margin:6px auto 0;border-radius:50%;background:var(--amarillo);color:#000}
.lista-ok i .i{width:28px;height:28px;stroke-width:2.4}
.lista-ok b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:14px}
.lista-ok p{font-size:16px;line-height:1.4;color:var(--osc2);margin-top:6px}
.lista-ok p span{font-weight:600;color:var(--osc);overflow-wrap:anywhere}
/* «Avísame cuando abra» dentro de la página (5 nov 2026): el formulario se abre ahí mismo, en una tarjeta como la del precio, en vez
   de bajar hasta el precio */
.abierto{display:none!important}
.lista-aqui{max-width:420px;margin:0 auto;text-align:left;background:#fff;border-radius:24px;padding:20px 20px 18px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 60px -36px rgba(0,0,0,.3);animation:abrir-lista .28s cubic-bezier(.2,.8,.2,1)}
.lista-aqui .lista{margin-top:0;padding-top:0;border-top:0}
.lnk-osc + .lista-aqui{margin-top:22px}
@keyframes abrir-lista{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lista-aqui{animation:none}}
.gar{margin-top:18px;background:var(--claro);border-radius:18px;padding:16px 16px 17px}
.gar b{display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:600}
.gar b .i{width:20px;height:20px}
.gar p{font-size:14.5px;line-height:1.42;color:var(--osc2);margin-top:6px}

/* las preguntas */
.pregs{margin:30px auto 0;max-width:420px;display:grid;gap:10px;text-align:left}
.preg{background:var(--tarjeta);border-radius:18px}
.preg summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 16px 17px 18px;font-size:17px;
  font-weight:600;letter-spacing:-.012em;cursor:pointer;list-style:none;border-radius:18px}
.preg summary::-webkit-details-marker{display:none}
.preg summary i{width:28px;height:28px;border-radius:50%;background:var(--tarjeta2);display:grid;place-items:center;flex:none;
  transition:transform .25s}
.preg[open] summary i{transform:rotate(45deg)}
.preg p{font-size:16px;line-height:1.45;color:var(--tx2);padding:0 18px 18px;margin-top:-4px}

/* el final */
.tel-fin{width:150px;margin:30px auto 0;border-radius:26px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 70px -26px rgba(var(--morado),.9)}
.fin .segm{margin-top:18px}
.fin .segm button{padding:9px 20px}
.fin-p{font-size:19px;line-height:1.42;color:var(--tx2);max-width:320px;margin:22px auto 0;text-wrap:pretty}
.pasos3{list-style:none;padding:0;margin:24px auto 0;max-width:290px;text-align:left}
.pasos3 li{display:flex;gap:16px;font-size:19px;line-height:1.32;padding:8px 0;color:#E5E5EA}
.pasos3 li b{font-weight:500;width:12px;flex:none;color:var(--amarillo)}
.pie{padding:30px 22px 116px;border-top:1px solid rgba(255,255,255,.1);max-width:1080px;margin:0 auto}
.pie p{font-size:12px;line-height:1.5;color:var(--tx3);margin-top:14px}

/* la barra de abajo y el aviso */
.barra-cta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(28,28,30,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.5);transform:translateY(160%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.barra-cta.ver{transform:none}
.barra-cta b{display:block;font-size:15px;font-weight:600;letter-spacing:-.012em}
.barra-cta span{display:block;font-size:13px;color:var(--tx2)}
.barra-cta s{color:var(--tx3)}
.aviso{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:30;transform:translate(-50%,16px);padding:12px 18px;
  border-radius:14px;background:#fff;color:#000;font-size:15px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;
  pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.aviso.ver{opacity:1;transform:translate(-50%,0)}

/* en el escritorio: lo mismo, con más aire y las cartas en tres columnas */
@media (min-width:900px){
  .cab{height:64px}
  .cab-btn{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--amarillo);color:#000;
    font-size:14px;font-weight:600}
  .sec{padding:100px 40px 104px}
  .heroe{padding:56px 40px 110px}
  h1{font-size:68px;max-width:780px}
  h2{font-size:52px;max-width:760px}
  .sub{font-size:22px;max-width:620px;margin-top:18px}
  .par-heroe{max-width:600px;margin-top:48px}
  .demo-caja{max-width:560px}
  .tel-mini{width:190px;border-radius:30px}
  .paso-t{font-size:30px;max-width:520px}
  .carr{margin:44px -40px 0}
  .carr-fila{gap:22px;padding:6px calc(50% - 140px) 10px}
  .slide{width:280px}
  .est-t{font-size:28px}
  .par,.cifras{max-width:600px}
  .par{gap:18px}
  .par .tel{border-radius:32px}
  .giro{font-size:24px;max-width:620px}
  .finder{max-width:560px}
  .carpetas{padding:24px 16px 26px}
  .cartas{max-width:1040px;grid-template-columns:repeat(3,1fr)}
  .grupo{max-width:1040px}
  .rutas{max-width:880px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .cuatro{font-size:40px;max-width:640px}
  .fuente{max-width:880px}
  .carta{max-width:560px;font-size:21px}
  .oferta{max-width:460px}
  .pregs{max-width:720px}
  .tel-fin{width:180px;border-radius:30px}
  .barra-cta{left:50%;right:auto;width:520px;transform:translate(-50%,160%)}
  .barra-cta.ver{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}

/* sus narrados, como una fila de su perfil de Instagram (Kevin, 3 nov 2026): la portada y, abajo a la izquierda, el icono de vistas
   copiado de su captura con la cifra escrita igual que allí. Todo en un SVG con las medidas de su tesela (430 × 769) */
.perfil-ig{margin:32px auto 0;max-width:420px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.reel-ig{position:relative;margin:0;aspect-ratio:430/769;overflow:hidden;background:var(--tarjeta)}
.reel-ig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-ig .vistas{position:absolute;inset:0;width:100%;height:100%}
.vistas text{fill:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;font-weight:500;
  font-variation-settings:'opsz' 17}   /* la letra a su tamaño de verdad (~12 pt): sin esto, sale la de títulos, más fina */
.explicados h2 .ac{white-space:nowrap}   /* «sin mostrar tu cara», junta en su línea */
.dentro.primero{margin-top:40px}
.dentro.primero + .perfil-ig{margin-top:18px}
.nota-exp{font-size:13px;color:var(--tx3);margin:14px auto 0;max-width:420px}
/* lo que trajo cada narrado: sus estadísticas de Instagram, una al lado de otra (en el teléfono, se pasan con el dedo) */
.stats-ig{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:18px -22px 0;padding:0 22px 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stats-ig::-webkit-scrollbar{display:none}
.stat-ig{flex:0 0 74%;max-width:300px;scroll-snap-align:center;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.stat-ig img{width:100%;height:auto}
.explicados .pend{color:var(--amarillo);opacity:.8}
.temas .ruta{border-left-color:var(--amarillo)}
.temas .ruta small{color:var(--tx3)}
@media (min-width:900px){
  .lleva-g{max-width:1040px;grid-template-columns:1fr 1fr;gap:18px}
  .lv-luts .v-luts{max-width:400px}
  .lleva-mas{font-size:21px;max-width:620px}
  .perfil-ig{max-width:640px}
  .temas{max-width:1040px;grid-template-columns:repeat(3,1fr)}
  .stats-ig{max-width:960px;margin:22px auto 0;padding:0;overflow:visible;justify-content:center}
  .stat-ig{flex:0 1 300px}
}

/* el modo claro u oscuro (Kevin, 3 nov 2026: «la opción de poner modo oscuro y modo claro»). Se abre siempre oscura y el botón
   de arriba lo cambia (tema.js y app.js).
   - En oscuro, todo oscuro (escogió la A): las tres secciones que alternan (los silencios, «si grabas» y la oferta) pasan a un gris
     casi negro, con su letra clara.
   - En claro, todo claro: blanco y, en las que alternan, el gris de siempre. El amarillo no va como letra, que sobre blanco se lee
     mal: la palabra lleva la barra amarilla detrás, como en sus portadas. Lo de dentro de las cartas del pack es una pantalla: se
     queda oscuro. */
:root:not([data-tema="claro"]){color-scheme:dark}
:root:not([data-tema="claro"]) .claro{--osc:#F5F5F7;--osc2:#A1A1A6;--claro:#161617}
:root:not([data-tema="claro"]) .claro .ac{color:var(--amarillo);background:none;padding:0;margin:0}
:root:not([data-tema="claro"]) .par .pp{color:#000}
:root:not([data-tema="claro"]) .barra{background:#3A3A3C}
:root:not([data-tema="claro"]) .barra.am{background:#2C2C2E}
:root:not([data-tema="claro"]) .oferta{background:#1C1C1E;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
:root:not([data-tema="claro"]) :is(.of-cab,.incl,.lista){border-color:rgba(255,255,255,.1)}
:root:not([data-tema="claro"]) .campo{background:#2C2C2E;border-color:#3A3A3C}
:root:not([data-tema="claro"]) .campo::placeholder{color:#86868B}
:root:not([data-tema="claro"]) .campo:focus{border-color:#F5F5F7}
:root:not([data-tema="claro"]) .campo[aria-invalid="true"]{border-color:rgb(var(--rojo))}
:root:not([data-tema="claro"]) .opcion span{background:#2C2C2E;box-shadow:none}
:root:not([data-tema="claro"]) .opcion input:checked + span{background:#F5F5F7;color:#000}
:root:not([data-tema="claro"]) .lista-error{color:#FF6961}
:root:not([data-tema="claro"]) .lista-aqui{background:#1C1C1E;box-shadow:0 0 0 1px rgba(255,255,255,.07);--osc:#F5F5F7;--osc2:#A1A1A6}

:root[data-tema="claro"]{color-scheme:light;--tx:#1D1D1F;--tx2:#6E6E73;--tx3:#86868B;--tarjeta:#F5F5F7;--tarjeta2:#E8E8ED;--tarjeta3:#D2D2D7}
:root[data-tema="claro"],:root[data-tema="claro"] body{background:#fff}
:root[data-tema="claro"] :focus-visible{outline-color:var(--oro-tx)}
:root[data-tema="claro"] .ac{color:inherit;background:linear-gradient(transparent 60%,var(--amarillo) 60%,var(--amarillo) 93%,transparent 93%);
  padding:0 3px;margin:0 -3px}
:root[data-tema="claro"] .aviso-borrador{background:#F5F5F7;color:var(--oro-tx);border-bottom-color:rgba(0,0,0,.06)}
:root[data-tema="claro"] .micro .fund{color:var(--oro-tx)}
:root[data-tema="claro"] .stat-ig{box-shadow:0 0 0 1px rgba(0,0,0,.1)}
:root[data-tema="claro"] :is(.lnk,.carpeta em,.explicados .pend,.borr,.cp-cab em,.pasos3 li b){color:var(--oro-tx)}
:root[data-tema="claro"] :is(.borr,.cp-cab em){border-color:rgba(138,101,0,.4)}
:root[data-tema="claro"] .tel{background:#E8E8ED;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
:root[data-tema="claro"] .mitad{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
:root[data-tema="claro"] .mitad.suena{box-shadow:inset 0 0 0 2px var(--oro)}
:root[data-tema="claro"] .par-brillo{box-shadow:0 0 50px 0 rgba(255,212,59,.65)}
:root[data-tema="claro"] :is(.fotos .t1,.tel-fin){box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 60px -28px rgba(var(--morado),.55)}
/* mira cómo edita: las pistas */
:root[data-tema="claro"] .c-video{background:#E8E8ED}
:root[data-tema="claro"] :is(.c-voz .bar,.onda-caja i){background:#6E6E73}
:root[data-tema="claro"] .c-voz .sombra{background:rgba(255,255,255,.75)}
:root[data-tema="claro"] .carril .fuera{background:repeating-linear-gradient(135deg,rgba(var(--rojo),.55) 0 5px,rgba(255,255,255,.6) 5px 10px)}
:root[data-tema="claro"] .c-subs .blk{color:var(--tx);box-shadow:inset 0 0 0 1px #fff}
:root[data-tema="claro"] .c-efectos .mk{color:var(--oro)}
:root[data-tema="claro"] :is(.cabezal,.cabezal:before){background:var(--oro)}
:root[data-tema="claro"] .redondo{color:var(--tx)}
:root[data-tema="claro"] .segm{background:var(--tarjeta2)}
:root[data-tema="claro"] .segm button.on{background:#fff;color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* los estilos, el pack, la carta y el final */
:root[data-tema="claro"] :is(.pedido,.giro,.no-curso,.carta,.pasos3 li){color:var(--tx)}
:root[data-tema="claro"] .finder{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 30px 80px -34px rgba(var(--morado),.45)}
:root[data-tema="claro"] .finder-cab{background:#ECECEC;border-bottom-color:rgba(0,0,0,.08)}
:root[data-tema="claro"] .carpeta{color:var(--tx)}
:root[data-tema="claro"] .carpeta:hover{background:rgba(0,0,0,.05)}
:root[data-tema="claro"] .vis{--tarjeta:#1C1C1E;--tarjeta2:#2C2C2E;--tarjeta3:#3A3A3C;--tx:#F5F5F7;--tx2:#A1A1A6;--tx3:#86868B;color:var(--tx)}
:root[data-tema="claro"] .grupo .i{color:var(--oro)}
:root[data-tema="claro"] .lv{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
:root[data-tema="claro"] .lv-vis{--tarjeta:#1C1C1E;--tarjeta2:#2C2C2E;--tarjeta3:#3A3A3C;--tx:#F5F5F7;--tx2:#A1A1A6;--tx3:#86868B;color:var(--tx)}
:root[data-tema="claro"] .pie{border-top-color:rgba(0,0,0,.1)}
:root[data-tema="claro"] .barra-cta{background:rgba(255,255,255,.86);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 12px 40px rgba(0,0,0,.14)}
:root[data-tema="claro"] .aviso{background:#1D1D1F;color:#fff}

/* lo nuevo del 5 nov 2026 (tarde): la oferta sobre blanco, las tomas de los silencios, «Desde el principio» y los carruseles */
:root[data-tema="claro"] .fondo-blanco .oferta{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 30px 70px -40px rgba(0,0,0,.3)}
:root[data-tema="claro"] :is(.carpeta em.pronto,.cp-cab em.pronto){color:var(--osc2);border-color:rgba(110,110,115,.4)}
.ejemplos{margin-top:22px}
.otra-vez{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:9px 16px;border-radius:999px;font-size:15px;font-weight:500;
  background:var(--tarjeta);color:inherit}
.otra-vez .i{width:16px;height:16px}
:root[data-tema="claro"] .fondo-blanco .otra-vez{background:#F5F5F7}
/* los carruseles: la portada delante y la 2 y la 3 asomando detrás, a cada lado (Kevin, 5 nov 2026: «para dar ese efecto que es un
   carrusel y no una foto») */
.v-carruseles{display:flex;gap:46px;align-items:center;justify-content:center;padding:6px 0}
.v-carruseles .pila{position:relative;display:block;width:112px}
.v-carruseles img{display:block;width:112px;height:auto;border-radius:10px}
.v-carruseles .frente{position:relative;z-index:2;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.v-carruseles .atras{position:absolute;top:0;left:0;filter:brightness(.6);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.v-carruseles .izq{transform:translateX(-24px) rotate(-8deg) scale(.9)}
.v-carruseles .der{transform:translateX(24px) rotate(8deg) scale(.9)}
/* «Cómo grabarte»: el plan de la toma, grande */
#pieza-curso .vis{height:auto;padding:22px 0}   /* la foto entera: aquí la tarjeta crece */
.v-plan{display:flex;justify-content:center;width:100%}
.v-plan img{width:86%;max-width:300px;height:auto;border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.45)}

/* «Te lo entrega listo para subir» (el vídeo 19: un cuadro, su portada y su descripción) y «Nada se sale de los márgenes» (el
   vídeo de la guía y su portada, con la plantilla de la zona segura encima), Kevin, 5 nov 2026, noche */
.v-listo,.v-margenes{display:flex;gap:12px;justify-content:center;align-items:flex-start;padding:20px 14px}
:is(.v-listo,.v-margenes) figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
:is(.v-listo,.v-margenes) figcaption{font-size:12px;color:#A1A1A6}
.mini{position:relative;width:96px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000}
.v-margenes .mini{width:150px}   /* más grandes, para que se lean los rótulos (Kevin, 5 nov) */
.mini img{width:100%;height:100%;object-fit:cover}
.mini .play{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  display:grid;place-items:center}
.mini .play .i{width:13px;height:13px;margin-left:2px}
.mini.nota{background:#fff;padding:10px 8px;display:flex;flex-direction:column;gap:6px;text-align:left}
.mini.nota span{font-size:8.5px;line-height:1.35;color:#1D1D1F}
.mini.nota span:last-child{color:#0A58CA}
.heroe .otra-vez{margin-top:16px}
:root[data-tema="claro"] .heroe .otra-vez{background:#F5F5F7}
/* la leyenda de la plantilla, debajo de las dos fotos (Kevin, 5 nov 2026): los rótulos encima se mezclaban con los subtítulos */
.leyenda{list-style:none;margin:0;padding:0 18px 20px;display:grid;gap:7px;text-align:left;width:100%;max-width:330px}
.leyenda li{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.3;color:#D1D1D6}
.leyenda i{flex:none;width:11px;height:11px;border-radius:50%}
.leyenda .rojo{background:#FF3B30}
.leyenda .amarillo{background:var(--amarillo)}
.leyenda .linea{border-radius:3px;border:1.5px dashed #fff}
.v-margenes{padding-bottom:14px}

/* la comunidad de compradores (5 nov 2026): sus canales y una duda con su respuesta, como en Discord */
.v-comunidad{display:flex;gap:10px;width:310px;height:170px;background:#1C1C1E;border-radius:16px;padding:10px;text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.v-comunidad .canales{list-style:none;margin:0;padding:0 8px 0 0;width:122px;border-right:1px solid #2C2C2E;font-size:11.5px;color:#A1A1A6}
.v-comunidad .canales li{padding:4px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-comunidad .canales li b{margin-right:3px;color:#6E6E73}
.v-comunidad .canales li.on{background:#2C2C2E;color:#F5F5F7}
.v-comunidad .canales .srv{font-weight:700;color:#F5F5F7;padding-bottom:7px;white-space:normal;line-height:1.25}
.v-comunidad .hilo{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}
.v-comunidad .m{display:flex;gap:7px;margin:0;font-size:11px;line-height:1.35;color:#C7C7CC}
.v-comunidad .m i{flex:none;width:22px;height:22px;border-radius:50%}
.v-comunidad .m b{display:block;font-size:11px;color:#F5F5F7;margin-bottom:1px}

/* las portadas escogidas el 5 nov 2026 (la A de cada una): Tu marca con más chat, Copia el estilo con el chat del enlace y Tu propio
   ManyChat con el camino entero. Las de chat crecen con su conversación */
#pieza-marca .vis,#pieza-copia .vis{height:auto;padding:22px 0}
.v-copia .link{align-self:flex-end;background:var(--amarillo);color:#000;font-size:12.5px;font-weight:600;border-bottom-right-radius:5px}
.v-copia .p{max-width:86%}
.v-copia .ok{align-self:center;margin-top:4px;font-size:12.5px;font-weight:700;color:#000;background:var(--amarillo);border-radius:999px;
  padding:5px 12px}
/* «Tu propio ManyChat»: un privado de verdad de Instagram, en oscuro (la B, 5 nov 2026). El aviso y los textos, los de su automatización */
#pieza-manychat .vis{height:auto;padding:20px 0}
.v-ig{width:300px;background:#000;border-radius:22px;overflow:hidden;text-align:left;color:#F5F5F5;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.45);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.v-ig svg{display:block}
.v-ig .av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.ig-cab{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #262626}
.ig-cab .ic svg{width:20px;height:20px}
.ig-cab .av{width:32px;height:32px}
.ig-cab .quien{flex:1;min-width:0;line-height:1.2}
.ig-cab .quien b{display:flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600}
.ig-cab .quien b svg{width:13px;height:13px}
.ig-cab .quien small{display:block;font-size:11px;color:#A8A8A8}
.ig-cab .ics{display:flex;gap:14px}
.ig-cab .ics svg{width:21px;height:21px}
.ig-hilo{display:flex;flex-direction:column;gap:8px;padding:4px 10px 12px}
.v-ig .ig-aviso{margin:10px 8px 4px;font-size:10.5px;line-height:1.4;color:#A8A8A8;text-align:center}   /* no «.aviso»: es el del aviso flotante */
.v-ig .ig-aviso b{color:#4CB5F9;font-weight:600}
.ig-hilo .msg{display:flex;align-items:flex-end;gap:6px}
.ig-hilo .burbujas{display:flex;flex-direction:column;max-width:214px;border:1px solid #262626;border-radius:18px;overflow:hidden}
.ig-hilo .burbuja{background:#262626;padding:8px 12px;font-size:12px;line-height:1.38}
.ig-hilo .boton{padding:8px 12px;font-size:12px;font-weight:600;text-align:center;border-top:1px solid #363636}
.ig-hilo .yo{display:flex;justify-content:flex-end}
.ig-hilo .yo span{background:linear-gradient(135deg,#7638FA,#3797F0);color:#fff;border-radius:18px;padding:7px 12px;font-size:12px}
.ig-escribir{display:flex;align-items:center;gap:8px;margin:0 10px 10px;padding:5px 12px 5px 5px;background:#262626;border-radius:22px}
.ig-escribir .cam{width:28px;height:28px;border-radius:50%;background:#3797F0;display:grid;place-items:center;flex:none}
.ig-escribir .cam svg{width:16px;height:16px}
.ig-escribir .ph{flex:1;font-size:12.5px;color:#A8A8A8}
.ig-escribir .ics{display:flex;gap:12px}
.ig-escribir .ics svg{width:19px;height:19px}

/* «Los efectos de sonido» de arriba (la A, 5 nov 2026): los primeros 15 s del 19 en una línea de tiempo (los cuadros, la voz y cada sonido
   donde cae de verdad) y un cabezal que la recorre y enciende cada sonido al pasar. El cabezal da la vuelta en --dur; cada sonido se
   enciende a los --x × --dur de cada vuelta */
.v-linea{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 30px 24px;gap:8px 8px;align-items:center;
  width:calc(100% - 36px);max-width:340px;position:relative;padding:4px 0}
.v-linea .et{font-size:10.5px;font-weight:600;color:var(--tx3)}
.v-linea .p-video img{display:block;width:100%;aspect-ratio:360/107;object-fit:cover;border-radius:7px}
.v-linea .p-voz{height:30px}
.v-linea .p-voz svg{width:100%;height:100%;fill:#7D79FF}
.v-linea .p-son{position:relative;height:24px}
.v-linea .blq{position:absolute;top:0;bottom:0;left:calc(var(--x) * 100%);transform:translateX(-50%);display:grid;place-items:center;
  padding:0 7px;border-radius:6px;font-size:10px;font-weight:800;white-space:nowrap;
  animation:blq var(--dur) linear infinite;animation-delay:calc(var(--x) * var(--dur))}
/* los cuatro barridos, un bloque con una marca por cada uno, donde cae, que se enciende al pasar el cabezal */
.v-linea .blq.barridos{left:calc(var(--x0) * 100% - 6px);width:calc((var(--x1) - var(--x0)) * 100% + 12px);transform:none;animation:none;
  place-items:start center;padding:4px 0 0;line-height:1}
.v-linea .blq.barridos i{position:absolute;bottom:3px;left:calc(6px + var(--r) * (100% - 12px));width:2px;height:5px;margin-left:-1px;
  border-radius:1px;background:rgba(255,255,255,.55);animation:tic var(--dur) linear infinite;animation-delay:calc(var(--x) * var(--dur))}
@keyframes tic{0%{background:var(--amarillo);transform:scaleY(1.9);box-shadow:0 0 8px var(--amarillo)}
  16%{background:rgba(255,255,255,.55);transform:none;box-shadow:none}}
.v-linea .blq.am{background:var(--amarillo);color:#000}
.v-linea .blq.mo{background:#7C3AED;color:#fff}
.v-linea .blq.bl{background:#F5F5F7;color:#000}
@keyframes blq{0%{transform:translateX(-50%) scale(1.3);filter:brightness(1.35);box-shadow:0 0 16px rgba(255,212,59,.85)}
  12%{transform:translateX(-50%) scale(1);filter:none;box-shadow:none}100%{transform:translateX(-50%) scale(1)}}
/* cada pieza en su sitio (con la capa del cabezal colocada a mano, las demás se iban a la primera columna) */
.v-linea>:nth-child(1){grid-area:1/1}.v-linea>:nth-child(2){grid-area:1/2}.v-linea>:nth-child(3){grid-area:2/1}
.v-linea>:nth-child(4){grid-area:2/2}.v-linea>:nth-child(5){grid-area:3/1}.v-linea>:nth-child(6){grid-area:3/2}
.v-linea .capa{grid-area:1/2/4/3;align-self:stretch;position:relative;pointer-events:none}
.v-linea .cabezal{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;margin-left:-1px;background:var(--amarillo);border-radius:2px;
  box-shadow:0 0 10px rgba(255,212,59,.9);animation:cabezal var(--dur) linear infinite}
.v-linea .cabezal:before{content:'';position:absolute;top:-2px;left:-5px;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--amarillo)}
@keyframes cabezal{from{left:0}to{left:100%}}
@media (prefers-reduced-motion:reduce){.v-linea .blq,.v-linea .blq.barridos i,.v-linea .cabezal{animation:none}.v-linea .cabezal{left:22%}}