/* ==========================================================================
   DOIS Consultora — Responsive
   Breakpoints: Desktop XL (>1440) · Laptop (1024–1440, base) ·
   Tablet (641–1024) · Mobile (≤640)
   Cada rango tiene ajustes propios de composición, no solo reescalado.
   ========================================================================== */

/* ---- Desktop grande: más aire, tipografía de hero un poco más contenida */
@media (min-width: 1441px) {
  :root { --container-w: 1320px; }
  .hero__inner { max-width: 960px; }
}

/* ---- Laptop pequeño / tablet horizontal --------------------------------- */
@media (max-width: 1180px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid .stat-card:nth-child(4),
  .stats-grid .stat-card:nth-child(5) { grid-column: span 1; }
  .founders-grid { gap: var(--space-lg); }
}

@media (max-width: 1024px) {
  :root { --header-h: 76px; }

  .nav { position: fixed; inset: 76px 0 0 0; height: calc(100dvh - 76px);
    background: rgba(7, 33, 48, 0.98); backdrop-filter: blur(18px);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: var(--space-xl) var(--space-lg); gap: var(--space-xl);
    transform: translateX(100%); opacity: 0;
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); opacity: 1; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .nav__link { font-size: var(--text-2xl); font-family: var(--font-display); }
  .nav__link::after { display: none; }
  .nav__cta { width: 100%; text-align: center; }
  .nav-toggle { display: flex; }

  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .services-list .service-row { grid-template-columns: 48px 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 900px) {
  .split, .split--reverse .split__media { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .split__media { order: -1 !important; }
  .split__media::before { display: none; }

  .founders-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .values-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
  .value-card { padding: var(--space-md); }

  .quote { font-size: var(--text-2xl); }
}

/* ---- Mobile --------------------------------------------------------------*/
@media (max-width: 640px) {
  .container { padding-inline: var(--space-sm); }
  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }

  .hero { padding-top: calc(var(--header-h) + var(--space-xl)); padding-bottom: var(--space-2xl); }
  .hero h1 { font-size: var(--text-4xl); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__langs { flex-direction: column; gap: var(--space-sm); }

  .pillars-grid { grid-template-columns: 1fr; }
  .sectors-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }

  .service-row { grid-template-columns: 1fr; }
  .service-row__icon { margin-bottom: var(--space-xs); }

  .form-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }

  .cta-band { padding: var(--space-xl) var(--space-md); }
  .cta-band h2 { font-size: var(--text-2xl); }

  .whatsapp-float { width: 52px; height: 52px; right: var(--space-sm); bottom: var(--space-sm); }
  .whatsapp-float svg { width: 26px; height: 26px; }

  .quote { font-size: var(--text-xl); }
  .brand__logo { height: 41.6px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: var(--text-3xl); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}