@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');


html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
}

main-paleta {
    --blanco: #fff;
    --blanco-roto: #ECE8E5;
    --azul: #00b7ff;
    --amarillo: #ECB561;
    --naranja: #EFB08A;
    --marron: #A86F66;
    --rosa: #B57E78;
    --gris-claro: #ccd8e9;
    --azul-claro: #95D5E8;
    --azul-gris: #384F5F;
}

new-paleta {
    --gris-claro2: #8AA2AA;
    --amarillo2: #E7BF4C;
}

:root {
    --blanco: #fff;
    --blanco-roto: #ECE8E5;
    --amarillo: #ECB561;
    --azul-osc: #494E56;
    --azul: #00b7ff;
    --gris: #3b3f44;
    --gris-claro: #ccd8e9;
    --azul-claro: #95D5E8;
    --naranja: #D76B55;
    --marron: #A86F66;
    --rosa: #B57E78;
    --azul-gris: #384F5F;
    --gris-claro2: #8AA2AA;

    --color-1: var(--azul-claro);
    --color-2: var(--naranja);
    --color-3: var(--marron);
    --color-4: var(--rosa);
    --color-5: var(--azul-gris);

    --fondo: var(--color-1);
    --contraste: var(--color-2);
    --principal: var(--color-3);
    --acento: var(--color-4);
    --texto: var(--color-5);



    --color-btn: var(--azul);
    --fuente-texto: var(--blanco-roto);
    --fuente-texto-oscura: #384F5F;

    --bg-color: #fff;
    --bg-color-oscuro: #3EA6A2;
    --bg-color-oscuro-2: #494E56;
    --bg-color-oscuro-2-claro: var(--gris-claro);


    --gradiente-azul-naranja: linear-gradient(0, var(--amarillo)20%, var(--azul-claro) 50%, var(--azul)80%, var(--azul-gris)100%);
    --gradiente-azul-naranja-opuesto: linear-gradient(180deg, var(--amarillo)20%, var(--azul-claro) 50%, var(--azul)80%, var(--azul-gris)100%);
    --radius: 20px
}

.fondo-blanco {
    background-color: #e5e5EC;
    opacity: 1;
    background-image: radial-gradient(#ECB561 0.8px, #e5e5EC 0.8px);
    background-size: 16px 16px;
}

.btn-std {
    border: none;
    background-color: var(--azul);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    margin-left: 10px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

.btn-std:hover {
    background-color: var(--amarillo);
}