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

.hero-epi{
    min-height:100vh;

    background:
    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.75)
    ),
    url('../img/pru/img-adn.gif');

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

    display:flex;
    align-items:center;
}

.hero-contenido{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

.hero-texto{
    flex:1;
}

.hero-texto h1{
    font-size:8rem;
    line-height:1.1;
    font-weight:500;
    margin-left: 60px;
    
}

.hero-texto span{
    color:#00d1b2;
}

.hero-texto p{
    margin-top:25px;
    font-size:1.1rem;
    color:#d6d6d6;
    line-height:1.8;
    max-width:400px;
    margin-left: 60px;
}

.btn-hero{
    display:inline-block;
    margin-top:35px;
    padding:16px 35px;
    background:#00d1b2;
    color:white;
    text-decoration:none;
    border-radius:10px;
    transition:.3s;
    margin-left: 60px;
}

.btn-hero:hover{
    background:#009e95;
}

.hero-imagen{
    flex:1;
}

.hero-imagen img{
    width:100%;
}


/*==================================
QUE ES
==================================*/

.que-es{
    background:#081c29;
    padding:100px 8%;
    display:flex;
    align-items:center;
    gap:70px;
}

.que-es-imagen{
    flex:1;
}

.que-es-imagen img{
    width:100%;
    border-radius:25px;
}

.que-es-texto{
    flex:1;
}

.que-es-texto h2{
    color:#00d1b2;
    font-size:2.8rem;
    margin-bottom:30px;
}

.que-es-texto p{
    color:#d6d6d6;
    line-height:2;
    margin-bottom:20px;
}


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

.beneficios{
    background:#05141d;
    padding:100px 8%;
}

.beneficios h2{
    text-align:center;
    color:#00d1b2;
    font-size:2.8rem;
    margin-bottom:60px;
}

.grid-beneficios{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.beneficio{
    background:#0d2438;
    padding:40px 30px;
    border-radius:20px;
    text-align:center;
    transition:.4s;
}

.beneficio:hover{
    transform:translateY(-10px);
    border:1px solid #00d1b2;
}

.icono-beneficio{
    font-size:50px;
    margin-bottom:20px;
}

.beneficio h3{
    margin-bottom:15px;
}

.beneficio p{
    color:#d6d6d6;
    line-height:1.8;
}


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

@media(max-width:900px){

.hero-contenido,
.que-es{
    flex-direction:column;
}

.hero-texto h1{
    font-size:3rem;
}

.que-es-texto h2{
    font-size:2.2rem;
}
}

/*==================================
¿QUÉ ANALIZA?
==================================*/

.analiza{
    background:#081c29;
    padding:100px 8%;
}

.analiza h2{
    text-align:center;
    color:#00d1b2;
    font-size:2.8rem;
    margin-bottom:60px;
}

.grid-analiza{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.card-analiza{
    background:#0d2438;
    padding:40px;
    border-radius:20px;
    transition:.4s;
}

.card-analiza:hover{
    transform:translateY(-10px);
    border:1px solid #00d1b2;
}

.card-analiza h3{
    color:#00d1b2;
    margin-bottom:20px;
}

.card-analiza p{
    color:#d6d6d6;
    line-height:1.8;
}


/*==================================
GALERÍA
==================================*/

.galeria{
    background:#05141d;
    padding:100px 8%;
}

.galeria h2{
    text-align:center;
    color:#00d1b2;
    font-size:2.8rem;
    margin-bottom:60px;
}

.grid-galeria{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.imagen{
    overflow:hidden;
    border-radius:20px;
}

.imagen img{
    width:100%;
    height:300px;
    object-fit:cover;
    transition:.5s;
}

.imagen:hover img{
    transform:scale(1.1);
}


/*==================================
VIDEOS
==================================*/

.videos{
    background:#081c29;
    padding:100px 8%;
}

.videos h2{
    text-align:center;
    color:#00d1b2;
    font-size:2.8rem;
    margin-bottom:60px;

}

.grid-videos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:40px;
}

.video-card{
    background:#0d2438;
    padding:20px;
    border-radius:20px;
}

.video-card iframe,
.video-card video{
    width:100%;
    height:250px;
    border:none;
    border-radius:15px;
    object-fit:contain; /* evita que se recorte el video */
    background:#000;
}

.video-card h3{
    margin-top:20px;
    text-align:center;
    color: #fff;
}


/*==================================
PROCESO
==================================*/

.proceso{
    background:#05141d;
    padding:100px 8%;
}

.proceso h2{
    text-align:center;
    color:#00d1b2;
    font-size:2.8rem;
    margin-bottom:70px;
}

.linea-proceso{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.paso{
    background:#0d2438;
    padding:40px;
    border-radius:20px;
    text-align:center;
    transition:.4s;
}

.paso:hover{
    transform:translateY(-10px);
    border:1px solid #00d1b2;
}

.circulo{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    background:#00d1b2;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    font-weight:bold;
}

.paso p{
    color:#d4d4d4;
    margin-top:15px;
}


/*==================================
TECNOLOGÍA
==================================*/

.tecnologia{
    background:#081c29;
    padding:100px 8%;
}

.tecnologia-contenido{
    display:flex;
    align-items:center;
    gap:70px;
}

.tecnologia-texto{
    flex:1;
}

.tecnologia-texto h2{
    color:#00d1b2;
    font-size:3rem;
    margin-bottom:30px;
}

.tecnologia-texto p{
    line-height:1.9;
    color:#d6d6d6;
    margin-bottom:25px;
}

.tecnologia-items{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.item{
    background:#102d43;
    padding:20px;
    border-radius:15px;
}

.tecnologia-imagen{
    flex:1;
}

.tecnologia-imagen img{
    width:100%;
    border-radius:25px;
}


/*==================================
CIENCIA
==================================*/

.ciencia{
    background:
    linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
    url('../img/epi/ciencia.jpg');
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.overlay-ciencia{
    padding:150px 8%;
    text-align:center;
}

.overlay-ciencia h2{
    color:#00d1b2;
    font-size:3rem;
    margin-bottom:30px;
}

.overlay-ciencia p{
    max-width:800px;
    margin:auto;
    font-size:1.2rem;
    color:white;
}


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

@media(max-width:900px){

.tecnologia-contenido{
    flex-direction:column;
}

.tecnologia-items{
    grid-template-columns:1fr;
}

}

/*==================================
TESTIMONIOS
==================================*/

.testimonios{
    background:#05141d;
    padding:100px 8%;
}

.testimonios h2{
    text-align:center;
    color:#00d1b2;
    font-size:2.8rem;
    margin-bottom:60px;
}

.contenedor-testimonios{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.testimonio{
    background:#0d2438;
    padding:40px;
    border-radius:20px;
    transition:.4s;
}

.testimonio:hover{
    transform:translateY(-10px);
}

.estrellas{
    color:gold;
    font-size:25px;
    margin-bottom:20px;
}

.testimonio p{
    line-height:1.8;
    color:#d6d6d6;
}

.testimonio h4{
    margin-top:20px;
    color:#00d1b2;
}



/*==================================
FAQ
==================================*/

.faq{
    background:#081c29;
    padding:100px 8%;
}

.faq h2{
    text-align:center;
    color:#00d1b2;
    margin-bottom:60px;
    font-size:2.8rem;
}

.faq-item{
    margin-bottom:20px;
}

.pregunta{
    width:100%;
    background:#0d2438;
    color:white;
    padding:20px;
    border:none;
    text-align:left;
    border-radius:15px;
    cursor:pointer;
    font-size:18px;
}

.respuesta{
    display:none;
    background:#102d43;
    padding:20px;
    border-radius:0 0 15px 15px;
}

.respuesta p{
    color:#d6d6d6;
}



/*==================================
CTA FINAL
==================================*/

.cta-final{
    background:
    linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
    url('../img/epi/cta-fondo.jpg');

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

.cta-contenido{
    text-align:center;
    padding:150px 8%;
}

.cta-contenido h2{
    color:#00d1b2;
    font-size:3rem;
    margin-bottom:25px;
}

.cta-contenido p{
    color:white;
    font-size:1.2rem;
    margin-bottom:40px;
}

.btn-cta{
    display:inline-block;
    padding:18px 40px;
    background:#00d1b2;
    color:white;
    text-decoration:none;
    border-radius:15px;
    transition:.3s;
}

.btn-cta:hover{
    background:#009e95;
}