/* Responsive overrides · Veterinaria San Patricio
   El kit usa estilos inline (React); estas reglas con !important los pisan
   solo en viewports chicos. Desktop (≥901px) queda intacto. */

/* Video de hero: solo desktop y solo si el usuario acepta movimiento */
@media (max-width: 900px) { .vsp-hero-video { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .vsp-hero-video { display: none !important; } }

@media (max-width: 900px) {
  .vsp-shell { min-width: 0 !important; overflow-x: hidden; }
  html, body { overflow-x: hidden; }

  /* Header apilable: logo arriba, nav abajo, sin desborde */
  .vsp-shell > header {
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    padding: 10px 16px !important;
    justify-content: space-between;
  }
  .vsp-shell > header nav { order: 3; width: 100%; overflow-x: auto; }

  /* Hero mobile: foto y texto SEPARADOS (regla: texto nunca sobre caras).
     La foto queda como banda superior sin texto encima; el copy baja a un
     bloque sobre fondo ink. */
  .vsp-shell section:first-of-type { min-height: 0 !important; display: block !important; }
  .vsp-shell section:first-of-type > div:nth-child(1) {
    position: relative !important; inset: auto !important;
    height: 320px; transform: none !important;
    margin: 0 -20px;
  }
  .vsp-shell section:first-of-type > div:nth-child(2) {
    inset: 0 0 auto 0 !important; height: 320px;
    background: linear-gradient(180deg, rgba(46,52,53,0) 45%, rgba(46,52,53,.96) 100%) !important;
  }
  .vsp-shell section:first-of-type > div:nth-child(5) { padding: 10px 20px 44px !important; margin-top: -6px; }
  .vsp-shell section:first-of-type > div:nth-child(6) { display: none; }

  /* Todo grid multicolumna colapsa a 1 columna… */
  .vsp-shell div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* …excepto el mosaico de fotos y el footer, que quedan en 2 */
  .vsp-shell .vsp-mosaic { grid-template-columns: 1fr 1fr !important; }
  .vsp-shell .vsp-foot { grid-template-columns: 1fr 1fr !important; }

  /* Tipografía display fluida */
  .vsp-shell h1 { font-size: clamp(32px, 8.5vw, 62px) !important; overflow-wrap: break-word; }
  .vsp-shell h2 { font-size: clamp(26px, 7vw, 40px) !important; }
  .vsp-shell blockquote { font-size: clamp(21px, 5.5vw, 32px) !important; }

  /* Hero más compacto */
  .vsp-shell section { padding-left: 20px !important; padding-right: 20px !important; }
  .vsp-shell main { padding-left: 20px !important; padding-right: 20px !important; }

  /* Filas de botones y stats envuelven */
  .vsp-shell div[style*="display: flex"] { flex-wrap: wrap; }

  /* Diálogos dentro de pantalla */
  .vsp-shell [role="dialog"], .vsp-shell dialog { max-width: 92vw !important; }
}

@media (max-width: 560px) {
  .vsp-shell .vsp-foot { grid-template-columns: 1fr !important; }
  .vsp-shell h1 { line-height: 1.05 !important; }
  /* Selector de días del booking: 5 columnas apretadas → grilla de 5 chica */
  .vsp-shell .vsp-days { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; }
}