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


body{

background:#f5f5f5;

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

color:#333;

}


/* =========================
        BARRA SUPERIOR
========================= */


.barra{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:95%;

max-width:1200px;

padding:20px 35px;

display:grid;

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

align-items:center;

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

backdrop-filter:blur(18px);

border-radius:50px;

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

z-index:1000;

}


.logo{

justify-self:start;

}


.logo a{

color:white;

text-decoration:none;

font-size:32px;

}


.menu{

justify-self:center;

}


.menu span{

color:white;

font-size:30px;

}


.aura{

justify-self:end;

}


.aura a{

font-size:34px;

text-decoration:none;

}



/* =========================
          BANNER
========================= */


.banner{

height:430px;

position:relative;

overflow:hidden;

}


.banner img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}


.banner h1{

position:absolute;

top:50%;

left:50%;

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

text-align:center;

font-size:70px;

color:white;

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

line-height:1.3;

}


.banner h1 span{

color:#19c719;

}



/* =========================
          CONTENIDO
========================= */


.contenido{

width:90%;

max-width:900px;

margin:50px auto;

text-align:center;

}


.contenido p{

font-size:27px;

line-height:1.7;

color:#5b82c7;

margin-bottom:45px;

}



/* =========================
        SEPARADOR
========================= */


.separador{

width:100%;

height:180px;

display:flex;

align-items:center;

justify-content:center;

background-image:url("nubes.jpg");

background-size:cover;

background-position:center;

}


.separador h2{

font-size:45px;

color:#4A78D3;

text-shadow:0 3px 10px rgba(255,255,255,.8);

}



/* =========================
        TEXTO FINAL
========================= */


.texto-final{

width:90%;

max-width:850px;

margin:40px auto;

background:white;

padding:35px;

border-radius:20px;

text-align:center;

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

}


.texto-final p{

font-size:28px;

line-height:1.6;

}



/* =========================
          BOTÓN
========================= */


.volver{

text-align:center;

padding:30px 0 60px;

}


.boton-volver{

display:inline-block;

background:rgba(45,120,160,.85);

color:white;

padding:14px 30px;

border-radius:35px;

font-size:22px;

text-decoration:none;

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

transition:.3s;

}


.boton-volver:hover{

transform:scale(1.05);

}



/* =========================
        PIE DE PAGINA
========================= */


footer{

background:#dedede;

padding:35px 20px;

text-align:center;

}


footer p{

font-size:18px;

line-height:1.8;

color:#555;

}



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


@media(max-width:768px){


html,body{

width:100%;

overflow-x:hidden;

}


/* Oculta barra superior */

.barra{

display:none;

}


body{

padding-bottom:100px;

}


/* Banner */


.banner{

height:280px;

}


.banner h1{

font-size:35px;

line-height:1.1;

}



/* Contenido */


.contenido{

width:90%;

margin:35px auto;

}


.contenido p{

font-size:18px;

line-height:1.5;

margin-bottom:30px;

}



/* Separador */


.separador{

height:120px;

}


.separador h2{

font-size:28px;

text-align:center;

}



/* Texto final */


.texto-final{

padding:25px;

}


.texto-final p{

font-size:18px;

line-height:1.5;

}



/* Botón */


.boton-volver{

font-size:18px;

padding:12px 25px;

}



/* Footer */


footer p{

font-size:16px;

}



}



@media(max-width:430px){


.banner h1{

font-size:30px;

}


.separador h2{

font-size:24px;

}


.texto-final p{

font-size:17px;

}


}