@font-face{font-family:"League Spartan";src:url(/league-spartan.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--navy:#21274F;--bg:#F4F6FB;--qnt:#1A1A1A;--neo:#E72081;--nt:#76BD43;--lipo:#666666;--mx:#1D63AF;--ease:cubic-bezier(.22,.9,.24,1);--g:clamp(16px,2.4vw,36px)}
*{box-sizing:border-box;margin:0}
html{background:var(--navy);-webkit-text-size-adjust:100%}
body{font-family:"League Spartan",system-ui,sans-serif;background:var(--navy);color:#fff;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit;text-decoration:none}

/* Portada */
.top{padding:clamp(16px,2.6vh,28px) var(--g) clamp(16px,2.8vh,30px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{height:clamp(46px,7vh,64px);width:auto}
.when{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.15vw,17px);font-weight:500}
.when i{width:9px;height:9px;border-radius:50%;background:var(--nt);animation:late 1.8s ease-out infinite}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(118,189,67,.7)}80%,100%{box-shadow:0 0 0 12px rgba(118,189,67,0)}}
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,24vw);gap:clamp(24px,3.4vw,70px);align-items:end;margin-top:clamp(12px,2.6vh,30px)}
h1{font-weight:500;font-size:clamp(44px,min(5.7vw,10.4vh),112px);line-height:.98;letter-spacing:-.028em}
.ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.ln>span{display:block;text-wrap:balance}
.note p{text-wrap:pretty;font-size:clamp(16px,1.25vw,19px);line-height:1.34;color:#D9DDEE;max-width:44ch}
.five{display:flex;gap:4px;margin-top:16px;height:6px}
.five b{flex:1;border-radius:1px;transform-origin:left;transition:flex-grow .6s var(--ease)}
.five b:nth-child(1){background:#fff}
.five b:nth-child(2){background:var(--neo)}
.five b:nth-child(3){background:var(--nt)}
.five b:nth-child(4){background:#9A9A9A}
.five b:nth-child(5){background:#4C93E0}
.five b.on{flex-grow:3}

/* Marcas */
.brands{flex:1;display:flex;min-height:400px}
.b{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;transition:flex-grow .75s var(--ease);outline-offset:-4px}
.b.on{flex-grow:1.75}
.b:focus-visible{outline:3px solid #fff}
.bg{position:absolute;inset:0;overflow:hidden;background:radial-gradient(70% 52% at 50% 46%,var(--lit),transparent 72%),var(--c)}
.b-qnt{--c:var(--qnt);--lit:#4A4A4A}
.b-neo{--c:var(--neo);--lit:#F76BB2}
.b-nt{--c:var(--nt);--lit:#A6DC7C}
.b-lipo{--c:var(--lipo);--lit:#A8A8A8}
.b-mx{--c:var(--mx);--lit:#4F97E6}
.stage{position:relative;flex:1;min-height:0}
.f{position:absolute;inset:7% 0 0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.f img{height:92%;max-height:92%;width:auto;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.34))}
.f1 .px{height:100%;display:flex;align-items:flex-end;justify-content:center;will-change:transform}
.f1 .px img{height:92%;transition:transform .75s var(--ease);transform-origin:50% 100%}
.f2 img{height:74%;opacity:0;transform:translateX(0) rotate(0) scale(.86);transition:transform .75s var(--ease),opacity .4s;transform-origin:50% 100%}
.b.on .f1 .px img{transform:translateX(-30%) scale(1.03)}
.b-neo .f1 .px img{height:84%}
.b-neo .f2 img{height:80%}
.b.on .f2 img{opacity:1;transform:translateX(72%) rotate(5deg)}
.plate{position:relative;background:#fff;color:var(--navy);padding:clamp(12px,1.9vh,20px) clamp(14px,1.4vw,22px);display:grid;grid-template-rows:clamp(38px,6vh,52px) auto auto;gap:6px;border-right:1px solid #DDE1EE}
.b:last-child .plate{border-right:0}
.ml{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.what{font-size:clamp(14px,1.05vw,16px);line-height:1.15;min-height:2.3em;color:#555B7D}
.go{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:clamp(14px,1.1vw,17px);border-top:1px solid #DDE1EE;padding-top:9px}
.go svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .45s var(--ease)}
.b:hover .go svg,.b.on .go svg{transform:translate(3px,-3px)}

.foot{display:flex;justify-content:space-between;gap:16px;padding:10px var(--g);font-size:14px;color:#C6CBE0;background:var(--navy)}
.foot p:first-child{font-weight:600;color:#fff}
.foot a{text-decoration:underline;text-underline-offset:3px}

/* Entrada */
.flylogo{display:none}
.intro .flylogo{display:block;position:fixed;left:50%;top:38%;width:clamp(170px,20vw,280px);transform:translate(-50%,-50%);z-index:9;opacity:0}
.flylogo img{width:100%;height:auto}
.intro .logo,.intro .when,.intro .note,.intro .ln>span,.intro .plate,.intro .bg,.intro .foot,.intro .f1{visibility:hidden}

/* Celular: tarjetas que se apilan al bajar, sin JS de scroll */
@media (max-width:820px){
  .lead{grid-template-columns:1fr;gap:14px;margin-top:22px}
  h1{font-size:clamp(42px,12.6vw,66px)}
  .when{font-size:13px;gap:8px;text-align:right}
  .logo{height:50px}
  .brands{flex-direction:column;display:block;min-height:0;padding:0 12px}
  .b{position:sticky;top:calc(10px + var(--n)*10px);height:min(58svh,470px);min-height:410px;margin-bottom:12px;border-radius:14px;overflow:hidden;box-shadow:0 -6px 24px rgba(10,14,40,.28)}
  .b:nth-child(1){--n:0}.b:nth-child(2){--n:1}.b:nth-child(3){--n:2}.b:nth-child(4){--n:3}.b:nth-child(5){--n:4}
  .b.on{flex-grow:1}
  .f{inset:5% 0 0}
  .f1 .px img{height:86%;transform:translateX(-28%)}
  .b-neo .f1 .px img{height:72%}
  .b-neo .f2 img{height:68%}
  .b-qnt .f2 img{height:58%}
  .f2 img{opacity:1;height:64%;transform:translateX(58%) rotate(5deg)}
  .b.on .f1 .px img{transform:translateX(-28%) scale(1.04)}
  .b.on .f2 img{transform:translateX(58%) rotate(5deg)}
  .plate{grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:14px;padding:14px 16px;border:0}
  .ml{height:40px;max-width:170px}
  .what{grid-column:1/-1;min-height:0;font-size:15px}
  .go{grid-column:1/-1}
  .foot{flex-direction:column;gap:4px;padding:18px 16px 26px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}