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

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


/* =========================
   HTML
========================== */

html {
    scroll-behavior: smooth;
}


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

body {
    font-family: var(--fuente-texto);
    background-color: var(--marfil);
    color: var(--cafe);

    font-weight: 300;
    line-height: 1.6;

    overflow-x: hidden;
}


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

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


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

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


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

button,
.btn {
    font-family: var(--fuente-texto);
}


/* =========================
   CONTENEDOR
========================== */

.container {
    width: min(
        calc(100% - 40px),
        var(--ancho-contenido)
    );

    margin-inline: auto;
}


/* =========================
   SECCIONES
========================== */

section {
    width: 100%;
}


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

h1,
h2,
h3,
h4 {
    font-family: var(--fuente-titulos);

    font-weight: 500;

    line-height: 1.2;
}


/* =========================
   MOMENTOS
========================== */

.momento {
    width: 100%;
}


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

@media (max-width: 768px) {

    :root {
        --espacio-seccion: 70px;
    }


    .container {
        width: min(
            calc(100% - 30px),
            var(--ancho-contenido)
        );
    }

}


/* =========================
   ANCLAS DEL MENÚ
   Evita que el header fijo
   cubra el inicio de una sección.
========================== */

section[id] {
    scroll-margin-top: 100px;
}


@media (max-width: 768px) {

    section[id] {
        scroll-margin-top: 85px;
    }

}