/* ============================================================ CCIV — Bloques editables de la HOME (plantillas de Elementor) ------------------------------------------------------------ Los 4 bloques de la portada (RTO, Quiénes somos, Unidad Móvil y RTO Plus) son plantillas de Elementor que imprime front-page.php (inc/cciv-home-bloques.php). El diseño lo siguen poniendo las clases de site.css (.rto-*, .nosotros-*, .movil-*, .flotas-*): cada container y widget lleva la clase original en Avanzado > Clases CSS. Este archivo solo les devuelve a esas clases lo que Elementor pisa. Mismo método que las páginas interiores. Todo va colgado de .hb-flow: es la clase del container raíz de cada plantilla (junto con la de la sección: .rto-section, etc.). Se carga en todo el sitio para que el editor de Elementor también muestre el diseño real mientras se edita la plantilla. Trampas de Elementor 4.x que se corrigen acá (medidas en vivo): 1. Sus containers son flex en columna, con 20px de separación y 10px de padding: se pasan a bloque y, los que en el diseño son grilla o fila, vuelven a grid/flex con su dirección. 2. En una fila, el ancho de cada hijo es 100% y el widget HTML se puede achicar: se devuelve el ancho natural. 3. Anula el margin de sus widgets y containers: se devuelven. 4. El kit pisa tipografía y color de Encabezado / Editor de texto. 5. ".elementor img" le pone height:auto a las fotos. ============================================================ */ /* ---- Clases nuevas (antes eran estilos inline en front-page.php) ---- */ .nosotros-lead { font-size: calc(16px * var(--fs, 1.2)); color: var(--tx-2); line-height: 1.7; margin: 20px 0 0; max-width: 460px; } .flotas-lead { font-size: calc(15px * var(--fs, 1.2)); color: rgba(255,255,255,.55); line-height: 1.65; margin: 20px 0 36px; max-width: 440px; } .flotas-logo { margin-bottom: 28px; } .flotas-logo img { height: 110px; width: auto; opacity: .9; } /* Hitos y "Áreas de innovación" (mismos valores que page-rto-plus.php). */ .rtop-hito.rtop-hito { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 24px 20px; } .rtop-hito-fecha { font-size: calc(10px * var(--fs, 1.2)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .rtop-hito-ttl { font-size: calc(14px * var(--fs, 1.2)); font-weight: 600; color: #fff; line-height: 1.35; margin-bottom: 6px; } .rtop-hito-txt { font-size: calc(12px * var(--fs, 1.2)); color: rgba(255,255,255,.4); line-height: 1.45; } .rtop-areas { margin-top: 24px; padding: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); } .rtop-areas-ttl { font-size: calc(13px * var(--fs, 1.2)); font-weight: 700; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; } /* ---- 1. Containers ---- */ .hb-flow.e-con, .hb-flow .e-con { --padding-block-start: 0; --padding-block-end: 0; --padding-inline-start: 0; --padding-inline-end: 0; display: block; } /* La sección (raíz) conserva su padding de siempre. */ .hb-flow.e-con.rto-section, .hb-flow.e-con.nosotros, .hb-flow.e-con.movil { padding: 100px 0; } .hb-flow.e-con.flotas { padding: 96px 0; } @media (max-width: 768px) { .hb-flow.e-con.rto-section, .hb-flow.e-con.nosotros, .hb-flow.e-con.movil, .hb-flow.e-con.flotas { padding: 64px 0; } } /* Grillas */ .hb-flow .e-con.rto-grid, .hb-flow .e-con.nosotros-grid, .hb-flow .e-con.movil-grid, .hb-flow .e-con.flotas-grid, .hb-flow .e-con.flotas-features { display: grid; } .hb-flow .rto-grid > .e-con, .hb-flow .nosotros-grid > .e-con, .hb-flow .movil-grid > .e-con, .hb-flow .flotas-grid > .e-con, .hb-flow .flotas-features > .e-con { min-width: auto; } /* Filas y columnas flex */ .hb-flow .e-con.rto-float-card, .hb-flow .e-con.termino-callout, .hb-flow .e-con.movil-feat, .hb-flow .e-con.movil-chip { display: flex; flex-direction: row; flex-wrap: nowrap; --container-widget-width: auto; } .hb-flow .e-con.nosotros-stats { display: flex; flex-direction: row; --container-widget-width: auto; } .hb-flow .e-con.movil-features { display: flex; flex-direction: column; flex-wrap: nowrap; } .hb-flow .e-con.flotas-stat-grid { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; } .hb-flow .flotas-stat-grid > .e-con.flotas-stat { flex: 1 1 0%; } .hb-flow .e-con.rtop-hito { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; --container-widget-width: auto; } @media (max-width: 768px) { .hb-flow .e-con.flotas-stat-grid { flex-direction: column; } } /* ---- 2. Ancho natural de los hijos en las filas ---- */ .hb-flow .movil-feat > .e-con, .hb-flow .nosotros-stats > .e-con { --width: auto; } /* Las tarjetitas flotantes sobre la foto (absolutas): sin esto miden todo el ancho. */ .hb-flow .e-con.rto-float-card, .hb-flow .e-con.movil-chip { --width: auto; } .hb-flow .termino-callout > .elementor-widget-html { flex-shrink: 0; } .hb-flow .termino-callout svg { display: block; } /* ---- 3. Márgenes ---- */ .hb-flow .elementor-widget.eyebrow { margin-bottom: 14px; } /* Los títulos

del original traen 8px / 16px del reset de Hello Elementor. */ .hb-flow .elementor-widget.section-title { margin: 8px 0 16px; } /* El texto del recuadro "¿VTV, RTV...?" era un

: el reset le da .9rem abajo. */ .hb-flow .elementor-widget.termino-callout-text { margin-bottom: .9rem; } .hb-flow .elementor-widget.rto-list { margin: 28px 0 38px; } .hb-flow .e-con.termino-callout { margin: 36px 0 0; } .hb-flow .elementor-widget.hb-mt28 { margin-top: 28px; } .hb-flow .elementor-widget.hb-mt34 { margin-top: 34px; } .hb-flow .elementor-widget.nosotros-lead { margin: 20px 0 0; } .hb-flow .elementor-widget.nosotros-diff { margin: 24px 0 4px; } .hb-flow .e-con.nosotros-stats { margin-top: 32px; } .hb-flow .elementor-widget.nosotros-stat-label { margin-top: 5px; } .hb-flow .e-con.movil-features { margin: 28px 0 38px; } .hb-flow .elementor-widget.movil-feat-title { margin-bottom: 2px; } .hb-flow .elementor-widget.flotas-lead { margin: 20px 0 36px; } .hb-flow .e-con.flotas-features { margin: 36px 0 40px; } .hb-flow .elementor-widget.flotas-feat-icon { margin-bottom: 14px; } .hb-flow .elementor-widget.flotas-feat-title { margin-bottom: 4px; } .hb-flow .elementor-widget.flotas-logo { margin-bottom: 28px; } .hb-flow .elementor-widget.rtop-hito-fecha { margin-bottom: 8px; } .hb-flow .elementor-widget.rtop-hito-ttl { margin-bottom: 6px; } .hb-flow .e-con.rtop-areas { margin-top: 24px; } .hb-flow .elementor-widget.rtop-areas-ttl { margin-bottom: 14px; } /* El espaciado lo pone la clase del widget, no el

/