/*==================================================
RESET
==================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Arial,Helvetica,sans-serif;

background:

linear-gradient(
rgba(0,8,20,.80),
rgba(0,8,20,.85)
),

url("img/mm7intro.png");

background-size:cover;
background-position:center;
background-attachment:fixed;

color:white;

min-height:100vh;

display:flex;
flex-direction:column;

overflow-x:hidden;

}

/*==================================================
HEADER
==================================================*/

header{

width:100%;

padding:50px 20px 30px;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

}

.titulo{

font-size:clamp(2.3rem,6vw,5rem);

font-weight:bold;

letter-spacing:4px;

text-transform:uppercase;

color:#7fd8ff;

text-shadow:

0 0 8px #00bfff,
0 0 18px #00bfff,
0 0 35px #006eff;

animation:brillo 3s infinite alternate;

}

/*==================================================
ANIMACIÓN DEL TÍTULO
==================================================*/

@keyframes brillo{

from{

text-shadow:

0 0 5px #00bfff,
0 0 15px #00bfff,
0 0 25px #006eff;

}

to{

text-shadow:

0 0 10px #7fd8ff,
0 0 25px #7fd8ff,
0 0 45px #00bfff;

}

}

/*==================================================
SLIDER
==================================================*/

/*==================================
SLIDER
==================================*/

.slider{

width:min(92%,1200px);

margin:20px auto;

overflow:hidden;

border-radius:20px;

border:3px solid rgba(100,200,255,.5);

box-shadow:
0 0 20px rgba(0,150,255,.4);

}

.slides{

display:flex;

width:100%;

animation:slider 15s infinite;

}

.slides img{

min-width:100%;

height:520px;

object-fit:cover;

display:block;

}

/*==================================================
ANIMACIÓN DEL SLIDER
==================================================*/

@keyframes slider{

0%,28%{

transform:translateX(0);

}

33%,61%{

transform:translateX(-100%);

}

66%,94%{

transform:translateX(-200%);

}

100%{

transform:translateX(0);

}

}

/*==================================================
BARRA MENÚ
==================================================*/

.barra-menu{

width:100%;

display:flex;

justify-content:center;

padding:35px 15px;

}

.menu{

width:min(900px,95%);

display:flex;

justify-content:center;

align-items:center;

gap:30px;

flex-wrap:wrap;

padding:20px;

border-radius:70px;

background:

rgba(10,30,60,.65);

backdrop-filter:blur(12px);

border:

2px solid
rgba(120,220,255,.35);

box-shadow:

0 0 15px rgba(0,180,255,.3);

}

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

.boton{

text-decoration:none;

color:white;

font-size:1.2rem;

font-weight:bold;

padding:16px 42px;

border-radius:40px;

background:

linear-gradient(
90deg,
#0066ff,
#00bfff
);

transition:.35s;

box-shadow:

0 0 10px rgba(0,180,255,.5);

}

.boton:hover{

transform:

translateY(-5px)
scale(1.05);

box-shadow:

0 0 15px #00d9ff,
0 0 35px #00bfff;

background:

linear-gradient(
90deg,
#00bfff,
#52e0ff
);

}

/*==================================================
MAIN
==================================================*/

main{

flex:1;

width:100%;

display:flex;

justify-content:center;

padding:20px;

}

.contenido{

width:min(1000px,95%);

padding:35px;

border-radius:20px;

background:

rgba(0,20,40,.55);

backdrop-filter:blur(8px);

border:

1px solid
rgba(120,220,255,.25);

box-shadow:

0 0 20px rgba(0,100,255,.2);

text-align:center;

}

.contenido h2{

font-size:2rem;

margin-bottom:20px;

color:#8ce9ff;

text-shadow:

0 0 10px #00bfff;

}

.contenido p{

font-size:1.1rem;

line-height:1.8;

color:#eeeeee;

}

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

footer{

margin-top:50px;

background:

linear-gradient(
90deg,
rgba(0,20,40,.95),
rgba(0,45,90,.95)
);

border-top:

3px solid
rgba(0,180,255,.4);

box-shadow:

0 -5px 20px rgba(0,180,255,.25);

}

.footer-contenedor{

max-width:1200px;

margin:auto;

padding:35px 20px;

text-align:center;

}

.footer-contenedor h2{

font-size:2rem;

margin-bottom:20px;

color:#7fd8ff;

}

.footer-contenedor p{

margin:12px 0;

font-size:1.05rem;

}

.footer-contenedor a{

color:#8ce9ff;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.footer-contenedor a:hover{

color:white;

text-shadow:

0 0 10px #00bfff;

}

.footer-contenedor p:last-child{

margin-top:25px;

font-size:.95rem;

color:#cfcfcf;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#00101d;

}

::-webkit-scrollbar-thumb{

background:#0099ff;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#66d6ff;

}

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

@media(max-width:900px){

.slides img{

height:380px;

}

.menu{

gap:18px;

border-radius:25px;

padding:18px;

}

.boton{

width:100%;

max-width:320px;

text-align:center;

}

}

@media(max-width:600px){

header{

padding:35px 15px 20px;

}

.slides img{

height:250px;

}

.contenido{

padding:25px 18px;

}

.contenido h2{

font-size:1.6rem;

}

.contenido p{

font-size:1rem;

}

.footer-contenedor{

padding:25px 15px;

}

}

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

.boton-regresar{

position:fixed;

top:20px;

left:20px;

padding:14px 28px;

background:

linear-gradient(
90deg,
#0066ff,
#00c8ff
);

color:white;

text-decoration:none;

font-weight:bold;

border-radius:50px;

box-shadow:

0 0 12px #00bfff,
0 0 25px rgba(0,191,255,.4);

transition:.3s;

z-index:9999;

}

.boton-regresar:hover{

transform:

scale(1.05);

box-shadow:

0 0 20px #00e1ff,
0 0 40px #00e1ff;

}

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

/* Laptops pequeñas */
@media (max-width: 1024px) {

}

/* Tablets */
@media (max-width: 768px) {

}

/* Celulares */
@media (max-width: 480px) {

}

/* Celulares muy pequeños */
@media (max-width: 320px) {

}