/* ============================================================
   FORTIGLASS — Responsive Fixes
   Ensures 100% mobile compatibility across all pages
   ============================================================ */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body { overflow-x: clip; min-width: 320px; }
img, video { max-width: 100%; height: auto; }

/* ── Nav ── */
@media (max-width: 768px) {
  :root {
    --header-height: 76px;   /* taller on mobile: 48px logo + 28px padding */
    --header-offset: 3px;
  }
  .nav { padding: 14px 0; }
  .logo-img { height: 48px; }
  .mobile-menu-btn { display: flex !important; z-index: 2100; position: relative; }
  .nav-links { display: none; }
  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100dvh;
    background: rgba(5,10,20,0.98);
    padding: 100px 30px 40px;
    gap: 20px;
    z-index: 2000;
    overflow-y: auto;
  }
  .nav-links.active a {
    font-size: 1rem;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-links.active .nav-cta {
    margin-top: 10px;
    text-align: center;
    justify-content: center;
  }
  /* Navbar shrink on scroll for mobile */
  .site-header.scrolled {
    top: 0;
    background: rgba(5, 10, 20, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .site-header.scrolled .nav {
    padding: 10px 0;
  }
  /* Logo height preserved as requested */
  .site-header.scrolled .logo-img {
    height: 48px;
  }
}    

/* ── Hero eyebrow — prevent text clipping at smaller viewports ── */
@media (max-width: 1024px) {
  .hero-eyebrow {
    letter-spacing: 0.2em;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    width: 24px;
  }
}

/* ── Hero (inicio) ── */
@media (max-width: 768px) {
  .hero-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    gap: 8px;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    width: 20px;
  }
  /* Keep 300vh so scroll scrub has full range — do NOT reduce this */
  .hero-pin-container { height: 300vh !important; }
  .hero h1 { font-size: 2rem; }
  .hero-sub { font-size: 1rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn { width: 100%; max-width: 280px; justify-content: center; }
  .hero-text-phase > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .video-progress-ring { display: none; }
  .hero-corner { display: none; }
}

@media (max-width: 480px) {
  .hero-eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after {
    width: 16px;
  }
}

/* ── Stats ── */
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; gap: 1px; }
  .stat-number { font-size: 2rem; }
}

/* ── Services ── */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card { padding: 40px 24px; }
}

/* ── Tech section ── */
@media (max-width: 900px) {
  .tech-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .tech-img-wrap { max-width: 100%; }
  .tech-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .tech-features { grid-template-columns: 1fr !important; }
}

/* ── Levels ── */
@media (max-width: 900px) {
  .levels-scroll { grid-template-columns: repeat(2,1fr) !important; }
  .level-card:nth-child(5), .level-card:nth-child(6) { grid-column: auto !important; }
}
@media (max-width: 560px) {
  .levels-scroll { grid-template-columns: 1fr !important; }
}

/* ── Projects ── */
@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px) {
  .projects-grid { grid-template-columns: 1fr !important; }
}

/* ── Weapon grid ── */
@media (max-width: 900px) {
  .weapon-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .weapon-grid { grid-template-columns: 1fr !important; }
}

/* ── Anatomy ── */
@media (max-width: 900px) {
  .anatomy-stage { aspect-ratio: auto !important; min-height: 260px; }
  .anatomy-car { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important; }
  .anatomy-svg { display: none !important; }
  .anatomy-label { position: static !important; width: 100% !important; opacity: 1 !important; transform: none !important; }
  .anatomy-labels-mobile { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
}
@media (max-width: 480px) {
  .anatomy-labels-mobile { grid-template-columns: 1fr !important; }
}

/* ── Footer ── */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer-logo-img { height: 60px; }
}

/* ── Ticker ── */
@media (max-width: 480px) {
  .ticker-track span { padding: 0 20px; font-size: 0.6rem; }
}

/* ── CTA section ── */
@media (max-width: 768px) {
  .cta-section { padding: 80px 0; }
  .cta-section h2 { font-size: 1.6rem; }
  .cta-section .btn { width: 100%; max-width: 300px; justify-content: center; }
}

/* ── Inner page hero ── */
@media (max-width: 768px) {
  .inner-hero__title { font-size: 2rem !important; }
  .inner-hero__sub { font-size: 0.9rem !important; }
  .inner-hero__stats { display: none !important; }
  .inner-hero__cta { width: 100%; max-width: 280px; justify-content: center; }
}

/* ── Certifications ── */
@media (max-width: 600px) {
  .certs-grid { gap: 10px; }
  .cert-badge { padding: 12px 16px; font-size: 0.6rem; }
}

/* ── Process timeline ── */
@media (max-width: 900px) {
  .process-timeline { grid-template-columns: repeat(2,1fr) !important; }
  .process-timeline::before { display: none; }
}
@media (max-width: 480px) {
  .process-timeline { grid-template-columns: 1fr !important; }
}

/* ── Presence / countries ── */
@media (max-width: 900px) {
  .presence-grid { grid-template-columns: 1fr !important; }
  .countries-list { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 480px) {
  .countries-list { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── Values grid ── */
@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr !important; }
}

/* ── Timeline (nosotros) ── */
@media (max-width: 768px) {
  .timeline-grid-2col { grid-template-columns: 1fr !important; gap: 0 !important; }
}

/* ── Contact form ── */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .form-row { grid-template-columns: 1fr !important; }
  .contact-form { padding: 30px 20px; }
}

/* ── WhatsApp button ── */
@media (max-width: 480px) {
  .wa-float { bottom: 20px; left: 16px; right: auto; }
}

/* ── General container padding on mobile ── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  h1 { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  section { padding-left: 0 !important; padding-right: 0 !important; }
}