/* Maros — capa responsive compartida.
 *
 * Todo el layout del sitio vive en atributos style="" inline, que no pueden
 * llevar media queries y le ganan a cualquier hoja de estilos. Por eso las
 * reglas de este archivo usan !important: es la única forma de reacomodar el
 * layout por debajo de cierto ancho sin reescribir el markup de las seis
 * páginas. Los estilos inline siguen siendo el diseño de escritorio; aquí solo
 * se sobrescriben, y únicamente dentro de bloques @media.
 *
 * Los ganchos con prefijo mp- son clases añadidas a los contenedores de layout
 * de las páginas .dc.html. Las clases .nav, .dialog, .dialog-backdrop, .btn y
 * .tag vienen del design system, en _ds/classical-<id>/styles.css.
 *
 * Breakpoints:  1120px  laptop chico   grillas 5 -> 4
 *                900px  tablet         menú hamburguesa, modal a 1 columna
 *                640px  celular        modal como hoja inferior, grillas a 2
 *                380px  celular chico  ajuste fino
 */

/* ==========================================================================
   1. Menú móvil — lo inyecta nav.js, se muestra solo por debajo de 900px
   ========================================================================== */

.mp-burger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: inherit;
  align-items: center;
  justify-content: center;
}
.mp-burger svg { display: block; }

.mp-menu[hidden] { display: none; }
.mp-menu { position: fixed; inset: 0; z-index: 1200; }

.mp-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 24, 22, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mp-menu.mp-on .mp-menu-backdrop { opacity: 1; }

/* El panel es siempre oscuro, también sobre la landing (que tiene el nav
   claro): así el menú se ve igual en todo el sitio. */
.mp-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 86%);
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
  background: #1b1816;
  color: #f3f2f2;
  font-family: 'Manrope', system-ui, sans-serif;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}
.mp-menu.mp-on .mp-menu-panel { transform: translateX(0); }

.mp-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px 18px;
}
.mp-menu-brand {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.14em;
  color: #f3f2f2;
  text-decoration: none;
}
.mp-menu-close {
  display: flex;
  margin-right: -8px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: #f3f2f2;
}
.mp-menu-link {
  display: block;
  padding: 15px 20px;
  border-top: 1px solid rgba(243, 242, 242, 0.1);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(243, 242, 242, 0.88);
}
.mp-menu-link:last-child { border-bottom: 1px solid rgba(243, 242, 242, 0.1); }
.mp-menu-link:hover,
.mp-menu-link:focus-visible {
  color: var(--color-accent-400, #d8b46a);
  background: rgba(243, 242, 242, 0.04);
}
.mp-menu-link[aria-current='page'] { color: var(--color-accent-400, #d8b46a); }

/* Bloqueo de scroll del fondo: lo aplica nav.js con el menú y también con el
   modal de producto abierto, que hasta ahora dejaba correr la página detrás. */
body.mp-no-scroll { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .mp-menu-backdrop,
  .mp-menu-panel { transition-duration: 0.001s; }
}

/* ==========================================================================
   2. <= 1120px — laptop chico
   ========================================================================== */

@media (max-width: 1120px) {
  .mp-shell { padding-left: 28px !important; padding-right: 28px !important; }
  .nav { padding-inline: 28px !important; }

  .mp-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Carrusel "top" de la landing: 5 -> 3 por vista (antes 1080px). */
  .top-track { --per-view: 3; }
  .top-track > * { flex: 0 0 calc((100% - 32px) / 3); }
}

/* ==========================================================================
   3. <= 900px — tablet: hamburguesa y modal a una columna
   ========================================================================== */

@media (max-width: 900px) {
  .mp-shell { padding-left: 20px !important; padding-right: 20px !important; }
  .nav { padding-inline: 20px !important; gap: 10px !important; }

  /* Los cinco enlaces se van al panel; queda logo + iconos + hamburguesa. */
  .nav > a:not(.nav-brand) { display: none !important; }
  .mp-burger { display: flex !important; }

  .mp-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .mp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Combo: la ficha de resumen baja debajo del paso actual y deja de ser
     pegajosa, que apilada no tendría a qué agarrarse. */
  .mp-split { grid-template-columns: 1fr !important; }
  .mp-summary { position: static !important; }

  /* Landing: el video de TikTok apilado sobre el texto, centrado en vez de
     quedar pegado a la izquierda. */
  .tiktok-grid { gap: 28px !important; text-align: center; }
  .tiktok-follow { justify-content: center; }

  /* Bandas de garantías y cifras, y el pie de la portada. */
  .mp-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 18px; }

  /* El halo del hero se sale 6% por cada lado; apilado eso ya no cabe. */
  .mp-glow { left: 0 !important; right: 0 !important; }
  .mp-footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; }

  /* Modal: se acaba la rejilla de dos columnas. */
  .mp-modal-grid { grid-template-columns: 1fr !important; }
  .mp-modal-media { padding: 20px !important; }
  .mp-modal-info { padding: 22px 20px 24px !important; }
  .mp-thumbs img,
  .mp-thumbs .pack-thumb,
  .mp-thumbs .dec-thumb-vacia { width: 54px !important; height: 54px !important; }

  /* Landing (antes 860px). */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding: 44px 0 40px !important;
    text-align: center;
  }
  .hero-grid figure { order: -1; }
  /* Los frascos van en capas absolutas y al encogerse sobresalen unos pocos
     píxeles por la derecha; se recortan para no provocar scroll horizontal. */
  .hero-grid figure { overflow-x: clip; }
  .hero-grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .hero-subhead { margin-left: auto !important; margin-right: auto !important; }
  .trust-badges { grid-template-columns: repeat(2, 1fr) !important; row-gap: 18px; }
  .oc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   4. <= 640px — celular: el modal pasa a hoja inferior
   ========================================================================== */

@media (max-width: 640px) {
  .mp-shell { padding-left: 16px !important; padding-right: 16px !important; }
  .nav { padding-inline: 16px !important; }

  .mp-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 12px !important; }
  .mp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

  /* La fila de "Disponibilidad / Ordenar / N artículos" no envuelve sola. */
  .mp-toolbar { flex-wrap: wrap !important; gap: 12px !important; }

  /* Tarjetas de categoría del combo y campos del formulario de contacto. */
  .mp-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mp-cols-2 { grid-template-columns: 1fr !important; }
  .mp-footer { grid-template-columns: 1fr !important; }

  /* Los pares de botones de portada no caben en una línea. */
  .mp-cta-row { flex-wrap: wrap !important; }
  .mp-cta-row > * { flex: 1 1 auto; justify-content: center; }

  /* Los tres pasos del combo: sin min-width:0 no se encogen por debajo de su
     contenido y desbordan la barra. */
  .mp-steps { padding-left: 8px !important; padding-right: 8px !important; }
  .mp-steps button { min-width: 0 !important; padding: 12px 6px !important; gap: 8px !important; }
  .mp-steps button > * { min-width: 0; }

  /* --- modal como hoja inferior --- */
  .dialog-backdrop { padding: 0 !important; align-items: flex-end !important; }
  .dialog {
    max-height: 94vh !important;
    border-radius: 14px 14px 0 0 !important;
    overscroll-behavior: contain;
    animation: mp-sheet-up 0.32s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .mp-modal-media { padding: 14px 14px 10px !important; }
  /* Sin espacio para flechas de 40px encima de la foto: quedan los thumbs. */
  .mp-arrow, .pack-nav, .dec-nav { display: none !important; }
  .mp-thumbs { overflow-x: auto; justify-content: flex-start !important; padding-bottom: 2px; }
  /* En decants cada miniatura va envuelta con su rótulo debajo. */
  .mp-thumbs > div { flex: 0 0 auto; }
  .mp-thumbs img,
  .mp-thumbs .pack-thumb,
  .mp-thumbs .dec-thumb-vacia { width: 48px !important; height: 48px !important; flex: 0 0 auto; }

  .mp-modal-info { padding: 18px 16px 16px !important; }

  .mp-sizes { gap: 8px !important; }
  .mp-sizes button { padding: 12px 4px !important; }

  /* El CTA queda pegado al borde inferior mientras se recorre la ficha. Los
     márgenes negativos compensan el padding lateral de .mp-modal-info para que
     la barra llegue de lado a lado. */
  .mp-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3;
    margin: 18px -16px 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    background: var(--color-surface, #ffffff);
    box-shadow: 0 -1px 0 var(--color-divider), 0 -10px 18px -12px rgba(27, 24, 22, 0.28);
  }

  /* Los iconos de confianza se leen mejor en fila que en tres columnas de 100px. */
  .mp-trust { grid-template-columns: 1fr !important; gap: 12px !important; text-align: left !important; }
  .mp-trust > div { flex-direction: row !important; align-items: center !important; gap: 10px !important; }

  .mp-notes { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Landing (antes 620px). */
  .top-track { --per-view: 2; }
  .top-track > * { flex: 0 0 calc((100% - 16px) / 2); }
  .reviews-track > * { flex: 0 0 250px; }
}

@keyframes mp-sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dialog { animation-duration: 0.001s; }
}

/* ==========================================================================
   5. <= 380px — celular chico
   ========================================================================== */

@media (max-width: 380px) {
  .mp-shell { padding-left: 12px !important; padding-right: 12px !important; }
  .nav { padding-inline: 12px !important; }

  .mp-cols-3, .mp-cols-4 { grid-template-columns: 1fr !important; }

  /* Tres tarjetas de tester no entran: se apilan. */
  .mp-sizes { grid-template-columns: 1fr !important; }
  .mp-sizes button {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 11px 8px !important;
  }
}