/* Atlántico Innovación — las páginas interiores: Servicios, Quiénes somos y
 * Contacto (05 §2, cadenas 5.10–5.12 de 02). Lo compartido está en
 * components.css e inicio.css; aquí solo lo propio de estas páginas. */

/* --- Cabecera de página: el hero, en compacto --- */
.ai-hero--interior {
  min-height: 0;
  padding-top: calc(var(--ai-cabecera-alto) + var(--ai-esp-8));
  padding-bottom: var(--ai-esp-8);
}
.ai-hero--interior h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); }

/* --- Servicios: los cuatro ámbitos en rejilla de dos columnas, tarjetas
   grandes con la frase del pilar y un párrafo de desarrollo. Sin listas de
   entregables: se dice lo que se hace, no el detalle (02 §5.10). --- */
/* Dos columnas fijas, nunca «las que quepan»: con auto-ajuste, a ancho de
   escritorio cabían tres y la cuarta tarjeta quedaba sola debajo. */
.ai-ambitos__rejilla { grid-template-columns: repeat(2, 1fr); gap: var(--ai-esp-3); align-items: stretch; }
@media (max-width: 699px) { .ai-ambitos__rejilla { grid-template-columns: 1fr; } }
.ai-ambitos .ai-tarjeta { padding: var(--ai-esp-6) var(--ai-esp-4); }
.ai-ambitos .ai-tarjeta h3 { font-size: var(--ai-txt-lg); margin-bottom: var(--ai-esp-2); }
.ai-ambitos .ai-tarjeta .ai-ambitos__frase {
  font-weight: 500;
  color: var(--ai-tinta);
  margin-bottom: var(--ai-esp-2);
}
.ai-ambitos [id] { scroll-margin-top: calc(var(--ai-cabecera-alto) + var(--ai-esp-3)); }

/* --- Servicios: lo que puede esperar --- */
.ai-esperar__rejilla { grid-template-columns: repeat(3, 1fr); gap: var(--ai-esp-6); }
@media (max-width: 899px) { .ai-esperar__rejilla { grid-template-columns: 1fr; gap: var(--ai-esp-4); } }
.ai-esperar__item .ai-filete { margin: 0 0 var(--ai-esp-3); }
.ai-esperar__item h3 { font-size: var(--ai-txt-md); margin-bottom: var(--ai-esp-1); }
.ai-esperar__item p { margin: 0; }

/* --- Quiénes somos: principios --- */
.ai-principios .ai-tarjeta h3 { margin-bottom: var(--ai-esp-2); }
.ai-principios .ai-tarjeta h3::after {
  content: "";
  display: block;
  width: 32px; height: 3px;
  margin-top: var(--ai-esp-2);
  background: var(--ai-atlantico-500);
}

/* --- Páginas del sistema (404): sin hero; el cuerpo ya deja sitio a la cabecera --- */
.ai-sistema { min-height: 60vh; display: flex; align-items: center; }
.ai-sistema__contenido { max-width: 40rem; }
.ai-sistema .ai-entradilla { margin-bottom: var(--ai-esp-4); }

/* --- Contacto ---
 *
 * La tarjeta nació con 40rem y SIN centrar, cuando dentro solo había un
 * párrafo y una dirección de correo: una caja corta pegada al borde izquierdo
 * no llamaba la atención. Desde que lleva el formulario (2026-09-16), esos
 * 40rem dentro de un contenedor de 1200px dejan media página en blanco a la
 * derecha y parecen un fallo de maquetación — y de paso estrangulan las dos
 * columnas del formulario a unos 270px cada una.
 *
 * Se ensancha y se centra. Es el único sitio del tema donde hay una tarjeta
 * suelta: las demás van en rejillas (`ai-rejilla`) que ocupan el contenedor
 * entero, así que una caja sola pegada a un lado era el caso raro, no este. */
.ai-contacto__tarjeta {
  max-width: 54rem;
  margin-inline: auto;
}

/* El texto de presentación conserva la medida de lectura. El formulario puede
   ocupar los 54rem —son campos, no prosa—, pero un párrafo a esa anchura pasa
   de las cien letras por línea y se lee mal. */
.ai-contacto__tarjeta > p { max-width: var(--ai-lectura); }
.ai-contacto__correo {
  display: inline-block;
  font-size: clamp(var(--ai-txt-md), 2.6vw, var(--ai-txt-lg));
  font-weight: 600;
  overflow-wrap: anywhere;
}