/*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 {
    /*Degrade de lavanda*/
    --bggradiente: linear-gradient(135deg, #fdfcfb 0%, #e2d1f9 100%);
    /*Degrade Beige*/
    --bg-lunar: radial-gradient(circle at center, #ffffff 0%, #FDFCFB 60%, var(--color-secundario) 100%);
    /* Sombras consistentes */
    --shadow-suave: 0 10px 20px rgba(0, 0, 0, 0.08);
    /* Sombras consistentes */
    --shadow-fuerte: 0 10px 20px rgba(0, 0, 0, 0.3);
    /* Transiciones */
    --transition-fast: 0.3s ease;
    /* El Beige Arena base */
    --bg-seccion-clara: #F9F7F2;
    /*--bg-seccion-soft*/

    /* Sombras Ambientales (Reemplazan a las negras para más suavidad) */
    --sombra-lunar: 0 15px 35px rgba(140, 146, 172, 0.12);
    --sombra-hover: 0 25px 50px rgba(140, 146, 172, 0.2);
    --blur-lunar: blur(15px);
    --bg-seccion-soft: #F4F1EA;
    /* Más lavado que el original para que no "salte" */
    --color-lavanda-soft: #d3d7e5;
    /* Menos duro que el negro puro */
    --color-texto-suave: #4a4a4a;

    /*Color Lavanda*/
    --color-lavanda: #b6bbd3;
    /* Gris Carbón suave*/
    --color-texto: #2d3436;
    /* Azul Acero*/
    --color-acento: #8c92ac;
    /*Blanco puro */
    --color-blanco-puro: #FFFFFF;
    /* Rosa Fucsia*/
    --color-primario: #d81b60;
    /* El tono final */
    --color-secundario: #EAE6D8;
    /*TIPOGRAFÍAS*/
    --fuente-titulos: 'Playfair Display', serif;
    /*TIPOGRAFÍAS*/
    --fuente-cuerpo: 'Montserrat', sans-serif;
}

html {
    /* Base para pantallas estándar (Notebooks/Tablets) */
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-top: 8rem;
    transition: font-size 0.3s ease;
    /* Para que el cambio no sea brusco al redimensionar */
}

/* Pantallas grandes (1080p en adelante): Aquí aplicamos tu "80%" preferido */
@media (min-width: 1400px) {
    html {
        /* Bajamos un poco la escala global para ganar ese "aire" que te gustó */
        font-size: 55%;
        /* Esto equivale a ese 80% visual que viste en el zoom */
    }
}

/* Pantallas intermedias ( notebooks de 13 pulgadas, etc) */
@media (max-width: 1399px) and (min-width: 1024px) {
    html {
        font-size: 58%;
    }
}

/* Celulares (El iPhone de Adri) */
@media (max-width: 480px) {
    html {
        font-size: 50%;
        /* Achicamos un poco más para que nada desborde */
    }
}

body {
    font-size: 1.6rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    /* Prohibido el scroll horizontal */
    background: var(--bg-lunar);
    /* Tu degradado radial beige/blanco */
    background-attachment: fixed;
    /* Mantiene el fondo quieto mientras scrolleás */
    background-size: cover;
}

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

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    margin-left: auto;
    /* Agregá esto */
    margin-right: auto;
    /* Agregá esto */
}

/* Títulos: Elegantes y con peso */
h1,
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 */

/* 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);
}