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


body{

background:#f3f3f3;

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

color:#222;

}


/* =========================
        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,.15);

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{

text-decoration:none;

color:white;

font-size:30px;

}


.menu{

justify-self:center;

color:white;

font-size:28px;

}


.aura{

justify-self:end;

}


.aura a{

text-decoration:none;

color:white;

font-size:34px;

}



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


.banner{

position:relative;

height:420px;

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%);

color:white;

font-size:72px;

text-align:center;

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

}



/* =========================
          PORTADA
========================= */


.portada{

text-align:center;

padding:60px 20px;

}


.portada img{

width:90%;

max-width:600px;

border-radius:20px;

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

}



/* =========================
          SINOPSIS
========================= */


.sinopsis{

display:flex;

justify-content:center;

padding:20px;

}


.sinopsis-cuadro{

width:90%;

max-width:900px;

background:#111;

color:#d12626;

padding:40px;

border-radius:25px;

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

}


.sinopsis-cuadro h2{

text-align:center;

margin-bottom:25px;

font-size:38px;

}


.sinopsis-cuadro p{

font-size:26px;

line-height:1.7;

text-align:center;

}



/* =========================
        DISPONIBLE
========================= */


.disponible{

padding:50px 20px;

display:flex;

justify-content:center;

}


.disponible-cuadro{

background:white;

width:90%;

max-width:800px;

padding:35px;

border-radius:25px;

text-align:center;

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

}


.disponible-cuadro h2{

font-size:42px;

color:#4A78D3;

font-weight:normal;

}



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


.video{

padding:20px;

text-align:center;

}


.video img{

width:90%;

max-width:750px;

border-radius:20px;

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

transition:.3s;

cursor:pointer;

background:(portada.png);

}


.video img:hover{

transform:scale(1.03);

}



/* =========================
          MENSAJE
========================= */


.mensaje{

padding:50px 20px;

display:flex;

justify-content:center;

}


.mensaje-cuadro{

background:white;

width:90%;

max-width:850px;

padding:35px;

border-radius:25px;

text-align:center;

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

}


.mensaje-cuadro h2{

font-size:45px;

color:#4A78D3;

font-weight:normal;

line-height:1.4;

}



/* =========================
          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);

}



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


footer{

background:#D8D8D8;

padding:40px 20px;

text-align:center;

}


footer p{

font-size:22px;

line-height:1.8;

color:#3c78d8;

}



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


@media(max-width:768px){


html,body{

width:100%;

overflow-x:hidden;

}


/* Ocultar barra superior */

.barra{

display:none;

}



body{

padding-bottom:100px;

}


/* Banner */

.banner{

height:280px;

}


.banner h1{

font-size:38px;

line-height:1.1;

}



/* Portada */


.portada{

padding:35px 15px;

}


.portada img{

width:95%;

}



/* Sinopsis */


.sinopsis{

padding:15px;

}


.sinopsis-cuadro{

padding:25px;

}


.sinopsis-cuadro h2{

font-size:26px;

}


.sinopsis-cuadro p{

font-size:18px;

line-height:1.5;

}



/* Disponible */


.disponible{

padding:35px 15px;

}


.disponible-cuadro{

padding:25px;

}


.disponible-cuadro h2{

font-size:25px;

}



/* Video */


.video img{

width:100%;

}



/* Mensaje */


.mensaje-cuadro{

padding:25px;

}


.mensaje-cuadro h2{

font-size:28px;

}



/* Botón */


.boton-volver{

font-size:18px;

padding:13px 25px;

}



footer p{

font-size:16px;

}



}



@media(max-width:430px){


.banner h1{

font-size:32px;

}


.sinopsis-cuadro p{

font-size:17px;

}


.mensaje-cuadro h2{

font-size:24px;

}


}