/* Layout: póster vertical de Canva, secciones centradas sobre violeta noche con cintas gruesas de fondo */
.disp{font-family:var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 72;font-weight:800;letter-spacing:-.01em}
h1,h2,h3{text-wrap:balance}
a{color:inherit}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:6px}

.page{overflow-x:hidden;overflow-x:clip;position:relative}
section{position:relative;padding-inline:16px}
.wrap{position:relative;z-index:2;max-width:1120px;margin-inline:auto}
.deco{position:absolute;z-index:1;pointer-events:none}

/* cintas de fondo: un solo SVG para toda la página */
.cintas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.cintas path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cintas .atras{stroke:var(--trazo-dim);stroke-width:64px}
.cintas .adelante{stroke:var(--trazo);stroke-width:58px}
/* cierre: lila y blanco, anclados al pie de la página */
.final{position:absolute;bottom:0;z-index:1;pointer-events:none;height:auto;display:block}
.final path{fill:none;stroke-linecap:round}
.final-izq{left:0;width:clamp(230px,40vw,600px)}
.final-der{right:0;width:clamp(220px,38vw,560px)}

.sec-title{color:var(--lima);text-align:center;font-size:clamp(34px,5.2vw,58px);line-height:1.05}
.sec-sub{color:var(--blanco);text-align:center;max-width:36ch;margin:14px auto 0;font-size:clamp(16px,1.8vw,19px);opacity:.92}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(56px,9vw,110px) clamp(56px,8vw,96px)}
.hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-par,.hero-in{display:block;transform-origin:50% 80%}
.hero-logo{width:min(330px,62vw);height:auto;display:block;animation:sacudon 3.2s ease-in-out infinite;transform-origin:50% 80%}
.wordmark{font-size:clamp(76px,15vw,168px);line-height:.9;color:var(--blanco);margin-top:-6px}
.wordmark .w,.wordmark .dot{display:inline-block}
.wordmark .dot{color:var(--lima)}
.hero-pitch{margin-top:26px;font-size:clamp(18px,2.2vw,23px);max-width:30ch;color:var(--blanco)}
.hero-pitch b{color:var(--lima);font-weight:800}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.pronto{margin-top:14px;font-size:13px;font-weight:800;color:var(--tinta);background:var(--lima);border-radius:999px;padding:6px 12px}
.hero-tag{margin-top:22px;font-size:14px;color:var(--suave);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
/* el JS esconde el hero solo para hacer la entrada; si GSAP no carga, saca la clase .js */
@media (prefers-reduced-motion:no-preference){
  .js .hero-in,.js .wordmark .w,.js .wordmark .dot,.js .hero-pitch,.js .ctas,.js .hero-tag,.js .pronto{opacity:0;animation:failsafe 0s 4s forwards}
}

/* ---------- POR QUÉ ---------- */
.porque{padding-block:40px clamp(70px,9vw,110px)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,36px) clamp(16px,2.6vw,32px);margin-top:clamp(36px,5vw,56px)}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0}
.tile-box{width:100%;aspect-ratio:1.7/1;max-width:100%;border-radius:clamp(22px,3vw,34px);display:grid;place-items:center}
.tile:hover .tile-box svg{transform:scale(1.07)}
.tile-box svg{height:72%;width:auto;display:block;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.c-ciruela{background:var(--ciruela)}
.c-violeta{background:var(--violeta)}
.c-sol{background:var(--sol)}
.tile h3{color:var(--lima);font-size:clamp(19px,1.9vw,22px);line-height:1.15}
.tile p.d{color:var(--suave);font-size:15px;line-height:1.45;max-width:24ch}

/* ---------- CRONOGRAMA ---------- */
.crono{padding-block:clamp(40px,5vw,64px);overflow-x:clip}
.tl{position:relative;margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(12px,2vw,26px);row-gap:56px;--lineY:46px}
.tl-line{position:absolute;left:50%;width:100vw;margin-left:-50vw;top:var(--lineY);height:0;border-top:4px dashed var(--guion);z-index:0}
.star{grid-row:1;grid-column:var(--c);justify-self:center;width:84px;height:92px;position:relative;z-index:2;display:grid;place-items:center}
.star svg{width:84px;height:84px;display:block}
.card{grid-row:2;grid-column:var(--c);align-self:start;position:relative;z-index:2;margin-top:var(--drop,0px)}
.cb{position:relative;border-radius:28px;padding:30px 14px 14px;background:var(--marco)}
/* flecha: baja desde la estrella y termina 4px arriba de la etiqueta, siempre por debajo de ella */
.arrow{position:absolute;left:50%;bottom:calc(100% + 21px);width:16px;margin-left:-8px;height:calc(41px + var(--drop,0px));z-index:0;transform-origin:50% 0;pointer-events:none}
.arrow::before{content:"";position:absolute;left:50%;top:0;bottom:8px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--guion)}
.arrow::after{content:"";position:absolute;left:50%;bottom:0;margin-left:-7px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--guion)}
.chip{position:absolute;z-index:2;top:-17px;left:50%;transform:translateX(-50%);background:#F6B3F6;color:var(--violeta);font:800 15px/1 var(--f-display);font-variation-settings:"SOFT" 100;letter-spacing:.04em;padding:9px 14px 8px;border-radius:10px;white-space:nowrap}
.card-in{background:var(--blanco);color:var(--tinta);border-radius:18px;padding:16px 14px 18px;text-align:center;min-height:150px}
.card-in h3{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-weight:800;font-size:19px;line-height:1.15;margin-bottom:8px;color:var(--violeta)}
.card-in p{font-size:15px;line-height:1.4}
.m-rosa{--marco:var(--rosa-card)}.m-lav{--marco:var(--lav-borde)}.m-sol{--marco:var(--sol)}

.runner{position:absolute;z-index:3;width:var(--rw);--rw:230px;left:calc(var(--rw) * -.5);top:calc(var(--lineY) - var(--rw) * .315);pointer-events:none;will-change:transform}
.runner-in{position:relative}
.runner img{width:100%;height:auto;display:block}
.runner .r-anim{position:absolute;inset:0;visibility:hidden}
.runner.moving .r-anim{visibility:visible}
.runner.moving .r-still{visibility:hidden}
.runner.back .runner-in{transform:scaleX(-1)}

/* ---------- DATOS ---------- */
.datos{padding-block:clamp(56px,7vw,90px)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4.5vw,52px)}
.stat{background:var(--noche-2);border-radius:34px;padding:clamp(22px,2.6vw,30px);box-shadow:inset 0 0 0 2px var(--trazo-dim);min-width:0}
.stat-k{display:inline-block;font:800 13px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);padding:7px 11px;border-radius:999px}
.k-rosa{background:var(--chicle)}.k-lav{background:var(--lav-borde)}.k-verde{background:var(--verde-card)}
.stat-n{margin-top:14px;color:var(--lima);font-size:clamp(84px,10vw,136px);line-height:.88;font-variant-numeric:tabular-nums}
.stat-n .num{display:inline-block;transform-origin:0 80%}
.stat-u{margin-top:10px;font-weight:800;font-size:clamp(17px,1.7vw,19px);line-height:1.3}
.stat-c{margin-top:10px;color:var(--suave);font-size:15px;line-height:1.45}

.remate{margin-top:clamp(14px,2vw,24px);background:var(--lav-card);color:var(--tinta);border-radius:40px;padding:clamp(26px,4vw,48px) clamp(20px,4.5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(22px,4vw,56px);align-items:center}
.remate h3{font-size:clamp(28px,3.4vw,42px);line-height:1.1;color:var(--violeta)}
.remate h3 em{font-style:normal;color:var(--tinta);background:var(--sol);border-radius:.25em;padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.remate .txt p{margin-top:16px;font-size:clamp(16px,1.6vw,18px);line-height:1.5}
.remate .fine{font-size:13px;line-height:1.4;color:#5D4F78;margin-top:14px}
.cuenta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cuenta strong{font-size:clamp(56px,6.4vw,84px);line-height:.9;color:var(--violeta);font-variant-numeric:tabular-nums}
.cuenta .u{font-weight:800;font-size:18px}
.cuenta .hm{width:100%;font-size:15px;color:#5D4F78;font-variant-numeric:tabular-nums}
.dias{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.track{position:relative;height:26px;border-radius:999px;background:var(--blanco);box-shadow:inset 0 0 0 2px var(--lav-borde)}
.fill{position:absolute;left:3px;top:3px;bottom:3px;border-radius:999px;transform-origin:0 50%}
.f1{right:3px;background:var(--violeta)}
.f2{width:calc((100% - 6px) * .944);background:var(--fucsia)}
.taza{position:absolute;top:50%;left:94.4%;width:44px;height:44px;margin:-22px 0 0 -22px}
.dl{display:flex;justify-content:space-between;gap:6px;margin-top:8px;font-size:14px;font-weight:700;color:#5D4F78}
.dl b{color:var(--tinta);font-variant-numeric:tabular-nums}

/* ---------- ASÍ SE VE ---------- */
.proto{padding-block:clamp(56px,7vw,90px)}
.protos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(30px,4vw,48px)}
.pcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.pill{border-radius:999px;text-align:center;padding:14px 10px;font-size:clamp(22px,2.5vw,30px);line-height:1;color:var(--blanco)}
.pcard{border-radius:34px;padding:16px 16px 26px;color:var(--tinta);flex:1}
.pcard p{font-size:15px;text-align:center;margin-top:16px;padding-inline:6px;line-height:1.45}
.screen{border-radius:24px;background:var(--pantalla);color:var(--blanco);padding:16px 14px;min-height:262px;font-family:var(--f-body);display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 0 rgba(24,4,44,.12)}
.scr-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--apagado);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.scr-pts{background:var(--lima);color:var(--tinta);border-radius:999px;padding:3px 9px;font-size:12px;letter-spacing:0}
.rw{display:flex;gap:10px;align-items:center;background:var(--pantalla-2);border-radius:14px;padding:10px}
.rw .em{width:38px;height:38px;border-radius:10px;background:var(--pantalla-3);display:grid;place-items:center;flex:none}
.rw .em svg{width:26px;height:26px;display:block}
.rw .tx{min-width:0;flex:1}
.rw .tx b{display:block;font-size:14px;line-height:1.2}
.rw .tx span{font-size:12px;color:var(--apagado)}
.rw .go{font-size:12px;font-weight:800;background:var(--lima);color:var(--tinta);border-radius:999px;padding:6px 10px;flex:none}
.rw .go.off{background:var(--pantalla-3);color:var(--apagado)}
.rw.tuyo{box-shadow:inset 0 0 0 2px var(--lima)}
.qrbox{background:var(--blanco);border-radius:16px;padding:12px;align-self:center;width:62%;max-width:170px}
.qrbox canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
.code{text-align:center;font:800 18px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em}
.code span{color:var(--apagado)}
.unuso{text-align:center;font-size:12px;font-weight:700;color:var(--apagado)}
.vbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vbtns span{border-radius:12px;padding:10px 6px;font-size:13px;font-weight:800;text-align:center}
.vbtns .no{box-shadow:inset 0 0 0 1.5px var(--lima);color:var(--lima)}
.vbtns .si{background:var(--lima);color:var(--tinta)}
.c-lav{background:var(--lav-card)}.c-verde{background:var(--verde-card)}.c-rosa{background:var(--rosa-card)}
.p-ciruela{background:var(--ciruela)}.p-violeta{background:var(--violeta)}.p-fucsia{background:var(--fucsia)}

/* ---------- CIERRE ---------- */
.cierre{padding-block:clamp(56px,7vw,90px) clamp(120px,15vw,180px)}
.caja{position:relative;max-width:700px;margin:clamp(30px,4vw,44px) auto 0;background:var(--blanco);color:var(--tinta);border-radius:40px;padding:clamp(28px,4vw,46px) clamp(22px,5vw,60px);text-align:center}
.caja>p{font-size:clamp(18px,2vw,22px);line-height:1.45}
.contacto{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:12px}
.mail{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;background:#F3EEFB;border-radius:999px;padding:6px 6px 6px 18px;max-width:100%}
.mail span{font-weight:800;font-size:16px;user-select:all;overflow-wrap:anywhere;color:var(--violeta)}
.mail button{font:800 14px/1 var(--f-body);border:0;border-radius:999px;background:var(--violeta);color:var(--blanco);padding:10px 14px;cursor:pointer}
.botones{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin-top:4px}
.btn-wa{background:var(--verde-card);color:var(--tinta);box-shadow:0 6px 0 #B5CF8A}
.btn-wa:active{transform:translateY(3px)}
.cierre .chico{font-size:14px;color:#5D4F78}
footer{text-align:center;padding:26px 16px 34px;color:var(--suave);font-size:14px;position:relative;z-index:2}
footer b{font-family:var(--f-display);font-variation-settings:"SOFT" 100;color:var(--blanco);font-size:18px}
footer b span{color:var(--lima)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .protos{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
  .stats{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .remate{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
}
@media (max-width:760px){
  .cintas .atras{stroke-width:38px}
  .cintas .adelante{stroke-width:34px}
  .tl{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:4px;row-gap:16px;--lineY:30px}
  .star{width:56px;height:62px}.star svg{width:52px;height:52px}
  .card{grid-column:1/-1;grid-row:auto;margin-top:12px;max-width:440px;width:100%;justify-self:center}
  .cb{padding:26px 10px 10px}
  .arrow{display:none}
  .card-in{min-height:0}
  .runner{--rw:140px}
  footer{padding:26px 92px 120px}
  /* con JS: las 5 tarjetas comparten lugar y se van apilando mientras corre el chico */
  .tl.deck .card{grid-row:2;margin-top:12px}
  .tl.deck .card-in{min-height:132px}
  .stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:end}
  .stat-k{grid-column:1/-1;justify-self:start}
  .stat-n{grid-row:2;font-size:clamp(76px,22vw,104px)}
  .stat-u{grid-row:2;align-self:end;margin-bottom:6px}
  .stat-c{grid-column:1/-1}
}
@media (max-width:420px){
  .tiles{gap:22px 12px}
  .tile p.d{font-size:14px}
  .remate{border-radius:32px}
  .taza{width:36px;height:36px;margin:-18px 0 0 -18px}
}
@media (prefers-reduced-motion:reduce){
  .hero-logo{animation:none}
}

/* ---------- POSICIONES (decoración, columnas del cronograma) ---------- */
.d-hero{right:-30px;bottom:-40px;width:150px}
.d-porque{right:2%;top:14px;width:clamp(70px,9vw,130px)}
.d-datos{left:-14px;top:30px;width:clamp(60px,7vw,100px)}
.d-proto-izq{left:-10px;top:30px;width:clamp(70px,9vw,120px)}
.d-proto-der{right:0;top:56px;width:clamp(70px,9vw,120px)}
.d-caja-1{left:44px;top:-34px;width:62px}
.d-caja-2{right:90px;bottom:-40px;width:80px}
.col-1{--c:1}
.col-2{--c:2}
.col-3{--c:3}
.col-4{--c:4}
.col-5{--c:5}
.baja{--drop:96px}
.panel-nombre{font-size:18px;margin-top:-6px}
.scr-hist{margin-top:2px}