@charset "utf-8";

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

.main-header {
  background: #ffffff;
padding:14px 0;
position:sticky;
top:0;
z-index:1000;
}

/* Barra */

.header-bar{
max-width:1200px;
margin:auto;

background:linear-gradient(to right, #0f0f0f, #1a1a1a);
border-radius:18px;

padding:16px 26px;

border-bottom:3px solid #8b1c1c;
border:1px solid rgba(0,0,0,0.05);

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

box-shadow:0 10px 26px rgba(0,0,0,0.08);

backdrop-filter:blur(10px);
}

/* LOGO */

.logo-area{
display:flex;
align-items:center;
gap:14px;
cursor:pointer;
}

.logo-area img{
  height:60px;

  filter:
    drop-shadow(0 0 1px rgba(255,255,255,0.4))
    drop-shadow(0 0 2px rgba(255,255,255,0.2));

  transition:all .3s ease;
}

.brand-name{
font-size:20px;
font-weight:700;
color:#ffffff;
}

/* MENU */

.main-nav ul{
list-style:none;
display:flex;
gap:22px;
margin:0;
padding:0;
}

.main-nav li{
position:relative;
}

.main-nav a{
text-decoration:none;
font-size:14px;
font-weight:600;
color:#ffffff;

padding:8px 12px;
border-radius:10px;

transition:all .25s ease;
}

.main-nav a:hover{
background:rgba(20,40,70,0.08);
}

.main-nav .active a{
background:#ffffff;
color:#000;
box-shadow:0 6px 14px rgba(16,42,67,0.25);
}

.dropdown-menu li{
display:block;
}

.dropdown-menu a{
display:block;

padding:10px 18px;

font-size:14px;

color:#ffffff;
}

.dropdown-menu a:hover{
background:#2a2a2a;
}

.dropdown:hover .dropdown-menu{
display:block;
}

/* ================= ICONOS ================= */

.header-icons{
display:flex;
gap:12px;
align-items:center;
}

.header-icons .social{
width:36px;
height:36px;

border-radius:50%;
background:white;

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

box-shadow:0 6px 14px rgba(0,0,0,0.10);

transition:all .25s ease;
}

.header-icons .social:hover{
transform:translateY(-2px);
}

.header-icons svg{
width:18px;
height:18px;
fill:#102a43;
}

/* COLORES REDES */

.facebook:hover{background:#1877F2;}
.facebook:hover svg{fill:white;}

.instagram:hover{
background:radial-gradient(circle at 30% 30%,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}
.instagram:hover svg{fill:white;}

.whatsapp:hover{background:#25D366;}
.whatsapp:hover svg{fill:white;}

.mail:hover{background:#c71610;}
.mail:hover svg{fill:white;}
/* ================= DROPDOWN ================= */

.dropdown-menu{
position:absolute;
top:100%;
left:0;

display:none;

background:#111111;

min-width:240px;

border-radius:12px;

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

padding:8px 0;

z-index:999;
}

.dropdown-menu li{
display:block;
}

.dropdown-menu a{
display:block;
padding:10px 18px;
font-size:14px;
color:#ffffff;
}

.dropdown-menu a:hover{
background:#2a2a2a;
}

.dropdown:hover .dropdown-menu{
display:block;
}
/* ===== ARREGLO DROPDOWN ===== */

.dropdown-menu{
display:none;
flex-direction:column;
}

.dropdown:hover .dropdown-menu{
display:block;
}

.dropdown-menu li{
display:block;
width:100%;
}
/* ===== CONTROL DROPDOWN ===== */

.main-nav .dropdown-menu{
display:none;
}

.main-nav li.dropdown:hover .dropdown-menu{
display:block;
}
.logo-area:hover img{
  transform:scale(1.05);
  filter:
  drop-shadow(0 0 1px rgba(255,255,255,0.5))
  drop-shadow(0 0 3px rgba(255,255,255,0.25));
}