/* =====================================================================
   G&I Representaciones — Industrial Corporate Premium 2026 (interactivo)
   Blanco cálido · azul corporativo · gris carbón · rojo de acción
   Montserrat (títulos) + Inter (texto) · animaciones con transform/opacity
   ===================================================================== */
:root{
  --navy:#0A1D3F;
  --navy-2:#0E2347;
  --carbon:#20262F;
  --red:#E30613;
  --red-dark:#C10510;
  --ink:#111722;
  --body:#4B5563;
  --muted:#8A93A2;
  --line:#E9ECF2;
  --line-2:#F1F3F8;
  --bg:#FFFFFF;
  --bg-warm:#FAFAF8;
  --bg-soft:#F5F7FB;
  --wa:#25D366;
  --hd:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --tx:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --wrap:1280px;
  --gut:clamp(20px,4.5vw,52px);
  --sp:clamp(84px,11vw,168px);
  --e:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--tx);font-size:17px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--navy);color:#fff}
h1,h2,h3,h4{margin:0;font-family:var(--hd);color:var(--ink);font-weight:800;line-height:1.04;letter-spacing:-.025em}
p{margin:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--sp) 0}
.warm{background:var(--bg-warm)}
.soft{background:var(--bg-soft)}

/* ---------- Kicker ---------- */
.kicker{display:inline-flex;align-items:center;font-family:var(--tx);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.kicker::before{content:"/";color:var(--red);font-weight:800;margin-right:11px}
.on-dark .kicker,.dark .kicker{color:#98A6C2}

/* ---------- Tipografía ---------- */
.h1{font-size:clamp(42px,7.5vw,96px);line-height:.98;letter-spacing:-.035em;color:var(--ink)}
.h2{font-size:clamp(30px,5vw,58px);letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.h3{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em}
.lead{font-size:clamp(16.5px,1.35vw,19px);line-height:1.65;color:var(--body);max-width:56ch}
.dark .h1,.dark .h2,.dark .h3,.on-dark .h2,.on-dark .h3{color:#fff}
.dark .lead,.on-dark .lead{color:#B7C1D2}
.sec-head{max-width:820px}
.sec-head .h2{margin-top:20px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .kicker{justify-content:center}

/* ---------- Botones + links ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-family:var(--tx);font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  padding:17px 32px;border-radius:2px;border:1.5px solid transparent;cursor:pointer;overflow:hidden;transition:color .3s var(--e),border-color .3s var(--e),background .3s var(--e),transform .3s var(--e)}
.btn svg{width:17px;height:17px;transition:transform .3s var(--e)}
.btn:hover svg{transform:translateX(5px)}
.btn-red{background:var(--red);color:#fff}
.btn-red::after{content:"";position:absolute;inset:0;background:var(--red-dark);transform:translateY(101%);transition:transform .4s var(--e);z-index:0}
.btn-red:hover::after{transform:translateY(0)}
.btn-red span,.btn-red svg{position:relative;z-index:1}
.btn-red:hover{transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:#08172f;transform:translateY(-2px)}
.btn-wa{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}.btn-wa:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}
.btn-out{background:transparent;color:var(--ink);border-color:var(--line)}.btn-out:hover{border-color:var(--navy);color:var(--navy)}
.btn-out.on-dark{color:#fff;border-color:rgba(255,255,255,.4)}.btn-out.on-dark:hover{background:#fff;color:var(--navy);border-color:#fff}
.al{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--tx);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.al svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .3s var(--e)}
.al:hover svg{transform:translateX(6px)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv-l.in{opacity:1;transform:none}
/* máscara de imagen */
.mask{position:relative;overflow:hidden}
.mask img{transform:scale(1.06);transition:transform 1.2s var(--e)}
.mask::after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:bottom;transition:transform .9s var(--e2);z-index:2}
.mask.in::after{transform:scaleY(0)}
.mask.in img{transform:scale(1)}
.mask.dark::after{background:var(--navy)}

/* ---------- Cursor custom (desktop) ---------- */
.cur{position:fixed;top:0;left:0;z-index:200;width:12px;height:12px;border-radius:50%;background:var(--red);pointer-events:none;transform:translate(-50%,-50%);transition:width .3s var(--e),height .3s var(--e),background .3s var(--e);mix-blend-mode:normal;opacity:0}
.cur.on{opacity:1}
.cur.big{width:74px;height:74px;background:rgba(227,6,19,.92)}
.cur .lb{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--tx);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.cur.big .lb{opacity:1}
@media(hover:none),(pointer:coarse){.cur{display:none}}

/* ===== Header ===== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .4s var(--e),box-shadow .4s var(--e),border-color .4s var(--e)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:22px}
.hdr .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.hdr .brand .lg{display:flex;align-items:center;height:54px;width:auto;flex:0 0 auto}
.hdr .brand .lg img{height:54px;width:auto;display:block}
.hdr .bt{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.hdr .bt b{font-family:var(--hd);font-weight:800;font-size:18px;letter-spacing:-.01em;color:#fff;transition:color .4s}
.hdr .bt i{font-style:normal;font-family:var(--tx);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#B9C4D8;margin-top:3px;transition:color .4s}
.hdr .menu{display:flex;align-items:center;gap:2px}
.hdr .menu a{position:relative;font-family:var(--tx);font-weight:600;font-size:14.5px;color:#fff;padding:10px 16px;opacity:.88;transition:opacity .25s}
.hdr .menu a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
.hdr .menu a:hover{opacity:1}
.hdr .menu a:hover::after,.hdr .menu a.active::after{transform:scaleX(1)}
.hdr .nav-r{display:flex;align-items:center;gap:14px}
.hdr .burger{display:none;background:none;border:0;cursor:pointer;padding:10px;color:#fff;z-index:110}
.hdr .burger span{display:block;width:26px;height:2px;background:currentColor;margin:5px 0;transition:transform .35s var(--e),opacity .25s}
.hdr.scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.hdr.scrolled .brand .lw{opacity:0}.hdr.scrolled .brand .lc{opacity:1}
.hdr.scrolled .bt b{color:var(--navy)}.hdr.scrolled .bt i{color:var(--red)}
.hdr.scrolled .menu a{color:var(--ink)}
.hdr.scrolled .burger{color:var(--navy)}
.hdr.scrolled .btn-out.on-dark{color:var(--navy);border-color:var(--line)}
.hdr.scrolled .btn-out.on-dark:hover{background:var(--navy);color:#fff}

/* ===== Hero ===== */
.hero{position:relative;min-height:90svh;display:flex;align-items:flex-end;background:var(--navy);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;overflow:hidden;background:var(--navy)}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:66% center;transform:scale(1.12);transition:transform 1.6s var(--e)}
.hero.ready .bg img{transform:scale(1.04)}
/* Video de marca (kinetic type) de fondo del hero */
.hero .bg .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.06);transition:transform 1.6s var(--e)}
.hero.ready .bg .hero-vid{transform:scale(1)}
.hero .bg .hero-vid-fallback{display:none;width:100%;height:100%;object-fit:cover;object-position:center}
@media(prefers-reduced-motion:reduce){.hero .bg .hero-vid{display:none}.hero .bg .hero-vid-fallback{display:block}}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(85deg,rgba(8,17,36,.94) 0%,rgba(8,17,36,.8) 38%,rgba(8,17,36,.42) 66%,rgba(8,17,36,.15) 100%)}
.hero .veil{position:absolute;inset:0;background:var(--navy);transform-origin:top;z-index:3;transition:transform 1s var(--e2)}
.hero.ready .veil{transform:scaleY(0)}
.hero .wrap{position:relative;z-index:4;width:100%;padding-bottom:clamp(56px,8vw,104px);padding-top:120px}
.hero .hl{overflow:hidden;display:block}
.hero .hl span{display:block;transform:translateY(105%);transition:transform .9s var(--e)}
.hero.ready .hl:nth-child(1) span{transition-delay:.15s}
.hero.ready .hl:nth-child(2) span{transition-delay:.28s}
.hero.ready .hl:nth-child(3) span{transition-delay:.41s}
.hero.ready .hl span{transform:translateY(0)}
.hero .k{opacity:0;transform:translateY(14px);transition:opacity .7s var(--e) .1s,transform .7s var(--e) .1s}
.hero.ready .k{opacity:1;transform:none}
.hero h1{color:#fff;max-width:15ch;margin-top:24px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .sub,.hero .cta-row,.hero .scroll{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e),transform .7s var(--e)}
.hero.ready .sub{transition-delay:.62s}
.hero.ready .cta-row{transition-delay:.74s}
.hero.ready .scroll{transition-delay:.9s}
.hero.ready .sub,.hero.ready .cta-row,.hero.ready .scroll{opacity:1;transform:none}
.hero .sub{margin-top:26px;color:#CBD4E4;max-width:48ch;font-size:clamp(16px,1.5vw,19px)}
.hero .cta-row{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.hero .scroll{margin-top:clamp(40px,5vw,64px);display:inline-flex;align-items:center;gap:12px;font-family:var(--tx);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#9FB0C8}
.hero .scroll .mo{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;position:relative;flex:0 0 auto}
.hero .scroll .mo::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:#fff;transform:translateX(-50%);animation:mo 1.8s var(--e) infinite}
@keyframes mo{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ===== Métricas ===== */
.metrics{background:var(--navy);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.metrics .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.metrics .m{padding:clamp(34px,4vw,54px) clamp(20px,2.4vw,40px);border-left:1px solid rgba(255,255,255,.1);transition:background .3s var(--e)}
.metrics .m:first-child{border-left:0;padding-left:0}
.metrics .m:hover{background:rgba(255,255,255,.03)}
.metrics .m b{display:block;font-family:var(--hd);font-weight:800;font-size:clamp(40px,5.5vw,72px);color:#fff;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.metrics .m b i{font-style:normal;color:var(--red);font-size:.5em;margin-left:2px}
.metrics .m span{display:block;margin-top:16px;font-family:var(--tx);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#93A0B8;line-height:1.5}
.metrics .m:hover b{color:#fff}

/* ===== Marquee ===== */
.marquee{background:var(--ink);color:#fff;padding:26px 0;overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;gap:0;animation:mq 32s linear infinite;will-change:transform}
.marquee span{font-family:var(--hd);font-weight:800;font-size:clamp(22px,3vw,40px);letter-spacing:-.02em;padding:0 34px;color:#fff}
.marquee span.x{color:var(--red);font-size:.42em;vertical-align:middle;padding:0 26px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ===== Operación (storytelling scroll) ===== */
.op .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:start;margin-top:clamp(40px,5vw,64px)}
.op .media{position:sticky;top:14vh;height:72vh;border-radius:4px;overflow:hidden;background:var(--navy)}
.op .media .ph{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--e)}
.op .media .ph.on{opacity:1}
.op .media .ph img{width:100%;height:100%;object-fit:cover}
.op .media .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,29,63,.65))}
.op .media .cap{position:absolute;left:26px;bottom:24px;z-index:2;color:#fff}
.op .media .cap .n{font-family:var(--hd);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--red)}
.op .media .cap .t{font-family:var(--hd);font-weight:800;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;margin-top:6px}
.op .steps{position:relative;padding-left:38px}
.op .steps::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.op .steps .prog{position:absolute;left:11px;top:8px;width:2px;background:var(--red);height:0;transition:height .2s linear}
.op .st{position:relative;padding:clamp(20px,2.4vw,30px) 0;opacity:.4;transition:opacity .4s var(--e)}
.op .st.on{opacity:1}
.op .st .dot{position:absolute;left:-33px;top:calc(clamp(20px,2.4vw,30px) + 6px);width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:border-color .4s,transform .4s var(--e)}
.op .st.on .dot{border-color:var(--red);transform:scale(1.25)}
.op .st .no{font-family:var(--hd);font-weight:800;font-size:13px;color:var(--red);letter-spacing:.08em}
.op .st h3{font-size:clamp(22px,2.8vw,34px);color:var(--ink);margin-top:6px}
.op .st p{font-family:var(--tx);font-size:15px;color:var(--body);margin-top:10px;max-width:40ch}

/* ===== Líneas interactivas ===== */
.lines .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,4vw,64px);align-items:stretch;margin-top:clamp(40px,5vw,60px)}
.lines .tabs{display:flex;flex-direction:column;justify-content:center;gap:6px;border-left:2px solid var(--line)}
.lines .tab{position:relative;text-align:left;background:none;border:0;cursor:pointer;padding:clamp(16px,2vw,26px) 26px;font-family:var(--hd);font-weight:800;font-size:clamp(26px,3.6vw,46px);letter-spacing:-.02em;color:#C3C9D4;line-height:1;transition:color .35s var(--e),padding-left .35s var(--e)}
.lines .tab .idx{font-family:var(--tx);font-weight:700;font-size:13px;color:var(--muted);letter-spacing:.1em;margin-right:14px;vertical-align:middle}
.lines .tab::before{content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:2px;height:0;background:var(--red);transition:height .35s var(--e)}
.lines .tab:hover{color:var(--ink)}
.lines .tab.on{color:var(--ink);padding-left:36px}
.lines .tab.on::before{height:64%}
.lines .panel{position:relative;border-radius:4px;overflow:hidden;background:var(--navy);min-height:clamp(380px,46vw,520px)}
.lines .pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--e)}
.lines .pane.on{opacity:1;visibility:visible}
.lines .pane .fig{position:absolute;inset:0}
.lines .pane .fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s var(--e)}
.lines .pane.on .fig img{transform:scale(1)}
.lines .pane .fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,17,36,.9) 0%,rgba(8,17,36,.55) 55%,rgba(8,17,36,.2) 100%)}
.lines .pane .txt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,3vw,44px)}
.lines .pane .txt h3{color:#fff;font-size:clamp(26px,3vw,38px)}
.lines .pane .txt p{color:#CBD4E4;font-family:var(--tx);font-size:16px;margin-top:12px;max-width:38ch}
.lines .pane .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.lines .pane .chips span{font-family:var(--tx);font-weight:600;font-size:12.5px;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:2px;padding:7px 13px}
.lines .pane .al{margin-top:26px;color:#FF7A80}

/* ===== Capacidad ===== */
.cap .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}
.cap .media{position:sticky;top:16vh;border-radius:4px;overflow:hidden}
.cap .media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cap .media .badge{position:absolute;left:0;bottom:26px;z-index:3;background:var(--red);color:#fff;font-family:var(--tx);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:11px 20px}
.cap .rows{display:grid}
.cap .row{padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:24px;transition:padding-left .3s var(--e)}
.cap .row:last-child{border-bottom:1px solid var(--line)}
.cap .row:hover{padding-left:12px}
.cap .row.tot{border-top:2px solid var(--navy)}
.cap .row b{font-family:var(--hd);font-weight:800;font-size:clamp(38px,5vw,64px);color:var(--ink);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:3.4ch}
.cap .row b i{font-style:normal;color:var(--red);font-size:.42em;margin-left:2px}
.cap .row.tot b{color:var(--red)}
.cap .row .lb{font-family:var(--tx)}
.cap .row .lb strong{display:block;font-weight:700;font-size:17px;color:var(--ink)}
.cap .row .lb span{display:block;font-size:14px;color:var(--muted);margin-top:3px}

/* ===== Logística ===== */
.logi{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.logi .head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.logi .pano{margin-top:clamp(36px,4vw,52px);border-radius:4px;overflow:hidden;position:relative}
.logi .pano img{width:100%;aspect-ratio:21/8;object-fit:cover}
.logi .pano::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,17,36,.7))}
.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:clamp(30px,3vw,44px)}
.fleet .fv{background:var(--navy);padding:clamp(22px,2.4vw,32px);transition:background .35s var(--e)}
.fleet .fv:hover{background:#0E2347}
.fleet .fv .no{font-family:var(--tx);font-weight:700;font-size:12px;color:#FF7A80;letter-spacing:.1em}
.fleet .fv svg{width:44px;height:44px;stroke:#fff;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin:16px 0 18px;opacity:.9}
.fleet .fv b{display:block;font-family:var(--hd);font-weight:800;font-size:17px;color:#fff;letter-spacing:-.01em}
.fleet .fv span{display:block;font-family:var(--tx);font-size:13px;color:#9FB0C8;margin-top:5px}
@media(max-width:820px){.fleet{grid-template-columns:1fr 1fr}}

/* ===== Ruta ===== */
.ruta .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,5vw,72px);align-items:center}
.ruta .map{position:relative}
.ruta svg{width:100%;height:auto;overflow:visible}
.ruta .road{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s var(--e)}
.ruta.in .road{stroke-dashoffset:0}
.ruta .city{opacity:0;transition:opacity .5s var(--e)}
.ruta.in .city{opacity:1}
.ruta.in .city.c2{transition-delay:.5s}.ruta.in .city.c3{transition-delay:.9s}.ruta.in .city.c4{transition-delay:1.3s}
.ruta .hub circle{fill:var(--red)}
.ruta .pin circle{fill:#fff;stroke:var(--navy);stroke-width:2}
.ruta .lbl{font-family:var(--hd);font-weight:800;font-size:15px;fill:var(--ink);letter-spacing:-.01em}
.ruta .lbl.hub{fill:var(--navy);font-size:17px}
.ruta .ring{fill:none;stroke:var(--red);stroke-width:1.5;opacity:.35;transform-origin:center;animation:ring 2.6s var(--e) infinite}
@keyframes ring{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.8);opacity:0}}

/* ===== Marcas (logo wall) ===== */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,4.5vw,58px)}
.brands .bl{background:#fff;aspect-ratio:16/9;display:grid;place-items:center;padding:22px;overflow:hidden}
.brands .bl img{max-height:54px;max-width:78%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transform:scale(.96);transition:filter .4s var(--e),opacity .4s var(--e),transform .4s var(--e)}
.brands .bl:hover img{filter:none;opacity:1;transform:scale(1)}
@media(max-width:900px){.brands{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.brands{grid-template-columns:repeat(2,1fr)}}

/* ===== Experiencia (número gigante) ===== */
.exp{background:var(--bg-warm);position:relative;overflow:hidden}
.exp .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.exp .big{font-family:var(--hd);font-weight:800;font-size:clamp(140px,26vw,420px);line-height:.8;letter-spacing:-.06em;color:var(--navy);font-variant-numeric:tabular-nums}
.exp .big i{font-style:normal;color:var(--red)}
.exp .tx h2{margin-bottom:16px}
.exp .media{border-radius:4px;overflow:hidden}
.exp .media img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:820px){.exp .grid{grid-template-columns:1fr}.exp .big{font-size:clamp(120px,44vw,240px)}}

/* ===== Por qué (filas editoriales) ===== */
.why{margin-top:clamp(38px,4vw,56px);border-top:1px solid var(--line)}
.why .row{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(28px,3.4vw,46px) 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--e)}
.why .row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--bg-soft);z-index:-1;transition:width .4s var(--e)}
.why .row:hover{padding-left:24px}
.why .row:hover::before{width:100%}
.why .row .no{font-family:var(--hd);font-weight:800;font-size:clamp(14px,1.4vw,17px);color:var(--red);letter-spacing:.06em}
.why .row h3{font-size:clamp(24px,3.4vw,44px);color:var(--ink);letter-spacing:-.03em}
.why .row p{font-family:var(--tx);font-size:15.5px;color:var(--body);max-width:44ch;margin-top:6px}
.why .row .ar{width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;transition:background .4s var(--e),border-color .4s var(--e)}
.why .row .ar svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:2;transition:stroke .4s,transform .4s var(--e)}
.why .row:hover .ar{background:var(--red);border-color:var(--red)}
.why .row:hover .ar svg{stroke:#fff;transform:translateX(3px)}
@media(max-width:720px){.why .row{grid-template-columns:1fr;gap:8px}.why .row .ar{display:none}}

/* ===== CTA final ===== */
.cta{position:relative;background:var(--navy);color:#fff;overflow:hidden;text-align:center}
.cta .bg{position:absolute;inset:0}
.cta .bg img{width:100%;height:100%;object-fit:cover;opacity:.18}
.cta .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,29,63,.82),rgba(8,17,36,.94))}
.cta .wrap{position:relative;z-index:2}
.cta .h2{color:#fff;max-width:18ch;margin:0 auto}
.cta .lead{color:#C3CDDE;margin:22px auto 0;text-align:center}
.cta .cta-row{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ===== Contacto ===== */
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}
.contact .info .h2{margin-bottom:26px}
.contact .cx{display:grid;gap:2px;margin-top:8px}
.contact .cx .it{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.contact .cx .it:first-child{padding-top:0}
.contact .cx .ii{width:42px;height:42px;display:grid;place-items:center;background:var(--bg-soft);flex:0 0 auto}
.contact .cx .ii svg{width:19px;height:19px;stroke:var(--navy);fill:none;stroke-width:1.8}
.contact .cx b{font-family:var(--hd);font-weight:800;font-size:13px;color:var(--ink);display:block}
.contact .cx a,.contact .cx span{font-family:var(--tx);font-size:15px;color:var(--body)}.contact .cx a:hover{color:var(--red)}
.form{display:grid;gap:0}
.field{position:relative;margin-bottom:26px}
.field input,.field select,.field textarea{width:100%;padding:12px 2px;border:0;border-bottom:1.5px solid var(--line);background:transparent;font:inherit;font-size:16px;color:var(--ink);transition:border-color .3s var(--e)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy)}
.field label{position:absolute;left:2px;top:12px;font-family:var(--tx);font-size:16px;color:var(--muted);pointer-events:none;transition:transform .3s var(--e),font-size .3s var(--e),color .3s var(--e)}
.field.f label,.field input:focus+label,.field select:focus+label,.field textarea:focus+label{transform:translateY(-22px);font-size:12px;color:var(--red);letter-spacing:.04em}
.field.sel label{transform:translateY(-22px);font-size:12px;color:var(--muted)}
.field textarea{resize:vertical;min-height:90px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* ===== Footer ===== */
footer{background:var(--navy);color:#93A0B8;border-top:3px solid var(--red)}
footer .top{padding:clamp(56px,6vw,82px) 0 46px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px}
.f-brand .fl{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.f-brand .fl img{height:48px}
.f-brand .fl b{font-family:var(--hd);font-weight:800;font-size:18px;color:#fff}
.f-brand p{font-family:var(--tx);font-size:14.5px;line-height:1.6;max-width:32ch}
footer h4{font-family:var(--hd);color:#fff;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 20px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
footer ul a{font-family:var(--tx);font-size:14.5px;color:#93A0B8;transition:color .2s,padding-left .2s var(--e)}
footer ul a:hover{color:#fff;padding-left:5px}
.f-c .row{display:flex;gap:11px;font-family:var(--tx);font-size:14.5px;margin-bottom:13px;align-items:flex-start}
.f-c svg{width:16px;height:16px;stroke:#FF7A80;fill:none;stroke-width:2;flex:0 0 auto;margin-top:4px}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 34px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--tx);font-size:12.5px;color:#6E7A92}
.f-bottom a{color:#6E7A92}.f-bottom a:hover{color:#fff}
.f-legal{display:flex;gap:20px;flex-wrap:wrap}

/* ===== Flotante ===== */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(227,6,19,.6);transition:transform .25s var(--e)}
.wa-float:hover{transform:scale(1.08)}.wa-float svg{width:29px;height:29px}

/* ===== Progreso de scroll ===== */
.sprog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:100;transition:width .1s linear}

/* ===== Menú móvil fullscreen ===== */
.mnav{position:fixed;inset:0;z-index:100;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);transform:translateY(-100%);transition:transform .55s var(--e);visibility:hidden}
.mnav.open{transform:translateY(0);visibility:visible}
.mnav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--hd);font-weight:800;font-size:clamp(28px,8vw,44px);letter-spacing:-.02em;color:#fff}
.mnav a .i{font-family:var(--tx);font-weight:700;font-size:14px;color:#FF7A80;letter-spacing:.1em}
.mnav .foot{margin-top:36px;display:flex;flex-direction:column;gap:16px}
.mnav .foot .btn{width:100%}
.mnav .foot .cc{font-family:var(--tx);font-size:14px;color:#9FB0C8}
.mnav .foot .cc a{font-size:14px;color:#fff}

/* ===== Responsive ===== */
@media(max-width:1000px){
  .op .grid,.lines .grid,.cap .grid,.ruta .grid,.exp .grid,.contact .grid{grid-template-columns:1fr;gap:34px}
  .op .media,.cap .media{position:relative;top:0;height:auto}
  .op .media{aspect-ratio:16/10}
  .lines .tabs{flex-direction:row;flex-wrap:wrap;border-left:0;border-bottom:2px solid var(--line);gap:0}
  .lines .tab{font-size:clamp(20px,6vw,28px);padding:14px 16px}
  .lines .tab.on{padding-left:16px}.lines .tab.on::before{display:none}
  .lines .tab.on{box-shadow:inset 0 -2px 0 var(--red)}
  .metrics .wrap{grid-template-columns:1fr 1fr}
  .metrics .m:nth-child(odd){border-left:0;padding-left:0}
  .metrics .m:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
  .logi .head{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .hdr .menu,.hdr .nav-r .btn{display:none}
  .hdr .burger{display:block}
  .row2{grid-template-columns:1fr;gap:26px}
  .cap .rows .row b{font-size:clamp(34px,12vw,52px)}
  .fleet{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr}
  .f-bottom{flex-direction:column}
  .hero{align-items:center}
  /* En móvil el video se recorta; refuerza el velo para que el titular y el texto queden nítidos sobre el kinetic type */
  .hero .bg::after{background:linear-gradient(180deg,rgba(8,17,36,.88) 0%,rgba(8,17,36,.82) 52%,rgba(8,17,36,.93) 100%)}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .rv,.rv-l{opacity:1!important;transform:none!important}
  .mask::after,.hero .veil{display:none}
  .mask img,.hero .bg img,.lines .pane .fig img{transform:none!important}
  .hero .hl span,.hero .k,.hero .sub,.hero .cta-row,.hero .scroll{transform:none!important;opacity:1!important}
  .marquee .track,.hero .scroll .mo::after,.ruta .ring{animation:none!important}
  .ruta .road{stroke-dashoffset:0!important}
  .ruta .city{opacity:1!important}
  .cur{display:none!important}
}

/* ===== Páginas internas (líneas / logística) ===== */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:clamp(140px,16vw,190px) 0 clamp(56px,7vw,88px)}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 85% -10%,rgba(227,6,19,.16),transparent 55%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1}
.breadcrumb{display:flex;gap:9px;align-items:center;font-family:var(--tx);font-weight:600;font-size:13px;color:#9FB0C8;margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a:hover{color:#fff}.breadcrumb svg{width:14px;height:14px;stroke:#5f7099;fill:none;stroke-width:2}
.breadcrumb .cur{color:#fff}
.page-hero .h1{color:#fff;max-width:20ch;margin-top:14px}
.page-hero .lead{color:#CBD4E4;margin-top:18px}
.prose{max-width:74ch}
.prose p{font-family:var(--tx);font-size:clamp(16px,1.35vw,18px);line-height:1.78;color:var(--body);margin-bottom:18px}
.prose p b{color:var(--ink);font-weight:700}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(30px,3vw,44px)}
.guide{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);padding:26px}
.guide .g-n{font-family:var(--tx);font-weight:800;font-size:12.5px;color:var(--red);letter-spacing:.06em}
.guide h4{font-family:var(--hd);font-size:16.5px;font-weight:800;color:var(--ink);margin:9px 0}
.guide p{font-family:var(--tx);font-size:14px;color:var(--body);line-height:1.62}
@media(max-width:820px){.guides{grid-template-columns:1fr}}

/* ===================== REFINAMIENTOS PREMIUM 9.5 ===================== */
/* Operación: fase activa más grande, dato operativo, caption único */
.op .st{opacity:.32;transition:opacity .45s var(--e),transform .45s var(--e)}
.op .st.done{opacity:.55}
.op .st.on{opacity:1}
.op .st h3{transition:font-size .4s var(--e),color .4s var(--e)}
.op .st.on h3{font-size:clamp(26px,3.4vw,40px)}
.op .st .dato{display:inline-block;margin-top:14px;font-family:var(--tx);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);opacity:0;max-height:0;overflow:hidden;transition:opacity .4s var(--e),max-height .4s var(--e),margin .4s var(--e)}
.op .st.on .dato{opacity:1;max-height:40px}
.op .media .opcap{position:absolute;left:26px;bottom:24px;z-index:3;color:#fff}
.op .media .opcap .n{font-family:var(--hd);font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--red)}
.op .media .opcap .t{font-family:var(--hd);font-weight:800;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;margin-top:6px}

/* Líneas: indicador 01/03 */
.lines .panel .lprog{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:14px;padding:18px 22px}
.lines .panel .lprog span#lprogn{font-family:var(--hd);font-weight:800;font-size:13px;letter-spacing:.1em;color:#fff}
.lines .panel .lprog .lbar{flex:1;height:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.lines .panel .lprog .lbar i{position:absolute;left:0;top:0;height:100%;width:33%;background:var(--red);transition:width .5s var(--e)}

/* Flota: catálogo interactivo */
.fleetc{margin-top:clamp(30px,3vw,44px);outline:none}
.fc-stage{position:relative;background:#0E2347;border:1px solid rgba(255,255,255,.12);min-height:clamp(260px,30vw,340px)}
.fc-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;opacity:0;visibility:hidden;transform:scale(1.02);transition:opacity .55s var(--e),transform .55s var(--e)}
.fc-slide.on{opacity:1;visibility:visible;transform:scale(1)}
.fc-ic{display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.1)}
.fc-ic svg{width:clamp(90px,14vw,150px);height:auto;stroke:#fff;fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.fc-info{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,3vw,44px)}
.fc-info .fc-no{font-family:var(--hd);font-weight:800;font-size:13px;color:#FF7A80;letter-spacing:.1em}
.fc-info h3{color:#fff;font-size:clamp(26px,3.4vw,44px);margin:10px 0 4px}
.fc-info p{font-family:var(--tx);font-size:15px;color:#9FB0C8;margin-bottom:18px}
.fc-tag{align-self:flex-start;font-family:var(--tx);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 14px}
.fc-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.fc-btn{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;font-family:var(--tx);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:13px 20px;cursor:pointer;transition:background .3s var(--e),border-color .3s var(--e)}
.fc-btn:hover{background:var(--red);border-color:var(--red)}
.fc-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.fc-count{font-family:var(--hd);font-weight:800;font-size:15px;color:#9FB0C8}.fc-count b{color:#fff}
@media(max-width:640px){.fc-slide{grid-template-columns:1fr}.fc-ic{display:none}.fc-nav .fc-btn span{display:none}}

/* Cobertura oscura */
.ruta.dark{background:var(--navy);color:#fff}
.ruta.dark .lbl{fill:#fff}.ruta.dark .lbl.hub{fill:#fff}
.ruta.dark .pin circle{fill:#fff;stroke:var(--navy)}
.cov-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.cov-tags span{font-family:var(--tx);font-weight:600;font-size:13px;color:#DDE4F0;border:1px solid rgba(255,255,255,.2);padding:8px 15px}
.cov-tags span:first-child{background:var(--red);border-color:var(--red);color:#fff}

/* Marcas: wall aireado */
.brands.airy{background:transparent;border:0;gap:clamp(24px,3vw,44px)}
.brands.airy .bl{background:transparent;aspect-ratio:auto;height:clamp(70px,8vw,96px)}
.brands.airy .bl img{max-height:56px}

/* Capacidad: prominencia del total */
.cap .row.tot{padding-top:clamp(30px,3.4vw,46px)}
.cap .row.tot b{font-size:clamp(46px,6.5vw,84px)}

/* Historia */
.hist-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.hist-media{border-radius:4px;overflow:hidden}
.hist-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:900px){.hist-grid{grid-template-columns:1fr;gap:30px}}

/* Acordeón "Por qué" */
.acc{margin-top:clamp(38px,4vw,56px);border-top:1px solid var(--line)}
.acci{border-bottom:1px solid var(--line)}
.acch{width:100%;display:flex;align-items:center;gap:clamp(18px,3vw,40px);background:none;border:0;cursor:pointer;text-align:left;padding:clamp(24px,3vw,38px) 4px;transition:padding-left .35s var(--e)}
.acch:hover{padding-left:20px}
.acch .no{font-family:var(--hd);font-weight:800;font-size:clamp(13px,1.3vw,16px);color:var(--red);letter-spacing:.06em;flex:0 0 auto}
.acch .tt{flex:1;font-family:var(--hd);font-weight:800;font-size:clamp(24px,3.4vw,42px);letter-spacing:-.03em;color:var(--ink)}
.acch .pm{position:relative;width:26px;height:26px;flex:0 0 auto}
.acch .pm::before,.acch .pm::after{content:"";position:absolute;background:var(--red);border-radius:2px;transition:transform .35s var(--e)}
.acch .pm::before{left:0;right:0;top:12px;height:2.5px}
.acch .pm::after{top:0;bottom:0;left:12px;width:2.5px}
.acci.open .acch .pm::after{transform:scaleY(0)}
.accb{max-height:0;overflow:hidden;transition:max-height .45s var(--e)}
.acci.open .accb{max-height:200px}
.accb p{font-family:var(--tx);font-size:16px;color:var(--body);line-height:1.65;max-width:60ch;padding:0 4px clamp(24px,3vw,34px) calc(clamp(13px,1.3vw,16px) + clamp(18px,3vw,40px))}
@media(max-width:640px){.accb p{padding-left:4px}.acch .tt{font-size:clamp(22px,7vw,30px)}}

/* Métricas: línea roja que avanza */
.metrics .mline{height:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.metrics .mline i{display:block;height:100%;width:0;background:var(--red);transition:width 1.1s var(--e)}
.metrics .mline.go i{width:100%}

/* Flota: catálogo con foto real */
.fc-stage{min-height:clamp(340px,44vw,540px)}
.fc-slide{display:block}
.fc-fig{position:absolute;inset:0;overflow:hidden}
.fc-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 6s var(--e)}
.fc-slide.on .fc-fig img{transform:scale(1)}
.fc-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,17,36,.92) 0%,rgba(8,17,36,.5) 42%,rgba(8,17,36,.08) 100%)}
.fc-info{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(28px,3.5vw,50px);max-width:60%}
.fc-info h3{font-size:clamp(24px,3vw,40px)}
@media(max-width:640px){.fc-info{max-width:88%}.fc-fig::after{background:linear-gradient(90deg,rgba(8,17,36,.9),rgba(8,17,36,.5))}}

/* ===== Ajustes de feedback: flota en tarjetas + encuadre ===== */
/* Encuadre: menos recorte vertical agresivo (solo desktop para no romper móvil) */
@media(min-width:1001px){.op .media{height:60vh}}
.op .media .ph img{object-position:center}
.cap .media img{aspect-ratio:4/3;object-position:center}

/* ===== Flota: catálogo interactivo ===== */
.fleetx{margin-top:clamp(30px,3vw,44px);outline:none}
.fx-stage{position:relative;aspect-ratio:16/8;min-height:clamp(320px,42vw,520px);background:#0E2347;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.fx-fig{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s var(--e)}
.fx-fig.on{opacity:1;visibility:visible}
.fx-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s var(--e)}
.fx-fig.on img{transform:scale(1)}
.fx-stage::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,17,36,.94) 0%,rgba(8,17,36,.62) 40%,rgba(8,17,36,.05) 100%)}
.fx-panel{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(26px,3.4vw,50px);max-width:min(560px,64%)}
.fx-pane{opacity:0;visibility:hidden;position:absolute;left:clamp(26px,3.4vw,50px);right:clamp(26px,3.4vw,50px);bottom:clamp(26px,3.4vw,50px);transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.fx-pane.on{opacity:1;visibility:visible;position:static;transform:none}
.fx-tag{display:inline-block;font-family:var(--tx);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(227,6,19,.92);padding:7px 13px}
.fx-panel h3{color:#fff;font-size:clamp(24px,3vw,42px);letter-spacing:-.02em;margin:14px 0 8px}
.fx-panel p{font-family:var(--tx);font-size:clamp(14px,1.5vw,16px);color:#C4D0E4;line-height:1.6;max-width:46ch}
.fx-specs{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.fx-specs li{display:flex;flex-direction:column;gap:3px;padding:11px 15px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:3px}
.fx-specs span{font-family:var(--tx);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8FA2BE}
.fx-specs b{font-family:var(--hd);font-weight:700;font-size:14px;color:#fff}
.fx-nav{position:absolute;right:clamp(20px,2.5vw,34px);top:clamp(20px,2.5vw,34px);z-index:3;display:flex;align-items:center;gap:14px}
.fx-arrow{width:46px;height:46px;display:grid;place-items:center;background:rgba(8,17,36,.55);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;border-radius:50%;transition:background .3s var(--e),border-color .3s var(--e)}
.fx-arrow:hover{background:var(--red);border-color:var(--red)}
.fx-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-count{font-family:var(--hd);font-weight:800;font-size:15px;color:#9FB0C8}.fx-count b{color:#fff}
.fx-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.fx-thumb{position:relative;background:none;border:1px solid rgba(255,255,255,.12);border-radius:3px;overflow:hidden;cursor:pointer;padding:0;transition:border-color .3s var(--e),transform .3s var(--e)}
.fx-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;opacity:.62;transition:opacity .35s var(--e),transform .5s var(--e)}
.fx-thumb span{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;font-family:var(--tx);font-weight:700;font-size:12px;color:#fff;text-align:left;background:linear-gradient(180deg,transparent,rgba(8,17,36,.85));z-index:1}
.fx-thumb:hover{border-color:rgba(255,255,255,.4)}
.fx-thumb:hover img{opacity:.85;transform:scale(1.05)}
.fx-thumb.on{border-color:var(--red)}
.fx-thumb.on img{opacity:1}
.fx-thumb.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);z-index:2}
@media(max-width:820px){
  .fx-stage{aspect-ratio:auto;min-height:0}
  .fx-fig{position:relative;display:none}
  .fx-fig.on{display:block}
  .fx-fig img{aspect-ratio:16/10}
  .fx-stage::after{top:auto;height:82%;background:linear-gradient(180deg,transparent,rgba(8,17,36,.95))}
  .fx-panel{position:relative;max-width:100%;padding:clamp(20px,5vw,30px)}
  .fx-pane{position:absolute;left:clamp(20px,5vw,30px);right:clamp(20px,5vw,30px);bottom:clamp(20px,5vw,30px)}
  .fx-pane.on{position:static}
  .fx-nav{top:auto;bottom:14px;right:14px}
  .fx-arrow{width:42px;height:42px}
}
@media(max-width:560px){.fx-thumbs{grid-template-columns:repeat(2,1fr)}.fx-thumb span{font-size:11px}}

/* ===== Operación: 40/60 desktop + móvil con foto por fase (brief pt.5-6) ===== */
@media(min-width:1001px){.op .grid{grid-template-columns:2fr 3fr}}
.op .st .st-media{display:none}
@media(max-width:1000px){
  .op .media{display:none}
  .op .steps{padding-left:34px}
  .op .st{opacity:1;padding:22px 0}
  .op .st .dato{opacity:1;max-height:none;margin-top:12px}
  .op .st h3{font-size:26px}
  .op .st .st-media{display:block;margin-top:16px;border-radius:3px;overflow:hidden;aspect-ratio:16/10}
  .op .st .st-media img{width:100%;height:100%;object-fit:cover;display:block}
}

/* ===== Nuestra operación: diseño dinámico ===== */
/* Marcador rojo que viaja por la línea-ruta (almacén → negocio) */
.op .steps .prog{transition:height .35s var(--e)}
.op .steps .prog::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(227,6,19,.22);animation:oppulse 1.8s var(--e) infinite}
@keyframes oppulse{0%,100%{box-shadow:0 0 0 4px rgba(227,6,19,.22)}50%{box-shadow:0 0 0 10px rgba(227,6,19,0)}}
/* Etapa activa: leve avance */
.op .st.on{transform:translateX(7px)}
/* Ken Burns en la foto activa */
.op .media .ph.on img{animation:opken 8s var(--e) forwards}
@keyframes opken{from{transform:scale(1.02)}to{transform:scale(1.11)}}
/* Número gigante fantasma que cambia por fase */
.op .media .opbig{position:absolute;top:2px;right:22px;z-index:2;font-family:var(--hd);font-weight:900;font-size:clamp(130px,17vw,240px);line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.2);text-shadow:0 2px 30px rgba(8,17,36,.45);pointer-events:none}
.op .media .opbig.go{animation:opbigin .6s var(--e)}
@keyframes opbigin{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
/* Barra de progreso 0X/06 en el caption */
.op .media .opcap .opbar{width:130px;height:3px;background:rgba(255,255,255,.22);border-radius:2px;margin-bottom:15px;overflow:hidden}
.op .media .opcap .opbar i{display:block;height:100%;width:16%;background:var(--red);transition:width .5s var(--e)}
.op .media .opcap .n{display:flex;align-items:center;gap:14px}
.op .media .opcap .n .c{color:rgba(255,255,255,.72);font-weight:700;font-size:12px;letter-spacing:.1em}
.op .media .opcap.swap .n,.op .media .opcap.swap .t{animation:opswap .5s var(--e)}
@keyframes opswap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .op .steps .prog::after{animation:none}
  .op .media .ph.on img{animation:none;transform:scale(1.04)}
  .op .media .opbig.go{animation:none}
  .op .media .opcap.swap .n,.op .media .opcap.swap .t{animation:none}
}