/* ==========================================
   BASE.CSS
   GRUPO INMA
========================================== */

/* ==========================================
   VARIABLES
========================================== */

:root{

    /* COLORES */

    --blue:#204391;
    --red:#CD2027;

    --bg:#F6F8FC;
    --surface:#FFFFFF;

    --text:#1C2740;
    --text-light:#67748B;
    --text-muted:#7B8598;

    --border:#E4EBF5;

    /* SOMBRAS */

    --shadow-soft:0 8px 20px rgba(32,67,145,.05);
    --shadow:0 16px 40px rgba(32,67,145,.06);
    --shadow-strong:0 30px 80px rgba(32,67,145,.10);

    /* RADIOS */

    --radius-sm:16px;
    --radius-md:24px;
    --radius-lg:40px;
    --radius-full:999px;

    /* CONTENEDORES */

    --container:1380px;
    --container-text:820px;

    /* HEADER */

    --header-height:160px;
    --logo-height:72px;

    /* ESPACIADO */

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:40px;
    --space-xl:60px;
    --space-2xl:80px;
    --space-3xl:120px;

    /* TRANSICIONES */

    --transition:.25s ease;

}


/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/* ==========================================
   HTML
========================================== */

html{

    scroll-behavior:smooth;

}


/* ==========================================
   BODY
========================================== */

body{

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/* ==========================================
   CONTENEDOR
========================================== */

main{

    width:100%;

    max-width:var(--container);

    margin:0 auto;

    padding:40px 40px 120px;

}

/* ==========================================
   ENLACES
========================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


/* ==========================================
   IMÁGENES
========================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

    vertical-align:middle;

}


/* ==========================================
   BOTONES
========================================== */

button{

    font:inherit;

    cursor:pointer;

    border:none;

    background:none;

}


/* ==========================================
   BOTÓN PRINCIPAL
========================================== */

.cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 26px;

    background:var(--red);

    color:#fff;

    border-radius:var(--radius-full);

    font-weight:700;

    transition:var(--transition);

}

.cta:hover{

    background:#B61C22;

    transform:translateY(-2px);

    box-shadow:var(--shadow);

}


/* ==========================================
   BOTÓN SECUNDARIO
========================================== */

.ghost{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 26px;

    background:#fff;

    color:var(--blue);

    border:1px solid var(--border);

    border-radius:var(--radius-full);

    font-weight:600;

    transition:var(--transition);

}

.ghost:hover{

    background:var(--blue);

    color:#fff;

}


/* ==========================================
   ETIQUETA (HERO TAG)
========================================== */

.heroTag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    background:#fff;

    color:var(--blue);

    border-radius:var(--radius-full);

    font-size:14px;

    font-weight:700;

    letter-spacing:.05em;

    box-shadow:var(--shadow-soft);

}


/* ==========================================
   SECTION TITLE
========================================== */

.sectionTitle{

    max-width:760px;

    margin:0 auto 70px;

}

.sectionTitle.center{

    text-align:center;

}

.sectionTitle.left{

    text-align:left;

    margin-left:0;

}

.sectionTitle span{

    display:inline-block;

    margin-bottom:14px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--red);

}

.sectionTitle h2{

    margin-bottom:22px;

    font-size:54px;

    font-weight:800;

    line-height:1.05;

    color:var(--blue);

}

.sectionTitle p{

    font-size:18px;

    line-height:1.9;

    color:var(--text-light);

}


/* ==========================================
   BOTÓN WHATSAPP
========================================== */

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    font-size:28px;

    z-index:999;

    box-shadow:0 18px 35px rgba(37,211,102,.35);

    transition:var(--transition);

}

.whatsapp:hover{

    transform:translateY(-3px) scale(1.05);

}


/* ==========================================
   SELECCIÓN
========================================== */

::selection{

    background:var(--blue);

    color:#fff;

}


/* ==========================================
   ACCESIBILIDAD
========================================== */

:focus-visible{

    outline:3px solid var(--red);

    outline-offset:3px;

}

/* ==========================================
   CARD COMPONENTS
========================================== */

.card{

    background:var(--surface);

    border:1px solid rgba(32,67,145,.08);

    border-radius:24px;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(32,67,145,.18);

    box-shadow:0 22px 45px rgba(32,67,145,.10);

}

.cardIcon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    border-radius:50%;

    background:rgba(32,67,145,.08);

    color:var(--red);

    font-size:30px;

}

.cardTitle{

    color:var(--blue);

}

.cardText{

    color:var(--text-light);

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1024px){

    main{

        padding:35px 30px 100px;

    }

    .sectionTitle{

        margin-bottom:55px;

    }

    .sectionTitle h2{

        font-size:44px;

    }

    .sectionTitle p{

        font-size:17px;

    }

}


@media(max-width:768px){

    main{

        padding:25px 20px 80px;

    }

    .sectionTitle{

        max-width:100%;

        margin-bottom:40px;

        text-align:center;

    }

    .sectionTitle.left{

        text-align:left;

    }

    .sectionTitle span{

        font-size:13px;

        margin-bottom:10px;

    }

    .sectionTitle h2{

        font-size:34px;

        line-height:1.15;

        margin-bottom:16px;

    }

    .sectionTitle p{

        font-size:16px;

        line-height:1.8;

    }

    .heroTag{

        font-size:13px;

        padding:9px 16px;

    }

    .cta,
    .ghost{

        width:100%;

        justify-content:center;

        padding:15px 24px;

    }

    .whatsapp{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

        font-size:24px;

    }

}