/* ============================================================
   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 ---------- */
#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 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

#divContenido.seccion-nosotros > .container {
    margin-top: 3.5rem !important;
}

/* Servicios trae la portada mas alta: menos margen para no separarla del contenido. */
#divContenido.seccion-servicios > .container {
    margin-top: 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%;
}

.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;
}
/* Ícono de los ítems de bloque (modelo 5): círculo verde suave, en cualquier bloque */
.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;
}
.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;
}

/* ===== Estilos > Componentes ===== */

/* ---------- Carrito ---------- */

/* carrito|titulo_panel|normal|otro|#1f263c */
html body #carritoMenu .offcanvas-header h3:not(#\9):not(#\9),
html body #carritoMenu h3:not(#\9):not(#\9) {
	color: #1f263c !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* carrito|texto|normal|otro|#1f263c */
html body #carritoMenu:not(#\9):not(#\9),
html body #carritoMenu p:not(#\9):not(#\9),
html body #carritoMenu span:not(#\9):not(#\9),
html body #carritoMenu .text-white:not(#\9):not(#\9),
html body #carritoMenu .link-light:not(#\9):not(#\9) {
	color: #1f263c !important;
	-webkit-text-fill-color: currentColor !important;
	transition-property: color, background-color, border-color, -webkit-text-fill-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

/* ===== fin Estilos > Componentes ===== */


/* Subrayado de los enlaces del menu: text-decoration queda siempre pegado y
   centrado bajo el texto (un pseudo-elemento con left/bottom fijos se corria,
   porque el nav-link tiene padding distinto a cada lado y por breakpoint).
   Solo los enlaces del menu: los iconos de la derecha no llevan subrayado. */
.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    transition: text-decoration-color 0.25s ease, color 0.2s ease;
}

.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover,
.navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.active {
    text-decoration-color: var(--dumar-green);
}

.navbar.navbar-bg-color-secundario .navbar-other .nav-link,
.navbar.navbar-bg-color-secundario .navbar-other .nav-link:hover {
    text-decoration: none !important;
}

/* Buscador e inicio de sesion se apagan por parametro (MENU_MOSTRAR_BUSCAR y
   MENU_MOSTRAR_SESION en 0): son de la tienda, no del institucional. */

/* ====== FOOTER DE LAS INTERNAS CON EL LENGUAJE DE LA LANDING ====== */
footer.text-inverse {
    background: #0d1526 !important;
}

footer.text-inverse .footer-logo {
    height: 5rem;
    width: auto;
}

footer.text-inverse .footer-titulo {
    color: #e3e5e8 !important;
    font-weight: 700;
    font-size: 1rem;
}

footer.text-inverse a,
footer.text-inverse p,
footer.text-inverse li {
    color: rgba(227, 229, 232, 0.75);
}

footer.text-inverse a:hover {
    color: var(--dumar-green) !important;
}

footer.text-inverse .footer-hr {
    border-color: rgba(227, 229, 232, 0.15);
    opacity: 1;
}

/* =============================================================
   HOME INSTITUCIONAL
   -------------------------------------------------------------
   La home es 100% autoadministrable: cada seccion es un bloque del
   sistema y todo el contenido se edita desde el admin. El diseno
   vive aca, enganchado al id que `bloques.php` le da a cada seccion
   (`divBloque` + el nombre del bloque sin espacios).

   REGLA: si se renombra un bloque en el admin, cambia su id y estas
   reglas dejan de aplicar. Los nombres son parte del diseno.

   Convencion de los encabezados (vale para los modelos 3 y 5):
     blq_subtitulo  -> volanta  (el CSS la sube arriba del titulo)
     blq_titulo     -> titular
     blq_descripcion -> bajada
   ============================================================= */

body:has(#divBloqueCredenciales) {
    --in-navy: #002D72;
    --in-navy-deep: #001B45;
    --in-green: #108464;
    --in-green-claro: #4FD1A5;
    --in-ink: #0B1B33;
    --in-gris: #5A6B85;
    --in-fondo: #F4F6F9;
    --in-linea: #E1E7F0;
    --in-linea-oscura: rgba(255, 255, 255, .14);
}

/* ---- Ritmo vertical y ancho comun de todas las secciones de la home ---- */
/* OJO: el theme pega las secciones consecutivas de la home con
   `section.wrapper:not(#divPortadas) + section.wrapper { padding-top: 0 !important }`.
   Ese :not(#id) cuenta como un ID, asi que hace falta el prefijo del body
   (segundo ID) para ganarle. Cada cambio de color de fondo lleva aire arriba. */
body:has(#divBloqueCredenciales) #divBloqueEnfoque,
body:has(#divBloqueCredenciales) #divBloqueMetodologia,
body:has(#divBloqueCredenciales) #divBloqueCapacidades,
body:has(#divBloqueCredenciales) #divBloqueSectores,
body:has(#divBloqueCredenciales) #divBloqueHistoria,
body:has(#divBloqueCredenciales) #divBloqueCalidad,
body:has(#divBloqueCredenciales) #divBloqueCatalogo,
body:has(#divBloqueCredenciales) #divBloqueCierre {
    padding: 104px 0 !important;
}

body:has(#divBloqueCredenciales) #divBloqueEnfoque,
body:has(#divBloqueCredenciales) #divBloqueCapacidades,
body:has(#divBloqueCredenciales) #divBloqueHistoria,
body:has(#divBloqueCredenciales) #divBloqueCatalogo {
    background: #ffffff !important;
}

#divBloqueEnfoque > .container,
#divBloqueMetodologia > .container,
#divBloqueCapacidades > .container,
#divBloqueSectores > .container,
#divBloqueHistoria > .container,
#divBloqueCalidad > .container,
#divBloqueCatalogo > .container,
#divBloqueCierre > .container {
    max-width: 1240px;
    padding-left: 32px;
    padding-right: 32px;
}

/* Alternancia de fondos: gris en las pares, navy en Sectores. */
/* Sin Compromiso en la home, Catalogo pasa a blanco para no repetir el gris
   de Calidad dos veces seguidas. */
body:has(#divBloqueCredenciales) #divBloqueMetodologia,
body:has(#divBloqueCredenciales) #divBloqueCalidad {
    background: var(--in-fondo) !important;
}

/* ============================ ENCABEZADOS ============================ */
/* El theme los centra y pone la volanta debajo del titulo. Aca van a la
   izquierda, en dos columnas, y la volanta sube arriba de todo. */
#divBloqueEnfoque .row.text-center > .col-12,
#divBloqueMetodologia .row.text-center > .col-12,
#divBloqueCapacidades .row.text-center > .col-12,
#divBloqueSectores .row.text-center > .col-12,
#divBloqueHistoria .row.text-center > .col-12,
#divBloqueCalidad .row.text-center > .col-12,
#divBloqueCatalogo .row.text-center > .col-12,
#divBloqueCierre .row.text-center > .col-12 {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-column-gap: 80px;
    align-items: end;
    text-align: left;
}

/* La volanta (subtitulo del bloque) */
#divBloqueEnfoque .lead,
#divBloqueMetodologia .lead,
#divBloqueCapacidades .lead,
#divBloqueSectores .lead,
#divBloqueHistoria .lead,
#divBloqueCalidad .lead,
#divBloqueCatalogo .lead,
#divBloqueCierre .lead {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--in-green);
    margin: 0 0 16px 0 !important;
    line-height: 1.3;
}

/* La linea corta que antecede a la volanta */
#divBloqueEnfoque .lead::before,
#divBloqueMetodologia .lead::before,
#divBloqueSectores .lead::before,
#divBloqueHistoria .lead::before,
#divBloqueCalidad .lead::before,
#divBloqueCatalogo .lead::before,
#divBloqueCierre .lead::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    flex: 0 0 auto;
    border-radius: 2px;
}

/* El titular */
#divBloqueEnfoque .display-4,
#divBloqueMetodologia .display-4,
#divBloqueCapacidades .display-4,
#divBloqueSectores .display-4,
#divBloqueHistoria .display-4,
#divBloqueCalidad .display-4,
#divBloqueCatalogo .display-4,
#divBloqueCierre .display-4 {
    grid-column: 1;
    grid-row: 2;
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: clamp(30px, 3.4vw, 46px) !important;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
    color: var(--in-navy);
    margin: 0 !important;
}

/* La bajada (descripcion del bloque), a la derecha del titular */
#divBloqueEnfoque .row.text-center > .col-12 > p:not(.lead),
#divBloqueMetodologia .row.text-center > .col-12 > p:not(.lead),
#divBloqueCapacidades .row.text-center > .col-12 > p:not(.lead),
#divBloqueSectores .row.text-center > .col-12 > p:not(.lead),
#divBloqueHistoria .row.text-center > .col-12 > p:not(.lead),
#divBloqueCalidad .row.text-center > .col-12 > p:not(.lead),
#divBloqueCatalogo .row.text-center > .col-12 > p:not(.lead),
#divBloqueCierre .row.text-center > .col-12 > p:not(.lead) {
    grid-column: 2;
    grid-row: 2;
    font-size: 16px;
    color: var(--in-gris);
    margin: 0 0 8px 0;
    line-height: 1.65;
}

/* Capacidades: encabezado centrado, sin volanta. */
#divBloqueCapacidades .row.text-center > .col-12 {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

#divBloqueCapacidades .display-4 {
    grid-row: 1;
    max-width: 22ch;
}

#divBloqueCapacidades .row.text-center > .col-12 > p:not(.lead) {
    grid-column: 1;
    grid-row: 2;
    max-width: 62ch;
    margin-top: 20px;
    text-align: center;
}

/* ====================== MODELO 3: TEXTO + FOTO ====================== */
#divBloqueEnfoque .row.gx-lg-0,
#divBloqueCalidad .row.gx-lg-0,
#divBloqueCatalogo .row.gx-lg-0 {
    margin-top: 56px !important;
    margin-bottom: 0 !important;
    align-items: center !important;
    --bs-gutter-y: 44px;
}

/* El theme empuja las columnas con mt-lg-8 / mt-lg-15: se anula solo en
   desktop, donde van lado a lado. En mobile (apiladas) el margen es el aire
   entre la foto y el texto. */
@media (min-width: 992px) {
    #divBloqueEnfoque .row.gx-lg-0 > div,
    #divBloqueCalidad .row.gx-lg-0 > div,
    #divBloqueCatalogo .row.gx-lg-0 > div {
        margin-top: 0 !important;
    }
}

@media (max-width: 991.98px) {
    #divBloqueEnfoque .row.gx-lg-0,
    #divBloqueCalidad .row.gx-lg-0,
    #divBloqueCatalogo .row.gx-lg-0 {
        margin-top: 28px !important;
    }
    #divBloqueEnfoque .row.gx-lg-0 > div:first-child,
    #divBloqueCalidad .row.gx-lg-0 > div:first-child,
    #divBloqueCatalogo .row.gx-lg-0 > div:first-child {
        margin-top: 0 !important;
    }
    #divBloqueEnfoque .row.gx-lg-0 > div + div,
    #divBloqueCalidad .row.gx-lg-0 > div + div,
    #divBloqueCatalogo .row.gx-lg-0 > div + div {
        margin-top: 32px !important;
    }
}

#divBloqueEnfoque figure.rounded,
#divBloqueCalidad figure.rounded,
#divBloqueCatalogo figure.rounded {
    margin: 0;
}

#divBloqueEnfoque figure.rounded img,
#divBloqueCalidad figure.rounded img,
#divBloqueCatalogo figure.rounded img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
}

/* La columna de texto del modelo 3 */
#divBloqueEnfoque .row.gx-lg-0 .display-5,
#divBloqueCalidad .row.gx-lg-0 .display-5,
#divBloqueCatalogo .row.gx-lg-0 .display-5 {
    display: none; /* el titular ya esta en el encabezado del bloque */
}

#divBloqueEnfoque .row.gx-lg-0 p,
#divBloqueCalidad .row.gx-lg-0 p,
#divBloqueCatalogo .row.gx-lg-0 p {
    font-size: 16px;
    color: var(--in-gris);
    line-height: 1.7;
}

/* Lista de puntos dentro de la descripcion */
.bloque-puntos {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bloque-puntos li {
    position: relative;
    display: block !important;
    padding: 15px 0 15px 30px !important;
    margin: 0 !important;
    border-top: 1px solid var(--in-linea);
    font-size: 15px;
    color: var(--in-ink);
    line-height: 1.6;
}

/* El tilde lo agrega estilizarTextoHTML (<span><i class="uil uil-check">).
   El theme lo dibuja como burbuja gris absoluta (.icon-list.bullet-bg i):
   aca va suelto, en verde, anclado a la izquierda del texto. */
.bloque-puntos li > span:first-child {
    position: absolute !important;
    left: 0;
    top: 17px;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bloque-puntos li > span:first-child i {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    background: none !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--in-green) !important;
}

.bloque-puntos li:last-child {
    border-bottom: 0;
}

.bloque-puntos li strong {
    color: var(--in-navy);
    font-weight: 600;
}

/* Botones de los componentes */
#divBloqueEnfoque .btn-primary,
#divBloqueCatalogo .btn-primary,
#divBloqueCierre .btn-primary {
    background: var(--in-green) !important;
    border-color: var(--in-green) !important;
    border-radius: 6px !important;
    height: 52px;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(16, 132, 100, .8);
    margin-top: 30px !important;
}

#divBloqueEnfoque .btn-primary:hover,
#divBloqueCatalogo .btn-primary:hover,
#divBloqueCierre .btn-primary:hover {
    background: #0C6B51 !important;
    border-color: #0C6B51 !important;
    filter: none !important;
    box-shadow: 0 10px 24px -12px rgba(16, 132, 100, .8) !important;
    transform: translateY(-2px);
}

/* ================= MODELO 5: GRILLAS DE COMPONENTES ================= */
#divBloqueMetodologia .pricing-wrapper > .row,
#divBloqueCapacidades .pricing-wrapper > .row,
#divBloqueSectores .pricing-wrapper > .row,
#divBloqueHistoria .pricing-wrapper > .row,
#divBloqueCierre .pricing-wrapper > .row {
    margin-top: 54px !important;
}

/* Cada item es una grilla: icono y titulo en la misma fila, descripcion abajo
   a todo el ancho. */
#divBloqueMetodologia .pricing-wrapper > .row > div,
#divBloqueCapacidades .pricing-wrapper > .row > div,
#divBloqueSectores .pricing-wrapper > .row > div {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-column-gap: 14px;
    align-items: center;
    align-content: start;
}

#divBloqueMetodologia .pricing-wrapper > .row > div > *,
#divBloqueCapacidades .pricing-wrapper > .row > div > *,
#divBloqueSectores .pricing-wrapper > .row > div > * {
    grid-column: 1 / -1;
}

/* El circulo del icono que emite el modelo 5 */
#divBloqueMetodologia .bloque-item-icono,
#divBloqueCapacidades .bloque-item-icono,
#divBloqueSectores .bloque-item-icono,
#divBloqueCierre .bloque-item-icono {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 132, 100, .1);
    margin: 0;
}

#divBloqueMetodologia .pricing-wrapper > .row > div > .bloque-item-icono,
#divBloqueCapacidades .pricing-wrapper > .row > div > .bloque-item-icono,
#divBloqueSectores .pricing-wrapper > .row > div > .bloque-item-icono {
    grid-column: 1;
}

#divBloqueMetodologia .pricing-wrapper > .row > div > .bloque-item-icono + h4,
#divBloqueCapacidades .pricing-wrapper > .row > div > .bloque-item-icono + h4,
#divBloqueSectores .pricing-wrapper > .row > div > .bloque-item-icono + h4 {
    grid-column: 2;
    margin: 0 !important;
}

#divBloqueMetodologia .pricing-wrapper > .row > div > p,
#divBloqueCapacidades .pricing-wrapper > .row > div > p,
#divBloqueSectores .pricing-wrapper > .row > div > p {
    margin-top: 14px !important;
}

#divBloqueMetodologia .bloque-item-icono i,
#divBloqueCapacidades .bloque-item-icono i,
#divBloqueSectores .bloque-item-icono i,
#divBloqueCierre .bloque-item-icono i {
    font-size: 23px;
    color: var(--in-green);
    line-height: 1;
}

#divBloqueMetodologia h4,
#divBloqueCapacidades h4,
#divBloqueSectores h4,
#divBloqueHistoria h4,
#divBloqueCierre h4 {
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 18px !important;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--in-navy);
    margin: 0 0 10px 0 !important;
}

#divBloqueMetodologia p,
#divBloqueCapacidades p,
#divBloqueSectores p,
#divBloqueHistoria p,
#divBloqueCierre p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--in-gris);
    margin: 0;
}

/* ------- Metodologia: linea de proceso con los pasos numerados ------- */
#divBloqueMetodologia .pricing-wrapper > .row {
    border-top: 2px solid var(--in-navy);
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

#divBloqueMetodologia .pricing-wrapper > .row > div {
    width: auto !important;
    max-width: none !important;
}

#divBloqueMetodologia .pricing-wrapper > .row > div {
    position: relative;
    padding: 30px 26px 34px 26px;
}

#divBloqueMetodologia .pricing-wrapper > .row > div:first-child {
    padding-left: 0;
}

/* El punto sobre la linea marca el avance del proceso */
#divBloqueMetodologia .pricing-wrapper > .row > div::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 26px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--in-navy);
}

#divBloqueMetodologia .pricing-wrapper > .row > div:first-child::before {
    left: 0;
}

/* El numero del paso viaja en el subtitulo del componente (.meta) */
#divBloqueMetodologia .meta {
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--in-green);
    margin: 0 0 12px 0 !important;
    order: -1;
}

#divBloqueMetodologia .meta {
    grid-column: 1 / -1;
    grid-row: 1;
}

#divBloqueMetodologia .pricing-wrapper > .row > div {
    grid-template-columns: 38px 1fr;
}

#divBloqueMetodologia .bloque-item-icono {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

#divBloqueMetodologia .bloque-item-icono i {
    font-size: 19px;
}

/* ---------------- Sectores: tabla tecnica sobre navy ---------------- */
body:has(#divBloqueCredenciales) #divBloqueSectores {
    background: var(--in-navy-deep) !important;
}

#divBloqueSectores .display-4 {
    color: #ffffff;
}

#divBloqueSectores .lead {
    color: var(--in-green-claro);
}

#divBloqueSectores .row.text-center > .col-12 > p:not(.lead) {
    color: rgba(255, 255, 255, .72);
}

/* Las celdas se separan con el fondo, no con bordes: una sola linea
   entre dos celdas, como una tabla tecnica. */
#divBloqueSectores .pricing-wrapper > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    gap: 1px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--in-linea-oscura);
    border: 1px solid var(--in-linea-oscura);
}

#divBloqueSectores .pricing-wrapper > .row > div {
    width: auto !important;
    max-width: none !important;
    background: var(--in-navy-deep);
    padding: 34px 32px 38px !important;
    transition: background-color .25s ease;
}

#divBloqueSectores .pricing-wrapper > .row > div:hover {
    background: #04255B;
}

#divBloqueSectores h4 {
    color: #ffffff;
}

#divBloqueSectores p {
    color: rgba(255, 255, 255, .62);
}

#divBloqueSectores .bloque-item-icono {
    background: rgba(79, 209, 165, .12);
}

#divBloqueSectores .bloque-item-icono i {
    color: var(--in-green-claro);
}

/* ---- Historia enlace: bloque aparte (modelo 2) solo con el boton, que se
   pega debajo de Historia como si fuera parte del mismo bloque. ---- */
body:has(#divBloqueCredenciales) #divBloqueHistoria {
    padding-bottom: 44px !important;
}

body:has(#divBloqueCredenciales) #divBloqueHistoriaenlace {
    padding: 0 0 104px !important;
    background: #ffffff !important;
}

#divBloqueHistoriaenlace > .container {
    max-width: 1240px;
    padding-left: 32px;
    padding-right: 32px;
}

#divBloqueHistoriaenlace .row {
    margin-bottom: 0 !important;
}

#divBloqueHistoriaenlace .row > div:first-child {
    position: static !important;
    top: auto !important;
    flex: 0 0 100%;
    max-width: 100%;
}

#divBloqueHistoriaenlace .btn-primary {
    background: transparent !important;
    border: 1px solid rgba(0, 45, 114, .3) !important;
    color: var(--in-navy) !important;
    border-radius: 6px !important;
    height: 52px;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    margin: 0 !important;
    box-shadow: none;
}

#divBloqueHistoriaenlace .btn-primary:hover {
    border-color: var(--in-navy) !important;
    background: rgba(0, 45, 114, .05) !important;
}

/* -------------------- Historia: hitos con archivo -------------------- */
#divBloqueHistoria .pricing-wrapper > .row {
    --bs-gutter-x: 30px;
}

#divBloqueHistoria figure.rounded {
    margin: 0 0 18px 0;
}

#divBloqueHistoria figure.rounded img {
    width: 100%;
    height: 168px;
    object-fit: contain;
    padding: 10px;
    background: #ffffff;
    border-radius: 14px;
}

/* El ano viaja en el subtitulo del componente */
#divBloqueHistoria .meta {
    font-family: "Raleway", sans-serif;
    font-size: 34px !important;
    font-weight: 800;
    color: var(--in-navy);
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0 0 12px 0 !important;
    order: -1;
}

#divBloqueHistoria .pricing-wrapper > .row > div {
    display: flex;
    flex-direction: column;
}

#divBloqueHistoria figure.rounded {
    order: -2;
}

/* ------------------ Cierre: CTA + datos de contacto ------------------ */
body:has(#divBloqueCredenciales) #divBloqueCierre {
    background: linear-gradient(100deg, #002D72 0%, #108464 100%) !important;
    padding: 96px 0 !important;
}

#divBloqueCierre .display-4,
#divBloqueCierre h4 {
    color: #ffffff;
}

#divBloqueCierre .lead {
    color: rgba(255, 255, 255, .75);
}

#divBloqueCierre .row.text-center > .col-12 > p:not(.lead) {
    color: rgba(255, 255, 255, .85);
}

#divBloqueCierre p {
    color: rgba(255, 255, 255, .78);
}

#divBloqueCierre .bloque-item-icono {
    background: rgba(255, 255, 255, .14);
}

#divBloqueCierre .bloque-item-icono i {
    color: #ffffff;
}

/* Los datos de contacto como una fila de fichas con filete */
#divBloqueCierre .pricing-wrapper > .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    gap: 1px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .22);
    margin-top: 48px !important;
}

#divBloqueCierre .pricing-wrapper > .row > div {
    width: auto !important;
    max-width: none !important;
    background: rgba(0, 27, 69, .28);
    padding: 26px 24px 30px !important;
}

#divBloqueCierre h4 {
    font-size: 12px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 6px !important;
}

#divBloqueCierre .row.text-center > .col-12 > p:not(.lead) {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, .85);
}

/* Los dos botones del CTA viven en la descripcion del bloque */
#divBloqueCierre .row.text-center > .col-12 > p:has(.btn) {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

#divBloqueCierre .btn-outline-primary {
    border-radius: 6px !important;
    height: 52px;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    background: transparent !important;
    border-color: rgba(255, 255, 255, .5) !important;
    color: #ffffff !important;
    margin-top: 30px !important;
}

#divBloqueCierre .btn-outline-primary:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: #ffffff !important;
}

/* ============= CREDENCIALES: la franja de datos del hero ============= */
/* Cuatro fichas con el icono grande a la izquierda y el dato a la derecha,
   separadas por filete, sobre un navy con un filo verde arriba. */
body:has(#divBloqueCredenciales) #divBloqueCredenciales {
    background: linear-gradient(180deg, #002458 0%, #001B45 100%) !important;
    border-top: 3px solid var(--in-green);
    padding: 0 !important;
    position: relative;
    z-index: 3;
}

#divBloqueCredenciales > .container {
    max-width: 1240px;
    padding: 0 32px !important;
}

/* Cuatro columnas fijas con filete: no es un carrusel, es una franja. */
#divBloqueCredenciales .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    transform: none !important;
}

#divBloqueCredenciales .swiper-slide,
#divBloqueCredenciales .swiper-slide > div {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

#divBloqueCredenciales .swiper-slide {
    /* Swiper le clava width y margin-right inline a cada slide. */
    width: 100% !important;
    margin: 0 !important;
    justify-self: stretch;
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-column-gap: 18px;
    align-items: start;
    padding: 34px 28px 34px 0;
    border-right: 1px solid var(--in-linea-oscura);
}

#divBloqueCredenciales .swiper-slide:not(:first-child) {
    padding-left: 28px;
}

#divBloqueCredenciales .swiper-slide:last-child {
    border-right: 0;
}

#divBloqueCredenciales .banner-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 209, 165, .12);
    border: 1px solid rgba(79, 209, 165, .28);
    font-size: 26px;
    color: var(--in-green-claro);
    margin: 0;
    line-height: 1;
}

#divBloqueCredenciales h4 {
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 27px !important;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 4px 0 6px 0 !important;
}

#divBloqueCredenciales p {
    font-size: 13.5px !important;
    color: rgba(255, 255, 255, .64);
    line-height: 1.5;
    margin: 0 !important;
}

/* El swiper del theme trae paginacion y flechas: en una franja sobran. */
#divBloqueCredenciales .swiper-pagination,
#divBloqueCredenciales .swiper-navigation,
#divBloqueCredenciales .swiper-button-prev,
#divBloqueCredenciales .swiper-button-next {
    display: none !important;
}

/* ==================== DISTRIBUIDORES: los logos ==================== */
#divBloqueDistribuidores {
    background: #ffffff !important;
    border-bottom: 1px solid var(--in-linea);
}

body:has(#divBloqueCredenciales) #divBloqueDistribuidores {
    padding: 44px 0 40px !important;
}

#divBloqueDistribuidores > .container {
    max-width: 1240px;
    padding: 0 32px !important;
}

#divBloqueDistribuidores .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Titulo centrado, del mismo peso que los titulares de las secciones pero en
   una escala menor: es la franja de logos, no una seccion de texto. */
#divBloqueDistribuidores .display-4 {
    display: block;
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 28px !important;
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--in-navy) !important; /* el bloque le pone text-dark */
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
}

#divBloqueDistribuidores .display-4::before {
    display: none;
}

#divBloqueDistribuidores .marcas-marquee-item img {
    height: 52px !important;
    opacity: .78;
    /* Duotono: la tinta cae en #002D72 y los calados blancos se conservan. */
    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");
}

#divBloqueDistribuidores .marcas-marquee-item:hover img {
    opacity: 1;
}

/* El bloque enlaza cada logo a productos/marca/<slug>: en el institucional no
   hay catalogo y eso es un listado vacio. Los logos no son clickeables. */
#divBloqueDistribuidores .marcas-marquee-item {
    pointer-events: none;
}

/* ========================= HERO (Portadas) ========================= */
/* Los botones del hero son los mismos que los del cierre: el primero verde
   solido, el segundo en linea blanca. El custom heredado de la tienda les
   ponia degrade y sombra verde (.swiper-hero-con-barra .btn-primary): se pisa. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill {
    border-radius: 6px !important;
    height: 52px;
    padding: 0 28px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    margin-right: 14px;
    background-image: none !important;
    background-color: var(--in-green) !important;
    border: 1px solid var(--in-green) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px -12px rgba(16, 132, 100, .8) !important;
    filter: none !important;
    transform: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill:hover {
    background-color: #0C6B51 !important;
    border-color: #0C6B51 !important;
    filter: none !important;
    transform: translateY(-2px);
}

/* El segundo boton de cada slide va en linea, sin relleno ni sombra. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill + .btn.rounded-pill {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, .5) !important;
    box-shadow: none !important;
}

body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill + .btn.rounded-pill:hover {
    background-color: rgba(255, 255, 255, .12) !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    transform: none;
}

/* Tamanos de los tres textos de la portada. */
body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-pequeno {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: 18px !important;
}

body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande {
    font-family: "Raleway", "Poppins", sans-serif !important;
    font-size: clamp(38px, 4.9vw, 66px) !important;
    font-weight: 800 !important;
    letter-spacing: -.022em;
    line-height: 1.04 !important;
    margin-bottom: 22px !important;
}

body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-normal {
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
}

/* El contenido del hero se alinea a la izquierda (el theme lo centra). */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .col-12 {
    text-align: left !important;
    margin-left: 0 !important;
}
body:has(#divBloqueCredenciales) .swiper-hero,
body:has(#divBloqueCredenciales) .swiper-hero .swiper,
body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide {
    min-height: 100vh;
    min-height: 100svh;
}

body:has(#divBloqueCredenciales) .swiper-hero .swiper-content {
    max-width: 1240px;
    padding-left: 32px;
    padding-right: 32px;
    /* La barra va montada sobre la foto: el contenido arranca debajo. */
    padding-top: 96px;
}

/* El texto del hero ocupa media pantalla: del otro lado se ve la foto. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div {
    max-width: 56%;
    padding-bottom: 84px;
}

/* Los componentes de la portada, en orden: volanta, titular, bajada. */
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content h1,
body:has(#divBloqueCredenciales) .swiper-hero .swiper-content h2 {
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: clamp(38px, 5vw, 68px) !important;
    font-weight: 800 !important;
    letter-spacing: -.022em;
    line-height: 1.03 !important;
    margin-bottom: 24px !important;
}

@media (max-width: 991.98px) {
    body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div {
        max-width: 100%;
        padding-bottom: 40px;
    }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1199.98px) {
    #divBloqueMetodologia .pricing-wrapper > .row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    body:has(#divBloqueCredenciales) #divBloqueEnfoque,
    body:has(#divBloqueCredenciales) #divBloqueMetodologia,
    body:has(#divBloqueCredenciales) #divBloqueCapacidades,
    body:has(#divBloqueCredenciales) #divBloqueSectores,
    body:has(#divBloqueCredenciales) #divBloqueHistoria,
    body:has(#divBloqueCredenciales) #divBloqueCalidad,
    body:has(#divBloqueCredenciales)     body:has(#divBloqueCredenciales) #divBloqueCatalogo,
    body:has(#divBloqueCredenciales) #divBloqueCierre {
        padding: 64px 0 !important;
    }

    #divBloqueEnfoque > .container,
    #divBloqueMetodologia > .container,
    #divBloqueCapacidades > .container,
    #divBloqueSectores > .container,
    #divBloqueHistoria > .container,
    #divBloqueCalidad > .container,
        #divBloqueCatalogo > .container,
    #divBloqueCierre > .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Encabezados a una columna */
    #divBloqueEnfoque .row.text-center > .col-12,
    #divBloqueMetodologia .row.text-center > .col-12,
    #divBloqueCapacidades .row.text-center > .col-12,
    #divBloqueSectores .row.text-center > .col-12,
    #divBloqueHistoria .row.text-center > .col-12,
    #divBloqueCalidad .row.text-center > .col-12,
        #divBloqueCatalogo .row.text-center > .col-12,
    #divBloqueCierre .row.text-center > .col-12 {
        grid-template-columns: 1fr;
    }

    #divBloqueEnfoque .row.text-center > .col-12 > p:not(.lead),
    #divBloqueMetodologia .row.text-center > .col-12 > p:not(.lead),
    #divBloqueCapacidades .row.text-center > .col-12 > p:not(.lead),
    #divBloqueSectores .row.text-center > .col-12 > p:not(.lead),
    #divBloqueHistoria .row.text-center > .col-12 > p:not(.lead),
    #divBloqueCalidad .row.text-center > .col-12 > p:not(.lead),
        #divBloqueCatalogo .row.text-center > .col-12 > p:not(.lead),
    #divBloqueCierre .row.text-center > .col-12 > p:not(.lead) {
        grid-column: 1;
        grid-row: 3;
        margin-top: 20px;
    }

    #divBloqueSectores .pricing-wrapper > .row {
        grid-template-columns: repeat(2, 1fr);
    }

    #divBloqueCierre .row.text-center > .col-12 > p:has(.btn) {
        grid-row: 4;
        margin-top: 10px;
    }

    #divBloqueCredenciales {
        margin-top: 0;
    }

    #divBloqueCredenciales .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    #divBloqueCredenciales .swiper-slide:nth-child(2n) {
        border-right: 0;
    }

    #divBloqueCredenciales .swiper-slide {
        border-bottom: 1px solid var(--in-linea-oscura);
    }

    #divBloqueCredenciales .swiper-slide:nth-child(n+3) {
        border-bottom: 0;
    }

    /* Fotos apaisadas cuando el bloque se apila a una columna */
    #divBloqueEnfoque figure.rounded img,
    #divBloqueCalidad figure.rounded img,
        #divBloqueCatalogo figure.rounded img {
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 767.98px) {
    #divBloqueMetodologia .pricing-wrapper > .row {
        grid-template-columns: 1fr;
        border-top: 0;
    }
    #divBloqueMetodologia .pricing-wrapper > .row > div,
    #divBloqueMetodologia .pricing-wrapper > .row > div:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--in-linea);
        padding: 26px 0 26px 26px;
    }

    #divBloqueMetodologia .pricing-wrapper > .row > div::before,
    #divBloqueMetodologia .pricing-wrapper > .row > div:first-child::before {
        left: 0;
        top: 32px;
    }
    #divBloqueMetodologia .pricing-wrapper > .row > div:last-child {
        border-bottom: 0;
    }

    #divBloqueSectores .pricing-wrapper > .row,
    #divBloqueCierre .pricing-wrapper > .row,
    #divBloqueCredenciales .swiper-wrapper {
        grid-template-columns: 1fr;
    }

    #divBloqueCredenciales .swiper-slide,
    #divBloqueCredenciales .swiper-slide:nth-child(n+3) {
        border-right: 0 !important;
        border-bottom: 1px solid var(--in-linea-oscura);
        padding-left: 0 !important;
        padding-top: 22px;
        padding-bottom: 22px;
    }
    #divBloqueCredenciales .swiper-slide:last-child {
        border-bottom: 0;
    }
}


/* =============================================================
   HEADER Y FOOTER DEL THEME EN CLAVE INSTITUCIONAL
   ============================================================= */

/* ---- Colores y medidas del menu flotante (MENU_ESTILO = flotante) ----
   El comportamiento (pastilla fija, blur, despliegue en el lugar, variante
   sobre portada) es del sistema: assets/css/menu-flotante.css. Aca solo la
   paleta de Dumar. */
:root {
    --mf-top: 20px;
    --mf-ancho: 1400px;
    --mf-radio: 1rem;
    --mf-blur: 32px;
    --mf-sombra: 0 20px 40px -12px rgba(0, 27, 69, .18);

    --mf-fondo: rgba(255, 255, 255, .78);
    --mf-borde: rgba(0, 27, 69, .08);
    --mf-texto: #002D72;
    --mf-texto-hover: #108464;

    --mf-fondo-portada: rgba(0, 27, 69, .22);
    --mf-borde-portada: rgba(255, 255, 255, .16);
    --mf-texto-portada: #ffffff;
    --mf-texto-hover-portada: #4FD1A5;
}

/* Sobre la foto el logo va en su version blanca. */
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-brand img {
    content: url('../../../img/dumarweb/logo-white.png');
}

/* El subrayado de los enlaces acompana el color de cada variante. */
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover,
.navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-collapse .navbar-nav > .nav-item > .nav-link.active {
    text-decoration-color: #4FD1A5;
}

/* La hamburguesa se pinta con el color de la variante (el custom heredado la
   fijaba en navy). */
.navbar.navbar-flotante .hamburger span,
.navbar.navbar-flotante .hamburger:before,
.navbar.navbar-flotante .hamburger:after {
    background-color: currentColor !important;
}

/* ---- Tipografia y medidas del navbar (vale para todo el sitio) ---- */
.navbar.navbar-bg-color-secundario .navbar-nav .nav-link {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .002em;
}

.navbar.navbar-bg-color-secundario .navbar-brand img {
    height: 45px !important;
    width: auto !important;
    max-height: none;
    padding: 5px 10px 5px 0px !important;
}

.navbar.navbar-bg-color-secundario li.login .nav-link i,
.navbar.navbar-bg-color-secundario li.logout .nav-link i,
.navbar.navbar-bg-color-secundario .navbar-other i {
    font-size: 21px !important;
    line-height: 1;
}

.navbar.navbar-bg-color-secundario .badge-login {
    font-size: 10px !important;
}

/* ---- FOOTER ----
   El pie del theme trae logo + Legales + Seguinos. Se lo lleva al mismo
   lenguaje de la landing: navy profundo, hairlines y una bajada
   institucional debajo del logo. */
footer.text-inverse {
    background: #001B45 !important;
}

footer.text-inverse .container {
    padding-top: 56px !important;
    padding-bottom: 20px !important;
    max-width: 1240px;
}

footer.text-inverse .footer-logo {
    height: 54px;
    width: auto;
    margin-bottom: 0 !important;
}

/* Bajada institucional bajo el logo, como en la landing. */
footer.text-inverse .footer-desktop .widget a:has(> .footer-logo)::after {
    content: "Dumar S.R.L. Proveedor integral de higiene profesional para industria, salud, hoteler\0000eda y consorcios. Col\0000f3n 2919, Rosario, Santa Fe. Desde 1965.";
    display: block;
    max-width: 320px;
    margin-top: 18px;
    font-family: "Poppins", "Manrope", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(227, 233, 242, .62);
}

footer.text-inverse .footer-titulo,
footer.text-inverse .widget-title {
    font-family: "Poppins", "Manrope", system-ui, sans-serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95) !important;
    margin-bottom: 18px !important;
}

footer.text-inverse a,
footer.text-inverse p,
footer.text-inverse li {
    font-family: "Poppins", "Manrope", system-ui, sans-serif;
    font-size: 14px;
    color: rgba(227, 233, 242, .68);
}

footer.text-inverse .widget li {
    margin-bottom: 10px;
}

footer.text-inverse a:hover,
footer.text-inverse a:hover i,
footer.text-inverse a:hover span {
    color: #4FD1A5 !important;
}

footer.text-inverse .footer-hr {
    border-color: rgba(255, 255, 255, .12);
    opacity: 1;
    margin-top: 12px;
    margin-bottom: 24px;
}

/* La columna del logo ocupa la mitad; Legales y Seguinos van a la derecha,
   no apiladas contra el logo. */
/* Cuatro columnas: logo | mapa | datos de la casa central | Legales. El mapa y
   los datos salen del modulo Puntos de venta (parametros del pie). */
@media (min-width: 768px) {
    footer.text-inverse .footer-desktop {
        display: grid !important;
        grid-template-columns: 1fr 1.9fr .8fr;
        grid-column-gap: 44px;
        align-items: start;
    }
}

footer.text-inverse .footer-desktop > div {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

footer.text-inverse .footer-desktop > .col-lg-3:first-child {
    grid-column: 1;
}

/* la columna del punto de venta: mapa a la izquierda, datos a la derecha */
footer.text-inverse .footer-desktop > .col-auto {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 28px;
    align-items: start;
}

footer.text-inverse .footer-desktop > .col-md-3 {
    grid-column: 3;
}

footer.text-inverse .footer-desktop > .col-12,
footer.text-inverse .footer-desktop > .d-flex,
footer.text-inverse .footer-desktop > .pie-pagina {
    grid-column: 1 / -1;
}

footer.text-inverse .puntos-venta-footer-mapa {
    order: -1;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0;
    height: 190px !important;
    position: relative;
}

footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
}

footer.text-inverse .puntos-venta-footer-mapa iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    filter: saturate(.85);
}

/* en el bloque mobile del pie, el mapa va abajo de los datos, apaisado */
footer.text-inverse .footer-mobile .puntos-venta-footer-mapa {
    margin: 12px 0 24px !important;
    height: 170px !important;
}

footer.text-inverse ul.puntos-venta-footer {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer.text-inverse ul.puntos-venta-footer li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 9px 0 !important;
    padding: 0;
    font-size: 14px;
    color: rgba(227, 233, 242, .72);
    line-height: 1.5;
}

/* el theme (.icon-list) hace absolutos los iconos y se pisan con el texto */
footer.text-inverse ul.puntos-venta-footer li i {
    position: static !important;
    color: #4FD1A5;
    font-size: 17px !important;
    line-height: 1.4;
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

footer.text-inverse ul.puntos-venta-footer li > a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

footer.text-inverse ul.puntos-venta-footer li > span:only-child {
    padding-left: 27px;
}

footer.text-inverse ul.puntos-venta-footer li span,
footer.text-inverse ul.puntos-venta-footer li a,
footer.text-inverse ul.puntos-venta-footer li strong {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(227, 233, 242, .82);
}

footer.text-inverse ul.puntos-venta-footer .footer-titulo {
    margin-bottom: 14px !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    footer.text-inverse .footer-desktop {
        grid-template-columns: 1fr;
        grid-row-gap: 36px;
    }
    footer.text-inverse .footer-desktop > .col-lg-3:first-child,
    footer.text-inverse .footer-desktop > .col-auto,
    footer.text-inverse .footer-desktop > .col-md-3 {
        grid-column: 1;
    }
}

/* Iconos de redes: circulo de linea en vez de glifos sueltos. */
footer.text-inverse .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: rgba(255, 255, 255, .8);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

footer.text-inverse .social a:hover {
    border-color: #4FD1A5;
    background: rgba(79, 209, 165, .12);
}

footer.text-inverse .social {
    gap: 10px !important;
}

footer.text-inverse .pie-pagina,
footer.text-inverse .pie-pagina p,
footer.text-inverse .core-devs {
    font-size: 13px;
    color: rgba(227, 233, 242, .55);
}

footer.text-inverse .pie-pagina {
    gap: 8px;
}

/* La portada de seccion mide 554px: con la pastilla encima hace falta un poco
   mas de alto para que la foto respire por debajo. */
body:not(:has(#divBloqueCredenciales)) #swiperPortadasHorizontal,
body:not(:has(#divBloqueCredenciales)) #swiperPortadasHorizontal .swiper,
body:not(:has(#divBloqueCredenciales)) #swiperPortadasHorizontal .swiper-slide {
    min-height: 620px;
}

/* Quienes somos: la portada ocupa toda la pantalla, como el hero de la home. */
body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal,
body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal .swiper,
body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal .swiper-slide {
    min-height: 100vh;
    min-height: 100svh;
}

/* Sin portada: el generico ya deja la pastilla + 40px de aire; el contenedor
   de la seccion suma un poco mas para que el titulo respire igual en todas
   (Contacto traia 60px de padding, Novedades 30). */
body.mf-sin-hero #divContenido > .container {
    padding-top: 36px !important;
}

/* ---------- Contacto: "Tambien podes escribirnos para" ----------
   Marcado limpio en la descripcion de la seccion (sin estilos inline): una
   franja blanca con filetes, el titulo a la izquierda y los tres motivos con
   el icono en un cuadro verde, en el mismo lenguaje de la home. */
.contacto-motivos {
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    grid-column-gap: 40px;
    align-items: center;
    padding: 34px 0;
    border-top: 1px solid #E1E7F0;
    border-bottom: 1px solid #E1E7F0;
}

.contacto-motivos-titulo {
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--dumar-navy);
    margin: 0;
    max-width: 14ch;
}

.contacto-motivos-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.contacto-motivo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 24px;
    border-left: 1px solid #E1E7F0;
}

.contacto-motivo:first-child {
    padding-left: 0;
    border-left: 0;
}

.contacto-motivo i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(16, 132, 100, .1);
    color: var(--dumar-green);
    font-size: 22px;
    line-height: 1;
}

.contacto-motivo span {
    font-size: 15px;
    line-height: 1.5;
    color: #0B1B33;
    padding-top: 10px;
}

@media (max-width: 991.98px) {
    .contacto-motivos {
        grid-template-columns: 1fr;
        grid-row-gap: 22px;
    }
    .contacto-motivos-lista {
        grid-template-columns: 1fr;
        grid-row-gap: 16px;
    }
    .contacto-motivo {
        padding: 0;
        border-left: 0;
    }
}

/* ---------- Servicios: "Metodologia de trabajo" ----------
   Marcado limpio en la descripcion de la seccion. Misma linea de proceso que
   la home: regla superior con un punto por paso, numero en verde, titulo navy,
   texto gris y filete entre columnas. */
.metodologia-titulo {
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--dumar-navy);
    margin: 0 0 32px 0;
}

.metodologia-pasos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 2px solid var(--dumar-navy);
}

.metodologia-paso {
    position: relative;
    padding: 28px 24px 30px 0;
    border-right: 1px solid #E1E7F0;
}

.metodologia-paso:not(:first-child) {
    padding-left: 24px;
}

.metodologia-paso:last-child {
    border-right: 0;
}

.metodologia-paso::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dumar-navy);
}

.metodologia-paso:not(:first-child)::before {
    left: 24px;
}

.metodologia-num {
    display: block;
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--dumar-green);
    margin-bottom: 12px;
}

.metodologia-paso h4 {
    font-family: "Raleway", "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--dumar-navy);
    margin: 0 0 10px 0;
}

.metodologia-paso p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #5A6B85;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .metodologia-pasos {
        grid-template-columns: repeat(3, 1fr);
    }
    .metodologia-paso:nth-child(3) {
        border-right: 0;
    }
}

@media (max-width: 767.98px) {
    .metodologia-pasos {
        grid-template-columns: 1fr;
        border-top: 0;
    }
    .metodologia-paso,
    .metodologia-paso:not(:first-child) {
        border-right: 0;
        border-bottom: 1px solid #E1E7F0;
        padding: 24px 0 24px 24px;
    }
    .metodologia-paso::before,
    .metodologia-paso:not(:first-child)::before {
        left: 0;
        top: 30px;
    }
    .metodologia-paso:last-child {
        border-bottom: 0;
    }
}