/* ========================================================================== /embudos-ventas-inmobiliario/ · PÁGINA 932 · CURSO SPI-PRO ========================================================================== Hoja de la página de venta del curso SPI-PRO. Va DESPUÉS de componentes.css, de donde salen `.jrv-contenedor`, `.jrv-seccion`, `.jrv-media`, `.jrv-video16`, `.jrv-cta--amarillo` y las utilidades `.jrv-solo-movil` / `.jrv-solo-ancha`. Aquí solo va lo que es de esta página. TIPOGRAFÍA: casi no se declara. La marca la pone GP Premium a través de componentes.css (cuerpo Montserrat 16/1.4, h1 Roboto Slab 35 negrita, h2 Montserrat 25 peso 300, texto #3a3a3a, enlaces #1e73be) y el dueño ha dicho que va a rediseñar, así que perseguir los tamaños de Elementor sería trabajo tirado. Donde sí hay un tamaño es porque el texto lo pide de verdad —las tres cifras, el precio, la banda amarilla— y va en unidades relativas. COLORES: los de las secciones salen TAL CUAL del guion y del `_elementor_data`. Los que no estaban en el guion venían de la paleta global de Elementor y se han resuelto contra `custom_colors` del kit (ver la cabecera de page-932.php). NADA DE ESTO TOCA componentes.css: hay varias conversiones en paralelo. ========================================================================== */ /* ========================================================================== 0 · SOLTAR EL CONTENEDOR DEL TEMA · OBLIGATORIO, Y HA FALLADO TRES VECES ========================================================================== Sin este bloque la página sale metida en una columna de 900px con franjas grises a los lados y franjas blancas encima de la cabecera y bajo el pie, porque GeneratePress le pone `max-width` a #page y 40px (30 en móvil) de relleno vertical a #content. EL SELECTOR ES `page-id-932`, NUNCA `page-template-…`: la clase de plantilla no aparece en el cuando la plantilla la coge la jerarquía por su nombre de archivo, que es justo cómo llega aquí. ========================================================================== */ body.page-id-932 #page, body.page-id-932 .site.grid-container { max-width: none; margin-inline: 0; width: 100%; } body.page-id-932 #content, body.page-id-932 .site-content { padding: 0; margin-block-end: 0; } body.page-id-932 #primary, body.page-id-932 #main { width: 100%; max-width: none; } /* ========================================================================== 1 · LOS COLORES Y LAS MEDIDAS DE ESTA PÁGINA ========================================================================== Todos con el prefijo --jrv-ev- para no chocar con --jrv-p- (componentes.css) ni con --jrv-azul / --jrv-amarillo / --jrv-tinta / --jrv-suave / --jrv-linea, que son del blog y viven en style.css con OTROS valores. Pisar cualquiera de esos cambia de color el blog entero. ========================================================================== */ body.page-id-932 { /* --- Del guion ---------------------------------------------------------- */ --jrv-ev-petroleo: #004361; /* el azul de la marca en esta página: cabecera, bandas de sección y pastillas de módulo */ --jrv-ev-oro: #FFEA00; /* las dos bandas amarillas del hero */ --jrv-ev-teja: #922100; /* «El Curso Definitivo sobre» y los nombres de módulo del detalle */ --jrv-ev-granate: #B80000; /* «¿Qué recibes al comprar el Curso…?» */ --jrv-ev-carbon: #303030; /* los dos cierres y las dos citas */ --jrv-ev-crema: #FFF9C4; /* fondo de los bloques #01 y #03 del detalle */ --jrv-ev-mostaza: #FDD835; /* fondo del bloque #02 del detalle */ --jrv-ev-verde-a: #61ce70; /* arranque del degradado de WhatsApp */ --jrv-ev-verde-b: #23a455; /* cierre del degradado, y el visto de las parejas */ --jrv-ev-limon: #ffff00; /* titulares amarillos sobre azul y sobre carbón */ --jrv-ev-topacio: #FFDD59; /* «Embudos de Ventas Inmobiliarios» y el fondo de los títulos de bono TOP */ --jrv-ev-humo: #666666; /* «Incluido GRATIS con el Curso», «Único Pago» */ --jrv-ev-plomo: #54595f; /* el aviso de derechos del pie */ --jrv-ev-texto: #333333; /* el cuerpo de los testimonios */ --jrv-ev-cielo: #2980b9; /* «JESÚS RICO VARGAS» y las cuatro líneas */ --jrv-ev-hielo: #6ec1e4; /* los rótulos de las tres cifras */ /* --- Resueltos contra `custom_colors` del kit de Elementor -------------- */ --jrv-ev-ladrillo: #C23616; /* 3a2ee2d · «MÓDULO #18/19/20» y el precio tachado */ --jrv-ev-esmeralda: #23A455; /* 5662c397 · los cuatro precios de los bonos */ /* --- Medidas ------------------------------------------------------------ */ --jrv-ev-ancho-caja: 500px; /* «ancho 500px» de las cuatro cajas de pago */ --jrv-ev-radio: 10px; /* el radio de las cajas blancas del original */ --jrv-ev-aire: 60px; /* «relleno 60px», el más repetido */ } /* El ancho estrecho: en el original son 33 secciones con «ancho 900px». */ body.page-id-932 .jrv-contenedor--estrecho { max-width: 900px; } /* ========================================================================== 2 · LOS ICONOS EN SVG ========================================================================== Sustituyen a las 128 apariciones de Font Awesome. Heredan el color del texto (`stroke: currentColor` en el SVG), así que un icono se recolorea cambiando el color de su lista y no hay una regla por icono. ========================================================================== */ body.page-id-932 .jrv-ev-icono { flex: 0 0 auto; width: 1.15em; height: 1.15em; /* Alinea el icono con la primera línea del texto en vez de con su base. */ margin-block-start: .12em; } body.page-id-932 .jrv-ev-icono--grande { width: 3rem; height: 3rem; } body.page-id-932 .jrv-ev-icono--corazon { width: 1em; height: 1em; color: rgb(228 59 44); /* el mismo rojo del `fa-heart` del original */ vertical-align: -.12em; } /* --- Las listas con icono (los 50 `icon-list` del original) --------------- */ body.page-id-932 .jrv-ev-lista { margin: 1em 0 0; padding: 0; list-style: none; } body.page-id-932 .jrv-ev-lista li { display: flex; gap: .6em; margin-block-end: .9em; /* «space_between: 15px» del original */ text-align: start; } body.page-id-932 .jrv-ev-lista li:last-child { margin-block-end: 0; } /* Los ocho puntos de «¿Qué recibes?» y del resumen: visto verde, texto oscuro. */ body.page-id-932 .jrv-ev-lista--recibes { color: #363636; } body.page-id-932 .jrv-ev-lista--recibes .jrv-ev-icono { color: #43BC37; } /* Las dos columnas de «¿Para quién SÍ / NO?». */ body.page-id-932 .jrv-ev-lista--si .jrv-ev-icono { color: var(--jrv-ev-verde-b); } body.page-id-932 .jrv-ev-lista--no .jrv-ev-icono { color: var(--jrv-ev-ladrillo); } /* Las de dentro de las fichas de módulo: más apretadas y centradas con la ficha. */ body.page-id-932 .jrv-ev-lista--ficha { margin-block-start: .5em; font-size: .95em; } body.page-id-932 .jrv-ev-lista--ficha li { margin-block-end: .4em; } body.page-id-932 .jrv-ev-lista--ficha .jrv-ev-icono { color: var(--jrv-ev-cielo); } body.page-id-932 .jrv-ev-lista--modulo .jrv-ev-icono { color: var(--jrv-ev-verde-b); } /* ========================================================================== 3 · PIEZA 1 · LA CABECERA ========================================================================== `box-sizing: border-box` aquí y en todas las cajas con relleno de esta hoja: el tema hereda `content-box` y el relleno se sumaría al alto. Es la trampa número tres del protocolo. ========================================================================== */ body.page-id-932 .jrv-ev-cabecera { box-sizing: border-box; padding-block: 20px; background-color: var(--jrv-ev-petroleo); text-align: center; } body.page-id-932 .jrv-ev-cabecera__logo { width: 30%; /* «ancho 30%» del guion */ min-width: 150px; margin-inline: auto; } /* ========================================================================== 4 · PIEZAS 2-8 · EL HERO ========================================================================== */ body.page-id-932 .jrv-ev-hero { box-sizing: border-box; padding-block-start: 40px; /* «relleno 40px» del guion */ text-align: center; } body.page-id-932 .jrv-ev-hero__logo { max-width: 420px; margin-inline: auto; } body.page-id-932 .jrv-ev-hero__antetitulo { margin: .8em 0 0; color: var(--jrv-ev-teja); font-weight: 700; } body.page-id-932 .jrv-ev-hero__titulo { /* El ÚNICO

de la página. El tamaño es lo único que se sale de la escala de la marca en toda la hoja, y con motivo: es el nombre del producto y el mayor elemento visible de la página. Relativo, no fijo. / margin: .2em 0; color: var(--jrv-ev-petroleo); font-size: clamp(1.7rem, 1.1rem + 3.2vw, 3.2rem); line-height: 1.1; text-wrap: balance; } body.page-id-932 .jrv-ev-herosub { margin: 0 0 1.4em; color: var(--jrv-ev-texto); } body.page-id-932 .jrv-ev-heroiconos { padding-block: 20px; } body.page-id-932 .jrv-ev-heroiconos .jrv-media { width: 44%; / «ancho 44%» del guion / min-width: 220px; margin-inline: auto; } / --- Las dos bandas amarillas (piezas 6/7 y 31/32) ----------------------- / body.page-id-932 .jrv-ev-banda-oro { box-sizing: border-box; margin: 0; padding: 1em 20px; background-color: var(--jrv-ev-oro); color: #000; font-weight: 700; text-align: center; text-transform: uppercase; text-wrap: balance; } / El «10» va más grande, y ese es el único sitio de la página donde el original cambia de tamaño entre móvil y ancha (21px y 36px): aquí es un factor relativo, así que escala con lo que ponga la marca. / body.page-id-932 .jrv-ev-diez { font-size: 1.35em; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-diez { font-size: 1.7em; } } / ========================================================================== 5 · PIEZAS 9-20 y 48-56 · LOS SEIS TESTIMONIOS CON VÍDEO ========================================================================== Dos columnas 40/60 desde 768px, apiladas por debajo. El `lado` invierte el orden en pantalla ancha sin tocar el orden del HTML: el texto va siempre primero en el código, que es el orden en que hay que leerlo y el que usa un lector de pantalla. ========================================================================== / body.page-id-932 .jrv-ev-testimonios { padding-block: 20px; } body.page-id-932 .jrv-ev-testimonio { box-sizing: border-box; display: grid; gap: 20px; padding: 30px 20px; / «relleno 30px» del guion / background-color: #fff; } body.page-id-932 .jrv-ev-testimonio--caso { margin-block-start: 40px; / «margen sup 40px» de las piezas 51 y 54 / border-radius: var(--jrv-ev-radio); } body.page-id-932 .jrv-ev-testimonio:first-child { margin-block-start: 0; } body.page-id-932 .jrv-ev-testimoniotitulo { margin: 0 0 .5em; color: #000; text-wrap: balance; } body.page-id-932 .jrv-ev-testimoniocuerpo { margin: 0; color: var(--jrv-ev-texto); } / El resaltado en teja de las cifras de los testimonios (el `` del original, aquí una clase). / body.page-id-932 .jrv-ev-marca { color: var(--jrv-ev-teja); } / Los `divider` [SOLO MÓVIL] de las piezas 11, 16 y 19: una línea, no un elemento. Solo por debajo de 768px, que es su visibilidad en el original. / body.page-id-932 .jrv-ev-testimonio--con-linea + .jrv-ev-testimonio--con-linea, body.page-id-932 .jrv-ev-testimonio--con-linea:last-child { border-block-start: 2.5px solid var(--jrv-ev-cielo); } @media (min-width: 768px) { body.page-id-932 .jrv-ev-testimonio { grid-template-columns: 40fr 60fr; align-items: center; padding: 30px; } / Texto a la izquierda: el orden del HTML ya vale. Alineado a la derecha, como el original (`alineado=right`). / body.page-id-932 .jrv-ev-testimonio--izquierda .jrv-ev-testimoniotexto { text-align: end; } / Texto a la derecha: se cambia solo la COLUMNA, no el HTML. / body.page-id-932 .jrv-ev-testimonio--derecha { grid-template-columns: 60fr 40fr; } body.page-id-932 .jrv-ev-testimonio--derecha .jrv-ev-testimoniotexto { grid-column: 2; grid-row: 1; } body.page-id-932 .jrv-ev-testimonio--derecha .jrv-ev-testimoniovideo { grid-column: 1; grid-row: 1; } / En pantalla ancha las tres líneas de móvil desaparecen, como en el original. / body.page-id-932 .jrv-ev-testimonio--con-linea + .jrv-ev-testimonio--con-linea, body.page-id-932 .jrv-ev-testimonio--con-linea:last-child { border-block-start: 0; } } / ========================================================================== 6 · PIEZAS 21-28 · «¿CÓMO ES POSIBLE ESOS RESULTADOS?» ========================================================================== / body.page-id-932 .jrv-ev-porque { box-sizing: border-box; padding-block: var(--jrv-ev-aire) 20px; padding-inline: 20px; text-align: center; } / La pieza 21 es un `divider` [SOLO ANCHA]: la línea de arriba de esta caja, y solo a partir de 768px. / @media (min-width: 768px) { body.page-id-932 .jrv-ev-porque .jrv-contenedor { padding-block-start: var(--jrv-ev-aire); border-block-start: 2.5px solid var(--jrv-ev-cielo); } } body.page-id-932 .jrv-ev-porquetitulo { margin: 0 0 1em; color: #000; } body.page-id-932 .jrv-ev-porquetexto { margin: 0 0 1.6em; color: #000; } body.page-id-932 .jrv-ev-porquereclamo { margin: 0 0 1em; color: #000; font-weight: 700; } body.page-id-932 .jrv-ev-porquevideo { margin-block-end: 2em; } body.page-id-932 .jrv-ev-porquerecibes { margin: 0 0 .6em; color: var(--jrv-ev-granate); text-wrap: balance; } / La lista de ocho puntos va alineada a la izquierda aunque la sección esté centrada: ocho párrafos largos centrados son ilegibles. / body.page-id-932 .jrv-ev-porque .jrv-ev-lista { text-align: start; } / ========================================================================== 7 · PIEZAS 29-45 · MOCKUP, BUNDLES Y LA PRIMERA CAJA DE PAGO ========================================================================== / body.page-id-932 .jrv-ev-bundle { box-sizing: border-box; padding-block-end: var(--jrv-ev-aire); text-align: center; } body.page-id-932 .jrv-ev-bundle .jrv-contenedor { padding-inline: 20px; } body.page-id-932 .jrv-ev-banda-oro--horas { margin-block: 20px; } body.page-id-932 .jrv-ev-bundlecaja { margin-block-start: 20px; } body.page-id-932 .jrv-ev-bundletitulo { margin: 1.2em 0; color: #000; text-wrap: balance; } body.page-id-932 .jrv-ev-bundleincluye { margin: 1em 0; color: #000; font-weight: 700; } body.page-id-932 .jrv-ev-bundleincluye-detalle { font-weight: 400; } / --- Las tres anclas vivas ------------------------------------------------ #vimeo-cta-pagar, #formas-de-pago-spi-pro y #preguntasfrecuentes son destinos de enlace desde los anuncios y los correos. El `scroll-margin` deja aire arriba para que el destino no quede pegado al borde de la pantalla. / body.page-id-932 .jrv-ev-ancla, body.page-id-932 #formas-de-pago-spi-pro { scroll-margin-block-start: 20px; } / --- LA CAJA DE PAGO (las cuatro son esta) ------------------------------- / body.page-id-932 .jrv-ev-pago { box-sizing: border-box; max-width: var(--jrv-ev-ancho-caja); / «ancho 500px» del guion / margin: 20px auto 0; text-align: center; } body.page-id-932 .jrv-ev-pagorotulo { margin: 0 0 .4em; color: #000; font-size: 1.35em; font-weight: 700; } body.page-id-932 .jrv-ev-pagoentradilla { margin: 0 0 1em; color: #000; } body.page-id-932 .jrv-ev-pagomarca { max-width: 200px; margin-inline: auto; } body.page-id-932 .jrv-ev-pagoboton { margin: 1em 0; } / El botón «PAGAR $2,500 USD». La geometría base es la de `.jrv-cta--amarillo` de componentes.css; aquí solo lo que es de esta página: el borde naranja de 4px, la letra grande en cursiva y el ancho completo (`align: justify` en el original). / body.page-id-932 .jrv-ev-pagocta { display: block; border-width: 4px; border-color: #ffaf40; font-size: clamp(1.15rem, .9rem + 1.4vw, 2rem); font-style: italic; } body.page-id-932 .jrv-ev-pagomedios { max-width: 320px; margin: 0 auto 1em; } body.page-id-932 .jrv-ev-pagoaviso { margin: 0 0 1em; color: #000; font-size: .9em; } body.page-id-932 .jrv-ev-pagosello { max-width: 220px; margin-inline: auto; } / ⚠️ LA CORRECCIÓN DE LEGIBILIDAD, Y SE QUITA BORRANDO ESTE BLOQUE. Las dos cajas de pago que van dentro de los cierres tienen fondo #303030 y en el original sus tres rótulos están en #000000: contraste 1,4:1, o sea que hoy no se leen. El dueño ha dicho que el color le da igual y que lo que no se toca es el TEXTO, así que aquí pasan a blanco. El texto es el mismo, letra por letra. / body.page-id-932 .jrv-ev-pago--oscura .jrv-ev-pagorotulo, body.page-id-932 .jrv-ev-pago--oscura .jrv-ev-pagoentradilla, body.page-id-932 .jrv-ev-pago--oscura .jrv-ev-pagoaviso { color: #fff; } / ========================================================================== 8 · PIEZAS 46-56 · TESTIMONIOS SOBRE LA METODOLOGÍA ========================================================================== / body.page-id-932 .jrv-ev-metodologia { box-sizing: border-box; padding-block: 90px 40px; / «relleno 90px» y «relleno 40px» del guion / padding-inline: 20px; background-color: var(--jrv-ev-petroleo); text-align: center; } body.page-id-932 .jrv-ev-metodologiatitulo { margin: 0; color: #fff; text-wrap: balance; } body.page-id-932 .jrv-ev-metodologiaeco { margin: 0 0 40px; color: var(--jrv-ev-topacio); font-size: 1.3em; font-weight: 700; } / ========================================================================== 9 · PIEZAS 57-59, 349-351 y 399-401 · LAS TRES BANDAS DE WHATSAPP ========================================================================== El degradado no traía ángulo en el original, así que es el de fábrica de Elementor: 180º, verde claro arriba y verde oscuro abajo. ========================================================================== / body.page-id-932 .jrv-ev-wa { box-sizing: border-box; padding-block: 40px; / «relleno 40px» / padding-inline: 20px; background-image: linear-gradient(180deg, var(--jrv-ev-verde-a) 0%, var(--jrv-ev-verde-b) 100%); text-align: center; } body.page-id-932 .jrv-ev-wa--amplia { padding-block: var(--jrv-ev-aire); } body.page-id-932 .jrv-ev-wacaja { / La estructura 34 del original es 12,5% / 75% / 12,5%: en la práctica una caja centrada al 75%. / width: 75%; max-width: 700px; margin-inline: auto; } body.page-id-932 .jrv-ev-watitulo { margin: 0 0 .6em; color: #fff; font-size: 1.25em; font-weight: 700; text-wrap: balance; } body.page-id-932 .jrv-ev-waicono { display: block; width: 72px; margin: 0 auto .4em; } body.page-id-932 .jrv-ev-watelefono { margin: 0; } / EL TELÉFONO ES UN ENLACE, y no estaba en el guion: el campo `link` del `heading` de Elementor. Son tres enlaces de captación de los que la página vive. Se subraya al enfocar y al pasar el ratón para que se vea que lo es. / body.page-id-932 .jrv-ev-watelefono a { color: var(--jrv-ev-limon); font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); text-decoration: none; } body.page-id-932 .jrv-ev-watelefono a:hover, body.page-id-932 .jrv-ev-watelefono a:focus-visible { color: var(--jrv-ev-limon); text-decoration: underline; } / ========================================================================== 10 · PIEZAS 60-75 · RESULTADOS, VENTAJAS Y LAS CUATRO PAREJAS ========================================================================== / body.page-id-932 .jrv-ev-resultados { box-sizing: border-box; padding-block: var(--jrv-ev-aire); padding-inline: 20px; } body.page-id-932 .jrv-ev-resultadostitulo { margin: 0 0 1.2em; color: #000; text-align: center; text-wrap: balance; } / Las tres ventajas (los `icon-box`): una columna en móvil, tres desde 768px. / body.page-id-932 .jrv-ev-ventajas { display: grid; gap: 30px; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-ventajas { grid-template-columns: repeat(3, 1fr); } } body.page-id-932 .jrv-ev-ventaja { text-align: center; } body.page-id-932 .jrv-ev-ventaja__icono { width: 3rem; height: 3rem; color: var(--jrv-ev-verde-b); / «primary_color: #23a455» del original / } body.page-id-932 .jrv-ev-ventajatitulo { margin: .5em 0 .4em; color: var(--jrv-ev-cielo); font-weight: 700; text-transform: uppercase; text-wrap: balance; } body.page-id-932 .jrv-ev-ventajatexto { margin: 0; color: #000; } / --- Las bandas azules de sección (piezas 64-65, 76-80, 83-84, 372-373) --- Tres de las cuatro traen «margen sup 20px» en el guion y la del resumen no: el margen va en la base y la del resumen lo quita. / body.page-id-932 .jrv-ev-banda-azul { box-sizing: border-box; margin-block-start: 20px; padding-block: var(--jrv-ev-aire); padding-inline: 20px; background-color: var(--jrv-ev-petroleo); text-align: center; } body.page-id-932 .jrv-ev-banda-azul--resumen { margin-block-start: 0; } body.page-id-932 .jrv-ev-banda-azultitulo { margin: 0; color: var(--jrv-ev-limon); text-wrap: balance; } body.page-id-932 .jrv-ev-banda-azulsub { margin: .8em 0 0; color: #fff; } body.page-id-932 .jrv-ev-banda-azuleco { margin: .3em 0 0; color: var(--jrv-ev-limon); font-size: 1.3em; font-weight: 700; } body.page-id-932 .jrv-ev-incluye-titulo { box-sizing: border-box; margin-block-start: 20px; / «margen sup 20px» del guion / padding-block: var(--jrv-ev-aire); padding-inline: 20px; background-color: var(--jrv-ev-petroleo); text-align: center; } body.page-id-932 .jrv-ev-incluye-tituloh { margin: 0; color: #fff; } body.page-id-932 .jrv-ev-incluye-tituloeco { margin: .3em 0 0; color: var(--jrv-ev-limon); font-size: 1.3em; font-weight: 700; } / --- Las tres cifras (los `counter`) ------------------------------------- / body.page-id-932 .jrv-ev-cifras { display: grid; gap: 30px; margin-block-start: 2em; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-cifras { grid-template-columns: repeat(3, 1fr); } } body.page-id-932 .jrv-ev-cifranumero { / 60px en el original, 50 en móvil: aquí relativo entre esos dos extremos. / margin: 0; color: #fff; font-size: clamp(3rem, 2.4rem + 1.6vw, 3.75rem); font-weight: 700; line-height: 1; } body.page-id-932 .jrv-ev-cifrarotulo { margin: .4em 0 0; color: var(--jrv-ev-hielo); line-height: 1.2; } / --- El mockup grande y su margen negativo (pieza 67) -------------------- El -20px va en ESTA CAJA, que es la que en Elementor era la sección, y NO en la imagen: en el hijo se colapsa y arrastra la sección entera (617px de hueco en la portada). Con `position: relative` y `z-index`, o se pinta debajo. / body.page-id-932 .jrv-ev-programa { box-sizing: border-box; padding-block-end: var(--jrv-ev-aire); padding-inline: 20px; } body.page-id-932 .jrv-ev-programatitulo { margin: 40px 0 1em; / «margen sup 40px» del guion / color: #000; text-align: center; text-wrap: balance; } body.page-id-932 .jrv-ev-programamockup { position: relative; z-index: 1; margin-block-start: -20px; } / --- Las cuatro parejas «de esto» → «a esto» ----------------------------- / body.page-id-932 .jrv-ev-parejas { display: grid; gap: 20px; margin-block-start: 2em; } body.page-id-932 .jrv-ev-pareja { display: grid; gap: 12px; padding-block: 20px; / «relleno 20px» del guion / } @media (min-width: 768px) { body.page-id-932 .jrv-ev-pareja { grid-template-columns: 1fr 1fr; gap: 30px; } } body.page-id-932 .jrv-ev-parejade, body.page-id-932 .jrv-ev-parejaa { display: flex; gap: .6em; margin: 0; } body.page-id-932 .jrv-ev-parejade .jrv-ev-icono { color: var(--jrv-ev-ladrillo); } body.page-id-932 .jrv-ev-parejaa .jrv-ev-icono { color: var(--jrv-ev-verde-b); } / ========================================================================== 11 · PIEZAS 81-82 y 406-407 · LOS LOGOTIPOS DE CLIENTES ========================================================================== / body.page-id-932 .jrv-ev-clientes { box-sizing: border-box; padding-block: 40px; padding-inline: 20px; } / ========================================================================== 12 · PIEZAS 85-210 · LOS CUATRO BLOQUES DEL RESUMEN ========================================================================== Cada bloque es una banda azul con una caja blanca dentro. En el original la cabecera del bloque y la rejilla de fichas son DOS secciones blancas pegadas sin hueco entre ellas: aquí es UNA caja con las dos partes dentro, que en pantalla es lo mismo y se lee de un golpe. Y LA REJILLA ES UNA SOLA. En el original los bloques #02 y #03 están dos veces, una con cuatro columnas para móvil y otra con tres para pantalla ancha, con los mismos módulos: eso es lo que resuelve el `auto-fit` de aquí sin duplicar nada. ========================================================================== / body.page-id-932 .jrv-ev-bloque { box-sizing: border-box; padding-block: 20px; padding-inline: 20px; background-color: var(--jrv-ev-petroleo); } body.page-id-932 .jrv-ev-bloquecaja { box-sizing: border-box; padding: 30px 20px; border-radius: var(--jrv-ev-radio); background-color: #fff; } body.page-id-932 .jrv-ev-bloquecabecera { margin-block-end: 30px; } body.page-id-932 .jrv-ev-bloquetitulo { margin: 0 0 .8em; color: #000; text-align: center; text-wrap: balance; } / --- LAS SEIS BARRAS DE PROGRESO ---------------------------------------- Decorativas: en el original llevan `display_percentage: hide`, o sea que el número no se escribe dentro. Aquí el porcentaje va en el `aria-label` del `role="img"`, así que un lector de pantalla dice «25% del Curso» donde antes no decía nada. El ancho es una clase por valor y NO hay JavaScript: la barra de Elementor se animaba al entrar en pantalla y esta no, que es lo único que se pierde. / body.page-id-932 .jrv-ev-barra { overflow: hidden; height: 24px; border-radius: 12px; background-color: #eaeaea; } body.page-id-932 .jrv-ev-barra__relleno { display: block; height: 100%; border-radius: 12px; / «progress_type: success» del original, que en Elementor es el verde. / background-color: var(--jrv-ev-verde-b); } body.page-id-932 .jrv-ev-barrarelleno--25 { width: 25%; } body.page-id-932 .jrv-ev-barrarelleno--50 { width: 50%; } body.page-id-932 .jrv-ev-barrarelleno--75 { width: 75%; } body.page-id-932 .jrv-ev-barrarelleno--100 { width: 100%; } / --- Las fichas de módulo ------------------------------------------------ / body.page-id-932 .jrv-ev-fichas { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { body.page-id-932 .jrv-ev-fichas { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } body.page-id-932 .jrv-ev-ficha { text-align: center; } body.page-id-932 .jrv-ev-fichaimagen { width: 65%; / «ancho 65%» del guion / margin-inline: auto; } body.page-id-932 .jrv-ev-fichatitulo { margin: .6em 0 0; color: var(--jrv-ev-ladrillo); font-weight: 700; } / Dentro de una ficha centrada, la lista se centra como bloque pero el texto sigue alineado a la izquierda dentro de cada punto. / body.page-id-932 .jrv-ev-ficha .jrv-ev-lista { display: inline-block; text-align: start; } / --- Los tres bonos «ADICIONALES TOP» del bloque #04 -------------------- / body.page-id-932 .jrv-ev-bonos { display: grid; gap: 30px; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-bonos { grid-template-columns: repeat(3, 1fr); } } body.page-id-932 .jrv-ev-bono { text-align: center; } body.page-id-932 .jrv-ev-bono__imagen { border: 2px solid var(--jrv-ev-cielo); / «image_border_color» = 9db5baf / border-radius: 6px; } body.page-id-932 .jrv-ev-bono__rotulo { margin: .7em 0 .3em; color: var(--jrv-ev-ladrillo); font-weight: 700; text-transform: uppercase; } / El título del bono va SOBRE el amarillo del kit (5cca6da0 = #FFDD59): en el original es el `_background_color` del propio encabezado, o sea una pastilla. / body.page-id-932 .jrv-ev-bonotitulo { display: inline-block; margin: 0 0 .5em; padding: 10px; background-color: var(--jrv-ev-topacio); color: #000; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } body.page-id-932 .jrv-ev-bonovalorado { margin: 0; color: #000; } body.page-id-932 .jrv-ev-bonoprecio { margin: 0; color: var(--jrv-ev-esmeralda); / 5662c397 del kit / font-size: 1.7em; font-weight: 700; line-height: 1.2; } body.page-id-932 .jrv-ev-bonogratis { margin: .2em 0 0; color: var(--jrv-ev-humo); } body.page-id-932 .jrv-ev-bono .jrv-ev-lista { display: inline-block; text-align: start; } / ========================================================================== 13 · PIEZAS 211-219 · LOS TRES ICONOS Y LA ENTRADA AL DETALLE ========================================================================== / body.page-id-932 .jrv-ev-detalle-entrada { box-sizing: border-box; padding-block: 90px; / «relleno 90px» del guion / padding-inline: 20px; text-align: center; } body.page-id-932 .jrv-ev-tres-iconos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 600px; / la estructura 50 del original deja los dos extremos vacíos: en la práctica, centrado / margin: 0 auto 2.5em; } body.page-id-932 .jrv-ev-tres-iconosuno { color: var(--jrv-ev-cielo); } body.page-id-932 .jrv-ev-tres-iconosrotulo { margin: .5em 0 0; color: var(--jrv-ev-humo); text-transform: uppercase; } body.page-id-932 .jrv-ev-detalle-entradatitulo { margin: 0 0 1em; color: #000; text-wrap: balance; } body.page-id-932 .jrv-ev-detalle-entradatexto { margin: 0 0 1em; color: #000; } / ========================================================================== 14 · PIEZAS 220-336 · EL DETALLE DE LOS 17 MÓDULOS ========================================================================== Tres bloques de color con 17 fichas dentro. Cada ficha es la imagen de la caja a la izquierda (25%) y el texto a la derecha (75%), apilados en móvil. ========================================================================== / body.page-id-932 .jrv-ev-detalle { box-sizing: border-box; padding-block: var(--jrv-ev-aire) 20px; padding-inline: 20px; } body.page-id-932 .jrv-ev-detalle--crema { background-color: var(--jrv-ev-crema); } body.page-id-932 .jrv-ev-detalle--oro { background-color: var(--jrv-ev-mostaza); } body.page-id-932 .jrv-ev-detallebanda { margin: 0 0 1.5em; color: #000; text-align: center; text-wrap: balance; } body.page-id-932 .jrv-ev-modulo { box-sizing: border-box; display: grid; gap: 20px; margin-block-end: 20px; padding: 20px; / «relleno 20px» del guion / border-radius: var(--jrv-ev-radio); background-color: #fff; } body.page-id-932 .jrv-ev-moduloimagen { width: 75%; / «width_mobile: 75%» del original / margin-inline: auto; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-modulo { grid-template-columns: 25fr 75fr; align-items: start; gap: 24px; } body.page-id-932 .jrv-ev-moduloimagen { width: 100%; } } / La pastilla «MÓDULO N»: en el original es un `` dentro del encabezado. Azul en los ocho módulos del programa, teja en los nueve de bonos. / body.page-id-932 .jrv-ev-modulopastilla { margin: 0 0 .5em; } body.page-id-932 .jrv-ev-pastilla { display: inline-block; padding: 5px 40px; / el mismo relleno del original / color: #fff; font-weight: 700; } body.page-id-932 .jrv-ev-pastilla--programa { background-color: var(--jrv-ev-petroleo); } body.page-id-932 .jrv-ev-pastilla--bonus { background-color: var(--jrv-ev-teja); } body.page-id-932 .jrv-ev-modulonombre { margin: 0 0 .8em; color: var(--jrv-ev-teja); text-transform: uppercase; } / Las 62 lecciones. El rótulo («LECCIÓN 4.2:») va en su propia línea, que es el `
` que el guion se comía: sin él se lee «LECCIÓN 4.2:Elaborar el Plan». / body.page-id-932 .jrv-ev-leccion { margin: 0 0 .8em; color: #000; } body.page-id-932 .jrv-ev-leccionrotulo { display: block; } body.page-id-932 .jrv-ev-leccion--bonus { margin-block-start: 1em; } body.page-id-932 .jrv-ev-moduloextra-imagen { max-width: 260px; margin-block-start: 1em; } / ========================================================================== 15 · PIEZAS 337-345 y 390-398 · LOS DOS CIERRES «¡APÚNTAME AHORA!» ========================================================================== / body.page-id-932 .jrv-ev-cierre { box-sizing: border-box; padding-block: var(--jrv-ev-aire); padding-inline: 20px; background-color: var(--jrv-ev-carbon); text-align: center; } body.page-id-932 .jrv-ev-cierretitulo { margin: 0; color: var(--jrv-ev-limon); } body.page-id-932 .jrv-ev-cierresub { margin: .8em 0 0; color: #fff; } / ========================================================================== 16 · PIEZAS 346-348 · EL TESTIMONIO DE MARÍA ALEJANDRA RODRÍGUEZ ========================================================================== / body.page-id-932 .jrv-ev-cita { box-sizing: border-box; padding-block: 40px; padding-inline: 20px; background-color: #fff; } body.page-id-932 .jrv-ev-citacaja { / La estructura 34 del original es 16/66/16: una caja centrada. / max-width: 660px; margin-inline: auto; padding: 0; border: 0; text-align: end; } body.page-id-932 .jrv-ev-citatexto { margin: 0 0 .8em; color: #000; } body.page-id-932 .jrv-ev-citafirma { margin: 0; } body.page-id-932 .jrv-ev-citanombre { margin: 0; color: var(--jrv-ev-teja); } body.page-id-932 .jrv-ev-citacargo { margin: 0; color: #000; } / ========================================================================== 17 · PIEZAS 352-362 · «¿PARA QUIÉN SÍ / NO?» Y LAS DOS CITAS ========================================================================== / body.page-id-932 .jrv-ev-quien { box-sizing: border-box; padding-block: var(--jrv-ev-aire); padding-inline: 20px; } body.page-id-932 .jrv-ev-quientitulo { margin: 0 0 1em; color: var(--jrv-ev-teja); text-align: center; text-wrap: balance; } body.page-id-932 .jrv-ev-quientexto { margin: 0 0 2em; color: #000; text-align: center; } body.page-id-932 .jrv-ev-quienpregunta { margin: 0 0 1em; color: #000; text-align: center; text-wrap: balance; } body.page-id-932 .jrv-ev-quienintro { max-width: 700px; / la estructura 30 del original: 15/70/15 / margin: 0 auto 2.5em; color: #000; text-align: center; } body.page-id-932 .jrv-ev-quiencolumnas { display: grid; gap: 40px; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-quiencolumnas { grid-template-columns: 1fr 1fr; } } body.page-id-932 .jrv-ev-quiensubtitulo { margin: 0 0 .6em; color: #000; } body.page-id-932 .jrv-ev-quienentradilla { margin: 0; color: #000; } / Las dos citas sobre #303030 (piezas 362 y 384). / body.page-id-932 .jrv-ev-imagina { box-sizing: border-box; padding-block: var(--jrv-ev-aire); padding-inline: 20px; background-color: var(--jrv-ev-carbon); text-align: center; } body.page-id-932 .jrv-ev-imaginatexto { max-width: 700px; margin-inline: auto; color: #fff; font-size: 1.15em; } body.page-id-932 .jrv-ev-imaginarotulo { color: #ffff99; } / ========================================================================== 18 · PIEZAS 363-384 · FORMAS DE PAGO Y EL RESUMEN ========================================================================== / body.page-id-932 .jrv-ev-formas { box-sizing: border-box; padding-block: var(--jrv-ev-aire); padding-inline: 20px; background-color: #fff; text-align: center; } body.page-id-932 .jrv-ev-formastitulo { margin: 0 0 .6em; color: #000; } body.page-id-932 .jrv-ev-formastexto { margin: 0; color: #000; } body.page-id-932 .jrv-ev-resumen { box-sizing: border-box; padding-block: 40px; padding-inline: 20px; background-color: #fff; } body.page-id-932 .jrv-ev-resumenrejilla { display: grid; gap: 40px; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-resumenrejilla { grid-template-columns: 1fr 1fr; align-items: center; } } body.page-id-932 .jrv-ev-resumenprecio { text-align: center; } body.page-id-932 .jrv-ev-resumenprecio .jrv-media { margin-block-end: 1em; } body.page-id-932 .jrv-ev-resumenrotulo { margin: 0; color: #000; } body.page-id-932 .jrv-ev-resumentachado { margin: 0; color: var(--jrv-ev-ladrillo); font-size: 1.7em; line-height: 1.2; text-decoration: line-through; } body.page-id-932 .jrv-ev-resumenpago { margin: 0; color: var(--jrv-ev-esmeralda); font-size: 2.2em; font-weight: 700; line-height: 1.2; } body.page-id-932 .jrv-ev-resumenunico { margin: 0; color: var(--jrv-ev-humo); } / El «Valorado por $397 USD» que va dentro de los puntos del resumen. / body.page-id-932 .jrv-ev-valor { color: var(--jrv-p-rojo); } body.page-id-932 .jrv-ev-mockup-final { box-sizing: border-box; padding-inline: 20px; } / ========================================================================== 19 · PIEZAS 385-389 · LAS DOCE PREGUNTAS FRECUENTES ========================================================================== El `toggle` de Elementor era un acordeón con JavaScript. Aquí son doce
: hacen lo mismo de serie, funcionan aunque el JavaScript falle y ya son navegables con el teclado sin que haya que programar nada. El triángulo lo dibuja un pseudoelemento —era un `fa-caret-left` a la derecha— y gira al abrirse. `list-style: none` y `::-webkit-details-marker` quitan el triángulo del navegador, que si no saldrían dos. La pieza 389 es un `spacer` de 20px [SOLO MÓVIL]: el relleno de abajo de esta sección por debajo de 768px, no un elemento. ========================================================================== / body.page-id-932 .jrv-ev-faq { box-sizing: border-box; padding-block: var(--jrv-ev-aire) calc(var(--jrv-ev-aire) + 20px); padding-inline: 20px; background-color: #fff; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-faq { padding-block-end: var(--jrv-ev-aire); } } body.page-id-932 .jrv-ev-faqtitulo { margin: 0 0 .6em; color: #000; text-align: center; text-wrap: balance; } body.page-id-932 .jrv-ev-faqtexto { margin: 0 0 2em; color: #000; text-align: center; } / La estructura 34 del original (16/66/16): una columna centrada. / body.page-id-932 .jrv-ev-faqlista { max-width: 660px; margin-inline: auto; } body.page-id-932 .jrv-ev-faquno { border-block-end: 1px solid #e0e0e0; } body.page-id-932 .jrv-ev-faquno:first-child { border-block-start: 1px solid #e0e0e0; } body.page-id-932 .jrv-ev-faqpregunta { display: flex; gap: 1em; align-items: center; justify-content: space-between; padding: 20px; / «title_padding: 20px» del original / color: var(--jrv-ev-cielo); / «title_color: #2980b9» / cursor: pointer; font-weight: 500; list-style: none; text-transform: uppercase; / «text_transform: uppercase» / } body.page-id-932 .jrv-ev-faqpregunta::-webkit-details-marker { display: none; } body.page-id-932 .jrv-ev-faqpregunta::after { / El `fa-caret-left` a la derecha, dibujado con bordes: cero peticiones y cero fuentes de iconos. Gira 90º al abrirse. / content: ""; flex: 0 0 auto; width: 0; height: 0; border-block: .35em solid transparent; border-inline-end: 0; border-inline-start: .45em solid #000; / «icon_color: #000000» / transition: transform .18s ease; } body.page-id-932 .jrv-ev-faquno[open] .jrv-ev-faqpregunta::after { transform: rotate(-90deg); } body.page-id-932 .jrv-ev-faqpregunta:focus-visible { outline: 3px solid var(--jrv-p-cielo); outline-offset: -3px; } body.page-id-932 .jrv-ev-faqrespuesta { padding: 0 20px 20px; / «content_padding: 0 20 20 20» del original / color: #000; / «content_color: #000000» / } body.page-id-932 .jrv-ev-faqrespuesta p:last-child { margin-block-end: 0; } body.page-id-932 .jrv-ev-faqrespuesta ul { margin-block-end: 1em; } / ========================================================================== 20 · PIEZAS 402-408 · EL AUTOR Y EL AVISO DE DATOS ========================================================================== / body.page-id-932 .jrv-ev-autor { box-sizing: border-box; padding-block: 40px; padding-inline: 20px; } body.page-id-932 .jrv-ev-autorrejilla { display: grid; gap: 24px; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-autorrejilla { grid-template-columns: 33fr 66fr; / la estructura 21 del original / align-items: center; } } / El retrato: en móvil, a ancho completo saldría gigante y empujaría el texto media pantalla abajo. En pantalla ancha manda la columna de la rejilla. / body.page-id-932 .jrv-ev-autorretrato { max-width: 320px; margin-inline: auto; } @media (min-width: 768px) { body.page-id-932 .jrv-ev-autorretrato { max-width: none; } } body.page-id-932 .jrv-ev-autorrotulo { margin: 0; color: #000; } body.page-id-932 .jrv-ev-autornombre { margin: .2em 0 .6em; color: var(--jrv-ev-cielo); font-size: 1.5em; font-weight: 700; } body.page-id-932 .jrv-ev-autorbio { margin: 0; color: #000; } body.page-id-932 .jrv-ev-privacidad { box-sizing: border-box; padding-block: 20px 40px; padding-inline: 20px; } body.page-id-932 .jrv-ev-privacidadtexto { margin: 0; font-size: .82em; line-height: 1.5; } / ========================================================================== 21 · PIEZAS 409-410 · EL PIE ========================================================================== / body.page-id-932 .jrv-ev-pie { box-sizing: border-box; padding-block: 40px; / «margen sup 40px» del guion, aquí relleno para que no colapse con la sección de arriba / padding-inline: 20px; text-align: center; } body.page-id-932 .jrv-ev-pielogo { width: 30%; / «ancho 30%» del guion / min-width: 150px; margin-inline: auto; } body.page-id-932 .jrv-ev-piederechos { margin: 1em 0 0; color: var(--jrv-ev-plomo); } / ========================================================================== 22 · LAS CINCO CLASES QUE ESTÁN EN EL HTML Y NO TIENEN REGLA AQUÍ ========================================================================== Están a propósito, no olvidadas. Son hijos de una rejilla o de un flex y todo lo que necesitan lo pone el padre; llevan nombre para que el HTML se lea y para tener el gancho el día del rediseño: .jrv-ev-autortexto la columna de texto de la ficha del autor .jrv-ev-cifra cada una de las tres cifras .jrv-ev-modulocuerpo la columna derecha de las 17 fichas de módulo .jrv-ev-quiencolumna cada lado de «¿Para quién SÍ / NO?» .jrv-ev-resumenpuntos la columna de los ocho puntos del resumen Si alguna deja de estar en el HTML, esta lista es lo que hay que revisar. Y si aparece una clase en el CSS que no está en el HTML, es CSS muerto: eso sí es un fallo. ========================================================================== / / ========================================================================== 23 · MOVIMIENTO REDUCIDO ========================================================================== Lo único que se mueve en toda la página es el triángulo de las preguntas frecuentes. Si el sistema pide menos movimiento, no se mueve. ========================================================================== */ @media (prefers-reduced-motion: reduce) { body.page-id-932 .jrv-ev-faq__pregunta::after { transition: none; } }