/* ============================================================
   DUMAR SRL — custom.css
   Insumos para higiene profesional. Tema claro y prolijo,
   apoyado en las variables que el sistema inyecta en :root:
     --color-primario   = #002D72 (navy Dumar)
     --color-secundario = #108464 (verde Dumar: paneles y acentos)
   Los tonos derivados viven solo acá.
   ============================================================ */

:root {
    --dumar-navy: #002D72;
    --dumar-navy-deep: #001B45;
    --dumar-green: #108464;
    --dumar-green-soft: #E6F4EF;
    --dumar-blue: #4A9FE0;
    --dumar-bg-soft: #F5F8FC;
    --dumar-border: #DCE6F2;
    --dumar-text: #22303F;
    --dumar-muted: #6B7C90;
    --dumar-grad: linear-gradient(100deg, #002D72 0%, #108464 100%);
    --dumar-grad-verde: linear-gradient(100deg, #0C6B51 0%, #108464 100%);
}

/* ---------- Tipografía ---------- */
body {
    font-family: "Poppins", "Manrope", sans-serif;
    background-color: #ffffff;
    color: var(--dumar-text);
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.lead, .navbar-nav .nav-link, .btn,
input, select, textarea, button {
    font-family: "Poppins", "Manrope", sans-serif;
}

h1, h2, .display-1, .display-2, .display-3, .display-4 {
    font-family: "Raleway", "Poppins", sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--dumar-navy);
}

h3, h4, h5 {
    color: var(--dumar-navy);
}

/* ---------- Barra superior ---------- */
#divBarraSuperior {
    background: var(--dumar-navy) !important;
}
#divBarraSuperior .container {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}
#divBarraSuperior .p-seguinos,
#divBarraSuperior .follow-link {
    color: #ffffff;
}
#divBarraSuperior a:hover,
#divBarraSuperior a:hover i,
#divBarraSuperior a:hover p,
#divBarraSuperior .follow-link:hover {
    color: var(--dumar-green) !important;
}

/* ---------- Navbar ---------- */
.navbar.navbar-bg-color-secundario,
#mobileMenu {
    background: #ffffff !important;
}
.navbar-brand img {
    width: 190px;
    margin: 12px 0;
}
.navbar-dark .navbar-nav .nav-link {
    color: var(--dumar-navy);
    font-weight: 500;
    font-size: 15px;
}
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.dropdown:hover > .nav-link {
    color: var(--dumar-green) !important;
}
.navbar.navbar-dark .hamburger {
    color: var(--dumar-navy);
}
.navbar.navbar-dark .hamburger:hover {
    color: var(--dumar-green);
}
.header-nav {
    box-shadow: -2px 2px 45px -20px rgb(0 0 0 / 30%);
}
.buscador-barra {
    border: 1px solid var(--color-primario);
}
.buscador-barra-fila {
    background-color: #ffffff;
}
.badge-cart, .badge-login {
    line-height: 0px;
}
.dropdown-item {
    font-size: 15px;
}
.logo-menu-mobile {
    width: 170px;
}
.footer-logo {
    width: 210px;
}

@media (max-width: 991.98px) {
    #mobileMenu .mobile-menu-panel {
        background: #ffffff;
    }
    #mobileMenu .mobile-menu-header,
    #mobileMenu .mobile-menu-header .mobile-menu-title,
    #mobileMenu .mobile-menu-header .mobile-menu-back {
        color: var(--dumar-navy);
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Botonera del header (Ingreso Clientes + buscar + hamburguesa) alineada */
.navbar-other div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.boton-extranet {
    margin-bottom: 0px !important;
}

/* ---------- Hero ---------- */
.swiper-hero-con-barra,
.swiper-hero-con-barra .swiper-slide {
    height: calc(100vw / 2.6);
}

@media (max-width: 575.98px) {
    .swiper-hero-vertical-con-barra,
    .swiper-hero-vertical-con-barra .swiper-slide {
        height: calc(100svh - 110px) !important;
    }
}

/* Velo para que el texto del hero se lea sobre cualquier foto.
   El slide 1 ya es navy a la izquierda: el degradé no lo altera. */
.swiper-hero-con-barra .swiper-overlay {
    background: linear-gradient(90deg, rgba(0, 27, 69, .88) 0%, rgba(0, 27, 69, .62) 42%, rgba(0, 27, 69, 0) 72%);
}
.swiper-hero-vertical-con-barra .swiper-overlay {
    background: linear-gradient(180deg, rgba(0, 27, 69, .90) 0%, rgba(0, 27, 69, .80) 42%, rgba(0, 27, 69, .30) 68%, rgba(0, 27, 69, .55) 100%);
}

/* El sistema no acota el ancho de los componentes de portada (siempre col-12):
   los contenemos a la mitad izquierda para que no se monten sobre la imagen. */
@media (min-width: 992px) {
    .swiper-hero-con-barra .swiper-content .row > div {
        max-width: 52%;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .swiper-hero-con-barra .swiper-content .row > div {
        max-width: 68%;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
}
.swiper-hero-con-barra .portada-texto-grande {
    line-height: 1.12;
    margin-bottom: .75rem !important;
}

/* ---------- Botones ---------- */
.btn-primary,
.btn-buy,
.boton-agregar-carrito,
.btn-comprar {
    background: var(--dumar-grad) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 500;
    letter-spacing: .01em;
    border-radius: 8px;
    box-shadow: 0 6px 18px -8px rgba(0, 45, 114, .55);
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-primary:hover,
.btn-buy:hover,
.boton-agregar-carrito:hover,
.btn-comprar:hover {
    filter: brightness(1.12);
    box-shadow: 0 8px 24px -6px rgba(0, 45, 114, .5);
    transform: translateY(-1px);
}
.btn-outline-primary {
    border: 1px solid var(--dumar-navy) !important;
    color: var(--dumar-navy) !important;
    border-radius: 8px;
}
.btn-outline-primary:hover {
    background: var(--dumar-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}
/* Botón del hero: verde de marca. El gradiente de .btn-primary es un `background`
   shorthand (incluye background-image) y taparía el background-color del componente. */
.swiper-hero-con-barra .btn-primary,
.swiper-hero-vertical-con-barra .btn-primary {
    padding: .7rem 1.6rem !important;
    font-size: 1rem;
    background: var(--dumar-grad-verde) !important;
    box-shadow: 0 8px 22px -8px rgba(16, 132, 100, .75);
}
.swiper-hero-con-barra .btn-primary:hover,
.swiper-hero-vertical-con-barra .btn-primary:hover {
    filter: brightness(1.12);
}

/* ---------- Links ---------- */
a { color: var(--dumar-navy); }
a:hover { color: var(--dumar-green); }

/* ---------- Tarjetas de producto ---------- */
.card,
.producto-card,
.card-producto,
.item-producto {
    border-radius: 12px;
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover,
.producto-card:hover,
.card-producto:hover,
.item-producto:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 132, 100, .55);
    box-shadow: 0 14px 34px -16px rgba(0, 27, 69, .35);
}
.producto-card img,
.card-producto img {
    background: #fff;
    border-radius: 10px;
}
.badge-oferta, .badge-nuevo, .etiqueta-producto, .producto-etiqueta {
    background: linear-gradient(100deg, #0C6B51 0%, #108464 100%) !important;
    color: #fff !important;
    font-weight: 500;
    letter-spacing: .02em;
}
.precio, .producto-precio, .precio-producto {
    color: var(--dumar-navy);
    font-weight: 600;
}
.precio-anterior, .precio-tachado {
    color: var(--dumar-muted);
}

/* ---------- Bloque de categorías ---------- */
#divBloqueCategorias .card-img-top,
#divBloqueCategorias figure {
    background: #ffffff;
}

/* ---------- Bloque de marcas ---------- */
/* Los logos se muestran en el color principal, como en la tira de marcas del sitio.
   NO se usa un tinte plano (brightness(0) + invert): varios logos tienen texto calado
   en blanco (Kimberly-Clark, Fast Clean, Heavy Clean, Scott) y quedarían como manchas.
   En su lugar va un duotono: se pasa a gris y se remapea la rampa de luminancia para que
   el negro caiga en #002D72 y el blanco siga siendo blanco.
     G = 45/255  -> 0.176 + 0.824·L      B = 114/255 -> 0.447 + 0.553·L
   Si un navegador no soporta filtros SVG por data-URI, los logos quedan a color (fallback sano). */
#divBloqueMarcas img,
#divBloqueMarcas .swiper-slide img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='dumarDuotono' color-interpolation-filters='sRGB'><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='4' intercept='-3'/><feFuncG type='linear' slope='4' intercept='-3'/><feFuncB type='linear' slope='4' intercept='-3'/></feComponentTransfer><feColorMatrix type='matrix' values='1 0 0 0 0  0.824 0 0 0 0.176  0.553 0 0 0 0.447  0 0 0 1 0'/></filter></svg>#dumarDuotono");
}

/* El bloque corre como marquee (ver assets/ajax/bloques/marcas.php): la pista y su
   animación viven ahí. Acá solo el espaciado y el atenuado al pasar el mouse. */
#divBloqueMarcas .marcas-marquee {
    padding-bottom: 1.5rem;
}
#divBloqueMarcas .marcas-marquee-item {
    opacity: .88;
    transition: opacity .2s ease;
}
#divBloqueMarcas .marcas-marquee-item:hover {
    opacity: 1;
}

/* ---------- Franja de beneficios (banners) ---------- */
#divBloqueBanners .uil,
#divBloqueBeneficios .uil {
    color: var(--dumar-green);
}

/* ---------- Footer ---------- */
footer,
.pie-pagina,
.footer {
    background: var(--dumar-navy-deep) !important;
    color: #C3D5EA;
}
footer a, .pie-pagina a { color: #C3D5EA; }
/* Títulos del pie en el color secundario: el theme los pinta con --color-primario
   (navy), que sobre el pie navy queda ilegible. */
footer .footer-titulo,
footer .widget-title,
.pie-pagina .footer-titulo,
.pie-pagina .widget-title {
    color: var(--dumar-green) !important;
}
footer a:hover, footer a:hover i, footer a:hover span,
.pie-pagina a:hover, .pie-pagina a:hover i, .pie-pagina a:hover span {
    color: var(--dumar-green) !important;
}

/* ---------- Botones flotantes ---------- */
.boton-whatsapp, .boton-scroll-top {
    box-shadow: 0 6px 18px -4px rgba(0, 27, 69, .45) !important;
}

/* ---------- Scrollbar y selección ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--dumar-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--dumar-navy); border-radius: 8px; }
::selection { background: rgba(16, 132, 100, .22); color: var(--dumar-text); }

/* ---------- Newsletter ---------- */
/* El theme aplica `.image-wrapper{background: no-repeat center center}` +
   `background-attachment: fixed !important`: sin imagen el card queda claro y el
   texto blanco no se lee. Forzamos el degradé de marca en scroll. */
#divBloqueNewsletter .card,
#divBloqueNewsletter .card.image-wrapper {
    background: var(--dumar-grad) !important;
    background-attachment: scroll !important;
    border: none !important;
}
#divBloqueNewsletter .card-body .btn-primary {
    background: var(--dumar-grad-verde) !important;
}

/* ---------- Aire del contenido de las secciones con portada propia ----------
   Al sacar la portada del módulo Secciones, el contenedor queda con
   `mt-sm-12 pt-sm-0 pt-6` y el texto se pega al hero. Equivalente a
   `container mt-12 pt-6 pb-6` (mt-12 = 3.5rem · pt-6/pb-6 = 1.5rem). */
#divContenido.seccion-nosotros > .container,
#divContenido.seccion-servicios > .container {
    margin-top: 3.5rem !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Contacto: aire arriba y abajo del teléfono grande, que traía el contenido pegado */
#divContenido.seccion-contacto > .container {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
}
#divContenido.seccion-contacto .enlace-telefono-seccion {
    margin-top: .5rem;
    margin-bottom: 3.5rem !important;
}
#divContenido.seccion-contacto .div-texto-seccion {
    row-gap: 0 !important;
}

/* ---------- Quiénes somos ---------- */
/* Línea de tiempo (bloque modelo 17): el título de cada hito ya es el año, así que
   la etiqueta "Paso N" que agrega el bloque sobra. */
#divBloqueNuestrahistoria .bloque-timeline-etiqueta {
    display: none;
}
#divBloqueNuestrahistoria .bloque-timeline-item h3 {
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 1.9rem !important;
    font-weight: 700;
    color: var(--dumar-navy);
    line-height: 1;
}
#divBloqueNuestrahistoria .bloque-timeline-item h4 {
    color: var(--dumar-green) !important;
    font-weight: 600;
    margin-bottom: .5rem !important;
}
#divBloqueNuestrahistoria .bloque-timeline-imagen {
    max-width: 100%;
    box-shadow: 0 12px 30px -18px rgba(0, 27, 69, .55);
}

.bloque-timeline {
    position: relative;
    padding-left: 35px;
}

/* Valores: tarjetas parejas con su ícono arriba */
#divBloqueNuestrosvalores .row > div {
    margin-bottom: 2rem;
}
#divBloqueNuestrosvalores .row > div > h3,
#divBloqueNuestrosvalores .row > div > h4 {
    color: var(--dumar-navy);
    font-size: 1.15rem !important;
    margin-bottom: .5rem;
}
#divBloqueNuestrosvalores .bloque-item-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(16, 132, 100, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
}
#divBloqueNuestrosvalores .bloque-item-icono .uil {
    font-size: 1.6rem;
    color: var(--dumar-green);
    line-height: 1;
}

/* Visión / Calidad / Hogar Peques: filas alternadas texto+imagen */
#divBloqueCompromisoDumar figure img {
    border-radius: 12px;
    box-shadow: 0 18px 44px -24px rgba(0, 27, 69, .55);
}
#divBloqueCompromisoDumar h4 {
    color: var(--dumar-green) !important;
}

/* ---------- Secciones institucionales ---------- */
.img-logo-nosotros, .img-logo-contacto {
    width: 230px;
}

/* ============================================================
   Contraste en paneles oscuros (carrito + autocomplete del buscador).
   Patrón tomado de 3dproductos: mismos componentes sobre --color-secundario.
   ============================================================ */

#carritoMenu .text-white,
#carritoMenu p {
    color: #ffffff !important;
}
#carritoMenu h1, #carritoMenu h2, #carritoMenu h3,
#carritoMenu .link-light,
#carritoMenu .variante-light {
    color: #ffffff !important;
}
#carritoMenu i, #favoritosMenu i {
    color: #ffffff;
}
#carritoMenu .amount, #carritoMenu ins {
    color: var(--dumar-green) !important;
}
#carritoMenu del, #carritoMenu del span {
    color: #9FB3CC !important;
}
.number-picker-cart .input-group input {
    color: #ffffff !important;
}

.div-buscar-header .link-dark {
    color: #ffffff !important;
}
.div-buscar-header .text-muted,
#divSugerenciasBuscar .text-muted {
    color: #9FB3CC !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]) {
    border-color: #ffffff;
    background-color: var(--color-secundario);
    color: #ffffff;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover {
    border-color: var(--dumar-green) !important;
    color: var(--dumar-green) !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
    border-color: var(--dumar-green) !important;
    background-color: var(--dumar-green) !important;
    color: #ffffff !important;
}
.div-buscar-header .picker label[for*=radVariante] > span {
    color: #ffffff;
    padding: .3rem;
}
.div-buscar-header .picker label[for*=radVariante] > input:checked ~ span {
    background-color: var(--dumar-green);
    color: #ffffff;
}