/* ==========================================================
   responsive.css — Ajustes por breakpoint
   ========================================================== */

@media (max-width: 1024px) {
  .whatsapp-bloque { grid-template-columns: 1fr; }
  .footer-rejilla  { grid-template-columns: 1fr 1fr; }
  .mosaico         { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------
   Móvil / tablet: menú desplegable
   IMPORTANTE: aquí el header NO puede llevar backdrop-filter.
   Un elemento con backdrop-filter (igual que transform o
   filter) se vuelve bloque contenedor de sus descendientes
   position:fixed, y el overlay del menú se encogería al
   tamaño de la barra en vez de cubrir la pantalla.
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .btn-menu { display: flex; }

  .sitio-header,
  .sitio-header.compacto {
    background: var(--crema-claro);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-block: 12px;
  }

  .sitio-header.compacto { box-shadow: 0 1px 0 var(--linea); }

  /* Marca y hamburguesa por encima del overlay */
  .marca,
  .btn-menu {
    position: relative;
    z-index: 2;
  }

  .marca span { font-size: 1rem; }
  .marca img  { width: 40px; height: 40px; }

  /* Overlay a pantalla completa, por debajo de la fila del header */
  .nav-principal {
    z-index: 1;
    padding: 96px var(--gutter) calc(40px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: center;
  }

  .nav-principal ul { width: 100%; }

  .nav-principal a {
    display: inline-block;
    padding-block: 10px;
  }
}

@media (max-width: 700px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mosaico .figura:nth-child(1),
  .mosaico .figura:nth-child(6) { grid-column: span 2; grid-row: span 1; }

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

  .hero__acciones .btn { width: 100%; justify-content: center; }

  /* El indicador "Desliza" choca con los botones en pantallas bajas */
  .hero__scroll { display: none; }

  /* En móvil las flechas se montaban sobre la foto: van abajo,
     una al lado de la otra, fuera de la imagen. */
  .lightbox__figura { padding: 66px 12px calc(92px + env(safe-area-inset-bottom)); }
  .lightbox img { max-height: 66svh; }

  .lightbox__nav {
    top: auto;
    translate: none;
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: 46px; height: 46px;
  }

  .lightbox__nav.prev { left: 50%; margin-left: -56px; }
  .lightbox__nav.next { right: 50%; margin-right: -56px; }

  .marquesina__pista { gap: 26px; }
  .marquesina span { gap: 26px; }

  /* Que el flotante no tape el botón de enviar del formulario */
  .wa-form .btn { margin-bottom: 8px; }
}

@media (max-width: 420px) {
  .producto__cuerpo { padding: 20px; }
  .whatsapp-bloque  { padding: 26px 20px; }

  .wa-flotante {
    width: 52px; height: 52px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .marca span { font-size: .92rem; }
  .nav-principal a { font-size: .95rem; }
}