/* ============================================================ NAZE 2 — custom.css Estudio juridico para consorcios y administradores (CABA). Es el lenguaje completo de dumar2 (que a su vez copio el de greenfamily2), copiado y no reescrito: las capas de abajo son las de dumar2 con los ids de bloque mapeados y la paleta de NAZE. --color-primario = #3EAB7A (verde NAZE) --color-secundario = #FFFFFF (la barra del menu) La diferencia que pidio el cliente: SIN tarjetas apilables. Los bloques son paneles redondeados que scrollean normal (ver "Paneles" mas abajo). Lo propio de naze2 va al final del archivo. Mapeo de bloques (dumar2 -> naze2): Capacidades -> Areas, Sectores -> Formacion, Calidad -> Libros, Catalogo -> Sueldos. ============================================================ */ :root { --naze-navy: #1F3049; --naze-navy-deep: #17202E; --naze-green: #3EAB7A; --naze-green-soft: #E7F5EE; --naze-blue: #6B8CB5; --naze-bg-soft: #F5F8FC; --naze-border: #E2E8F0; --naze-text: #334155; --naze-muted: #64748B; --naze-grad: linear-gradient(100deg, #1F3049 0%, #3EAB7A 100%); --naze-grad-verde: linear-gradient(100deg, #1F6B4C 0%, #3EAB7A 100%); } /* ---------- Tipografía ---------- */ body { font-family: "Poppins", "Manrope", sans-serif; color: var(--naze-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(--naze-navy); } h3, h4, h5 { color: var(--naze-navy); } /* ---------- Barra superior ---------- */ #divBarraSuperior { background: var(--naze-navy) !important; } #divBarraSuperior a:hover, #divBarraSuperior a:hover i, #divBarraSuperior a:hover p, #divBarraSuperior .follow-link:hover { color: var(--naze-green) !important; } /* ---------- Navbar ---------- */ #mobileMenu { background: #ffffff !important; } .navbar-brand img { width: 190px; margin: 12px 0; } .navbar-dark .navbar-nav .nav-link { color: var(--naze-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(--naze-green) !important; } .navbar.navbar-dark .hamburger { color: var(--naze-navy); } .navbar.navbar-dark .hamburger:hover { color: var(--naze-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(--naze-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(23, 32, 46, .88) 0%, rgba(23, 32, 46, .62) 42%, rgba(23, 32, 46, 0) 72%); } .swiper-hero-vertical-con-barra .swiper-overlay { background: linear-gradient(180deg, rgba(23, 32, 46, .90) 0%, rgba(23, 32, 46, .80) 42%, rgba(23, 32, 46, .30) 68%, rgba(23, 32, 46, .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(--naze-grad) !important; border: none !important; color: #fff !important; font-weight: 500; letter-spacing: .01em; border-radius: 8px; box-shadow: 0 6px 18px -8px rgba(31, 48, 73, .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(31, 48, 73, .5); transform: translateY(-1px); } .btn-outline-primary { border: 1px solid var(--naze-navy) !important; color: var(--naze-navy) !important; border-radius: 8px; } .btn-outline-primary:hover { background: var(--naze-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(--naze-grad-verde) !important; box-shadow: 0 8px 22px -8px rgba(62, 171, 122, .75); } .swiper-hero-con-barra .btn-primary:hover, .swiper-hero-vertical-con-barra .btn-primary:hover { filter: brightness(1.12); } /* ---------- Links ---------- */ a { color: var(--naze-navy); } a:hover { color: var(--naze-green); } /* ---------- Tarjetas de producto ---------- */ .card { transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; } .producto-card, .card-producto, .item-producto { border-radius: 12px; transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease; } /* Los items de un acordeon tambien llevan la clase .card: al pasar el mouse la fila subia 4px y el texto saltaba. Se excluyen, como el acordeon entero. */ .card:not(.accordion):not(.accordion-wrapper):not(.accordion-item):hover, .producto-card:hover, .card-producto:hover, .item-producto:hover { transform: translateY(-4px); border-color: rgba(62, 171, 122, .55); box-shadow: 0 14px 34px -16px rgba(23, 32, 46, .35); } .producto-card img, .card-producto img { background: #fff; border-radius: 10px; } .badge-oferta, .badge-nuevo, .etiqueta-producto, .producto-etiqueta { background: linear-gradient(100deg, #1F6B4C 0%, #3EAB7A 100%) !important; color: #fff !important; font-weight: 500; letter-spacing: .02em; } .precio, .producto-precio, .precio-producto { color: var(--naze-navy); font-weight: 600; } .precio-anterior, .precio-tachado { color: var(--naze-muted); } /* ---------- Franja de beneficios (banners) ---------- */ #divBloqueBanners .uil, #divBloqueBeneficios .uil { color: var(--naze-green); } /* ---------- Footer ---------- */ footer, .pie-pagina, .footer { background: var(--naze-navy-deep) !important; color: #C9D3E0; } footer a, .pie-pagina a { color: #C9D3E0; } /* 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(--naze-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(--naze-green) !important; } /* ---------- Botones flotantes ---------- */ .boton-whatsapp, .boton-scroll-top { box-shadow: 0 6px 18px -4px rgba(23, 32, 46, .45) !important; } /* ---------- Scrollbar y selección ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--naze-bg-soft); } ::-webkit-scrollbar-thumb { background: var(--naze-navy); border-radius: 8px; } ::selection { background: rgba(62, 171, 122, .22); color: var(--naze-text); } /* ---------- Aire del contenido de las secciones con portada propia ---------- Al sacar la portada del módulo Secciones, el contenedor queda con `mt-sm-12 pt-sm-0 pt-6` y el texto se pega al hero. Equivalente a `container mt-12 pt-6 pb-6` (mt-12 = 3.5rem · pt-6/pb-6 = 1.5rem). */ #divContenido.seccion-nosotros > .container, #divContenido.seccion-servicios > .container { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } #divContenido.seccion-nosotros > .container { margin-top: 3.5rem !important; } /* Servicios trae la portada mas alta: menos margen para no separarla del contenido. */ #divContenido.seccion-servicios > .container { margin-top: 1.5rem !important; } /* Contacto: aire arriba y abajo del teléfono grande, que traía el contenido pegado */ #divContenido.seccion-contacto > .container { padding-top: 3rem !important; padding-bottom: 2rem !important; } #divContenido.seccion-contacto .enlace-telefono-seccion { margin-top: .5rem; margin-bottom: 3.5rem !important; } #divContenido.seccion-contacto .div-texto-seccion { row-gap: 0 !important; } /* Í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(62, 171, 122, .12); display: flex; align-items: center; justify-content: center; margin-bottom: .85rem; } .bloque-item-icono .uil { font-size: 1.6rem; color: var(--naze-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(--naze-green) !important; } #carritoMenu del { color: #A8B6C8 !important; } .number-picker-cart .input-group input { color: #ffffff !important; } .div-buscar-header .text-muted, #divSugerenciasBuscar .text-muted { color: #A8B6C8 !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(--naze-green) !important; color: var(--naze-green) !important; } #divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) { border-color: var(--naze-green) !important; background-color: var(--naze-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(--naze-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|alto_fijo|normal|medida|43px */ html body #divBarraSuperior:not(#\9):not(#\9) { height: 43px !important; } /* barra_superior|fondo|normal|otro|#1f3049 */ html body #divBarraSuperior:not(#\9):not(#\9), html body #divBarraSuperior > div:not(#\9):not(#\9) { background-color: #1f3049 !important; transition-property: color, background-color, border-color, -webkit-text-fill-color; transition-duration: .2s; transition-timing-function: ease-in-out; } /* 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|#17202e */ 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: #17202e !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|#A8B6C8 */ html body #carritoMenu del:not(#\9):not(#\9), html body #carritoMenu del span:not(#\9):not(#\9) { color: #A8B6C8 !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|iconos_botones|normal|otro|#3eab7a */ html body #carritoMenu .btn i:not(#\9):not(#\9), html body #carritoMenu .btn-secondary i:not(#\9):not(#\9) { color: #3eab7a !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; } /* ---------- Favoritos ---------- */ /* favoritos|iconos_botones|normal|otro|#3eab7a */ html body #favoritosMenu .btn i:not(#\9):not(#\9) { color: #3eab7a !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; } /* buscador|boton_agregar|normal|otro|#3eab7a */ html body #divSugerenciasBuscar .item-cart:not(#\9):not(#\9), html body #divSugerenciasBuscar .btn-primary:not(#\9):not(#\9), html body .buscador-resultados .item-cart:not(#\9):not(#\9) { color: #3eab7a !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; } /* botones|cerrar_fondo|normal|otro|#1f3049 */ html body .btn-close:not(#\9):not(#\9)::before { background-color: #1f3049 !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; } /* ---------- Enlaces del sitio ---------- */ /* enlaces|redes|hover|otro|#3eab7a */ html body .follow-link:hover:not(#\9):not(#\9), html body .follow-link:hover i:not(#\9):not(#\9) { color: #3eab7a !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; } /* enlaces|redes|normal|otro|#ffffff */ html body .follow-link:not(#\9):not(#\9), html body .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; } /* ---------- Texto del sitio ---------- */ /* texto|fondo|normal|otro|#eef2f7 */ html body:not(#\9):not(#\9) { background-color: #eef2f7 !important; transition-property: color, background-color, border-color, -webkit-text-fill-color; transition-duration: .2s; transition-timing-function: ease-in-out; } /* ===== fin Estilos > Componentes ===== */ /* Subrayado de los enlaces del menu: text-decoration queda siempre pegado y centrado bajo el texto (un pseudo-elemento con left/bottom fijos se corria, porque el nav-link tiene padding distinto a cada lado y por breakpoint). Solo los enlaces del menu: los iconos de la derecha no llevan subrayado. */ .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 7px; transition: text-decoration-color 0.25s ease, color 0.2s ease; } .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover, .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.active { text-decoration-color: var(--naze-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: #131B27 !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(--naze-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. REGLA: los bloques son independientes. La home se reconoce por la pagina (body#paginaInicio, lo pone index.php) y nunca por un bloque: antes era body:has(#divBloqueCredenciales) y al ocultar ese bloque la home perdia el diseno y le caian encima las reglas de las internas (body:not(#paginaInicio)). Tampoco va nada que dependa de que otro bloque exista, de cual tenga al lado o de en que lugar este (+, ~, :first-child, margenes negativos para montarse sobre el vecino): cada bloque trae su propio aire y su propia forma, asi se puede ocultar o reordenar desde el panel y sigue viendose igual. Lo unico que depende del lugar es el aire para el menu flotante, y lo resuelve la plataforma (body.mf-sin-hero) sin mirar ningun bloque. 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: #1F3049; --in-navy-deep: #17202E; --in-green: #3EAB7A; --in-green-claro: #8FD9B6; --in-ink: #0F172A; --in-gris: #64748B; --in-fondo: #F4F6F9; --in-linea: #E2E8F0; --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 #divBloqueAreas, body#paginaInicio #divBloqueFormacion, body#paginaInicio #divBloqueLibros, body#paginaInicio #divBloqueSueldos, body#paginaInicio #divBloqueCierre { padding: 104px 0 !important; } body#paginaInicio #divBloqueEnfoque, body#paginaInicio #divBloqueAreas, body#paginaInicio #divBloqueSueldos { background: #ffffff !important; } #divBloqueEnfoque > .container, #divBloqueMetodologia > .container, #divBloqueAreas > .container, #divBloqueFormacion > .container, #divBloqueLibros > .container, #divBloqueSueldos > .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 #divBloqueLibros { 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, #divBloqueAreas .row.text-center > .col-12, #divBloqueFormacion .row.text-center > .col-12, #divBloqueLibros .row.text-center > .col-12, #divBloqueSueldos .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, #divBloqueAreas .lead, #divBloqueFormacion .lead, #divBloqueLibros .lead, #divBloqueSueldos .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, #divBloqueFormacion .lead::before, #divBloqueLibros .lead::before, #divBloqueSueldos .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, #divBloqueAreas .display-4, #divBloqueFormacion .display-4, #divBloqueLibros .display-4, #divBloqueSueldos .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), #divBloqueAreas .row.text-center > .col-12 > p:not(.lead), #divBloqueFormacion .row.text-center > .col-12 > p:not(.lead), #divBloqueLibros .row.text-center > .col-12 > p:not(.lead), #divBloqueSueldos .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. */ #divBloqueAreas .row.text-center > .col-12 { grid-template-columns: 1fr; justify-items: center; text-align: center; } #divBloqueAreas .display-4 { grid-row: 1; max-width: 22ch; } #divBloqueAreas .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, #divBloqueLibros .row.gx-lg-0, #divBloqueSueldos .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, #divBloqueLibros .row.gx-lg-0 > div, #divBloqueSueldos .row.gx-lg-0 > div { margin-top: 0 !important; } } @media (max-width: 991.98px) { #divBloqueEnfoque .row.gx-lg-0, #divBloqueLibros .row.gx-lg-0, #divBloqueSueldos .row.gx-lg-0 { margin-top: 28px !important; } #divBloqueEnfoque .row.gx-lg-0 > div:first-child, #divBloqueLibros .row.gx-lg-0 > div:first-child, #divBloqueSueldos .row.gx-lg-0 > div:first-child { margin-top: 0 !important; } #divBloqueEnfoque .row.gx-lg-0 > div + div, #divBloqueLibros .row.gx-lg-0 > div + div, #divBloqueSueldos .row.gx-lg-0 > div + div { margin-top: 32px !important; } } #divBloqueEnfoque figure.rounded, #divBloqueLibros figure.rounded, #divBloqueSueldos figure.rounded { margin: 0; } #divBloqueEnfoque figure.rounded img, #divBloqueLibros figure.rounded img, #divBloqueSueldos 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, #divBloqueLibros .row.gx-lg-0 .display-5, #divBloqueSueldos .row.gx-lg-0 .display-5 { display: none; /* el titular ya esta en el encabezado del bloque */ } #divBloqueEnfoque .row.gx-lg-0 p, #divBloqueLibros .row.gx-lg-0 p, #divBloqueSueldos .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, #divBloqueSueldos .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(62, 171, 122, .8); margin-top: 30px !important; } #divBloqueEnfoque .btn-primary:hover, #divBloqueSueldos .btn-primary:hover, #divBloqueCierre .btn-primary:hover { background: #1F6B4C !important; border-color: #1F6B4C !important; filter: none !important; box-shadow: 0 10px 24px -12px rgba(62, 171, 122, .8) !important; transform: translateY(-2px); } /* ================= MODELO 5: GRILLAS DE COMPONENTES ================= */ #divBloqueMetodologia .pricing-wrapper > .row, #divBloqueAreas .pricing-wrapper > .row, #divBloqueFormacion .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, #divBloqueAreas .pricing-wrapper > .row > div, #divBloqueFormacion .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 > *, #divBloqueAreas .pricing-wrapper > .row > div > *, #divBloqueFormacion .pricing-wrapper > .row > div > * { grid-column: 1 / -1; } /* El circulo del icono que emite el modelo 5 */ #divBloqueMetodologia .bloque-item-icono, #divBloqueAreas .bloque-item-icono, #divBloqueFormacion .bloque-item-icono, #divBloqueCierre .bloque-item-icono { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(62, 171, 122, .1); margin: 0; } #divBloqueMetodologia .pricing-wrapper > .row > div > .bloque-item-icono, #divBloqueAreas .pricing-wrapper > .row > div > .bloque-item-icono, #divBloqueFormacion .pricing-wrapper > .row > div > .bloque-item-icono { grid-column: 1; } #divBloqueMetodologia .pricing-wrapper > .row > div > .bloque-item-icono + h4, #divBloqueAreas .pricing-wrapper > .row > div > .bloque-item-icono + h4, #divBloqueFormacion .pricing-wrapper > .row > div > .bloque-item-icono + h4 { grid-column: 2; margin: 0 !important; } #divBloqueMetodologia .pricing-wrapper > .row > div > p, #divBloqueAreas .pricing-wrapper > .row > div > p, #divBloqueFormacion .pricing-wrapper > .row > div > p { margin-top: 14px !important; } #divBloqueMetodologia .bloque-item-icono i, #divBloqueAreas .bloque-item-icono i, #divBloqueFormacion .bloque-item-icono i, #divBloqueCierre .bloque-item-icono i { font-size: 23px; color: var(--in-green); line-height: 1; } #divBloqueMetodologia h4, #divBloqueAreas h4, #divBloqueFormacion 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, #divBloqueAreas p, #divBloqueFormacion 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 #divBloqueFormacion { background: var(--in-navy-deep) !important; } #divBloqueFormacion .display-4 { color: #ffffff; } #divBloqueFormacion .lead { color: var(--in-green-claro); } #divBloqueFormacion .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. */ #divBloqueFormacion .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); } #divBloqueFormacion .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; } #divBloqueFormacion .pricing-wrapper > .row > div:hover { background: #1F3049; } #divBloqueFormacion h4 { color: #ffffff; } #divBloqueFormacion p { color: rgba(255, 255, 255, .62); } #divBloqueFormacion .bloque-item-icono { background: rgba(143, 217, 182, .12); } #divBloqueFormacion .bloque-item-icono i { color: var(--in-green-claro); } /* ------------------ 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(23, 32, 46, .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. */ /* Sin z-index: en la version 1 la franja se montaba sobre la portada y tenia que quedar encima. Ahora cada bloque trae su propio aire y ninguno pisa al de al lado, asi que no hace falta. */ body#paginaInicio #divBloqueCredenciales { border-top: 3px solid var(--in-green); padding: 0 !important; position: relative; } #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, 217, 182, .12); border: 1px solid rgba(143, 217, 182, .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; } /* ========================= 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(62, 171, 122, .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: #1F6B4C !important; border-color: #1F6B4C !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 #divBloqueAreas, body#paginaInicio #divBloqueFormacion, body#paginaInicio #divBloqueLibros, body#paginaInicio body#paginaInicio #divBloqueSueldos, body#paginaInicio #divBloqueCierre { padding: 64px 0 !important; } #divBloqueEnfoque > .container, #divBloqueMetodologia > .container, #divBloqueAreas > .container, #divBloqueFormacion > .container, #divBloqueLibros > .container, #divBloqueSueldos > .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, #divBloqueAreas .row.text-center > .col-12, #divBloqueFormacion .row.text-center > .col-12, #divBloqueLibros .row.text-center > .col-12, #divBloqueSueldos .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), #divBloqueAreas .row.text-center > .col-12 > p:not(.lead), #divBloqueFormacion .row.text-center > .col-12 > p:not(.lead), #divBloqueLibros .row.text-center > .col-12 > p:not(.lead), #divBloqueSueldos .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; } #divBloqueFormacion .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, #divBloqueLibros figure.rounded img, #divBloqueSueldos 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; } #divBloqueFormacion .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 NAZE. */ :root { --mf-top: 20px; --mf-ancho: 1400px; --mf-radio: 1rem; --mf-blur: 32px; --mf-sombra: 0 20px 40px -12px rgba(23, 32, 46, .18); --mf-fondo: rgba(255, 255, 255, .78); --mf-borde: rgba(23, 32, 46, .08); --mf-texto: #1F3049; --mf-texto-hover: #3EAB7A; --mf-fondo-portada: rgba(23, 32, 46, .22); --mf-borde-portada: rgba(255, 255, 255, .16); --mf-texto-portada: #ffffff; --mf-texto-hover-portada: #8FD9B6; } /* Sobre la foto el logo va en su version blanca. */ .navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-brand img { content: url('../../../img/naze2/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: #8FD9B6; } /* 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: #17202E !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: "Estudio jur\0000eddico para consorcios y administradores de propiedad horizontal. Asesor\0000eda legal, libros obligatorios y liquidaci\0000f3n de sueldos, en la Ciudad de Buenos Aires."; 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: #8FD9B6 !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: #8FD9B6; font-size: 17px !important; line-height: 1.4; flex: 0 0 auto; width: auto !important; height: auto !important; margin: 0 !important; } footer.text-inverse ul.puntos-venta-footer li > a { display: flex; align-items: flex-start; gap: 10px; } footer.text-inverse ul.puntos-venta-footer li > span:only-child { padding-left: 27px; } footer.text-inverse ul.puntos-venta-footer li span, footer.text-inverse ul.puntos-venta-footer li a, footer.text-inverse ul.puntos-venta-footer li strong { font-size: 14px !important; font-weight: 500 !important; color: rgba(227, 233, 242, .82); } footer.text-inverse ul.puntos-venta-footer .footer-titulo { margin-bottom: 14px !important; } @media (min-width: 768px) and (max-width: 991.98px) { footer.text-inverse .footer-desktop { grid-template-columns: 1fr; grid-row-gap: 36px; } footer.text-inverse .footer-desktop > .col-lg-3:first-child, footer.text-inverse .footer-desktop > .col-auto, footer.text-inverse .footer-desktop > .col-md-3 { grid-column: 1; } } /* Iconos de redes: circulo de linea en vez de glifos sueltos. */ footer.text-inverse .social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; color: rgba(255, 255, 255, .8); /* el theme lo levanta 3px al pasar el mouse: sin transicion en el transform, saltaba de golpe al entrar y al salir */ transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, background-color .35s ease, color .35s ease !important; } footer.text-inverse .social a:hover { border-color: #8FD9B6; background: rgba(143, 217, 182, .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; } /* Quienes somos: la portada ocupa toda la pantalla, como el hero de la home. */ body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal, body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal .swiper, body:has(#divContenido.seccion-nosotros) #swiperPortadasHorizontal .swiper-slide { min-height: 100vh; min-height: 100svh; } /* Sin portada: el generico ya deja la pastilla + 40px de aire; el contenedor de la seccion suma un poco mas para que el titulo respire igual en todas (Contacto traia 60px de padding, Novedades 30). */ body.mf-sin-hero #divContenido > .container { padding-top: 36px !important; } /* ===================================================================================== BLOQUES REDISEÑADOS POR GREEN FAMILY SOBRE LA BASE COMUN Copiado de greenfamily2 (lineas 2747-3125 de su custom.css): lo que Green Family le agrego a la version 1 para rediseñar bloques. "Lo que nos diferencia" va a Capacidades y a Sectores, que son las dos grillas de seis items de Dumar, y el ciclo a Metodologia. ===================================================================================== */ /* ---- Ciclo animado (bloque Animado, modelo 19) ---- Seccion oscura: la animacion del ciclo del envase brilla sobre el verde profundo. El fondo sale del bloque (blq_fondo); aca van el aire, el ancho y los textos claros. La escena y la lista de pasos las pinta la animacion. */ body#paginaInicio #divBloqueMetodologia{ padding: 112px 0 !important; } #divBloqueMetodologia > .container{ max-width: 1240px; padding-left: 32px; padding-right: 32px; } #divBloqueMetodologia .bloque-animado{ --bs-gutter-x: 72px; } #divBloqueMetodologia .bloque-animado-titulo{ font-family: "Raleway", "Poppins", sans-serif; font-size: clamp(30px, 3.4vw, 46px) !important; font-weight: 800; letter-spacing: -.022em; line-height: 1.08; color: #ffffff; -webkit-text-fill-color: #ffffff; margin: 0 0 20px !important; } #divBloqueMetodologia .bloque-animado-descripcion p{ font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .7); margin: 0; } @media (max-width: 991.98px) { /* 64px como el resto; abajo 50 porque el ultimo paso de la lista ya trae su relleno */ body#paginaInicio #divBloqueMetodologia{ padding: 64px 0 50px !important; } #divBloqueMetodologia > .container{ padding-left: 20px; padding-right: 20px; } #divBloqueMetodologia .bloque-animado{ --bs-gutter-x: 24px; } } /* ---- Lo que nos diferencia (Valores, modelo 5) ---- Composicion de ficha tecnica en vez de la grilla de iconos: el titulo a la izquierda (quieto mientras se recorren los puntos, en escritorio) y los cuatro puntos como filas separadas por lineas finas, con el titulo de cada punto en una columna y su texto en otra. El icono del componente no se muestra. Al pasar el mouse, una linea verde recorre la fila. */ :is(#divBloqueAreas, #divBloqueFormacion) > .container{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; align-items: start; } :is(#divBloqueAreas, #divBloqueFormacion) > .container > .row{ --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0 !important; } :is(#divBloqueAreas, #divBloqueFormacion) > .container > .row.text-center{ position: sticky; top: 132px; } :is(#divBloqueAreas, #divBloqueFormacion) .row.text-center > .col-12{ display: block; padding: 0; text-align: left; } :is(#divBloqueAreas, #divBloqueFormacion) .display-4{ max-width: 11ch; margin: 0 !important; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row{ display: block; margin: 0 !important; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div{ position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; align-items: baseline; width: 100%; max-width: 100%; margin: 0 !important; padding: 30px 0; border-top: 1px solid var(--in-linea); } /* Separadores solo entre filas: sin linea arriba de la primera ni abajo de la ultima. */ :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div:first-child{ border-top: 0; padding-top: 4px; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div:last-child{ padding-bottom: 0; } :is(#divBloqueAreas, #divBloqueFormacion) .bloque-item-icono{ display: none !important; } :is(#divBloqueAreas, #divBloqueFormacion) h4{ font-family: "Raleway", "Poppins", sans-serif; font-size: 21px !important; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--in-navy); margin: 0 !important; transition: color .35s ease; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper p{ font-size: 16px; line-height: 1.65; color: var(--in-gris); margin: 0 !important; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div:not(:first-child)::before{ content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--in-green); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.22, 1, .36, 1); } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div:hover::before{ transform: scaleX(1); } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div:hover h4{ color: var(--in-green); } @media (max-width: 991.98px) { :is(#divBloqueAreas, #divBloqueFormacion) > .container{ grid-template-columns: 1fr; row-gap: 28px; } :is(#divBloqueAreas, #divBloqueFormacion) > .container > .row.text-center{ position: static; } :is(#divBloqueAreas, #divBloqueFormacion) .display-4{ max-width: none; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div{ grid-template-columns: 1fr; row-gap: 8px; padding: 22px 0; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div:first-child{ padding-top: 0; } :is(#divBloqueAreas, #divBloqueFormacion) h4{ font-size: 19px !important; } :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper p{ font-size: 15px; } } /* ---- Aire de los bloques en celular: 64px arriba y abajo en todos ---- Medido desde el borde de la seccion hasta el primer y el ultimo contenido, como en Calidad y en Lo que nos diferencia. Cada ajuste descuenta lo que el bloque ya trae adentro. */ @media (max-width: 991.98px) { /* Credenciales: la banda no tiene aire propio, solo el relleno de cada banner (22px) */ body#paginaInicio #divBloqueCredenciales{ padding: 35px 0 42px !important; } /* Catalogo y Cierre: el margen debajo de los botones */ #divBloqueSueldos .bloque-botones, #divBloqueCierre .row.text-center > .col-12 > p:last-child{ margin-bottom: 0 !important; } } /* ---- Listado de productos (productos.php): menos aire arriba ---- El contenedor de la columna de categorias y el listado trae pt-12 (3.5rem): va con el de pt-2 (.5rem) en escritorio y con 2.5rem en celular y tablet. Se lo ubica por la ruta de navegacion que tiene justo antes, que solo existe en esta pagina (servicios.php usa el mismo contenedor y no se toca). */ #seccionRutaCatalogo + section.wrapper > .container{ padding-top: .5rem !important; } @media (max-width: 991.98px) { #seccionRutaCatalogo + section.wrapper > .container{ padding-top: 2.5rem !important; } } /* ---- Lineas que se llenan: Envasado llave en mano, Calidad, Catalogo y Lo que nos diferencia ---- La linea que separa cada fila se llena de verde de izquierda a derecha, como en Lo que nos diferencia: con el mouse al pasar por la fila, y en el celular sola a medida que la fila entra en pantalla (custom.js le pone la clase linea-llena). La linea se dibuja encima del borde de la fila. */ #divBloqueEnfoque .bloque-puntos li::before, #divBloqueLibros .bloque-puntos li::before, #divBloqueSueldos .bloque-puntos li::before{ content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--in-green); transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } @media (hover: hover) { #divBloqueEnfoque .bloque-puntos li:hover::before, #divBloqueLibros .bloque-puntos li:hover::before, #divBloqueSueldos .bloque-puntos li:hover::before{ transform: scaleX(1); } } #divBloqueEnfoque .bloque-puntos li.linea-llena::before, #divBloqueLibros .bloque-puntos li.linea-llena::before, #divBloqueSueldos .bloque-puntos li.linea-llena::before, :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div.linea-llena::before{ transform: scaleX(1); } /* ===================================================================================== La capa v2 de Green Family 2, tal como la adapto dumar2 (aca con la paleta de NAZE) ------------------------------------------------------------------------------------- Toma el lenguaje de la referencia "Ridgeline": pagina casi blanca con paneles redondeados despegados de los bordes, portada enmarcada, menu en piezas sueltas (logo, opciones a la izquierda y el boton de accion a la derecha), titulares en dos tonos, datos chicos en tipografia mono y cada seccion con su propia forma de entrar (custom.js). Todo lo de abajo pisa a la version 1, que queda arriba en este archivo. ===================================================================================== */ :root{ --v2-pagina: #eef2f7; --v2-panel: #f1f4f8; --v2-tarjeta: #fbfcfe; --v2-tinta: #17202E; --v2-tono: #7c8b9c; --v2-texto: #334155; --v2-verde: #1F6B4C; --v2-verde-medio: #3EAB7A; --v2-lima: #8FD9B6; --v2-linea: rgba(23, 32, 46, .1); --v2-radio: 24px; --v2-radio-tarjeta: 18px; --v2-margen: 14px; --v2-sans: "Geist", "Inter", system-ui, sans-serif; --v2-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --v2-curva: cubic-bezier(.22, 1, .36, 1); /* menu flotante: medidas y colores de las piezas sueltas */ --mf-top: 26px; --mf-ancho: 1352px; } /* ---------- Tipografia: Geist para todo, mono para lo chico ---------- */ html body, html body :is(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, textarea, select, label, small, strong, em, td, th, figcaption):not(.material-symbols-rounded):not([class*="uil"]){ font-family: var(--v2-sans) !important; } html body{ color: var(--v2-texto); -webkit-font-smoothing: antialiased; } html body .content-wrapper{ background: var(--v2-pagina) !important; } html body :is(h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5){ font-weight: 700 !important; letter-spacing: -.035em !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); } /* Los titulares de los bloques: en bloque (algunos venian como flex y partian los dos tonos en columnas), en tinta y con el segundo tono. Pisa el verde de la version 1. */ html body#paginaInicio section[id^="divBloque"] :is(h2, h3):is(.display-4, .display-5){ display: block !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; font-size: clamp(34px, 3.6vw, 54px) !important; font-weight: 700 !important; letter-spacing: -.042em !important; line-height: 1.02 !important; max-width: 20ch; } /* Segundo tono de los titulares: custom.js envuelve lo que sigue a la primera coma o dos puntos del titulo (o el segundo titulo de una portada). */ html body .n2-tono{ color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } /* ---------- Botones: pastilla, en la tipografia del sitio ---------- */ /* Sin el brillo verde ni el salto de la version 1 */ html body#paginaInicio :is(.swiper-hero, [id^="divBloque"]) .btn, html body#paginaInicio :is(.swiper-hero, [id^="divBloque"]) .btn:hover, html body#paginaInicio .swiper-hero .swiper-content .btn.rounded-pill, html body#paginaInicio .swiper-hero .swiper-content .btn.rounded-pill:hover{ box-shadow: none !important; } html body .btn:not(.btn-close):not(.btn-circle):not(.btn-block):not(.dropdown-toggle){ font-family: var(--v2-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: -.005em !important; text-transform: none !important; border-radius: 999px !important; padding: 14px 22px !important; box-shadow: none !important; transform: none !important; transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; } html body .btn.btn-primary:not(.btn-close){ background: var(--v2-verde) !important; border-color: var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } html body .btn.btn-primary:not(.btn-close):hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } html body .btn.btn-outline-primary{ background: transparent !important; border: 1px solid var(--v2-linea) !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); } html body .btn.btn-outline-primary:hover{ background: var(--v2-tinta) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } /* Menu de escritorio: al pasar el mouse el texto toma el color del subrayado (verde en la barra clara, lima sobre la portada), y en Catalogo el subrayado llega hasta la flecha inclusive (la version 1 lo cortaba 18px antes para dejarla afuera). La flecha acompaña el color del texto. */ @media (min-width: 992px) { html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:not(#n2):is(:hover, .active), html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:not(#n2):is(:hover, .active)::after{ color: var(--linea-menu) !important; -webkit-text-fill-color: var(--linea-menu) !important; } html body .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.dropdown-toggle:not(#n2):is(:hover, .active){ background-size: 100% 2px; } } /* El boton de accion del menu no lleva el margen derecho (me-3) que le pone la plataforma */ html body .navbar .navbar-other .nav-item:has(> .boton-cta-menu){ margin-right: 0 !important; } /* ---------- Menu: la barra de vidrio de siempre, con el boton de accion a la derecha ---------- Las opciones quedan como en la version 1 (centradas, con la linea animada). El boton va en blanco sobre la portada y en verde sobre el fondo claro. */ @media (min-width: 992px) { .navbar.navbar-flotante .boton-cta-menu{ display: inline-flex !important; align-items: center; padding: 12px 20px !important; background: var(--v2-verde) !important; border: 1px solid var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .navbar.navbar-flotante .boton-cta-menu:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } .navbar.navbar-flotante.navbar-flotante-sobre-portada .boton-cta-menu{ background: #ffffff !important; border-color: #ffffff !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); } .navbar.navbar-flotante.navbar-flotante-sobre-portada .boton-cta-menu:hover{ background: var(--v2-lima) !important; border-color: var(--v2-lima) !important; } } /* ---------- Portada: enmarcada, despegada de los bordes y redondeada ---------- */ html body:has(#divPortadas) #divPortadas{ padding: var(--v2-margen) var(--v2-margen) 0 !important; background: var(--v2-pagina) !important; } html body:has(#divPortadas) #divPortadas .swiper-hero{ border-radius: var(--v2-radio); overflow: hidden; isolation: isolate; } html body:has(#divPortadas) .swiper-hero, html body:has(#divPortadas) .swiper-hero .swiper, html body:has(#divPortadas) .swiper-hero .swiper-slide{ height: calc(100vh - var(--v2-margen)) !important; height: calc(100svh - var(--v2-margen)) !important; min-height: 620px !important; } /* El titular arriba a la izquierda (como la referencia), debajo de la barra del menu */ html body:has(#divPortadas) .swiper-hero .swiper-content{ position: relative; max-width: 1320px; padding: 150px 40px 0 !important; } html body:has(#divPortadas) .swiper-hero .swiper-content > .row{ align-items: flex-start !important; } html body:has(#divPortadas) .swiper-hero .swiper-content .row > div{ align-self: flex-start !important; max-width: 1000px !important; padding-bottom: 0 !important; } /* Si en el panel el titular se puso a la derecha, la columna entera se va a ese lado (custom.js le pone n2-derecha) */ html body:has(#divPortadas) .swiper-hero .swiper-content .row > div.n2-derecha{ margin-left: auto !important; text-align: right !important; } html body:has(#divPortadas) .swiper-hero .swiper-content .row > div.n2-derecha .portada-texto-normal{ margin-left: auto !important; } html body:has(#divPortadas) .swiper-hero .swiper-content .row > div.n2-derecha .btn.portada-boton-normal{ margin: 34px 0 0 10px !important; } /* El velo de la portada (el que se elige en el panel) queda del lado del titular. Abajo se suma una sombra suave para que los chips se lean sobre cualquier foto. */ html body:has(#divPortadas) .swiper-hero .swiper-slide{ position: relative; } html body:has(#divPortadas) .swiper-hero .swiper-slide::before{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(16, 23, 34, .65) 0%, rgba(16, 23, 34, 0) 80%), linear-gradient(0deg, rgba(16, 23, 34, .45) 0%, rgba(16, 23, 34, 0) 30%); } /* del lado del titulo la foto se oscurece un poco mas, para que el segundo tono se lea sobre cualquier imagen (en las claras, como el bidon o el bosque con sol, no alcanzaba el velo) */ html body:has(#divPortadas) .swiper-hero .swiper-slide:has(.n2-derecha)::before{ background: linear-gradient(270deg, rgba(16, 23, 34, .65) 0%, rgba(16, 23, 34, 0) 80%), linear-gradient(0deg, rgba(16, 23, 34, .45) 0%, rgba(16, 23, 34, 0) 30%); } html body:has(#divPortadas) .swiper-hero .swiper-slide > .swiper-content{ z-index: 2; } /* Mientras la foto de cada portada carga no se ve el color de relleno de la plataforma (un oliva que, con el velo encima, armaba un degrade feo): se ve el mismo fondo de la pagina y la foto aparece con un fundido cuando esta lista. custom.js pone n2-esperando-fotos en la portada y n2-foto-lista en cada slide; sin el script no se tapa nada. */ html body:has(#divPortadas) .swiper-hero .swiper-slide:not(#n2){ background-color: var(--v2-pagina) !important; } html body:has(#divPortadas) .swiper-hero.n2-esperando-fotos .swiper-slide::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: var(--v2-pagina); pointer-events: none; transition: opacity .7s ease; } html body:has(#divPortadas) .swiper-hero.n2-esperando-fotos .swiper-slide.n2-foto-lista::after{ opacity: 0; } /* el texto blanco tampoco se muestra sobre el fondo claro: entra junto con la foto */ html body:has(#divPortadas) .swiper-hero.n2-esperando-fotos .swiper-slide > .swiper-content{ transition: opacity .6s ease; } html body:has(#divPortadas) .swiper-hero.n2-esperando-fotos .swiper-slide:not(.n2-foto-lista) > .swiper-content{ opacity: 0; } html body:has(#divPortadas) .swiper-hero .swiper-content :is(p, h1, h2, h3, a){ text-shadow: none !important; } /* Las animaciones de animate.css de los componentes se apagan: la entrada la hace custom.js */ html body:has(#divPortadas) .swiper-hero .animate__animated{ animation: none !important; visibility: visible !important; } /* Titular: dos componentes grandes, el segundo en el tono suave que se elige en la portada */ html body:has(#divPortadas) .swiper-hero .portada-texto-grande{ font-family: var(--v2-sans) !important; font-size: clamp(44px, 5.4vw, 82px) !important; font-weight: 700 !important; letter-spacing: -.048em !important; line-height: .98 !important; margin: 0 !important; padding-bottom: .06em; overflow: hidden; } html body:has(#divPortadas) .swiper-hero .portada-texto-grande > .n2-linea{ display: block; } /* el segundo renglon se corta antes: asi no se estira hasta la parte mas clara de la foto */ html body:has(#divPortadas) .swiper-hero .portada-texto-grande ~ .portada-texto-grande{ max-width: 8.4em; } html body:has(#divPortadas) .swiper-hero .n2-derecha .portada-texto-grande ~ .portada-texto-grande{ margin-left: auto !important; } html body:has(#divPortadas) .swiper-hero .portada-texto-normal{ font-size: 18px !important; line-height: 1.55 !important; max-width: 38ch; margin: 26px 0 0 !important; opacity: .82; } /* Botones de la portada: el primero blanco y el segundo en linea */ html body:has(#divPortadas) .swiper-hero .swiper-content .btn.portada-boton-normal{ margin: 34px 10px 0 0 !important; background: #ffffff !important; border: 1px solid #ffffff !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta); border-radius: 999px !important; } html body:has(#divPortadas) .swiper-hero .swiper-content .btn.portada-boton-normal:hover{ background: var(--v2-lima) !important; border-color: var(--v2-lima) !important; } html body:has(#divPortadas) .swiper-hero .swiper-content .btn.portada-boton-normal + .btn.portada-boton-normal{ background: transparent !important; border-color: rgba(255, 255, 255, .45) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } html body:has(#divPortadas) .swiper-hero .swiper-content .btn.portada-boton-normal + .btn.portada-boton-normal:hover{ background: rgba(255, 255, 255, .12) !important; border-color: #ffffff !important; } /* Entrada del titular "como una junta que se cierra": la primera linea baja y la segunda sube hasta encontrarse; despues aparecen la bajada y los botones. Van con !important porque la version 1 y los botones generales tambien fijan transform y transition. */ html body:has(#divPortadas) .swiper-hero .n2-anima .portada-texto-grande > .n2-linea{ transform: translateY(-105%) !important; } html body:has(#divPortadas) .swiper-hero .n2-anima .portada-texto-grande ~ .portada-texto-grande > .n2-linea{ transform: translateY(105%) !important; } html body:has(#divPortadas) .swiper-hero .n2-anima :is(.portada-texto-normal, .btn.portada-boton-normal){ opacity: 0 !important; transform: translateY(14px) !important; } html body:has(#divPortadas) .swiper-hero .n2-anima.n2-entra .portada-texto-grande > .n2-linea, html body:has(#divPortadas) .swiper-hero .n2-anima.n2-entra .portada-texto-grande ~ .portada-texto-grande > .n2-linea{ transform: none !important; transition: transform 1.1s var(--v2-curva) .1s !important; } html body:has(#divPortadas) .swiper-hero .n2-anima.n2-entra :is(.portada-texto-normal, .btn.portada-boton-normal){ opacity: 1 !important; transform: none !important; transition: opacity .7s ease .6s, transform .9s var(--v2-curva) .6s, background-color .25s ease 0s, color .25s ease 0s, border-color .25s ease 0s !important; } html body:has(#divPortadas) .swiper-hero .n2-anima.n2-entra .btn.portada-boton-normal{ transition-delay: .72s, .72s, 0s, 0s, 0s !important; } html body:has(#divPortadas) .swiper-hero .n2-anima.n2-entra .btn.portada-boton-normal + .btn.portada-boton-normal{ transition-delay: .8s, .8s, 0s, 0s, 0s !important; } @media (max-width: 991.98px) { /* En el celular la portada arranca debajo del menu, 85px mas abajo, y mide eso menos para que los puntos sigan entrando en la pantalla. El menu arranca oscuro sobre el fondo de la pagina y se aclara recien cuando pasa sobre la foto (menu-flotante.js). Ese aire es del menu y no de la portada: vale solo cuando la portada esta arriba de todo. Si desde el panel se la mueve mas abajo, menu-flotante.js marca el body con .mf-sin-hero (el aire para el menu lo pone entonces la plataforma arriba del primer bloque) y la portada queda como los demas paneles, con el margen de siempre y el alto de la pantalla. */ html body:not(.mf-sin-hero):has(#divPortadas) #divPortadas{ padding-top: calc(var(--v2-margen) + 85px) !important; } html body:not(.mf-sin-hero):has(#divPortadas) .swiper-hero, html body:not(.mf-sin-hero):has(#divPortadas) .swiper-hero .swiper, html body:not(.mf-sin-hero):has(#divPortadas) .swiper-hero .swiper-slide{ height: calc(100vh - var(--v2-margen) - 85px) !important; height: calc(100svh - var(--v2-margen) - 85px) !important; min-height: 540px !important; } html body.mf-sin-hero:has(#divPortadas) .swiper-hero, html body.mf-sin-hero:has(#divPortadas) .swiper-hero .swiper, html body.mf-sin-hero:has(#divPortadas) .swiper-hero .swiper-slide{ min-height: 540px !important; } html body:has(#divPortadas) .swiper-hero .swiper-content{ padding: 48px 24px 0 !important; } /* en el celular el titulo ocupa todo el ancho: la sombra va de arriba hacia abajo, sobre la zona del titulo, en vez de desde un costado */ html body:has(#divPortadas) .swiper-hero .swiper-slide::before, html body:has(#divPortadas) .swiper-hero .swiper-slide:has(.n2-derecha)::before{ background: linear-gradient(180deg, rgba(16, 23, 34, .62) 0%, rgba(16, 23, 34, .45) 45%, rgba(16, 23, 34, 0) 72%), linear-gradient(0deg, rgba(16, 23, 34, .45) 0%, rgba(16, 23, 34, 0) 30%); } html body:has(#divPortadas) .swiper-hero .swiper-content .btn.portada-boton-normal{ margin: 28px 6px 0 0 !important; padding: 0 18px !important; height: 48px; font-size: 14.5px !important; } html body:has(#divPortadas) .swiper-hero .portada-texto-normal{ font-size: 16.5px !important; margin-top: 20px !important; } html body .navbar .navbar-other .btn.boton-cta-menu:not(.btn-close){ font-size: 14px !important; padding: 10px 16px !important; } } @media (prefers-reduced-motion: reduce) { html body:has(#divPortadas) .swiper-hero .swiper-slide.n2-anima :is(.portada-texto-grande > .n2-linea, .portada-texto-normal, .btn.portada-boton-normal){ transform: none !important; opacity: 1 !important; transition: none !important; } } /* ===================================================================================== GREEN FAMILY 2 — secciones Cada bloque toma una de las piezas de la referencia. Las clases n2-* las pone custom.js; sin el script la pagina queda quieta y completa. ===================================================================================== */ /* ---------- Ritmo general ---------- */ /* El :not(#n2) suma el peso de un id: la version 1 pinta los fondos con dos ids */ html body#paginaInicio .content-wrapper > section[id^="divBloque"]:not(#n2){ position: relative; background-color: transparent !important; } html body#paginaInicio .content-wrapper > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#divBloqueMetodologia){ background-image: none !important; padding-top: 112px !important; padding-bottom: 112px !important; } html body#paginaInicio .content-wrapper > section[id^="divBloque"] > .container{ max-width: 1240px !important; padding-left: 32px !important; padding-right: 32px !important; } html body#paginaInicio .content-wrapper > section[id^="divBloque"]:not(#divBloqueMetodologia):not(#divBloqueCierre) p{ color: var(--v2-texto); } /* Los titulares de bloque, siempre a la izquierda */ html body#paginaInicio section[id^="divBloque"] .row.text-center > .col-12, html body#paginaInicio #divBloqueFormacion .row > .text-center{ display: block !important; text-align: left !important; padding-left: 12px !important; padding-right: 12px !important; max-width: none !important; width: 100% !important; margin: 0 !important; } html body#paginaInicio #divBloqueFormacion h2.display-4{ padding: 0 !important; margin-bottom: 56px !important; } /* Titulares que suben por renglones, cada uno desde abajo de su mascara (como el titulo del bloque animado). custom.js los parte y, al terminar, les devuelve su HTML original. */ html body:not(#n2) :is(.n2-titulo-espera, .n2-entra-espera){ opacity: 0; } html body:not(#n2) .n2-renglones .n2-mascara{ display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; } html body:not(#n2) .n2-renglones .n2-renglon{ display: block; transform: translateY(110%); transition: transform 1.1s cubic-bezier(.23, 1, .32, 1); } html body:not(#n2) .n2-renglones.n2-visto .n2-renglon{ transform: none; } /* Textos y fotos que entran desde su costado, como en Envasado llave en mano */ html body:not(#n2) :is(.n2-entra-izq, .n2-entra-der, .n2-entra-arriba){ opacity: 0; transition: opacity .7s ease, transform .8s var(--v2-curva); transition-delay: calc(var(--n2-i, 0) * .08s); } html body:not(#n2) .n2-entra-izq{ transform: translateX(-30px); } html body:not(#n2) .n2-entra-der{ transform: translateX(30px); } html body:not(#n2) .n2-entra-arriba{ transform: translateY(30px); } html body:not(#n2) :is(.n2-entra-izq, .n2-entra-der, .n2-entra-arriba).n2-visto{ opacity: 1; transform: none; } /* la fila entera ya no se desliza con el theme: ahora entra cada columna por su lado */ html body:not(#n2) .n2-sin-cue[data-cue]{ animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Fotos que se abren desde adentro de su marco */ html body:not(#n2) .n2-revela-foto{ clip-path: inset(10% 10% 10% 10% round var(--v2-radio)); transition: clip-path 1.4s var(--v2-curva); } html body:not(#n2) .n2-revela-foto img{ transform: scale(1.16); transition: transform 1.6s var(--v2-curva); } html body:not(#n2) .n2-revela-foto.n2-visto{ clip-path: inset(0 0 0 0 round var(--v2-radio)); } html body:not(#n2) .n2-revela-foto.n2-visto img{ transform: none; } /* ---------- Franja de confianza (Credenciales): ficha tecnica ---------- Un panel blanco con las cuatro garantias como columnas de una ficha, separadas por lineas finas y sin iconos. Al pasar el mouse la linea de arriba de la columna se llena de verde. */ html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners):not(#n2){ background: transparent !important; background-image: none !important; border: 0 !important; padding: 14px var(--v2-margen) 0 !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) > .container{ max-width: none !important; padding: 0 !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .row:not(#n2){ margin: 0 !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-container:not(#n2){ flex: 1 1 100% !important; min-width: 0; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper{ overflow: hidden; border-radius: var(--v2-radio); background: #ffffff; border: 1px solid var(--v2-linea); } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-wrapper{ display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); transform: none !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:not(#n2){ position: relative; display: block !important; width: auto !important; margin: 0 !important; padding: 40px 36px 38px !important; background: transparent !important; border: 0 !important; border-left: 1px solid var(--v2-linea) !important; box-shadow: none !important; text-align: left !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:not(#n2):first-child{ border-left: 0 !important; } /* Al pasar el mouse la celda toma un fondo apenas mas oscuro y su dibujo se vuelve a trazar desde cero, linea por linea (las punteadas aparecen al final). */ html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:not(#n2){ transition: background-color .45s ease !important; } @media (hover: hover) { html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:not(#n2):hover{ background-color: var(--v2-pagina) !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:hover .n2-trazo{ animation: n2-redibujo 1.3s var(--v2-curva) both; animation-delay: calc(var(--n2-n, 0) * .03s); } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:hover .n2-trazo-punteado{ animation: n2-aparece .6s ease .7s both; } } @keyframes n2-redibujo{ from{ stroke-dashoffset: var(--n2-largo); } to{ stroke-dashoffset: 0; } } @keyframes n2-aparece{ from{ opacity: 0; } to{ opacity: 1; } } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .banner-icon{ display: none !important; } /* El dibujo de cada garantia: plano tecnico de linea fina, en el lenguaje de la ficha. Se sube desde el panel (Banners, tipo SVG) y se dibuja solo cuando la ficha entra en pantalla. */ html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .banner-icon-svg-wrapper{ display: block !important; height: 92px; margin: 0 0 28px !important; color: var(--v2-verde-medio); } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .banner-icon-svg{ display: block; width: auto !important; height: 100% !important; max-width: 100%; overflow: visible; stroke-width: 1.7; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .n2-trazo{ stroke-dasharray: var(--n2-largo); stroke-dashoffset: var(--n2-largo); transition: stroke-dashoffset 1.6s var(--v2-curva); transition-delay: calc(var(--n2-i, 0) * .12s + var(--n2-n, 0) * .05s + .15s); } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .n2-trazo-punteado{ opacity: 0; transition: opacity .8s ease; transition-delay: calc(var(--n2-i, 0) * .12s + 1.1s); } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .n2-visto .n2-trazo{ stroke-dashoffset: 0; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .n2-visto .n2-trazo-punteado{ opacity: 1; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide > div:not(.banner-icon-svg-wrapper){ display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide h4:not(#n2){ font-size: clamp(18px, 1.45vw, 21px) !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.25 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; margin: 0 0 10px !important; transition: color .3s ease, -webkit-text-fill-color .3s ease; } @media (hover: hover) { html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:hover h4:not(#n2){ color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide p:not(#n2){ max-width: 30ch; margin: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--v2-texto) !important; -webkit-text-fill-color: var(--v2-texto) !important; } /* ---------- Paneles (sin apilar) ---------- En dumar2 aca estaban las "secciones apiladas": cada panel se quedaba quieto (sticky) y el siguiente le pasaba por encima mientras el de abajo se achicaba y se oscurecia. NAZE pidio SIN tarjetas apilables: de ese tramo queda solo la forma (panel redondeado, despegado de los bordes, con 14px de aire entre uno y otro) y cada bloque scrollea normal. Por eso no hay sticky, ni escala, ni velo, ni el aire extra que el apilado agregaba abajo en el celular. La forma va por id y no por una clase que ponga custom.js: asi no depende del script. Los tres ids (el del :has, el del :is y el :not) le ganan a la regla de ritmo, que pinta transparente. */ html body#paginaInicio .content-wrapper > :is(#divBloqueEnfoque, #divBloqueMetodologia, #divBloqueAreas, #divBloqueLibros, #divBloqueSueldos, #divBloqueFormacion, #divBloqueTestimonios, #divBloqueNoticiasPreview):not(#n2){ margin: 14px var(--v2-margen) 0 !important; border-radius: var(--v2-radio) !important; background-color: #ffffff !important; } html body#paginaInicio #divBloqueMetodologia:not(#n2){ overflow: hidden; } /* Areas: las dos columnas de la ficha (titulo y filas) caen en las mismas lineas que la foto y el texto de Libros, como "Lo que nos diferencia" en Green Family 2. */ @media (min-width: 992px) { html body#paginaInicio #divBloqueAreas:not(#n2) > .container{ display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 0 !important; align-items: start !important; } html body#paginaInicio #divBloqueAreas:not(#n2) > .container > .row{ margin: 0 !important; width: auto !important; } html body#paginaInicio #divBloqueAreas:not(#n2) > .container > .row > [class*="col"]{ padding-left: 0 !important; padding-right: 0 !important; } html body#paginaInicio #divBloqueAreas:not(#n2) > .container > .row:not(.text-center){ padding-left: 40px !important; } /* el titulo acompaña mientras pasan las filas: la columna izquierda no queda vacia */ html body#paginaInicio #divBloqueAreas:not(#n2) > .container > .row.text-center{ position: sticky; top: 130px; } } /* ---------- Proceso (Envasado llave en mano) ---------- */ html body#paginaInicio section.n2-proceso > .container > h3.display-5{ max-width: 24ch; margin-bottom: 64px !important; } html body#paginaInicio section.n2-proceso .row{ align-items: stretch !important; } html body#paginaInicio section.n2-proceso .row > div > figure{ height: 100%; min-height: 480px; margin: 0; border-radius: var(--v2-radio); overflow: hidden; } html body#paginaInicio section.n2-proceso .row > div > figure img{ width: 100% !important; height: 100% !important; object-fit: cover; display: block; } html body#paginaInicio section.n2-proceso .accordion-wrapper{ counter-reset: n2-paso; border-bottom: 1px solid var(--v2-linea); } html body#paginaInicio section.n2-proceso .accordion-item{ position: relative; counter-increment: n2-paso; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--v2-linea) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* la linea del paso abierto se llena mientras corre el avance automatico */ html body#paginaInicio section.n2-proceso .n2-paso-linea{ position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--v2-verde-medio); transform: scaleX(0); transform-origin: left center; pointer-events: none; } html body#paginaInicio section.n2-proceso .accordion-item.n2-corriendo .n2-paso-linea{ animation: n2-avance-paso 6s linear forwards; } @keyframes n2-avance-paso{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } } html body#paginaInicio section.n2-proceso .accordion-item .card-header{ padding: 0 !important; background: transparent !important; border: 0 !important; } html body#paginaInicio section.n2-proceso .accordion-button{ position: relative; display: flex !important; align-items: baseline; gap: 22px; width: 100%; padding: 26px 60px 26px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: left; font-size: clamp(20px, 1.7vw, 25px) !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.25 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; transition: color .3s ease, -webkit-text-fill-color .3s ease; } html body#paginaInicio section.n2-proceso .accordion-button.collapsed{ color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } html body#paginaInicio section.n2-proceso .accordion-button.collapsed:hover{ color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } /* el numero del paso, donde el theme ponia su icono */ html body#paginaInicio section.n2-proceso .accordion-button::before{ content: counter(n2-paso, decimal-leading-zero) !important; position: static !important; transform: none !important; flex: 0 0 auto; width: 26px; font-family: var(--v2-mono) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; margin: 0 !important; } /* el signo de mas, dibujado: se vuelve una cruz al abrir */ html body#paginaInicio section.n2-proceso .accordion-button::after{ content: "" !important; position: absolute !important; right: 0; top: 50%; width: 34px !important; height: 34px !important; margin: -17px 0 0 !important; border-radius: 50%; border: 1px solid var(--v2-linea); background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat !important; color: var(--v2-tinta); transform: rotate(45deg) !important; transition: transform .45s var(--v2-curva), background-color .3s ease, border-color .3s ease, color .3s ease; } html body#paginaInicio section.n2-proceso .accordion-button:not(.collapsed)::after{ background-color: var(--v2-tinta) !important; border-color: var(--v2-tinta); color: #ffffff; } html body#paginaInicio section.n2-proceso .accordion-button.collapsed::after{ transform: rotate(0deg) !important; } html body#paginaInicio section.n2-proceso .accordion-item .card-body{ padding: 0 60px 30px 48px !important; } html body#paginaInicio section.n2-proceso .accordion-item .card-body p{ font-size: 16px !important; line-height: 1.65 !important; max-width: 46ch; margin: 0 !important; } /* ---------- Ciclo (bloque animado): panel oscuro ---------- */ html body#paginaInicio #divBloqueMetodologia :is(h1, h2, h3, .display-4, .display-5){ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body#paginaInicio :is(#divBloqueMetodologia, #divBloqueCierre) .n2-tono{ color: rgba(255, 255, 255, .55) !important; -webkit-text-fill-color: rgba(255, 255, 255, .55) !important; } /* ---------- Lo que nos diferencia ---------- */ html body#paginaInicio #divBloqueAreas .pricing-wrapper h4{ color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; font-weight: 600 !important; letter-spacing: -.02em !important; } /* ---------- Listas numeradas (Calidad) ---------- Cada punto lleva su numero y la linea de arriba se dibuja al entrar la lista. La linea verde de la version 1 (al pasar el mouse) queda encima. */ html body#paginaInicio .bloque-puntos{ counter-reset: n2-punto; } html body#paginaInicio .bloque-puntos li{ counter-increment: n2-punto; padding: 18px 0 18px 46px !important; border-top: 0 !important; background: linear-gradient(rgba(23, 32, 46, .14), rgba(23, 32, 46, .14)) left top / 100% 1px no-repeat; font-size: 15.5px !important; color: var(--v2-texto) !important; } html body#paginaInicio .bloque-puntos li strong{ color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body#paginaInicio .bloque-puntos li > span:first-child{ top: 21px !important; } html body#paginaInicio .bloque-puntos li > span:first-child i{ display: none !important; } html body#paginaInicio .bloque-puntos li > span:first-child::before{ content: counter(n2-punto, decimal-leading-zero); font-family: var(--v2-mono); font-size: 13px; color: var(--v2-tono); } html body#paginaInicio .n2-revela-lista.bloque-puntos li{ background-size: 0% 1px; transition: background-size 1.1s var(--v2-curva); } html body#paginaInicio .n2-revela-lista.bloque-puntos li:nth-child(2){ transition-delay: .12s; } html body#paginaInicio .n2-revela-lista.bloque-puntos li:nth-child(3){ transition-delay: .24s; } html body#paginaInicio .n2-revela-lista.bloque-puntos li:nth-child(4){ transition-delay: .36s; } html body#paginaInicio .n2-revela-lista.bloque-puntos li:nth-child(5){ transition-delay: .48s; } html body#paginaInicio .n2-revela-lista.bloque-puntos.n2-visto li{ background-size: 100% 1px; } /* en el proceso, las lineas entre pasos tambien se dibujan */ html body#paginaInicio section.n2-proceso .n2-revela-lista .accordion-item{ border-top-color: transparent !important; background: linear-gradient(var(--v2-linea), var(--v2-linea)) left top / 0% 1px no-repeat !important; transition: background-size 1.1s var(--v2-curva); } html body#paginaInicio section.n2-proceso .n2-revela-lista .accordion-item:nth-child(2){ transition-delay: .12s; } html body#paginaInicio section.n2-proceso .n2-revela-lista .accordion-item:nth-child(3){ transition-delay: .24s; } html body#paginaInicio section.n2-proceso .n2-revela-lista .accordion-item:nth-child(4){ transition-delay: .36s; } html body#paginaInicio section.n2-proceso .n2-revela-lista.n2-visto .accordion-item{ background-size: 100% 1px !important; } /* ---------- Cierre: la foto se mete en su marco y encima va el panel de contacto ---------- --n2-marco va de 0 (la foto ocupa todo el ancho, sin redondeo) a 1 (enmarcada). */ html body#paginaInicio #divBloqueCierre.n2-cierre{ position: relative; display: flex; align-items: flex-end; min-height: min(76vh, 660px); margin-top: 14px; padding: 0 !important; overflow: hidden; background-color: var(--v2-pagina) !important; /* un marco del color de la pagina alrededor, estirado hacia arriba: tapa el hueco con el panel de arriba y los recortes de sus esquinas, por donde se asomaba el bloque apilado de atras. Lo que nos diferencia va por encima (z-index 2), asi el marco no lo pisa. */ box-shadow: 0 -32px 0 var(--v2-margen) var(--v2-pagina); } /* El recorte que mete la foto en su marco va en la capa de la foto y no en el bloque (en el bloque tambien recortaria ese marco). El zoom va en la imagen de adentro: si fuera en la misma capa, agrandaria tambien el recorte y el marco recien se veria al final. */ html body#paginaInicio #divBloqueCierre .n2-cierre-foto{ position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(var(--n2-marco, 1) * var(--v2-margen)) round calc(var(--n2-marco, 1) * var(--v2-radio))); } html body#paginaInicio #divBloqueCierre .n2-cierre-imagen{ position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(calc(1 + (1 - var(--n2-marco, 1)) * .16)); will-change: transform; } html body#paginaInicio #divBloqueCierre .n2-cierre-foto::after{ content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(16, 23, 34, .6) 0%, rgba(16, 23, 34, 0) 60%), rgba(31, 48, 73, .42); } html body#paginaInicio #divBloqueCierre > .container{ position: relative; z-index: 1; width: 100%; padding-top: 120px !important; padding-bottom: 40px !important; } html body#paginaInicio #divBloqueCierre .row.text-center > .col-12{ display: block !important; max-width: 600px !important; padding: 44px 44px 40px !important; border-radius: 20px; background: rgba(238, 242, 247, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: left !important; } html body#paginaInicio #divBloqueCierre h3.display-4{ font-size: clamp(32px, 3.2vw, 46px) !important; margin-bottom: 18px !important; max-width: 16ch; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body#paginaInicio #divBloqueCierre .row.text-center > .col-12 > p{ color: var(--v2-texto) !important; -webkit-text-fill-color: var(--v2-texto) !important; font-size: 16px !important; line-height: 1.6 !important; max-width: none !important; margin: 0 0 26px !important; text-align: left !important; } html body#paginaInicio #divBloqueCierre .row.text-center > .col-12 > p:has(.btn){ display: flex !important; flex-wrap: wrap; gap: 10px; justify-content: flex-start !important; margin: 0 !important; } html body#paginaInicio #divBloqueCierre .btn{ margin: 0 !important; height: auto !important; } html body#paginaInicio #divBloqueCierre .btn.btn-primary{ background: var(--v2-verde) !important; border-color: var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body#paginaInicio #divBloqueCierre .btn.btn-primary:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } html body#paginaInicio #divBloqueCierre .btn.btn-outline-primary{ background: transparent !important; border: 1px solid rgba(23, 32, 46, .2) !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body#paginaInicio #divBloqueCierre .btn.btn-outline-primary:hover{ background: var(--v2-tinta) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---------- Pie: panel oscuro con la marca gigante ---------- */ html body footer.text-inverse{ margin: 14px var(--v2-margen) var(--v2-margen) !important; border-radius: var(--v2-radio); background: var(--v2-tinta) !important; overflow: hidden; position: relative; } html body footer.text-inverse::after{ content: none !important; } html body footer.text-inverse .container{ max-width: 1240px !important; padding: 72px 40px 28px !important; } @media (min-width: 768px) { html body footer.text-inverse .footer-desktop{ display: grid !important; grid-template-columns: 1fr 1.5fr !important; grid-column-gap: 72px !important; justify-items: stretch !important; align-items: start !important; padding-bottom: 0 !important; } html body footer.text-inverse .footer-desktop > .col-lg-3:first-child{ grid-column: 1 !important; } html body footer.text-inverse .footer-desktop > .col-auto{ grid-column: 2 !important; grid-template-columns: 1fr 1fr !important; grid-column-gap: 32px !important; align-items: start !important; } } html body footer.text-inverse .footer-logo{ /* El pie usa el logo blanco del sitio (logo-footer.png). */ height: 60px !important; } html body footer.text-inverse .footer-desktop > .col-lg-3:first-child .widget{ text-align: left !important; } html body footer.text-inverse .footer-desktop .widget a:has(> .footer-logo)::after{ margin-left: 0 !important; text-align: left !important; max-width: 340px !important; color: rgba(255, 255, 255, .56) !important; -webkit-text-fill-color: rgba(255, 255, 255, .56) !important; font-family: var(--v2-sans) !important; font-size: 14.5px !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) :is(.widget, .widget *:not(i), .puntos-venta-footer, .puntos-venta-footer *:not(i), .accordion-item, .accordion-item *:not(i)){ color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) :is(.footer-titulo, .widget-title, strong){ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-transform: none !important; letter-spacing: -.01em !important; font-size: 17px !important; font-weight: 600 !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) i{ color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } html body footer.text-inverse :is(.footer-desktop, .footer-mobile) a:hover, html body footer.text-inverse :is(.footer-desktop, .footer-mobile) a:hover *{ color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } html body footer.text-inverse .puntos-venta-footer-mapa{ width: 100% !important; height: 220px !important; } html body footer.text-inverse .puntos-venta-footer-mapa .gmap_canvas{ border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .12) !important; box-shadow: none !important; } html body footer.text-inverse .puntos-venta-footer-mapa iframe{ filter: grayscale(.4) contrast(.95); } html body footer.text-inverse .footer-hr, html body footer.text-inverse .footer-desktop > .col-12 .footer-hr{ border-color: rgba(255, 255, 255, .12) !important; margin: 48px 0 20px !important; } html body footer.text-inverse .footer-desktop > .col-12{ margin-top: 0 !important; } html body footer.text-inverse .footer-desktop > .d-flex{ flex-direction: row !important; flex-wrap: wrap; justify-content: center !important; align-items: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{ display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px 24px !important; justify-content: center !important; align-items: center !important; text-align: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{ flex: 0 1 auto !important; width: auto !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina > span{ flex: 0 0 auto !important; width: auto !important; margin: 0 !important; justify-content: flex-start !important; align-items: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina p{ margin-bottom: 0 !important; } /* Las redes, contra el borde derecho: la fila pasa a tres columnas, con el texto en la del medio (sigue centrado) y las redes en la de la derecha. Con flex centrado quedaban pegadas a "Desarrollado por". */ html body footer.text-inverse .footer-desktop > .d-flex:has(> .pie-pagina + div > .social){ display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; align-items: center !important; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina{ grid-column: 2; } html body footer.text-inverse .footer-desktop > .d-flex > .pie-pagina + div:has(> .social){ grid-column: 3; justify-self: end; } html body footer.text-inverse .pie-pagina, html body footer.text-inverse .pie-pagina *, html body footer.text-inverse .core-devs, html body footer.text-inverse .core-devs *{ color: rgba(255, 255, 255, .5) !important; -webkit-text-fill-color: rgba(255, 255, 255, .5) !important; font-size: 13px !important; } /* la marca, gigante y cortada por el borde de abajo */ html body footer.text-inverse .n2-marca{ display: flex; justify-content: center; margin: 12px 0 -.2em; padding: 0 12px; font-family: var(--v2-sans); font-size: 15vw; font-weight: 700; letter-spacing: -.065em; line-height: .86; white-space: nowrap; color: rgba(255, 255, 255, .05); pointer-events: none; user-select: none; } html body footer.text-inverse .n2-marca > span{ display: inline-block; transition: transform 1.2s var(--v2-curva), opacity 1s ease; transition-delay: calc(var(--n2-i, 0) * .04s); } html body footer.text-inverse.n2-marca-oculta .n2-marca > span{ transform: translateY(60%); opacity: 0; } /* ---------- Botones de los bloques: pastilla, verde profundo o en linea ---------- */ html body#paginaInicio section[id^="divBloque"] .btn:not(.btn-close):not(.btn-circle){ height: auto !important; border-radius: 999px !important; padding: 14px 24px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; } html body#paginaInicio section[id^="divBloque"] .btn.btn-primary{ background: var(--v2-verde) !important; border: 1px solid var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body#paginaInicio section[id^="divBloque"] .btn.btn-primary:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } html body#paginaInicio section[id^="divBloque"] .btn.btn-outline-primary{ background: transparent !important; border: 1px solid rgba(23, 32, 46, .2) !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body#paginaInicio section[id^="divBloque"] .btn.btn-outline-primary:hover{ background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---------- Celular y tablet ---------- */ @media (max-width: 991.98px) { /* el menu flotante, mas pegado arriba y un poco mas ancho */ :root{ --mf-top: 13px; } html body .navbar.navbar-flotante{ width: calc(100% - 1.5rem) !important; } html body#paginaInicio .content-wrapper > section[id^="divBloque"]:not(#divBloqueCredenciales):not(#divBloqueCierre):not(#divBloqueMetodologia){ padding-top: 72px !important; padding-bottom: 72px !important; } html body#paginaInicio .content-wrapper > section[id^="divBloque"] > .container{ padding-left: 22px !important; padding-right: 22px !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners):not(#n2){ padding: var(--v2-margen) var(--v2-margen) 0 !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-wrapper{ grid-template-columns: repeat(2, minmax(0, 1fr)); } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:not(#n2){ padding: 26px 20px 24px !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:not(#n2):nth-child(odd){ border-left: 0 !important; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .swiper-slide:not(#n2):nth-child(n+3){ border-top: 1px solid var(--v2-linea) !important; } html body#paginaInicio section.n2-proceso > .container > h3.display-5{ margin-bottom: 36px !important; } html body#paginaInicio section.n2-proceso .row > div > figure{ min-height: 300px; height: 300px; } html body#paginaInicio section.n2-proceso .accordion-item .card-body{ padding: 0 0 26px 48px !important; } /* En el celular el cierre es una tarjeta blanca como los demas paneles: la foto va como franja arriba (apaisada, como es) y el texto debajo, sin montarse. Estirada a lo alto la foto quedaba recortada y el panel encimado parecia un error. */ html body#paginaInicio #divBloqueCierre.n2-cierre:not(#n2){ display: block; min-height: 0; margin: var(--v2-margen) var(--v2-margen) 0 !important; border-radius: 20px; clip-path: none; background-color: #ffffff !important; } html body#paginaInicio #divBloqueCierre .n2-cierre-foto{ position: relative; inset: auto; height: 210px; clip-path: none; } html body#paginaInicio #divBloqueCierre .n2-cierre-imagen{ transform: none; } html body#paginaInicio #divBloqueCierre .n2-cierre-foto::after{ background: rgba(31, 48, 73, .25); } html body#paginaInicio #divBloqueCierre > .container{ margin: 0 !important; padding: 0 !important; } html body#paginaInicio #divBloqueCierre > .container > .row{ margin-left: 0 !important; margin-right: 0 !important; } html body#paginaInicio #divBloqueCierre .row.text-center > .col-12{ max-width: none !important; padding: 28px 22px 26px !important; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } html body:has(:is(#divBloqueCredenciales, #divBanners)) :is(#divBloqueCredenciales, #divBanners) .banner-icon-svg-wrapper{ height: 64px; margin-bottom: 18px !important; } html body footer.text-inverse{ margin: var(--v2-margen) !important; border-radius: 20px; } html body footer.text-inverse .container{ padding: 52px 22px 22px !important; } html body footer.text-inverse .footer-mobile{ padding-bottom: 0 !important; } /* la version 1 bajaba el copyright 200px para dejarlo sobre la foto de tierra, que aca no esta */ html body footer.text-inverse .footer-mobile > .pie-pagina:not(#n2){ margin-top: 12px !important; } } /* ===================================================================================== LO QUE DUMAR2 LE SUMO A GREEN FAMILY 2 (copiado de dumar2) El subrayado del menu (en gf2 vive en su version 1) y los bloques que Green Family no tiene: Formacion (Sectores en dumar2) y los encabezados con bajada. De este tramo se sacaron la linea de tiempo de Historia, la marquesina de Distribuidores y todo lo del apilado. ===================================================================================== */ /* ---------- El subrayado de las opciones del menú ---------- */ /* Una linea de fondo anclada a la caja del texto que crece de izquierda a derecha al pasar el mouse y se recoge al salir. El texto toma el MISMO color que la linea (lo hace la capa v2). */ .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link { --linea-menu: var(--v2-verde-medio); text-decoration: none; background-image: linear-gradient(var(--linea-menu), var(--linea-menu)); background-repeat: no-repeat; background-origin: content-box; background-clip: padding-box; background-position: 0 calc(100% + 3px); background-size: 0 2px; transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color .2s ease; } .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link:hover, .navbar.navbar-bg-color-secundario .navbar-collapse .navbar-nav > .nav-item > .nav-link.active { background-size: 100% 2px; } .navbar.navbar-flotante.navbar-flotante-sobre-portada .navbar-collapse .navbar-nav > .nav-item > .nav-link { --linea-menu: var(--v2-lima); } .navbar.navbar-bg-color-secundario .navbar-other .nav-link, .navbar.navbar-bg-color-secundario .navbar-other .nav-link:hover { background-image: none !important; text-decoration: none !important; } /* ---------- El bloque animado: su degradado ---------- */ /* Cuando Metodologia era una grilla, la version 1 le puso `background: var(--in-fondo) !important`. Como es el atajo `background`, borra tambien la imagen, y con eso el degradado que el bloque animado trae del panel. En Green Family 2 no pasa porque el Ciclo nunca tuvo una regla asi. */ html body#paginaInicio .content-wrapper > section#divBloqueMetodologia:not(#n2):not(#n2b):not(#n2c) { background: linear-gradient(160deg, #1F3049 0%, #111924 100%) !important; } /* ---------- Sectores: panel navy ---------- */ /* La misma grilla de "Lo que nos diferencia", sobre un panel oscuro (el degrade lo pone la capa de naze2): la linea de cada fila se llena en verde claro al pasar el mouse. */ html body#paginaInicio .content-wrapper > section#divBloqueFormacion:not(#n2):not(#n2b) { background-color: var(--v2-tinta) !important; background-image: linear-gradient(160deg, #1F3049 0%, #17202E 60%, #111924 100%) !important; } html body#paginaInicio #divBloqueFormacion :is(h2, h3, h4, h5, .display-4, strong) { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body#paginaInicio #divBloqueFormacion :is(p, li, .lead) { color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; } html body#paginaInicio #divBloqueFormacion .n2-tono, html body#paginaInicio #divBloqueFormacion .n2-tono * { color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } /* ---------- Sectores como ficha técnica, sobre el navy ---------- */ /* La misma composicion de "Lo que nos diferencia", pero el panel es oscuro: las lineas entre filas van claras y la que recorre la fila al pasar el mouse, en verde claro. */ html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row > div { border-top-color: rgba(255, 255, 255, .14) !important; } html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row > div::before { background: var(--v2-lima) !important; } html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row > div:hover h4 { color: var(--v2-lima) !important; -webkit-text-fill-color: var(--v2-lima) !important; } /* ---------- Filas de "Lo que nos diferencia": título a la izquierda, texto a la derecha ---------- */ /* La version 1 de Dumar arma cada item como "icono | titulo" con el texto abajo ocupando todo el ancho, y para eso le fija a cada hijo su columna. En Green Family los hijos caen solos en su lugar, asi que esas columnas fijas los desacomodaban: el titulo quedaba a la derecha y el texto debajo. Se devuelven a la disposicion de la ficha tecnica. */ html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div > :is(h4, h5) { grid-column: 1 !important; grid-row: 1 !important; text-align: left !important; margin: 0 !important; } html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div > p { grid-column: 2 !important; grid-row: 1 !important; text-align: left !important; } @media (max-width: 991.98px) { html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .pricing-wrapper > .row > div > p { grid-column: 1 !important; grid-row: 2 !important; } } /* La bajada del encabezado, alineada con el titulo y no centrada. */ html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .row.text-center > .col-12 > p:not(.lead) { text-align: left !important; margin-top: 24px !important; max-width: 40ch; } /* La bajada de Capacidades, alineada con el borde del titulo. */ html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .row.text-center > .col-12 > p:not(.lead) { margin-left: 0 !important; padding-left: 0 !important; } /* ---------- Encabezados con bajada: título y bajada contra el borde, en una columna ---------- */ /* En Green Family los titulares van a la izquierda en una sola columna. Capacidades, Sectores e Historia traen ademas una bajada, y la version 1 de Dumar las acomodaba centradas o en una grilla de dos columnas. Se fija la disposicion en vez de perseguir cada regla heredada: el titulo arriba, la bajada debajo con ancho de lectura, los dos contra el mismo borde. */ html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .row.text-center > .col-12 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-items: start !important; text-align: left !important; padding-left: 12px !important; padding-right: 12px !important; } html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .row.text-center > .col-12 > :is(h2, h3) { margin-left: 0 !important; margin-right: 0 !important; align-self: flex-start !important; } html body#paginaInicio :is(#divBloqueAreas, #divBloqueFormacion) .row.text-center > .col-12 > p:not(.lead) { align-self: flex-start !important; max-width: 46ch !important; margin: 22px 0 0 !important; text-align: left !important; font-size: 15.5px !important; line-height: 1.65 !important; } /* ---------- Sectores: sin el recuadro de la versión 1 ---------- */ /* La version 1 le ponia a la grilla una caja con borde y fondo mas oscuro. En la ficha tecnica de Green Family solo hay lineas entre filas. */ html body#paginaInicio #divBloqueFormacion .pricing-wrapper, html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row, html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row > div { background: transparent !important; box-shadow: none !important; } html body#paginaInicio #divBloqueFormacion .pricing-wrapper, html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row { border: 0 !important; } html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row > div { border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } html body#paginaInicio #divBloqueFormacion .pricing-wrapper > .row > div:first-child { border-top: 0 !important; } /* ---------- Medicion de altos (custom.js) ---------- */ /* Mientras se mide el alto de un bloque con cada item abierto, nada anima: si no, el navegador empezaria transiciones entre los estados que se prueban. */ .n2-midiendo, .n2-midiendo *, .n2-midiendo *::before, .n2-midiendo *::after { transition: none !important; } @media (max-width: 991.98px) { /* El boton de accion del menu no entra en la barra del celular: descuadraba el logo y el menu. Contacto sigue a mano en las opciones del menu. */ html body .navbar .navbar-other .nav-item:has(> .boton-cta-menu) { display: none !important; } } /* ---------- Portada: el punto activo en blanco ---------- */ /* La plataforma, hasta 992px, lo pinta con el color primario del sitio (el azul de Dumar) y sobre la foto no se leia. En la computadora ya era blanco: va sin media query para cubrir tambien los 992px. */ html body#paginaInicio .swiper-hero .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #ffffff !important; } /* ===================================================================================== NAZE 2 — LO PROPIO DE NAZE Lo de arriba es dumar2 copiado (con los ids y la paleta de NAZE). Esto es lo que NAZE necesita distinto: los paneles sin apilar, Formacion sobre el degrade de la marca y los bloques que dumar2 no tiene (Servicios con fichas con foto, Noticias y Testimonios). ===================================================================================== */ /* ---------- Formacion: panel oscuro ---------- */ /* La ficha tecnica de Areas sobre el degrade de la marca (navy que termina en verde profundo), asi no repite el navy liso de Metodologia, que es el otro panel oscuro. El tercer :not le gana a la regla de ritmo, que saca la imagen de fondo de todos los bloques (en dumar2 le ganaba la clase del apilado). */ html body#paginaInicio .content-wrapper > section#divBloqueFormacion:not(#n2):not(#n2b):not(#n2c) { background-color: #17202e !important; background-image: linear-gradient(135deg, #17202e 0%, #1f3049 50%, #256d4c 100%) !important; } /* ---------- Cierre: sin el marco que tapaba el apilado ---------- */ /* En dumar2 el cierre lleva una sombra del color de la pagina estirada hacia arriba para tapar los recortes del panel apilado de atras. Sin apilado esa sombra pisaria el borde de abajo del bloque de arriba. */ html body#paginaInicio #divBloqueCierre.n2-cierre:not(#n2) { box-shadow: none !important; } /* ---------- Credenciales: el icono provisorio ---------- */ /* Mientras los banners no tengan su dibujo SVG (Banners, tipo SVG), la ficha muestra el icono del banner en el lugar del dibujo, en linea verde y del mismo alto, para que la ficha no quede coja. Cuando el banner pasa a SVG el icono ya no se emite y esta regla no aplica. */ html body#paginaInicio #divBloqueCredenciales .swiper-slide > i.banner-icon:not(#n2) { display: flex !important; align-items: center; height: 92px; margin: 0 0 28px !important; font-size: 54px !important; line-height: 1 !important; color: var(--v2-verde-medio) !important; -webkit-text-fill-color: var(--v2-verde-medio) !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; } /* ---------- Servicios: las Categorias de Green Family 2 ---------- */ /* Fichas con foto como las categorias de Green Family 2: el nombre del servicio va adentro de la foto, abajo a la izquierda, sobre un degrade navy que lo hace legible, y debajo las areas que cubre. El bloque de servicios (predefinido 10) pone el nombre y las areas debajo de la foto: se anclan a la ficha y se suben encima. Va sobre el gris de la pagina, sin panel, como en Green Family 2. */ html body#paginaInicio .content-wrapper > #divBloqueServicios:not(#n2) { padding-top: 112px !important; padding-bottom: 112px !important; } html body#paginaInicio #divBloqueServicios > .container { padding-top: 0 !important; padding-bottom: 0 !important; } html body#paginaInicio #divBloqueServicios > .container > .row > div:first-child { flex: 0 0 100%; max-width: 100%; margin: 0 !important; padding-left: 12px !important; padding-right: 12px !important; justify-content: flex-start !important; text-align: left !important; } html body#paginaInicio #divBloqueServicios h2.display-4 { padding: 0 !important; margin: 0 0 56px !important; } html body#paginaInicio #divBloqueServicios .position-relative > .mt-4 { margin-top: 0 !important; } html body#paginaInicio #divBloqueServicios .project.item { position: relative; } html body#paginaInicio #divBloqueServicios .project.item figure { position: relative; margin: 0 !important; border-radius: var(--v2-radio-tarjeta) !important; overflow: hidden; background: #dfe5ee; } html body#paginaInicio #divBloqueServicios .project.item figure img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0 !important; } html body#paginaInicio #divBloqueServicios .project.item figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 23, 34, .86) 0%, rgba(16, 23, 34, .5) 34%, rgba(16, 23, 34, 0) 62%); pointer-events: none; z-index: 1; } /* el nombre y las areas, encima de la foto: la ficha es una columna y su relleno lateral es la mitad del gutter, asi que el texto se mete esa medida para quedar adentro de la foto */ html body#paginaInicio #divBloqueServicios .project.item .post-header { position: absolute; left: calc(var(--bs-gutter-x, 1.5rem) * .5); right: calc(var(--bs-gutter-x, 1.5rem) * .5); bottom: 0; z-index: 2; padding: 0 26px 24px; pointer-events: none; } html body#paginaInicio #divBloqueServicios .project.item .post-title { display: block !important; margin: 0 0 8px !important; text-align: left !important; } html body#paginaInicio #divBloqueServicios .project.item .post-title a { font-size: 23px !important; font-weight: 600 !important; letter-spacing: -.025em !important; line-height: 1.15 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body#paginaInicio #divBloqueServicios .project.item .post-header h3 { margin: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.5 !important; text-align: left !important; color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; } /* al pasar el mouse la foto se acerca (lo hace el theme con hover-scale) y la linea de abajo del nombre se llena de verde claro, como las filas de las fichas tecnicas */ html body#paginaInicio #divBloqueServicios .project.item .post-header::before { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; background: var(--v2-lima); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--v2-curva); } @media (hover: hover) { html body#paginaInicio #divBloqueServicios .project.item:hover .post-header::before { transform: scaleX(1); } } /* ---------- Noticias: la nota destacada en el mismo lenguaje ---------- */ /* dumar2 no tiene este bloque. Va como un panel blanco mas: el titular a la izquierda, la foto de la nota en su marco redondeado (se abre al entrar), y al lado la categoria en mono, el titulo de la nota, la bajada y el boton en pastilla. Las flechas del carrusel, como circulos de linea. */ html body#paginaInicio #divBloqueNoticiasPreview > .container { padding-top: 0 !important; padding-bottom: 0 !important; } html body#paginaInicio #divBloqueNoticiasPreview > .container > .row > div:not(.swiper-container) { flex: 0 0 100%; max-width: 100%; margin: 0 !important; padding-left: 12px !important; padding-right: 12px !important; justify-content: flex-start !important; text-align: left !important; } html body#paginaInicio #divBloqueNoticiasPreview > .container > .row > div:not(.swiper-container):empty { display: none !important; } html body#paginaInicio #divBloqueNoticiasPreview h2.display-4 { padding: 0 !important; margin: 0 0 56px !important; } html body#paginaInicio #divBloqueNoticiasPreview .swiper-container { margin-bottom: 0 !important; } html body#paginaInicio #divBloqueNoticiasPreview .swiper-slide > .row { align-items: center !important; } html body#paginaInicio #divBloqueNoticiasPreview figure { margin: 0 !important; border-radius: var(--v2-radio) !important; overflow: hidden; } html body#paginaInicio #divBloqueNoticiasPreview figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; } /* la categoria arriba del titulo, en mono: el bloque la pone debajo */ html body#paginaInicio #divBloqueNoticiasPreview .swiper-slide .mb-5 { display: flex; flex-direction: column-reverse; gap: 14px; margin-bottom: 20px !important; } html body#paginaInicio #divBloqueNoticiasPreview .breadcrumb { margin: 0 !important; padding: 0 !important; background: none !important; } html body#paginaInicio #divBloqueNoticiasPreview .breadcrumb-item, html body#paginaInicio #divBloqueNoticiasPreview .breadcrumb-item a { font-family: var(--v2-mono) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } html body#paginaInicio #divBloqueNoticiasPreview .post-title { margin: 0 !important; } html body#paginaInicio #divBloqueNoticiasPreview .post-title a { font-size: clamp(26px, 2.3vw, 34px) !important; font-weight: 700 !important; letter-spacing: -.035em !important; line-height: 1.1 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; transition: color .3s ease, -webkit-text-fill-color .3s ease; } html body#paginaInicio #divBloqueNoticiasPreview .post-title a:hover { color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } html body#paginaInicio #divBloqueNoticiasPreview .texto-producto-destacado p { font-size: 16px !important; line-height: 1.65 !important; max-width: 52ch; color: var(--v2-texto) !important; } /* la bajada, recortada a seis renglones (en el celular la plataforma no la muestra, y se respeta) */ @media (min-width: 992px) { html body#paginaInicio #divBloqueNoticiasPreview .texto-producto-destacado { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; margin-bottom: 28px !important; } } html body#paginaInicio #divBloqueNoticiasPreview .btn i { display: none !important; } /* las flechas del carrusel: circulos de linea, arriba a la derecha a la altura del titular */ html body#paginaInicio #divBloqueNoticiasPreview .swiper-container { position: static; } html body#paginaInicio #divBloqueNoticiasPreview .swiper-controls .swiper-navigation .swiper-button { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: transparent !important; border: 1px solid var(--v2-linea) !important; box-shadow: none !important; color: var(--v2-tinta) !important; transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; } html body#paginaInicio #divBloqueNoticiasPreview .swiper-controls .swiper-navigation .swiper-button:hover { background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; color: #ffffff !important; } /* ---------- Testimonios: por si se carga uno ---------- */ /* Hoy no se pinta (el unico testimonio esta oculto). Si aparece, es un panel blanco mas: el titular a la izquierda y la cita en tinta, con el autor en mono. */ html body#paginaInicio #divBloqueTestimonios > .container > .row > div:has(> h2) { flex: 0 0 100%; max-width: 100%; margin: 0 !important; justify-content: flex-start !important; text-align: left !important; } html body#paginaInicio #divBloqueTestimonios h2.display-4 { padding: 0 !important; margin: 0 0 48px !important; } html body#paginaInicio #divBloqueTestimonios blockquote, html body#paginaInicio #divBloqueTestimonios blockquote p { font-size: clamp(19px, 1.6vw, 23px) !important; font-weight: 500 !important; letter-spacing: -.02em !important; line-height: 1.45 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body#paginaInicio #divBloqueTestimonios blockquote.icon::before { color: var(--v2-lima) !important; } html body#paginaInicio #divBloqueTestimonios .blockquote-details :is(h5, p, span) { font-family: var(--v2-mono) !important; font-size: 13px !important; color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } /* ---------- Pie: la marca gigante ---------- */ /* la marca gigante en mayusculas, como el logo. Son cuatro letras y no las nueve de "Dumar SRL": va mas grande para que ocupe el pie con el mismo peso. */ html body footer.text-inverse .n2-marca { text-transform: uppercase; font-size: 22vw; letter-spacing: -.04em; } /* ---------- Cierre: el segundo tono sobre el panel claro ---------- */ /* dumar2 pinta el segundo tono del cierre en blanco translucido (su titulo no tiene coma y nunca se ve). El de NAZE si lo tiene, y va sobre el panel claro: gris azulado, como en los demas paneles. */ html body#paginaInicio #divBloqueCierre .n2-tono { color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } /* ---------- Internas: los titulos blancos sobre una foto ---------- */ /* La capa v2 pinta todos los titulares en tinta. En la nota de Noticias el titulo va encima de la foto (la plataforma lo marca text-white) y en tinta no se leia: los que la plataforma pide blancos, blancos. */ html body :is(h1, h2, h3, h4, h5, h6).text-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---------- Celular y tablet ---------- */ @media (max-width: 991.98px) { html body#paginaInicio .content-wrapper > :is(#divBloqueEnfoque, #divBloqueMetodologia, #divBloqueAreas, #divBloqueLibros, #divBloqueSueldos, #divBloqueFormacion, #divBloqueTestimonios, #divBloqueNoticiasPreview):not(#n2) { border-radius: 20px !important; } html body#paginaInicio .content-wrapper > #divBloqueServicios:not(#n2) { padding-top: 72px !important; padding-bottom: 72px !important; } html body#paginaInicio :is(#divBloqueServicios, #divBloqueNoticiasPreview) h2.display-4 { margin-bottom: 36px !important; } /* en el celular las flechas de las noticias se montaban sobre la foto: van abajo a la derecha */ html body#paginaInicio #divBloqueNoticiasPreview .swiper-container { position: relative; padding-bottom: 70px; } html body#paginaInicio #divBloqueNoticiasPreview .swiper-controls .swiper-navigation .swiper-button { top: auto !important; bottom: 0 !important; margin: 0 !important; transform: none !important; } html body#paginaInicio #divBloqueNoticiasPreview .swiper-controls .swiper-navigation .swiper-button-prev { left: auto !important; right: 58px !important; } html body#paginaInicio #divBloqueNoticiasPreview .swiper-controls .swiper-navigation .swiper-button-next { right: 0 !important; } html body#paginaInicio #divBloqueCredenciales .swiper-slide > i.banner-icon:not(#n2) { height: 64px; margin-bottom: 18px !important; font-size: 40px !important; } } @media (max-width: 575.98px) { html body#paginaInicio #divBloqueServicios .row { --bs-gutter-y: 16px; } html body#paginaInicio #divBloqueServicios .project.item figure img { aspect-ratio: 4 / 3; } html body#paginaInicio #divBloqueServicios .project.item .post-header { padding: 0 20px 18px; } html body#paginaInicio #divBloqueServicios .project.item .post-title a { font-size: 20px !important; } } /* ---------- Movimiento reducido ---------- */ /* Con prefers-reduced-motion custom.js no prepara ninguna entrada: todo queda visible y quieto. Por las dudas, nada de lo que entra se queda escondido ni a mitad de camino. */ @media (prefers-reduced-motion: reduce) { html body :is(.n2-titulo-espera, .n2-entra-espera, .n2-entra-izq, .n2-entra-der, .n2-entra-arriba, .n2-revela-foto) { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } html body .n2-revela-foto img { transform: none !important; } /* las entradas del theme (scrollCue, data-cue) no miran esta preferencia: arrancan escondidas y se deslizan al aparecer. Con movimiento reducido quedan visibles desde el principio. */ html body :is([data-cue], [data-cues] > *) { animation: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* ===================================================================================== INTERNAS ------------------------------------------------------------------------------------- Las paginas que no son la home: la ficha de cada servicio (servicio.php), Nosotros, Noticias, la nota y Contacto. Llevan el lenguaje de la home (Geist, portada enmarcada, titulares grandes en tinta, datos chicos en mono, fotos en marcos redondeados, filas con lineas finas), pero el contenido va a todo el ancho sobre BLANCO y no en paneles sobre el gris. La regla de los fondos (pedido de Rodri, 05/10/2026): lo que se ve alrededor del panel del pie tiene que ser del mismo color que el bloque que tiene justo arriba, y no puede quedar una franja gris suelta entre dos bloques blancos. En la home los bloques son paneles sobre el gris y el pie tambien va sobre el gris. En las internas el contenido es blanco, asi que la pagina entera pasa a blanco: el pie, la portada enmarcada y la ficha de datos quedan apoyados sobre blanco. De la home se amplio el alcance, con el mismo peso para que la home no cambie, de: - la portada enmarcada: body:has(#divPortadas) en lugar de body#paginaInicio, - las entradas, los titulares por renglones y las fotos que se abren: body:not(#n2), - la ficha tecnica de Credenciales, que tambien toma la franja #divBanners de la ficha. Lo de abajo es solo lo que las internas necesitan distinto. Marcadores: la ficha de servicio tiene #divDescripcionServicio, las secciones del panel llevan #divContenido.seccion-. ===================================================================================== */ /* ---------- Fondos: blanco en toda la pagina ---------- */ /* El gris de la pagina es una eleccion del panel (Texto del sitio > fondo) y vale para todo el sitio: el panel no sabe elegir un fondo solo para las internas, por eso esto va a mano. Gana por el id del :has (tres contra los dos de la regla del panel). */ html body:not(#paginaInicio):not(#\9):not(#\9) { background-color: #ffffff !important; } html body:not(#paginaInicio) .content-wrapper { background: #ffffff !important; } /* las secciones traen bg-light, bg-gray o bg-white de la plataforma: transparentes, sobre el blanco */ html body:not(#paginaInicio) .content-wrapper section.wrapper:not(#n2) { background-color: transparent !important; } /* la barra de scroll de la pagina, sobre blanco y no sobre el gris claro de la home */ html:not(:has(#paginaInicio))::-webkit-scrollbar-track { background: #ffffff; } /* ---------- Pie: el mismo aire en todas ---------- */ /* El ultimo bloque de cada interna no lleva aire abajo: lo pone el pie, asi el espacio hasta el panel oscuro es siempre el mismo (el de la home entre bloques). */ html body:not(#paginaInicio) footer.text-inverse { margin-top: 112px !important; } /* ---------- Portada: enmarcada, mas baja que la de la home ---------- */ /* Es la misma portada de la home (enmarcada, velo del lado del titulo, titular grande en blanco y la bajada en el tono claro que se elige en el panel), con el alto de una interna: la foto presenta la pagina pero el contenido asoma en la primera pantalla. */ html body:not(#paginaInicio) #divPortadas:not(#n2) { background: transparent !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero, html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper, html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-slide { height: clamp(560px, 74svh, 760px) !important; min-height: 0 !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-content { padding-top: 0 !important; } /* el titulo abajo a la izquierda, sobre la sombra de abajo de la foto, y no arriba como en la home: en una portada baja, arriba quedaba pegado a la barra del menu */ html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-content > .row { align-items: flex-end !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-content .row > div { align-self: flex-end !important; padding-bottom: 64px !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-slide::before { background: linear-gradient(90deg, rgba(16, 23, 34, .6) 0%, rgba(16, 23, 34, 0) 75%), linear-gradient(0deg, rgba(16, 23, 34, .6) 0%, rgba(16, 23, 34, 0) 55%) !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .portada-texto-normal { max-width: 44ch; } /* una sola foto: sin los puntos del carrusel */ html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-pagination { display: none !important; } /* ---------- Titulares de las internas ---------- */ /* El mismo titular de los bloques de la home: Geist en tinta, apretado, a la izquierda. */ html body:not(#paginaInicio) :is(.seccion-noticias h1.display-6, .seccion-contacto p.titulo-formulario-contacto.display-5, #divRecomendados h3.display-5, #divRecientes h3.display-5) { display: block !important; text-align: left !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; font-weight: 700 !important; letter-spacing: -.045em !important; padding: 0 !important; } /* ---------- Nosotros ---------- */ /* El texto de la seccion, que venia suelto, chico y a todo el ancho: la primera oracion va grande a la izquierda, como una frase de apertura, y el resto a la derecha a ancho de lectura. */ html body:not(#paginaInicio) #divContenido.seccion-nosotros > .container { max-width: 1240px !important; margin-top: 0 !important; padding: 112px 32px 0 !important; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion { margin: 0 !important; row-gap: 0 !important; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 { margin: 0 !important; padding: 0 !important; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 > p { max-width: 60ch; margin: 0 0 1.1em !important; font-size: 18px !important; line-height: 1.7 !important; color: var(--v2-texto) !important; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 > p:first-child { max-width: 19ch; margin: 0 !important; font-size: clamp(28px, 2.6vw, 40px) !important; font-weight: 600 !important; letter-spacing: -.035em !important; line-height: 1.15 !important; color: var(--v2-tinta) !important; } @media (min-width: 992px) { html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 88px; align-items: start; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 > p { grid-column: 2; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 > p:first-child { grid-column: 1; grid-row: 1 / span 20; } } /* ---------- Ficha de servicio ---------- */ /* Como la ficha de producto de Green Family 2, en el lenguaje: la foto en su marco redondeado, el nombre grande en Geist, las areas en mono, la bajada a ancho de lectura y el boton de consulta por WhatsApp en pastilla. Abajo, la descripcion en dos columnas: la pestaña como pastilla bajo la foto y la lista como filas numeradas con lineas finas bajo el texto (como la lista de Libros de la home). */ html body:has(#divDescripcionServicio) [id^="divServicio_"].container { max-width: 1240px !important; padding: 24px 32px 0 !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] > .row { --bs-gutter-x: 64px; --bs-gutter-y: 32px; align-items: center; margin-top: 0 !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] > .row > [class*="col"] { margin-top: 0 !important; } html body:has(#divDescripcionServicio) #swiperProductos { margin: 0 !important; } html body:has(#divDescripcionServicio) #swiperProductos figure { position: relative; margin: 0 !important; border-radius: var(--v2-radio) !important; overflow: hidden; background: var(--v2-panel); } html body:has(#divDescripcionServicio) #swiperProductos figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; } /* el boton de agrandar la foto: un circulo blanco, en vez del verde de la plataforma */ html body:has(#divDescripcionServicio) #swiperProductos figure .item-link { left: 18px !important; bottom: 18px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .92) !important; color: var(--v2-tinta) !important; box-shadow: none !important; } html body:has(#divDescripcionServicio) #swiperProductos figure .item-link i { color: var(--v2-tinta) !important; font-size: 15px !important; } html body:has(#divDescripcionServicio) #swiperProductos .swiper-controls { display: none !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] .mb-2:has(> .d-flex > h2.post-title) { margin: 0 !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] h2.post-title { margin: 0 0 20px !important; font-size: clamp(38px, 4.2vw, 62px) !important; font-weight: 700 !important; letter-spacing: -.048em !important; line-height: 1 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } /* las areas que cubre el servicio, en mono: son datos, como la categoria de las notas */ html body:has(#divDescripcionServicio) [id^="divServicio_"] h3.post-title { margin: 0 !important; max-width: 44ch; font-family: var(--v2-mono) !important; font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: .05em !important; line-height: 1.8 !important; text-transform: uppercase; color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } html body:has(#divDescripcionServicio) #divDescripcionCorta { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--v2-linea); } html body:has(#divDescripcionServicio) #divDescripcionCorta p { max-width: 46ch; margin: 0 !important; font-size: 18px !important; line-height: 1.65 !important; color: var(--v2-texto) !important; } /* las sesiones del servicio (las escribe servicios.js segun la variante, p. ej. "1 sesion diaria"): un dato mas, en mono, debajo de la bajada */ html body:has(#divDescripcionServicio) #lblSesiones { margin: 14px 0 0 !important; font-family: var(--v2-mono) !important; font-size: 12.5px !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--v2-tono) !important; } html body:has(#divDescripcionServicio) #divAgregarProductoCarrito { margin-top: 32px !important; } html body:has(#divDescripcionServicio) #divAgregarProductoCarrito > div { margin: 0 !important; justify-content: flex-start !important; } /* Consultar por WhatsApp: la pastilla verde de los botones del sitio, con el icono */ html body:has(#divDescripcionServicio) #divAgregarProductoCarrito .btn.btn-success { margin: 0 !important; gap: 10px; background: var(--v2-verde) !important; border: 1px solid var(--v2-verde) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body:has(#divDescripcionServicio) #divAgregarProductoCarrito .btn.btn-success:hover { background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; } html body:has(#divDescripcionServicio) #divAgregarProductoCarrito .btn.btn-success i { position: static !important; margin: 0 !important; font-size: 19px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* la descripcion: pestaña a la izquierda, contenido a la derecha. Sin linea arriba: la primera fila de la lista ya trae la suya, y con las dos juntas se veia un renglon vacio entre lineas. */ html body:has(#divDescripcionServicio) [id^="divServicio_"] > .mt-8 { margin-top: 112px !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] .nav-tabs.nav-pills { gap: 8px; margin: 0 !important; padding: 0 !important; border: 0 !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] .nav-pills .nav-item { margin: 0 !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] .nav-pills .nav-link { display: inline-flex !important; align-items: center; gap: 8px; padding: 10px 18px !important; border: 1px solid var(--v2-linea) !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -.005em !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] .nav-pills .nav-link.active { background: var(--v2-pagina) !important; border-color: var(--v2-pagina) !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] .nav-pills .nav-link i { padding: 0 !important; font-size: 17px !important; line-height: 1 !important; color: var(--v2-verde-medio) !important; -webkit-text-fill-color: var(--v2-verde-medio) !important; } html body:has(#divDescripcionServicio) #divDescripcionServicio { margin-top: 32px !important; } html body:has(#divDescripcionServicio) #divDescripcionServicio p { max-width: 62ch; margin: 0 0 1em !important; font-size: 17px !important; line-height: 1.75 !important; color: var(--v2-texto) !important; } /* la lista, como filas numeradas: el numero en mono y una linea fina arriba de cada fila, que se llena de verde al pasar el mouse (como las filas de las fichas de la home) */ html body:has(#divDescripcionServicio) #divDescripcionServicio ul { counter-reset: n2-fila; margin: 0 0 1em !important; padding: 0 !important; list-style: none !important; border-bottom: 1px solid var(--v2-linea); } html body:has(#divDescripcionServicio) #divDescripcionServicio ul > li { counter-increment: n2-fila; position: relative; margin: 0 !important; padding: 17px 0 17px 52px !important; font-size: 16.5px !important; line-height: 1.55 !important; color: var(--v2-tinta) !important; background: linear-gradient(var(--v2-verde-medio), var(--v2-verde-medio)) left top / 0% 1px no-repeat, linear-gradient(var(--v2-linea), var(--v2-linea)) left top / 100% 1px no-repeat; transition: background-size .6s var(--v2-curva); } html body:has(#divDescripcionServicio) #divDescripcionServicio ul > li::before { content: counter(n2-fila, decimal-leading-zero); position: absolute; left: 0; top: 20px; font-family: var(--v2-mono); font-size: 12.5px; line-height: 1.55; color: var(--v2-tono); } @media (hover: hover) { html body:has(#divDescripcionServicio) #divDescripcionServicio ul > li:hover { background-size: 100% 1px, 100% 1px; } } @media (min-width: 992px) { html body:has(#divDescripcionServicio) [id^="divServicio_"] > .mt-8 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; } html body:has(#divDescripcionServicio) #divDescripcionServicio { margin-top: 0 !important; } /* la pastilla acompaña mientras pasa la lista, como el titulo de Areas en la home */ html body:has(#divDescripcionServicio) [id^="divServicio_"] .nav-tabs.nav-pills { position: sticky; top: 130px; } } /* ---------- Ficha de servicio: la ficha de datos ---------- */ /* La franja de banners de la ficha es la ficha tecnica de Credenciales de la home (con los mismos dibujos, que se trazan al entrar): el tramo de Credenciales tambien toma #divBanners. Aca solo el aire y el contenedor, que servicio.php arma con margenes propios. */ html body:has(#divDescripcionServicio) #divBanners:not(#n2) { padding-top: 112px !important; } html body:has(#divDescripcionServicio) #divBanners > .container { margin: 0 !important; } html body:has(#divDescripcionServicio) #divBanners .swiper-pagination { display: none !important; } /* ---------- Ficha de servicio: Servicios recomendados (y Vistos recientemente) ---------- */ /* Las fichas con foto de Servicios de la home: el nombre adentro de la foto sobre el degrade navy y las areas debajo. La plataforma las arma como carrusel: va como grilla de tres, sin flechas ni puntos. */ html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) > .container-sm { max-width: 1240px !important; padding: 112px 32px 0 !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) h3.display-5 { margin: 0 0 40px !important; font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.04 !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper-container { margin: 0 !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper { overflow: visible !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper-wrapper { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; transform: none !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper-slide { position: relative; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper-slide > div { position: relative; margin: 0 !important; padding: 0 !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper-controls { display: none !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) figure { position: relative; margin: 0 !important; border-radius: var(--v2-radio-tarjeta) !important; overflow: hidden; background: #dfe5ee; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) figure img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0 !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16, 23, 34, .86) 0%, rgba(16, 23, 34, .5) 34%, rgba(16, 23, 34, 0) 62%); pointer-events: none; z-index: 1; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .post-header { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0 !important; padding: 0 26px 24px !important; pointer-events: none; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .post-header .post-title { display: block !important; margin: 0 0 8px !important; text-align: left !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .post-header .post-title a { font-size: 23px !important; font-weight: 600 !important; letter-spacing: -.025em !important; line-height: 1.15 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .post-header h3:not(.post-title) { margin: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.5 !important; text-align: left !important; color: rgba(255, 255, 255, .72) !important; -webkit-text-fill-color: rgba(255, 255, 255, .72) !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .post-header::before { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; background: var(--v2-lima); transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--v2-curva); } @media (hover: hover) { html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper-slide:hover .post-header::before { transform: scaleX(1); } } /* ---------- Noticias y la nota: la columna lateral ---------- */ /* Categorias, ultimas entradas y archivo como listas de filas con lineas finas, con el rotulo de cada una en mono (como los datos chicos de la home) y sin las viñetas verdes de la plataforma. En la computadora la columna acompaña mientras se lee. */ html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .widget { margin: 0 0 44px !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .widget-title { margin: 0 0 10px !important; font-family: var(--v2-mono) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar :is(.unordered-list, .image-list) { margin: 0 !important; padding: 0 !important; list-style: none !important; border-bottom: 1px solid var(--v2-linea); } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar :is(.unordered-list, .image-list) > li { margin: 0 !important; padding: 13px 0 !important; border-top: 1px solid var(--v2-linea); } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .unordered-list > li::before { content: none !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .unordered-list > li > a { font-size: 15px !important; font-weight: 500 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; transition: color .25s ease, -webkit-text-fill-color .25s ease; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .image-list > li { display: flex !important; align-items: center; gap: 16px; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .image-list figure { flex: 0 0 64px; width: 64px !important; height: 64px !important; margin: 0 !important; border-radius: 12px !important; overflow: hidden; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .image-list figure img { width: 64px !important; height: 64px !important; object-fit: cover; border-radius: 0 !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .image-list .post-content { margin: 0 !important; padding: 0 !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .image-list h6 { margin: 0 0 4px !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar .image-list h6 a { font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: -.01em !important; line-height: 1.35 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; transition: color .25s ease, -webkit-text-fill-color .25s ease; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar :is(.unordered-list, .image-list) a:hover { color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .post-meta { margin: 0 !important; padding: 0 !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .post-meta li, html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .post-meta li * { font-family: var(--v2-mono) !important; font-size: 12px !important; letter-spacing: .02em !important; color: var(--v2-tono) !important; -webkit-text-fill-color: var(--v2-tono) !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .post-meta li i { display: none !important; } @media (min-width: 992px) { html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .sidebar { position: sticky; top: 130px; align-self: flex-start; } } /* ---------- Noticias: el listado ---------- */ /* El titulo grande a la izquierda, como los titulares de la home, y las notas como la de Noticias de la home: la foto en su marco, la categoria en mono verde y el titulo en tinta. */ html body:not(#paginaInicio) #divContenido.seccion-noticias > .container { max-width: 1240px !important; padding: 24px 32px 0 !important; } html body:not(#paginaInicio) #divContenido.seccion-noticias > .container > .container { max-width: none !important; padding: 0 !important; } html body:not(#paginaInicio) .seccion-noticias h1.display-6 { margin: 0 0 64px !important; font-size: clamp(44px, 5.2vw, 76px) !important; letter-spacing: -.05em !important; line-height: .98 !important; } html body:not(#paginaInicio) .seccion-noticias .row.gy-10 { --bs-gutter-x: 64px; margin-top: 0 !important; align-items: flex-start; } html body:not(#paginaInicio) .seccion-noticias .row.gy-10 > * { margin-top: 0 !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog > .row:first-child { margin-bottom: 8px !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog > .row:first-child h2:empty { display: none !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog > .row:first-child p { font-family: var(--v2-mono) !important; font-size: 12.5px !important; letter-spacing: .02em !important; color: var(--v2-tono) !important; } html body:not(#paginaInicio) .seccion-noticias #cboOrdenEntradas { height: 46px; padding: 0 40px 0 18px !important; border: 1px solid var(--v2-linea) !important; border-radius: 999px !important; box-shadow: none !important; font-size: 14px !important; color: var(--v2-tinta) !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .blog { margin: 32px 0 0 !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .project.item { margin-bottom: 56px !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .project.item figure { margin: 0 0 20px !important; border-radius: var(--v2-radio-tarjeta) !important; overflow: hidden; } html body:not(#paginaInicio) .seccion-noticias #divBlog .project.item figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .post-header { align-items: center; margin: 0 0 12px !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .post-category, html body:not(#paginaInicio) .seccion-noticias #divBlog .post-category a { font-family: var(--v2-mono) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .post-category.text-line::before { background: var(--v2-verde-medio) !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .post-title { margin: 0 !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .post-title a { font-size: clamp(21px, 1.75vw, 25px) !important; font-weight: 600 !important; letter-spacing: -.028em !important; line-height: 1.18 !important; color: var(--v2-tinta) !important; -webkit-text-fill-color: var(--v2-tinta) !important; transition: color .3s ease, -webkit-text-fill-color .3s ease; } html body:not(#paginaInicio) .seccion-noticias #divBlog .post-title a:hover { color: var(--v2-verde) !important; -webkit-text-fill-color: var(--v2-verde) !important; } /* la paginacion: circulos de linea, el activo en tinta (como las flechas de Noticias de la home) */ html body:not(#paginaInicio) .seccion-noticias #divBlog .pagination { gap: 8px; } html body:not(#paginaInicio) .seccion-noticias #divBlog .pagination .page-link { width: 42px !important; height: 42px !important; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; border: 1px solid var(--v2-linea) !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; font-family: var(--v2-mono) !important; font-size: 13px !important; color: var(--v2-tinta) !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .pagination .page-item.active .page-link { background: var(--v2-tinta) !important; border-color: var(--v2-tinta) !important; color: #ffffff !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .pagination .page-item.disabled .page-link { opacity: .35; } /* ---------- La nota ---------- */ /* La foto en su marco redondeado con el titulo encima, abajo a la izquierda sobre un degrade (como la portada), la fecha en mono y el texto a ancho de lectura, con los subtitulos en tinta. */ html body:not(#paginaInicio) #divContenido.seccion-noticia > .container { max-width: 1240px !important; padding: 24px 32px 0 !important; } html body:not(#paginaInicio) .seccion-noticia section.wrapper > .container { max-width: none !important; padding: 0 !important; } html body:not(#paginaInicio) .seccion-noticia .row.gy-10 { --bs-gutter-x: 64px; margin-top: 0 !important; margin-bottom: 0 !important; align-items: flex-start; } html body:not(#paginaInicio) .seccion-noticia .row.gy-10 > * { margin-top: 0 !important; } /* en el celular las dos columnas van una debajo de la otra y sin el gutter: la de la nota no trae relleno propio y con el margen negativo de la fila el texto quedaba cortado contra el borde */ @media (max-width: 991.98px) { html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .row.gy-10 { margin-left: 0 !important; margin-right: 0 !important; } html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .row.gy-10 > * { padding-left: 0 !important; padding-right: 0 !important; } /* la columna lateral queda abajo de todo: con aire, para que no se pegue al final de la nota */ html body:not(#paginaInicio) :is(.seccion-noticias, .seccion-noticia) .row.gy-10 > .sidebar { margin-top: 56px !important; } } html body:not(#paginaInicio) .seccion-noticia .blog.single .card { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card > .position-relative { border-radius: var(--v2-radio); overflow: hidden; background: var(--v2-panel); } html body:not(#paginaInicio) .seccion-noticia .blog.single .card-img-top img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0 !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card > .position-relative > .position-absolute { justify-content: flex-end !important; align-items: flex-start !important; padding: 40px 44px; background: linear-gradient(0deg, rgba(16, 23, 34, .82) 0%, rgba(16, 23, 34, .35) 45%, rgba(16, 23, 34, 0) 75%); } html body:not(#paginaInicio) .seccion-noticia .blog.single .card > .position-relative h2.h1 { order: 2; max-width: 22ch; margin: 0 !important; padding: 0 !important; text-align: left !important; text-shadow: none !important; font-size: clamp(28px, 3vw, 46px) !important; font-weight: 700 !important; letter-spacing: -.042em !important; line-height: 1.04 !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card > .position-relative > .position-absolute > div { order: 1; margin: 0 0 14px; text-shadow: none !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card > .position-relative > .position-absolute > div * { font-family: var(--v2-mono) !important; font-size: 12.5px !important; letter-spacing: .06em !important; color: rgba(255, 255, 255, .78) !important; -webkit-text-fill-color: rgba(255, 255, 255, .78) !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card > .position-relative > .position-absolute > div i { display: none !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card-body { padding: 56px 0 0 !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .classic-view { padding: 0 !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content { max-width: 68ch; margin: 0 !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content p { margin: 0 0 1.15em !important; font-size: 17.5px !important; line-height: 1.75 !important; color: var(--v2-texto) !important; } /* los subtitulos de la nota vienen como un parrafo con todo en negrita */ html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content p:has(> strong:only-child) { margin: 2em 0 .55em !important; font-size: 22px !important; line-height: 1.3 !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content p:first-child:has(> strong:only-child) { margin-top: 0 !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content strong { font-weight: 650 !important; letter-spacing: -.02em; color: var(--v2-tinta) !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content img { display: block; width: 100%; height: auto; margin: 1.4em 0; border-radius: var(--v2-radio-tarjeta); } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-footer { margin: 0 !important; } /* ---------- Contacto ---------- */ /* El titulo y la bajada a la izquierda, como los titulares de la home, y el formulario a la derecha en un panel gris claro con los campos blancos y redondeados. */ html body:not(#paginaInicio) #divContenido.seccion-contacto > .container:first-child { margin: 0 !important; padding: 0 !important; } html body:not(#paginaInicio) .seccion-contacto #divContacto > .container { max-width: 1240px !important; padding: 112px 32px 0 !important; } html body:not(#paginaInicio) .seccion-contacto #divContacto > .container > .row { margin: 0 !important; padding: 0 !important; } html body:not(#paginaInicio) .seccion-contacto #divContacto > .container > .row > .col-12 { margin: 0 !important; padding: 0 !important; } html body:not(#paginaInicio) .seccion-contacto p.titulo-formulario-contacto.display-5 { max-width: 13ch; margin: 0 !important; font-size: clamp(34px, 3.5vw, 54px) !important; line-height: 1.02 !important; } html body:not(#paginaInicio) .seccion-contacto p.titulo-formulario-contacto:not(.display-5) { max-width: 40ch; margin: 24px 0 0 !important; text-align: left !important; font-size: 17px !important; line-height: 1.65 !important; color: var(--v2-texto) !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form { margin-top: 40px; padding: 40px; border-radius: var(--v2-radio); background: var(--v2-panel); } html body:not(#paginaInicio) .seccion-contacto form.contact-form > .row { margin: 0 !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form > .row > [class*="col"] { flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; padding: 0 !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form .form-floating { margin-bottom: 14px !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form .form-control { height: 58px; min-height: 58px; padding: 24px 18px 8px !important; border: 1px solid rgba(23, 32, 46, .12) !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; font-size: 15px !important; color: var(--v2-tinta) !important; transition: border-color .25s ease, box-shadow .25s ease; } html body:not(#paginaInicio) .seccion-contacto form.contact-form textarea.form-control { height: 168px !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form .form-control:focus { border-color: var(--v2-verde-medio) !important; box-shadow: 0 0 0 4px rgba(62, 171, 122, .14) !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form .form-floating > label { padding: 17px 18px !important; font-size: 14.5px !important; color: var(--v2-tono) !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form .text-center { text-align: left !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form .text-center > .d-flex { justify-content: flex-start !important; margin-top: 10px; } html body:not(#paginaInicio) .seccion-contacto form.contact-form .btn-send { margin: 0 !important; } /* el aviso de "Mensaje enviado" esta escondido (invisible) pero ocupaba su renglon y dejaba un hueco abajo del boton: mientras no se muestra, no ocupa lugar */ html body:not(#paginaInicio) .seccion-contacto form.contact-form .label-mensaje-enviado.invisible { display: none !important; } @media (min-width: 768px) { /* los cuatro datos cortos de a dos por fila (venian de a cuatro, angostos) */ html body:not(#paginaInicio) .seccion-contacto form.contact-form .row.gx-4 > .col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; } } @media (min-width: 992px) { html body:not(#paginaInicio) .seccion-contacto #divContacto > .container > .row > .col-12 { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 80px; align-items: start; } html body:not(#paginaInicio) .seccion-contacto p.titulo-formulario-contacto { grid-column: 1; } html body:not(#paginaInicio) .seccion-contacto form.contact-form { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; } } /* ---------- Internas: celular y tablet ---------- */ @media (max-width: 991.98px) { html body:not(#paginaInicio) footer.text-inverse { margin-top: 72px !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero, html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper, html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-slide { height: clamp(420px, 60svh, 560px) !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-content .row > div { padding-bottom: 36px !important; } html body:not(#paginaInicio):has(#divPortadas) .swiper-hero .swiper-slide::before { background: linear-gradient(0deg, rgba(16, 23, 34, .72) 0%, rgba(16, 23, 34, .3) 50%, rgba(16, 23, 34, 0) 80%) !important; } html body:not(#paginaInicio) :is(#divContenido.seccion-nosotros > .container, .seccion-contacto #divContacto > .container) { padding: 64px 22px 0 !important; } html body:not(#paginaInicio) :is(#divContenido.seccion-noticias, #divContenido.seccion-noticia) > .container, html body:has(#divDescripcionServicio) [id^="divServicio_"].container { padding: 8px 22px 0 !important; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 > p:first-child { margin-bottom: 28px !important; } html body:not(#paginaInicio) .seccion-nosotros .div-texto-seccion > .col-12 > p { font-size: 17px !important; } html body:has(#divDescripcionServicio) [id^="divServicio_"] > .mt-8 { margin-top: 64px !important; } html body:has(#divDescripcionServicio) #divDescripcionServicio { margin-top: 24px !important; } html body:has(#divDescripcionServicio) #divBanners:not(#n2) { padding-top: 72px !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) > .container-sm { padding: 72px 22px 0 !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) h3.display-5 { margin-bottom: 28px !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .swiper-wrapper { grid-template-columns: minmax(0, 1fr); gap: 16px; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) figure img { aspect-ratio: 4 / 3; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .post-header { padding: 0 20px 18px !important; } html body:has(#divDescripcionServicio) :is(#divRecomendados, #divRecientes) .post-header .post-title a { font-size: 20px !important; } html body:not(#paginaInicio) .seccion-noticias h1.display-6 { margin-bottom: 36px !important; } html body:not(#paginaInicio) .seccion-noticias #divBlog .project.item { margin-bottom: 40px !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card > .position-relative > .position-absolute { padding: 22px; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card-img-top img { aspect-ratio: 4 / 3; } html body:not(#paginaInicio) .seccion-noticia .blog.single .card-body { padding-top: 36px !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content p { font-size: 16.5px !important; } html body:not(#paginaInicio) .seccion-noticia .blog.single article .post-content p:has(> strong:only-child) { font-size: 19px !important; } html body:not(#paginaInicio) .seccion-contacto form.contact-form { padding: 22px 18px; border-radius: 20px; } }