/* Atlántico Innovación — componentes reutilizables por los bloques de elementor-blocks/. */

/* --- Contenedor y secciones --- */
.ai-contenedor {
  width: 100%;
  max-width: var(--ai-ancho);
  margin-inline: auto;
  padding-inline: var(--ai-esp-3);
}
@media (min-width: 900px) {
  .ai-contenedor { padding-inline: var(--ai-esp-4); }
}

.ai-seccion {
  position: relative;
  padding-block: clamp(var(--ai-esp-8), 9vw, var(--ai-esp-16));
}
.ai-seccion > .ai-contenedor { position: relative; z-index: 1; }   /* el contenido, por encima de las líneas */

/* El ritmo oscuro/claro de 05 §4: cada sección declara su fondo con una de estas. */
.ai-seccion--clara     { background: var(--ai-gris-50); }
.ai-seccion--cielo     { background: var(--ai-cielo-100); }
.ai-seccion--marino    { background: var(--ai-marino-900); }
.ai-seccion--profunda  { background: var(--ai-marino-950); }
.ai-seccion--degradado { background: linear-gradient(135deg, var(--ai-marino-950) 0%, var(--ai-marino-800) 100%); }
.ai-seccion--degradado-inverso { background: linear-gradient(160deg, var(--ai-marino-800) 0%, var(--ai-marino-950) 100%); }

/* Cabecera de sección: antetítulo + título + entradilla. */
.ai-seccion__cabecera { max-width: 56rem; margin-bottom: var(--ai-esp-6); }
.ai-seccion__cabecera--centrada { margin-inline: auto; text-align: center; }
.ai-seccion__cabecera--centrada .ai-entradilla { margin-inline: auto; }

/* --- Rejilla --- */
.ai-rejilla {
  display: grid;
  gap: var(--ai-esp-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ai-rejilla--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--ai-esp-8);
  align-items: center;
}
/* Cuatro tarjetas: 4, 2 o 1 columnas, nunca 3 + 1 (con auto-fit quedaba una
   tarjeta huérfana entre 760 y 1100 px; se vio en el navegador). */
.ai-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) { .ai-rejilla--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 699px)  { .ai-rejilla--4 { grid-template-columns: 1fr; } }

/* --- Tarjeta (los pilares) --- */
.ai-tarjeta {
  position: relative;
  background: var(--ai-blanco);
  border: var(--ai-borde);
  border-radius: var(--ai-radio);
  padding: var(--ai-esp-4);
  overflow: hidden;
  transition: transform var(--ai-mov-rapido) var(--ai-curva),
              box-shadow var(--ai-mov-rapido) var(--ai-curva);
}
/* El filete de acento aparece en hover, dibujándose de izquierda a derecha.
   Es una de las tres apariciones permitidas del azul vivo (05 §4). */
.ai-tarjeta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ai-atlantico-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ai-mov-base) var(--ai-curva);
}
.ai-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--ai-sombra); }
.ai-tarjeta:hover::after { transform: scaleX(1); }
.ai-tarjeta h3 { font-size: var(--ai-txt-md); margin-bottom: var(--ai-esp-1); }
.ai-tarjeta p { margin: 0; color: var(--ai-gris-700); }
.ai-tarjeta__icono {
  width: 40px;
  height: 40px;
  color: var(--ai-marino-600);   /* el icono es lineal y marino: el acento no es texto ni icono */
  margin-bottom: var(--ai-esp-3);
}
.ai-tarjeta__icono svg { width: 100%; height: 100%; display: block; }
/* Tarjeta quieta: para listas y bloques de contacto, que no son «pulsables»
   y no deben levantarse ni encender el filete al pasar el ratón. */
.ai-tarjeta--quieta:hover { transform: none; box-shadow: none; }
.ai-tarjeta--quieta::after { display: none; }
.ai-oscuro .ai-tarjeta { background: var(--ai-marino-800); border-color: rgba(255, 255, 255, .12); }
.ai-oscuro .ai-tarjeta p { color: var(--ai-cielo-200); }

/* --- Filete de acento --- */
.ai-filete {
  width: 56px;
  height: 3px;
  background: var(--ai-atlantico-500);
  border: 0;
  margin: var(--ai-esp-3) 0;
}
.ai-filete--centrado { margin-inline: auto; }

/* --- Lista con marca --- */
.ai-lista { list-style: none; padding: 0; margin: 0 0 var(--ai-esp-3); }
.ai-lista li { position: relative; padding-left: var(--ai-esp-3); margin-bottom: var(--ai-esp-1); }
.ai-lista li::before {
  content: "";
  position: absolute;
  left: 0; top: .7em;
  width: 12px; height: 2px;
  background: var(--ai-atlantico-500);
}

/* --- Las líneas del horizonte: el motivo gráfico de la marca (05 §3) ---
   Un SVG en línea con dos o tres trazos diagonales que suben de izquierda a
   derecha, como el canal del isotipo. Se colocan absolutas detrás del
   contenido de la sección; motion.css las dibuja. */
.ai-lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* SIN vector-effect: non-scaling-stroke, a propósito. Con él, Chrome mide el
   trazo discontinuo (stroke-dasharray, que con pathLength="1" es «toda la
   línea») en píxeles de pantalla pero la longitud de la línea en unidades del
   dibujo; como el SVG va estirado a lo ancho (preserveAspectRatio="none"), en
   pantallas anchas la línea se cortaba al ~65 % (visto a 1906 px, 2026-09-16).
   El grosor se escala con el dibujo: 1,5 unidades ≈ 1,6 px en pantalla. */
.ai-linea {
  fill: none;
  stroke: var(--ai-atlantico-500);
  stroke-width: 1.5;
  opacity: .7;
}
.ai-linea--2 { opacity: .4; }
.ai-linea--3 { opacity: .25; }

/* --- Utilidades mínimas --- */
.ai-centrado { text-align: center; }
.ai-apilado  { display: flex; flex-direction: column; gap: var(--ai-esp-2); }
.ai-fila     { display: flex; flex-wrap: wrap; gap: var(--ai-esp-2); align-items: center; }
.ai-fila--centrada { justify-content: center; }
.ai-visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Imágenes: que nunca desborden. */
img { max-width: 100%; height: auto; }

/* El enlace para saltar al contenido lo pinta el tema padre (.skip-link);
   aquí solo se le da la marca cuando recibe el foco. */
.skip-link:focus { background: var(--ai-marino-900); color: var(--ai-blanco); }