/* ==========================================================================
   LE FLEUR — Responsive
   ========================================================================== */

/* Tablets */
@media (max-width: 1024px) {
  .product-card { flex: 0 0 calc(33.333% - (var(--space-md) * 2 / 3)); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 380px; margin: 0 auto; order: -1; }
  .hero__text, .hero__title { max-width: none; }
  .story__inner { grid-template-columns: 1fr; }
  .story__visual { max-width: 420px; margin: 0 auto; }
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__inner { grid-template-columns: 1fr; }
}

/* Navegación móvil */
@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav { position: static; }
  .nav__list {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--color-cream);
    flex-direction: column;
    padding: 6.5rem var(--space-lg) var(--space-lg);
    gap: var(--space-md);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: -12px 0 32px rgba(43,50,39,0.12);
  }
  .nav__list.is-open { transform: translateX(0); }
  .nav__list a { font-size: 1rem; }
  .nav__actions .btn-outline { display: none; }
}

/* Móvil */
@media (max-width: 720px) {
  .container { padding: 0 var(--space-sm); }
  .hero { padding: 8rem var(--space-sm) var(--space-xl); }
  .hero__badges { gap: var(--space-md); flex-wrap: wrap; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .product-card { flex: 0 0 calc(85% - var(--space-md)); }
  .testimonials__grid { grid-template-columns: 1fr; }
  .form-row--split { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); }
  .occasions__grid { gap: var(--space-md); justify-content: flex-start; }
  .occasion { width: 84px; }
  .occasion__circle { width: 66px; height: 66px; }
  .occasion__circle svg { width: 26px; height: 26px; }
}

@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.4rem, 10vw, 3rem); }
  .back-to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}