/* === GLOBAL MOBILE FIXES — aplica a todas las páginas === */
/* Solo contiene fixes del menú móvil y breakpoints. NO toca desktop. */

/* ── Mobile menu: layout fix para todos los móviles (hasta 768px) ── */
@media (max-width: 768px) {
  .mobile-menu {
    justify-content: flex-start !important;
    padding: 80px 32px 24px !important;
    overflow-y: auto !important;
  }
}



/* ── Botón ¿Hablamos? en menú móvil — estilos visuales explícitos ── */
@media (max-width: 768px) {
  .mobile-menu-cta {
    background: var(--accent-btn) !important;
    color: #fff !important;
    border: 1px solid var(--accent-btn) !important;
    padding: 14px 28px !important;
    font-family: Söhne, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-top: 8px !important;
  }
  .mobile-menu.open .mobile-menu-cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ── Scroll indicator: oculto en móvil ── */
@media (max-width: 768px) {
  .scroll-indicator {
    display: none !important;
  }
}

/* ── Mobile menu top bar: theme toggle + close button ── */
.mobile-menu-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 12px;
  flex-shrink: 0;
}

/* theme-toggle en el menú móvil: hereda los estilos pill del toggle del header.
   Solo aseguramos que no tenga cursor:none (que sí tiene el del header) */
.mobile-menu-theme-inline {
  cursor: pointer !important;
  flex-shrink: 0;
}

/* Hide the old bottom theme block if it somehow remains */
.mobile-menu-theme {
  display: none !important;
}

/* ── Fix close button - remove absolute positioning so it sits in flex top-bar ── */
.mobile-menu-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* ── Nav links: unified font-size for all pages ── */
.mobile-nav-link {
  padding: 6px 0 !important;
  line-height: 1.15 !important;
  font-size: clamp(22px, 7vw, 34px) !important;
}
.mobile-nav {
  margin-bottom: 32px !important;
  gap: 0 !important;
}

/* ── Active/hover: accent color + underline ── */
.mobile-nav-link.active,
.mobile-nav-link[aria-current="page"],
.mobile-nav-link:hover {
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent) !important;
}
/* Last-child active: still show underline ── */
.mobile-nav-link:last-child.active,
.mobile-nav-link:last-child[aria-current="page"] {
  border-bottom: 1px solid var(--accent) !important;
}
/* Last-child inactive: no underline ── */
.mobile-nav-link:last-child:not(.active):not([aria-current="page"]):not(:hover) {
  border-bottom: none !important;
}

/* ── CTA always visible ── */
.mobile-menu-cta {
  margin-top: 12px !important;
}

/* ── Hero: padding-top fix en móvil ── */
@media (max-width: 768px) {
  main .page-hero,
  #main-content .page-hero,
  .page-hero {
    padding-top: 72px !important;
  }
  /* Eyebrow visible en móvil */
  .page-hero .section-eyebrow {
    display: flex !important;
  }
}
@media (max-width: 480px) {
  main .page-hero,
  #main-content .page-hero,
  .page-hero {
    padding-top: 68px !important;
  }
}

/* ── Manifesto text: fix overflow en móvil ── */
@media (max-width: 768px) {
  .manifesto-text,
  .manifesto-line-inner {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .manifesto-line {
    overflow: hidden !important;
  }
}

/* ── Prevent horizontal scroll on all pages ── */
html, body {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

/* ── Values header h2: reduce font-size on mobile ── */
@media (max-width: 768px) {
  .values-header h2 {
    font-size: clamp(32px, 9vw, 48px) !important;
  }
  .values-header {
    gap: 24px !important;
  }
  /* Also fix any other section h2 that might overflow */
  .timeline-header h2,
  .team-header h2,
  .manifesto-header h2 {
    font-size: clamp(28px, 8vw, 44px) !important;
    overflow-wrap: break-word !important;
  }
}

/* ── Reduce section padding on mobile ── */
@media (max-width: 768px) {
  /* Hero: reduce bottom padding so next section doesn't have huge gap */
  .page-hero {
    padding-bottom: 24px !important;
  }
  /* Sections: compact vertical rhythm */
  .team-section,
  .values-section,
  .timeline-section,
  .manifesto-section,
  .history-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .team-header,
  .values-header,
  .timeline-header {
    margin-bottom: 28px !important;
  }
  .section-eyebrow {
    margin-bottom: 16px !important;
  }
  /* Manifesto title: fit on mobile without overflow */
  .manifesto-line-inner[style*="font-size: clamp(28px"] {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
}

/* ── CTA strip title: reduce font-size on mobile ── */
@media (max-width: 768px) {
  .cta-strip-inner h2,
  .cta-strip-title {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.15 !important;
  }
}

/* ── Home hero: reduce top spacing on mobile ── */
@media (max-width: 768px) {
  section.hero .hero-inner {
    padding-top: 0 !important;
  }
  section.hero {
    padding-top: 80px !important;
  }
}

/* ── 1. Body scroll lock when mobile menu is open ── */
html.menu-open {
  overflow: hidden !important;
}
html.menu-open body {
  overflow: hidden !important;
  /* Prevent layout shift from scrollbar disappearing */
  padding-right: var(--scrollbar-width, 0px);
}

/* ── 2. Desktop nav active link: accent color to distinguish from hover ── */
@media (min-width: 1025px) {
  nav a.active {
    color: var(--accent) !important;
  }
  nav a.active:after {
    transform: scaleX(1) !important;
    background: var(--accent) !important;
  }
  /* Hover stays text-primary so active (accent) is visually distinct */
  nav a:hover:not(.active) {
    color: var(--text-primary) !important;
  }
}

/* ── 3. Back-to-top: subtle scale on hover ── */
.back-to-top:hover {
  transform: translateY(-3px) scale(1.08) !important;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              background 0.2s, border-color 0.2s !important;
}
.back-to-top.visible {
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top:hover {
    transform: none !important;
  }
}

/* ── 4. Custom cursor element: hidden on touch/mobile devices ── */
@media (max-width: 1024px), (hover: none) {
  #cursor,
  .cursor,
  [id^="cursor"],
  .custom-cursor {
    display: none !important;
    pointer-events: none !important;
  }
}