/* Ajustes de la portada Cuatro bloques independientes. Cada uno se puede borrar sin tocar los demas. Nota de especificidad: el CSS original de los bloques .ci2026 viene dentro del (en los widgets HTML de Elementor) y este archivo se carga en el . A igual especificidad gana el del body, asi que aqui se sube un escalon a proposito: .ci2026 .hero .hero__grid en vez de .ci2026 .hero__grid, y .ci2026.ci2026 para la tipografia. Nota de estados: la clase .ci-nav-arriba va en el y significa "estamos arriba del todo". El estado POR DEFECTO (sin esa clase) es la barra blanca de siempre. Se hizo asi a proposito: si el JavaScript no llegara a correr, la pagina se queda con la barra blanca legible de toda la vida, no con una barra transparente sobre secciones claras. */ /* ================================================================ 1. BOTONES DEL HERO "Solicitar valoracion gratuita" + "Hablar por WhatsApp" necesitan 495px juntos. Entre 900px y ~1085px de pantalla la columna de texto se quedaba en 460px y el segundo boton caia a un segundo renglon, pegado a la izquierda: eso es lo que se veia corrido. Con minmax() la columna de texto nunca baja de 520px; el diagrama de la derecha cede el espacio que haga falta. ================================================================ */ .ci2026 .hero .hero__grid { grid-template-columns: minmax(min(100%, 520px), 1.05fr) minmax(0, .95fr); } /* Cuando el hero se apila, se centra el bloque completo: antetitulo, titular, texto, botones, datos y diagrama. Asi nada queda corrido. */ @media (max-width: 900px) { .ci2026 .hero .hero__grid { grid-template-columns: 1fr; text-align: center; } .ci2026 .hero .eyebrow { justify-content: center; } .ci2026 .hero .hero__lede { margin-inline: auto; } .ci2026 .hero .hero__ctas { justify-content: center; } .ci2026 .hero .hero__chips{ justify-content: center; } .ci2026 .hero .hub { margin-inline: auto; } } /* ================================================================ 2. BARRA DE MENU (solo la portada) Arriba del todo la barra se monta sobre el hero y se pone transparente, para que el verde corra sin corte. En cuanto se baja, vuelve a ser blanca con una sombra suave. El alto real de la barra viaja en --ci-nav-h, que pone el JS. Los !important son necesarios: Elementor pinta el fondo con .elementor-2062 .elementor-element.elementor-element-b9895a4, que tiene mas especificidad que cualquier selector razonable de aqui. En el resto de las paginas la barra queda como estaba. ================================================================ */ body.home .xpro-theme-builder-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } /* El contenedor de Elementor que envuelve el hero trae 24px de relleno arriba. Con la barra transparente encima, esos 24px dejaban ver el fondo blanco de la pagina: es la franja blanca del borde superior. Solo se quita arriba y solo en ese contenedor; el relleno de abajo y el de los demas bloques cae en zonas que ya son blancas y no se ve. */ body.home .e-con.e-parent:has(.ci2026 .hero) > .e-con-inner { padding-top: 0; } /* El hero cede el alto de la barra, para que el titular no quede debajo */ body.home .ci2026 .hero { padding-top: calc(clamp(56px, 8vw, 88px) + var(--ci-nav-h, 99px)); } /* Los enlaces del menu apuntan a #servicios, #proceso, etc. Sin esto la seccion aterriza debajo de la barra fija. */ body.home .ci2026 > section[id] { scroll-margin-top: calc(var(--ci-nav-h, 99px) + 12px); } /* El tema trae SU PROPIA barra fija, aparte de esta. xpro-theme-builder.js escucha el scroll y, al pasar de 220px, le pone la clase .xtb-appear al encabezado y un min-height en el atributo style. Su CSS entonces fija el