/* AlianzaDN Draft — Layout utilities */

/* ── Section ─────────────────────────────────────────────────────────────── */
.adn-section {
  padding-block: var(--space-16);
  /* Contiene el estado inicial de las animaciones de entrada.
     `.adn-reveal--right` arranca con translateX(24px); en un elemento que ya
     toca el borde derecho —como el formulario de la sección B2B— esos 24 px se
     salen del viewport y provocan scroll horizontal en TODA la home hasta que
     el elemento se revela. En móvil se notaba a cualquier ancho.
     Se usa `clip` y no `hidden` a propósito: hidden crearía un contenedor de
     scroll y rompería el `position: sticky` de cualquier hijo. */
  overflow-x: clip;
}
@media (min-width: 768px)  { .adn-section { padding-block: var(--space-20); } }
@media (min-width: 1024px) { .adn-section { padding-block: var(--space-24); } }

.adn-section--dark {
  background: var(--ink);
  color: var(--surface);
}
.adn-section--surface {
  background: var(--surface);
}
.adn-section--surface-2 {
  background: var(--surface-2);
}

.adn-section-head {
  margin-bottom: var(--space-10);
}
.adn-section-head--center {
  text-align: center;
}
/* inline-flex, no block: el kicker lleva su filete dorado como ::before y
   necesita alinearlo con el texto. Centrarlo lo resuelve el text-align del
   modificador --center, porque es un elemento de nivel inline. */
.adn-section-head .adn-kicker {
  display: inline-flex;
  margin-bottom: var(--space-3);
}
.adn-section-head h2 {
  margin-top: 0;
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
}
.adn-section-head__lead {
  margin-top: var(--space-4);
  max-width: 60ch;
  color: var(--ink-2);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.adn-section-head--center .adn-section-head__lead {
  margin-inline: auto;
}

/* ── Grids ───────────────────────────────────────────────────────────────── */
.adn-grid {
  display: grid;
  gap: var(--space-6);
}
.adn-grid--tight { gap: var(--space-4); }
.adn-grid--loose { gap: var(--space-8); }

.adn-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .adn-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.adn-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .adn-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .adn-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.adn-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 600px)  { .adn-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .adn-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.adn-grid--5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .adn-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .adn-grid--5 { grid-template-columns: repeat(5, 1fr); } }

/* ── Split 50/50 ─────────────────────────────────────────────────────────── */
.adn-split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 768px)  { .adn-split { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
@media (min-width: 1024px) { .adn-split { grid-template-columns: 1.1fr 0.9fr; } }

.adn-split--reverse > *:first-child { order: 0; }
@media (min-width: 768px) { .adn-split--reverse > *:first-child { order: 1; } }

/* ── Main content area ───────────────────────────────────────────────────── */
.adn-main {
  min-height: 60vh;
}