/* ===== BENEFICIOS ===== */

.beneficios{

    background:#f7f7f7;

    padding:70px 10%;

    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;

}

.beneficio-card{

    background:white;

    width:320px;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

}

.beneficio-card:hover{

    transform:translateY(-8px);

}

.beneficio-card i{

    font-size:45px;

    color:#003B66;

    margin-bottom:20px;

}

.beneficio-card h3{

    color:#003B66;

    margin-bottom:15px;

}

.beneficio-card p{

    color:#666;

    line-height:1.7;

}


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

.footer{

    background:#003B66;

    margin:0;

    padding:0;

    color:white;

}


/* =========================================
   SEPARADOR
========================================= */

.footer-separador{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:8px auto 18px;

}

.footer-separador span{

    width:100px;

    height:1px;

    background:rgba(255,255,255,.25);

}

.footer-separador i{

    color:#D4AF37 !important;

    font-size:16px;

}


/* =========================================
   CONTENEDOR DEL FOOTER
========================================= */

.footer-container{

    display:grid;

    grid-template-columns:
        1.35fr
        1.25fr
        1fr
        .8fr
        1.2fr;

    gap:25px;

    align-items:start;

    padding:30px 8% 25px;

}


/* =========================================
   LOGO
========================================= */

.footer-logo{

    text-align:left;

}

.footer-logo img{

    width:140px;

    max-width:100%;

    height:auto;

    margin-bottom:12px;

}

.footer-logo p{

    color:#fff;

    line-height:1.4;

    font-size:12px;

    max-width:300px;

    margin-top:0;

    margin-bottom:6px;

}


/* =========================================
   CONTACTO Y HORARIOS
========================================= */

.footer-info h3,
.footer-redes h3{

    color:#D4AF37;

    margin-bottom:15px;

    font-size:18px;

}

.footer-info p{

    margin-bottom:8px;

    color:white;

    line-height:1.5;

    font-size:14px;

}

.footer-info p i{

    margin-right:7px;

}


/* =========================================
   REDES SOCIALES
========================================= */

.social-icons{

    display:flex;

    gap:12px;

}

.social-icons a{

    width:40px;

    height:40px;

    background:rgba(255,255,255,.12);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    text-decoration:none;

    font-size:18px;

    transition:.3s;

}

.social-icons a:hover{

    background:white;

    color:#003B66;

    transform:translateY(-4px);

}


/* =========================================
   LEGAL
========================================= */

.footer-legal{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.footer-legal h3{

    color:#D4AF37;

    margin-bottom:8px;

    font-size:18px;

}

.footer-legal a{

    color:white;

    text-decoration:none;

    font-size:14px;

    line-height:1.5;

    transition:.3s;

}

.footer-legal a:hover{

    color:#D4AF37;

    padding-left:4px;

}


/* =========================================
   MÉTODOS DE PAGO
========================================= */

/*
   Estos estilos se mantienen aquí como respaldo.
   Los estilos principales de los métodos de pago
   continúan en pagos.css.
*/

.metodos-pago{

    background:#003B66;

}


/* =========================================
   COPYRIGHT
========================================= */

.footer-copy{

    width:100%;
    box-sizing:border-box;

    text-align:center;

    padding:15px;

    border-top:1px solid rgba(255,255,255,.1);

    color:#ddd;

    font-size:12px;

    display:block;

}

/* =========================================
   CONTACTO
========================================= */

.contacto-item a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease;
}

.contacto-item a:hover {
    color: #D4AF37;
}

.contacto-item i {
    width: 24px;
}


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

@media(max-width:1100px){

    .footer-container{

        grid-template-columns:repeat(2,1fr);

        gap:35px;

    }

}


@media(max-width:992px){

    .footer-container{

        grid-template-columns:repeat(2,1fr);

        text-align:center;

    }

    .footer-logo{

        text-align:center;

    }

    .footer-logo p{

        margin-left:auto;

        margin-right:auto;

    }

    .social-icons{

        justify-content:center;

    }

    .footer-legal{

        align-items:center;

    }

}


@media(max-width:600px){

    .footer-container{

        grid-template-columns:1fr;

        padding:40px 25px;

    }

}