/*
base.css
Base global del sitio salud-celular.
Importa los componentes por tarea y define
reset, tipografia, enlaces, listas y contenedores.


@import url('variables.css');
@import url('header.css');
@import url('footer.css');
@import url('botones.css');
@import url('utilidades.css');
@import url('tipografia.css');
@import url('https://fonts.gstatic.com');
@import url('https://fonts.googleapis.com');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Figtree:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Manrope:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');
*/

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--tamano-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: var(--linea-normal);
  background-color: var(--fondo-principal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

p {
  margin-bottom: var(--espacio-4);
  line-height: var(--linea-relajada);
}

/* Enlaces */
a {
  color: var(--color-primario-600);
  text-decoration: none;
  transition: color var(--transicion-rapida);
}

a:hover {
  color: var(--color-primario-800);
}

a:focus {
  outline: 2px solid var(--color-primario-300);
  outline-offset: 2px;
}

/* Listas */
ul, ol {
  margin-bottom: var(--espacio-4);
  padding-left: var(--espacio-6);
}

li {
  margin-bottom: var(--espacio-2);
  line-height: var(--linea-normal);
}

/* Contenedores */
.container {
  width: 100%;
  max-width: var(--ancho-contenedor-lg);
  margin: 0 auto;
  padding-left: var(--espacio-4);
  padding-right: var(--espacio-4);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--espacio-8);
    padding-right: var(--espacio-8);
  }
}

/* Main */
.site-main {
  flex: 1;
  padding: var(--espacio-12) 0;
}