/* ==========================================================================
   styles.css — Landing Diseño Gráfico en Monclova, The Social Box
   --------------------------------------------------------------------------
   1.  Variables (tokens de marca)
   2.  Base y tipografía
   3.  Utilidades
   4.  Botones
   5.  Header / Navegación (sin menú hamburguesa)
   6.  Hero (6.1 muro de piezas)
   7.  Cifras
   8.  Cómo trabajamos (línea de tiempo de 5 pasos)
   9.  Servicios + carrusel + Portafolio + Comparativa
   12. Lightbox del portafolio
   14. Preguntas frecuentes (FAQ)
   16. Contacto
   17. Footer, cinta, CTA final y páginas secundarias
   18. Animaciones (reveal)
   19. Barra fija de contacto en móvil
   20. Interacciones
   21. Accesibilidad / prefers-reduced-motion
   ========================================================================== */

/* ============ 1. VARIABLES (TOKENS DE MARCA) ============ */
:root {
  /* --- Paleta — The Social Box (extraída de thesocialbox.marketing/css/variables.css) --- */
  --color-ink:        #040404;   /* negro de marca — fondos oscuros */
  --color-ink-rgb:     4, 4, 4;
  --color-ink-soft:    #1a1a1a;  /* superficie elevada (tarjetas sobre fondo oscuro) */
  --color-body:        #d1d1d1;  /* texto sobre fondo oscuro (hero, stats, cta, contacto) */
  --color-text-soft:   #4a4a4a;  /* texto de párrafo sobre fondo claro (cream) */
  --color-cream:       #f7f6f2;  /* fondo de la página — blanco roto, no puro, para que no deslumbre */
  --color-sand:        #f5f5f5;  /* franjas ligeramente diferenciadas sobre el blanco */
  --color-line:        #dddddd;
  --color-white:       #ffffff;

  --color-brand:       #ff0000;  /* rojo de marca — CTAs y acentos */
  --color-brand-rgb:    255, 0, 0;
  --color-brand-dark:  #c40000;  /* hover de CTAs */
  --color-brand-soft:  rgba(255, 0, 0, 0.14);

  /* Fondo del header al hacer scroll: el negro de marca (una barra roja
     sólida sería demasiado intensa para navegación permanente). */
  --color-header-scroll:     var(--color-ink);
  --color-header-scroll-rgb: var(--color-ink-rgb);

  /* --- Tipografía — The Social Box --- */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "Archivo Black", "Helvetica Neue", Arial, sans-serif; /* cifras destacadas (stats) */
  --font-hero:    "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; /* titular del hero, peso 700 */

  /* --- Espaciado --- */
  --space-section: 3rem;
  --container:     1200px;
  --container-narrow: 760px;
  --gutter:        1.5rem;

  /* --- Otros --- */
  --radius:     6px;
  --radius-lg:  6px;
  --radius-full: 999px;
  /* Recuadros con una esquina cortada en diagonal — el estilo de "banner"
     de esta marca en vez de tarjetas muy redondeadas. */
  --cut-corner:    polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  --cut-corner-sm: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  --shadow-sm:  0 2px 10px rgba(4, 4, 4, 0.25);
  --shadow-md:  0 12px 40px rgba(4, 4, 4, 0.35);
  --shadow-lg:  0 24px 70px rgba(4, 4, 4, 0.45);
  --shadow-glow: 0 10px 40px rgba(var(--color-brand-rgb), 0.35); /* como en el sitio real */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --header-h:   84px;
  --mobile-cta-h: 64px; /* alto de la barra CTA fija en móvil */
  --radius-card: 20px;   /* bloques grandes con foto (CTA final) */
  --color-whatsapp: #25d366;
}

/* ============ 2. BASE Y TIPOGRAFÍA ============ */
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-text-soft);
  background-color: var(--color-cream);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

::selection {
  background: var(--color-brand);
  color: var(--color-white);
}

/* ============ 3. UTILIDADES ============ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }
.link { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--color-brand-dark); }

.section {
  position: relative;
  padding-block: var(--space-section);
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section__head {
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  text-align: center;
}

.section__title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
}

.section__lead {
  font-size: 1.0625rem;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 0.9rem;
}

/* Encabezados de sección (eyebrow + título + lead) en cascada al entrar
   en pantalla — mismo patrón que Nosotros, aplicado a cualquier
   .section__head del sitio (requiere que el propio .section__head tenga
   la clase .reveal en el HTML). */
.section__head .eyebrow,
.section__head .section__title,
.section__head .section__lead {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.section__head.is-visible .eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.section__head.is-visible .section__title { opacity: 1; transform: none; transition-delay: 0.15s; }
.section__head.is-visible .section__lead { opacity: 1; transform: none; transition-delay: 0.25s; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Banner translúcido reutilizable (nosotros / servicios / galería) */

/* Banner claro tipo "vidrio esmerilado" (usado sobre marquee de imágenes) */

/* ============ 4. BOTONES ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: var(--radius-full, 999px);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s var(--ease),
              color 0.3s var(--ease),
              border-color 0.3s var(--ease),
              box-shadow 0.3s var(--ease),
              transform 0.3s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background-color: var(--color-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background-color: var(--color-brand-dark); box-shadow: 0 14px 46px rgba(var(--color-brand-rgb), 0.45); }

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}
.btn--ghost:hover {
  background-color: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
}
.btn--block { width: 100%; }

.btn__ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  opacity: 0.6;
  pointer-events: none;
  animation: rippleOut 0.6s var(--ease) forwards;
}
.btn--ghost .btn__ripple {
  background-color: rgba(26, 22, 20, 0.18);
}
@keyframes rippleOut {
  to { transform: scale(1); opacity: 0; }
}

/* ============ 5. HEADER / NAVEGACIÓN ============ */
/* Desktop: transparente sobre el hero; al hacer scroll pasa a un fondo
   sólido (--color-header-scroll). Móvil: sin menú hamburguesa, solo el
   logo; los CTA van en la barra fija de abajo (sección 19). */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  transition: background-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease),
              height 0.4s var(--ease);
}

.site-header.is-scrolled {
  height: 68px;
  background-color: rgba(var(--color-header-scroll-rgb), 0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

/* Variante clara: para secciones con fondo claro detrás del header
   (data-header-theme="light"), el estado "scrolled" usa un fondo crema
   en vez del color de marca, para que el texto oscuro siga legible. */
.site-header.is-scrolled.theme-light {
  background-color: rgba(245, 245, 245, 0.94);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
}

/* Logotipo completo (wordmark "The Social Box" + marca roja), tal cual lo
   entregó el cliente. Un <img> no puede invertir color con currentColor
   como sí podía el wordmark en texto real, así que van DOS versiones
   superpuestas (texto blanco / texto tinta) y el header alterna cuál se
   ve según su propio estado de scroll (mismo patrón que ya usa el resto
   del header para el tema claro/oscuro). */
.logo__mark {
  display: block;
  height: 50px;
  width: auto;
}

.logo__mark--light { display: none; }

.site-header.is-scrolled.theme-light .logo__mark--dark  { display: none; }
.site-header.is-scrolled.theme-light .logo__mark--light { display: block; }

/* Nav (solo visible en escritorio — ver responsive.css) */
.nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  position: relative;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.3s var(--ease);
}

.site-header.is-scrolled.theme-light .nav__link { color: var(--color-ink-soft); }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background-color: var(--color-brand);
  transition: width 0.3s var(--ease);
}

.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

.nav__link:hover,
.nav__link.is-active { color: var(--color-brand); }

.nav__link--cta {
  padding: 0.6rem 1.3rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

/* Botón CTA del header en móvil (visible solo <768px, ver responsive.css) */

/* "Cotizar" en el nav de escritorio: botón rojo sólido, la acción
   principal siempre a la vista. Las redes sociales ya no van en el nav
   (sacaban al visitante de la landing); viven en Contacto. */
.nav__link.nav__link--cta,
.site-header.is-scrolled.theme-light .nav__link--cta {
  font-weight: 600;
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__link.nav__link--cta:hover,
.site-header.is-scrolled.theme-light .nav__link--cta:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
}

/* ============ 6. HERO ============
   Imagen real a pantalla completa con la composición pensada como dos
   bloques separados en vertical: el titular arriba —en la franja de cielo,
   sobre la cabeza del equipo de la foto— y la info de apoyo abajo, en una
   tarjeta "glass" moderna. El hueco entre ambos deja ver a los integrantes
   del equipo en la fotografía de fondo. El titular usa Plus Jakarta Sans
   en 700 (--font-hero). */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--color-ink);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: heroZoom 16s var(--ease) forwards;
}

@keyframes heroZoom {
  to { transform: scale(1); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--color-ink-rgb), 0.8) 0%, rgba(var(--color-ink-rgb), 0.15) 30%, rgba(var(--color-ink-rgb), 0.15) 55%, rgba(var(--color-ink-rgb), 0.75) 100%);
}

.hero__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(var(--header-h) + 1.25rem);
  padding-bottom: clamp(7.5rem, 19vh, 10.5rem); /* deja hueco libre por encima del peek de .stats — no se solapan */
  text-align: center;
  color: var(--color-white);
}

.hero__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 820px;
}

/* Entrada en cascada (mismo patrón que Nosotros): eyebrow, título y
   párrafo de apoyo aparecen uno tras otro, no como bloque único. */
.hero__eyebrow,
.hero__title,
.hero__info {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.hero__layout.is-visible .hero__eyebrow { opacity: 1; transform: none; transition-delay: 0.1s; }
.hero__layout.is-visible .hero__title { opacity: 1; transform: none; transition-delay: 0.25s; }
.hero__layout.is-visible .hero__info { opacity: 1; transform: none; transition-delay: 0.45s; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-brand);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background-color: var(--color-brand);
}

/* Titular centrado, en líneas apiladas, colocado en la franja de cielo de
   la foto de fondo (arriba de la cabeza del equipo). */
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-white);
  text-shadow: 0 2px 24px rgba(var(--color-ink-rgb), 0.35);
}

.hero__title-line { display: block; }

.hero__title-accent {
  color: var(--color-brand);
}

/* Bloque de apoyo (info), separado del titular por el hueco que deja ver
   la foto. Sin marco ni tarjeta sólida: solo un difuminado (blur) del
   fondo para distinguir el párrafo, dejando pasar la imagen detrás. */
.hero__info {
  max-width: 620px;
  margin-top: 2.5rem;
  padding: 1.25rem 2rem;
  border-radius: 20px;
  background: transparent;
}

.hero__text {
  font-size: 1rem;
  color: var(--color-white);
  text-shadow: 0 1px 16px rgba(var(--color-ink-rgb), 0.5);
}

/* ============ 6.1 HERO CON MURO DE PIEZAS (Diseño Gráfico) ============
   En vez de una foto, el fondo es un muro de piezas reales del
   portafolio: 7 columnas inclinadas que suben y bajan alternando sentido
   (4 en móvil). main.js §20 cuadruplica las piezas de cada columna y la
   animación recorre -50% (dos juegos completos), así el ciclo cierra sin
   salto; el aire entre piezas va como margin (no gap) para que ese -50%
   caiga justo en el inicio de un juego. El velo es más denso que en la
   foto del equipo porque aquí el fondo tiene mucho texto propio. El
   titular y el párrafo se agrupan al centro (no arriba/abajo). */
.hero--wall .hero__media {
  background-image: none;
  overflow: hidden;
}

.hero__wall {
  --wall-gap: clamp(10px, 1.1vw, 18px);
  position: absolute;
  inset: -30% -15%;
  display: flex;
  justify-content: center;
  gap: var(--wall-gap);
  transform: rotate(-8deg);
}

.hero__col { flex: 0 0 clamp(150px, 16vw, 300px); }

.hero__col-track img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--wall-gap);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.hero__wall.is-looping .hero__col-track { animation: wallUp 80s linear infinite; }
.hero__wall.is-looping .hero__col:nth-child(even) .hero__col-track { animation-name: wallDown; animation-duration: 95s; }
.hero__wall.is-looping .hero__col:nth-child(3n) .hero__col-track { animation-duration: 70s; }
.hero__wall.is-paused .hero__col-track { animation-play-state: paused; }

@keyframes wallUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes wallDown {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

.hero__wall { filter: saturate(0.85); }

.hero--wall .hero__overlay {
  background:
    radial-gradient(ellipse 65% 60% at 50% 50%, rgba(var(--color-ink-rgb), 0.88) 0%, rgba(var(--color-ink-rgb), 0.72) 55%, rgba(var(--color-ink-rgb), 0.55) 100%),
    linear-gradient(180deg, rgba(var(--color-ink-rgb), 0.85) 0%, rgba(var(--color-ink-rgb), 0) 22%, rgba(var(--color-ink-rgb), 0) 70%, rgba(var(--color-ink-rgb), 0.9) 100%);
}

.hero--wall .hero__layout { justify-content: center; }
.hero--wall .hero__headline { max-width: 1000px; }
.hero--wall .hero__title { font-size: clamp(2.25rem, 5.4vw, 4.5rem); }
.hero--wall .hero__info { margin-top: 1.5rem; padding: 0 1rem; }

/* ============ 7. STATS ============
   Franja compacta con divisores finos — el patrón de stats más usado
   (Tailwind UI / shadcn-ui): sin tarjeta pesada, sombra grande ni esquina
   cortada, solo un borde sutil y poco padding. Sigue flotando sobre el
   borde entre el Hero y Nosotros (margin-top negativo), pero mucho más
   chica. Cada número se revela con un "wipe" de izquierda a derecha +
   una línea roja que crece debajo — no un contador que sube desde 0
   (ver main.js §3). */
.stats {
  position: relative;
  z-index: 2;
  margin-top: -100px;
  pointer-events: none; /* el hueco alrededor de la franja no debe bloquear clics del hero */
  /* Lo que la franja sobresale bajo el hero (poco en escritorio, bastante
     en móvil con la cuadrícula 2×2) va en tinta: las cifras blancas se
     siguen leyendo y la foto de Nosotros empieza sin rendija clara. */
  background: linear-gradient(transparent 100px, var(--color-ink) 100px);
}

.stats__card {
  pointer-events: auto;
  background: rgba(var(--color-ink-rgb), 0.16);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.75rem;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.stat {
  position: relative;
  padding-bottom: 0.6rem;
}

.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15%;
  right: -0.75rem;
  width: 1px;
  height: 55%;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Línea de acento que crece debajo de cada cifra al revelarse — ahora
   cubre la mayor parte del ancho del bloque (antes eran 22px fijos,
   se sentía muy corta) y tarda más en completarse. */
.stat::before {
  content: "";
  position: absolute;
  left: 15%;
  bottom: 0;
  width: 70%;
  height: 2px;
  background-color: var(--color-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 2.2s var(--ease);
}

.stat.is-revealed::before { transform: scaleX(1); }

.stat__num,
.stat__plus {
  font-family: var(--font-accent, var(--font-display));
  font-size: 1.875rem;
  color: var(--color-white);
  line-height: 1;
}

/* La cifra (y el "+") se levantan con un fade al revelarse, en vez del
   wipe anterior — escalonado por apartado para que no suban los 4 a la
   vez. La línea roja de abajo (.stat::before) se expande en paralelo. */
.stat__num,
.stat__plus {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}

.stat:nth-child(2) .stat__num, .stat:nth-child(2) .stat__plus { transition-delay: 0.1s; }
.stat:nth-child(3) .stat__num, .stat:nth-child(3) .stat__plus { transition-delay: 0.2s; }
.stat:nth-child(4) .stat__num, .stat:nth-child(4) .stat__plus { transition-delay: 0.3s; }

.stat.is-revealed .stat__num,
.stat.is-revealed .stat__plus {
  opacity: 1;
  transform: translateY(0);
}

/* Réplica de la animación al pasar el cursor: como el reveal de scroll
   solo ocurre una vez, el hover repite el mismo gesto (número que se
   levanta + línea roja que se expande) cada vez que interactúas. */
@keyframes statNumHover {
  0%, 100% { color: var(--color-white); }
  50% { color: var(--color-brand); }
}

@keyframes statLineHover {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.stat:hover .stat__num {
  animation: statNumHover 1.4s ease-in-out;
}

.stat:hover::before {
  animation: statLineHover 1.4s ease-in-out;
}

.stat__plus {
  font-size: 1.125rem;
  color: var(--color-brand);
  margin-left: 0.15rem;
}

.stat__label {
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ============ 8. NOSOTROS · CÓMO TRABAJAMOS ============
   Sección clara, sin foto. Arriba encabezado + botón; abajo el proceso
   como línea de tiempo interactiva (.journey-wrap, main.js §14):
   - main.js escribe en cada paso --fill (0–1, cuánto está lleno el tramo
     hacia el siguiente) y marca .is-active / .is-current según el scroll;
     en .journey-wrap escribe --pos (posición de la punta del relleno) para la
     chispa (.journey__spark);
   - el paso elegido (hover, clic o el del scroll) lleva .is-selected y
     el panel (.journey-panel) muestra su detalle, con una flecha que
     apunta a él (--sel).
   Sin JS (o con movimiento reducido) todo se ve completo: el atenuado
   solo existe con .journey.is-live. */
/* Más aire arriba, entre las cifras y el encabezado. */
.about { padding-top: clamp(3.5rem, 11svh, 6.5rem); }

/* Encabezado centrado, título y texto en un solo renglón cada uno.
   En móvil vuelven a partirse (responsive.css). */
.about__top { margin-bottom: clamp(2rem, 7svh, 3.75rem); }

.about__head {
  max-width: none;
  margin: 0;
  text-align: center;
}

.about__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  white-space: nowrap;
}

.about__title span { color: var(--color-brand); }

.about__head .section__lead {
  max-width: none;
  margin: 0;
  font-size: 1.125rem;
  white-space: nowrap;
}

/* ---- Línea de tiempo ---- */
.journey-wrap { --pos: 0; position: relative; }

.journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
}

.journey__step {
  --fill: 0;
  position: relative;
  text-align: center;
  transition: opacity 0.5s var(--ease);
}

/* Tramo entre este punto y el siguiente: riel gris (::before) y relleno
   rojo con brillo (::after) que crece con --fill. Va detrás del punto. */
.journey__step:not(:last-child)::before,
.journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 50%;
  width: 100%;
  height: 3px;
  margin-top: -1px;
  border-radius: 3px;
  background-color: var(--color-line);
}

.journey__step:not(:last-child)::after {
  background: linear-gradient(90deg, var(--color-brand-dark), var(--color-brand));
  box-shadow: 0 0 12px rgba(var(--color-brand-rgb), 0.55);
  transform: scaleX(var(--fill));
  transform-origin: left;
  transition: transform 0.25s linear; /* suaviza saltos (rueda del mouse, anclas) */
}

/* Chispa que corre en la punta del relleno (solo en la fila horizontal). */
.journey__spark {
  position: absolute;
  top: 21px;
  left: calc(10% + var(--pos) * 20%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 0 0 0 3px var(--color-brand), 0 0 18px 5px rgba(var(--color-brand-rgb), 0.75);
  opacity: 0;
  pointer-events: none;
  transition: left 0.25s linear, opacity 0.3s var(--ease);
}

.journey__spark.is-on { opacity: 1; }

.journey__btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 0.5rem 0.5rem;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.journey__btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }

.journey__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border: 2px solid var(--color-line);
  border-radius: 50%;
  background-color: var(--color-cream);
  color: var(--color-text-soft);
  font-family: var(--font-accent);
  font-size: 1.05rem;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

/* Onda que late alrededor del paso en el que va el scroll. */
.journey__dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--color-brand);
  opacity: 0;
  pointer-events: none;
}

.journey__step.is-current .journey__dot::after { animation: journeyPulse 1.8s var(--ease) infinite; }

@keyframes journeyPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.journey__btn:hover .journey__dot { transform: translateY(-5px); }

.journey__title {
  display: block;
  margin-bottom: 0.25rem;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color 0.3s var(--ease);
}

.journey__get {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-soft);
}

/* El detalle de cada paso vive en el panel en escritorio; en móvil se
   despliega dentro del propio paso (responsive.css). */
.journey__desc { display: none; }

/* Con JS: los pasos a los que aún no llega la línea se ven apagados
   (se asoman un poco al pasarles el cursor). */
.journey.is-live .journey__step { opacity: 0.4; }
.journey.is-live .journey__step:hover { opacity: 0.75; }

.journey.is-live .journey__step.is-active,
.journey.is-live .journey__step.is-selected,
.journey__step.is-active { opacity: 1; }

.journey__step.is-active .journey__dot {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  color: var(--color-white);
  box-shadow: 0 0 0 6px rgba(var(--color-brand-rgb), 0.12), var(--shadow-glow);
}

/* Paso elegido: título en rojo y punto un poco más grande. */
.journey__step.is-selected .journey__title { color: var(--color-brand); }
.journey__step.is-selected .journey__dot { transform: scale(1.14); }
.journey__step.is-selected .journey__btn:hover .journey__dot { transform: translateY(-5px) scale(1.14); }

/* ---- Panel con el detalle del paso elegido ----
   Lleva de fondo una foto de lo que se hace en ese paso
   (.journey-panel__media, una <img> por paso; main.js §14 enciende la
   del paso elegido con .is-on → fundido + leve acercamiento). Foto
   centrada y velo simétrico: más oscuro en las orillas (donde van el
   texto y las flechas) y más claro al centro, donde queda el motivo de
   la foto. */
.journey-panel {
  --sel: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: clamp(120px, 19svh, 175px);
  margin-top: clamp(1.25rem, 3.5svh, 2rem);
  padding: 1.25rem 1.5rem 1.25rem 2rem;
  border-radius: 20px;
  background-color: var(--color-ink);
  color: var(--color-white);
  box-shadow: 0 18px 44px rgba(var(--color-ink-rgb), 0.22);
}

/* Flecha que apunta al paso elegido. */
.journey-panel::before {
  content: "";
  position: absolute;
  top: -9px;
  left: calc(10% + var(--sel) * 20%);
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background-color: var(--color-ink);
  transform: rotate(45deg);
  transition: left 0.45s var(--ease);
}

.journey-panel__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.journey-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.08);
  transform-origin: center;
  transition: opacity 0.6s var(--ease), transform 1.4s var(--ease);
}

.journey-panel__img.is-on {
  opacity: 1;
  transform: scale(1);
}

/* Platicamos: el panel es ancho y bajo; se sube el encuadre para que
   entren las caras de las dos personas. */
.journey-panel__img:nth-child(1) { object-position: 50% 35%; }

.journey-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--color-ink-rgb), 0.85) 0%,
    rgba(var(--color-ink-rgb), 0.5) 30%,
    rgba(var(--color-ink-rgb), 0.35) 50%,
    rgba(var(--color-ink-rgb), 0.5) 70%,
    rgba(var(--color-ink-rgb), 0.85) 100%);
}

.journey-panel__body,
.journey-panel__nav { position: relative; z-index: 1; }

.journey-panel__body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.journey-panel.is-swapping .journey-panel__body { opacity: 0; transform: translateY(8px); }

.journey-panel__num {
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-size: 3.25rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-brand);
}

.journey-panel__text { min-width: 0; }

.journey-panel__title {
  margin-bottom: 0.25rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}

.journey-panel__desc {
  max-width: 44ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Lo que recibe el cliente se lee bajo cada paso de la línea, no aquí. */
.journey-panel__nav {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.journey-panel__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background-color: rgba(var(--color-ink-rgb), 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

.journey-panel__arrow svg { width: 18px; height: 18px; }

.journey-panel__arrow:hover {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  color: var(--color-white);
  transform: scale(1.06);
}

.journey-panel__arrow:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

.journey-panel__arrow:disabled { opacity: 0.35; pointer-events: none; }

/* Miniatura del paso: solo en móvil, dentro del paso desplegado
   (responsive.css). En escritorio la foto va en el panel. */
.journey__thumb { display: none; }

/* ---- Recuadro con foto de fondo (reutilizable) ----
   Recuadro redondeado del ancho del contenido con una foto de fondo
   (.photo-frame__bg), nítida, y un velo LIGERO de tinta (::before) solo
   para leer lo que va encima. Se usa en "Por qué elegirnos" (§9.6). */
.photo-frame {
  position: relative;
  padding: clamp(1.75rem, 6svh, 3.75rem) clamp(1.5rem, 5vw, 3.75rem);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-ink);
  box-shadow: var(--shadow-lg);
}

.photo-frame__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--color-ink-rgb), 0.6) 0%, rgba(var(--color-ink-rgb), 0.35) 45%, rgba(var(--color-ink-rgb), 0.45) 100%);
}

.photo-frame .eyebrow,
.photo-frame .section__title,
.photo-frame .section__lead {
  color: var(--color-white);
  text-shadow: 0 2px 16px rgba(var(--color-ink-rgb), 0.55);
}

/* Variante de features sobre fondo oscuro (si se usa fuera de Nosotros) */

/* Variante de features sobre fondo claro (landings informativas sin banner oscuro) */

/* ============ 9. SERVICIOS ============ */
/* Carrusel de tarjetas grandes con la foto de cada servicio de fondo —
   ver main.js §13 para el control. Sección más alta que el resto a
   propósito: es uno de los bloques centrales de la landing. */
.services {
  padding-block: clamp(2.75rem, 7vh, 5rem);
}

.services .section__head { margin-bottom: 1.5rem; }
.services .section__title { font-size: clamp(1.625rem, 3vw, 2.375rem); }
.services .section__lead { font-size: 1.0625rem; }

/* ============ 9.1 CARRUSEL (lo usa el Portafolio) ============
   Contenedor con scroll horizontal nativo + scroll-snap (funciona con
   swipe/touchpad/arrastre con mouse sin JS) y flechas/puntos que lo
   controlan por encima (main.js §13). Autoplay con pausa al interactuar
   y reanudación automática tras un rato de inactividad. */
.services-carousel {
  /* Ancho de la tarjeta centrada, en % del viewport del carrusel (cqw).
     Lo que sobra se reparte entre las dos vecinas que asoman. */
  --slide-w: 43cqw;
  position: relative;
  margin-top: 1.5rem;
}

.services-carousel__viewport {
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* El arrastre con mouse no debe seleccionar el texto de las tarjetas
     ni permitir "soltar" la foto como si fuera un archivo arrastrado. */
  user-select: none;
  -webkit-user-select: none;
  /* Las tarjetas que asoman a medio camino en el borde se difuminan en
     vez de cortarse en seco — mismo recurso que el marquee alternativo
     de esta sección (ver §9 más abajo, .services__row). */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.services-carousel__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.services-carousel__viewport::-webkit-scrollbar { display: none; }

.services-carousel__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding-block: 0.35rem;
  /* Deja centrar también la primera y la última tarjeta. */
  padding-inline: calc((100cqw - var(--slide-w)) / 2);
}

/* Glass, en vez de círculo negro opaco: deja pasar algo de la foto y
   combina con el resto del lenguaje "glass" del sitio (íconos, badges).
   Ocultas hasta hacer hover/foco en el carrusel en desktop — en táctil
   (sin hover real) se quedan siempre visibles. */
.services-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(4, 4, 4, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

.services-carousel__arrow:hover,
.services-carousel__arrow:focus-visible {
  background-color: var(--color-brand);
  border-color: var(--color-brand);
}

.services-carousel__arrow svg { width: 20px; height: 20px; }
.services-carousel__arrow--prev { left: 0.5rem; }
.services-carousel__arrow--next { right: 0.5rem; }

@media (hover: hover) {
  .services-carousel__arrow { opacity: 0; }
  .services-carousel:hover .services-carousel__arrow,
  .services-carousel:focus-within .services-carousel__arrow { opacity: 1; }
}

.services-carousel__dots {
  position: relative; /* referencia para .services-carousel__worm */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 1.25rem;
}

.services-carousel__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(4, 4, 4, 0.16);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}

/* Área de toque más grande que el punto visible (10px es poco en móvil). */
.services-carousel__dot::before {
  content: "";
  position: absolute;
  inset: -8px -5px;
}

.services-carousel__dot:hover { background-color: rgba(4, 4, 4, 0.35); }

/* "Gusano": una sola píldora roja que viaja entre los puntos. main.js
   §13 primero la estira desde el punto actual hasta el destino (left +
   width) y luego la encoge sobre el destino — la transición de ambas
   propiedades hace el efecto elástico. */
.services-carousel__worm {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 10px;
  background-color: var(--color-brand);
  box-shadow: 0 3px 10px rgba(var(--color-brand-rgb), 0.35);
  pointer-events: none;
  transition: left 0.32s var(--ease), width 0.32s var(--ease);
}

/* Tarjetas grandes con la foto real de cada servicio de fondo (banco/
   licencia en BRAND-BRIEF.md §7) + degradado para legibilidad — más
   grandes que la versión "cápsula" anterior, ahora la sección es uno
   de los bloques centrales de la página en vez de una franja chica. */
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(4, 4, 4, 0.18);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Varias tarjetas visibles a la vez en escritorio, pero notablemente
   más grandes/altas que antes. */
.services-carousel__slide {
  flex: 0 0 auto;
  width: var(--slide-w);
  min-height: clamp(340px, 34vw, 430px);
  scroll-snap-align: center;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), box-shadow 0.4s var(--ease);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

/* Vecinas que asoman: más chicas y atenuadas, para que la tarjeta
   centrada (.is-current, main.js §13) sea claramente la protagonista.
   Clic en una vecina la trae al centro. */
.services-carousel__slide:not(.is-current) {
  opacity: 0.7;
  transform: scale(0.92);
  cursor: pointer;
}

/* Se encogen hacia la tarjeta central, no hacia su propio centro, para
   no abrir un hueco de más entre ellas. */
.services-carousel__slide.is-current + .services-carousel__slide { transform-origin: left center; }
.services-carousel__slide:has(+ .is-current) { transform-origin: right center; }

.service-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Punto de enfoque por tarjeta (style="--focus: …" en index.html), para
     que el sujeto de cada foto quede visible al recortarla. */
  object-position: var(--focus, center);
  transform: scale(1.02);
  transform-origin: var(--focus, center);
  transition: transform 0.8s var(--ease);
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.service-card:hover .service-card__bg { transform: scale(1.08); }

/* Oscurece solo la franja de abajo, donde va el texto: la mitad de arriba
   deja la foto casi limpia para que se distinga el concepto. */
.service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(4, 4, 4, 0.92) 0%, rgba(4, 4, 4, 0.7) 26%, rgba(4, 4, 4, 0.15) 55%, rgba(4, 4, 4, 0) 75%);
}

.service-card__info {
  position: relative;
  z-index: 2;
}

.service-card__title {
  position: relative;
  display: inline-block;
  font-weight: 800;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--color-white);
  margin-bottom: 0.35rem;
  padding-bottom: 0.4rem;
}

.service-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--color-brand);
  transition: width 0.35s var(--ease);
}

.service-card:hover .service-card__title::after { width: 100%; }

.service-card__text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
}

/* ---- 9.1.1 Detalle de cada servicio (Diseño Gráfico) ----
   Número grande en contorno arriba a la izquierda y, bajo el texto,
   etiquetas "vidrio" con los tipos de pieza. Con más texto que en la
   versión original, el velo sube un poco más para que todo se lea. */
.services .service-card__overlay {
  background: linear-gradient(to top, rgba(4, 4, 4, 0.94) 0%, rgba(4, 4, 4, 0.8) 32%, rgba(4, 4, 4, 0.25) 60%, rgba(4, 4, 4, 0) 80%);
}

.service-card__num {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1.4rem, 2.4vw, 2rem);
  z-index: 2;
  font-family: var(--font-accent, var(--font-display));
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.75);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: color 0.4s var(--ease), -webkit-text-stroke-color 0.4s var(--ease);
}

.service-card:hover .service-card__num,
.services-carousel__slide.is-current .service-card__num {
  color: var(--color-brand);
  -webkit-text-stroke-color: var(--color-brand);
}

.services .service-card__text { max-width: 38ch; }

.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

/* ---- 9.1.2 Servicios en cuadrícula 3×2 ----
   Primera celda: encabezado en tarjeta oscura con resplandor rojo (mismo
   escenario que el Portafolio). Resto: una tarjeta por servicio a sangre.
   Alturas por fila desde el ancho, con tope, para que las 6 celdas
   midan igual. Entran escalonadas (reveal) y al pasar el cursor la
   tarjeta sube, la foto hace zoom, el número se enciende en rojo y el
   título se subraya (estilos de .service-card de arriba). */
/* Cabe en una pantalla: al llegar con #servicios
   el alto de las dos filas sale del alto de la ventana (100svh menos lo
   que deja libre scroll-padding-top y los paddings), no del ancho. */
.services--grid {
  --svc-top: 90px; /* = scroll-padding-top de reset.css */
  --svc-pad: clamp(0.5rem, 1.6svh, 1.25rem);
  padding-block: var(--svc-pad);
  /* Aire respecto a la tarjeta de cifras: va por
     fuera de la sección, así que no cambia lo que se ve al llegar con
     #servicios. */
  margin-top: clamp(1.75rem, 5svh, 3.25rem);
}

/* Algo más ancha que el contenedor general (1200px) para que las
   tarjetas ganen tamaño en pantallas grandes. */
.services--grid > .container { max-width: 1320px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(420px, calc(100svh - var(--svc-top) - 2 * var(--svc-pad)), 900px);
  gap: clamp(0.75rem, 1.2vw, 1.1rem);
}

/* Textos un poco más grandes que en el carrusel original. */
.service-tile .service-card__title { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); }
.services .service-tile .service-card__text { font-size: clamp(0.875rem, 1vw, 1rem); max-width: 42ch; }

.services-grid__tiles { display: contents; }

.services-grid__intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 90% 70% at 15% 110%, rgba(var(--color-brand-rgb), 0.35), transparent 65%),
    var(--color-ink);
  box-shadow: 0 10px 30px rgba(4, 4, 4, 0.18);
}

/* "Aa" gigante en contorno al fondo (muestra tipográfica: guiño a diseño
   sin confundirse con el número de un servicio). */
.services-grid__intro::before {
  content: "Aa";
  position: absolute;
  top: -0.18em;
  right: 0.02em;
  z-index: -1;
  font-family: var(--font-accent, var(--font-display));
  font-size: clamp(9rem, 15vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.1);
}

.services-grid__intro .eyebrow { margin-bottom: 0.75rem; }

.services-grid__intro .section__title {
  font-size: clamp(1.625rem, 2.5vw, 2.5rem);
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: 0.9rem;
}

.services-grid__lead {
  margin: 0;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.services-grid__meta {
  display: flex;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* "Toca un servicio…": solo en móvil, donde las tarjetas van en
   mosaico (responsive.css, main.js §13.5). */
.services-grid__hint {
  display: none;
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-brand);
}

/* La × de cada tarjeta (main.js §13.5) solo existe en el mosaico móvil. */
.service-card__close { display: none; }

/* Texto y etiquetas de la tarjeta abierta del mosaico (móvil). */
@keyframes svc-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .services-grid__tiles .service-tile { animation: none !important; transition: none !important; }
  .services-grid__tiles .service-tile * { animation: none !important; }
}

.services-grid__meta span + span::before {
  content: "·";
  margin-right: 0.6rem;
  color: var(--color-brand);
}

.service-tile { min-height: 0; }

/* En la cuadrícula el número va en una pastilla de vidrio oscuro: sobre
   las composiciones de piezas, el contorno solo se perdía. */
.service-tile .service-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2rem;
  padding-inline: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  background-color: rgba(4, 4, 4, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.875rem;
  color: var(--color-white);
  -webkit-text-stroke: 0;
  text-shadow: none;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.service-tile:hover .service-card__num {
  color: var(--color-white);
  border-color: var(--color-brand);
  background-color: var(--color-brand);
}

/* Entrada escalonada: la celda de encabezado primero y luego cada
   tarjeta, en orden de lectura. */
.services-grid__tiles > .reveal.is-visible:nth-child(1) { transition-delay: 0.08s; }
.services-grid__tiles > .reveal.is-visible:nth-child(2) { transition-delay: 0.16s; }
.services-grid__tiles > .reveal.is-visible:nth-child(3) { transition-delay: 0.24s; }
.services-grid__tiles > .reveal.is-visible:nth-child(4) { transition-delay: 0.32s; }
.services-grid__tiles > .reveal.is-visible:nth-child(5) { transition-delay: 0.4s; }

/* .reveal.is-visible (más abajo en el archivo) anula el "subir" del
   hover de .service-card; aquí se recupera, sin el retraso de entrada.
   Solo con mouse: en el táctil el hover se queda pegado tras tocar. */
@media (hover: hover) {
  .services-grid__tiles > .service-tile.reveal.is-visible:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    transition-delay: 0s;
  }
}

/* La foto se ve casi limpia arriba y el texto abajo; el texto de apoyo
   y las etiquetas asoman más al pasar el cursor. */
.service-tile .service-card__text { color: rgba(255, 255, 255, 0.78); }
.service-tile:hover .service-card__tags li { border-color: rgba(255, 255, 255, 0.5); }

.service-card__tags li {
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-white);
}

/* ============ 9.2 PORTAFOLIO ============
   Reusa el carrusel de §9.1 con tarjetas más anchas. Cada tarjeta es
   un "escenario" oscuro (#1a1a1a, el mismo gris sobre el que se
   aplanaron los mockups JPEG, para que no se note el borde de la foto)
   + pie con nombre, giro, pestañas y enlace al sitio en vivo. Las vistas
   se cruzan con fade + leve subida al cambiar de pestaña (main.js §13.1). */
/* REGLA TSB (permanente, todos los proyectos): la sección de Proyectos
   cabe en una sola pantalla —encabezado, tarjeta completa con su pie y
   puntos— en escritorio y en móvil. El tamaño de la tarjeta sale del
   ALTO de la ventana: --stage-h es lo que queda de 100svh tras restar el
   header y --projects-chrome (padding de la sección, encabezado, pie de
   la tarjeta y puntos). El ancho sale de ese alto con la proporción del
   escenario (16:10), pero nunca baja de --slide-min: en pantallas
   anchas y bajas la tarjeta se queda ancha y el escenario simplemente
   es más apaisado (el mockup se centra), en vez de encoger la tarjeta
   hasta que su pie se parta en varios renglones. Medido en 1280×720,
   1366×768, 1440×900 y 1920×1080. Si cambias el encabezado o el pie de
   la tarjeta, reajusta --projects-chrome. */
.projects { padding-block: clamp(1.25rem, 4svh, 3rem); }
.projects .section__head { max-width: 860px; margin-bottom: 0.75rem; }
.projects .section__title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); margin-bottom: 0.4rem; }
.projects .section__lead { font-size: 1rem; }

.services-carousel--projects {
  --projects-chrome: 20.75rem;
  --stage-ratio: 1.6;
  --slide-min: 33rem;
  --stage-h: clamp(150px, calc(100svh - var(--header-h) - var(--projects-chrome)), 460px);
  --slide-w: min(58cqw, max(var(--slide-min), calc(var(--stage-h) * var(--stage-ratio))));
  margin-top: 0;
}

.services-carousel--projects .services-carousel__slide { min-height: 0; }
.services-carousel--projects .project-card__stage {
  aspect-ratio: auto;
  height: min(var(--stage-h), calc(var(--slide-w) / var(--stage-ratio)));
}
.services-carousel--projects .services-carousel__dots { margin-top: 0.75rem; }

.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background-color: var(--color-ink);
  box-shadow: 0 10px 30px rgba(4, 4, 4, 0.18);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.project-card:hover { box-shadow: var(--shadow-md); }

.project-card__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-ink-soft);
}

.project-card__view {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 4% 6% 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.45s;
}

.project-card__view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.project-card__view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Página interna: ventana de navegador que sube desde abajo y se corta
   con el borde del escenario (se entiende que la página sigue). */

.project-card__info {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta  link"
    "title link"
    "tabs  tabs";
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 0.9rem 1.4rem 1rem;
}

.project-card__meta {
  grid-area: meta;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.project-card__title {
  grid-area: title;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-white);
}

.project-card__tabs {
  grid-area: tabs;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.project-card__tab {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.project-card__tab:hover,
.project-card__tab:focus-visible {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}

.project-card__tab.is-active {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  color: var(--color-white);
}

.project-card__link {
  grid-area: link;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease);
}

.project-card__link:hover,
.project-card__link:focus-visible { background-color: var(--color-brand); }

.project-card__link svg { width: 14px; height: 14px; }

/* ---- 9.2.1 Vistas del portafolio de diseño ----
   "Ver en grande" es un <button> (abre el lightbox, main.js §13.2): se
   le quitan los estilos nativos para que se vea igual que el enlace. */
button.project-card__link {
  border: 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* Pestañas siempre en UN renglón (--projects-chrome cuenta con uno solo):
   un poco más chicas porque hay tarjetas con 5 pestañas; si aun así no
   caben, se desplazan de lado en vez de partir. */
.projects .project-card__tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.projects .project-card__tabs::-webkit-scrollbar { display: none; }
.projects .project-card__tab { flex-shrink: 0; padding: 0.35rem 0.75rem; font-size: 0.75rem; }

/* Escenario con un leve resplandor rojo desde abajo: da profundidad a
   las piezas sin competir con ellas. */
.projects .project-card__stage {
  background:
    radial-gradient(ellipse 70% 60% at 50% 115%, rgba(var(--color-brand-rgb), 0.2), transparent 70%),
    var(--color-ink-soft);
}

/* 2-3 piezas en abanico: la del centro al frente; con 3, las laterales
   más chicas, giradas y detrás. Se abren un poco más al pasar el cursor
   por la tarjeta. Alturas en % del escenario (lo define el alto de la
   ventana, regla TSB) y ancho automático según cada pieza. */
.project-card__view--set {
  align-items: center;
  justify-content: center;
  padding: 4.5% 4%;
}

.project-card__view--set img {
  position: relative;
  flex-shrink: 0;
  width: auto;
  height: 90%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  transition: transform 0.6s var(--ease);
}

/* Dos piezas */
.project-card__view--set img:first-child:nth-last-child(2) { transform: rotate(-3deg) translateX(5%); }
.project-card__view--set img:last-child:nth-child(2)       { z-index: 1; transform: rotate(3deg) translateX(-5%); }
.project-card:hover .project-card__view--set img:first-child:nth-last-child(2) { transform: rotate(-5deg) translateX(2%); }
.project-card:hover .project-card__view--set img:last-child:nth-child(2)       { transform: rotate(5deg) translateX(-2%); }

/* Tres piezas */
.project-card__view--set img:nth-child(2):nth-last-child(2) { z-index: 1; }
.project-card__view--set img:first-child:nth-last-child(3),
.project-card__view--set img:last-child:nth-child(3) { height: 74%; }
.project-card__view--set img:first-child:nth-last-child(3) { transform: rotate(-7deg) translateX(20%); }
.project-card__view--set img:last-child:nth-child(3)       { transform: rotate(7deg) translateX(-20%); }
.project-card:hover .project-card__view--set img:first-child:nth-last-child(3) { transform: rotate(-9deg) translateX(14%); }
.project-card:hover .project-card__view--set img:last-child:nth-child(3)       { transform: rotate(9deg) translateX(-14%); }

/* Mockups a sangre (tarjeta Branding): la foto llena el escenario. */
.project-card__view--photo { padding: 0; }
.project-card__view--photo img {
  object-fit: cover;
  object-position: var(--focus, center);
}

@media (prefers-reduced-motion: reduce) {
  .project-card__view--set img { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card__view { transition: none; transform: none; }
}

/* ============ 9.6 COMPARATIVA (sin caja, dos columnas flotando) ============
   Nada de panel/tarjeta: solo tipografía sobre el fondo de la sección,
   con una línea roja delgada dividiendo las dos columnas. El contraste
   lo da la tipografía (gris apagado vs. negro) y el color del ✓, no un
   fondo ni un borde. */
/* Sección más grande que el resto (más padding vertical) y de vuelta a
   un formato de "cuadro": fondo blanco, borde rojo y esquinas
   redondeadas alrededor de las dos columnas. */
/* REGLA TSB (permanente): igual que Proyectos y Contacto, la sección cabe
   en una sola pantalla al llegar con #comparativa. Los espacios verticales
   (padding, márgenes, separación entre renglones) salen del alto de la
   ventana con svh, así el cuadro se compacta en pantallas bajas y respira
   en las altas. En móvil, además, se ve una columna a la vez (pestañas
   .comparison-switch, ver responsive.css). Medido en 1280×720, 1366×768,
   1440×900, 1920×1080, 390×844 y 375×667. */
.comparison {
  padding-block: clamp(1.25rem, 4svh, 3rem);
}

.comparison .section__head { max-width: 860px; margin-bottom: 0; }
.comparison .section__title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); margin-bottom: 0.4rem; }
.comparison .section__lead { font-size: 1rem; }

/* Recuadro con la foto del equipo de fondo (§8, .photo-frame). Relleno
   más justo que el genérico y sacado del alto de ventana, para que la
   sección siga cabiendo en una pantalla (regla TSB de arriba). */
.photo-frame--comparison {
  padding: clamp(1rem, 3.5svh, 2.5rem) clamp(1rem, 4vw, 3rem);
}

/* Cuadro de columnas en "vidrio": sin
   fondo blanco, tinta translúcida + desenfoque para que se adivine la
   foto detrás, y texto claro para que se lea. */
.photo-frame--comparison .comparison-columns {
  border-color: rgba(255, 255, 255, 0.28);
  background-color: rgba(var(--color-ink-rgb), 0.32);
  backdrop-filter: blur(5px) saturate(1.1);
  -webkit-backdrop-filter: blur(5px) saturate(1.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.photo-frame--comparison .comparison-columns::before {
  background: radial-gradient(320px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.1), transparent 70%);
}

.photo-frame--comparison .comparison-columns__label { color: rgba(255, 255, 255, 0.7); }
.photo-frame--comparison .comparison-columns__col--highlight .comparison-columns__label { color: #ff4d4d; }

/* Con el vidrio más claro, una sombra suave mantiene el texto legible. */
.photo-frame--comparison .comparison-columns__label,
.photo-frame--comparison .comparison-columns__list li { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65); }

.photo-frame--comparison .comparison-columns__list li { color: rgba(255, 255, 255, 0.85); }
.photo-frame--comparison .comparison-columns__col--highlight .comparison-columns__list li { color: var(--color-white); }

.photo-frame--comparison .comparison-columns__list li:hover,
.photo-frame--comparison .comparison-columns__col--highlight .comparison-columns__list li:hover { background-color: rgba(255, 255, 255, 0.08); }

.photo-frame--comparison .comparison-columns__icon--no {
  background-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
}

.photo-frame--comparison .comparison-columns__icon--yes {
  background-color: var(--color-brand);
  color: var(--color-white);
}

.photo-frame--comparison .comparison-columns__divider { background-color: rgba(255, 255, 255, 0.25); }

/* Pestañas: solo existen en móvil (responsive.css las muestra). */
.comparison-switch { display: none; }

.comparison-columns {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(1rem, 2.5svh, 2rem);
  padding: clamp(1.25rem, 3.5svh, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  border: 2px solid var(--color-brand);
  border-radius: 20px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
}

/* Spotlight que sigue el cursor: --spot-x/--spot-y los actualiza main.js
   §12 en cada mousemove. Solo desktop con hover real (no en táctil, que
   no tiene cursor que seguir) y respeta reduced-motion. */
.comparison-columns::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(320px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--color-brand-rgb), 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}

@media (hover: hover) {
  .comparison-columns:hover::before { opacity: 1; }
}

.comparison-columns__col,
.comparison-columns__divider { position: relative; z-index: 1; }

/* La línea "crece" de arriba hacia abajo después de que las columnas ya
   revelaron, en vez de aparecer de golpe. */
.comparison-columns__divider {
  width: 1px;
  background-color: rgba(var(--color-brand-rgb), 0.35);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.7s var(--ease) 0.5s;
}

.comparison-columns.is-visible .comparison-columns__divider { transform: scaleY(1); }

.comparison-columns__label {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: clamp(0.5rem, 1.6svh, 1.5rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.comparison-columns.is-visible .comparison-columns__label { opacity: 1; transform: none; }

.comparison-columns__col--highlight .comparison-columns__label { color: var(--color-brand); }

.comparison-columns__list {
  list-style: none;
  display: grid;
  gap: clamp(0.1rem, 0.7svh, 0.5rem);
}

.comparison-columns__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(0.3rem, 0.9svh, 0.55rem) 0.6rem;
  margin-inline: -0.6rem;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-text-soft);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background-color 0.3s var(--ease);
}

.comparison-columns.is-visible .comparison-columns__list li { opacity: 1; transform: none; }

.comparison-columns.is-visible .comparison-columns__list li:nth-child(1) { transition-delay: 0.1s; }
.comparison-columns.is-visible .comparison-columns__list li:nth-child(2) { transition-delay: 0.2s; }
.comparison-columns.is-visible .comparison-columns__list li:nth-child(3) { transition-delay: 0.3s; }
.comparison-columns.is-visible .comparison-columns__list li:nth-child(4) { transition-delay: 0.4s; }

.comparison-columns__list li:hover { background-color: rgba(4, 4, 4, 0.04); }

.comparison-columns__col--highlight .comparison-columns__list li {
  color: var(--color-ink);
  font-weight: 500;
}

.comparison-columns__col--highlight .comparison-columns__list li:hover { background-color: rgba(var(--color-brand-rgb), 0.06); }

.comparison-columns__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  border-radius: 50%;
  transition: transform 0.3s var(--ease);
}

.comparison-columns__list li:hover .comparison-columns__icon { transform: scale(1.2); }

.comparison-columns__icon svg { width: 13px; height: 13px; }

.comparison-columns__icon--no {
  background-color: rgba(4, 4, 4, 0.06);
  color: var(--color-text-soft);
}

.comparison-columns__icon--yes {
  background-color: rgba(var(--color-brand-rgb), 0.16);
  color: var(--color-brand);
}

/* Marquee de imágenes (opcional) — úsalo cuando la marca sí tenga portafolio
   visual amplio (fotografía, eventos, moda, etc). Requiere duplicar la
   lista de figuras para el loop continuo, ver index.html. */
.services {
  position: relative;
  overflow: hidden;
}

@keyframes services-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}




/* ============ 12. LIGHTBOX DEL PORTAFOLIO ============ */

/* Lightbox */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem 1.5rem;
  background-color: rgba(var(--color-ink-rgb), 0.94);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(84vw, 1100px);
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.lightbox.is-open .lightbox__img { opacity: 1; transform: scale(1); }

.lightbox__figure figcaption {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-white);
  text-align: center;
}

.lightbox__close,
.lightbox__nav {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  transition: background-color 0.3s var(--ease), transform 0.2s var(--ease);
}

.lightbox__nav { width: 48px; height: 48px; font-size: 1.5rem; }

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
}

.lightbox__close:hover,
.lightbox__nav:hover { background-color: var(--color-brand); }

/* ============ 14. PREGUNTAS FRECUENTES (FAQ) ============ */
/* Usa <details>/<summary> nativos: accesible, sin JS y bueno para SEO
   (además del bloque JSON-LD FAQPage que va en el <head>, ver index.html). */
.faq__list {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}

.faq {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--color-brand);
  transition: transform 0.3s var(--ease);
}

.faq[open] summary::after { transform: rotate(45deg); }

.faq__body {
  padding: 0 1.4rem 1.25rem;
  font-size: 0.9375rem;
}

/* Sección FAQ: encabezado a la izquierda (fijo mientras se lee) y
   preguntas a la derecha en escritorio; apilado y centrado en móvil. */
.faq-section { padding-block: clamp(3rem, 9svh, 5.5rem); }

.faq-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.faq-section__head {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  max-width: none;
  margin: 0;
  text-align: left;
}

.faq-section .section__title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
.faq-section .section__lead { font-size: 1rem; }
.faq-section .faq__list { max-width: none; margin: 0; }
.faq-section .faq summary { font-weight: 700; }
.faq-section .faq { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.faq-section .faq[open] { border-color: rgba(var(--color-brand-rgb), 0.45); box-shadow: 0 10px 30px rgba(4, 4, 4, 0.06); }

/* ============ 16. CONTACTO ============
   Sin formulario: mapa real de Google Maps a la izquierda, y a la
   derecha los 5 canales como renglones horizontales que se expanden
   con el cursor. Colapsados por defecto (ícono + nombre en horizontal,
   no vertical); al hover, el renglón crece, se pinta con una vista
   ilustrativa de a dónde manda (chat de WhatsApp, marcando, bandeja de
   correo, grilla de Instagram, tarjeta de Facebook) y los demás se
   comprimen. Cada uno es un <a> real que abre la app correspondiente.
   El mapa vive en su propia columna (no es otro renglón del acordeón)
   porque un <iframe> no puede ir dentro de un <a> — contenido
   interactivo anidado, inválido en HTML. */
/* Toda la sección cabe en una pantalla: al llegar con #contacto (que
   deja --header-h libre arriba por scroll-padding) se ven encabezado,
   mapa y canales completos sin tener que seguir bajando. La altura del
   bloque mapa + canales se deriva del alto de la ventana. */
.contact {
  --contact-head: 12rem; /* encabezado de sección + paddings (+ aire extra) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1.25rem, 3vh, 2.25rem);
}

/* Más ancho que el resto de secciones para que el mapa gane a los lados
   (no hacia arriba). */
.contact > .container { max-width: 1280px; }

.contact .section__head { margin-bottom: 0; }

.contact .section__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 0.35rem;
}

.contact .section__lead { font-size: 0.9375rem; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.95fr;
  grid-template-areas: "map form panels";
  gap: 1.1rem;
  margin-top: 1.25rem;
  height: clamp(320px, calc(100svh - var(--header-h) - var(--contact-head)), 480px);
}

/* ===== Mapa (izquierda) ===== */
.contact-map {
  grid-area: map;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--color-line);
  background-color: var(--color-white);
}

.contact-map__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.5rem;
}

.contact-map__icon { flex-shrink: 0; width: 26px; height: 26px; color: var(--color-brand); }
.contact-map__icon svg { width: 100%; height: 100%; }

.contact-map__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.contact-map__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); }
.contact-map__value { font-size: 0.9375rem; color: var(--color-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.contact-map__link {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-brand);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.contact-map__link svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.contact-map__link:hover { color: var(--color-brand-dark); }
.contact-map__link:hover svg { transform: translateX(3px); }

/* Recorte de la tarjeta flotante de Google: el iframe mide
   --map-crop de más y se sube esa misma cantidad. El pin queda
   --map-crop/2 arriba del centro visible, que se ve natural. */
.contact-map__frame {
  --map-crop: 150px;
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}

.contact-map__embed {
  position: absolute;
  top: calc(var(--map-crop) * -1);
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% + var(--map-crop));
  border: 0;
  filter: grayscale(0.15);
}

/* ===== Formulario (centro) ===== */
.contact-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 22px;
  border: 1px solid var(--color-line);
  background-color: var(--color-white);
  overflow: hidden;
}

/* Solo en móvil (responsive.css): pliega/despliega el formulario. */
.contact-form__toggle { display: none; }

.contact-form__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  padding: 1.1rem 1.35rem 1rem;
}

.contact-form__head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.15rem; }
.contact-form__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.contact-form__title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-ink);
}

.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* Trampa para bots de Web3Forms: fuera de vista, sin afectar el layout. */
.contact-form__honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field--grow { flex: 1; min-height: 0; }

/* Etiqueta y error en la misma línea: el error no empuja el layout. */
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.field__error {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-brand-dark);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 40px;
  padding: 0 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background-color: var(--color-cream);
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-ink);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23040404' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
}
.field select:invalid { color: #8a8a8a; } /* placeholder "Selecciona una opción" */

.field textarea {
  flex: 1;
  min-height: 64px;
  padding: 0.65rem 0.9rem;
  resize: none;
  line-height: 1.45;
}

.field input::placeholder,
.field textarea::placeholder { color: #8a8a8a; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #c4c4c4; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  background-color: var(--color-white);
  box-shadow: 0 0 0 4px var(--color-brand-soft);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--color-brand-dark); background-color: #fff7f7; }

.contact-form__submit { margin-top: 0.15rem; padding-block: 0.85rem; }
.contact-form__submit svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.contact-form__submit:hover svg { transform: translate(3px, -3px); }
.contact-form__submit:disabled { opacity: 0.7; cursor: progress; }

/* Aviso legal bajo el botón: una línea pequeña y pegada al botón para
   no romper la regla de "Contacto cabe en una pantalla". */
.contact-form__legal {
  margin: -0.2rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text-soft);
}
.contact-form__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.contact-form__legal a:hover { color: var(--color-brand-dark); }

.contact-form__status {
  min-height: 1.1em;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--color-text-soft);
}
.contact-form__status.is-ok    { color: #0f8a43; }
.contact-form__status.is-error { color: var(--color-brand-dark); }
.contact-form__status:empty { display: none; }

/* Pantallas bajas (laptops de 720–800px de alto): el formulario se
   compacta para que la sección siga cabiendo sin cortar el mensaje. */
@media (max-height: 820px) {
  .contact-form__body { gap: 0.45rem; padding-block: 0.9rem 0.85rem; }
  .contact-form__title { display: none; }
  .contact-form__row { gap: 0.5rem; }
  .field { gap: 0.2rem; }
  .field input,
  .field select { height: 36px; }
  .field textarea { min-height: 48px; }
  .contact-form__submit { padding-block: 0.75rem; }
}

/* ===== Renglones de canales (derecha) ===== */
.contact-panels {
  grid-area: panels;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
}

/* Renglones claros (blanco sobre el crema de la página) para que el
   ícono de cada canal se distinga con su propio color. --ch es el color
   del canal (ícono y acentos), --ch-strong una versión más oscura que
   aguanta texto blanco encima (botón), --ch-soft el tinte de fondo. */
.contact-panel {
  --ch: var(--color-brand);
  --ch-strong: var(--color-brand-dark);
  --ch-soft: var(--color-brand-soft);
  position: relative;
  flex: 1;
  min-height: 0;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
  text-decoration: none;
  transition: flex 0.65s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.contact-panel--whatsapp  { --ch: #25d366; --ch-strong: #0f8a43; --ch-soft: rgba(37, 211, 102, 0.14); }
.contact-panel--instagram { --ch: #d62976; --ch-strong: #c1236a; --ch-soft: rgba(214, 41, 118, 0.12); }
.contact-panel--facebook  { --ch: #1877f2; --ch-strong: #1466d6; --ch-soft: rgba(24, 119, 242, 0.12); }

.contact-panel:hover {
  flex: 3.6;
  border-color: var(--ch);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.35);
}
.contact-panels:hover .contact-panel:not(:hover) { flex: 0.62; }

/* Vista ilustrativa de a dónde manda cada canal (mockup SVG con la
   marca, BRAND-BRIEF.md §7) — anclada abajo a la derecha, como un
   teléfono que asoma, y oculta hasta el hover. */
.contact-panel__art {
  position: absolute;
  right: 1.25rem;
  bottom: 0;
  z-index: 2;
  width: auto;
  height: 92%;
  max-width: 48%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.contact-panel:hover .contact-panel__art { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }

/* Tinte suave del color del canal detrás del mockup. */
.contact-panel__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 110%, var(--ch-soft), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.contact-panel:hover .contact-panel__scrim { opacity: 1; }

/* Colapsado: ícono + nombre en horizontal, alineados a la izquierda. */
.contact-panel__collapsed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0 1.25rem;
  opacity: 1;
  transition: opacity 0.35s var(--ease);
}
.contact-panel:hover .contact-panel__collapsed { opacity: 0; }

.contact-panel__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 50%;
  background-color: var(--ch-soft);
  color: var(--ch);
}
.contact-panel__icon svg { width: 100%; height: 100%; }

.contact-panel__name {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  white-space: nowrap;
}

/* Expandido: ícono grande arriba, nombre/dato y botón debajo, todo en
   la mitad izquierda — la derecha la ocupa el mockup. */
.contact-panel__expanded {
  position: absolute;
  inset: 0;
  right: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0 0 0 1.5rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease) 0.1s;
  pointer-events: none;
}
.contact-panel:hover .contact-panel__expanded {
  opacity: 1;
  pointer-events: auto;
}

.contact-panel__icon-lg {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 9px;
  border-radius: 14px;
  background-color: var(--ch);
  color: var(--color-white);
  transform: scale(0.6);
  transition: transform 0.45s cubic-bezier(0.22, 1.6, 0.36, 1) 0.12s;
}
.contact-panel:hover .contact-panel__icon-lg { transform: scale(1); }
.contact-panel__icon-lg svg { width: 100%; height: 100%; }

.contact-panel__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; max-width: 100%; }
.contact-panel__label { font-size: 1.25rem; font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.contact-panel__value {
  font-size: 0.875rem;
  color: var(--color-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-panel__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: var(--ch-strong);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
}
.contact-panel__cta svg { width: 14px; height: 14px; transform: translateX(-4px); transition: transform 0.3s var(--ease); }
.contact-panel:hover .contact-panel__cta svg { transform: translateX(0); }

/* ============ 17. FOOTER ============ */


.site-footer {
  position: relative;
  background-color: var(--color-ink);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-brand), transparent);
  background-size: 200% 100%;
  animation: footerShimmer 7s linear infinite;
}

@keyframes footerShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Franja 1: cierre con CTA + hora en vivo en Monclova ---- */

/* Hora local en Monclova (main.js §16), con un punto rojo que late. */


/* ---- Franja 2: "THE SOCIAL BOX" gigante ----
   Dos capas del mismo texto encimadas: la base solo con contorno tenue y
   la "encendida" en rojo sólido, visible únicamente dentro de un círculo
   (mask radial) que sigue al cursor. main.js §16 escribe --mx/--my; sin
   cursor (táctil) o mientras nadie lo toca, el propio JS pasea el
   reflector de lado a lado. --r crece al entrar el cursor. */
@property --r {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* Cinta negra entre Cómo trabajamos y la Comparativa, con los servicios
   corriendo sin fin. main.js §18 escribe --tape-shift (ancho de una
   lista) y --tape-dur (velocidad constante en px/s). */
.brand-band { overflow: hidden; }

.tape {
  padding-block: clamp(0.85rem, 1.6vw, 1.2rem);
  overflow: hidden;
}

/* Negra: texto
   blanco y, al pasar el cursor, cada servicio se enciende en rojo. */
.tape--black {
  background-color: var(--color-ink);
  color: var(--color-white);
}

.tape__track {
  display: flex;
  width: max-content;
  animation: tapeScroll var(--tape-dur, 30s) linear infinite;
}

.tape:hover .tape__track { animation-play-state: paused; }

@keyframes tapeScroll {
  to { transform: translateX(calc(-1 * var(--tape-shift, 50%))); }
}

.tape__list {
  display: flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sin separadores: el aire entre servicios sale
   del padding de cada uno. */
.tape__list li {
  padding-right: clamp(2rem, 4vw, 3.5rem);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.1vw, 1.625rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.tape--black .tape__list li:hover { color: var(--color-brand); }

/* Cinta blanca de logos de clientes (entre Portafolio y Cómo trabajamos).
   Mismo motor que la negra (main.js §18). Cada logo cabe en una caja
   máxima (los PNG vienen recortados a su dibujo), así un logo apaisado
   como Kronos no domina a uno casi cuadrado como Athletic. En gris y
   atenuados para que no compitan; a color al pasar el cursor. */
.clients { padding-top: clamp(1.75rem, 5svh, 3rem); }

.clients__title {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-soft);
}

.clients .tape--logos {
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  border-block: 1px solid var(--color-line);
  background-color: var(--color-white);
}

.tape--logos .tape__list { align-items: center; }

.tape--logos .tape__list li {
  display: flex;
  align-items: center;
  padding-right: clamp(2.5rem, 5vw, 4.5rem);
  font-size: 0;
  line-height: 0;
}

.tape--logos img {
  width: auto;
  height: auto;
  max-width: var(--logo-w, 140px);
  max-height: var(--logo-h, 52px);
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}

.tape--logos li:hover img { filter: none; opacity: 1; }

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

/* ---- Footer real: marca · Explora · Contacto · Síguenos ----
   Compacto a propósito (una franja). main.js §17 escribe --fx/--fy para
   el brillo rojo que sigue al cursor y maneja el botón de copiar correo. */
.site-footer--full { --fx: 50%; --fy: 0%; }

.footer__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--fx) var(--fy), rgba(var(--color-brand-rgb), 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.site-footer--full:hover .footer__glow { opacity: 1; }

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.3fr 0.9fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2rem);
}

.footer__logo { display: inline-block; transition: transform 0.4s var(--ease); }
.footer__logo:hover { transform: scale(1.05) rotate(-2deg); }
.footer__logo img { width: auto; height: 56px; }

.footer__tagline {
  max-width: 28ch;
  margin: 0.85rem 0 0;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

.footer__heading {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.footer__links,
.footer__contact,
.footer__social { list-style: none; margin: 0; padding: 0; }

.footer__links { display: grid; gap: 0.55rem; }

/* Enlaces: una flecha roja entra desde la izquierda y empuja el texto. */
.footer__links a {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s var(--ease);
}

.footer__links a::before {
  content: "→";
  display: inline-block;
  width: 0;
  overflow: hidden;
  color: var(--color-brand);
  opacity: 0;
  transition: width 0.3s var(--ease), opacity 0.3s var(--ease), margin 0.3s var(--ease);
}

.footer__links a:hover,
.footer__links a:focus-visible { color: var(--color-white); }
.footer__links a:hover::before,
.footer__links a:focus-visible::before { width: 1em; margin-right: 0.35rem; opacity: 1; }

.footer__contact { display: grid; gap: 0.6rem; }

.footer__contact li { display: flex; align-items: center; gap: 0.35rem; }

.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s var(--ease);
}

.footer__contact a svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-brand);
  transition: transform 0.35s var(--ease);
}

.footer__contact a:hover { color: var(--color-white); }
.footer__contact a:hover svg { transform: scale(1.2) rotate(-8deg); }

/* Copiar correo: aparece junto al correo; al copiar muestra "¡Copiado!". */
.footer__copy-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.footer__copy-btn svg { width: 14px; height: 14px; }
.footer__copy-btn:hover,
.footer__copy-btn:focus-visible { color: var(--color-white); background-color: rgba(255, 255, 255, 0.08); }

.footer__copy-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background-color: var(--color-brand);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer__copy-btn.is-copied .footer__copy-tip { opacity: 1; transform: translate(-50%, 0); }

/* Redes: círculos con contorno que se rellenan de rojo desde abajo,
   suben un poco y muestran su nombre en una etiqueta. */
.footer__social { display: flex; gap: 0.6rem; }

.footer__social a {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--color-white);
  isolation: isolate;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.footer__social a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--color-brand);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--ease);
}

.footer__social a::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background-color: var(--color-white);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer__social svg { width: 18px; height: 18px; }

.footer__social a:hover,
.footer__social a:focus-visible { transform: translateY(-3px); border-color: var(--color-brand); }
.footer__social a:hover::before,
.footer__social a:focus-visible::before { transform: scaleY(1); }
.footer__social a:hover::after,
.footer__social a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---- Franja inferior: © + legales ---- */
.footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer__copy { margin: 0; }

.footer__legal { display: flex; gap: 1.25rem; list-style: none; }

.footer__legal a { position: relative; white-space: nowrap; transition: color 0.3s var(--ease); }

.footer__legal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.footer__legal a:hover { color: var(--color-brand); }
.footer__legal a:hover::after { transform: scaleX(1); }

/* ============ 18. ANIMACIONES (REVEAL) ============ */
/* Patrón usado en TODA la landing: cualquier elemento con la clase
   .reveal o .reveal-repeat (mismo comportamiento, dos nombres por
   compatibilidad con el HTML existente) aparece con fade + desplazamiento
   al entrar en pantalla y VUELVE A OCULTARSE al salir, para reaparecer
   cada vez que se vuelve a scrollear hasta ahí (efecto "permanente" en
   toda la página, no solo la primera vez — ver main.js §3). No se anima
   si el usuario tiene activado "reducir movimiento". */
.reveal,
.reveal-repeat {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible,
.reveal-repeat.is-visible { opacity: 1; transform: none; }

/* ============ 17.1 CTA FINAL HACIA EL SITIO PRINCIPAL ============
   El mismo bloque de toda la serie de landings por servicio: foto del
   equipo con capa oscura, una frase y un botón. */
.agency-cta {
  padding-block: 1.5rem var(--space-section);
}

.agency-cta__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 3rem 1.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
}

.agency-cta__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(var(--color-ink-rgb), 0.72);
}

.agency-cta__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.agency-cta__title {
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  color: var(--color-white);
}

.agency-cta__title-accent { color: var(--color-brand); }

.agency-cta__text {
  max-width: 40rem;
  color: var(--color-body);
}

@media (min-width: 768px) {
  .agency-cta__banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 3rem 4rem;
  }

  .agency-cta__banner .btn { flex-shrink: 0; }
}

/* ============ 17.2 PÁGINAS SECUNDARIAS (GRACIAS, 404, AVISO) ============ */
.status-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 3rem var(--gutter);
  background-color: var(--color-ink);
  text-align: center;
}

.status-page__container { max-width: 560px; }

.status-page__code {
  margin-bottom: 0.5rem;
  font-family: var(--font-accent);
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
  color: var(--color-brand);
}

.status-page__title {
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-white);
}

.status-page__text { color: var(--color-body); }

.status-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.legal-page__header {
  padding-block: 1.25rem;
  background-color: var(--color-ink);
}

.legal-page__logo img { width: 72px; height: auto; }

.legal-page__body {
  padding-block: 3rem 4rem;
}

.legal-page__body h1 {
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
}

.legal-page__body h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  font-size: 1.25rem;
}

.legal-page__body a { color: var(--color-brand); text-decoration: underline; }

.legal-page__footer {
  padding-block: 1.5rem;
  background-color: var(--color-ink);
  font-size: 0.875rem;
  color: var(--color-body);
}

/* ============ 19. BARRA CTA FIJA EN MÓVIL ============ */
/* Sustituye al menú en móvil: cotizar + WhatsApp siempre a la vista.
   Se activa en responsive.css (≤ 768px). */
.mobile-cta-bar {
  display: none;
}

/* ============ 20. INTERACCIONES: BOTONES, RIPPLE, MAGNETISMO, PARALLAX ============ */
.hero__media--parallax { transition: transform 0.25s ease-out; }

/* ============ 21. ACCESIBILIDAD / REDUCIR MOVIMIENTO ============ */
@media (prefers-reduced-motion: reduce) {
  .site-footer::before { animation: none; }
  .reveal,
  .reveal-repeat { opacity: 1; transform: none; }
  .stat__num,
  .stat__plus { opacity: 1; transform: none; transition: none; animation: none; }
  .stat:hover .stat__num,
  .stat:hover .stat__plus,
  .stat:hover::before { animation: none; }
  .stat::before { transform: scaleX(1); transition: none; }
  .journey__spark { display: none; }
  .journey-panel::before,
  .journey-panel__body,
  .journey-panel__img,
  .journey__thumb { transition: none; }
  .journey-panel__img { transform: none; }
  .journey__step.is-current .journey__dot::after { animation: none; }
  .section__head .eyebrow,
  .section__head .section__title,
  .section__head .section__lead,
  .comparison-columns__label,
  .comparison-columns__list li,
  .comparison-columns__divider { opacity: 1; transform: none; transition: none; }
  .hero__eyebrow,
  .hero__title,
  .hero__info { opacity: 1; transform: none; transition: none; }
  .hero__media { animation: none; transform: none; }
  .services-carousel__worm,
  .services-carousel__slide { transition: none; }
  .services-carousel__arrow { opacity: 1; }
  .lightbox,
  .lightbox__img { transition: none; }
  .btn__ripple { display: none; }
}