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

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

html{
scroll-behavior:smooth;
}

body{
background:#000;
color:#fff;
font-family:'Poppins',sans-serif;
overflow-x:hidden;
}

img{
max-width:100%;
height:auto;
display:block;
}

section{
width:100%;
}

a{
-webkit-tap-highlight-color:transparent;
text-decoration:none;
}

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

header{


position:absolute;

top:0;
left:0;

width:100%;

z-index:100;

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 60px;

background:
linear-gradient(
    to bottom,
    rgba(0,0,0,.75),
    transparent
);


}

/* =========================================
LOGO
========================================= */

.logo img{
width:170px;
}

/* =========================================
MENU
========================================= */

nav{

display:flex;

align-items:center;

gap:35px;


}

nav a{


color:#fff;

font-size:14px;

font-weight:600;

transition:.3s;


}

nav a:hover{


color:#ff0000;


}

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

.acciones-header{

display:flex;

align-items:center;

gap:15px;


}

.btn-login{


color:#fff;

border:2px solid #444;

padding:14px 25px;

border-radius:10px;

font-size:13px;

font-weight:700;

transition:.3s;


}

.btn-login:hover{


background:#222;

border-color:#fff;


}

.btn-nav{


background:#ff0000;

color:#fff;

padding:14px 25px;

border-radius:10px;

font-size:13px;

font-weight:700;

transition:.3s;


}

.btn-nav:hover{


transform:translateY(-3px);

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


}

/* =========================================
MENU HAMBURGUESA
========================================= */

.menu-toggle{


display:none;

color:#fff;

font-size:35px;

font-weight:700;

cursor:pointer;

user-select:none;

}

.menu-mobile-btns{


display:none;


}

.btn-login-mobile{


color:#fff;

border:2px solid #555;

padding:14px;

border-radius:10px;

text-align:center;

font-weight:700;


}

.btn-nav-mobile{

background:#ff0000;

color:#fff;

padding:14px;

border-radius:10px;

text-align:center;

font-weight:700;


}

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

.hero{


position:relative;

width:100%;

height:100vh;

min-height:700px;

overflow:hidden;


}

.hero-img{

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:cover;

}

.overlay{

position:absolute;

inset:0;

z-index:1;

background:
linear-gradient(
    90deg,
    rgba(0,0,0,.92) 10%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.90) 100%
);

}

.hero::after{

content:"";

position:absolute;

inset:0;

z-index:2;

background:
radial-gradient(
    circle,
    rgba(255,0,0,.10),
    transparent 65%
);

}

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

.contenido{

position:absolute;

top:55%;

left:6%;

transform:translateY(-50%);

z-index:5;

width:90%;

max-width:850px;

}

.contenido span{

display:block;

margin-bottom:15px;

font-size:18px;

font-weight:700;

letter-spacing:8px;

text-transform:uppercase;

color:#ff3b3b;

}

.titulo-img{

    width:min(700px,90vw);

    filter:
    drop-shadow(0 0 20px rgba(255,255,255,.10))
    drop-shadow(0 0 35px rgba(255,0,0,.20));
}

.contenido p{

margin-top:15px;

font-size:17px;

font-weight:600;

letter-spacing:3px;

}

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

.botones{

display:flex;

gap:15px;

margin-top:30px;

}

.btn-rojo{

background:#ff0000;

color:#fff;

padding:16px 30px;

border-radius:8px;

font-size:14px;

font-weight:700;

transition:.3s;

}

.btn-rojo:hover{

transform:translateY(-4px);

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

.btn-video{

border:2px solid #fff;

color:#fff;

padding:16px 30px;

border-radius:8px;

font-size:14px;

font-weight:700;

transition:.3s;

}

.btn-video:hover{

background:#fff;

color:#000;

}

/* =========================================
CARDS
========================================= */

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

background:#070707;

border-top:2px solid #ff0000;

}

.card{

min-height:220px;

padding:35px 25px;

display:flex;

flex-direction:column;

justify-content:center;

text-align:center;

border-right:1px solid rgba(255,0,0,.15);

transition:.3s;

}

.card:hover{

background:#111;

transform:translateY(-5px);
}

.card h3{

color:#ff0000;

font-family:'Teko',sans-serif;

font-size:32px;

margin-bottom:10px;

}

.card p{

color:#d0d0d0;

font-size:14px;

line-height:1.7;

}

/* =========================================
PANTALLAS GRANDES
========================================= */

@media (min-width:1600px){

.titulo-img{
    width:850px;
}

.contenido p{
    font-size:22px;
}

}

/* =========================================
TABLETS
========================================= */

@media (max-width:992px){

header{

    padding:20px;
}

nav{

    gap:20px;

    flex-wrap:wrap;

    justify-content:center;
}

.acciones-header{

    flex-wrap:wrap;

    justify-content:center;
}

.contenido{

    left:0;

    width:100%;

    max-width:none;

    padding:0 25px;

    text-align:center;
}

.titulo-img{

    margin:auto;

    width:min(500px,90vw);
}

.botones{

    justify-content:center;

    flex-wrap:wrap;
}

.cards{

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

}

/* =========================================
CELULARES
========================================= */

@media (max-width:768px){


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#000;

    padding:15px 20px;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;
}

.logo img{

    width:80px;
}

.menu-toggle{

    display:block;
}

nav{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#050505;

    display:none;

    flex-direction:column;

    gap:0;

    border-top:1px solid rgba(255,0,0,.25);
}

nav.activo{

    display:flex;
}

nav a{

    width:100%;

    text-align:center;

    padding:18px;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

.acciones-header{

    display:none;
}

.menu-mobile-btns{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:20px;
}

.hero{

    min-height:700px;

    height:auto;
}

.contenido{

    position:relative;

    top:auto;

    left:auto;

    transform:none;

    max-width:none;

    width:100%;

    text-align:center;

    padding:170px 20px 50px;
}

.titulo-img{

    width:90%;

    max-width:320px;

    margin:auto;
}

.contenido span{

    font-size:12px;

    letter-spacing:3px;
}

.contenido p{

    font-size:12px;

    letter-spacing:1px;

    line-height:1.6;
}

.botones{

    flex-direction:column;
}

.btn-rojo,
.btn-video{

    width:100%;

    text-align:center;
}

.cards{

    grid-template-columns:1fr;
}

.card{

    border-right:none;

    border-bottom:1px solid rgba(255,0,0,.15);
}


}

/* =========================================
CELULARES PEQUEÑOS
========================================= */

@media (max-width:480px){

.logo img{

    width:70px;
}

.hero{

    min-height:650px;
}

.contenido{

    padding:150px 15px 40px;
}

.titulo-img{

    max-width:260px;
}

.contenido span{

    font-size:10px;

    letter-spacing:2px;
}

.contenido p{

    font-size:10px;
}

.btn-rojo,
.btn-video,
.btn-login-mobile,
.btn-nav-mobile{

    font-size:12px;
}

}