*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

background:#D9D9D9;

font-family:"Times New Roman",serif;

}



/* Barra */

.barra{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:95%;

max-width:1200px;

padding:22px 40px;

display:grid;

grid-template-columns:1fr auto 1fr;

align-items:center;

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

backdrop-filter:blur(18px);

border-radius:50px;

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

z-index:1000;

}



.logo{

justify-self:start;

}



.logo a{

color:white;

text-decoration:none;

font-size:33px;

font-family:"Times New Roman",serif;

}



.menu{

display:flex;

justify-content:center;

}



.menu span{

color:white;

font-size:30px;

font-family:"Times New Roman",serif;

}



.aura{

justify-self:end;

}



.aura a{

color:white;

text-decoration:none;

font-size:34px;

}





/* Banner */

.banner{

position:relative;

width:100%;

height:360px;

overflow:hidden;

}



.banner img{

width:100%;

height:100%;

object-fit:cover;

}



.banner h1{

position:absolute;

top:50%;

left:50%;

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

color:white;

font-size:65px;

text-shadow:0 5px 20px rgba(0,0,0,.45);

}





/* Introducción */

.intro{

width:90%;

max-width:1200px;

margin:50px auto;

text-align:center;

}



.intro p{

font-size:25px;

line-height:1.7;

}





/* Franja azul */

.titulo{

width:100%;

background:#3C78D8;

padding:18px;

margin-bottom:45px;

}



.titulo h2{

color:white;

text-align:center;

font-size:38px;

}





/* Contenedor de tarjetas */

.beta-contenedor{

width:90%;

max-width:1300px;

margin:0 auto 70px auto;

display:grid;

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

gap:30px;

}





/* Tarjetas */

.beta-card{

display:flex;

align-items:center;

background:#E6E6E6;

border-radius:25px;

padding:20px;

box-shadow:0 10px 25px rgba(0,0,0,.20);

transition:.25s;

}



.beta-card:hover{

transform:translateY(-4px);

}



.beta-card img{

width:150px;

height:150px;

border-radius:20px;

object-fit:cover;

margin-right:25px;

box-shadow:0 8px 20px rgba(0,0,0,.20);

}





/* Información */

.beta-info{

display:flex;

flex-direction:column;

justify-content:center;

}



.beta-info h3{

font-size:30px;

margin-bottom:10px;

color:#3C78D8;

}



.beta-info p{

font-size:21px;

line-height:1.6;

margin-bottom:20px;

}





/* Botón */

.beta-boton{

width:170px;

padding:14px;

text-align:center;

text-decoration:none;

color:white;

font-size:22px;

border-radius:18px;

background:rgba(60,120,216,.75);

backdrop-filter:blur(15px);

box-shadow:0 8px 18px rgba(0,0,0,.20);

transition:.25s;

}



.beta-boton:hover{

background:#3C78D8;

transform:scale(1.05);

}


/* =========================
          BOTON
========================= */


.volver{

text-align:center;

padding:20px 0 60px;

}


.boton-volver{

display:inline-block;

padding:15px 35px;

background:rgba(70,130,180,.75);

backdrop-filter:blur(18px);

border-radius:35px;

color:white;

text-decoration:none;

font-size:24px;

box-shadow:0 8px 20px rgba(0,0,0,.20);

transition:.25s;

}


.boton-volver:hover{

background:#3C78D8;

transform:translateY(-3px);

}



/* Pie de página */

footer{

background:#cfcfcf;

padding:40px 20px;

text-align:center;

}



footer p{

font-size:22px;

line-height:1.8;

color:#3c78d8;

}





/* Responsive */

@media(max-width:900px){

.beta-contenedor{

grid-template-columns:1fr;

}



.beta-card{

flex-direction:column;

text-align:center;

}



.beta-card img{

margin:0 0 20px 0;

width:180px;

height:180px;

}



.beta-info{

align-items:center;

}



.beta-info h3{

font-size:26px;

}



.beta-info p{

font-size:20px;

}



.beta-boton{

width:100%;

max-width:220px;

}

}

/* ============================= */
/* BARRA MOVIL BETAVERSION */
/* ============================= */


@media (min-width:769px){

    .barra-movil{

        display:none !important;

    }

}




@media (max-width:768px){


    html,body{

        width:100%;

        overflow-x:hidden;

    }




    body{

        padding-bottom:100px;

    }





    /* Barra inferior */


    .barra-movil{

        position:fixed;

        bottom:20px;

        left:50%;

        transform:translateX(-50%);


        width:95%;

        max-width:450px;

        height:65px;


        background:rgba(30,30,30,.65);


        backdrop-filter:blur(25px);

        -webkit-backdrop-filter:blur(25px);



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


        border-radius:40px;


        display:flex;

        justify-content:space-evenly;

        align-items:center;



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


        z-index:999999;

    }







    /* Elementos */


    .item-menu{

        position:relative;

        display:flex;

        justify-content:center;

        align-items:center;

    }




    .item-menu button{

        background:none;

        border:none;

        padding:8px;

        cursor:pointer;

    }




    .item-menu a{

        text-decoration:none;

        color:white;

        display:flex;

        align-items:center;

        justify-content:center;

    }





    /* Iconos */


    .material-symbols-rounded{

        font-size:30px;

        color:white;

        transition:.3s;

    }





    .item-menu button:hover .material-symbols-rounded{

        transform:translateY(-5px);

    }







    /* Submenús */


    .submenu{

        position:absolute;


        bottom:75px;


        left:50%;


        transform:translateX(-50%);



        width:260px;



        background:rgba(15,15,15,.95);


        backdrop-filter:blur(20px);

        -webkit-backdrop-filter:blur(20px);



        border-radius:25px;



        padding:15px;



        display:none;



        max-height:350px;


        overflow-y:auto;



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

    }





    .desplegable.activo .submenu{

        display:block;

    }





    .submenu a{

        display:block;


        text-align:center;


        padding:14px;



        color:white;


        text-decoration:none;



        border-radius:15px;



        font-size:18px;

    }





    .submenu a:hover{

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

    }





    .titulo-submenu{

        text-align:center;


        color:#8fb8ff;


        padding:12px;


        font-weight:bold;

    }






    /* Responsive general */


    img{

        max-width:100%;

        height:auto;

    }



    video,
    iframe{

        max-width:100%;

    }




    section,
    main{

        width:100%;

        max-width:100%;

    }





    h1{

        font-size:38px !important;

    }




    h2{

        font-size:28px !important;

    }




    h3{

        font-size:22px !important;

    }





    p{

        font-size:16px !important;

        line-height:1.5;

    }



}