/* ============================================
   SKINBLOOM · Responsive
   Breakpoints verificados: 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920
   ============================================ */

/* Botón de reserva del header solo en pantallas amplias;
   la acción sigue disponible en hero, drawer, CTA y asides */
@media (max-width: 1599px) {
  .header-actions .btn--small { display: none; }
}

/* ---------- ≤ 1280px: navegación colapsa a drawer ---------- */
@media (max-width: 1280px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 1281px) {
  .drawer { display: none; }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 1rem; }
  .hero-stack { max-width: 400px; }
  .hero { min-height: auto; padding-bottom: 4.5rem; }
  .scroll-hint { display: none; }

  .service-layout { grid-template-columns: 1fr; }
  .service-aside { position: static; }

  .product-layout { grid-template-columns: 1fr; }
  .product-figure { position: static; }

  .doctor-split, .contact-grid, .kbeauty-split { grid-template-columns: 1fr; }
  .kbeauty-visual { max-width: 520px; margin-inline: auto; }

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

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
  :root { --header-h: 76px; --header-h-compact: 62px; }

  .brand img { height: 50px; }
  .site-header.is-scrolled .brand img { height: 44px; }

  .pillars { grid-template-columns: 1fr; }

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

  .shop-toolbar { grid-template-columns: 1fr; }

  .quickview-grid { grid-template-columns: 1fr; }
  .quickview-media img { max-height: 44vh; }

  .mobile-buy-bar { display: block; }
  .product-buy--desktop { display: none; }
  main.has-buy-bar { padding-bottom: 5.5rem; }

  .hero-copy .hero-lede { margin-bottom: 2rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-tertiary { margin-top: 1.2rem; }
  .hero-seal { margin-top: 2.2rem; }

  .cta-band .hero-actions .btn { flex: 1 1 100%; }

  .footer-legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- ≤ 430px ---------- */
@media (max-width: 430px) {
  :root {
    --fs-h1: clamp(2.5rem, 11vw, 3.2rem);
    --fs-h2: clamp(1.9rem, 8.5vw, 2.4rem);
  }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .product-card-body { padding: 0.9rem 0.9rem 1.1rem; }
  .product-name { font-size: 0.95rem; }
  .product-card-actions .btn { font-size: 0.68rem; padding-inline: 0.7rem; letter-spacing: 0.08em; }
  .services-grid { grid-template-columns: 1fr; }
  .filter-chips { gap: 0.45rem; }
  .chip { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
}

/* ---------- ≤ 350px (320px verificado) ---------- */
@media (max-width: 350px) {
  .products-grid { grid-template-columns: 1fr; }
  .brand img { height: 44px; }
  .btn { padding-inline: 1.4rem; font-size: 0.85rem; }
}

/* ---------- ≥ 1920px: contener escala ---------- */
@media (min-width: 1900px) {
  .hero { min-height: 820px; }
}

/* En móvil, el logo va más grande y legible: se libera espacio ocultando
   el icono de Instagram del header (sigue en el menú y el footer). */
@media (max-width: 430px) {
  .header-actions .icon-link:not([aria-label*="WhatsApp"]) { display: none; }
}

/* ≤ 360px: comprimir acciones del header para no desbordar */
@media (max-width: 360px) {
  .header-inner { padding-inline: 1rem; }
  .header-actions { gap: 0.4rem; }
  .header-actions .icon-link:not([aria-label*="WhatsApp"]) { display: none; }
  .icon-link { width: 40px; height: 40px; }
  .brand-marquee span { font-size: 0.95rem; }
}