@media (max-width:768px){

/* NAVBAR - Menú */
.navbar{
padding:15px 20px;
}

.hamburger{
display:block;
font-size:28px;
cursor:pointer;
}

/* contenedor menú */
.nav-links{
position:fixed;
top:70px;
right:20px;
width:min(220px,90vw); 
min-width:200px;
background:white;
display:flex;
flex-direction:column;
align-items:stretch;
gap:8px;
padding:18px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,0.15);

/* estado oculto */
opacity:0;
pointer-events:none;
transform:translateY(-10px);
transition:all .3s ease;
}

.nav-links a:hover{
background:#f4f7fb;
color:var(--primary);
transform:translateY(-1px);
}

/* estado visible */
.nav-links.active{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}

/* items */
.nav-links a{
display:block;
width:100%;
max-width:180px;
margin:0 auto;
text-align:center;
padding:12px 16px;
border-radius:10px;
font-weight:500;
transition:.25s;
}

/* hover */
.nav-links a:hover{
background:#f4f7fb;
color:var(--primary);
}

/* HERO */ 
.hero{
flex-direction:column;
text-align:center;
gap:40px;
padding:140px 20px 80px;
}

.hero-image{
margin-top:30px;
width:220px;
height:460px;
}


/* COLECCIONES */
@media (max-width:768px){

/* Sección general */
.collections{
padding:80px 20px;
}

/* Cards en una sola columna */
.collections .cards{
display:grid;
grid-template-columns:1fr;
gap:30px;
}

/* Card vertical */
.collections .card{
flex-direction:column;
text-align:center;
gap:20px;
padding:30px;
}

/* Limitar ancho del texto */
.collections .card-content{
max-width:420px;
margin:auto;
}

/* Imagen centrada */
.card-img{
display:flex;
justify-content:center;
}

/* Imagen responsive */
.card-img img{
width:100%;
max-width:260px;
height:auto;
}

/* Texto */
.card-content h3{
font-size:1.4rem;
text-align:center;
}

.card-content p{
font-size:0.95rem;
line-height:1.6;
}
}

/* FUNCIONALIDADES */
@media (max-width:768px){

.features{
padding:80px 20px;
}

.features .cards{
grid-template-columns:1fr;
gap:25px;
}

.features .card{
padding:30px 25px;
}

.features .card i{
font-size:34px;
}

.features .card h3{
font-size:1.3rem;
}

.features .card p{
font-size:0.95rem;
}
}

/* DESARROLLADOR */
@media (max-width:768px){

/* Sección */
.about{
padding:80px 20px;
}

/* Card vertical */
.developer-card{
flex-direction:column;
text-align:center;
gap:25px;
padding:40px 25px;
}

/* Foto */
.developer-photo{
width:150px;
height:150px;
}

/* Texto */
.developer-info h3{
font-size:1.5rem;
}

.developer-role{
margin-bottom:15px;
}

.developer-info p{
font-size:0.95rem;
line-height:1.6;
max-width:420px;
margin:auto;
}
}


/* Footer responsivo */
@media (max-width:768px){

  .footer-legal{
    text-align:center;
  }

  .separator{
    display:none;
  }

  .rights{
    display:block;
  }

}

}