/* =========================================================================
   FIGUEROA DIGITAL — responsive.css
   Todos los media queries del sitio, en un solo lugar y en orden
   descendente de ancho. Cárgalo AL FINAL para que gane la cascada.
   ========================================================================= */

@media (max-width: 1024px) {
  .about__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  /* Tamano chico + vertical de siempre para Servicios: las cards gigantes
     1600x900 horizontales son solo para escritorio (ver default en
     layout.css/components.css). Este rango ya se veia perfecto, intacto. */
  .services__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 300px)); }
  .service-card__carousel { aspect-ratio: 9 / 16; }
}

@media (max-width: 860px) {
  .navbar__links { position: fixed; inset: 0 0 0 30%; background: rgba(0, 0, 0, 0.97); backdrop-filter: blur(20px);
    flex-direction: column; justify-content: center; align-items: flex-start; padding: var(--space-xl) var(--space-md);
    transform: translateX(100%); transition: transform var(--dur-fast) var(--ease); gap: var(--space-md); }
  .navbar__links.is-open { transform: translateX(0); }
  .navbar__links a { font-size: 1.1rem; }
  .navbar__toggle { display: flex; }
  .packages__grid { grid-template-columns: 1fr; }
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .portfolio-item { grid-column: span 2; }
  .portfolio-item--wide { grid-column: span 2; }
  .whatsapp-float { display: flex; }
}

@media (max-width: 640px) {
  section { padding-block: var(--space-lg); }
  .cta-final { padding-block: var(--space-xl); }
  .process__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero { height: 100svh; padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom); }
}