/*Configuracion de global de HTML - Se debe asignar a cada pagina ya que esto es el diseño global. */
/*Despues se deben realizar hojas de estilo individuales, para especificar el diseño de cada una. */
:root {
    /* --- PALETA DE COLORES --- */
    --bggradiente: linear-gradient(135deg, #fdfcfb 0%, #e2d1f9 100%);
    /*Degrade de lavanda*/

    --color-fondo: #F9F7F2;
    /* El Beige Arena base */

    --color-lavanda: #b6bbd3;
    /*Color Lavanda*/

    --color-texto: #2d3436;
    /* Gris Carbón suave para lectura */

    --color-acento: #8c92ac;
    /* Azul Acero para detalles */

    --color-blanco-puro: #FFFFFF;
    /*Blanco puro */
    --color-primario: #d81b60;
    /* Rosa Fucsia para acentos fuertes */

    /* --- TIPOGRAFÍAS --- */
    --fuente-titulos: 'Playfair Display', serif;
    --fuente-cuerpo: 'Montserrat', sans-serif;
}

html {
    /*Reduce la fuente para calular los rem*/
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;

}

body {
    font-size: 1.6rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-attachment: fixed;
    min-height: 100vh;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Títulos: Elegantes y con peso */
h1,
h2,
h3 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--color-texto);
}

h1 {
    font-size: 4.5rem;
}

/* Muy importante: el centro de atención */
h2 {
    font-size: 3.2rem;
}

/* Secciones principales */
h3 {
    font-size: 2.4rem;
}

h4 {
    font-size: 1.8rem;
}

/* Subsecciones */

/* Textos: Claros y legibles */
p,
span {
    font-family: var(--fuente-cuerpo);
    font-weight: 400;
    line-height: 1.6;
    /* Un poquito de aire entre líneas para que respire */
    color: rgba(47, 47, 47, 0.8);
}