/* Atlántico Innovación — las secciones de la portada (05 §3).
 * Una regla por bloque de elementor-blocks/inicio/. Lo compartido está en
 * components.css; aquí solo lo que es de cada sección. */

/* --- 01 Hero --- */
.ai-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(92svh, 860px);
  padding-top: calc(var(--ai-cabecera-alto) + var(--ai-esp-8));
  padding-bottom: var(--ai-esp-12);
  background: linear-gradient(135deg, var(--ai-marino-950) 0%, var(--ai-marino-800) 100%);
}
.ai-hero .ai-lineas { top: auto; bottom: 0; height: 72%; }
.ai-hero__contenido { max-width: 46rem; }
.ai-hero h1 { color: var(--ai-blanco); margin-bottom: var(--ai-esp-3); }
.ai-hero .ai-entradilla {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  margin-bottom: var(--ai-esp-4);
}
.ai-hero__botones { display: flex; flex-wrap: wrap; gap: var(--ai-esp-2); }
@media (max-width: 699px) {
  .ai-hero__botones .ai-btn { flex: 1 1 100%; }   /* en móvil, los dos botones a todo el ancho y alineados */
}

/* --- 02 Pilares --- */
.ai-pilares .ai-rejilla--4 { gap: var(--ai-esp-3); }

/* --- 03 Quiénes somos --- */
.ai-quienes .ai-lista { margin-top: var(--ai-esp-3); }
.ai-quienes__mision {
  font-weight: 600;
  color: var(--ai-marino-900);
  border-left: 3px solid var(--ai-atlantico-500);
  padding-left: var(--ai-esp-2);
}
/* El bloque abstracto: marino con las líneas, sin fotografía. */
.ai-bloque-marino {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  margin-inline: auto;
  border-radius: var(--ai-radio);
  background: linear-gradient(160deg, var(--ai-marino-800) 0%, var(--ai-marino-950) 100%);
  box-shadow: var(--ai-sombra);
}
.ai-bloque-marino .ai-lineas { inset: -10% 0; height: 120%; }
.ai-bloque-marino__marca {
  position: absolute;
  left: var(--ai-esp-4); bottom: var(--ai-esp-4);
  width: 64px; height: 64px;
  color: var(--ai-blanco);
  opacity: .9;
}
.ai-bloque-marino__marca svg { width: 100%; height: 100%; display: block; }

/* --- 04 Experiencia: la franja ---
   Parallax de verdad: la composición de marca (fondo-franja.webp, fuente en
   web/brand/) va en una capa un 80 % más alta que la franja que se desplaza
   MÁS DESPACIO que el scroll, con una animación ligada al desplazamiento
   (animation-timeline: view(), sin JS). Donde el navegador no la soporte,
   ai-motion.js mueve la misma variable --ai-desplaz. La primera versión usaba
   background-attachment: fixed (el fondo quieto, el texto pasando por delante)
   y la dirección no lo percibía como parallax (2026-09-16). */
.ai-experiencia {
  position: relative;
  isolation: isolate;
  /* clip, NO hidden: `overflow: hidden` convierte la sección en contenedor de
     scroll y la línea de tiempo de la capa se mide dentro de la sección (que no
     se desplaza): el progreso se quedaba clavado al 50 % (medido 2026-09-16). */
  overflow: clip;
  view-timeline-name: --ai-franja;     /* la línea de tiempo la da la sección al cruzar la ventana */
  view-timeline-axis: block;
  text-align: center;
  padding-block: clamp(var(--ai-esp-12), 16vw, 220px);   /* franja alta: más recorrido */
  background-color: var(--ai-marino-900);
}
.ai-experiencia::before {
  content: "";
  position: absolute;
  inset: -40% 0;                       /* la capa sobresale un 40 % por arriba y por abajo */
  z-index: -1;
  background: var(--ai-marino-900) url("../img/fondo-franja.webp") center / cover no-repeat;
  transform: translateY(var(--ai-desplaz, 0%));   /* el respaldo en JS mueve esta variable */
  will-change: transform;
}
@supports (animation-timeline: view()) {
  @keyframes ai-parallax-franja {
    from { transform: translateY(-22%); }   /* 22 % de la capa = el 40 % que sobresale */
    to   { transform: translateY(22%); }
  }
  .ai-experiencia::before {
    animation: ai-parallax-franja linear both;
    animation-timeline: --ai-franja;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-experiencia::before { animation: none; transform: none; }
}
.ai-experiencia__texto {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ai-blanco);
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* --- 05 Cómo trabajamos --- */
.ai-pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ai-esp-6);
}
/* La línea que une los tres pasos pasa por detrás de los números. */
.ai-pasos__linea {
  position: absolute;
  top: 30px; left: 0; right: 0;
  height: 2px;
  background: var(--ai-atlantico-500);
}
.ai-paso { position: relative; }
.ai-paso__numero {
  display: inline-block;
  font-size: var(--ai-txt-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--ai-marino-600);      /* el acento no es texto (01 §4): el número va en marino */
  background: var(--ai-blanco);
  padding: var(--ai-esp-1) var(--ai-esp-2) var(--ai-esp-1) 0;
  margin-bottom: var(--ai-esp-2);
  font-variant-numeric: tabular-nums;
}
.ai-paso h3 { font-size: var(--ai-txt-md); }
.ai-paso p { color: var(--ai-gris-700); margin: 0; }
/* Cada paso aparece cuando la línea (640 ms) le llega: 0, 240 y 480 ms. */
.ai-pasos .ai-paso:nth-of-type(2) { --ai-retardo: 3; }
.ai-pasos .ai-paso:nth-of-type(3) { --ai-retardo: 6; }
@media (max-width: 899px) {
  .ai-pasos { grid-template-columns: 1fr; gap: var(--ai-esp-4); }
  .ai-pasos__linea { display: none; }
}

/* --- 06 Cierre --- */
.ai-cierre { text-align: center; }
.ai-cierre .ai-entradilla { margin-inline: auto; margin-bottom: var(--ai-esp-4); }