.fabWhatsappCatalogo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 75px;
  height: 75px;

  /* 🔥 CLAVE */
  background: transparent;
  border-radius: 0;
  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999;
  cursor: pointer;
}

.fabWhatsappCatalogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sidebarBrand {
  padding: 16px;
  text-align: center;
}

.sidebarBrand img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ======================================================
   SUBNAVBAR – CATEGORÍAS COMO TEXTO (OVERRIDE FINAL)
====================================================== */

.subNavbarLista .menuItemPremium {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0 !important;

  padding: 4px 6px;
  font-weight: 500;
}

/* Hover SOLO texto */
.subNavbarLista .menuItemPremium:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;

  color: var(--colorPrincipal);
  text-decoration: underline;
}

/* Activa = texto destacado, NO botón */
.subNavbarLista .menuItemPremium.activa {
  background: transparent !important;
  color: var(--colorPrincipal) !important;
}

/* Línea inferior elegante */
.subNavbarLista .menuItemPremium.activa::after {
  content: "";
  display: block;
  margin: 4px auto 0;
  width: 60%;
  height: 2px;
  background: var(--colorPrincipal);
}

/* ======================================================
   SUBNAVBAR – CENTRADO PERFECTO Y ESPACIADO UNIFORME
====================================================== */

#subNavbarCategorias {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Ítems */
#subNavbarCategorias .subNavbarLista > li {
  margin: 0;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

/* Enlaces */
#subNavbarCategorias .subNavbarLista > li > a {
  text-align: center;
  white-space: normal;
}

/* =====================================================
   🔍 SEARCHBAR CATÁLOGO
   ===================================================== */

.searchCatalogoInput {
  width: 100%;
  font-family: var(--fontPrincipal);
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 30px;

  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: var(--colorCardFondo);
  color: var(--colorTextoGeneral);

  transition: all 0.25s ease;
}

/* Placeholder */
.searchCatalogoInput::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

/* Focus */
.searchCatalogoInput:focus {
  outline: none;
  border-color: var(--colorPrincipal);
  box-shadow: 0 0 0 0.2rem rgba(245, 151, 154, 0.25);
}

/* =====================================================
   🖥️ DESKTOP — centrado al 40%
   ===================================================== */
@media (min-width: 992px) {

  .searchCatalogoInput {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

}

/* =====================================================
   FAB FAQ — Catálogo Osa Insumos
   ===================================================== */
.fabFaqCatalogo {
  position: fixed;
  bottom: 110px;        /* ⬆️ más arriba que WhatsApp */
  right: 20px;
  width: 75px;
  height: 75px;

  /* 🔥 CLAVE: FAB solo imagen */
  background: transparent;
  border-radius: 0;
  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999;
  cursor: pointer;
}

.fabFaqCatalogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ======================================================
   🔥 FIX DEFINITIVO — SIMETRÍA REAL + WORD WRAP
====================================================== */

/* CONTENEDOR */
#subNavbarCategorias {
  display: flex;
  justify-content: center;
}

/* LISTA */
#subNavbarCategorias .subNavbarLista {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 0px !important;                 /* gap REAL y constante */
  padding: 0 0px !important;           /* márgenes simétricos */

  margin: 0 auto !important;
  list-style: none;
}

/* 🔒 TODOS LOS ITEMS MISMO ANCHO */
#subNavbarCategorias .subNavbarLista > li {
  flex: 0 0 150px;           /* 🔥 CLAVE */
  display: flex;
  justify-content: center;
  align-items: center;

}

/* LINK */
#subNavbarCategorias .subNavbarLista > li > a.menuItemPremium {
  width: 100%;
  text-align: center;

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;

  line-height: 1.25;
  padding: 4px 6px;

  font-family: var(--fontPrincipal);
  font-weight: 500;
  color: var(--colorTextoNavbar);
}

/* ACTIVO */
#subNavbarCategorias .menuItemPremium.activa {
  color: var(--colorPrincipal);
}

/* LÍNEA ACTIVA */
#subNavbarCategorias .menuItemPremium.activa::after {
  content: "";
  display: block;
  margin: 4px auto 0;
  width: 60%;
  height: 2px;
  background: var(--colorPrincipal);
}

/* ======================================================
   🔒 SUBNAVBAR — TABLET / DESKTOP (>=900px)
   ====================================================== */
@media (min-width: 900px) {

  /* GAP CERO TOTAL */
  #subNavbarCategorias .subNavbarLista {
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ITEM */
      #subNavbarCategorias .subNavbarLista > li {
        width: 12% !important;
        flex: 0 0 12% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 1px !important;
    }

}

.angostoEnDesktop{
  width: 60% !important;
  margin: 0 auto !important;
}

/* ======================================================
   FAQ — PREGUNTAS
====================================================== */

#contenedorDominiosFaq .list-group-item,
#listaResultadosFaq .list-group-item {
  font-family: var(--fontPrincipal);
  font-size: 0.95rem;

  font-weight: 500;          /* más que normal, menos que bold */
  font-style: italic;        /* 🔥 sensación de pregunta */

  color: var(--colorTextoGeneral);

  padding-left: 18px;        /* ligera sangría */
  padding-right: 12px;

  line-height: 1.45;
}

/* ======================================================
   FAQ — RESPUESTAS
====================================================== */

.respuestaFaqContenido {
  font-family: var(--fontPrincipal);
  font-size: 0.95rem;
  font-weight: 400;

  color: var(--colorTextoGeneral);
  line-height: 1.7;

  padding-left: 14px;        /* 🔥 SANGRÍA CLARA DE RESPUESTA */
  border-left: 3px solid rgba(245, 151, 154, 0.35);
}

/* Párrafos */
.respuestaFaqContenido p {
  margin-bottom: 0.85rem;
}

/* Listas */
.respuestaFaqContenido ul,
.respuestaFaqContenido ol {
  margin-left: 1rem;
  margin-bottom: 1rem;
}

/* Ítems */
.respuestaFaqContenido li {
  margin-bottom: 0.4rem;
}

/* ======================================================
   FAQ — PREGUNTAS (SANGRÍA + JERARQUÍA)
====================================================== */

#contenedorDominiosFaq .list-group-item {
  font-family: var(--fontPrincipal);
  font-size: 0.95rem;

  font-weight: 500;          /* más fuerte que respuesta */
  font-style: italic;        /* sensación de pregunta */

  color: var(--colorTextoGeneral);

  padding-left: 28px;        /* 🔥 SANGRÍA CLARA */
  padding-right: 12px;

  line-height: 1.45;
  text-align: left;
}

/* Refuerzo visual opcional (muy sutil) */
#contenedorDominiosFaq .list-group-item::before {
  content: "—";
  position: absolute;
  left: 10px;
  color: var(--colorSecundario);
  opacity: 0.6;
}

/* ======================================================
   MODAL FAQ — ESTILO CUIDADO Y JERÁRQUICO
====================================================== */

/* CONTENEDOR GENERAL */
#modalRespuestaFaq .modal-content {
  background-color: var(--colorCardFondo);
  color: var(--colorCardTexto);
  font-family: var(--fontPrincipal);

  border-radius: 18px;
  border: none;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

/* ================= HEADER ================= */

#modalRespuestaFaq .modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 18px 22px;
}

#modalRespuestaFaq .modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--colorTextoGeneral);
  line-height: 1.35;
}

/* Botón cerrar */
#modalRespuestaFaq .btn-close {
  filter: opacity(0.55);
}

#modalRespuestaFaq .btn-close:hover {
  filter: opacity(0.85);
}

/* ================= BODY ================= */

#modalRespuestaFaq .modal-body {
  padding: 22px 24px 26px;
}

/* Contenido FAQ (Quill) */
#modalRespuestaFaq .respuestaFaqContenido {
  font-family: var(--fontPrincipal);
  font-size: 0.95rem;
  font-weight: 400;

  color: var(--colorTextoGeneral);
  line-height: 1.7;

  /* Aire visual */
  padding-left: 14px;
  border-left: 3px solid rgba(245, 151, 154, 0.35);
}

/* Ajustes de HTML enriquecido */
#modalRespuestaFaq .respuestaFaqContenido p {
  margin-bottom: 0.9rem;
}

#modalRespuestaFaq .respuestaFaqContenido ul,
#modalRespuestaFaq .respuestaFaqContenido ol {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

#modalRespuestaFaq .respuestaFaqContenido li {
  margin-bottom: 0.4rem;
}

/* ================= FOOTER ================= */

#modalRespuestaFaq .modal-footer {
  border-top: none;
  padding: 14px 22px 18px;

  background-color: rgba(0, 0, 0, 0.02);
}

#modalRespuestaFaq .modal-footer span {
  font-size: 0.85rem;
  color: var(--colorTextoGeneral);
  opacity: 0.7;
}

/* Botón WhatsApp (usa btn-secundario existente) */
#modalRespuestaFaq .btn-secundario {
  padding: 8px 16px;
  font-size: 0.9rem;
  border-radius: 8px;
}