/* ============================================================
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 = #158463 (verde Dumar: paneles y acentos)
Los tonos derivados viven solo acá.
============================================================ */
:root {
--dumar-navy: #002D72;
--dumar-navy-deep: #001B45;
--dumar-green: #158463;
--dumar-green-soft: #E8EFF9;
--dumar-blue: #4A9FE0;
--dumar-bg-soft: #F5F8FC;
--dumar-border: #DCE6F2;
--dumar-text: #22303F;
--dumar-muted: #6B7C90;
--dumar-grad: linear-gradient(100deg, #002D72 0%, #158463 100%);
--dumar-grad-verde: linear-gradient(100deg, #106B50 0%, #158463 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(21, 132, 99, .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;
}
.card:hover,
.producto-card:hover,
.card-producto:hover,
.item-producto:hover {
transform: translateY(-4px);
border-color: rgba(21, 132, 99, .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, #106B50 0%, #158463 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(21, 132, 99, .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;
}
/* ---------- Quiénes somos ---------- */
/* Í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(21, 132, 99, .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;
}
/* ---------- 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|#ffffff */
html body:not(#\9):not(#\9) {
background-color: #ffffff !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#paginaInicio {
--in-navy: #002D72;
--in-navy-deep: #001B45;
--in-green: #158463;
--in-green-claro: #8FB3EA;
--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#paginaInicio #divBloqueEnfoque,
body#paginaInicio #divBloqueMetodologia,
body#paginaInicio #divBloqueCapacidades,
body#paginaInicio #divBloqueSectores,
body#paginaInicio #divBloqueHistoria,
body#paginaInicio #divBloqueCalidad,
body#paginaInicio #divBloqueCatalogo,
body#paginaInicio #divBloqueCierre {
padding: 104px 0 !important;
}
body#paginaInicio #divBloqueEnfoque,
body#paginaInicio #divBloqueCapacidades,
body#paginaInicio #divBloqueHistoria,
body#paginaInicio #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#paginaInicio #divBloqueMetodologia,
body#paginaInicio #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(21, 132, 99, .8);
margin-top: 30px !important;
}
#divBloqueEnfoque .btn-primary:hover,
#divBloqueCatalogo .btn-primary:hover,
#divBloqueCierre .btn-primary:hover {
background: #106B50 !important;
border-color: #106B50 !important;
filter: none !important;
box-shadow: 0 10px 24px -12px rgba(21, 132, 99, .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(21, 132, 99, .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#paginaInicio #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(143, 179, 234, .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#paginaInicio #divBloqueHistoria {
padding-bottom: 44px !important;
}
body#paginaInicio #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#paginaInicio #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#paginaInicio #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(143, 179, 234, .12);
border: 1px solid rgba(143, 179, 234, .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#paginaInicio #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#paginaInicio .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(21, 132, 99, .8) !important;
filter: none !important;
transform: none;
transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body#paginaInicio .swiper-hero .swiper-content .btn.rounded-pill:hover {
background-color: #106B50 !important;
border-color: #106B50 !important;
filter: none !important;
transform: translateY(-2px);
}
/* El segundo boton de cada slide va en linea, sin relleno ni sombra. */
body#paginaInicio .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#paginaInicio .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#paginaInicio .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#paginaInicio .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#paginaInicio .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#paginaInicio .swiper-hero .swiper-content .col-12 {
text-align: left !important;
margin-left: 0 !important;
}
body#paginaInicio .swiper-hero,
body#paginaInicio .swiper-hero .swiper,
body#paginaInicio .swiper-hero .swiper-slide {
min-height: 100vh;
min-height: 100svh;
}
body#paginaInicio .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#paginaInicio .swiper-hero .swiper-content .row > div {
max-width: 56%;
padding-bottom: 84px;
}
/* Los componentes de la portada, en orden: volanta, titular, bajada. */
body#paginaInicio .swiper-hero .swiper-content h1,
body#paginaInicio .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#paginaInicio .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#paginaInicio #divBloqueEnfoque,
body#paginaInicio #divBloqueMetodologia,
body#paginaInicio #divBloqueCapacidades,
body#paginaInicio #divBloqueSectores,
body#paginaInicio #divBloqueHistoria,
body#paginaInicio #divBloqueCalidad,
body#paginaInicio body#paginaInicio #divBloqueCatalogo,
body#paginaInicio #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: #158463;
--mf-fondo-portada: rgba(0, 27, 69, .22);
--mf-borde-portada: rgba(255, 255, 255, .16);
--mf-texto-portada: #ffffff;
--mf-texto-hover-portada: #8FB3EA;
}
/* 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: #8FB3EA;
}
/* 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 insumos de limpieza e higiene profesional para la industria e instituciones. 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: #8FB3EA !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: #8FB3EA;
font-size: 17px !important;
line-height: 1.4;
flex: 0 0 auto;
width: auto !important;
height: auto !important;
margin: 0 !important;
}
footer.text-inverse ul.puntos-venta-footer li > a {
display: flex;
align-items: flex-start;
gap: 10px;
}
footer.text-inverse ul.puntos-venta-footer li > span:only-child {
padding-left: 27px;
}
footer.text-inverse ul.puntos-venta-footer li span,
footer.text-inverse ul.puntos-venta-footer li a,
footer.text-inverse ul.puntos-venta-footer li strong {
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(227, 233, 242, .82);
}
footer.text-inverse ul.puntos-venta-footer .footer-titulo {
margin-bottom: 14px !important;
}
@media (min-width: 768px) and (max-width: 991.98px) {
footer.text-inverse .footer-desktop {
grid-template-columns: 1fr;
grid-row-gap: 36px;
}
footer.text-inverse .footer-desktop > .col-lg-3:first-child,
footer.text-inverse .footer-desktop > .col-auto,
footer.text-inverse .footer-desktop > .col-md-3 {
grid-column: 1;
}
}
/* Iconos de redes: circulo de linea en vez de glifos sueltos. */
footer.text-inverse .social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 50%;
color: rgba(255, 255, 255, .8);
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
footer.text-inverse .social a:hover {
border-color: #8FB3EA;
background: rgba(143, 179, 234, .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(#paginaInicio) #swiperPortadasHorizontal,
body:not(#paginaInicio) #swiperPortadasHorizontal .swiper,
body:not(#paginaInicio) #swiperPortadasHorizontal .swiper-slide {
min-height: 620px;
}
/* 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;
}
/* =====================================================================================
DUMAR 3 — LA DEMO 1 CON LO QUE PIDIO LUCIA
-------------------------------------------------------------------------------------
Todo lo de arriba es la demo 1 (dumarweb). Esta capa suma lo que pidio Lucia en el documento
de definiciones del institucional (docs/plans/tenant-demo-dumar3.md) y las piezas de la demo 2
que eligio, portadas desde assets/css/custom/dumar2/custom.css con el prefijo d3-:
- el bloque animado (Metodologia, modelo 19) con su panel oscuro,
- la linea de tiempo de Historia,
- el cierre con la foto que se mete en su marco y el panel claro encima,
- el apilado de tarjetas, solo en el bloque animado, Sectores e Historia.
Reglas de Lucia que valen para todo el sitio: menos verde (el de marca es #158463 y queda para
los botones principales), iconos de una misma familia (Unicons de linea) y el degrade de la demo 1
sobre las fotos. Cada bloque se reconoce por su id y por la pagina (body#paginaInicio), nunca por
sus vecinos: se pueden ocultar y reordenar desde el panel sin que cambie el resto.
===================================================================================== */
:root {
--d3-verde: #158463;
--d3-verde-hondo: #106B50;
--d3-navy: #002D72;
--d3-tinta: #001B45;
--d3-celeste: #8FB3EA;
--d3-panel: #F4F6F9;
--d3-linea: rgba(0, 27, 69, .1);
--d3-texto: #5A6B85;
--d3-tono: #7C8B9C;
--d3-violeta: #852577;
--d3-radio: 24px;
--d3-margen: 14px;
--d3-curva: cubic-bezier(.22, 1, .36, 1);
/* el degrade de la demo 1 sobre las fotos (referencia de Lucia: gradientsssss.png) */
--d3-degrade: linear-gradient(0deg, rgba(0, 17, 44, .5) 0%, rgba(0, 17, 44, 0) 58%), linear-gradient(rgba(0, 45, 114, .26), rgba(0, 45, 114, .26));
}
/* ---------- Portada ----------
Los titulares de Lucia son mas largos que los de la demo 1: la columna del texto se abre un poco
(de 56% a 62%) para que el primero no quede en cinco renglones. */
body#paginaInicio .swiper-hero .swiper-content .row > div {
max-width: 62%;
}
@media (max-width: 991.98px) {
body#paginaInicio .swiper-hero .swiper-content .row > div {
max-width: 100%;
}
}
/* ---------- Menos verde: los acentos de la home pasan al azul de marca ----------
El verde queda en los botones principales. Los iconos y los tildes van en navy sobre fondo claro
y en celeste sobre fondo oscuro. */
body#paginaInicio .bloque-item-icono {
background: #EAF0F9 !important;
}
body#paginaInicio .bloque-item-icono i,
body#paginaInicio .bloque-puntos li > span:first-child i {
color: var(--d3-navy) !important;
}
body#paginaInicio #divBloqueSectores .bloque-item-icono {
background: rgba(143, 179, 234, .12) !important;
}
body#paginaInicio #divBloqueSectores .bloque-item-icono i {
color: var(--d3-celeste) !important;
}
/* ---------- Fotos con el degrade de la demo 1 ----------
Va por CSS sobre el marco de la foto: cualquier foto que se cargue desde el panel lo toma. */
body#paginaInicio :is(#divBloqueCatalogo, #divBloqueCalidad) figure.rounded {
position: relative;
overflow: hidden;
border-radius: 14px;
}
body#paginaInicio :is(#divBloqueCatalogo, #divBloqueCalidad) figure.rounded::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--d3-degrade);
pointer-events: none;
}
/* ---------- Distribuidores: la marquesina azul, con opacidad completa ----------
Lucia: "en azul todos los logos como en la demo 1... sin transparencias, full opacidad, pero que
vayan moviendose". El duotono azul es el de la demo 1, sin el atenuado. */
body#paginaInicio #divBloqueDistribuidores .marcas-marquee-item,
body#paginaInicio #divBloqueDistribuidores .marcas-marquee-item img {
opacity: 1 !important;
}
/* ---------- Allia: texto + foto, como Calidad ----------
Bloque nuevo: toma el encabezado y la composicion del modelo 3 de la demo 1. El mapa es una
ilustracion con fondo transparente: entra entero, sin recorte ni degrade. */
body#paginaInicio #divBloqueAllia {
padding: 104px 0 !important;
background: #ffffff !important;
}
#divBloqueAllia > .container {
max-width: 1240px;
padding-left: 32px;
padding-right: 32px;
}
#divBloqueAllia .row.text-center > .col-12 {
display: grid;
grid-template-columns: 1.15fr 1fr;
grid-column-gap: 80px;
align-items: end;
text-align: left;
}
#divBloqueAllia .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;
}
#divBloqueAllia .row.gx-lg-0 {
margin-top: 56px !important;
margin-bottom: 0 !important;
align-items: center !important;
--bs-gutter-y: 44px;
}
#divBloqueAllia figure.rounded {
margin: 0;
display: flex;
justify-content: center;
}
#divBloqueAllia figure.rounded img {
width: auto;
max-width: 100%;
max-height: 560px;
height: auto;
object-fit: contain;
}
#divBloqueAllia .row.gx-lg-0 .display-5 {
display: none;
}
#divBloqueAllia .row.gx-lg-0 p {
font-size: 16px;
color: var(--in-gris);
line-height: 1.7;
}
@media (min-width: 992px) {
#divBloqueAllia .row.gx-lg-0 > div {
margin-top: 0 !important;
}
}
/* ---------- Capacidades: el esquema de la demo 1, con una entrada ----------
Sin bajada (Lucia paso solo el titulo y los items). Cada item sube y aparece, de a uno, y su icono
se abre desde el centro. Las clases las pone custom.js solo con movimiento. */
body#paginaInicio #divBloqueCapacidades .display-4 {
max-width: none;
}
body#paginaInicio #divBloqueCapacidades .pricing-wrapper > .row > div.d3-entra {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .9s var(--d3-curva);
transition-delay: calc(var(--d3-i, 0) * .09s);
}
body#paginaInicio #divBloqueCapacidades .pricing-wrapper > .row > div.d3-entra .bloque-item-icono {
transform: scale(.6);
opacity: 0;
transition: transform .8s var(--d3-curva), opacity .5s ease;
transition-delay: calc(var(--d3-i, 0) * .09s + .2s);
}
body#paginaInicio #divBloqueCapacidades .pricing-wrapper > .row > div.d3-entra.d3-visto,
body#paginaInicio #divBloqueCapacidades .pricing-wrapper > .row > div.d3-entra.d3-visto .bloque-item-icono {
opacity: 1;
transform: none;
}
/* ---------- Tarjetas: la forma ----------
Los tres bloques que se apilan (los de APILADAS_D3 en custom.js) son tarjetas redondeadas,
despegadas de los bordes y opacas. La forma va por id y no por la clase d3-apilada: sin
movimiento (o si el script falla) se ven igual, solo que no se apilan. El :not(#d3) suma un id
para ganarle a los fondos de la demo 1, que llevan dos. */
html body#paginaInicio .content-wrapper > :is(#divBloqueMetodologia, #divBloqueSectores, #divBloqueHistoria):not(#d3) {
margin: var(--d3-margen) var(--d3-margen) 0 !important;
border-radius: var(--d3-radio);
box-shadow: 0 -24px 48px -32px rgba(0, 27, 69, .28);
}
html body#paginaInicio .content-wrapper > section#divBloqueMetodologia:not(#d3) {
background: linear-gradient(160deg, #002D72 0%, #001236 100%) !important;
overflow: hidden;
}
html body#paginaInicio .content-wrapper > section#divBloqueSectores:not(#d3) {
background: var(--in-navy-deep) !important;
}
html body#paginaInicio .content-wrapper > section#divBloqueHistoria:not(#d3) {
background: var(--d3-panel) !important;
}
/* ---------- Tarjetas: el apilado (de dumar2) ----------
Solo el movimiento, con la clase d3-apilada que custom.js pone si el visitante no pidio menos
movimiento. --d3-tope deja quieta la tarjeta cuando su borde de abajo llega al de la pantalla y
--d3-cubierto (0 a 1) la achica y la oscurece mientras el bloque siguiente le pasa por encima. */
html body#paginaInicio section.d3-apilada {
position: sticky !important;
top: var(--d3-tope, 0px);
transform-origin: 50% 0;
transform: scale(calc(1 - var(--d3-cubierto, 0) * .05));
}
html body#paginaInicio section.d3-apilada::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: #00112C;
opacity: calc(var(--d3-cubierto, 0) * .38);
pointer-events: none;
z-index: 5;
}
/* una tarjeta ya tapada del todo no se dibuja: asi no asoma por los margenes de la siguiente */
html body#paginaInicio section.d3-apilada.d3-tapada {
opacity: 0 !important;
pointer-events: none;
}
/* Los bloques que no se apilan van posicionados y en su propio plano (z-index 0): todos se pintan en
el orden de la pagina y cada uno pasa por encima de la tarjeta quieta que tenga arriba, sea cual
sea. Cada uno trae su fondo opaco de la demo 1 (Allia lo trae de esta capa). */
html body#paginaInicio .content-wrapper > section:not(.d3-apilada):not(#d3) {
position: relative;
z-index: 0;
}
/* ---------- El bloque animado (Metodologia, modelo 19): panel oscuro ----------
De dumar2. El fondo sale del bloque (blq_fondo) y lo repite la forma de la tarjeta, porque la
demo 1 le ponia a Metodologia un background gris con !important que borraba el degrade. La escena
y la lista de pasos las pinta la animacion (blq_animacion): aca van el aire, el ancho y los textos. */
body#paginaInicio #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 !important;
-webkit-text-fill-color: #ffffff !important;
max-width: 30ch;
margin: 0 0 18px !important;
}
/* "El mismo método en cada planta.": el segundo titular, en el celeste de los fondos oscuros */
#divBloqueMetodologia .bloque-animado-subtitulo {
font-family: "Raleway", "Poppins", sans-serif;
font-size: clamp(20px, 1.9vw, 26px) !important;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.25;
color: var(--d3-celeste);
margin: 0 0 22px !important;
}
#divBloqueMetodologia .bloque-animado-descripcion {
max-width: 62ch !important;
}
#divBloqueMetodologia .bloque-animado-descripcion p {
font-size: 16px;
line-height: 1.65;
color: rgba(255, 255, 255, .72);
margin: 0 0 12px;
}
/* El boton de los pasos 01 y 02 (en la descripcion del paso): pastilla en linea, clara. En los pasos
que no estan abiertos acompaña al texto, atenuado. */
#divBloqueMetodologia .bloque-animado-paso-descripcion p:has(> .btn) {
margin-top: 12px !important;
}
#divBloqueMetodologia .bloque-animado-paso-descripcion .btn {
display: inline-flex;
align-items: center;
padding: 7px 16px !important;
border: 1px solid rgba(255, 255, 255, .34) !important;
border-radius: 999px !important;
background: transparent !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 13.5px !important;
font-weight: 600;
line-height: 1.3;
box-shadow: none !important;
transition: background-color .25s ease, border-color .25s ease, opacity .4s ease;
}
#divBloqueMetodologia .bloque-animado-paso-descripcion .btn:hover {
background: rgba(255, 255, 255, .1) !important;
border-color: #ffffff !important;
transform: none;
}
#divBloqueMetodologia .bloque-animado-paso:not(.es-activo) .bloque-animado-paso-descripcion .btn {
opacity: .45;
}
@media (max-width: 991.98px) {
body#paginaInicio #divBloqueMetodologia > .container {
padding-left: 20px;
padding-right: 20px;
}
#divBloqueMetodologia .bloque-animado {
--bs-gutter-x: 24px;
}
/* en el celular solo el paso abierto muestra su texto: con el boton necesita mas lugar */
#divBloqueMetodologia .bloque-animado-paso.es-activo .bloque-animado-paso-descripcion {
max-height: 280px !important;
}
}
/* ---------- Sectores: la ficha de la demo 1, con ocho sectores ----------
Cuatro por fila en la computadora, dos en tablet y uno en el celular. */
#divBloqueSectores .pricing-wrapper > .row {
grid-template-columns: repeat(4, 1fr) !important;
}
#divBloqueSectores .pricing-wrapper > .row > div {
padding: 30px 26px 34px !important;
}
@media (max-width: 1199.98px) {
#divBloqueSectores .pricing-wrapper > .row {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 767.98px) {
#divBloqueSectores .pricing-wrapper > .row {
grid-template-columns: 1fr !important;
}
}
/* ---------- Historia: linea de tiempo (de dumar2) ----------
Vale en cualquier pagina con un bloque llamado Historia (la home y Quienes somos): el :not(#d3)
reemplaza al id del body y deja la misma especificidad.
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. Menos verde: el hito abierto va en el navy de marca. */
html body #divBloqueHistoria:not(#d3) .d3-lt {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
gap: 72px;
align-items: stretch;
margin-top: 56px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-escena {
position: relative;
min-height: 500px;
margin: 0;
border-radius: var(--d3-radio);
overflow: hidden;
background:
radial-gradient(120% 90% at 78% 18%, rgba(143, 179, 234, .3) 0%, rgba(143, 179, 234, 0) 55%),
linear-gradient(160deg, #ffffff 0%, #dfe7f2 100%);
}
/* el año gigante: el que se va sube, el que llega entra desde abajo */
html body #divBloqueHistoria:not(#d3) .d3-lt-anios {
position: absolute;
left: 36px;
right: 36px;
bottom: 10px;
height: clamp(120px, 13vw, 200px);
overflow: hidden;
pointer-events: none;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios > span {
position: absolute;
left: 0;
bottom: 0;
font-family: "Raleway", "Poppins", sans-serif;
font-size: clamp(120px, 13vw, 200px);
font-weight: 800;
letter-spacing: -.05em;
line-height: .86;
/* relleno y recortado por dentro con el filtro #d3ContornoAnio (custom.js): queda solo el borde */
color: #002D72;
-webkit-text-fill-color: #002D72;
-webkit-text-stroke: 0;
filter: url(#d3ContornoAnio);
opacity: .22;
transform: translateY(150%);
transition: none;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios > span.es-activo {
transform: none;
transition: transform .9s var(--d3-curva);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios > span.es-saliente {
transform: translateY(-150%);
transition: transform .9s var(--d3-curva);
}
/* la foto: la que llega se abre de abajo hacia arriba, la que se va se desvanece subiendo. Los
collages tienen fondo blanco: se integran al marco con multiply sobre la capa */
html body #divBloqueHistoria:not(#d3) .d3-lt-fotos {
position: absolute;
inset: 44px 44px 96px;
}
html body #divBloqueHistoria:not(#d3) .d3-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(--d3-curva), transform 1.1s var(--d3-curva);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-foto.es-activa {
z-index: 2;
opacity: 1;
clip-path: inset(0 0 0 0);
transform: none;
}
html body #divBloqueHistoria:not(#d3) .d3-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(--d3-curva);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-foto img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
/* la lista: un riel vertical con un punto por hito */
html body #divBloqueHistoria:not(#d3) .d3-lt-hitos {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
padding: 0 0 0 44px;
list-style: none;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito {
position: relative;
padding: 0 0 4px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito::before {
content: "";
position: absolute;
left: -37px;
top: 34px;
bottom: -20px;
width: 2px;
background: var(--d3-linea);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito:last-child::before {
bottom: 0;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-tramo {
position: absolute;
left: -37px;
top: 34px;
bottom: -20px;
width: 2px;
background: var(--d3-navy);
transform: scaleY(0);
transform-origin: center top;
pointer-events: none;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito:last-child .d3-lt-tramo {
bottom: 0;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.es-pasado .d3-lt-tramo {
transform: none;
background: var(--d3-tinta);
opacity: .35;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.d3-corriendo .d3-lt-tramo {
animation: d3-lt-avance 6s linear forwards;
}
@keyframes d3-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 #divBloqueHistoria:not(#d3) .d3-lt-hito::after {
content: "";
position: absolute;
left: -44px;
top: 20px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(0, 27, 69, .25);
background: #ffffff;
box-shadow: 0 0 0 0 rgba(0, 45, 114, 0);
transition: background-color .4s ease, border-color .4s ease, box-shadow .6s var(--d3-curva), transform .5s var(--d3-curva);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.es-pasado::after {
border-color: var(--d3-tinta);
background: var(--d3-tinta);
transform: scale(.75);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.es-activo::after {
border-color: var(--d3-navy);
background: var(--d3-navy);
box-shadow: 0 0 0 7px rgba(0, 45, 114, .14);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-boton {
display: flex;
align-items: baseline;
gap: 22px;
width: 100%;
padding: 16px 0 10px;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
font-family: "Raleway", "Poppins", sans-serif;
color: var(--d3-tono);
transition: color .3s ease;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-boton:hover,
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.es-activo .d3-lt-boton {
color: var(--d3-tinta);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anio {
flex: 0 0 auto;
width: 44px;
font-family: "Poppins", sans-serif;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--d3-tono);
transition: color .3s ease;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.es-activo .d3-lt-anio {
color: var(--d3-navy);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-titulo {
font-size: clamp(18px, 1.5vw, 22px);
font-weight: 700;
letter-spacing: -.015em;
line-height: 1.25;
}
/* el texto del hito abierto se despliega */
html body #divBloqueHistoria:not(#d3) .d3-lt-texto {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .6s var(--d3-curva);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-texto > div {
overflow: hidden;
padding-left: 66px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.es-activo .d3-lt-texto {
grid-template-rows: 1fr;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-texto p {
max-width: 46ch;
margin: 0 0 12px !important;
font-size: 15px !important;
line-height: 1.65 !important;
color: var(--d3-texto) !important;
opacity: 0;
transform: translateY(8px);
transition: opacity .4s ease, transform .6s var(--d3-curva);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito.es-activo .d3-lt-texto p {
opacity: 1;
transform: none;
transition-delay: .15s;
}
/* El boton del hito (en 2023, "Conocé más de Allia"): pastilla navy, y violeta (el de Allia) cuando
lleva al bloque de Allia, como pidio Lucia. */
html body #divBloqueHistoria:not(#d3) .d3-lt-texto p.d3-lt-accion {
margin: 4px 0 16px !important;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-enlace.btn {
display: inline-flex;
margin: 0 !important;
padding: 10px 20px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--d3-navy) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 14px !important;
font-weight: 600;
box-shadow: none !important;
transition: filter .25s ease, transform .25s ease;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-enlace.btn[href*="Allia"] {
background: linear-gradient(100deg, #6A1C5F 0%, var(--d3-violeta) 45%, #A6409A 100%) !important;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-enlace.btn:hover {
filter: brightness(1.12);
transform: translateY(-1px);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-enlace.btn label {
margin: 0;
color: inherit;
-webkit-text-fill-color: inherit;
}
@media (max-width: 991px) {
html body #divBloqueHistoria:not(#d3) .d3-lt {
grid-template-columns: minmax(0, 1fr);
gap: 36px;
margin-top: 36px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-escena {
min-height: 0;
aspect-ratio: 4 / 3.2;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-fotos {
inset: 28px 24px 64px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios {
left: 22px;
right: 22px;
height: 96px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios > span {
font-size: 96px;
}
/* la lista tiene reservado el alto del hito mas largo abierto: arriba, pegada a la foto */
html body #divBloqueHistoria:not(#d3) .d3-lt-hitos {
padding-left: 36px;
justify-content: flex-start;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito::before,
html body #divBloqueHistoria:not(#d3) .d3-lt-tramo {
left: -29px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito::after {
left: -36px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-texto > div {
padding-left: 0;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-boton {
gap: 14px;
}
}
/* ---------- Cierre (de dumar2): la foto se mete en su marco y encima va el panel claro ----------
Vale en cualquier pagina con un bloque llamado Cierre (la home y Quienes somos).
--d3-marco va de 0 (la foto ocupa todo el ancho, sin redondeo) a 1 (enmarcada). La foto es la de
fondo del bloque (blq_fondo_imagen): custom.js la pasa a su capa. */
html body #divBloqueCierre:not(#d3).d3-cierre {
position: relative;
display: flex;
align-items: flex-end;
min-height: min(76vh, 660px);
margin-top: var(--d3-margen);
padding: 0 !important;
overflow: hidden;
background-color: #ffffff !important;
background-image: none !important;
}
html body #divBloqueCierre:not(#d3) .d3-cierre-foto {
position: absolute;
inset: 0;
overflow: hidden;
clip-path: inset(0 calc(var(--d3-marco, 1) * var(--d3-margen)) round calc(var(--d3-marco, 1) * var(--d3-radio)));
}
html body #divBloqueCierre:not(#d3) .d3-cierre-imagen {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(calc(1 + (1 - var(--d3-marco, 1)) * .16));
will-change: transform;
}
html body #divBloqueCierre:not(#d3) .d3-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 #divBloqueCierre:not(#d3).d3-cierre > .container {
position: relative;
z-index: 1;
width: 100%;
padding-top: 120px !important;
padding-bottom: 40px !important;
}
html body #divBloqueCierre:not(#d3).d3-cierre .row.text-center > .col-12 {
display: block !important;
max-width: 600px !important;
margin: 0 !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 #divBloqueCierre:not(#d3).d3-cierre h3.display-4 {
font-size: clamp(32px, 3.2vw, 46px) !important;
margin-bottom: 18px !important;
max-width: 16ch;
color: var(--d3-tinta) !important;
-webkit-text-fill-color: var(--d3-tinta) !important;
}
html body #divBloqueCierre:not(#d3).d3-cierre .row.text-center > .col-12 > p {
color: var(--d3-texto) !important;
-webkit-text-fill-color: var(--d3-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 #divBloqueCierre:not(#d3).d3-cierre .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 #divBloqueCierre:not(#d3).d3-cierre .btn {
margin: 0 !important;
height: 50px !important;
padding: 0 26px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center;
font-size: 15px;
font-weight: 600;
box-shadow: none !important;
transform: none !important;
}
html body #divBloqueCierre:not(#d3).d3-cierre .btn.btn-primary {
background: var(--d3-verde) !important;
border: 1px solid var(--d3-verde) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html body #divBloqueCierre:not(#d3).d3-cierre .btn.btn-primary:hover {
background: var(--d3-tinta) !important;
border-color: var(--d3-tinta) !important;
}
html body #divBloqueCierre:not(#d3).d3-cierre .btn.btn-outline-primary {
background: transparent !important;
border: 1px solid rgba(0, 27, 69, .22) !important;
color: var(--d3-tinta) !important;
-webkit-text-fill-color: var(--d3-tinta) !important;
}
html body #divBloqueCierre:not(#d3).d3-cierre .btn.btn-outline-primary:hover {
background: var(--d3-tinta) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* ---------- Pie: el de la demo 1, en una tarjeta redondeada (como la demo 2) ----------
Sin el nombre gigante de la demo 2. Los dos fijos van en una linea (custom.js los junta). */
html body footer.text-inverse {
margin: var(--d3-margen) !important;
border-radius: var(--d3-radio);
overflow: hidden;
position: relative;
}
/* Los titulos de las columnas, en tipo oracion: Lucia no quiere volantas en mayusculas chiquitas */
html body footer.text-inverse .footer-titulo,
html body footer.text-inverse .widget-title {
text-transform: none !important;
letter-spacing: -.01em !important;
font-size: 16px !important;
font-weight: 600 !important;
}
html body footer.text-inverse li.d3-fijos {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
}
html body footer.text-inverse li.d3-fijos > a {
display: inline-flex;
align-items: center;
}
html body footer.text-inverse .d3-fijos-separador {
color: rgba(227, 233, 242, .4);
font-size: 14px;
}
/* ---------- Medicion de altos (custom.js) ----------
Mientras se mide el alto de un bloque con cada item abierto, nada anima. */
.d3-midiendo,
.d3-midiendo *,
.d3-midiendo *::before,
.d3-midiendo *::after {
transition: none !important;
}
/* ---------- Celular y tablet ---------- */
@media (max-width: 991.98px) {
body#paginaInicio #divBloqueAllia,
body#paginaInicio #divBloqueCatalogo {
padding: 64px 0 !important;
}
#divBloqueAllia > .container {
padding-left: 24px;
padding-right: 24px;
}
#divBloqueAllia .row.text-center > .col-12 {
grid-template-columns: 1fr;
}
#divBloqueAllia .row.gx-lg-0 {
margin-top: 28px !important;
}
#divBloqueAllia .row.gx-lg-0 > div + div {
margin-top: 32px !important;
}
#divBloqueAllia figure.rounded img {
max-height: 420px;
}
html body#paginaInicio .content-wrapper > :is(#divBloqueMetodologia, #divBloqueSectores, #divBloqueHistoria):not(#d3) {
border-radius: 20px;
}
/* En el celular las tarjetas son mas altas que la pantalla: se quedan quietas cuando su borde de
abajo llega al de la pantalla y el bloque siguiente ya empieza a subir. Con mas aire abajo, el
siguiente pasa primero por encima del espacio vacio y no del ultimo contenido. Es aire del
apilado: sin movimiento no se apilan y no hace falta. */
html body#paginaInicio .content-wrapper > section.d3-apilada:not(#d3):not(#d3b) {
padding-bottom: max(170px, 22vh) !important;
}
/* En el celular el cierre es una tarjeta: la foto va como franja arriba y el texto debajo, sin
montarse (estirada a lo alto la foto quedaba recortada). */
html body #divBloqueCierre:not(#d3).d3-cierre:not(#d3) {
display: block;
min-height: 0;
margin: var(--d3-margen) var(--d3-margen) 0 !important;
border-radius: 20px;
background-color: var(--d3-panel) !important;
}
html body #divBloqueCierre:not(#d3) .d3-cierre-foto {
position: relative;
inset: auto;
height: 210px;
clip-path: none;
}
html body #divBloqueCierre:not(#d3) .d3-cierre-imagen {
transform: none;
}
html body #divBloqueCierre:not(#d3) .d3-cierre-foto::after {
background: rgba(0, 45, 114, .25);
}
html body #divBloqueCierre:not(#d3).d3-cierre > .container {
margin: 0 !important;
padding: 0 !important;
max-width: none;
}
html body #divBloqueCierre:not(#d3).d3-cierre > .container > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
html body #divBloqueCierre:not(#d3).d3-cierre .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 footer.text-inverse {
border-radius: 20px;
}
}
/* =====================================================================================
PAGINAS INTERNAS: Servicios, Soluciones, Novedades, Contacto y Quienes somos
-------------------------------------------------------------------------------------
El mismo lenguaje que la home: titulares Raleway 800 en navy, texto gris, tarjetas redondeadas,
iconos Unicons de linea en navy y el verde de marca solo en los botones principales y el WhatsApp.
Todo el contenido sale de bloques del panel: cada regla cuelga del id del bloque (divBloque + su
nombre sin espacios), asi que renombrar un bloque le saca el diseño.
En las internas los bloques viven dentro del contenedor de la seccion (#divContenido > .container):
el contenedor propio de cada bloque se anula para que no sume otro margen.
===================================================================================== */
body:not(#paginaInicio) {
--in-navy: #002D72;
--in-navy-deep: #001B45;
--in-green: #158463;
--in-green-claro: #8FB3EA;
--in-ink: #0B1B33;
--in-gris: #5A6B85;
--in-fondo: #F4F6F9;
--in-linea: #E1E7F0;
--in-linea-oscura: rgba(255, 255, 255, .14);
}
#divContenido > .container,
#divContacto > .container {
max-width: 1240px;
padding-left: 32px;
padding-right: 32px;
}
#divContenido > .container > section.wrapper > .container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
#divContenido > .container > section.wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 96px;
background: transparent;
}
/* Con portada (Servicios, Quienes somos): aire entre la foto y el primer bloque */
#divContenido.seccion-hero > .container {
margin-top: 0 !important;
padding-top: 88px !important;
padding-bottom: 0 !important;
}
/* Las portadas de las internas: la estetica de la de la home (foto con el velo navy desde la
izquierda, que se configura en la portada, el texto a la izquierda en el ancho de la home y el menu
flotante sobre la foto, que lo decide solo el sistema cuando la portada queda arriba de todo: por
eso las internas van sin ruta de navegacion). Son mas bajas que la de la home para que el
contenido aparezca enseguida (Lucia pidio la de Quienes somos "que no ocupe toda la pantalla").
Mismas reglas que body#paginaInicio .swiper-hero, con la misma especificidad. */
body:not(#paginaInicio) :is(#swiperPortadasHorizontal, #swiperPortadasVertical),
body:not(#paginaInicio) :is(#swiperPortadasHorizontal, #swiperPortadasVertical) .swiper,
body:not(#paginaInicio) :is(#swiperPortadasHorizontal, #swiperPortadasVertical) .swiper-slide {
height: 72vh !important;
height: 72svh !important;
min-height: 560px;
}
body:not(#paginaInicio) .swiper-hero .swiper-content {
max-width: 1240px;
padding-left: 32px;
padding-right: 32px;
padding-top: 96px;
}
body:not(#paginaInicio) .swiper-hero .swiper-content .col-12 {
text-align: left !important;
margin-left: 0 !important;
}
body:not(#paginaInicio) .swiper-hero .swiper-content .row > div {
max-width: 62%;
padding-bottom: 40px;
}
body:not(#paginaInicio) .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:not(#paginaInicio) .swiper-hero .portada-texto-normal {
max-width: 46ch;
font-size: 18px !important;
line-height: 1.6 !important;
margin-bottom: 8px !important;
}
@media (max-width: 991.98px) {
body:not(#paginaInicio) .swiper-hero .swiper-content {
padding-left: 20px;
padding-right: 20px;
}
body:not(#paginaInicio) .swiper-hero .swiper-content .row > div {
max-width: 100%;
}
}
@media (max-width: 575.98px) {
body:not(#paginaInicio) :is(#swiperPortadasHorizontal, #swiperPortadasVertical),
body:not(#paginaInicio) :is(#swiperPortadasHorizontal, #swiperPortadasVertical) .swiper,
body:not(#paginaInicio) :is(#swiperPortadasHorizontal, #swiperPortadasVertical) .swiper-slide {
height: 76vh !important;
height: 76svh !important;
min-height: 520px;
}
body:not(#paginaInicio) .swiper-hero .portada-texto-normal {
font-size: 16.5px !important;
}
}
/* Sin portada (Soluciones, Contacto, Novedades): el titulo de la seccion, como los de la home */
#divContenido h1.titulo-seccion {
font-family: "Raleway", "Poppins", sans-serif;
font-size: clamp(32px, 3.6vw, 50px) !important;
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.08;
color: var(--d3-navy);
margin: 8px 0 56px !important;
}
/* Iconos de los componentes: cuadro claro con el icono en navy (la demo 1 los tenia en verde) */
#divContenido .bloque-item-icono {
width: 48px;
height: 48px;
border-radius: 12px;
background: #EAF0F9;
margin: 0 0 18px;
}
#divContenido .bloque-item-icono .uil,
#divContenido .bloque-item-icono i {
font-size: 24px;
color: var(--d3-navy);
}
/* El subtitulo del componente (.meta): el theme lo pone en mayusculas chiquitas, aca va en tipo oracion */
#divContenido .pricing-wrapper .meta {
text-transform: none;
letter-spacing: 0;
}
/* Los numeros en Raleway salen en estilo antiguo: en telefonos y datos van alineados */
#divBloqueWhatsApp h4,
#divBloqueDatosdecontacto,
#divContacto {
font-variant-numeric: lining-nums;
}
/* El boton de un componente repite el icono del componente: en las internas va sin icono */
#divContenido .pricing-wrapper .btn i,
#divContenido .row.gx-lg-0 .btn i {
display: none;
}
#divContenido .btn label {
margin: 0;
color: inherit;
cursor: pointer;
}
/* Los textos de las tarjetas de las internas */
#divContenido .pricing-wrapper > .row > div > h4 {
font-family: "Raleway", "Poppins", sans-serif;
font-size: 19px !important;
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.3;
color: var(--d3-navy);
margin: 0 0 10px !important;
}
#divContenido .pricing-wrapper > .row > div > p {
font-size: 15px;
line-height: 1.65;
color: var(--d3-texto);
margin: 0 0 12px;
}
#divContenido .pricing-wrapper > .row {
--bs-gutter-x: 0;
--bs-gutter-y: 0;
margin: 0 !important;
}
#divContenido .pricing-wrapper > .row > div {
width: auto;
max-width: none;
}
#divContenido section.wrapper .pricing-wrapper,
#divContenido section.wrapper > .container > .row > .col-xl-12 {
padding-left: 0;
padding-right: 0;
}
#divContenido section.wrapper > .container > .row {
margin-left: 0;
margin-right: 0;
}
/* Boton secundario de las tarjetas (Escribinos, Contactanos): pastilla de linea navy */
#divBloqueServiciosbase .pricing-wrapper .btn,
#divBloqueServiciosclave .pricing-wrapper .btn {
align-self: flex-start;
display: inline-flex !important;
align-items: center;
height: 42px;
padding: 0 20px !important;
margin: 6px 0 0 !important;
border-radius: 999px !important;
background: transparent !important;
border: 1px solid rgba(0, 45, 114, .28) !important;
color: var(--d3-navy) !important;
font-size: 14px;
font-weight: 600;
box-shadow: none !important;
filter: none !important;
transform: none !important;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
#divBloqueServiciosbase .pricing-wrapper .btn:hover,
#divBloqueServiciosclave .pricing-wrapper .btn:hover {
background: var(--d3-navy) !important;
border-color: var(--d3-navy) !important;
color: #ffffff !important;
}
#divBloqueServiciosbase .pricing-wrapper .btn::after,
#divBloqueServiciosclave .pricing-wrapper .btn::after {
content: "\2192";
margin-left: 8px;
font-weight: 400;
}
/* Boton principal de las internas (Quiero un relevamiento): el verde de marca */
#divBloqueATP .btn.btn-primary {
display: inline-flex !important;
align-items: center;
height: 50px;
padding: 0 26px !important;
border-radius: 999px !important;
background: var(--d3-verde) !important;
border: 1px solid var(--d3-verde) !important;
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
box-shadow: none !important;
filter: none !important;
transform: none !important;
transition: background-color .25s ease, border-color .25s ease;
}
#divBloqueATP .btn.btn-primary:hover {
background: var(--d3-tinta) !important;
border-color: var(--d3-tinta) !important;
}
/* ---------- Servicios: los tres cuadraditos (como los de la demo 1) ---------- */
#divBloqueServiciosbase .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
#divBloqueServiciosbase .pricing-wrapper > .row > div {
display: flex;
flex-direction: column;
padding: 32px 30px 30px;
border-radius: 18px;
background: var(--d3-panel);
}
/* "¿No tenés un representante asignado?": la ultima linea antes del boton, abajo y con filete */
#divBloqueServiciosbase .pricing-wrapper > .row > div > p:has(+ .btn) {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--d3-linea);
color: var(--d3-tinta);
font-weight: 600;
}
#divBloqueServiciosbase .pricing-wrapper > .row > div > p:has(+ .btn):first-of-type {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* ---------- Servicios y Soluciones: tarjetas con foto sobre un panel gris ----------
Servicios clave y ATP son dos bloques: si van seguidos se ven como un solo panel (la tarjeta de ATP,
ancha, debajo de las tres). Cada uno por su lado tambien queda como panel completo. */
#divContenido > .container > #divBloqueServiciosclave,
#divContenido > .container > #divBloqueATP,
#divContenido > .container > #divBloqueSoluciones {
background: var(--d3-panel) !important;
border-radius: var(--d3-radio);
padding: 56px !important;
}
#divContenido > .container > #divBloqueServiciosclave:has(+ #divBloqueATP) {
border-radius: var(--d3-radio) var(--d3-radio) 0 0;
padding-bottom: 12px !important;
margin-bottom: 0 !important;
}
#divContenido > .container > #divBloqueServiciosclave + #divBloqueATP {
border-radius: 0 0 var(--d3-radio) var(--d3-radio);
padding-top: 12px !important;
}
#divBloqueATP .pricing-wrapper > .row {
display: block;
}
#divBloqueServiciosclave .pricing-wrapper > .row,
#divBloqueSoluciones .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
#divBloqueServiciosclave .pricing-wrapper > .row > div,
#divBloqueATP .pricing-wrapper > .row > div,
#divBloqueSoluciones .pricing-wrapper > .row > div {
position: relative;
display: flex;
flex-direction: column;
padding: 0 0 28px;
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 22px 44px -32px rgba(0, 27, 69, .45);
}
#divBloqueServiciosclave .pricing-wrapper > .row > div > *:not(figure),
#divBloqueATP .pricing-wrapper > .row > div > *:not(figure),
#divBloqueSoluciones .pricing-wrapper > .row > div > *:not(figure):not(.meta) {
margin-left: 28px !important;
margin-right: 28px !important;
}
#divBloqueServiciosclave .pricing-wrapper > .row > div > h4,
#divBloqueSoluciones .pricing-wrapper > .row > div > h4 {
margin-top: 24px !important;
}
#divBloqueServiciosclave .pricing-wrapper > .row > div > .btn {
margin-top: auto !important;
}
#divBloqueServiciosclave .pricing-wrapper > .row > div > p:has(+ .btn) {
margin-bottom: 20px;
}
/* La foto, con el degrade de la demo 1 */
#divBloqueServiciosclave figure.rounded,
#divBloqueATP figure.rounded,
#divBloqueSoluciones figure.rounded,
#divBloqueConfidencialidad figure.rounded {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 0;
}
#divBloqueServiciosclave figure.rounded::after,
#divBloqueATP figure.rounded::after,
#divBloqueSoluciones figure.rounded::after,
#divBloqueConfidencialidad figure.rounded::after {
content: "";
position: absolute;
inset: 0;
background: var(--d3-degrade);
pointer-events: none;
}
#divBloqueServiciosclave figure.rounded img,
#divBloqueSoluciones figure.rounded img {
display: block;
width: 100%;
aspect-ratio: 16 / 11;
object-fit: cover;
border-radius: 0;
transition: transform .8s var(--d3-curva);
}
#divBloqueServiciosclave .pricing-wrapper > .row > div:hover figure img,
#divBloqueSoluciones .pricing-wrapper > .row > div:hover figure img {
transform: scale(1.04);
}
/* La tarjeta ancha: ATP siempre, y en Soluciones la que queda sola en la ultima fila (hoy el
luminometro). Foto a la izquierda y texto a la derecha. */
#divBloqueATP .pricing-wrapper > .row > div,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto auto 1fr;
align-content: start;
padding: 0;
}
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) {
grid-column: 1 / -1;
}
#divBloqueATP .pricing-wrapper > .row > div > figure,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > figure {
grid-column: 1;
grid-row: 1 / span 3;
height: 100%;
min-height: 340px;
}
#divBloqueATP .pricing-wrapper > .row > div > figure img,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > figure img {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
aspect-ratio: auto;
object-fit: cover;
}
#divBloqueATP .pricing-wrapper > .row > div > *:not(figure),
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > *:not(figure):not(.meta) {
grid-column: 2;
margin-left: 52px !important;
margin-right: 52px !important;
}
#divBloqueATP .pricing-wrapper > .row > div > h4,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > h4 {
margin-top: 52px !important;
font-size: clamp(22px, 2.1vw, 28px) !important;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.15;
margin-bottom: 16px !important;
}
#divBloqueATP .pricing-wrapper > .row > div > p {
font-size: 16px;
line-height: 1.7;
}
#divBloqueATP .pricing-wrapper > .row > div > p:last-child,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > p:last-child {
margin-bottom: 52px;
}
#divBloqueATP .pricing-wrapper > .row > div > p:has(> .btn) {
margin-top: 12px;
}
/* "Próximamente" (subtitulo del componente): etiqueta sobre la foto, y la foto apagada */
#divBloqueSoluciones .pricing-wrapper > .row > div > .meta {
position: absolute;
z-index: 2;
top: 18px;
left: 18px;
margin: 0 !important;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .94);
color: var(--d3-navy);
font-family: "Raleway", "Poppins", sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
line-height: 1.2;
box-shadow: 0 8px 20px -10px rgba(0, 27, 69, .5);
}
#divBloqueSoluciones .pricing-wrapper > .row > div:has(> .meta) figure img {
filter: grayscale(.45);
}
/* ---------- Servicios: el metodo en cinco pasos (referencia: metodolog.png) ---------- */
#divBloqueMetodo .row.text-center > .col-12 {
text-align: left;
padding: 0;
}
#divBloqueMetodo h3.display-4,
#divBloqueMotivos h3.display-4,
#divBloqueNuestrosvalores h3.display-4 {
font-family: "Raleway", "Poppins", sans-serif;
font-size: clamp(28px, 2.8vw, 40px) !important;
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.1;
color: var(--d3-navy);
margin: 0 0 44px !important;
}
#divBloqueMetodo .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border-top: 2px solid var(--d3-navy);
}
#divBloqueMetodo .pricing-wrapper > .row > div {
position: relative;
display: flex;
flex-direction: column;
padding: 30px 24px 10px;
border-right: 1px solid var(--d3-linea);
}
#divBloqueMetodo .pricing-wrapper > .row > div:first-child {
padding-left: 0;
}
#divBloqueMetodo .pricing-wrapper > .row > div:last-child {
border-right: 0;
}
#divBloqueMetodo .pricing-wrapper > .row > div::before {
content: "";
position: absolute;
top: -6px;
left: 24px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--d3-navy);
}
#divBloqueMetodo .pricing-wrapper > .row > div:first-child::before {
left: 0;
}
#divBloqueMetodo .pricing-wrapper > .row > div > .meta {
order: -1;
margin: 0 0 12px !important;
font-family: "Raleway", sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: .1em;
color: var(--d3-verde);
}
#divBloqueMetodo .pricing-wrapper > .row > div > h4 {
font-size: 17px !important;
}
#divBloqueMetodo .pricing-wrapper > .row > div > p {
font-size: 14.5px;
line-height: 1.6;
}
/* ---------- Contacto ---------- */
/* Los cuadraditos: donde, telefonos, email y horarios */
#divBloqueDatosdecontacto .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
#divBloqueDatosdecontacto .pricing-wrapper > .row > div {
padding: 30px 26px 26px;
border-radius: 18px;
background: var(--d3-panel);
}
#divBloqueDatosdecontacto .pricing-wrapper > .row > div > p {
color: var(--d3-tinta);
}
#divBloqueDatosdecontacto a {
white-space: nowrap;
color: var(--d3-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(0, 45, 114, .25);
text-underline-offset: 4px;
transition: text-decoration-color .2s ease;
}
#divBloqueDatosdecontacto a:hover {
color: var(--d3-navy);
text-decoration-color: currentColor;
}
#divContenido > .container > #divBloqueDatosdecontacto:has(+ #divBloqueWhatsApp) {
margin-bottom: 20px;
}
/* Los dos WhatsApp en grande: toda la tarjeta es el enlace (el boton del componente se estira) */
#divBloqueWhatsApp .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div {
position: relative;
display: grid;
grid-template-columns: 60px minmax(0, 1fr) auto;
column-gap: 20px;
align-items: center;
padding: 26px 28px;
border: 1px solid var(--d3-linea);
border-radius: 18px;
background: #ffffff;
transition: border-color .25s ease, box-shadow .3s ease, transform .3s var(--d3-curva);
}
#divBloqueWhatsApp .pricing-wrapper > .row > div:hover {
border-color: rgba(21, 132, 99, .45);
box-shadow: 0 22px 44px -30px rgba(0, 27, 69, .45);
transform: translateY(-2px);
}
#divBloqueWhatsApp .bloque-item-icono {
grid-column: 1;
grid-row: 1 / span 2;
width: 60px;
height: 60px;
margin: 0;
border-radius: 50%;
background: var(--d3-verde);
}
#divBloqueWhatsApp .bloque-item-icono .uil,
#divBloqueWhatsApp .bloque-item-icono i {
font-size: 30px;
color: #ffffff;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div > .meta {
grid-column: 2;
grid-row: 1;
align-self: end;
margin: 0 !important;
font-size: 13.5px;
font-weight: 500;
color: var(--d3-texto);
}
#divBloqueWhatsApp .pricing-wrapper > .row > div > h4 {
grid-column: 2;
grid-row: 2;
align-self: start;
margin: 2px 0 0 !important;
font-size: clamp(22px, 2.3vw, 31px) !important;
font-weight: 800;
letter-spacing: -.015em;
white-space: nowrap;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div > .btn {
grid-column: 3;
grid-row: 1 / span 2;
position: static;
display: inline-flex !important;
align-items: center;
height: 44px;
margin: 0 !important;
padding: 0 18px !important;
border-radius: 999px !important;
background: transparent !important;
border: 1px solid rgba(21, 132, 99, .35) !important;
color: var(--d3-verde) !important;
font-size: 14px;
font-weight: 600;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div > .btn > span::after {
content: "\2192";
margin-left: 8px;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div > .btn::after {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div:hover > .btn {
background: var(--d3-verde) !important;
color: #ffffff !important;
}
/* "También podés escribirnos para": franja con filetes, el titulo a la izquierda y los tres motivos */
#divBloqueMotivos > .container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
column-gap: 48px;
align-items: center;
padding: 34px 0 !important;
border-top: 1px solid var(--d3-linea);
border-bottom: 1px solid var(--d3-linea);
}
#divBloqueMotivos > .container > .row {
margin: 0;
}
#divBloqueMotivos .row.text-center > .col-12 {
padding: 0;
text-align: left;
}
#divBloqueMotivos h3.display-4 {
font-size: 22px !important;
max-width: 14ch;
margin: 0 !important;
}
#divBloqueMotivos .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#divBloqueMotivos .pricing-wrapper > .row > div {
display: flex;
align-items: center;
gap: 14px;
padding: 0 24px;
border-left: 1px solid var(--d3-linea);
}
#divBloqueMotivos .pricing-wrapper > .row > div:first-child {
padding-left: 0;
border-left: 0;
}
#divBloqueMotivos .bloque-item-icono {
flex: 0 0 auto;
width: 44px;
height: 44px;
margin: 0;
}
#divBloqueMotivos .bloque-item-icono i {
font-size: 22px;
}
#divBloqueMotivos .pricing-wrapper > .row > div > h4 {
margin: 0 !important;
font-family: "Poppins", "Manrope", sans-serif;
font-size: 15px !important;
font-weight: 500;
letter-spacing: 0;
line-height: 1.45;
color: var(--d3-tinta);
}
/* El formulario: titulo y bajada arriba, los campos en un panel, y la franja de RR. HH. al final
(es la descripcion del formulario, lo unico que la seccion dibuja despues de el) */
#divContacto {
padding-bottom: 24px;
}
#divContacto > .container > .row {
margin-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#divContacto p.titulo-formulario-contacto.display-5 {
font-family: "Raleway", "Poppins", sans-serif;
font-size: clamp(28px, 3vw, 40px) !important;
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.1;
color: var(--d3-navy);
margin: 0 0 14px !important;
}
#divContacto p.titulo-formulario-contacto:not(.display-5) {
max-width: 60ch;
text-wrap: balance;
margin: 0 auto 36px !important;
font-size: 17px;
line-height: 1.6;
color: var(--d3-texto);
}
#divContacto form > .row > .col-lg-10 {
padding: 40px 40px 30px;
border-radius: var(--d3-radio);
background: var(--d3-panel);
}
@media (min-width: 768px) {
#divContacto form .row > .col-md-3 {
flex: 0 0 50%;
max-width: 50%;
}
}
#divContacto .form-floating > .form-control {
height: 60px;
border: 1px solid #DCE3EE;
border-radius: 12px;
background: #ffffff;
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
#divContacto .form-floating > textarea.form-control {
height: 150px !important;
}
#divContacto .form-floating > .form-control:focus {
border-color: var(--d3-navy);
box-shadow: 0 0 0 4px rgba(0, 45, 114, .08);
}
#divContacto .form-floating > label {
color: var(--d3-texto);
}
#divContacto .btn-send {
display: inline-flex !important;
align-items: center;
height: 52px;
padding: 0 30px !important;
border-radius: 999px !important;
background: var(--d3-verde) !important;
border: 1px solid var(--d3-verde) !important;
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
box-shadow: none !important;
filter: none !important;
transform: none !important;
transition: background-color .25s ease, border-color .25s ease;
}
#divContacto .btn-send:hover {
background: var(--d3-tinta) !important;
border-color: var(--d3-tinta) !important;
}
#divContacto form > .row > .col-12.mt-6 {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 32px;
margin: 80px calc(var(--bs-gutter-x) * .5) 0 !important;
width: calc(100% - var(--bs-gutter-x));
padding: 30px 40px;
border-radius: 20px;
background: linear-gradient(100deg, #002D72 0%, #001B45 100%);
}
#divContacto form > .row > .col-12.mt-6 h4 {
margin: 0;
font-family: "Raleway", "Poppins", sans-serif;
font-size: clamp(20px, 2vw, 26px);
font-weight: 800;
letter-spacing: -.015em;
color: #ffffff;
}
#divContacto form > .row > .col-12.mt-6 p {
margin: 0;
font-size: 16px;
color: rgba(255, 255, 255, .75);
}
#divContacto form > .row > .col-12.mt-6 a {
color: #ffffff;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .4);
text-underline-offset: 4px;
}
#divContacto form > .row > .col-12.mt-6 a:hover {
color: var(--d3-celeste) !important;
}
/* ---------- Quienes somos ---------- */
/* Mision, vision y valores (referencia: misionvision.png): el icono asoma sobre el borde */
#divBloqueMision .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
padding-top: 28px;
}
#divBloqueMision .pricing-wrapper > .row > div {
position: relative;
padding: 54px 30px 32px;
border-radius: 20px;
background: var(--d3-panel);
}
#divBloqueMision .bloque-item-icono {
position: absolute;
top: -26px;
left: 30px;
width: 56px;
height: 56px;
margin: 0;
border-radius: 16px;
background: linear-gradient(140deg, #0A438F 0%, #002D72 55%, #001B45 100%);
box-shadow: 0 14px 26px -14px rgba(0, 27, 69, .7);
}
#divBloqueMision .bloque-item-icono .uil,
#divBloqueMision .bloque-item-icono i {
font-size: 26px;
color: #ffffff;
}
#divBloqueMision .pricing-wrapper > .row > div > h4 {
font-size: 21px !important;
margin-bottom: 12px !important;
}
/* La linea de tiempo en un panel, como en la home */
body:not(#paginaInicio) #divContenido #divBloqueHistoria {
padding: 72px 56px !important;
border-radius: var(--d3-radio);
background: var(--d3-panel) !important;
}
/* Codigo de confidencialidad: foto + texto + boton, como la subseccion de Allia */
#divBloqueConfidencialidad .row.gx-lg-0 {
align-items: center !important;
margin: 0 !important;
--bs-gutter-y: 32px;
}
#divBloqueConfidencialidad figure.rounded {
border-radius: var(--d3-radio);
}
#divBloqueConfidencialidad figure.rounded img {
display: block;
width: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
}
#divBloqueConfidencialidad h3.display-5 {
font-family: "Raleway", "Poppins", sans-serif;
font-size: clamp(28px, 3vw, 42px) !important;
font-weight: 800;
letter-spacing: -.022em;
line-height: 1.1;
color: var(--d3-navy);
margin: 0 0 20px !important;
}
#divBloqueConfidencialidad .row.gx-lg-0 p {
font-size: 16px;
line-height: 1.75;
color: var(--d3-texto);
}
#divBloqueConfidencialidad .btn {
display: inline-flex !important;
align-items: center;
height: 50px;
margin-top: 14px !important;
padding: 0 26px !important;
border-radius: 999px !important;
background: var(--d3-navy) !important;
border: 1px solid var(--d3-navy) !important;
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
box-shadow: none !important;
filter: none !important;
transform: none !important;
transition: background-color .25s ease;
}
#divBloqueConfidencialidad .btn:hover {
background: var(--d3-tinta) !important;
}
@media (min-width: 992px) {
#divBloqueConfidencialidad .row.gx-lg-0 > div {
margin-top: 0 !important;
}
#divBloqueConfidencialidad .row.gx-lg-0 > div + div {
padding-left: 72px !important;
}
}
/* Nuestros valores: solo el titulo, un poco mas grande; icono y titulo en la misma fila */
#divBloqueNuestrosvalores .row.text-center > .col-12 {
padding: 0;
text-align: left;
}
#divBloqueNuestrosvalores .pricing-wrapper > .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 44px 56px;
}
#divBloqueNuestrosvalores .pricing-wrapper > .row > div {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
column-gap: 16px;
align-items: center;
align-content: start;
margin: 0 !important;
}
#divBloqueNuestrosvalores .pricing-wrapper > .row > div > * {
grid-column: 1 / -1;
}
#divBloqueNuestrosvalores .pricing-wrapper > .row > div > .bloque-item-icono {
grid-column: 1;
margin: 0;
}
#divBloqueNuestrosvalores .pricing-wrapper > .row > div > .bloque-item-icono + h4 {
grid-column: 2;
margin: 0 !important;
}
#divBloqueNuestrosvalores .pricing-wrapper > .row > div > p {
margin-top: 14px;
}
/* El cierre de una interna: si es el ultimo bloque, custom.js lo pasa al ancho de la pagina, debajo
del contenido y antes del pie, como en la home. Si queda dentro del contenedor (otro orden, o sin
JS), el panel claro se despega del borde de la foto. */
body:not(#paginaInicio) #divContenido > .container > #divBloqueCierre > .container {
padding-left: 48px;
padding-right: 48px;
}
html body:not(#paginaInicio) .content-wrapper > #divBloqueCierre.d3-cierre:not(#d3) {
margin-bottom: 0;
}
/* ---------- Novedades ---------- */
/* El listado repetia el titulo de la seccion */
#divContenido.seccion-novedades h1.display-6,
#divContenido.seccion-noticias h1.display-6 {
display: none;
}
/* La categoria de cada entrada: tipo oracion (Lucia no quiere volantas en mayusculas chiquitas) */
#divContenido .post-category,
#divContenido .post-category a {
font-family: "Raleway", "Poppins", sans-serif;
font-size: 14px !important;
font-weight: 700;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--d3-navy);
}
#divContenido .sidebar .widget-title {
font-family: "Raleway", "Poppins", sans-serif;
font-size: 18px !important;
font-weight: 700;
color: var(--d3-navy);
}
/* ---------- Celular y tablet ---------- */
@media (max-width: 1199.98px) {
#divBloqueMetodo .pricing-wrapper > .row {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 18px;
}
#divBloqueMetodo .pricing-wrapper > .row > div:nth-child(3) {
border-right: 0;
}
#divBloqueMetodo .pricing-wrapper > .row > div:nth-child(4) {
padding-left: 0;
}
#divBloqueMetodo .pricing-wrapper > .row > div:nth-child(4)::before {
left: 0;
}
#divBloqueDatosdecontacto .pricing-wrapper > .row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
#divContenido > .container,
#divContacto > .container {
padding-left: 20px;
padding-right: 20px;
}
#divContenido > .container > section.wrapper {
margin-bottom: 64px;
}
#divContenido.seccion-hero > .container {
padding-top: 56px !important;
}
#divContenido h1.titulo-seccion {
margin-bottom: 36px !important;
}
#divBloqueServiciosbase .pricing-wrapper > .row,
#divBloqueServiciosclave .pricing-wrapper > .row,
#divBloqueSoluciones .pricing-wrapper > .row,
#divBloqueMision .pricing-wrapper > .row,
#divBloqueNuestrosvalores .pricing-wrapper > .row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) {
grid-column: auto;
}
#divContenido > .container > #divBloqueServiciosclave,
#divContenido > .container > #divBloqueATP,
#divContenido > .container > #divBloqueSoluciones {
padding: 32px 24px !important;
border-radius: 20px;
}
#divContenido > .container > #divBloqueServiciosclave:has(+ #divBloqueATP) {
padding-bottom: 10px !important;
border-radius: 20px 20px 0 0;
}
#divContenido > .container > #divBloqueServiciosclave + #divBloqueATP {
padding-top: 10px !important;
border-radius: 0 0 20px 20px;
}
/* la tarjeta ancha vuelve a ser una tarjeta comun: foto arriba y texto abajo */
#divBloqueATP .pricing-wrapper > .row > div,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) {
display: flex;
padding: 0 0 26px;
}
#divBloqueATP .pricing-wrapper > .row > div > figure,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > figure {
height: auto;
min-height: 0;
}
#divBloqueATP .pricing-wrapper > .row > div > figure img,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > figure img {
position: static;
height: auto !important;
aspect-ratio: 16 / 11;
}
#divBloqueATP .pricing-wrapper > .row > div > *:not(figure),
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > *:not(figure):not(.meta) {
margin-left: 24px !important;
margin-right: 24px !important;
}
#divBloqueATP .pricing-wrapper > .row > div > h4,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > h4 {
margin-top: 24px !important;
font-size: 21px !important;
}
#divBloqueATP .pricing-wrapper > .row > div > p:last-child,
#divBloqueSoluciones .pricing-wrapper > .row > div:last-child:nth-child(3n + 1) > p:last-child {
margin-bottom: 0;
}
#divBloqueServiciosclave .pricing-wrapper > .row > div > *:not(figure),
#divBloqueSoluciones .pricing-wrapper > .row > div > *:not(figure):not(.meta) {
margin-left: 24px !important;
margin-right: 24px !important;
}
#divBloqueMotivos > .container {
grid-template-columns: minmax(0, 1fr);
row-gap: 22px;
padding: 28px 0 !important;
}
#divBloqueMotivos .pricing-wrapper > .row {
grid-template-columns: minmax(0, 1fr);
row-gap: 16px;
}
#divBloqueMotivos .pricing-wrapper > .row > div {
padding: 0;
border-left: 0;
}
#divBloqueMotivos h3.display-4 {
max-width: none;
}
#divContacto form > .row > .col-lg-10 {
padding: 28px 20px 24px;
border-radius: 20px;
}
#divContacto form > .row > .col-12.mt-6 {
margin-top: 56px !important;
padding: 26px 24px;
flex-direction: column;
align-items: flex-start;
}
body:not(#paginaInicio) #divContenido #divBloqueHistoria {
padding: 44px 22px !important;
border-radius: 20px;
}
}
@media (max-width: 767.98px) {
#divBloqueServiciosbase .pricing-wrapper > .row,
#divBloqueServiciosclave .pricing-wrapper > .row,
#divBloqueSoluciones .pricing-wrapper > .row,
#divBloqueMision .pricing-wrapper > .row,
#divBloqueNuestrosvalores .pricing-wrapper > .row,
#divBloqueDatosdecontacto .pricing-wrapper > .row,
#divBloqueWhatsApp .pricing-wrapper > .row {
grid-template-columns: minmax(0, 1fr);
}
#divBloqueMision .pricing-wrapper > .row {
row-gap: 46px;
}
/* el metodo, vertical: el riel a la izquierda con un punto por paso */
#divBloqueMetodo .pricing-wrapper > .row {
grid-template-columns: minmax(0, 1fr);
row-gap: 0;
border-top: 0;
border-left: 2px solid var(--d3-navy);
}
#divBloqueMetodo .pricing-wrapper > .row > div,
#divBloqueMetodo .pricing-wrapper > .row > div:first-child,
#divBloqueMetodo .pricing-wrapper > .row > div:nth-child(4) {
padding: 4px 0 26px 26px;
border-right: 0;
}
#divBloqueMetodo .pricing-wrapper > .row > div::before,
#divBloqueMetodo .pricing-wrapper > .row > div:first-child::before,
#divBloqueMetodo .pricing-wrapper > .row > div:nth-child(4)::before {
top: 6px;
left: -6px;
}
#divBloqueMetodo h3.display-4 {
margin-bottom: 30px !important;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div {
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 16px;
padding: 20px;
}
#divBloqueWhatsApp .bloque-item-icono {
width: 52px;
height: 52px;
}
#divBloqueWhatsApp .bloque-item-icono i {
font-size: 26px;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div > h4 {
font-size: 22px !important;
}
/* en el celular la tarjeta entera es el enlace: el boton queda solo como superficie tactil */
#divBloqueWhatsApp .pricing-wrapper > .row > div > .btn {
width: 0;
height: 0;
padding: 0 !important;
border: 0 !important;
overflow: hidden;
}
#divBloqueWhatsApp .pricing-wrapper > .row > div > .btn > span {
display: none !important;
}
#divBloqueConfidencialidad .row.gx-lg-0 > div + div {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/* ---------- Historia: compacta, para que entre en una pantalla ----------
Con diez hitos la lista medía 764px y el marco de la foto se estiraba a ese alto: la foto (apaisada)
quedaba con mucho aire arriba y abajo y la sección no entraba en la pantalla. Los hitos van más
juntos y el marco tiene un alto propio, ajustado a la foto. */
@media (min-width: 992px) {
html body #divBloqueHistoria:not(#d3) .d3-lt {
margin-top: 36px;
gap: 64px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-escena {
min-height: 420px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-fotos {
inset: 28px 32px 70px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios,
html body #divBloqueHistoria:not(#d3) .d3-lt-anios > span {
height: clamp(100px, 10vw, 150px);
font-size: clamp(100px, 10vw, 150px);
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios {
bottom: 6px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-anios > span {
height: auto;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-boton {
padding: 9px 0 5px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-titulo {
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.2;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito {
padding-bottom: 2px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito::after {
top: 12px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito::before,
html body #divBloqueHistoria:not(#d3) .d3-lt-tramo {
top: 26px;
bottom: -12px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-hito:last-child::before,
html body #divBloqueHistoria:not(#d3) .d3-lt-hito:last-child .d3-lt-tramo {
bottom: 0;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-texto p {
max-width: none;
margin: 2px 0 8px !important;
font-size: 14.5px !important;
line-height: 1.5 !important;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-boton {
padding: 8px 0 4px;
}
/* la foto arriba del marco, pegada al año, y no centrada con aire arriba y abajo */
html body #divBloqueHistoria:not(#d3) .d3-lt-fotos {
inset: 28px 32px 28px;
}
html body #divBloqueHistoria:not(#d3) .d3-lt-foto img {
object-position: 50% 0;
}
}