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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:

        calc(var(--header-height) + 40px)

        20px

        100px;

    overflow:hidden;

    color:#FFFFFF;

    text-align:center;

}


/* Imagen */

.hero-bg{

    position:absolute;

    inset:0;

    background-image:url("imagenes/Portada-ACA-1.webp");

    background-size:cover;
    background-position:center;

    transform:scale(1);

    animation:heroZoom 18s ease-in-out infinite alternate;

}


/* Oscurece la foto */

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    );

}


/* Contenido */

.hero-content{

    position:relative;

    z-index:10;

    text-align:center;

    width:min(900px,90%);

}

/* Logo */

.hero-logo{

    width:110px;

    margin-bottom:10px;

    opacity:.95;

}


/* Título */

.hero h1{

    font-size:clamp(2rem,8vw,6rem);

    font-weight:900;

    line-height:1;

    text-transform:uppercase;

    margin-bottom:15px;

}

.hero h1 span{

    display:block;

    color:#39c2c9;

}


/* Ubicación */

.hero-location{

    font-size:1.3rem;

    margin-bottom:10px;

}


/* Fecha */

.hero-date{

    font-size:1.15rem;

    opacity:.85;

    margin-bottom:45px;

}


/* Botones */

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:25px;

}


.btn{

    padding:16px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:bold;

    transition:.35s;

}


.btn-primary{

    background:#39c2c9;

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-4px);

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

}


.btn-secondary{

    border:2px solid #fff;

    color:#fff;

}

.btn-secondary:hover{

    background:#fff;

    color:#111;

}


/* Características */

.hero-features{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    font-size:1rem;

    opacity:.9;

}


/* Flecha */

.scroll-down{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#FFFFFF;

    font-size:1.8rem;

    text-decoration:none;

    opacity:.75;

    z-index:1;

    animation:bounce 2s infinite;

}

/* Animaciones */

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translate(-50%,0);

    }

    40%{

        transform:translate(-50%,-12px);

    }

    60%{

        transform:translate(-50%,-6px);

    }

}


@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}



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

@media(max-width:768px){

    .hero h1{

        font-size:3rem;

    }

    .hero-location{

        font-size:1rem;

    }

    .hero-date{

        font-size:1rem;

    }

    .hero-features{

        flex-direction:column;

        gap:12px;

    }

    .hero-logo{

        width:110px;

    }

}
@media(max-width:480px){

    .hero{

        min-height:100svh;

        padding:90px 20px 70px;

    }


    .hero h1{

        font-size:2rem;

        line-height:1.1;

    }


    .hero h1 span{

        font-size:.95em;

    }


    .hero-logo{

        width:90px;

        margin-bottom:20px;

    }


    .hero-content p{

        font-size:1rem;

    }


    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }


    .btn,
    .btn-outline{

        width:100%;

        max-width:280px;

        margin:auto;

    }


}

/* ================================
   TALLERES
================================ */


.programa{

    padding:100px 20px;

    background:#f7f7f7;

}



.section-header{

    text-align:center;

    margin-bottom:60px;

}


.section-header h2{

    font-size:clamp(2.5rem,5vw,4rem);

    color:#054F4F;

    margin:0;

}



/* GRID */

.grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}



/* CARD */

.card{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

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

    transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.12);

}



/* IMAGEN */

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

}



/* CONTENIDO */

.card-content{

    padding:25px;

}


.card h3{

    color:#054F4F;

    font-size:1.25rem;

    line-height:1.3;

    margin-bottom:20px;

}


.card ul{

    padding-left:20px;

    margin:0;

}


.card li{

    margin-bottom:10px;

    color:#555;

    line-height:1.5;

}



/* RESPONSIVE */

@media(max-width:1100px){

    .grid{

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

    }

}


@media(max-width:800px){

    .grid{

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

    }

}


@media(max-width:550px){

    .grid{

        grid-template-columns:1fr;

    }

}

/* ================================
   INSTRUCTORES
================================ */

.instructors-section{

    padding:100px 20px;

    background:#f7f7f7;

}


.section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}


.section-header h2{

    font-size:clamp(2.5rem,5vw,4rem);

    color:#054F4F;

    margin-bottom:15px;

}


.section-header p{

    color:#666;

}



/* GRID */

.instructors-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}



/* TARJETAS */

.instructor-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s ease;

}


.instructor-card:hover{

    transform:translateY(-8px);

}



/* FOTO */

.instructor-card img{

    width:100%;

    height:300px;

    object-fit:cover;

}



/* NOMBRE */

.instructor-content{

    padding:20px;

    text-align:center;

}


.instructor-content h3{

    margin:0;

    font-size:1.15rem;

    color:#054F4F;

}



/* RESPONSIVE */

@media(max-width:1000px){

    .instructors-grid{

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

    }

}


@media(max-width:750px){

    .instructors-grid{

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

    }

}


@media(max-width:500px){

    .instructors-grid{

        grid-template-columns:1fr;

    }

}

/* ================================
   DETAILS
================================ */


.details-section{

    padding:100px 20px;

}


#payments{

    background:#f7f7f7;

}


#location{

    background:#ffffff;

}



.details-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}



.details-box{

    background:#ffffff;

    padding:35px;

    border-radius:18px;

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

}



.details-box h3{

    color:#054F4F;

    font-size:1.5rem;

    margin-bottom:25px;

}



.details-box p{

    color:#555;

    line-height:1.7;

}



.details-box ul{

    padding-left:20px;

}



.details-box li{

    margin-bottom:15px;

    color:#555;

    line-height:1.6;

}



.location-content{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    align-items:stretch;

}



.map-container{

    border-radius:18px;

    overflow:hidden;

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

}



.map-container iframe{

    width:100%;

    height:100%;

    min-height:400px;

    border:0;

}



.location-image{

    display:block;

    width:100%;

    max-width:1200px;

    height:350px;

    object-fit:cover;

    margin:40px auto 0;

    border-radius:18px;

}



@media(max-width:800px){

    .location-content{

        grid-template-columns:1fr;

    }


    .map-container iframe{

        min-height:300px;

    }

}



@media(max-width:800px){

    .details-grid{

        grid-template-columns:1fr;

    }


    .location-image{

        height:250px;

    }

}

/* ================================
   SPONSORS
================================ */


.sponsors-section{

    padding:100px 20px;

    background:#f7f7f7;

}



.sponsors-grid{

    max-width:1200px;

    margin:50px auto 0;

    display:grid;

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

    gap:30px;

}



/* TARJETAS */

.sponsor-card{

    background:#ffffff;

    min-height:180px;

    border-radius:16px;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.07);

    transition:.3s ease;

}



.sponsor-card:hover{

    transform:translateY(-6px);

}



.sponsor-card img{

    max-width:140px;

    max-height:80px;

    object-fit:contain;

    margin-bottom:20px;

}



.sponsor-card h3{

    color:#054F4F;

    font-size:1rem;

    line-height:1.4;

    margin:0;

}



@media(max-width:1000px){

    .sponsors-grid{

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

    }

}



@media(max-width:700px){

    .sponsors-grid{

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

    }

}



@media(max-width:450px){

    .sponsors-grid{

        grid-template-columns:1fr;

    }

}