/* ============================================================
   NEXO — responsive.css
   Breakpoints: 480px / 768px / 1024px / 1280px / 1440px
   Estrategia: Mobile-first (base = móvil 320px+)
   ============================================================ */

/* ── MOBILE SM (480px+) ─────────────────────────────────── */
@media (min-width: 480px) {
  .hero__title { font-size: var(--fs-4xl); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── TABLET (768px+) ────────────────────────────────────── */
@media (min-width: 768px) {

  /* Navbar */
  .navbar__tagline { display: block; }

  /* Grid layouts */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero__title { font-size: var(--fs-5xl); }
  .hero__stats { grid-template-columns: repeat(3, 1fr); }
  .hero__inner { grid-template-columns: 1fr; }

  /* Section titles */
  .section-title { font-size: var(--fs-3xl); }
  .page-hero__title { font-size: var(--fs-4xl); }

  /* Footer */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__brand {
    grid-column: span 2;
  }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(3, 1fr); }

  /* Pilares y Misión/Visión */
  .mv-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-arrow { display: block; }
}

/* ── DESKTOP (1024px+) ──────────────────────────────────── */
@media (min-width: 1024px) {

  /* Navbar: mostrar links, ocultar hamburguesa */
  .navbar__nav { display: flex; }
  .navbar__hamburger { display: none; }
  .navbar__mobile-menu { display: none !important; }

  /* Grids */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* Hero: 2 columnas — imagen a la derecha */
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-12);
  }
  .hero__visual {
    display: flex;
    margin-top: 0;
  }
  .hero__title { font-size: var(--fs-5xl); }

  /* Footer: 3 columnas */
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer__brand { grid-column: span 1; }

  /* Team */
  .grid-4.team-grid { grid-template-columns: repeat(4, 1fr); }

  /* Pilares */
  .pilares-grid { grid-template-columns: repeat(3, 1fr); }

  /* Por Qué NEXO */
  .why-nexo { grid-template-columns: 1fr 1fr; }
}

/* ── LARGE DESKTOP (1280px+) ────────────────────────────── */
@media (min-width: 1280px) {
  .hero__title { font-size: var(--fs-5xl); }
  .section-title { font-size: var(--fs-4xl); }
}

/* ── MOBILE ONLY: ocultar nav links, mostrar hamburguesa ── */
@media (max-width: 1023px) {

  .navbar__nav { display: none; }
  .navbar__hamburger { display: flex; }

  .hero__actions { flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; }
  .cta-actions { flex-direction: column; align-items: center; width: 100%; max-width: 100%; }

  .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }
  .btn.btn--inline { width: auto; max-width: 100%; }

  .btn.btn--lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-base);
  }
}

/* ── MOBILE ONLY: ajustes específicos (<= 767px) ────────── */
@media (max-width: 767px) {

  .hero { min-height: auto; padding-top: var(--navbar-height); }
  .hero__content { padding-block: var(--space-8) var(--space-12); }
  .section { padding-block: var(--space-12); }
  .section-title { font-size: var(--fs-2xl); }
  .page-hero__title { font-size: var(--fs-2xl); }
  .hero__title { font-size: var(--fs-2xl); }

  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .hero__stat-number { font-size: var(--fs-xl); }

  .footer__grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .container { padding-inline: var(--space-4); }
  .card__body { padding: var(--space-6); }

  /* Imágenes amplias e inmersivas en móvil */
  .hero__img { height: 320px; }
  .card__img { height: 230px; }
  .project-card__img-wrap { height: 230px; }
  .why-nexo__img img { height: 300px; }

  .back-to-top { bottom: var(--space-5); right: var(--space-5); }

  /* Navbar tagline scale down on mobile */
  .navbar__tagline {
    font-size: var(--fs-xs);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Decorative shapes scaling */
  .hero__shape--1 {
    width: 240px;
    height: 240px;
    right: -40px;
    top: -40px;
  }

  .hero__shape--2 {
    width: 180px;
    height: 180px;
    left: -30px;
  }

  .page-hero::before {
    width: 220px;
    height: 220px;
    right: -30px;
    top: -30px;
  }

  .cta-section::before {
    width: 220px;
    height: 220px;
    right: -30px;
    top: -30px;
  }

  .timeline-item { padding-left: 48px; }
  .timeline::before { left: 16px; }
  .timeline-dot { left: 6px; width: 20px; height: 20px; }
}

/* ── SMALL MOBILE (max-width: 380px) ────────────────────── */
@media (max-width: 380px) {
  .navbar__tagline { display: none; }
  .container { padding-inline: var(--space-3); }
  .hero__stats { grid-template-columns: 1fr; text-align: center; }
}

/* ── PRINT ──────────────────────────────────────────────── */
@media print {
  .navbar, .footer, .back-to-top, .hero { display: none; }
  body { color: black; background: white; }
  .main-content { padding-top: 0; }
}

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}