/* =========================================================
   LAYOUT.CSS — ESTRUCTURA GLOBAL
   ========================================================= */

header, footer {
  width: 100%;                          /* Ocupan todo el ancho de la pantalla */
  background: var(--color-dark);       /* Fondo oscuro para encabezado y pie */
  color: var(--color-text);            /* Texto en color claro (blanco) */
}


header {
  border-bottom: 2px solid var(--color-border);  /* Línea inferior para separar visualmente */
}


footer {
  border-top: 2px solid var(--color-border);     /* Línea superior para delimitar el pie */
  padding: 2rem 1rem;                            /* Espaciado interno: vertical 2rem, horizontal 1rem */
  text-align: center;                            /* Centra el texto horizontalmente */
  font-size: 0.9rem;                             /* Tamaño de fuente ligeramente reducido */
  color: #aaa;                                   /* Color gris claro para texto menos destacado */
}


/* === CONTENEDORES === */
.container {
  max-width: 1200px;                 /* Ancho máximo del contenido */
  margin: 0 auto;                    /* Centra horizontalmente el contenedor */
  padding: 1.5rem;                   /* Espaciado interno alrededor del contenido */
}


.grid {
  display: grid;                     /* Activa el sistema de rejilla CSS Grid */
  gap: 1.5rem;                       /* Espacio entre elementos de la rejilla */
}


/* === SECCIONES === */
section {
  padding: 3rem 1rem;                /* Espaciado interno: vertical amplio, horizontal moderado */
}


section h2 {
  text-align: center;               /* Centra el título de la sección */
  margin-bottom: 2rem;             /* Espacio inferior para separar del contenido */
  color: var(--color-accent);      /* Color de acento para destacar el título */
}


/* === NAVBAR (si la tienes) === */
nav ul {
  list-style: none;                /* Elimina viñetas de la lista */
  display: flex;                   /* Usa flexbox para alinear horizontalmente */
  gap: 1.5rem;                     /* Espacio entre elementos del menú */
  justify-content: center;        /* Centra los elementos del menú */
  padding: 1rem 0;                 /* Espaciado vertical del menú */
}


nav a {
  color: var(--color-text);       /* Color claro para enlaces */
  text-transform: uppercase;      /* Convierte texto en mayúsculas */
  font-weight: bold;              /* Texto en negrita para mayor visibilidad */
  transition: color 0.3s ease;    /* Transición suave al cambiar color al pasar el cursor */
}


nav a:hover {
  color: var(--color-highlight);  /* Color de resaltado al pasar el cursor */
}