/* ============================================================
   StratumOS · Mobile responsive layer
   Activates ONLY below 768px (767.98px to avoid overlapping
   Tailwind's md: breakpoint at exactly 768px). Desktop CSS untouched.
   All rules scoped to media query, marked !important to win
   over Tailwind utilities but only within mobile breakpoint.
   ============================================================ */

@media (max-width: 767.98px) {

  /* ---- Global anti-overflow ---- */
  html, body { overflow-x: hidden !important; }

  /* ---- Section container padding ---- */
  .max-w-\[1440px\],
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ---- Section vertical rhythm ---- */
  section { overflow: hidden; }
  section .py-24, section.py-24,
  section .py-32, section.py-32 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section .md\:py-32, section .lg\:py-32 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .mb-20 { margin-bottom: 40px !important; }
  .mb-16 { margin-bottom: 32px !important; }
  .mb-14 { margin-bottom: 28px !important; }
  .mb-12 { margin-bottom: 24px !important; }

  /* ---- Headlines ---- */
  .display-xl,
  h1.display-xl,
  h2.display-xl {
    font-size: 2.2rem !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
  }
  .display-lg,
  h1.display-lg,
  h2.display-lg {
    font-size: 1.75rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.018em !important;
  }
  .display-md,
  h3.display-md {
    font-size: 1.3rem !important;
    line-height: 1.15 !important;
  }
  /* Hero H1: the <em> carries inline white-space:nowrap ("operating system" /
     "sistema operativo") which can exceed viewport width on small phones and
     get clipped by the global overflow-x:hidden. Let it wrap on mobile. */
  h1.display-xl em { white-space: normal !important; }
  .text-5xl, .text-6xl, .text-7xl { font-size: 2.1rem !important; line-height: 1.05 !important; }
  .text-4xl { font-size: 1.7rem !important; line-height: 1.1 !important; }
  .text-3xl { font-size: 1.4rem !important; line-height: 1.15 !important; }
  .text-2xl { font-size: 1.2rem !important; line-height: 1.2 !important; }

  /* ---- NAV ---- */
  nav { padding-left: 16px !important; padding-right: 16px !important; }
  /* Clear the fixed hamburger (38px wide at left:16px → right edge 54px):
     push the nav inner container so the StratumOS logo starts past it.
     16px nav padding + 48px here = 64px from viewport edge. */
  nav.sticky .max-w-\[1440px\] { padding-left: 48px !important; }
  /* The cube icon was already fully hidden behind the hamburger; hiding it
     on mobile lets the wordmark fit without colliding with the EN/ES switcher. */
  nav.sticky .max-w-\[1440px\] > a > svg { display: none !important; }
  /* Hide mid-tier links in TOP nav only (not in mobile drawer #mobile-menu) */
  nav:not(#mobile-menu) a[href="#tesis"],
  nav:not(#mobile-menu) a[href="#metodo"],
  nav:not(#mobile-menu) a[href="#impacto"],
  nav:not(#mobile-menu) a[href="/team"],
  nav:not(#mobile-menu) a[href="/ventures"],
  nav:not(#mobile-menu) a[href="#portfolio"] {
    display: none !important;
  }
  nav a.btn-primary,
  nav a[href="#contacto"] {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  /* Language switcher tighter */
  nav span[class*="text-sm"] { font-size: 11px !important; }

  /* ---- HERO ---- */
  .hero-card-frame {
    margin-top: 24px !important;
    max-width: 100% !important;
    box-shadow: 0 20px 50px -15px rgba(5,28,44,0.15) !important;
  }
  /* Force the two-column hero into single column */
  section .grid.lg\:grid-cols-2,
  section .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Hero scenes height (animated mockup card) — give it manageable height */
  .hero-scene { font-size: 11px !important; }

  /* ---- THE LEAP (#salto) — horizontal scroll affordance ---- */
  /* The 680px-min table scrolls horizontally on mobile; without a cue the
     third column ("Scale") is invisible. Hint text + right-edge fade. */
  #salto .overflow-x-auto { position: relative !important; }
  #salto .overflow-x-auto::before {
    display: block !important;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: #8B95A1 !important;
    margin-bottom: 10px !important;
  }
  html[lang="en"] #salto .overflow-x-auto::before { content: 'Swipe \2192' !important; }
  html[lang="es"] #salto .overflow-x-auto::before { content: 'Desliza \2192' !important; }
  #salto .overflow-x-auto::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; right: 0 !important;
    width: 44px !important;
    background: linear-gradient(to left, #0A2540 15%, rgba(10,37,64,0)) !important;
    pointer-events: none !important;
  }

  /* ---- WHAT WE DO (4 layer cards) ---- */
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Layer cards inner padding (cards use p-7) */
  #portfolio .reveal.p-7 { padding: 20px !important; }

  /* ---- TESIS ---- */
  /* Tesis 2-col layout to single col */
  #tesis .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ---- APPROACH (4 phases) ---- */
  #metodo .grid.md\:grid-cols-2.lg\:grid-cols-4,
  #metodo .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #metodo .step-num { font-size: 4rem !important; }
  /* The desktop auto-cycle dims inactive cards to opacity .55; stacked on
     mobile that reads as 3 of 4 cards "switched off". Keep them all visible. */
  #metodo .metodo-step { opacity: 1 !important; }

  /* ---- IMPACT cards ---- */
  #impacto .grid.lg\:grid-cols-2,
  #impacto .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Stat rows inside each case card: 3 squashed columns → stacked.
     Cells 2-3 carry inline border-left + padding-left; neutralize and
     separate vertically with a subtle border-top instead. */
  #impacto .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #impacto .grid.grid-cols-3 > div {
    border-left: none !important;
    padding-left: 0 !important;
  }
  #impacto .grid.grid-cols-3 > div + div {
    border-top: 1px solid rgba(255,255,255,0.10) !important;
    padding-top: 14px !important;
  }

  /* ---- TEAM cards ---- */
  .grid.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ---- VENTURES cards ---- */
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ---- CTA / CONTACT ---- */
  #contacto .flex.gap-4 { flex-direction: column !important; gap: 12px !important; }
  #contacto a.btn-primary,
  #contacto a.btn-ghost { width: 100% !important; justify-content: center !important; }

  /* ---- FOOTER ---- */
  footer .flex.justify-between,
  footer .flex.items-center.gap-6 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ---- Buttons general ---- */
  .btn-primary, button.btn-primary { font-size: 14px !important; padding: 12px 18px !important; }

  /* ---- Body lead paragraphs ---- */
  p.text-lg, .text-lg { font-size: 1rem !important; line-height: 1.55 !important; }

  /* ---- Eyebrow spacing ---- */
  .eyebrow { font-size: 10px !important; }
}

/* Tighter pass for very small phones */
@media (max-width: 420px) {
  .display-xl, h1.display-xl, h2.display-xl { font-size: 1.95rem !important; }
  .display-lg, h1.display-lg, h2.display-lg { font-size: 1.55rem !important; }
  .max-w-\[1440px\] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Keep the nav inner clear of the fixed hamburger at this size too */
  nav.sticky .max-w-\[1440px\] { padding-left: 48px !important; }
}

/* ============================================================
   Team page · mobile-specific
   ============================================================ */
@media (max-width: 767.98px) {
  /* Header */
  #team .display-lg { font-size: 1.85rem !important; line-height: 1.05 !important; }
  /* Cards grid */
  #team .grid { gap: 16px !important; }
  /* Photo */
  #team .aspect-square { max-width: 380px; margin: 0 auto; }
  /* Body wrapper */
  #team .p-5 { padding: 18px !important; }
  /* Eyebrow */
  #team .text-\[10px\].font-mono.tracking-widest { font-size: 10px !important; }
  /* Name */
  #team .font-display.text-lg { font-size: 17px !important; }
  /* Role italic — reset min-h that we set for desktop alignment */
  #team .min-h-\[36px\] { min-height: 0 !important; font-size: 13px !important; }
  /* Bio */
  #team .text-\[12\.5px\] { font-size: 13px !important; line-height: 1.5 !important; }
  /* Email link */
  #team a[href^="mailto:"] {
    font-size: 10px !important;
    word-break: break-all !important;
    margin-top: 12px !important;
  }
}

/* ============================================================
   Ventures page · mobile-specific
   ============================================================ */
@media (max-width: 767.98px) {
  #ventures .display-lg { font-size: 1.85rem !important; line-height: 1.05 !important; }
  #ventures .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 12px !important; }
  #ventures [class*="rounded-2xl"] { min-height: auto !important; padding: 20px !important; }
  #ventures .font-display.text-2xl { font-size: 1.25rem !important; }
  #ventures p.text-sm { font-size: 13px !important; }
  /* "Coming soon" placeholder cards: tighten */
  #ventures .border-dashed { padding: 18px !important; min-height: 120px !important; }
}

/* ============================================================
   Mobile section nav · drawer toggle
   ============================================================ */
#mobile-menu-toggle, #mobile-menu { display: none; }

@media (max-width: 1023.98px) {
  #mobile-menu-toggle {
    display: flex !important;
    position: fixed; top: 16px; left: 16px;
    z-index: 1001; width: 38px; height: 38px;
    border: none; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
    border-radius: 8px; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 0;
    box-shadow: 0 2px 10px rgba(11,19,32,0.12);
    transition: background .25s;
  }
  #mobile-menu-toggle span {
    display: block; width: 16px; height: 2px;
    background: #051C2C; border-radius: 1px;
    transition: transform .28s, opacity .25s;
  }
  #mobile-menu-toggle.open { background: rgba(255,255,255,1); }
  #mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
  #mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #mobile-menu {
    display: block !important;
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(5,28,44,0.98); backdrop-filter: blur(24px);
    visibility: hidden; opacity: 0;
    transition: opacity .35s ease, visibility .35s ease;
  }
  #mobile-menu.open { visibility: visible; opacity: 1; }
  .mobile-menu-inner {
    display: flex; flex-direction: column; justify-content: center;
    align-items: flex-start; height: 100%;
    padding: 80px 32px 32px; gap: 18px;
  }
  .mobile-menu-inner a {
    color: #FFFFFF;
    font-family: 'Source Serif 4', serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 30, 'wght' 500;
    font-size: 28px; line-height: 1; letter-spacing: -0.01em;
    text-decoration: none;
    transition: color .2s;
  }
  .mobile-menu-inner a:hover, .mobile-menu-inner a:active { color: #5277FF; }
  .mobile-menu-inner .mm-cta {
    margin-top: 16px;
    background: #2251FF; color: #FFFFFF;
    padding: 12px 22px; border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  }
  .mobile-menu-inner .mm-divider {
    width: 28px; height: 1px; background: rgba(255,255,255,0.2); margin: 6px 0;
  }
}

/* Tablet (768-1023): keep mobile drawer, hide top-bar logo svg so hamburger does not overlap */
@media (max-width: 1023.98px){ nav.sticky .max-w-\[1440px\] > a > svg { display: none !important; } nav.sticky .max-w-\[1440px\] > a { padding-left: 44px; } }