/* ==========================================================================
   DISTRI ALIADOS · Solución Integral S.A.S.
   Identidad: navy profundo + cian + naranja (derivados del logo)
   Mobile-first · compacto · premium
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --navy-950:#061527;
  --navy-900:#0a2138;
  --navy-800:#0e2c4b;
  --navy-700:#143a61;
  --navy-600:#1c4a7a;
  --cyan-600:#1f8fb4;
  --cyan-500:#29b6d8;
  --cyan-400:#4fc8e4;
  --cyan-100:#d9f2f8;
  --orange-600:#e8641f;
  --orange-500:#f28c28;
  --orange-400:#f6a94f;
  --orange-100:#fdeeda;
  --paper:#f3f7fb;
  --paper-2:#e9f0f7;
  --ink:#0b2540;
  --ink-soft:#3d5a75;
  --ink-mute:#64809b;
  --line:#d7e2ec;
  --white:#fff;
  --wa:#22c15e;

  --grad-cta:linear-gradient(120deg,#f6a94f,#e8641f);
  --grad-cyan:linear-gradient(120deg,#4fc8e4,#1f8fb4);
  --grad-navy:linear-gradient(160deg,#143a61,#0a2138);

  --font-display:"Sora",system-ui,-apple-system,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;

  --r-card:20px;
  --r-inner:14px;
  --r-pill:999px;

  --line-strong:#c9d8e6;
  --shadow-card:0 1px 2px rgba(11,37,64,.05),0 12px 28px -16px rgba(11,37,64,.24);
  --shadow-pop:0 2px 4px rgba(11,37,64,.07),0 24px 50px -18px rgba(11,37,64,.34);
  --edge-light:inset 0 1px 0 rgba(255,255,255,.85);
  --nav-h:62px;

  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--navy-950)}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--navy-950);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
em{font-style:normal}
.icon{fill:currentColor;flex:none;display:block}
:focus-visible{outline:3px solid var(--cyan-500);outline-offset:3px;border-radius:6px}
::selection{background:var(--cyan-500);color:var(--navy-950)}
@media (min-width:768px){:root{--nav-h:70px}}

/* ---------- Layout helpers ---------- */
.wrap{width:min(100% - 2.5rem,1120px);margin-inline:auto}
.section{padding-block:clamp(3.4rem,9vw,5.6rem)}
.section--paper{background:var(--paper)}
.section--paper2{background:var(--paper-2)}
.section--dark{background:linear-gradient(180deg,var(--navy-950) 0%,var(--navy-900) 100%);color:var(--white)}
.section--dark2{background:radial-gradient(120% 90% at 50% 110%,var(--navy-700) 0%,var(--navy-900) 52%,var(--navy-950) 100%);color:var(--white)}
section{scroll-margin-top:calc(var(--nav-h) + 8px)}

.section-head{max-width:34rem;margin-bottom:clamp(1.6rem,4.5vw,2.6rem)}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(1.55rem,5.6vw,2.5rem);
  font-weight:700;line-height:1.14;letter-spacing:-.02em;
  text-wrap:balance;
}
.section-head h2 em{
  background:linear-gradient(100deg,var(--cyan-600),var(--cyan-500));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.section-head p{margin-top:.6rem;color:var(--ink-soft);font-size:.95rem;max-width:30rem}
.section-head--light p{color:#a9c2d8}
.section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;max-width:none}

.card{
  background:linear-gradient(180deg,#fff 0%,#fafcfe 100%);
  border:1px solid var(--line-strong);
  border-radius:var(--r-card);
  box-shadow:var(--edge-light),var(--shadow-card);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;
  padding:.82rem 1.45rem;border-radius:var(--r-pill);
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .25s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn--primary{
  background:var(--grad-cta);color:#fff;
  box-shadow:0 10px 24px -10px rgba(232,100,31,.55),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(232,100,31,.6),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--glass{
  background:rgba(255,255,255,.09);color:#fff;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.btn--glass:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn--navy{background:var(--navy-800);color:#fff;box-shadow:0 10px 22px -12px rgba(10,33,56,.6)}
.btn--navy:hover{background:var(--navy-700);transform:translateY(-2px)}
.btn--sm{padding:.6rem 1.1rem;font-size:.85rem}
.btn--block{width:100%}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.05rem;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:600;
  background:rgba(255,255,255,.08);color:#dceaf5;
  border:1px solid rgba(255,255,255,.18);
  transition:background-color .25s,transform .25s var(--ease-out);
}
.chip:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.chip--orange{background:rgba(242,140,40,.16);border-color:rgba(242,140,40,.45);color:var(--orange-400)}
.chip--orange:hover{background:rgba(242,140,40,.26)}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0)*90ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- Loader ----------
   Fallback de solo-CSS: si el JS no llega a ejecutarse (red lenta, bloqueo
   de scripts en navegadores embebidos), la animacion loaderAutoHide lo
   desvanece sola a los ~2.8s y libera la pagina. El JS lo oculta antes. */
.loader{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:radial-gradient(110% 90% at 50% 30%,var(--navy-800),var(--navy-950) 75%);
  transition:opacity .5s ease,visibility .5s;
  animation:loaderAutoHide .6s ease 2.8s forwards;
}
@keyframes loaderAutoHide{to{opacity:0;visibility:hidden}}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none;animation:none}
.loader__inner{position:relative;display:grid;justify-items:center;gap:.9rem}
.loader__inner::before{
  content:"";position:absolute;left:50%;top:34%;translate:-50% -50%;z-index:-1;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(41,182,216,.22),transparent 65%);
  filter:blur(6px);
}
.loader__logo{animation:loaderFloat 1.6s var(--ease-out) infinite alternate}
.loader__name{font-family:var(--font-display);font-weight:700;color:#fff;letter-spacing:.34em;font-size:.72rem;padding-left:.34em}
.loader__bar{width:120px;height:3px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.loader__bar-fill{display:block;height:100%;width:40%;border-radius:99px;background:var(--grad-cta);animation:loaderBar 1.1s ease-in-out infinite}
@keyframes loaderBar{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@keyframes loaderFloat{from{transform:translateY(3px)}to{transform:translateY(-3px)}}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:60;
  transition:background-color .35s,box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.nav__inner{
  width:min(100% - 2rem,1180px);margin-inline:auto;
  height:var(--nav-h);
  display:flex;align-items:center;gap:1rem;
}
.nav__brand{display:flex;align-items:center;gap:.55rem;margin-right:auto}
.nav__brand img{width:40px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.nav__brand-text{
  font-family:var(--font-display);font-weight:800;font-size:.92rem;letter-spacing:.04em;color:#fff;
  transition:color .35s;line-height:1;
}
.nav__brand-text em{color:var(--cyan-400);transition:color .35s}
.nav__links{display:none;align-items:center;gap:1.6rem}
.nav__links a{
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.82);
  transition:color .25s;position:relative;padding-block:.3rem;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--grad-cta);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{display:none}
.nav__burger{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background-color .3s,color .3s,border-color .3s;
}
/* nav sólido al hacer scroll */
.nav.is-solid{
  background:rgba(243,247,251,.86);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-color:var(--line);
  box-shadow:0 8px 24px -18px rgba(11,37,64,.35);
}
.nav.is-solid .nav__brand-text{color:var(--ink)}
.nav.is-solid .nav__brand-text em{color:var(--cyan-600)}
.nav.is-solid .nav__links a{color:var(--ink-soft)}
.nav.is-solid .nav__links a:hover{color:var(--ink)}
.nav.is-solid .nav__burger{color:var(--ink);background:rgba(11,37,64,.06);border-color:var(--line)}
/* nav sobre secciones oscuras finales */
.nav.is-solid.is-over-dark{background:rgba(6,21,39,.78);border-color:rgba(255,255,255,.1)}
.nav.is-solid.is-over-dark .nav__brand-text{color:#fff}
.nav.is-solid.is-over-dark .nav__brand-text em{color:var(--cyan-400)}
.nav.is-solid.is-over-dark .nav__links a{color:rgba(255,255,255,.8)}
.nav.is-solid.is-over-dark .nav__burger{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}

@media (min-width:960px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .nav__burger{display:none}
}

/* ---------- Menú móvil ---------- */
.menu{position:fixed;inset:0;z-index:80}
.menu__backdrop{position:absolute;inset:0;background:rgba(4,14,26,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.menu__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);
  background:linear-gradient(170deg,var(--navy-800),var(--navy-950));
  display:flex;flex-direction:column;
  padding:1.1rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom));
  transform:translateX(105%);transition:transform .45s var(--ease-out);
  box-shadow:-24px 0 60px rgba(0,0,0,.4);
}
.menu.is-open .menu__backdrop{opacity:1}
.menu.is-open .menu__panel{transform:none}
.menu__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.menu__close{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
}
.menu__links{display:grid;gap:.15rem}
.menu__links a{
  font-family:var(--font-display);font-weight:600;font-size:1.28rem;color:#eaf3fa;
  padding:.62rem .3rem;border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateX(18px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),color .25s;
  transition-delay:calc(60ms + var(--d,0)*45ms);
}
.menu__links a::after{content:"→";font-size:1rem;opacity:0;transition:opacity .25s,translate .25s}
.menu__links a:hover{color:var(--cyan-400)}
.menu__links a:hover::after{opacity:1;translate:4px 0}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu__foot{margin-top:auto;display:grid;gap:1rem}
.menu__contact{display:flex;justify-content:space-between;gap:.6rem;font-size:.85rem;color:#9db9d0}
.menu__contact a:hover{color:#fff}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  background:
    radial-gradient(130% 100% at 15% 0%,var(--navy-700) 0%,transparent 52%),
    radial-gradient(120% 120% at 100% 100%,#0c3050 0%,transparent 55%),
    linear-gradient(168deg,var(--navy-900),var(--navy-950) 70%);
  color:#fff;overflow:clip;
  padding-top:calc(var(--nav-h) + 1.2rem);
  padding-bottom:3rem;
}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.hero__glow--cyan{width:46vmax;height:46vmax;left:-14vmax;top:-10vmax;background:radial-gradient(circle,rgba(41,182,216,.5),transparent 62%)}
.hero__glow--orange{width:40vmax;height:40vmax;right:-12vmax;bottom:-14vmax;background:radial-gradient(circle,rgba(232,100,31,.42),transparent 62%)}
.hero__grid{
  position:absolute;inset:0;opacity:.16;
  background-image:
    linear-gradient(rgba(140,190,220,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,220,.22) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(85% 70% at 50% 35%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(85% 70% at 50% 35%,#000 30%,transparent 78%);
}
/* botellas fantasma desenfocadas = atmósfera */
.hero__ghost{
  position:absolute;width:auto;opacity:.35;
  filter:blur(26px) saturate(1.25);
  will-change:transform;
}
.hero__ghost--a{height:64svh;left:-9%;top:16%;transform:rotate(-14deg)}
.hero__ghost--b{height:56svh;right:-11%;top:4%;transform:rotate(12deg)}

.hero__inner{
  position:relative;z-index:2;
  width:min(100% - 2.5rem,1120px);margin-inline:auto;
  display:grid;gap:1.4rem;
  grid-template-rows:auto 1fr;
}
.hero__copy{max-width:34rem}
.hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:1rem}
.hero__eyebrow-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;
  color:var(--orange-400);
  padding:.4rem .8rem;border-radius:var(--r-pill);
  background:rgba(242,140,40,.13);border:1px solid rgba(242,140,40,.4);
}
.hero__eyebrow-txt{font-size:.8rem;font-weight:600;color:#9fc3da}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,7.8vw,3.05rem);
  font-weight:800;line-height:1.08;letter-spacing:-.025em;
  text-wrap:balance;
}
.hero__title em{
  background:linear-gradient(95deg,var(--cyan-400) 10%,var(--cyan-500) 55%,var(--orange-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__sub{margin-top:.9rem;color:#b9d2e4;font-size:clamp(.94rem,2.8vw,1.05rem);max-width:29rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

.hero__visual{display:flex;justify-content:center;align-items:flex-end;min-height:0}
.hero__stage{
  position:relative;width:min(88vw,420px);aspect-ratio:10/8.5;
  transform-style:preserve-3d;will-change:transform;
}
.hero__halo{
  position:absolute;left:50%;top:56%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(79,200,228,.3) 0%,rgba(79,200,228,.08) 45%,transparent 70%);
  filter:blur(8px);
}
.hero__stage::after{
  content:"";position:absolute;left:50%;bottom:2%;translate:-50%;
  width:66%;height:22px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);
  filter:blur(6px);
}
.hero__bottle{
  position:absolute;bottom:6%;width:auto;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.4));
  animation:heroFloat 5.2s ease-in-out infinite alternate;
  will-change:transform;
}
.hero__bottle--1{height:78%;left:50%;translate:-50%;z-index:3}
.hero__bottle--2{height:64%;left:9%;z-index:2;animation-delay:-1.8s;animation-duration:6s}
.hero__bottle--3{height:58%;right:7%;z-index:1;animation-delay:-3.4s;animation-duration:5.6s}
@keyframes heroFloat{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-12px) rotate(.7deg)}}
.hero__chip{
  position:absolute;z-index:4;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.74rem;font-weight:700;color:#fff;
  padding:.5rem .85rem;border-radius:var(--r-pill);
  background:rgba(10,33,56,.55);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16);
  animation:chipFloat 4.6s ease-in-out infinite alternate;
}
.hero__chip .icon{color:var(--cyan-400)}
.hero__chip--1{top:14%;left:-2%;animation-delay:-.9s}
.hero__chip--1 .icon{color:var(--orange-400)}
.hero__chip--2{top:38%;right:-4%;animation-delay:-2.2s}
.hero__chip--3{bottom:10%;left:2%;animation-delay:-3.1s}
@keyframes chipFloat{from{transform:translateY(-4px)}to{transform:translateY(6px)}}

@media (min-width:900px){
  .hero__inner{grid-template-rows:none;grid-template-columns:1.12fr .88fr;align-items:center;gap:2rem}
  .hero__visual{align-items:center}
  .hero__stage{width:min(40vw,470px)}
  .hero__chip--1{left:-8%}
  .hero__chip--2{right:-9%}
}
@media (max-height:700px) and (max-width:899px){
  .hero__stage{aspect-ratio:10/7}
  .hero__bottle--1{height:88%}
}
/* telefono en horizontal: hero lado a lado compacto, sin desbordes */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 1.6rem);padding-bottom:2.2rem}
  .hero__inner{grid-template-rows:none;grid-template-columns:1.1fr .9fr;align-items:center;gap:1.6rem}
  .hero__stage{width:min(34vw,300px);aspect-ratio:10/8}
  .hero__ghost--a,.hero__ghost--b{height:90vh}
}

/* ---------- About bento ---------- */
.about__bento{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
.about__lead{
  grid-column:1/-1;padding:1.6rem 1.4rem;position:relative;overflow:clip;
  background:var(--grad-navy);color:#fff;
  border:1px solid rgba(79,200,228,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px -16px rgba(10,33,56,.5);
}
.about__lead::after{
  content:"";position:absolute;right:-18%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(41,182,216,.35),transparent 65%);filter:blur(30px);
}
.about__lead img{margin-bottom:.9rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.about__lead h2{font-family:var(--font-display);font-size:clamp(1.4rem,5.4vw,2rem);font-weight:700;line-height:1.16;letter-spacing:-.02em}
.about__lead p{margin-top:.55rem;color:#b9d2e4;font-size:.92rem;max-width:26rem;position:relative}
.about__pill{
  position:relative;padding:1.15rem 1.05rem;overflow:clip;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
/* filete superior con el gradiente de cada pilar: presencia sin recargar */
.about__pill::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--pill-accent,var(--grad-cyan));
  opacity:.85;
}
.about__pill:nth-of-type(3){--pill-accent:linear-gradient(120deg,#4dc98a,#1f9e63)}
.about__pill:nth-of-type(4){--pill-accent:var(--grad-cta)}
.about__pill:hover{transform:translateY(-4px);box-shadow:var(--edge-light),var(--shadow-pop);border-color:#b5cbdd}
.about__pill h3{font-family:var(--font-display);font-size:.95rem;font-weight:700;margin-top:.75rem;letter-spacing:-.01em}
.about__pill p{margin-top:.3rem;font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.about__icon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(11,37,64,.4);
}
.about__icon .icon{width:21px;height:21px}
.about__icon--cyan{background:var(--grad-cyan)}
.about__icon--green{background:linear-gradient(120deg,#4dc98a,#1f9e63)}
.about__icon--orange{background:var(--grad-cta)}
.about__photo{
  position:relative;display:flex;align-items:flex-end;justify-content:center;gap:.4rem;
  padding:1.2rem 1rem .9rem;overflow:clip;
  background:linear-gradient(170deg,#dff0f8,#c2e2f0);
  border:1px solid #b8d9ea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-card);
}
.about__photo img{width:auto;height:118px;filter:drop-shadow(0 10px 14px rgba(11,37,64,.28))}
.about__photo img:nth-child(2){height:138px}
.about__photo-tag{
  position:absolute;top:.8rem;left:.9rem;
  font-size:.7rem;font-weight:700;color:var(--navy-800);
  background:rgba(255,255,255,.75);backdrop-filter:blur(6px);
  padding:.3rem .7rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.9);
}
@media (min-width:820px){
  .about__bento{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(200px,auto))}
  .about__lead{grid-column:1/3;grid-row:1/3;display:flex;flex-direction:column;justify-content:center;padding:2.2rem 2rem}
  .about__pill:nth-of-type(2){grid-column:3;grid-row:1}
  .about__pill:nth-of-type(3){grid-column:4;grid-row:1}
  .about__pill:nth-of-type(4){grid-column:3;grid-row:2}
  .about__photo{grid-column:4;grid-row:2;gap:.3rem;padding:1.1rem .8rem .8rem}
  .about__photo img{height:104px}
  .about__photo img:nth-child(2){height:124px}
}

/* ---------- Ally ---------- */
.ally__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  margin-bottom:1.6rem;max-width:680px;
}
.ally__stat{
  position:relative;overflow:clip;
  background:linear-gradient(180deg,#fff,#fbfdfe);
  border:1px solid var(--line-strong);border-radius:var(--r-inner);
  padding:.9rem .6rem;text-align:center;
  box-shadow:var(--edge-light),var(--shadow-card);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.ally__stat::after{
  content:"";position:absolute;inset:auto 18% 0;height:2px;border-radius:2px 2px 0 0;
  background:var(--grad-cta);opacity:.55;
}
.ally__stat:hover{transform:translateY(-3px);box-shadow:var(--edge-light),var(--shadow-pop)}
.ally__stat strong{
  display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.05rem,3.6vw,1.5rem);
  background:linear-gradient(100deg,var(--orange-500),var(--orange-600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ally__stat span{font-size:.72rem;color:var(--ink-soft);font-weight:600;line-height:1.2;display:block;margin-top:.15rem}

.tabs{margin-bottom:1.6rem}
.tabs__bar{
  position:relative;display:inline-flex;gap:.2rem;
  background:#dde7f0;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:.28rem;margin-bottom:1.3rem;
  box-shadow:inset 0 1px 3px rgba(11,37,64,.08);
}
.tabs__tab{
  position:relative;z-index:2;
  font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--ink-soft);
  padding:.55rem 1.25rem;border-radius:var(--r-pill);
  transition:color .3s;
}
.tabs__tab.is-active{color:#fff}
.tabs__ink{
  position:absolute;z-index:1;top:.28rem;bottom:.28rem;left:0;width:0;
  border-radius:var(--r-pill);background:var(--grad-navy);
  box-shadow:0 6px 16px -6px rgba(10,33,56,.5);
  transition:left .35s var(--ease-out),width .35s var(--ease-out);
}
.tabs__panel[hidden]{display:none}

.benefits{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){
  .benefits{grid-template-columns:repeat(3,1fr)}
  .benefit--wide{grid-column:span 2}
}
.benefit{
  background:linear-gradient(180deg,#fff,#fbfdfe);
  border:1px solid var(--line-strong);border-radius:var(--r-card);
  padding:1.05rem .95rem;
  box-shadow:var(--edge-light),var(--shadow-card);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
  opacity:0;transform:translateY(18px);
}
.tabs__panel.is-active .benefit{opacity:1;transform:none;animation:panelIn .55s var(--ease-out) backwards;animation-delay:calc(var(--d,0)*70ms)}
@keyframes panelIn{from{opacity:0;transform:translateY(18px)}}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--edge-light),var(--shadow-pop);border-color:#a9d8e8}
.benefit__icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg,#e2f5fa,var(--cyan-100));color:var(--cyan-600);
  border:1px solid #bfe3ef;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.benefit__icon .icon{width:19px;height:19px}
.benefit h3{font-family:var(--font-display);font-size:.9rem;font-weight:700;margin-top:.7rem;letter-spacing:-.01em}
.benefit p{margin-top:.25rem;font-size:.8rem;color:var(--ink-soft);line-height:1.45}
.benefit--wide{
  grid-column:1/-1;
  background:linear-gradient(120deg,var(--orange-100),#fff 60%);
  border-color:#f4d6b2;
}
.benefit--wide .benefit__icon{background:var(--grad-cta);color:#fff}

.steps{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(72vw,250px);
  gap:.8rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:1.25rem;
  margin-inline:-1.25rem;padding-inline:1.25rem;padding-bottom:.6rem;
  -ms-overflow-style:none;scrollbar-width:none;
}
.steps::-webkit-scrollbar{display:none}
.step{
  scroll-snap-align:start;
  background:linear-gradient(180deg,#fff,#fbfdfe);
  border:1px solid var(--line-strong);border-radius:var(--r-card);
  padding:1.15rem 1.05rem;
  box-shadow:var(--edge-light),var(--shadow-card);
  position:relative;overflow:clip;
  opacity:0;transform:translateY(18px);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--edge-light),var(--shadow-pop);border-color:#a9d8e8}
.tabs__panel.is-active .step{opacity:1;transform:none;animation:panelIn .55s var(--ease-out) backwards;animation-delay:calc(var(--d,0)*80ms)}
.tabs__panel.is-active .benefit:hover,
.tabs__panel.is-active .step:hover{transform:translateY(-4px)}
.step__num{
  font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--cyan-500),var(--navy-600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.step::after{
  content:"";position:absolute;right:-12%;top:-24%;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(41,182,216,.14),transparent 66%);
}
.step h3{font-family:var(--font-display);font-size:.98rem;font-weight:700;margin-top:.5rem}
.step p{margin-top:.3rem;font-size:.82rem;color:var(--ink-soft)}
@media (min-width:820px){
  .steps{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin-inline:0;padding-inline:0}
}

.ally__cta{
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
  padding:1.5rem 1.3rem;
  background:var(--grad-navy);color:#fff;
  border:1px solid rgba(79,200,228,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px -16px rgba(10,33,56,.5);
  position:relative;overflow:clip;
}
.ally__cta::before{
  content:"";position:absolute;right:-10%;bottom:-70%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(242,140,40,.35),transparent 65%);filter:blur(24px);
}
.ally__cta-txt h3{font-family:var(--font-display);font-size:1.15rem;font-weight:700;letter-spacing:-.01em;max-width:24rem}
.ally__cta-txt p{margin-top:.35rem;color:#b9d2e4;font-size:.9rem}
@media (min-width:820px){
  .ally__cta{flex-direction:row;align-items:center;justify-content:space-between;padding:1.8rem 2rem}
}

/* ---------- Marquee ---------- */
.catalog{padding-top:0}
.marquee{
  overflow:hidden;padding-block:.85rem;margin-bottom:clamp(2.2rem,6vw,3.2rem);
  border-block:1px solid var(--line);
  background:var(--white);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee__track span{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;
}
.marquee__track .dot{width:5px;height:5px;border-radius:50%;background:var(--orange-500);padding:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Catálogo ---------- */
.catalog__grid{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:680px){.catalog__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.catalog__grid{grid-template-columns:repeat(4,1fr);gap:1rem}}

.pcard{
  position:relative;text-align:left;
  background:linear-gradient(180deg,#fff,#fbfdfe);
  border:1px solid var(--line-strong);border-radius:var(--r-card);
  padding:.7rem .7rem .95rem;
  box-shadow:var(--edge-light),var(--shadow-card);
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),border-color .32s;
  opacity:0;transform:translateY(24px);
}
.pcard.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),box-shadow .32s var(--ease-out),border-color .32s;transition-delay:calc(var(--d,0)*60ms)}
.pcard.is-in:hover{transform:translateY(-5px);box-shadow:var(--edge-light),var(--shadow-pop);border-color:#a9d8e8;transition-delay:0s}
.pcard:active{transform:scale(.98)}
.pcard__media{
  position:relative;border-radius:var(--r-inner);overflow:clip;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(11,37,64,.06);
  display:grid;place-items:center;
  aspect-ratio:1/1;
  margin-bottom:.75rem;
}
.pcard__media::before{
  content:"";position:absolute;inset:auto 12% 8%;height:38%;border-radius:50%;
  background:var(--halo,radial-gradient(ellipse,rgba(41,182,216,.18),transparent 68%));
  filter:blur(10px);
}
.pcard__media img{
  position:relative;max-height:82%;width:auto;max-width:74%;
  filter:drop-shadow(0 10px 12px rgba(11,37,64,.16));
  transition:transform .4s var(--ease-out);
}
.pcard:hover .pcard__media img{transform:translateY(-5px) scale(1.04)}
.pcard h3{font-family:var(--font-display);font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.pcard__meta{margin-top:.3rem;display:flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:600;color:var(--ink-mute)}
.pcard__meta .icon{color:var(--cyan-600)}
.pcard__plus{
  position:absolute;top:1rem;right:1rem;z-index:2;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,37,64,.06);color:var(--navy-800);
  transition:background-color .3s,color .3s,transform .3s var(--ease-out);
}
.pcard:hover .pcard__plus{background:var(--orange-500);color:#fff;transform:rotate(90deg)}

.catalog__b2b{
  margin-top:1.4rem;
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;
  padding:1.25rem 1.2rem;
  background:linear-gradient(120deg,#eaf5fa,#fff 70%);
}
.catalog__b2b p{font-size:.92rem;color:var(--ink-soft);max-width:34rem}
.catalog__b2b strong{color:var(--ink)}
@media (min-width:760px){.catalog__b2b{flex-direction:row;align-items:center;justify-content:space-between}}

/* ---------- Kits ---------- */
.kits{overflow:clip}
.kits__nav{display:flex;gap:.5rem}
.kits__btn{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line-strong);color:var(--navy-800);
  box-shadow:var(--edge-light),var(--shadow-card);
  transition:background-color .25s,color .25s,transform .25s var(--ease-out),opacity .25s;
}
.kits__btn:hover{background:var(--navy-800);color:#fff;transform:translateY(-2px)}
.kits__btn[disabled]{opacity:.35;pointer-events:none}
.kits__rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:min(78vw,300px);
  gap:.9rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:max(1.25rem,calc((100vw - 1120px)/2));
  scroll-padding-inline:max(1.25rem,calc((100vw - 1120px)/2));
  padding-bottom:1rem;
  -ms-overflow-style:none;scrollbar-width:none;
}
.kits__rail::-webkit-scrollbar{display:none}
/* Todos los kits comparten el mismo fondo navy del kit destacado:
   una sola familia visual. El destacado se diferencia solo por su
   borde y badge naranja. */
.kcard{
  scroll-snap-align:start;
  background:linear-gradient(165deg,var(--navy-700),var(--navy-950) 80%);
  border:1px solid rgba(79,200,228,.26);
  border-radius:var(--r-card);
  padding:.8rem .8rem 1.05rem;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px -16px rgba(10,33,56,.5);
  display:flex;flex-direction:column;
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),border-color .32s;
}
.kcard:hover{
  transform:translateY(-5px);
  border-color:rgba(79,200,228,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 54px -18px rgba(10,33,56,.62);
}
.kcard__media{
  position:relative;border-radius:var(--r-inner);overflow:clip;
  background:linear-gradient(180deg,#fff,#e9f3f9);
  box-shadow:inset 0 0 0 1px rgba(11,37,64,.05);
  display:grid;place-items:center;
  aspect-ratio:4/3;margin-bottom:.85rem;
}
.kcard__media::before{
  content:"";position:absolute;inset:auto 10% 6%;height:34%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(41,182,216,.16),transparent 66%);filter:blur(10px);
}
.kcard__media img{position:relative;max-height:86%;width:auto;max-width:92%;filter:drop-shadow(0 12px 14px rgba(11,37,64,.16))}
.kcard__badge{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;
  padding:.32rem .7rem;border-radius:var(--r-pill);
  background:rgba(11,37,64,.85);color:#fff;backdrop-filter:blur(4px);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.35);
}
.kcard--featured{border-color:rgba(242,140,40,.55)}
.kcard--featured:hover{border-color:rgba(242,140,40,.8)}
.kcard--featured .kcard__badge{background:var(--grad-cta)}
.kcard h3{font-family:var(--font-display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.kcard__sub{font-size:.78rem;font-weight:600;color:#9fc3da;margin-top:.15rem}
.kcard details{margin-top:.6rem;font-size:.8rem}
.kcard summary{
  cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.35rem;
  font-weight:700;color:var(--cyan-400);
  padding:.2rem 0;border-radius:6px;
}
.kcard summary::-webkit-details-marker{display:none}
.kcard summary::after{content:"+";font-weight:800;transition:rotate .3s var(--ease-out)}
.kcard details[open] summary::after{rotate:45deg}
.kcard details ul{margin-top:.45rem;display:flex;flex-wrap:wrap;gap:.3rem}
.kcard details li{
  font-size:.72rem;font-weight:600;
  background:rgba(255,255,255,.09);color:#cfe4f2;
  border:1px solid rgba(255,255,255,.16);
  padding:.24rem .6rem;border-radius:var(--r-pill);
}
.kcard .btn{margin-top:.9rem}
.kits__dots{display:flex;justify-content:center;gap:.45rem;margin-top:.2rem}
.kits__dots button{
  width:8px;height:8px;border-radius:99px;background:#c3d3e2;
  transition:width .3s var(--ease-out),background-color .3s;
}
.kits__dots button.is-active{width:22px;background:var(--orange-500)}
@media (min-width:980px){
  .kits__rail{grid-auto-columns:min(24vw,300px)}
}

/* ---------- Media / video ---------- */
.media{position:relative;overflow:clip}
.media::before{
  content:"";position:absolute;left:-10%;top:-30%;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(41,182,216,.16),transparent 62%);filter:blur(30px);pointer-events:none;
}
.media__wrap{display:grid;gap:2.2rem;align-items:center}
.media__phone{display:flex;justify-content:center}
.media__frame{
  position:relative;width:min(64vw,252px);
  border-radius:34px;overflow:clip;
  border:6px solid #10263e;
  outline:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.06);
  background:#000;
  aspect-ratio:9/16;
}
.media__frame::before{
  content:"";position:absolute;top:10px;left:50%;translate:-50%;z-index:3;
  width:34%;height:16px;border-radius:99px;background:#10263e;
}
.media__frame video{width:100%;height:100%;object-fit:cover}
.media__play{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(6,21,39,.15),rgba(6,21,39,.5));
  color:#fff;transition:opacity .35s;
}
.media__play::before{
  content:"";position:absolute;width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .3s var(--ease-out);
}
.media__play .icon{position:relative;translate:2px 0}
.media__play:hover::before{transform:scale(1.1)}
.media__play.is-hidden{opacity:0;pointer-events:none}
.media__copy h2{
  font-family:var(--font-display);
  font-size:clamp(1.55rem,5.6vw,2.4rem);font-weight:700;line-height:1.14;letter-spacing:-.02em;
}
.media__copy p{margin-top:.8rem;color:#a9c2d8;font-size:.95rem;max-width:27rem}
.media__ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
@media (min-width:860px){
  .media__wrap{grid-template-columns:.9fr 1.1fr;gap:3rem}
  .media__frame{width:min(24vw,270px)}
}

/* ---------- Contacto ---------- */
.contact__quick{margin-bottom:1.6rem}
.contact__quick-label{display:block;font-size:.85rem;font-weight:600;color:#9fc3da;margin-bottom:.6rem}
.contact__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.contact__grid{display:grid;gap:.7rem}
.contact__card{
  display:flex;align-items:center;gap:.9rem;
  padding:1rem 1.05rem;border-radius:var(--r-card);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--ease-out),background-color .3s,border-color .3s;
  min-width:0;
}
.contact__card:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.contact__icon{
  width:48px;height:48px;flex:none;border-radius:15px;
  display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 20px -8px rgba(0,0,0,.45);
}
.contact__icon .icon{width:23px;height:23px}
.contact__card--wa .contact__icon{background:linear-gradient(140deg,#36d576,#189e4a)}
.contact__card--mail .contact__icon{background:var(--grad-cyan)}
.contact__card--tel .contact__icon{background:var(--grad-cta)}
.contact__card div{min-width:0}
.contact__card strong{display:block;font-family:var(--font-display);font-size:.92rem;font-weight:700}
.contact__card span{display:block;font-size:.8rem;color:#9fc3da;overflow-wrap:anywhere}
.contact__arrow{margin-left:auto;color:#7ea6c4;transition:translate .3s var(--ease-out),color .3s}
.contact__card:hover .contact__arrow{translate:3px -3px;color:#fff}
@media (min-width:820px){.contact__grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Footer ---------- */
.footer{background:var(--navy-950);color:#c6d9e8;border-top:1px solid rgba(255,255,255,.08)}
.footer__inner{
  display:grid;gap:1.6rem;
  padding-block:2.4rem 1.8rem;
}
.footer__brand{display:flex;align-items:center;gap:.8rem}
.footer__name{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:#fff;line-height:1.2}
.footer__name span{display:block;font-family:var(--font-body);font-weight:500;font-size:.74rem;color:#8aa9c2}
.footer__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.footer__links a,.footer__contact a{font-size:.86rem;color:#a9c2d8;transition:color .25s}
.footer__links a:hover,.footer__contact a:hover{color:#fff}
.footer__contact{display:grid;gap:.45rem;justify-items:start}
.footer__contact a{overflow-wrap:anywhere}
.footer__ig{display:inline-flex;align-items:center;gap:.4rem}
.footer__bar{border-top:1px solid rgba(255,255,255,.08);padding-block:1rem}
.footer__bar p{width:min(100% - 2.5rem,1120px);margin-inline:auto;font-size:.76rem;color:#7d9cb8;padding-right:72px}
@media (min-width:820px){.footer__bar p{padding-right:0}}
@media (min-width:820px){
  .footer__inner{grid-template-columns:1.2fr 1fr 1.2fr;align-items:start}
  .footer__links{flex-direction:column;gap:.5rem}
}

/* ---------- FAB WhatsApp ---------- */
.fab{
  position:fixed;z-index:55;
  right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,#2ed573,#1faa53);color:#fff;
  box-shadow:0 14px 30px -8px rgba(34,193,94,.55);
  transition:transform .3s var(--ease-out),opacity .4s,visibility .4s;
  opacity:0;visibility:hidden;transform:translateY(14px);
}
.fab.is-show{opacity:1;visibility:visible;transform:none}
.fab:hover{transform:translateY(-3px) scale(1.05)}

/* ---------- Modal producto ---------- */
.pmodal{
  border:0;padding:0;margin:auto;
  width:min(100% - 1.6rem,760px);
  background:transparent;
  max-height:calc(100dvh - 2rem);
}
.pmodal::backdrop{background:rgba(4,14,26,.62);backdrop-filter:blur(6px)}
.pmodal[open]{animation:modalIn .4s var(--ease-out)}
.pmodal[open]::backdrop{animation:fadeIn .35s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pmodal__body{
  position:relative;
  display:grid;
  background:var(--paper);border-radius:24px;
  overflow-y:auto;overflow-x:clip;
  max-height:calc(100dvh - 2rem);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.5);
}
.pmodal__close{
  position:absolute;top:.8rem;right:.8rem;z-index:5;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(11,37,64,.08);color:var(--ink);
  backdrop-filter:blur(6px);
  transition:background-color .25s,transform .25s var(--ease-out);
}
.pmodal__close:hover{background:rgba(11,37,64,.16);transform:rotate(90deg)}
.pmodal__media{
  position:relative;display:grid;place-items:center;
  background:#fff;
  padding:2rem 1.4rem 1.4rem;
  min-height:250px;
}
.pmodal__halo{
  position:absolute;left:50%;bottom:10%;translate:-50%;
  width:64%;height:32%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(41,182,216,.2),transparent 66%);
  filter:blur(12px);
}
.pmodal__media img{
  position:relative;max-height:min(34svh,300px);width:auto;max-width:80%;
  filter:drop-shadow(0 16px 20px rgba(11,37,64,.2));
  transition:opacity .25s ease;
}
.pmodal__media img.is-swap{opacity:0}
.pmodal__info{padding:1.3rem 1.3rem 1.5rem;display:grid;gap:.9rem;align-content:start}
.pmodal__info h3{font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;padding-right:2rem}
.pmodal__note{font-size:.85rem;color:var(--ink-soft);margin-top:-.4rem}
.pmodal__label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.45rem}
.pmodal__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.pmodal__chips button{
  font-size:.8rem;font-weight:600;
  padding:.45rem .85rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
  transition:background-color .25s,color .25s,border-color .25s,transform .2s var(--ease-out);
}
.pmodal__chips button:hover{transform:translateY(-1px)}
.pmodal__chips button.is-active{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.pmodal__chips .is-static{
  font-size:.8rem;font-weight:600;
  padding:.45rem .85rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
}
@media (min-width:640px){
  .pmodal__body{grid-template-columns:1fr 1.05fr}
  .pmodal__media{min-height:380px;padding:2rem}
  .pmodal__media img{max-height:300px}
  .pmodal__info{padding:1.8rem 1.6rem;align-content:center}
}

/* ---------- Hero parallax se controla por JS con --sy ---------- */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  [data-reveal]{opacity:1;transform:none}
  .pcard{opacity:1;transform:none}
  .benefit,.step{opacity:1;transform:none}
  .marquee__track{animation:none}
  .hero__bottle,.hero__chip{animation:none}
  /* el loader SI se muestra (breve y estatico) y se auto-oculta rapido */
  .loader{animation:loaderAutoHide .001s ease .7s forwards !important}
  .loader.is-done{animation:none !important}
  .loader__logo,.loader__bar-fill{animation:none !important}
}