/* ========================================================================== LAS CUATRO GUÍAS DESCARGABLES · lo propio de estas páginas ========================================================================== Una sola hoja para cuatro páginas porque son la misma página con cuatro contenidos: 78754 /guia-blog-inmobiliario/ 24 piezas 78811 /guia-facebook-instagram-ads-inmobiliario/ 24 piezas 78833 /guia-whatsapp-marketing-inmobiliario/ 24 piezas 79916 /agente-inmobiliario/ 23 piezas El HTML lo pinta inc/plantilla-guia.php, compartido por las cuatro. LOS BLOQUES COMPARTIDOS VIENEN DE componentes.css, que se declara ANTES: .jrv-contenedor, .jrv-contenedor--pie, .jrv-seccion, .jrv-seccion__titulo, .jrv-cta / .jrv-cta--amarillo, .jrv-media y todas las variables --jrv-p-*. Aquí no se reescribe ninguno. ⚠️ NO CONFUNDIR CON `.jrv-guias` (EN PLURAL), QUE ES DE LA PORTADA. portada.css tiene .jrv-guias y .jrv-guias__texto: son la franja «GUÍAS DE MARKETING INMOBILIARIO» de la portada. Todo lo de esta hoja va en SINGULAR y con guion —.jrv-guia-aviso, .jrv-guia-oferta…—, así que ninguna cadena coincide. Si alguien renombra algo de aquí a plural, cambia la portada. Tampoco se usa .jrv-autor ni .jrv-autor__nombre ni .jrv-autor__bio: existen en style.css con los valores de la ficha de autor del blog. Los de aquí son .jrv-guia-autor*. CÓMO SE RESUELVE LO QUE CAMBIA DE UNA GUÍA A OTRA. No hay cuatro clases modificadoras: hay cuatro bloques de variables bajo `body.page-id-NNNNN`. El selector por identificador ya hacía falta para soltar el contenedor del tema, así que las diferencias —dos colores, cuatro anchos de imagen y el aire de la ficha del autor— no cuestan ni una clase más. LO QUE NO ESTÁ MEDIDO CONTRA PRODUCCIÓN, Y HAY QUE MEDIRLO (fase 1 y 3 del protocolo). Los cuatro guiones traen colores, anchos de sección, rellenos y porcentajes de columna, pero NO traen ni un tamaño de letra ni un peso ni el icono de las listas. Los de esta hoja son una escala coherente con componentes.css, no lecturas de la hoja publicada. Están todos juntos y marcados con «SIN MEDIR» para poder corregirlos de una pasada cuando se comparen las capturas a 1440, 768 y 390. ========================================================================== */ /* ========================================================================== 0 · SOLTAR EL CONTENEDOR DEL TEMA · LO PRIMERO DE TODO ========================================================================== EL SELECTOR ES `page-id-NNNNN` Y NO `page-template-…`. WordPress solo añade page-template-{archivo} cuando la plantilla se elige en el desplegable del editor; una plantilla por nombre de archivo —page-{slug}.php— la coge la jerarquía sin que el editor sepa nada, y el body sigue diciendo page-template-default. Sin este bloque la página sale metida en una columna de 900px con franjas grises a los lados, y con franjas blancas arriba y bajo el pie por el relleno de 40px que GeneratePress da a #content. Ya pasó dos veces. Los cuatro identificadores van juntos porque las cuatro páginas necesitan exactamente lo mismo. Los identificadores no cambian nunca; los slugs sí podrían. ========================================================================== */ body.page-id-78754 #page, body.page-id-78811 #page, body.page-id-78833 #page, body.page-id-79916 #page, body.page-id-78754 .site.grid-container, body.page-id-78811 .site.grid-container, body.page-id-78833 .site.grid-container, body.page-id-79916 .site.grid-container { max-width: none; margin-inline: 0; width: 100%; } body.page-id-78754 #content, body.page-id-78811 #content, body.page-id-78833 #content, body.page-id-79916 #content, body.page-id-78754 .site-content, body.page-id-78811 .site-content, body.page-id-78833 .site-content, body.page-id-79916 .site-content { padding: 0; margin-block-end: 0; } body.page-id-78754 #primary, body.page-id-78811 #primary, body.page-id-78833 #primary, body.page-id-79916 #primary, body.page-id-78754 #main, body.page-id-78811 #main, body.page-id-78833 #main, body.page-id-79916 #main { width: 100%; max-width: none; } /* La cuarta regla del bloque, igual que en pagina-gbi-gracias.css (ver allí la explicación larga y lo que queda por medir). Resumen: en la estructura de flotados que usa este sitio, #page lleva `grid-parent`, que ya pone a 0 el relleno lateral de 10px de `.grid-container`, así que esto no cambia ninguna medida hoy; se pone para que las cuatro guías queden inmunes si algún día alguien le devuelve relleno lateral al envoltorio. */ body.page-id-78754 #page, body.page-id-78811 #page, body.page-id-78833 #page, body.page-id-79916 #page, body.page-id-78754 .site.grid-container, body.page-id-78811 .site.grid-container, body.page-id-78833 .site.grid-container, body.page-id-79916 .site.grid-container { box-sizing: border-box; padding-inline: 0; } body.page-id-78754 #page, body.page-id-78811 #page, body.page-id-78833 #page, body.page-id-79916 #page { background-color: #fff; } /* ========================================================================== 1 · LOS COLORES QUE NO ESTÁN EN componentes.css ========================================================================== Todos son literales de los guiones. Van con prefijo propio --jrv-g- para no tocar los --jrv-p- de componentes.css ni los --jrv-azul / --jrv-amarillo / --jrv-tinta / --jrv-suave / --jrv-linea de style.css, que son los del blog. OJO CON EL CARMÍN: #C22127 NO es --jrv-p-rojo (#C23616). Son dos rojos distintos y se parecen lo justo para colarse. Los que SÍ salen de componentes.css y aquí solo se usan: #004A8F --jrv-p-hondo cabecera de 78811 #0077C4 --jrv-p-cielo cierre de 78811 y final del degradado de 78754 #00BB2D --jrv-p-verde cabecera y cierre de 78833 #00325C --jrv-p-marino el pie de las cuatro y los titulares de autor #F5F7FB --jrv-p-nube caja de la oferta de 79916 y ficha del autor #1D2C33 --jrv-p-carbon texto corrido #FFFF00 --jrv-p-oro los botones (vía .jrv-cta--amarillo) ========================================================================== */ :root { --jrv-g-marfil: #F6F9EA; /* caja de la oferta de 78754, 78811 y 78833 */ --jrv-g-carmin: #C22127; /* cabecera de 78754 */ --jrv-g-morado: #6F1F7F; /* cabecera y cierre de 79916 */ --jrv-g-grafito: #2B2B2B; /* el nombre del autor (78754 y 79916) */ --jrv-g-piedra: #5A5A5A; /* arranque del degradado del cierre de 78754 */ } /* ========================================================================== 2 · LO QUE CAMBIA EN CADA GUÍA ========================================================================== Nueve valores por página, todos leídos del guion menos los dos que se dicen. ========================================================================== */ /* --- 78754 · /guia-blog-inmobiliario/ ------------------------------------ */ body.page-id-78754 { --jrv-guia-acento: var(--jrv-g-carmin); --jrv-guia-caja-fondo: var(--jrv-g-marfil); --jrv-guia-oferta-imagen: 85%; --jrv-guia-autor-aire: 100px; /* «margen sup 100px» de la ficha */ --jrv-guia-autor-relleno: 30px; --jrv-guia-retrato: 70%; --jrv-guia-cierre-imagen: 89%; --jrv-guia-cierre-alto: 450px; /* «alto 450px»: de ahí el box-sizing de abajo */ /* «degradado #5A5A5A → #0077C4 a 60º». El guion da los dos colores y el ángulo pero NO las paradas; van a 0% y 100%. SIN MEDIR. */ --jrv-guia-cierre-fondo: linear-gradient(60deg, var(--jrv-g-piedra) 0%, var(--jrv-p-cielo) 100%); } /* --- 78811 · /guia-facebook-instagram-ads-inmobiliario/ ----------------- */ body.page-id-78811 { --jrv-guia-acento: var(--jrv-p-hondo); --jrv-guia-caja-fondo: var(--jrv-g-marfil); --jrv-guia-oferta-imagen: 85%; /* «spacer alto ?px» (pieza 16) + «margen sup 60px». El extractor no recogió la altura del espaciador; el valor por omisión del widget de Elementor es 50px, y 50 + 60 = 110px, que es justo el aire medido en 79916. SIN MEDIR: es el único número de esta hoja que sale de una deducción y no del guion. */ --jrv-guia-autor-aire: 110px; --jrv-guia-autor-relleno: 30px; --jrv-guia-retrato: 70%; --jrv-guia-cierre-imagen: 80%; --jrv-guia-cierre-fondo: var(--jrv-p-cielo); } /* --- 78833 · /guia-whatsapp-marketing-inmobiliario/ -------------------- */ body.page-id-78833 { --jrv-guia-acento: var(--jrv-p-verde); --jrv-guia-caja-fondo: var(--jrv-g-marfil); --jrv-guia-oferta-imagen: 85%; --jrv-guia-autor-aire: 110px; /* mismo caso que 78811, ver la nota de arriba */ --jrv-guia-autor-relleno: 30px; --jrv-guia-retrato: 70%; --jrv-guia-cierre-imagen: 80%; --jrv-guia-cierre-fondo: var(--jrv-p-verde); } /* --- 79916 · /agente-inmobiliario/ ------------------------------------- */ body.page-id-79916 { --jrv-guia-acento: var(--jrv-g-morado); /* La única de las cuatro cuya caja de la oferta es #F5F7FB y no #F6F9EA. */ --jrv-guia-caja-fondo: var(--jrv-p-nube); --jrv-guia-oferta-imagen: 90%; --jrv-guia-autor-aire: 110px; /* el «spacer alto 110px» de la pieza 14 */ --jrv-guia-autor-relleno: 20px; --jrv-guia-retrato: 75%; --jrv-guia-cierre-imagen: 80%; --jrv-guia-cierre-fondo: var(--jrv-g-morado); } /* ========================================================================== 3 · LA BARRA NEGRA · piezas 1 y 2 ========================================================================== El guion da el fondo (#000000) y nada más: en Elementor la sección va sin relleno y el aire lo pone el relleno de 10px que la columna trae de fábrica. De ahí el padding-block de 10px. SIN MEDIR el tamaño de letra. LA BARRA VERTICAL. Las piezas 1 y 2 son el mismo texto con marcas de dispositivo opuestas y una sola diferencia: la « | ». Es UNA pieza con su punto de corte, así que en el HTML hay un solo párrafo y la barra vive en un que aparece a partir de 768px. Ni texto duplicado ni media frase escondida a un lector de pantalla. ========================================================================== */ .jrv-guia-aviso { box-sizing: border-box; padding: 10px 20px; background-color: #000; } .jrv-guia-aviso__texto { margin: 0; color: var(--jrv-p-blanco); font-family: var(--jrv-p-tipo-titulos); font-weight: 700; letter-spacing: .04em; line-height: 1.35; text-align: center; } .jrv-guia-aviso__barra { display: none; } @media (min-width: 768px) { .jrv-guia-aviso__texto { font-size: 14px; } /* SIN MEDIR */ .jrv-guia-aviso__barra { display: inline; } } /* ========================================================================== 4 · LA CABECERA DE LA OFERTA · piezas 3 a 12 ========================================================================== «fondo {color de la guía} · relleno 60px · ancho 1100px». El relleno y el ancho los pone .jrv-seccion + .jrv-contenedor de componentes.css; aquí solo el fondo. ========================================================================== */ .jrv-guia-oferta { background-color: var(--jrv-guia-acento); } /* Pieza 3 · «EDICIÓN 2022» / «2ª EDICIÓN 2022» / «3ª EDICIÓN 2022». Es un reclamo, no un titular: en el HTML va en

. SIN MEDIR. */ .jrv-guia-oferta__edicion { margin: 0; color: var(--jrv-p-blanco); font-family: var(--jrv-p-tipo-titulos); font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-align: center; } /* Pieza 4 · «GUÍA ESPECIALIZADA» / «GUÍA INMOBILIARIA». El color es literal del guion (#1D2C33): la losa oscura sobre el color de la guía. SIN MEDIR el tamaño. */ .jrv-guia-oferta__coleccion { margin: 6px 0 0; color: var(--jrv-p-carbon); font-family: var(--jrv-p-tipo-titulos); font-size: clamp(30px, 4.8vw, 46px); font-weight: 800; letter-spacing: .02em; line-height: 1.05; text-align: center; } /* Pieza 5 · EL ÚNICO

DE LA PÁGINA. SIN MEDIR el tamaño. */ .jrv-guia-oferta__titulo { margin: 10px 0 0; color: var(--jrv-p-blanco); font-family: var(--jrv-p-tipo-titulos); font-size: clamp(26px, 4.2vw, 40px); font-weight: 700; line-height: 1.15; text-align: center; text-wrap: balance; } /* Piezas 6, 7 y 8 de 78754 y 79916 · el reclamo de dos líneas. Mismo caso que la barra negra: en el guion son dos piezas para móvil y una para pantalla ancha. Un solo párrafo con un por línea; en móvil cada uno hace bloque —las dos líneas del original— y desde 768px van seguidos. 78811 y 78833 no lo llevan. */ .jrv-guia-oferta__reclamo { margin: 14px 0 0; color: var(--jrv-p-blanco); font-family: var(--jrv-p-tipo-titulos); font-weight: 600; letter-spacing: .04em; line-height: 1.4; text-align: center; } .jrv-guia-oferta__linea { display: block; } @media (min-width: 768px) { .jrv-guia-oferta__reclamo { font-size: 18px; } /* SIN MEDIR */ .jrv-guia-oferta__linea { display: inline; } } /* ========================================================================== 5 · LAS DOS COLUMNAS · el «estructura 20» del guion ========================================================================== Aparece tres veces con tres repartos distintos: 47,956 / 51,999 en la caja de la oferta, 46,092 / 53,908 en la ficha del autor y 39 / 61 en el cierre. Un solo bloque y el reparto en dos variables. POR QUÉ fr Y minmax(0, …) Y NO PORCENTAJES. Con porcentajes más una separación la fila se pasa del 100% y aparece barra horizontal (la comprobación `document.scrollWidth === window.innerWidth` de la lista del protocolo). Con fr el reparto es el mismo y la separación se descuenta sola; el minmax(0, …) impide que un texto largo ensanche su columna. LA SEPARACIÓN DE 20px NO ES INVENTADA: en Elementor cada columna trae 10px de relleno propio a cada lado, que entre dos columnas son justo 20px. `align-items: center` NO ESTÁ EN EL GUION: el reparto vertical de las columnas no lo recogió el extractor. Centrado es lo que cuadra en la ficha del autor y en el cierre; si al comparar con producción el mockup de la caja de la oferta sale arriba y no centrado, se cambia AQUÍ, en una línea, a `start`. ========================================================================== */ .jrv-guia-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; } @media (min-width: 768px) { .jrv-guia-duo { grid-template-columns: minmax(0, var(--jrv-guia-duo-a, 1fr)) minmax(0, var(--jrv-guia-duo-b, 1fr)); } } /* .jrv-guia-caja__texto y .jrv-guia-autor__texto NO TIENEN REGLA, Y ES A PROPÓSITO: son la segunda celda de la rejilla y solo existen para agrupar lo que va dentro (lista + botón + aviso, o nombre + biografía). Todo lo visible lo ponen los hijos. Si alguien busca su bloque aquí, no falta: no hace falta. */ /* --- La caja de la oferta · piezas 9 a 12 ------------------------------- «margen sup 20px · relleno 60px». El margen va aquí y no como relleno de la sección porque no es el primer hijo del contenedor: no hay colapso posible. EL RELLENO LATERAL BAJA A 24px POR DEBAJO DE 768px, Y ES LA ÚNICA DESVIACIÓN DELIBERADA DE ESTA HOJA. En producción Elementor mantiene los 60px en móvil, y a 375px de pantalla eso deja 215px útiles para frases de tres líneas. El vertical se queda en 60px, así que el ritmo de la página no cambia. Para volver a lo publicado al pie de la letra basta borrar las dos líneas de `padding` de aquí y dejar `padding: 60px`. Está anotado para el dueño. */ .jrv-guia-caja { --jrv-guia-duo-a: 47.956fr; --jrv-guia-duo-b: 51.999fr; box-sizing: border-box; margin-block-start: 20px; padding: 60px 24px; background-color: var(--jrv-guia-caja-fondo); } @media (min-width: 768px) { .jrv-guia-caja { padding: 60px; } } .jrv-guia-caja__media { width: var(--jrv-guia-oferta-imagen, 85%); margin-inline: auto; } /* --- Los puntos del `icon-list` ---------------------------------------- LA PALOMITA ES UN SVG INCRUSTADO EN EL CSS y pintada con background-color a través de una máscara, así que no hay Font Awesome que sobreviva a Elementor ni un archivo más que pedir al servidor. Es el mismo recurso que usa la portada. El guion no dice qué icono llevaba ni de qué color: toma el de la guía. SIN MEDIR (icono y tamaño de letra). */ .jrv-guia-puntos { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; color: var(--jrv-p-carbon); font-size: 16px; line-height: 1.6; } .jrv-guia-puntos li { position: relative; padding-left: 32px; overflow-wrap: break-word; } .jrv-guia-puntos li::before { content: ""; position: absolute; top: .18em; left: 0; width: 20px; height: 20px; background-color: var(--jrv-guia-acento); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.9-1.9 3.65 3.65L18.1 5.35 20 7.25z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.9-1.9 3.65 3.65L18.1 5.35 20 7.25z'/%3E%3C/svg%3E") center / contain no-repeat; } /* El botón sale igual en la caja y en el cierre: geometría y color vienen de .jrv-cta--amarillo (componentes.css) y aquí solo se le da su aire. */ .jrv-guia-boton { margin-block-start: 26px; } /* El aviso de privacidad de la caja va alineado a la izquierda, como dice el guion («alineado=left»). SIN MEDIR el tamaño. */ .jrv-guia-caja__privacidad { margin: 14px 0 0; color: var(--jrv-p-carbon); font-size: 12px; line-height: 1.5; text-align: left; } /* ========================================================================== 6 · LA FRANJA BLANCA · la promesa y los tres `icon-box` ========================================================================== «fondo #FFFFFF · ancho 950px», sin relleno en el guion. 79916 no la tiene. EL `spacer` DE 20px ES EL RELLENO DE ARRIBA DE ESTA SECCIÓN y no un div vacío ni un margen del párrafo: puesto en el hijo, con el padre sin relleno arriba, el margen se colapsa hacia fuera y arrastra la sección entera (trampa del protocolo). Puesto aquí no puede pasar. ========================================================================== */ .jrv-guia-promesa { box-sizing: border-box; padding-block-start: 20px; padding-inline: 20px; background-color: var(--jrv-p-blanco); } /* «heading» con etiqueta=h2 en el original, pero es texto corrido alineado a la izquierda: en el HTML va en

. SIN MEDIR el tamaño. */ .jrv-guia-promesa__texto { margin: 0; color: var(--jrv-p-carbon); font-family: var(--jrv-p-tipo-titulos); font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; line-height: 1.45; overflow-wrap: break-word; } /* Los tres `icon-box` de 78811 y 78833 · «estructura 30 · margen sup 40px», tres columnas al 33%. El guion trae el título de cada uno y la descripción vacía, y NO trae el icono: el extractor no lo recogió, así que van sin icono. Anotado. Son rótulos de lo que trae el paquete, no titulares:

  • y no

    , que además saltaría de h1 a h3 en esta sección. SIN MEDIR (fondo, radio y tamaño). */ .jrv-guia-incluye { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; } @media (min-width: 768px) { .jrv-guia-incluye { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .jrv-guia-incluye__caja { box-sizing: border-box; padding: 20px 16px; border-radius: var(--jrv-p-radio); background-color: var(--jrv-p-nube); color: var(--jrv-p-marino); font-family: var(--jrv-p-tipo-titulos); font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; overflow-wrap: break-word; } /* ========================================================================== 7 · EL AUTOR · la «Sección Soy Jesús» del guion ========================================================================== «fondo #FFFFFF · relleno 60px · ancho 1100px», con .jrv-seccion y .jrv-contenedor. El titular usa .jrv-seccion__titulo de componentes.css, que ya es marino #00325C, centrado y del tamaño de los titulares ligeros: es exactamente lo que pide el guion, así que no se redefine nada. En 78811 y 78833 el titular es «Hola, soy Jesús Rico Vargas» y dentro de la ficha no hay nombre. En 78754 es «Acerca del autor:» + «Jesús Rico Vargas» dentro, y en 79916 «Acerca del Autor:» + «Carlos Pérez Newman» —esta última es la única guía que no firma Jesús—. ========================================================================== */ .jrv-guia-autor { background-color: var(--jrv-p-blanco); } .jrv-guia-autor__ficha { --jrv-guia-duo-a: 46.092fr; --jrv-guia-duo-b: 53.908fr; box-sizing: border-box; margin-block-start: var(--jrv-guia-autor-aire, 100px); padding: var(--jrv-guia-autor-relleno, 30px); background-color: var(--jrv-p-nube); } .jrv-guia-autor__retrato { width: var(--jrv-guia-retrato, 70%); margin-inline: auto; } /* El nombre del autor. Color literal del guion (#2B2B2B, que no es el carbón del texto corrido). Va en

    porque cuelga del

    de la sección. SIN MEDIR. */ .jrv-guia-autor__nombre { margin: 0 0 10px; color: var(--jrv-g-grafito); font-family: var(--jrv-p-tipo-titulos); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.2; } /* La biografía. En el guion es la única pieza que ya venía con etiqueta=p. */ .jrv-guia-autor__bio { margin: 0; color: var(--jrv-p-carbon); font-size: 16px; line-height: 1.7; overflow-wrap: break-word; } /* ========================================================================== 8 · EL CIERRE · piezas 18-22 (19-22 en las de 24) ========================================================================== «estructura 20 · relleno 40px · ancho 950px», columnas 39% y 61%. El fondo es plano en tres de las cuatro y un degradado a 60º en 78754. box-sizing: border-box NO ES DECORATIVO. 78754 lleva «alto 450px» y el tema hereda content-box: sin esto los 40px de relleno se suman por arriba y por abajo y la sección mide 530 en vez de 450. Es el fallo que dejó el hero de la portada en 850px cuando debía medir 650. Se pinta con flex + align-items:center para que, cuando hay alto mínimo, el contenido quede centrado dentro de él en vez de pegado arriba. ========================================================================== */ .jrv-guia-cierre { box-sizing: border-box; display: flex; align-items: center; min-height: var(--jrv-guia-cierre-alto, 0px); padding: 40px 20px; background: var(--jrv-guia-cierre-fondo); } .jrv-guia-cierre__reja { --jrv-guia-duo-a: 39fr; --jrv-guia-duo-b: 61fr; } .jrv-guia-cierre__media { width: var(--jrv-guia-cierre-imagen, 80%); margin-inline: auto; } /* Aquí el guion dice «alineado=center» para el titular y para el aviso, así que se centra la columna entera: el botón es un inline-block y se centra con ella. */ .jrv-guia-cierre__texto { text-align: center; } .jrv-guia-cierre__titulo { margin: 0; color: var(--jrv-p-blanco); font-family: var(--jrv-p-tipo-titulos); font-weight: 700; line-height: 1.25; text-wrap: balance; } .jrv-guia-cierre__privacidad { margin: 14px 0 0; color: var(--jrv-p-blanco); line-height: 1.5; } /* ========================================================================== 9 · EL PIE · las dos últimas piezas ========================================================================== «fondo #00325C · relleno 30px · ancho 950px». Logotipo blanco al 35% y aviso de derechos centrado. El