/* ============================================
   RESPONSIVE — refinamientos en pantallas grandes
   (el resto de los componentes ya es mobile-first
   con sus propios min-width en cada archivo)
============================================ */

/* Tablet grande / laptop chico */
@media (min-width: 1024px) {
  .hero h1 { max-width: 16ch; }
  .about__statement { max-width: 34ch; margin-inline: auto; }
  #bookingWidget { padding: var(--space-xl); }
}

/* Laptop estándar */
@media (min-width: 1366px) {
  :root { --container-w: 1240px; }
  .hero__content { padding-inline: 2rem; }
}

/* Desktop grande */
@media (min-width: 1440px) {
  .service-grid { gap: var(--space-xl); }
  .pro-grid { gap: var(--space-xl); }
}

/* Monitores muy anchos: evitar que el hero y el contacto se sientan vacíos */
@media (min-width: 1920px) {
  :root { --container-w: 1320px; }
  .hero__media { max-height: 820px; }
}

/* Altura chica (laptops bajos / mobile apaisado): reducir aire vertical del hero */
@media (max-height: 700px) and (min-width: 640px) {
  .hero__media { height: 90vh; min-height: 380px; }
}