/* ============================================================
   LAYOUT.CSS — Raíz Digital
   Estructura general: contenedores, grid, comportamiento base
   de las secciones. Los estilos específicos de cada sección
   (colores puntuales, composición interna) viven en secciones.css.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Cada una de las 11 secciones ocupa como mínimo el alto de la
   ventana, para que el scroll se sienta como avanzar "un paso a
   la vez" por el ecosistema — consistente con el guión narrativo. */
.seccion {
  min-height: 100vh;
  width: 100%;
  padding: var(--mk-espacio-6) var(--mk-espacio-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contenedor de ancho máximo para que el texto no se estire de
   borde a borde en pantallas grandes */
.seccion > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Línea de texto legible: evitar párrafos de más de ~80 caracteres */
.seccion p {
  max-width: 70ch;
}

/* El footer no necesita ocupar toda la pantalla */
.seccion--footer {
  min-height: auto;
  padding: var(--mk-espacio-4) var(--mk-espacio-3);
}

/* Contenedor del túnel 3D (sección Ecosistema) — necesita alto
   propio, mayor al de una sola pantalla, para que el scroll
   tenga espacio de recorrer las 11 etapas. El valor exacto de
   altura se ajustará en Fase 4 cuando se implemente tunel-3d.js */
.tunel-3d {
  position: relative;
  min-height: 300vh;
  width: 100%;
}

/* ============================================================
   RESPONSIVE
   Mobile-first: los estilos de arriba ya son la base para móvil.
   A partir de aquí, ajustes para pantallas más grandes.
   ============================================================ */

@media (min-width: 768px) {
  .seccion {
    padding: var(--mk-espacio-7) var(--mk-espacio-4);
  }
}

@media (min-width: 1200px) {
  .seccion {
    padding: var(--mk-espacio-8) var(--mk-espacio-5);
  }
}