/* ==========================================================================
   GLOBALES - Grael
   Estilos base, variables, contenedores y utilidades compartidas.
   ========================================================================== */

/* Base: box-sizing y raíz (62.5% = 10px para cálculo en rem) */
html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

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

body {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    position: relative;
}

/* --- Variables de color (identidad Grael) --- */
:root {
    --color-principal: #2B6AA8;
    --color-parrafo: #515151;
    --color-titulo: #222222;
    --color-negro: #222222;
    --color-celeste: #45A6D1;
    --color-blanco: #fff;
}

/* --- Tipografía base (títulos y párrafos) --- */
html h1 {
    font-size: 3.4rem;
    color: var(--color-titulo);
}

html h2 {
    font-size: 3rem;
    color: var(--color-titulo);
}

html h3 {
    font-size: 2.4rem;
    color: var(--color-titulo);
}

html h4 {
    font-size: 1.4rem;
    color: var(--color-titulo);
}

p {
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-parrafo);
}

img {
    max-width: 100%;
}

figure {
    margin: 0;
    padding: 0;
}

video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- Contenedores y layout principal --- */
.contenedor {
    max-width: 1300px;
    margin: 0 auto;
    width: 90%;
}

.fondo {
    background: url(../img/fondo.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.f-claro {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- Botones (ej. WhatsApp en header) --- */
.contenedor-boton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.boton {
    background-color: var(--color-celeste);
    color: var(--color-blanco);
    padding: 1rem 4rem;
    border-radius: 2rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: none;
}
.boton img {
    width: 2.2rem;
    height: 2.2rem;
}
.boton span {
    font-size: 1.6rem;
    font-weight: 600;

}
/* Otros botones */

.boton-whatsapp {
    display: none;
}
@media (min-width: 568px) {
    .contenedor-boton {
        display: inline-block;
    }
    .boton-whatsapp {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        text-decoration: none;
        color: var(--color-blanco);
        background-color: #09B175;
        padding: .8rem 2.5rem;
        border-radius: 2rem;
    }
    .boton-whatsapp img {
        width: 2rem;
        height: 2rem;
    }
    .boton-whatsapp span {
        font-size: 1.6rem;
        font-weight: 500;
    }
}