/* ============================================
   AURA — Responsive
   1280 / 1024 / 768 / 480 / 375
   ============================================ */

@media (max-width: 1280px) {
  .ritual { gap: var(--space-lg); }
}

/* ---------- 1024px ---------- */
@media (max-width: 1024px) {
  :root { --space-2xl: 5rem; --space-3xl: 7rem; }

  .nav__links { display: none; }
  .nav__cta { display: none; }
  .hamburguesa { display: flex; }

  .ritual { grid-template-columns: 1fr; }
  .ritual__media { aspect-ratio: 16 / 10; }
  .voces { grid-template-columns: 1fr; gap: var(--space-lg); }
  .reserva { grid-template-columns: 1fr; }
  .espacio { grid-template-columns: 1fr; }
  .espacio__alta { aspect-ratio: 16 / 10; }
  .pie__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .pie__grid > div:first-child { grid-column: 1 / -1; }
}

/* ---------- 768px ---------- */
@media (max-width: 768px) {
  .cinta ul { grid-template-columns: repeat(2, 1fr); }
  .cinta li:nth-child(3) { border-left: 0; }
  .cinta li:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .hero__retrato { aspect-ratio: 4 / 5; }
  .filo::after { background: linear-gradient(180deg, rgba(36,22,31,.72) 0%, var(--berenjena-hondo) 85%); }
}

/* ---------- 480px ---------- */
@media (max-width: 480px) {
  :root { --space-2xl: 4rem; --space-xl: 3rem; }

  .hero { padding-top: calc(var(--space-2xl) + 3.5rem); }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .boton { width: 100%; }
  .hero__firma { font-size: .82rem; padding: .7rem 1.2rem 0; }

  .trat { grid-template-columns: 1fr; gap: .4rem; }
  .trat__n { padding-top: 0; }

  .cinta strong { font-size: 1.6rem; }
  .panel { padding: var(--space-md); }
  .pie__grid { grid-template-columns: 1fr; }
  .pie__bajo { flex-direction: column; }
  .menu a { font-size: 1.5rem; }
  .menu .boton { align-self: stretch; padding: 0.95rem 1.2rem; }
  .hero__firma { min-height: 46px; font-size: 0.6rem; letter-spacing: 0.14em; }
  .wa { right: 1rem; bottom: 1rem; }
}

/* ---------- 375px ---------- */
@media (max-width: 375px) {
  :root { --fs-body: 1rem; }
  .marca { font-size: 1.15rem; }
  .marca span { display: none; }
}