/* =========================================================
   ADJ Ingeniería y Construcción SAS — styles.css
   ========================================================= */

:root {
  /* Colores de texto (unificados en todo el sitio) */
  --color-text-primary: #123262;
  --color-text-secondary: #5471AF;

  /* Colores */
  --color-azul-primario: #4b72b4;
  --color-azul-oscuro: #003366;
  --color-gris-claro: #D3D3D3;
  --color-gris-medio: var(--color-text-secondary);
  --color-gris-claro-2: #D4D4D4;

  --color-blanco: #FFFFFF;
  --color-texto: var(--color-text-primary);

  /* Tipografía (unificada en todo el sitio) */
  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-condensed: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-watermark: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-title: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --header-height: 80px;
  --container-max: 1200px;
  --transition-base: 0.3s ease;
}

/* ---------- Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-texto);
  background-color: var(--color-blanco);
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 4px;
  transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-hero {
  background-color: var(--color-blanco);
  color: var(--color-text-secondary);
}

.btn-hero:hover {
  transform: translateY(-2px);
  background-color: var(--color-azul-oscuro);
  color: var(--color-blanco);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-azul-primario);
  color: var(--color-text-secondary);
  margin-top: 16px;
}

.btn-outline:hover {
  background-color: var(--color-azul-primario);
  color: var(--color-blanco);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--color-blanco);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.nav-logo img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.nav-menu ul {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-texto);
  transition: color var(--transition-base);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--color-text-secondary);
}

.nav-link--accent {
  color: var(--color-text-secondary);
  border: 2px solid var(--color-azul-primario);
  padding: 8px 16px;
  border-radius: 4px;
}

.nav-link--accent:hover {
  background-color: var(--color-azul-primario);
  color: var(--color-blanco);
}

.nav-cta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  background-color: var(--color-azul-primario);
  color: var(--color-blanco);
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color var(--transition-base);
  white-space: nowrap;
}

.nav-cta:hover {
  background-color: var(--color-azul-oscuro);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-azul-oscuro);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  background-color: var(--color-azul-primario);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0; /* estado inicial: la sección hace fade-in vía GSAP al cargar */
}

/* Número gigante de fondo (marca de agua) — ocupa el espacio debajo del logo */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-watermark {
  font-family: var(--font-watermark);
  font-weight: 700;
  font-size: clamp(12rem, 46vw, 42rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  user-select: none;
}

/* Reloj en tiempo real */
.hero-clock {
  position: absolute;
  top: calc(var(--header-height) + 32px);
  right: 40px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.hero-clock-time {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  color: var(--color-blanco);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.hero-clock-badge {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-primary);
  background-color: var(--color-blanco);
  padding: 6px 16px;
  border-radius: 999px;
}

/* Logo circular con fondo propio, centrado en el centro exacto de la sección */
.hero-logo-wrap {
  position: relative;
  z-index: 3;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: var(--color-blanco);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hero-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  will-change: transform;
}

/* Transición automática dentro del Hero: imagen + título, tras terminar el conteo */
.hero-reveal-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Fila de barras verticales que, juntas, reconstruyen imagen_1 */
.hero-reveal-track {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Cada barra recorta (overflow:hidden) su porción de la imagen */
.hero-reveal-col {
  position: relative;
  height: 100%;
  overflow: hidden;
  flex: 0 0 auto;
}

/* Copia completa de imagen_1, desplazada por barra; sube desde abajo al revelarse */
.hero-reveal-col-inner {
  position: absolute;
  top: 0;
  background-image: url('../assets/imagen_1.png');
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.hero-reveal-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}

/* Frame de la capa de texto (separado de la capa de foto): Clip Content activado
   para que el título nunca se salga visualmente de su área al moverse con el scroll. */
.hero-title-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

/* El h1 real queda invisible: el titular que se ve es el clonado en barras (.hero-title-col-inner),
   pero el texto sigue en el DOM para accesibilidad/SEO. */
.hero-reveal-title {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  row-gap: 0.02em;
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--color-blanco);
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  padding: 0 6%;
  pointer-events: none;
  opacity: 0;
}

/* Cada fila alinea sus palabras por el centro vertical (la palabra pequeña queda centrada en altura junto a la grande) */
.hero-reveal-line {
  display: flex;
  align-items: center;
  column-gap: 0.3em;
}

.hero-reveal-word {
  display: inline-block;
}

/* Jerarquía de tamaños dentro del titular: las palabras clave pesan más que los conectores */
.hero-reveal-word--sm {
  font-size: 0.55em;
}

.hero-reveal-word--md {
  font-size: 0.8em;
}

.hero-reveal-word--lg {
  font-size: 1.15em;
}

/* Barras verticales que revelan el titular (clones del h1 real, ver revealHeroTitleColumns en main.js) */
.hero-title-track {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  overflow: hidden;
  pointer-events: none;
}

.hero-title-col {
  position: relative;
  height: 100%;
  overflow: hidden;
  flex: 0 0 auto;
}

/* Copia completa del titular, desplazada por barra; sube desde abajo al revelarse */
.hero-title-col-inner {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  row-gap: 0.02em;
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--color-blanco);
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  padding: 0 6%;
  will-change: transform;
}

/* Capa de texto secundaria del hero: aparece después de que el titular desaparece con el 1er scroll */
.hero-secondary-text {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 0 6%;
  pointer-events: none;
  opacity: 0;
}

.hero-secondary-title {
  display: flex;
  flex-direction: column;
  row-gap: 0.02em;
  margin: 0;
  font-family: var(--font-title);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Cada fila alinea sus palabras por el centro vertical, igual que el titular principal */
.hero-secondary-line {
  display: flex;
  align-items: center;
  column-gap: 0.3em;
}

.hero-secondary-word {
  display: inline-block;
}

.hero-secondary-word--white-lg {
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  color: var(--color-blanco);
}

.hero-secondary-word--white-sm {
  font-size: clamp(1.2rem, 3.85vw, 3.025rem);
  color: var(--color-blanco);
}


.hero-secondary-sub {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-blanco);
  font-size: 2.2rem;
}

/* Estadística: arriba a la derecha de la imagen, debajo del reloj (dentro de la capa hero-secondary-text) */
.hero-stat-text {
  position: absolute;
  top: calc(var(--header-height) + 32px + 100px);
  right: 40px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero-stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blanco);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  line-height: 1.1;
}

.hero-stat-label {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-blanco);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* ---------- Indicadores empresariales (sección de contadores) ---------- */
.counter-section {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--counter-bg-color, #080a0d);
  color: var(--color-blanco);
  overflow: hidden;
  padding: 140px 0 80px;
}

.counter-bg {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--parallax-offset, 0px), 0) scale(1.1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .counter-bg {
    transform: translate3d(0, 0, 0) scale(1.1);
    will-change: auto;
  }
}

.counter-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #000000;
  opacity: var(--counter-overlay-opacity, 0.55);
}

/* Marcas verticales finas — detalle geométrico industrial, discreto */
.counter-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.counter-deco::before,
.counter-deco::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.counter-deco::before {
  left: 8%;
}

.counter-deco::after {
  right: 8%;
}

.counter-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Aparición de textos al hacer scroll — activada por IntersectionObserver (js/counter-section.js) */
.reveal-el {
  opacity: 0;
  transform: translate3d(0, 35px, 0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-el.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-el {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.counter-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.counter-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--counter-accent, var(--color-azul-primario));
}

.counter-heading {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 900px;
}

.counter-title {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-blanco);
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.counter-title-line {
  display: block;
}

.counter-heading-detail {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.counter-divider {
  flex-shrink: 0;
  width: 48px;
  height: 2px;
  margin-top: 12px;
  background: var(--counter-accent, var(--color-azul-primario));
}

.counter-description {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-gris-claro);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  max-width: 560px;
  line-height: 1.7;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 40px;
}

.counter-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.counter-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

.counter-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  color: var(--color-text-secondary);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.counter-rule {
  width: min(64px, 32%);
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.counter-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gris-claro);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }

  .counter-value {
    font-size: clamp(3.2rem, 8vw, 6rem);
  }
}

@media (max-width: 560px) {
  .counter-section {
    padding: 110px 0 60px;
  }

  .counter-inner {
    gap: 48px;
  }

  .counter-heading-detail {
    flex-direction: column;
    gap: 12px;
  }

  .counter-divider {
    margin-top: 0;
  }

  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .counter-value {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }

  .reveal-el {
    transform: translate3d(0, 22px, 0);
  }
}

@media (max-width: 380px) {
  .counter-grid {
    grid-template-columns: 1fr;
  }

  .counter-value {
    font-size: clamp(3rem, 16vw, 4.5rem);
  }
}

/* ---------- Sections ---------- */
.section {
  padding: 100px 0;
  scroll-margin-top: var(--header-height);
}

.section--alt {
  background-color: var(--color-gris-claro-2);
}

.section--narrow .container {
  text-align: center;
}

.section--cta {
  background-color: var(--color-azul-oscuro);
  min-height: 220px;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section--cta .container {
  text-align: center;
}

.section--cta .btn-hero {
  padding: 22px 56px;
  font-size: 1.15rem;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 20px;
}

.section-placeholder {
  color: var(--color-gris-medio);
  font-size: 1rem;
  max-width: 700px;
}

/* ---------- Servicios: encabezado + tira vertical continua de 5 fotografías ---------- */
.services-intro {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-blanco);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.services-stack-heading {
  /* Sin position:relative a propósito: así ".services-description" (position:absolute)
     toma como referencia ".services-intro", no este contenedor — necesario para
     anclarla al costado inferior de todo el encabezado, no solo debajo del título. */
  width: 100%;
  padding: 0 4%;
}

.services-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: clamp(7rem, 20vw, 20rem);
  font-weight: 500;
  line-height: 0.72;
  letter-spacing: -0.075em;
  white-space: nowrap;
}

/* Posicionada por JS (sizeServicesDescriptionPosition en services-section.js):
   "left" se ajusta en píxeles para arrancar justo debajo de la "S" de "Servicios". */
.services-description {
  position: absolute;
  left: 0;
  bottom: 76px;
  z-index: 1;
  margin: 0;
  max-width: min(380px, 70vw);
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-gris-medio);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.6;
}

/* Tira vertical: los 5 paneles van en flujo normal, uno debajo del otro — nada de
   position:absolute ni sticky. La transición la produce el propio scroll de la página. */
.services-projects {
  position: relative;
  width: 100%;
  background: #080808;
}

.service-project {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background: #080808;
}

.service-project__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.service-project__image {
  position: absolute;
  top: -12%;
  left: -12%;
  width: 124%;
  max-width: none; /* el reset global "img { max-width: 100% }" recortaría el 124% a 100% */
  height: 124%;
  display: block;
  object-fit: cover;
  object-position: var(--object-position, center);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  /* Estado de reposo antes de que JS calcule el progreso real (y respaldo sin JS):
     equivale a los valores "centro" — nunca deja bordes vacíos. */
  transform: translate3d(0, 0, 0) scale(1.22);
}

.service-project__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.58) 100%);
  pointer-events: none;
}

/* El contenido vive en flujo normal dentro del panel: se desplaza con él porque
   el panel mismo nunca se transforma — solo la fotografía interior se anima. */
.service-project__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: var(--color-blanco);
  pointer-events: none;
}

.service-project__eyebrow {
  position: absolute;
  top: max(calc(var(--header-height) + 24px), calc(env(safe-area-inset-top) + var(--header-height)));
  left: max(6%, calc(env(safe-area-inset-left) + 6%));
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.service-project__main {
  position: absolute;
  left: max(6%, calc(env(safe-area-inset-left) + 6%));
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-project__title {
  margin: 0;
  color: var(--color-blanco);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.service-project__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  max-width: 480px;
}

.service-project__capabilities {
  position: absolute;
  left: max(6%, calc(env(safe-area-inset-left) + 6%));
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  right: 40%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-project__capabilities li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.service-project__capabilities li::before {
  content: '— ';
  color: var(--color-text-secondary);
}

.service-project__number {
  position: absolute;
  right: max(6%, calc(env(safe-area-inset-right) + 6%));
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .service-project__image {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .service-project__main {
    max-width: 480px;
  }

  .service-project__capabilities {
    right: 30%;
  }
}

@media (max-width: 600px) {
  .services-description {
    bottom: 32px;
  }

  .service-project {
    min-height: 560px;
  }

  .service-project__eyebrow {
    top: calc(var(--header-height) + 16px);
  }

  .service-project__main {
    right: 6%;
  }

  .service-project__title {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  .service-project__desc {
    font-size: 0.95rem;
  }

  .service-project__capabilities {
    right: 6%;
    max-width: 100%;
  }
}

/* ---------- Proceso: sección editorial entre Servicios y Sectores ---------- */
.process-section {
  --background: #F5F5F3;
  --line: #C9C9C6;
  --light-line: #D1D1CD;
  --accent: var(--color-azul-oscuro);
  --technical-text: #54565A;

  box-sizing: border-box;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(140px, 23%) minmax(0, 1fr) 120px;
  align-items: start;
  gap: 24px;
  padding: 140px 20px 80px;
  background-color: var(--background);
}

.process-line {
  position: relative;
  height: 1px;
  background-color: var(--line);
}

.process-line--left {
  width: 120px;
}

.process-line--center {
  width: 100%;
}

.process-accent {
  position: absolute;
  top: -1px;
  left: 0;
  width: 20px;
  height: 3px;
  background-color: var(--accent);
}

.process-id {
  margin: 68px 0 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}

.process-hatch {
  width: 120px;
  height: 12px;
  margin-top: 20px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--light-line) 0,
    var(--light-line) 1px,
    transparent 1px,
    transparent 6px
  );
}

.process-col--center {
  max-width: 830px;
  width: 100%;
}

.process-title {
  margin: 58px 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(68px, 7vw, 94px);
  line-height: 0.99;
  letter-spacing: -5.5px;
}

.process-title__primary,
.process-title__secondary {
  display: block;
}

.process-title__primary {
  color: var(--color-text-primary);
}

.process-title__secondary {
  color: var(--color-text-secondary);
}

.process-text-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 24px;
}

.process-text-rule {
  flex-shrink: 0;
  width: 44px;
  height: 1px;
  margin-top: 14px;
  background-color: var(--color-azul-oscuro);
}

.process-text {
  margin: 0;
  max-width: 800px;
  font-size: 18px;
  line-height: 1.52;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.process-scale {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 84%;
  margin-top: 68px;
}

.process-scale-tick {
  width: 1px;
  height: 20px;
  background-color: rgba(18, 59, 93, 0.18);
}

/* ----- Animación de entrada al hacer scroll (js/process-section.js) -----
   Disparada una sola vez por IntersectionObserver al 20% de visibilidad
   de la sección; ver .reveal-el (styles.css) para el patrón sitewide del
   que ésta se deriva, con tiempos propios (más lentos y editoriales). */
.process-title__part {
  display: inline-block;
}

.process-reveal {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.process-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.process-reveal--short {
  transform: translate3d(0, 30px, 0);
}

.process-reveal-decor {
  --process-decor-opacity: 0.85;
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.process-reveal-decor.is-visible {
  opacity: var(--process-decor-opacity);
  transform: translate3d(0, 0, 0);
}

.process-hatch.process-reveal-decor {
  --process-decor-opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .process-reveal,
  .process-reveal-decor {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s ease;
    will-change: auto;
  }

  .process-hatch.process-reveal-decor {
    opacity: 0.55;
  }
}

@media (max-width: 640px) {
  .process-reveal,
  .process-reveal-decor {
    transform: translate3d(0, 30px, 0);
    transition-duration: 1.2s;
  }
}

@media (max-width: 900px) {
  .process-section {
    display: flex;
    flex-direction: column;
    padding: 70px 24px 80px;
  }

  .process-col--left {
    display: none;
  }

  .process-col--center {
    max-width: none;
  }

  .process-title {
    font-size: clamp(50px, 11vw, 76px);
    letter-spacing: -4px;
  }

  .process-text {
    max-width: none;
  }

  .process-scale {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .process-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .process-title {
    font-size: 48px;
    letter-spacing: -3px;
  }

  .process-text {
    font-size: 16px;
  }

  .process-text-rule {
    width: 30px;
  }

  .process-scale {
    margin-top: 48px;
  }
}

/* ---------- Beneficios: cuatro tarjetas entre Proceso y Sectores ---------- */
.benefits-section {
  --corporate-blue: var(--color-azul-primario);
  --corporate-blue-hover: var(--color-azul-oscuro);
  --benefits-bg: #F5F5F3;
  --benefits-card-bg: var(--color-blanco);
  --benefits-border: rgba(0, 0, 0, 0.08);
  --benefits-text-muted: var(--color-gris-medio);

  background-color: var(--benefits-bg);
  padding: 0 0 100px;
}

/* ----- Cuadrícula: 2 columnas / 2 filas en escritorio ----- */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.benefits-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--benefits-card-bg);
  border: 1px solid var(--benefits-border);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.benefits-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.benefits-card__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.benefits-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 1.35rem;
  line-height: 1.35;
}

.benefits-card__title--upper {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.benefits-card__text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--benefits-text-muted);
  margin-top: auto;
}

/* ----- Tarjeta 1: tres puntos ----- */
.benefits-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px 0;
}

.benefits-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--benefits-text-muted);
  animation: benefits-dot-pulse 2.4s ease-in-out infinite;
}

.benefits-dot--2 {
  animation-delay: 0.25s;
}

.benefits-dot--3 {
  width: 32px;
  height: 32px;
  background-color: var(--corporate-blue);
  box-shadow: 0 0 0 12px rgba(75, 114, 180, 0.18);
  animation-delay: 0.5s;
}

@keyframes benefits-dot-pulse {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ----- Tarjeta 3: CTA de seguridad ----- */
.benefits-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  padding: 12px 22px;
  margin-top: 4px;
  background-color: var(--corporate-blue);
  color: var(--color-blanco);
  border-radius: 8px;
  font-size: 0.92rem;
  border: none;
}

.benefits-cta:hover {
  background-color: var(--corporate-blue-hover);
}

.benefits-cta:focus-visible {
  background-color: var(--corporate-blue-hover);
  outline: 3px solid var(--color-azul-oscuro);
  outline-offset: 3px;
}

.benefits-cta__arrow {
  transition: transform var(--transition-base);
}

.benefits-cta:hover .benefits-cta__arrow,
.benefits-cta:focus-visible .benefits-cta__arrow {
  transform: translateX(4px);
}

/* ----- Tarjeta 4: personaje 3D procedural (Three.js), con SVG de respaldo ----- */
.benefits-character-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 160px;
  overflow: hidden;
  border-radius: 24px;
}

.benefits-character-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
}

.benefits-character-stage canvas:active {
  cursor: grabbing;
}

.benefits-worker {
  width: 96px;
  height: auto;
  align-self: center;
  margin: 4px 0;
}

.benefits-worker__arm {
  transform-origin: 0px 0px;
  animation: benefits-worker-wave 3.2s ease-in-out infinite;
}

@keyframes benefits-worker-wave {
  0%, 8% {
    transform: rotate(-18deg);
  }
  20% {
    transform: rotate(18deg);
  }
  32% {
    transform: rotate(-14deg);
  }
  44% {
    transform: rotate(14deg);
  }
  56%, 100% {
    transform: rotate(-18deg);
  }
}

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

  .benefits-worker__arm {
    animation: none;
    transform: rotate(-18deg);
  }

  .benefits-card {
    transition: none;
  }
}

@media (max-width: 900px) {
  .benefits-section {
    padding: 0 0 70px;
  }
}

@media (max-width: 720px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .benefits-card {
    padding: 28px 24px;
  }

  .benefits-character-stage {
    min-height: 140px;
  }

  .benefits-cta {
    width: 100%;
  }
}

/* =========================================================
   Sección "Selected Projects" → "Entendemos el riesgo de cada sector"
   Inspirada en la sección homónima de la plantilla Rebirth (Framer),
   adaptada al contenido corporativo (sectores atendidos por ADJ).
   Tipografía heredada del sistema global del sitio (Helvetica Neue);
   solo el color de fondo/texto/regla de esta sección es propio, para
   lograr el acabado editorial (fondo blanco puro sobre el resto del sitio).
   ========================================================= */
.projects-section {
  --projects-text: var(--color-text-primary);
  --projects-text-muted: var(--color-text-secondary);
  --projects-rule: #e8e8e8;
  --projects-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --projects-media-w: 360px;
  --projects-media-h: 200px;
  --projects-media-w-hover: 440px;
  --projects-media-h-hover: 250px;

  position: relative;
  background-color: #ffffff;
  color: var(--projects-text);
  font-family: var(--font-body);
  scroll-margin-top: var(--header-height);
}

/* ----- Encabezado ----- */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 80px 24px;
  border-bottom: 1px solid var(--projects-rule);
  text-align: center;
}

.projects-header__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.99;
  letter-spacing: -3.5px;
}

.projects-header__line {
  display: block;
}

.projects-header__line:first-child {
  color: var(--color-text-primary);
}

.projects-header__line:last-child {
  color: var(--color-text-secondary);
}

.projects-header__accent {
  color: var(--color-text-secondary);
}

/* ----- Lista de proyectos ----- */
.projects-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1280px;
  margin-inline: auto;
}

.project-row {
  border-bottom: 1px solid var(--projects-rule);
}

.project-row__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 300px;
  padding: 0 80px;
  text-decoration: none;
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .project-row__link {
    cursor: none;
  }
}

.project-row__link:focus-visible {
  outline: 2px solid var(--projects-text);
  outline-offset: -4px;
}

/* ----- Bloque de texto ----- */
.project-row__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}

.project-row__title,
.project-row__desc {
  display: block;
  transition: transform 0.55s var(--projects-ease), opacity 0.55s var(--projects-ease);
}

.project-row__title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--projects-text);
  transform: translateX(0);
}

.project-row__desc {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--projects-text-muted);
  opacity: 0;
  transform: translateX(60px);
}

/* Escalonado: el delay solo se aplica al ENTRAR en hover/focus (ver reglas
   :hover/:focus-within más abajo); al salir, estas reglas base (delay 0)
   vuelven a mandar y la salida es inmediata, sin escalonado.
   Título e imagen arrancan de inmediato; la descripción entra ~80ms después. */
.project-row:hover .project-row__title,
.project-row:focus-within .project-row__title {
  transform: translateX(-40px);
}

.project-row:hover .project-row__desc,
.project-row:focus-within .project-row__desc {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 80ms;
}

/* ----- Imagen ----- */
.project-row__media {
  position: relative;
  flex-shrink: 0;
  width: var(--projects-media-w-hover);
  height: var(--projects-media-h-hover);
  overflow: hidden;
}

.project-row__image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--projects-media-w);
  height: var(--projects-media-h);
  object-fit: cover;
  transition: width 0.55s var(--projects-ease), height 0.55s var(--projects-ease);
}

.project-row:hover .project-row__image,
.project-row:focus-within .project-row__image {
  width: var(--projects-media-w-hover);
  height: var(--projects-media-h-hover);
}

/* ----- Cursor personalizado (solo dispositivos con mouse) ----- */
.projects-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background-color: #ffffff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
}

.projects-cursor.is-visible {
  opacity: 1;
}

@media not all and (hover: hover) and (pointer: fine) {
  .projects-cursor {
    display: none;
  }
}

/* ----- Movimiento reducido: sin desplazamientos ni escalados,
   solo cambios instantáneos / fade corto ----- */
@media (prefers-reduced-motion: reduce) {
  .project-row__title,
  .project-row__desc {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.15s linear;
    transition-delay: 0ms;
  }

  .project-row__image {
    transition: none;
  }

  .projects-cursor {
    display: none;
  }
}

/* ----- Tablet: se mantienen las filas horizontales ----- */
@media (max-width: 1024px) and (min-width: 721px) {
  .projects-header {
    min-height: 320px;
    padding: 64px 24px;
  }

  .project-row__link {
    padding: 0 48px;
  }

  .project-row__title {
    font-size: 34px;
  }

  .projects-section {
    --projects-media-w: 300px;
    --projects-media-h: 169px;
    --projects-media-w-hover: 360px;
    --projects-media-h-hover: 203px;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .project-row__link {
    padding: 0 32px;
  }
}

/* ----- Móvil: composición vertical, sin depender del hover ----- */
@media (max-width: 720px) {
  .projects-header {
    min-height: 0;
    padding: 56px 20px;
  }

  .projects-header__title {
    font-size: clamp(30px, 9vw, 40px);
  }

  .project-row__link {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 22px;
    gap: 18px;
  }

  .project-row__text {
    max-width: none;
  }

  .project-row__title,
  .project-row__desc {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .project-row__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .project-row__image {
    position: static;
    width: 100%;
    height: 100%;
    transition: transform 0.25s var(--projects-ease);
    transform: scale(1);
  }

  .project-row:active .project-row__image {
    transform: scale(1.03);
  }
}

/* ---------- Footer ----------
   Estilos completos en css/footer.css (componente independiente). */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: var(--color-blanco);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }

  .nav-menu.is-open {
    transform: translateX(0);
  }

  .nav-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px 24px 40px;
  }

  .nav-menu ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-gris-claro-2);
  }

  .nav-link,
  .nav-link--accent,
  .nav-cta {
    display: block;
    width: 100%;
    padding: 16px 4px;
    border-radius: 0;
  }

  .nav-link--accent {
    border: none;
    border-bottom: 1px solid var(--color-gris-claro-2);
  }

  .nav-cta {
    text-align: center;
    margin-top: 12px;
    border-radius: 4px;
  }
}

@media (max-width: 700px) {
  .hero-clock {
    position: static;
    align-items: center;
    margin-bottom: 24px;
  }
}

@media (max-width: 600px) {
  .hero-logo-wrap {
    width: 150px;
    height: 150px;
  }

  .section {
    padding: 70px 0;
  }
}

/* ---------- Seguridad y control (antes "Cómo trabajamos") ---------- */
.security-section {
  position: relative;
  min-height: 60vh;
  background: #E4E4E0;
  scroll-margin-top: var(--header-height);
}

.security-inner {
  position: sticky;
  top: 0;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;

  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Misma tipografía que el eyebrow "Hablemos de su proyecto" de #contacto
   (.contacto__eyebrow): line-height/gap propios, color adaptado al fondo
   claro de esta sección en vez del claro-sobre-oscuro del contacto. */
.security-label {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;

  font-family: var(--font-heading);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-secondary);

  will-change: transform, opacity;
}

.security-label__line {
  flex: 1;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  will-change: transform;
}

.security-title {
  max-width: 900px;
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(42px, 5.5vw, 82px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-text-primary);

  will-change: transform, opacity;
}

.security-description {
  max-width: 780px;
  margin: 0;

  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 25px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--color-text-secondary);

  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .security-section {
    min-height: auto;
  }

  .security-inner {
    position: static;
    min-height: auto;
    padding: 80px 24px;
  }

  .security-label,
  .security-label__line,
  .security-title,
  .security-description {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 900px) {
  .security-section {
    min-height: 60vh;
  }

  .security-inner {
    min-height: 60vh;
    gap: 20px;
    padding: 0 20px;
  }

  .security-label {
    font-size: 11px;
  }

  .security-label__line {
    flex: 0 0 auto;
    width: 70px;
  }

  .security-title {
    font-size: clamp(36px, 11vw, 56px);
  }
}