/* ===== GOOGLE FONTS ----------------------------------> */

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

/* IMPORTACION DE ARCHIVOS CSS */

@import url(header.css);
@import url(footer.css);
@import url(home.css);
@import url(normalize.css);
@import url(style.css);
@import url(afiliaciones.css);
@import url(nosotros.css);
@import url(servicios.css);
@import url(agradecimiento.css);
@import url(formularios.css);
@import url(../formulario/css/solicitud.css);

/* ==== VARIABLES CSS ----------------------------> */

:root {
    /* ======= COLORES ----------------> */
    --color-fucsia: hsl(340, 74%, 46%);
    --color-verde: hsl(181, 54%, 16%);
    --color-blanco: hsl(180, 33%, 100%);
    --text-color: #232323;
    /* ----------  variaciones de colores ---------- */
    --color-fucsia-alt: hsl(340, 94%, 66%);
    /* ======= FUENTES Y TIPOGRAFIAS ----------------> */
    /* .5rem = 8px | 1rem = 16px .... */
    --body-font: "Poppins", sans-serif;
    --tamaño-fuente-extragrande: 3.5rem;
    --tamaño-fuente-h1: 2.5rem;
    --tamaño-fuente-h2: 1.5rem;
    --tamaño-fuente-h3: 1.25rem;
    --tamaño-fuente-normal: 1rem;
    --tamaño-fuente-small: 0.875rem;
    --tamaño-fuente-smaller: 0.813rem;
    /* ======== FONT WEIGHT ----------------------------> */
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    /* ====== Z INDEX ----------------> */
    --z-tools: 10;
    --z-fixed: 100;
    --z-modal: 1000;
}

@media screen and (max-width: 768px) {
     :root {
        --tamaño-fuente-extragrande: 2rem;
        --tamaño-fuente-h1: 1.5rem;
        --tamaño-fuente-h2: 1.25rem;
        --tamaño-fuente-h3: 1rem;
        --tamaño-fuente-normal: 0.928rem;
        --tamaño-fuente-small: 0.813rem;
        --tamaño-fuente-smaller: 0.75rem;
    }
}


/* =========== BASE CSS -----------------> */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    background-color: var(--color-blanco);
    font-size: var(--tamaño-fuente-normal);
    color: var(--text-color);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}


/* === CODIGO REUSABLE CSS ------------> */

.container {
    width: 90%;
    max-width: 1152px;
    margin: 0 auto;
}

.grid {
    display: grid;
    gap: 1.5rem;
}

.section {
    padding-block: 8rem 1.5rem;
}

.section__titulo {
    font-size: var(--tamaño-fuente-h1);
    color: var(--primer-color);
    text-align: center;
    margin-bottom: 1rem;
    font-family: var(--body-font);
}

main {
    overflow: hidden;
}


/* BOTON DE WHATSAPP FLOTANTATE INICIO */

.btn-wsp {
    position: fixed;
    width: 48px;
    height: 48px;
    line-height: 48px;
    bottom: 80px;
    right: 15px;
    background: #25d366;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.btn-wsp:hover {
    text-decoration: none;
    background: white;
    color: #25d366;
    transition: all 0.2s;
}


/* BOTON DE WHATSAPP FLOTANTATE FIN */