/* ========================================================================== /guia-blog-inmobiliario/gracias/ · ID 78791 · lo propio de esta página ========================================================================== ESTA HOJA NO DEPENDE DE componentes.css, y es la primera que no lo hace. Se revisó pieza por pieza: el contenedor de esta página mide 500px y no 1100px, no hay botones, ni vídeos, ni títulos de sección, ni conmutación por dispositivo. Y `.jrv-media` le vendría MAL: pone `width:100%` a las imágenes y estiraría el logotipo de 100px a los 480px del contenedor. Así que aquí está todo lo que la página necesita, y nada más. POR ESO TAMBIÉN LOS COLORES SE DECLARAN AQUÍ. Los cuatro que usa la página son de la barra de progreso y del texto del tema, y NINGUNO está en la paleta compartida (--jrv-p-verde es #00BB2D, que no es ni el #00931b del relleno ni el #00a33e de la cifra). Llevan prefijo propio --jrv-gbi- para no pisar ni la paleta --jrv-p- de componentes.css ni las variables del blog que viven en style.css (--jrv-azul, --jrv-amarillo, --jrv-tinta, --jrv-suave, --jrv-linea). Y LAS CLASES SE LLAMAN .jrv-gbi-… POR LA MISMA RAZÓN, PERO MÁS URGENTE: hay TRES páginas publicadas con el slug «gracias» (esta, /jueves/gracias/ y /agente-inmobiliario/gracias/). Un prefijo `.jrv-gracias-` habría chocado con las otras dos en cuanto se convirtieran. gbi = guía blog inmobiliario. TODOS LOS VALORES ESTÁN MEDIDOS. Salen del `_elementor_data` de la página, de la hoja que Elementor le genera (post-78791.css), del kit (post-79342.css) y de una captura de producción a 1440×900: sección 100vh SOLO desde 768px · relleno 50px arriba y abajo, 0 a los lados · contenido centrado en vertical · fondo #FFFFFF contenedor 500px + 10px de relleno = 480px útiles logotipo 100×100 px, centrado, 20px de aire debajo título Open Sans 14px peso 600 color #3a3a3a línea 1.4, a la IZQUIERDA (12px por debajo de 768px) pista 12px de alto, #eee, a los 480px completos relleno 12px de alto, #00931b, de 0 a 100% en 5.200ms lineales cifra Open Sans 14px peso 600 línea 0.7em #00a33e, pegada a la derecha y 5px por encima de la pista (12px en móvil) página 100vh justos a 1440px: sin barra de desplazamiento ========================================================================== */ /* --- 0 · SOLTAR EL CONTENEDOR DEL TEMA ---------------------------------- LO PRIMERO DE TODO Y POR LA MISMA RAZÓN QUE EN LAS DEMÁS: sin este bloque la página sale metida en una columna de 900px con franjas grises a los lados —el gris del tema es #ecf0f1— y con franjas blancas arriba y abajo por el relleno que GeneratePress da a #content. Ya pasó dos veces. EL SELECTOR ES `page-id-78791`, NO `page-template-…`. Esta plantilla la coge la jerarquía por el nombre del archivo, así que el editor no sabe nada de ella y el body sigue diciendo `page-template-default`. La clase `page-id-78791` sí está: se leyó en el `` del HTML que sirve producción hoy. Y el identificador no cambia nunca; el slug sí podría. */ body.page-id-78791 #page, body.page-id-78791 .site.grid-container { max-width: none; margin-inline: 0; width: 100%; } body.page-id-78791 #content, body.page-id-78791 .site-content { padding: 0; margin-block-end: 0; } body.page-id-78791 #primary, body.page-id-78791 #main { width: 100%; max-width: none; } /* --- 0 bis · UNA CUARTA REGLA QUE EL BLOQUE ESTÁNDAR NO TRAE --------------- Estas dos declaraciones son un CINTURÓN DE SEGURIDAD, no el arreglo de un desborde comprobado. La explicación que había aquí antes era medio falsa y se corrige, porque siete hojas más estuvieron a punto de copiarla: LO QUE SÍ ES VERDAD. Este sitio usa la estructura de FLOTADOS y no la de flexbox (`generate_settings['structure'] = 'floats'`, leído del respaldo de producción), así que el tema carga unsemantic-grid.min.css + style.min.css y NO carga main.min.css. En style.css la única regla de box-sizing es para las casillas de formulario —eso estaba bien comprobado—, y unsemantic-grid.css da a `.grid-container` `padding-left: 10px; padding-right: 10px`. LO QUE NO ERA VERDAD, Y ES LO QUE CAMBIA LA CONCLUSIÓN. En la estructura de flotados GeneratePress añade a #page la clase `grid-parent` además de `grid-container` (inc/markup.php, generate_do_page_container_classes: el `grid-parent` se añade justo cuando NO se usa flexbox), y `.grid-parent { padding-left: 0; padding-right: 0 }` está DESPUÉS de `.grid-container` en la misma hoja y con la misma especificidad, así que gana: el relleno lateral de #page ya es 0 antes de que llegue esta hoja. Por eso `padding-inline: 0` no quita nada y `border-box` sobre un relleno de 0 no cambia ninguna medida. La prueba de campo: portada.css lleva el bloque de tres reglas SIN esta cuarta, está en producción y el dueño la dio por buena. POR QUÉ SE QUEDA IGUALMENTE, en esta hoja y en las otras siete. No cuesta un pixel —con relleno 0 las dos cajas miden lo mismo— y deja la página inmune si algún día alguien le devuelve relleno lateral a #page (un ajuste del personalizador, el CSS simple del sitio, una versión nueva del tema). Lo que no podía quedarse es una hoja con la corrección y siete sin ella. PENDIENTE DE MEDIR EN PRUEBAS, y es lo único que falta aquí: el 1460 contra 1440 que se anotó en su día no puede venir del relleno de #page. Si vuelve a salir, la causa está en otro sitio y hay que buscarla con el JS de la parte 3 del protocolo a 390, 768 y 1440. */ body.page-id-78791 #page, body.page-id-78791 .site.grid-container { box-sizing: border-box; padding-inline: 0; } /* El fondo de la página es BLANCO, no el gris del tema (#ecf0f1). En Elementor lo ponía el ajuste de página (`background_color: #FFFFFF`), que se traducía a `body.elementor-page-78791{background-color:#FFFFFF}`. Va en el body y en #page porque los dos se ven: la sección solo cubre 100vh y el body asomaría si el contenido creciera. */ body.page-id-78791, body.page-id-78791 #page { background-color: var(--jrv-gbi-fondo); } /* --- Los cinco colores de la página ------------------------------------- */ body.page-id-78791 { --jrv-gbi-fondo: #FFFFFF; /* ajuste de página de Elementor */ --jrv-gbi-texto: #3a3a3a; /* el color de texto del tema, heredado */ --jrv-gbi-pista: #eee; /* fondo de la pista, por omisión del plugin */ --jrv-gbi-verde-barra: #00931b; /* `progress_bar_line_fill_color_color` */ --jrv-gbi-verde-cifra: #00a33e; /* `progress_bar_count_color` */ /* «Open Sans» es la familia que declara post-78791.css para el título y la cifra. HOY la carga el kit de Elementor; cuando se apague Elementor en todo el sitio habrá que servirla desde el tema o quedará la alternativa del sistema. Está anotado en problemas. */ --jrv-gbi-tipo: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* --- 1 · LA SECCIÓN ------------------------------------------------------ `box-sizing: border-box` NO ES OPCIONAL: el tema hereda content-box y los 50px de relleno se sumarían a los 100vh, así que la página mediría 100vh + 100px y aparecería una barra de desplazamiento donde hoy no hay ninguna. Es la trampa que infló el hero de la portada de 650 a 850px. */ .jrv-gbi-gracias { box-sizing: border-box; padding: 50px 0; background-color: var(--jrv-gbi-fondo); } /* EL ALTO DE PANTALLA COMPLETA SOLO EXISTE DESDE 768px, y no es una decisión mía: Elementor mete su `elementor-section-height-full` dentro de un `@media (min-width: 768px)`. Por debajo de eso la sección publicada crece con su contenido y el bloque queda arriba, no centrado. Se reproduce igual. Se usa `min-height` donde Elementor usa `height`. A la vista es idéntico —el contenido mide unos 172px y nunca llega a 100vh—, pero si algún día creciera, con `height` se saldría de la caja y con `min-height` no. */ @media (min-width: 768px) { .jrv-gbi-gracias { display: flex; align-items: center; min-height: 100vh; } } /* --- 2 · EL CONTENEDOR --------------------------------------------------- 500px es el `content_width` de la sección. Los 10px de relleno son el hueco de columna que Elementor añade por omisión (`.elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 10px }`), y son los que dejan la barra en 480px y no en 500px. Con `border-box` la cuenta sale sin restar a mano. */ .jrv-gbi-gracias__interior { box-sizing: border-box; width: 100%; max-width: 500px; margin-inline: auto; padding: 10px; } /* --- 3 · EL LOGOTIPO ----------------------------------------------------- Los 20px de abajo son el espaciado entre piezas del kit de Elementor (`.elementor-widget:not(:last-child){margin-block-end:20px}`), no un número inventado. `line-height: 0` en el envoltorio y `display: block` en la imagen quitan el hueco fantasma de la línea base, que es lo que Elementor resuelve poniendo la imagen en `inline-block` con `vertical-align: middle`. Se temía que por ahí apareciera una diferencia de unos pocos píxeles; se midió y NO hay ninguna: la caja de la imagen mide 100px justos en las dos versiones, y el logotipo, el título, la pista y la cifra caen en las MISMAS coordenadas que en producción a 1440, 768 y 390px (los números están en el resumen del trabajo). */ .jrv-gbi-gracias__logo { margin: 0 0 20px; line-height: 0; text-align: center; } /* El ancho y el alto van EXPLÍCITOS. La imagen mide 100×100 de verdad y no tiene recortes generados en la biblioteca, así que no hay riesgo de que se deforme; y así ni el `max-width: 100%` del tema ni ninguna regla heredada pueden estirarla hasta los 480px del contenedor. */ .jrv-gbi-gracias__logo-img { display: block; width: 100px; height: 100px; margin-inline: auto; } /* --- 4 · LA BARRA DE PROGRESO ------------------------------------------- */ .jrv-gbi-gracias__barra { width: 100%; margin-inline: auto; } /* EL TÍTULO ES EL

DE LA PÁGINA, pero se ve como lo que era: 14px, peso 600 y alineado a la IZQUIERDA. El peso 600 no es un adorno, sale del kit (`--e-global-typography-primary-font-weight: 600`), que es lo que Elementor aplicaba al título de la barra; y la izquierda es la alineación real, aunque el logotipo de encima vaya centrado. Todas las propiedades se declaran porque hay que ganar a los estilos de

del tema. / .jrv-gbi-graciasaviso { margin: 0; color: var(--jrv-gbi-texto); font-family: var(--jrv-gbi-tipo); font-size: 14px; font-weight: 600; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: normal; } / LA PISTA. Nada de `overflow: hidden` aquí, y es importante: la cifra se coloca POR ENCIMA de la pista con posición absoluta y quedaría recortada. / .jrv-gbi-graciaspista { position: relative; display: block; width: 100%; height: 12px; background-color: var(--jrv-gbi-pista); } / EL RELLENO. Los 5.200ms son los `progress_bar_animation_duration` del original, y el recorrido es el mismo: de 0 al 100%. La diferencia es que antes lo movía el JavaScript de Essential Addons —con jQuery y dos hojas de estilo del plugin detrás— y ahora es una animación de CSS de cuatro líneas. El estado final está en la propia declaración (`width: 100%`), así que no hace falta `forwards` y si la animación no se ejecuta la barra ya se ve llena, que es el estado en el que la página pasa el 99% de su vida. / .jrv-gbi-graciasrelleno { position: absolute; top: 50%; left: 0; width: 100%; height: 12px; background-color: var(--jrv-gbi-verde-barra); transform: translateY(-50%); animation: jrv-gbi-gracias-llenar 5200ms linear; } @keyframes jrv-gbi-gracias-llenar { from { width: 0; } } / Quien haya pedido menos movimiento ve la barra llena desde el principio. / @media (prefers-reduced-motion: reduce) { .jrv-gbi-graciasrelleno { animation: none; } } / LA CIFRA. Pegada a la derecha y 5px por encima de la pista, que es exactamente lo que hacía el plugin (`right: 0; bottom: calc(100% + 5px)`). La línea de 0.7em también es del original y es lo que la deja a la altura del título. Se pinta ya en «100%»: subirla de 0 a 100 exigiría JavaScript otra vez, y 100% es lo que la página publicada muestra a partir del segundo 5,2. / .jrv-gbi-gracias__cifra { position: absolute; right: 0; bottom: calc(100% + 5px); color: var(--jrv-gbi-verde-cifra); font-family: var(--jrv-gbi-tipo); font-size: 14px; font-weight: 600; line-height: 0.7em; white-space: nowrap; } / --- 5 · MÓVIL ---------------------------------------------------------- Los dos tamaños de móvil del original: 12px el título y 12px la cifra (`progress_bar_title_typography_font_size_mobile` y su pareja de la cifra). El corte, 767px, es el que usa Elementor. */ @media (max-width: 767px) { .jrv-gbi-graciasaviso { font-size: 12px; } .jrv-gbi-graciascifra { font-size: 12px; } }