/* ===================================================================
   AURAMATERA · responsive.css
   Ajustes específicos por tamaño de pantalla. Bootstrap resuelve la
   grilla; acá se afinan tipografía, espaciados y comportamientos
   propios del diseño que Bootstrap no cubre.
   =================================================================== */

/* ----------------------------- Celulares (<576px) ----------------------------- */
@media (max-width: 575.98px) {
  .navbar-auramatera .navbar-brand img { width: 3.2rem; height: 3.2rem; }
  .navbar-auramatera .navbar-brand { gap: 0.5rem; }
  .hero__contenido { padding-top: 5rem; text-align: center; }
  .hero__sello { display: none;}
  /*.hero__sello { width: 78px; height: 78px; right: 1rem; bottom: 1rem; }*/
  /* El botón conserva su ancho natural (antes se estiraba al 100% y se
     veía desproporcionado frente al título). */
  .hero__acciones { flex-direction: column; align-items: center; gap: 0.75rem; }
  .hero__titulo {
    font-size: 11.5vw;  
    margin-inline: auto;
    letter-spacing: 0.08em;     /* menos espaciado para que entre sin cortarse */
    padding-left: 0.08em;       /* compensa el letter-spacing para que se vea centrado de verdad */
  }

  .hero__eyebrow {
    font-size: 0.72rem;         /* antes ~0.85rem */
    letter-spacing: 0.14em;
  }
  /* En mobile alcanza con deslizar el dedo; las flechas tapan la imagen */
  .hero__carrusel .carousel-control-prev,
  .hero__carrusel .carousel-control-next { display: none; }

  .card-producto__acciones { flex-direction: column; }
  .card-producto__acciones .btn { width: 100%; }

  .modal-producto__info { padding: 1.4rem 1.2rem; }
  .modal-producto__ficha { grid-template-columns: 1fr; }

  .nosotros__cifra { padding: 1rem 1.2rem; }
  .nosotros__cifra strong { font-size: 1.5rem; }

  .whatsapp-flotante { width: 52px; height: 52px; font-size: 1.4rem; right: 1rem; bottom: 1rem; }

  .seccion { padding-block: 3.2rem; }
}

@media (max-width: 767.98px) {
  .hero {
    aspect-ratio: auto;
    min-height: 100svh;      /* probá 80svh, 90svh o 100svh hasta que quede bien */
  }
  .hero__img { object-position: 50% 30%; }
}
/* ----------------------------- Tablets (576–991px) ----------------------------- */
@media (min-width: 576px) and (max-width: 1220.98px) {
  .hero__titulo { font-size: clamp(2.6rem, 8.5vw, 5.5rem); }
  .modal-producto__ficha { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------- Navbar colapsada (<992px) ----------------------------- */
@media (max-width: 1220.98px) {
  .navbar-auramatera {
    background: var(--color-negro);
  }
  .navbar-auramatera .navbar-collapse {
    margin-top: 1rem;
    padding-bottom: 0.5rem;
  }
  .navbar-auramatera .nav-link { padding-block: 0.5rem; }
  .navbar-auramatera .btn-nav-whatsapp {
    display: inline-block;
    margin-top: 0.5rem;
  }
}

/* ----------------------------- Escritorio grande (≥1400px) ----------------------------- */
@media (min-width: 1400px) {
  .container, .container-lg, .container-xl {
    max-width: 1240px;
  }
  .hero__titulo { font-size: clamp(4rem, 6.5vw, 7rem); }
}

/* ----------------------------- Panel de filtros en mobile: colapsable ----------------------------- */
@media (max-width: 1200.98px) {
  .panel-filtros { padding: 1.25rem; }
}

/* Accesibilidad: asegurar buen tamaño de toque en botones sobre pantallas táctiles */
@media (pointer: coarse) {
  .btn, .navbar-auramatera .nav-link, .whatsapp-flotante {
    min-height: 40px;
  }
}