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

header{

background:#9b001c;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 5%;

position:relative;

z-index:9999;

}

/* LOGO */

.logo img{

width:220px;

object-fit:contain;

}

/* =========================================
   BOTON MENU MOVIL
========================================= */

.menu-toggle{

display:none;

font-size:42px;

color:white;

cursor:pointer;

transition:.3s;

}

.menu-toggle:hover{

transform:scale(1.1);

}

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

nav{

display:flex;

align-items:center;

gap:25px;

}

/* LINKS */

nav a{

color:white;

text-decoration:none;

font-size:17px;

font-weight:500;

transition:.3s;

position:relative;

}

/* EFECTO LINEA */

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0;

height:2px;

background:white;

transition:.3s;

}

nav a:hover::after{

width:100%;

}

/* =========================================
   DROPDOWN
========================================= */

.dropdown{

position:relative;

}

/* SUBMENU */

.submenu{

position:absolute;

top:120%;
left:0;

background:#850018;

min-width:260px;

border-radius:14px;

overflow:hidden;

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

display:flex;

flex-direction:column;

/* ANIMACION */

opacity:0;

visibility:hidden;

transform:translateY(15px);

transition:
opacity .35s ease,
transform .35s ease,
visibility .35s ease;

pointer-events:none;

z-index:999;

}

/* MOSTRAR */

.dropdown:hover .submenu{

opacity:1;

visibility:visible;

transform:translateY(0);

pointer-events:auto;

}

/* LINKS SUBMENU */

.submenu a{

padding:15px 18px;

font-size:15px;

color:white;

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

transition:.3s;

}

/* HOVER */

.submenu a:hover{

background:white;

color:#9b001c;

padding-left:28px;

}

/* QUITAR LINEA DEL AFTER */

.submenu a::after{

display:none;

}

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

@media(max-width:768px){

/* HEADER */

header{

padding:15px 20px;

}

/* LOGO */

.logo img{

width:180px;

}

/* BOTON */

.menu-toggle{

display:block;

z-index:10001;

}

/* MENU */

nav{

position:fixed;

top:0;
right:-100%;

width:85%;

height:100vh;

background:#9b001c;

flex-direction:column;

align-items:flex-start;

padding:100px 25px 40px;

gap:0;

transition:.4s ease;

overflow-y:auto;

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

}

/* MENU ACTIVO */

nav.active{

right:0;

}

/* LINKS */

nav a{

width:100%;

padding:18px 10px;

font-size:22px;

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

}

/* QUITAR EFECTO LINEA */

nav a::after{

display:none;

}

/* DROPDOWN */

.dropdown{

width:100%;

}

/* SUBMENU MOVIL */

.submenu{

position:relative;

top:0;
left:0;

width:100%;

max-height:0;

opacity:1;

visibility:visible;

transform:none;

pointer-events:auto;

background:#7a0016;

border-radius:12px;

margin-top:10px;

overflow:hidden;

transition:max-height .4s ease;

box-shadow:none;

}

/* SUBMENU ACTIVO */

.submenu.show{

max-height:1000px;

}

/* LINKS SUBMENU */

.submenu a{

font-size:18px;

padding:16px 20px;

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

}

/* HOVER */

.submenu a:hover{

padding-left:30px;

background:white;

color:#9b001c;

}

}