/* responsive.css — breakpoints y ajustes */
@media (max-width: 639px) {
  :root {
    --space-16: 3rem;
    --space-20: 4rem;
    --space-24: 5rem;
  }
  .hero { padding-block: var(--space-16) var(--space-10); }
  .hero__title { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .hero__lead { font-size: var(--text-base); }
  .hero__actions .btn { flex: 1 1 auto; }
  .btn { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
  .service-card { gap: var(--space-4); }
  .modality-card--solid { min-height: 240px; padding: var(--space-6); }
  .modality-card__overlay { padding: var(--space-6); }
  .reserva__card { padding: var(--space-5); }
  .contact-card { padding: var(--space-6); }
  .contact-card__link { font-size: var(--text-2xl); }
  .contact-card__link-icon { width: 28px; height: 28px; }
  .form__actions { flex-direction: column; }
  .form__actions .btn,
  .form__actions .form-step-next,
  .form__actions .form-step-back { width: 100%; margin-right: 0; }
  .footer__inner { text-align: left; }
  .footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer__legal { justify-content: flex-start; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hero__inner { gap: var(--space-10); }
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-24) var(--space-20); }
  .hero__media { aspect-ratio: 1 / 1; }
}

/* Print styles */
@media print {
  .header, .hero__actions, .form__actions, .footer__cta, .btn { display: none !important; }
  .hero { background: none !important; }
  .hero::before,
  .hero__backdrop { display: none; }
  .section { page-break-inside: avoid; }
  a { text-decoration: underline; }
}