/* ==========================================================================
   ArmiNutrition · Armi Challenge
   Paleta: BLANCO predominante · LAVA (secundario, sutil) · NEGRO (acentos)
   ========================================================================== */

:root{
  /* 1 · Blanco — predomina */
  --blanco:#ffffff;
  --hueso:#f6f5f3;
  --niebla:#eceae7;

  /* 2 · Lava — secundario, anaranjado, usado con moderación */
  --lava:#e02b22;
  --lava-hover:#c4241c;
  --lava-tinte:rgba(224,43,34,.08);

  /* 3 · Negro — acentos */
  --negro:#000000;
  --tinta:#1c1a19;      /* texto principal: grafito, no negro puro */
  --texto:#454140;
  --gris:#8e8987;
  --linea:#e3e0dc;
  --linea-oscura:#242220;

  --fuente:"Archivo","Helvetica Neue",Arial,sans-serif;
  --marco:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:74px}
body{background:var(--blanco);color:var(--tinta);font-family:var(--fuente);font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:16px}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--lava);color:#fff}
:focus-visible{outline:2px solid var(--lava);outline-offset:3px}

/* ---------- tipografía ---------- */
.kicker{font-size:12.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gris)}
.kicker .n{color:var(--lava)}
.display{font-weight:200;letter-spacing:-.035em;line-height:.94;font-size:clamp(2.7rem,7.6vw,6.9rem)}
.display strong{font-weight:600}
.display b{font-weight:700;letter-spacing:-.042em}
.h2{font-weight:200;letter-spacing:-.028em;line-height:1.04;font-size:clamp(1.9rem,4.4vw,3.6rem)}
.h3{font-weight:300;letter-spacing:-.018em;line-height:1.2;font-size:clamp(1.15rem,2vw,1.5rem)}
.cuerpo{font-size:clamp(1.06rem,1.25vw,1.2rem);line-height:1.8;color:var(--texto);font-weight:300}
.cuerpo + .cuerpo{margin-top:1.5em}
.destacado{font-size:clamp(1.32rem,2.5vw,1.85rem);line-height:1.5;color:var(--tinta);
  font-weight:200;letter-spacing:-.018em}
.acento{color:var(--lava)}
.regla{height:1px;background:var(--linea);border:0}
.mt-s{margin-top:20px}.mt-m{margin-top:34px}.mt-l{margin-top:56px}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:14px var(--marco);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--linea);transition:background .4s var(--ease),border-color .4s var(--ease)}
nav .marca{justify-self:start;display:flex;align-items:center;line-height:0}
nav .logo{height:48px;width:auto;transition:opacity .3s var(--ease)}

/* pestañas "invisibles": sin casillas, centradas, con guía fina */
.tabs{justify-self:center;display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.tabs a{position:relative;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;color:var(--gris);font-weight:500;padding:8px 0;
  transition:color .35s var(--ease);white-space:nowrap;background:none;border:0}
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.tabs a:hover{color:var(--tinta)}
.tabs a[aria-current="true"]{color:var(--tinta)}
.tabs a[aria-current="true"]::after{transform:scaleX(1)}
.tabs .sep{width:1px;height:11px;background:var(--linea);flex:0 0 auto}

/* enlace a la app, a la derecha */
.nav-app{justify-self:end;display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  text-decoration:none;color:var(--gris);transition:color .35s var(--ease);white-space:nowrap}
.nav-app:hover{color:var(--lava)}
.nav-app svg{width:14px;height:14px;flex:0 0 auto}

/* nav sobre fondo negro */
nav.oscuro{background:rgba(6,6,6,.82);border-bottom-color:var(--linea-oscura)}
nav.oscuro .tabs a{color:#7a7472}
nav.oscuro .tabs a:hover,nav.oscuro .tabs a[aria-current="true"]{color:#fff}
nav.oscuro .tabs .sep{background:#33302e}
nav.oscuro .nav-app{color:#7a7472}
nav.oscuro .nav-app:hover{color:var(--lava)}

@media(max-width:1080px){ .nav-app span{display:none} }
@media(max-width:860px){
  nav{grid-template-columns:auto 1fr;row-gap:0}
  .nav-app{display:none}
  .tabs{justify-self:end;gap:clamp(14px,4vw,26px)}
}
@media(max-width:560px){
  nav{padding:12px 20px}
  nav .logo{height:38px}
  .tabs a{font-size:10px;letter-spacing:.18em}
}
@media(max-width:360px){
  nav .logo{height:32px}
  .tabs{gap:13px}
  .tabs a{font-size:9.5px;letter-spacing:.14em}
}

/* ---------- estructura ---------- */
section{padding:clamp(76px,12vh,142px) var(--marco);position:relative}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(28px,6vw,104px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
@media(max-width:880px){.grid,.grid-2{grid-template-columns:1fr;gap:32px}}

/* ---------- hero ---------- */
.hero{min-height:94vh;display:flex;flex-direction:column;justify-content:center;padding-top:140px}
.hero .display{max-width:15ch}
.meta{display:flex;gap:clamp(22px,4.5vw,60px);flex-wrap:wrap;margin-top:52px;
  padding-top:24px;border-top:1px solid var(--linea)}
.meta div{min-width:118px}
.meta span{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);margin-bottom:9px}
.meta b{font-weight:300;font-size:1.16rem;letter-spacing:-.012em}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:13px;text-decoration:none;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding:18px 32px;border:1px solid var(--tinta);color:var(--tinta);
  transition:.35s var(--ease);background:transparent;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--tinta);color:#fff}
.btn .fl{transition:transform .35s var(--ease)}
.btn:hover .fl{transform:translateX(5px)}
.btn.lava{border-color:var(--lava);background:var(--lava);color:#fff}
.btn.lava:hover{background:var(--lava-hover);border-color:var(--lava-hover);color:#fff}
.btn.fantasma{border-color:var(--linea);color:var(--texto)}
.btn.fantasma:hover{border-color:var(--tinta);background:var(--tinta);color:#fff}
.btn.chico{padding:14px 24px;font-size:11px}

/* ---------- bloques oscuros (acento negro) ---------- */
.oscuro{background:var(--negro);color:#fff}
.oscuro .cuerpo{color:#a7a2a0}
.oscuro .destacado{color:#fff}
.oscuro .regla{background:var(--linea-oscura)}
.oscuro .meta{border-color:var(--linea-oscura)}
.oscuro .kicker{color:#7a7472}
.oscuro .h2,.oscuro .h3{color:#fff}
.oscuro .btn{color:#fff;border-color:#3a3634}
.oscuro .btn:hover{background:#fff;color:var(--negro);border-color:#fff}
.oscuro .btn.lava{border-color:var(--lava);background:var(--lava)}
.oscuro .btn.lava:hover{background:var(--lava-hover);border-color:var(--lava-hover);color:#fff}

/* ---------- puente entre ventanas ---------- */
.puente{background:var(--negro);color:#fff;padding:clamp(64px,11vh,120px) var(--marco);
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.puente .logo-puente{height:clamp(46px,7vw,78px);width:auto;margin-bottom:22px}

/* ---------- historia ---------- */
.cita{font-weight:200;letter-spacing:-.02em;line-height:1.42;
  font-size:clamp(1.35rem,2.7vw,2.05rem);color:var(--tinta)}

/* ---------- misión / visión ---------- */
.precepto{padding:44px 0;border-top:1px solid var(--linea)}
.precepto:last-child{border-bottom:1px solid var(--linea)}

/* ---------- carrusel de transformaciones ---------- */
.riel-wrap{position:relative;margin-top:48px}
.riel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:18px;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.riel::-webkit-scrollbar{display:none}
.riel.agarrando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.riel > *{scroll-snap-align:start;flex:0 0 auto}
/* altura fija, ancho automático: acepta 16:9 y 1:1 sin deformar */
.riel .tarjeta img{height:clamp(280px,42vw,460px);width:auto;object-fit:cover;
  background:var(--hueso);user-select:none;-webkit-user-drag:none}
.riel .tarjeta{position:relative;background:var(--hueso);border:1px solid var(--linea)}
.riel-ctrl{display:flex;gap:8px;margin-top:22px}
.flecha{width:46px;height:46px;border:1px solid var(--linea);background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:.3s var(--ease);color:var(--tinta);font-size:15px;line-height:1}
.flecha:hover:not(:disabled){background:var(--tinta);color:#fff;border-color:var(--tinta)}
.flecha:disabled{opacity:.28;cursor:default}
.oscuro .flecha{border-color:#33302e;color:#fff}
.oscuro .flecha:hover:not(:disabled){background:#fff;color:var(--negro);border-color:#fff}

/* ---------- video ---------- */
.video-marco{position:relative;background:var(--hueso);overflow:hidden;border:1px solid var(--linea)}
.oscuro .video-marco{background:#111;border-color:var(--linea-oscura)}
.video-marco video{width:100%;height:100%;object-fit:cover;display:block}
.video-marco.v169{aspect-ratio:16/9}
.video-marco.v916{aspect-ratio:9/16}
.video-marco .cartel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border:0;padding:0;background:none;cursor:pointer;display:block;text-align:left;font-family:inherit}
.video-marco .cartel img{width:100%;height:100%;object-fit:cover}
.video-marco .velo{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.88) 100%);pointer-events:none}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);border-radius:50%;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  transition:.35s var(--ease);pointer-events:none}
.cartel:hover .play{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.play::after{content:"";border-left:14px solid var(--lava);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:5px}
.video-pie{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;color:#fff;
  pointer-events:none;z-index:2}
.video-pie .t{display:block;font-size:15px;font-weight:500;letter-spacing:-.005em}
.video-pie .n{display:block;font-size:12.5px;color:rgba(255,255,255,.78);margin-top:4px;letter-spacing:.02em}

/* rejilla de videos del reto */
.videos-reto{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.videos-reto{grid-template-columns:1fr}}

/* testimonios verticales */
.testimonios{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:820px){.testimonios{grid-template-columns:1fr;max-width:420px}}

/* ---------- hero del challenge ---------- */
}

/* ---------- premios ---------- */
.premios{border-top:1px solid var(--linea-oscura);margin-top:36px}
.premio{display:grid;grid-template-columns:88px 1fr auto;gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:28px 0;border-bottom:1px solid var(--linea-oscura)}
@media(max-width:620px){.premio{grid-template-columns:66px 1fr;row-gap:6px}
  .premio .tipo{grid-column:2;text-align:left}}
.premio .pos{font-size:12.5px;letter-spacing:.2em;color:#8a8482;font-weight:500}
.premio .que{font-weight:200;font-size:clamp(1.3rem,2.8vw,2.2rem);letter-spacing:-.022em;color:#fff}
.premio .tipo{font-size:12px;letter-spacing:.16em;color:#8a8482;text-align:right;text-transform:uppercase}
.premio.destacado .pos{color:var(--lava)}

/* ---------- fases de precio ---------- */
.fases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:44px}
@media(max-width:780px){.fases{grid-template-columns:1fr}}
.fase{background:var(--blanco);padding:36px 28px;display:flex;flex-direction:column}
.fase.abierta{background:var(--negro);color:#fff}
.fase.abierta .kicker{color:var(--lava)}
.fase.abierta .lugares{color:#8e8987}
.fase .precio{font-weight:200;font-size:clamp(1.9rem,3.4vw,2.75rem);letter-spacing:-.032em;
  margin:16px 0 6px}
.fase .lugares{font-size:13.5px;color:var(--gris);letter-spacing:.04em}
.fase .btn{margin-top:26px;align-self:flex-start}

/* ---------- criterios ---------- */
.criterio{display:grid;grid-template-columns:96px 1fr;gap:clamp(16px,3vw,40px);
  padding:30px 0;border-bottom:1px solid var(--linea);align-items:start}
@media(max-width:620px){.criterio{grid-template-columns:1fr;gap:10px}}
.criterio .pct{font-weight:200;font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.03em;
  color:var(--lava);line-height:1}
.criterio .pct sup{font-size:.44em;vertical-align:super;letter-spacing:0}
.criterio h4{font-weight:400;font-size:1.22rem;letter-spacing:-.014em;margin-bottom:9px}
.criterio p{font-size:1.04rem;line-height:1.68;color:var(--texto);font-weight:300}

/* ---------- listas ---------- */
.lista{list-style:none;margin-top:26px}
.lista li{padding:17px 0 17px 28px;border-bottom:1px solid var(--linea);position:relative;
  font-size:1.09rem;line-height:1.66;color:var(--texto);font-weight:300}
.lista li::before{content:"";position:absolute;left:0;top:25px;width:9px;height:1px;background:var(--lava)}
.oscuro .lista li{border-color:var(--linea-oscura);color:#a7a2a0}

/* ---------- incluye ---------- */
.incluye{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:44px}
@media(max-width:700px){.incluye{grid-template-columns:1fr}}
.incluye > div{background:var(--blanco);padding:36px 30px}
.incluye h4{font-weight:400;font-size:1.3rem;letter-spacing:-.016em;margin-bottom:13px}
.incluye h4 span{color:var(--lava);font-size:12px;letter-spacing:.2em;display:block;
  margin-bottom:10px;font-weight:500;text-transform:uppercase}
.incluye p{font-size:1.05rem;line-height:1.72;color:var(--texto);font-weight:300}

/* ---------- flyer ---------- */
.flyer{border:1px solid var(--linea-oscura);background:#111}

/* ---------- CTA final ---------- */
.cta{text-align:center;padding-left:var(--marco);padding-right:var(--marco)}
.cta .display{max-width:20ch;margin:22px auto 0}
.cta .btn{margin-top:44px}

/* ---------- footer ---------- */
footer{background:var(--negro);color:#fff;padding:clamp(60px,9vh,96px) var(--marco) 40px}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:52px;border-bottom:1px solid var(--linea-oscura)}
@media(max-width:780px){.pie-grid{grid-template-columns:1fr;gap:34px}}
.pie-grid .logo{height:34px;width:auto;margin-bottom:20px}
.pie-grid h5{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#7a7472;margin-bottom:18px;font-weight:500}
.pie-grid a{display:block;text-decoration:none;color:#c4bfbd;font-size:1.05rem;
  padding:9px 0;transition:.25s var(--ease);font-weight:300}
.pie-grid a:hover{color:var(--lava)}
.pie-abajo{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-top:28px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#5c5754}

/* ---------- WhatsApp flotante ---------- */
.wa-flota{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:90;
  display:inline-flex;align-items:center;gap:11px;background:var(--negro);color:#fff;
  text-decoration:none;padding:14px 20px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;
  transform:translateY(120%);opacity:0;transition:.45s var(--ease);pointer-events:none}
.wa-flota.vista{transform:translateY(0);opacity:1;pointer-events:auto}
.wa-flota:hover{background:var(--lava)}
.wa-flota svg{width:16px;height:16px;flex-shrink:0}
@media(max-width:520px){.wa-flota span{display:none}
  .wa-flota{padding:15px;border-radius:0}}

/* ---------- aparición al hacer scroll ---------- */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   HERO · columna izquierda con peso + teléfono pegajoso que gira
   ========================================================================== */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;gap:clamp(24px,4vw,72px);
  padding-top:clamp(150px,19vh,200px);padding-bottom:clamp(60px,9vh,110px)}
.hero .display{max-width:12ch;font-size:clamp(3.1rem,8vw,7.2rem)}
.hero .entrada{min-height:calc(100vh - 200px);display:flex;flex-direction:column;
  justify-content:center}

/* los pilares le dan cuerpo a la columna y recorrido al giro */
.pilares{margin-top:clamp(60px,10vh,120px);border-top:1px solid var(--linea)}
.pilar{padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--linea);
  display:grid;grid-template-columns:64px 1fr;gap:clamp(14px,2.4vw,32px);align-items:start}
.pilar .num{font-size:12.5px;letter-spacing:.2em;color:var(--lava);font-weight:500;
  padding-top:.5em}
.pilar h3{font-weight:200;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(1.8rem,3.6vw,2.9rem);margin-bottom:12px}
.pilar p{font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.72;color:var(--texto);
  font-weight:300;max-width:46ch}
@media(max-width:620px){.pilar{grid-template-columns:1fr;gap:8px}
  .pilar .num{padding-top:0}}

/* escenario 3D */
.escena{position:sticky;top:clamp(96px,15vh,150px);
  perspective:1500px;perspective-origin:50% 42%;
  display:flex;align-items:center;justify-content:center;
  min-height:min(70vh,620px)}
.escena::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  background:var(--hueso);z-index:0;transform:translateY(4%)}
.escena img{position:relative;z-index:1;width:min(100%,400px);height:auto;
  transform-style:preserve-3d;will-change:transform;
  filter:drop-shadow(0 46px 62px rgba(0,0,0,.22))}
.escena .nota-app{position:absolute;z-index:2;left:0;bottom:4%;
  background:var(--negro);color:#fff;padding:15px 19px;max-width:215px}
.escena .nota-app b{display:block;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lava);margin-bottom:7px;font-weight:500}
.escena .nota-app span{font-size:14px;line-height:1.5;font-weight:300}

@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:126px;gap:0}
  .hero .entrada{min-height:auto}
  .escena{position:static;min-height:auto;margin-top:52px;order:2}
  .escena img{width:min(76%,330px)}
  .escena::before{width:64%}
  .pilares{order:3}
  .escena .nota-app{left:0;bottom:0;max-width:190px}
}
@media(max-width:560px){
  .escena img{width:min(88%,290px)}
  .escena .nota-app{display:none}
}

/* ---------- títulos de sección más grandes y con entrada ---------- */
.seccion-cabeza{max-width:22ch}
.h2-grande{font-weight:200;letter-spacing:-.032em;line-height:1;
  font-size:clamp(2.5rem,6.3vw,5.2rem)}
.h2-grande b{font-weight:700;letter-spacing:-.04em}

/* entrada escalonada */
.js .sube{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .sube.visible{opacity:1;transform:none}
.js .sube.d1{transition-delay:.09s}
.js .sube.d2{transition-delay:.18s}
.js .sube.d3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){ .js .sube{opacity:1;transform:none} }

/* cifras */
.cifra{display:flex;flex-direction:column;gap:8px}
.cifra .n{font-weight:200;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(2.8rem,6.8vw,5.4rem)}
.cifra .n em{font-style:normal;color:var(--lava)}
.cifra .t{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px);
  margin-top:clamp(44px,6vw,72px);padding-top:38px;border-top:1px solid var(--linea)}
@media(max-width:700px){.cifras{grid-template-columns:1fr 1fr;gap:26px}}
.oscuro .cifras{border-color:var(--linea-oscura)}
.oscuro .cifra .t{color:#8a8482}

/* marca de agua tipográfica */
.marca-agua{font-weight:200;letter-spacing:-.03em;line-height:1;
  font-size:clamp(3rem,11vw,9rem);color:var(--niebla);
  user-select:none;pointer-events:none;margin-top:8px}
.oscuro .marca-agua{color:#141210}

/* ---------- rótulos superiores en pantallas chicas ---------- */
@media(max-width:560px){ .kicker{letter-spacing:.2em;font-size:11px;line-height:1.7} }
@media(max-width:380px){ .kicker{letter-spacing:.16em;font-size:10.5px} }

/* ==========================================================================
   BLOQUE DE WHATSAPP DENTRO DE SU SECCIÓN (ya no flota)
   ========================================================================== */
.wa-bloque{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(18px,3vw,40px);padding:clamp(30px,4vw,48px) clamp(24px,3.4vw,44px);
  border:1px solid var(--linea);margin-top:clamp(44px,6vw,72px)}
.wa-bloque .ico{width:52px;height:52px;border-radius:50%;background:var(--negro);
  color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wa-bloque .ico svg{width:26px;height:26px}
.wa-bloque h4{font-weight:200;letter-spacing:-.024em;line-height:1.1;
  font-size:clamp(1.4rem,2.8vw,2.2rem)}
.wa-bloque p{font-size:1.02rem;line-height:1.6;color:var(--texto);margin-top:9px;
  font-weight:300;max-width:52ch}
.wa-bloque .btn{margin-top:0;flex:0 0 auto}
.oscuro .wa-bloque{border-color:var(--linea-oscura)}
.oscuro .wa-bloque p{color:#a7a2a0}
.oscuro .wa-bloque .ico{background:#fff;color:var(--negro)}
@media(max-width:900px){
  .wa-bloque{grid-template-columns:auto 1fr;row-gap:22px}
  .wa-bloque .btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:520px){
  .wa-bloque{grid-template-columns:1fr}
  .wa-bloque .ico{display:none}
}

/* ==========================================================================
   PANEL DE COBRO CON TARJETA
   ========================================================================== */
.panel-pago{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,3vw,40px)}
.panel-pago[hidden]{display:none}
.panel-fondo{position:absolute;inset:0;background:rgba(10,10,10,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.panel-caja{position:relative;background:var(--blanco);width:min(560px,100%);
  max-height:92vh;overflow-y:auto;padding:clamp(26px,4vw,46px);
  border:1px solid var(--linea);
  animation:panelEntra .4s var(--ease)}
@keyframes panelEntra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.panel-caja{animation:none}}
.panel-x{position:absolute;top:12px;right:14px;background:none;border:0;
  font-size:30px;line-height:1;color:var(--gris);cursor:pointer;padding:6px 10px;
  transition:color .25s var(--ease);font-family:inherit}
.panel-x:hover{color:var(--tinta)}

.panel-resumen{margin-top:26px;padding:20px 22px;background:var(--hueso)}
.panel-resumen .linea{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.panel-resumen .linea b{font-weight:400;font-size:1.5rem;letter-spacing:-.025em}
.panel-resumen .linea span{font-size:1.02rem;color:var(--texto)}
.panel-resumen .linea.chica{margin-top:8px}
.panel-resumen .linea.chica span{font-size:12.5px;letter-spacing:.06em;color:var(--gris)}
.panel-resumen .cargando,.panel-brick .cargando{font-size:1rem;color:var(--gris)}
.panel-resumen .error{font-size:1rem;color:var(--lava);line-height:1.6}
.panel-resumen .error a{color:var(--lava)}

.panel-datos{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.panel-datos .dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:460px){.panel-datos .dos{grid-template-columns:1fr}}
.panel-datos label{display:flex;flex-direction:column;gap:8px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  font-weight:500;position:relative}
.panel-datos input{font-family:inherit;font-size:1.05rem;font-weight:300;
  padding:14px 15px;border:1px solid var(--linea);background:var(--blanco);
  color:var(--tinta);letter-spacing:normal;text-transform:none;
  transition:border-color .25s var(--ease);border-radius:0;-webkit-appearance:none}
.panel-datos input:focus{outline:none;border-color:var(--tinta)}
.campo-error{font-size:12px;color:var(--lava);letter-spacing:.02em;text-transform:none;
  font-weight:400}
.panel-nota{font-size:13px;line-height:1.6;color:var(--gris);font-weight:300}

.panel-brick{margin-top:24px}
.panel-brick[hidden]{display:none}

.panel-estado{margin-top:24px;padding:24px;border:1px solid var(--linea)}
.panel-estado[hidden]{display:none}
.panel-estado h4{font-weight:200;font-size:1.55rem;letter-spacing:-.024em;line-height:1.2}
.panel-estado p{margin-top:10px;font-size:1.02rem;line-height:1.65;color:var(--texto)}
.panel-estado .btn{margin-top:20px;margin-right:10px}
.panel-estado.exito{border-color:var(--lava);border-left-width:3px}
.panel-estado.error{border-left:3px solid var(--lava)}
.panel-estado.espera{border-left:3px solid var(--gris)}
.panel-estado.cargando{border-left:3px solid var(--linea)}

.panel-wa{display:block;margin-top:26px;font-size:13.5px;color:var(--gris);
  text-decoration:none;line-height:1.6;transition:color .25s var(--ease)}
.panel-wa:hover{color:var(--lava)}

/* ---------- aviso cuando se abre el archivo sin servidor ---------- */
.aviso-archivo{position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--lava);color:#fff;padding:16px clamp(20px,4vw,44px);
  font-size:14px;line-height:1.6;font-weight:300}
.aviso-archivo b{display:block;font-weight:600;margin-bottom:4px}
.aviso-archivo code{background:rgba(0,0,0,.28);padding:2px 7px;font-size:13px}

/* ==========================================================================
   PORTADA DE ARMI CHALLENGE
   Antes el bloque tenía min-height:90vh con el contenido centrado: eso
   dejaba un hueco enorme arriba. Ahora la altura la da el contenido.
   ========================================================================== */
.ancla{position:absolute;top:-90px;left:0;width:1px;height:1px}
.challenge-portada{position:relative;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(32px,5vw,80px);row-gap:clamp(44px,6vw,72px);
  align-items:center;
  padding-top:clamp(96px,13vh,150px);padding-bottom:clamp(64px,9vh,110px)}
.cp-logo{height:clamp(84px,11vw,150px);width:auto;margin-bottom:clamp(26px,3.4vw,42px)}
.cp-texto .display{font-size:clamp(2.5rem,5.4vw,4.9rem);max-width:14ch}
.cp-flyer{justify-self:center;width:100%;max-width:430px}
.cp-flyer img{width:100%;height:auto;border:1px solid var(--linea-oscura)}
.challenge-portada .cifras{grid-column:1/-1;margin-top:0}

@media(max-width:940px){
  .challenge-portada{grid-template-columns:1fr;row-gap:40px}
  .cp-flyer{max-width:360px;order:3}
  .challenge-portada .cifras{order:4}
}
@media(max-width:560px){
  .cp-logo{height:74px}
  .cp-flyer{max-width:100%}
}

/* video destacado de bienvenida */
.video-destacado{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(40px,5vw,64px)}
@media(max-width:880px){.video-destacado{grid-template-columns:1fr;gap:24px}}
.cifra .n .u{font-size:.3em;letter-spacing:.06em;font-weight:300;color:var(--gris);
  display:inline-block;margin-left:.3em;vertical-align:baseline}
.oscuro .cifra .n .u{color:#8a8482}

/* ==========================================================================
   PLANES DE ASESORÍA
   ========================================================================== */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:clamp(44px,6vw,72px)}
@media(max-width:900px){.planes{grid-template-columns:1fr}}
.plan{background:var(--blanco);padding:clamp(32px,3.4vw,44px) clamp(26px,2.6vw,36px);
  display:flex;flex-direction:column;position:relative}
.plan.destacado{background:var(--negro);color:#fff}
.plan-sello{position:absolute;top:0;right:0;background:var(--lava);color:#fff;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding:8px 14px}
.plan h3{font-weight:200;letter-spacing:-.026em;line-height:1.1;
  font-size:clamp(1.6rem,2.6vw,2.05rem)}
.plan-resumen{font-size:1.02rem;line-height:1.65;color:var(--texto);font-weight:300;
  margin-top:12px}
.plan.destacado .plan-resumen{color:#a7a2a0}
.plan-precio{font-weight:200;font-size:clamp(2.1rem,3.6vw,2.9rem);letter-spacing:-.034em;
  margin:26px 0 4px;line-height:1}
.plan-precio span{font-size:.36em;letter-spacing:.04em;color:var(--gris);font-weight:300}
.plan.destacado .plan-precio span{color:#8a8482}
.plan-lista{list-style:none;margin:26px 0 32px;flex:1}
.plan-lista li{font-size:1rem;line-height:1.6;color:var(--texto);font-weight:300;
  padding:9px 0 9px 24px;position:relative}
.plan-lista li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;
  background:var(--lava)}
.plan.destacado .plan-lista li{color:#c4bfbd}
.plan .btn{align-self:flex-start;margin-top:auto}
.plan.destacado .btn{border-color:var(--lava);background:var(--lava);color:#fff}