/*
==========================================================
 Portal ICEC GYE
 Archivo: responsive.css
 Versión: 0.1.0
==========================================================
*/

/* ======================================================
   DESKTOP GRANDE
====================================================== */

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

}

/* ======================================================
   LAPTOP
====================================================== */

@media (max-width:1200px){

    .container{
        width:min(100% - 3rem,1100px);
    }

}

/* ======================================================
   TABLET
====================================================== */

@media (max-width:992px){

    h1{
        font-size:2.2rem;
    }

    h2{
        font-size:1.8rem;
    }

    .ministerios-grid,
    .eventos-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* ======================================================
   TABLET PEQUEÑA
====================================================== */

@media (max-width:768px){

    section{
        padding:3.5rem 0;
    }

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.6rem;
    }

    .container{
        width:min(100% - 2rem,100%);
    }

    .ministerios-grid,
    .eventos-grid{
        grid-template-columns:1fr;
    }

    .countdown{
        gap:.75rem;
    }

}

/* ======================================================
   CELULAR
====================================================== */

@media (max-width:576px){

    body{
        font-size:.95rem;
    }

    h1{
        font-size:1.8rem;
    }

    h2{
        font-size:1.45rem;
    }

    .btn{
        width:100%;
    }

    .countdown-item{
        min-width:70px;
        padding:.8rem;
    }

    .card-content{
        padding:1.2rem;
    }

}

/* ======================================================
   CELULAR PEQUEÑO
====================================================== */

@media (max-width:360px){

    h1{
        font-size:1.6rem;
    }

    h2{
        font-size:1.3rem;
    }

    .container{
        width:calc(100% - 1rem);
    }

}

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

/* ==========================
TABLET
========================== */

@media (max-width:992px){

    .hero{

        padding:50px 0 70px;

    }

    .hero-banner{

        margin-bottom:35px;

    }

    .hero-text h2{

        font-size:3rem;

    }

    .hero-text p{

        font-size:1.1rem;

        max-width:650px;

    }

}

/* ==========================
CELULAR
========================== */

@media (max-width:768px){

    .hero{

        padding:35px 0 60px;

    }

    .hero-banner{

        margin-bottom:28px;

    }

    .hero-banner img{

        border-radius:12px;

    }

    .hero-text h2{

        font-size:2.3rem;

        line-height:1.2;

    }

    .hero-text p{

        font-size:1rem;

        line-height:1.7;

        margin-bottom:30px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:320px;

    }

}

/* ==========================
CELULAR PEQUEÑO
========================== */

@media (max-width:480px){

    .hero{

        padding:25px 0 50px;

    }

    .hero-banner{

        margin-bottom:22px;

    }

    .hero-text h2{

        font-size:2rem;

    }

}

/* ======================================================
HOY EN ICEC GYE RESPONSIVE
====================================================== */

@media(max-width:992px){

    #hoy-icec .eventos-grid{

        grid-template-columns:1fr;

    }

}

/* ======================================================
INFORMACIÓN DE LA SEMANA RESPONSIVE
====================================================== */

@media(max-width:992px){

    .info-grid{

        grid-template-columns:1fr;

    }

}

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

/* Laptop */

@media (max-width:1200px){

    .agenda-grid{

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

        gap:24px;

    }

}

/* Tablet */

@media (max-width:992px){

    .agenda-grid{

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

        gap:20px;

    }

}

/* Celular */

@media (max-width:768px){

    #agenda{

        padding:70px 0;

    }

    .agenda-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .agenda-card{

        width:100%;

    }

}

/* Celulares pequeños */

@media (max-width:480px){

    .agenda-day{

        font-size:1.1rem;

        padding:16px;

    }

    .agenda-item{

        padding:16px;

    }

    .agenda-item h4{

        font-size:1rem;

    }

    .agenda-item span{

        font-size:.9rem;

    }

}


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

/* ==========================
TABLET
========================== */

@media (max-width:992px){

    .nosotros-grid{

        grid-template-columns:1fr;

    }

    .valores-grid{

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

    }

}

/* ==========================
CELULAR
========================== */

@media (max-width:768px){

    #nosotros{

        padding:70px 0;

    }

    .nosotros-intro{

        margin-bottom:40px;

    }

    .nosotros-card{

        padding:28px;

    }

    .nosotros-card h3{

        font-size:1.35rem;

    }

    .valores-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

}

/* ==========================
CELULAR PEQUEÑO
========================== */

@media (max-width:480px){

    .nosotros-card{

        padding:22px;

    }

    .valor-card{

        padding:24px;

    }

    .valor-icon{

        font-size:2rem;

    }

}