/** * Layout de páginas con mapa v2 ([fj_mapa]): * sin columna 80/20 del radar viejo; contenido a ancho completo. */ .graphArea, .mapGraph, .expandwindow { display: none !important; visibility: hidden !important; pointer-events: none !important; } #ajax-content-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; overflow: visible !important; background: #f6f4ee !important; padding-top: 0 !important; margin-top: 0 !important; } #ajax-content-wrap .container-wrap { background: #f6f4ee; } /* Smart Cities (y otras) traen el gris de Salient (#e4e5e5). Unificar con el resto. */ html body.fj-con-mapa, html body.fj-con-mapa.material, html body.fj-con-mapa #ajax-content-wrap, html body.fj-con-mapa #ajax-content-wrap .container-wrap, html body.fj-con-mapa #ajax-content-wrap .container.main-content, html body.fj-con-mapa .container-wrap, html body.fj-con-mapa .container.main-content, html body.fj-con-mapa .fj-mapa-panel, html body.fj-pagina-home, html body.fj-pagina-home #ajax-content-wrap, html body.fj-pagina-home .container-wrap, html body.page-home-mapa-v2 #ajax-content-wrap { background: #f6f4ee !important; background-color: #f6f4ee !important; box-shadow: none !important; } html body.fj-con-mapa #ajax-content-wrap .container.main-content, html body.fj-con-mapa .container.main-content { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Gana a 20230524_style.css (page-id-380/459… + .ocm-effect-wrap, spec más alta). */ html body.fj-con-mapa.material .ocm-effect-wrap, html body.fj-con-mapa.material .ocm-effect-wrap #ajax-content-wrap, html body.fj-con-mapa.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.page-id-380.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.page-id-459.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.page-id-432.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.page-id-2456.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.page-id-2457.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.page-id-2564.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.page-id-2563.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.parent-pageid-459.material .ocm-effect-wrap #ajax-content-wrap .container-wrap, html body.fj-con-mapa.parent-pageid-380.material .ocm-effect-wrap #ajax-content-wrap .container-wrap { background: #f6f4ee !important; background-color: #f6f4ee !important; } .container.main-content { width: 100% !important; } /* * Tipografía del mapa = la de la web: * títulos → Quarto · textos → Gotham * (tooltip, etiquetas SVG, “estás en”, filtros, portada v2) */ :root { --fj-serif: "Quarto A", "Quarto B", serif; } .fj-tip, .fj-tip-type, .fj-tip-desc, .fj-here, .fj-rail-label, .fj-filtros, .fj-filtros button, .fj-leyenda, .fj-mapa .fj-label, .fj-mapa .nlabel, .fj-eyebrow, .fj-pname, .fj-pdesc, .fj-mcue, .fj-area-lede, .fj-area-txt p, .fj-hs-lede, .fj-met-step p, .fj-caso p, .fj-kicker { font-family: "Gotham A", "Gotham B", sans-serif !important; } .fj-tip-name, .fj-mapa .fj-label-hub, .fj-mapa .nlabel.hub, .fj-hero-title, .fj-hs-title, .fj-area-title, .fj-pen-t, .fj-cta-q, .fj-met-n { font-family: "Quarto A", "Quarto B", serif !important; } /* * Panel lateral (modo seccion/servicio). * - Reparent a vía fji-mapa-panel-fix.js * - Empieza bajo el header Salient para que el botón ‹ se vea y sea clicable * - Padding del contenido al colapsar (refuerzo del plugin) */ @media (min-width: 901px) { body.fj-con-mapa .fj-mapa-panel, body .fj-mapa.fj-mapa-panel { top: 72px !important; bottom: 0 !important; z-index: 90 !important; background: #f6f4ee; } body.fj-con-mapa .fj-toggle, body.fj-con-mapa .fj-toggle:hover { z-index: 92; background: transparent !important; box-shadow: none !important; } body.fj-con-mapa .fj-here { display: none !important; } body.fj-con-mapa .container-wrap, body.fj-con-mapa #footer-outer { padding-left: var(--fj-map-w, 400px) !important; transition: padding-left 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } html.fj-mapa-plegado body.fj-con-mapa .container-wrap, html.fj-mapa-plegado body.fj-con-mapa #footer-outer { padding-left: 54px !important; } body.fj-con-mapa:not(.page-contacto-mapa-v2):not(.page-contacto):not(.page-contact):not(.fj-pagina-contacto):not(.page-nosotros-mapa-v2):not(.page-nosotros):not(.page-our-team):not(.fj-pagina-nosotros):not(.page-home-mapa-v2):not(.fj-pagina-home) .container.main-content { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; } html.fj-mapa-plegado body.fj-con-mapa:not(.page-contacto-mapa-v2):not(.page-contacto):not(.page-contact):not(.fj-pagina-contacto):not(.page-nosotros-mapa-v2):not(.page-nosotros):not(.page-our-team):not(.fj-pagina-nosotros):not(.page-home-mapa-v2):not(.fj-pagina-home) .container.main-content { max-width: 1080px !important; } html.fj-mapa-plegado body.fj-con-mapa .container.main-content { margin-top: -50px; } } @media only screen and (max-width: 767px) { .container.main-content { padding: 0 30px; border-radius: 0; box-shadow: none; background: #f6f4ee; } } /** * Home con [fj_portada]: el grid del héroe lo lleva el plugin. * No forzar el layout viejo de 2 columnas WPBakery (claim + mapa). */ body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-portada, body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero, body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-pillars { background-color: #f6f4ee !important; } /* Revisión home: sin pilares bajo el radar; sin banda de vídeo en móvil */ body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-pillars { display: none !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-banda { display: none !important; } /* * Salient: .wpb_wrapper en flex colapsa el bloque. Estirar wrappers; * la banda sale a sangre con 100vw (no width:100% del padre). */ @media (max-width: 900px) { body:is(.page-home-mapa-v2, .fj-pagina-home) .wpb_wrapper:has(.fj-banda) { flex-direction: column !important; align-items: stretch !important; width: 100% !important; overflow: visible !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .wpb_text_column:has(.fj-banda) { width: 100% !important; max-width: 100% !important; overflow: visible !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-banda { position: relative !important; left: 50% !important; width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; transform: translateX(-50%) !important; box-sizing: border-box !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-banda-claim { text-align: left !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-banda .fj-video { width: 100% !important; max-width: none !important; } /* H1 home móvil: 2 líneas (cada .fj-hl es una); tamaño para que quepa ES/EN */ body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero-title { font-size: clamp(34px, 9.2vw, 42px) !important; font-weight: 500 !important; line-height: 1 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero-title .fj-hl i { white-space: nowrap !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero-radar { padding: 30px 0 0 !important; } /* Ceja en dos líneas; el | no se pinta */ body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-eyebrow span { display: block !important; line-height: 1.8 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-eyebrow .fj-eb-sep { display: none !important; } /* Títulos de los 3 hubs del radar */ body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-mapa[data-modo="home"] .nlabel, body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-mapa[data-modo="home"] .nlabel.hub { font-size: 22px !important; font-weight: 600 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero { min-height: 86svh; padding-top: 24px !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero-head { padding: 0 22px !important; } /* * Textos bajo el héroe: en móvil Salient deja el container al 88% + 30px * y encima left_padding_8pct + columnas 20px (~76px por lado). * Un solo inset de 22px, como el mockup y .fj-hero-head. */ body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:first-child, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:first-child .row_col_wrap_12, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:first-child .wpb_column, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:first-child .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:not(:first-child) { box-sizing: border-box !important; padding-left: 22px !important; padding-right: 22px !important; width: 100% !important; max-width: 100% !important; left: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:not(:first-child) .row_col_wrap_12, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:not(:first-child) .row_col_wrap_12_inner, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:not(:first-child) .wpb_column, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:not(:first-child) .vc_column-inner, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row:not(:first-child) .wpb_wrapper, body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content .wpb_row.inner_row { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content .wpb_row.inner_row .wpb_column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* * CTA Salient arrow-animation: 40px de padding para raya+chevron. * En móvil deja el texto del botón más a la derecha que el párrafo. */ body:is(.page-home-mapa-v2, .fj-pagina-home, .fj-con-mapa) .nectar-cta[data-style="arrow-animation"] .link_text { padding-left: 0 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home, .fj-con-mapa) .nectar-cta[data-style="arrow-animation"] .line, body:is(.page-home-mapa-v2, .fj-pagina-home, .fj-con-mapa) .nectar-cta[data-style="arrow-animation"] .next-arrow { display: none !important; } body:is(.page-home-mapa-v2, .fj-pagina-home, .fj-con-mapa) img.arrow { display: block !important; margin: 0 !important; } } /* Flecha.svg alineada con el texto también en escritorio */ body:is(.page-home-mapa-v2, .fj-pagina-home, .fj-con-mapa) img.arrow { display: block !important; margin: 0 !important; } @media (min-width: 1024px) { body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-portada { width: 100vw; } body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row.top-level:first-child { padding-top: 0 !important; padding-bottom: 0 !important; overflow: visible; } body:is(.page-home-mapa-v2, .fj-pagina-home) .container.main-content > .row > .wpb_row.top-level:first-child > .row_col_wrap_12 { padding-left: 0 !important; padding-right: 0 !important; } /* Título más a la izquierda / más grande; radar más ancho (mockup) */ body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero { min-height: min(86vh, 860px); gap: 36px !important; padding-left: 82px !important; padding-right: 82px !important; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero-title { font-size: clamp(47px, 5.2vw, 90px) !important; font-weight: 500 !important; line-height: 1 !important; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero-radar { padding: 40px; } body:is(.page-home-mapa-v2, .fj-pagina-home) .fj-hero-radar .fj-mapa { max-width: 820px !important; } } /** * Tipografía / ritmo de páginas de sección (prototipo fj-mapa-prototipo_12). * Tipografía = la de la web; solo tamaños, densidades y vídeo. */ @media (min-width: 901px) { body.fj-con-mapa .container.main-content { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; /* Más contenido above-the-fold (como el HTML) */ padding: 28px 40px 80px !important; transition: max-width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), margin-top 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } html.fj-mapa-plegado body.fj-con-mapa .container.main-content { max-width: 1080px !important; } /* * Columna de lectura (ancho del vídeo) centrada en el hueco que deja el radar. * Tarjetas y CTA siguen en el contenedor 980/1080. */ body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child, body.fj-con-mapa .container.main-content .wpb_row.left_padding_8pct:not(.full-width-section) { width: 800px !important; max-width: 800px !important; margin-left: auto !important; margin-right: auto !important; transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } html.fj-mapa-plegado body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child, html.fj-mapa-plegado body.fj-con-mapa .container.main-content .wpb_row.left_padding_8pct:not(.full-width-section) { width: 900px !important; max-width: 900px !important; } /* Quitar paddings % WPBakery (4% / 8%) */ body.fj-con-mapa .wpb_row.left_padding_4pct, body.fj-con-mapa .wpb_row.right_padding_4pct, body.fj-con-mapa .wpb_row.left_padding_8pct, body.fj-con-mapa .wpb_row.right_padding_8pct { padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .wpb_row.left_padding_4pct > .row_col_wrap_12, body.fj-con-mapa .wpb_row.right_padding_4pct > .row_col_wrap_12, body.fj-con-mapa .wpb_row.left_padding_8pct > .row_col_wrap_12, body.fj-con-mapa .wpb_row.right_padding_8pct > .row_col_wrap_12 { padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .container.main-content .wpb_row.left_padding_8pct:not(.full-width-section) .wpb_column, body.fj-con-mapa .container.main-content .wpb_row.left_padding_8pct:not(.full-width-section) .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .container.main-content .wpb_row.left_padding_8pct:not(.full-width-section) .row_col_wrap_12 { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* Primera fila: sin padding arriba/abajo ni 4% lateral */ body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child { margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child > .row_col_wrap_12 { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child .wpb_column { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* * Título + subtítulo: mismo margen izquierdo que el cuerpo * («Anticipar…», nodos). Salient usa gutters distintos (sm-6 vs sm-8). * El vídeo se alinea desplazando #video entero (no el wrap interno), * para no recortar el border-radius con overflow:hidden del row. */ body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child > .row_col_wrap_12 { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child .wpb_column, body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child .vc_column-inner, body.fj-con-mapa #video .wpb_column, body.fj-con-mapa #video .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child h1 { font-family: "Quarto A", "Quarto B", serif !important; font-size: 48px !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; color: #1E1E1C !important; margin: 0 0 10px !important; } /* Subtítulo = .sub del mockup (muted, pegado al h1; sin cursiva) */ body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child h2 { font-family: "Quarto A", "Quarto B", serif !important; font-size: 19px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.4 !important; color: #75756e !important; text-align: left !important; margin: 0 0 28px !important; white-space: nowrap !important; } body.fj-con-mapa .container.main-content h2:not(.h2-home) { font-size: 26px !important; line-height: 1.2 !important; margin: 0 0 12px !important; } body.fj-con-mapa .container.main-content p { font-size: 15px !important; line-height: 1.65 !important; margin-bottom: 12px !important; } /* * Medida del cuerpo en escritorio: 650px radar abierto, 750px colapsado. * Aplica a párrafos y títulos debajo del vídeo (no a cabecera, CTA ni footer). */ body.fj-con-mapa .container.main-content p, body.fj-con-mapa .container.main-content h2:not(.h2-home), body.fj-con-mapa .container.main-content h3 { max-width: 650px; transition: max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } html.fj-mapa-plegado body.fj-con-mapa .container.main-content p, html.fj-mapa-plegado body.fj-con-mapa .container.main-content h2:not(.h2-home), html.fj-mapa-plegado body.fj-con-mapa .container.main-content h3 { max-width: 750px; } body.fj-con-mapa .container.main-content p, body.fj-con-mapa .container.main-content h2:not(.h2-home), body.fj-con-mapa .container.main-content h3 { max-width: 650px !important; transition: max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } html.fj-mapa-plegado body.fj-con-mapa .container.main-content p, html.fj-mapa-plegado body.fj-con-mapa .container.main-content h2:not(.h2-home), html.fj-mapa-plegado body.fj-con-mapa .container.main-content h3 { max-width: 750px !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child h1, body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child h2 { max-width: none !important; } body.fj-con-mapa .full-width-section p, body.fj-con-mapa .full-width-section h2, body.fj-con-mapa .full-width-section h3, body.fj-con-mapa .full-width-section p, body.fj-con-mapa .full-width-section h2, body.fj-con-mapa .full-width-section h3 { max-width: none !important; } /* * WPBakery deja intro y servicios en sm-8 + sm-4 vacío (~66% del inner). * Sin esto el texto no puede llegar a 700/900. */ body.fj-con-mapa .container.main-content .wpb_row.left_padding_8pct:not(.full-width-section):not([class*="fj-node-"]) > .row_col_wrap_12 > .vc_col-sm-8, body.fj-con-mapa .wpb_row[class*="fj-node-"] .child_column.vc_col-sm-8 { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; } body.fj-con-mapa .container.main-content .wpb_row.left_padding_8pct:not(.full-width-section):not([class*="fj-node-"]) > .row_col_wrap_12 > .vc_col-sm-4, body.fj-con-mapa .wpb_row[class*="fj-node-"] .child_column.vc_col-sm-4 { display: none !important; } body.fj-con-mapa .container.main-content h3 { font-size: 26px !important; line-height: 1.2 !important; margin: 0 0 10px !important; } body.fj-con-mapa .container.main-content h3 a, body.fj-con-mapa .container.main-content h3 .link_text { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; border-color: transparent !important; } /* * “Anticipar para decidir mejor” va en col sm-8 con padding-3% left. * El resto de secciones no: quitamos ese inset lateral. */ body.fj-con-mapa .wpb_column.padding-3-percent[data-padding-pos="left"], body.fj-con-mapa .wpb_column.padding-3-percent[data-padding-pos="left"] > .vc_column-inner { padding-left: 0 !important; } /* * Scroll-spy bullets (alineados al título). * Reforzado aquí porque en prod a veces queda un fj-map.css viejo sin bullets. */ body.fj-con-mapa [class*="fj-node-"], body.fj-con-mapa [class*="fj-node-"].fj-active { border-left: 0 !important; border-top: 0 !important; position: relative; } body.fj-con-mapa .wpb_row[class*="fj-node-"] { position: relative; padding-top: 0 !important; padding-bottom: 8px !important; margin-top: 0 !important; border-top: none !important; overflow: visible !important; } /* Gutter WPBakery (-10px) dejaba el título a la derecha del cuerpo y la flecha */ body.fj-con-mapa .wpb_row[class*="fj-node-"] .row_col_wrap_12_inner, body.fj-con-mapa .wpb_row[class*="fj-node-"] .wpb_row.inner_row { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .wpb_row[class*="fj-node-"] .row_col_wrap_12, body.fj-con-mapa .wpb_row[class*="fj-node-"] .wpb_column, body.fj-con-mapa .wpb_row[class*="fj-node-"] .vc_column-inner, body.fj-con-mapa .wpb_row[class*="fj-node-"] .wpb_wrapper { overflow: visible !important; } body.fj-con-mapa .wpb_row[class*="fj-node-"] h2, body.fj-con-mapa .wpb_row[class*="fj-node-"] h3 { position: relative !important; overflow: visible !important; } body.fj-con-mapa .wpb_row[class*="fj-node-"] h2::before, body.fj-con-mapa .wpb_row[class*="fj-node-"] h3::before { content: "" !important; position: absolute !important; left: -28px !important; top: 50% !important; width: 8px !important; height: 8px !important; margin: 0 !important; border-radius: 50% !important; background: var(--fj-dot, #54708C) !important; opacity: 0 !important; transform: translateY(-50%) scale(0.3) !important; transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important; pointer-events: none !important; display: block !important; } body.fj-con-mapa .wpb_row[class*="fj-node-"].fj-active h2::before, body.fj-con-mapa .wpb_row[class*="fj-node-"].fj-active h3::before { opacity: 1 !important; transform: translateY(-50%) scale(1) !important; } /* * Vídeo apaisado 21:9 (prototipo .video-ambient). * Anula clip-path/scroll de Salient que lo deja “cuadrado” con bandas grises. * Alineación: desplazar el row (no ensanchar el wrap) para conservar el redondeo. */ body.fj-con-mapa #video { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; clip-path: none !important; -webkit-clip-path: none !important; transform: none !important; /* 800 abierto; 900 colapsado (texto 650 / 750). Centrado en el hueco del radar. */ margin: 16px auto 22px !important; width: 800px !important; max-width: 800px !important; overflow: visible !important; transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } html.fj-mapa-plegado body.fj-con-mapa #video { width: 900px !important; max-width: 900px !important; } body.fj-con-mapa #video > .row_col_wrap_12 { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; } body.fj-con-mapa #video .row-bg-wrap, body.fj-con-mapa #video .row-bg, body.fj-con-mapa #video .row-bg-overlay { display: none !important; background: transparent !important; } body.fj-con-mapa #video .wpb_raw_code, body.fj-con-mapa #video .wpb_wrapper > div, body.fj-con-mapa #video .wpb_raw_html .wpb_wrapper > div { position: relative !important; aspect-ratio: 21 / 9 !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; border-radius: 18px !important; overflow: hidden !important; background: #e7e3d8 !important; box-shadow: 0 18px 44px rgba(30, 30, 28, 0.12); } body.fj-con-mapa #video iframe { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 101% !important; height: auto !important; min-height: 115% !important; aspect-ratio: 16 / 9 !important; border: 0 !important; border-radius: 0 !important; pointer-events: none; } } /** * Futuros / Prospectiva móvil (≤900px): tipografía/vídeo del mockup. * La barra «Mapa · Futuros ↑» + hoja ya las monta fj-map.js (mobileIndex). */ @media (max-width: 900px) { /* * Mismo inset que home / mockup (.inner 22px): Salient deja 88% + 30px * y WPBakery suma left_padding_8pct (~80px por lado). */ body.fj-con-mapa .container.main-content { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .container.main-content > .row { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row { box-sizing: border-box !important; padding-left: 22px !important; padding-right: 22px !important; width: 100% !important; max-width: 100% !important; left: auto !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row .row_col_wrap_12, body.fj-con-mapa .container.main-content > .row > .wpb_row .row_col_wrap_12_inner, body.fj-con-mapa .container.main-content > .row > .wpb_row .wpb_column, body.fj-con-mapa .container.main-content > .row > .wpb_row .vc_column-inner, body.fj-con-mapa .container.main-content > .row > .wpb_row .wpb_wrapper, body.fj-con-mapa .container.main-content .wpb_row.inner_row { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; } body.fj-con-mapa .container.main-content .wpb_row.inner_row .wpb_column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child { margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 22px !important; padding-right: 22px !important; box-sizing: border-box !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child > .row_col_wrap_12 { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; row-gap: 0 !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child .wpb_column { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child .vc_column-inner, body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child .wpb_wrapper, body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child .wpb_text_column { margin: 0 !important; padding: 0 !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child h1 { font-family: "Quarto A", "Quarto B", serif !important; font-size: 40px !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; color: #1E1E1C !important; margin: 0 0 8px !important; } body.fj-con-mapa .container.main-content > .row > .wpb_row.top-level:first-child h2 { font-family: "Quarto A", "Quarto B", serif !important; font-size: 17.5px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.4 !important; color: #75756e !important; text-align: left !important; margin: 0 0 18px !important; white-space: normal !important; } /* Vídeo: redondeo + 16:9 como mockup móvil */ body.fj-con-mapa #video { padding: 0 22px !important; margin: 6px 0 50px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; left: auto !important; clip-path: none !important; -webkit-clip-path: none !important; transform: none !important; overflow: visible !important; } body.fj-con-mapa #video + .wpb_row { padding-top: 0 !important; margin-top: 0 !important; } body.fj-con-mapa .fj-video { margin-bottom: 50px !important; } body.fj-con-mapa #video > .row_col_wrap_12 { margin: 0 !important; width: 100% !important; } body.fj-con-mapa #video .wpb_column, body.fj-con-mapa #video .vc_column-inner { padding: 0 !important; } body.fj-con-mapa #video .row-bg-wrap, body.fj-con-mapa #video .row-bg, body.fj-con-mapa #video .row-bg-overlay { display: none !important; } body.fj-con-mapa #video .wpb_raw_code, body.fj-con-mapa #video .wpb_raw_html, body.fj-con-mapa #video .wpb_wrapper > div, body.fj-con-mapa #video .wpb_raw_html .wpb_wrapper > div { position: relative !important; aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; border-radius: 14px !important; overflow: hidden !important; background: #e7e3d8 !important; box-shadow: 0 12px 32px rgba(30, 30, 28, 0.1); } body.fj-con-mapa #video iframe { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 101% !important; height: auto !important; min-height: 115% !important; aspect-ratio: 16 / 9 !important; border: 0 !important; border-radius: 0 !important; pointer-events: none; } /* Barra mapa: por encima de cookies; hoja bajo el header (no tapa ×) */ body.fj-con-mapa .fj-mbar { z-index: 10050 !important; } body.fj-con-mapa .fj-msheet { z-index: 10055 !important; /* top lo calcula fj-map.js (borde del header + 12px); no forzar aquí */ } } /** * Contacto (ES/EN + mapa-v2) — bloque .fj-pag a ancho completo, sin panel de mapa. */ body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) #ajax-content-wrap, body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) .container-wrap { background: #F4F2EB !important; } body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto)[data-header-resize="0"] .container-wrap { margin-top: 0 !important; padding-top: 0 !important; } body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) .container.main-content { width: 100% !important; max-width: none !important; padding: 0 0 150px 0 !important; } body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) .container.main-content > .row { margin: 0 !important; max-width: none !important; padding: 0 !important; } body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) .wpb_row, body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) .vc_column-inner, body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) .wpb_wrapper { padding-left: 0 !important; padding-right: 0 !important; } @media only screen and (max-width: 767px) { body:is(.page-contacto-mapa-v2, .page-contacto, .page-contact, .fj-pagina-contacto) .container.main-content { padding: 0 0 150px 0 !important; } } /** * Nosotros (ES/EN + mapa-v2) — fondo; las 2 primeras filas respetan WPBakery * (in container / full width). El resto sigue a sangre para las bandas. */ body:is(.page-nosotros-mapa-v2, .page-nosotros, .page-our-team, .fj-pagina-nosotros) #ajax-content-wrap, body:is(.page-nosotros-mapa-v2, .page-nosotros, .page-our-team, .fj-pagina-nosotros) .container-wrap { background: #F4F2EB !important; } body:is(.page-nosotros-mapa-v2, .page-nosotros, .page-our-team, .fj-pagina-nosotros)[data-header-resize="0"] .container-wrap { margin-top: 0 !important; padding-top: 0 !important; } body:is(.page-nosotros-mapa-v2, .page-nosotros, .page-our-team, .fj-pagina-nosotros) .container.main-content > .row > .wpb_row:nth-child(n+3), body:is(.page-nosotros-mapa-v2, .page-nosotros, .page-our-team, .fj-pagina-nosotros) .container.main-content > .row > .wpb_row:nth-child(n+3) .vc_column-inner, body:is(.page-nosotros-mapa-v2, .page-nosotros, .page-our-team, .fj-pagina-nosotros) .container.main-content > .row > .wpb_row:nth-child(n+3) .wpb_wrapper { padding-left: 0 !important; padding-right: 0 !important; } /* H1 Nosotros ES/EN = 56px (mockup .inner h1) */ body:is(.page-nosotros-mapa-v2, .page-nosotros, .page-our-team, .fj-pagina-nosotros) .container.main-content h1 { font-family: "Quarto A", "Quarto B", serif !important; font-size: 56px !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; }