/*==========================================
        IA WORLD - ESTILOS GENERALES
===========================================*/

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#07142B;
    color:#ffffff;
    line-height:1.7;
}

/* CONTENEDOR */

.contenedor{
    width:90%;
    max-width:75rem;
    margin:auto;
}

/* BARRA SUPERIOR */

.barra{
    width:100%;
    background:#081F4D;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 .2rem 1rem rgba(0,0,0,.4);
}

.menu-principal{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.3rem 0;
    flex-wrap:wrap;
}

.logo{
    font-size:2rem;
    font-weight:bold;
    color:#00D4FF;
    text-decoration:none;
}

.logo span{
    color:#14F195;
}

.navegacion{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

.navegacion a{
    color:white;
    text-decoration:none;
    padding:.8rem 1.3rem;
    border-radius:2rem;
    transition:.3s;
}

.navegacion a:hover{

    background:#00D4FF;
    color:#07142B;

}

.activo{

    background:#14F195;
    color:#07142B !important;

}

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

.hero{

    min-height:90vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(rgba(7,20,43,.82),

    rgba(7,20,43,.82)),

    url("img/banner.jpg");

    background-size:cover;

    background-position:center;

}

.hero-contenido{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:3rem;

    flex-wrap:wrap;

}

.hero-texto{

    flex:1;

}

.hero-texto h1{

    font-size:4rem;

    margin-bottom:1.5rem;

    line-height:1.1;

}

.hero-texto p{

    font-size:1.2rem;

    color:#d9ecff;

    margin-bottom:2rem;

}

.hero-imagen{

    flex:1;

    text-align:center;

}

.hero-imagen img{

    width:100%;

    max-width:32rem;

}

/*====================================
            BOTONES
=====================================*/

.boton{

    display:inline-block;

    padding:1rem 2rem;

    background:#00D4FF;

    color:#07142B;

    text-decoration:none;

    font-weight:bold;

    border-radius:2rem;

    margin-right:1rem;

    transition:.3s;

}

.boton:hover{

    background:#14F195;

    transform:translateY(-.3rem);

}

.boton2{

    display:inline-block;

    padding:1rem 2rem;

    border:.12rem solid #00D4FF;

    color:white;

    text-decoration:none;

    border-radius:2rem;

    transition:.3s;

}

.boton2:hover{

    background:#00D4FF;

    color:#07142B;

}

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

.seccion{
    padding:6rem 0;
}

.titulo{
    text-align:center;
    font-size:2.8rem;
    margin-bottom:1rem;
    color:#14F195;
}

.subtitulo{
    text-align:center;
    color:#b8d8ff;
    margin-bottom:4rem;
    font-size:1.2rem;
}

/*==========================================
            TARJETAS
==========================================*/

.tarjetas{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:2rem;

}

.tarjeta{

    flex:1 1 15rem;

    background:#102B52;

    border-radius:1.2rem;

    padding:2rem;

    text-align:center;

    transition:.4s;

    border:.08rem solid transparent;

}

.tarjeta:hover{

    transform:translateY(-.8rem);

    border-color:#00D4FF;

    box-shadow:0 0 2rem rgba(0,212,255,.35);

}

.tarjeta img{

    width:6rem;

    margin-bottom:1rem;

}

.tarjeta h3{

    color:#14F195;

    margin-bottom:1rem;

    font-size:1.5rem;

}

.tarjeta p{

    color:#d8e9ff;

}

/*==========================================
            INFORMACIÓN
==========================================*/

.info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:4rem;

}

.info-texto{

    flex:1;

}

.info-texto h2{

    font-size:2.5rem;

    margin-bottom:1.5rem;

    color:#14F195;

}

.info-texto p{

    margin-bottom:1.5rem;

    color:#dcecff;

    text-align:justify;

}

.info-imagen{

    flex:1;

    text-align:center;

}

.info-imagen img{

    width:100%;

    max-width:35rem;

    border-radius:1rem;

    box-shadow:0 0 2rem rgba(0,212,255,.35);

}

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

.galeria{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:2rem;

}

.galeria img{

    width:18rem;

    height:12rem;

    object-fit:cover;

    border-radius:1rem;

    transition:.4s;

}

.galeria img:hover{

    transform:scale(1.05);

    box-shadow:0 0 1.8rem rgba(20,241,149,.45);

}

/*==========================================
            ESTADÍSTICAS
==========================================*/

.estadisticas{

    display:flex;

    justify-content:space-around;

    flex-wrap:wrap;

    gap:2rem;

    margin-top:4rem;

}

.numero{

    text-align:center;

}

.numero h2{

    font-size:3rem;

    color:#14F195;

}

.numero p{

    color:white;

}

/*==========================================
            LÍNEA DE TIEMPO
==========================================*/

.timeline{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    margin-top:3rem;

    gap:1.5rem;

}

.timeline-item{

    flex:1;

    background:#102B52;

    padding:2rem;

    border-radius:1rem;

    text-align:center;

    border-top:.3rem solid #00D4FF;

}

.timeline-item h3{

    color:#14F195;

    margin-bottom:1rem;

}

.timeline-item p{

    color:#dcecff;

}

/*==========================================
            VIDEO
==========================================*/

.video{
    text-align:center;
    margin-top:4rem;
}

.video video{
    width:100%;
    max-width:55rem;
    border-radius:1rem;
    border:.2rem solid #00D4FF;
    box-shadow:0 0 2rem rgba(0,212,255,.35);
}

/*==========================================
            FORMULARIO
==========================================*/

.formulario{
    width:100%;
    max-width:45rem;
    margin:3rem auto;
    background:#102B52;
    padding:2.5rem;
    border-radius:1rem;
}

.campo{
    width:100%;
    padding:1rem;
    margin-bottom:1.2rem;
    border:none;
    border-radius:.6rem;
    background:#ffffff;
    color:#07142B;
    font-size:1rem;
}

textarea.campo{
    min-height:10rem;
    resize:none;
}

.formulario .boton{
    border:none;
    cursor:pointer;
}

/*==========================================
            TABLAS
==========================================*/

.tabla{
    width:100%;
    border-collapse:collapse;
    margin-top:3rem;
    overflow:hidden;
    border-radius:1rem;
}

.tabla th{
    background:#00D4FF;
    color:#07142B;
    padding:1rem;
}

.tabla td{
    background:#102B52;
    color:white;
    padding:1rem;
    border:.06rem solid #1d4677;
    text-align:center;
}

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

footer{

    background:#081F4D;

    margin-top:5rem;

    padding:3rem 0;

}

.footer{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:2rem;

}

.footer-col{

    flex:1;

    min-width:15rem;

}

.footer-col h3{

    color:#14F195;

    margin-bottom:1rem;

}

.footer-col p{

    color:#dcecff;

    margin-bottom:.8rem;

}

.footer-col a{

    color:#dcecff;

    text-decoration:none;

}

.footer-col a:hover{

    color:#14F195;

}

.copy{

    text-align:center;

    margin-top:2rem;

    color:#9cc8ff;

    border-top:.06rem solid #204a7c;

    padding-top:1.5rem;

}

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

@media(max-width:900px){

.hero-contenido{

flex-direction:column;

text-align:center;

}

.info{

flex-direction:column;

}

.tarjetas{

flex-direction:column;

}

.timeline{

flex-direction:column;

}

.footer{

flex-direction:column;

}

}

@media(max-width:600px){

.hero-texto h1{

font-size:2.5rem;

}

.titulo{

font-size:2rem;

}

.logo{

font-size:1.5rem;

}

.navegacion{

justify-content:center;

}

.boton,
.boton2{

display:block;

margin-bottom:1rem;

text-align:center;

}

.galeria img{

width:100%;

height:auto;

}

}