/* Groove by Alive AMG: portada. Paleta propuesta en PROPUESTA_MARCA_Y_ESTRUCTURA.md */

/* Tipografías alojadas en el propio sitio (SIL Open Font License 1.1; ver fonts/OFL-*.txt). Solo el subconjunto latino: cubre español. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(fonts/montserrat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --claro: #F7F9F9;
  --noche: #0B1F2A;
  --azul: #01729E;
  --teal: #018F9E;
  --violeta: #6D4AE6;
  --violeta-claro: #8F6BFF;
  --verde: #8FE05A;
  --texto-noche: #D3E1E8;
  --texto-claro: #2C4452;
  --gutter: clamp(20px, 5vw, 72px);
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --cuerpo: "Roboto", "Helvetica Neue", Arial, sans-serif;
  /* Los pone efectos.js: posición del puntero (-1 a 1) y scroll en px */
  --px: 0;
  --py: 0;
  --sy: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--claro);
  color: var(--noche);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

.wrap { padding-inline: var(--gutter); max-width: 1320px; margin-inline: auto; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.top :focus-visible, .hero :focus-visible, .valores :focus-visible, .contacto :focus-visible, .pie :focus-visible { outline-color: var(--verde); }

.skip { position: absolute; left: 12px; top: -60px; background: var(--noche); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

/* Botones y enlaces */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover { background: #015e82; }
.btn--verde { background: var(--verde); color: var(--noche); }
.btn--verde:hover { background: #a2ea74; }
.link { font-family: var(--display); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.link:hover { text-decoration-color: var(--azul); }
.link--claro { color: #fff; }
.link--claro:hover { text-decoration-color: var(--verde); }

/* Cabecera, encima de la portada oscura */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px var(--gutter);
  color: #fff;
  transition: background-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
/* Al bajar, la cabecera queda fija con fondo de vidrio oscuro (como en Alive, T60 y Escúchalo) para no perder el menú, el idioma ni «Hablemos» */
.top--scrolled {
  padding-block: 12px;
  background: rgba(11, 31, 42, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
}
section[id] { scroll-margin-top: 56px; }
.top__logo img { width: clamp(132px, 15vw, 190px); }
/* Frase junto al logo (solo en pantallas anchas, donde cabe sin apretar el menú) */
.top__lema { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .3); font-size: .82rem; line-height: 1.3; color: rgba(255, 255, 255, .78); white-space: nowrap; }
@media (max-width: 1279px) { .top__lema { display: none; } }
.top__nav { display: flex; gap: 28px; margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.top__nav a { text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
.top__nav a:hover { border-bottom-color: var(--verde); }
.top__cta { padding: 0.65em 1.4em; font-size: 0.95rem; white-space: nowrap; }
/* Selector de idioma ES / EN: botón de dos opciones en una sola página (como Escúchalo e ignaciofuenzalida.com) */
.langsw { display: inline-flex; padding: 3px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; }
.langsw button {
  min-height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  cursor: pointer;
}
.langsw button:hover:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .16); }
.langsw button[aria-pressed="true"] { background: #fff; color: var(--noche); cursor: default; }
/* Si falta el JavaScript, el botón no sirve: se esconde y la web queda en español */
html:not(.js-lang) .langsw { visibility: hidden; }

/* Botón de menú (solo en celular) y panel de menú, como en Alive */
.top__burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.top__burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s ease, opacity .2s ease; }
.top__burger.abierto span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.top__burger.abierto span:nth-child(2) { opacity: 0; }
.top__burger.abierto span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 90px var(--gutter) 40px;
  background: rgba(11, 31, 42, .98);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.menu-movil.abierto { opacity: 1; visibility: visible; }
.menu-movil > a:not(.btn) { padding-block: 10px; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 8vw, 2.4rem); letter-spacing: -0.02em; text-decoration: none; }
.menu-movil .btn { margin-top: 20px; }
.menu-movil .langsw { margin-top: 28px; }
body.nav-abierta { overflow: hidden; }
@media (min-width: 861px) { .menu-movil { display: none; } }

/* Pausar animación: botón de la portada (como en Escúchalo). Detiene ondas, giro de la G, chips, banda de marcas y luces. */
.pausa {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: calc(clamp(48px, 8vw, 120px) + 14px);
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(11, 31, 42, .3);
  color: rgba(255, 255, 255, .75);
  font-family: var(--display);
  font-weight: 600;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.pausa:hover { border-color: #fff; color: #fff; }
.pausa .p-on { display: none; }
.pausa[aria-pressed="true"] .p-off { display: none; }
.pausa[aria-pressed="true"] .p-on { display: inline; }
.pausado *, .pausado *::before, .pausado *::after { animation-play-state: paused !important; }

/* Puntos de color (marcador de la marca) */
.dot { flex: none; display: inline-block; width: 18px; height: 18px; border-radius: 50%; }
.dot--teal { background: var(--teal); }
.dot--violeta { background: var(--violeta-claro); }
.dot--verde { background: var(--verde); }
.dot--blanco { background: #fff; }
.dot--azul { background: var(--azul); }
.dot--noche { background: var(--noche); }
.dot--grad { background: linear-gradient(135deg, var(--azul), var(--violeta)); }

/* ---------- Portada en 3D ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(90% 80% at 78% 18%, #0E3A52 0%, rgba(14, 58, 82, 0) 60%),
    var(--noche);
  min-height: min(94vh, 880px);
  display: flex;
  align-items: center;
  padding: 120px var(--gutter) clamp(150px, 14vw, 215px);
}

/* Fondo: manchas de luz y piso en perspectiva. Cada una se mueve distinto: eso da la sensación de distancia. */
.hero__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translate3d(0, calc(var(--sy) * 0.22px), 0); }
.orb {
  position: absolute;
  border-radius: 50%;
  transform: translate3d(calc(var(--px) * var(--d) * 90px), calc(var(--py) * var(--d) * 90px), 0);
}
/* Degradados en vez de círculos con filter: blur(): se ven igual de suaves y son mucho más livianos de mover */
.orb--azul { width: 52vw; height: 52vw; left: -17vw; top: -15vw; background: radial-gradient(closest-side, rgba(1, 114, 158, .55), rgba(1, 114, 158, .22) 55%, rgba(1, 114, 158, 0)); }
.orb--teal { width: 46vw; height: 46vw; right: -2vw; top: calc(8vh - 6vw); background: radial-gradient(closest-side, rgba(1, 143, 158, .55), rgba(1, 143, 158, .22) 55%, rgba(1, 143, 158, 0)); }
.piso {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -14%;
  height: 58%;
  overflow: hidden;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 80%);
  mask-image: linear-gradient(to top, #000 8%, transparent 80%);
}
.piso::before {
  content: "";
  position: absolute;
  inset: -72px 0 0 0;
  background-image:
    linear-gradient(rgba(1, 143, 158, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 143, 158, .55) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: piso 7s linear infinite;
  will-change: transform;
}
@keyframes piso { to { transform: translateY(72px); } }

.hero__copy { position: relative; z-index: 3; max-width: 50vw; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 5rem); color: #fff; text-wrap: balance; }
.hero__lead { margin-top: 28px; max-width: 34em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--texto-noche); }
.hero__actions { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Escena 3D: la G tiene grosor (capas apiladas en profundidad) y gira sola de un lado a otro, sin depender del mouse.
   El ancho depende también del alto de la pantalla, para que nunca se corte por abajo. */
.escena {
  position: absolute;
  z-index: 2;
  right: clamp(8px, 3vw, 56px);
  top: 46%;
  width: clamp(280px, min(40vw, 50vh), 620px);
  transform: translateY(-50%);
  perspective: 1200px;
  pointer-events: none;
  animation: entrada 1.2s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes entrada {
  from { opacity: 0; transform: translateY(-46%) translateX(50px) scale(.94); }
  to   { opacity: 1; transform: translateY(-50%); }
}
.g3d {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-40deg) rotateX(5deg);
  animation: giro 9s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes giro {
  from { transform: rotateY(-40deg) rotateX(6deg); }
  to   { transform: rotateY(40deg) rotateX(-6deg); }
}
.g3d__cuerpo { position: relative; transform-style: preserve-3d; transform: rotateZ(-7deg); }
.g3d__frente { position: relative; width: 100%; height: auto; }
.g3d__capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--i) * -6px));
  filter: brightness(calc(.92 - var(--i) * .045)) saturate(1.1);
}
.g3d__glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(closest-side, rgba(1, 143, 158, .6), rgba(1, 143, 158, 0));
  transform: translateZ(-140px) scale(1.25);
  opacity: .8;
}

/* Etiquetas de servicios flotando a distinta profundidad */
.chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateZ(var(--z));
  animation: flotar 5.5s ease-in-out infinite alternate;
}
.chip .dot { width: 12px; height: 12px; }
.chip--1 { left: 0; top: 14%; animation-delay: -1s; }
.chip--2 { right: 6%; top: 30%; animation-delay: -3s; }
.chip--3 { left: -3%; top: 56%; animation-delay: -2s; }
.chip--4 { right: 9%; bottom: 14%; animation-delay: -4s; }
.chip--5 { left: 24%; bottom: 6%; animation-delay: -.5s; }
@keyframes flotar { from { translate: 0 -8px; } to { translate: 0 10px; } }

/* Ondas entre secciones */
.wave { display: block; line-height: 0; margin-block: -1px; position: relative; z-index: 0; }
.wave svg { display: block; width: 100%; height: clamp(48px, 8vw, 120px); }
.wave--noche-claro svg { background: var(--noche); } .wave--noche-claro path { fill: var(--claro); }
/* Onda dentro de la portada: sin fondo, para que las luces y el piso sigan por detrás */
.wave--en-hero { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; margin: 0; pointer-events: none; }
.wave--en-hero path { fill: var(--claro); }
.wave--claro-noche svg { background: var(--claro); } .wave--claro-noche path { fill: var(--noche); }
.wave--claro-azul svg { background: var(--claro); } .wave--claro-azul path  { fill: var(--azul); }
.wave--azul-noche svg { background: var(--azul); }  .wave--azul-noche path  { fill: var(--noche); }
/* Oleaje lento: cada onda tiene dos capas que se desplazan a distinta velocidad (una de ellas hacia el otro lado).
   El dibujo se repite cada 1440 unidades, por eso el giro no tiene corte. efectos.js pausa las ondas que no se ven. */
.ola { animation: oleaje var(--t, 24s) linear infinite; }
.ola--atras { opacity: .45; animation-direction: reverse; }
.wave .ola--atras path { fill: var(--teal); }
.ola--rev { animation-direction: reverse; }
.ola--atras.ola--rev { animation-direction: normal; }
@keyframes oleaje { to { transform: translateX(-1440px); } }
.js .wave:not(.on) .ola { animation-play-state: paused; }

section h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }

/* ---------- Servicios: tarjetas con ilustración, poco texto, foco de luz que sigue al puntero ---------- */
.servicios { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 88px); }
.servicios__lista {
  margin-top: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
.servicio { grid-column: span 2; }
.servicio:nth-child(n+4) { grid-column: span 3; }
.servicio {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(330px, 30vw, 390px);
  padding: clamp(176px, 15vw, 190px) clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px); /* arriba queda reservado el espacio de la ilustración */
  border-radius: 28px;
  color: #fff;
  box-shadow: 0 18px 40px -26px rgba(11, 31, 42, .55);
}
.servicio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 255, 255, .2), transparent 60%);
  pointer-events: none;
}
.servicio--marca { background: linear-gradient(140deg, #017080, #0B3A4F); }
.servicio--web { background: radial-gradient(90% 90% at 100% 0%, rgba(1, 143, 158, .5), transparent 60%), var(--noche); }
.servicio--paid { background: linear-gradient(140deg, #6D4AE6, #3A2A91); }
.servicio--contenido { background: #fff; color: var(--noche); border: 1px solid rgba(11, 31, 42, .12); }
.servicio--contenido::after { background: radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(1, 114, 158, .13), transparent 60%); }
.servicio--activa { background: linear-gradient(140deg, #01729E, #5A3BD0); }
.servicio__num {
  position: absolute;
  left: clamp(22px, 2.2vw, 32px);
  top: clamp(18px, 2vw, 26px);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .08em;
  opacity: .92;
}
.servicio__arte {
  position: absolute;
  right: clamp(10px, 1.4vw, 20px);
  top: clamp(10px, 1.4vw, 20px);
  width: min(58%, 250px);
  height: auto;
  overflow: visible;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.servicio:hover .servicio__arte { transform: scale(1.07) rotate(-2deg); }
.servicio__texto { position: relative; }
.servicio h3 { font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.servicio p { margin-top: 8px; max-width: 24em; font-size: 1.05rem; line-height: 1.4; color: rgba(255, 255, 255, .94); }
.servicio--contenido p { color: var(--texto-claro); }
.tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  padding: .35em .85em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08);
}
.servicio--contenido .tags li { border-color: rgba(11, 31, 42, .3); background: transparent; }

.servicios__cta { margin-top: clamp(28px, 3.4vw, 48px); display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; }
.servicios__cta p { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; }

/* Movimiento propio de cada ilustración */
.flota { animation: sube-baja 6s ease-in-out infinite alternate; }
@keyframes sube-baja { from { transform: translateY(-4px); } to { transform: translateY(6px); } }
.anillos circle { transform-box: fill-box; transform-origin: center; animation: pulso 3.6s ease-out infinite; animation-delay: calc(var(--k, 0) * .45s); }
@keyframes pulso { 0% { transform: scale(.82); opacity: .2; } 45% { opacity: 1; } 100% { transform: scale(1.06); opacity: .5; } }
.js .barras rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1) calc(.35s + var(--k, 0) * .1s);
}
.js .servicio.is-visible .barras rect { transform: none; }

/* ---------- Cómo trabajamos (fondo oscuro, la línea se llena al bajar) ---------- */
.valores { position: relative; isolation: isolate; overflow: hidden; background: var(--noche); color: #fff; padding-block: clamp(36px, 5vw, 72px) clamp(40px, 6vw, 80px); }
/* La luz es un degradado que se apaga solo antes de llegar al borde de la sección (sin desenfoque que se corte contra la onda de arriba) */
.valores::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4vw;
  top: 6%;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  max-height: 88%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(1, 114, 158, .5), rgba(1, 114, 158, .18) 55%, rgba(1, 114, 158, 0));
}
.valores__cabeza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px clamp(16px, 5vw, 80px); align-items: end; }
.valores__cabeza p { max-width: 28em; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--texto-noche); }
/* Cuatro tarjetas en fila; arriba corre una línea que se llena al bajar */
.valores__lista {
  position: relative;
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  --p: 0;
}
.valores__lista::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--verde) calc(var(--p) * 100%), rgba(255, 255, 255, .22) calc(var(--p) * 100%));
}
.valores__lista li {
  padding: 24px 22px 28px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
}
.valores__lista li:hover { border-color: rgba(143, 224, 90, .6); background: rgba(255, 255, 255, .08); }
.valores__lista h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; color: var(--verde); }
.valores__lista p { margin-top: 8px; color: var(--texto-noche); font-size: 1rem; line-height: 1.5; }
@media (min-width: 1180px) {
  .valores__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .valores__lista h3 { font-size: clamp(1.15rem, 1.45vw, 1.4rem); }
}

/* ---------- Clientes ---------- */
.clientes { padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 104px); }
/* Jerarquía: el título es una etiqueta pequeña y las marcas son el protagonista (tamaño grande, alternando relleno y contorno). */
.clientes h2 { display: flex; align-items: center; gap: 14px; font-size: .95rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); }
.clientes h2::before { content: ""; flex: none; width: 44px; height: 2px; background: var(--azul); }
/* Banda de marcas: pasa sola de derecha a izquierda, se frena al pasar el mouse y se puede arrastrar con el mouse o el dedo.
   Sin JavaScript o con movimiento reducido queda como una lista quieta que se acomoda en varias líneas. */
.banda { margin-top: clamp(22px, 3vw, 40px); overflow: hidden; border-block: 1px solid rgba(11, 31, 42, .12); padding-block: clamp(14px, 2.2vw, 28px); }
.banda__carril { display: flex; width: max-content; max-width: 100%; }
.banda__pista { display: flex; flex-wrap: wrap; flex: none; gap: 8px 0; padding-inline: var(--gutter); }
.banda__pista li {
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5.8rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
}
/* Contorno: el relleno va del color del fondo y se pinta encima del trazo (paint-order), así no se ven las líneas internas donde se cruzan los trazos de la tipografía */
.banda__pista li:nth-child(3n+2) { color: var(--claro); -webkit-text-stroke: 3.5px var(--noche); paint-order: stroke fill; }
.banda__pista li::after {
  content: "";
  flex: none;
  width: .2em;
  height: .2em;
  margin-inline: clamp(26px, 3.6vw, 56px);
  border-radius: 50%;
  background: var(--azul);
}
.banda--anda {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.banda--anda.arrastrando { cursor: grabbing; }
.banda--anda .banda__carril { max-width: none; will-change: transform; }
.banda--anda .banda__pista { flex-wrap: nowrap; padding-inline: 0; }

/* ---------- Nosotros ---------- */
.nosotros { position: relative; isolation: isolate; overflow: hidden; background: var(--azul); color: #fff; padding-block: clamp(56px, 8vw, 116px) clamp(64px, 9vw, 130px); }
.nosotros::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 5%;
  top: 12%;
  height: 76%;
  aspect-ratio: 1100 / 1318;
  background: url(img/g.png) center / contain no-repeat;
  opacity: .13;
  filter: grayscale(1) brightness(3);
  transform: rotate(-7deg);
}
.nosotros h2 { max-width: 15ch; font-size: clamp(2.7rem, 7.4vw, 6.6rem); line-height: 1.02; letter-spacing: -0.035em; }
.nosotros h2 em { font-style: normal; }
.nosotros__linea { color: var(--azul); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.nosotros__verde { color: var(--verde); }
.nosotros__texto { margin-top: clamp(22px, 3vw, 36px); max-width: 24em; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; color: rgba(255, 255, 255, .92); }
/* Ecualizador: nacimos en la música. Barras que suben y bajan como un nivel de audio. */
.eq {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(90px, 13vw, 170px);
  margin-top: clamp(30px, 5vw, 64px);
  padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.eq i {
  flex: 1 1 0;
  max-width: 16px;
  height: 100%;
  margin-inline: clamp(2px, .35vw, 5px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  transform: scaleY(var(--h));
  animation: eq var(--t) ease-in-out var(--d) infinite alternate;
  will-change: transform;
}
.eq i:nth-child(7n+3) { background: var(--verde); }
/* En pantallas angostas, la mitad de las barras para que cada una se vea */
@media (max-width: 600px) { .eq i:nth-child(even) { display: none; } .eq i { max-width: 14px; margin-inline: 3px; } }
@keyframes eq { from { transform: scaleY(calc(var(--h) * .3)); } to { transform: scaleY(var(--h)); } }

/* ---------- Contacto ---------- */
.contacto { position: relative; isolation: isolate; overflow: hidden; background: var(--noche); color: #fff; padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 112px); }
.contacto::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -6vw;
  bottom: 4%;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  max-height: 80%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(1, 143, 158, .38), rgba(1, 143, 158, .14) 55%, rgba(1, 143, 158, 0));
}
.contacto h2 { font-size: clamp(2.8rem, 5.4vw, 5.2rem); letter-spacing: -0.03em; }
.contacto__lead { margin-top: 18px; max-width: 32em; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--texto-noche); }
.contacto__grid { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(18px, 2.6vw, 32px); align-items: stretch; }

/* Las dos vías de contacto, una al lado de la otra y con el mismo peso */
.via {
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.via__etiqueta { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.via h3 { margin-top: 10px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; }
.via__texto { margin-top: 12px; max-width: 24em; color: var(--texto-noche); }
.via__acciones { margin-top: 28px; display: flex; align-items: center; gap: 22px 28px; flex-wrap: wrap; }
.via--wa { display: flex; flex-direction: column; align-items: flex-start; align-self: start; }
/* En WhatsApp el botón va sobre el teléfono, a una altura parecida a la del botón «Enviar mensaje» del formulario */
.via--wa .via__acciones { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 18px; }
.via__arte { width: min(100%, 300px); height: auto; margin-block: 24px; align-self: center; }
.via__arte .flota { animation-duration: 5s; }

/* Formulario */
.form { display: grid; gap: 18px; }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: grid; gap: 6px; font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.form input:not([type="checkbox"]), .form select, .form textarea {
  font: inherit;
  font-family: var(--cuerpo);
  font-weight: 400;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
}
.form select option { color: var(--noche); background: #fff; }
.form textarea { resize: vertical; min-height: 130px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.form .check { display: flex; align-items: flex-start; gap: 12px; font-family: var(--cuerpo); font-weight: 400; font-size: 0.95rem; color: var(--texto-noche); }
.form .check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); flex: none; }
.form .check a { color: #fff; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; border: 0; cursor: pointer; }
.form .btn:disabled { opacity: .6; cursor: wait; transform: none; }
.form__estado { min-height: 1.6em; margin: 0; font-weight: 500; }
.form__estado.is-ok { color: var(--verde); }
.form__estado.is-error { color: #FFB4A8; }
.form__estado a { color: #fff; }
.form__nota { margin: 0; font-size: 0.875rem; color: var(--texto-noche); max-width: 38em; }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: var(--texto-noche); border-top: 1px solid rgba(255, 255, 255, .16); padding-block: 32px 40px; font-size: 0.95rem; }
.pie__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.pie img { width: 150px; }
.pie__redes { display: flex; gap: 22px; }
.pie a { text-underline-offset: 4px; }
.pie__legal { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 0.875rem; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .top__nav, .top > .top__lang { display: none; }
  .top { gap: 12px; }
  .top__cta { margin-left: auto; padding-inline: 1.1em; }
  .top__burger { display: flex; }
  .langsw button { min-height: 38px; padding: 0 12px; }
  .pausa { padding: 9px 12px; }
  .hero { flex-direction: column; align-items: flex-start; min-height: 0; padding-top: 110px; padding-bottom: 150px; }
  .hero__copy { max-width: none; }
  .escena {
    position: relative;
    right: auto; top: auto;
    width: min(74vw, 340px);
    margin: 48px auto 0;
    transform: none;
    animation-name: entrada-movil;
  }
  .chip { font-size: .8rem; padding: 7px 13px 7px 10px; }
  .chip--1 { left: -2%; }
  .chip--2 { right: 0; }
  .chip--3 { left: -4%; }
  .chip--3 { top: 48%; }
  .chip--4 { right: 1%; bottom: 19%; }
  .chip--5 { left: 8%; bottom: 2%; }
  .orb--azul, .orb--teal { width: 96vw; height: 96vw; }
  .valores__cabeza, .contacto__grid, .form__fila { grid-template-columns: 1fr; }
  /* Cómo trabajamos en móvil: tarjetas en una columna y la línea que se llena va por la izquierda */
  .valores__lista { grid-template-columns: 1fr; padding-top: 0; padding-left: 26px; }
  .valores__lista::before {
    right: auto; bottom: 0; width: 3px; height: auto;
    background: linear-gradient(to bottom, var(--verde) calc(var(--p) * 100%), rgba(255, 255, 255, .22) calc(var(--p) * 100%));
  }
  .contacto h2 { font-size: clamp(3rem, 16vw, 5rem); }
  /* Zonas táctiles de al menos ~44 px en enlaces de texto */
  .link, .pie a, .via__acciones .link { display: inline-block; padding-block: 12px; }
  .pie__redes { gap: 0 22px; }
  .pie__legal { gap: 0 22px; }
  .form .check { padding-block: 8px; }
  .tags li { font-size: .8rem; }
}
/* Tarjetas de servicios: 2 columnas en tablet, 1 en móvil */
@media (max-width: 1000px) {
  .servicios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio, .servicio:nth-child(n+4) { grid-column: span 1; }
  .servicio:last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .servicios__lista { grid-template-columns: 1fr; }
  .servicio, .servicio:nth-child(n+4), .servicio:last-child { grid-column: auto; }
  .servicio { min-height: 0; padding-top: 150px; }
  .servicio__arte { width: 52%; }
  .nosotros::before { opacity: .08; right: -4%; }
}
@keyframes entrada-movil {
  from { opacity: 0; transform: translateY(30px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* Aparecer al bajar: efectos.js marca los elementos con .rev y los muestra al entrar en pantalla.
   Sin JavaScript (o con movimiento reducido) no se esconde nada. */
.js .rev {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--n, 0) * 90ms);
}
.js .rev.is-visible { opacity: 1; transform: none; }

/* Lo que no se ve no se anima: efectos.js marca con .fuera las secciones que salieron de la pantalla */
.fuera, .fuera *, .fuera *::before, .fuera *::after { animation-play-state: paused !important; }

/* Modo liviano automático (como en T60): si el equipo no sostiene ~40 fps, efectos.js agrega .lite y, si sigue lento, .lite2.
   Se prueba a mano con ?lite=1 o ?lite=2 al final de la dirección (?lite=0 lo desactiva). */
html.lite .chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 31, 42, .55); animation: none; }
html.lite .piso::before, html.lite .flota, html.lite .anillos circle, html.lite .eq i { animation: none; }
html.lite .g3d__glow { display: none; }
html.lite2 .g3d { animation: none; transform: rotateY(-18deg) rotateX(3deg); }
html.lite2 .ola { animation: none; }
html.lite2 .orb { transform: none; }

/* Movimiento reducido: todo queda quieto y sin 3D animado */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .escena, .chip, .piso, .g3d, .ola, .flota, .anillos circle, .eq i { animation: none; }
  .g3d { transform: rotateY(-18deg) rotateX(3deg); }
  .btn, .servicio__arte, .barras rect { transition: none; }
  .js .barras rect { transform: none; }
  .pausa { display: none; }
}

/* Pantallas muy angostas: cabecera compacta (logo, idioma y botón en una sola línea) */
@media (max-width: 400px) {
  .top { padding-inline: 16px; gap: 8px; }
  .top__logo img { width: 108px; }
  .langsw button { padding: 0 10px; }
  .top { gap: 6px; }
  .top__cta { padding: 0.6em .9em; font-size: .88rem; }
}