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

body{
font-family: 'Montserrat', 'sans-serif';
line-height:1.5;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}


/*================ TOPBAR ================*/

.top-bar{
background:#fff;
color:#4d0505;
padding:12px 0;
font-size:14px;
}

.top-content{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:20px;
}

.top-logo img{
max-height:80px;
display:block;
}

.top-info{
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
}

.top-info span{
display:flex;
align-items:center;
gap:8px;
}

.divider{
width:1px;
height:20px;
background:#ddd;
}

.social-icons{
display:flex;
gap:12px;
}

.social-icons a{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#4d0505;
color:#fff;
text-decoration:none;
transition:.3s;
}

.social-icons a:hover{
background:#7b2121;
transform:translateY(-2px);
}



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

.header{
background:#4d0505;
position:sticky;
top:0;
z-index:9999;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}

nav{
width:100%;
display:flex;
justify-content:center;
align-items:center;
position:static;
}

.nav-wrapper{
padding:25px 0;
position:relative;
}

.nav-menu{
display:flex;
list-style:none;
gap:45px;
align-items:center;
}

.nav-menu li{
position:relative;
}

.nav-menu li a{
text-decoration:none;
color:#fff;
font-size:16px;
font-weight:600;
position:relative;
transition:.3s;
}

.nav-menu li a:after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#fff;
transition:.3s;
}

.nav-menu li a:hover:after{
width:100%;
}



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

.hamburger{
display:none;
width:34px;
cursor:pointer;
position:absolute;
right:0;
z-index:10001;
}

.hamburger span{
display:block;
height:3px;
margin:6px 0;
background:#fff;
border-radius:20px;
transition:.35s;
}

.hamburger.open span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}

.hamburger.open span:nth-child(2){
opacity:0;
}

.hamburger.open span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}



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

.dropdown>a{
display:flex;
align-items:center;
gap:8px;
}

.dropdown i{
font-size:12px;
transition:.3s;
}

.dropdown:hover i{
transform:rotate(180deg);
}

.submenu{
position:absolute;
top:100%;
left:0;
width:460px;
background:#4d0505;
padding:20px 0;
list-style:none;
box-shadow:0 8px 18px rgba(0,0,0,.18);
opacity:0;
visibility:hidden;
transform:translateY(15px);
transition:.3s ease;
z-index:999;
}

.dropdown:hover .submenu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.submenu li{
width:100%;
border:none;
}

.submenu li a{
display:block;
padding:14px 28px;
font-size:17px;
font-weight:400;
color:#fff;
text-decoration:none;
}

.submenu li a:after{
display:none;
}

.submenu li a:hover{
padding-left:38px;
color:#ffd24a;
}



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

@media(max-width:900px){

.top-content{
flex-direction:column;
text-align:center;
gap:15px;
}

.top-info{
justify-content:center;
gap:14px;
}

.divider{
display:none;
}

.hamburger{
display:block;
}


/* MENU DESPLEGABLE DEBAJO DEL HAMBURGUESA */
/* MENU DESPLEGABLE FULL WIDTH */
.nav-menu{
position:absolute;

top:100%;

/* esto corrige los márgenes laterales */
left:50%;
transform:translateX(-50%);

width:100vw; /* ancho real de pantalla */
max-width:100vw;

background:#7b2121;

display:flex;
flex-direction:column;
align-items:stretch;

gap:0;
padding:0;
margin:0;

max-height:0;
overflow:hidden;
opacity:0;

transition:.35s ease;

z-index:9998;
}

.nav-menu.active{
max-height:800px;
opacity:1;
}

.nav-menu li{
width:100%;
border-top:1px solid rgba(255,255,255,.15);
}

.nav-menu li:last-child{
border-bottom:1px solid rgba(255,255,255,.15);
}

.nav-menu li a{
display:block;
width:100%;
padding:22px 20px;
text-align:center;
}

.nav-menu li a:hover{
background:#651818;
}

.nav-menu li a:after{
display:none;
}


/* dropdown móvil */
.dropdown>a{
justify-content:center;
gap:10px;
}

.dropdown.active i{
transform:rotate(180deg);
}

.submenu{
position:static;
display:none;
width:100%;
background:#651818;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
padding:0;
}

.dropdown.active .submenu{
display:block;
animation:fadeMenu .3s ease;
}

.submenu li{
border-top:1px solid rgba(255,255,255,.08);
}

.submenu li a{
background:#651818;
padding:16px;
font-size:15px;
}

.submenu li a:hover{
background:#541212;
padding-left:28px;
}

}



/* móviles pequeños */
@media(max-width:576px){

.top-logo img{
max-height:55px;
}

.top-info{
flex-direction:column;
gap:10px;
}

.social-icons{
justify-content:center;
}

.social-icons a{
width:34px;
height:34px;
}

.nav-menu li a{
font-size:17px;
padding:16px;
}

.submenu li a{
font-size:15px;
padding:14px;
}

}



/* animacion submenu */
@keyframes fadeMenu{
from{
opacity:0;
transform:translateY(-8px);
}
to{
opacity:1;
transform:translateY(0);
}
}