/*====================================================
=            INICIO.CSS - PARTE 1                    =
=            ESTRUCTURA GENERAL                      =
====================================================*/

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

:root{

    --c9-primary:#7a0019;
    --c9-primary-dark:#5d0013;
    --c9-secondary:#198754;

    --c9-bg:#f5f6fa;

    --c9-white:#ffffff;

    --c9-text:#222;
    --c9-text-light:#666;

    --c9-border:#e5e5e5;

    --c9-radius:18px;

    --c9-shadow:0 10px 30px rgba(0,0,0,.08);

}

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

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

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;
    padding:0;

    font-family:'Poppins',sans-serif;

    background:var(--c9-bg);

    color:var(--c9-text);

}

a{

    color:inherit;
    text-decoration:none;

}

img{

    display:block;

    max-width:100%;
    height:auto;

}

/*====================================================
=                  CONTAINER                         =
====================================================*/

.container{

    width:min(1500px,95%);

    margin:auto;

}

/*====================================================
=                  HERO                              =
====================================================*/

.c9-hero{

    padding:35px 0 45px;

}

.hero-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:30px;

    align-items:start;

}

.c9-main{

    min-width:0;

}

/*====================================================
=                  SECCIONES                         =
====================================================*/

.c9-section{

    margin-top:35px;

}

.sect-title{

    display:flex;

    align-items:center;

    gap:12px;


    font-size:15px;

    font-weight:700;

    color:#222;
    margin-bottom:20px;

}

.sect-title i{

    color:var(--c9-primary);

}

.badge-total{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:3px 10px;

    background:var(--c9-primary);

    color:#fff;

    border-radius:30px;

    font-size:15px;

    font-weight:700;

}

/*====================================================
=                    GRID                            =
====================================================*/

.c9-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fill,minmax(320px,1fr));

    gap:28px;

}

/*====================================================
=                PAGINACION                          =
====================================================*/

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:45px 0 20px;

}

.pagination a{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:44px;

    height:44px;

    padding:0 16px;

    border-radius:10px;

    background:#fff;

    color:#444;

    font-weight:600;

    transition:.25s;

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

}

.pagination a:hover{

    background:var(--c9-primary);

    color:#fff;

}

.pagination a.active{

    background:var(--c9-primary);

    color:#fff;

}

/*====================================================
=                 ALERTAS                            =
====================================================*/

.alert{

    background:#fff;

    border-radius:14px;

    padding:25px;

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

}

.alert-info{

    border-left:5px solid var(--c9-primary);

}

/*====================================================
=              INICIO.CSS - PARTE 2                  =
=              FOOTER + RESPONSIVE                   =
====================================================*/

/*====================================================
=                   FOOTER                           =
====================================================*/

.c9-footer{

    margin-top:70px;

    background:#161616;

    color:#fff;

    padding:25px 0;

    text-align:center;

}

.c9-footer p{

    margin:0;

    color:#ddd;

    font-size:14px;

}

/*====================================================
=              WHATSAPP FLOTANTE                     =
====================================================*/

.float-whats{

    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    border-radius:50%;

    background:#25d366;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

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

    transition:.25s;

    z-index:9999;

}

.float-whats:hover{

    transform:scale(1.08);

}

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

@media(max-width:1100px){

    .hero-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .container{

        width:95%;

    }

    .c9-hero{

        padding:25px 0 35px;

    }

    .sect-title{

        font-size:22px;

    }

    .badge-total{

        font-size:13px;

        padding:4px 10px;

    }

    .c9-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .pagination{

        gap:8px;

    }

    .pagination a{

        min-width:40px;

        height:40px;

        padding:0 12px;

        font-size:14px;

    }

}

@media(max-width:576px){

    .container{

        width:94%;

    }

    .sect-title{

        font-size:20px;

    }

    .float-whats{

        width:58px;
        height:58px;

        right:18px;
        bottom:18px;

        font-size:30px;

    }

}