/* ═══════════════════════════════════════════════════════════════
   GFW MALAYSIA — ESTILOS DEL SITIO
   ───────────────────────────────────────────────────────────────
   Los colores y medidas vienen de tokens.css (variables --…).
   Aquí solo hay layout, componentes y responsive.

   Reglas de marca aplicadas (ver _design-system/README.md):
   · Botones con esquinas de 2px (afiladas), tarjetas de 8px.
   · Las secciones ROTAN de color de fondo — nunca dos seguidas
     con el mismo fondo: blanco → gris → tinte → crema → oscuro.
   · Eyebrows (micro-títulos) en mayúsculas, verdes, muy espaciados.
   · Una sola transición: 0.3s cubic-bezier(0.4, 0, 0.2, 1).
═══════════════════════════════════════════════════════════════ */

/* ── RESET BÁSICO ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;           /* Scroll suave al hacer clic en el menú */
  scroll-padding-top: 5rem;          /* Compensa la altura del nav fijo */
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: 1.625;
  color: var(--color-gris-700);
  background: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
}

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

/* Enlace de accesibilidad: invisible hasta que se navega con teclado */
.saltar-contenido {
  position: absolute;
  left: -9999px;
  background: var(--color-secundario);
  color: var(--color-blanco);
  padding: var(--esp-3) var(--esp-6);
}
.saltar-contenido:focus { left: 0; top: 0; z-index: 100; }

/* Anillo de foco visible para navegación con teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
}

/* ── TIPOGRAFÍA ───────────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0 0 var(--esp-4);
  color: var(--color-secundario);       /* Títulos en verde bosque */
  letter-spacing: -0.025em;
  line-height: 1.25;
}
/* Los títulos crecen con el ancho de pantalla. El mínimo es más bajo
   que antes porque en alemán hay palabras muy largas que en móvil
   se salían del contenedor. */
h1 { font-size: clamp(1.875rem, 5vw + 0.75rem, var(--texto-6xl)); font-weight: 800; }
h2 { font-size: clamp(1.625rem, 3vw + 0.5rem, var(--texto-3xl)); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, var(--texto-2xl)); font-weight: 600; }

/* Palabras largas (Rekrutierungsprozess…) no rompen el layout móvil.
   Sin guionado automático: en alemán "hyphens: auto" partía los títulos
   en sitios feos (Brü-cken, Deutsch-land). Los saltos de línea se
   reparten de forma equilibrada con text-wrap: balance. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

p { margin: 0 0 var(--esp-4); }

/* Eyebrow: micro-título verde en mayúsculas — firma de la marca */
.eyebrow {
  display: block;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.15em;              /* En móvil 0.25em ocupaba 3 líneas */
  text-transform: uppercase;
  color: var(--color-primario);
  margin-bottom: var(--esp-4);
}

/* Texto de introducción bajo los H2 (más grande y gris) */
.lead {
  font-size: var(--texto-lg);
  color: var(--color-gris-500);
  max-width: 34rem;                    /* ~540px, regla de marca */
}

/* ── LAYOUT ───────────────────────────────────────────────────── */
.contenedor {
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: var(--esp-4);        /* Móvil: márgenes estrechos = más ancho útil */
}

/* Toda sección tiene el mismo respiro vertical */
.seccion { padding-block: var(--esp-16); }

/* Fondos que rotan (regla: nunca dos secciones seguidas iguales) */
.fondo-blanco { background: var(--color-blanco); }
.fondo-gris   { background: var(--color-gris-50); }
.fondo-tinte  { background: var(--color-tinte); }
.fondo-crema  { background: var(--color-crema); }
.fondo-oscuro { background: var(--color-secundario); }

/* EL MISMO fondo del hero (pedido del cliente, tres intentos en claro
   se veían "todavía blancos"): la diagonal a 135° de verde bosque a
   verde vivo, con los destellos que allí pone el video desenfocado.
   Va siempre junto a .fondo-oscuro en el HTML, que es quien pone los
   textos en claro; esta clase solo pisa el fondo (está declarada
   después, así que gana sin necesidad de !important). */
.fondo-degradado {
  background:
    /* Las capas del hero, en el mismo orden que allí:
       1 · sombra inferior  2 · velo diagonal  3 · "el video"
       4 · el degradado base.
       La capa 3 es la clave: en el hero casi todo lo tapa el video de
       Köln desenfocado, que es oscuro y agrisado, y por eso el
       conjunto queda apagado. Aquí ese papel lo hace una capa lisa
       del tono medio del video. Sin ella la diagonal se veía viva y
       luminosa y "no era el estilo de arriba" (cliente). */
    linear-gradient(to top, var(--color-secundario) -10%, transparent 78%),
    linear-gradient(135deg, var(--color-secundario-40) 0%, var(--color-primario-20) 100%),
    linear-gradient(rgba(22, 48, 38, 0.5), rgba(22, 48, 38, 0.5)),
    linear-gradient(135deg, var(--color-secundario) 0%, var(--color-primario) 100%);
}
/* Brillo EN MOVIMIENTO (pedido del cliente: "como si algo
   destellara", igual que el video desenfocado del hero).
   Son dos capas de manchas de luz muy difusas que se desplazan y
   crecen despacio, cada una a su ritmo y en sentidos distintos: al
   cruzarse nunca repiten la misma figura, así que no se nota el
   bucle. Solo se animan transform y opacity (las dos propiedades que
   el navegador mueve en la tarjeta gráfica): no reflowean nada.
   overflow: hidden recorta las manchas al borde de la sección. */
.fondo-degradado { position: relative; overflow: hidden; }
/* El contenido queda por encima de las dos capas de luz */
.fondo-degradado > * { position: relative; z-index: 1; }
.fondo-degradado::before,
.fondo-degradado::after {
  content: "";
  position: absolute;
  inset: -25%;                     /* Se salen del marco: nunca se ve un canto */
  pointer-events: none;
  will-change: transform, opacity;
}
/* Los tonos NO son blanco ni verde vivo, sino los grises verdosos que
   deja el video desenfocado del hero: ahí lo que se ve son reflejos
   apagados, no luz limpia. Con blanco puro el efecto se salía del
   estilo de arriba. */
/* Capa 1: reflejo gris verdoso claro, el que más se nota */
.fondo-degradado::before {
  background:
    radial-gradient(46% 46% at 26% 24%, rgba(173, 206, 194, 0.3) 0%, transparent 66%),
    radial-gradient(36% 36% at 76% 62%, rgba(173, 206, 194, 0.16) 0%, transparent 66%);
  animation: brillo-fondo-1 19s ease-in-out infinite alternate;
}
/* Capa 2: verde azulado más oscuro, más lenta y en sentido contrario */
.fondo-degradado::after {
  background:
    radial-gradient(50% 50% at 78% 20%, rgba(86, 148, 128, 0.34) 0%, transparent 68%),
    radial-gradient(40% 40% at 16% 80%, rgba(86, 148, 128, 0.22) 0%, transparent 68%);
  animation: brillo-fondo-2 27s ease-in-out infinite alternate;
}
@keyframes brillo-fondo-1 {
  from { transform: translate3d(-5%, -3%, 0) scale(1);    opacity: 0.85; }
  to   { transform: translate3d(6%, 4%, 0)   scale(1.18); opacity: 1; }
}
@keyframes brillo-fondo-2 {
  from { transform: translate3d(4%, 3%, 0)   scale(1.12); opacity: 1; }
  to   { transform: translate3d(-6%, -4%, 0) scale(1);    opacity: 0.8; }
}

/* TODOS los textos en blanco puro (pedido del cliente). Sobre esta
   diagonal el verde claro se pierde en cuanto llega al verde vivo, y
   el gris de --texto-sobre-oscuro (85 %) se leía apagado.
   Los selectores llevan las dos clases porque las reglas de
   .fondo-oscuro están declaradas más abajo en este archivo y si no
   ganarían ellas. */
.fondo-oscuro .cabecera-seccion.titular-grande h2,
.fondo-oscuro.fondo-degradado .cabecera-seccion .lead,
.fondo-oscuro.fondo-degradado .eyebrow,
.fondo-degradado .tarjeta-foto-texto p { color: var(--color-blanco); }

/* Cabecera de sección: eyebrow + H2 + lead, centrados */
.cabecera-seccion { max-width: 42rem; margin: 0 auto var(--esp-12); text-align: center; }
.cabecera-seccion .lead { margin-inline: auto; }

/* ── BOTONES (radio 2px = firma de marca) ─────────────────────── */
.boton {
  display: inline-block;
  padding: var(--esp-3) var(--esp-8);
  border: 2px solid transparent;
  border-radius: var(--radio-sm);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicion);
}
/* Botón principal: verde vivo, oscurece al pasar el mouse */
.boton-primario {
  background: var(--color-primario);
  color: var(--color-blanco);
}
.boton-primario:hover { background: var(--color-primario-hover); }

/* Botón de contorno blanco: para fondos verdes oscuros */
.boton-contorno-blanco {
  background: transparent;
  color: var(--color-blanco);
  border-color: var(--color-blanco);
}
.boton-contorno-blanco:hover { background: rgba(255, 255, 255, 0.1); }

/* ── NAVEGACIÓN (fija, verde bosque) ──────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-secundario);
}
.nav-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);                       /* En móvil el espacio es escaso */
  min-height: 4rem;
}
/* Logo más grande, con versión de letras blancas (logo-blanco.png)
   y un brillo que recorre las líneas cada pocos segundos */
.nav-logo {
  position: relative;
  display: block;
  flex: 0 0 auto;                          /* CLAVE: nunca se encoge.
                                              Si se encoge, flexbox le quita
                                              ancho al PNG y el logo sale
                                              aplastado en el móvil. */
  overflow: hidden;                        /* Recorta el brillo al logo */
}
/* La altura acompaña al ancho de pantalla; el ancho siempre es
   automático + object-fit, así la proporción 1189×394 se respeta. */
.nav-logo img {
  height: clamp(1.875rem, 9vw, 3rem);
  width: auto;
  max-width: none;                         /* Anula el max-width:100% del reset */
  object-fit: contain;
  display: block;
}
/* Franja de luz diagonal que "barre" el logo (las líneas en movimiento).
   El PNG del logo se usa como MÁSCARA: así el brillo se ve solo sobre
   las letras y el trazo, nunca sobre el rectángulo transparente que las
   rodea (pedido del cliente 2026-08-03).
   Por eso la capa cubre todo el logo (inset: 0) y lo que se mueve es el
   degradado DENTRO de ella (background-position). Si moviéramos la capa,
   la máscara viajaría con ella y el recorte no cuadraría. */
.nav-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 0.85 y no 0.35: al recortar el brillo a las letras, la superficie
     iluminada es mucho menor y con poca opacidad no se notaba nada.
     El efecto se ve sobre todo en las letras VERDES ("GFW" y el trazo);
     sobre el texto blanco un brillo blanco no puede verse. */
  background: linear-gradient(105deg,
              transparent 38%,
              rgba(255, 255, 255, 0.85) 50%,
              transparent 62%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  /* auto 100% + left: la máscara sigue la ALTURA y mantiene la
     proporción del PNG. Con 100% 100% se deformaría si el enlace
     llegara a ser más ancho que la imagen. */
  -webkit-mask-image: url('../img/logo-blanco.png');
  -webkit-mask-size: auto 100%;
  -webkit-mask-position: left center;
  -webkit-mask-repeat: no-repeat;
          mask-image: url('../img/logo-blanco.png');
          mask-size: auto 100%;
          mask-position: left center;
          mask-repeat: no-repeat;
  animation: brillo-logo 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brillo-logo {
  0%   { background-position: 150% 0; }
  45%  { background-position: -50% 0; }    /* Barrido */
  100% { background-position: -50% 0; }    /* Pausa hasta el siguiente ciclo */
}

/* Lista de enlaces: oculta en móvil, se abre con el botón hamburguesa */
.nav-enlaces {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-enlaces a {
  display: block;
  padding: var(--esp-2) var(--esp-3);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--texto-sm);
  font-weight: 500;
  transition: var(--transicion);
}
/* Página activa Y hover: blanco + subrayado verde claro */
.nav-enlaces a.activo,
.nav-enlaces a:hover,
.nav-enlaces a:focus-visible {
  color: var(--color-blanco);
  box-shadow: inset 0 -2px 0 var(--color-primario-claro);
}
/* El botón "Kontakt" conserva su propio estilo, sin subrayado */
.nav-enlaces a.boton:hover,
.nav-enlaces a.boton:focus-visible { box-shadow: none; }

/* Selector de idioma DE | EN */
.nav-idioma {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex-shrink: 0;                          /* No se comprime en móvil */
  font-size: var(--texto-xs);              /* Compacto en móvil */
}
.nav-idioma a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  padding: var(--esp-1);
  transition: var(--transicion);
}
.nav-idioma a:hover { color: var(--color-blanco); }
.nav-idioma .idioma-activo { color: var(--color-blanco); font-weight: 700; }
.nav-idioma span { color: rgba(255, 255, 255, 0.4); }

/* Botón de contacto compacto: SOLO visible en móvil, porque ahí el
   botón del menú queda escondido tras la hamburguesa */
.nav-cta-movil {
  display: none;                           /* En pantallas muy estrechas (<380px)
                                              no cabe junto al logo; ahí el
                                              Kontakt está dentro del menú.
                                              Se muestra desde 380px. */
  flex-shrink: 0;
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--texto-sm);
  white-space: nowrap;
}

/* Botón hamburguesa (solo visible en móvil).
   44×44px = área táctil mínima recomendada. */
.nav-hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--esp-2) * -1);   /* Alinea el icono con el borde */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-hamburguesa span {
  width: 24px;
  height: 2px;
  background: var(--color-blanco);
  transition: var(--transicion);
}

/* Menú móvil desplegado (la clase .abierto la pone main.js) */
.nav-enlaces.abierto {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-secundario);
  padding: var(--esp-2) var(--esp-4) var(--esp-6);
  box-shadow: var(--sombra-xl);
  /* Si el menú no cabe (pantalla baja u horizontal), se desplaza */
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-enlaces.abierto li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
/* Enlaces cómodos de tocar con el dedo (mínimo 44px de alto) */
.nav-enlaces.abierto a {
  padding: var(--esp-3) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--texto-base);
}
/* En el menú móvil los enlaces ocupan todo el ancho: sin subrayado en hover */
.nav-enlaces.abierto a:hover,
.nav-enlaces.abierto a:focus-visible { box-shadow: none; }
/* El botón "Kontakt" del menú ocupa todo el ancho y se separa */
.nav-enlaces.abierto li:last-child { border-top: 0; }
.nav-enlaces.abierto .boton {
  justify-content: center;
  margin-top: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  color: var(--color-blanco);
}

/* ── HERO (solo en el inicio) ─────────────────────────────────── */
/* VIDEO de fondo con "velo" de tonos verdes encima (pedido del
   cliente). Si el video no carga, se ve el degradado de marca.
   El hero ocupa casi toda la pantalla y el texto se apoya ABAJO
   (pedido del cliente 2026-08-03: "el hero debe bajar un poco"). */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;                   /* ← el texto se apoya abajo */
  overflow: hidden;                        /* Recorta el video al borde */
  min-height: calc(100svh - 4rem);         /* Pantalla menos la barra de navegación */
  background: linear-gradient(135deg, var(--color-secundario) 0%, var(--color-primario) 100%);
  color: var(--color-blanco);
  padding-block: var(--esp-20) var(--esp-16);
}
/* El video cubre todo el hero sin deformarse */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* En escritorio (≥1200px) el video NO llena todo el hero: se reduce y
   se corre a la derecha para que el rótulo "GERMANY" quede AL LADO del
   bloque de texto y no detrás (pedido del cliente 2026-08-03).
   El tamaño se ata al ancho de la ventana (vw) y no a su altura, así
   el rótulo cae siempre en el mismo sitio.
   right: 0 — el video queda ENTERO dentro de la pantalla. Antes se salía
   8vw por la derecha y el cliente veía la imagen cortada.
   La máscara son dos degradados RECTOS cruzados (no una elipse): así se
   ve el cuadro completo del video, esquinas incluidas, y solo una franja
   estrecha del borde se funde con el fondo. Con una elipse se recortaba
   demasiada imagen; sin máscara se veía el canto recto del rectángulo.
   Por la derecha no se difumina: ahí el video termina en el borde de la
   pantalla.
   OJO: solo dentro de .hero (la portada). Las demás páginas usan la
   misma clase .hero-video dentro de .cabecera-pagina y ahí el video
   debe seguir cubriendo toda la franja. */
@media (min-width: 1200px) {
  .hero .hero-video {
    inset: auto;
    top: 50%;
    right: 0;
    width: 62vw;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 26%),
      linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 26%),
      linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-composite: intersect;
  }
}
/* Capa de relleno: el fondo del hero, a pantalla completa y muy
   desenfocado. Como el video nítido ya no llena el hero (se achicó para
   dejar el rótulo al lado del texto), esta capa cubre el resto de la
   superficie (pedido del cliente 2026-08-03: "el video debe llenar toda
   la página"). El desenfoque es fuerte a propósito: así el rótulo no se
   lee dos veces.
   Solo hace falta en escritorio; abajo el video principal ya cubre todo.

   RENDIMIENTO — LA HISTORIA DE ESTA CAPA (tres vueltas):
   · Al principio era el MISMO video de inicio.mp4 repetido a pantalla
     completa con filter: blur(44px). Carísimo: desenfocar toda la
     pantalla 30 veces por segundo + decodificar el video dos veces.
     La página iba a tirones en escritorio.
   · Después (2026-08-03) fue un JPEG con el desenfoque ya hecho. Barato,
     pero el cliente notó DOS cosas (2026-08-18): se veía pixelado (el
     JPEG era de 480 px y muy comprimido, estirado a toda la pantalla) y
     ya no se movía como antes.
   · AHORA es un VIDEO con el desenfoque YA COCIDO dentro del archivo:
     assets/video/hero-fondo-blur.mp4 (640 px, ~340 KB). Se mueve igual
     que el video nítido de al lado (es la misma toma) y no cuesta casi
     nada: no hay ningún filter en tiempo real y decodificar 640 px
     desenfocados es trivial. El poster (JPEG, también regenerado a
     640 px y mejor calidad) tapa el hueco mientras el video llega.
   Para regenerarlos si algún día cambia el video, desde assets/:
     ffmpeg -y -i video/inicio.mp4 \
       -vf "scale=640:-2,gblur=sigma=14:steps=3" \
       -c:v libx264 -profile:v high -pix_fmt yuv420p -crf 28 \
       -preset slow -an -movflags +faststart video/hero-fondo-blur.mp4
     ffmpeg -y -ss 3 -i video/inicio.mp4 -frames:v 1 \
       -vf "scale=640:-2,gblur=sigma=14:steps=3" -q:v 3 \
       img/hero-fondo-blur.jpg
   El sigma va calculado para el ancho del archivo (640 px): al
   estirarse a pantalla completa equivale a los ~44 px de antes. */
.hero-fondo-blur { display: none; }
@media (min-width: 1200px) {
  .hero-fondo-blur {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                   /* Llena la pantalla sin deformar */
    /* El mismo fotograma como fondo del propio <video>: se ve algo
       desde el primer instante, incluso antes de que cargue el poster. */
    background: url('../img/hero-fondo-blur.jpg') center / cover no-repeat;
  }
}
/* Velo verde translúcido SOBRE el video: le da los tonos de marca
   y garantiza que el texto se lea bien.
   Bajado de 80%/70% a 70%/40% (pedido del cliente 2026-08-03: "el filtro
   verde un poco más suave") y de ahí a 40%/20% (mismo cliente, más
   tarde ese día: en el hero el verde seguía tapando el video).
   El extremo flojo (20%) cae abajo a la derecha, justo donde está el
   video, así se ve mejor la imagen.
   La sombra de abajo sí sube un poco (65 % → 78 %): al aflojar el velo
   diagonal se quedaba sin respaldo justo donde arranca el bloque de
   texto. Sube solo hasta donde llega el texto; el cielo, que es la
   parte que se veía verde de más, queda libre.
   OJO: aquí van tonos propios y no los del velo de la secuencia
   (.revelacion-mascara, al 70 %): ese está aprobado como está y no
   debe moverse con este. */
.hero-velo {
  position: absolute;
  inset: 0;
  background:
    /* Sombra extra abajo: el texto se apoya ahí y debe leerse siempre */
    linear-gradient(to top, var(--color-secundario) -10%, transparent 78%),
    linear-gradient(135deg, var(--color-secundario-40) 0%, var(--color-primario-20) 100%);
}
/* El texto queda por encima del video y del velo.
   width:100% es imprescindible: dentro de un flex el contenedor se
   encogería a su contenido y el texto no quedaría alineado con el
   logo del nav. */
.hero .contenedor { position: relative; z-index: 1; width: 100%; }

/* ── FRANJA DE MARCAS ALIADAS (carrusel infinito) ─────────────── */
/* Banda verde bosque con los logos blancos de los aliados
   desplazándose en bucle. Se pausa al pasar el mouse. */
.franja-marcas {
  background: var(--color-secundario);
  /* Dos líneas finas: separan la banda de las secciones oscuras
     vecinas ahora que toda la parte baja de la portada va en verde */
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--esp-8);
  overflow: hidden;
}
.cinta-logos {
  display: flex;
  align-items: center;
  gap: var(--esp-10);                      /* En móvil los logos van más juntos */
  width: max-content;                      /* El ancho lo dan los logos */
  /* 60s: la cinta ahora lleva 10 logos (antes 4), así la velocidad
     visual queda parecida a la de antes */
  animation: desplazar-logos 60s linear infinite;
}
.cinta-logos:hover { animation-play-state: paused; }
.cinta-logos img {
  height: 2.5rem;
  width: auto;
  max-width: none;                         /* Sin deformarse (igual que el logo) */
  flex-shrink: 0;
  opacity: 0.9;
}

/* El HTML repite el juego de logos DOS veces; al desplazar -50%
   el segundo juego ocupa el lugar del primero = bucle perfecto */
@keyframes desplazar-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── REVELADO AL HACER SCROLL ─────────────────────────────────── */
/* main.js añade .revelar a tarjetas y bloques, y .visible cuando
   entran en pantalla → aparecen subiendo con fundido (como los
   fadeInUp de la página de referencia). Sin JS no pasa nada:
   el contenido se ve normal. */
.revelar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0, 0, 0.2, 1);
}
.revelar.visible { opacity: 1; transform: none; }

/* ── CABECERA DE PÁGINA INTERIOR ──────────────────────────────── */
/* Franja con el título de cada página. Lleva el mismo VIDEO de
   fondo que el hero, con un velo verde SUAVE encima (el título
   sigue siendo lo protagonista). */
.cabecera-pagina {
  position: relative;
  overflow: hidden;                        /* Recorta el video al borde */
  background: var(--color-secundario);     /* Respaldo si no carga el video */
  padding-block: var(--esp-12);            /* Móvil; crece en tablet/escritorio */
}
.cabecera-pagina .contenedor { position: relative; z-index: 1; }
/* Botón de aplicar dentro de la cabecera */
.boton-cabecera { display: inline-block; margin-top: var(--esp-8); }
/* Velo verde suave (uniforme, menos intenso que el del hero) */
.velo-suave { background: var(--color-secundario-80); }
.cabecera-pagina .eyebrow { color: var(--color-primario-claro); }
.cabecera-pagina h1 {
  color: var(--color-blanco);
  font-size: clamp(1.75rem, 4vw + 0.75rem, var(--texto-6xl));
  margin-bottom: var(--esp-2);
}
.cabecera-pagina p {
  color: var(--texto-sobre-oscuro);
  font-size: var(--texto-lg);
  max-width: 40rem;
  margin: 0;
}

/* ── FOTOS DE CONTENIDO ───────────────────────────────────────── */
.foto {
  width: 100%;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}
/* Retrato sobre fondo tinte (PNG transparente, p. ej. equipo) */
.foto-retrato {
  background: var(--color-tinte);
  border-radius: var(--radio-lg);
  border-top: 4px solid var(--color-primario);
}
.pie-foto {
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}
/* El verde de marca, pero con una sombra corta detrás: este rótulo cae
   en la parte ALTA del hero, donde el velo es flojo y el video puede
   traer cielo claro. Sin la sombra desaparece justo ahí (se vio al
   bajar el velo a 40/20). El resto del texto del hero no la necesita:
   va abajo, sobre el degradado ya opaco. */
.hero .eyebrow {
  color: var(--color-primario-claro);
  text-shadow: 0 1px 3px rgba(0, 30, 17, 0.85);
}
/* Algo menor que el H1 general: así el bloque de texto es más
   compacto y se apoya más abajo, como pidió el cliente. */
.hero h1 {
  color: var(--color-blanco);
  max-width: 44rem;
  font-size: clamp(1.875rem, 4vw + 0.5rem, 3.25rem);
}
.hero p {
  font-size: var(--texto-lg);
  color: var(--texto-sobre-oscuro);
  max-width: 38rem;
  margin-bottom: var(--esp-8);
}
/* En móvil los botones van uno debajo de otro y a todo el ancho;
   a partir de 480px vuelven a ponerse en fila (ver responsive). */
.hero-botones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--esp-4);
}
.hero-botones .boton { text-align: center; }

/* ── TARJETAS DE SERVICIO ─────────────────────────────────────── */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);          /* 1 columna en móvil */
  gap: var(--esp-6);
}
.tarjeta {
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);                 /* Móvil; en tablet crece a esp-8 */
  box-shadow: var(--sombra-sm);
  transition: var(--transicion);
}
/* Al pasar el mouse la tarjeta "se levanta" (regla de marca) */
.tarjeta:hover {
  box-shadow: var(--sombra-xl);
  transform: translateY(-4px);
  border-color: var(--color-primario-20);
}
.tarjeta h3 { font-size: var(--texto-xl); margin-bottom: var(--esp-2); }
.tarjeta p { margin: 0; font-size: var(--texto-sm); color: var(--color-gris-500); }

/* Tarjeta-enlace: tarjeta completa clicable (accesos del inicio) */
a.tarjeta-enlace { display: block; text-decoration: none; }
a.tarjeta-enlace .enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-primario);
}
a.tarjeta-enlace .enlace-flecha svg { stroke: var(--color-primario); }

/* Chip de icono: cuadrado verde suave con SVG verde dentro */
.chip-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-lg);
  background: var(--color-tinte);
  margin-bottom: var(--esp-6);
}
.chip-icono svg { stroke: var(--color-primario); }

/* ── SECCIÓN DOS COLUMNAS (Equipo / Estrategia) ───────────────── */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-10);
  align-items: center;
}

/* Marcador de posición de imagen: rectángulo suave hasta tener fotos.
   Cuando tengas la foto real, reemplaza el div por:
   <img src="assets/img/tu-foto.jpg" alt="descripción de la foto"> */
.imagen-pendiente {
  min-height: 200px;                     /* Móvil; 280px desde tablet */
  border-radius: var(--radio-lg);
  background: linear-gradient(to top, var(--color-secundario-70), var(--color-primario-10)),
              var(--color-tinte);
  display: flex;
  align-items: flex-end;
  padding: var(--esp-4);
}
.imagen-pendiente small { color: var(--color-blanco); font-size: var(--texto-xs); }

/* Lista con puntos de verificación verdes (sin usar el carácter ✓) */
.lista-checks { list-style: none; margin: var(--esp-6) 0 0; padding: 0; }
.lista-checks li {
  position: relative;
  padding-left: var(--esp-8);
  margin-bottom: var(--esp-3);
}
.lista-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primario);
  /* Check blanco dibujado en SVG dentro del círculo verde */
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-primario);
}

/* ── UBICACIONES (rejilla sobre fondo crema) ──────────────────── */
/* Dos niveles: tarjetas GRANDES verde bosque para los países
   principales (Alemania y Malasia) y tarjetas blancas con icono
   para el resto. Todas comparten el borde superior verde, la
   firma de marca para tarjetas de datos. */
.rejilla-standorte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);              /* 1 columna en móvil */
  gap: var(--esp-6);
}

/* Tarjeta destacada: fondo verde bosque, texto blanco */
.tarjeta-standort-principal {
  position: relative;
  overflow: hidden;                        /* Recorta el globo decorativo */
  background: var(--color-secundario);
  border-top: 4px solid var(--color-primario);
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
  box-shadow: var(--sombra-sm);
  transition: var(--transicion);
}
.tarjeta-standort-principal:hover { box-shadow: var(--sombra-xl); transform: translateY(-4px); }
.tarjeta-standort-principal h3 {
  color: var(--color-blanco);
  font-size: var(--texto-2xl);
  margin: var(--esp-6) 0 var(--esp-2);
}
.tarjeta-standort-principal p {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-sobre-oscuro);
  max-width: 24rem;
  position: relative;                      /* Por encima del globo decorativo */
}

/* Fila superior de la tarjeta destacada: chip de icono + insignia */
.standort-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
}
/* Variante del chip para fondos oscuros: vidrio blanco translúcido */
.chip-icono-oscuro { background: rgba(255, 255, 255, 0.1); margin-bottom: 0; }
.chip-icono-oscuro svg { stroke: var(--color-primario-claro); }

/* Insignia "Kernstandort": píldora con contorno verde */
.badge-standort {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primario-claro);
  border: 1px solid var(--color-primario);
  border-radius: var(--radio-full);
  padding: var(--esp-1) var(--esp-3);
  white-space: nowrap;
}

/* Globo decorativo gigante en la esquina (opacidad baja permitida
   por la guía de marca para motivos de decoración) */
.standort-decoracion {
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 10rem;
  height: 10rem;
  stroke: var(--color-blanco);
  opacity: 0.08;
  pointer-events: none;                    /* No interfiere con clics */
}

/* Tarjeta secundaria: blanca, con icono y región */
.tarjeta-standort {
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-top: 4px solid var(--color-primario);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra-sm);
  transition: var(--transicion);
}
.tarjeta-standort:hover { box-shadow: var(--sombra-xl); transform: translateY(-4px); }
.tarjeta-standort h3 { font-size: var(--texto-lg); margin: var(--esp-4) 0 0; }
.tarjeta-standort .region {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}
.tarjeta-standort .chip-icono { margin-bottom: 0; }

/* ── WARUM DEUTSCHLAND (rejilla 2×2 + banner) ─────────────────── */
/* Variante de la rejilla de tarjetas con máximo 2 columnas */
.rejilla-tarjetas-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);              /* 1 columna en móvil */
  gap: var(--esp-6);
}

/* Banner ancho "Natürliche Schönheit": foto de ciudad alemana con el
   degradado verde encima (regla de marca: nunca la foto sola).
   Para cambiar la foto, reemplaza la URL de abajo. */
.banner-degradado {
  margin-top: var(--esp-6);
  background:
    linear-gradient(135deg, var(--color-secundario-80) 0%, var(--color-primario-90) 100%),
    url('../img/hero-deutschland.jpg') center / cover no-repeat,
    var(--color-secundario);              /* Respaldo si la foto no carga */
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
}
.banner-degradado h3 { color: var(--color-blanco); margin-bottom: var(--esp-2); }
.banner-degradado p { margin: 0; color: var(--texto-sobre-oscuro); max-width: 46rem; }

/* ── LÍNEA DE TIEMPO NUMERADA (¿Para quién es el programa?) ───── */
/* Lista vertical: círculo numerado + línea conectora verde suave */
.linea-tiempo {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 46rem;                        /* Lectura cómoda, centrada */
}
.linea-tiempo li {
  position: relative;
  padding-left: 3.5rem;                    /* Espacio para el círculo (móvil) */
  padding-bottom: var(--esp-8);
}
.linea-tiempo li:last-child { padding-bottom: 0; }
/* Línea vertical que conecta los círculos (no en el último) */
.linea-tiempo li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.25rem;                           /* Centro del círculo de 40px */
  top: 2.5rem;
  bottom: 0;
  width: 2px;
  background: var(--color-primario-20);
}
/* Círculo con el número del paso */
.numero-paso {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-tinte);
  border: 2px solid var(--color-primario);
  color: var(--color-primario);
  font-weight: 800;
  font-size: var(--texto-lg);
}
.linea-tiempo h3 { font-size: var(--texto-xl); margin: 0 0 var(--esp-2); padding-top: var(--esp-2); }
.linea-tiempo p { margin: 0; }

/* ── NIVELES ÖSD (círculos seleccionables A1–C1) ──────────────── */
/* Círculos solo con el nivel. Al hacer clic, main.js marca uno como
   .seleccionado (verde oscuro) y desmarca el anterior. */
.fila-niveles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;                 /* Círculos centrados */
  gap: var(--esp-4);
}
.nivel-circulo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;                      /* ← la forma de círculo */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-tinte);
  border: 2px solid var(--color-primario);
  font-family: var(--fuente);
  font-size: var(--texto-xl);
  font-weight: 800;
  color: var(--color-secundario);
  cursor: pointer;
  transition: var(--transicion);
}
/* Al pasar el mouse O al estar elegido: verde más oscuro con texto blanco */
.nivel-circulo:hover {
  box-shadow: var(--sombra-xl);
  transform: translateY(-4px);
  background: var(--color-secundario);
  border-color: var(--color-secundario);
  color: var(--color-blanco);
}
.nivel-circulo.seleccionado {
  background: var(--color-secundario);
  border-color: var(--color-secundario);
  color: var(--color-blanco);
}

/* ── PASTILLAS DE SERVICIOS (tarjetas OVALADAS del inicio) ────── */
/* El cliente pidió tarjetas ovaladas, no cuadros: borde totalmente
   redondeado (píldora) con punto de check verde al inicio. */
.lista-pastillas {
  display: flex;
  flex-wrap: wrap;                       /* Se acomodan solas por fila */
  justify-content: center;
  gap: var(--esp-4);
  list-style: none;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0;
}
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-full);      /* ← la forma ovalada */
  padding: var(--esp-3) var(--esp-6);
  box-shadow: var(--sombra-sm);
  color: var(--color-gris-700);
  font-weight: 500;
  transition: var(--transicion);
}
/* Círculo verde con check blanco al inicio de cada pastilla */
.pastilla::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-primario);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
/* Al pasar el mouse se eleva como las demás tarjetas de la marca */
.pastilla:hover {
  box-shadow: var(--sombra-xl);
  transform: translateY(-4px);
  border-color: var(--color-primario-20);
}

/* Párrafo centrado de ancho cómodo (presentación del inicio) */
.parrafo-centrado {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* Frase de cierre destacada bajo las pastillas */
.frase-cierre {
  text-align: center;
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--color-secundario);
  max-width: 40rem;
  margin: var(--esp-10) auto 0;
}

/* ── CROQUIS DE PAÍSES (sección de ubicaciones, SIN animación) ── */
/* Cada país se muestra como silueta verde (croquis) en una tarjeta.
   Siluetas: proyecto open-source "mapsicon" (MIT), teñidas con el
   verde oficial #0A8D38 en assets/img/croquis-*.svg */
.rejilla-croquis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-4);
}
.tarjeta-croquis {
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-lg);
  padding: var(--esp-4);
  text-align: center;
  box-shadow: var(--sombra-sm);
}
.tarjeta-croquis img {
  width: 100%;
  max-width: 6.5rem;
  height: auto;
  margin-inline: auto;
}
.tarjeta-croquis h3 { font-size: var(--texto-base); margin: var(--esp-2) 0 0; }
.tarjeta-croquis .ciudad {
  margin: var(--esp-1) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}
/* Variante de la insignia "Kernstandort" para tarjetas claras */
.badge-standort-claro { color: var(--color-primario); }

/* Cifra destacada (p. ej. "200+ Aktive Projekte weltweit") */
.cifra {
  font-size: var(--texto-5xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--color-primario);
  margin-top: var(--esp-8);
}
.cifra-pie {
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}

/* ── BANNER CTA (franja final de cada página) ─────────────────── */
/* Collage de rostros sobre fondo verde como textura de cierre.
   La capa verde oscura al 80 % va ENCIMA del collage para que la
   información (título y botón) siga siendo lo protagonista.
   Si el archivo del collage no existe aún, se ve el verde sólido. */
.cta-banner {
  text-align: center;
  background:
    linear-gradient(var(--color-secundario-80), var(--color-secundario-80)),
    url('../img/rostros-collage.jpg') center / cover no-repeat,
    var(--color-secundario);              /* Respaldo sin imagen */
}
.cta-banner h2 { color: var(--color-blanco); }
.cta-banner p {
  color: var(--texto-sobre-oscuro);
  max-width: 36rem;
  margin: 0 auto var(--esp-8);
}

/* ── CONTACTO ─────────────────────────────────────────────────── */
.campo { margin-bottom: var(--esp-6); }
.campo label {
  display: block;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-secundario);
  margin-bottom: var(--esp-2);
}
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: var(--esp-3) var(--esp-4);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  color: var(--color-gris-800);
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-300);
  border-radius: var(--radio-md);
  transition: var(--transicion);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--color-gris-400); }
/* Foco: borde y halo verdes */
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-primario-20);
}
/* Estado de error (la clase la pone main.js al validar) */
.campo.con-error input, .campo.con-error textarea { border-color: var(--color-error); }
.campo .mensaje-error {
  display: none;
  font-size: var(--texto-sm);
  color: var(--color-error-oscuro);
  margin-top: var(--esp-1);
}
.campo.con-error .mensaje-error { display: block; }

/* Aviso de éxito tras "enviar" el formulario */
.aviso-exito {
  display: none;
  background: var(--color-exito-fondo);
  border: 1px solid var(--color-exito-borde);
  border-radius: var(--radio-md);
  color: var(--color-exito);
  padding: var(--esp-4);
  margin-top: var(--esp-4);
  font-weight: 500;
}
.aviso-exito.visible { display: block; }

/* Aviso de error si el envío falla: mismo patrón, tono rojo */
.aviso-error {
  display: none;
  background: var(--color-error-fondo);
  border: 1px solid var(--color-error-borde);
  border-radius: var(--radio-md);
  color: var(--color-error-oscuro);
  padding: var(--esp-4);
  margin-top: var(--esp-4);
  font-weight: 500;
}
.aviso-error.visible { display: block; }
.aviso-error a { color: inherit; }

/* En móvil el botón de enviar ocupa todo el ancho (más fácil de tocar);
   desde 480px vuelve a su ancho natural. */
#formulario-contacto .boton { display: block; width: 100%; text-align: center; }

/* Los botones del hero llegan con #formulario-contacto en la URL: el
   margen evita que la barra de navegación pegajosa tape el título del
   formulario al aterrizar. */
#formulario-contacto { scroll-margin-top: 6rem; }

/* Bloque de datos de contacto (columna derecha) */
.datos-contacto { list-style: none; margin: var(--esp-6) 0 0; padding: 0; }
.datos-contacto li { margin-bottom: var(--esp-4); }
.datos-contacto strong { display: block; color: var(--color-secundario); font-size: var(--texto-sm); }

/* ── MAPA INCRUSTADO (Google Maps en kontakt.html) ─────────────── */
/* El iframe llena el contenedor; el aspect-ratio evita que la altura
   salte mientras carga. Vertical en móvil, más ancho desde tablet. */
.mapa-incrustado {
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.mapa-incrustado iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 768px) {
  .mapa-incrustado { aspect-ratio: 16 / 10; }
}

/* ── BOTÓN FLOTANTE DE WHATSAPP ───────────────────────────────── */
/* Círculo fijo abajo a la derecha, en todas las páginas.
   · El verde #25D366 es el OFICIAL DE WHATSAPP (marca ajena). Por eso
     no está en tokens.css, que solo guarda los colores de GFW.
   · El número de teléfono se configura en assets/js/main.js. */
.boton-whatsapp {
  position: fixed;
  right: var(--esp-4);
  bottom: var(--esp-4);
  /* En iPhone deja libre la barra inferior del sistema */
  bottom: calc(var(--esp-4) + env(safe-area-inset-bottom));
  z-index: 60;                             /* Por encima del nav (z-index 50) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: var(--transicion);
}
.boton-whatsapp svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: var(--color-blanco);
}
/* Se eleva al pasar el mouse, igual que las tarjetas de la marca */
.boton-whatsapp:hover {
  background: #1EBE5A;
  transform: translateY(-4px);
  box-shadow: var(--sombra-xl);
}

/* ── FOOTER (verde bosque, multicolumna) ──────────────────────── */
.footer {
  /* Un punto más hundido que las secciones: cierra la página sin
     necesitar un corte de color */
  background: var(--color-secundario-oscuro);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--texto-sobre-oscuro);
  padding-block: var(--esp-16) var(--esp-8);
  font-size: var(--texto-sm);
}
.footer-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-8);
  margin-bottom: var(--esp-10);
}
.footer-logo { height: 2.5rem; width: auto; margin-bottom: var(--esp-4); }
.footer h4 {
  color: var(--color-blanco);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--esp-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--esp-2); }
.footer a {
  color: var(--texto-sobre-oscuro-suave);
  text-decoration: none;
  transition: var(--transicion);
}
.footer a:hover { color: var(--color-blanco); }
/* Línea legal inferior */
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--esp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  justify-content: space-between;
  color: var(--texto-sobre-oscuro-suave);
}
.footer-legal ul { display: flex; gap: var(--esp-6); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
/* El CSS de arriba es el de MÓVIL (mobile first): estos bloques solo
   AÑADEN aire y columnas conforme la pantalla crece. */

/* Móvil normal (≥380px): ya cabe el botón Kontakt en la barra */
@media (min-width: 380px) {
  .nav-cta-movil { display: inline-block; }
}

/* Móvil grande / horizontal (≥480px) */
@media (min-width: 480px) {
  .contenedor { padding-inline: var(--esp-6); }
  .nav-interior { gap: var(--esp-3); }
  .nav-idioma { font-size: var(--texto-sm); }
  /* Los botones del hero vuelven a la fila, ya caben */
  .hero-botones { flex-direction: row; flex-wrap: wrap; align-items: center; }
  #formulario-contacto .boton { display: inline-block; width: auto; }
  /* Footer a dos columnas; el bloque del logo ocupa la fila entera */
  .footer-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-columnas > :first-child { grid-column: 1 / -1; }
}

/* Tablet y superior */
@media (min-width: 768px) {
  .seccion { padding-block: var(--esp-28); }        /* Más aire en pantallas grandes */
  /* El texto del hero baja aún más en pantallas grandes */
  .hero { min-height: calc(100svh - 4.5rem); padding-block: var(--esp-28) var(--esp-20); }
  .eyebrow { letter-spacing: 0.25em; }              /* Espaciado de marca completo */
  /* Botón de WhatsApp algo mayor y más separado del borde */
  .boton-whatsapp {
    width: 3.75rem;
    height: 3.75rem;
    right: var(--esp-6);
    bottom: calc(var(--esp-6) + env(safe-area-inset-bottom));
  }
  .cabecera-pagina { padding-block: var(--esp-28); }  /* Franja verde más alta */
  .rejilla-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-tarjetas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2×2 fijo */
  /* Ubicaciones en tablet: 2 columnas (destacadas arriba, resto 2×2) */
  .rejilla-standorte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-columnas { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .footer-columnas > :first-child { grid-column: auto; }  /* Anula lo de 480px */
  .tarjeta { padding: var(--esp-8); }
  .imagen-pendiente { min-height: 280px; }
  /* Carrusel de aliados con su tamaño original */
  .franja-marcas { padding-block: var(--esp-10); }
  .cinta-logos { gap: var(--esp-20); }
  .cinta-logos img { height: 3.5rem; }
  /* Línea de tiempo con círculos de 48px */
  .linea-tiempo li { padding-left: 4.5rem; padding-bottom: var(--esp-10); }
  .linea-tiempo li:not(:last-child)::before { left: 1.5rem; top: 3rem; }
  .numero-paso { width: 3rem; height: 3rem; }
}

/* Escritorio */
@media (min-width: 1024px) {
  .rejilla-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Ubicaciones en escritorio: 4 columnas; las destacadas ocupan 2 */
  .rejilla-standorte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarjeta-standort-principal { grid-column: span 2; }
}

/* Menú completo en barra: hacen falta ~1200px porque el sitio pasó de
   5 a 7 secciones (Mission, Lösungen, Partnerschaften, Warum
   Deutschland, ÖSD, Partner werden, Standorte). Por debajo de ese
   ancho el menú vive dentro de la hamburguesa. */
@media (min-width: 1200px) {
  .nav-interior { gap: var(--esp-4); min-height: 4.5rem; }
  /* En escritorio el menú siempre está visible y el hamburguesa se oculta */
  .nav-hamburguesa { display: none; }
  .nav-cta-movil { display: none; }        /* Ya está el botón del menú */
  .nav-enlaces {
    display: flex;
    gap: var(--esp-2);
    position: static;
    padding: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  /* Si el menú quedó abierto en móvil y se gira/agranda la pantalla,
     debe volver a ser una barra normal y no un desplegable flotante */
  .nav-enlaces.abierto {
    display: flex;
    position: static;
    padding: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  .nav-enlaces.abierto a {
    display: block;
    min-height: 0;
    padding: var(--esp-2) var(--esp-3);
    font-size: var(--texto-sm);
  }
  .nav-enlaces.abierto .boton {
    display: inline-block;
    margin-top: 0;
    padding: var(--esp-3) var(--esp-8);
  }
  .nav-enlaces li { border: 0 !important; }
  .nav-idioma a { padding: var(--esp-1) var(--esp-2); }
}

/* Usuarios que prefieren menos movimiento: sin animaciones */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .tarjeta:hover, .tarjeta-standort:hover,
  .tarjeta-standort-principal:hover, .pastilla:hover,
  .boton-whatsapp:hover { transform: none; }
  /* El contenido se muestra sin efecto de aparición */
  .revelar { opacity: 1 !important; transform: none !important; }
  /* Sin video en movimiento: queda el degradado verde de fondo.
     La capa .hero-fondo-blur SÍ se queda: desde 2026-08-03 es una
     imagen fija, no un video, así que no mueve nada y evita que el
     hero se quede desnudo. */
  .hero-video { display: none; }
  /* Los logos quedan estáticos y centrados */
  .cinta-logos { width: 100%; flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOQUE 2 — COMPONENTES DE LA VERSIÓN 2026-08
   ───────────────────────────────────────────────────────────────
   Añadidos para los textos nuevos del cliente (Mission, Lösungen,
   Strategische Partnerschaften, Warum Deutschland, ÖSD, Partner
   werden). Mismas reglas de marca que el bloque de arriba:
   botones 2px · tarjetas 8px · eyebrows verdes · una transición.
═══════════════════════════════════════════════════════════════ */

/* ── NAV AL BAJAR (main.js pone .nav-compacta) ────────────────── */
/* Al alejarse del inicio la barra gana sombra y una línea verde
   inferior: se despega del contenido sin cambiar de sitio. */
.nav { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.nav-compacta {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid var(--color-primario-40);
}

/* ── BARRA DE PROGRESO DE LECTURA ─────────────────────────────── */
/* Línea verde finísima bajo el nav que avanza con el scroll.
   El ancho lo escribe main.js en --avance. */
.progreso-scroll {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 55;                             /* Sobre el nav (50) */
  transform-origin: 0 50%;
  transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, var(--color-primario), var(--color-primario-claro));
  pointer-events: none;
}

/* ── HERO: CONTENIDO ESCALONADO Y FLECHA ──────────────────────── */
/* Las líneas del hero entran una tras otra al cargar la página.
   .listo la pone main.js cuando el DOM está preparado. */
.hero-contenido > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0, 0, 0.2, 1);
}
.hero.listo .hero-contenido > *          { opacity: 1; transform: none; }
/* Sin JavaScript, .listo no llega nunca y el texto del hero se
   quedaba INVISIBLE. Aquí se muestra sin animación. */
@media (scripting: none) {
  .hero-contenido > * { opacity: 1; transform: none; }
}
.hero.listo .hero-contenido > :nth-child(1) { transition-delay: 0.05s; }
.hero.listo .hero-contenido > :nth-child(2) { transition-delay: 0.18s; }
.hero.listo .hero-contenido > :nth-child(3) { transition-delay: 0.31s; }
.hero.listo .hero-contenido > :nth-child(4) { transition-delay: 0.44s; }
.hero.listo .hero-contenido > :nth-child(5) { transition-delay: 0.57s; }

/* Fila de datos bajo los botones del hero (separada por una línea) */
.hero-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-6) var(--esp-10);
  max-width: 44rem;                        /* Alineada con el titular */
  margin-top: var(--esp-10);
  padding-top: var(--esp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-datos div { min-width: 7rem; }
.hero-datos strong {
  display: block;
  font-size: var(--texto-2xl);
  font-weight: 800;
  color: var(--color-blanco);
  line-height: 1.1;
}
.hero-datos span {
  font-size: var(--texto-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-sobre-oscuro-suave);
}

/* Flecha animada abajo del hero: invita a seguir bajando */
.hero-flecha {
  position: absolute;
  left: 50%;
  bottom: var(--esp-6);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: var(--color-blanco);
  animation: flotar 2.4s ease-in-out infinite;
}
.hero-flecha svg { stroke: currentColor; }
.hero-flecha:hover { background: rgba(255, 255, 255, 0.12); }
@keyframes flotar {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* ── TRÍO DE VALORES (Vertrauen · Kompetenz · Partnerschaften) ── */
.trio-valores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--esp-4) var(--esp-8);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.trio-valores li {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--color-secundario);
  letter-spacing: -0.01em;
}
/* Punto verde separador entre valores (no en el primero) */
.trio-valores li:not(:first-child)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primario);
}

/* ── TARJETA DE VALOR (rejilla "Warum GFW Malaysia?") ─────────── */
/* Tarjeta limpia con número grande de fondo, icono verde y texto
   corto. Sin emojis: la guía de marca pide iconos de línea. */
.rejilla-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
}
.tarjeta-valor {
  position: relative;
  overflow: hidden;
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-lg);
  padding: var(--esp-8) var(--esp-6) var(--esp-6);
  box-shadow: var(--sombra-sm);
  transition: var(--transicion);
}
.tarjeta-valor:hover {
  box-shadow: var(--sombra-xl);
  transform: translateY(-4px);
  border-color: var(--color-primario-20);
}
/* Línea verde que crece de izquierda a derecha al pasar el mouse */
.tarjeta-valor::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--color-primario);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tarjeta-valor:hover::after { transform: scaleX(1); }
/* Número grande y muy tenue en la esquina */
.tarjeta-valor .indice {
  position: absolute;
  top: var(--esp-2);
  right: var(--esp-4);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primario);
  opacity: 0.08;
  pointer-events: none;
}
.tarjeta-valor h3 { font-size: var(--texto-xl); margin-bottom: var(--esp-2); }
.tarjeta-valor p { margin: 0; color: var(--color-gris-500); font-size: var(--texto-sm); }
/* Sobre fondo oscuro (sección "Warum GFW" del cierre) */
.fondo-oscuro .tarjeta-valor {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.fondo-oscuro .tarjeta-valor h3 { color: var(--color-blanco); }
.fondo-oscuro .tarjeta-valor p  { color: var(--texto-sobre-oscuro); }
.fondo-oscuro .chip-icono { background: rgba(255, 255, 255, 0.1); }
.fondo-oscuro .chip-icono svg { stroke: var(--color-primario-claro); }
.fondo-oscuro .cabecera-seccion h2 { color: var(--color-blanco); }
/* Blanco puro y no el blanco al 85 %: el cliente lo veía "gris" */
.fondo-oscuro .cabecera-seccion .lead { color: var(--color-blanco); }
.fondo-oscuro .eyebrow { color: var(--color-primario-claro); }

/* ── CABECERA EN TAMAÑO "SLIDE" ───────────────────────────────── */
/* Pedido del cliente: que el H2 de la sección pese lo mismo que los
   titulares de la secuencia del inicio (.revelacion-titular), no el
   H2 normal. Misma fórmula de tamaño, letra y espaciado exactos.
   Se ensancha la caja: con 42rem un titular de 4,5rem se parte en
   demasiadas líneas. */
.cabecera-seccion.titular-grande { max-width: 54rem; }
.cabecera-seccion.titular-grande h2 {
  font-size: clamp(2.375rem, 6.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* Verde claro, no el verde bosque de los demás H2: el cliente lo
     quiere EXACTAMENTE igual que "wir gestalten Zukunft." de la
     secuencia de arriba (.revelacion-cierre .marca-frase span).
     Contraste sobre fondo claro ≈ 3,2:1: válido para texto grande
     (mínimo 3:1), pero justo. No usar este modificador en textos
     pequeños. */
  color: var(--color-primario-claro);
}

/* ── TARJETA-FOTO (rejilla "Warum GFW Malaysia?") ─────────────── */
/* Referencia pedida por el cliente: las fichas de accenture.com.
   Formato vertical (600×848), la foto ocupa toda la tarjeta y sólo
   se ve el rótulo; el párrafo entra al pasar el ratón.
   El texto NO se esconde nunca en pantallas sin ratón (móvil,
   tablet): allí no hay hover y se quedaría inaccesible. */
.rejilla-fotos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
}
.tarjeta-foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 600 / 848;             /* Mismo formato que la referencia */
  border-radius: var(--radio-sm);
  background: var(--color-secundario); /* Se ve mientras carga la foto */
}
.tarjeta-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.tarjeta-foto:hover img,
.tarjeta-foto:focus-visible img { transform: scale(1.06); }

/* Velo verde de marca, sólo donde hace falta: fuerte arriba (el
   rótulo es blanco y las fotos traen cielo y camisas claras) y casi
   nulo en el centro, para que la foto se vea en color. */
.tarjeta-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 42, 26, 0.85) 0%,
              rgba(0, 42, 26, 0.35) 30%,
              rgba(0, 42, 26, 0.05) 55%,
              rgba(0, 42, 26, 0.45) 100%);
}

.tarjeta-foto-contenido {
  position: relative;                  /* Por encima del velo */
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--esp-6);
}
/* Segundo velo, sólo al pasar el ratón: sube desde abajo y oscurece
   la mitad inferior. Sin él el párrafo cae sobre caras y papel
   blanco y no se lee. Va aquí (y no en la tarjeta) porque .tarjeta-
   foto-contenido crea contexto de apilado: con z-index -1 queda
   sobre la foto pero debajo del texto. */
.tarjeta-foto-contenido::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              rgba(0, 42, 26, 0) 18%,
              rgba(0, 42, 26, 0.92) 92%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.tarjeta-foto:hover .tarjeta-foto-contenido::before,
.tarjeta-foto:focus-visible .tarjeta-foto-contenido::before,
.tarjeta-foto:focus-within .tarjeta-foto-contenido::before { opacity: 1; }

.tarjeta-foto .indice {
  display: block;
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-primario-claro);
  margin-bottom: var(--esp-3);
}
.tarjeta-foto h3 {
  margin: 0;
  font-size: var(--texto-xl);
  color: var(--color-blanco);
  text-wrap: balance;
}
/* El párrafo vive abajo del todo y sube al aparecer */
.tarjeta-foto-texto {
  margin-top: auto;
  padding-top: var(--esp-6);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.tarjeta-foto-texto p {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-sobre-oscuro);
}
.tarjeta-foto:hover .tarjeta-foto-texto,
.tarjeta-foto:focus-visible .tarjeta-foto-texto,
.tarjeta-foto:focus-within .tarjeta-foto-texto {
  opacity: 1;
  transform: none;
}
/* Línea verde inferior, igual que en .tarjeta-valor */
.tarjeta-foto-contenido::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--color-primario);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tarjeta-foto:hover .tarjeta-foto-contenido::after,
.tarjeta-foto:focus-visible .tarjeta-foto-contenido::after { transform: scaleX(1); }

.tarjeta-foto:focus-visible {
  outline: 3px solid var(--color-primario-claro);
  outline-offset: 3px;
}

/* Sin ratón (táctil): el texto se ve siempre y la tarjeta crece un
   poco de alto para que quepa sin apretar el titular. */
@media (hover: none) {
  .tarjeta-foto { aspect-ratio: 3 / 4; }
  .tarjeta-foto-texto { opacity: 1; transform: none; }
  .tarjeta-foto-contenido::before { opacity: 1; }
}

/* ── PROCESO INTERACTIVO (línea de tiempo horizontal) ─────────── */
/* "Beratung → Qualifikationsprüfung → … → Integration".
   Cada paso es un botón: al pulsarlo se rellena la línea verde y
   abajo aparece su descripción. main.js hace el cambio. */
.proceso { max-width: 64rem; margin-inline: auto; }

.proceso-pistas {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(5.5rem, 1fr);
  gap: 0;
  overflow-x: auto;                        /* En móvil se desliza con el dedo */
  scrollbar-width: none;
  padding-bottom: var(--esp-4);
}
.proceso-pistas::-webkit-scrollbar { display: none; }

/* Riel gris de fondo + relleno verde según el paso activo */
.proceso-pistas::before,
.proceso-pistas::after {
  content: "";
  position: absolute;
  top: 1.15rem;                            /* Centro de los círculos */
  left: 0;
  height: 2px;
  pointer-events: none;
}
.proceso-pistas::before { right: 0; background: var(--color-gris-200); }
.proceso-pistas::after {
  width: var(--relleno, 0%);
  background: var(--color-primario);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.proceso-paso {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  background: none;
  border: 0;
  padding: 0 var(--esp-1);
  font-family: var(--fuente);
  font-size: var(--texto-xs);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--color-gris-500);
  cursor: pointer;
  transition: var(--transicion);
}
/* Círculo numerado de cada paso */
.proceso-paso span[data-punto] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--color-blanco);
  border: 2px solid var(--color-gris-200);
  color: var(--color-gris-400);
  font-size: var(--texto-sm);
  font-weight: 800;
  transition: var(--transicion);
}
.proceso-paso:hover { color: var(--color-secundario); }
.proceso-paso:hover span[data-punto] { border-color: var(--color-primario); color: var(--color-primario); }
/* Pasos ya recorridos: círculo verde suave */
.proceso-paso.hecho span[data-punto] {
  background: var(--color-tinte);
  border-color: var(--color-primario);
  color: var(--color-primario);
}
/* Paso activo: círculo verde lleno y texto oscuro */
.proceso-paso.activo { color: var(--color-secundario); }
.proceso-paso.activo span[data-punto] {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-blanco);
  transform: scale(1.12);
  box-shadow: 0 0 0 6px var(--color-primario-10);
}

/* Panel con la explicación del paso elegido */
.proceso-detalle {
  margin-top: var(--esp-8);
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-left: 4px solid var(--color-primario);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra-sm);
  min-height: 8.5rem;
}
.proceso-detalle .eyebrow { margin-bottom: var(--esp-2); }
.proceso-detalle h3 { font-size: var(--texto-xl); margin-bottom: var(--esp-2); }
.proceso-detalle p { margin: 0; color: var(--color-gris-500); }
/* Fundido corto al cambiar de paso (main.js quita y pone .cambiando) */
.proceso-detalle.cambiando { opacity: 0; transform: translateY(6px); }
.proceso-detalle { transition: opacity 0.25s ease, transform 0.25s ease; }

/* Sobre fondo oscuro (la portada va toda en verde desde 2026-08):
   riel y círculos en claro, panel de "cristal" como las tarjetas
   de .fondo-oscuro. Los estados activo/hecho ya funcionan: verde
   vivo sobre oscuro se ve bien. */
.fondo-oscuro .proceso-pistas::before { background: rgba(255, 255, 255, 0.18); }
.fondo-oscuro .proceso-pistas::after  { background: var(--color-primario-claro); }
.fondo-oscuro .proceso-paso { color: var(--texto-sobre-oscuro); }
.fondo-oscuro .proceso-paso span[data-punto] {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--texto-sobre-oscuro);
}
.fondo-oscuro .proceso-paso:hover { color: var(--color-blanco); }
.fondo-oscuro .proceso-paso:hover span[data-punto] {
  border-color: var(--color-primario-claro);
  color: var(--color-primario-claro);
}
.fondo-oscuro .proceso-paso.hecho span[data-punto] {
  background: rgba(31, 163, 71, 0.18);
  border-color: var(--color-primario-claro);
  color: var(--color-primario-claro);
}
.fondo-oscuro .proceso-paso.activo { color: var(--color-blanco); }
.fondo-oscuro .proceso-paso.activo span[data-punto] {
  box-shadow: 0 0 0 6px rgba(31, 163, 71, 0.18);
}
.fondo-oscuro .proceso-detalle {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  border-left-color: var(--color-primario-claro);
  box-shadow: none;
}
.fondo-oscuro .proceso-detalle h3 { color: var(--color-blanco); }
.fondo-oscuro .proceso-detalle p  { color: var(--color-blanco); }
/* El aviso móvil "Zum Blättern wischen" (definido en el bloque
   responsive) también pasa a claro */
.fondo-oscuro .proceso-pistas + .proceso-detalle::before {
  color: var(--texto-sobre-oscuro-suave);
}

/* ── TARJETAS DE SOLUCIÓN (5 áreas de "Unsere Lösungen") ──────── */
.rejilla-soluciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
}
.tarjeta-solucion {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
  box-shadow: var(--sombra-sm);
  text-decoration: none;
  transition: var(--transicion);
}
.tarjeta-solucion:hover {
  box-shadow: var(--sombra-xl);
  transform: translateY(-6px);
  border-color: var(--color-primario-20);
}
/* Velo verde muy suave que sube al pasar el mouse */
.tarjeta-solucion::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  background: linear-gradient(to top, var(--color-tinte), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tarjeta-solucion:hover::before { opacity: 1; }
.tarjeta-solucion > * { position: relative; }
.tarjeta-solucion .titulo-solucion {
  font-size: var(--texto-xl);
  font-weight: 700;
  color: var(--color-secundario);
  margin: 0 0 var(--esp-2);
  letter-spacing: -0.02em;
}
.tarjeta-solucion .claim {
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--color-primario);
  margin-bottom: var(--esp-3);
}
.tarjeta-solucion p { color: var(--color-gris-500); font-size: var(--texto-sm); margin: 0; }
.tarjeta-solucion .enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  /* auto = el enlace se pega abajo, así todas las tarjetas de una
     fila lo tienen a la misma altura aunque el texto varíe */
  margin-top: auto;
  padding-top: var(--esp-6);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-primario);
}
.tarjeta-solucion .enlace-flecha svg {
  stroke: var(--color-primario);
  transition: var(--transicion);
}
.tarjeta-solucion:hover .enlace-flecha svg { transform: translateX(4px); }

/* Sobre fondo oscuro: tarjeta de "cristal" (mismo lenguaje que
   .fondo-oscuro .tarjeta-valor), texto en claro y acentos en el
   verde claro de marca. */
.fondo-oscuro .tarjeta-solucion {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.fondo-oscuro .tarjeta-solucion:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(31, 163, 71, 0.55);
  box-shadow: none;
}
/* El velo que sube al pasar el mouse: en verde translúcido, no en
   el tinte claro (que aquí brillaría como una pantalla) */
.fondo-oscuro .tarjeta-solucion::before {
  background: linear-gradient(to top, rgba(31, 163, 71, 0.16), transparent 60%);
}
.fondo-oscuro .tarjeta-solucion .titulo-solucion { color: var(--color-blanco); }
/* Claims y enlaces son texto PEQUEÑO: el verde claro normal se queda
   en ~2,8:1 sobre el cristal → verde legible (≥4,5:1) */
.fondo-oscuro .tarjeta-solucion .claim { color: var(--color-primario-legible); }
.fondo-oscuro .tarjeta-solucion p { color: var(--color-blanco); }
.fondo-oscuro .tarjeta-solucion .enlace-flecha { color: var(--color-primario-legible); }
.fondo-oscuro .tarjeta-solucion .enlace-flecha svg { stroke: var(--color-primario-legible); }

/* ── BLOQUES TEMÁTICOS CON FOTO (Warum Deutschland / ÖSD) ─────── */
/* Foto grande + velo verde + título y texto encima. Sin emojis,
   como pidió el cliente: solo tipografía y una buena imagen. */
.rejilla-temas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
}
.tema {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 20rem;
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
  color: var(--color-blanco);
  background: var(--color-secundario);
  isolation: isolate;
}
/* La foto es un <img> real (así puede ir con loading="lazy" y no
   depende de rutas dentro del CSS) */
.fondo-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Velo verde: regla de marca, nunca la foto sola */
.tema::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
              var(--color-secundario-95) 0%,
              var(--color-secundario-70) 45%,
              var(--color-primario-40) 100%);
  transition: var(--transicion);
}
.tema:hover .fondo-foto { transform: scale(1.06); }
.tema:hover::after  { background: linear-gradient(to top,
              var(--color-secundario-95) 0%,
              var(--color-secundario-80) 55%,
              var(--color-primario-70) 100%); }
/* Variante sin fotografía: degradado de marca con una trama de
   puntos. Se ve igual de acabada que las que sí llevan foto, así
   el bloque queda uniforme mientras llegan las imágenes nuevas.
   Para poner una foto: añade <img class="fondo-foto" …> dentro y
   quita la clase .sin-foto. */
.tema.sin-foto {
  background:
    radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(150deg, var(--color-primario) -25%, var(--color-secundario) 72%);
}
.tema.sin-foto::after { background: linear-gradient(to top, var(--color-secundario-80) 0%, transparent 70%); }
.tema.sin-foto:hover::after { background: linear-gradient(to top, var(--color-secundario-80) 0%, var(--color-secundario-40) 80%); }

.tema h3 {
  color: var(--color-blanco);
  font-size: var(--texto-2xl);
  margin-bottom: var(--esp-3);
}
.tema p { color: var(--texto-sobre-oscuro); margin: 0; font-size: var(--texto-sm); }
.tema p + p { margin-top: var(--esp-3); }
/* Número de orden discreto arriba */
.tema .indice-tema {
  position: absolute;
  top: var(--esp-6);
  left: var(--esp-8);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--color-primario-claro);
}

/* ── BANNER EMOCIONAL (foto ancha con una sola frase) ─────────── */
.banner-emocional {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 26rem;
  background-color: var(--color-secundario);
  color: var(--color-blanco);
  padding-block: var(--esp-20);
}
/* Velo verde sobre la foto (la foto es el <img class="fondo-foto">) */
.banner-emocional::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg,
              var(--color-secundario-95) 5%,
              var(--color-secundario-60) 55%,
              var(--color-primario-40) 100%);
}
/* Variante para fotos muy movidas (p. ej. el collage de rostros):
   el velo tapa más y la imagen queda como textura de fondo. */
.banner-emocional.velo-denso::after {
  background: linear-gradient(120deg,
              var(--color-secundario-95) 10%,
              var(--color-secundario-80) 60%,
              var(--color-secundario-70) 100%);
}
/* Igual que en el hero: dentro de un flex hay que fijar el ancho */
.banner-emocional .contenedor { width: 100%; }
.banner-emocional h2 {
  color: var(--color-blanco);
  font-size: clamp(1.875rem, 4vw + 0.5rem, 3.25rem);
  max-width: 20ch;
  margin-bottom: var(--esp-6);
}
.banner-emocional p {
  color: var(--texto-sobre-oscuro);
  font-size: var(--texto-lg);
  max-width: 42rem;
}
.banner-emocional p:last-child { margin-bottom: 0; }

/* ── BANNER DE CIERRE: EL MISMO BANNER, A PANTALLA COMPLETA ───
   Se usa SOLO al final de la portada (index.html). Las otras tres
   páginas siguen con el banner-franja de arriba, sin tocar.

   Qué cambia respecto al banner normal:
     · la foto llena la pantalla entera, no una franja de 26 rem;
     · el titular se queda ARRIBA, no centrado;
     · la frase de marca sube desde abajo según se baja, y acaba
       viéndose a la vez que el titular, en una sola pantalla.

   Los selectores llevan las DOS clases a propósito
   (.banner-emocional.banner-cierre): las reglas del banner normal
   se repiten más abajo dentro de un @media, y con una sola clase
   ganarían ellas por ir después en el archivo. */
.banner-emocional.banner-cierre {
  display: block;
  min-height: 0;
  padding-block: 0;
  /* OJO: el banner normal lleva overflow: hidden, y un overflow
     recortado en un antepasado deja de pegar al hijo sticky. Aquí
     el recorte lo hace el lienzo, que es quien tiene la foto. */
  overflow: visible;
  isolation: auto;
}
/* El velo del banner normal cubriría todo el recorrido de scroll;
   aquí va sobre el lienzo, que es lo que de verdad se ve. */
.banner-emocional.banner-cierre::after { content: none; }

/* El lienzo solo sujeta: el fondo se ve cuando la escena se encoge
   y deja hueco alrededor. */
.banner-cierre .banner-lienzo {
  position: relative;
  background: var(--color-secundario);
}

/* La ESCENA es lo que se ve como panel y lo que después se va hacia
   atrás: lleva la foto, el velo y los dos bloques de texto. Todo lo
   que tiene que encogerse junto está aquí dentro. */
.banner-cierre .banner-escena {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Separación MÍNIMA entre el titular y la frase: en pantallas
     cortas (móvil apaisado, portátiles bajos) ya no cabe hueco
     libre y las dos cosas se pegarían hasta parecer un solo bloque. */
  gap: clamp(1.5rem, 5vh, 3.5rem);
  min-height: 100vh;
  min-height: 100svh;   /* móvil: descuenta las barras del navegador */
  /* Arriba, sitio para la navegación (que va pegada) y un poco de
     aire. Abajo va MUCHO más margen del que parece necesario, y es
     a propósito: la frase acaba el recorrido a un tercio del borde,
     no pegada a él. Si acabara abajo del todo solo se vería en el
     último tramo del scroll; así entra pronto y sube despacio
     durante casi todo el recorrido, que es el efecto que se busca. */
  padding-top: clamp(6.5rem, 15vh, 11rem);
  padding-bottom: clamp(2.5rem, 14vh, 10rem);
}
/* Velo verde sobre la foto. Dos capas: la diagonal de marca (la
   misma del banner normal) y un oscurecido de abajo, que es por
   donde entra la frase y hay que poder leerla. */
.banner-cierre .banner-escena::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
                var(--color-secundario-95) 0%,
                var(--color-secundario-70) 22%,
                transparent 55%),
    linear-gradient(120deg,
                var(--color-secundario-95) 5%,
                var(--color-secundario-60) 55%,
                var(--color-primario-40) 100%);
}

/* Con JavaScript: la sección se hace más alta que la pantalla y esa
   diferencia es el recorrido; el lienzo se queda quieto mientras
   tanto. La clase la pone main.js §18.
   Son DOS escenas seguidas, por eso hace falta casi el triple de
   recorrido que cuando solo subía la frase. */
.banner-emocional.banner-cierre.con-recorrido {
  height: 280vh;
  height: 280svh;
}
.banner-cierre.con-recorrido .banner-lienzo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.banner-cierre.con-recorrido .banner-escena {
  position: absolute;
  inset: 0;
  min-height: 0;
  /* 0 = panel a pantalla completa, 1 = encogido hacia el fondo.
     Se encoge desde el centro y con esquinas redondeadas: es lo que
     hace que se lea como "una capa que se va hacia atrás" y no como
     una foto mal recortada. */
  transform: scale(calc(1 - var(--fase-final, 0) * 0.17));
  border-radius: calc(var(--fase-final, 0) * 2.25rem);
  /* La sombra es lo que hace que se lea como una capa que se aleja y
     no como una foto que simplemente se ha hecho pequeña: sin ella,
     con el oscurecido encima, el borde casi no se distingue del
     fondo del lienzo. */
  box-shadow: 0 calc(var(--fase-final, 0) * 2.5rem)
              calc(var(--fase-final, 0) * 5rem) rgba(0, 0, 0, 0.45);
  will-change: transform;
}
/* Oscurecido que entra con el encogido: la escena pasa a ser fondo,
   y así el cierre que crece por delante se lee sin competencia. */
.banner-cierre.con-recorrido .banner-escena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--color-secundario);
  opacity: calc(var(--fase-final, 0) * 0.72);
}
/* Los textos del panel se apagan ANTES de que termine el encogido
   (de ahí el ×1.7): oscurecerlos no basta, se seguían leyendo por
   debajo del cierre y las dos capas de texto se pisaban. */
.banner-cierre.con-recorrido .banner-cierre-arriba,
.banner-cierre.con-recorrido .banner-cierre-abajo {
  opacity: max(0, calc(1 - var(--fase-final, 0) * 1.7));
}

.banner-cierre .banner-cierre-abajo {
  /* 0 = fuera de cuadro por abajo, 1 = en su sitio.
     El valor por defecto es 1 para que sin JavaScript (o con
     "menos movimiento") la frase se vea quieta y entera. */
  --avance: 1;
  transform: translateY(calc((1 - var(--avance)) * 38vh));
  will-change: transform;
}
/* La frase de marca va centrada en el resto del sitio; aquí no, que
   quedaría torcida respecto al titular. Misma alineación y mismo
   margen izquierdo que el bloque de arriba: las dos cosas se leen
   como una sola pantalla. */
.banner-cierre .banner-cierre-abajo .marca-frase {
  margin: 0;
  max-width: 30ch;
  text-align: left;
  font-size: clamp(1.5rem, 2.6vw + 0.5rem, 2.375rem);
  color: var(--color-blanco);
}
.banner-cierre .banner-cierre-abajo .marca-frase span {
  color: var(--color-primario-claro);
}

/* ── EL CIERRE QUE CRECE (firma + botones) ────────────────────
   En el flujo normal —sin JavaScript, con "menos movimiento" o en
   pantallas donde el efecto no cabe— es una sección corriente
   debajo del panel, verde y centrada. Es el estado que se ve si
   nada se activa, y por eso es el que va sin condiciones. */
.banner-cierre .banner-final {
  position: relative;
  z-index: 2;
  background: var(--color-secundario);
  padding-block: var(--esp-20);
  text-align: center;
}
.banner-cierre .firma-final {
  /* El suelo es 1.5rem y no más: con los márgenes estrechos del
     contenedor en móvil (1 rem), a 1.75rem la frase llegaba justa
     al borde y se leía apretada. */
  font-size: clamp(1.5rem, 3.4vw + 0.5rem, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-blanco);
  max-width: 24ch;
  margin: 0 auto var(--esp-10);
}
.banner-cierre .firma-final strong { color: var(--color-primario-claro); }

/* Con recorrido: deja de estar debajo y pasa a estar DELANTE de la
   escena, centrado en la pantalla, creciendo según se baja. */
.banner-cierre.con-recorrido .banner-final {
  position: absolute;
  inset: 0;
  display: grid;
  /* Centrado en vertical, pero a lo ancho el contenedor se estira:
     con "center" a secas se encogía a la anchura del texto y su
     padding lateral dejaba de contar, así que en móvil las líneas
     llegaban al borde de la pantalla. */
  align-content: center;
  justify-items: stretch;
  background: none;
  padding-block: 0;
  opacity: var(--fase-cierre, 0);
  transform: scale(calc(0.72 + var(--fase-cierre, 0) * 0.28));
  will-change: transform, opacity;
  /* Mientras no ha empezado a aparecer no existe para nadie: ni se
     ve, ni recibe clics, ni el tabulador se mete en unos botones
     invisibles. La clase la enciende main.js en cuanto asoma. */
  visibility: hidden;
}
.banner-cierre.con-recorrido.final-a-la-vista .banner-final {
  visibility: visible;
}

/* Ventanas bajas y anchas (portátiles de 720 px de alto, que son
   muchísimos): con los márgenes de siempre el panel se pasaba unos
   80 px de la pantalla y main.js §18 desactivaba el efecto. Aquí se
   aprieta lo justo para que quepa y el efecto siga funcionando.
   El min-width deja fuera al móvil vertical, que ya cabe. */
@media (min-width: 768px) and (max-height: 820px) {
  .banner-cierre .banner-escena {
    padding-top: 5.5rem;
    padding-bottom: 3rem;
    gap: 1.5rem;
  }
  .banner-cierre .banner-cierre-arriba h2 { font-size: 2.5rem; }
  .banner-cierre .banner-cierre-abajo .marca-frase { font-size: 1.75rem; }
  .banner-cierre .firma-final { font-size: 2.25rem; }
}

/* ── CIERRE TRANQUILO (mucho blanco, dos frases grandes) ──────── */
.cierre { text-align: center; }
.cierre .frase-grande {
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-secundario);
  max-width: 22ch;
  margin: 0 auto var(--esp-6);
}
/* La segunda línea, en verde vivo */
.cierre .frase-grande em { font-style: normal; color: var(--color-primario); display: block; }
.cierre .firma {
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--color-gris-500);
  margin: var(--esp-10) 0 var(--esp-8);
}
.cierre .firma strong { color: var(--color-secundario); font-weight: 700; }

/* Tres declaraciones ("Gemeinsam schaffen wir Möglichkeiten." …) */
.declaraciones {
  list-style: none;
  margin: 0 auto var(--esp-10);
  padding: 0;
  max-width: 46rem;
}
.declaraciones li {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-secundario);
  padding-block: var(--esp-3);
}
.declaraciones li + li { border-top: 1px solid var(--color-gris-200); }
/* Sobre fondo oscuro.
   OJO: la sección suele llevar las dos clases en el MISMO elemento
   (<section class="seccion fondo-oscuro cierre">), así que aquí no
   puede ir ".fondo-oscuro .cierre …": no habría descendencia. */
.fondo-oscuro .declaraciones li { color: var(--color-blanco); border-color: rgba(255, 255, 255, 0.15); }
.fondo-oscuro .frase-grande { color: var(--color-blanco); }
.fondo-oscuro .frase-grande em { color: var(--color-primario-claro); }
.fondo-oscuro .firma { color: var(--texto-sobre-oscuro); }
.fondo-oscuro .firma strong { color: var(--color-blanco); }
.fondo-oscuro .pie-foto { color: var(--texto-sobre-oscuro-suave); }

/* ── CIFRAS QUE CUENTAN AL APARECER ───────────────────────────── */
.rejilla-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-8) var(--esp-4);
  text-align: center;
}
.cifra-bloque .valor {
  display: block;
  font-size: clamp(2.25rem, 4vw + 0.5rem, var(--texto-5xl));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primario);
}
.cifra-bloque .etiqueta {
  display: block;
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}
.fondo-oscuro .cifra-bloque .valor { color: var(--color-primario-claro); }
.fondo-oscuro .cifra-bloque .etiqueta { color: var(--texto-sobre-oscuro-suave); }

/* ── PARTNERS ESTRATÉGICOS (tarjetas + filtro) ────────────────── */
.filtros-partner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-10);
}
.filtro {
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-full);
  padding: var(--esp-2) var(--esp-6);
  font-family: var(--fuente);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-gris-600);
  cursor: pointer;
  transition: var(--transicion);
}
.filtro:hover { border-color: var(--color-primario); color: var(--color-primario); }
.filtro.activo {
  background: var(--color-secundario);
  border-color: var(--color-secundario);
  color: var(--color-blanco);
}

.rejilla-partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
}
.tarjeta-partner {
  display: flex;
  flex-direction: column;
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-top: 4px solid var(--color-primario);
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
  box-shadow: var(--sombra-sm);
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.3s ease;
}
.tarjeta-partner:hover { box-shadow: var(--sombra-xl); transform: translateY(-4px); }
/* Oculta por el filtro (main.js) */
.tarjeta-partner.filtrada { display: none; }
.tarjeta-partner .categoria {
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primario);
  margin-bottom: var(--esp-3);
}
.tarjeta-partner h3 { font-size: var(--texto-lg); margin-bottom: var(--esp-3); }
.tarjeta-partner p { font-size: var(--texto-sm); color: var(--color-gris-500); margin: 0; }
/* Documento adjunto (Empfehlungsschreiben, MOU…) */
.tarjeta-partner .documento {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-6);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--color-secundario);
}
.tarjeta-partner .documento svg { stroke: var(--color-primario); flex-shrink: 0; }

/* ── MAPA MUNDIAL INTERACTIVO ─────────────────────────────────── */
/* Fondo: el mismo mapa de la presentación corporativa del Grupo
   (assets/img/weltkarte.png, silueta con fondo transparente). Se usa
   como MÁSCARA CSS, así el color sale de tokens.css y funciona igual
   sobre el verde bosque de la web que sobre un fondo claro.
   Encima van los marcadores redondos y las líneas animadas. */
.mapa-mundial {
  position: relative;
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  aspect-ratio: 2714 / 1190;               /* Proporción del PNG original */
}
/* ⚠️ El mapa es un <img> de verdad, NO una máscara CSS.
   Motivo: al abrir el sitio con doble clic (protocolo file://)
   Chrome bloquea mask-image y el mapa desaparecía; solo se veían
   los puntos y las líneas. Con <img> + filter se ve siempre.
   brightness(0) invert(1) = silueta blanca conservando el alpha. */
.mapa-tierra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;                        /* El contenedor ya tiene la proporción */
  filter: brightness(0) invert(1);
  opacity: 0.22;
  pointer-events: none;
}
/* Sobre fondos claros: silueta oscura muy tenue */
.fondo-blanco .mapa-tierra,
.fondo-gris .mapa-tierra,
.fondo-tinte .mapa-tierra,
.fondo-crema .mapa-tierra { filter: brightness(0); opacity: 0.13; }
/* Líneas animadas entre las regiones. El viewBox del SVG es
   "0 0 100 43.85": el eje X va en % directos del ancho del mapa y el
   eje Y en % multiplicados por 0.4385 (la proporción del PNG). Así
   las coordenadas del HTML coinciden con las de los marcadores. */
.mapa-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa-lineas path {
  fill: none;
  /* Blanco translúcido: el verde de marca sobre el verde bosque del
     fondo no daba contraste suficiente para verse. */
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 0.18;
  stroke-linecap: round;
  stroke-dasharray: 0.5 0.85;
  animation: fluir-linea 2.2s linear infinite;
}
.fondo-blanco .mapa-lineas path,
.fondo-gris .mapa-lineas path,
.fondo-tinte .mapa-lineas path,
.fondo-crema .mapa-lineas path { stroke: var(--color-primario); }
@keyframes fluir-linea { to { stroke-dashoffset: -2.7; } }

/* Marcador: punto verde con halo que late. Los % vienen del HTML. */
/* --x / --y las escribe cada marcador en su atributo style */
.marcador {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-primario-claro);
  box-shadow: 0 0 0 3px rgba(31, 163, 71, 0.25);
  cursor: pointer;
  transition: var(--transicion);
}
.marcador::after {                         /* Halo que late */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--color-primario-claro);
  animation: latir 2.6s ease-out infinite;
}
@keyframes latir {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* Sedes propias: marcador mayor y en blanco */
.marcador.sede {
  width: 18px;
  height: 18px;
  background: var(--color-blanco);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.marcador.sede::after { border-color: var(--color-blanco); }
.marcador:hover, .marcador.activo { transform: translate(-50%, -50%) scale(1.35); }
/* Etiqueta del país junto al punto. Como en la presentación del
   Grupo, cada una se coloca a un lado distinto (n/e/w/s) para que no
   se pisen: en el Sudeste Asiático los países quedan muy juntos. */
.marcador .etiqueta-mapa {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-blanco);
  background: var(--color-secundario-95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radio-full);
  padding: 2px 10px;
  opacity: 0;
  pointer-events: none;
  transition: var(--transicion);
}
/* Posiciones alternativas (la clase va en el <span>) */
.etiqueta-mapa.et-e {
  left: calc(100% + 9px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
.etiqueta-mapa.et-w {
  left: auto;
  right: calc(100% + 9px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
.etiqueta-mapa.et-s {
  bottom: auto;
  top: calc(100% + 9px);
}
.marcador:hover .etiqueta-mapa,
.marcador.activo .etiqueta-mapa,
.marcador:focus-visible .etiqueta-mapa {
  opacity: 1;
  border-color: var(--color-primario-claro);
}
/* Sobre fondos claros la etiqueta se invierte */
.fondo-blanco .etiqueta-mapa,
.fondo-gris .etiqueta-mapa,
.fondo-tinte .etiqueta-mapa,
.fondo-crema .etiqueta-mapa {
  color: var(--color-secundario);
  background: var(--color-blanco);
  border-color: var(--color-gris-200);
  box-shadow: var(--sombra-sm);
}

/* Panel de texto que acompaña al mapa */
.mapa-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  min-height: 9rem;
}
.mapa-panel .eyebrow { color: var(--color-primario-claro); margin-bottom: var(--esp-2); }
.mapa-panel h3 { color: var(--color-blanco); font-size: var(--texto-xl); margin-bottom: var(--esp-2); }
.mapa-panel p { color: var(--texto-sobre-oscuro); margin: 0; font-size: var(--texto-sm); }

/* Píldoras de países bajo el mapa: mismo efecto que los puntos.
   En móvil son la forma cómoda de elegir país (los puntos de Asia
   quedan demasiado juntos en pantallas pequeñas). */
.mapa-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2);
  list-style: none;
  margin: var(--esp-8) 0 0;
  padding: 0;
}
.chip-pais {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radio-full);
  padding: var(--esp-2) var(--esp-4);
  font-family: var(--fuente);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--texto-sobre-oscuro);
  cursor: pointer;
  transition: var(--transicion);
}
.chip-pais:hover { border-color: var(--color-primario-claro); color: var(--color-blanco); }
.chip-pais.activo {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-blanco);
  font-weight: 600;
}
/* Punto blanco delante de las sedes propias */
.chip-pais.sede::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--esp-2);
  border-radius: 50%;
  background: var(--color-blanco);
  vertical-align: middle;
}

/* Leyenda del mapa */
.mapa-leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-6);
  margin-top: var(--esp-8);
  font-size: var(--texto-sm);
  color: var(--texto-sobre-oscuro-suave);
}
.mapa-leyenda span { display: inline-flex; align-items: center; gap: var(--esp-2); }
.mapa-leyenda i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primario-claro);
}
.mapa-leyenda i.sede { background: var(--color-blanco); }

/* ── ACORDEÓN (textos legales y preguntas) ────────────────────── */
.acordeon { max-width: 52rem; margin-inline: auto; }
.acordeon-item {
  border-bottom: 1px solid var(--color-gris-200);
}
.acordeon-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--esp-6) 0;
  font-family: var(--fuente);
  font-size: var(--texto-lg);
  font-weight: 600;
  text-align: left;
  color: var(--color-secundario);
  cursor: pointer;
  transition: var(--transicion);
}
.acordeon-boton:hover { color: var(--color-primario); }
/* Signo + que gira a × cuando el panel está abierto */
.acordeon-boton .signo {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  transition: var(--transicion);
}
.acordeon-boton .signo::before,
.acordeon-boton .signo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primario);
  transition: var(--transicion);
}
.acordeon-boton .signo::after { transform: rotate(90deg); }
.acordeon-boton[aria-expanded="true"] .signo { transform: rotate(135deg); }
/* Panel: se abre con una transición de altura (grid 0fr → 1fr) */
.acordeon-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.acordeon-panel > div { overflow: hidden; }
.acordeon-item.abierto .acordeon-panel { grid-template-rows: 1fr; }
.acordeon-panel p { color: var(--color-gris-600); }
.acordeon-panel > div > :last-child { margin-bottom: var(--esp-6); }

/* ── FRASE DE MARCA (cita grande centrada) ────────────────────── */
.marca-frase {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.375rem, 2.2vw + 0.5rem, 2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-secundario);
}
.marca-frase span { color: var(--color-primario); }
.fondo-oscuro .marca-frase { color: var(--color-blanco); }
.fondo-oscuro .marca-frase span { color: var(--color-primario-claro); }

/* ── BLOQUE DE TEXTO LARGO (Datenschutz / Impressum) ──────────── */
.texto-legal { max-width: 48rem; margin-inline: auto; }
.texto-legal h2 {
  font-size: var(--texto-xl);
  margin-top: var(--esp-12);
  padding-top: var(--esp-6);
  border-top: 1px solid var(--color-gris-200);
}
.texto-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texto-legal h3 { font-size: var(--texto-lg); margin-top: var(--esp-8); }
.texto-legal p { color: var(--color-gris-600); }
.texto-legal address {
  font-style: normal;
  color: var(--color-gris-700);
  background: var(--color-tinte);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
}
/* Índice lateral de secciones legales */
.indice-legal {
  list-style: none;
  margin: 0 0 var(--esp-10);
  padding: var(--esp-6);
  background: var(--color-gris-50);
  border-radius: var(--radio-lg);
  columns: 2;
  column-gap: var(--esp-8);
  font-size: var(--texto-sm);
}
.indice-legal li { margin-bottom: var(--esp-2); break-inside: avoid; }
.indice-legal a { color: var(--color-gris-600); text-decoration: none; }
.indice-legal a:hover { color: var(--color-primario); }

/* ── TARJETA DE DATOS (contacto, dirección, personas) ─────────── */
.tarjeta-datos {
  background: var(--color-blanco);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-lg);
  padding: var(--esp-8);
  box-shadow: var(--sombra-sm);
}
.tarjeta-datos h3 { font-size: var(--texto-lg); }
.lista-personas { list-style: none; margin: 0; padding: 0; }
.lista-personas li { padding-block: var(--esp-3); }
.lista-personas li + li { border-top: 1px solid var(--color-gris-200); }
.lista-personas strong { display: block; color: var(--color-secundario); }
.lista-personas span { font-size: var(--texto-sm); color: var(--color-gris-500); }

/* ── AVISO / NOTA DESTACADA ───────────────────────────────────── */
.nota {
  border-left: 4px solid var(--color-primario);
  background: var(--color-tinte);
  border-radius: 0 var(--radio-lg) var(--radio-lg) 0;
  padding: var(--esp-4) var(--esp-6);
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}
.nota p:last-child { margin-bottom: 0; }

/* ── UTILIDADES ───────────────────────────────────────────────── */
.centrado { text-align: center; }
.ancho-lectura { max-width: 46rem; margin-inline: auto; }
.mt-8  { margin-top: var(--esp-8); }
.mt-12 { margin-top: var(--esp-12); }
.sin-margen-abajo { margin-bottom: 0; }
/* Texto de introducción centrado y algo mayor bajo un H2 */
.entradilla {
  font-size: var(--texto-lg);
  color: var(--color-gris-600);
  max-width: 46rem;
  margin-inline: auto;
}
.fondo-oscuro .entradilla { color: var(--texto-sobre-oscuro); }
/* Grupo de botones centrado */
.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-4);
}
/* Botón de contorno verde para fondos claros */
.boton-contorno {
  background: transparent;
  color: var(--color-primario);
  border-color: var(--color-primario);
}
.boton-contorno:hover { background: var(--color-primario); color: var(--color-blanco); }

/* ── RESPONSIVE DEL BLOQUE 2 ──────────────────────────────────── */

/* Hasta 1199px el menú vive en la hamburguesa. El <nav> se queda sin
   ancho, así que hay que agrupar a la derecha idioma + Kontakt +
   hamburguesa; si no, space-between deja un hueco enorme junto al
   logo. (No se usa display:none en el <nav>: dentro está el menú
   desplegable.) */
@media (max-width: 1199px) {
  .nav-interior { justify-content: flex-start; }
  .nav-logo { margin-right: auto; }
  .nav-interior > nav { flex: 0 0 0; }
}

/* Solo móvil: aviso de que la línea de tiempo se desliza con el dedo
   y puntos del mapa algo menores (en Asia quedan muy juntos). */
@media (max-width: 767px) {
  .proceso-pistas + .proceso-detalle::before {
    content: "Zum Blättern seitlich wischen →";
    display: block;
    margin-bottom: var(--esp-3);
    font-size: var(--texto-xs);
    color: var(--color-gris-400);
  }
  .marcador { width: 11px; height: 11px; }
  .marcador.sede { width: 14px; height: 14px; }
}

@media (min-width: 480px) {
  .rejilla-cifras { gap: var(--esp-8); }
}

@media (min-width: 768px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-soluciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proceso-pistas { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .proceso-paso { font-size: var(--texto-sm); }
  .proceso-detalle { padding: var(--esp-8); }
  .tema { min-height: 24rem; }
  .banner-emocional { min-height: 32rem; padding-block: var(--esp-28); }
  .hero-datos { gap: var(--esp-10) var(--esp-16); }
  .tarjeta-solucion { padding: var(--esp-10) var(--esp-8); }
}

@media (min-width: 1024px) {
  .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* A partir de aquí el mapa es lo bastante ancho para mostrar TODAS
     las etiquetas a la vez, como en la presentación del Grupo. */
  .marcador .etiqueta-mapa { opacity: 0.72; }
  .marcador:hover .etiqueta-mapa,
  .marcador.activo .etiqueta-mapa { opacity: 1; }
  /* Las 5 soluciones: 3 arriba + 2 abajo, todas del mismo alto */
  .rejilla-soluciones { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rejilla-soluciones > * { grid-column: span 2; }
  .rejilla-soluciones > :nth-child(4),
  .rejilla-soluciones > :nth-child(5) { grid-column: span 3; }
  /* Mapa y panel lado a lado. El mapa se lleva la mayor parte: es
     una silueta apaisada (2,28:1) y necesita ancho para respirar. */
  .mapa-con-panel {
    display: grid;
    grid-template-columns: minmax(0, 3.4fr) minmax(0, 1fr);
    gap: var(--esp-8);
    align-items: center;
  }
  .tema { min-height: 26rem; }
}

/* Menos movimiento: se apagan los efectos nuevos también */
@media (prefers-reduced-motion: reduce) {
  .hero-contenido > * { opacity: 1 !important; transform: none !important; }
  .hero-flecha { animation: none; }
  .marcador::after { animation: none; }
  .mapa-lineas path { animation: none; }
  .tema:hover::before { transform: none; }
  .tarjeta-valor:hover, .tarjeta-solucion:hover, .tarjeta-partner:hover { transform: none; }
  /* Las manchas de luz se quedan quietas (el fondo no pierde nada) */
  .fondo-degradado::before,
  .fondo-degradado::after { animation: none; }
  /* La foto no hace zoom y el párrafo simplemente se queda visible */
  .tarjeta-foto:hover img { transform: none; }
  .tarjeta-foto-texto { opacity: 1; transform: none; }
  .tarjeta-foto-contenido::before { opacity: 1; }
  .progreso-scroll { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
   BLOQUE 3 — SECUENCIA DEL INICIO: DEL HERO AL TITULAR
   ───────────────────────────────────────────────────────────────
   Referencia pedida por el cliente: apple.com/de/macbook-pro,
   bloque .mask-container ("M5. M5 Pro. M5 Max.").

   QUÉ SE VE
   El hero se queda QUIETO y entero mientras se baja. Lo único que
   cambia es la palabra "Zukunft" del titular: lleva el video de Köln
   dentro y va creciendo hasta que uno se mete dentro de la "u" y el
   video ocupa la pantalla. Después llega el titular de la misión.

   DOS INTERRUPTORES
   · Estado base (lo que ves en este archivo primero): TODO estático.
     El hero es un hero normal, el recorte no existe y el titular va
     en flujo corriente. Es lo que se ve sin JavaScript o con
     "prefiero menos movimiento".
   · .con-secuencia: main.js la añade solo cuando ha podido medir la
     palabra y el navegador admite el recorte. Entonces sí: sección
     alta, lienzo pegajoso y todo el movimiento.
   Así el sitio nunca depende del efecto para poder leerse.

   CÓMO SE METE UN VIDEO DENTRO DE UNA PALABRA
   Con un <clipPath> de SVG que contiene la palabra escrita: recorta
   el video a la forma exacta de las letras y deja el resto
   TRANSPARENTE, así que el hero se sigue viendo alrededor. (El truco
   del multiply que usan las otras capas no vale aquí: pinta de negro
   todo lo que no es letra y taparía el hero.)
   El zoom se aplica al <g> de dentro del recorte, nunca al video: se
   agranda la forma de las letras y el video se queda quieto a
   pantalla completa. Eso es lo que da la sensación de acercarse y
   entrar en la letra, en vez de ampliar un trozo de imagen.

   POR QUÉ HAY DOS TITULARES AL FINAL
   El video es una toma al atardecer: dentro de unas letras pequeñas
   sus zonas oscuras no se leen. Por eso, en cuanto el zoom aterriza,
   encima del hueco aparece EL MISMO titular en blanco sólido y toma
   el relevo. Apple hace exactamente esto: su texto-máscara es
   decorativo (aria-hidden) y el titular bueno llega después.

   EL RECORRIDO (main.js §15)
       --fase-palabra   0.00 → 0.21   "Zukunft" crece y se entra
       --fase-video     (dentro de la anterior) el video se funde
                        dentro de las letras a mitad del zoom
       --fase-velo      0.27 → 0.33   entra la máscara del titular
       --fase-zoom      0.28 → 0.48   esa máscara se encoge al 1
       --fase-solido    0.49 → 0.545  el titular sólido releva
       --fase-subir     0.56 → 0.64   el titular sube y se queda arriba
       --fase-apoyo     0.70 → 0.755  entra "Internationale Zusammenarbeit"
       --fase-parrafo   0.79 → 0.845  entra "Mit Erfahrung, Vertrauen…"
       --fase-cierre    0.88 → 0.935  entra "Wir vermitteln nicht nur…"
       (0.935 → 1.00 sin cambios: pausa para leerlo antes de seguir)

   Los huecos entre tramos son a propósito: el titular llega arriba y
   se lee solo un rato antes de que caiga el primer texto, y entre
   texto y texto pasa lo mismo.

   EL TITULAR SUBE Y LOS TEXTOS LLEGAN DEBAJO
   El titular acaba con su borde superior al 12 % de la pantalla, y
   los textos se colocan de una vez justo debajo de donde va a quedar:
   sube él, ellos solo aparecen. Cuánto sube depende del alto de la
   pantalla y de si el titular ocupa dos líneas o tres, así que lo
   mide main.js y lo deja en --empuje-max (negativo) y --alto-titular.

   OJO: quien lleva el translateY es el TEXTO de cada capa, no la capa.
   .revelacion-mascara pinta el velo verde a pantalla completa; si se
   subiera entera, abajo quedaría una franja de video sin velo.
═══════════════════════════════════════════════════════════════ */

/* ── ESTADO BASE: sin efecto, todo legible ────────────────────── */
/* Fondo de la versión estática (sin JS o con "menos movimiento"):
   el mismo verde de marca del hero, no negro. */
.revelacion { position: relative; background: var(--color-secundario); }
.ventana-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ventana,
.revelacion-mascara { display: none; }

.revelacion-solido  { padding: var(--esp-28) var(--esp-4) var(--esp-8); }
.revelacion-textos  { padding: 0 var(--esp-6) var(--esp-28); }
.revelacion-parrafo { margin-top: var(--esp-8); }
.revelacion-cierre  { margin-top: var(--esp-10); }

.revelacion-solido,
.revelacion-apoyo,
.revelacion-parrafo,
.revelacion-cierre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.revelacion-titular {
  margin: 0;
  max-width: 18ch;                      /* ≈ dos líneas en escritorio */
  font-size: clamp(2.375rem, 6.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;                   /* Líneas de largo parecido */
  color: var(--color-blanco);
}
/* Mismo caso que el rótulo del hero: verde de marca sobre el video,
   que aquí puede traer cielo claro justo detrás. Sin la sombra se
   pierde (el titular no la necesita: es blanco y enorme). */
.revelacion-solido .eyebrow {
  color: var(--color-primario-claro);
  margin-bottom: var(--esp-4);
  text-shadow: 0 1px 3px rgba(0, 30, 17, 0.85);
}
.revelacion-apoyo .lead,
.revelacion-parrafo .lead {
  max-width: 40rem;
  margin: 0;
  color: var(--texto-sobre-oscuro);
}
@media (min-width: 768px) {
  .revelacion-apoyo .lead { font-size: var(--texto-xl); }
}
/* La frase de marca vive sobre el verde oscuro de la sección, así que
   va en claro (igual que en cualquier .fondo-oscuro del sitio). */
/* Cierra con el mismo peso visual que el titular: misma tipografía
   exacta que .revelacion-titular (pedido del cliente: "la misma
   medida, el salto de línea da igual"). Por eso NO lleva max-width en
   ch: se le deja el ancho de lectura y que rompa donde caiga. */
.revelacion-cierre .marca-frase {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.375rem, 6.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-blanco);
}
.revelacion-cierre .marca-frase span { color: var(--color-primario-claro); }

/* La palabra del titular del hero: algo mayor que el resto de la
   frase, para que se note que es la protagonista y para que el video
   de dentro tenga sitio donde verse. */
.palabra-video { font-size: 1.2em; }

/* ═══ CON JAVASCRIPT: la secuencia completa ═════════════════════ */

.revelacion.con-secuencia {
  --fase-palabra: 1;
  --fase-video: 1;
  /* Este arranca en 1 y no en su valor final, al revés que el resto:
     si por lo que sea main.js pone la clase y no llega a pintar, más
     vale que se quede el hero entero que una pantalla verde vacía. */
  --fase-hero: 1;
  --fase-velo: 1;
  --fase-zoom: 1;
  --fase-solido: 1;
  --fase-subir: 1;
  --fase-apoyo: 1;
  --fase-parrafo: 1;
  --fase-cierre: 1;

  /* Adónde sube el titular una vez aterrizado (--empuje-max, negativo)
     y cuánto mide, para colocar los textos justo debajo. Los dos los
     escribe main.js, porque dependen del alto real de la pantalla. */
  --empuje-max: 0px;
  --alto-titular: 9rem;

  /* Cuánto llega a agrandarse la máscara del titular: basta con que
     una letra tape la pantalla. (El zoom de la palabra del hero es
     mucho mayor y lo calcula main.js, porque el recorte es SVG y no
     se puede expresar aquí.) */
  --zoom-max: 8;

  height: 860vh;                        /* Recorrido de las 7 escenas */
}

/* El "escenario": se queda pegado justo debajo de la barra de
   navegación, con la misma altura que tenía el hero antes.
   isolation: isolate encierra el multiply aquí dentro; si no, se
   mezclaría con lo que haya detrás en la página. */
.con-secuencia .revelacion-lienzo {
  position: sticky;
  top: 4rem;                            /* Alto de la barra de navegación */
  height: calc(100svh - 4rem);
  overflow: hidden;
  isolation: isolate;

  /* Lo que ha subido ya el titular. Se define aquí para que las dos
     capas del titular (hueco y sólido) lo hereden igual. */
  --empuje: calc(var(--empuje-max) * var(--fase-subir));
}

/* El hero pasa a ser una capa, pero por dentro sigue igual */
.con-secuencia > .revelacion-lienzo > .hero {
  position: absolute;
  inset: 0;
  min-height: 0;
  /* El aire de ARRIBA se recorta; el de abajo se deja intacto.
     Como el bloque de texto se apoya abajo (align-items: flex-end),
     el de arriba no se ve nunca: solo servía de colchón. Recortarlo
     es lo que hace que el hero quepa de una vez en pantallas de
     portátil (1280×800, 1024×768), donde si no el efecto tenía que
     apagarse por 65 px. El aspecto del hero no cambia. */
  padding-block: 1rem var(--esp-20);

  /* Se apaga ANTES de que la máscara se abra, para que el video de
     Köln no llegue a verse por encima de él (ver main.js §15). */
  opacity: var(--fase-hero);
}
@media (min-width: 1200px) {
  .con-secuencia > .revelacion-lienzo > .hero { padding-block: 1rem var(--esp-20); }
}

/* ── VENTANAS BAJAS: el hero se compacta para que el efecto quepa ──
   AÑADIDO 2026-08-18. main.js apaga TODA la secuencia si el hero no
   cabe entero en la pantalla (heroCabe, §15). Medido: el contenido
   del hero son ~705 px, así que en ventanas de menos de ~770 px el
   efecto desaparecía sin más. Es justo el caso de Safari en macOS:
   su ventana por defecto NO va maximizada y se queda por debajo de
   ese umbral — por eso "en Safari no sale la animación" mientras en
   Chrome (maximizado) sí. Remedio: en pantallas bajas se aprietan
   los aires y las cifras del hero, y en las muy bajas también baja
   un punto el titular. Va por media query de ALTURA y no ligado a
   .con-secuencia: así heroCabe mide exactamente lo que se va a ver
   y el aspecto no salta al activarse el efecto. */
@media (max-height: 800px) {
  .hero p { margin-bottom: var(--esp-6); }
  .hero-datos { margin-top: var(--esp-6); padding-top: var(--esp-4); }
  .con-secuencia > .revelacion-lienzo > .hero { padding-block: 1rem var(--esp-10); }
  /* Los textos del cierre también se aprietan: si no, el último
     ("wir gestalten Zukunft.") se salía por abajo de la pantalla. */
  .revelacion-titular,
  .revelacion-cierre .marca-frase { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
}
@media (max-height: 700px) {
  .hero h1 { font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem); }
  .hero-datos strong { font-size: var(--texto-xl); }
  .hero-datos { margin-top: var(--esp-4); }
  .con-secuencia > .revelacion-lienzo > .hero { padding-block: 0.5rem var(--esp-8); }
  .revelacion-titular,
  .revelacion-cierre .marca-frase { font-size: clamp(2rem, 5vw, 3.25rem); }
  .revelacion-parrafo { margin-top: var(--esp-6); }
  .revelacion-cierre { margin-top: var(--esp-8); }
}

/* ── Capa 2: el video recortado a la palabra ──────────────────── */
.con-secuencia .ventana {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;                           /* Encima del hero */
  -webkit-mask: url(#recorte-palabra);
  mask: url(#recorte-palabra);
}

/* AÑADIDO 2026-08-18 — LAS CAPAS NO ROBAN CLICS.
   Las capas de la secuencia cubren TODO el lienzo aunque solo se vea
   una parte: la máscara recorta lo VISIBLE, no la zona de clic, y las
   demás van con opacidad 0 al principio. Sin esto, los botones del
   hero ("Karriere starten" / "Unternehmen kontaktieren") no se podían
   pulsar: el clic caía en la capa de textos invisible de encima.
   Ninguna de estas capas lleva enlaces, así que se apagan del todo.
   (El hero mismo se apaga desde main.js cuando ya no se ve, para que
   sus botones invisibles no cacen clics del final de la secuencia.) */
.con-secuencia .ventana,
.con-secuencia .revelacion-mascara,
.con-secuencia .revelacion-solido,
.con-secuencia .revelacion-textos {
  pointer-events: none;
}
/* El blanco de debajo: mismo blanco que el titular del hero, para
   que al principio la palabra sea indistinguible del resto. */
.con-secuencia .ventana-blanco {
  position: absolute;
  inset: 0;
  background: var(--color-blanco);
}
.con-secuencia .ventana .revelacion-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* Llena sin deformar */
  /* La toma es de atardecer y va apagada. Subirla un punto ayuda a
     que se distinga dentro de las letras, que es donde más falta
     hace, sin que a pantalla completa parezca artificial. */
  filter: brightness(1.25) saturate(1.2);
  /* Aparece a MITAD del zoom, no antes: hasta entonces se ve el
     blanco de debajo y la palabra parece texto normal. */
  opacity: var(--fase-video);
}
/* La palabra de HTML se vuelve invisible: lo que se ve en su sitio
   es el video recortado. Solo cuando el efecto está activo; si no,
   el titular del hero se lee normal. */
.con-secuencia .palabra-video { color: transparent; }

/* ── Capas 3 y 4: los dos titulares, uno encima del otro ──────── */
/* Comparten caja y tipografía EXACTAS para que el sólido caiga
   justo sobre el hueco y el relevo no se note como un salto.
   El padding es SIMÉTRICO a propósito: así el centro del titular
   coincide con el centro de la caja, que es de donde tira el scale.
   Con padding desigual, al agrandarse la máscara el titular se
   escaparía de la pantalla. */
.con-secuencia .revelacion-mascara,
.con-secuencia .revelacion-solido {
  position: absolute;
  inset: 0;
  /* La centrada va aquí y no solo en el estado base: sin ella la
     máscara reparte el titular por toda la caja en vez de ponerlo en
     medio, y al agrandarse las letras se van fuera de la pantalla
     (pantalla negra). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--esp-6);
}

/* Capa 3: el hueco por el que se ve el video */
.con-secuencia .revelacion-mascara {
  z-index: 2;
  /* Verde de marca SEMITRANSPARENTE, ni negro ni verde macizo.
     Esta es la pantalla en la que uno se queda mientras lee "Wir
     verbinden Menschen mit Chancen", así que tiene que verse como el
     resto del sitio: foto detrás, velo verde encima.

     Cómo funciona con multiply: donde hay LETRA el color es blanco
     opaco, y multiplicar por blanco deja pasar el video entero (el
     agujero sigue siendo perfecto). Donde no hay letra, el verde va
     al 70 %, así que el resultado es una mezcla entre el video y el
     video multiplicado por verde: un velo, no una pared.

     El 70 % está medido contra el banner "Wir bauen Brücken", que es
     la referencia del cliente: 56,96,76 allí frente a 63,90,67 aquí.
     Con el verde macizo salía 3,46,25 — demasiado oscuro y saturado. */
  background: var(--color-secundario-70);
  mix-blend-mode: multiply;

  opacity: var(--fase-velo);
  /* (1 - fase)² = arranca rapidísimo y va frenando al final, que es
     lo que hace que el aterrizaje sobre el titular se sienta suave. */
  transform: scale(calc(1 + var(--zoom-max)
                          * (1 - var(--fase-zoom))
                          * (1 - var(--fase-zoom))));
}

/* Capa 4: el titular sólido que toma el relevo al final.
   Esta capa no pinta fondo, solo texto, así que puede subir entera y
   llevarse el "Wer wir sind" con ella. */
.con-secuencia .revelacion-solido {
  z-index: 3;
  opacity: var(--fase-solido);
  transform: translateY(var(--empuje));
  will-change: opacity, transform;
}

/* El rótulo, JUSTO ENCIMA del titular y fuera del flujo.
   Fuera del flujo porque si ocupara sitio empujaría al titular hacia
   abajo dentro de su caja, y entonces dejaría de caer sobre el hueco
   de la máscara: se verían las letras dobles, desplazadas. Al ser
   absoluto, el titular sigue centrado en la caja, exactamente igual
   que el de la máscara. */
.con-secuencia .revelacion-solido .eyebrow {
  position: absolute;
  bottom: calc(50% + var(--alto-titular) / 2 + var(--esp-4));
  margin-bottom: 0;
}

/* ── El titular sube; el velo verde NO ─────────────────────────
   En la máscara quien se mueve es el TEXTO, nunca la capa: si se
   subiera .revelacion-mascara, su fondo verde subiría con ella y
   abajo quedaría una franja de video sin velo (pasó: se veía una
   banda clara al pie de la pantalla).
   Sube lo mismo que el titular sólido; si se separaran, el hueco por
   el que se ve el video y el titular blanco no coincidirían. */
.con-secuencia .revelacion-mascara .revelacion-titular {
  transform: translateY(var(--empuje));
  will-change: transform;
}

/* ── Capa 5: los tres textos, apilados bajo el titular ────────── */
/* Van por encima de las máscaras, así que el multiply no les afecta.
   Se colocan de una vez donde el titular los va a dejar: centro de la
   pantalla + medio titular + lo que el titular sube (--empuje-max, que
   es negativo). Así no tienen que moverse: el titular sube primero y
   ellos van apareciendo debajo, ya en su sitio. */
.con-secuencia .revelacion-textos {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--alto-titular) / 2 + var(--empuje-max) + var(--esp-8));
  z-index: 4;                           /* Por encima de los titulares */
  padding: 0 var(--esp-6);
}

/* Cada texto entra por su cuenta: aparece subiendo un pelín. */
.con-secuencia .revelacion-apoyo,
.con-secuencia .revelacion-parrafo,
.con-secuencia .revelacion-cierre {
  will-change: opacity, transform;
}
.con-secuencia .revelacion-apoyo {
  opacity: var(--fase-apoyo);
  transform: translateY(calc(1.5rem - 1.5rem * var(--fase-apoyo)));
}
.con-secuencia .revelacion-parrafo {
  opacity: var(--fase-parrafo);
  transform: translateY(calc(1.5rem - 1.5rem * var(--fase-parrafo)));
}
.con-secuencia .revelacion-cierre {
  opacity: var(--fase-cierre);
  transform: translateY(calc(1.5rem - 1.5rem * var(--fase-cierre)));
}

/* Móvil: menos recorrido (8 pantallas se hacen larguísimas con el
   dedo) y los textos más juntos, que la pantalla es más corta. */
@media (max-width: 767px) {
  .revelacion.con-secuencia { height: 700vh; }
  .revelacion-parrafo { margin-top: var(--esp-6); }
  .revelacion-cierre  { margin-top: var(--esp-6); }
}

/* ── BLOQUE DE TEXTO CENTRADO Y ESTRECHO ──────────────────────── */
/* Cierre de la misión bajo el efecto: una columna de lectura. */
.bloque-estrecho {
  max-width: 48rem;
  text-align: center;
}
.bloque-estrecho .lead {
  max-width: none;
  margin-inline: auto;
}
.bloque-estrecho .marca-frase { margin-top: var(--esp-10); }