/* ============================================================ 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; 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 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-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; } .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); } } /* 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; } /* 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 { transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; } .producto-card, .card-producto, .item-producto { border-radius: 12px; transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; } /* Los items de un acordeon tambien llevan la clase .card: al pasar el mouse la fila subia 4px y el texto saltaba. Se excluyen, como el acordeon entero. */ .card:not(.accordion):not(.accordion-wrapper):not(.accordion-item):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,#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 ---------- */ /* ============================================================ 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 .link-light { color: #ffffff !important; } #carritoMenu i, #favoritosMenu i { color: #ffffff; } #carritoMenu .amount, #carritoMenu ins { color: var(--dumar-green) !important; } #carritoMenu del { color: #9FB3CC !important; } .number-picker-cart .input-group input { 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 ===== */ /* ---------- Menú ---------- */ /* menu|enlaces_peso|normal|opcion|500 */ html body .navbar .nav-link:not(#\9):not(#\9), html body .navbar-dark .navbar-nav .nav-link:not(#\9):not(#\9) { font-weight: 500 !important; } @media (min-width: 992px) { /* menu|alto_enlaces|normal|medida|1rem */ html body .navbar-expand-lg[class*=navbar-bg-]:not(.fancy):not(.extended):not(.fixed) .navbar-collapse .nav-link:not(#\9):not(#\9) { padding-top: 1rem !important; padding-bottom: 1rem !important; } } /* ---------- Logos ---------- */ /* logos|menu_mobile|normal|medida|170px */ html body .logo-menu-mobile:not(#\9):not(#\9) { width: 170px !important; } /* logos|nosotros|normal|medida|230px */ html body .img-logo-nosotros:not(#\9):not(#\9) { width: 230px !important; } /* logos|contacto|normal|medida|230px */ html body .img-logo-contacto:not(#\9):not(#\9) { width: 230px !important; } /* ---------- Barra superior ---------- */ /* barra_superior|texto|normal|otro|#ffffff */ html body #divBarraSuperior:not(#\9):not(#\9), html body #divBarraSuperior p:not(#\9):not(#\9), html body #divBarraSuperior span:not(#\9):not(#\9), html body #divBarraSuperior .p-seguinos:not(#\9):not(#\9) { color: #ffffff !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; } /* barra_superior|redes|normal|otro|#ffffff */ html body #divBarraSuperior .follow-link:not(#\9):not(#\9), html body #divBarraSuperior .follow-link i:not(#\9):not(#\9) { color: #ffffff !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 ---------- */ /* carrito|titulo_panel|normal|otro|#ffffff */ html body #carritoMenu .offcanvas-header h3:not(#\9):not(#\9), html body #carritoMenu h3:not(#\9):not(#\9) { color: #ffffff !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; } /* carrito|variante|normal|otro|#ffffff */ html body #carritoMenu .variante-light:not(#\9):not(#\9), html body #carritoMenu .variante-dark:not(#\9):not(#\9), html body #carritoMenu .shopping-cart small:not(#\9):not(#\9) { color: #ffffff !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|precio_tachado|normal|otro|#9FB3CC */ html body #carritoMenu del:not(#\9):not(#\9), html body #carritoMenu del span:not(#\9):not(#\9) { color: #9FB3CC !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; } /* ---------- Buscador ---------- */ /* buscador|enlaces|normal|otro|#ffffff */ html body #divSugerenciasBuscar a:not(.btn):not(#\9):not(#\9), html body .buscador-resultados a:not(.btn):not(#\9):not(#\9), html body .div-buscar-header .link-dark:not(.btn):not(#\9):not(#\9) { color: #ffffff !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; } /* ---------- Botones ---------- */ /* botones|contorno_texto|hover|otro|#fff */ html body .btn-outline-primary:hover:not(#\9):not(#\9) { color: #fff !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; } /* ---------- Tarjetas ---------- */ /* tarjetas|redondeo|normal|medida|12px */ html body .card:not(#\9):not(#\9) { border-radius: 12px !important; } /* ---------- Texto del sitio ---------- */ /* texto|fondo|normal|otro|#eef2f7 */ html body:not(#\9):not(#\9) { background-color: #eef2f7 !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 (). 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 { 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 { 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 { 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,#dumarDuotono"); } #divBloqueDistribuidores .marcas-marquee-item:hover img { opacity: 1; } /* El bloque enlaza cada logo a productos/marca/: 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); /* el theme lo levanta 3px al pasar el mouse: sin transicion en el transform, saltaba de golpe al entrar y al salir */ transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, background-color .35s ease, color .35s ease !important; } 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; } } /* ===================================================================================== BLOQUES REDISEÑADOS POR GREEN FAMILY SOBRE LA BASE COMUN Copiado de greenfamily2 (lineas 2747-3125 de su custom.css): lo que Green Family le agrego a la version 1 para rediseñar bloques. "Lo que nos diferencia" va a Capacidades y a Sectores, que son las dos grillas de seis items de Dumar, y el ciclo a Metodologia. ===================================================================================== */ /* ---- Ciclo animado (bloque Animado, modelo 19) ---- Seccion oscura: la animacion del ciclo del envase brilla sobre el verde profundo. El fondo sale del bloque (blq_fondo); aca van el aire, el ancho y los textos claros. La escena y la lista de pasos las pinta la animacion. */ body:has(#divBloqueCredenciales) #divBloqueMetodologia{ padding: 112px 0 !important; } #divBloqueMetodologia > .container{ max-width: 1240px; padding-left: 32px; padding-right: 32px; } #divBloqueMetodologia .bloque-animado{ --bs-gutter-x: 72px; } #divBloqueMetodologia .bloque-animado-titulo{ 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: #ffffff; -webkit-text-fill-color: #ffffff; margin: 0 0 20px !important; } #divBloqueMetodologia .bloque-animado-descripcion p{ font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .7); margin: 0; } @media (max-width: 991.98px) { /* 64px como el resto; abajo 50 porque el ultimo paso de la lista ya trae su relleno */ body:has(#divBloqueCredenciales) #divBloqueMetodologia{ padding: 64px 0 50px !important; } #divBloqueMetodologia > .container{ padding-left: 20px; padding-right: 20px; } #divBloqueMetodologia .bloque-animado{ --bs-gutter-x: 24px; } } /* ---- Lo que nos diferencia (Valores, modelo 5) ---- Composicion de ficha tecnica en vez de la grilla de iconos: el titulo a la izquierda (quieto mientras se recorren los puntos, en escritorio) y los cuatro puntos como filas separadas por lineas finas, con el titulo de cada punto en una columna y su texto en otra. El icono del componente no se muestra. Al pasar el mouse, una linea verde recorre la fila. */ :is(#divBloqueCapacidades, #divBloqueSectores) > .container{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: start; } :is(#divBloqueCapacidades, #divBloqueSectores) > .container > .row{ --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0 !important; } :is(#divBloqueCapacidades, #divBloqueSectores) > .container > .row.text-center{ position: sticky; top: 132px; } :is(#divBloqueCapacidades, #divBloqueSectores) .row.text-center > .col-12{ display: block; padding: 0; text-align: left; } :is(#divBloqueCapacidades, #divBloqueSectores) .display-4{ max-width: 11ch; margin: 0 !important; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row{ display: block; margin: 0 !important; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div{ position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; align-items: baseline; width: 100%; max-width: 100%; margin: 0 !important; padding: 30px 0; border-top: 1px solid var(--in-linea); } /* Separadores solo entre filas: sin linea arriba de la primera ni abajo de la ultima. */ :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div:first-child{ border-top: 0; padding-top: 4px; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div:last-child{ padding-bottom: 0; } :is(#divBloqueCapacidades, #divBloqueSectores) .bloque-item-icono{ display: none !important; } :is(#divBloqueCapacidades, #divBloqueSectores) h4{ font-family: "Raleway", "Poppins", sans-serif; font-size: 21px !important; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--in-navy); margin: 0 !important; transition: color .35s ease; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper p{ font-size: 16px; line-height: 1.65; color: var(--in-gris); margin: 0 !important; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div:not(:first-child)::before{ content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--in-green); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div:hover::before{ transform: scaleX(1); } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div:hover h4{ color: var(--in-green); } @media (max-width: 991.98px) { :is(#divBloqueCapacidades, #divBloqueSectores) > .container{ grid-template-columns: 1fr; row-gap: 28px; } :is(#divBloqueCapacidades, #divBloqueSectores) > .container > .row.text-center{ position: static; } :is(#divBloqueCapacidades, #divBloqueSectores) .display-4{ max-width: none; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div{ grid-template-columns: 1fr; row-gap: 8px; padding: 22px 0; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div:first-child{ padding-top: 0; } :is(#divBloqueCapacidades, #divBloqueSectores) h4{ font-size: 19px !important; } :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper p{ font-size: 15px; } } /* ---- Categorias (predefinido 5) ---- A tono con el resto de la home: el mismo aire y el mismo ancho que las otras secciones, el fondo gris calido de la paleta y el titulo a la izquierda en el verde de la marca (el bloque lo trae centrado y gris, con .text-dark, y sin padding propio). */ body:has(#divBloqueCredenciales) #divBloqueCategorias{ padding: 104px 0 !important; background: var(--in-fondo) !important; } #divBloqueCategorias > .container{ max-width: 1240px; padding: 0 32px !important; } #divBloqueCategorias .position-relative > .row:first-child > div{ flex: 0 0 100%; max-width: 100%; margin: 0 !important; justify-content: flex-start !important; text-align: left !important; } #divBloqueCategorias h2.display-4{ 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) !important; -webkit-text-fill-color: var(--in-navy); max-width: 18ch; padding: 0 !important; margin: 0 0 48px !important; } /* Las fichas llevan el nombre de la categoria adentro de la imagen, abajo a la izquierda, sobre un degrade verde oscuro que lo hace legible (como en Gufra y Avip). El nombre es el h4 que el bloque pone debajo de la foto: se lo ancla a la tarjeta y se lo sube encima. Las fotos son cuadradas. */ #divBloqueCategorias .project.item{ position: relative; } #divBloqueCategorias .project figure.card-img-top{ position: relative; overflow: hidden; margin: 0; } #divBloqueCategorias .project figure.card-img-top img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } #divBloqueCategorias .project figure.card-img-top::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 36, 14, .78) 0%, rgba(10, 36, 14, .35) 32%, rgba(10, 36, 14, 0) 58%); pointer-events: none; z-index: 1; } #divBloqueCategorias .project h4.titulo-categoria{ position: absolute; /* La tarjeta es una columna: su relleno lateral es la mitad del gutter, y la foto va adentro */ left: calc(var(--bs-gutter-x, 1.5rem) * .5); right: calc(var(--bs-gutter-x, 1.5rem) * .5); bottom: 0; z-index: 2; margin: 0 !important; padding: 20px 22px; text-align: left !important; font-size: 22px !important; line-height: 1.15; color: #ffffff !important; -webkit-text-fill-color: #ffffff; pointer-events: none; } @media (max-width: 991.98px) { body:has(#divBloqueCredenciales) #divBloqueCategorias{ padding: 64px 0 !important; } #divBloqueCategorias > .container{ padding: 0 24px !important; } #divBloqueCategorias h2.display-4{ margin-bottom: 32px !important; } } @media (max-width: 575.98px) { #divBloqueCategorias .categorias-grilla{ --bs-gutter-x: 16px; --bs-gutter-y: 28px; } #divBloqueCategorias .project h4.titulo-categoria{ font-size: 17px !important; padding: 14px; } } /* ---- Algunos de nuestros envases (Destacados, predefinido 12) ---- El bloque muestra la descripcion corta del producto, que en Green Family es la ficha: la tabla y las aplicaciones. Va entera, sin el recorte de cinco lineas de la plataforma (cortaria la tabla), y tambien debajo de escritorio, donde el bloque oculta el texto (d-none d-lg-block): ahi queda debajo de la foto. */ #divBloqueDestacados .texto-producto-destacado{ display: block !important; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } @media (max-width: 991.98px) { #divBloqueDestacados .texto-producto-destacado{ margin: 18px 0 0 !important; } } /* ---- Aire de los bloques en celular: 64px arriba y abajo en todos ---- Medido desde el borde de la seccion hasta el primer y el ultimo contenido, como en Calidad y en Lo que nos diferencia. Cada ajuste descuenta lo que el bloque ya trae adentro. */ @media (max-width: 991.98px) { /* Credenciales: la banda no tiene aire propio, solo el relleno de cada banner (22px) */ body:has(#divBloqueCredenciales) #divBloqueCredenciales{ padding: 35px 0 42px !important; } /* Categorias: el margen debajo del nombre de cada categoria */ #divBloqueCategorias .titulo-categoria{ margin-bottom: 0 !important; } /* Algunos de nuestros envases: el contenedor trae 40px arriba y 20px abajo, y el carrusel 40px de margen */ #divBloqueDestacados .container-sm{ padding-top: 64px !important; padding-bottom: 64px !important; } #divBloqueDestacados .swiper-container{ margin-bottom: 0 !important; } /* Catalogo y Cierre: el margen debajo de los botones */ #divBloqueCatalogo .bloque-botones, #divBloqueCierre .row.text-center > .col-12 > p:last-child{ margin-bottom: 0 !important; } } /* ---- Listado de productos (productos.php): menos aire arriba ---- El contenedor de la columna de categorias y el listado trae pt-12 (3.5rem): va con el de pt-2 (.5rem) en escritorio y con 2.5rem en celular y tablet. Se lo ubica por la ruta de navegacion que tiene justo antes, que solo existe en esta pagina (servicios.php usa el mismo contenedor y no se toca). */ #seccionRutaCatalogo + section.wrapper > .container{ padding-top: .5rem !important; } @media (max-width: 991.98px) { #seccionRutaCatalogo + section.wrapper > .container{ padding-top: 2.5rem !important; } } /* ---- Lineas que se llenan: Envasado llave en mano, Calidad, Catalogo y Lo que nos diferencia ---- La linea que separa cada fila se llena de verde de izquierda a derecha, como en Lo que nos diferencia: con el mouse al pasar por la fila, y en el celular sola a medida que la fila entra en pantalla (custom.js le pone la clase linea-llena). La linea se dibuja encima del borde de la fila. */ #divBloqueEnfoque .bloque-puntos li::before, #divBloqueCalidad .bloque-puntos li::before, #divBloqueCatalogo .bloque-puntos li::before{ content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--in-green); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } @media (hover: hover) { #divBloqueEnfoque .bloque-puntos li:hover::before, #divBloqueCalidad .bloque-puntos li:hover::before, #divBloqueCatalogo .bloque-puntos li:hover::before{ transform: scaleX(1); } } #divBloqueEnfoque .bloque-puntos li.linea-llena::before, #divBloqueCalidad .bloque-puntos li.linea-llena::before, #divBloqueCatalogo .bloque-puntos li.linea-llena::before, :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div.linea-llena::before{ transform: scaleX(1); } /* ===================================================================================== DUMAR 2 — la capa v2 de Green Family 2, adaptada a Dumar ------------------------------------------------------------------------------------- Toma el lenguaje de la referencia "Ridgeline": pagina casi blanca con paneles redondeados despegados de los bordes, portada enmarcada, menu en piezas sueltas (logo, opciones a la izquierda y el boton de accion a la derecha), titulares en dos tonos, datos chicos en tipografia mono y cada seccion con su propia forma de entrar (custom.js). Todo lo de abajo pisa a la version 1, que queda arriba en este archivo. ===================================================================================== */ :root{ --v2-pagina: #eef2f7; --v2-panel: #f1f4f8; --v2-tarjeta: #fbfcfe; --v2-tinta: #001B45; --v2-tono: #7c8b9c; --v2-texto: #4a5a6b; --v2-verde: #0C6B51; --v2-verde-medio: #108464; --v2-lima: #7FD4B4; --v2-linea: rgba(0, 27, 69, .1); --v2-radio: 24px; --v2-radio-tarjeta: 18px; --v2-margen: 14px; --v2-sans: "Geist", "Inter", system-ui, sans-serif; --v2-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --v2-curva: cubic-bezier(.22, 1, .36, 1); /* menu flotante: medidas y colores de las piezas sueltas */ --mf-top: 26px; --mf-ancho: 1352px; } /* ---------- Tipografia: Geist para todo, mono para lo chico ---------- */ html body, html body :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, textarea, select, label, small, strong, em, td, th, figcaption):not(.material-symbols-rounded):not([class*="uil"]){ font-family: var(--v2-sans) !important; } html body{ color: var(--v2-texto); -webkit-font-smoothing: antialiased; } html body .content-wrapper{ background: var(--v2-pagina) !important; } html body :is(h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5){ font-weight: 700 !important; letter-spacing: -.035em !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); } /* Los titulares de los bloques: en bloque (algunos venian como flex y partian los dos tonos en columnas), en tinta y con el segundo tono. Pisa el verde de la version 1. */ html body:has(#divBloqueCredenciales) section[id^="divBloque"] :is(h2, h3):is(.display-4, .display-5){ display: block !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; font-size: clamp(34px, 3.6vw, 54px) !important; font-weight: 700 !important; letter-spacing: -.042em !important; line-height: 1.02 !important; max-width: 20ch; } /* Segundo tono de los titulares: custom.js envuelve lo que sigue a la primera coma o dos puntos del titulo (o el segundo titulo de una portada). */ html body .d2-tono{ color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } /* ---------- Botones: pastilla, en la tipografia del sitio ---------- */ /* Sin el brillo verde ni el salto de la version 1 */ html body:has(#divBloqueCredenciales) :is(.swiper-hero, [id^="divBloque"]) .btn, html body:has(#divBloqueCredenciales) :is(.swiper-hero, [id^="divBloque"]) .btn:hover, html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill, html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.rounded-pill:hover{ box-shadow: none !important; } html body .btn:not(.btn-close):not(.btn-circle):not(.btn-block):not(.dropdown-toggle){ font-family: var(--v2-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.005em !important; text-transform: none !important; border-radius: 999px !important; padding: 14px 22px !important; box-shadow: none !important; transform: none !important; transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; } html body .btn.btn-primary:not(.btn-close){ background: var(--v2-verde) !important; border-color: var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } html body .btn.btn-primary:not(.btn-close):hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } html body .btn.btn-outline-primary{ background: transparent !important; border: 1px solid var(--v2-linea) !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); } html body .btn.btn-outline-primary:hover{ background: var(--v2-tinta) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } /* Menu de escritorio: al pasar el mouse el texto toma el color del subrayado (verde en la barra clara, lima sobre la portada), y en Catalogo el subrayado llega hasta la flecha inclusive (la version 1 lo cortaba 18px antes para dejarla afuera). La flecha acompaña el color del texto. */ @media (min-width: 992px) { html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:not(#d2):is(:hover, .active), html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:not(#d2):is(:hover, .active)::after{ color: var(--linea-menu) !important; -webkit-text-fill-color: var(--linea-menu) !important; } html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.dropdown-toggle:not(#d2):is(:hover, .active){ background-size: 100% 2px; } } /* El boton de accion del menu no lleva el margen derecho (me-3) que le pone la plataforma */ html body .navbar .navbar-other .nav-item:has(> .boton-cta-menu){ margin-right: 0 !important; } /* ---------- Menu: la barra de vidrio de siempre, con el boton de accion a la derecha ---------- Las opciones quedan como en la version 1 (centradas, con la linea animada). El boton va en blanco sobre la portada y en verde sobre el fondo claro. */ @media (min-width: 992px) { .navbar.navbar-flotante .boton-cta-menu{ display: inline-flex !important; align-items: center; padding: 12px 20px !important; background: var(--v2-verde) !important; border: 1px solid var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .navbar.navbar-flotante .boton-cta-menu:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } .navbar.navbar-flotante.navbar-flotante-sobre-portada .boton-cta-menu{ background: #ffffff !important; border-color: #ffffff !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); } .navbar.navbar-flotante.navbar-flotante-sobre-portada .boton-cta-menu:hover{ background: var(--v2-lima) !important; border-color: var(--v2-lima) !important; } } /* ---------- Portada: enmarcada, despegada de los bordes y redondeada ---------- */ html body:has(#divBloqueCredenciales) #divPortadas{ padding: var(--v2-margen) var(--v2-margen) 0 !important; background: var(--v2-pagina) !important; } html body:has(#divBloqueCredenciales) #divPortadas .swiper-hero{ border-radius: var(--v2-radio); overflow: hidden; isolation: isolate; } html body:has(#divBloqueCredenciales) .swiper-hero, html body:has(#divBloqueCredenciales) .swiper-hero .swiper, html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide{ height: calc(100vh - var(--v2-margen)) !important; height: calc(100svh - var(--v2-margen)) !important; min-height: 620px !important; } /* El titular arriba a la izquierda (como la referencia), debajo de la barra del menu */ html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content{ position: relative; max-width: 1320px; padding: 150px 40px 0 !important; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content > .row{ align-items: flex-start !important; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div{ align-self: flex-start !important; max-width: 1000px !important; padding-bottom: 0 !important; } /* Si en el panel el titular se puso a la derecha, la columna entera se va a ese lado (custom.js le pone d2-derecha) */ html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div.d2-derecha{ margin-left: auto !important; text-align: right !important; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div.d2-derecha .portada-texto-normal{ margin-left: auto !important; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .row > div.d2-derecha .btn.portada-boton-normal{ margin: 34px 0 0 10px !important; } /* El velo de la portada (el que se elige en el panel) queda del lado del titular. Abajo se suma una sombra suave para que los chips se lean sobre cualquier foto. */ html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide{ position: relative; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide::before{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0, 17, 44, .65) 0%, rgba(0, 17, 44, 0) 80%), linear-gradient(0deg, rgba(0, 17, 44, .45) 0%, rgba(0, 17, 44, 0) 30%); } /* del lado del titulo la foto se oscurece un poco mas, para que el segundo tono se lea sobre cualquier imagen (en las claras, como el bidon o el bosque con sol, no alcanzaba el velo) */ html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide:has(.d2-derecha)::before{ background: linear-gradient(270deg, rgba(0, 17, 44, .65) 0%, rgba(0, 17, 44, 0) 80%), linear-gradient(0deg, rgba(0, 17, 44, .45) 0%, rgba(0, 17, 44, 0) 30%); } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide > .swiper-content{ z-index: 2; } /* Mientras la foto de cada portada carga no se ve el color de relleno de la plataforma (un oliva que, con el velo encima, armaba un degrade feo): se ve el mismo fondo de la pagina y la foto aparece con un fundido cuando esta lista. custom.js pone d2-esperando-fotos en la portada y d2-foto-lista en cada slide; sin el script no se tapa nada. */ html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide:not(#d2){ background-color: var(--v2-pagina) !important; } html body:has(#divBloqueCredenciales) .swiper-hero.d2-esperando-fotos .swiper-slide::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: var(--v2-pagina); pointer-events: none; transition: opacity .7s ease; } html body:has(#divBloqueCredenciales) .swiper-hero.d2-esperando-fotos .swiper-slide.d2-foto-lista::after{ opacity: 0; } /* el texto blanco tampoco se muestra sobre el fondo claro: entra junto con la foto */ html body:has(#divBloqueCredenciales) .swiper-hero.d2-esperando-fotos .swiper-slide > .swiper-content{ transition: opacity .6s ease; } html body:has(#divBloqueCredenciales) .swiper-hero.d2-esperando-fotos .swiper-slide:not(.d2-foto-lista) > .swiper-content{ opacity: 0; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content :is(p, h1, h2, h3, a){ text-shadow: none !important; } /* Las animaciones de animate.css de los componentes se apagan: la entrada la hace custom.js */ html body:has(#divBloqueCredenciales) .swiper-hero .animate__animated{ animation: none !important; visibility: visible !important; } /* Titular: dos componentes grandes, el segundo en el tono suave que se elige en la portada */ html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande{ font-family: var(--v2-sans) !important; font-size: clamp(44px, 5.4vw, 82px) !important; font-weight: 700 !important; letter-spacing: -.048em !important; line-height: .98 !important; margin: 0 !important; padding-bottom: .06em; overflow: hidden; } html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande > .d2-linea{ display: block; } /* el segundo renglon se corta antes: asi no se estira hasta la parte mas clara de la foto */ html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-grande ~ .portada-texto-grande{ max-width: 8.4em; } html body:has(#divBloqueCredenciales) .swiper-hero .d2-derecha .portada-texto-grande ~ .portada-texto-grande{ margin-left: auto !important; } html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-normal{ font-size: 18px !important; line-height: 1.55 !important; max-width: 38ch; margin: 26px 0 0 !important; opacity: .82; } /* Botones de la portada: el primero blanco y el segundo en linea */ html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal{ margin: 34px 10px 0 0 !important; background: #ffffff !important; border: 1px solid #ffffff !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); border-radius: 999px !important; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal:hover{ background: var(--v2-lima) !important; border-color: var(--v2-lima) !important; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal + .btn.portada-boton-normal{ background: transparent !important; border-color: rgba(255, 255, 255, .45) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal + .btn.portada-boton-normal:hover{ background: rgba(255, 255, 255, .12) !important; border-color: #ffffff !important; } /* Entrada del titular "como una junta que se cierra": la primera linea baja y la segunda sube hasta encontrarse; despues aparecen la bajada y los botones. Van con !important porque la version 1 y los botones generales tambien fijan transform y transition. */ html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima .portada-texto-grande > .d2-linea{ transform: translateY(-105%) !important; } html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima .portada-texto-grande ~ .portada-texto-grande > .d2-linea{ transform: translateY(105%) !important; } html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima :is(.portada-texto-normal, .btn.portada-boton-normal){ opacity: 0 !important; transform: translateY(14px) !important; } html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima.d2-entra .portada-texto-grande > .d2-linea, html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima.d2-entra .portada-texto-grande ~ .portada-texto-grande > .d2-linea{ transform: none !important; transition: transform 1.1s var(--v2-curva) .1s !important; } html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima.d2-entra :is(.portada-texto-normal, .btn.portada-boton-normal){ opacity: 1 !important; transform: none !important; transition: opacity .7s ease .6s, transform .9s var(--v2-curva) .6s, background-color .25s ease 0s, color .25s ease 0s, border-color .25s ease 0s !important; } html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima.d2-entra .btn.portada-boton-normal{ transition-delay: .72s, .72s, 0s, 0s, 0s !important; } html body:has(#divBloqueCredenciales) .swiper-hero .d2-anima.d2-entra .btn.portada-boton-normal + .btn.portada-boton-normal{ transition-delay: .8s, .8s, 0s, 0s, 0s !important; } @media (max-width: 991.98px) { /* En el celular la portada arranca debajo del menu, 85px mas abajo, y mide eso menos para que los puntos sigan entrando en la pantalla. El menu arranca oscuro sobre el fondo de la pagina y se aclara recien cuando pasa sobre la foto (menu-flotante.js). */ html body:has(#divBloqueCredenciales) #divPortadas{ padding-top: calc(var(--v2-margen) + 85px) !important; } html body:has(#divBloqueCredenciales) .swiper-hero, html body:has(#divBloqueCredenciales) .swiper-hero .swiper, html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide{ height: calc(100vh - var(--v2-margen) - 85px) !important; height: calc(100svh - var(--v2-margen) - 85px) !important; min-height: 540px !important; } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content{ padding: 48px 24px 0 !important; } /* en el celular el titulo ocupa todo el ancho: la sombra va de arriba hacia abajo, sobre la zona del titulo, en vez de desde un costado */ html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide::before, html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide:has(.d2-derecha)::before{ background: linear-gradient(180deg, rgba(0, 17, 44, .62) 0%, rgba(0, 17, 44, .45) 45%, rgba(0, 17, 44, 0) 72%), linear-gradient(0deg, rgba(0, 17, 44, .45) 0%, rgba(0, 17, 44, 0) 30%); } html body:has(#divBloqueCredenciales) .swiper-hero .swiper-content .btn.portada-boton-normal{ margin: 28px 6px 0 0 !important; padding: 0 18px !important; height: 48px; font-size: 14.5px !important; } html body:has(#divBloqueCredenciales) .swiper-hero .portada-texto-normal{ font-size: 16.5px !important; margin-top: 20px !important; } html body .navbar .navbar-other .btn.boton-cta-menu:not(.btn-close){ font-size: 14px !important; padding: 10px 16px !important; } } @media (prefers-reduced-motion: reduce) { html body:has(#divBloqueCredenciales) .swiper-hero .swiper-slide.d2-anima :is(.portada-texto-grande > .d2-linea, .portada-texto-normal, .btn.portada-boton-normal){ transform: none !important; opacity: 1 !important; transition: none !important; } } /* ===================================================================================== GREEN FAMILY 2 — secciones Cada bloque toma una de las piezas de la referencia. Las clases d2-* las pone custom.js; sin el script la pagina queda quieta y completa. ===================================================================================== */ /* ---------- Ritmo general ---------- */ /* El :not(#d2) suma el peso de un id: la version 1 pinta los fondos con dos ids */ html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#d2){ position: relative; background-color: transparent !important; } html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#divBloqueMetodologia){ background-image: none !important; padding-top: 112px !important; padding-bottom: 112px !important; } html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"] > .container, html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .container-sm{ max-width: 1240px !important; padding-left: 32px !important; padding-right: 32px !important; } html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#divBloqueMetodologia):not(#divBloqueCierre) p{ color: var(--v2-texto); } /* Los titulares de bloque, siempre a la izquierda */ html body:has(#divBloqueCredenciales) section[id^="divBloque"] .row.text-center > .col-12, html body:has(#divBloqueCredenciales) #divBloqueSectores .row > .text-center{ display: block !important; text-align: left !important; padding-left: 12px !important; padding-right: 12px !important; max-width: none !important; width: 100% !important; margin: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores h2.display-4{ padding: 0 !important; margin-bottom: 56px !important; } /* Titulares que suben por renglones, cada uno desde abajo de su mascara (como el titulo del bloque animado). custom.js los parte y, al terminar, les devuelve su HTML original. */ html body:has(#divBloqueCredenciales) :is(.d2-titulo-espera, .d2-entra-espera){ opacity: 0; } html body:has(#divBloqueCredenciales) .d2-renglones .d2-mascara{ display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; } html body:has(#divBloqueCredenciales) .d2-renglones .d2-renglon{ display: block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.23, 1, .32, 1); } html body:has(#divBloqueCredenciales) .d2-renglones.d2-visto .d2-renglon{ transform: none; } /* Textos y fotos que entran desde su costado, como en Envasado llave en mano */ html body:has(#divBloqueCredenciales) :is(.d2-entra-izq, .d2-entra-der, .d2-entra-arriba){ opacity: 0; transition: opacity .7s ease, transform .8s var(--v2-curva); transition-delay: calc(var(--d2-i, 0) * .08s); } html body:has(#divBloqueCredenciales) .d2-entra-izq{ transform: translateX(-30px); } html body:has(#divBloqueCredenciales) .d2-entra-der{ transform: translateX(30px); } html body:has(#divBloqueCredenciales) .d2-entra-arriba{ transform: translateY(30px); } html body:has(#divBloqueCredenciales) :is(.d2-entra-izq, .d2-entra-der, .d2-entra-arriba).d2-visto{ opacity: 1; transform: none; } /* la fila entera ya no se desliza con el theme: ahora entra cada columna por su lado */ html body:has(#divBloqueCredenciales) .d2-sin-cue[data-cue]{ animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Fotos que se abren desde adentro de su marco */ html body:has(#divBloqueCredenciales) .d2-revela-foto{ clip-path: inset(10% 10% 10% 10% round var(--v2-radio)); transition: clip-path 1.4s var(--v2-curva); } html body:has(#divBloqueCredenciales) .d2-revela-foto img{ transform: scale(1.16); transition: transform 1.6s var(--v2-curva); } html body:has(#divBloqueCredenciales) .d2-revela-foto.d2-visto{ clip-path: inset(0 0 0 0 round var(--v2-radio)); } html body:has(#divBloqueCredenciales) .d2-revela-foto.d2-visto img{ transform: none; } /* ---------- Franja de confianza (Credenciales): ficha tecnica ---------- Un panel blanco con las cuatro garantias como columnas de una ficha, separadas por lineas finas y sin iconos. Al pasar el mouse la linea de arriba de la columna se llena de verde. */ html body:has(#divBloqueCredenciales) #divBloqueCredenciales:not(#d2){ background: transparent !important; background-image: none !important; border: 0 !important; padding: 14px var(--v2-margen) 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales > .container{ max-width: none !important; padding: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .row:not(#d2){ margin: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-container:not(#d2){ flex: 1 1 100% !important; min-width: 0; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper{ overflow: hidden; border-radius: var(--v2-radio); background: #ffffff; border: 1px solid var(--v2-linea); } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-wrapper{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); transform: none !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#d2){ position: relative; display: block !important; width: auto !important; margin: 0 !important; padding: 40px 36px 38px !important; background: transparent !important; border: 0 !important; border-left: 1px solid var(--v2-linea) !important; box-shadow: none !important; text-align: left !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#d2):first-child{ border-left: 0 !important; } /* Al pasar el mouse la celda toma un fondo apenas mas oscuro y su dibujo se vuelve a trazar desde cero, linea por linea (las punteadas aparecen al final). */ html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#d2){ transition: background-color .45s ease !important; } @media (hover: hover) { html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#d2):hover{ background-color: var(--v2-pagina) !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:hover .d2-trazo{ animation: d2-redibujo 1.3s var(--v2-curva) both; animation-delay: calc(var(--d2-n, 0) * .03s); } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:hover .d2-trazo-punteado{ animation: d2-aparece .6s ease .7s both; } } @keyframes d2-redibujo{ from{ stroke-dashoffset: var(--d2-largo); } to{ stroke-dashoffset: 0; } } @keyframes d2-aparece{ from{ opacity: 0; } to{ opacity: 1; } } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon{ display: none !important; } /* El dibujo de cada garantia: plano tecnico de linea fina, en el lenguaje de la ficha. Se sube desde el panel (Banners, tipo SVG) y se dibuja solo cuando la ficha entra en pantalla. */ html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon-svg-wrapper{ display: block !important; height: 92px; margin: 0 0 28px !important; color: var(--v2-verde-medio); } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon-svg{ display: block; width: auto !important; height: 100% !important; max-width: 100%; overflow: visible; stroke-width: 1.7; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .d2-trazo{ stroke-dasharray: var(--d2-largo); stroke-dashoffset: var(--d2-largo); transition: stroke-dashoffset 1.6s var(--v2-curva); transition-delay: calc(var(--d2-i, 0) * .12s + var(--d2-n, 0) * .05s + .15s); } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .d2-trazo-punteado{ opacity: 0; transition: opacity .8s ease; transition-delay: calc(var(--d2-i, 0) * .12s + 1.1s); } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .d2-visto .d2-trazo{ stroke-dashoffset: 0; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .d2-visto .d2-trazo-punteado{ opacity: 1; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide > div:not(.banner-icon-svg-wrapper){ display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide h4:not(#d2){ font-size: clamp(18px, 1.45vw, 21px) !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.25 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; margin: 0 0 10px !important; transition: color .3s ease, -webkit-text-fill-color .3s ease; } @media (hover: hover) { html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:hover h4:not(#d2){ color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide p:not(#d2){ max-width: 30ch; margin: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--v2-texto) !important; -webkit-text-fill-color: var(--v2-texto) !important; } /* ---------- Categorias ---------- */ html body:has(#divBloqueCredenciales) #divBloqueSectores .categorias-grilla figure{ border-radius: var(--v2-radio-tarjeta) !important; overflow: hidden; } /* ---------- Secciones apiladas ---------- Paneles redondeados despegados de los bordes. custom.js calcula --d2-tope para que cada uno se quede quieto cuando su borde de abajo llega al de la pantalla, y --d2-cubierto (0 a 1) mientras el siguiente le pasa por encima. */ html body:has(#divBloqueCredenciales) section.d2-apilada{ position: sticky !important; top: var(--d2-tope, 0px); margin: 14px var(--v2-margen) 0 !important; border-radius: var(--v2-radio); transform-origin: 50% 0; transform: scale(calc(1 - var(--d2-cubierto, 0) * .05)); box-shadow: 0 -24px 48px -32px rgba(0, 27, 69, .28); } html body:has(#divBloqueCredenciales) section.d2-apilada::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: #00112C; opacity: calc(var(--d2-cubierto, 0) * .38); pointer-events: none; z-index: 5; } html body:has(#divBloqueCredenciales) #divBloqueEnfoque.d2-apilada:not(#d2){ background-color: #ffffff !important; } html body:has(#divBloqueCredenciales) #divBloqueDistribuidores.d2-apilada:not(#d2){ background-color: var(--v2-panel) !important; } html body:has(#divBloqueCredenciales) #divBloqueCatalogo.d2-apilada:not(#d2){ background-color: #ffffff !important; } html body:has(#divBloqueCredenciales) #divBloqueCalidad.d2-apilada:not(#d2){ background-color: var(--v2-panel) !important; } /* Lo que nos diferencia: panel blanco propio. Las dos columnas (titulo y filas) caen en las mismas lineas que la foto y el texto de Calidad. En Green Family 2 lleva z-index 2 porque es el penultimo bloque y le pasa por encima a Calidad. En Dumar es un panel apilado mas, en el medio: con ese z-index quedaba por encima de Sectores, que subia por debajo sin verse y aparecia de golpe. */ html body:has(#divBloqueCredenciales) .content-wrapper > #divBloqueCapacidades:not(#d2){ margin: 14px var(--v2-margen) 0 !important; border-radius: var(--v2-radio) !important; background-color: #ffffff !important; } @media (min-width: 992px) { html body:has(#divBloqueCredenciales) #divBloqueCapacidades:not(#d2) > .container{ display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 0 !important; align-items: start !important; } html body:has(#divBloqueCredenciales) #divBloqueCapacidades:not(#d2) > .container > .row{ margin: 0 !important; width: auto !important; } html body:has(#divBloqueCredenciales) #divBloqueCapacidades:not(#d2) > .container > .row > [class*="col"]{ padding-left: 0 !important; padding-right: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCapacidades:not(#d2) > .container > .row:not(.text-center){ padding-left: 40px !important; } /* el titulo acompaña mientras pasan las filas: la columna izquierda no queda vacia */ html body:has(#divBloqueCredenciales) #divBloqueCapacidades:not(#d2) > .container > .row.text-center{ position: sticky; top: 130px; } } html body:has(#divBloqueCredenciales) #divBloqueMetodologia.d2-apilada{ overflow: hidden; } /* lo que sigue a la ultima apilada le pasa por encima */ html body:has(#divBloqueCredenciales) .content-wrapper > section.d2-apilada ~ section:not(.d2-apilada):not(#d2){ position: relative; z-index: 1; background-color: var(--v2-pagina) !important; } /* un panel que ya quedo tapado del todo no se dibuja: asi no se asoma por los huecos de abajo. Va con opacidad y no con visibility porque adentro hay partes que se fuerzan visibles (la fila de Catalogo, por ejemplo) y esas se asomaban igual. */ html body:has(#divBloqueCredenciales) section.d2-apilada.d2-tapada{ opacity: 0 !important; pointer-events: none; } html body:has(#divBloqueCredenciales) .content-wrapper > section.d2-apilada + section:not(.d2-apilada){ margin-top: 14px; border-radius: var(--v2-radio) var(--v2-radio) 0 0; box-shadow: 0 -24px 48px -32px rgba(0, 27, 69, .28); } /* ---------- Proceso (Envasado llave en mano) ---------- */ html body:has(#divBloqueCredenciales) section.d2-proceso > .container > h3.display-5{ max-width: 24ch; margin-bottom: 64px !important; } html body:has(#divBloqueCredenciales) section.d2-proceso .row{ align-items: stretch !important; } html body:has(#divBloqueCredenciales) section.d2-proceso .row > div > figure{ height: 100%; min-height: 480px; margin: 0; border-radius: var(--v2-radio); overflow: hidden; } html body:has(#divBloqueCredenciales) section.d2-proceso .row > div > figure img{ width: 100% !important; height: 100% !important; object-fit: cover; display: block; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-wrapper{ counter-reset: d2-paso; border-bottom: 1px solid var(--v2-linea); } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-item{ position: relative; counter-increment: d2-paso; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--v2-linea) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* la linea del paso abierto se llena mientras corre el avance automatico */ html body:has(#divBloqueCredenciales) section.d2-proceso .d2-paso-linea{ position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--v2-verde-medio); transform: scaleX(0); transform-origin: left center; pointer-events: none; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-item.d2-corriendo .d2-paso-linea{ animation: d2-avance-paso 6s linear forwards; } @keyframes d2-avance-paso{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-item .card-header{ padding: 0 !important; background: transparent !important; border: 0 !important; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-button{ position: relative; display: flex !important; align-items: baseline; gap: 22px; width: 100%; padding: 26px 60px 26px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: left; font-size: clamp(20px, 1.7vw, 25px) !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.25 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; transition: color .3s ease, -webkit-text-fill-color .3s ease; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-button.collapsed{ color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-button.collapsed:hover{ color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } /* el numero del paso, donde el theme ponia su icono */ html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-button::before{ content: counter(d2-paso, decimal-leading-zero) !important; position: static !important; transform: none !important; flex: 0 0 auto; width: 26px; font-family: var(--v2-mono) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; margin: 0 !important; } /* el signo de mas, dibujado: se vuelve una cruz al abrir */ html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-button::after{ content: "" !important; position: absolute !important; right: 0; top: 50%; width: 34px !important; height: 34px !important; margin: -17px 0 0 !important; border-radius: 50%; border: 1px solid var(--v2-linea); background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat !important; color: var(--v2-tinta); transform: rotate(45deg) !important; transition: transform .45s var(--v2-curva), background-color .3s ease, border-color .3s ease, color .3s ease; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-button:not(.collapsed)::after{ background-color: var(--v2-tinta) !important; border-color: var(--v2-tinta); color: #ffffff; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-button.collapsed::after{ transform: rotate(0deg) !important; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-item .card-body{ padding: 0 60px 30px 48px !important; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-item .card-body p{ font-size: 16px !important; line-height: 1.65 !important; max-width: 46ch; margin: 0 !important; } /* ---------- Ciclo (bloque animado): panel oscuro ---------- */ html body:has(#divBloqueCredenciales) #divBloqueMetodologia :is(h1, h2, h3, .display-4, .display-5){ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body:has(#divBloqueCredenciales) :is(#divBloqueMetodologia, #divBloqueCierre) .d2-tono{ color: rgba(255, 255, 255, .55) !important; -webkit-text-fill-color: rgba(255, 255, 255, .55) !important; } /* ---------- Envases destacados ---------- */ html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .container-sm{ padding-top: 0 !important; padding-bottom: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .container-sm > .col-12:first-child{ align-items: flex-end !important; margin-bottom: 48px !important; } html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .container-sm > .col-12:first-child > a{ align-items: center; gap: 4px; padding: 10px 18px !important; border-radius: 999px !important; border: 1px solid rgba(0, 27, 69, .16); font-size: 15px !important; font-weight: 600 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; transition: background-color .25s ease, color .25s ease; } html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .container-sm > .col-12:first-child > a:hover{ background: var(--v2-tinta); color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .container-sm > .col-12:first-child > a i{ display: none; } /* ---------- Lo que nos diferencia ---------- */ html body:has(#divBloqueCredenciales) #divBloqueCapacidades .pricing-wrapper h4{ color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; font-weight: 600 !important; letter-spacing: -.02em !important; } /* Las aplicaciones que el envase no tiene: sobre el gris del panel eran casi invisibles. Van en blanco con borde, apagadas pero legibles, para que las marcadas sigan resaltando. */ html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .envase-ap:not(.envase-ap-on):not(#d2){ background-color: rgba(255, 255, 255, .75) !important; border: 1px solid rgba(0, 27, 69, .14) !important; color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } /* Las lineas de la tabla del envase: sobre el gris del panel las de la version 1 no se veian */ html body:has(#divBloqueCredenciales) #divBloqueDistribuidores table :is(th, td):not(#d2){ border-bottom: 1px solid rgba(0, 27, 69, .14) !important; } /* ---------- Listas numeradas (Calidad) ---------- Cada punto lleva su numero y la linea de arriba se dibuja al entrar la lista. La linea verde de la version 1 (al pasar el mouse) queda encima. */ html body:has(#divBloqueCredenciales) .bloque-puntos{ counter-reset: d2-punto; } html body:has(#divBloqueCredenciales) .bloque-puntos li{ counter-increment: d2-punto; padding: 18px 0 18px 46px !important; border-top: 0 !important; background: linear-gradient(rgba(0, 27, 69, .14), rgba(0, 27, 69, .14)) left top / 100% 1px no-repeat; font-size: 15.5px !important; color: var(--v2-texto) !important; } html body:has(#divBloqueCredenciales) .bloque-puntos li strong{ color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body:has(#divBloqueCredenciales) .bloque-puntos li > span:first-child{ top: 21px !important; } html body:has(#divBloqueCredenciales) .bloque-puntos li > span:first-child i{ display: none !important; } html body:has(#divBloqueCredenciales) .bloque-puntos li > span:first-child::before{ content: counter(d2-punto, decimal-leading-zero); font-family: var(--v2-mono); font-size: 13px; color: var(--v2-tono); } html body:has(#divBloqueCredenciales) .d2-revela-lista.bloque-puntos li{ background-size: 0% 1px; transition: background-size 1.1s var(--v2-curva); } html body:has(#divBloqueCredenciales) .d2-revela-lista.bloque-puntos li:nth-child(2){ transition-delay: .12s; } html body:has(#divBloqueCredenciales) .d2-revela-lista.bloque-puntos li:nth-child(3){ transition-delay: .24s; } html body:has(#divBloqueCredenciales) .d2-revela-lista.bloque-puntos li:nth-child(4){ transition-delay: .36s; } html body:has(#divBloqueCredenciales) .d2-revela-lista.bloque-puntos li:nth-child(5){ transition-delay: .48s; } html body:has(#divBloqueCredenciales) .d2-revela-lista.bloque-puntos.d2-visto li{ background-size: 100% 1px; } /* en el proceso, las lineas entre pasos tambien se dibujan */ html body:has(#divBloqueCredenciales) section.d2-proceso .d2-revela-lista .accordion-item{ border-top-color: transparent !important; background: linear-gradient(var(--v2-linea), var(--v2-linea)) left top / 0% 1px no-repeat !important; transition: background-size 1.1s var(--v2-curva); } html body:has(#divBloqueCredenciales) section.d2-proceso .d2-revela-lista .accordion-item:nth-child(2){ transition-delay: .12s; } html body:has(#divBloqueCredenciales) section.d2-proceso .d2-revela-lista .accordion-item:nth-child(3){ transition-delay: .24s; } html body:has(#divBloqueCredenciales) section.d2-proceso .d2-revela-lista .accordion-item:nth-child(4){ transition-delay: .36s; } html body:has(#divBloqueCredenciales) section.d2-proceso .d2-revela-lista.d2-visto .accordion-item{ background-size: 100% 1px !important; } /* ---------- Cierre: la foto se mete en su marco y encima va el panel de contacto ---------- --d2-marco va de 0 (la foto ocupa todo el ancho, sin redondeo) a 1 (enmarcada). */ html body:has(#divBloqueCredenciales) #divBloqueCierre.d2-cierre{ position: relative; display: flex; align-items: flex-end; min-height: min(76vh, 660px); margin-top: 14px; padding: 0 !important; overflow: hidden; background-color: var(--v2-pagina) !important; /* un marco del color de la pagina alrededor, estirado hacia arriba: tapa el hueco con el panel de arriba y los recortes de sus esquinas, por donde se asomaba el bloque apilado de atras. Lo que nos diferencia va por encima (z-index 2), asi el marco no lo pisa. */ box-shadow: 0 -32px 0 var(--v2-margen) var(--v2-pagina); } /* El recorte que mete la foto en su marco va en la capa de la foto y no en el bloque (en el bloque tambien recortaria ese marco). El zoom va en la imagen de adentro: si fuera en la misma capa, agrandaria tambien el recorte y el marco recien se veria al final. */ html body:has(#divBloqueCredenciales) #divBloqueCierre .d2-cierre-foto{ position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(var(--d2-marco, 1) * var(--v2-margen)) round calc(var(--d2-marco, 1) * var(--v2-radio))); } html body:has(#divBloqueCredenciales) #divBloqueCierre .d2-cierre-imagen{ position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(calc(1 + (1 - var(--d2-marco, 1)) * .16)); will-change: transform; } html body:has(#divBloqueCredenciales) #divBloqueCierre .d2-cierre-foto::after{ content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(0, 17, 44, .6) 0%, rgba(0, 17, 44, 0) 60%), rgba(0, 45, 114, .42); } html body:has(#divBloqueCredenciales) #divBloqueCierre > .container{ position: relative; z-index: 1; width: 100%; padding-top: 120px !important; padding-bottom: 40px !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12{ display: block !important; max-width: 600px !important; padding: 44px 44px 40px !important; border-radius: 20px; background: rgba(238, 242, 247, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: left !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre h3.display-4{ font-size: clamp(32px, 3.2vw, 46px) !important; margin-bottom: 18px !important; max-width: 16ch; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12 > p{ color: var(--v2-texto) !important; -webkit-text-fill-color: var(--v2-texto) !important; font-size: 16px !important; line-height: 1.6 !important; max-width: none !important; margin: 0 0 26px !important; text-align: left !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12 > p:has(.btn){ display: flex !important; flex-wrap: wrap; gap: 10px; justify-content: flex-start !important; margin: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .btn{ margin: 0 !important; height: auto !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-primary{ background: var(--v2-verde) !important; border-color: var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-primary:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-outline-primary{ background: transparent !important; border: 1px solid rgba(0, 27, 69, .2) !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .btn.btn-outline-primary:hover{ background: var(--v2-tinta) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---------- Pie: panel oscuro con la marca gigante ---------- */ html body footer.text-inverse{ margin: 14px var(--v2-margen) var(--v2-margen) !important; border-radius: var(--v2-radio); background: var(--v2-tinta) !important; overflow: hidden; position: relative; } html body footer.text-inverse::after{ content: none !important; } html body footer.text-inverse .container{ max-width: 1240px !important; padding: 72px 40px 28px !important; } @media (min-width: 768px) { html body footer.text-inverse .footer-desktop{ display: grid !important; grid-template-columns: 1fr 1.5fr !important; grid-column-gap: 72px !important; justify-items: stretch !important; align-items: start !important; padding-bottom: 0 !important; } html body footer.text-inverse .footer-desktop > .col-lg-3:first-child{ grid-column: 1 !important; } html body footer.text-inverse .footer-desktop > .col-auto{ grid-column: 2 !important; grid-template-columns: 1fr 1fr !important; grid-column-gap: 32px !important; align-items: start !important; } } html body footer.text-inverse .footer-logo{ /* Dumar usa su propio logo blanco en el pie. */ height: 60px !important; } html body footer.text-inverse .footer-desktop > .col-lg-3:first-child .widget{ text-align: left !important; } html body footer.text-inverse .footer-desktop .widget a:has(> .footer-logo)::after{ margin-left: 0 !important; text-align: left !important; max-width: 340px !important; color: rgba(255, 255, 255, .56) !important; -webkit-text-fill-color: rgba(255, 255, 255, .56) !important; font-family: var(--v2-sans) !important; font-size: 14.5px !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) :is(.widget, .widget *:not(i), .puntos-venta-footer, .puntos-venta-footer *:not(i), .accordion-item, .accordion-item *:not(i)){ color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) :is(.footer-titulo, .widget-title, strong){ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-transform: none !important; letter-spacing: -.01em !important; font-size: 17px !important; font-weight: 600 !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) i{ color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) a:hover, html body footer.text-inverse :is(.footer-desktop, .footer-mobile) a:hover *{ color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } html body footer.text-inverse .puntos-venta-footer-mapa{ width: 100% !important; height: 220px !important; } html body footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas{ border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: none !important; } html body footer.text-inverse .puntos-venta-footer-mapa iframe{ filter: grayscale(.4) contrast(.95); } html body footer.text-inverse .footer-hr, html body footer.text-inverse .footer-desktop > .col-12 .footer-hr{ border-color: rgba(255, 255, 255, .12) !important; margin: 48px 0 20px !important; } html body footer.text-inverse .footer-desktop > .col-12{ margin-top: 0 !important; } html body footer.text-inverse .footer-desktop > .d-flex{ flex-direction: row !important; flex-wrap: wrap; justify-content: center !important; align-items: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{ display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px 24px !important; justify-content: center !important; align-items: center !important; text-align: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{ flex: 0 1 auto !important; width: auto !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina > span{ flex: 0 0 auto !important; width: auto !important; margin: 0 !important; justify-content: flex-start !important; align-items: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina p{ margin-bottom: 0 !important; } /* Las redes, contra el borde derecho: la fila pasa a tres columnas, con el texto en la del medio (sigue centrado) y las redes en la de la derecha. Con flex centrado quedaban pegadas a "Desarrollado por". */ html body footer.text-inverse .footer-desktop > .d-flex:has(> .pie-pagina + div > .social){ display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; align-items: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{ grid-column: 2; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina + div:has(> .social){ grid-column: 3; justify-self: end; } html body footer.text-inverse .pie-pagina, html body footer.text-inverse .pie-pagina *, html body footer.text-inverse .core-devs, html body footer.text-inverse .core-devs *{ color: rgba(255, 255, 255, .5) !important; -webkit-text-fill-color: rgba(255, 255, 255, .5) !important; font-size: 13px !important; } /* la marca, gigante y cortada por el borde de abajo */ html body footer.text-inverse .d2-marca{ display: flex; justify-content: center; margin: 12px 0 -.2em; padding: 0 12px; font-family: var(--v2-sans); font-size: 15vw; font-weight: 700; letter-spacing: -.065em; line-height: .86; white-space: nowrap; color: rgba(255, 255, 255, .05); pointer-events: none; user-select: none; } html body footer.text-inverse .d2-marca > span{ display: inline-block; transition: transform 1.2s var(--v2-curva), opacity 1s ease; transition-delay: calc(var(--d2-i, 0) * .04s); } html body footer.text-inverse.d2-marca-oculta .d2-marca > span{ transform: translateY(60%); opacity: 0; } /* ---------- Botones de los bloques: pastilla, verde profundo o en linea ---------- */ html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn:not(.btn-close):not(.btn-circle){ height: auto !important; border-radius: 999px !important; padding: 14px 24px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; } html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-primary{ background: var(--v2-verde) !important; border: 1px solid var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-primary:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-outline-primary{ background: transparent !important; border: 1px solid rgba(0, 27, 69, .2) !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body:has(#divBloqueCredenciales) section[id^="divBloque"] .btn.btn-outline-primary:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* La foto de cada envase destacado, redondeada como el resto */ html body:has(#divBloqueCredenciales) #divBloqueDistribuidores figure, html body:has(#divBloqueCredenciales) #divBloqueDistribuidores figure img{ border-radius: var(--v2-radio-tarjeta) !important; } /* ---------- Celular y tablet ---------- */ @media (max-width: 991.98px) { /* el menu flotante, mas pegado arriba y un poco mas ancho */ :root{ --mf-top: 13px; } html body .navbar.navbar-flotante{ width: calc(100% - 1.5rem) !important; } html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#divBloqueMetodologia){ padding-top: 72px !important; padding-bottom: 72px !important; } html body:has(#divBloqueCredenciales) .content-wrapper > section[id^="divBloque"] > .container, html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .container-sm{ padding-left: 22px !important; padding-right: 22px !important; } /* en el celular todos los paneles llevan el mismo margen que la portada */ html body:has(#divBloqueCredenciales) section.d2-apilada{ border-radius: 20px; } /* En el celular los paneles son mas altos que la pantalla: se quedan quietos cuando su borde de abajo llega al de la pantalla y el siguiente ya empieza a subir. Con mas aire abajo, el siguiente pasa primero por encima del espacio vacio y no del ultimo contenido. (La clase extra es para ganarle al relleno general de los bloques, que lleva tres ids en sus :not.) Distribuidores no: es mas bajo que la pantalla y entra entero, el aire le sobraba abajo. */ html body:has(#divBloqueCredenciales) .content-wrapper > section.d2-apilada[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#divBloqueDistribuidores):not(#d2), html body:has(#divBloqueCredenciales) .content-wrapper > #divBloqueMetodologia.d2-apilada:not(#d2):not(#d2b):not(#d2c){ padding-bottom: max(170px, 22vh) !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales:not(#d2){ padding: var(--v2-margen) var(--v2-margen) 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-wrapper{ grid-template-columns: repeat(2, minmax(0, 1fr)); } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#d2){ padding: 26px 20px 24px !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#d2):nth-child(odd){ border-left: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .swiper-slide:not(#d2):nth-child(n+3){ border-top: 1px solid var(--v2-linea) !important; } html body:has(#divBloqueCredenciales) section.d2-proceso > .container > h3.display-5{ margin-bottom: 36px !important; } html body:has(#divBloqueCredenciales) section.d2-proceso .row > div > figure{ min-height: 300px; height: 300px; } html body:has(#divBloqueCredenciales) section.d2-proceso .accordion-item .card-body{ padding: 0 0 26px 48px !important; } /* En el celular el cierre es una tarjeta blanca como los demas paneles: la foto va como franja arriba (apaisada, como es) y el texto debajo, sin montarse. Estirada a lo alto la foto quedaba recortada y el panel encimado parecia un error. */ html body:has(#divBloqueCredenciales) #divBloqueCierre.d2-cierre:not(#d2){ display: block; min-height: 0; margin: var(--v2-margen) var(--v2-margen) 0 !important; border-radius: 20px; clip-path: none; background-color: #ffffff !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .d2-cierre-foto{ position: relative; inset: auto; height: 210px; clip-path: none; } html body:has(#divBloqueCredenciales) #divBloqueCierre .d2-cierre-imagen{ transform: none; } html body:has(#divBloqueCredenciales) #divBloqueCierre .d2-cierre-foto::after{ background: rgba(0, 45, 114, .25); } html body:has(#divBloqueCredenciales) #divBloqueCierre > .container{ margin: 0 !important; padding: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre > .container > .row{ margin-left: 0 !important; margin-right: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueCierre .row.text-center > .col-12{ max-width: none !important; padding: 28px 22px 26px !important; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } html body:has(#divBloqueCredenciales) #divBloqueCredenciales .banner-icon-svg-wrapper{ height: 64px; margin-bottom: 18px !important; } html body footer.text-inverse{ margin: var(--v2-margen) !important; border-radius: 20px; } html body footer.text-inverse .container{ padding: 52px 22px 22px !important; } html body footer.text-inverse .footer-mobile{ padding-bottom: 0 !important; } /* la version 1 bajaba el copyright 200px para dejarlo sobre la foto de tierra, que aca no esta */ html body footer.text-inverse .footer-mobile > .pie-pagina:not(#d2){ margin-top: 12px !important; } } /* ===================================================================================== DUMAR 2 — LO PROPIO DE DUMAR Lo de arriba es la capa de Green Family 2 copiada tal cual. Esto es lo que Dumar necesita distinto: el subrayado del menu (en gf2 vive en su version 1, que Dumar no tiene) y los bloques que Green Family no tiene: Sectores e Historia. El apilado es el de Green Family 2 tal cual: el panel de abajo se achica y se oscurece mientras el siguiente le pasa por encima. Hubo una version recta (sin achicarse ni oscurecerse) y se volvio a esta el 26/09/2026. ===================================================================================== */ /* ---------- El subrayado de las opciones del menú ---------- */ /* Una linea de fondo anclada a la caja del texto que crece de izquierda a derecha al pasar el mouse y se recoge al salir. El texto toma el MISMO color que la linea (lo hace la capa v2). */ .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link { --linea-menu: var(--v2-verde-medio); text-decoration: none; background-image: linear-gradient(var(--linea-menu), var(--linea-menu)); background-repeat: no-repeat; background-origin: content-box; background-clip: padding-box; background-position: 0 calc(100% + 3px); background-size: 0 2px; transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color .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 { background-size: 100% 2px; } .navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-collapse .navbar-nav > .nav-item > .nav-link { --linea-menu: var(--v2-lima); } .navbar.navbar-bg-color-secundario .navbar-other .nav-link, .navbar.navbar-bg-color-secundario .navbar-other .nav-link:hover { background-image: none !important; text-decoration: none !important; } /* ---------- Fondos de los paneles que Green Family no tiene ---------- */ /* Todos opacos: un panel transparente deja ver el de atras cuando se apilan. */ html body:has(#divBloqueCredenciales) .content-wrapper > section#divBloqueDistribuidores.d2-apilada:not(#d2):not(#d2b) { background-color: #ffffff !important; } html body:has(#divBloqueCredenciales) .content-wrapper > section#divBloqueCapacidades.d2-apilada:not(#d2):not(#d2b) { background-color: var(--v2-panel) !important; } html body:has(#divBloqueCredenciales) .content-wrapper > section#divBloqueHistoria.d2-apilada:not(#d2):not(#d2b) { background-color: #ffffff !important; } /* ---------- El bloque animado: su degradado ---------- */ /* Cuando Metodologia era una grilla, la version 1 le puso `background: var(--in-fondo) !important`. Como es el atajo `background`, borra tambien la imagen, y con eso el degradado que el bloque animado trae del panel. En Green Family 2 no pasa porque el Ciclo nunca tuvo una regla asi. */ html body:has(#divBloqueCredenciales) .content-wrapper > section#divBloqueMetodologia:not(#d2):not(#d2b):not(#d2c) { background: linear-gradient(160deg, #002D72 0%, #001236 100%) !important; } /* ---------- Sectores: panel navy ---------- */ /* La misma grilla de "Lo que nos diferencia", sobre el navy de Dumar: la linea de cada fila se llena en verde claro al pasar el mouse. */ html body:has(#divBloqueCredenciales) .content-wrapper > section#divBloqueSectores.d2-apilada:not(#d2):not(#d2b) { background-color: var(--v2-tinta) !important; background-image: linear-gradient(160deg, #002D72 0%, #001B45 60%, #00122E 100%) !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores :is(h2, h3, h4, h5, .display-4, strong) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores :is(p, li, .lead) { color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores .d2-tono, html body:has(#divBloqueCredenciales) #divBloqueSectores .d2-tono * { color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } /* ---------- Historia: el enlace a la historia completa, debajo de la bajada ---------- */ /* Va dentro del propio panel, en el encabezado. Como bloque aparte subia apilado y tapaba los hitos. */ html body:has(#divBloqueCredenciales) #divBloqueHistoria:not(#d2) .row.text-center > .col-12 > p:has(> .btn) { margin: 28px 0 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueHistoria:not(#d2) .row.text-center > .col-12 > p:has(> .btn) .btn { margin: 0 !important; } /* ---------- Sectores como ficha técnica, sobre el navy ---------- */ /* La misma composicion de "Lo que nos diferencia", pero el panel es oscuro: las lineas entre filas van claras y la que recorre la fila al pasar el mouse, en verde claro. */ html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row > div { border-top-color: rgba(255, 255, 255, .14) !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row > div::before { background: var(--v2-lima) !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row > div:hover h4 { color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } /* ---------- Filas de "Lo que nos diferencia": título a la izquierda, texto a la derecha ---------- */ /* La version 1 de Dumar arma cada item como "icono | titulo" con el texto abajo ocupando todo el ancho, y para eso le fija a cada hijo su columna. En Green Family los hijos caen solos en su lugar, asi que esas columnas fijas los desacomodaban: el titulo quedaba a la derecha y el texto debajo. Se devuelven a la disposicion de la ficha tecnica. */ html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div > :is(h4, h5) { grid-column: 1 !important; grid-row: 1 !important; text-align: left !important; margin: 0 !important; } html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div > p { grid-column: 2 !important; grid-row: 1 !important; text-align: left !important; } @media (max-width: 991.98px) { html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores) .pricing-wrapper > .row > div > p { grid-column: 1 !important; grid-row: 2 !important; } } /* La bajada del encabezado, alineada con el titulo y no centrada. */ html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores) .row.text-center > .col-12 > p:not(.lead) { text-align: left !important; margin-top: 24px !important; max-width: 40ch; } /* ---------- Catálogo: la foto enmarcada ---------- */ /* En Green Family la foto del catalogo llena su marco redondeado. La de Dumar es un recorte sin fondo y quedaba suelta sobre el panel: se le da el fondo del marco para que se lea como una pieza. */ html body:has(#divBloqueCredenciales) #divBloqueCatalogo figure { padding: 36px 28px !important; border-radius: var(--v2-radio) !important; background: radial-gradient(120% 90% at 30% 20%, #f4f8fc 0%, #d9e4f1 70%, #cbd9eb 100%) !important; overflow: hidden; } /* La foto trae fondo blanco: con multiply ese blanco toma el color del marco y el producto queda apoyado sobre el fondo, en vez de verse el rectangulo de la foto adentro. */ html body:has(#divBloqueCredenciales) #divBloqueCatalogo figure img { border-radius: 0 !important; object-fit: contain; mix-blend-mode: multiply; } /* La bajada de Capacidades, alineada con el borde del titulo. */ html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores) .row.text-center > .col-12 > p:not(.lead) { margin-left: 0 !important; padding-left: 0 !important; } /* ---------- Encabezados con bajada: título y bajada contra el borde, en una columna ---------- */ /* En Green Family los titulares van a la izquierda en una sola columna. Capacidades, Sectores e Historia traen ademas una bajada, y la version 1 de Dumar las acomodaba centradas o en una grilla de dos columnas. Se fija la disposicion en vez de perseguir cada regla heredada: el titulo arriba, la bajada debajo con ancho de lectura, los dos contra el mismo borde. */ html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores, #divBloqueHistoria) .row.text-center > .col-12 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-items: start !important; text-align: left !important; padding-left: 12px !important; padding-right: 12px !important; } html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores, #divBloqueHistoria) .row.text-center > .col-12 > :is(h2, h3) { margin-left: 0 !important; margin-right: 0 !important; align-self: flex-start !important; } html body:has(#divBloqueCredenciales) :is(#divBloqueCapacidades, #divBloqueSectores, #divBloqueHistoria) .row.text-center > .col-12 > p:not(.lead) { align-self: flex-start !important; max-width: 46ch !important; margin: 22px 0 0 !important; text-align: left !important; font-size: 15.5px !important; line-height: 1.65 !important; } /* Historia tiene toda la columna: la bajada no puede atravesar el ancho entero. */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .row.text-center > .col-12 { margin-bottom: 56px !important; } /* ---------- Sectores: sin el recuadro de la versión 1 ---------- */ /* La version 1 le ponia a la grilla una caja con borde y fondo mas oscuro. En la ficha tecnica de Green Family solo hay lineas entre filas. */ html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper, html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row, html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row > div { background: transparent !important; box-shadow: none !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper, html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row { border: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row > div { border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } html body:has(#divBloqueCredenciales) #divBloqueSectores .pricing-wrapper > .row > div:first-child { border-top: 0 !important; } /* ---------- Distribuidores: la marquesina de dumarweb ---------- */ /* Los logos sin recuadro, deslizandose en loop continuo (marcas.php, que activa la marquesina por NOMBRE_PROYECTO): se probo la version con tarjetas de Green Family 2 y gusto mas esta. El titular va a la izquierda como el resto de los bloques. */ html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .row > [class*="col"]:has(> h2) { justify-content: flex-start !important; text-align: left !important; max-width: none !important; flex: 0 0 100% !important; margin: 0 !important; padding-left: 12px !important; } html body:has(#divBloqueCredenciales) #divBloqueDistribuidores h2.display-4 { padding: 0 !important; margin: 0 0 40px !important; text-align: left !important; } /* Los logos, a color y un poco mas grandes. La version 1 los pasaba a un duotono azul con un filtro SVG que algunos navegadores del celular no aplican: en la computadora se veian azules y en el telefono a color. Ahora van siempre con sus colores. */ html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .marcas-marquee-item img { height: 64px !important; filter: none !important; opacity: 1 !important; } @media (max-width: 991.98px) { html body:has(#divBloqueCredenciales) #divBloqueDistribuidores .marcas-marquee-item img { height: 56px !important; } } /* ---------- Historia: línea de tiempo ---------- */ /* La foto del hito abierto en un marco grande, con el año gigante detras, y los hitos en una lista con un riel a la izquierda. El tramo del riel del hito abierto se llena mientras corre el avance automatico, como la linea de los pasos del Proceso. */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt{ display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 72px; align-items: stretch; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-escena{ position: relative; min-height: 500px; margin: 0; border-radius: var(--v2-radio); overflow: hidden; background: radial-gradient(120% 90% at 78% 18%, rgba(127, 212, 180, .22) 0%, rgba(127, 212, 180, 0) 55%), linear-gradient(160deg, #eef3f9 0%, #d9e3f0 100%); } /* el año gigante: el que se va sube, el que llega entra desde abajo */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-anios{ position: absolute; left: 36px; right: 36px; bottom: 10px; height: clamp(120px, 13vw, 200px); overflow: hidden; pointer-events: none; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-anios > span{ position: absolute; left: 0; bottom: 0; font-family: var(--v2-sans); font-size: clamp(120px, 13vw, 200px); font-weight: 700; letter-spacing: -.06em; line-height: .86; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.5px rgba(0, 45, 114, .2); transform: translateY(105%); transition: transform .9s var(--v2-curva); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-anios > span.es-activo{ transform: none; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-anios > span.es-saliente{ transform: translateY(-105%); } /* la foto: la que llega se abre de abajo hacia arriba, la que se va se desvanece subiendo */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-fotos{ position: absolute; inset: 44px 44px 96px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-foto{ position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(24px) scale(.97); mix-blend-mode: multiply; transition: opacity .5s ease, clip-path 1s var(--v2-curva), transform 1.1s var(--v2-curva); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-foto.es-activa{ z-index: 2; opacity: 1; clip-path: inset(0 0 0 0); transform: none; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-foto.es-saliente{ z-index: 1; clip-path: inset(0 0 0 0); transform: translateY(-18px) scale(1.02); transition: opacity .7s ease, transform .9s var(--v2-curva); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-foto img{ width: 100% !important; height: 100% !important; object-fit: contain; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-rotulo{ position: absolute; top: 24px; right: 28px; z-index: 3; margin: 0; font-family: var(--v2-mono); font-size: 12px; letter-spacing: .04em; color: var(--v2-tono); } /* la lista: un riel vertical con un punto por hito */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hitos{ position: relative; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0 0 0 44px; list-style: none; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito{ position: relative; padding: 0 0 8px; } /* el riel: del punto de este hito al del siguiente */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito::before{ content: ""; position: absolute; left: -37px; top: 44px; bottom: -30px; width: 2px; background: var(--v2-linea); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito:last-child::before{ bottom: 0; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-tramo{ position: absolute; left: -37px; top: 44px; bottom: -30px; width: 2px; background: var(--v2-verde-medio); transform: scaleY(0); transform-origin: center top; pointer-events: none; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito:last-child .d2-lt-tramo{ bottom: 0; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.es-pasado .d2-lt-tramo{ transform: none; background: var(--v2-tinta); opacity: .35; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.d2-corriendo .d2-lt-tramo{ animation: d2-lt-avance 6s linear forwards; } @keyframes d2-lt-avance{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } } /* el punto: hueco si no llego, lleno si ya paso, con halo si es el abierto */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito::after{ content: ""; position: absolute; left: -44px; top: 30px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0, 27, 69, .25); background: #ffffff; box-shadow: 0 0 0 0 rgba(16, 132, 100, 0); transition: background-color .4s ease, border-color .4s ease, box-shadow .6s var(--v2-curva), transform .5s var(--v2-curva); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.es-pasado::after{ border-color: var(--v2-tinta); background: var(--v2-tinta); transform: scale(.75); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.es-activo::after{ border-color: var(--v2-verde-medio); background: var(--v2-verde-medio); box-shadow: 0 0 0 7px rgba(16, 132, 100, .14); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-boton{ display: flex; align-items: baseline; gap: 22px; width: 100%; padding: 26px 0 14px; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--v2-sans); color: var(--v2-tono); transition: color .3s ease; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-boton:hover, html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.es-activo .d2-lt-boton{ color: var(--v2-tinta); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-anio{ flex: 0 0 auto; width: 44px; font-family: var(--v2-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--v2-tono); transition: color .3s ease; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.es-activo .d2-lt-anio{ color: var(--v2-verde-medio); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-titulo{ font-size: clamp(20px, 1.7vw, 25px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; } /* el texto del hito abierto se despliega */ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-texto{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--v2-curva); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-texto > div{ overflow: hidden; padding-left: 66px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.es-activo .d2-lt-texto{ grid-template-rows: 1fr; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-texto p{ max-width: 42ch; margin: 0 0 14px !important; font-size: 16px !important; line-height: 1.65 !important; color: var(--v2-texto) !important; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .6s var(--v2-curva); } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito.es-activo .d2-lt-texto p{ opacity: 1; transform: none; transition-delay: .15s; } @media (max-width: 991px){ html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt{ grid-template-columns: minmax(0, 1fr); gap: 36px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-escena{ min-height: 0; aspect-ratio: 4 / 3.2; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-fotos{ inset: 28px 24px 64px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-anios{ left: 22px; right: 22px; height: 96px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-anios > span{ font-size: 96px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hitos{ padding-left: 36px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito::before, html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-tramo{ left: -29px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-hito::after{ left: -36px; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-texto > div{ padding-left: 0; } html body:has(#divBloqueCredenciales) #divBloqueHistoria .d2-lt-boton{ gap: 14px; } } /* ---------- Medicion de altos (custom.js) ---------- */ /* Mientras se mide el alto de un bloque con cada item abierto, nada anima: si no, el navegador empezaria transiciones entre los estados que se prueban. */ .d2-midiendo, .d2-midiendo *, .d2-midiendo *::before, .d2-midiendo *::after { transition: none !important; } @media (max-width: 991.98px) { /* El boton de accion del menu no entra en la barra del celular: descuadraba el logo y el menu. Contacto sigue a mano en las opciones del menu. */ html body .navbar .navbar-other .nav-item:has(> .boton-cta-menu) { display: none !important; } /* Historia: el boton de la historia completa, cerca de la linea de tiempo */ html body:has(#divBloqueCredenciales) #divBloqueHistoria:not(#d2) .row.text-center > .col-12 { margin-bottom: 14px !important; } }