/* =====================================================================
   DISTRITO CREATIVO — Sistema de diseño
   Producción audiovisual · Web · Branding · Automatización con IA
   ===================================================================== */

/* ------------------------------- TOKENS ------------------------------ */
:root{
  /* Marca */
  --black:#070707;
  --black-2:#0b0b0b;
  --black-3:#111111;
  --black-4:#171717;
  --orange:#ff6a13;
  --orange-soft:#ff8a3d;
  --orange-deep:#d94f38;
  --white:#f5f3f0;
  --grey:#9a9a9a;
  --grey-2:#6b6b6b;

  /* Superficies */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.03);
  --glow:0 0 0 1px rgba(255,106,19,.28), 0 18px 60px -18px rgba(255,106,19,.45);

  /* Layout */
  --max:1240px;
  --pad:clamp(20px,4vw,40px);
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:34px;

  /* Movimiento */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  /* Tipografía fluida */
  --fs-display:clamp(2.9rem,8.2vw,7.2rem);
  --fs-h1:clamp(2.4rem,6vw,5rem);
  --fs-h2:clamp(2rem,4.6vw,3.7rem);
  --fs-h3:clamp(1.3rem,2.2vw,1.85rem);
  --fs-lead:clamp(1.02rem,1.5vw,1.24rem);
}

/* ------------------------------- RESET ------------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{overflow:hidden}
img,video,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
[hidden]{display:none !important}
::selection{background:var(--orange);color:#000}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4,.display,.num{
  font-family:'Archivo',Impact,sans-serif;
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.02;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.015em}
p{text-wrap:pretty}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:#262626;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--orange)}

/* --------------------------- UTILIDADES ------------------------------ */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1440px}
.accent{color:var(--orange)}
.muted{color:var(--grey)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--orange);color:#000;padding:12px 20px;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}
section{position:relative}
.sec{padding:clamp(72px,10vw,140px) 0}
.sec-sm{padding:clamp(52px,7vw,96px) 0}
.divider{height:1px;background:var(--line);border:0}

/* Grano de película */
.grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

/* Cursor personalizado */
.cursor{position:fixed;top:0;left:0;width:30px;height:30px;border:1.5px solid rgba(255,106,19,.65);
  border-radius:50%;pointer-events:none;z-index:9995;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background-color .3s,border-color .3s,opacity .3s}
.cursor.is-hover{width:60px;height:60px;background:rgba(255,106,19,.12);border-color:var(--orange)}
.cursor.is-view{width:82px;height:82px;background:rgba(255,106,19,.92);border-color:transparent}
.cursor .cur-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#000;
  display:grid;place-items:center;width:100%;height:100%;opacity:0;transition:opacity .25s;font-family:'Sora',sans-serif}
.cursor.is-view .cur-label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* Barra de progreso de scroll */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--orange-deep),var(--orange),var(--orange-soft));z-index:1002;will-change:transform}

/* --------------------------- PRELOADER ------------------------------- */
html:not(.js) .preloader,html:not(.js) .page-wipe,html:not(.js) .cursor{display:none}
.preloader{position:fixed;inset:0;z-index:9999;background:var(--black);display:grid;place-items:center;
  transition:opacity .7s var(--ease),visibility .7s}
.preloader.done{opacity:0;visibility:hidden}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.pre-mark{width:74px;height:74px;object-fit:contain;animation:preSpin 2.4s var(--ease) infinite}
@keyframes preSpin{0%{transform:rotate(0) scale(1);opacity:.75}50%{transform:rotate(180deg) scale(1.08);opacity:1}100%{transform:rotate(360deg) scale(1);opacity:.75}}
.pre-bar{width:min(220px,50vw);height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.pre-bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .3s linear}
.pre-txt{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-2)}

/* Transición entre páginas */
.page-wipe{position:fixed;inset:0;z-index:9994;background:var(--black);transform:translateY(100%);pointer-events:none}
.page-wipe.in{animation:wipeIn .55s var(--ease) forwards}
@keyframes wipeIn{to{transform:translateY(0)}}

/* ---------------------------- HEADER --------------------------------- */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;
  transition:background .45s var(--ease),backdrop-filter .45s,border-color .45s,transform .5s var(--ease);
  border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(7,7,7,.78);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.site-header.hidden{transform:translateY(-102%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1440px;margin-inline:auto;padding:20px var(--pad);transition:padding .4s var(--ease)}
.site-header.scrolled .nav{padding-block:13px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{height:36px;width:auto;transition:height .4s var(--ease)}
.site-header.scrolled .brand img{height:30px}
.brand-dot{width:9px;height:9px;background:var(--orange);border-radius:2px;transform:rotate(45deg);flex:none;
  box-shadow:0 0 14px rgba(255,106,19,.85)}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links > li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:40px;
  font-size:.9rem;font-weight:500;color:var(--grey);transition:color .25s,background .25s}
.nav-link:hover,.nav-link:focus-visible{color:var(--white);background:rgba(255,255,255,.05)}
.nav-link.active{color:var(--white)}
.nav-link.active::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px var(--orange)}
.nav-link .chev{width:11px;height:11px;transition:transform .3s var(--ease);opacity:.7}
.has-mega:hover .chev,.has-mega.open .chev{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Mega menú */
.mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
  width:min(720px,92vw);background:rgba(12,12,12,.96);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:14px;
  opacity:0;visibility:hidden;transition:.35s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);display:grid;grid-template-columns:1fr 1fr;gap:6px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega::before{content:"";position:absolute;top:-14px;left:0;width:100%;height:14px}
.mega-item{display:flex;gap:13px;padding:14px;border-radius:var(--r);transition:background .25s;align-items:flex-start}
.mega-item:hover{background:rgba(255,106,19,.07)}
.mega-ico{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,106,19,.1);border:1px solid rgba(255,106,19,.2)}
.mega-ico svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:1.7}
.mega-item h4{font-family:'Sora',sans-serif;font-weight:600;font-size:.94rem;letter-spacing:0;margin-bottom:3px}
.mega-item p{font-size:.79rem;color:var(--grey-2);line-height:1.45}
.mega-foot{grid-column:1/-1;margin-top:6px;padding:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.mega-foot span{font-size:.82rem;color:var(--grey)}

/* Menú móvil */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:1px solid var(--line);border-radius:12px;cursor:pointer;padding:0;align-items:center}
.burger span{width:20px;height:1.8px;background:var(--white);transition:.35s var(--ease);display:block}
.burger.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:999;background:var(--black);padding:96px var(--pad) 36px;
  display:flex;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain;
  clip-path:circle(0% at calc(100% - 46px) 42px);transition:clip-path .7s var(--ease);visibility:hidden}
.drawer.open{clip-path:circle(150% at calc(100% - 46px) 42px);visibility:visible}
.drawer-link{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.5rem,6.4vw,2.5rem);
  letter-spacing:-.02em;padding:7px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s}
.drawer.open .drawer-link{opacity:1;transform:none}
.drawer-link:hover{color:var(--orange)}
.drawer-link small{font-family:'Sora',sans-serif;font-size:.68rem;font-weight:500;color:var(--grey-2);letter-spacing:.14em;text-transform:uppercase}
.drawer-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(20px);transition:.6s .35s var(--ease)}
.drawer.open .drawer-foot{opacity:1;transform:none}
.drawer-foot .btn{justify-content:center}
.drawer-social{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------------------- BOTONES -------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:40px;border:1px solid transparent;cursor:pointer;
  font-size:.9rem;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s,color .3s;
  overflow:hidden;isolation:isolate}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
.btn-primary{background:var(--orange);color:#0a0a0a;font-weight:700}
.btn-primary:hover{background:var(--orange-soft);transform:translateY(-2px);box-shadow:0 14px 38px -10px rgba(255,106,19,.7)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line-2);color:var(--white)}
.btn-ghost:hover{border-color:var(--orange);background:rgba(255,106,19,.08);transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#062d15;font-weight:700}
.btn-wa:hover{background:#31e874;transform:translateY(-2px);box-shadow:0 14px 38px -12px rgba(37,211,102,.6)}
.btn-lg{padding:16px 32px;font-size:.96rem}
.btn-sm{padding:10px 18px;font-size:.82rem}
.btn-block{display:flex;width:100%;justify-content:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--orange);
  transition:gap .3s var(--ease)}
.link-arrow svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.link-arrow:hover{gap:12px}
.link-arrow:hover svg{transform:translateX(3px)}

/* ------------------------- CABECERAS SECCIÓN ------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--orange);opacity:.6}
.eyebrow.no-line::before{display:none}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:clamp(36px,5vw,62px);flex-wrap:wrap}
.sec-head h2{max-width:19ch}
.sec-head .sub{color:var(--grey);max-width:46ch;font-size:var(--fs-lead)}
.glow-title{text-shadow:0 0 26px rgba(255,106,19,.28)}

/* ------------------------------ HERO --------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:100px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 78% 8%,rgba(255,106,19,.20),transparent 56%),
    radial-gradient(95% 75% at 6% 96%,rgba(255,106,19,.09),transparent 62%),
    linear-gradient(to bottom,rgba(7,7,7,.72),rgba(7,7,7,.86) 55%,var(--black))}
.grid-lines{position:absolute;inset:0;z-index:1;opacity:.45;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 38%,#000,transparent 72%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-block:60px}
.hero h1{font-size:var(--fs-display);margin-bottom:26px;max-width:15ch}
.hero .lead{font-size:var(--fs-lead);color:var(--grey);max-width:56ch;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:40px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:.78rem;color:var(--grey);backdrop-filter:blur(6px)}
.badge b{color:var(--white);font-weight:600}
.badge svg{width:14px;height:14px;flex:none}
.badge .dot-live{width:7px;height:7px;border-radius:50%;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulseDot 2s infinite}
.badge .dot-live.off{background:var(--grey-2);animation:none;box-shadow:none}
@keyframes pulseDot{70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--grey-2)}
.hero-scroll i{width:1px;height:44px;background:linear-gradient(var(--orange),transparent);animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Cabecera de página interior */
.page-hero{position:relative;padding:calc(120px + clamp(50px,8vw,96px)) 0 clamp(50px,7vw,86px);overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 70% at 82% 0%,rgba(255,106,19,.16),transparent 58%),
             radial-gradient(70% 60% at 0% 100%,rgba(255,106,19,.06),transparent 60%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{max-width:17ch;margin-bottom:22px}
.page-hero .lead{font-size:var(--fs-lead);color:var(--grey);max-width:58ch}
.crumbs{display:flex;align-items:center;gap:9px;font-size:.76rem;color:var(--grey-2);margin-bottom:26px;flex-wrap:wrap}
.crumbs a:hover{color:var(--orange)}
.crumbs span{opacity:.5}

/* ---------------------------- MARQUEE -------------------------------- */
.marquee{border-block:1px solid var(--line);padding:20px 0;overflow:hidden;
  background:linear-gradient(90deg,var(--black-2),var(--black),var(--black-2))}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-track span{display:inline-flex;align-items:center;gap:22px;padding-inline:22px;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1rem,1.9vw,1.5rem);
  letter-spacing:-.01em;color:rgba(245,243,240,.28);white-space:nowrap;text-transform:uppercase}
.marquee-track span::after{content:"";width:7px;height:7px;background:var(--orange);border-radius:2px;transform:rotate(45deg);flex:none}
.marquee.alt .marquee-track{animation-duration:56s;animation-direction:reverse}

/* ------------------------------ GRIDS -------------------------------- */
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}

/* ---------------------------- TARJETAS ------------------------------- */
.card{position:relative;background:var(--black-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);overflow:hidden;transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s}
.card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,106,19,.10),transparent 62%)}
.card:hover{border-color:rgba(255,106,19,.34);transform:translateY(-4px)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:11px}
.card p{color:var(--grey);font-size:.94rem}

/* Tarjeta de servicio */
.svc{display:flex;flex-direction:column;gap:18px;min-height:100%}
.svc-num{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:.74rem;color:var(--grey-2);letter-spacing:.12em}
.svc-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(255,106,19,.16),rgba(255,106,19,.04));
  border:1px solid rgba(255,106,19,.24);transition:transform .5s var(--ease),box-shadow .5s}
.card:hover .svc-ico{transform:translateY(-3px) rotate(-6deg);box-shadow:0 12px 30px -12px rgba(255,106,19,.6)}
.svc-ico svg{width:24px;height:24px;stroke:var(--orange);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc ul{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:8px}
.svc ul li{font-size:.85rem;color:var(--grey);display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.svc ul li::before{content:"";width:5px;height:5px;margin-top:8px;background:var(--orange);border-radius:1px;transform:rotate(45deg);flex:none}
.svc .link-arrow{margin-top:6px}

/* Tarjeta destacada / feature */
.feature{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--line);transition:.4s var(--ease)}
.feature:hover{border-color:rgba(255,106,19,.3);background:rgba(255,106,19,.04)}
.feature-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,106,19,.12);border:1px solid rgba(255,106,19,.2)}
.feature-ico svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feature h4{font-family:'Sora',sans-serif;font-weight:600;font-size:.96rem;letter-spacing:0;margin-bottom:5px}
.feature p{font-size:.85rem;color:var(--grey-2);line-height:1.55}

/* ------------------------- NÚMEROS / STATS --------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats.cols-2{grid-template-columns:repeat(2,1fr)}
.stat{background:var(--black);padding:clamp(26px,3.4vw,42px) clamp(18px,2.4vw,30px);position:relative;transition:background .45s}
.stat:hover{background:var(--black-3)}
.stat::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--orange);transition:width .8s var(--ease)}
.stat.counted::before{width:100%}
.stat .num{font-size:clamp(2.3rem,4.6vw,3.5rem);color:var(--orange);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.stat .num .suf{color:var(--white)}
.stat .lbl{color:var(--grey);font-size:.86rem;margin-top:12px;line-height:1.45}

/* ---------------------------- TRABAJO -------------------------------- */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,20px)}
.work{position:relative;grid-column:span 4;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--black-3);isolation:isolate}
.work.span-6{grid-column:span 6;aspect-ratio:16/11}
.work.span-8{grid-column:span 8;aspect-ratio:16/9}
.work.span-12{grid-column:span 12;aspect-ratio:21/9}
.work img,.work video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;filter:saturate(.85)}
.work:hover img,.work:hover video{transform:scale(1.06);filter:saturate(1.05)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,7,.94) 4%,rgba(7,7,7,.28) 46%,transparent 72%);z-index:1}
.work-body{position:absolute;inset:auto 0 0 0;padding:clamp(20px,2.4vw,30px);z-index:2}
.work-tag{display:inline-block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:10px;font-weight:600}
.work-body h3{font-size:clamp(1.15rem,1.9vw,1.6rem);margin-bottom:6px}
.work-body p{font-size:.85rem;color:var(--grey);max-width:42ch}
.work-plus{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(7,7,7,.55);backdrop-filter:blur(6px);display:grid;place-items:center;
  transition:.4s var(--ease)}
.work:hover .work-plus{background:var(--orange);border-color:var(--orange);transform:rotate(90deg)}
.work-plus svg{width:14px;height:14px;stroke:currentColor;stroke-width:2}

/* Filtros */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.filter{padding:9px 18px;border-radius:40px;border:1px solid var(--line);background:transparent;
  font-size:.82rem;color:var(--grey);cursor:pointer;transition:.3s var(--ease)}
.filter:hover{border-color:var(--line-2);color:var(--white)}
.filter.active{background:var(--orange);border-color:var(--orange);color:#0a0a0a;font-weight:600}

/* ---------------------------- CLIENTES ------------------------------- */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:clamp(11px,1.3vw,15px)}
.client{position:relative;background:var(--black-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px);min-height:184px;display:flex;flex-direction:column;gap:11px;
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.client:hover{background:var(--black-3);border-color:rgba(255,106,19,.32);transform:translateY(-3px)}
.client-mark{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;flex:none;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:1.02rem;letter-spacing:-.03em;
  background:linear-gradient(150deg,rgba(255,106,19,.2),rgba(255,255,255,.03));
  border:1px solid rgba(255,106,19,.24);color:var(--orange);transition:.45s var(--ease)}
.client:hover .client-mark{background:var(--orange);color:#0a0a0a;border-color:var(--orange);transform:rotate(-5deg)}
.client h3{font-family:'Sora',sans-serif;font-weight:600;font-size:1rem;letter-spacing:0;line-height:1.3}
.client .sector{font-size:.76rem;color:var(--grey-2);letter-spacing:.04em}
.client .site{margin-top:auto;font-size:.75rem;color:var(--grey-2);display:flex;align-items:center;gap:6px;
  transition:color .3s;min-width:0;max-width:100%}
.client .site b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.client:hover .site{color:var(--orange)}
.client .site svg{width:12px;height:12px;flex:none}
.client .new-tag{position:absolute;top:16px;right:16px;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);border:1px solid rgba(255,106,19,.35);border-radius:20px;padding:3px 9px;font-weight:600}

/* Tira logos */
.logo-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.logo-chip{padding:10px 18px;border:1px solid var(--line);border-radius:40px;font-size:.82rem;
  color:var(--grey);transition:.35s var(--ease);background:var(--glass)}
.logo-chip:hover{color:var(--white);border-color:rgba(255,106,19,.35);transform:translateY(-2px)}

/* -------------------------- TESTIMONIOS ------------------------------ */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;
  scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail > *{scroll-snap-align:start;flex:0 0 min(390px,86vw)}
.quote{background:var(--black-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:16px;min-height:100%;
  transition:border-color .4s,transform .4s var(--ease)}
.quote:hover{border-color:rgba(255,106,19,.3);transform:translateY(-3px)}
.stars{display:flex;gap:3px;color:var(--orange);font-size:.86rem;letter-spacing:.08em}
.quote blockquote{font-size:.98rem;line-height:1.62;color:var(--white)}
.quote figcaption{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:.82rem;color:var(--orange);
  background:rgba(255,106,19,.12);border:1px solid rgba(255,106,19,.25)}
.quote figcaption b{display:block;font-size:.88rem;font-weight:600}
.quote figcaption span{font-size:.76rem;color:var(--grey-2)}
.rail-nav{display:flex;gap:9px;margin-top:6px}
.rail-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;
  display:grid;place-items:center;cursor:pointer;transition:.3s var(--ease);color:var(--white)}
.rail-btn:hover{border-color:var(--orange);background:rgba(255,106,19,.1)}
.rail-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* --------------------------- ACORDEÓN -------------------------------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:22px;
  font-size:clamp(1rem,1.5vw,1.14rem);font-weight:600;transition:color .3s}
.acc-head:hover{color:var(--orange)}
.acc-sign{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;position:relative;transition:.4s var(--ease)}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;background:currentColor;transition:.4s var(--ease)}
.acc-sign::before{width:11px;height:1.6px}
.acc-sign::after{width:1.6px;height:11px}
.acc-item.open .acc-sign{background:var(--orange);border-color:var(--orange);color:#0a0a0a;transform:rotate(180deg)}
.acc-item.open .acc-sign::after{transform:scaleY(0)}
.acc-body{overflow:hidden;height:0;transition:height .45s var(--ease)}
.acc-body p{padding-bottom:24px;color:var(--grey);max-width:74ch;font-size:.95rem}

/* ------------------------------ PASOS -------------------------------- */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(4,1fr)}
.step{background:var(--black);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px;
  position:relative;transition:background .4s}
.step:hover{background:var(--black-3)}
.step-n{font-family:'Archivo',sans-serif;font-weight:900;font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.3px rgba(255,106,19,.55);transition:.5s var(--ease)}
.step:hover .step-n{color:rgba(255,106,19,.16);-webkit-text-stroke-color:var(--orange)}
.step h3{font-size:1.06rem}
.step p{font-size:.88rem;color:var(--grey)}

/* --------------------------- CTA / BANDA ----------------------------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);
  border:1px solid rgba(255,106,19,.24);
  background:linear-gradient(150deg,rgba(255,106,19,.14),rgba(255,106,19,.03) 42%,var(--black-2));
  padding:clamp(38px,6vw,76px);text-align:center}
.cta-band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,19,.24),transparent 66%);top:-40%;right:-10%;pointer-events:none;filter:blur(20px)}
.cta-band h2{margin-bottom:18px;position:relative;max-width:18ch;margin-inline:auto}
.cta-band p{color:var(--grey);max-width:56ch;margin:0 auto 32px;position:relative;font-size:var(--fs-lead)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ------------------------- HORARIO EN VIVO --------------------------- */
.local-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,2.4vw,28px);align-items:stretch}
.panel{background:var(--black-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.panel-head h3{font-size:1.24rem}

.status-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:40px;font-size:.82rem;font-weight:600;
  border:1px solid;transition:.4s}
.status-pill .bulb{width:8px;height:8px;border-radius:50%;flex:none}
.status-pill.open{color:#3ddc84;border-color:rgba(61,220,132,.35);background:rgba(61,220,132,.08)}
.status-pill.open .bulb{background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulseDot 2s infinite}
.status-pill.soon{color:#ffb020;border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.08)}
.status-pill.soon .bulb{background:#ffb020}
.status-pill.closed{color:#ff6b6b;border-color:rgba(255,107,107,.32);background:rgba(255,107,107,.07)}
.status-pill.closed .bulb{background:#ff6b6b}

.clock{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.clock-time{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2.5rem,5.4vw,3.6rem);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.clock-time .sec{color:var(--orange);font-size:.44em;vertical-align:super;letter-spacing:0}
.clock-zone{font-size:.74rem;color:var(--grey-2);letter-spacing:.1em;text-transform:uppercase}
.next-info{font-size:.9rem;color:var(--grey);margin-bottom:20px}
.next-info b{color:var(--white);font-weight:600}

.day-bar{height:10px;border-radius:10px;background:rgba(255,255,255,.07);position:relative;margin-bottom:9px;
  border:1px solid var(--line)}
.day-bar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--orange-deep),var(--orange),var(--orange-soft));
  border-radius:10px;transition:width .8s var(--ease)}
.day-bar .slot{position:absolute;top:0;height:100%;border-radius:6px;
  background:linear-gradient(180deg,rgba(255,138,61,.55),rgba(255,106,19,.32))}
.bar-legend{display:flex;justify-content:space-between;font-size:.68rem;color:var(--grey-2);letter-spacing:.08em;margin-bottom:22px}

.hours{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:16px}
.hour-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:10px;
  font-size:.87rem;transition:background .3s}
.hour-row .d{color:var(--grey);text-transform:capitalize}
.hour-row .h{color:var(--grey);font-variant-numeric:tabular-nums;text-align:right}
.hour-row.today{background:rgba(255,106,19,.09);border:1px solid rgba(255,106,19,.2)}
.hour-row.today .d{color:var(--white);font-weight:600}
.hour-row.today .h{color:var(--orange);font-weight:600}
.hour-row.closed .h{color:var(--grey-2)}

/* Mapa */
.map-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--black-3);min-height:320px;height:100%}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg);
  transition:filter .6s}
.map-wrap:hover iframe{filter:grayscale(.35) invert(.9) contrast(.9) hue-rotate(180deg)}
.map-card{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;background:rgba(9,9,9,.92);
  backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:var(--r);padding:18px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.map-card .addr{display:flex;gap:12px;align-items:flex-start;min-width:0}
.map-card .addr svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.7;flex:none;margin-top:2px}
.map-card .addr b{display:block;font-size:.9rem;font-weight:600}
.map-card .addr span{font-size:.8rem;color:var(--grey-2)}

/* Reseñas Google */
.gbox{display:flex;flex-direction:column;gap:18px}
.g-rating{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.g-score{font-family:'Archivo',sans-serif;font-weight:900;font-size:3rem;line-height:1}
.g-logo{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--grey);font-weight:600}
.g-logo svg{width:17px;height:17px}

/* ---------------------------- CONTACTO ------------------------------- */
.form{display:flex;flex-direction:column;gap:16px}
.field{position:relative;display:flex;flex-direction:column;gap:8px}
.field label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);font-weight:600}
.field input,.field textarea,.field select{
  width:100%;background:var(--black-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;font-size:.94rem;transition:border-color .3s,background .3s;color:var(--white)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);background:var(--black-4)}
.field input::placeholder,.field textarea::placeholder{color:#4d4d4d}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239a9a9a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px;cursor:pointer}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--grey-2);line-height:1.5;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--orange);flex:none;margin-top:2px;cursor:pointer}
.check a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}

/* Selector tipo chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:40px;
  border:1px solid var(--line);font-size:.85rem;color:var(--grey);cursor:pointer;transition:.3s var(--ease);
  background:var(--glass)}
.chip:hover span{border-color:var(--line-2);color:var(--white)}
.chip input:checked + span{background:rgba(255,106,19,.12);border-color:var(--orange);color:var(--white);font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--orange);outline-offset:3px}

/* Asistente presupuesto */
.wizard{background:var(--black-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.wiz-bar{display:flex;gap:4px;padding:20px clamp(22px,3vw,32px) 0}
.wiz-bar i{flex:1;height:3px;border-radius:4px;background:rgba(255,255,255,.09);transition:background .5s var(--ease)}
.wiz-bar i.on{background:var(--orange)}
.wiz-steps{padding:clamp(22px,3vw,32px)}
.wiz-step{display:none;flex-direction:column;gap:18px;animation:fadeUp .5s var(--ease)}
.wiz-step.active{display:flex}
.wiz-step h3{font-size:1.32rem}
.wiz-step > p{color:var(--grey);font-size:.92rem;margin-top:-8px}
.wiz-foot{display:flex;justify-content:space-between;gap:12px;padding:0 clamp(22px,3vw,32px) clamp(22px,3vw,32px);flex-wrap:wrap}
.wiz-count{font-size:.76rem;color:var(--grey-2);letter-spacing:.1em;text-transform:uppercase;align-self:center}
.wiz-summary{background:var(--black-3);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:10px}
.wiz-summary div{display:flex;justify-content:space-between;gap:16px;font-size:.86rem;flex-wrap:wrap}
.wiz-summary div span:first-child{color:var(--grey-2)}
.wiz-summary div span:last-child{color:var(--white);font-weight:600;text-align:right}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Tarjetas de contacto directo */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.ccard{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r);
  background:var(--black-2);border:1px solid var(--line);transition:.4s var(--ease)}
.ccard:hover{border-color:rgba(255,106,19,.32);transform:translateY(-3px);background:var(--black-3)}
.ccard .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,106,19,.11);border:1px solid rgba(255,106,19,.2)}
.ccard .ico svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.7}
.ccard .ico svg[fill="currentColor"]{fill:var(--orange);stroke:none}
.ccard small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.ccard b{font-size:.93rem;font-weight:600;overflow-wrap:anywhere}

/* ------------------------- WHATSAPP FLOTANTE ------------------------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:960;display:flex;align-items:center;gap:0;
  height:58px;border-radius:40px;padding:0;background:#25D366;color:#062d15;
  box-shadow:0 12px 34px -8px rgba(37,211,102,.55),0 2px 8px rgba(0,0,0,.4);
  transition:transform .4s var(--ease),box-shadow .4s,gap .4s var(--ease),padding .4s var(--ease);
  overflow:hidden;transform:translateY(120px);opacity:0}
.wa-float.show{transform:none;opacity:1}
.wa-float .ic{width:58px;height:58px;display:grid;place-items:center;flex:none}
.wa-float svg{width:29px;height:29px;fill:currentColor}
.wa-float .txt{max-width:0;white-space:nowrap;font-size:.88rem;font-weight:700;overflow:hidden;transition:max-width .45s var(--ease),padding .45s}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 42px -8px rgba(37,211,102,.7)}
.wa-float:hover .txt{max-width:210px;padding-right:24px}
@media(max-width:560px){.wa-float{right:16px;bottom:16px;height:54px}.wa-float .ic{width:54px;height:54px}}

.to-top{position:fixed;left:22px;bottom:22px;z-index:955;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(11,11,11,.85);backdrop-filter:blur(8px);
  display:grid;place-items:center;cursor:pointer;color:var(--white);
  transform:translateY(90px);opacity:0;transition:.45s var(--ease)}
.to-top.show{transform:none;opacity:1}
.to-top:hover{border-color:var(--orange);color:var(--orange)}
.to-top svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:560px){.to-top{left:16px;bottom:16px;width:40px;height:40px}}

/* ------------------------------ FOOTER ------------------------------- */
.site-footer{border-top:1px solid var(--line);background:var(--black-2);padding-top:clamp(52px,7vw,84px)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,52px);padding-bottom:52px}
.foot-brand img{height:40px;margin-bottom:18px}
.foot-brand p{color:var(--grey);font-size:.9rem;max-width:36ch;margin-bottom:20px}
.foot-col h4{font-family:'Sora',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-2);margin-bottom:18px}
.foot-col ul{display:flex;flex-direction:column;gap:11px}
.foot-col a,.foot-col li{font-size:.89rem;color:var(--grey);transition:color .25s}
.foot-col a:hover{color:var(--orange)}
.socials{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.soc{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;
  transition:.35s var(--ease);color:var(--grey)}
.soc:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);background:rgba(255,106,19,.07)}
.soc svg{width:17px;height:17px}
.foot-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.79rem;color:var(--grey-2)}
.foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--orange)}
.foot-wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.5rem,8.8vw,7.5rem);
  line-height:.9;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
  text-align:center;padding:0 var(--pad) 18px;user-select:none;white-space:nowrap}

/* --------------------------- ANIMACIONES ----------------------------- */
/* Sin JavaScript todo se ve: las animaciones sólo se activan con la clase .js */
.line-mask{display:block;overflow:hidden}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.09s}
.js .reveal[data-delay="2"]{transition-delay:.18s}
.js .reveal[data-delay="3"]{transition-delay:.27s}
.js .reveal[data-delay="4"]{transition-delay:.36s}
.js .reveal[data-delay="5"]{transition-delay:.45s}
.js .reveal-x{opacity:0;transform:translateX(-34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal-x.in{opacity:1;transform:none}
.js .reveal-scale{opacity:0;transform:scale(.965);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal-scale.in{opacity:1;transform:none}
.js .line-mask > span{display:block;transform:translateY(102%);transition:transform 1s var(--ease)}
.js .line-mask.in > span{transform:none}
.js .line-mask.d1 > span{transition-delay:.1s}
.js .line-mask.d2 > span{transition-delay:.2s}
.js .line-mask.d3 > span{transition-delay:.3s}

/* --------------------------- RESPONSIVE ------------------------------ */
@media(max-width:1080px){
  .foot-top{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .nav-links,.nav-cta .btn-desktop{display:none}
  .burger{display:flex}
  .split,.split.wide-left,.split.wide-right,.local-grid{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .work,.work.span-6,.work.span-8,.work.span-12{grid-column:span 12;aspect-ratio:16/10}
  .contact-cards{grid-template-columns:1fr}
  .map-wrap{min-height:380px}
}
@media(max-width:640px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats,.stats.cols-2{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:32px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .hero{padding-top:88px}
  .work,.work.span-6,.work.span-8,.work.span-12{aspect-ratio:4/3}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js .reveal,.js .reveal-x,.js .reveal-scale{opacity:1;transform:none}
  .js .line-mask > span{transform:none}
  .marquee-track{animation:none}
}

@media print{
  .site-header,.wa-float,.to-top,.grain,.cursor,.preloader,.progress,.drawer{display:none !important}
  body{background:#fff;color:#000}
}

/* ===================== COMPLEMENTOS DE COMPONENTES ==================== */

/* Marcador "ahora" en la barra de horario */
.day-bar .nowmark{position:absolute;top:-3px;width:2px;height:14px;background:var(--white);border-radius:2px;
  box-shadow:0 0 10px rgba(255,255,255,.85);z-index:2;transition:left .9s var(--ease)}

/* Fondo alterno de sección */
.sec-alt{background:var(--black-2);border-block:1px solid var(--line)}
.sec-glow::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 88% 12%,rgba(255,106,19,.10),transparent 60%)}

/* Listado de entregables */
.deliverables{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.deliverables li{background:var(--black);padding:20px 24px;display:flex;gap:12px;align-items:flex-start;
  font-size:.9rem;color:var(--grey);transition:background .35s}
.deliverables li:hover{background:var(--black-3);color:var(--white)}
.deliverables li svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--orange);fill:none;stroke-width:2}
@media(max-width:640px){.deliverables{grid-template-columns:1fr}}

/* Etiquetas */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:.73rem;padding:6px 13px;border-radius:30px;border:1px solid var(--line);
  color:var(--grey);background:var(--glass)}
.tag.on{border-color:rgba(255,106,19,.4);color:var(--orange);background:rgba(255,106,19,.08)}

/* Línea de tiempo */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(var(--orange),rgba(255,106,19,.15))}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-30px;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--black);border:2px solid var(--orange);box-shadow:0 0 0 4px rgba(255,106,19,.12)}
.tl-item .yr{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
  font-weight:600;margin-bottom:6px;display:block}
.tl-item h3{font-size:1.1rem;margin-bottom:7px}
.tl-item p{color:var(--grey);font-size:.9rem}

/* Equipo */
.team-card{background:var(--black-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:.45s var(--ease)}
.team-card:hover{border-color:rgba(255,106,19,.3);transform:translateY(-4px)}
.team-card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--black-3)}
.team-card .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) contrast(1.05);transition:.7s var(--ease)}
.team-card:hover .ph img{filter:grayscale(0);transform:scale(1.05)}
.team-card .bd{padding:22px}
.team-card h3{font-size:1.06rem;margin-bottom:4px}
.team-card span{font-size:.8rem;color:var(--orange);letter-spacing:.08em}

/* Comparativa / antes-después */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.compare > div{background:var(--black);padding:clamp(24px,3vw,32px)}
.compare h4{font-family:'Sora',sans-serif;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:18px;font-weight:600}
.compare .before h4{color:var(--grey-2)}
.compare .after h4{color:var(--orange)}
.compare ul{display:flex;flex-direction:column;gap:12px}
.compare li{font-size:.9rem;color:var(--grey);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.compare li::before{content:"—";color:var(--grey-2);flex:none}
.compare .after li::before{content:"→";color:var(--orange)}
@media(max-width:640px){.compare{grid-template-columns:1fr}}

/* Métrica destacada */
.kpi{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--line)}
.kpi b{font-family:'Archivo',sans-serif;font-weight:900;font-size:2rem;color:var(--orange);line-height:1}
.kpi span{font-size:.82rem;color:var(--grey)}

/* Errores de formulario */
.err{display:none;color:#ff6b6b;font-size:.82rem;margin-top:-4px}

/* Aviso de cookies */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:970;max-width:520px;margin-inline:auto;
  background:rgba(11,11,11,.96);backdrop-filter:blur(16px);border:1px solid var(--line-2);
  border-radius:var(--r);padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  justify-content:space-between;transform:translateY(140%);opacity:0;transition:.6s var(--ease);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
.cookie.show{transform:none;opacity:1}
.cookie p{font-size:.8rem;color:var(--grey);flex:1;min-width:220px;line-height:1.5}
.cookie a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.cookie{left:12px;right:12px;bottom:82px}}

/* Bloque legal */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:44px 0 14px}
.legal h3{font-size:1.06rem;margin:26px 0 10px}
.legal p,.legal li{color:var(--grey);font-size:.94rem;margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.legal a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}

/* Página 404 */
.err-code{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(6rem,26vw,18rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,106,19,.5);letter-spacing:-.05em}

/* Cinta de servicios en tarjeta grande */
.showcase{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:var(--black-2);min-height:clamp(320px,44vw,520px);display:flex;align-items:flex-end;isolation:isolate}
.showcase video,.showcase img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-1}
.showcase::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,7,7,.95),rgba(7,7,7,.4) 55%,rgba(7,7,7,.15))}
.showcase-body{padding:clamp(26px,4vw,52px);max-width:62ch}
.showcase-body h3{font-size:clamp(1.5rem,3.4vw,2.6rem);margin-bottom:14px}
.showcase-body p{color:var(--grey);margin-bottom:24px}

/* Distribución dos columnas de texto */
.prose-2{columns:2;column-gap:clamp(24px,4vw,48px)}
.prose-2 p{color:var(--grey);margin-bottom:16px;break-inside:avoid}
@media(max-width:760px){.prose-2{columns:1}}

/* Sticky lateral */
.sticky-col{position:sticky;top:120px;align-self:start}
@media(max-width:900px){.sticky-col{position:static}}

/* =====================================================================
   INSTAGRAM / REDES
   ===================================================================== */
.ig-grid{display:grid;grid-template-columns:.95fr 1.25fr;gap:clamp(18px,2.4vw,30px);align-items:stretch}
@media(max-width:900px){.ig-grid{grid-template-columns:1fr}}

.ig-panel{display:flex;flex-direction:column;gap:18px;justify-content:center;
  background:linear-gradient(150deg,rgba(255,106,19,.12),rgba(255,255,255,.02) 46%,var(--black-2));
  border:1px solid rgba(255,106,19,.22);border-radius:var(--r-lg);padding:clamp(26px,3.4vw,38px);
  position:relative;overflow:hidden}
.ig-panel::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;top:-45%;right:-22%;
  background:radial-gradient(circle,rgba(255,106,19,.24),transparent 68%);filter:blur(18px);pointer-events:none}
.ig-panel > *{position:relative}
.ig-badge{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;padding:7px 14px;border-radius:40px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.35);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);font-weight:600}
.ig-badge svg{width:15px;height:15px;fill:currentColor}
.ig-handle{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.5rem,3.4vw,2.5rem);word-break:break-word}
.ig-handle a{transition:color .3s}
.ig-handle a:hover{color:var(--orange)}
.ig-panel p{color:var(--grey);font-size:.94rem}

.ig-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,12px)}
@media(max-width:520px){.ig-mosaic{grid-template-columns:repeat(2,1fr)}}
.ig-tile{position:relative;display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--black-3)}
.ig-tile img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.92);
  transition:transform .9s var(--ease),filter .5s}
.ig-tile:hover img{transform:scale(1.08);filter:saturate(1.05) brightness(1)}
.ig-tile::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:linear-gradient(135deg,rgba(255,106,19,.55),rgba(217,79,56,.45))}
.ig-tile:hover::after{opacity:1}
.ig-tile .ig-mark{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  opacity:0;transform:scale(.8);transition:.4s var(--ease)}
.ig-tile:hover .ig-mark{opacity:1;transform:none}
.ig-tile .ig-mark svg{width:26px;height:26px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* =====================================================================
   UTILIDADES DE MAQUETACIÓN
   (sustituyen a los estilos en línea: un solo sitio donde tocarlos)
   ===================================================================== */
.u-center{text-align:center}
.u-row{display:flex;gap:10px;flex-wrap:wrap}
.u-row-12{display:flex;gap:12px;flex-wrap:wrap}
.u-row-center{justify-content:center}
.u-col{display:flex;flex-direction:column;gap:12px}
.u-col-14{display:flex;flex-direction:column;gap:14px}
.u-col-16{display:flex;flex-direction:column;gap:16px}
.u-col-xl{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.u-ml-auto{margin-left:auto}
.u-start{align-items:start}
.u-self-start{align-self:flex-start}

.u-mt-xs{margin-top:6px}
.u-mt-sm{margin-top:14px}
.u-mt-md{margin-top:22px}
.u-mt-lg{margin-top:30px}
.u-mt-grid{margin-top:clamp(14px,1.6vw,22px)}
.u-mt-xl{margin-top:clamp(40px,6vw,72px)}
.u-mb-xs{margin-bottom:8px}
.u-mb-sm{margin-bottom:16px}
.u-mb-md{margin-bottom:22px}
.u-mb-lg{margin-bottom:28px}
.u-mb-xl{margin-bottom:clamp(40px,6vw,72px)}
.u-mb-2xl{margin-bottom:clamp(56px,8vw,110px)}

.u-narrow-sm{max-width:46ch}
.u-narrow{max-width:52ch}
.u-narrow-lg{max-width:62ch}
.u-lead{font-size:var(--fs-lead)}
.u-body{font-size:1.02rem}
.u-sm{font-size:.92rem}
.u-xs{font-size:.76rem;line-height:1.55}
.u-hidden{display:none}

.idx{font-family:'Archivo',sans-serif;font-weight:900;font-size:.78rem;color:var(--grey-2);
  letter-spacing:.1em;display:block;margin-bottom:14px}
.stars-lg{font-size:1.3rem}
.kpi-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.kpi-pair{grid-template-columns:1fr}}
.stats-4{grid-template-columns:repeat(4,1fr)}

.media{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line)}
.media-wide{aspect-ratio:16/10}

.hero-center{min-height:78vh;display:flex;align-items:center;text-align:center}
.hero-center h1{margin:18px auto}
.hero-center .lead{margin:0 auto 34px;max-width:52ch}
.h-md{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.ta-sm{min-height:100px}
.crumbs .current{color:var(--grey);opacity:1}
.legal-todo{border:1px solid rgba(255,106,19,.35);background:rgba(255,106,19,.07);
  border-radius:12px;padding:16px 18px;font-size:.86rem;color:var(--white)}
.legal-todo code{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:5px;font-size:.9em}

/* Instagram en la cabecera */
.nav-soc{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--grey);flex:none;
  transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease)}
.nav-soc:hover{color:var(--orange);border-color:rgba(255,106,19,.4);
  background:rgba(255,106,19,.07);transform:translateY(-2px)}
.nav-soc svg{width:18px;height:18px;fill:currentColor}
.mega-foot .u-row{gap:8px}
.mega-foot .btn svg{fill:currentColor}

/* =====================================================================
   SERVICIO ESTRELLA
   ===================================================================== */
.star-card{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(20px,3vw,36px);
  align-items:stretch;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(255,106,19,.3);
  background:linear-gradient(148deg,rgba(255,106,19,.13),rgba(255,106,19,.03) 44%,var(--black-2));
  position:relative}
.star-card::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  top:-42%;right:-14%;pointer-events:none;filter:blur(22px);
  background:radial-gradient(circle,rgba(255,106,19,.24),transparent 68%)}
.star-body{position:relative;padding:clamp(26px,3.6vw,44px);display:flex;flex-direction:column;gap:16px}
.star-body h3{font-size:clamp(1.5rem,3vw,2.2rem)}
.star-body > p{color:var(--grey);font-size:.98rem;max-width:52ch}
.star-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:7px 15px;border-radius:40px;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#0a0a0a;background:var(--orange);
  box-shadow:0 8px 24px -8px rgba(255,106,19,.7)}
.star-badge svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.star-list{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.star-list li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--white);line-height:1.5}
.star-list li svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--orange);fill:none;stroke-width:2.2}
.star-media{position:relative;min-height:280px;overflow:hidden}
.star-media video,.star-media img{width:100%;height:100%;object-fit:cover;display:block}
.star-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(7,7,7,.55),transparent 34%)}
.star-media-tag{position:absolute;left:16px;bottom:16px;z-index:2;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--white);background:rgba(7,7,7,.7);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:30px;padding:6px 13px}
@media(max-width:900px){
  .star-card{grid-template-columns:1fr}
  .star-media{min-height:230px;order:-1}
  .star-media::after{background:linear-gradient(to bottom,transparent 50%,rgba(7,7,7,.7))}
}

/* Estrella en el mega menú y en el hub */
.mega-item.is-star{background:rgba(255,106,19,.07);border:1px solid rgba(255,106,19,.24)}
.mega-item.is-star:hover{background:rgba(255,106,19,.12)}
.tag-star{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#0a0a0a;background:var(--orange);border-radius:20px;padding:2px 8px;margin-left:7px;
  vertical-align:middle;white-space:nowrap}
.split.is-star{padding:clamp(22px,3vw,34px);border-radius:var(--r-xl);
  border:1px solid rgba(255,106,19,.22);background:rgba(255,106,19,.04)}

/* =====================================================================
   FOTOGRAFÍA ANIMADA
   ===================================================================== */
.cine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
@media(max-width:820px){.cine-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cine-grid{grid-template-columns:1fr}}
.cine-tile{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--black-3);aspect-ratio:16/10;isolation:isolate}
.cine-tile video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease);filter:saturate(1.02)}
.cine-tile:hover video{transform:scale(1.05)}
.cine-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(7,7,7,.9) 2%,rgba(7,7,7,.15) 46%,transparent 70%)}
.cine-tile figcaption{position:absolute;inset:auto 0 0 0;z-index:2;padding:18px 20px}
.cine-tile figcaption b{display:block;font-family:'Archivo',sans-serif;font-weight:900;
  font-size:1.05rem;letter-spacing:-.015em;margin-bottom:3px}
.cine-tile figcaption span{font-size:.82rem;color:var(--grey)}

/* =====================================================================
   PLANES (renting web) Y TARIFA (estudio)
   ===================================================================== */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);align-items:stretch}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,34px);
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--black-2);
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.plan:hover{transform:translateY(-3px);border-color:rgba(255,106,19,.3)}
.plan-star{border-color:rgba(255,106,19,.34);
  background:linear-gradient(155deg,rgba(255,106,19,.12),rgba(255,255,255,.02) 46%,var(--black-2))}
.plan-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:6px 13px;
  border-radius:40px;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#0a0a0a;background:var(--orange)}
.plan-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9}
.plan-badge-soft{background:transparent;color:var(--grey);border:1px solid var(--line-2)}
.plan h3{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.plan-price{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px}
.plan-price .from{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2)}
.plan-price b{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.3rem,2.4vw,1.75rem);
  letter-spacing:-.025em;color:var(--orange);line-height:1.1}
.plan-lead{color:var(--grey);font-size:.93rem}
.plan-list{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:10px}
.plan-list li,.price-list li{display:flex;gap:10px;align-items:flex-start;font-size:.89rem;
  color:var(--grey);line-height:1.5}
.plan-list li svg,.price-list li svg{width:15px;height:15px;flex:none;margin-top:3px;
  stroke:var(--orange);fill:none;stroke-width:2.2}

.price-card{padding:clamp(26px,3.4vw,40px);border-radius:var(--r-lg);
  border:1px solid rgba(255,106,19,.28);
  background:linear-gradient(155deg,rgba(255,106,19,.12),rgba(255,255,255,.02) 48%,var(--black-2));
  display:flex;flex-direction:column;gap:12px}
.price-tag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);font-weight:600}
.price{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.4rem,5vw,3.6rem);color:var(--orange);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price .from{font-family:'Sora',sans-serif;font-size:.8rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey-2)}
.price .unit{font-family:'Sora',sans-serif;font-size:1rem;font-weight:600;color:var(--white);letter-spacing:0}
.price-note{font-size:.82rem;color:var(--grey-2);margin-top:-4px}
.price-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}

/* =====================================================================
   LOGOTIPOS DE CLIENTE Y FOTOS CON PIE
   ===================================================================== */
.client-mark.has-logo{background:#f5f3f0;border-color:rgba(255,255,255,.14);padding:8px 10px;
  width:74px;height:50px;border-radius:11px}
.client:hover .client-mark.has-logo{background:#fff;border-color:rgba(255,106,19,.5);transform:rotate(-2deg)}
.client-mark.has-logo img{width:100%;height:100%;object-fit:contain;display:block}

.photo{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.photo:hover img{transform:scale(1.04)}
.photo figcaption{position:absolute;inset:auto 0 0 0;padding:26px 18px 14px;font-size:.78rem;
  color:var(--white);background:linear-gradient(to top,rgba(7,7,7,.92),transparent)}

/* Logotipo del pie en SVG: escala exacta a cualquier ancho, nunca se deforma */
/* Logotipo fantasma del pie.
   Relleno sólido (no contorno) y con tope de ancho: así el grosor de las letras
   es siempre proporcional a su tamaño. Con el contorno de 1 px, en pantallas
   grandes las letras crecían pero la línea no, y quedaban como un alambre. */
.foot-wordmark{padding:0 var(--pad) 18px;user-select:none;line-height:0;overflow:hidden}
.foot-wordmark svg{width:100%;max-width:1080px;height:auto;display:block;margin-inline:auto}
.foot-wordmark text{font-family:'Archivo',Impact,sans-serif;font-weight:900;font-size:100px;
  letter-spacing:-.04em;fill:rgba(255,255,255,.06);stroke:none}

/* Mega menú con siete servicios */
.mega{width:min(780px,94vw)}
.mega-item{padding:12px 13px}
.mega-item p{font-size:.76rem}

/* =====================================================================
   MÓVIL Y iOS / iPHONE
   Ajustes concretos para Safari en iPhone: zonas seguras del notch,
   el 100vh que no cuenta la barra de direcciones, el zoom automático
   al enfocar un campo y los objetivos táctiles.
   ===================================================================== */

/* Safari en iOS resalta en gris cada elemento tocado: lo quitamos y
   damos nosotros la respuesta visual con :active */
a,button,input,select,textarea,label,summary{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .btn:active{transform:scale(.97)}
  .card:active,.client:active,.plan:active{transform:scale(.995)}
}

/* Zonas seguras (notch, isla dinámica e indicador de inicio) */
@supports (padding:max(0px)){
  .nav{padding-left:max(var(--pad),env(safe-area-inset-left));
       padding-right:max(var(--pad),env(safe-area-inset-right))}
  .drawer{padding-left:max(var(--pad),env(safe-area-inset-left));
          padding-right:max(var(--pad),env(safe-area-inset-right));
          padding-bottom:max(36px,env(safe-area-inset-bottom))}
  .wa-float{right:max(16px,env(safe-area-inset-right));
            bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))}
  .to-top{left:max(16px,env(safe-area-inset-left));
          bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))}
  .cookie{padding-bottom:max(18px,calc(env(safe-area-inset-bottom) + 4px))}
  .site-footer .foot-bottom{padding-bottom:max(22px,env(safe-area-inset-bottom))}
}

/* El hero usa svh (altura real visible) con vh de reserva para navegadores viejos */
.hero{min-height:100vh;min-height:100svh}

/* iOS hace zoom al enfocar un campo con menos de 16px. Lo evitamos. */
@media (max-width:900px){
  .field input,.field textarea,.field select{font-size:16px}
  .chip span{font-size:.9rem;padding:12px 18px}
}

/* Objetivos táctiles cómodos (mínimo 44 px de alto, guía de Apple) */
@media (hover:none),(pointer:coarse){
  .btn{min-height:46px;padding-block:13px}
  .btn-sm{min-height:44px}
  .filter{min-height:44px;padding-block:11px}
  .rail-btn{width:48px;height:48px}
  .acc-head{padding-block:20px}
  .soc,.nav-soc{width:46px;height:46px}
  .foot-col a,.foot-bottom a{display:inline-block;padding-block:3px}
  .check input{width:22px;height:22px}
}

/* Nada puede desbordar horizontalmente: el scroll lateral en móvil
   es el fallo más común y el más feo */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg,table{max-width:100%}
.marquee,.rail,.cine-grid,.work-grid,.clients,.plans{max-width:100%}
.rail{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* Ajustes finos de tipografía y espacio en pantallas pequeñas */
@media (max-width:560px){
  :root{--pad:18px}
  .sec{padding-block:clamp(56px,13vw,84px)}
  .hero h1{font-size:clamp(2.6rem,12.5vw,4rem)}
  .page-hero h1{font-size:clamp(2.1rem,10vw,3rem)}
  .sec-head h2,.cta-band h2{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .hero .lead,.page-hero .lead{font-size:1rem}
  .hero-badges{gap:8px}
  .badge{font-size:.74rem;padding:7px 12px}
  .star-body{gap:14px}
  .star-list li{font-size:.88rem}
  .clock-time{font-size:clamp(2.2rem,13vw,3rem)}
  .hour-row{padding:9px 10px;font-size:.82rem}
  .hour-row .h{font-size:.78rem}
  .map-card{flex-direction:column;align-items:flex-start}
  .map-card .btn{width:100%;justify-content:center}
  .wiz-foot{flex-direction:column-reverse}
  .wiz-foot .btn{width:100%;justify-content:center}
  .wiz-count{text-align:center}
  .rail > *{flex-basis:min(340px,88vw)}
  .cta-actions .btn,.hero-actions .btn{width:100%;justify-content:center}
  .contact-cards{gap:12px}
  .tags{gap:6px}
  .tag{font-size:.7rem;padding:5px 11px}
}

/* En horizontal sobre un iPhone el hero no debe ocupar toda la pantalla */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:120px 60px}
  .hero-scroll{display:none}
}

/* Safari en iOS penaliza mucho los desenfoques a pantalla completa:
   los reducimos en móvil para que el scroll vaya fino */
@media (max-width:900px){
  .site-header.scrolled{backdrop-filter:blur(10px)}
  .map-wrap iframe{filter:grayscale(1) invert(.9) contrast(.88) hue-rotate(180deg)}
  .grain{opacity:.03}
}

/* Impresión y modo de alto contraste heredan del bloque principal */
.drawer-link.is-star{color:var(--orange)}
.drawer-link.is-star small{color:var(--orange);opacity:.8}
.drawer-link.is-star::after{content:"★";font-size:.6em;margin-left:6px;vertical-align:super;opacity:.9}
.photo-tall img{aspect-ratio:4/5}
@media(max-width:900px){.photo-tall img{aspect-ratio:3/2}}

/* =====================================================================
   DESPIECE 3D DEL RIG (producción audiovisual)
   El render original viene en una sola imagen, así que cada pieza está
   recortada aparte para poder moverlas de forma independiente.
   ===================================================================== */
.rig-stage{position:relative}
.rig-stage > *:not(.rig-scene){position:relative;z-index:1}
/* overflow:clip (no hidden) a propósito: clip no crea contenedor de scroll,
   así que el position:sticky de dentro sigue funcionando. */
.rig-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.rig-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center}
.rig-inner{position:relative;width:min(74vh,86vw);aspect-ratio:700/938;
  opacity:.18;filter:saturate(.45) contrast(1.08) brightness(1.25);
  will-change:transform;transform-origin:50% 55%}
.rig-piece{position:absolute;display:block;height:auto;
  will-change:transform;backface-visibility:hidden}

/* Halo naranja detrás del rig para que no quede un gris muerto */
.rig-scene::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 42% at 50% 46%,rgba(255,106,19,.13),transparent 68%)}

/* Sin JS o con movimiento reducido: se queda quieto y montado */
html:not(.js) .rig-inner{opacity:.13}
@media (prefers-reduced-motion:reduce){
  .rig-inner{opacity:.12}
  .rig-piece{transform:none !important}
}

/* En móvil se reduce: son 21 imágenes moviéndose y no compensa */
@media (max-width:760px){
  .rig-inner{width:min(58vh,96vw);opacity:.13}
  .rig-scene::before{background:radial-gradient(60% 40% at 50% 45%,rgba(255,106,19,.11),transparent 70%)}
}