/* =========================================================
   RESPONSIVE — Abanico Insurgente
   Overrides por anchura. Probado 360 → 1920.
   ========================================================= */

/* ---------- <= 1100px : tablet ---------- */
@media (max-width: 1100px) {
  .detalle-item,
  .detalle-item:nth-child(4n+1),
  .detalle-item:nth-child(4n+2),
  .detalle-item:nth-child(4n+3),
  .detalle-item:nth-child(4n+4) { grid-column: span 6; margin-top: 0; }
}

/* ---------- <= 960px : navegación móvil + apilados ---------- */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .booking-grid,
  .project-grid { grid-template-columns: 1fr; }
  .project-figure { max-width: 560px; }

  .manifesto-grid { grid-template-columns: 1fr; gap: 1.2rem; }

  .dualface-panel { grid-template-columns: 1fr; gap: 1.6rem; }
  .dualface-stage { max-width: 460px; margin-inline: auto; width: 100%; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  /* Galería modal apilada */
  .gallery-layout { grid-template-columns: 1fr; overflow-y: auto; max-height: inherit; }
  .gallery-stage { min-height: 0; }
  .gallery-figure { padding: 0; }
  .gallery-img { max-height: 52svh; }
  .gallery-side { padding-top: 1.2rem; }
  .gallery-reserve { margin-top: 0.6rem; }
}

/* ---------- <= 860px : hero móvil apilado (foto arriba, copy sobre marfil) ---------- */
@media (max-width: 860px) {
  .hero, .hero[data-hero-tone="light"], .hero[data-hero-tone="dark"] { margin-top: 0; background: var(--color-ivory); }
  .hero-media { position: static; aspect-ratio: 4 / 5; max-height: 72svh; overflow: hidden; }
  .hero-media picture { position: static; height: 100%; }
  .hero-media img { object-position: 50% 42%; height: 100%; animation: none; }
  .hero-overlay,
  .hero[data-hero-tone="light"] .hero-overlay,
  .hero[data-hero-tone="dark"] .hero-overlay {
    min-height: 0;
    padding-top: 0;
    background: none;
  }
  .hero-copy { padding: 1.8rem 0 2.4rem; max-width: none; animation: none; }
  /* En móvil el copy va sobre marfil: siempre texto oscuro */
  .hero-copy .eyebrow,
  .hero[data-hero-tone="dark"] .hero-copy .eyebrow { color: var(--accent); }
  .hero-copy h1,
  .hero[data-hero-tone="dark"] .hero-copy h1 { color: var(--fg); }
  .hero-lead,
  .hero[data-hero-tone="dark"] .hero-lead { color: var(--fg-soft); }
  .btn-outline-hero,
  .hero[data-hero-tone="dark"] .btn-outline-hero { color: var(--fg); border-color: var(--line-strong); }
  .btn-outline-hero:hover,
  .hero[data-hero-tone="dark"] .btn-outline-hero:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .site-header { background: var(--color-ivory); }
  .site-header[data-transparent="true"]:not(.is-scrolled) { background: var(--color-ivory); }

  /* El detalle: pares al 100% de la columna */
  .detalle-item,
  .detalle-item:nth-child(n) { grid-column: span 12; margin-top: 0; }
}

/* ---------- <= 560px : el CTA del header pasa al menú ---------- */
@media (max-width: 560px) {
  .header-actions .btn-primary { display: none; }
}

/* ---------- <= 680px : móvil ---------- */
@media (max-width: 680px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .model-card { max-width: 560px; margin-inline: auto; width: 100%; }

  .form-row { grid-template-columns: 1fr; gap: 0; }

  .price-band { flex-direction: column; align-items: flex-start; }
  .price-band-sep { display: none; }

  .hero-actions .btn { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; }

  .gallery-panel { max-height: 94svh; }
  .gallery-arrow { width: 42px; height: 42px; }
}

/* ---------- <= 400px : pantallas estrechas ---------- */
@media (max-width: 400px) {
  .wordmark { font-size: 0.98rem; letter-spacing: 0.1em; }
  .footer-grid { grid-template-columns: 1fr; }
  .model-card-footer .btn { flex: 1 1 100%; }
  .dualface-toggle { width: 100%; }
  .dualface-toggle button { flex: 1; }
}