/* =========================================================
   SA Sonidos & Multimedia — landing
   Paleta del logo (azul #00769C) sobre negro, abierta hacia
   el magenta de las luces de escenario que se ven en las fotos.
   Una sola familia tipográfica —Archivo variable— en tres anchos.
   ========================================================= */

:root{
  --ink:    #07080A;   /* fondo base          */
  --ink-2:  #0B0D10;   /* secciones alternas  */
  --ink-3:  #12151A;   /* superficies / cards */
  --line:   #22262E;   /* bordes              */

  --brand:      #00769C;
  --brand-lit:  #29B4E0;
  --violet:     #7B5BD6;
  --magenta:    #E0518F;
  --gold:       #E9C79A;

  /* el barrido de luz de escenario: azul → violeta → magenta */
  --beam: linear-gradient(96deg, var(--brand-lit) 0%, var(--violet) 52%, var(--magenta) 100%);

  --txt:   #E9EDF2;
  --txt-2: #B4BDC9;   /* gris de apoyo: subido para que se lea cómodo */

  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:  'Kaushan Script', 'Segoe Script', cursive;

  --wide:   118%;   /* títulos    */
  --narrow:  70%;   /* etiquetas  */

  --wrap: 1180px;
  --pad:  clamp(20px, 5vw, 48px);
  --gap:  clamp(56px, 9vw, 120px);

  --r:  16px;
  --ease:  cubic-bezier(.22,.8,.3,1);
  --ease2: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: auto;          /* lo maneja script.js */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--txt);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip y no hidden: hidden crea un contenedor de scroll y eso rompe el
     anclaje de ScrollTrigger. clip recorta igual sin generar scrollport. */
  overflow-x: clip;
}

/* height:auto es necesario: con los atributos width/height en el HTML,
   sin esto el alto del atributo gana sobre el ancho del CSS */
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }
svg{ display: block; }

/* ── tipografía ──────────────────────────────────────── */
h1, h2{
  font-family: var(--display);
  font-stretch: var(--wide);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
h2{ font-size: clamp(2.3rem, 6.2vw, 4.4rem); }

h3{
  font-family: var(--display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0;
}

p{ margin: 0; }

/* el barrido de luz aplicado al texto */
.grad{
  background: var(--beam);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.eyebrow{
  font-family: var(--display);
  font-stretch: var(--narrow);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brand-lit);
  margin: 0 0 20px;
}

.motto{
  font-family: var(--script);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.3;
  color: var(--gold);
  margin: 0;
}

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section{ padding-block: var(--gap); position: relative; }
.section--alt{ background: var(--ink-2); }

/* sin tope de ancho: el corte de los títulos lo decide el <br> del HTML.
   Un max-width en ch acá se mide con el cuerpo (17px), no con el título,
   y terminaba partiendo en cuatro líneas lo que iban a ser dos. */
.shead{ margin-bottom: clamp(40px, 6vw, 72px); }
.shead__lead{
  color: var(--txt-2);
  font-size: 1.08rem;
  margin-top: 22px;
  max-width: 46ch;
}

.skip{
  position: absolute; left: -9999px;
  background: var(--brand); color: #fff;
  padding: 12px 18px; z-index: 300; border-radius: 0 0 8px 0;
}
.skip:focus{ left: 0; top: 0; }

:where(a, button, [tabindex]):focus-visible{
  outline: 2px solid var(--brand-lit);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Lenis ────────────────────────────────────────────
   Copiado de lenis@1.3.26/dist/lenis.css (MIT). Va inline y no como
   archivo aparte porque son 500 bytes y no justifica otro pedido.
   Sin esto Lenis toma el control del scroll pero el documento nunca
   se ajusta, y la página queda como trabada: no scrollea, y nada de
   lo que depende del scroll llega a dispararse.
------------------------------------------------------- */
html.lenis,
html.lenis body{ height: auto; }

.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow: clip; }

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal]{ overscroll-behavior: contain; }

.lenis.lenis-smooth iframe{ pointer-events: none; }

.lenis.lenis-autoToggle{
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ── pantalla de carga ───────────────────────────────── */
.pre{
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--ink);
}
.pre[hidden]{ display: none; }
.pre__inner{ display: grid; justify-items: center; gap: 20px; width: min(300px, 70vw); }
.pre__logo{ width: 78px; opacity: .9; }
.pre__num{
  font-family: var(--display); font-stretch: var(--wide);
  font-size: clamp(3rem, 9vw, 5.4rem); font-weight: 800;
  line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.pre__bar{
  width: 100%; height: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.pre__bar i{
  display: block; height: 100%; width: 100%;
  background: var(--beam);
  transform: scaleX(0); transform-origin: 0 50%;
}
.pre__skip{
  position: absolute; right: var(--pad); bottom: 32px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-2);
  padding: 10px;
  transition: color .25s var(--ease);
}
.pre__skip:hover{ color: var(--txt); }

/* mientras carga no se scrollea */
.is-loading{ overflow: hidden; }

/* ── interruptor de animaciones ───────────────────────
   Sólo se muestra a quien tenga movimiento reducido activado en el
   sistema. El resto nunca lo ve: ya recibe la versión completa.
------------------------------------------------------- */
.mtoggle{
  position: fixed; left: 20px; bottom: 20px; z-index: 130;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(11,13,16,.92);
  backdrop-filter: blur(12px);
  color: var(--txt-2);
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.mtoggle[hidden]{ display: none; }
.mtoggle::before{
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-lit);
  box-shadow: 0 0 10px var(--brand-lit);
}
.mtoggle:hover{ color: var(--txt); border-color: rgba(41,180,224,.45); }
/* Cuando ofrece la versión completa no es un interruptor apagado: es una
   invitación, así que va con el color de marca y el punto latiendo. */
.mtoggle.is-off{ color: var(--brand-lit); border-color: rgba(41,180,224,.32); }
.mtoggle.is-off::before{ animation: mtblink 2.4s var(--ease) infinite; }
@keyframes mtblink{ 0%,100%{ opacity: 1 } 50%{ opacity: .35 } }
.mtoggle:hover{ color: var(--txt); border-color: rgba(41,180,224,.5); }

@media (max-width: 640px){
  .mtoggle{ left: 12px; bottom: 12px; font-size: .68rem; padding: 9px 14px; }
}

/* ── grano ────────────────────────────────────────────
   Una teselita de ruido generada una sola vez en canvas, que
   salta entre posiciones. Es lo que le saca el aspecto plano
   a los degradados grandes sobre negro.
------------------------------------------------------- */
.grain{
  position: fixed; inset: -120px; z-index: 110;
  pointer-events: none;
  opacity: .05;
  background-repeat: repeat;
  animation: grainShift 6s steps(1) infinite;
}
@keyframes grainShift{
  0%   { transform: translate(0,0) }
  10%  { transform: translate(-6%,-4%) }
  20%  { transform: translate(-9%, 3%) }
  30%  { transform: translate( 4%,-6%) }
  40%  { transform: translate(-4%, 8%) }
  50%  { transform: translate(-8%, 4%) }
  60%  { transform: translate( 6%, 2%) }
  70%  { transform: translate( 2%,-7%) }
  80%  { transform: translate(-3%, 5%) }
  90%  { transform: translate( 7%,-2%) }
  100% { transform: translate(0,0) }
}

/* ── haz por shader ──────────────────────────────────── */
.beam{
  position: absolute; inset: auto 0 0 0; z-index: 2;
  width: 100%; height: 100%;
  display: none;                 /* script.js lo prende si hay WebGL */
  pointer-events: none;
}
.beam.is-on{ display: block; }
.beam.is-on ~ .waves--hero{ display: none; }

/* ── sección anclada (los pasos) ─────────────────────── */
.pinsec{ position: relative; display: none; }
.fx .pinsec{ display: block; }
.fx .stepsflat{ display: none; }
.pin{
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.pin__inner{ width: 100%; }
.pin__head{ margin-bottom: clamp(28px, 4vw, 48px); }

.stage{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  min-height: 46svh;
}
.stage__list{
  list-style: none; margin: 0; padding: 0;
  position: relative;
  min-height: 40svh;
}
/* los cuatro pasos ocupan el mismo lugar y se turnan */
.stg{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  opacity: 0; visibility: hidden;
  transform: translateY(20px);
  transition: opacity .45s var(--ease), transform .6s var(--ease2), visibility .45s;
}
.stg__txt{
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px; max-width: 22ch;
}
.stg__img{
  margin: 0; overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
}
.stg__img img{ width: 100%; height: 100%; object-fit: cover; }
.stg.is-on{ opacity: 1; visibility: visible; transform: none; }
.stg__n{
  font-family: var(--display); font-stretch: var(--wide);
  font-size: clamp(4rem, 12vw, 9rem); font-weight: 800;
  line-height: .82; letter-spacing: -.05em;
  background: var(--beam);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.stg h3{ font-size: clamp(1.5rem, 3vw, 2.2rem); }
.stg p{ color: var(--txt-2); font-size: 1.05rem; line-height: 1.6; }

/* riel de la derecha: dónde estamos de los cuatro */
.rail{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
}
.rail li{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #7E8896;
  transition: color .45s var(--ease);
}
.rail li i{
  display: block; width: 34px; height: 2px;
  background: var(--line);
  transition: background .45s var(--ease), width .45s var(--ease2);
}
.rail li.is-on{ color: var(--txt); }
.rail li.is-on i{ width: 56px; background: var(--beam); }

/* ── barra de progreso de lectura ────────────────────── */
.progress{
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--beam);
  z-index: 120;
  will-change: transform;
}

/* ── botones ─────────────────────────────────────────── */
.btn{
  --bg: var(--brand);
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--bg);
  color: #fff;
  font-family: var(--display);
  font-stretch: 100%;
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .005em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* el barrido de luz entra desde la izquierda al pasar el mouse */
.btn::before{
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--beam);
  transform: translateX(-101%);
  transition: transform .5s var(--ease2);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(41,180,224,.65); }
.btn:hover::before{ transform: none; }
.btn:active{ transform: translateY(0); }

.btn--lg{ padding: 17px 32px; font-size: 1.05rem; }
.btn--sm{ padding: 10px 18px; font-size: .9rem; }

.btn--ghost{
  --bg: transparent;
  border: 1px solid var(--line);
  color: var(--txt);
}
.btn--ghost:hover{ color: #fff; border-color: transparent; }

.i-wa{ width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn--lg .i-wa{ width: 22px; height: 22px; }
.i-line{
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
}

/* ── nav ─────────────────────────────────────────────── */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease),
              border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 6px;
}
.nav.is-stuck{
  background: rgba(7,8,10,.78);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
  padding-block: 0;
}
.nav__inner{
  display: flex; align-items: center; gap: 22px;
  height: 72px;
}
.nav__brand{
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; margin-right: auto;
}
.nav__brand img{ width: 42px; height: auto; }
.nav__brand span{
  font-family: var(--display);
  font-stretch: var(--narrow);
  font-size: .74rem; font-weight: 700;
  line-height: 1.15; letter-spacing: .14em;
  text-transform: uppercase; color: var(--txt-2);
}

.nav__links{ display: flex; gap: 30px; }
.nav__links a{
  position: relative;
  font-family: var(--display);
  font-stretch: 96%;
  font-size: .95rem; font-weight: 600;
  color: var(--txt-2);
  text-decoration: none;
  padding-block: 6px;
  transition: color .25s var(--ease);
}
/* subrayado que crece desde la izquierda */
.nav__links a::after{
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--beam);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease2);
}
.nav__links a:hover,
.nav__links a.is-active{ color: var(--txt); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform: none; }

.nav__burger{
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px;
  padding: 0;
}
.nav__burger span{
  display: block; height: 2px; width: 22px;
  margin-inline: auto;
  background: var(--txt);
  transition: transform .35s var(--ease), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:first-child{ transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform: translateY(-4px) rotate(-45deg); }

.menu{
  position: fixed; inset: 72px 0 auto 0; z-index: 99;
  background: rgba(7,8,10,.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 18px var(--pad) 30px;
  display: flex; flex-direction: column; gap: 4px;
  animation: menuIn .3s var(--ease2) both;
}
.menu[hidden]{ display: none; }
@keyframes menuIn{ from{ opacity:0; transform: translateY(-10px) } }
.menu a{
  font-family: var(--display); font-stretch: 105%;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.menu__wa{ color: var(--brand-lit); border-bottom: 0 !important; }

/* ── hero ────────────────────────────────────────────── */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: 140px 120px;
  overflow: hidden;
}
/* foto de fondo: se apaga hacia abajo para que el texto siempre tenga
   contraste, sin depender de qué zona de la imagen quede detrás */
.hero__bg{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .42;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 92%);
}
/* velo adicional bajo el texto */
.hero::after{
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, var(--ink) 8%, rgba(7,8,10,.72) 46%, rgba(7,8,10,.30) 100%);
  pointer-events: none;
}

/* halo que sigue al puntero: la luz que se mueve por la sala */
.hero__glow{
  position: absolute; inset: -20%; z-index: 2;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,42%),
              rgba(41,180,224,.22), rgba(123,91,214,.10) 45%, transparent 70%);
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.hero__inner{ position: relative; z-index: 3; }

.hero__title{
  font-size: clamp(3rem, 11.5vw, 8.2rem);
  letter-spacing: -.035em;
  margin: 0 0 34px;
}
.hero__title .mask{ display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title b{ display: block; font-weight: inherit; }
/* arranca pausado: lo suelta la clase .go cuando termina la pantalla de carga */
.js .hero__title b{ animation: rise 1s var(--ease2) var(--d, 0s) both; animation-play-state: paused; }
.js.go .hero__title b{ animation-play-state: running; }
@keyframes rise{ from{ transform: translateY(108%) } }

.hero__lead{
  max-width: 44ch;
  font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  color: var(--txt-2);
  margin-bottom: 22px;
}
.hero .motto{ margin-bottom: 38px; }

.hero__cta{ display: flex; flex-wrap: wrap; gap: 14px; }

.hero__facts{
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  list-style: none; margin: 40px 0 0; padding: 0;
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .84rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--txt-2);
}
.hero__facts li{ display: flex; align-items: center; gap: 9px; }
.hero__facts li::before{
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-lit);
  box-shadow: 0 0 10px var(--brand-lit);
}

.hero__scroll{
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  width: 24px; height: 40px; margin-left: -12px;
  border: 1px solid var(--line); border-radius: 14px;
}
.hero__scroll span{
  display: block; width: 3px; height: 7px; margin: 8px auto 0;
  border-radius: 2px; background: var(--brand-lit);
  animation: wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{
  0%{ opacity:0; transform: translateY(0) }
  30%{ opacity:1 }
  100%{ opacity:0; transform: translateY(15px) }
}

/* ── ondas (las dibuja script.js) ────────────────────── */
.waves{
  position: absolute; inset: auto 0 0 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1;
  pointer-events: none;
}
.waves--hero{ height: 78%; opacity: .5; z-index: 2; }
.waves--band{ height: 100%; opacity: .12; stroke: var(--violet); }
.waves--foot{ height: 100%; opacity: .3; }

/* ── marquesina de servicios ─────────────────────────── */
.ticker{
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display: flex; align-items: center;
  width: max-content;
  animation: slide 38s linear infinite;
}
/* la separación va como margen y no como gap: con gap, el 50% del
   recorrido no cae justo sobre la copia y el loop pega un salto */
.ticker__track > *{ margin-inline: 13px; }   /* 13+13 = los mismos 26 por ítem, y centra bien al envolver */
@keyframes slide{ to{ transform: translateX(-50%) } }
.ticker span{
  font-family: var(--display); font-stretch: var(--wide);
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap;
}
.ticker i{ color: var(--brand-lit); font-style: normal; font-size: .7rem; }

/* ── tarjetas de servicio ────────────────────────────── */
.cards{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
.card{
  position: relative;
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-3);
  overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
/* el barrido asoma por el borde superior al pasar el mouse */
.card::before{
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--beam);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease2);
}
.card:hover{ transform: translateY(-4px); border-color: #2E3440; }
.card:hover::before{ transform: none; }

.card__ico{
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 22px;
  border-radius: 13px;
  background: rgba(41,180,224,.10);
  border: 1px solid rgba(41,180,224,.22);
  transition: background .4s var(--ease);
}
.card__ico svg{
  width: 27px; height: 27px;
  fill: none; stroke: var(--brand-lit);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.card:hover .card__ico{ background: rgba(41,180,224,.18); }
/* las líneas del icono se dibujan cuando la tarjeta entra en pantalla */
.js .card__ico svg *{
  stroke-dasharray: 120; stroke-dashoffset: 120;
}
.js .card.is-in .card__ico svg *{
  animation: draw 1.1s var(--ease2) calc(var(--d, 0s) + .15s) forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0 } }

.card h3{ margin-bottom: 10px; }
.card p{ color: var(--txt-2); font-size: 1rem; line-height: 1.6; }

/* las tres principales llevan foto; el icono se apoya sobre el borde */
.card--feat{ padding: 0 28px 28px; }
.card__media{
  position: relative;
  margin: 0 -28px 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform .8s var(--ease);
}
.card--feat:hover .card__media img{ transform: scale(1.1); }
/* degradado para que el icono y el título no compitan con la foto */
.card__media::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,10,.15) 0%, rgba(18,21,26,.55) 62%, var(--ink-3) 100%);
}
.card--feat .card__ico{
  position: absolute; left: 28px; bottom: -26px; z-index: 2;
  margin: 0;
  background: var(--ink-3);
  border-color: rgba(41,180,224,.35);
}
.card--feat h3{ margin-top: 44px; }

/* ── ilustraciones de las tarjetas sin foto ──────────────
   Selfie 360, espejo mágico y drone no tienen foto propia y no
   existe ninguna libre que muestre el equipo de verdad. En vez de
   poner una foto ajena o inventada, van dibujadas: se animan solas
   y explican el servicio sin fingir que son un registro del trabajo.
--------------------------------------------------------- */
.card__media--art{
  background:
    radial-gradient(122% 92% at 50% 6%, rgba(41,180,224,.11) 0%, transparent 62%),
    linear-gradient(180deg, #101823 0%, var(--ink-3) 100%);
}
/* el degradado de las fotos taparía el dibujo: acá cae sólo al pie */
.card__media--art::after{
  background: linear-gradient(180deg, transparent 0%, transparent 54%,
              rgba(18,21,26,.62) 84%, var(--ink-3) 100%);
}
.art{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none; stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* selfie 360 */
.a3-base{ stroke: #3B4759; }
.a3-base--in{ stroke: #2B3543; }
.a3-halo{ stroke: var(--brand-lit); opacity: .2; }
.a3-person{ stroke: var(--txt-2); opacity: .75; }
.a3-arm{ stroke: #6C7B94; stroke-width: 2; }
.a3-cam{ stroke: var(--brand-lit); stroke-width: 2.2; }
.a3-ray{ stroke: var(--gold); opacity: .5; }
.a3-spin{ animation: a3spin 5.5s linear infinite; transform-origin: 0 0; }
@keyframes a3spin{ to{ transform: rotate(360deg) } }
.a3-halo{ animation: a3halo 3.4s var(--ease) infinite; transform-origin: 450px 412px; }
@keyframes a3halo{ 0%,100%{ opacity: .14; transform: scale(.93) } 50%{ opacity: .55; transform: scale(1.07) } }

/* espejo mágico */
.am-frame{ stroke: #47546B; }
.am-glass{ stroke: #2A3343; }
.am-refl{ stroke: var(--txt-2); opacity: .45; }
.am-foot{ stroke: #47546B; }
.am-scan{ stroke: var(--brand-lit); animation: amscan 4s var(--ease) infinite; }
@keyframes amscan{
  0%   { transform: translateY(0);     opacity: 0 }
  14%  { opacity: 1 }
  40%  { opacity: 1 }
  50%  { transform: translateY(296px); opacity: 0 }
  100% { transform: translateY(296px); opacity: 0 }
}
.am-print{ stroke: var(--brand-lit); opacity: .85; animation: amprint 4s var(--ease2) infinite; }
@keyframes amprint{
  0%,20% { opacity: 0; transform: translate(-104px, 22px) }
  44%    { opacity: 1; transform: none }
  90%    { opacity: 1; transform: none }
  100%   { opacity: 0; transform: none }
}
.am-spark{ stroke: var(--gold); opacity: .55; animation: amspark 4s var(--ease) infinite; }
@keyframes amspark{ 0%,30%,100%{ opacity: .12 } 16%{ opacity: .8 } }

/* drone */
.ad-body{ stroke: #7D8899; }
.ad-arm{ stroke: #4A5668; }
.ad-lens{ stroke: var(--gold); }
.ad-cone{ stroke: var(--brand-lit); opacity: .22; stroke-dasharray: 10 17; }
.ad-ground{ stroke: #3B4759; stroke-dasharray: 3 24; }
.ad-fly{ animation: adfly 3.6s var(--ease) infinite; }
@keyframes adfly{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-15px) } }
/* las hélices giran moviendo el guionado: así no hace falta un
   transform-origin distinto para cada una */
.ad-rot{ stroke: var(--brand-lit); stroke-dasharray: 30 60; animation: adrot 1.05s linear infinite; }
.ad-rot--b{ animation-direction: reverse; }
@keyframes adrot{ to{ stroke-dashoffset: -90 } }
.ad-frame{ stroke: var(--brand-lit); opacity: .55; animation: adframe 2.6s var(--ease) infinite; }
@keyframes adframe{ 0%,100%{ opacity: .28 } 50%{ opacity: .75 } }


/* ficha técnica: lo que lleva el servicio, sin párrafo */
.tags{
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.tags li{
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--txt-2);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.card--wide{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 34px 32px;
}
.card--wide .card__ico{ margin-bottom: 0; }
/* .card .card__tag y no .card__tag a secas: es un <p> dentro de .card,
   y .card p (0-1-1) le ganaba en especificidad al color y al tamaño */
.card .card__tag{
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.card__link{
  font-family: var(--display); font-stretch: 100%;
  font-weight: 700; font-size: .95rem;
  color: var(--brand-lit); text-decoration: none;
  white-space: nowrap;
  transition: gap .3s var(--ease);
}
.card__link:hover{ text-decoration: underline; }

/* ── pasos ───────────────────────────────────────────── */
.steps{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: s;
}
.steps li{
  position: relative;
  padding: 0 24px 30px;
  border-radius: var(--r);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  overflow: hidden;
}
.steps__img{
  margin: 0 -24px 22px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.steps__img img{ width: 100%; height: 100%; object-fit: cover; }
.steps__n{
  display: block;
  font-family: var(--display); font-stretch: var(--wide);
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em;
  background: var(--beam);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.steps h3{ margin-bottom: 8px; }
.steps p{ color: var(--txt-2); font-size: .98rem; line-height: 1.6; }

/* ── galería horizontal ──────────────────────────────────
   La sección mide varias pantallas de alto; adentro, el panel
   queda anclado y la cinta se recorre de costado. El alto que
   hace falta lo calcula script.js con el ancho real de la cinta.
--------------------------------------------------------- */
.hsec{ position: relative; }

/* por defecto —sin JS, con movimiento reducido o en pantalla angosta—
   la cinta es una grilla común. La clase .fx en <html> la convierte
   en el recorrido horizontal anclado. */
.htrack{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-inline: var(--pad);
  max-width: 1500px; margin-inline: auto;
}
.fx .hpin{
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.fx .htrack{
  display: flex; align-items: stretch;
  gap: 18px;
  max-width: none;
  will-change: transform;
}

.gal{
  position: relative; margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-3);
}
.fx .gal{ flex: none; height: min(62svh, 560px); }
.gal img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform .8s var(--ease);
}
.gal:hover img{ transform: scale(1.11); }
.gal{ aspect-ratio: 3 / 4; }
.gal--wide{ aspect-ratio: 3 / 2; }
.htrack .gal--wide{ grid-column: span 2; }
.fx .htrack .gal--wide{ grid-column: auto; }

.gal figcaption{
  position: absolute; inset: auto 0 0 0;
  padding: 46px 20px 18px;
  background: linear-gradient(transparent, rgba(4,5,7,.9));
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}

/* último panel de la cinta: la salida a Instagram */
.gal--cta{
  aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px;
  padding: 30px;
  text-decoration: none;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 80% at 20% 100%, rgba(41,180,224,.18), transparent 60%),
    var(--ink-3);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.gal--cta:hover{ border-color: rgba(41,180,224,.5); }
.gal__ctaTag{
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-lit);
}
.gal__ctaTitle{
  font-family: var(--display); font-stretch: var(--wide);
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800;
  line-height: .95; letter-spacing: -.03em;
}
.gal__ctaArrow{
  font-size: 1.6rem; color: var(--brand-lit);
  transition: transform .4s var(--ease2);
}
.gal--cta:hover .gal__ctaArrow{ transform: translateX(8px); }

/* ── nosotros ────────────────────────────────────────── */
.about{
  max-width: 62ch;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-3);
}
.about__lead{
  font-family: var(--display); font-stretch: 104%;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 500; line-height: 1.4; letter-spacing: -.015em;
}
.about__lead strong{ font-weight: 800; }

.ticks{
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 11px;
}
.ticks li{
  position: relative; padding-left: 30px;
  color: var(--txt-2); font-size: 1rem;
}
.ticks li::before{
  content: '';
  position: absolute; left: 4px; top: .55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--brand-lit);
  border-bottom: 2px solid var(--brand-lit);
  transform: rotate(-45deg);
}

/* ── contacto ────────────────────────────────────────── */
.contact{ overflow: hidden; background: var(--ink-2); }
.contact__inner{ position: relative; z-index: 2; text-align: center; }
.contact__title{ font-size: clamp(2.4rem, 7vw, 5rem); }
.contact__lead{
  color: var(--txt-2);
  font-size: 1.15rem;
  margin: 24px auto 40px;
  max-width: 40ch;
}
.contact__actions{
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.contact__meta{
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  margin: 64px 0 0;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.contact__meta dt{
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-lit); margin-bottom: 6px;
}
.contact__meta dd{ margin: 0; color: var(--txt-2); font-size: .98rem; line-height: 1.5; }

/* ── footer ──────────────────────────────────────────── */
.foot{
  border-top: 1px solid var(--line);
  padding-block: 64px 40px;
  text-align: center;
}
.foot__inner{ display: grid; justify-items: center; gap: 20px; }
.foot__logo{ width: 96px; opacity: .9; }
.motto--foot{ font-size: 1.5rem; }
.foot__links{ display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; }
.foot__links a{
  font-family: var(--display); font-stretch: 96%;
  font-size: .94rem; font-weight: 600;
  color: var(--txt-2); text-decoration: none;
  transition: color .25s var(--ease);
}
.foot__links a:hover{ color: var(--txt); }
.foot__copy{ color: #939CAA; font-size: .86rem; }   /* 5.0:1 sobre el fondo */

/* ── botón flotante de WhatsApp ──────────────────────── */
.wafab{
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #06281A;
  box-shadow: 0 14px 34px -10px rgba(37,211,102,.55);
  opacity: 0; visibility: hidden;
  transform: scale(.6) translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease2), visibility .4s;
}
.wafab.is-on{ opacity: 1; visibility: visible; transform: none; }
.wafab .i-wa{ width: 30px; height: 30px; }
.wafab:hover{ transform: scale(1.07); }

/* ── entradas al hacer scroll ────────────────────────── */
.js .reveal{
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .8s var(--ease2) var(--d, 0s),
              transform .8s var(--ease2) var(--d, 0s),
              filter .8s var(--ease2) var(--d, 0s);
}
.js .reveal.is-in{ opacity: 1; transform: none; filter: none; }

/* ── dónde estamos ───────────────────────────────
   El mapa es un SVG armado con datos de OpenStreetMap y servido
   desde acá: no hay iframe, ni pedido a Google, ni cookie de
   terceros. Las calles se dibujan solas al entrar en pantalla.
   Datos © colaboradores de OpenStreetMap (ODbL).
--------------------------------------------------------- */
.map{
  position: relative;
  aspect-ratio: 12 / 5;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 50% 50%, rgba(41,180,224,.09) 0%, transparent 60%),
    linear-gradient(180deg, #0B1017 0%, var(--ink-2) 100%);
}
.map__svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.r-fai{ stroke: #1D2029; stroke-width: 2; }
.r-min{ stroke: #2B3442; stroke-width: 3; }
.r-maj{ stroke: #45546B; stroke-width: 5; }
.r-ruta{ stroke: var(--brand-lit); stroke-width: 7; }
.r-hero{ stroke: var(--brand-lit); stroke-width: 5; opacity: .8; }
.r-water{ fill: rgba(41,180,224,.10); stroke: rgba(41,180,224,.30); stroke-width: 2; }

.js .map__roads path{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .map.is-in .map__roads path{ animation: mapdraw 1.6s var(--ease2) var(--t, 0s) forwards; }
@keyframes mapdraw{ to{ stroke-dashoffset: 0 } }

.map__pin{ position: absolute; left: 50%; top: 50%; z-index: 2; }
.map__pulse{
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 1px solid var(--brand-lit); border-radius: 50%;
  opacity: 0;
  animation: mappulse 2.9s var(--ease2) var(--d, 0s) infinite;
}
@keyframes mappulse{
  0%  { transform: scale(.35); opacity: .85 }
  72% { opacity: 0 }
  100%{ transform: scale(6.4); opacity: 0 }
}
.map__dot{
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; margin: -40px 0 0 -20px;
  fill: none; stroke: var(--brand-lit); stroke-width: 1.7;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.map__dot path{ fill: rgba(8,10,14,.88); }

.map__card{
  position: absolute; left: 22px; bottom: 22px; z-index: 3;
  max-width: min(340px, calc(100% - 44px));
  padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(9,11,15,.84);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.map__eyebrow{
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-lit); margin-bottom: 8px;
}
.map__addr{ color: var(--txt); font-size: 1rem; line-height: 1.5; margin-bottom: 14px; }
.map__go{
  display: inline-block;
  font-family: var(--display); font-stretch: var(--narrow);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-lit); text-decoration: none;
  border-bottom: 1px solid rgba(41,180,224,.35);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.map__go:hover{ border-color: var(--brand-lit); }
.map__attr{
  position: absolute; right: 12px; bottom: 10px; z-index: 3;
  font-size: .68rem; color: #6B7482;
}
/* el area tactil llega a 24 px sin agrandar la letra (WCAG 2.5.8) */
.map__attr a{
  color: #8C97A6;
  display: inline-block;
  padding: 6px 4px; margin: -6px -4px;
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1000px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .nav__links{ display: none; }
  .nav__burger{ display: flex; }
  .nav .btn--sm span{ display: none; }
  .nav .btn--sm{ padding: 10px 12px; }
  .hero{ padding-block: 120px 100px; }
  .contact__meta{ grid-template-columns: 1fr; gap: 18px; }
  .card--wide{ grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 900px){
  .map{ aspect-ratio: 4 / 3; }
  .htrack{ grid-template-columns: repeat(2, 1fr); }
  .stg{ grid-template-columns: 1fr; }
  .stg__img{ display: none; }
}

@media (max-width: 640px){
  body{ font-size: 16px; }
  .map{ aspect-ratio: 3 / 4; }
  .map__card{ left: 14px; right: 14px; bottom: 14px; max-width: none; padding: 16px 18px; }
  /* abajo a la derecha la tapa el botón de WhatsApp, y la atribución
     de OpenStreetMap es obligatoria: en pantalla chica va arriba */
  .map__attr{ top: 10px; bottom: auto; }
  .cards{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .htrack{ grid-template-columns: 1fr; }
  .htrack .gal--wide{ grid-column: auto; }
  .hero__scroll{ display: none; }
  .foot__links{ gap: 6px 18px; }
  .pre__skip{ bottom: 20px; }
}

/* ── movimiento reducido ─────────────────────────────────
   No se apaga todo: lo que molesta es el desplazamiento grande
   y lo que se mueve solo en loop. Los fundidos de opacidad se
   quedan, así la página sigue teniendo vida sin marear.
   (Windows: Configuración › Accesibilidad › Efectos visuales
   › Efectos de animación activa o desactiva esta rama.)
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  /* Reducir, no apagar — segunda pasada.
     La primera versión dejaba la página en cero animaciones; la segunda
     todavía cortaba de más. En Windows los efectos de animación vienen
     apagados en muchísimas máquinas, así que esta rama la ve un montón
     de gente que nunca pidió una página quieta.

     Hoy queda casi todo: los fundidos con su desplazamiento, el zoom de
     las fotos, las ondas, el grano, el haz, los trazos que se dibujan,
     los dibujos de las tarjetas y los títulos que suben línea por línea.

     Se corta lo que le saca el scroll de las manos al visitante —las
     secciones clavadas, la galería horizontal y el scroll suave, todo
     eso vive en script.js— y acá sólo la marquesina.

     La marquesina se frena porque es lo único que se mueve solo y sin
     fin: dejándola quieta en esta rama queda una forma real de pararla
     para quien la necesite. Además envuelve y se centra, así se leen
     los siete servicios enteros en vez de quedar cortados por el
     overflow; script.js tampoco duplica el contenido acá.

     Todo va condicionado a :root:not(.motion-full), así el botón de
     abajo a la izquierda devuelve la versión completa sin que nadie
     tenga que tocar la configuración del sistema. */

  :root:not(.motion-full) .ticker__track{
    animation: none !important;
    flex-wrap: wrap; justify-content: center;
    width: auto; row-gap: 6px;
  }
  :root:not(.motion-full) .ticker{ -webkit-mask-image: none; mask-image: none; }
}
@keyframes fade{ from{ opacity: 0 } }