/* ============================================================
   THE DRIVER STUDIO — Portafolio vertical (scrollytelling)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Saira:wght@400;500;600;700&display=swap');

:root{
  --navy:#0B1626; --navy-2:#13243A; --navy-3:#1B3354; --line:#274062;
  --red:#FF3B1F; --red-deep:#DE2A0E; --red-soft:#ff6a52;
  --white:#fff; --muted:#9DB0C6; --muted-2:#6E859E;
  --display:'Saira Condensed',system-ui,sans-serif;
  --body:'Saira',system-ui,sans-serif;
  --pad:clamp(22px,5vw,90px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--navy); color:var(--white); font-family:var(--body);
  overflow-x:hidden;            /* fallback navegadores viejos */
  overflow-x:clip;              /* recorta el desborde sin romper position:sticky */
  -webkit-font-smoothing:antialiased;
  width:100%; max-width:100%;
}
img{display:block;max-width:100%}
/* bloquea el scroll de fondo mientras el menú móvil está abierto */
body.nav-locked{overflow:hidden}
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:.005em}
.red{color:var(--red)}
.kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.34em;font-size:clamp(13px,1.4vw,17px);color:var(--red)}

/* ---------- film grain + global texture ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TOP PROGRESS BAR
   ============================================================ */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--red),var(--red-soft));z-index:60;box-shadow:0 0 18px rgba(255,59,31,.6)}

/* ---------- fixed top brand bar ---------- */
.brandbar{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:background .4s,padding .4s;
}
.brandbar.solid{background:rgba(11,22,38,.82);backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.brandbar .logo{display:flex;align-items:center;gap:12px;color:#fff}
.brandbar .logo:link,.brandbar .logo:visited,.brandbar .logo:hover,.brandbar .logo:active{color:#fff}
.brandbar .wordmark{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(16px,2vw,21px);letter-spacing:.03em}
.brandbar .cta-mini{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:#fff;text-decoration:none;border:1.5px solid var(--red);padding:9px 18px;border-radius:30px;transition:background .25s}
.brandbar .cta-mini:hover{background:var(--red)}

/* ============================================================
   TACHOMETER — side scroll gauge
   ============================================================ */
.tach{position:fixed;right:clamp(14px,2.5vw,40px);bottom:clamp(20px,4vw,52px);z-index:55;width:96px;height:96px;pointer-events:none}
@media(max-width:720px){.tach{width:72px;height:72px}}
.tach svg{width:100%;height:100%;display:block;transform:rotate(135deg)}
.tach .track{fill:none;stroke:var(--navy-3);stroke-width:7;stroke-linecap:round}
.tach .fill{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,59,31,.7))}
.tach .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:var(--display);font-weight:800}
.tach .pct b{font-size:clamp(16px,2.4vw,24px);line-height:1}
.tach .pct span{font-size:9px;letter-spacing:.2em;color:var(--muted-2);margin-top:2px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,14vh,150px) var(--pad) clamp(60px,10vh,90px);overflow:hidden}
.hero-bg{position:absolute;inset:-8%;z-index:0}
.hero-bg image-slot{width:100%;height:100%}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- hero montage (original mix piece) ---- */
.hero-montage{position:absolute;inset:0;overflow:hidden;background:#0a121f}
.hm-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;will-change:opacity,transform;transform:scale(1.12);filter:saturate(.65) contrast(1.05)}
.hm-clip.is-active{opacity:1;animation:kenburns 7s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.16)}}
/* duotone brand treatment — unifies all clips into Driver Studio look */
.hero-duotone{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,22,38,.55) 0%, rgba(11,22,38,.25) 45%, rgba(11,22,38,.97) 100%),
    radial-gradient(120% 90% at 72% 28%, rgba(255,59,31,.42), transparent 58%),
    linear-gradient(115deg, rgba(11,22,38,.6), rgba(20,40,70,.15) 50%, rgba(255,59,31,.22));
  mix-blend-mode:normal;}
.hero-duotone::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:color;
  background:linear-gradient(135deg, #FF3B1F 0%, #16273D 70%);}
@media(prefers-reduced-motion:reduce){.hm-clip.is-active{animation:none;transform:scale(1.08)}}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(11,22,38,.6),rgba(11,22,38,.45) 40%,rgba(11,22,38,.95)),
  radial-gradient(120% 80% at 70% 20%,rgba(255,59,31,.16),transparent 60%)}
.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%}
.hero .eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hero .eyebrow .bar{height:2px;width:54px;background:var(--red)}
.hero-title{font-size:clamp(58px,15vw,210px);letter-spacing:-.01em}
.hero-title .l2{display:block}
.hero-sub{font-size:clamp(18px,2.4vw,29px);color:var(--muted);max-width:680px;margin-top:clamp(20px,3vw,36px);line-height:1.5}
.hero-sub b{color:#fff;font-weight:600}
.scrolldown{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--display);font-weight:600;letter-spacing:.28em;font-size:12px;color:var(--muted)}
.scrolldown .mouse{width:26px;height:42px;border:2px solid var(--muted);border-radius:16px;position:relative}
.scrolldown .mouse::after{content:"";position:absolute;top:7px;left:50%;width:4px;height:8px;background:var(--red);border-radius:3px;transform:translateX(-50%);animation:wheel 1.5s infinite}
@keyframes wheel{0%{opacity:1;transform:translate(-50%,0)}70%{opacity:0;transform:translate(-50%,12px)}100%{opacity:0}}

/* ============================================================
   VELOCITY MARQUEE
   ============================================================ */
.marquee-clip{overflow:hidden;position:relative;z-index:5}
.marquee{position:relative;z-index:5;background:var(--red);overflow:hidden;padding:16px 0;display:flex;white-space:nowrap;transform:rotate(-1.2deg) scale(1.04);margin:0 -2%}
.marquee.alt{background:var(--navy-2);border-block:1px solid var(--line);transform:rotate(1.2deg) scale(1.04)}
.marq-track{display:flex;gap:46px;padding-right:46px;animation:marq 28s linear infinite;will-change:transform}
.marquee.alt .marq-track{animation-direction:reverse;animation-duration:34s}
.marq-track span{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,4vw,52px);letter-spacing:.02em;display:flex;align-items:center;gap:46px}
.marq-track span::after{content:"◆";font-size:.5em;opacity:.6}
.marquee.alt .marq-track span{color:var(--muted)}
.marquee.alt .marq-track span .red{color:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION SHELL
   ============================================================ */
section.block{position:relative;padding:clamp(80px,12vw,170px) var(--pad);z-index:5}
.wrap{max-width:1240px;margin:0 auto}
.sec-head{margin-bottom:clamp(40px,6vw,72px)}
.sec-head .kicker{display:block;margin-bottom:16px}
.sec-title{font-size:clamp(40px,8vw,104px)}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal.fromL{transform:translateX(-60px)}.reveal.fromL.in{transform:none}
.reveal.fromR{transform:translateX(60px)}.reveal.fromR.in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}}

/* ============================================================
   MANIFESTO — word-by-word ignition
   ============================================================ */
.manifesto{padding:clamp(90px,16vh,200px) var(--pad)}
.manifesto .big{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,6.4vw,92px);line-height:1.22;max-width:1150px;margin:0 auto;text-align:center}
.manifesto .w{transition:color .4s,opacity .4s;color:#2a3f5c}
.manifesto .w.lit{color:#fff}
.manifesto .w.hot{color:var(--red)}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,4vw,56px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(56px,9vw,120px);line-height:.9;color:var(--red)}
.stat .lbl{font-size:clamp(15px,1.8vw,21px);color:var(--muted);margin-top:10px;max-width:240px}

/* ============================================================
   SECTORES — alternating parallax rows
   ============================================================ */
.sector{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);margin-bottom:clamp(40px,7vw,110px)}
.sector:nth-child(even) .sec-media{order:2}
.sector-num{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,78px);color:var(--line);line-height:1}
.sector h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.5vw,72px);margin:6px 0 16px}
.sector p{font-size:clamp(16px,1.9vw,23px);color:var(--muted);line-height:1.55;max-width:440px}
.sec-media{position:relative;height:clamp(280px,42vw,520px);overflow:hidden;border-radius:6px}
.sec-media image-slot, .sec-media img{position:absolute;inset:-12%;width:124%;height:124%}
.sec-media img{object-fit:cover}
@media(max-width:760px){.sector{grid-template-columns:1fr}.sector:nth-child(even) .sec-media{order:0}}

/* ============================================================
   SERVICIOS — sticky scrollytelling pipeline
   ============================================================ */
.pipeline{position:relative}
.pipe-sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:clamp(80px,11vh,120px) var(--pad) clamp(40px,6vh,70px)}
.pipe-grid{max-width:1240px;margin:0 auto;width:100%;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center}
.pipe-left .kicker{display:block;margin-bottom:14px}
.pipe-left h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(42px,7vw,96px);line-height:.92}
.pipe-left p{font-size:clamp(16px,1.9vw,24px);color:var(--muted);margin-top:22px;line-height:1.5;max-width:420px}
.pipe-steps{display:flex;flex-direction:column;gap:14px}
.pstep{display:flex;gap:24px;align-items:flex-start;padding:26px 30px;border-radius:8px;background:var(--navy-2);border-left:4px solid var(--line);opacity:.4;transform:scale(.985);transition:opacity .45s,transform .45s,border-color .45s,background .45s}
.pstep.on{opacity:1;transform:scale(1);border-color:var(--red);background:var(--navy-3)}
.pstep .pn{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,48px);color:var(--red);line-height:1;min-width:64px}
.pstep h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3vw,38px)}
.pstep p{font-size:clamp(15px,1.7vw,22px);color:var(--muted);margin-top:4px;line-height:1.4}
@media(max-width:820px){.pipeline{height:auto!important}.pipe-grid{grid-template-columns:1fr;gap:32px}.pipe-sticky{position:relative;min-height:auto;padding-block:clamp(70px,11vw,120px)}.pstep{opacity:1;transform:none}}

/* ============================================================
   PILARES — grid
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2vw,24px)}
.pillar{background:var(--navy-2);border:1px solid var(--line);border-radius:10px;padding:clamp(26px,3vw,40px);transition:transform .4s,border-color .4s,background .4s}
.pillar:hover{transform:translateY(-8px);border-color:var(--red);background:var(--navy-3)}
.pillar .pno{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,40px);color:var(--red)}
.pillar h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);margin:8px 0 10px}
.pillar p{font-size:clamp(15px,1.7vw,21px);color:var(--muted);line-height:1.45}

/* ============================================================
   EMBUDO
   ============================================================ */
.funnel{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:1100px;margin:0 auto}
.frow{width:var(--w);max-width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.4vw,30px) clamp(26px,4vw,56px);border-radius:8px;background:linear-gradient(90deg,var(--red),var(--red-deep));transform-origin:center;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s;transform:scaleX(.2);opacity:0}
.frow.in{transform:scaleX(1);opacity:1}
.frow>*{transition:opacity .5s .3s;opacity:0}.frow.in>*{opacity:1}
.frow b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.6vw,52px)}
.frow span{font-size:clamp(14px,1.7vw,23px);font-weight:500;opacity:.92;text-align:right}
.frow.f2{background:linear-gradient(90deg,#ec3013,#c4250c)}
.frow.f3{background:linear-gradient(90deg,#d62a10,#a81f09)}
.frow.f4{background:linear-gradient(90deg,#b8230c,#871907)}
.frow.f5{background:var(--navy-2);border:2px solid var(--red)}.frow.f5 b{color:var(--red)}

/* ============================================================
   PROYECTOS — horizontal running strips
   ============================================================ */
.proj-block{padding:clamp(70px,10vw,150px) 0}
.proj-block .sec-head{padding:0 var(--pad)}
.brandrow{margin-bottom:clamp(26px,3.5vw,48px)}
.brandrow .bhead{display:flex;align-items:baseline;gap:18px;padding:0 var(--pad);margin-bottom:16px}
.brandrow .bhead h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,4vw,54px);color:#fff}
.brandrow .bhead em{font-style:normal;color:var(--red);font-family:var(--display);font-weight:700;letter-spacing:.12em;font-size:clamp(12px,1.4vw,16px);text-transform:uppercase}
.strip{display:flex;gap:14px;overflow-x:auto;padding:0 var(--pad);scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.strip::-webkit-scrollbar{display:none}
/* draggable state (mouse) */
.strip.is-live{cursor:grab;scroll-snap-type:none}
.strip.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.strip.dragging img,.strip.dragging .vtile{pointer-events:none}
.strip image-slot, .strip img, .strip .vtile{flex:none;width:clamp(220px,30vw,360px);height:clamp(280px,38vw,440px);scroll-snap-align:start;border-radius:6px;overflow:hidden}
.strip img{object-fit:cover;display:block}
.strip .vtile{position:relative;background:#000}
.strip .vtile video{width:100%;height:100%;object-fit:cover;display:block}
.strip .vtile img{width:100%;height:100%;object-fit:cover;display:block}
.strip .vtile .vbadge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;letter-spacing:.12em;font-size:12px;text-transform:uppercase;background:rgba(11,22,38,.7);backdrop-filter:blur(6px);padding:7px 12px;border-radius:30px;color:#fff}
.strip .vtile .vbadge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.strip .drag-hint{flex:none;align-self:center;color:var(--muted-2);font-family:var(--display);font-weight:700;letter-spacing:.18em;font-size:13px;writing-mode:vertical-rl;text-transform:uppercase;padding:0 8px}

/* pending / próximamente projects */
.row-divider{display:flex;align-items:center;gap:22px;padding:clamp(30px,5vw,60px) var(--pad) clamp(20px,3vw,30px)}
.row-divider .ln{flex:1;height:1px;background:var(--line)}
.row-divider span{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(13px,1.5vw,17px);color:var(--muted-2);white-space:nowrap}
.brandrow.pending .bhead em{color:var(--muted-2);border:1px solid var(--line);padding:5px 13px;border-radius:30px;letter-spacing:.14em}
.strip .eslot{flex:none;width:clamp(220px,30vw,360px);height:clamp(280px,38vw,440px);scroll-snap-align:start;border-radius:6px;border:1.5px dashed var(--navy-line,#33507a);background:repeating-linear-gradient(135deg,rgba(255,59,31,.03) 0 14px,transparent 14px 28px),linear-gradient(180deg,#17293f,#13243a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted);text-align:center;padding:20px;transition:border-color .3s,transform .3s}
.strip .eslot:hover{border-color:var(--red);transform:translateY(-4px)}
.strip .eslot .ei{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--red);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:300;color:var(--red);background:rgba(255,59,31,.08)}
.strip .eslot b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(15px,1.7vw,19px);color:#cdd9e8}
.strip .eslot small{font-size:13px;letter-spacing:.04em;max-width:170px;line-height:1.4;color:var(--muted-2)}

/* ============================================================
   PAQUETES
   ============================================================ */
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(18px,2.4vw,30px);align-items:stretch}
.package{position:relative;background:var(--navy-2);border:1.5px solid var(--line);border-radius:14px;padding:clamp(30px,3.4vw,48px);transition:transform .4s,border-color .4s}
.package:hover{transform:translateY(-10px)}
.package.feature{background:linear-gradient(180deg,#193150,#122440);border-color:var(--red);box-shadow:0 40px 90px rgba(255,59,31,.18)}
.pkg-no{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,42px);color:var(--line)}
.package.feature .pkg-no{color:var(--red-soft)}
.package h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(38px,4.4vw,58px);margin-top:4px}
.pkg-tag{font-size:clamp(16px,1.8vw,23px);color:var(--red);font-weight:600;margin:6px 0 26px}
.package ul{list-style:none;display:flex;flex-direction:column;gap:15px}
.package li{font-size:clamp(16px,1.8vw,23px);color:var(--muted);padding-left:30px;position:relative;line-height:1.35}
.package li::before{content:"▸";position:absolute;left:0;color:var(--red)}
.pkg-ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px;padding:8px 22px;border-radius:30px;white-space:nowrap}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(80px,12vw,160px) var(--pad);overflow:hidden}
.contact-bg{position:absolute;inset:0;z-index:0}
.contact-bg image-slot{width:100%;height:100%}
.contact-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,22,38,.86),rgba(11,22,38,.92)),radial-gradient(90% 70% at 50% 30%,rgba(255,59,31,.2),transparent 60%)}
.contact-inner{position:relative;z-index:2;max-width:1000px}
.contact h2{font-size:clamp(44px,9vw,128px);line-height:.92}
.contact .lead{font-size:clamp(18px,2.4vw,28px);color:var(--muted);margin:clamp(20px,3vw,34px) auto 0;max-width:640px;line-height:1.5}
.contact-list{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2vw,26px);margin-top:clamp(34px,5vw,56px)}
.contact-item{display:flex;align-items:center;gap:14px;font-size:clamp(17px,2vw,26px);color:#fff;text-decoration:none;font-weight:500;background:rgba(19,36,58,.7);border:1px solid var(--line);padding:14px 26px;border-radius:50px;transition:border-color .3s,background .3s}
.contact-item:hover{border-color:var(--red);background:var(--navy-3)}
.contact-item .ic{width:40px;height:40px;flex:none;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:20px}
.foot{position:relative;z-index:5;border-top:1px solid var(--line);padding:34px var(--pad);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;color:var(--muted-2);font-size:14px}
.foot .logo{display:flex;align-items:center;gap:10px;color:#fff}
.foot .logo:link,.foot .logo:visited,.foot .logo:hover,.foot .logo:active{color:#fff}

/* ============================================================
   MOBILE POLISH — alineación y espaciados
   ============================================================ */
@media(max-width:640px){
  .hero{padding-left:22px;padding-right:22px}
  .hero-sub{max-width:100%}
  /* tarjetas de portafolio: se ven ~1.5 por pantalla y arrancan pegadas al borde */
  .strip{gap:12px}
  .strip image-slot,.strip img,.strip .vtile,.strip .eslot{width:clamp(200px,72vw,300px);height:clamp(260px,92vw,400px)}
  .brandrow .bhead{flex-direction:column;align-items:flex-start;gap:4px}
  /* stats y grids centrados y sin desbordes */
  .stat .lbl{max-width:100%}
  .sector p{max-width:100%}
  /* el embudo angosto (width:var(--w) inline) no cabe con texto largo en pantallas chicas:
     en mobile se reduce la diferencia entre filas (sigue viéndose el embudo, pero menos apretado)
     y el título se apila sobre la descripción para que quepan */
  .funnel .frow{padding:18px 20px;flex-direction:column;align-items:flex-start;gap:6px}
  .funnel .frow.f1{width:100%!important}
  .funnel .frow.f2{width:92%!important}
  .funnel .frow.f3{width:84%!important}
  .funnel .frow.f4{width:78%!important}
  .funnel .frow.f5{width:72%!important}
  .frow span{max-width:100%;text-align:left}
  /* evita que el marquee inclinado provoque scroll lateral */
  .marquee{margin-left:-4%;margin-right:-4%}
}
@media(max-width:400px){
  .hero-title{font-size:clamp(46px,14vw,60px)}
  .contact-item{width:100%;justify-content:center}
}
/* tacómetro móvil: número menos pegado al aro (va al final para ganar la cascada) */
@media(max-width:720px){
  .tach .pct b{font-size:16px}
  .tach .pct span{font-size:7px;margin-top:0}
}