/* =========================================================
   BASE.CSS — VARIABLES, RESET Y ESTILOS GLOBALES
   ========================================================= */

:root {
  --color-bg: #0c0c0c;           /* Color de fondo principal (muy oscuro) */
  --color-text: #fff;            /* Color de texto principal (blanco) */
  --color-accent: #b38a5a;       /* Color de acento para títulos y elementos destacados */
  --color-highlight: #d1a470;    /* Color para resaltar enlaces o elementos interactivos */
  --color-dark: #111;            /* Otro tono oscuro, útil para secciones o bordes */
  --color-border: #1a1a1a;       /* Color para bordes sutiles */

  --font-main: 'Manrope', sans-serif;   /* Fuente principal para párrafos y texto general */
  --font-heading: 'Montserrat', sans-serif; /* Fuente para títulos, botones, nav, banner y footer */
}


/* === RESET BÁSICO === */
* {
  margin: 0;                    /* Elimina márgenes por defecto */
  padding: 0;                   /* Elimina rellenos por defecto */
  box-sizing: border-box;      /* Incluye padding y border en el cálculo del tamaño */
}


html {
  overflow-y: scroll;          /* Fuerza scroll vertical para evitar saltos al cargar */
  scroll-behavior: smooth;     /* Transiciones suaves al hacer scroll */
}


body {
  font-family: var(--font-main);         /* Aplica fuente principal */
  background-color: var(--color-bg);     /* Fondo oscuro */
  color: var(--color-text);              /* Texto blanco */
  line-height: 1.6;                      /* Altura de línea para mejor legibilidad */
  overflow-x: hidden;                    /* Oculta scroll horizontal */
}


img {
  max-width: 100%;             /* Imagen nunca excede el ancho del contenedor */
  height: auto;                /* Mantiene proporción original */
  display: block;              /* Elimina espacio extra debajo de la imagen */
  border: 0;                   /* Elimina borde por defecto */
}


/* === TEXTOS Y ENLACES === */
a {
  color: var(--color-highlight);         /* Color de enlace por defecto */
  text-decoration: none;                 /* Elimina subrayado */
  transition: color 0.3s ease;           /* Transición suave al cambiar color */
}


a:hover {
  color: var(--color-accent);            /* Color al pasar el cursor */
}


h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);      /* Fuente para encabezados */
  color: var(--color-accent);            /* Color de acento */
  text-transform: uppercase;             /* Convierte texto en mayúsculas */
  letter-spacing: 0.03em;                /* Espaciado entre letras para estilo */
}


p {
  margin-bottom: 1rem;                   /* Espacio inferior entre párrafos */
  color: #ddd;                           /* Color gris claro para texto */
}


/* === BOTONES GENERALES === */
button {
  font-family: var(--font-heading);      /* Montserrat: botones */
  cursor: pointer;                       /* Muestra cursor de interacción */
  border: none;                          /* Elimina borde por defecto */
  background: none;                      /* Elimina fondo por defecto */
}


/* === UTILIDADES === */
.text-center { text-align: center; }     /* Centra texto horizontalmente */
.mt-2 { margin-top: 1rem; }              /* Margen superior medio */
.mt-4 { margin-top: 2rem; }              /* Margen superior grande */
.mb-2 { margin-bottom: 1rem; }           /* Margen inferior medio */
.mb-4 { margin-bottom: 2rem; }           /* Margen inferior grande */