body{
  line-height: normal;
}

.header-nav-top .active{
  background-color: inherit  !important;
}
#header .header-top, 
#header .header-nav-features .header-nav-features-search-reveal-container {
  min-height: 20px;
}
#header .header-nav {
  min-height:auto;
}
.social-icons li:hover.social-icons-tiktok a {
  background: #000 !important;
}

.social-icons li:hover.social-icons-instagram a {
  background: #BD2690 !important;
}

b{
  font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Sriracha", Arial, sans-serif;
}

.mw-25{ max-width: 25%;}
.mw-30{ max-width: 30%;}
.mw-35{ max-width: 35%;}
.mw-40{ max-width: 40%;}
.mw-45{ max-width: 45%;}
.mw-50{ max-width: 50%;}

.contacto-menu {
  background-color: #c89c36;
}

.contacto-menu:hover {
  background-color: #721f26!important;
  color:white!important;
}

#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a.contacto-menu {
  color:white!important;
}

@media (max-width: 768px) { 
  .img-float-text {
    float:none !important;
    max-width: 100%;
  }

  #header.header-effect-shrink .header-container {
    min-height: auto;
  }
}

/* ===========================================================
   Accesibilidad - Contraste de color (WCAG 2.1 AA, 1.4.3)
   =========================================================== */

/* El texto base del tema era #777 sobre blanco (4.47:1, NO cumple).
   Se oscurece a #595959 (7:1) para superar el mínimo de 4.5:1.
   Se incluyen los elementos de texto que el tema colorea por su cuenta
   (p, li, label, dt/dd, td/th): sin ellos seguían heredando #777.
   Los textos sobre fondo oscuro usan clases utilitarias (text-light,
   text-color-light, text-white…) de mayor especificidad y no cambian. */
body,
p,
li,
label,
dd, dt,
td, th,
.lead {
  color: #595959;
}

/* .text-muted era #999 (2.85:1, NO cumple) -> #6c6c6c (~5:1). */
.text-muted {
  color: #6c6c6c !important;
}

/* Página "Nosotros" (empresa): el texto interior se muestra en negro
   tal y como se solicita, incluidas las palabras en negrita. */
.empresa-texto,
.empresa-texto p,
.empresa-texto span,
.empresa-texto li,
.empresa-texto b,
.empresa-texto strong {
  color: #212529 !important;
}

/* Utilidad para ocultar etiquetas visualmente manteniéndolas
   disponibles para lectores de pantalla. */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===========================================================
   Accesibilidad - Skip link "Saltar al contenido" (WCAG 2.4.1)
   Oculto hasta recibir foco con el teclado; entonces aparece.
   =========================================================== */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100000;
  background: #882B32;        /* primary de marca; blanco encima = ~8:1 */
  color: #ffffff;
  padding: 10px 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top .15s ease-in-out;
}
.skip-link:focus {
  top: 0;
}
/* El destino del skip link no debe mostrar contorno al recibir foco programático */
#main-content:focus {
  outline: none;
}

/* ===========================================================
   Accesibilidad - Foco de teclado visible (WCAG 2.4.7)
   Doble anillo (contorno de marca + halo blanco) para que sea
   visible tanto sobre fondos claros como sobre la cabecera oscura.
   Solo con :focus-visible: no molesta al usuario de ratón.
   =========================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #882B32;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95);
}

/* ===========================================================
   Productos: el texto de contenido (descripción) en negro.
   Mismo tratamiento que la página "Nosotros".
   =========================================================== */
.producto-texto,
.producto-texto p,
.producto-texto span,
.producto-texto li,
.producto-texto b,
.producto-texto strong,
.producto-texto em,
.producto-texto td,
.producto-texto div {
  color: #212529 !important;
}

/* ===========================================================
   Accesibilidad - Contraste pestaña "Contacto" del menú (WCAG 1.4.3)
   En estado activo Bootstrap la pintaba de burdeos (#882B32) con texto
   negro = 2.43:1 (falla). Se fuerza su fondo dorado de marca (#c89c36),
   sobre el que el texto negro da ~8:1. Se respeta el hover (burdeos+blanco).
   =========================================================== */
#header .header-nav-main nav > ul > li > a.contacto-menu:not(:hover) {
  background-color: #c89c36 !important;
  color: #000000 !important;
}