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

html {
    scroll-behavior: smooth;
}

body {
    overflow-x:hidden;
}

:root {
    --blue-d: #214D5D;
    --blue-l: #4199B9;
    --red-d: #650737;
    --red-l: #9F0B58;
    --yellow: #F7E99E;
    --yellow-l: #FFF0CE;
    --yellow-2: #fff8e6;
    --white: #F0F4FA;
    --black: #0C1C22;
    --transition-time:0.3s;
}

h1, h2, h3, h4 {
    font-family: "Fraunces";
    font-optical-sizing: auto;
    font-style: normal;
}

h1 {font-size: 3rem;}
h2 {font-size: 2.25rem;}
h3 {font-size: 2rem;}
h4 {font-size: 1.75rem; font-style: italic;}

h5, h6 {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
}

h5 {font-size: 1.5rem;}
h6 {font-size: 1.25rem;}

p {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1.25rem;
}

.p-s {font-size: 1rem;}

/* Colores texto */

.p-black {color: var(--black);}
.p-blue-d {color: var(--blue-d);}
.p-blue-l {color: var(--blue-l);}
.p-red-d {color: var(--red-d);}
.p-red-l {color: var(--red-l);}
.p-yellow {color: var(--yellow);}
.p-yellow2 {color: var(--yellow-l);}


/* BOTONES */

button {
    border: none;
    width: 100%;
    padding: 0.75rem 0rem;
    border-radius: 0.5rem;

    font-size: 1.25rem;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;

    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.btn-y {
    background-color: var(--yellow);
    color: var(--blue-d);
    transition: var(--transition-time);
}

.btn-y:hover {
    background-color: var(--yellow-l);
    color: var(--red-d);
    transition: var(--transition-time);
}

.btn-r-l {
    background-color: var(--red-l);
    color: var(--yellow-l);
}

.btn-r-l:hover {
    background-color: var(--red-d);
    color: var(--yellow-l);
}


@media (max-width: 792px) {
    h1 {font-size: 2.25rem;}
    h2 {font-size: 1.75rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 2rem; font-style: italic;}
    h5 {font-size: 1.25rem;}
    h6 {font-size: 1.07rem;}
    p {font-size: 1.08rem;}
    .p-s {font-size: 1.07rem;}

}