/* ===========================================================
   ElectroAudio Tunja — Lujos y Accesorios
   Sistema visual derivado del logo real: negro, rojo #CA0A05,
   azul #0846E9 y el espectro de ecualizador de la marca.
   =========================================================== */

:root{
  /* Marca (muestreados del logo y los artes oficiales) */
  --red:#e00b12;
  --red-hot:#ff2a33;
  --red-deep:#8c0409;
  --blue:#0a52ff;
  --blue-hot:#3b82ff;
  --blue-deep:#042b8f;
  --wa:#25d366;

  /* Superficies */
  --ink:#05060a;
  --ink-2:#080a11;
  --ink-3:#0b0e18;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* Texto */
  --fg:#f3f5f9;
  --mut:#8f97ad;
  --mut-2:#636b80;

  /* Tipografía */
  --f-dis:"Saira Condensed","Arial Narrow",Impact,sans-serif;
  --f-ui:"Chakra Petch",ui-monospace,"Segoe UI",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Métrica */
  --wrap:1220px;
  --gut:clamp(18px,4.2vw,40px);
  --r:16px;
  --r-lg:22px;

  /* Espectro de la marca */
  --spectrum:linear-gradient(90deg,#ff2d55 0%,#ff2bd0 16%,#8b5cf6 31%,#2563ff 48%,#00d4ff 64%,#00e676 81%,#ffd400 100%);
  --ease:cubic-bezier(.22,.8,.26,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--f-body);font-size:clamp(15px,1.05vw,16.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[hidden]{display:none!important}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-dis);font-weight:800;line-height:.96;letter-spacing:-.01em;text-transform:uppercase}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--blue-hot);outline-offset:3px;border-radius:4px}

.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gut)}
.skiplink{position:fixed;left:-999px;top:0;z-index:999;background:var(--red);color:#fff;padding:12px 18px}
.skiplink:focus{left:8px;top:8px}

/* ---------- Tipos compartidos ---------- */
.eyebrow{
  font-family:var(--f-ui);font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mut);display:flex;align-items:center;gap:.6em;margin-bottom:14px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(224,11,18,.6);animation:pulse 2.4s var(--ease) infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,11,18,.55)}70%{box-shadow:0 0 0 11px rgba(224,11,18,0)}100%{box-shadow:0 0 0 0 rgba(224,11,18,0)}}

.h2{font-size:clamp(2.1rem,6.2vw,4rem)}
.h2 em{font-style:normal;color:var(--red);display:inline}
.lede{color:var(--mut);max-width:52ch;margin-top:14px;font-size:1.03rem}

.sechead{margin-bottom:clamp(30px,4.5vw,56px)}
.sechead--center{text-align:center}
.sechead--center .eyebrow{justify-content:center}
.sechead--center .lede{margin-inline:auto}
.sechead--split{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between}

.sec{padding:clamp(64px,9vw,128px) 0;position:relative}
.sec--serv{background:
  radial-gradient(120% 80% at 10% 0%,rgba(10,82,255,.10),transparent 60%),
  radial-gradient(90% 70% at 95% 100%,rgba(224,11,18,.10),transparent 60%),
  var(--ink-2)}
.sec--pol{background:var(--ink)}
.sec--works{background:var(--ink-2)}
.sec--reels{background:var(--ink);overflow:hidden}
.sec--trust{background:
  radial-gradient(100% 60% at 50% 0%,rgba(10,82,255,.08),transparent 65%),var(--ink-2)}
.sec--contact{background:var(--ink);padding-bottom:clamp(40px,5.5vw,76px)}

/* Regla-espectro superior en cada sección */
.sec::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:var(--spectrum);opacity:.26;
}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-ui);font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  padding:13px 22px;border-radius:999px;background:var(--bg);color:#fff;
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
  white-space:nowrap;
}
.btn svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--ease);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:1;animation:shine .8s var(--ease)}
@keyframes shine{to{transform:translateX(100%)}}
.btn--lg{padding:16px 28px;font-size:.92rem}
.btn--wa{--bg:linear-gradient(135deg,var(--red) 0%,#b4060c 100%);box-shadow:0 14px 34px -16px var(--red)}
.btn--wa:hover{box-shadow:0 18px 40px -14px var(--red)}
.btn--ghost{--bg:transparent;border:1px solid var(--line-2);color:var(--fg);box-shadow:none}
.btn--ghost:hover{border-color:var(--fg);background:rgba(255,255,255,.05)}

/* ===========================================================
   PANTALLA DE CARGA — "ENCENDIDO DEL SISTEMA"
   =========================================================== */
.boot{
  position:fixed;inset:0;z-index:1000;background:#000;
  display:grid;place-items:center;
  transition:opacity .5s ease,visibility .5s;
  /* Red de seguridad: si el JS fallara, la intro se retira sola. */
  animation:bootFailsafe .6s 5s forwards;
}
@keyframes bootFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.boot.is-out{opacity:0;visibility:hidden;pointer-events:none}
.boot.is-out .boot__stage{transform:scaleY(.012) scaleX(1.25);filter:brightness(3) blur(1px);transition:transform .45s cubic-bezier(.7,0,.3,1),filter .45s}
body.booting,body.menu-open{overflow:hidden}

.boot__stage{width:min(560px,86vw);position:relative;text-align:center}
.boot__beams{position:absolute;left:0;right:0;top:27%;height:3px;pointer-events:none}
.beam{
  position:absolute;top:0;height:3px;width:0;border-radius:3px;background:#dceaff;
  box-shadow:0 0 18px 4px rgba(150,200,255,.75),0 0 46px 10px rgba(60,130,255,.35);
  animation:beamOut .75s .1s var(--ease) forwards;
}
.beam--l{right:50%}
.beam--r{left:50%}
@keyframes beamOut{from{width:0;opacity:0}20%{opacity:1}to{width:48%;opacity:.9}}

/* El ecualizador dibujado se atenúa justo cuando aparece el emblema real:
   la marca parece ensamblarse a partir de su propio espectro. */
/* Mismo encuadre que el emblema: el logo se ensambla sobre su propio espectro. */
.boot__eq{width:100%;aspect-ratio:847/373;opacity:0;animation:fadeIn .45s .4s forwards,eqHandoff .55s 1s forwards}
@keyframes eqHandoff{to{opacity:.24}}
.boot__emblem{
  position:absolute;left:50%;top:0;translate:-50% 0;width:100%;height:auto;
  opacity:0;animation:emblemIn .9s .85s var(--ease) forwards;
}
@keyframes emblemIn{from{opacity:0;filter:brightness(2.6);transform:scale(1.04)}to{opacity:1;filter:none;transform:scale(1)}}
@keyframes fadeIn{to{opacity:1}}

.boot__wordmark{position:relative;margin:18px auto 0;width:84%;overflow:hidden}
.boot__wordmark img{width:100%;clip-path:inset(0 100% 0 0);animation:wmReveal .85s 1.25s var(--ease) forwards}
@keyframes wmReveal{to{clip-path:inset(0 0 0 0)}}
.boot__wordmark .sweep{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.8) 50%,transparent 60%);
  transform:translateX(-120%);animation:wmSweep 1s 1.3s var(--ease) forwards;mix-blend-mode:screen;
}
@keyframes wmSweep{to{transform:translateX(120%)}}

.boot__meter{height:2px;width:72%;margin:26px auto 0;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.boot__meter b{display:block;height:100%;width:0;background:var(--spectrum);background-size:200% 100%;transition:width .25s linear}
.boot__status{
  margin-top:14px;font-family:var(--f-ui);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mut-2);
  display:flex;gap:.5em;align-items:center;justify-content:center;min-height:1.2em;
}
.boot__caret{width:7px;height:11px;background:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot__skip{
  position:absolute;bottom:clamp(20px,5vh,40px);left:50%;translate:-50% 0;
  font-family:var(--f-ui);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;opacity:0;animation:fadeIn .4s 1.1s forwards;
}
.boot__skip:hover{color:var(--fg);border-color:var(--line-2)}

/* ===========================================================
   NAV
   =========================================================== */
.nav{position:fixed;inset:0 0 auto;z-index:90;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(5,6,10,.82);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line)}
.nav__in{width:min(var(--wrap),100%);margin-inline:auto;padding:14px var(--gut);display:flex;align-items:center;gap:clamp(14px,3vw,34px)}
.nav__logo img{width:clamp(136px,16vw,186px);height:auto}
.nav__links{display:flex;gap:clamp(14px,2vw,28px);margin-left:auto}
.nav__links a{
  font-family:var(--f-ui);font-weight:500;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);
  position:relative;padding:6px 0;transition:color .25s;
}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .35s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:var(--fg)}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}
.nav__cta{padding:10px 18px;font-size:.76rem}
.nav__spectrum{height:1px;background:var(--spectrum);opacity:0;transition:opacity .4s}
.nav.is-stuck .nav__spectrum{opacity:.55}
.nav__burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;padding:0;place-items:center;gap:4px;flex-direction:column}
.nav__burger i{display:block;width:17px;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobmenu{
  position:fixed;inset:68px 0 auto;z-index:89;background:rgba(5,6,10,.97);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);padding:18px var(--gut) 28px;display:grid;gap:4px;
  animation:menuIn .32s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}}
.mobmenu a{font-family:var(--f-dis);font-size:1.6rem;text-transform:uppercase;padding:9px 0;border-bottom:1px solid var(--line)}
.mobmenu .btn{margin-top:16px;border-bottom:0;font-size:.84rem;justify-self:start}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:118px 0 150px;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:68% 62%;filter:saturate(1.05) contrast(1.1) brightness(.6)}
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,var(--ink) 2%,rgba(5,6,10,.92) 28%,rgba(5,6,10,.5) 52%,rgba(5,6,10,.3) 70%,rgba(5,6,10,.72) 100%),
    linear-gradient(180deg,var(--ink) 0%,rgba(5,6,10,.25) 24%,rgba(5,6,10,.3) 60%,var(--ink) 97%);
}
.hero__lamp{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;animation:lamp 9s var(--ease) infinite alternate}
.hero__lamp--red{width:46vw;height:46vw;max-width:620px;max-height:620px;left:-12vw;top:12%;background:radial-gradient(circle,rgba(224,11,18,.55),transparent 66%)}
.hero__lamp--blue{width:50vw;height:50vw;max-width:680px;max-height:680px;right:-14vw;bottom:2%;background:radial-gradient(circle,rgba(10,82,255,.5),transparent 66%);animation-delay:-4.5s}
@keyframes lamp{from{transform:translate3d(0,0,0) scale(1);opacity:.35}to{transform:translate3d(2.5vw,-2vh,0) scale(1.12);opacity:.6}}

.hero__in{
  width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,70px);align-items:center;
}
.hero__wordmark{width:min(400px,76%);margin:4px 0 22px;filter:drop-shadow(0 10px 40px rgba(0,0,0,.8))}
.hero__h1{font-size:clamp(2.4rem,6.6vw,4.7rem);max-width:15ch;text-shadow:0 6px 36px rgba(0,0,0,.75)}
/* Blanco sobre rojo: la misma jerarquía de sus propios afiches. */
.hero__h1 em{font-style:normal;display:block;color:var(--red-hot);text-shadow:0 0 44px rgba(224,11,18,.4),0 6px 36px rgba(0,0,0,.6)}
.hero__sub{margin-top:20px;color:#b9c0d1;max-width:46ch;font-size:clamp(1rem,1.25vw,1.12rem)}
.hero__sub b{color:#fff;font-weight:500}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__trust{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,34px);margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}
.hero__trust li{display:flex;flex-direction:column;gap:1px}
.hero__trust b{font-family:var(--f-dis);font-size:1.6rem;line-height:1;color:#fff}
.hero__trust span{font-family:var(--f-ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2)}

/* --- Head unit --- */
.hero__unit{display:flex;justify-content:center;perspective:1400px}
.hu{position:relative;width:min(430px,100%);transform:rotateY(-11deg) rotateX(4deg);transform-style:preserve-3d;animation:huFloat 7s var(--ease) infinite alternate}
@keyframes huFloat{from{transform:rotateY(-11deg) rotateX(4deg) translateY(0)}to{transform:rotateY(-7deg) rotateX(2deg) translateY(-12px)}}
.hu__bezel{
  position:relative;background:linear-gradient(160deg,#1d212c,#0b0d14 55%,#141822);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:12px 12px 14px;
  box-shadow:0 40px 80px -30px #000,inset 0 1px 0 rgba(255,255,255,.1);
}
.hu__rail{display:flex;gap:7px;justify-content:center;margin-bottom:10px}
.hu__rail i{width:26px;height:3px;border-radius:3px;background:rgba(255,255,255,.14)}
.hu__rail i:nth-child(2){background:var(--red);box-shadow:0 0 10px var(--red)}
.hu__screen{background:#04060c;border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,.07);overflow:hidden}
.hu__top{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-ui);font-size:.6rem;letter-spacing:.14em;color:var(--mut-2);margin-bottom:10px}
.hu__brand{color:var(--mut)}
.hu__sig{display:flex;gap:2px;align-items:flex-end}
.hu__sig i{width:3px;background:var(--blue-hot);border-radius:1px}
.hu__sig i:nth-child(1){height:4px}.hu__sig i:nth-child(2){height:7px}.hu__sig i:nth-child(3){height:10px}
.hu__eq{width:100%;height:92px;border-radius:8px;background:#02040a}
.hu__now{margin-top:12px;padding:11px 13px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:grid;gap:2px;min-height:92px;align-content:start}
.hu__label{font-family:var(--f-ui);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-2)}
.hu__now strong{font-family:var(--f-dis);font-size:1.5rem;text-transform:uppercase;line-height:1.05;color:#fff}
.hu__desc{font-size:.84rem;color:var(--mut);line-height:1.4}
.hu__gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.hu__gauges div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center}
.hu__gauges b{display:block;font-family:var(--f-dis);font-size:1.12rem;color:#fff}
.hu__gauges span{font-family:var(--f-ui);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-2)}
.hu__knob{position:absolute;right:16px;bottom:-9px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a4050,#10131b);border:1px solid rgba(255,255,255,.14)}
.hu__under{
  position:absolute;left:8%;right:8%;bottom:-26px;height:36px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(224,11,18,.55),transparent 70%);filter:blur(16px);
  animation:underglow 5s ease-in-out infinite alternate;
}
@keyframes underglow{
  0%{background:radial-gradient(ellipse,rgba(224,11,18,.55),transparent 70%)}
  50%{background:radial-gradient(ellipse,rgba(139,92,246,.5),transparent 70%)}
  100%{background:radial-gradient(ellipse,rgba(10,82,255,.55),transparent 70%)}
}

.hero__ribbon{position:absolute;left:0;right:0;bottom:0;width:100%;height:104px;z-index:-1;opacity:.42;pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 72%)}
.hero__scroll{position:absolute;left:50%;bottom:18px;translate:-50% 0;width:26px;height:42px;border:1px solid var(--line-2);border-radius:14px;display:grid;place-items:start center;padding-top:7px}
.hero__scroll i{width:3px;height:8px;border-radius:2px;background:var(--red);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(16px);opacity:0}}

/* ===========================================================
   TICKER
   =========================================================== */
.ticker{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:15px 0;position:relative}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--ink-2),transparent 12%,transparent 88%,var(--ink-2))}
.ticker__row{display:flex;gap:0;width:max-content;animation:tick 42s linear infinite}
.ticker__row:hover{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker__row span{
  display:inline-flex;align-items:center;gap:16px;padding:0 26px;
  font-family:var(--f-dis);font-size:clamp(1.1rem,2.1vw,1.5rem);text-transform:uppercase;letter-spacing:.01em;color:#eceff6;white-space:nowrap;
}
.ticker__row span i{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.ticker__row span:nth-child(even) i{background:var(--blue-hot)}
.ticker__row span:nth-child(even){color:var(--mut)}

/* ===========================================================
   SERVICIOS — panel de control
   =========================================================== */
.serv{display:grid;grid-template-columns:clamp(240px,24vw,300px) minmax(0,1fr);gap:clamp(18px,2.6vw,34px);align-items:start}

.serv__list{display:grid;gap:6px;position:sticky;top:96px}
.servbtn{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;text-align:left;
  padding:13px 15px;border-radius:13px;border:1px solid transparent;background:transparent;
  transition:background .3s var(--ease),border-color .3s,transform .3s var(--ease);position:relative;overflow:hidden;width:100%;
}
.servbtn::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;background:var(--acc,var(--red));opacity:0;transition:opacity .3s}
.servbtn__n{font-family:var(--f-ui);font-size:.66rem;letter-spacing:.1em;color:var(--mut-2);width:1.6em}
.servbtn__ico{display:block;width:26px;height:26px;flex:none;color:var(--mut);transition:color .3s}
.servbtn__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.servbtn__t{font-family:var(--f-dis);font-size:1.22rem;text-transform:uppercase;color:var(--mut);transition:color .3s;line-height:1.05}
.servbtn__row{display:flex;align-items:center;gap:10px;min-width:0}
.servbtn:hover{background:var(--panel)}
.servbtn:hover .servbtn__t,.servbtn:hover .servbtn__ico{color:var(--fg)}
.servbtn.is-on{background:var(--panel-2);border-color:var(--line);transform:translateX(3px)}
.servbtn.is-on::before{opacity:1}
.servbtn.is-on .servbtn__t{color:#fff}
.servbtn.is-on .servbtn__ico{color:var(--acc,var(--red))}
.servbtn.is-on .servbtn__n{color:var(--acc,var(--red))}

.serv__stage{display:grid;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--ink-3);position:relative;min-height:clamp(420px,52vw,580px)}
.serv__stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 90px -20px var(--acc-soft,rgba(224,11,18,.4));transition:box-shadow .6s var(--ease)}
.serv__frame{grid-area:1/1;position:relative;overflow:hidden}
.serv__frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.06) brightness(.82);transition:opacity .45s var(--ease)}
.serv__frame img.is-swapping{opacity:0}
/* Fuentes verticales (reels): se muestran a tamaño nativo sobre su propio fondo desenfocado */
.serv__blur{position:absolute;inset:-9%;background-size:cover;background-position:center;filter:blur(38px) brightness(.4) saturate(1.25);opacity:0;transition:opacity .5s var(--ease)}
.serv__frame.is-portrait .serv__blur{opacity:1}
.serv__frame.is-portrait img{
  width:auto;max-width:100%;height:100%;object-fit:contain;object-position:center top;
  margin-inline:auto;position:relative;z-index:1;filter:none;
  padding:clamp(14px,2vw,24px) 0 clamp(140px,19vw,220px);
}
.serv__svg{
  grid-area:1/1;position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(72% 72% at 50% 42%,#0e1424,#04060c);
  padding:clamp(16px,2vw,28px) clamp(16px,2vw,28px) clamp(140px,19vw,215px);
}
.serv__svg svg{width:min(100%,560px);height:auto;max-height:100%}
.serv__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.serv__tag{
  position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:10px;
  background:rgba(5,6,10,.7);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
}
.serv__tag span{font-family:var(--f-ui);font-size:.68rem;color:var(--acc,var(--red));font-weight:600}
.serv__tag em{font-style:normal;font-family:var(--f-ui);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

.serv__detail{
  grid-area:1/1;align-self:end;position:relative;z-index:2;padding:clamp(22px,3vw,34px);
  background:linear-gradient(0deg,rgba(4,5,9,.97) 10%,rgba(4,5,9,.86) 55%,transparent 100%);
}
.serv__detail h3{font-size:clamp(1.9rem,3.6vw,2.7rem);color:#fff}
.serv__detail>p{color:#c2c9d9;margin-top:8px;max-width:46ch}
.serv__detail ul{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px}
.serv__detail li{
  font-family:var(--f-ui);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.03);
}

/* ===========================================================
   POLARIZADO
   =========================================================== */
.pol{display:grid;gap:clamp(18px,2.4vw,28px)}
.pol__viz{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/7.2;min-height:240px;background:#04060d;cursor:ew-resize;touch-action:pan-y;user-select:none;
}
.pol__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.pol__face{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(16px,2.4vw,30px)}
.pol__face--carbon{
  justify-content:flex-start;
  background:linear-gradient(to right,rgba(3,14,44,.9) 0%,rgba(4,20,58,.5) 44%,rgba(4,10,24,.1) 100%);
}
.pol__face--ceramic{
  justify-content:flex-end;clip-path:inset(0 0 0 var(--split,50%));
  background:linear-gradient(to left,rgba(44,2,7,.9) 0%,rgba(58,3,9,.5) 44%,rgba(20,2,5,.1) 100%);
}
.pol__meta{max-width:min(300px,46%)}
.pol__face--ceramic .pol__meta{text-align:right}
.pol__kicker{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);display:block}
.pol__meta strong{display:block;font-family:var(--f-dis);font-weight:800;text-transform:uppercase;line-height:.96;
  font-size:clamp(1.5rem,3.2vw,2.4rem);margin:4px 0 12px}
.pol__face--carbon .pol__meta strong{color:#8ebaff}
.pol__face--ceramic .pol__meta strong{color:#ff8f96}
.pol__lv{margin:0;display:grid;gap:7px}
.pol__lv dt{font-size:.78rem;color:rgba(255,255,255,.82);line-height:1.25}
.pol__lv dd{margin:0 0 4px;display:flex;gap:4px}
.pol__face--ceramic .pol__lv dd{justify-content:flex-end}
.pol__lv dd i{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.17)}
.pol__face--carbon .pol__lv dd[data-lv="3"] i:nth-child(-n+3){background:var(--blue-hot)}
.pol__face--ceramic .pol__lv dd[data-lv="4"] i{background:var(--red-hot)}
.pol__note{margin-top:12px;font-family:var(--f-ui);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);text-align:center}
.pol__handle{
  position:absolute;top:0;bottom:0;left:var(--split,50%);width:3px;margin-left:-1.5px;
  background:linear-gradient(180deg,transparent,#fff 14%,#fff 86%,transparent);
  cursor:ew-resize;z-index:3;
}
.pol__handle i{
  position:absolute;top:50%;left:50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;
  background:rgba(5,6,10,.85);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(8px);
  box-shadow:0 8px 30px -8px #000;
}
.pol__handle i::before,.pol__handle i::after{
  content:"";position:absolute;top:50%;translate:0 -50%;width:0;height:0;
  border-block:5px solid transparent;
}
.pol__handle i::before{left:11px;border-right:7px solid var(--blue-hot)}
.pol__handle i::after{right:11px;border-left:7px solid var(--red-hot)}

.pol__specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.pol__card{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,30px);background:var(--ink-3);position:relative;overflow:hidden;transition:border-color .4s,transform .4s var(--ease)}
.pol__card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:currentColor;opacity:.75}
.pol__card--blue{color:var(--blue-hot)}
.pol__card--red{color:var(--red-hot)}
.pol__card.is-focus{transform:translateY(-4px)}
.pol__card--blue.is-focus{border-color:rgba(59,130,255,.42);box-shadow:0 24px 60px -36px var(--blue)}
.pol__card--red.is-focus{border-color:rgba(255,42,51,.42);box-shadow:0 24px 60px -36px var(--red)}
.pol__card h3{font-size:clamp(1.6rem,3.2vw,2.3rem);color:#fff;margin-bottom:16px}
.pol__card h3 span{color:currentColor}
.pol__card li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);color:#c6ccdb;font-size:.95rem}
.pol__card li:first-child{border-top:0}
.pol__card li::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;margin-top:.55em;flex:none;rotate:45deg}

.pol__claim{
  margin-top:clamp(30px,4vw,48px);text-align:center;font-family:var(--f-dis);font-size:clamp(1.3rem,3.4vw,2.2rem);
  text-transform:uppercase;color:#fff;letter-spacing:.005em;
}
.pol__claim em{font-style:normal;color:var(--red)}

/* ===========================================================
   TRABAJOS
   =========================================================== */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,18px)}
.work{
  position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--ink-3);
  cursor:zoom-in;display:block;padding:0;width:100%;
}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s;filter:brightness(.84) saturate(.9)}
.work:hover img,.work:focus-visible img{transform:scale(1.055);filter:brightness(1) saturate(1)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,5,9,.82) 0%,transparent 48%);pointer-events:none}
.work__cap{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.work__cap b{font-family:var(--f-dis);font-size:clamp(1.05rem,1.8vw,1.4rem);text-transform:uppercase;color:#fff;line-height:1.05}
.work__cap span{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);flex:none}
.work__zoom{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;background:rgba(5,6,10,.7);border:1px solid var(--line);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:all .35s var(--ease);z-index:2}
.work:hover .work__zoom{opacity:1;transform:scale(1)}
.work__zoom::before,.work__zoom::after{content:"";position:absolute;background:#fff}
.work__zoom::before{width:12px;height:1.5px}
.work__zoom::after{width:1.5px;height:12px}

.work--a{grid-column:span 7;aspect-ratio:16/10}
.work--b{grid-column:span 5;aspect-ratio:4/3.5}
.work--c{grid-column:span 5;aspect-ratio:4/3.5}
.work--d{grid-column:span 7;aspect-ratio:16/10}
.work--e{grid-column:span 6;aspect-ratio:16/10}
.work--f{grid-column:span 6;aspect-ratio:16/10}

.works__foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:clamp(24px,3vw,38px)}
.works__foot p{font-family:var(--f-ui);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

/* ===========================================================
   REELS
   =========================================================== */
.socials{display:flex;flex-wrap:wrap;gap:10px}
.soc{
  display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:11px;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:10px 16px;background:var(--panel);
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.soc svg{grid-row:1/3;width:21px;height:21px;fill:currentColor}
.soc b{font-family:var(--f-ui);font-size:.78rem;letter-spacing:.07em}
.soc span{font-size:.72rem;color:var(--mut-2)}
.soc:hover{transform:translateY(-3px);background:var(--panel-2)}
.soc--tt:hover{border-color:rgba(255,255,255,.4)}
.soc--fb:hover{border-color:#1877f2;color:#4a9bff}
.soc--ig:hover{border-color:#d6249f;color:#f06292}

.reels{
  display:flex;gap:clamp(12px,1.6vw,18px);overflow-x:auto;
  /* proximity (y no mandatory) para que el carrusel no se "coma" el margen inicial */
  scroll-snap-type:x proximity;
  padding-block:4px 22px;
  padding-inline:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
  scroll-padding-inline-start:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)));
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.reels::-webkit-scrollbar{height:5px}
.reels::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.reel{
  flex:0 0 clamp(190px,24vw,248px);scroll-snap-align:start;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-3);aspect-ratio:9/16;transition:transform .4s var(--ease),border-color .4s;
}
.reel img{width:100%;height:100%;object-fit:cover;filter:brightness(.88);transition:transform .8s var(--ease),filter .4s}
.reel:hover{transform:translateY(-6px);border-color:var(--line-2)}
.reel:hover img{transform:scale(1.06);filter:brightness(1)}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,5,9,.85),transparent 42%);pointer-events:none}
.reel__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;z-index:2;
  background:rgba(5,6,10,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;
  transition:transform .35s var(--ease),background .3s;
}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.12);background:rgba(224,11,18,.85);border-color:transparent}
.reel__play::before{content:"";width:0;height:0;border-left:13px solid #fff;border-block:8px solid transparent;margin-left:3px}
.reel__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 15px}
.reel__cap b{display:block;font-family:var(--f-dis);font-size:1.08rem;text-transform:uppercase;color:#fff;line-height:1.08}
.reel__cap span{font-family:var(--f-ui);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}

/* ===========================================================
   RESPALDO
   =========================================================== */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.tcard{
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,26px);background:var(--ink-3);
  position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .4s,background .4s;
}
.tcard::before{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--acc,var(--red));opacity:.5;transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease)}
.tcard:hover{transform:translateY(-5px);border-color:var(--line-2);background:#0d1119}
.tcard:hover::before{transform:scaleX(1)}
.tcard__ico{display:block;width:34px;height:34px;color:var(--acc,var(--red));margin-bottom:14px}
.tcard__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tcard h3{font-size:1.28rem;color:#fff;margin-bottom:7px}
.tcard p{font-size:.9rem;color:var(--mut)}

.pay{
  margin-top:clamp(26px,3.4vw,42px);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1fr);background:var(--ink-3);
}
.pay>*{padding:clamp(22px,2.6vw,30px)}
.pay__head{border-right:1px solid var(--line)}
.pay__head h3{font-size:1.35rem;color:#fff}
.pay__head p{font-size:.88rem;color:var(--mut);margin-top:7px}
.pay__list{border-right:1px solid var(--line);display:grid;gap:11px;align-content:center}
.pay__list li{display:flex;align-items:baseline;gap:10px}
.pay__list b{font-family:var(--f-dis);font-size:1.1rem;text-transform:uppercase;color:#fff;min-width:7.2em}
.pay__list span{font-size:.84rem;color:var(--mut)}
.pay__addi{background:linear-gradient(135deg,rgba(10,82,255,.14),rgba(139,92,246,.1));display:grid;align-content:center;gap:5px}
.pay__addiTag{font-family:var(--f-ui);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-hot)}
.pay__addi strong{font-family:var(--f-dis);font-size:2.4rem;line-height:.9;color:#fff;letter-spacing:-.02em;text-transform:lowercase}
.pay__addi p{font-size:.82rem;color:#b3bbcd;margin-top:4px}

/* ===========================================================
   CONTACTO
   =========================================================== */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(26px,4vw,56px);align-items:center}
.contact__list{margin-top:30px;border-top:1px solid var(--line)}
.contact__list li{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.contact__k{font-family:var(--f-ui);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);min-width:7.5em}
.contact__list a{font-size:1.05rem;color:#fff;transition:color .25s;word-break:break-word}
.contact__list a:hover{color:var(--red-hot)}
.contact__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.contact__shot{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.contact__shot img{width:100%;height:100%;object-fit:cover;object-position:center 28%;aspect-ratio:16/6.6;filter:brightness(.86) saturate(1.02)}
.contact__shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;align-items:center;gap:9px;
  background:linear-gradient(0deg,rgba(4,5,9,.92),transparent);
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#e6e9f1;
}
.contact__shot figcaption i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;animation:pulse 2.4s var(--ease) infinite}

/* ===========================================================
   CTA FINAL
   =========================================================== */
.finale{position:relative;padding:clamp(70px,9vw,120px) 0;text-align:center;overflow:hidden;background:#000;isolation:isolate}
.finale::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--spectrum);opacity:.4}
.finale__eq{position:absolute;inset:auto 0 0;width:100%;height:170px;z-index:-1;opacity:.3;mask-image:linear-gradient(180deg,transparent,#000 78%)}
.finale::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 54% at 50% 46%,rgba(0,0,0,.92) 25%,rgba(0,0,0,.55) 62%,transparent 100%);
}
.finale__in{position:relative;display:grid;justify-items:center;gap:16px}
.finale__emblem{width:min(330px,68%);opacity:.38;margin-bottom:-4px}
.finale__h{font-size:clamp(2.3rem,7vw,4.6rem)}
.finale__h em{font-style:normal;color:var(--red)}
.finale__in p{color:var(--mut);max-width:40ch}
.finale .btn{margin-top:10px}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{background:var(--ink-2);border-top:1px solid var(--line)}
.foot__in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-block:clamp(44px,5.5vw,68px)}
.foot__brand img{width:min(230px,78%)}
.foot__brand p{margin-top:14px;color:var(--mut);font-size:.92rem;max-width:30ch}
.foot__col h4{font-family:var(--f-ui);font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut-2);margin-bottom:14px}
.foot__col li{padding:5px 0;font-size:.92rem;color:var(--mut)}
.foot__col a{transition:color .25s}
.foot__col a:hover{color:var(--red-hot)}
.foot__bar{border-top:1px solid var(--line)}
.foot__bar .wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding-block:18px;font-family:var(--f-ui);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mut-2)}

/* ===========================================================
   WHATSAPP FLOTANTE
   =========================================================== */
.wafloat{
  position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:80;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:#04210f;box-shadow:0 14px 34px -10px rgba(37,211,102,.6);
  opacity:0;transform:translateY(22px) scale(.86);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.wafloat.is-on{opacity:1;transform:none;pointer-events:auto}
.wafloat svg{width:28px;height:28px;fill:currentColor}
.wafloat::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.wafloat:hover{transform:scale(1.07)}

/* ===========================================================
   LIGHTBOX
   =========================================================== */
.lb{position:fixed;inset:0;z-index:300;background:rgba(2,3,6,.95);backdrop-filter:blur(10px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:clamp(16px,4vw,48px);animation:fadeIn .25s}
.lb__fig{margin:0;display:grid;justify-items:center;gap:14px;min-width:0}
.lb__fig img{max-width:100%;max-height:78svh;border-radius:12px;border:1px solid var(--line);object-fit:contain}
.lb__fig figcaption{font-family:var(--f-ui);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);text-align:center}
.lb__close{position:absolute;right:clamp(12px,3vw,26px);top:clamp(12px,3vw,26px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);font-size:1.6rem;line-height:1;color:var(--fg);display:grid;place-items:center}
.lb__close:hover{background:var(--panel-2)}
.lb__nav{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);font-size:1.9rem;line-height:1;color:var(--fg);display:grid;place-items:center;flex:none}
.lb__nav:hover{background:var(--panel-2)}

/* ===========================================================
   ANIMACIÓN DE ENTRADA POR SCROLL
   =========================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:44px}
  .hero__unit{order:2;justify-content:flex-start}
  .hu{width:min(390px,100%);transform:none;animation:none}
  .hero__h1{max-width:18ch}
  .contact{grid-template-columns:1fr}
  .contact__shot img{aspect-ratio:16/8}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
  .pay{grid-template-columns:1fr 1fr}
  .pay__head{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}
  .pay__list{border-right:1px solid var(--line)}
}

@media (max-width:900px){
  html{scroll-padding-top:74px}
  .nav__links,.nav__cta span{display:none}
  .nav__cta{margin-left:auto;padding:10px 14px}
  .nav__burger{display:flex;align-items:center;justify-content:center}
  .serv{grid-template-columns:1fr}
  .serv__list{position:static;grid-auto-flow:column;grid-auto-columns:minmax(188px,1fr);overflow-x:auto;gap:8px;padding-bottom:10px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .serv__list::-webkit-scrollbar{display:none}
  .servbtn{scroll-snap-align:start;grid-template-columns:1fr;gap:9px;padding:14px}
  .servbtn::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px}
  .serv__stage{min-height:0;display:block}
  .serv__frame{aspect-ratio:16/11}
  .serv__frame.is-portrait{aspect-ratio:4/3.4}
  .serv__frame.is-portrait img{padding:0}
  .serv__svg{padding:18px}
  .serv__detail{background:var(--ink-3);border-top:1px solid var(--line)}
  .works{grid-template-columns:repeat(6,1fr)}
  .work--a,.work--d,.work--e,.work--f{grid-column:span 6;aspect-ratio:16/10}
  .work--b,.work--c{grid-column:span 3;aspect-ratio:3/3.4}
  .pol__specs{grid-template-columns:1fr}
  .pol__viz{aspect-ratio:16/9.4}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sechead--split{align-items:flex-start}
}

@media (max-width:620px){
  .hero{padding:104px 0 72px;min-height:auto}
  .hero__wordmark{width:min(300px,82%)}
  .hero__h1{font-size:clamp(2.2rem,10vw,3.2rem);max-width:none}
  .hero__trust{gap:14px 22px}
  .hero__trust li{flex:1 1 42%}
  .hero__cta .btn{flex:1 1 100%}
  .hero__scroll{display:none}
  .pay{grid-template-columns:1fr}
  .pay__list{border-right:0;border-bottom:1px solid var(--line)}
  .foot__in{grid-template-columns:1fr}
  .works{grid-template-columns:1fr}
  .work--a,.work--b,.work--c,.work--d,.work--e,.work--f{grid-column:1/-1;aspect-ratio:16/11}
  .lb{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lb__fig{grid-row:1}
  .lb__nav{position:relative}
  .lb__nav--prev{grid-row:2;justify-self:start}
  .lb__nav--next{grid-row:2;justify-self:end;margin-top:-48px}
  .pol__viz{aspect-ratio:16/11}
  .pol__lv{display:none}            /* el detalle vive en las fichas de abajo */
  .pol__meta{max-width:50%}
  .pol__meta strong{margin-bottom:0}
  .trust{grid-template-columns:1fr}
  .works__foot{flex-direction:column;align-items:flex-start}
  .foot__bar .wrap{flex-direction:column;gap:5px;letter-spacing:.07em}
}

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .boot__wordmark img{clip-path:none}
  .boot__emblem,.boot__eq{opacity:1}
  .hu{transform:none}
}