/* ============================================================
   METRO COLCHONES — Componentes (header, mega, footer, etc.)
   ============================================================ */

/* Header links */
.header-link{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 12px;border-radius:12px;color:var(--ink);font-weight:700;font-size:11px;
  transition:background .15s, color .15s;
}
.header-link:hover{background:var(--mist);color:var(--navy);}
.header-link-txt{letter-spacing:.01em;}

/* Nav categorías */
.nav-cat{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:14px 14px;font-weight:700;font-size:14.5px;color:var(--ink-soft);
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
}
.nav-cat:hover{color:var(--navy);border-bottom-color:var(--blue);}
.nav-cat-sale{color:var(--gold);}
.nav-cat-sale:hover{color:#b8841f;border-bottom-color:var(--gold);}

/* Mega menu */
.nav-cat-group{display:flex;align-items:stretch;}
.mega{
  position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid var(--line);box-shadow:var(--shadow-md);
  animation:megaIn .18s ease;z-index:55;display:none;
}
.nav-cat-group:hover > .mega{display:block;}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.mega-inner{display:flex;gap:36px;padding:28px 24px;}
.mega-link{
  text-align:left;padding:8px 10px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--ink-soft);transition:background .12s,color .12s;
}
.mega-link:hover{background:var(--mist);color:var(--navy);}
.mega-link-all{color:var(--blue);font-weight:800;display:inline-flex;align-items:center;gap:6px;margin-top:6px;}
.mega-prod{cursor:pointer;border-radius:var(--radius);transition:transform .15s;}
.mega-prod:hover{transform:translateY(-3px);}

/* Trust */
.trust-item + .trust-item{border-left:1px solid var(--line);}

/* Footer */
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;}
.foot-h{font-family:var(--font-display);font-weight:800;font-size:15px;color:#fff;margin-bottom:16px;}
.foot-link{display:block;color:rgba(255,255,255,.74);font-size:14px;padding:6px 0;transition:color .12s;}
.foot-link:hover{color:#fff;}
.foot-contact{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font-size:14px;padding:6px 0;}
.soc{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-weight:800;font-size:13px;transition:background .15s;}
.soc:hover{background:rgba(255,255,255,.24);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:rgba(255,255,255,.6);font-size:13px;}
.foot-bottom a:hover{color:#fff;}

/* Drawer + overlay */
.overlay{position:fixed;inset:0;background:rgba(8,31,68,.45);backdrop-filter:blur(2px);z-index:80;animation:fadeIn .2s ease;}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(440px,100vw);background:#fff;z-index:90;
  display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(8,31,68,.2);animation:slideIn .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:none;}}

.icon-btn{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--ink);transition:background .15s;}
.icon-btn:hover{background:var(--mist);}

/* Mobile nav links */
.mnav-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-radius:10px;font-weight:700;font-size:15.5px;color:var(--ink);}
.mnav-link:hover,.mnav-link:active{background:var(--mist);color:var(--navy);}
.mnav-link svg{color:var(--muted);flex-shrink:0;}

/* Breadcrumb */
.crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;}
.crumbs a:hover{color:var(--navy);}
.crumbs .sep{opacity:.5;}

/* Responsive */
.hide-desktop{display:none;}
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .header-link-txt{display:none;}
}
@media (max-width:760px){
  .hide-desktop{display:grid !important;}
  .navbar{display:none;}
  .search-wrap{display:none;}
  .trust-item{padding:14px 8px !important;}
  .trust-item .stack{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .mega{display:none;}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}