/* ============================================
   NAURA — BASE CSS
   Reset y estilos globales del sitio

   Requiere variables.css
   ============================================ */


/* ============================================
   RESET GENERAL
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}


/* ============================================
   BODY
   ============================================ */

body {
  min-height: 100vh;
  background-color: var(--color-fondo);
  color: var(--color-bordo);
  font-family: var(--fuente-texto);
  font-size: var(--tamano-texto);
  line-height: 1.6;
}


/* ============================================
   TÍTULOS
   ============================================ */

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: var(--tamano-logo);
}

h2 {
  font-size: var(--tamano-titulo);
}

h3 {
  font-size: var(--tamano-subtitulo);
}


/* ============================================
   ENLACES
   ============================================ */

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--color-bordo);
}


/* ============================================
   LISTAS
   ============================================ */

ul,
ol {
  list-style: none;
}


/* ============================================
   IMÁGENES
   ============================================ */

img {
  display: block;
  max-width: 100%;
}


/* ============================================
   BOTONES
   ============================================ */

button {
  border: none;
  background: none;
  font-family: var(--fuente-texto);
  cursor: pointer;
}


/* ============================================
   CLASES UTILITARIAS
   ============================================ */

/* Etiquetas de texto en mayúsculas */

.texto-etiqueta {
  color: var(--color-verde);
  font-size: var(--tamano-pequeno);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-letras);
}


/* Contenedor general */

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--espacio-md);
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {

  .contenedor {
    padding: 0 16px;
  }

}