/* Adaptación móvil — los estilos del sitio son inline (React), así que estas
   reglas usan selectores de atributo para reescribirlos en pantallas chicas. */
@media (max-width: 820px) {
  /* Toda cuadrícula pasa a 1 columna */
  main div[style*="grid-template-columns"], footer div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Filas flex pueden envolver (tarjetas del hero, slider, métricas) */
  main div[style*="display: flex"] { flex-wrap: wrap; }
  /* Titulares display más chicos */
  main h1 { font-size: clamp(30px, 9vw, 42px) !important; }
  main h2 { font-size: clamp(24px, 6.5vw, 30px) !important; }
  /* Secciones con menos padding lateral */
  main section { padding-left: 20px !important; padding-right: 20px !important; }
  /* Tarjetas de foto fijas se ajustan al ancho disponible */
  main div[style*="width: 320px"] { width: min(320px, 100%) !important; }
  /* Navbar móvil: no fija, logo + hamburguesa (menú desplegable), enlaces de escritorio ocultos */
  nav.syt-nav { position: static !important; padding: 12px 16px !important; }
  nav .nav-links, nav .nav-actions { display: none !important; }
  nav .nav-burger { display: flex !important; }
  /* Fotos de carrusel/hero más altas para conservar proporción */
  main div[style*="height: 150px"] { height: 220px !important; }
  /* Footer apilado */
  footer > div { flex-direction: column; align-items: flex-start; }
  footer div[style*="gap: 56px"] { gap: 24px !important; }
}