/* ========================================================================== LOS TRES VÍDEOS DE SPI-PRO · lo propio de estas páginas ========================================================================== Una sola hoja para tres páginas porque son la misma página con tres contenidos: 820 /spi-pro/gracias-video-01/ 21 piezas 841 /spi-pro/video-02-trafico/ 21 piezas visibles (22 en el JSON) 845 /spi-pro/campana-de-trafico/ 26 piezas El HTML lo pinta inc/plantilla-spi-video.php, compartido por las tres. LOS BLOQUES COMPARTIDOS VIENEN DE componentes.css, QUE SE DECLARA ANTES, y aquí no se reescribe ninguno: .jrv-media envoltorio de imagen sin espacio fantasma .jrv-video16 el marco 16:9 de los tres vídeos .jrv-cta la geometría del botón (aquí solo se ajusta el cuerpo, el relleno y el color) .jrv-solo-movil / .jrv-solo-ancha el índice plano contra el índice en HTML --jrv-p-tipo-titulos la pila de Montserrat LO QUE NO SE USA DE componentes.css, Y POR QUÉ: .jrv-contenedor son 1100px y el contenedor de estas páginas es de 1140px (K) .jrv-seccion son 60px de aire y relleno lateral de 20px; aquí las secciones llevan 40px de aire y NADA de relleno lateral: el contenido se separa del borde con los 10px del hueco de columna .jrv-seccion__titulo esa escala (60px, peso 400) es la de la portada; los titulares de aquí son 25 y 35px con los pesos del tema .jrv-cta--amarillo es #FFFF00; estos botones son #ffaf00 y #f5ad43 NO se usan --jrv-azul, --jrv-amarillo, --jrv-tinta, --jrv-suave, --jrv-linea ni .jrv-boton: existen en style.css con los valores del blog. Todo lo de aquí lleva el prefijo .jrv-spivideo- y --jrv-spivideo-, que no existía en ningún archivo del tema (comprobado con grep antes de escribir: 0 coincidencias). ⚠️ NO PONER `display` EN LAS DOS SECCIONES DEL ÍNDICE. Llevan .jrv-solo-movil y .jrv-solo-ancha, que conmutan con `display`; una regla de esta hoja sobre el mismo elemento tiene la misma especificidad (0,1,0) y GANA por orden de carga, así que las dos versiones del índice se verían a la vez. El `display:flex` va en la lista de dentro, nunca en la sección. ───────────────────────────────────────────────────────────────────────────── DE DÓNDE SALE CADA NÚMERO. Ninguno está estimado. Tres orígenes: (E) la hoja que Elementor publica para cada página —post-820.css, post-841.css, post-845.css—, que es lo que el navegador aplica hoy; (K) el ajuste global del kit, post-79342.css: contenedor 1140px, 20px de hueco entre piezas (`.elementor-widget:not(:last-child){margin-block-end:20px}`) y —esto es importante— PESO 600 en todo `heading` que no declare el suyo: `.elementor-widget-heading .elementor-heading-title{font-weight:var( --e-global-typography-primary-font-weight )}`, y ese global vale 600. Con especificidad (0,2,0) le gana al `h2{font-weight:300}` del tema (0,0,1); (T) la tipografía del tema, que rellena los TAMAÑOS que Elementor no declara: h1 35px, h2 25px, cuerpo 16px con línea 1,4; por debajo de 768px h1 baja a 25px y h2 a 20px. EL PESO 600 SE ENCONTRÓ COMPARANDO CAPTURAS, no leyendo. La primera versión de esta hoja puso peso 300 en el galón y en la pregunta del paso —el del `h2` del tema— y peso 700 en el

—el `bold` del tema—. Al poner la captura al lado de la de producción a 1440px se veía que los tres salían más finos o más gordos de lo publicado: el que manda es el 600 del kit. Es la regla 3 del protocolo, y es exactamente el tipo de fallo que contar etiquetas no encuentra. Los tamaños (T) se escriben aquí como cifras y no se dejan al tema a propósito: al pasar un `heading` de Elementor a

se pierde la herencia del h2, y si el dueño cambiara la tipografía del blog en el personalizador estas tres páginas se moverían sin que nadie las tocara. EL HUECO DE 20px DEL KIT (K) ESTÁ SUMADO, NO COPIADO. El original descuenta parte de ese hueco con márgenes negativos en cinco piezas; aquí van ya sumados (20−10=10 en el índice, 20−20=0 en la flecha de 820 y 841, 20−15=5 en el teléfono de 845), así que en esta hoja no hay ni un margen negativo. Es el arreglo 4 del protocolo: en un hijo se colapsan. ========================================================================== */ /* ========================================================================== 0 · SOLTAR EL CONTENEDOR DEL TEMA · LO PRIMERO DE TODO ========================================================================== EL SELECTOR ES `page-id-NNN` Y NO `page-template-…`. WordPress solo añade page-template-{archivo} cuando la plantilla se elige en el desplegable del editor; una plantilla que coge la jerarquía por nombre de archivo deja el body diciendo page-template-default. Sin este bloque la página sale metida en una columna de 900px (`body .grid-container{max-width:900px}` del personalizador) 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 tres identificadores van juntos porque las tres necesitan lo mismo. Los identificadores no cambian nunca; los slugs sí podrían. ========================================================================== */ body.page-id-820 #page, body.page-id-841 #page, body.page-id-845 #page, body.page-id-820 .site.grid-container, body.page-id-841 .site.grid-container, body.page-id-845 .site.grid-container { max-width: none; margin-inline: 0; width: 100%; } body.page-id-820 #content, body.page-id-841 #content, body.page-id-845 #content, body.page-id-820 .site-content, body.page-id-841 .site-content, body.page-id-845 .site-content { padding: 0; margin-block-end: 0; } body.page-id-820 #primary, body.page-id-841 #primary, body.page-id-845 #primary, body.page-id-820 #main, body.page-id-841 #main, body.page-id-845 #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 tres queden inmunes si algún día alguien le devuelve relleno lateral al envoltorio. */ body.page-id-820 #page, body.page-id-841 #page, body.page-id-845 #page, body.page-id-820 .site.grid-container, body.page-id-841 .site.grid-container, body.page-id-845 .site.grid-container { box-sizing: border-box; padding-inline: 0; } /* El fondo del sitio es #ecf0f1 (gris) y estas tres páginas lo llevan BLANCO: es lo que declara la hoja de Elementor (`body.elementor-page-820{background-color:#fff}`). Sin esto asomaría gris por los lados y bajo el pie. */ body.page-id-820, body.page-id-841, body.page-id-845 { background-color: #fff; } body.page-id-820 #page, body.page-id-841 #page, body.page-id-845 #page { background-color: #fff; } /* ========================================================================== 1 · LO QUE CAMBIA DE UNA PÁGINA A OTRA ========================================================================== No hay clases modificadoras para las diferencias entre las tres: hay variables bajo `body.page-id-NNN`. El selector por identificador ya hacía falta arriba, así que las siete diferencias reales no cuestan ni una clase más. ========================================================================== */ body.page-id-820, body.page-id-841, body.page-id-845 { /* Colores del original. Ninguno está en la paleta de componentes.css, así que se declaran aquí con prefijo propio (--jrv-spivideo-), como pide el encargo. */ --jrv-spivideo-banda: #004361; /* (E) fondo de la banda del logotipo */ --jrv-spivideo-filo: #2980b9; /* (E) borde del vídeo, del índice y del marco */ --jrv-spivideo-apagado: #7a7a7a; /* (E) borde y rótulo de lo que aún no toca */ --jrv-spivideo-verde: #23a455; /* (E) pastilla del galón, palomitas, teléfono */ --jrv-spivideo-cta-fondo: #ffaf00; /* (E) botón de 820 y 841 */ --jrv-spivideo-cta-filo: #ff9100; /* (E) su borde de 4px */ /* Cuerpos que cambian de página a página o de ancho a ancho. Los de aquí son los de 820 en escritorio. Los tres primeros no cambian entre páginas pero SÍ entre anchos, y con dos cortes distintos (ver el aviso de los 768px más abajo), así que también son variables. */ --jrv-spivideo-titulo-video: 35px; /* (T) h1 del tema · el titular amarillo */ --jrv-spivideo-galon: 25px; /* (T) h2 del tema · la pastilla verde */ --jrv-spivideo-wa-numero: 25px; /* (T) h2 del tema · el teléfono de 845 */ --jrv-spivideo-paso-titulo: 25px; /* (T) h2 del tema */ --jrv-spivideo-paso-titulo-linea: 1; /* (E) Elementor pone line-height:1 a todo heading */ --jrv-spivideo-paso-texto: 16px; /* (T) cuerpo del tema */ --jrv-spivideo-paso-texto-linea: 1.2; /* (E) `line-height:1.2em` */ --jrv-spivideo-cta-peso: 500; /* (K) el kit da peso 500 a los botones */ --jrv-spivideo-cta-cuerpo: 20px; /* (E) tamaño «xl» de Elementor: 20px, 25px/50px */ /* La flecha roja: pegada al botón porque el original le descuenta el hueco del kit. */ --jrv-spivideo-flecha-aire: 0px; /* Montserrat la carga el tema. Roboto y Open Sans las cargaba Elementor y en la página nativa ya no están, así que van delante por fidelidad y Montserrat detrás como respaldo: si el dueño no las añade, se pinta en Montserrat, que es la letra del resto de la página. Está anotado en el informe. */ --jrv-spivideo-tipo-cta: "Roboto", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --jrv-spivideo-tipo-lista: "Open Sans", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* 841 · el párrafo del paso va a 20px y no a 16px (E) */ body.page-id-841 { --jrv-spivideo-paso-texto: 20px; } /* 845 · titular de 30px con línea 1,3em, párrafo con línea 1,5em, botón en negrita y de otro color, y la flecha con su hueco normal porque aquí no lleva margen negativo: debajo hay más piezas. (E) */ body.page-id-845 { --jrv-spivideo-paso-titulo: 30px; --jrv-spivideo-paso-titulo-linea: 1.3; --jrv-spivideo-paso-texto-linea: 1.5; --jrv-spivideo-cta-fondo: #f5ad43; --jrv-spivideo-cta-filo: #f49200; --jrv-spivideo-cta-peso: 700; --jrv-spivideo-flecha-aire: 20px; } /* ────────────────────────────────────────────────────────────────────────────── ⚠️ HAY DOS CORTES DE MÓVIL Y NO UNO, Y NO ES UN DESCUIDO: 768 Y 767. La tipografía móvil del TEMA corta en `max-width: 768px` —768 incluido— y la que declara ELEMENTOR por pieza corta en `max-width: 767px`. O sea que a 768px justos —que es el iPad en vertical, no un ancho de laboratorio— manda el tema y no Elementor: el titular amarillo se pinta a 25px (el h1 móvil del tema) y no a 35 ni a 20. ESTO SE VIO COMPARANDO CAPTURAS A 768px, no leyendo las hojas. La primera versión bajaba todo a la vez en 767 y a 768 justos el titular salía a 35px cuando la web publicada lo pinta a 25: cuatro líneas contra tres, y toda la sección desplazada. Los dos bloques de abajo están separados por eso, y el orden importa —767 después de 768— porque para un ancho de 700px se cumplen los dos y gana el último. ────────────────────────────────────────────────────────────────────────────── */ /* Los tamaños que pone el TEMA: corte en 768 inclusive. */ @media (max-width: 768px) { body.page-id-820, body.page-id-841, body.page-id-845 { --jrv-spivideo-titulo-video: 25px; /* h1 móvil del tema */ --jrv-spivideo-galon: 20px; /* h2 móvil del tema */ --jrv-spivideo-wa-numero: 20px; /* h2 móvil del tema */ } /* En 820 y 841 la pregunta del paso no tiene tamaño propio, así que también la pone el tema. En 845 sí lo tiene (30px, sin media query), y ese gana en especificidad al h2 del tema: por eso 845 NO está en esta línea. */ body.page-id-820, body.page-id-841 { --jrv-spivideo-paso-titulo: 20px; } } /* Los tamaños que declara ELEMENTOR pieza por pieza para el móvil: corte en 767. */ @media (max-width: 767px) { body.page-id-820, body.page-id-841, body.page-id-845 { --jrv-spivideo-titulo-video: 20px; } body.page-id-841 { --jrv-spivideo-paso-texto: 18px; } body.page-id-845 { --jrv-spivideo-paso-titulo: 24px; --jrv-spivideo-cta-cuerpo: 16px; } } /* ========================================================================== 2 · EL ANDAMIAJE: EL CONTENEDOR Y LA COLUMNA CENTRAL ========================================================================== El contenedor de estas páginas es de 1140px (K) y NO de 1100px, así que no puede usarse .jrv-contenedor de componentes.css: son 40px de diferencia repartidos en todas las secciones. Se declara aquí. Y dentro, la columna central. En el original cada sección son tres columnas —12,544% · 75% · 12,451%— con las dos de los lados vacías. No se pintan dos columnas vacías: 75% centrado da la misma geometría (los dos lados salen a 12,5%) con un elemento menos. El relleno de 10px es el hueco de columna de Elementor (`.elementor-column-gap-default`), que es el que separa el contenido del borde de la pantalla en el móvil. ========================================================================== */ .jrv-spivideo-ancho { width: 100%; max-width: 1140px; margin-inline: auto; } .jrv-spivideo-centro { box-sizing: border-box; /* arreglo 3: el tema hereda border-box, pero aquí hay anchura en % y relleno, y se escribe para no depender de que nadie lo cambie */ width: 100%; padding: 10px; } @media (min-width: 768px) { .jrv-spivideo-centro { width: 75%; margin-inline: auto; } } /* ========================================================================== 3 · LA CABECERA · pieza 1 ========================================================================== Banda de color a sangre, sin relleno propio: el aire son los 10px del hueco de columna, arriba y abajo. Alto resultante 86px (10 + 66 + 10). ========================================================================== */ .jrv-spivideo-cabecera { background-color: var(--jrv-spivideo-banda); } .jrv-spivideo-cabecera__interior { box-sizing: border-box; max-width: 1140px; margin-inline: auto; padding: 10px; } /* 300px es el ancho con el que producción sirve este logotipo (el recorte -300x66). El archivo mide 550px, así que en pantallas de doble densidad el `srcset` puede servir el grande y se ve más fino sin pedir otro archivo. */ .jrv-spivideo-cabecera__logo { max-width: 300px; margin-inline: auto; } /* ========================================================================== 4 · EL ÍNDICE DE LOS TRES VÍDEOS · piezas 2 a 11 ========================================================================== Dos versiones con punto de corte en 768px, que es el del original (`elementor-hidden-desktop` + `elementor-hidden-tablet` en una, `elementor-hidden-phone` en la otra) y el de .jrv-solo-movil / .jrv-solo-ancha. ========================================================================== */ /* --- Por debajo de 768px: la imagen plana --------------------------------- El PNG mide 848px y producción lo sirve a 675 (los datos de la biblioteca dicen 675×220). Se le pone ese tope para que en una pantalla de 767px no salga más grande que en la web publicada. */ .jrv-spivideo-tira { border-bottom: 4px solid var(--jrv-spivideo-filo); } .jrv-spivideo-tira__interior { box-sizing: border-box; padding: 10px; } .jrv-spivideo-tira__imagen { max-width: 675px; margin-inline: auto; } /* --- Desde 768px: el mismo índice en HTML --------------------------------- */ .jrv-spivideo-indice { border-bottom: 7px solid var(--jrv-spivideo-filo); } /* Los porcentajes son los del original. Las dos columnas vacías de los lados (12,456% cada una) no se pintan: con `justify-content:center` el sobrante se reparte solo y sale exactamente lo mismo. */ .jrv-spivideo-indice__lista { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; } .jrv-spivideo-indice__item { box-sizing: border-box; width: 25%; padding: 10px; text-align: center; } .jrv-spivideo-indice__item:nth-child(2) { width: 25.088%; } /* El borde de 7px es lo que distingue el vídeo de esta página (azul) de los otros dos (gris). El color va en el borde, no en un realce añadido: así está en el original y así se entiende sin color, porque el rótulo del que aún no toca además se apaga. */ .jrv-spivideo-indice__miniatura { border: 7px solid var(--jrv-spivideo-apagado); } .jrv-spivideo-indice__miniatura--actual { border-color: var(--jrv-spivideo-filo); } .jrv-spivideo-indice__rotulo { margin: 10px 0 0; color: #000; font-family: var(--jrv-p-tipo-titulos); font-size: 18px; font-weight: 700; line-height: 1; } .jrv-spivideo-indice__rotulo--pendiente { color: var(--jrv-spivideo-apagado); } /* 14px con línea 1 es lo que hay publicado (Elementor pone line-height:1 a todos los `heading` y aquí no lo cambia). Es un renglón apretado para tres o cuatro líneas seguidas; está anotado en el informe por si el dueño quiere aflojarlo, porque hacerlo por mi cuenta subiría el alto de la franja. */ .jrv-spivideo-indice__resumen { margin: 10px 0 0; color: #000; font-family: var(--jrv-p-tipo-titulos); font-size: 14px; font-weight: 400; line-height: 1; } /* ========================================================================== 5 · EL VÍDEO · piezas 12 a 14 ========================================================================== La foto va de fondo a `cover` y encima una capa negra al 70%: son los valores del original (`background_overlay_color` #000000, `opacity` 0.7). La capa es un ::before de verdad y no un degradado falso, para que se lea igual que en la hoja de Elementor; y el contenido va con `position:relative` y `z-index:1`, o se pintaría DEBAJO de la capa (arreglo 4 del protocolo). `background-origin: border-box` lo pide la lista del protocolo. El original deja el valor de fábrica (padding-box), que con `cover` solo cambia la escala de la foto en los 40px de relleno; debajo de una capa negra al 70% no se distingue, y así queda cubierta la sección entera. ========================================================================== */ .jrv-spivideo-video { position: relative; box-sizing: border-box; padding-block: 40px; background-color: #000; background-position: center center; background-repeat: no-repeat; background-size: cover; background-origin: border-box; } .jrv-spivideo-video::before { content: ""; position: absolute; inset: 0; background-color: #000; opacity: .7; } .jrv-spivideo-video > * { position: relative; z-index: 1; } /* La pastilla verde del galón. Los 250px de margen a cada lado son del original (50px por debajo de 768px): no es un ancho máximo, es margen, así que la pastilla se ESTRECHA cuando la pantalla se estrecha. ⚠️ ESTO TRAE UN DEFECTO DE LA PÁGINA PUBLICADA, y se reproduce tal cual a propósito. Entre 768px y unos 1000px de pantalla los 250px siguen puestos —el original solo los baja a 50px por debajo de 768px—, y la pastilla se queda en 56px de ancho a 768px: el texto sale a un carácter por línea. Está anotado en el informe con el arreglo de una línea (subir el corte de los 50px a 1024px, que es donde acaba la tableta en Elementor). No se ha hecho aquí porque cambia cómo se ve la página en tableta y eso lo decide el dueño. */ .jrv-spivideo-video__galon { margin: 0 250px; padding-block: 10px; background-color: var(--jrv-spivideo-verde); color: #fff; font-family: var(--jrv-p-tipo-titulos); font-size: var(--jrv-spivideo-galon); /* (T) el h2 del tema: 25px, 20px en móvil */ font-weight: 600; /* (K) el peso del kit, no el 300 del h2 */ line-height: 1; text-align: center; } /* El

de la página. Amarillo con sombra negra sobre la foto: es lo que da el contraste, porque #ffff00 sobre la capa negra al 70% pasa de sobra. */ .jrv-spivideo-video__titulo { margin: 20px 0 0; color: #ffff00; font-family: var(--jrv-p-tipo-titulos); font-size: var(--jrv-spivideo-titulo-video); /* (T) h1 del tema: 35 · 25 · 20px */ font-weight: 600; /* (K) el peso del kit, no el `bold` del h1 */ line-height: 1; text-align: center; text-shadow: 2px 2px 10px #000; } /* El borde y la sombra van en el marco y NO en .jrv-video16: la proporción 16:9 de componentes.css se calcula sobre el ancho del elemento, y un borde de 7px dentro se lo comería. Así el vídeo mide lo mismo que en producción. */ .jrv-spivideo-video__marco { margin-top: 20px; border: 7px solid var(--jrv-spivideo-filo); box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%); } /* Los 50px de margen de la pastilla son de Elementor, así que su corte es 767 (los dos tamaños de letra van por variable, cada uno con el suyo). */ @media (max-width: 767px) { .jrv-spivideo-video__galon { margin: 0 50px; } } /* ========================================================================== 6 · EL PASO SIGUIENTE · piezas 15 a 18 (y 15 a 24 en 845) ========================================================================== */ .jrv-spivideo-paso { box-sizing: border-box; padding-block: 40px; } .jrv-spivideo-paso__titulo { margin: 0; color: #000; font-family: var(--jrv-p-tipo-titulos); font-size: var(--jrv-spivideo-paso-titulo); font-weight: 600; /* (K) el peso del kit, no el 300 del h2 */ line-height: var(--jrv-spivideo-paso-titulo-linea); text-align: center; } .jrv-spivideo-paso__texto { margin: 20px 0 0; color: #000; font-family: var(--jrv-p-tipo-titulos); font-size: var(--jrv-spivideo-paso-texto); font-weight: 400; line-height: var(--jrv-spivideo-paso-texto-linea); text-align: center; } .jrv-spivideo-paso__accion { margin: 20px 0 0; text-align: center; } /* --- El botón ------------------------------------------------------------- Se apoya en .jrv-cta de componentes.css, que ya trae la geometría (inline-block, radio de 100px, transición y el anillo de foco visible). Aquí se ajusta lo que estas páginas tienen medido y es distinto del botón de la portada: relleno 25px/50px y cuerpo 20px el tamaño «xl» de Elementor borde de 4px .jrv-cta trae 2px sin sombra .jrv-cta trae una y el original no tiene línea 1 la del botón de Elementor Las cuatro declaraciones ganan por orden de carga: esta hoja se declara después de componentes.css, así que también pisan el bloque de .jrv-cta que hay dentro de @media (min-width:768px). Por eso el cuerpo y el relleno se escriben aquí una sola vez y no hacen falta dos veces. */ .jrv-spivideo-cta { padding: 25px 50px; border-width: 4px; box-shadow: none; background-color: var(--jrv-spivideo-cta-fondo); border-color: var(--jrv-spivideo-cta-filo); color: #000; font-family: var(--jrv-spivideo-tipo-cta); font-size: var(--jrv-spivideo-cta-cuerpo); font-weight: var(--jrv-spivideo-cta-peso); line-height: 1; } /* EL ORIGINAL NO DECLARA ESTADO :hover —Elementor deja la transición puesta y nada que transicionar—, así que el botón no responde al ratón. Se añade el mínimo: el tono del propio borde. El estado en reposo, que es el que se compara contra la captura de producción, no cambia. */ .jrv-spivideo-cta:hover, .jrv-spivideo-cta:focus-visible { background-color: var(--jrv-spivideo-cta-filo); color: #000; } /* --- La flecha roja ------------------------------------------------------ 275px es su tamaño natural y así se pinta en producción. El aire de arriba es la variable: 0 en 820 y 841 (el original descuenta el hueco de 20px del kit con un margen de -20px) y 20px en 845. */ .jrv-spivideo-flecha { margin-top: var(--jrv-spivideo-flecha-aire); } .jrv-spivideo-flecha__imagen { max-width: 275px; margin-inline: auto; } /* ========================================================================== 7 · LA CAJA DE LA OFERTA · solo 845, piezas 17 a 20 ========================================================================== Sección interior de dos columnas —55% y 45%— dentro de la sección del paso. Se apila por debajo de 768px, que es lo que hace Elementor. ========================================================================== */ .jrv-spivideo-oferta { display: flex; flex-wrap: wrap; margin-block: 20px; } .jrv-spivideo-oferta__lado { box-sizing: border-box; width: 100%; padding: 10px; } @media (min-width: 768px) { .jrv-spivideo-oferta__lado { width: 55%; } .jrv-spivideo-oferta__lado + .jrv-spivideo-oferta__lado { width: 45%; } } /* Las dos imágenes van enlazadas. El se pone en bloque porque dentro de .jrv-media la imagen ya es un bloque, y un ancla en línea le devolvería el hueco de la línea base que .jrv-media existe para quitar. */ .jrv-spivideo-oferta__enlace { display: block; } /* Sus anchos naturales: producción no las estira, las pinta al tamaño que tienen (503px la marca) o al ancho de la columna si el archivo es mayor (el paquete mide 1200px y la columna ronda los 600). */ .jrv-spivideo-oferta__marca { max-width: 503px; margin-inline: auto; } .jrv-spivideo-oferta__paquete { margin-top: 20px; margin-inline: auto; } /* El aviso del descuento va sobre amarillo, con su relleno de 10px y 15px. */ .jrv-spivideo-oferta__aviso { margin: 20px 0 0; padding: 10px 15px; background-color: #ffff00; color: #000; font-family: var(--jrv-p-tipo-titulos); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: center; } /* --- Los siete puntos ---------------------------------------------------- */ .jrv-spivideo-lista { margin: 0; padding: 0; list-style: none; } .jrv-spivideo-lista__item { display: flex; align-items: center; gap: 5px; color: #000; font-family: var(--jrv-spivideo-tipo-lista); font-size: 18px; /* 400 escrito y no heredado: aquí el kit NO manda el 600 de los titulares, la lista usa su tipografía «text», que es peso 400. */ font-weight: 400; line-height: 1.4; } /* Los 20px entre puntos son los del original, que los reparte en 10px de relleno abajo y 10px de margen arriba; aquí van una sola vez y entre puntos, así que el primero y el último no llevan aire de sobra. */ .jrv-spivideo-lista__item + .jrv-spivideo-lista__item { margin-top: 20px; } /* `min-width:0` para que un punto con una palabra muy larga se parta en vez de desbordar la columna: dentro de un contenedor flexible el mínimo automático es el ancho del contenido, y eso es lo que provoca el desborde horizontal que el protocolo comprueba con `document.scrollWidth === window.innerWidth`. */ .jrv-spivideo-lista__texto { min-width: 0; } /* La palomita: 24px de dibujo dentro de un hueco de 30px, y en su verde. LOS 30px NO SON UN CAPRICHO Y SE ENCONTRARON COMPARANDO CAPTURAS. El original pone el icono a 24px pero le da `width:1.25em` —o sea 30px— y luego 5px de separación, así que el texto empieza a 35px del borde. Con un hueco de 24px el texto empezaba a 29px: seis píxeles más de ancho por línea, y el tercer punto pasaba de tres líneas a dos. Eso movía hacia arriba los cuatro puntos siguientes, el botón y la flecha: 14px de desfase contra producción, más de lo que admite la lista del protocolo. `flex-shrink` a cero para que el hueco no se estruje cuando el texto ocupa dos o tres líneas. */ .jrv-spivideo-lista__marca { flex: 0 0 30px; width: 30px; height: 24px; color: var(--jrv-spivideo-verde); } /* ========================================================================== 8 · EL WHATSAPP · solo 845, piezas 23 y 24 ========================================================================== 40px de aire arriba: 20px del hueco entre piezas y 20px del relleno que el original le pone al párrafo. Y 5px entre la pregunta y el número (20 del hueco menos los 15 del margen negativo). Los dos ya sumados. ========================================================================== */ .jrv-spivideo-whatsapp__pregunta { margin: 40px 0 0; color: var(--jrv-spivideo-apagado); font-family: var(--jrv-p-tipo-titulos); font-size: 16px; font-weight: 400; line-height: 1; text-align: center; } .jrv-spivideo-whatsapp__numero { margin: 5px 0 0; font-family: var(--jrv-p-tipo-titulos); font-size: var(--jrv-spivideo-wa-numero); /* (T) h2 del tema: 25px, 20px en móvil */ font-weight: 400; /* (E) `font-weight:normal`, aquí el kit no manda porque Elementor lo declara */ line-height: 1; text-align: center; } /* El número es un enlace a WhatsApp con el mensaje ya escrito. Va sin subrayado, como en producción, pero con subrayado al pasar por encima y con anillo de foco: un enlace que no se distingue del texto es un enlace que nadie pulsa. */ .jrv-spivideo-whatsapp__numero a { color: var(--jrv-spivideo-verde); text-decoration: none; } .jrv-spivideo-whatsapp__numero a:hover, .jrv-spivideo-whatsapp__numero a:focus-visible { text-decoration: underline; } /* (El tamaño de móvil del teléfono no va aquí: lo lleva --jrv-spivideo-wa-numero, que corta en 768 porque es el h2 del tema y no un ajuste de Elementor.) */ /* ========================================================================== 9 · LA INVITACIÓN A COMENTAR · pieza 19 de 820 y 841 ========================================================================== La sección llevaba el `facebook-comments` debajo y se ha quedado sin él (SDK de terceros, fuera por peso y por privacidad). El relleno inferior de 20px es el del original; el aire de arriba son los 10px del hueco de columna. ========================================================================== */ .jrv-spivideo-comentarios { box-sizing: border-box; padding-block: 0 20px; } .jrv-spivideo-comentarios__aviso { margin: 0; color: #000; font-family: var(--jrv-p-tipo-titulos); font-size: 16px; font-weight: 400; line-height: 1; text-align: center; } /* ========================================================================== 10 · EL PIE · última pieza ========================================================================== Fondo blanco, el logotipo a sus 340px naturales y los 10px del hueco de columna alrededor: 103px de alto. No hay aviso de derechos en estas tres páginas. LA REGLA DE .jrv-spivideo-pie FALTABA. La clase se usa en el