/* ===== BASE ===== */

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

body{
font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

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

header{
z-index:1000;
background:#094124;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 40px;
position:relative;
border-bottom:1px solid rgba(255,255,255,0.08);
}

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

.logo img{
height:55px;
display:block;
transition:transform 0.2s ease;
}

.logo img:hover{
transform:scale(1.05);
}

/* ===== NAV DESKTOP ===== */

nav ul{
display:flex;
gap:26px;
list-style:none;
}

nav a{
color:white;
text-decoration:none;
font-size:20px;
font-weight:500;
transition:opacity 0.2s ease;
}

nav a:hover{
opacity:0.7;
}

/* ===== ICONO CORREO ===== */

.contacto img{
height:40px;
cursor:pointer;
transition:transform 0.2s ease, opacity 0.2s ease;
}

.contacto img:hover{
transform:scale(1.1);
opacity:0.8;
}

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

.menu-toggle{
display:none;
background:none;
border:none;
color:white;
font-size:28px;
cursor:pointer;
}

/* ===== MOBILE ===== */

@media (max-width: 900px){

header{
padding:15px 20px;
position:relative;
}

/* botón centrado real */
.menu-toggle{
display:block;
position:absolute;
left:50%;
transform:translateX(-50%);
font-size:30px;
z-index:10;
}

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

nav{
position:absolute;
top:100%;
left:0;
width:100%;
background:#094124;

/* animación */
max-height:0;
overflow:hidden;
transition:max-height 0.35s ease;

box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

/* activo */
nav.active{
max-height:500px;
}

/* ===== LISTA ===== */

nav ul{
flex-direction:column;
padding:10px 0;
text-align:center;
gap:0;
}

/* items */
nav li{
padding:4px 0; /* 🔥 mucho más compacto */
opacity:0;
transform:translateY(-10px);
transition:all 0.3s ease;
}

nav a{
font-size:17px;
display:block;
width:100%;
padding:5px 0; /* 🔥 control real del espacio */
}

/* hover más pro */
nav a:hover{
background:rgba(255,255,255,0.08);
opacity:1;
}

/* animación progresiva */
nav.active li{
opacity:1;
transform:translateY(0);
}

nav.active li:nth-child(1){ transition-delay:0.05s; }
nav.active li:nth-child(2){ transition-delay:0.1s; }
nav.active li:nth-child(3){ transition-delay:0.15s; }
nav.active li:nth-child(4){ transition-delay:0.2s; }
nav.active li:nth-child(5){ transition-delay:0.25s; }
nav.active li:nth-child(6){ transition-delay:0.3s; }

/* ===== tamaños ===== */

.logo img{
height:45px;
}

.contacto img{
height:32px;
}

}