/* ============================================================
   responsive.css — Media queries mobile-first
   ============================================================ */

/* Tablet (md: 768px+) — usamos max-width para revertir desktop a mobile */

/* ===== Mobile-first: por defecto las grids van a 1 col en móvil ===== */
@media (max-width: 1023px) {
  /* Header: ocultar nav desktop, mostrar burger */
  .site-nav { display: none; }
  .nav-burger { display: inline-flex; }

  /* Hero */
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero { min-height: auto; padding-top: 100px; padding-bottom: var(--sp-8); }
  .hero__visual { aspect-ratio: 4 / 3; max-height: 420px; }
  .hero__scroll { display: none; }

  /* Section headings */
  .section-heading {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    align-items: start;
  }

  /* Grids */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .specialty-grid { grid-template-columns: repeat(3, 1fr); }
  .centers-grid { grid-template-columns: 1fr; }
  .trust-bar__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

  /* Service detail */
  .service-detail { grid-template-columns: 1fr; gap: var(--sp-5); margin-bottom: var(--sp-8); }
  .service-detail:nth-child(even) { direction: ltr; }

  /* CTA banner */
  .cta-banner { grid-template-columns: 1fr; text-align: left; padding: var(--sp-7); }
  .cta-banner__actions { justify-content: flex-start; }

  /* Footer */
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6); }
  .site-footer__brand { grid-column: 1 / -1; max-width: 600px; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Stats */
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
}

/* Mobile (sm: <768px) */
@media (max-width: 767px) {
  /* Tipografía hero */
  .hero__title { font-size: clamp(38px, 11vw, 56px); }

  /* Grids más colapsadas */
  .services-grid { grid-template-columns: 1fr; }
  .specialty-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar__grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); text-align: left; }
  .site-footer__bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }

  /* Hero CTAs apilan */
  .hero__ctas .btn { width: 100%; }
  .hero__ctas { flex-direction: column; align-items: stretch; }

  /* WhatsApp más pequeño y desplazado un poco */
  .wa-float { width: 52px; height: 52px; bottom: 18px; right: 18px; }
  .wa-float svg { width: 24px; height: 24px; }

  /* Section padding más estrecho */
  :root { --section-py: 64px; }

  /* Cards más compactas */
  .card { padding: var(--sp-5); }
  .center-card__body { padding: var(--sp-5); }
}

/* Mobile pequeño (xs: <480px) */
@media (max-width: 479px) {
  .specialty-grid { grid-template-columns: 1fr; }
  .trust-bar__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop grande */
@media (min-width: 1440px) {
  :root { --container-max: 1320px; }
}

/* Contact page layout collapse */
@media (max-width: 1023px) {
  .contact-layout { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Responsive — componentes cinematográficos (estructura tipo Veris)
   ============================================================ */
@media (max-width: 1023px) {
  .hero::before { width: 100%; clip-path: polygon(0 60%, 100% 30%, 100% 100%, 0 100%); opacity: 0.5; }
  .quick-actions { margin-top: -40px; margin-bottom: var(--sp-7); }
  .quick-actions__grid { grid-template-columns: repeat(2, 1fr); padding: var(--sp-3); }
  .stats-strip__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
  .photo-cards { grid-template-columns: 1fr; }
  .photo-card { aspect-ratio: 16 / 10; }
  .blue-band__inner { flex-direction: column; text-align: left; align-items: flex-start; }
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--reverse { direction: ltr; }
  .split__visual { aspect-ratio: 5 / 4; }
  .results-strip__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .results-strip__visual { aspect-ratio: 16 / 10; }
  .centers-cinema { grid-template-columns: 1fr; }
  .center-cinema { aspect-ratio: 5 / 4; }
  .center-cinema__name { font-size: clamp(28px, 5vw, 40px); }
  /* Centros/Horarios layout con mapa */
  .center-detail { grid-template-columns: 1fr; gap: var(--sp-6); }
  .center-detail--reverse { direction: ltr; }
  .center-detail__info { max-width: 100%; }
  .center-detail__map { aspect-ratio: 16 / 11; }
  .trust-cinema__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}

@media (max-width: 767px) {
  .quick-actions__grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .qa-card { padding: var(--sp-4); }
  .stats-strip__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .stat-circle__icon { width: 60px; height: 60px; }
  .stat-circle__num { font-size: clamp(30px, 6vw, 44px); }
  .photo-card__body { padding: var(--sp-5); }
  .photo-card__title { font-size: clamp(24px, 6vw, 32px); }
  .blue-band { padding: var(--sp-6) 0; }
  .blue-band__title { font-size: clamp(22px, 5vw, 30px); }
  .center-cinema__body { padding: var(--sp-5); }
  .trust-cinema__grid { grid-template-columns: repeat(2, 1fr); }
  .trust-cinema__label { font-size: 11px; }
  .trust-cinema__label::before, .trust-cinema__label::after { flex-basis: 30px; }
  .hero__visual-caption strong { font-size: 22px; }
  .final-cta { padding: var(--sp-9) 0; }
}

@media (max-width: 479px) {
  .trust-cinema__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
  .stats-strip__inner { grid-template-columns: 1fr 1fr; }
}