/* ============================================================
   PALO ROSA — responsive.css
   Breakpoints: mobile-first
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
   ============================================================ */

/* ── HERO ── */
@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: calc(var(--navbar-h) + 3rem);
    padding-bottom: 3rem;
  }
  .hero__text { order: 2; }
  .hero__image-wrap { order: 1; min-height: clamp(240px, 40vh, 380px); }
  .hero__body { margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  .hero__bottle { width: clamp(160px, 35vw, 240px); }
  .hero__stat { padding: 0 1.5rem; }
}
@media (max-width: 639px) {
  .hero { min-height: auto; }
  .hero__inner { padding-top: calc(var(--navbar-h) + 2rem); padding-bottom: 2rem; }
  /* Se eliminó la clase antigua hero__deco-bg */
  .hero__stats { gap: 0; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding: 1.25rem var(--section-pad-x); scrollbar-width: none; }
  .hero__stats::-webkit-scrollbar { display: none; }
  .hero__stat { padding: 0 1.25rem; flex-shrink: 0; }
  .hero__stat-div { flex-shrink: 0; }
}

/* ── NAVBAR ── */
@media (max-width: 1023px) {
  .navbar__links { display: none; }
  .navbar__hamburger { display: flex; }
  .navbar__icon-btn.search-btn { display: none; }
}

/* ── COLLECTIONS GRID — breakpoints explícitos ── */
@media (max-width: 1279px) {
  .collections__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1023px) {
  .collections__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
@media (max-width: 767px) {
  .collections__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 479px) {
  .collections__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── RESEÑAS ── */
@media (max-width: 1023px) {
  .seccion-resenas__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .seccion-resenas {
    padding: 5rem var(--section-pad-x) 4rem;
  }
  .seccion-resenas__grid {
    grid-template-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 1rem;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .seccion-resenas__grid::-webkit-scrollbar { display: none; }
  .resena-card {
    min-width: calc(100vw - 4rem);
    scroll-snap-align: start;
  }
  .seccion-resenas__dots {
    display: flex;
  }
}

/* ── BENEFITS ── */
@media (max-width: 767px) {
  .benefits__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 479px) {
  .benefits__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ── FOOTER ── */
@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 639px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── MODAL (precompra) — drawer desde abajo en mobile ── */
@media (max-width: 767px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-height: 96vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(40px);
  }
  .modal-overlay.is-open .modal {
    transform: translateY(0);
  }
  .modal__inner {
    grid-template-columns: 1fr;
  }
  .modal__left {
    border-radius: 20px 20px 0 0;
    padding: 2rem;
    min-height: 220px;
  }
  .modal__img { width: 160px; height: 200px; }
  .modal__right { padding: 1.5rem; gap: 1rem; }
  .modal__pyramid { grid-template-columns: repeat(3, 1fr); }
  .modal__chars { grid-template-columns: 1fr 1fr; }
  .modal__secondary-actions { flex-direction: column; }
}
@media (max-width: 479px) {
  .modal__pyramid { grid-template-columns: 1fr; gap: 0.5rem; }
  .modal__chars { grid-template-columns: 1fr; }
}

/* ── QUIZ ── */
@media (max-width: 639px) {
  .quiz__options {
    grid-template-columns: 1fr;
  }
  .quiz__nav { flex-direction: column; gap: 0.75rem; }
  .quiz__nav .btn { width: 100%; }
}

/* ── COMPARADOR ── */
@media (max-width: 767px) {
  .comparador__slots {
    gap: 0.75rem;
  }
  .comparador__slot,
  .comparador__slot-empty { width: 130px; }
  .comparador__slot-filled { padding: 0.75rem; }
}

/* ── COMPARE BAR ── */
@media (max-width: 639px) {
  .compare-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .compare-bar__thumbs { display: none; }
}

/* ── NEWSLETTER ── */
@media (max-width: 639px) {
  .newsletter__form {
    flex-direction: column;
    gap: 0.75rem;
  }
  .newsletter__input {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
  }
  .newsletter__btn {
    border-radius: var(--radius-sm);
  }
}

/* ── QUIZ RESULT ── */
@media (max-width: 767px) {
  .quiz__result-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media (max-width: 479px) {
  .quiz__result-grid {
    grid-template-columns: 1fr;
  }
}

/* ── TOAST ── */
@media (max-width: 639px) {
  .toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
  .toast { max-width: 100%; }
}

/* ── EDUCATIONAL ── */
@media (max-width: 639px) {
  .educational__grid {
    grid-template-columns: 1fr;
  }
}

/* ── WISHLIST DRAWER ── */
@media (max-width: 479px) {
  .wishlist-drawer { width: 100%; }
}

/* ── GENERAL ── */
img { max-width: 100%; height: auto; }

/* Asegurar targets táctiles grandes en mobile */
@media (max-width: 767px) {
  .quiz__option { min-height: 64px; }
  .btn { height: auto; min-height: 44px; padding: 0.75rem 1.5rem; }
  .btn-sm { min-height: 40px; }
  .navbar__icon-btn { min-width: 44px; min-height: 44px; }
  .wishlist-item__wa-btn,
  .wishlist-item__remove { min-width: 40px; min-height: 40px; }
  .collections__chip { min-height: 36px; display: inline-flex; align-items: center; }
}