:root {
  --negro: #000000;
  --negro-2: #071620;
  --azul: #004060;
  --azul-suave: rgba(0, 64, 96, 0.35);
  /* Variante clara del azul ARCA para texto sobre fondo oscuro — el azul puro
     (#004060) casi no contrasta sobre negro; este tono ya existe en el
     degradado de .claim__headline--solid (menta → azul ARCA). */
  --azul-texto: #5fa8c7;
  /* Azul ARCA amplificado (mismo tono, más saturado/brillante) — identidad
     propia del servicio estrella (Sistema Integral), para que se distinga
     por prestigio sin usar rojo ahí. */
  --azul-vivido: #17a3e8;
  --azul-vivido-suave: rgba(23, 163, 232, 0.22);
  --rojo: #B1282B;
  --rojo-suave: rgba(177, 40, 43, 0.35);
  --blanco: #FFFFFF;
  --gris: #9aa0a6;
  --gris-claro: #cfd2d6;
  --linea: rgba(255, 255, 255, 0.12);
  --linea-fuerte: rgba(255, 255, 255, 0.28);
  /* Familia única Helvetica del brand book — el "peso" se resuelve con font-weight,
     no con otra tipografía (Neue = variante moderna que trae el sistema en macOS). */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Antes traía JetBrains Mono real (@import de Google Fonts) para las
     etiquetas tipo "eyebrow"/HUD — violaba la regla de una sola tipografía
     del brand book. El look "técnico" de esas etiquetas ya lo dan las
     mayúsculas + interletrado ancho que traen sus reglas, no la tipografía;
     ahora --mono apunta a la misma familia Helvetica que --sans. */
  --mono: var(--sans);
  /* Escala de pesos Helvetica: light 300 · roman 400 · medium 500 · bold 700 · black 800 · heavy 900 */
  --w-light: 300; --w-roman: 400; --w-medium: 500; --w-bold: 700; --w-black: 800; --w-heavy: 900;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Sin esto, un <button> sin su propia regla de font-family no hereda la
   Helvetica del body — el navegador le pone el font de UI del sistema por
   default (confirmado: Chromium lo resolvía a "Arial" plano, distinto del
   stack de marca, en los botones de flecha del carrusel y el de cerrar
   modal). */
button, input, select, textarea { font-family: inherit; }

html { scroll-behavior: smooth; }

body {
  background: var(--negro);
  color: var(--blanco);
  font-weight: var(--w-roman);
  line-height: 1.6;
  overflow-x: hidden;
}
/* Selector "html body" solo para font-family (no todo el bloque de arriba):
   en proceso.html el bundle del modelo 3D (proceso-3d/assets/proceso3d.css,
   generado, no editable aquí) carga después y trae su propio
   "body{font-family:var(--font-mono)}" — con la misma especificidad, gana
   por orden de carga y deja todo el HUD en mono en vez de Helvetica. Subir
   la especificidad SOLO aquí lo revierte sin tocar el bundle. Importante:
   el bundle también trae "html,body{overflow-x:clip}", que el modelo 3D
   necesita para que el canvas se quede pineado (sticky) durante el scroll
   largo de la sección — si "overflow-x" se sube de especificidad junto con
   font-family (como pasó antes), gana el "hidden" de aquí sobre el "clip"
   del bundle, body pasa a computar overflow-y:auto (se vuelve su propio
   contenedor de scroll) y el modelo dejaba de responder al scroll. Por eso
   overflow-x se queda arriba, en el selector plano, para que el bundle
   pueda seguir ganándole por orden de carga en esa página. */
html body { font-family: var(--sans); }

::selection { background: var(--rojo); color: var(--blanco); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(1rem, 2.4vh, 1.5rem) clamp(18px, 4vw, 40px);
  z-index: 100;
  transition: opacity 0.4s ease;
}
/* Sin nav sólida: el HUD flota sobre el contenido (el sitio siempre es oscuro). */
.nav--solid { background: none; }
.nav__logo {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--blanco);
  text-decoration: none;
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
/* El wordmark gigante del hero es la marca mientras estás arriba;
   el logo del nav aparece al hacer scroll (Inicio) o siempre (subpáginas). */
.nav--solid .nav__logo { opacity: 1; pointer-events: auto; }
.nav__links { display: flex; gap: clamp(1.1rem, 2.2vw, 2rem); align-items: center; }
.nav__links a {
  font-family: var(--sans);
  color: var(--gris-claro);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav__links a:hover { color: var(--blanco); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rojo);
  padding: 0;
  border-radius: 99px;
  color: var(--rojo) !important;
  transition: border-color 0.4s;
}
.nav__cta .btn__clip { padding: 0.55rem 1.4rem; }
.nav__cta:hover { border-color: transparent; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--negro);
}
.hero__stage { position: absolute; inset: 0; }

/* Glow azul de profundidad (nunca un fondo plano) */
.hero__glow {
  position: absolute;
  left: 50%; top: 44%;
  width: 130vmax; height: 130vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
      rgba(0, 64, 96, 0.50) 0%,
      rgba(0, 64, 96, 0.16) 28%,
      rgba(0, 20, 32, 0) 56%);
  pointer-events: none;
  opacity: 0;
}

/* Carrusel circular — turntable 3D detrás del camarógrafo */
.hero__ring {
  position: absolute;
  left: 50%; top: 43%;
  width: 0; height: 0;
  perspective: 1500px;
  z-index: 1;
  --ring-r: 470px;
}
.ring__spin {
  position: absolute;
  transform-style: preserve-3d;
  animation: ringSpin 48s linear infinite;
}
.ring__item {
  position: absolute;
  width: 210px; height: 210px;
  margin: -105px 0 0 -105px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
  backface-visibility: hidden;
  opacity: 0;
}
.ring__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(0.9) contrast(1.05) brightness(0.92);
}
.ring__item::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.6) 100%);
}
.ring__item:nth-child(1) { transform: rotateY(0deg)   translateZ(var(--ring-r)); }
.ring__item:nth-child(2) { transform: rotateY(45deg)  translateZ(var(--ring-r)); }
.ring__item:nth-child(3) { transform: rotateY(90deg)  translateZ(var(--ring-r)); }
.ring__item:nth-child(4) { transform: rotateY(135deg) translateZ(var(--ring-r)); }
.ring__item:nth-child(5) { transform: rotateY(180deg) translateZ(var(--ring-r)); }
.ring__item:nth-child(6) { transform: rotateY(225deg) translateZ(var(--ring-r)); }
.ring__item:nth-child(7) { transform: rotateY(270deg) translateZ(var(--ring-r)); }
.ring__item:nth-child(8) { transform: rotateY(315deg) translateZ(var(--ring-r)); }
@keyframes ringSpin { to { transform: rotateY(360deg); } }

/* Wordmark */
.hero__brand {
  position: absolute;
  left: 0; right: 0;
  top: 51%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 3;
  padding: 0 5vw;
  will-change: transform;
}
.hero__wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.8rem, 12vw, 10rem);
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--blanco);
  opacity: 0;
}
.hero__underline {
  display: block;
  width: 0; height: 4px;
  margin: 1.5rem auto 0;
  background: var(--rojo);
}
.hero__tagline {
  position: absolute;
  left: 0; right: 0;
  top: 68%;
  text-align: center;
  z-index: 3;
  padding: 0 8vw;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  color: var(--gris-claro);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
  opacity: 0;
}
.hero__tagline span { color: var(--blanco); font-weight: 500; }

.arrow { display: inline-block; transition: transform 0.3s; }
.link-arrow:hover .arrow { transform: translateX(6px); }

.hero__scroll {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gris);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 8px); } }

/* Sin movimiento: composición estática y apilada */
@media (prefers-reduced-motion: reduce) {
  .ring__spin, .hero__scroll { animation: none; }
}

/* Hero responsive */
@media (max-width: 820px) {
  .hero__ring { --ring-r: 300px; top: 42%; }
  .ring__item { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
}
@media (max-width: 520px) {
  .hero__ring { --ring-r: 205px; }
  .ring__item { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
  .hero__tagline { top: 66%; }
}

/* ======================================================
   CUERPO — producción audiovisual (reskin del clon)
   ====================================================== */

/* ---------- Utilidades ---------- */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; }
.wrap--narrow { max-width: 780px; }
.lead { color: var(--gris-claro); font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 54ch; margin-top: 1.6rem; }
.lead--center { margin-inline: auto; }
.muted { color: var(--gris-claro); }
.muted.small, .small { font-size: 0.85rem; color: var(--gris); }
.hl { color: var(--rojo); }
/* Variante en azul ARCA — para títulos puntuales sobre fondos fotográficos
   (no degradados azules), como contraste ocasional frente al rojo. */
.hl--azul { color: var(--azul-vivido); }

/* ---------- Botones / links ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: 99px;
  padding: 0.85rem 1.7rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-position 0.5s ease, border-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.4s ease;
}
/* CTA principales: Hablemos, Agendar consulta, Solicitar diagnóstico de mi
   empresa. En reposo van transparentes con borde rojo — no rellenas — con
   un halo desenfocado detrás. El relleno sólido ya no vive aquí en reposo:
   lo dispara el propio punto (.btn__dot) al crecer en hover, ver más abajo. */
.btn--solid {
  z-index: 0;
  background: transparent;
  border-color: var(--rojo);
  color: var(--blanco);
}
/* El halo era un rectángulo de color sólido + filter:blur -- en Chrome se ve
   como aura suave, pero Safari/WebKit no difumina igual de bien un borde
   recto contra border-radius:inherit y el resultado se ve como una caja
   sólida con esquinas duras, no como luz. Un radial-gradient que YA nace
   transparente en el borde no depende de que el blur del navegador haga
   todo el trabajo -- se ve como aura suave en cualquier motor. */
.btn--solid::before {
  content: "";
  position: absolute; inset: -16px; z-index: -1; border-radius: inherit;
  background: radial-gradient(closest-side, var(--rojo), transparent 72%);
  filter: blur(6px);
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
.btn--solid:hover {
  transform: translateY(-2px);
}
.btn--solid:hover::before { opacity: 0.8; }
/* Variante del servicio estrella (Sistema Integral): mismo mecanismo, pero
   en azul vivo — sin rojo, para que el CTA combine con el resto de la
   identidad de esa sección. */
.btn--flagship {
  border-color: var(--azul-vivido);
}
.btn--flagship::before { background: radial-gradient(closest-side, var(--azul-vivido), transparent 72%); }

/* ---------- CTA interactivo: "Interactive Hover Button" (Magic UI/21st.dev),
   en paleta de marca. Reposo: botón TRANSPARENTE con borde de color + un
   punto pequeño del MISMO color junto a la palabra. Hover: ese punto explota
   y llena el botón entero (el botón "se colorea completo"), el texto en
   reposo se desliza y desaparece, y entran texto+flecha en blanco sobre el
   relleno ya sólido. El marcado interno (.btn__clip/.btn__dot/.btn__label/
   .btn__back) lo inyecta initHoverButtons() en main.js sobre .btn--solid y
   .nav__cta, así no hay que repetirlo a mano en cada botón de las 8 páginas.

   El padding que .btn normalmente trae se mueve aquí a .btn__clip: así
   .btn__clip ocupa el botón COMPLETO borde a borde (no solo el área interior
   descontando el padding), y el punto — que crece por transform:scale desde
   su propia posición — queda recortado exactamente en el borde del botón por
   el overflow:hidden de .btn__clip, cubriendo también la zona que antes era
   puro padding. Si el padding se hubiera quedado en .btn, el punto solo
   podría llenar el área interior y quedaría un anillo transparente sin
   colorear alrededor, aun con el punto a escala máxima.

   El punto vive en .btn__front, junto al label, como HERMANO (no contenedor)
   de .btn__label: si el punto estuviera dentro del bloque que se desvanece,
   se apagaría junto con el texto justo cuando debería crecer. .btn__front y
   .btn__back comparten la misma celda de grid (superpuestos) en vez de que
   .btn__back sea position:absolute — así ambos cuentan para el ancho
   intrínseco del botón y no se recorta el que sea más ancho de los dos (ej.
   cuando "texto + flecha" es más ancho que "punto + texto"). */
.btn--solid, .btn--flagship, .nav__cta { padding: 0; }
.btn__clip {
  position: relative;
  display: grid;
  width: 100%; overflow: hidden; border-radius: inherit;
  padding: 0.85rem 1.7rem;
}
.btn__front, .btn__back {
  grid-area: 1 / 1;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.btn__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--rojo);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn--flagship .btn__dot { background: var(--azul-vivido); }
/* El label saliente y el texto entrante NUNCA se traslapan visualmente: el
   label de reposo se apaga rápido y SIN deslizarse (deslizar un texto largo
   como "Solicitar diagnóstico de mi empresa" se leía como si "el texto
   cambiara" en cámara lenta, no como una desaparición limpia). El texto de
   hover entra con un pequeño delay, cuando el de reposo ya casi no se ve,
   así solo hay una palabra visible a la vez. */
.btn__label {
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
.btn__back {
  z-index: 1;
  color: var(--blanco); font-weight: 600;
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.22s ease-out 0.1s, transform 0.22s ease-out 0.1s;
}
.btn--solid:hover .btn__dot, .btn--flagship:hover .btn__dot, .nav__cta:hover .btn__dot { transform: scale(90); }
.btn--solid:hover .btn__label, .btn--flagship:hover .btn__label, .nav__cta:hover .btn__label { opacity: 0; transform: scale(0.94); }
.btn--solid:hover .btn__back, .btn--flagship:hover .btn__back, .nav__cta:hover .btn__back { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  /* Sin el punto creciendo no hay relleno detrás del texto blanco del
     "back" — en vez de ese estado roto, se desactiva todo el swap. */
  .btn__back { display: none; }
  .btn--solid:hover .btn__dot, .btn--flagship:hover .btn__dot, .nav__cta:hover .btn__dot { transform: none; }
  .btn--solid:hover .btn__label, .btn--flagship:hover .btn__label, .nav__cta:hover .btn__label { transform: none; opacity: 1; }
}
.btn--ghost { border-color: var(--linea); color: var(--blanco); }
.btn--ghost:hover { border-color: rgba(255,255,255,0.45); }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--rojo);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.link-arrow:hover { color: var(--blanco); }

/* ---------- Presentación — full screen, montaje de fondo ---------- */
.presentacion { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--negro); }
.presentacion__bg { position: absolute; inset: 0; z-index: 0; }
.presentacion__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: saturate(0.9) brightness(0.75);
  animation: presentacionCross 18s ease-in-out infinite;
}
.presentacion__img:nth-child(1) { animation-delay: 0s; }
.presentacion__img:nth-child(2) { animation-delay: 6s; }
.presentacion__img:nth-child(3) { animation-delay: 12s; }
@keyframes presentacionCross {
  0%, 100% { opacity: 0; }
  4%, 30% { opacity: 1; }
  36% { opacity: 0; }
}
.presentacion__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.78) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0.65) 100%);
}
/* Más ancho que antes (era 56rem) para que el título caiga en solo dos
   renglones (ver <br> en el markup) — el lead sigue angosto por su propio
   max-width en ch, así que no se ve afectado. */
.presentacion__stage { position: relative; z-index: 1; max-width: none; text-align: center; padding: 0 6vw; }
.presentacion__title {
  font-family: var(--sans); font-weight: var(--w-black); text-transform: uppercase;
  font-size: clamp(1.7rem, 4.1vw, 3rem); line-height: 1.16; letter-spacing: -0.02em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}
.presentacion__lead { color: var(--gris-claro); font-size: clamp(1rem, 1.6vw, 1.25rem); max-width: 52ch; margin: 1.6rem auto 0; }
.presentacion .teaser-foot { margin-top: 2.4rem; }
@media (prefers-reduced-motion: reduce) {
  .presentacion__img { animation: none; opacity: 0; }
  .presentacion__img:nth-child(1) { opacity: 1; }
}

/* ---------- Banda de logos ---------- */
.logos {
  padding: 3.4rem 0;
  background: var(--negro);
}
.logos__label {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 2.2rem;
}
/* Marquee infinito: dos pistas idénticas lado a lado, ambas se desplazan a la
   par en translateX(-100%) — cuando la primera sale por la izquierda, la
   segunda ya ocupa su lugar exacto (loop sin costura). Fundido en los bordes
   vía mask-image, sobre el fondo oscuro de la sección. */
.logos__marquee {
  position: relative;
  display: flex;
  gap: clamp(2.4rem, 6vw, 5.5rem);
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.logos__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2.4rem, 6vw, 5.5rem);
  animation: logosMarquee 30s linear infinite;
}
.logos__marquee:hover .logos__track { animation-play-state: paused; }
@keyframes logosMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.logos__item img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity 0.3s, transform 0.3s;
}
.logos__item:hover img { opacity: 1; transform: scale(1.06); }
.logos__item--big img { height: 64px; }
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .logos__marquee { overflow: visible; flex-wrap: wrap; justify-content: center; mask-image: none; -webkit-mask-image: none; }
  .logos__marquee .logos__track:last-child { display: none; }
}

/* ---------- Secciones ---------- */
.section { padding: clamp(4rem, 7vw, 7rem) 6vw; }
.section--dark { background: var(--negro-2); }
/* Cuando dos secciones oscuras van pegadas, el padding-bottom + padding-top
   duplicado se siente como un hueco enorme dentro del mismo bloque visual. */
.section--tight-top { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.section__head { margin-bottom: clamp(2.4rem, 4vw, 4rem); max-width: 52ch; }
.section__head--center { margin-inline: auto; text-align: center; }
/* 52ch se calcula con el font-size del propio .section__head (texto normal),
   no con el del h2 grande que contiene — en títulos display grandes eso
   angosta el contenedor de más y fuerza saltos de línea no deseados. Estos
   títulos van solo con eyebrow (sin lead que necesite el ancho angosto), así
   que se liberan del límite y usan el <br> manual del HTML para su salto. */
.section__head--wide { max-width: none; }
.section__eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 1.1rem;
}
.section__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.section__title--mid { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

/* ---------- Media placeholder ---------- */
.media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--linea);
  background:
    radial-gradient(120% 120% at 30% 20%, var(--azul-suave), transparent 58%),
    linear-gradient(150deg, #0d1620, #050608);
}
.media::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 4px 4px;
  opacity: 0.5;
  pointer-events: none;
}
.media--tall { aspect-ratio: 4 / 5; }
.media__label {
  position: absolute;
  bottom: 1.1rem; left: 1.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  z-index: 1;
}

/* ---------- Problema — headline con transición de palabra en scroll ---------- */
.problem { position: relative; background: var(--negro); overflow: hidden; }
/* Degradado azul desenfocado sobre base negra, moviéndose e intensificando aleatoriamente */
.problem__glow {
  position: absolute; left: 50%; top: 50%;
  width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(38% 42% at 50% 50%, rgba(0, 88, 130, 0.95) 0%, transparent 62%);
  filter: blur(40px);
  opacity: 0.58;
  pointer-events: none;
  z-index: 0;
  animation: problemDrift 14s ease-in-out infinite;
}
@keyframes problemDrift {
  0%   { transform: translate(-58%, -46%) scale(1);    opacity: 0.42; }
  25%  { transform: translate(-40%, -55%) scale(1.15);  opacity: 0.74; }
  50%  { transform: translate(-52%, -40%) scale(0.95);  opacity: 0.5; }
  75%  { transform: translate(-46%, -58%) scale(1.2);   opacity: 0.8; }
  100% { transform: translate(-58%, -46%) scale(1);    opacity: 0.42; }
}
.problem__pin {
  position: relative;
  z-index: 1;
  height: 100vh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
}
.problem__eyebrow { position: relative; z-index: 1; margin-bottom: 1.4rem; }
.problem__phrase {
  font-family: var(--sans);
  font-weight: var(--w-black);
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 30ch;
}
.problem__lead { display: inline-block; }
/* Brillo: sheen que cruza el texto cuando cada palabra aparece */
.problem__lead, .tail__item {
  background-image: linear-gradient(110deg, currentColor 40%, #fff 50%, currentColor 60%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.problem__lead.is-shimmer, .tail__item.is-shimmer {
  animation: problemShimmer 1.1s ease-out;
}
@keyframes problemShimmer { from { background-position: 100% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .problem__lead, .tail__item { background: none; -webkit-text-fill-color: currentColor; }
}
/* Barra de progreso — 3 píldoras independientes, sin línea/track de fondo.
   Cada una crece justo cuando el scroll cae en su palabra (mismo índice
   "active" que resalta la frase), no en base a un porcentaje continuo. */
.problem__progress {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2.6rem;
  width: min(100px, 28vw);
  height: 8px;
}
.problem__progress-dot {
  position: relative; z-index: 2; width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: var(--gris);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease;
}
.problem__progress-dot.is-active { width: 28px; background: var(--rojo); }
.problem__scroll-hint {
  position: absolute; z-index: 1; bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gris);
  animation: bob 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .problem__glow { animation: none; opacity: 0.55; }
  .problem__scroll-hint { animation: none; }
}
/* Ruleta 3D: la frase gira como un tambor al hacer scroll */
.problem__tail {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  perspective: 1700px;
  height: 1.5em;
  padding: 0 0.45em;
  overflow: hidden;
  color: var(--rojo);
}
.tail__sizer { visibility: hidden; white-space: nowrap; }
.tail__drum {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rot, 0deg));
  will-change: transform;
}
.tail__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  backface-visibility: hidden;
  transform: rotateX(calc(var(--i, 0) * 120deg)) translateZ(var(--tail-r, 0.66em));
}
.tail__item:nth-child(1) { --i: 0; }
.tail__item:nth-child(2) { --i: 1; }
.tail__item:nth-child(3) { --i: 2; }

/* Sin JS / reduce-motion: muestra la frase final, sin tambor */
@media (prefers-reduced-motion: reduce) {
  .problem__pin { height: auto; min-height: 0; padding: 7rem 6vw; }
  .problem__tail { perspective: none; height: auto; overflow: visible; }
  .tail__sizer { display: none; }
  .tail__drum { position: relative; transform: none; }
  .tail__item { position: relative; inset: auto; transform: none; display: none; }
  .tail__item--final { display: flex; }
}

/* ---------- Portafolio en formato grande — tarjetas apiladas en scroll ---------- */
.projects { display: flex; flex-direction: column; gap: 3rem; margin-top: 1rem; }
.project {
  position: sticky;
  background: var(--negro);
  border: 1px solid var(--linea);
  border-radius: 24px;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  transform-origin: top center;
  will-change: transform;
}
.projects .project:nth-child(1) { top: 96px; z-index: 1; }
.projects .project:nth-child(2) { top: 120px; z-index: 2; }
.projects .project:nth-child(3) { top: 144px; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .project { position: relative; top: auto; transform: none !important; }
}
.project__head { display: flex; align-items: flex-start; gap: 1.6rem; margin-bottom: 1.6rem; }
.project__num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1;
  color: var(--rojo);
  flex-shrink: 0;
}
.project__text { max-width: 60ch; }
.project__text h3 {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.project__text p { color: var(--gris-claro); font-size: 0.98rem; max-width: 52ch; }
.project__media { position: relative; }
.project__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project__media .media__label { z-index: 1; }
.project__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

/* ---------- Antes / Después ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.8rem); }
.ba__tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border-radius: 99px;
  background: rgba(0,0,0,0.6); color: var(--gris); z-index: 1;
}
.ba__tag--after { background: var(--rojo); color: var(--blanco); }
.ba__foot { text-align: center; margin-top: clamp(3rem, 5vw, 4.5rem); display: flex; flex-direction: column; align-items: center; gap: 1rem; }

/* ---------- Antes/Después — slider comparador, arrastra para revelar ---------- */
/* Más angosto que el .wrap del contenedor: a 16:9 a todo el ancho, la
   sección (título + lead + frame) no cabía completa en pantalla. */
.compare { max-width: 720px; margin-inline: auto; }
.compare__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--linea); background: var(--negro-2); cursor: ew-resize; touch-action: pan-y;
  /* Sin esto, arrastrar rápido dentro del frame selecciona el texto/spans
     circundantes (Antes/Después) como texto nativo del navegador — con
     ::selection en rojo de marca, eso se ve como un flash rojo sobre ambas
     imágenes durante el drag. */
  user-select: none; -webkit-user-select: none;
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.compare__after { position: absolute; inset: 0; }
.compare__tag {
  position: absolute; top: 1rem; z-index: 2;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border-radius: 99px; background: rgba(0,0,0,0.6); color: var(--gris);
}
.compare__tag--before { left: 1rem; }
.compare__tag--after { right: 1rem; background: var(--rojo); color: var(--blanco); }
.compare__handle {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  width: 2px; background: rgba(255,255,255,0.85); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
}
.compare__grip {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--blanco); color: var(--negro);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.compare__handle:focus-visible .compare__grip { outline: 2px solid var(--rojo); outline-offset: 2px; }
@media (max-width: 560px) {
  .compare__grip { width: 36px; height: 36px; }
  .compare__tag { font-size: 0.6rem; padding: 0.3rem 0.7rem; }
}

/* ---------- Servicios ---------- */
.svc-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.svc-featured__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 320px;
  padding: 2.6rem;
  border-radius: 12px;
  /* Gris/azul tenue en vez de un bloque rojo — el rojo se reserva para el
     servicio estrella (Sistema Integral) y los CTA. */
  border: 1px solid var(--linea);
  background: linear-gradient(150deg, rgba(0,64,96,0.14), rgba(255,255,255,0.02));
}
.svc-featured__text h3 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.9rem; }
.svc-featured__text p { color: var(--gris-claro); max-width: 40ch; }
.svc-featured__media { min-height: 320px; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.svc-card {
  padding: 1.8rem;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: rgba(255,255,255,0.015);
  transition: border-color 0.35s, transform 0.35s;
}
.svc-card:hover { border-color: var(--rojo); transform: translateY(-5px); }
.svc-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: 10px;
  background: var(--azul-suave);
  font-size: 1.3rem;
  margin-bottom: 1.3rem;
}
.svc-card h4 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.svc-card p { color: var(--gris-claro); font-size: 0.9rem; }

/* ---------- Proceso ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.step {
  padding: 1.8rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: rgba(255,255,255,0.015);
}
.step__num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  color: rgba(177,40,43,0.55);
}
.step h4 { font-weight: 700; margin: 1rem 0 0.5rem; }
.step p { color: var(--gris-claro); font-size: 0.88rem; }

/* ---------- Objeciones ---------- */
.objections { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.4vw, 2rem); }
.obj-card {
  padding: clamp(2.2rem, 3vw, 2.9rem);
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: rgba(255,255,255,0.015);
}
.obj-q { color: var(--rojo); font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; margin-bottom: 1.1rem; }

/* ---------- Testimonios ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.4vw, 2rem); }
.quote {
  display: flex;
  flex-direction: column;
  padding: clamp(2.2rem, 3vw, 2.9rem);
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: rgba(255,255,255,0.015);
}
.quote__mark { color: var(--rojo); font-size: 2.6rem; line-height: 0.6; margin-bottom: 1.2rem; }
.quote blockquote { color: var(--blanco); flex: 1; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.5; }
.quote__foot { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); }
.quote__name { font-weight: 700; }
.quote__org { color: var(--gris); font-size: 0.85rem; }

/* ---------- Servicios: botón "Ver todo lo que incluye" + modal ---------- */
.svc-more { background: none; border: none; font-family: var(--sans); cursor: pointer; margin-top: 0.7rem; padding: 0; }
.svc-featured__text .svc-more { margin-top: 0.9rem; align-self: flex-start; }
/* Dentro de .teaser-foot (fila centrada verticalmente junto al pill de
   "Cotizar"), el margin-top de reposo de .svc-more lo empujaba hacia abajo
   y quedaba fuera de línea con el botón de al lado. */
.teaser-foot .svc-more { margin-top: 0; }
.svc-modal {
  position: fixed; inset: 0; z-index: 210; display: none;
  align-items: center; justify-content: center; padding: 6vh 6vw;
  background: rgba(0,0,0,0.82);
}
.svc-modal.is-open { display: flex; }
.svc-modal__panel {
  position: relative; width: min(560px, 100%); max-height: 82vh; overflow-y: auto;
  background: var(--negro-2); border: 1px solid var(--linea); border-radius: 16px;
  padding: clamp(2rem, 4vw, 2.8rem);
}
.svc-modal__close { position: absolute; top: 1.2rem; right: 1.4rem; background: none; border: none; color: var(--blanco); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.svc-modal__title { font-family: var(--sans); font-weight: var(--w-black); text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.01em; margin-bottom: 1.5rem; padding-right: 2rem; }
.svc-modal__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.4rem; margin-bottom: 1.8rem; }
.svc-modal__list li { color: var(--gris-claro); font-size: 0.94rem; }
.svc-modal__audience { padding-top: 1.4rem; border-top: 1px solid var(--linea); font-size: 0.9rem; }
.svc-modal__audience::before { content: "Ideal para: "; color: var(--rojo); font-weight: var(--w-bold); }
@media (max-width: 600px) { .svc-modal__list { grid-template-columns: 1fr; } }

/* ---------- FAQ — numerado, con badge que crece y subrayado que se dibuja
   al abrir (mismo lenguaje del stepper de Problema: acento rojo, no verde/negro) ---------- */
.faq { border-top: 1px solid var(--linea); }
.faq__item { position: relative; border-bottom: 1px solid var(--linea); }
/* Línea de acento que se "dibuja" de izquierda a derecha sobre el borde normal */
.faq__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--rojo); transform-origin: left; transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item[open]::after { transform: scaleX(1); }
.faq__item summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  list-style: none;
  cursor: pointer;
  padding: 1.7rem 0;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 600;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num { position: relative; width: 2.2rem; height: 2.2rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.faq__num-dot {
  position: absolute; inset: 0; border-radius: 50%; background: var(--rojo);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.faq__num-text {
  position: relative; z-index: 1; font-family: var(--mono); font-size: 0.8rem;
  color: var(--gris); transition: color 0.3s ease;
}
.faq__item[open] .faq__num-dot { opacity: 1; transform: scale(1); }
.faq__item[open] .faq__num-text { color: var(--blanco); }
.faq__q { flex: 1; color: var(--gris-claro); transition: color 0.3s ease, transform 0.3s ease; }
.faq__item[open] .faq__q { color: var(--blanco); transform: translateX(4px); }
.faq__icon { color: var(--rojo); font-size: 1.5rem; opacity: 0.5; transition: transform 0.25s ease, opacity 0.25s ease; flex-shrink: 0; }
.faq__item[open] .faq__icon { transform: rotate(45deg); opacity: 1; }
.faq__item > p {
  color: var(--gris-claro); padding: 0 0 1.5rem; margin-left: calc(2.2rem + 1.2rem); max-width: 62ch;
  animation: faqReveal 0.4s ease;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item > p { animation: none; }
}
@media (max-width: 560px) {
  .faq__item > p { margin-left: 0; }
}

/* ---------- Hero de Contacto — foto detrás del texto (no un bloque aparte
   debajo), atenuada al 60% para que el texto principal se siga leyendo
   bien encima. ---------- */
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 35%; opacity: 0.6; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.6) 100%);
}
.page-hero--media .wrap { position: relative; z-index: 1; }

/* ---------- Formulario multistep ---------- */
.mstep { scroll-margin-top: 120px; }
.mstep__title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; margin-bottom: 1.8rem; }
.mstep__bar {
  display: flex; align-items: flex-start; list-style: none; margin-bottom: 2.6rem;
}
.mstep__step {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  text-align: center;
}
.mstep__step:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 1px;
  background: var(--linea); z-index: 0;
}
.mstep__step.is-done:not(:last-child)::after { background: var(--azul-vivido); }
.mstep__num {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--linea-fuerte); background: var(--negro);
  font-family: var(--mono); font-size: 0.85rem; color: var(--gris-claro);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.mstep__step.is-active .mstep__num { border-color: var(--azul-vivido); color: var(--blanco); background: rgba(23,163,232,0.14); }
.mstep__step.is-done .mstep__num { border-color: var(--azul-vivido); background: var(--azul-vivido); color: var(--blanco); }
.mstep__label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris); max-width: 12ch;
}
.mstep__step.is-active .mstep__label, .mstep__step.is-done .mstep__label { color: var(--blanco); }
.mstep__panel { display: none; flex-direction: column; gap: 2rem; }
.mstep__panel.is-active { display: flex; }
.mstep__nav { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.mstep__nav .mstep__next, .mstep__nav .mstep__submit { margin-left: auto; }
@media (max-width: 560px) {
  .mstep__label { display: none; }
}

/* ---------- Formulario ---------- */
.form {
  padding: 2.6rem;
  border-radius: 16px;
  border: 1px solid var(--linea);
  background: rgba(255,255,255,0.015);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.field__label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chips--budget, .chips--urgency { display: grid; grid-template-columns: repeat(4, 1fr); }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: block;
  text-align: center;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--linea);
  border-radius: 99px;
  font-size: 0.85rem;
  color: var(--gris-claro);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.chip--wide span { border-radius: 10px; padding: 0.8rem; }
.chip input:checked + span { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.field--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.25s;
}
.form input::placeholder { color: var(--gris); }
.form input:focus { outline: none; border-color: var(--rojo); }
.form select,
.form textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.25s;
}
.form textarea { resize: vertical; min-height: 100px; }
.form select:focus,
.form textarea:focus { outline: none; border-color: var(--rojo); }
.form textarea::placeholder { color: var(--gris); }

/* ---------- Acordeón de presupuesto ---------- */
.budget-acc { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.budget-acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem; cursor: pointer; list-style: none; font-size: 0.95rem; color: var(--gris-claro);
}
.budget-acc__summary::-webkit-details-marker { display: none; }
.budget-acc[open] .budget-acc__summary { border-bottom: 1px solid var(--linea); }
.budget-acc[open] .faq__icon { transform: rotate(45deg); }
.budget-acc .chips--budget { padding: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .budget-acc .chips--budget { grid-template-columns: 1fr; } }

/* ---------- Paleta especial del formulario "Hablemos" ----------
   Aislada en #contacto: fondo casi negro, tarjeta gris carbón, campos casi
   negros y acento azul ARCA (no rojo) para que el formulario se sienta como
   un panel propio, distinto del resto de la página. */
#contacto {
  --form-bg: #050505;
  --form-card: #151515;
  --form-field: #090909;
  --form-border: #303030;
  --form-text: #FFFFFF;
  --form-text-2: #A1A1A1;
  --form-accent: #004060;
  --form-accent-hover: #005A80;
  background: var(--form-bg);
}
#contacto .mstep__title { color: var(--form-text); }
#contacto .mstep__step:not(:last-child)::after { background: var(--form-border); }
#contacto .mstep__step.is-done:not(:last-child)::after { background: var(--form-accent); }
#contacto .mstep__num { border-color: var(--form-border); background: var(--form-field); color: var(--form-text-2); }
#contacto .mstep__step.is-active .mstep__num { border-color: var(--form-accent); color: var(--form-text); background: rgba(0, 64, 96, 0.3); }
#contacto .mstep__step.is-done .mstep__num { border-color: var(--form-accent); background: var(--form-accent); color: var(--form-text); }
#contacto .mstep__label { color: var(--form-text-2); }
#contacto .mstep__step.is-active .mstep__label, #contacto .mstep__step.is-done .mstep__label { color: var(--form-text); }
#contacto .form {
  background: var(--form-card);
  border-color: var(--form-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
#contacto .field__label { color: var(--form-text); }
#contacto .chip span { background: var(--form-field); border-color: var(--form-border); color: var(--form-text-2); }
#contacto .chip input:checked + span { background: var(--form-accent); border-color: var(--form-accent); color: var(--form-text); }
#contacto .budget-acc { border-color: var(--form-border); background: var(--form-field); }
#contacto .budget-acc__summary { color: var(--form-text-2); }
#contacto .budget-acc[open] .budget-acc__summary { border-color: var(--form-border); color: var(--form-text); }
#contacto .budget-acc__value.is-set { color: var(--form-text); }
#contacto .budget-acc .faq__icon { color: var(--form-accent-hover); }
#contacto .form input[type="text"],
#contacto .form input[type="email"],
#contacto .form input[type="tel"],
#contacto .form select,
#contacto .form textarea {
  background: var(--form-field);
  border-color: var(--form-border);
  color: var(--form-text);
}
#contacto .form input::placeholder,
#contacto .form textarea::placeholder { color: var(--form-text-2); }
#contacto .form input:focus,
#contacto .form select:focus,
#contacto .form textarea:focus { border-color: var(--form-accent); }
#contacto .mstep__nav .btn--ghost { border-color: var(--form-border); color: var(--form-text); }
#contacto .mstep__nav .btn--ghost:hover { border-color: var(--form-text-2); }
#contacto .mstep__nav .btn--solid { border-color: var(--form-accent); }
#contacto .mstep__nav .btn--solid::before { background: radial-gradient(closest-side, var(--form-accent), transparent 72%); }
#contacto .mstep__nav .btn--solid .btn__dot { background: var(--form-accent); }
#contacto .mstep__nav .btn--solid:hover .btn__dot { background: var(--form-accent-hover); }

/* ---------- Footer — fondo negro con luz degradada moviéndose aleatoriamente
   (azul ARCA dominante, rojo como acento menor — no un lavado rojo puro,
   aparece en las 8 páginas del sitio) ---------- */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--linea); padding: 5rem 6vw 2.5rem; background: var(--negro); }
.footer::before {
  content: "";
  position: absolute; left: 50%; bottom: -20%;
  width: 120vmax; height: 120vmax;
  transform: translateX(-50%);
  background:
    radial-gradient(30% 34% at 42% 46%, rgba(0, 64, 96, 0.6) 0%, transparent 60%),
    radial-gradient(34% 38% at 58% 54%, rgba(177, 40, 43, 0.32) 0%, transparent 62%);
  filter: blur(50px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  animation: footerGlow 16s ease-in-out infinite;
}
@keyframes footerGlow {
  0%   { transform: translateX(-58%) translateY(0) scale(1);    opacity: 0.24; }
  25%  { transform: translateX(-40%) translateY(-4%) scale(1.18); opacity: 0.5; }
  50%  { transform: translateX(-52%) translateY(2%) scale(0.94);  opacity: 0.3; }
  75%  { transform: translateX(-46%) translateY(-6%) scale(1.2);  opacity: 0.55; }
  100% { transform: translateX(-58%) translateY(0) scale(1);    opacity: 0.24; }
}
.footer > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .footer::before { animation: none; } }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
}
.footer__brand { max-width: 34ch; }
.footer__brand p { color: var(--gris-claro); margin: 1.2rem 0 1.8rem; font-size: 0.95rem; }
.footer__mark {
  color: var(--blanco);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.footer__title { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); margin-bottom: 1.1rem; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.footer__col a { color: var(--gris-claro); text-decoration: none; font-size: 0.92rem; transition: color 0.25s; }
.footer__col a:hover { color: var(--blanco); }
.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
  font-size: 0.78rem;
  color: var(--gris);
}
.footer__legal a { color: var(--gris); text-decoration: none; transition: color 0.25s; }
.footer__legal a:hover { color: var(--blanco); }

/* ---------- Marca registrada: la ® va al PIE de la última letra ---------- */
.reg {
  display: inline-block;
  font-weight: 400;
  font-size: 0.36em;
  margin-left: 0.12em;
  letter-spacing: 0;
  vertical-align: baseline;
  transform: translateY(0.1em);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .objections, .quotes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav__links a:not(.nav__cta) { display: none; }
  .section { padding: 5.5rem 7vw; }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .ba { grid-template-columns: 1fr; }
  .svc-featured { grid-template-columns: 1fr; }
  .svc-featured__media { min-height: 220px; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .field--grid { grid-template-columns: 1fr; }
  .chips--budget, .chips--urgency { grid-template-columns: 1fr; }
  .logos__item img { height: 32px; }
}

/* ======================================================
   ANATOMÍA / PROCESO — despiece de cámara scrubbeado
   Secuencia de frames en <canvas>, estilo keynote Apple.
   ====================================================== */
.anatomy { position: relative; background: var(--negro); }
.anatomy__pin {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}
/* Glow azul de profundidad — nunca un fondo plano */
.anatomy__pin::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 130vmax; height: 130vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
      rgba(0, 64, 96, 0.36) 0%,
      rgba(0, 64, 96, 0.10) 30%,
      rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.anatomy__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.anatomy__still  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* Intro (arriba-izquierda) */
.anatomy__intro { position: absolute; left: 6vw; top: 15vh; z-index: 3; max-width: min(46ch, 74vw); }
.anatomy__title {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.9rem;
}

/* Rail de pasos (derecha) */
.anatomy__rail {
  position: absolute;
  right: 6vw; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.rail__item { display: flex; align-items: center; gap: 0.8rem; opacity: 0.38; transition: opacity 0.4s ease; }
.rail__item.is-active { opacity: 1; }
.rail__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gris); transition: background 0.4s, transform 0.4s; }
.rail__item.is-active .rail__dot { background: var(--rojo); transform: scale(1.6); }
.rail__label { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris-claro); }
.rail__item.is-active .rail__label { color: var(--blanco); }

/* Captions grandes (abajo-izquierda) — apiladas, una activa a la vez */
.anatomy__features { position: absolute; left: 6vw; bottom: 11vh; z-index: 3; width: min(42ch, 82vw); }
.feat {
  position: absolute;
  left: 0; bottom: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}
.feat.is-active { opacity: 1; transform: none; }
.feat__num { font-weight: 800; font-size: 0.95rem; color: var(--rojo); letter-spacing: 0.1em; }
.feat__title {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0.45rem 0 0.85rem;
}
.feat__text { color: var(--gris-claro); font-size: clamp(0.95rem, 1.5vw, 1.1rem); max-width: 38ch; }

/* Barra de progreso inferior */
.anatomy__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.08); z-index: 4; }
.anatomy__bar span { display: block; height: 100%; width: 0; background: var(--rojo); }

/* Modo interactivo activo (lo pone el JS): oculta el poster */
.anatomy--live .anatomy__still { display: none; }

/* Fallback estático (sin JS / prefers-reduced-motion): lista apilada legible */
.anatomy:not(.anatomy--live) .anatomy__pin { height: auto; min-height: 0; padding: 6rem 6vw; }
.anatomy:not(.anatomy--live) .anatomy__pin::before,
.anatomy:not(.anatomy--live) .anatomy__canvas,
.anatomy:not(.anatomy--live) .anatomy__rail,
.anatomy:not(.anatomy--live) .anatomy__bar { display: none; }
.anatomy:not(.anatomy--live) .anatomy__intro { position: relative; left: 0; top: 0; max-width: none; }
.anatomy:not(.anatomy--live) .anatomy__still {
  position: relative; height: auto; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--linea);
  margin: 2.4rem 0 0.5rem;
}
.anatomy:not(.anatomy--live) .anatomy__features {
  position: relative; left: 0; bottom: 0; width: 100%; margin-top: 2rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.anatomy:not(.anatomy--live) .feat { position: relative; opacity: 1; transform: none; }

/* Responsive del modo interactivo */
@media (max-width: 900px) {
  .anatomy__rail { display: none; }
  .anatomy__intro { top: 12vh; }
  .anatomy__features { bottom: 8vh; width: min(36ch, 88vw); }
}
@media (max-width: 760px) {
  .anatomy:not(.anatomy--live) .anatomy__features { grid-template-columns: 1fr; }
}

/* ======================================================
   MULTIPÁGINA — page-hero, galería, teaser, estudio, slot 3D
   ====================================================== */

/* En subpáginas el logo del nav siempre visible; sin fondo sólido (HUD flotante) */
.subpage .nav__logo { opacity: 1; pointer-events: auto; }
.nav__links a[aria-current="page"]:not(.nav__cta) { color: var(--blanco); }
/* :not(.nav__cta) es necesario: en Contacto el propio CTA "Hablemos" lleva
   aria-current="page" (es el link a la página activa). Sin la exclusión,
   este ::after (display:block, width:100%) se metía como un segundo hijo
   flex dentro del botón --pill (junto a .btn__clip) y el navegador
   comprimía el texto a "HABLE" para hacerle espacio a la línea, que se veía
   como si le cortara el botón por dentro. */
.nav__links a[aria-current="page"]:not(.nav__cta)::after {
  content: ""; display: block; height: 2px; width: 100%;
  background: var(--rojo); margin-top: 3px;
}

/* ---------- Encabezado de página (subpáginas) ---------- */
.page-hero {
  position: relative;
  padding: clamp(8rem, 18vh, 12rem) 6vw clamp(2.6rem, 5vw, 4.2rem);
  border-bottom: 1px solid var(--linea);
  background:
    radial-gradient(130% 150% at 82% -10%, var(--azul-suave), transparent 55%),
    var(--negro);
  overflow: hidden;
}
.page-hero__eyebrow { color: var(--rojo); letter-spacing: 0.4em; text-transform: uppercase; font-size: 0.78rem; margin-bottom: 1.1rem; }
.page-hero__title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.025em;
  max-width: 20ch;
}
.page-hero__lead { color: var(--gris-claro); max-width: 56ch; margin-top: 1.4rem; font-size: clamp(1rem, 1.5vw, 1.2rem); }

/* ---------- Teaser de trabajo (Inicio) ---------- */
.teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.4rem 0; }
.teaser-grid .media { aspect-ratio: 3 / 4; }
.teaser-grid .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teaser-foot { display: flex; justify-content: center; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* ---------- Galería filtrable + lightbox ---------- */
.gallery__filters { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 2.4rem; }
.filter-btn {
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris-claro); padding: 0.55rem 1.3rem;
  border: 1px solid var(--linea); border-radius: 99px; background: transparent; cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.filter-btn:hover { border-color: rgba(255,255,255,0.4); color: var(--blanco); }
.filter-btn.is-active { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery__item {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--linea); cursor: pointer; background: var(--negro-2);
  padding: 0; font: inherit; color: inherit; display: block; width: 100%;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item.is-hidden { display: none; }
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,0.78));
  pointer-events: none;
}
.gallery__meta { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.85rem; z-index: 2; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.gallery__cat { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blanco); background: rgba(177,40,43,0.92); padding: 0.2rem 0.55rem; border-radius: 99px; }
.gallery__name { font-size: 0.88rem; font-weight: 600; color: var(--blanco); }
.gallery__play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gallery__play span {
  width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--blanco);
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35);
}
.gallery__play span::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 13px solid var(--blanco); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.93); display: none; align-items: center; justify-content: center; padding: 6vh 6vw; }
.lightbox.is-open { display: flex; }
.lightbox__stage { position: relative; max-width: min(1100px, 90vw); text-align: center; }
.lightbox__media img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; display: block; margin-inline: auto; }
.lightbox__slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  width: min(900px, 88vw); aspect-ratio: 16 / 9; max-height: 80vh;
  border: 1px dashed var(--linea); border-radius: 10px; background: var(--negro-2); color: var(--gris);
}
.lightbox__slot .gallery__play { position: relative; }
.lightbox__caption { margin-top: 1rem; color: var(--gris-claro); font-size: 0.92rem; }
.lightbox__caption strong { color: var(--blanco); font-weight: 700; }
.lightbox__close { position: absolute; top: 3vh; right: 5vw; background: transparent; border: none; color: var(--blanco); font-size: 2.2rem; line-height: 1; cursor: pointer; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--blanco); font-size: 2.6rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; padding: 0 1rem; }
.lightbox__nav:hover { opacity: 1; }
.lightbox__prev { left: 1.5vw; }
.lightbox__next { right: 1.5vw; }

/* ---------- Slot del modelo 3D (Proceso) ---------- */
.model3d {
  position: relative; aspect-ratio: 16 / 9; min-height: 340px;
  border: 1px dashed var(--linea); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 0.8rem; color: var(--gris); text-align: center; padding: 2rem;
  background: radial-gradient(100% 120% at 50% 0%, var(--azul-suave), transparent 60%), var(--negro-2);
}
.model3d__badge { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rojo); }
.model3d__title { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -0.01em; color: var(--blanco); }

/* ---------- Estudio (nosotros) ---------- */
.about-lead { max-width: 24ch; font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 800; text-transform: uppercase; line-height: 1.08; letter-spacing: -0.02em; }
.about-body { max-width: 60ch; color: var(--gris-claro); margin-top: 1.6rem; font-size: clamp(1rem, 1.4vw, 1.15rem); }
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-grid .media { aspect-ratio: 4 / 5; }
.about-grid .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.value-card { padding: 2rem; border: 1px solid var(--linea); border-radius: 12px; background: rgba(255,255,255,0.015); }
.value-card .obj-q, .value-card h3 { color: var(--rojo); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.7rem; text-transform: none; letter-spacing: 0; }
.value-card p { color: var(--gris-claro); font-size: 0.95rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; text-align: center; }
.stat__num { font-family: var(--sans); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--rojo); line-height: 1; }
.stat__label { color: var(--gris-claro); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.5rem; }
.value-card--accent { border-color: var(--rojo); background: linear-gradient(150deg, rgba(177,40,43,0.14), rgba(255,255,255,0.02)); transform: translateY(-0.4rem); }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.value-tags { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.tag-pill {
  padding: 0.55rem 1.1rem; border-radius: 99px; border: 1px solid var(--linea);
  font-size: 0.82rem; color: var(--gris-claro); font-family: var(--sans);
}
@media (max-width: 900px) { .mv-grid { grid-template-columns: 1fr; } }

/* ---------- Equipo ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.team-card { padding: 1.8rem; border: 1px solid var(--linea); border-radius: 12px; background: rgba(255,255,255,0.015); text-align: center; }
.team-card__avatar {
  width: 4.2rem; height: 4.2rem; margin: 0 auto 1.1rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--negro); border: 1px solid var(--rojo-suave);
  font-family: var(--sans); font-weight: 800; color: var(--blanco); font-size: 1.1rem;
}
.team-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.team-card__role { color: var(--rojo); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.8rem; }
.team-card p:last-child { color: var(--gris-claro); font-size: 0.88rem; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .values, .stats { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) { .gallery { grid-template-columns: repeat(2, 1fr); } .teaser-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }

/* ======================================================
   SKIN "RECORDING" — HUD global tipo visor de cámara
   ====================================================== */

/* Overlay fijo (inyectado por JS): esquinas de encuadre + REC + timecode */
.rec-hud { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.rec-hud__corner { position: absolute; width: 24px; height: 24px; border: 1px solid var(--linea-fuerte); opacity: 0.7; }
.rec-hud__corner--tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.rec-hud__corner--tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.rec-hud__corner--bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.rec-hud__corner--br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
.rec-hud__rec {
  position: absolute; bottom: clamp(1rem, 2.6vh, 1.6rem); left: clamp(20px, 4.6vw, 44px);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; color: var(--gris-claro);
}
.rec-hud__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 8px rgba(177,40,43,0.85); animation: recblink 1.4s steps(1) infinite; }
@keyframes recblink { 50% { opacity: 0.2; } }
.rec-hud__meta { position: absolute; bottom: clamp(1rem, 2.6vh, 1.6rem); right: clamp(20px, 4.6vw, 44px); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--gris); }
@media (max-width: 620px) { .rec-hud__meta { display: none; } }

/* Utilidades mono / etiquetas técnicas */
.mono-tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-claro); }
/* Variante Helvetica fina — solo para las etiquetas de cada formato en Servicios
   (Producción mensual, Video institucional, etc.): mismo tamaño/tracking que
   .mono-tag y .page-hero__eyebrow, pero en la tipografía única de marca en
   vez de JetBrains Mono. No toca esas clases base: se usan tal cual en el
   resto del sitio (HUD de cámara, subpáginas). */
.svc-tag--sans { font-family: var(--sans); font-weight: var(--w-light); }
.page-hero__eyebrow, .logos__label, .media__label, .gallery__cat, .ba__tag, .stat__label, .rail__label { font-family: var(--mono); }
.project__num { font-family: var(--mono); font-weight: 300; }

/* Subtítulos y texto de apoyo — Helvetica Light (fina), en contraste con los
   títulos en Bold. Los títulos ya son 700/800 en sus propias reglas. */
.lead, .muted, .muted.small, .small,
.svc-featured__text p, .svc-card p, .step p,
.quote blockquote, .quote__org,
.footer__brand p, .footer__legal,
.about-body, .value-card p, .team-card p:last-child,
.page-hero__lead, .presentacion__lead, .svc-hero__lead, .svc-choose__lead, .svc-flagship__text,
.svc-modal__audience, .lightbox__caption,
.claim__body, .feat__text, .faq__item > p {
  font-weight: var(--w-light);
}

/* ---------- Modelo 3D como sección nativa (Proceso) ---------- */
.proceso3d { position: relative; background: #020203; }
#proceso3d-root { position: relative; }
/* El nav del sitio ya dice ARCA VISUAL: escondemos el topbar duplicado del HUD */
.proceso3d .hud__topbar { display: none; }

/* ---------- Producciones · Casos destacados — franjas que se expanden en hover ---------- */
.case-strip { display: flex; align-items: stretch; gap: 0.6rem; height: clamp(280px, 34vw, 420px); }
.case-strip__item {
  position: relative; flex: 1 1 0%; min-width: 64px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--linea); background: var(--negro-2); text-decoration: none; display: block;
  transition: flex-grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.case-strip__item:hover, .case-strip__item:focus-visible { flex-grow: 5; }
.case-strip__item img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) brightness(0.8); transition: filter 0.5s;
}
.case-strip__item:hover img { filter: saturate(1) brightness(0.68); }
.case-strip__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.85) 100%); pointer-events: none; }
.case-strip__idx { position: absolute; top: 0.9rem; left: 1rem; z-index: 1; font-family: var(--mono); font-weight: 300; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--rojo); }
.case-strip__caption {
  position: absolute; left: 1.1rem; right: 1rem; bottom: 1rem; z-index: 1; white-space: nowrap;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s, transform 0.35s;
}
.case-strip__item:hover .case-strip__caption, .case-strip__item:focus-visible .case-strip__caption { opacity: 1; transform: none; }
.case-strip__caption strong { display: block; font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: -0.01em; color: var(--blanco); }
.case-strip__caption span { display: block; font-family: var(--sans); font-weight: var(--w-light); font-size: 0.82rem; color: var(--gris-claro); white-space: normal; margin-top: 0.2rem; }
@media (max-width: 760px) {
  .case-strip { flex-direction: column; height: auto; }
  .case-strip__item { flex: none; height: 200px; }
  .case-strip__item:hover { flex-grow: 0; }
  .case-strip__caption { opacity: 1; transform: none; white-space: normal; }
}

/* ---------- Toma cinematográfica (reemplaza layouts imagen/texto) ---------- */
.filmframe { position: relative; height: min(88vh, 820px); min-height: 460px; overflow: hidden; background: var(--negro); }
.filmframe > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#comerciales > img { opacity: 0.6; }
.filmframe__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.12) 32%, rgba(0,0,0,0.8)); }
.filmframe__index {
  position: absolute; right: clamp(20px, 6vw, 64px); top: clamp(84px, 15vh, 150px); z-index: 1;
  font-family: var(--mono); font-weight: 300; font-size: clamp(3rem, 8vw, 7rem); color: var(--rojo); line-height: 1;
}
.filmframe__heading { position: absolute; left: clamp(20px, 6vw, 64px); bottom: clamp(46px, 9vh, 92px); max-width: 34ch; z-index: 1; }
/* Mismo problema que .section__head--wide: 34ch/42ch se calculan con el
   font-size ambiente, no con el del h2 (clamp hasta 3.4rem) que va adentro,
   así que el saltos de línea del <br> manual del HTML terminaban recortados
   por un contenedor mucho más angosto de lo que el título necesita. */
.filmframe__heading--wide { max-width: min(46rem, 82vw); }
.filmframe__heading h2 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em; }
.filmframe__heading p { font-family: var(--mono); color: var(--gris-claro); font-size: clamp(0.8rem, 1.05vw, 0.95rem); margin-top: 1rem; max-width: 46ch; line-height: 1.75; }
/* width:fit-content (no solo display:flex, que como bloque hereda el ancho
   completo del heading -- min(46rem,82vw) -- e infla el botón a un
   rectángulo gigante) para que el botón se ajuste a su propio texto. */
.filmframe__heading .svc-more { margin-top: 1.3rem; }
.filmframe__heading .svc-more + .btn { display: flex; width: fit-content; margin-top: 1.6rem; }
#video-institucional .filmframe__heading h2 { font-size: clamp(1.5rem, 3.2vw, 2.5rem); }
.filmframe__tl { position: absolute; top: clamp(84px, 14vh, 124px); left: clamp(20px, 6vw, 64px); z-index: 1; }
.filmframe__br { position: absolute; bottom: clamp(26px, 5vh, 46px); right: clamp(20px, 6vw, 64px); z-index: 1; }
/* Comerciales — "05" y "JEEP" van juntos en la misma esquina (antes JEEP
   vivía arriba a la izquierda y el 05 arriba a la derecha, cada uno solo).
   Se agrupan en un wrapper posicionado y los hijos vuelven a flujo normal,
   sin tocar su propio font/color. */
#comerciales .filmframe__index-group {
  position: absolute; right: clamp(20px, 6vw, 64px); top: clamp(84px, 15vh, 150px); z-index: 1;
  display: flex; align-items: center; gap: 0.7rem;
}
#comerciales .filmframe__index, #comerciales .filmframe__tl { position: static; }
/* El "05" pierde su tratamiento de número gigante rojo (el de .filmframe__index
   base) y adopta el mismo font/color que JEEP -- van juntos como una sola
   etiqueta, no como dos elementos con jerarquías distintas. */
#comerciales .filmframe__index {
  font-family: var(--sans); font-weight: var(--w-light); font-size: 0.64rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-claro); line-height: 1;
}

/* Stats → números finos mono, con divisores (estilo ficha técnica) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; text-align: left; border-top: 1px solid var(--linea); }
.stats > div { padding: 1.8rem clamp(1rem, 2vw, 1.8rem) 0; border-left: 1px solid var(--linea); }
.stats > div:first-child { border-left: none; padding-left: 0; }
.stat__num { font-family: var(--mono); font-weight: 300; font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--rojo); line-height: 1; letter-spacing: -0.01em; }
.stat__label { color: var(--gris-claro); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.7rem; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr; } .stats > div { border-left: none; padding-left: 0; } }

/* Valores → etiquetas mono */
.value-card .obj-q, .value-card h3 { font-family: var(--sans); }

/* ======================================================
   CLAIM — capas al estilo de la sección de rendimiento M5/M5 Pro/M5 Max
   de apple.com: 1) el fondo entra solo, 2) las letras aparecen vacías como
   plantilla (el negro cubre todo salvo el hueco de cada letra, que deja ver
   el fondo), 3) se solidifican con color (crossfade plantilla→sólido),
   4) entra el párrafo de apoyo. Técnica: sticky-pin + background-clip:text,
   todo ligado al progreso de scroll (ver initClaim en main.js).
   ====================================================== */
@keyframes claimFlow {
  0%   { transform: scale(1.08) rotate(0deg); }
  50%  { transform: scale(1.22) rotate(2deg); }
  100% { transform: scale(1.14) rotate(-2deg); }
}

/* ---------- Antes / Después — mismos degradados que La Solución, sin corte a negro ---------- */
.ba-section { position: relative; overflow: hidden; padding: clamp(5rem, 8vw, 7.5rem) 6vw; background: var(--negro); }
.ba-section__glow {
  position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(45% 55% at 24% 28%, rgba(0, 64, 96, 0.6) 0%, transparent 60%),
    radial-gradient(50% 60% at 76% 26%, rgba(177, 40, 43, 0.22) 0%, transparent 55%),
    radial-gradient(55% 60% at 50% 92%, rgba(0, 64, 96, 0.4) 0%, transparent 60%),
    var(--negro);
  animation: claimFlow 22s ease-in-out infinite alternate;
}
.ba-section__inner { position: relative; z-index: 1; }
/* El título es más grande que lo que 52ch permite en el contexto de fuente
   del contenedor (heredado a 16px) — se necesita más ancho para que quepa
   en los dos renglones previstos por el <br> del markup. */
.ba-section .section__head--center { max-width: none; }
.ba-section__title {
  font-family: var(--sans); font-weight: var(--w-black); text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em;
}
@media (prefers-reduced-motion: reduce) { .ba-section__glow { animation: none; } }

.claim { position: relative; background: var(--negro); }
.claim__pin { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }

/* Capa 1 · el fondo — entra solo (JS anima su opacidad); leve deriva continua
   para que se sienta "vivo" como el video macro de Apple */
.claim__glow {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(45% 55% at 24% 28%, rgba(0, 64, 96, 0.85) 0%, transparent 60%),
    radial-gradient(50% 60% at 76% 26%, rgba(177, 40, 43, 0.30) 0%, transparent 55%),
    radial-gradient(55% 60% at 50% 92%, rgba(0, 64, 96, 0.55) 0%, transparent 60%),
    var(--negro);
  filter: saturate(1.1);
  opacity: 1;
  animation: claimFlow 22s ease-in-out infinite alternate;
}

/* Capa 2 · el negro que "se come" el fondo salvo donde hay letras (JS anima su opacidad) */
.claim__cover { position: absolute; inset: 0; z-index: 1; background: var(--negro); opacity: 0; }

/* Capa 3 · contenido: eyebrow, titular (plantilla + sólido superpuestos) y párrafo */
.claim__stage {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  text-align: center; max-width: 60rem; margin-inline: auto;
  /* El padding lateral en vw puro seguía creciendo con el viewport aun
     después de que el stage ya había topado su max-width de 960px — en el
     rango ~1250-1450px (una ventana de laptop común) eso dejaba MENOS
     ancho interior disponible que en pantallas más angostas, justo lo
     suficiente para que "Prospectos" ya no cupiera en una sola línea.
     Con el padding topado (clamp) el interior nunca se vuelve a encoger. */
  padding: 0 clamp(1.5rem, 6vw, 3rem);
}
.claim__eyebrow {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--rojo);
  opacity: 0; transform: translateY(-64px);
}
/* El titular "cae" desde fuera del pin (el overflow:hidden del pin lo recorta
   hasta que entra) en vez de aparecer con un simple fade in situ */
.claim__headline-wrap { position: relative; width: 100%; transform: translateY(-22vh); }
.claim__headline {
  font-family: var(--sans); font-weight: var(--w-black); text-transform: uppercase;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem); line-height: 1.15; letter-spacing: -0.02em;
}
/* Segundo renglón — más largo, tamaño reducido para que quepa en una sola línea */
.claim__headline-sub { display: inline-block; font-size: clamp(1rem, 2.5vw, 1.85rem); }
/* Plantilla: deja ver el mismo fondo de la Capa 1, solo dentro de las letras */
.claim__headline--ghost {
  position: relative;
  background:
    radial-gradient(45% 55% at 24% 28%, rgba(0, 64, 96, 0.85) 0%, transparent 60%),
    radial-gradient(50% 60% at 76% 26%, rgba(177, 40, 43, 0.30) 0%, transparent 55%),
    radial-gradient(55% 60% at 50% 92%, rgba(0, 64, 96, 0.55) 0%, transparent 60%),
    #cfd2d6;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0;
}
/* Sólido — se solidifica con degradado menta→azul ARCA (el "menta tipo Apple" en tono de marca) */
.claim__headline--solid {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #eafff6 0%, #8fe9c9 40%, #5fa8c7 72%, var(--azul) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0;
}
.claim__body {
  font-family: var(--sans); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55;
  color: var(--gris-claro); max-width: 52ch;
  opacity: 0; transform: translateY(-48px);
}

/* Flujo visual — línea de tiempo Estrategia → ... → Prospectos, aparece por pasos con el scroll.
   Antes dependía de scroll horizontal oculto (scrollbar-width:none) con un
   umbral de wrap solo bajo 760px: en cualquier ancho intermedio (la mayoría
   de laptops con la ventana no maximizada) las 5 píldoras no cabían en una
   sola línea y "Prospectos" quedaba cortado sin ninguna pista de que había
   más contenido. Ahora el wrap es incondicional: nunca depende del ancho de
   pantalla, todas las píldoras siempre se ven completas. */
.claim__flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 0.5rem 0.7rem; row-gap: 0.6rem; margin-top: 0.6rem; width: 100%;
}
.claim__flow-step {
  font-family: var(--sans); font-weight: var(--w-medium); font-size: clamp(0.68rem, 1.15vw, 0.95rem);
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  color: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: 99px;
  padding: 0.5rem 1.1rem;
  opacity: 0; transform: translateY(14px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
.claim__flow-step.is-in { opacity: 1; transform: none; border-color: var(--rojo); }
.claim__flow-step--last.is-in { background: var(--rojo); border-color: var(--rojo); }
.claim__flow-arrow { color: var(--rojo); font-size: 1rem; opacity: 0; transition: opacity 0.4s ease; flex-shrink: 0; }
.claim__flow-arrow.is-in { opacity: 1; }
@media (max-width: 760px) {
  .claim__flow-step { padding: 0.45rem 0.85rem; font-size: 0.68rem; }
  .claim__flow { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .claim__flow-step, .claim__flow-arrow { opacity: 1; transform: none; }
}

/* Sin movimiento: composición final, estática y legible */
@media (prefers-reduced-motion: reduce) {
  .claim__pin {
    height: auto; min-height: 0; overflow: visible;
    padding: clamp(6rem, 11vw, 10rem) 6vw;
  }
  .claim__glow { opacity: 1; animation: none; }
  .claim__cover, .claim__headline--ghost { display: none; }
  .claim__headline-wrap { position: relative; transform: none; }
  .claim__headline--solid { position: relative; opacity: 1; }
  .claim__eyebrow, .claim__body { opacity: 1; transform: none; }
}

/* ======================================================
   SOLUTION-CTA — "elige tu servicio" bajo La Solución: marquee vertical
   con los servicios de Arca Visual, cada uno enlaza a su ficha en Servicios.
   Técnica: dos pistas idénticas apiladas, cada una anima translateY(-100%)
   en loop infinito — cuando la primera sale, la segunda ya ocupa su lugar
   (loop sin costura). Fundido en los bordes vía mask-image, sin overlays
   de color que dependan del fondo.
   ====================================================== */
.solution-cta { position: relative; background: var(--negro); padding: clamp(4rem, 7vw, 7rem) 6vw; overflow: hidden; }
/* Fondo tenue azul ARCA + rojo — mismo lenguaje de las secciones "La solución" /
   "Cómo elegir" (glow azul dominante, rojo como acento discreto), en vez del
   plateado neutro que tenía antes. */
.solution-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 82% 0%, rgba(0, 64, 96, 0.22) 0%, transparent 62%),
    radial-gradient(55% 60% at 12% 100%, rgba(177, 40, 43, 0.12) 0%, transparent 60%);
}
.solution-cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.solution-cta__title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; margin-top: 0.9rem;
}
.solution-cta__lead { color: var(--gris-claro); font-weight: var(--w-light); max-width: 44ch; margin-top: 1.2rem; font-size: clamp(0.98rem, 1.4vw, 1.1rem); }
.solution-cta__text .btn { margin-top: 1.8rem; }

.solution-cta__marquee {
  position: relative; height: clamp(300px, 40vw, 440px); overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 84%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 16%, black 84%, transparent);
}
.solution-cta__track {
  display: flex; flex-direction: column; flex-shrink: 0;
  animation: solutionMarquee 34s linear infinite;
}
.solution-cta__marquee:hover .solution-cta__track { animation-play-state: paused; }
.solution-cta__item {
  display: block; padding: 1rem 0; white-space: nowrap;
  font-family: var(--sans); font-weight: var(--w-light);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -0.01em;
  color: var(--gris-claro); text-decoration: none; opacity: 0.4;
  border-bottom: 1px solid var(--linea);
  transition: opacity 0.3s, color 0.3s;
}
.solution-cta__item:hover, .solution-cta__item:focus-visible { opacity: 1; color: var(--blanco); }
@keyframes solutionMarquee {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .solution-cta__track { animation: none; }
  .solution-cta__marquee { height: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .solution-cta__marquee .solution-cta__track:last-child { display: none; }
}
@media (max-width: 900px) {
  .solution-cta__grid { grid-template-columns: 1fr; }
  .solution-cta__marquee { height: 320px; margin-top: 1rem; }
  .solution-cta__item { font-size: clamp(1.2rem, 5.5vw, 1.7rem); }
}

/* ======================================================
   PV — visor de producciones por tabs (crossfade)
   (técnica: intercambio de estado por tab, sin cambiar de página)
   ====================================================== */
.pv { margin: 2.4rem 0 0; }
.pv__tabs { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.4rem; }
.pv__tab {
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--gris-claro); padding: 0.7rem 1.3rem; border-radius: 99px;
  border: 1px solid var(--linea); background: transparent; cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.pv__tab:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--blanco); }
.pv__tab.is-active { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.pv__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.pv__state { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.pv__state.is-active { opacity: 1; }
.pv__state img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ======================================================
   VIDGRID — collage de 9, preview cinematográfico + play en hover
   ====================================================== */
.vidgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.4rem 0; }
.vidcell {
  position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--linea); background: var(--negro-2); cursor: pointer;
}
.vidcell__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vidcell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
  transition: background 0.35s ease;
  pointer-events: none;
}
.vidcell::before {
  content: attr(data-client);
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  font-family: var(--sans); font-weight: var(--w-bold); font-size: 0.92rem; color: var(--blanco);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.vidcell:hover::after { background: rgba(0,0,0,0.55); }
.vidcell:hover::before { opacity: 1; transform: none; }
.vidcell:hover .vidcell__video { transform: scale(1.04); }
.vidcell__video { transition: transform 0.6s ease; }
@media (max-width: 900px) { .vidgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vidgrid { grid-template-columns: 1fr; } }

/* ======================================================
   FINALE — CTA de cierre a pantalla completa
   (técnica: fondo animado full-bleed + texto blanco encima)
   ====================================================== */
.finale { position: relative; overflow: hidden; padding: clamp(6rem, 11vw, 10rem) 6vw; text-align: center; }
.finale__glow {
  position: absolute; inset: -25%;
  background:
    radial-gradient(50% 60% at 28% 22%, rgba(0, 64, 96, 0.85) 0%, transparent 60%),
    radial-gradient(55% 60% at 76% 78%, rgba(177, 40, 43, 0.26) 0%, transparent 55%),
    var(--negro);
  animation: claimFlow 22s ease-in-out infinite alternate;
}
.finale__inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .finale__glow { animation: none; }
}

/* ======================================================
   STATS — números con degradado + entrada escalonada
   (técnica: background-clip:text + stagger por IntersectionObserver)
   ====================================================== */
.stat__num {
  background: linear-gradient(180deg, #ff7a7d 0%, var(--rojo) 55%, #5c1416 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-item {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.stat-item.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stat-item { opacity: 1; transform: none; transition: none; }
}

/* ======================================================
   SERVICIOS (2026) — hero BTS, elegir servicio, Sistema
   Integral full-bleed y 7 formatos individuales variados
   ====================================================== */

/* Hero — mismo crossfade que .presentacion, alineado a la izquierda */
.svc-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--negro); padding-bottom: clamp(3rem, 7vh, 5rem); }
.svc-hero__bg { position: absolute; inset: 0; z-index: 0; }
.svc-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: saturate(0.9) brightness(0.7);
  animation: presentacionCross 18s ease-in-out infinite;
}
.svc-hero__img:nth-child(1) { animation-delay: 0s; }
.svc-hero__img:nth-child(2) { animation-delay: 6s; }
.svc-hero__img:nth-child(3) { animation-delay: 12s; }
.svc-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.9) 100%),
    radial-gradient(60% 60% at 15% 85%, rgba(177,40,43,0.18), transparent 60%);
}
.svc-hero__stage { position: relative; z-index: 1; max-width: 900px; padding: clamp(9rem, 20vh, 13rem) 6vw 0; }
.svc-hero__stage .page-hero__eyebrow { position: relative; }
.svc-hero__title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  /* Con el <br> manual en el HTML forzando "Servicios para empresas" / "que
     quieren comunicar..." en 2 líneas, el max-width:22ch de antes (pensado
     para el wrap automático del navegador) partía la 2a línea en varias más
     -- 22ch a este tamaño de letra es mucho más angosto que el ancho real
     del stage (~728px en escritorio). Se quita el max-width y se baja el
     tamaño para que la 2a línea (56 caracteres) quepa en 1 sola línea. */
  font-size: clamp(1.15rem, 2.1vw, 1.6rem); line-height: 1.22; letter-spacing: -0.02em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.svc-hero__lead { color: var(--gris-claro); max-width: 56ch; margin-top: 1.4rem; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.svc-hero .teaser-foot { justify-content: flex-start; margin-top: 2.2rem; }
@media (prefers-reduced-motion: reduce) {
  .svc-hero__img { animation: none; opacity: 0; }
  .svc-hero__img:nth-child(1) { opacity: 1; }
}
@media (max-width: 760px) { .svc-hero { min-height: 78vh; } }

/* Cómo elegir el servicio correcto — degradado rojo/azul de "La solución" */
.svc-choose { position: relative; overflow: hidden; min-height: 78vh; display: flex; align-items: flex-end; background: var(--negro); padding: clamp(4rem, 8vw, 6rem) 6vw 0; }
.svc-choose__glow {
  position: absolute; inset: -20%; z-index: 0;
  background:
    radial-gradient(45% 55% at 24% 28%, rgba(0, 64, 96, 0.6) 0%, transparent 60%),
    radial-gradient(50% 60% at 76% 26%, rgba(177, 40, 43, 0.22) 0%, transparent 55%),
    radial-gradient(55% 60% at 50% 92%, rgba(0, 64, 96, 0.4) 0%, transparent 60%),
    var(--negro);
  animation: claimFlow 22s ease-in-out infinite alternate;
}
.svc-choose__inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.svc-choose__head { max-width: none; }
.svc-choose__title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em;
}
.svc-choose__lead { color: var(--gris-claro); margin-top: 1.2rem; font-size: clamp(0.95rem, 1.3vw, 1.05rem); max-width: 58ch; }
@media (prefers-reduced-motion: reduce) { .svc-choose__glow { animation: none; } }

/* Carrusel de los 9 servicios — tarjetas con foto + scroll-snap + flechas
   nativas (sin librería nueva), inspirado en un "offer carousel": recorrido
   uno por uno de cada forma en la que se puede contratar a Arca, con
   Sistema Integral marcado como el más pedido.
   El track necesita padding vertical de sobra: overflow-x:auto obliga al
   navegador a computar overflow-y también como auto (regla de propagación
   de overflow), así que sin ese aire arriba/abajo el hover (translateY +
   sombra) se recorta contra el propio contenedor de scroll. */
.offer-carousel { margin-top: clamp(1.1rem, 2.9vw, 2.1rem); }
.offer-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.offer-carousel__label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-claro); }
.offer-carousel__nav { display: flex; gap: 0.6rem; flex: none; }
.offer-carousel__arrow {
  width: 42px; height: 42px; border-radius: 999px; flex: none;
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--blanco);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, background 0.3s, opacity 0.3s;
}
.offer-carousel__arrow:hover { border-color: var(--rojo); background: rgba(177, 40, 43, 0.14); }
.offer-carousel__arrow:disabled { opacity: 0.3; cursor: default; }
.offer-carousel__arrow:disabled:hover { border-color: var(--linea-fuerte); background: transparent; }

.offer-carousel__track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Causa real del recorte del halo: scroll-snap-align:start en las cards
     ignora el padding del propio contenedor de scroll si no se le dice lo
     contrario -- el navegador auto-ajusta scrollLeft al cargar para que el
     borde de la primera tarjeta quede pegado al viewport (scrollLeft =
     padding-left), dejando TODO el padding-left (y el halo que sangra
     dentro de él) fuera del área visible, sin importar cuánto padding se
     agregue. scroll-padding le dice al snap "el viewport empieza después
     de este margen", así respeta el padding como aire real y visible. */
  scroll-padding-left: 3.5rem; scroll-padding-right: 3.5rem;
  /* padding ampliada en las 4 direcciones: el halo (box-shadow) de la
     tarjeta destacada (Sistema Integral) no cuenta para el scrollWidth del
     contenedor -- solo el layout box la cuenta -- así que con poco padding
     ese resplandor se recortaba contra el borde del scroll-port apenas el
     carrusel cargaba en scrollLeft:0. Mismo motivo arriba: el lift en hover
     (translateY -6px) + el halo necesitan aire vertical de sobra. */
  padding: 3.75rem 3.5rem 2.4rem;
  /* margen negativo en los lados: compensa el padding lateral para no
     desalinear el carrusel del resto del bloque (título, flechas). Arriba
     NO se compensa con margen negativo a propósito -- eso pondría el propio
     contenedor de scroll (que sigue "vivo" al hover/wheel aunque sea
     transparente) encima de la fila de título+flechas de arriba, robándole
     el hover. El padding de arriba se deja como aire real. A la izquierda
     se compensa menos que a la derecha a propósito: así queda más aire
     real antes de la primera tarjeta (Sistema Integral), no solo el
     necesario para contener su halo. */
  margin: 0 -2.6rem 0 -1.1rem;
  /* Solo se desvanece el borde DERECHO: a la izquierda no hay nada fuera
     de pantalla que disolver (scrollLeft siempre arranca en 0), y un fundido
     ahí solo le comía opacidad/tamaño a la propia tarjeta destacada. La
     última tarjeta visible sí queda cortada a la mitad contra el borde del
     wrap — un corte duro chocando contra el glow ambiental de la sección —
     y ese fundido a la derecha lo disuelve, igual que el marquee de logos. */
  mask-image: linear-gradient(to right, black, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, black, black 92%, transparent);
}
.offer-carousel__track::-webkit-scrollbar { display: none; }

.offer-card {
  position: relative;
  scroll-snap-align: start; flex: 0 0 auto; width: clamp(210px, 25vw, 258px);
  display: flex; flex-direction: column;
  border-radius: 12px; border: 1px solid var(--linea-fuerte);
  background: rgba(255,255,255,0.04); text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, box-shadow 0.3s;
}
/* Antes la tarjeta ENTERA escalaba (scale 1.06) además de subir — igual que
   pasaba con "Prospectos", crecer horizontalmente dentro de un contenedor
   de scroll (overflow-x:auto, que fuerza overflow-y a auto también) la
   recortaba contra sus vecinas o contra el propio carril. Mismo patrón que
   ya usan las tarjetas de casos destacados en producciones.html: la tarjeta
   (contenedor) se queda del mismo tamaño — solo sube un poco — y el "crecer"
   lo hace la imagen de adentro, contenida por su propio overflow:hidden, sin
   arriesgar recortes. */
.offer-card:hover { z-index: 2; border-color: var(--rojo); transform: translateY(-6px); background: rgba(255,255,255,0.07); box-shadow: 0 20px 38px rgba(0,0,0,0.45); }
/* Sistema Integral — el servicio estrella: borde azul ARCA vivo (no rojo)
   para que se distinga de los demás por su propia identidad, no por el
   mismo acento rojo que ya usan las otras 8 tarjetas. */
/* box-shadow (no clipado por el overflow:hidden de .offer-card, a
   diferencia de un pseudo-elemento) para el aura: un halo suave alrededor
   del borde, más notorio que un simple cambio de color. */
.offer-card--featured {
  border-color: rgba(23, 163, 232, 0.55);
  background: linear-gradient(150deg, rgba(23,163,232,0.14), rgba(23,163,232,0.03));
  box-shadow:
    0 0 0 1px rgba(23, 163, 232, 0.3),
    0 0 34px 3px rgba(23, 163, 232, 0.4),
    0 18px 44px -22px rgba(23, 163, 232, 0.35);
}
.offer-card--featured:hover {
  border-color: var(--azul-vivido);
  box-shadow:
    0 0 0 1px rgba(23, 163, 232, 0.55),
    0 0 48px 6px rgba(23, 163, 232, 0.6),
    0 18px 44px -18px rgba(23, 163, 232, 0.5);
}
.offer-card__media { position: relative; aspect-ratio: 4 / 3; flex: none; overflow: hidden; }
.offer-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.92) brightness(0.85);
  transition: transform 0.5s ease, filter 0.4s ease;
}
.offer-card:hover .offer-card__media img { transform: scale(1.06); filter: saturate(1) brightness(0.95); }
.offer-card__media--web img { object-position: center 62%; }
.offer-card__badge {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blanco); background: var(--azul-vivido);
  border-radius: 999px; padding: 0.3rem 0.7rem;
}
.offer-card__star { font-size: 1.4em; line-height: 1; }
.offer-card__body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.3rem 1.4rem; flex-grow: 1; }
.offer-card__num { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--gris); }
.offer-card__title { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.offer-card__desc { color: var(--gris-claro); font-size: 0.88rem; line-height: 1.5; flex-grow: 1; }
.offer-card__link { font-weight: 600; font-size: 0.88rem; color: var(--azul-vivido); display: inline-flex; align-items: center; gap: 0.4rem; }
.offer-card:hover .offer-card__link .arrow { transform: translateX(6px); }

/* CTA "Cotizar [servicio]" bajo cada bloque de servicio: el MISMO componente
   .btn--solid que "Solicitar Sistema Integral" (relleno sólido al hover vía
   initHoverButtons() en main.js), no una imitación con halo estático -- un
   halo sin el relleno detrás se ve como una caja borrosa en vez de luz,
   sobre todo en un pill ancho como "Cotizar video institucional". */
.svc-featured__text .btn--solid { align-self: flex-start; }
@media (max-width: 760px) {
  .offer-card { width: clamp(198px, 70vw, 236px); }
}

/* Sistema Integral — bloque premium full-bleed, casi a pantalla completa */
.svc-flagship { position: relative; min-height: 86vh; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; background: var(--negro); }
.svc-flagship__media { position: absolute; inset: 0; z-index: 0; }
.svc-flagship__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.55); }
.svc-flagship__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.18) 100%),
    radial-gradient(45% 60% at 15% 30%, var(--azul-vivido-suave), transparent 60%);
}
.svc-flagship__stage { position: relative; z-index: 1; max-width: 640px; padding: clamp(6rem, 10vw, 8rem) 6vw; flex: none; }
/* Servicio estrella: identidad propia en azul vivo, sin rojo. */
.svc-flagship__stage .page-hero__eyebrow { color: var(--azul-vivido); }
.svc-flagship__title .hl { color: var(--azul-vivido); }
.svc-flagship__title {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  /* El máximo se calculó contra el ancho real de .svc-flagship__stage (640px
     menos su padding lateral de 6vw): a los tamaños de escritorio comunes
     ese ancho ronda 460-490px, y "TODO LO QUE TU EMPRESA NECESITA" ya no
     cabe en 1 línea pasado ~1.55rem -- por eso el máximo anterior (2.5rem)
     partía la frase en 2 renglones por sí sola y el título terminaba en 4
     líneas en vez de 2. */
  font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.16; letter-spacing: -0.02em; margin-top: 1rem;
}
.svc-flagship__text { color: var(--gris-claro); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 52ch; margin-top: 1.4rem; }
.svc-flagship .btn { margin-top: 2rem; }
.svc-flagship__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem; }
.svc-flagship__actions .svc-more { margin-top: 2rem; color: var(--blanco); }
.svc-flagship__actions .svc-more:hover { color: var(--azul-vivido); }
@media (max-width: 760px) { .svc-flagship { min-height: 74vh; } }

/* Collage a la derecha del flagship: página web + producción + pauta,
   superpuestas sobre el fondo full-bleed (que ya se aclara hacia la
   derecha por el propio degradado del scrim). Se oculta en pantallas
   angostas, donde no hay aire para convivir con el texto. */
.svc-flagship__collage {
  position: relative; z-index: 1; flex: none;
  width: clamp(320px, 38vw, 520px); height: clamp(400px, 46vw, 600px);
  margin-right: clamp(1.5vw, 4vw, 3.5rem);
  display: none;
  flex-direction: column; gap: 10px;
}
.svc-flagship__collage-item {
  position: relative; flex: 1; width: 100%; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16); background: var(--negro-2);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.svc-flagship__collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95) brightness(0.92); }
.svc-flagship__collage-tag {
  position: absolute; bottom: 0.7rem; left: 0.8rem; z-index: 1;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blanco); background: rgba(0,0,0,0.55); padding: 0.3rem 0.65rem; border-radius: 999px;
}
@media (min-width: 981px) { .svc-flagship__collage { display: flex; } }

/* "A ver lo que incluye" — desglose expandible del Sistema Integral */
.svc-includes { border-top: 1px solid var(--linea); margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.svc-includes summary {
  display: flex; align-items: center; gap: 0.9rem; list-style: none; cursor: pointer;
  padding: 1.6rem 0; font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 700;
}
.svc-includes summary::-webkit-details-marker { display: none; }
.svc-includes summary .faq__icon { margin-left: auto; }
.svc-includes[open] summary .faq__icon { transform: rotate(45deg); }
.svc-includes__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem 1.6rem; padding: 0.6rem 0 2.4rem; }
.svc-includes__list li { color: var(--gris-claro); font-size: 0.94rem; }
@media (max-width: 900px) { .svc-includes__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-includes__list { grid-template-columns: 1fr; } }

/* svc-featured__media — el img nunca tenía regla de cover propia */
.svc-featured__media img, .svc-featured__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Toggle de volumen — mismo patrón que las tarjetas de producciones-grid */
.media__sound {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  color: var(--blanco);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.media__sound:hover { background: rgba(0,0,0,0.65); transform: scale(1.06); }
.media__sound[aria-pressed="true"] { border-color: var(--rojo); color: var(--rojo); }
.media__sound-icon--on { display: none; }
.media__sound[aria-pressed="true"] .media__sound-icon--off { display: none; }
.media__sound[aria-pressed="true"] .media__sound-icon--on { display: block; }

/* Video institucional — .filmframe + botón de reel centrado */
.filmframe--reel > img { filter: grayscale(0.4) brightness(0.55); opacity: 0.6; }
.filmframe--reel .filmframe__heading { max-width: 42ch; }
.filmframe--reel .filmframe__heading--wide { max-width: min(46rem, 82vw); }

/* Fotografía profesional — variante editorial de .gallery, asimétrica */
.gallery--editorial { grid-auto-rows: 230px; }
.gallery--editorial .gallery__item { aspect-ratio: auto; }
.gallery--editorial .gallery__item:first-child { grid-row: span 2; }
@media (max-width: 820px) { .gallery--editorial { grid-auto-rows: 200px; } .gallery--editorial .gallery__item:first-child { grid-row: span 1; } }

/* Fotografía gastronómica — mosaico bento */
#fotografia-gastronomica .section__head { margin-bottom: clamp(1.4rem, 2.2vw, 2rem); }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 0.9rem; }
.mosaic__item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); }
.mosaic__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.mosaic__item:hover img { transform: scale(1.05); }
.mosaic__item--big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 820px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mosaic__item--big { grid-column: span 2; grid-row: span 1; }
}

/* Dron — avance de obra en 3 etapas */
.dron-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.dron-stage { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); aspect-ratio: 4 / 3; }
.dron-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .dron-progress { grid-template-columns: 1fr; } }

/* Página web — mockups de desktop y móvil superpuestos */
.web-mock { position: relative; padding-bottom: clamp(2rem, 6vw, 3.2rem); }
.web-mock__desktop {
  position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea);
  background: #0d1620; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.web-mock__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; background: #111417; border-bottom: 1px solid var(--linea); }
.web-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.web-mock__dot:first-child { background: var(--rojo); }
.web-mock__url { margin-left: 0.8rem; font-family: var(--mono); font-size: 0.68rem; color: var(--gris); background: rgba(255,255,255,0.05); padding: 0.25rem 0.9rem; border-radius: 99px; }
.web-mock__desktop img { display: block; width: 100%; height: auto; }
.web-mock__mobile {
  position: absolute; right: clamp(1rem, 6vw, 4.5rem); bottom: -2.2rem;
  width: clamp(130px, 17vw, 200px); border-radius: 24px; overflow: hidden;
  border: 6px solid #111417; box-shadow: 0 20px 50px rgba(0,0,0,0.6); background: #000;
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.web-mock__mobile img { display: block; width: 100%; height: auto; }
.web-mock:hover .web-mock__desktop { transform: translateY(-6px); }
.web-mock:hover .web-mock__mobile { transform: translateY(-16px); }
@media (max-width: 760px) {
  .web-mock { padding-bottom: 0; }
  .web-mock__mobile { position: static; width: 160px; margin: 1.6rem auto 0; }
}

/* Comparativa — tabla funcional, cada fila enlaza a su servicio */
.compare-table { border-top: 1px solid var(--linea); }
.compare-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 0.4rem; border-bottom: 1px solid var(--linea);
  text-decoration: none; color: inherit;
  transition: background 0.25s, padding-left 0.25s;
}
a.compare-row:hover { background: rgba(255,255,255,0.03); padding-left: 0.8rem; }
.compare-row--head { color: var(--gris); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--mono); }
.compare-row span:first-child { font-weight: 600; }
.compare-row__svc { color: var(--azul-vivido); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
@media (max-width: 560px) {
  .compare-row { font-size: 0.92rem; }
  .compare-row span:first-child { max-width: 20ch; }
}

/* ======================================================
   PRODUCCIONES-GRID — agrandar el header/hero "pgh" (React compilado,
   producciones-grid/assets/produccionesGrid.css). No hay fuente editable
   para ese build; se sobreescribe por especificidad, sin tocar el bundle.
   Es la "primera foto" de la página ("Creamos marcas que se perciben
   diferentes"), casi como si fuera el hero principal del sitio.
   #producciones-grid-root sube la especificidad para ganarle también a la
   propia media query del bundle en mobile (mismo peso .pgh, pero el bundle
   carga después en el <head>).
   ====================================================== */
#producciones-grid-root .pgh {
  aspect-ratio: auto;
  height: clamp(620px, 92vh, 980px);
  min-height: 620px;
  max-height: none;
}
@media (max-width: 760px) {
  #producciones-grid-root .pgh { height: clamp(460px, 72vh, 640px); }
}

/* .wrap--wide — el contenedor del hero+grid de Producciones necesita casi
   tocar los límites de la página (no los 1180px genéricos de .wrap), sin
   tocar la clase base que usan el resto de las secciones del sitio. */
.wrap--wide { max-width: 1680px; }