/* ========================================================================== /email-marketing-inmobiliario/ · identificador 82429 · lo propio de esta página ========================================================================== Los bloques compartidos —contenedor, botón amarillo, .jrv-media, .jrv-video16, .jrv-seccion__titulo y las utilidades .jrv-solo-movil / .jrv-solo-ancha— vienen de componentes.css, que se declara antes. Aquí solo lo que usa esta página. LO QUE MANDA EN LOS COLORES ES EL `_elementor_data` DE PRODUCCIÓN, no el guion. El guion deja once secciones sin color de fondo porque lo toman de un color GLOBAL del kit de Elementor y el extractor no resuelve esas referencias. Están resueltos contra la tabla de colores del kit (respaldo prod-2026-08-11.sql.gz): 3573e7a «Azul Fdo JRV» #F5F7FB el fondo del hero, de los siete artículos y de las herramientas — NO es blanco ee14dd8 «Azul 02 2021» #004A8F arranque del degradado del hero 4760ffd «Azul 03 2021» #0077C4 cierre del degradado y el texto corrido d641fd9 «Azul 01 2021» #00325C titulares de sección y el pie 0e7a4fe «Azul Oscuro» #004361 los rótulos de grupo y los nombres 9db5baf «Azul Claro» #2980B9 los títulos de las tarjetas de webinar 5cca6da0 #FFDD59 la pastilla del hero y el borde de la caja 1cc0ceb5 #B52025 el «Leer artículo» de las siete tarjetas TIPOGRAFÍA: la de la marca, que ya hereda componentes.css de GP Premium (cuerpo Montserrat 16/1.4, h1 Roboto Slab 35 negrita, h2 Montserrat 25 peso 300). Aquí NO se declara ningún tamaño de letra salvo en CUATRO sitios donde el diseño lo pide de verdad, y siempre en unidades relativas: · el

del hero, que es la pieza central de una banda de 500px de alto y en el original mide 60px: con los 35px del tema se pierde dentro del hueco; · el título y el falso botón de las tarjetas de webinar, que son cuatro columnas de unos 235px y con el h3 del tema (20px) el título más largo se iría a siete líneas; · el rótulo gris de «…Próximamente», que es un aviso y no el nombre de una herramienta, y con el h3 de la marca pesaría más que las nueve que lleva al lado; · el aviso de derechos del pie, letra pequeña por definición. Todo lo demás hereda. Decisión del dueño del 11-08-2026: va a rediseñar, y lo que hace falta es salir de Elementor conservando texto, imágenes y enlaces. ========================================================================== */ /* ========================================================================== 0 · SOLTAR EL CONTENEDOR DEL TEMA · LO PRIMERO DE TODO ========================================================================== EL SELECTOR ES `page-id-82429` Y NO `page-template-…`. WordPress solo añade `page-template-{archivo}` cuando la plantilla se elige en el desplegable del editor; una plantilla que la jerarquía coge por el nombre del archivo —`page-{ID}.php`— deja el body en `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 los 40px (30 en móvil) que GeneratePress le da a #content. Ha pasado tres veces. ========================================================================== */ body.page-id-82429 #page, body.page-id-82429 .site.grid-container { max-width: none; margin-inline: 0; width: 100%; } body.page-id-82429 #content, body.page-id-82429 .site-content { padding: 0; margin-block-end: 0; } body.page-id-82429 #primary, body.page-id-82429 #main { width: 100%; max-width: none; } /* El lienzo por debajo de todo. La última sección antes del pie es #FCF8E9, así que el blanco del tema no se ve; se declara igual para que un hueco de cálculo no saque un gris del tema. */ body.page-id-82429 #page { background-color: var(--jrv-p-blanco); } /* ========================================================================== 1 · LOS VALORES DE ESTA PÁGINA ========================================================================== Van bajo el selector del identificador, no en :root: así no salen de esta página y no pueden pisar nada del blog ni de las otras conversiones. Los nombres llevan el prefijo --jrv-em- por lo mismo. Los colores que YA están en componentes.css se usan desde allí (--jrv-p-…) y no se repiten aquí. ========================================================================== */ body.page-id-82429 { --jrv-em-sol: #FFDD59; /* pastilla del hero,

y borde de la caja */ --jrv-em-hondo: #004361; /* rótulos de grupo, nombres de herramienta */ --jrv-em-cielo-suave:#2980B9; /* títulos de las tarjetas de webinar */ --jrv-em-rojo: #B52025; /* el «Leer artículo» de las siete tarjetas */ --jrv-em-linea: #E5E5F0; /* las cinco líneas divisorias grises */ --jrv-em-lienzo: #346ce3; /* el fondo de la celda de imagen de la tarjeta */ --jrv-em-filo: #DCDDDE; /* borde de las cajas de herramienta */ --jrv-em-crema: #FCF8E9; /* fondo de la sección de cierre */ --jrv-em-cita: #054D7B; /* la entrada del Tridente */ --jrv-em-tinta-mc: #2D2C2C; /* los dos textos de la MasterClass */ --jrv-em-gris: #7E7E7E; /* «...Próximamente publicaremos más» */ --jrv-em-cta-marco: #F0F0F0; /* el fondo de la tarjeta de webinar */ --jrv-em-cta-fondo: #FDFDFD; /* el interior de la tarjeta de webinar */ --jrv-em-ancho-hero: 900px; --jrv-em-ancho-media:1000px; --jrv-em-ancho-ancha:1140px; /* la sección de webinars no declara ancho: es el ancho por omisión de Elementor */ --jrv-em-ancho-caja: 820px; /* la caja blanca de ActiveCampaign */ --jrv-em-ancho-mc: 849px; /* el bloque de la MasterClass */ } /* --- El contenedor de cada sección -------------------------------------- Mismo papel que .jrv-contenedor de componentes.css, pero esta página usa seis anchos distintos (900, 950, 1000, 1100, 1140 y los dos internos), así que lleva el suyo con modificadores. */ .jrv-em-caja { width: 100%; max-width: var(--jrv-p-ancho); /* 1100px, el de la mayoría */ margin-inline: auto; } .jrv-em-caja--hero { max-width: var(--jrv-em-ancho-hero); } .jrv-em-caja--estrecha { max-width: var(--jrv-em-ancho-hero); } .jrv-em-caja--media { max-width: var(--jrv-em-ancho-media); } .jrv-em-caja--ancha { max-width: var(--jrv-em-ancho-ancha); } .jrv-em-caja--pie { max-width: var(--jrv-p-ancho-pie); } /* --- Los encabezados QUE SON ENLACES ------------------------------------ Veinte de los cincuenta y siete enlaces de esta página están dentro de un encabezado: los siete títulos de artículo, los nueve nombres de herramienta y los cuatro títulos de producto. En Elementor el enlace hereda el color del encabezado; el tema, en cambio, pinta todo en #1e73be, así que sin esta regla veinte titulares cambiarían de color de golpe. El subrayado aparece al pasar el ratón, para que se vea que son pulsables. */ .jrv-em-articulo__titulo a, .jrv-em-caja-tienda__nombre a, .jrv-em-destacada__titulo a, .jrv-em-producto__titulo a { color: inherit; text-decoration: none; } .jrv-em-articulo__titulo a:hover, .jrv-em-articulo__titulo a:focus-visible, .jrv-em-caja-tienda__nombre a:hover, .jrv-em-caja-tienda__nombre a:focus-visible, .jrv-em-destacada__titulo a:hover, .jrv-em-destacada__titulo a:focus-visible, .jrv-em-producto__titulo a:hover, .jrv-em-producto__titulo a:focus-visible { color: var(--jrv-p-cielo); text-decoration: underline; } /* --- LAS TRES LÍNEAS CON GALÓN ----------------------------------------- Los `divider` de las piezas 46, 116 y 120 no son una línea pelada: en el `_elementor_data` llevan `look: line_icon` con el icono `fa-chevron-down` a 37px en #A1C7FF, o sea una línea con un GALÓN hacia abajo en el medio, que es el «sigue bajando» del diseño. Aquí el galón se dibuja con dos bordes girados 45º y NI UNA FUENTE DE ICONOS: de esta conversión depende poder desinstalar los cuatro plugins de Elementor con sus 443 KB de tipos de icono, así que traer una fuente para pintar tres galones sería tirar por la ventana el motivo del trabajo. El galón lleva de fondo el color de SU sección para tapar el trozo de línea que queda por detrás —Elementor parte la línea en dos y deja el hueco—, y ese color llega en --jrv-em-fondo-galon porque las tres secciones no son del mismo color. Y la línea mide el 62% centrado en pantalla ancha y el 100% en móvil, que son los dos valores del original (`width` y `width_mobile`). */ .jrv-em-galon { position: relative; padding-block-start: 30px; } .jrv-em-galon::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; /* width_mobile: 100% */ border-block-start: 3px solid var(--jrv-p-hielo); } .jrv-em-galon::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; width: 16px; height: 16px; border-inline-end: 3px solid var(--jrv-p-hielo); border-block-end: 3px solid var(--jrv-p-hielo); background-color: var(--jrv-em-fondo-galon, var(--jrv-p-blanco)); transform: translate(-50%, -50%) rotate(45deg); } @media (min-width: 768px) { /* width: 62% y align: center. */ .jrv-em-galon::before { inset-inline: 19%; } } /* --- El texto corrido --------------------------------------------------- En Elementor todos estos párrafos eran `heading` con etiqueta h2 o p. Aquí van en

y sin tamaño: heredan el cuerpo de la marca. Centrado en pantalla ancha y alineado a la izquierda en móvil, que es lo que dicen `align` y `align_mobile` del original. */ .jrv-em-parrafo { margin: 14px 0 0; text-align: left; } @media (min-width: 768px) { .jrv-em-parrafo { text-align: center; } } .jrv-em-parrafo--cielo { color: var(--jrv-p-cielo); } /* ========================================================================== 2 · PIEZAS 1-6 · EL HERO ========================================================================== Degradado a 60º, #004A8F al 28% y #0077C4 al 85%, exactamente como el hero de la portada y como la cabecera de /tutoriales-realtor-sales-funnels/. `box-sizing: border-box` es obligatorio: el alto mínimo son 500px (560 en móvil) y el tema hereda content-box, con lo que los 50px de relleno de abajo se sumarían y la banda mediría 550. `background-origin: border-box` por la misma razón, para que el degradado ocupe la caja entera. LOS 50px DE ABAJO SON LA PIEZA 6, un `spacer` oculto en móvil. En móvil los pone el propio relleno de la sección (padding_mobile 0 20 50 20), así que la medida es la misma en los dos casos y no hace falta un elemento vacío. ========================================================================== */ .jrv-em-hero { box-sizing: border-box; min-height: 560px; /* custom_height_mobile */ padding: 0 20px 50px; background-image: linear-gradient(60deg, var(--jrv-p-hondo) 28%, var(--jrv-p-cielo) 85%); background-origin: border-box; box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%); color: var(--jrv-p-blanco); text-align: center; } @media (min-width: 768px) { .jrv-em-hero { min-height: 500px; } /* custom_height */ } .jrv-em-hero__logo { display: block; width: 70%; /* width_mobile */ max-width: 270px; height: auto; margin: 30px auto 20px; /* _margin 30 0 20 0 */ } @media (min-width: 768px) { /* width 30% de los 900px del contenedor. */ .jrv-em-hero__logo { width: 30%; max-width: 270px; } } /* La pastilla amarilla. El fondo va en el y NO en el párrafo: en el original es un dentro del texto, y puesto en el bloque la banda amarilla cruzaría los 900px de ancho. */ .jrv-em-hero__pastilla, .jrv-em-rotulo-azul, .jrv-em-masterclass__pastilla { margin: 0; line-height: 1.6; } .jrv-em-hero__pastilla span { display: inline-block; padding: 5px 15px; /* el del original */ background-color: var(--jrv-em-sol); color: var(--jrv-p-marino); font-weight: 700; } /* El

. Único de la página. Es el único titular con tamaño propio: en el original mide 60px y con los 35px del tema se queda pequeño dentro de una banda de 500px de alto. Relativo, de 30px en móvil a 54px. EL MARGEN SUPERIOR DE -15px DEL ORIGINAL NO SE COPIA, y esto está medido, no supuesto: con el interlineado de 1.15 el titular se subía 15px y las letras amarillas se metían dentro de la pastilla amarilla, que es igual de amarilla. Ese -15px era un ajuste fino para los 60px y el interlineado de Elementor; aquí el titular no mide lo mismo, así que el ajuste tampoco. */ .jrv-em-hero__titulo { margin: 4px 0 0; color: var(--jrv-em-sol); font-size: clamp(1.9rem, 1.15rem + 2.8vw, 3.4rem); line-height: 1.15; text-wrap: balance; } .jrv-em-hero__entrada { margin: 12px 0 0; /* _margin -5, absorbido por el titular */ color: var(--jrv-p-blanco); text-align: left; /* align_mobile */ } @media (min-width: 768px) { .jrv-em-hero__entrada { text-align: center; } } .jrv-em-hero__video { margin-block-start: 24px; } /* ========================================================================== 3 · PIEZAS 7-10 · «Comienza aquí» + «⚡ 7 MEGA Artículos» ========================================================================== Relleno 90px arriba y 0 abajo (60/20 en móvil). Los 40px que faltan abajo son la pieza 10, otro `spacer` oculto en móvil: relleno, no elemento. ========================================================================== */ .jrv-em-arranque { padding: 60px 20px 20px; background-color: var(--jrv-p-nube); text-align: center; } @media (min-width: 768px) { .jrv-em-arranque { padding: 90px 20px 40px; } } /* La pastilla azul de «Comienza aquí», mismo mecanismo que la amarilla. */ .jrv-em-rotulo-azul span { display: inline-block; padding: 8px 15px; background-color: var(--jrv-p-hondo); color: var(--jrv-p-blanco); font-weight: 700; } .jrv-em-arranque .jrv-seccion__titulo { margin-block-start: 10px; } /* ========================================================================== 4 · PIEZAS 11-43 · LOS SIETE ARTÍCULOS ========================================================================== Tres grupos, cada uno con su rótulo y sus tarjetas. Los dos `divider` #E5E5F0 que separan los grupos son el BORDE SUPERIOR del grupo que va debajo (.jrv-em-grupo--linea): así no hay elementos vacíos y —lo importante— el ancla «3-ac-email-marketing-inmobiliario», que en el original vivía en el divider, cae exactamente donde caía. ========================================================================== */ .jrv-em-grupo { padding-inline: 20px; background-color: var(--jrv-p-nube); } /* El divider de 1px con sus 40px de aire arriba y abajo (`gap: 40px`). El borde se dibuja sobre el contenedor interior para que mida los 1100px del original y no el ancho entero de la pantalla. */ .jrv-em-grupo--linea > .jrv-em-caja { border-block-start: 1px solid var(--jrv-em-linea); padding-block-start: 30px; /* gap_mobile: 30px */ margin-block-start: 40px; /* + los 10px de _margin_mobile */ } @media (min-width: 768px) { .jrv-em-grupo--linea > .jrv-em-caja { padding-block-start: 40px; } } /* La última fila cierra con los 90px de abajo del original (60 en móvil). */ .jrv-em-grupo--cierre { padding-block-end: 60px; } @media (min-width: 768px) { .jrv-em-grupo--cierre { padding-block-end: 90px; } } /* El rótulo de grupo: h3 a la izquierda en pantalla ancha, centrado en móvil. Sin font-size: hereda el h3 de la marca. */ .jrv-em-grupo__titulo { margin: 0 0 4px; color: var(--jrv-em-hondo); text-align: center; } @media (min-width: 768px) { .jrv-em-grupo__titulo { text-align: left; } } /* Las dos columnas al 50% del original. El hueco de 20px de Elementor entre columnas se resuelve con `gap`, y el margen inferior de 20px que las tarjetas llevan en móvil, con el `row-gap`. */ .jrv-em-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-block-start: 16px; } @media (min-width: 768px) { .jrv-em-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } } /* El rótulo «Artículo #01». Es

y no un encabezado: es una etiqueta de orden, no un título. Tres de ellos llevan un ancla viva en el atributo id. LOS 20px DE ABAJO SON IMPRESCINDIBLES Y ESTÁN MEDIDOS. La tarjeta sube 15px (margen negativo del original) y sin esos 20px se comía el rótulo: quedaban visibles 7 de sus 22px. En Elementor el hueco lo daba el margen inferior de 20px que el propio editor pone a todo widget que no sea el último de su columna, y ese margen es justo lo que el -15px estaba comiéndose. Con los 20px queda el hueco de 5px que tiene la página publicada. */ .jrv-em-articulo__rotulo { margin: 0 0 20px; color: var(--jrv-p-cielo); font-weight: 400; } /* La tarjeta. Aquí está el MARGEN NEGATIVO de -15px del original, y está en la caja que en Elementor era la sección anidada —no en un hijo—: en un hijo se colapsaría y arrastraría la fila entera. Con `position: relative` y `z-index`, o la tarjeta se pintaría por debajo del fondo de la sección. `overflow: hidden` recorta las dos celdas al radio de 17px de la tarjeta; por eso no hacen falta los radios de 8px que las celdas traen en el original: bajo el recorte de la tarjeta no se ven. */ .jrv-em-articulo__tarjeta { position: relative; z-index: 1; display: grid; grid-template-columns: 40% 60%; /* _inline_size 40/60, y también en móvil */ margin-block-start: -15px; border-radius: 17px; overflow: hidden; background-color: var(--jrv-p-blanco); box-shadow: 0 0 10px 0 rgb(46 45 86 / 26%); } /* La celda de la imagen lleva su fondo azul del original: se ve por debajo de la miniatura cuando la columna de texto es más alta. */ .jrv-em-articulo__media { display: block; background-color: var(--jrv-em-lienzo); line-height: 0; } .jrv-em-articulo__media img, .jrv-em-articulo__media picture { display: block; width: 100%; height: auto; } .jrv-em-articulo__cuerpo { padding: 15px 15px 0; } @media (min-width: 768px) { .jrv-em-articulo__cuerpo { padding: 20px 20px 0; } } .jrv-em-articulo__titulo { margin: 10px 0 0; color: var(--jrv-p-marino); } .jrv-em-articulo__pie { margin: 10px 0 14px; } /* El «Leer artículo» era un `button` de Elementor con fondo transparente (#FFFFFF00), radio 0 y el texto en #B52025: o sea, un enlace de texto. No usa .jrv-cta porque .jrv-cta es el botón con fondo, y aquí no hay fondo. */ .jrv-em-articulo__enlace { display: inline-block; color: var(--jrv-em-rojo); font-weight: 600; text-decoration: none; } .jrv-em-articulo__enlace:hover, .jrv-em-articulo__enlace:focus-visible { color: var(--jrv-p-marino); text-decoration: underline; } /* ========================================================================== 5 · PIEZAS 44-50 · LOS CUATRO WEBINARS ========================================================================== Sección blanca, y la fila de tarjetas con el `divider` #A1C7FF de 3px al 62% por encima. Esa línea es MÁS CORTA que el bloque, así que no puede ser un `border-top`: se dibuja con un `::before`, que no añade un elemento al documento. LAS TARJETAS SON `call-to-action`, NO BOTONES. Cada una trae su foto de portada (`bg_image`), el título en #2980B9 y un falso botón «Ver Webinar Ahora». `link_click = box` en el original: lo pulsable es la tarjeta entera, así que el envoltorio es el y el botón un . Sin cinta: las cuatro tienen `ribbon_title` vacío, aunque guarden los colores de la cinta. ========================================================================== */ .jrv-em-webinars { padding: 60px 20px; background-color: var(--jrv-p-blanco); text-align: center; } @media (min-width: 768px) { .jrv-em-webinars { padding: 90px 20px 60px; } } /* La pieza 46 —la línea con galón— es el ::before de esta fila: ver .jrv-em-galon. En el original esta fila es una sección con `margin-top: -10px`, que era la forma de acercarla a la línea. Aquí la línea ya es el borde superior de la propia fila, así que ese -10px no tiene nada que acercar: el hueco es el `margin-block-start` de 30px y el relleno de 30px que deja sitio al galón. El `z-index` se queda porque la fila se pinta sobre el fondo de la sección. */ .jrv-em-webinars__fila { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-block-start: 30px; } @media (min-width: 768px) { /* structure 40: cuatro columnas al 25%, con los 10px de relleno de cada columna resueltos con el hueco de la rejilla. */ .jrv-em-webinars__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1025px) { .jrv-em-webinars__fila { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .jrv-em-webinar { display: flex; flex-direction: column; background-color: var(--jrv-em-cta-marco); box-shadow: 0 0 12px -2px rgb(0 0 0 / 30%); color: inherit; text-decoration: none; } .jrv-em-webinar__media { display: block; height: 230px; /* image_min_height_mobile */ overflow: hidden; line-height: 0; } @media (min-width: 768px) { .jrv-em-webinar__media { height: 170px; } /* image_min_height */ } /* La foto es de fondo en el original (`background-size: cover`); aquí es un de verdad para que pase por el plugin de imágenes modernas y tenga srcset, y se recorta igual con object-fit. */ .jrv-em-webinar__media img, .jrv-em-webinar__media picture { display: block; width: 100%; height: 100%; object-fit: cover; } .jrv-em-webinar__cuerpo { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; padding: 24px 15px 25px; /* el padding del widget */ background-color: var(--jrv-em-cta-fondo); } /* Uno de los tres sitios con tamaño propio, y por una razón medible: son cuatro columnas de unos 235px y con el h3 de la marca (20px) un título como «Cómo captar clientes con Email Marketing Inmobiliario» se va a siete líneas. El original usa 15px (17 en móvil). */ .jrv-em-webinar__titulo { margin: 0; color: var(--jrv-em-cielo-suave); font-size: 1.0625rem; font-weight: 600; line-height: 1.5; text-align: center; text-wrap: balance; } @media (min-width: 768px) { .jrv-em-webinar__titulo { font-size: .9375rem; } } /* El falso botón: no es un porque ya lo es la tarjeta entera, y un dentro de otro es HTML inválido que el navegador desmonta. Los valores son los del widget: borde y texto en #00325C, radio 8px, Montserrat 13 negrita. */ .jrv-em-webinar__boton { display: inline-block; padding: 10px 18px; border: 2px solid var(--jrv-p-marino); border-radius: 8px; color: var(--jrv-p-marino); font-size: .8125rem; font-weight: 700; line-height: 1.3; transition: background-color .16s ease, color .16s ease; } .jrv-em-webinar:hover .jrv-em-webinar__boton, .jrv-em-webinar:focus-visible .jrv-em-webinar__boton { background-color: var(--jrv-p-hondo); border-color: var(--jrv-p-hondo); color: var(--jrv-p-blanco); } .jrv-em-webinar:focus-visible { outline: 3px solid var(--jrv-p-cielo); outline-offset: 3px; } /* ========================================================================== 6 · PIEZAS 51-94 · LAS HERRAMIENTAS ========================================================================== Dos secciones seguidas con el mismo fondo #F5F7FB —el titular con su mockup y la lista— porque sus rellenos son distintos y de ahí sale el aire del bloque. ========================================================================== */ .jrv-em-cabecera-tiendas { padding: 60px 0 0; background-color: var(--jrv-p-nube); text-align: center; } @media (min-width: 768px) { .jrv-em-cabecera-tiendas { padding: 90px 20px 30px; } } /* Los dos archivos —el de móvil y el de ancha— van al 100% del contenedor en su propio tamaño de pantalla, así que una sola regla vale para los dos. */ .jrv-em-mockup { width: 100%; margin: 20px auto 0; } .jrv-em-tiendas { padding: 30px 20px 60px; background-color: var(--jrv-p-nube); } @media (min-width: 768px) { .jrv-em-tiendas { padding: 0 20px 60px; } } /* --- PIEZAS 54-57 · La caja blanca de ActiveCampaign -------------------- Borde de 4px en #FFDD59 (venía de un global del kit), radio 30px y sombra. El `gap: no` del original es la razón de que las dos columnas no lleven hueco. */ .jrv-em-destacada { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: var(--jrv-em-ancho-caja); margin-inline: auto; padding: 20px 0; border: 4px solid var(--jrv-em-sol); border-radius: 30px; background-color: var(--jrv-p-blanco); box-shadow: 0 0 12px -4px rgb(0 0 0 / 30%); } @media (min-width: 768px) { /* Las dos columnas del original: 46,092% y 53,908%. */ .jrv-em-destacada { grid-template-columns: 46.092% 53.908%; padding: 30px 30px 0; } } .jrv-em-destacada__media { display: block; width: 70%; /* width_mobile */ margin-inline: auto; line-height: 0; } .jrv-em-destacada__media img, .jrv-em-destacada__media picture { display: block; width: 100%; height: auto; } @media (min-width: 768px) { .jrv-em-destacada__media { width: 100%; } } .jrv-em-destacada__cuerpo { padding: 16px 20px 0; } @media (min-width: 768px) { .jrv-em-destacada__cuerpo { padding: 0 0 30px 20px; } } .jrv-em-destacada__titulo { margin: 0; color: var(--jrv-em-hondo); text-align: center; } @media (min-width: 768px) { .jrv-em-destacada__titulo { text-align: left; } } .jrv-em-destacada__texto { margin: 10px 0 0; color: var(--jrv-p-carbon); } .jrv-em-destacada__accion { margin: 18px 0 0; } /* --- PIEZAS 58-94 · Las nueve cajas de herramienta --------------------- UNA SOLA LISTA. En el original están dos veces: diez cajas ocultas en escritorio y tableta (la versión de móvil, que además incluye la caja de «Próximamente») y tres filas de tres ocultas en móvil. Misma imagen, mismo nombre y mismo enlace en las dos, así que se escribe una vez con su punto de corte: dos por fila por debajo de 768px —los `_inline_size_mobile` del original son del 50%— y tres por fila a partir de ahí. */ .jrv-em-cajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; } @media (min-width: 768px) { .jrv-em-cajas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .jrv-em-caja-tienda { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 2px solid var(--jrv-em-filo); border-radius: 15px; box-shadow: 0 0 12px -2px rgb(0 0 0 / 20%); text-align: center; } @media (min-width: 768px) { .jrv-em-caja-tienda { padding: 40px 30px; } } .jrv-em-caja-tienda > a { display: block; width: 100%; /* width_mobile 100% */ margin-block-start: 10px; /* _margin 10 0 0 0 */ line-height: 0; } @media (min-width: 768px) { .jrv-em-caja-tienda > a { width: 80%; } /* width 80% */ } .jrv-em-caja-tienda img, .jrv-em-caja-tienda picture { display: block; width: 100%; height: auto; } .jrv-em-caja-tienda__nombre { margin: 10px 0 0; color: var(--jrv-em-hondo); } /* La caja de «...Próximamente publicaremos más herramientas» no lleva imagen, y en el original SOLO existe en la versión de móvil. Se conserva así, y queda anotado para el dueño, porque parece un descuido y no una decisión. Y SE ESCONDE AQUÍ, NO CON .jrv-solo-movil, y esto está medido: la utilidad compartida hace `display: none` a partir de 768px con la misma especificidad que mi `.jrv-em-caja-tienda { display: flex }`, y como esta hoja se declara DESPUÉS de componentes.css, ganaba el flex y la caja aparecía en escritorio. Se vio en la captura a 1440px. */ .jrv-em-caja-tienda--proximamente { justify-content: center; } @media (min-width: 768px) { .jrv-em-caja-tienda--proximamente { display: none; } } .jrv-em-caja-tienda__nombre--gris { color: var(--jrv-em-gris); font-size: 1rem; font-weight: 400; } /* ========================================================================== 7 · PIEZAS 95-117 · «Trabaja de manera Inteligente» ========================================================================== Alto mínimo de 180px con `box-sizing: border-box`: con el content-box que hereda el tema, los 90px de relleno de arriba y los 60 de abajo se sumarían al alto mínimo. Los tres `divider` #E5E5F0 de dentro (piezas 102, 107 y 112) son el borde superior del bloque que va debajo, con sus 40px de aire. ========================================================================== */ .jrv-em-trio { box-sizing: border-box; min-height: 180px; padding: 60px 20px; background-color: var(--jrv-p-blanco); text-align: center; } @media (min-width: 768px) { .jrv-em-trio { padding: 90px 20px 60px; } } .jrv-em-trio__pack { width: 87%; /* width_mobile */ margin: 0 auto 10px; } @media (min-width: 768px) { .jrv-em-trio__pack { width: 56%; } /* width 56% */ } /* --- Los tres productos ------------------------------------------------ Dos columnas 40/60 en pantalla ancha; en móvil se apilan en el ORDEN DEL DOCUMENTO, que es el del original: en el bloque de ActiveCampaign el texto va primero y la imagen después, y así se ve hoy en el móvil. */ .jrv-em-producto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin-block-start: 20px; text-align: left; } @media (min-width: 768px) { /* LAS PROPORCIONES VAN EN `fr` Y NO EN PORCENTAJES, y esto está medido: con `40% 60%` más un hueco de 30px las dos columnas sumaban 100% + 30px y se salían del contenedor —30px de desborde horizontal, visible a 768px con `document.scrollWidth` (778) distinto de `window.innerWidth` (768)—. Las fracciones reparten lo que queda DESPUÉS del hueco, así que la proporción 40/60 del original se respeta y no hay desborde. */ .jrv-em-producto { grid-template-columns: 2fr 3fr; gap: 30px; margin-block-start: 40px; } /* El bloque de ActiveCampaign lleva la columna de texto (60%) a la izquierda y la imagen (40%) a la derecha. */ .jrv-em-producto--invertido { grid-template-columns: 3fr 2fr; } } /* Los divider de las piezas 107 y 112, con sus 40px de aire a cada lado. */ .jrv-em-producto--linea { border-block-start: 1px solid var(--jrv-em-linea); padding-block-start: 60px; /* gap_mobile: 60px */ margin-block-start: 30px; } @media (min-width: 768px) { .jrv-em-producto--linea { padding-block-start: 40px; margin-block-start: 40px; } } .jrv-em-producto__media { display: block; width: 80%; /* width_mobile 80%, centrada */ margin-inline: auto; line-height: 0; } .jrv-em-producto__media img, .jrv-em-producto__media picture { display: block; width: 100%; height: auto; } @media (min-width: 768px) { .jrv-em-producto__media { width: 100%; } } .jrv-em-producto__titulo { margin: 0; color: var(--jrv-em-hondo); text-align: center; } @media (min-width: 768px) { .jrv-em-producto__titulo { text-align: left; } .jrv-em-producto__titulo--derecha { text-align: right; } } .jrv-em-producto__texto { margin: 10px 0 0; color: var(--jrv-p-carbon); } .jrv-em-producto__accion { margin: 18px 0 0; } @media (min-width: 768px) { .jrv-em-producto__accion--derecha { text-align: right; } } /* --- PIEZAS 112-117 · «El Tridente Perfecto» ---------------------------- */ .jrv-em-tridente { text-align: left; } .jrv-em-tridente__titulo { margin-block-start: 40px; } @media (min-width: 768px) { .jrv-em-tridente__titulo { margin-block-start: 60px; } /* _margin 60 0 0 0 */ } .jrv-em-tridente__entrada { margin: 14px 0 0; color: var(--jrv-em-cita); } /* El `icon-list` del original. La marca de cada punto se dibuja con CSS y no con un icono de Font Awesome: de esta conversión depende poder desinstalar los cuatro plugins de Elementor con sus 443 KB de fuentes de iconos, así que meter aquí una fuente de iconos sería tirar por la ventana el motivo del trabajo. El `divider: yes` del widget es la línea entre puntos, y los 40px de `space_between` (30 en móvil) son el aire a cada lado de esa línea. */ .jrv-em-tridente__lista { margin: 24px 0 0; padding: 0; color: var(--jrv-p-cielo); list-style: none; } /* La marca va EN LA LÍNEA DEL TEXTO, con sangría francesa, y no colocada en absoluto: con `position: absolute; top: 0` la marca se pegaba al borde de arriba del relleno del punto —los 20px del hueco entre puntos— y se quedaba flotando por encima de su propia frase. Se vio en la captura a 1440px. Así la marca acompaña a la primera línea y las líneas siguientes se alinean con el texto, no con la marca. */ .jrv-em-tridente__lista li { padding-inline-start: 1.9em; text-indent: -1.9em; line-height: 1.5; } .jrv-em-tridente__lista li::before { content: "✓"; display: inline-block; width: 1.9em; color: var(--jrv-p-cielo); font-weight: 700; text-indent: 0; } .jrv-em-tridente__lista li + li { border-block-start: 1px solid var(--jrv-em-linea); margin-block-start: 15px; padding-block-start: 15px; } @media (min-width: 768px) { .jrv-em-tridente__lista li + li { margin-block-start: 20px; padding-block-start: 20px; } } /* PIEZA 116: el `divider` #A1C7FF de 3px al 62%, otra vez con `::before` porque es más corto que el bloque. PIEZA 117: la imagen al 50% (100% en móvil). */ .jrv-em-tridente__cierre { width: 100%; margin: 40px auto 0; } /* La imagen va al 50% del contenedor (100% en móvil) DENTRO del bloque de la línea, que ocupa el ancho entero: si el 50% se le pusiera al bloque, la línea —que es su ::before— se quedaría en la mitad de lo que mide en el original. */ .jrv-em-tridente__imagen { width: 100%; margin-inline: auto; } @media (min-width: 768px) { .jrv-em-tridente__imagen { width: 50%; } } /* ========================================================================== 8 · PIEZAS 118-125 · EL CIERRE Y LA MASTERCLASS ========================================================================== Dos secciones con el mismo fondo #FCF8E9 y rellenos distintos, como en el original. La pieza 120 —el `divider` #A1C7FF al 62%— es el `::before` del bloque de dos columnas. ========================================================================== */ .jrv-em-cierre-titulo { padding: 60px 20px 0; background-color: var(--jrv-em-crema); text-align: center; } @media (min-width: 768px) { .jrv-em-cierre-titulo { padding: 90px 20px 30px; } } .jrv-em-cierre { padding: 20px 20px 60px; background-color: var(--jrv-em-crema); text-align: center; } @media (min-width: 768px) { .jrv-em-cierre { padding: 0 20px 90px; } } /* El párrafo 119 va centrado también en móvil (align_mobile: center). */ .jrv-em-cierre .jrv-em-parrafo { text-align: center; } .jrv-em-masterclass { /* El galón de la pieza 120 va sobre crema, no sobre blanco. */ --jrv-em-fondo-galon: var(--jrv-em-crema); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; max-width: var(--jrv-em-ancho-mc); margin: 20px auto 0; text-align: left; } @media (min-width: 768px) { /* Las dos columnas del original: 54,321% y 45,679%, en `fr` por lo mismo que en .jrv-em-producto — con porcentajes el hueco de 30px se salía del contenedor. */ .jrv-em-masterclass { grid-template-columns: 54.321fr 45.679fr; gap: 30px; margin-block-start: 30px; } } .jrv-em-masterclass__media { display: block; width: 100%; line-height: 0; } .jrv-em-masterclass__media img, .jrv-em-masterclass__media picture { display: block; width: 100%; height: auto; } /* La pastilla azul marino de «MasterClass GRATUITA»: el fondo va en el , como las otras dos pastillas de la página. */ .jrv-em-masterclass__pastilla { margin: 0 0 10px; text-align: center; } @media (min-width: 768px) { .jrv-em-masterclass__pastilla { text-align: left; } } .jrv-em-masterclass__pastilla span { display: inline-block; padding: 12px 18px; background-color: var(--jrv-p-marino); color: var(--jrv-p-blanco); font-weight: 700; } .jrv-em-masterclass__titulo { margin: 0; color: var(--jrv-em-tinta-mc); } .jrv-em-masterclass__llamada { margin: 12px 0 0; padding-inline: 15px; /* _padding 0 15 0 15 */ color: var(--jrv-em-tinta-mc); text-align: center; } .jrv-em-masterclass__accion { margin: 16px 0 0; text-align: center; } /* ========================================================================== 9 · PIEZAS 126-127 · EL PIE ========================================================================== Fondo #00325C y, encima, la FILIGRANA de la marca: en el original es una capa superpuesta de la sección (`background_overlay_image`), no un fondo normal —el símbolo jrv-simbolo-stroke-blue.svg centrado, al 50% de ancho y con opacidad 0,4—. Se pinta con un `::before` para que el logotipo y el aviso de derechos queden por encima, y la dirección del archivo llega en la variable --jrv-em-sello desde la plantilla, porque una hoja de estilos no puede conocer la carpeta de subidas del sitio. ========================================================================== */ .jrv-em-pie { position: relative; isolation: isolate; padding: 20px 15px; background-color: var(--jrv-p-marino); background-origin: border-box; color: var(--jrv-p-blanco); text-align: center; } @media (min-width: 768px) { .jrv-em-pie { padding: 30px 20px; } } .jrv-em-pie::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--jrv-em-sello); background-position: center center; background-repeat: no-repeat; background-size: 341px auto; /* background_overlay_bg_width_mobile */ opacity: .4; } @media (min-width: 768px) { .jrv-em-pie::before { background-size: 50% auto; } /* bg_width 50% */ } .jrv-em-pie__logo { display: inline-block; width: 90%; /* width_mobile */ max-width: 333px; height: auto; } @media (min-width: 768px) { .jrv-em-pie__logo { width: 35%; } /* width 35% de 950px */ } .jrv-em-pie__derechos { margin: 0; color: var(--jrv-p-blanco); font-size: .9375rem; line-height: 1.5; }