/* ── GLOBAL ── */
html,
body {
  overflow-x: hidden;
}

/*
 * NOTA: !important necessari als overrides de seccions perquè els <style>
 * inline al <body> venen DESPRÉS del <link> del <head> en la cascada CSS,
 * i guanyen quan l'especificitat és la mateixa.
 */

/* ── HERO: redueix padding excessiu a mòbil ── */
@media (max-width: 767px) {
  #hero .h-inner {
    padding: 3rem 1.5rem 4rem !important;
  }
  #hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.8rem) !important;
    margin-top: 1.1rem !important;
  }
  #hero .h-sub {
    margin-top: 1.2rem !important;
    font-size: 1rem !important;
  }
  #hero .h-triad {
    margin-top: 1.8rem !important;
  }
  #hero .h-triad > div {
    padding: 0.85rem 0 !important;
    gap: 0.9rem !important;
  }
  #hero .h-triad .v {
    font-size: 0.9rem !important;
  }
  #hero .h-cta {
    margin-top: 1.8rem !important;
    gap: 0.75rem !important;
  }
  #hero .h-cta a {
    padding: 0.85rem 1.5rem !important;
    font-size: 0.68rem !important;
  }
}

/* ── STACK MARQUEE: gap lleugerament més compacte a mòbil ── */
@media (max-width: 767px) {
  #stack .track {
    gap: 2.4rem !important;
    padding-right: 2.4rem !important;
  }
}

/* ── STATS: ajusta a pantalles molt petites (≤ 380px) ── */
@media (max-width: 380px) {
  #stats .stat {
    padding: 1.4rem 0.85rem !important;
  }
  #stats .num {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }
  #stats .label {
    font-size: 0.6rem !important;
  }
  #stats .desc {
    font-size: 0.78rem !important;
  }
}

/* ── TESTIMONIS: redueix padding a pantalles molt petites ── */
@media (max-width: 400px) {
  #testimonis figure {
    padding: 1.6rem 1.25rem !important;
  }
  #testimonis .wrap {
    padding: 4.5rem 1rem !important;
  }
}

/* ── CTA: padding intern a mòbil ── */
@media (max-width: 879px) {
  #cta .inner {
    padding: 5rem 1.5rem !important;
    gap: 2.5rem !important;
  }
  #cta h2 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
    margin-top: 1.2rem !important;
  }
  #cta .sub {
    font-size: 1rem !important;
    margin-top: 1rem !important;
  }
  #cta .actions {
    margin-top: 2rem !important;
  }
}

/* ── FOOTER ── */
#site-footer .sf-fx {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 619px) {
  #site-footer .sf-inner {
    padding: 4rem 1.5rem 2rem !important;
  }
  #site-footer .sf-top {
    padding-bottom: 2.5rem !important;
  }
  #site-footer .sf-grid {
    padding: 2.5rem 0 !important;
    gap: 2.25rem !important;
  }
  #site-footer .sf-statement {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
  }
}

/* =============================================================
   PREMIUM MOBILE NAV OVERLAY
   ============================================================= */

body.nav-open { overflow: hidden; }

/* Hamburger → X */
#menu-toggle span {
  display: block;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  transform-origin: center;
}
body.nav-open #menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open #menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open #menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay */
#mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0e0d0c;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.44s cubic-bezier(0.76,0,0.24,1), visibility 0s 0.44s;
}
#mobile-nav.is-open {
  pointer-events: all;
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.44s cubic-bezier(0.76,0,0.24,1), visibility 0s 0s;
}

#mobile-nav .mn-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
}
#mobile-nav .mn-glow {
  position: absolute; top: -10%; right: -10%; width: 55%; height: 45%; pointer-events: none;
  background: radial-gradient(50% 60% at 70% 20%, rgba(194,84,44,0.22), transparent 70%);
}

/* Capçalera */
#mobile-nav .mn-header {
  position: relative; z-index: 1; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(61,58,54,0.45);
}
#mobile-nav .mn-brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 1.1rem; color: #f5f2ec; text-decoration: none;
}
#mobile-nav .mn-brand img { height: 26px; width: auto; }

#mobile-nav .mn-close {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  background: none; border: 1px solid rgba(61,58,54,0.7); border-radius: 50%;
  color: #9a9590; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.3s;
}
#mobile-nav .mn-close:hover { color: #c2542c; border-color: #c2542c; transform: rotate(90deg); }
#mobile-nav .mn-close svg { width: 18px; height: 18px; }

/* Ítems de navegació */
#mobile-nav .mn-nav {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem 1.75rem;
}
#mobile-nav .mn-link {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 9vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.05;
  color: rgba(245,242,236,0.28); text-decoration: none;
  padding: 0.6rem 0; border-bottom: 1px solid rgba(61,58,54,0.28);
  transition: color 0.25s;
}
#mobile-nav .mn-link:last-child { border-bottom: none; }
#mobile-nav .mn-link.active   { color: #c2542c; }
#mobile-nav .mn-link:not(.active):hover { color: rgba(245,242,236,0.8); }

#mobile-nav .mn-link.mn-cta {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,242,236,0.38); margin-top: 0.4rem; border-bottom: none;
}
#mobile-nav .mn-link.mn-cta:hover { color: #c2542c; }

#mobile-nav .mn-idx {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.15em; color: #c2542c; opacity: 0.75; flex-shrink: 0;
}

/* Animations d'entrada */
@keyframes mnLinkIn {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes mnFootIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#mobile-nav.is-open .mn-link { animation: mnLinkIn 0.5s cubic-bezier(0.4,0,0.2,1) both; }
#mobile-nav.is-open .mn-link:nth-child(1) { animation-delay: 0.08s; }
#mobile-nav.is-open .mn-link:nth-child(2) { animation-delay: 0.16s; }
#mobile-nav.is-open .mn-link:nth-child(3) { animation-delay: 0.24s; }
#mobile-nav.is-open .mn-link:nth-child(4) { animation-delay: 0.30s; }

/* Peu */
#mobile-nav .mn-foot {
  position: relative; z-index: 1; flex-shrink: 0;
  padding: 1.4rem 1.75rem 2.25rem;
  border-top: 1px solid rgba(61,58,54,0.45);
}
#mobile-nav.is-open .mn-foot { animation: mnFootIn 0.45s cubic-bezier(0.4,0,0.2,1) 0.34s both; }
#mobile-nav .mn-foot-label {
  font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(61,58,54,0.9); margin-bottom: 0.8rem;
}
#mobile-nav .mn-contacts { display: flex; flex-direction: column; gap: 0.6rem; }
#mobile-nav .mn-clink {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.76rem;
  color: #9a9590; text-decoration: none; transition: color 0.2s;
}
#mobile-nav .mn-clink svg { width: 15px; height: 15px; flex-shrink: 0; color: #c2542c; }
#mobile-nav .mn-clink:hover { color: #f5f2ec; }
