/* ========================================================================== LOS ESTILOS DE LA PORTADA -------------------------------------------------------------------------- ESTE ARCHIVO EXISTE POR UN FALLO DEL ENSAYO DEL 21 DE AGOSTO. -------------------------------------------------------------------------- Estas reglas vivian dentro de la plantilla, en `page_settings.custom_css`. Al importar la portada en el servidor del diario, Elementor pregunta si se quieren traer tambien los «ajustes de pagina» — y ese CSS viaja ahi. Medido: la pagina quedo con 48 KB de estilos generados por Elementor desde los controles, y CERO de estas reglas. Resultado visible: el titulo de la portada, que debe ser invisible, salia en Georgia a 112px encima del hero. El problema no es solo que fallara una vez. Es que **dependia de que alguien pulsara SI en un dialogo**, y ese dialogo se despacha sin leer. En la migracion a produccion habria vuelto a pasar. Ahora viajan en el plugin. No hay dialogo que pulsar, no hay 53 KB que pegar a mano en una caja de texto, y quedan versionadas con el resto del codigo. -------------------------------------------------------------------------- SE CARGA SOLO EN LA PORTADA -------------------------------------------------------------------------- Son 52 KB que no pintan nada fuera de ella. Cargarlos en las 46.000 notas seria pagar peso en cada pagina del diario por algo que solo usa una. La condicion esta en `incluye/widgets.php`. ========================================================================== */ /* ================= HERO ================= */ /* La nota principal a sangre, con el titular encima de la foto. El widget `posts` pinta foto y texto uno debajo del otro; aca se superponen. */ .dd-hero-nota .elementor-posts-container { grid-template-columns: 1fr !important; } .dd-hero-nota .elementor-post { position: relative; margin: 0; } /* Los 20px de separacion que el widget deja bajo la miniatura hacen que la caja de la nota sea mas alta que la foto, y como el titular va anclado abajo de la caja, se salia de la imagen y quedaba sobre el fondo. Tres nombres de clase: la regla del widget tiene dos y, al empatar, ganaba por orden de carga. */ .dd-hero-nota .elementor-post .elementor-post__thumbnail__link { margin: 0; border-radius: 0; } /* Recorte de la foto: se toma el control completo. Elementor la centra con un `transform` que no siempre llega, y entonces se ve la mitad de arriba de la imagen. Ver la nota larga en elementor-archive-diario-deportes.gen.py. */ .dd-hero-nota .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; } /* El velo. Sin el, un titular blanco sobre una foto clara no se lee — y el diagnostico pide contraste de 4.5:1 como minimo. */ .dd-hero-nota .elementor-post__thumbnail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,12,36,.92) 0%, rgba(0,12,36,.72) 32%, rgba(0,12,36,.18) 62%, rgba(0,12,36,.05) 100%); } .dd-hero-nota .elementor-post__text { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 1320px; padding: 0 24px 52px; z-index: 2; margin: 0; } .dd-hero-nota .elementor-post__title { max-width: 900px; margin: 0 0 14px; } .dd-hero-nota .elementor-post__title a { color: #fff; } .dd-hero-nota .elementor-post__meta-data { margin: 0; } @media (max-width: 767px) { .dd-hero-nota .elementor-post__text { padding: 0 20px 32px; } } /* ================= DIARIO DEPORTES EN YOUTUBE ================= Misma rejilla asimetrica de Junior: uno grande y tres al costado. EL TRIANGULO DE REPRODUCIR NO ES ADORNO. Una miniatura de YouTube sin el se lee como una foto cualquiera, y entonces nadie sabe que al pulsar va a arrancar un video. Es la unica senal que distingue esta seccion del resto de la portada, donde todo lo que tiene foto es una nota escrita. Va como imagen de fondo y no como pseudo-elemento con bordes porque hace falta UNA sola caja: el circulo y el triangulo vienen dibujados juntos en el SVG. Con pseudo-elementos harian falta dos, y `.elementor-post__thumbnail` solo tiene libres los suyos hasta que Elementor decida usarlos. */ .dd-sec-videos .elementor-post__thumbnail { position: relative; } .dd-sec-videos .elementor-post__thumbnail::after { content: ""; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='%23000C24' fill-opacity='.78'/%3E%3Cpath d='M26 19l22 13-22 13z' fill='%23FFFFFF'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; transition: transform 240ms cubic-bezier(.16, 1, .3, 1); } /* Los tres del costado son mas chicos: un triangulo de 56px encima de una miniatura de 130px de ancho tapa la mitad de la imagen. */ .dd-sec-videos .dd-videos-lista .elementor-post__thumbnail::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; } .dd-sec-videos .elementor-post:hover .elementor-post__thumbnail::after { transform: scale(1.08); } /* La rejilla: el grande se lleva lo que sobra, la lista tiene ancho fijo. Mismo reparto que Junior, para que la portada se lea con un solo ritmo. */ .dd-videos-col-lead { flex: 1 1 auto; min-width: 0; } .dd-videos-col-lista { flex: 0 0 380px; max-width: 380px; } @media (max-width: 1080px) { .dd-videos-rejilla { flex-direction: column !important; } .dd-videos-col-lista { flex: 1 1 auto; max-width: none; } } @media (prefers-reduced-motion: reduce) { .dd-sec-videos .elementor-post__thumbnail::after { transition: none; } .dd-sec-videos .elementor-post:hover .elementor-post__thumbnail::after { transform: none; } } /* El titulo de la portada: presente para buscadores y lectores de pantalla, invisible para quien ve. `clip-path` + 1px, que es la forma correcta; con `display: none` o `visibility: hidden` tambien lo perderian los lectores. */ .dd-titulo-invisible { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ================= CABECERAS DE SECCION ================= */ /* La barra de acento a la izquierda del titulo, como en el mockup. */ .dd-sec-titulo { position: relative; padding-left: 16px; } .dd-sec-titulo::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 1em; background: #FC9901; border-radius: 3px; } .dd-sec-vertodo .elementor-button:hover { background: #000C24 !important; border-color: #000C24 !important; color: #fff !important; } /* Area tactil de 44px en el enlace «Ver todo». */ /* EL BOTON NO ENTRA EN EL REPARTO DE LA FILA. La cabecera es `space-between`. Sin proteger el boton, a 950px quedaba en 29px de ancho y «Ver todo» se partia en dos renglones dentro de una pastilla diminuta. `flex: 0 0 auto` hace que ceda el titulo, que para eso tiene mas de donde; `nowrap` remata: son dos palabras, nunca van partidas. */ .dd-sec-vertodo { flex: 0 0 auto; } .dd-sec-vertodo .elementor-button { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; } .dd-sec-vertodo .elementor-button-text { white-space: nowrap; } /* Y cuando de verdad no entran los dos, la cabecera se parte en dos renglones en vez de aplastar nada. Mejor mas alto que un titulo de tres letras. */ .dd-sec-cab > .e-con-inner, .dd-sec-cab { flex-wrap: wrap; row-gap: 12px; } /* Las dos tarjetas de casa estaban acotadas a 300px y centradas, para imitar el formato 300x250 de la pauta. Al lado de los demas modulos del lateral —que van al ancho completo— se veian mas angostas y descolgadas. VALE PARA LAS DOS. Se corrigio primero en la tarjeta de Hugo y al agregar «Anuncie en Diario Deportes» volvio a pasar lo mismo, porque la regla nombraba una sola clase. Medido en un telefono de 375px: los demas modulos iban de 16 a 359 y la tarjeta nueva de 38 a 338. Cualquier tarjeta de casa que se agregue despues va en esta lista. */ .dd-lateral .dd-casa, .dd-lateral .dd-casa-pauta { max-width: none; margin-inline: 0; } /* Sobre fondo tinta, la cabecera invierte. */ .dd-sec-cab-oscura { border-bottom-color: rgba(255,255,255,.16) !important; } .dd-sec-cab-oscura .dd-sec-titulo { color: #fff; } .dd-sec-cab-oscura .dd-sec-titulo .elementor-heading-title { color: #fff; } .dd-sec-cab-oscura .elementor-button { color: #E7E9EE !important; border-color: rgba(255,255,255,.28) !important; } .dd-sec-cab-oscura .elementor-button:hover { background: #FC9901 !important; border-color: #FC9901 !important; color: #000C24 !important; } /* ================= LAS TARJETAS ================= LAS FOTOS VAN CON ESQUINA VIVA, sin redondeo. Decision de Oscar. El `overflow: hidden` NO se toca aunque ya no haya esquinas que recortar: es lo que recorta la foto a la proporcion de la tarjeta. Sin el, las fotos verticales —el 43% de las del diario— se desbordan y rompen la rejilla. */ .dd-rejilla .elementor-post__thumbnail__link { overflow: hidden; display: block; } .dd-rejilla .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; transition: transform 420ms cubic-bezier(.16,1,.3,1); } .dd-rejilla .elementor-posts-container.elementor-has-item-ratio .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.04); } /* El titular mas largo del diario mide 201 caracteres. En las tarjetas se recorta con un tope de altura: el `-webkit-line-clamp` necesita `display:-webkit-box` y ese valor no siempre sobrevive. */ .dd-rejilla .elementor-posts-container .elementor-post .elementor-post__title { -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.75em; max-height: 3.75em; margin: 0; } .dd-rejilla .elementor-post__title a { color: inherit; } .dd-rejilla .elementor-post__title a:hover { color: #9C5F0A; } /* La primera nota de Junior, a lo ancho y con foto grande. OJO: el elemento de la rejilla ES la nota — Elementor pone las dos clases en la misma etiqueta, asi que `.elementor-grid-item .elementor-post` no existe. */ @media (min-width: 768px) { .dd-rejilla-lead .elementor-grid > .elementor-post.elementor-grid-item:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: center; margin-bottom: 8px; } .dd-rejilla-lead .elementor-posts-container .elementor-post.elementor-grid-item:first-child .elementor-post__title { font-size: 30px; line-height: 1.15; -webkit-line-clamp: 4; min-height: 0; max-height: 4.6em; } } /* Tarjetas sobre fondo tinta. */ .dd-rejilla-oscura .elementor-post__title a { color: #fff; } .dd-rejilla-oscura .elementor-post__title a:hover { color: #FC9901; } .dd-rejilla-oscura .elementor-post-date, .dd-rejilla-oscura .elementor-post__meta-data { color: #B7BBC8 !important; } /* ================= PAUTA ================= */ /* EL ALTO RESERVADO, SOLO CUANDO NO HAY NADA. Sin sitio reservado el anuncio cae cuando termina de cargar y empuja hacia abajo lo que el lector estaba leyendo. Es de las cosas que mas molestan. Pero el numero fijo estaba MAL MEDIDO: decia 970x90 y 300x250 —los tamanos estandar de la IAB— y esos no son los que usa el diario. Contados en su biblioteca, sus banners horizontales son 1000x100 (18 piezas), 1000x200 (12), 1000x150 (7) y 1000x250 (6); los verticales, 350x500. Ni uno solo de 970x90. Asi que el reservado se aplica solo con `:empty`, o sea cuando de verdad no hay nada que medir. Cuando hay banner, la imagen trae sus propios `width` y `height` y el navegador calcula el hueco exacto sola — mas fino que cualquier numero escrito aca, porque cada anunciante trae un alto distinto. 100px es el formato dominante. En movil el mismo banner se reduce con el ancho, asi que reservar 250 dejaba un vacio de 200px esperando algo que nunca medía tanto. */ .dd-pauta-hueco { display: block; width: 100%; } .dd-pauta-hueco:empty { min-height: 100px; } @media (max-width: 767px) { .dd-pauta-hueco:empty { min-height: 40px; } } /* El banner de muestra. `height: auto` es lo que deja que los atributos `width`/`height` del HTML reserven el hueco exacto; sin el, el navegador usaria el alto literal del archivo y una imagen de 1000px de ancho desbordaria en un telefono. */ .dd-pauta-imagen { display: block; max-width: 100%; height: auto; margin: 0 auto; } /* El enlace del anunciante. `display: block` porque un en linea alrededor de una imagen en bloque deja una franja de unos pixeles debajo, que es la linea base del texto que no hay. */ .dd-pauta-enlace { display: block; } /* es en linea por defecto y dejaria la misma franja de pixeles que el enlace. La imagen de dentro ya lleva `.dd-pauta-imagen`. */ .dd-pauta-hueco picture { display: block; } /* Si ad-inserter mete el anuncio en esta franja, hereda el sitio reservado. NADA de overflow/transform/filter aca ni en sus contenedores: rompe la medicion de viewability y el CPM cae sin dar error. */ .dd-pauta .code-block, .dd-pauta [id^="ai-"] { margin: 0 auto; } /* ================= EL CUERPO A DOS COLUMNAS ================= */ /* La columna lateral tiene ancho FIJO y la de notas se queda con lo que sobra. Al reves —con porcentajes— la lateral se estrecharia en pantallas medianas y sus titulares se partirian en cuatro lineas cada uno. */ /* OJO CON EL SELECTOR: `.dd-cuerpo` es un contenedor «boxed», y esos NO tienen a sus hijos colgando directamente: Elementor genera un `.e-con-inner` en el medio. Escrito como `.dd-cuerpo > .dd-columna-principal` no encuentra nada y las dos columnas salen apiladas, sin dar ningun error. */ .dd-cuerpo .dd-columna-principal { flex: 1 1 auto; min-width: 0; } .dd-cuerpo .dd-lateral { flex: 0 0 320px; max-width: 320px; } /* Debajo de 900px se apilan: una columna de 320px al lado de dos tarjetas no deja sitio para ninguna de las dos cosas. */ @media (max-width: 900px) { .dd-cuerpo > .e-con-inner, .dd-cuerpo { flex-direction: column !important; gap: 48px !important; } .dd-cuerpo .dd-lateral { flex: 1 1 auto; max-width: none; } } /* ---------- Los modulos de la columna lateral ---------- */ .dd-lat-titulo { padding-bottom: 10px; border-bottom: 2px solid #FC9901; margin: 0; } /* Foto a la izquierda y chica: en 320px de ancho, una foto arriba con el titular debajo obliga a hacer scroll para ver tres notas. */ .dd-lat-lista .elementor-post__thumbnail__link { overflow: hidden; } .dd-lat-lista .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: none; } .dd-lat-lista .elementor-post { display: flex; align-items: flex-start; } /* Dos lineas de tope. En una columna angosta, un titular de 201 caracteres ocuparia siete lineas y se comeria el modulo entero. */ .dd-lat-lista .elementor-posts-container .elementor-post .elementor-post__title { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.6em; margin: 0 0 3px; } .dd-lat-lista .elementor-post__title a { color: inherit; } .dd-lat-lista .elementor-post__title a:hover { color: #9C5F0A; } /* ================= EL AREA DE TOQUE DE LAS LISTAS COMPACTAS ================= Un titular corto —«Cumple años Matías Mier»— ocupa una sola linea de 15px de alto. Ese es todo el blanco al que hay que apuntarle con el dedo, y las reglas del proyecto piden 44px. En una lista de cinco notas no se puede resolver agrandando la letra: la columna se iria al doble de alto. Se resuelve al reves. La fila ya mide unos 96px —la altura de la foto—, asi que en vez de agrandar el enlace se lo estira para que cubra la fila entera. El `::after` es una capa invisible que se extiende sobre todo el bloque: se puede tocar en cualquier parte, incluida la foto, y el texto no se mueve ni un pixel. LA TRAMPA, QUE CAI EN ELLA. `inset: 0` no estira la capa hasta la fila: la estira hasta el ancestro posicionado mas cercano. El primer intento le puso ademas `position: relative` al titulo y al texto —para que el texto se pudiera seguir seleccionando con el mouse— y con eso el ancestro mas cercano paso a ser el titulo. Resultado: la capa cubria exactamente el titulo, o sea nada nuevo, y la medicion daba «no se puede tocar» sin ninguna pista de por que. Asi que entre la fila y el enlace no puede haber NINGUN elemento posicionado. El precio es que sobre la fila no se puede seleccionar texto con el mouse —es el mismo precio que paga cualquier tarjeta clicable, Bootstrap incluido— y a cambio se puede tocar en cualquier parte, incluida la foto. */ .dd-lat-lista .elementor-post, .dd-rejilla .elementor-post { position: relative; } .dd-lat-lista .elementor-post__title a::after, .dd-rejilla .elementor-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* El hueco de la columna. Su formato real es 350x500 —los cuatro banners verticales de la biblioteca lo son, Cajacopi y Construsenales—, NO 300x250 como decia esta nota. Como la columna mide 320px, el aviso se reduce a 320x457. Se ve bien, pero conviene que lo sepan: si mandan el arte a 320 de ancho, no se reduce nada. */ .dd-pauta-hueco-columna:empty { min-height: 457px; } /* ================= JUNIOR, REJILLA ASIMETRICA ================= Una nota grande a la izquierda y cinco en lista al costado. No es capricho: es lo que le da jerarquia a la seccion. Cuatro tarjetas del mismo tamano no dicen cual es la noticia — dicen que ninguna lo es. Son dos bloques de Elementor, no uno: el constructor no sabe pintar una rejilla asimetrica de un solo golpe. El «evitar duplicados» es lo que hace que el segundo arranque donde termino el primero. */ .dd-junior-rejilla > .e-con-inner, .dd-junior-rejilla { align-items: flex-start; } /* El `!important` es necesario y no es pereza. Elementor le escribe a TODO contenedor `flex: 0 1 auto`, con un selector de dos clases; escrito con una sola —`.dd-junior-col-lead`— pierde, y las dos columnas salen iguales: 636px y 636px, o sea la rejilla asimetrica sin la asimetria. Escribirlo con dos clases empata en peso y decide el orden de carga, que es la clase de cosa que funciona hoy y se rompe con una actualizacion. */ .dd-junior-col-lead { flex: 1.4 1 0 !important; min-width: 0; } .dd-junior-col-lista { flex: 1 1 0 !important; min-width: 0; } /* Recorte de la foto grande. Sin esto, Elementor la escala para cubrir el alto y la centra con un `transform` que no siempre llega: en movil la imagen salia de 1035px de ancho dentro de una columna de 307, empezando en x = -334. Es la MISMA trampa que ya nos costo tiempo en el hero y en las tarjetas; por eso el remedio es identico. Cuatro nombres de clase porque la regla propia de Elementor trae tres y, al empatar, ganaba por orden de carga. */ .dd-junior-lead .elementor-post__thumbnail__link { overflow: hidden; display: block; } .dd-junior-lead .elementor-posts-container.elementor-has-item-ratio .elementor-post__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; transition: transform 420ms cubic-bezier(.16,1,.3,1); } .dd-junior-lead .elementor-posts-container.elementor-has-item-ratio .elementor-post:hover .elementor-post__thumbnail img { transform: scale(1.04); } /* La lista de al lado hereda el aspecto de las listas laterales, salvo el tamano: aca la columna es mas ancha y el titular respira mas. TRES LINEAS, NO DOS. Al agrandar la foto de 118 a 180px el canal de texto bajo de 380 a 317, o sea que un titular que antes entraba en dos lineas ahora puede pedir una tercera. Con el tope en dos se cortaba a media frase. 3 x 1.32 de interlinea = 3.96em. */ .dd-junior-lista .elementor-posts-container .elementor-post .elementor-post__title { -webkit-line-clamp: 3; max-height: 3.96em; } @media (max-width: 1080px) { .dd-junior-rejilla > .e-con-inner, .dd-junior-rejilla { flex-direction: column !important; } } /* ================= FRANJA EDITORIAL — LAS DOS PUERTAS ================= Dos mitades a sangre, cada una con su fondo, su titulo grande y su boton. Reemplazo la version anterior, que eran dos rejillas de notas: despues de scrollear la portada entera, una rejilla mas es mas de lo mismo. */ .dd-editorial-franja > .e-con-inner, .dd-editorial-franja { align-items: stretch; } .dd-puerta { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; } /* El titulo lleva un salto de linea escrito en el texto («Pelotas y letras,\npor Hugo Illera»). Sin `pre-line` el navegador lo ignora y las dos lineas se juntan. OJO CON DONDE SE PONE. Si va en el contenedor del widget en vez de en el titulo, `pre-line` tambien respeta los saltos de linea que Elementor deja al sangrar su propio HTML, y el titulo aparece empujado dos renglones hacia abajo dentro de su caja. Solo en `.elementor-heading-title`. */ .dd-puerta .dd-puerta-titulo .elementor-heading-title { white-space: pre-line; text-shadow: 0 1px 14px rgba(0,4,16,.55); } /* AHORA ES UNA SOLA PUERTA, A TODO EL ANCHO. Eran dos en espejo —«Pelotas y letras» a la izquierda, «Efemérides» a la derecha— hasta que se vio que la columna de Hugo Illera ya tenia su banda propia mas arriba: aparecia dos veces en la misma portada. Se quito la puerta y se dejo la banda. `flex: 1 1 0` hace el resto: con un solo hijo, ocupa el ancho entero sin tocar nada mas. La alineacion NO se fuerza desde aqui: es un parametro de `puerta()` que termina en el control de alineacion del widget, o sea que se cambia desde el panel de Elementor sin tocar este archivo. El texto sigue a la derecha, y ahora dentro de los 1.320px del sitio (ver la nota de `ancho` en `puerta()`): a plomo con el titular del hero y con la rejilla de notas. A sangre se iria al borde de la pantalla, solo. */ @media (max-width: 900px) { .dd-editorial-franja > .e-con-inner, .dd-editorial-franja { flex-direction: column !important; gap: 0 !important; } .dd-puerta { min-height: 280px !important; } } /* ========================================================================= EL ESCALON DE 1080px QUE FALTABA ------------------------------------------------------------------------- El mockup aprobado usa TRES puntos de quiebre: 1080, 768 y 480. El build quedo con seis —1024, 1080, 900, 767, 560 y 480— y varios no los eligio nadie: el 1024 viene de fabrica de Elementor. Los breakpoints GLOBALES no se tocan a proposito: el kit declara 767/1024 y moverlos le cambiaria el punto de quiebre a la portada, al articulo y a veinte anos de paginas publicadas. Pero lo que colgaba del nivel 1080 del mockup habia que reubicarlo, y no se hizo. Va aqui, como media query propia de la plantilla, que no es global. ========================================================================= */ @media (max-width: 1080px) { /* El cuerpo pasa a una columna a 1080, no a 900. Entre 901 y 1080 la columna principal se quedaba con unos 590px y adentro corrian rejillas de dos columnas: tarjetas de 270px con el titular recortado a tres lineas. */ .dd-cuerpo > .e-con-inner, .dd-cuerpo { flex-direction: column !important; gap: 34px !important; } .dd-cuerpo .dd-lateral { flex: 1 1 auto !important; max-width: none !important; width: 100% !important; } /* Las cifras, de cuatro en fila a dos por fila. Los contenedores de Elementor son `nowrap`: sin esto, en un telefono quedan cuatro columnas de 70px con un numero de 32px adentro. */ .dd-cifras > .e-con-inner, .dd-cifras { flex-wrap: wrap !important; } .dd-cifras > .e-con-inner > .elementor-widget, .dd-cifras > .elementor-widget { flex: 0 0 calc(50% - 12px) !important; } /* Los dos paneles de datos, apilados. Cada uno lleva un embebido ajeno con ancho minimo propio: a 160px se veia media tabla de posiciones. */ .dd-resultados > .e-con-inner, .dd-resultados { flex-direction: column !important; } } /* Lo que inyecta la pauta se acota al hueco, NO al reves. El hueco no puede llevar `overflow`, `transform` ni `filter`: rompen la medicion de viewability de Google y bajan el CPM sin dar ningun error. */ .dd-pauta-slot img, .dd-pauta-slot iframe { max-width: 100%; height: auto; } /* ========================================================================= EL RELLENO LATERAL EN MOVIL ------------------------------------------------------------------------- Medido en un telefono de 360px: de esos 360 se perdian 88 en relleno —el 24% de la pantalla— y la foto de una nota quedaba en 272px. Y no era UN relleno, eran DOS sumados: la seccion pone 24 a cada lado y el contenedor de las tarjetas pone otros 20. Cada uno por separado parece razonable; juntos se comen una cuarta parte del ancho. Se recorta el de la seccion a 16 y se anula el de dentro. En un telefono el ancho es el recurso escaso: cada pixel de relleno sale de la foto y del titular. ========================================================================= */ @media (max-width: 767px) { /* EL RELLENO SE COBRA UNA SOLA VEZ, Y SOLO EN EL BORDE DE LA PANTALLA. ------------------------------------------------------------------- Medido: de 360px se perdian 88 en relleno —el 24% del ancho— y la foto de una nota quedaba en 272. No era un relleno, eran TRES apilados, y por dos caminos distintos segun donde viva la seccion: franjas a lo ancho .dd-sec 16 + su .e-con-inner 16 + la rejilla 10 cuerpo a dos columnas .dd-cuerpo 24 + .dd-columna-principal 10 + .dd-bloque 10 Cada uno por separado parece razonable. Sumados se comen una cuarta parte de la pantalla. Y arreglar solo el primer camino dejaba el segundo intacto, que es justo lo que paso en el primer intento. La regla es simple: SOLO el contenedor de mas afuera pone relleno lateral. Todo lo que va adentro va a cero. */ /* 1. EL MARGEN DE PANTALLA LO PONE LA CAJA DE ADENTRO, Y SOLO ELLA. Un contenedor «boxed» de Elementor son DOS cajas anidadas. Poner 16 en las dos da 32 por lado — que es exactamente el error que esta regla existe para corregir, y lo cometi dos veces seguidas: primero con `.dd-sec` y despues, igual, con `.dd-cuerpo`. Queda escrito para no repetirlo una tercera. */ .dd-sec > .e-con-inner, .dd-cuerpo > .e-con-inner { padding-left: 16px !important; padding-right: 16px !important; } .dd-sec, .dd-cuerpo { padding-left: 0 !important; padding-right: 0 !important; } /* 2. Todo lo de adentro, a cero. Esos 10px son el relleno que Elementor le da por defecto a CUALQUIER contenedor. No aparece en ningun ajuste que uno haya tocado, y es la mitad del problema. */ .dd-cuerpo .dd-columna-principal, .dd-cuerpo .dd-lateral, .dd-bloque, .dd-sec .dd-rejilla, .dd-sec .dd-junior-rejilla, .dd-sec .dd-junior-col-lead, .dd-sec .dd-junior-col-lista, .dd-rejilla, .dd-lat-lista, .elementor-posts-container { padding-left: 0 !important; padding-right: 0 !important; } } /* ========================================================================= EL «VER TODO» BAJA AL FINAL, PERO SOLO EN CELULAR ------------------------------------------------------------------------- En escritorio se queda donde estaba: arriba a la derecha, junto al titulo. Ahi funciona y esta aprobado. En un telefono no: la cabecera lleva el escudo, un titulo largo —«Junior de Barranquilla»— y el boton, y en 360px no caben en una linea. Se parte. COMO SE MUEVE SIN TOCAR EL HTML El boton vive DENTRO de la cabecera, asi que `order` no lo saca de ahi: `order` solo reordena hermanos. La llave es `display: contents` en la cabecera: hace desaparecer su caja y ASCIENDE a sus hijos, que pasan a ser hermanos directos de la seccion. Recien ahi `order` puede mandar el boton al final. Lo unico que se pierde al disolver la caja es su borde inferior —la linea bajo el titulo—, asi que se le pasa al grupo del titulo, que es a quien subraya de verdad. ========================================================================= */ @media (max-width: 767px) { .dd-sec-cab { display: contents; } .dd-sec-marca { padding-bottom: 14px !important; border-bottom: 1px solid #E7E8EC; } .dd-sec-junior .dd-sec-marca, .dd-sec-oscura .dd-sec-marca { border-bottom-color: rgba(255,255,255,.28); } .dd-sec-vertodo { order: 99; width: 100%; margin-top: 4px; } /* De borde a borde: al final de un bloque, un boton chico flotando a la derecha se lee como un resto, no como un cierre. Y de paso el area tactil deja de depender del largo de dos palabras. */ .dd-sec-vertodo .elementor-button { display: flex; width: 100%; justify-content: center; padding-top: 13px; padding-bottom: 13px; } } /* ================= BALONCITO ================= La pieza grafica diaria del diario, en la columna lateral. NO ES UN CARRUSEL, y la razon es aritmetica: con 28 piezas, los puntos de navegacion piden 28 x 44px de area tactil = 1.232px en una columna de 300. Se ve la ultima grande y tres miniaturas: cuatro de un vistazo, las cuatro enlaces reales, sin gesto oculto ni rotacion automatica. El 2:3 vertical, que de foto destacada rompia las tarjetas horizontales, aqui es la proporcion exacta. El formato nunca fue el problema, era el sitio. */ /* SIN RECUADRO. Aqui habia un borde de 1px y esquinas redondeadas, que convertian el bloque en una tarjeta — la unica de toda la columna. Ninguna otra seccion lleva marco, asi que Baloncito se leia como una pieza pegada de otro sitio en vez de como una seccion mas del diario. Lo que lo separa de sus vecinos es el hueco de 32px de la columna y su propio titulo con filete naranja, igual que en el resto de la portada. Con eso alcanza: el marco no aportaba jerarquia, aportaba ruido. Y con el marco fuera, el relleno tampoco tiene sentido: el margen lateral ya lo pone el contenedor de la pagina, como en las demas secciones. */ .dd-baloncito { padding: 0; } /* El filete naranja que marca la seccion. Va como borde y no como texto: #FC9901 sobre blanco da 2,2:1 y no llega al 4,5:1 que pide el diagnostico, asi que el naranja decora y la tinta escribe. */ .dd-baloncito .dd-baloncito-titulo .elementor-heading-title { border-left: 4px solid #FC9901; padding-left: 10px; line-height: 1.15; } .dd-baloncito-fecha .elementor-heading-title { white-space: nowrap; } /* Las imagenes ocupan el ancho y conservan su proporcion. `aspect-ratio` fija el hueco ANTES de que la imagen cargue: sin esto el bloque salta y empuja media portada hacia abajo mientras se descarga. */ .dd-baloncito img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; } .dd-baloncito-tira { align-items: stretch; } .dd-baloncito-tira > .elementor-widget { flex: 1 1 0; min-width: 0; } /* Se levantan al pasar el mouse. Es la unica pieza de la columna que es pura imagen, asi que necesita decir que se puede pulsar. */ .dd-baloncito .elementor-widget-image a { display: block; transition: transform 240ms cubic-bezier(.16,1,.3,1); } .dd-baloncito .elementor-widget-image a:hover { transform: translateY(-3px); } .dd-baloncito .elementor-widget-image a:focus-visible { outline: var(--dd-foco); outline-offset: 3px; } .dd-baloncito-ver .elementor-button:hover { border-color: #FC9901; background-color: #F6F7F9; } @media (prefers-reduced-motion: reduce) { .dd-baloncito .elementor-widget-image a:hover { transform: none; } } /* ================= TARJETA DE INVITACION A LA COLUMNA ================= Ocupa el hueco de 300x250 de la pauta, pero anunciando algo del diario. Si un espacio no esta vendido, mejor eso que un rectangulo gris. */ .dd-casa { max-width: 300px; min-height: 300px; margin-inline: auto; } .dd-casa .dd-casa-boton .elementor-button { min-height: 44px; } /* «ANUNCIE EN DIARIO DEPORTES» Mismo ancho que el resto de la columna. El correo va de boton, asi que hay que dejarlo PARTIRSE: son 31 caracteres y en la columna de 300px no entran en una linea. Un boton normal no parte el texto y lo desborda por el lado. `min-height` en vez de `height` justamente por eso: si parte en dos lineas, el boton crece en vez de recortar la segunda. */ .dd-casa-pauta { max-width: 300px; margin-inline: auto; } .dd-casa-pauta .dd-casa-pauta-boton .elementor-button { display: flex; align-items: center; min-height: 44px; padding: 10px 18px; white-space: normal; overflow-wrap: anywhere; text-align: left; } /* El titulo es un h3 y el kit de Elementor le pone su propio tamano con una regla de etiqueta. Se repite aca el valor para que gane la del bloque. */ .dd-casa-pauta .dd-casa-pauta-titulo { margin: 0; } .dd-casa-pauta .dd-casa-pauta-texto p { margin: 0; } /* ================= LO MAS LEIDO, VERSION NATIVA ================= Es el widget de entradas de Elementor, asi que los titulos, el espaciado y los colores se editan desde el panel como cualquier otra lista. Lo unico que no puede dar el widget es el NUMERO de cada puesto: su marcado no lo trae. Se dibuja con un contador de CSS sobre los propios elementos de la lista — la unica forma de numerarlo sin volver a escribir su HTML, que es precisamente lo que estamos dejando de hacer. Si algun dia el numero estorba, se quita borrando estas reglas: el widget sigue funcionando igual. */ .dd-leidas-nativa .elementor-posts-container { counter-reset: dd-puesto; } .dd-leidas-nativa .elementor-post { counter-increment: dd-puesto; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 13px 0; margin: 0; border-bottom: 1px solid #F0F1F4; } .dd-leidas-nativa .elementor-post:last-child { border-bottom: none; } .dd-leidas-nativa .elementor-post::before { content: counter(dd-puesto); font-family: Archivo, system-ui, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; /* Naranja oscuro: el #FC9901 del logo sobre blanco da 2,2:1. */ color: #9C5F0A; } /* El texto ocupa la segunda columna. Sin esto cae debajo del numero. */ .dd-leidas-nativa .elementor-post__text { margin: 0; } .dd-leidas-nativa .elementor-post__meta-data { margin: 0 0 3px; text-transform: uppercase; letter-spacing: .04em; } /* ================= HERO NATIVO ================= Es un contenedor con la clase `dd-rotador`: el JavaScript alterna a sus hijos. Cada turno es otro contenedor con foto de fondo, etiqueta, titular y firma — todo widgets normales, todo editable desde el panel. El velo NO esta aca: es la «Superposicion de fondo» nativa del contenedor, asi que se cambia o se apaga sin tocar codigo. */ .dd-hero-auto .dd-hero-turno { width: 100%; } /* LA ETIQUETA ES TEXTO, NO PASTILLA (oct-2026, pedido de Oscar: «se sale completamente del estilo del resto»). Sin fondo, borde, relleno ni esquinas: un rotulo chico encima del titular, como los demas del sitio. */ .dd-hero-auto .dd-hero-etiqueta { display: block; } /* Dos clases antes del enlace: el color de enlaces del kit de Elementor pesa lo mismo que una sola y, al empatar, ganaba por orden de carga — el titular salia naranja sobre la foto en vez de blanco. */ .dd-hero-auto .dd-hero-titular a, .dd-hero-auto .dd-hero-titular a:visited { color: #fff; text-decoration: none; } /* Sin punto naranja al cierre del titular (oct-2026, correcciones de Lizeth). */ /* Hover en ACENTO, sin subrayado. Sobre la foto oscura del hero el naranja destaca sin ensuciar el titular con una linea que le cruza dos renglones. Aca si funciona el color de marca: no compite con nada — en el hero no hay barras de seccion ni botones naranjas al lado. */ .dd-hero-auto .dd-hero-titular a:hover { color: #FC9901; text-decoration: none; } /* Con teclado, ademas del color, el subrayado: el color solo no alcanza para saber donde esta uno navegando con Tab. */ .dd-hero-auto .dd-hero-titular a:focus-visible { color: #FC9901; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } /* EL ANCHO DEL TITULAR VA SOBRE EL `

`, NO SOBRE EL WIDGET. Elementor le escribe `max-width: 100%` a todo widget, y le gana a un `max-width` puesto en la clase del widget — el titular se estiraba los 1320px enteros y se metia debajo de las flechas: llegaba a x=1252 cuando las flechas empiezan en 1283, solapandose en vertical. El `.elementor-heading-title` de adentro no tiene esa regla, asi que ahi si manda. Los 900px salen del mockup aprobado (site.css, `.hero-body h1`). */ .dd-hero-auto .dd-hero-titular .elementor-heading-title { max-width: min(900px, 100%); text-shadow: 0 2px 30px rgba(0,0,0,.3); } /* Por debajo de 1081px las flechas se van y las barras se centran abajo, asi que el titular puede usar todo el ancho. */ @media (max-width: 1080px) { .dd-hero-auto .dd-hero-titular .elementor-heading-title { max-width: 100%; } } /* EL PUNTO SEPARADOR VA SOBRE EL TEXTO, NO SOBRE EL WIDGET. Un widget de Elementor es un `
` de bloque que envuelve al titulo. Si el `::after` se le cuelga al widget, el punto cae en un renglon PROPIO debajo del texto: el widget pasa de 15px de alto a 40, y como la fila esta centrada, el nombre y la fecha dejan de estar a la misma altura. Se ve como un desalineado sin causa aparente. Colgado del `.elementor-heading-title`, que es donde vive el texto, el punto queda en linea y los dos vuelven al mismo renglon. */ .dd-hero-auto .dd-hero-autor .elementor-heading-title::after { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); margin-left: 11px; vertical-align: middle; } /* Los dos widgets de la firma en linea, sin el alto extra que Elementor le pone a cada uno por ser bloques. */ .dd-hero-auto .dd-hero-firma .elementor-widget-heading, .dd-hero-auto .dd-hero-firma .elementor-heading-title { margin: 0; line-height: 1.4; } /* Lo mismo en la banda destacada: misma estructura, mismo separador. */ .dd-destacado .dd-destacado-autor .elementor-heading-title::after { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); margin-left: 11px; vertical-align: middle; } .dd-destacado .dd-destacado-firma .elementor-widget-heading, .dd-destacado .dd-destacado-firma .elementor-heading-title { margin: 0; line-height: 1.4; } /* ================= CINTILLO NATIVO ================= Contenedor con `dd-marquesina` y adentro un widget de entradas normal. El JavaScript clona la lista y la desplaza; el resto se edita en el panel. */ .dd-cintillo-auto { overflow: hidden; } .dd-cintillo-auto .dd-cintillo-etiqueta { flex: 0 0 auto; white-space: nowrap; } /* `min-width: 0` es lo que impide que la lista, que es mucho mas ancha que la pantalla, estire al contenedor y saque la pagina de cuadro. */ .dd-cintillo-auto .dd-marquesina { flex: 1 1 auto; min-width: 0; } .dd-cintillo-auto .dd-cintillo-lista .elementor-post__title { margin: 0; } /* CADA TITULAR EN FILA: el punto y el texto uno al lado del otro. `flex-direction: row` NO es redundante. Elementor le pone `column` a `.elementor-post` —lo necesita para apilar foto y texto en las tarjetas—, y poner solo `display: flex` no cambia la direccion: el punto seguia cayendo en su propio renglon ENCIMA del titular, con el article midiendo 82px en vez de 44. Se veia como dos lineas desalineadas. */ .dd-cintillo-auto .dd-cintillo-lista .elementor-post { display: flex; flex-direction: row; align-items: center; gap: 22px; } /* Separador dibujado en vez de escrito: un `` de mas por titular seria marcado nuestro dentro de un widget que no lo es. */ .dd-cintillo-auto .dd-cintillo-lista .elementor-post + .elementor-post::before { content: "•"; color: #FC9901; flex: 0 0 auto; line-height: 1; } /* EL DIFUMINADO DE LOS BORDES. Sin esto los titulares aparecen y desaparecen de golpe contra el borde, como si se cortaran. La mascara los desvanece en los extremos y el movimiento se lee continuo. Lo tenia el cintillo anterior y no lo habia portado. */ .dd-cintillo-auto .dd-marq-ventana { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } /* Quien pidio menos movimiento se desplaza a mano, y ahi la mascara estorba: esconderia justamente lo que esta tratando de leer en los bordes. */ @media (prefers-reduced-motion: reduce) { .dd-cintillo-auto .dd-marq-ventana { -webkit-mask-image: none; mask-image: none; } } /* Area tactil: son enlaces reales y en un telefono hay que poder darles sin apuntar. El alto no agranda la franja — ya mide mas que eso. */ .dd-cintillo-auto .dd-cintillo-lista .elementor-post__title a { display: inline-flex; align-items: center; min-height: 44px; } /* ================= EL RETRATO DE LA BANDA DESTACADA ================= Un widget de imagen normal. Lo unico que hace este CSS es sacarlo por debajo del borde de la banda: es lo que le da la sensacion de estar APOYADO en la franja y no pegado encima, que es como se ve en la propuesta aprobada. `align-self: flex-end` mas el margen negativo. El contenedor recorta lo que sobra (`overflow: hidden` en `.dd-destacado`), asi que la foto se corta justo en el borde. */ .dd-destacado .dd-destacado-cara { align-self: flex-end; margin-bottom: -24px; margin-right: -16px; flex: 0 0 auto; } .dd-destacado .dd-destacado-cara img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 30px rgba(0,0,0,.4)); } @media (max-width: 1080px) { .dd-destacado .dd-destacado-cara { width: 300px !important; } } /* EL RETRATO SE QUEDA EN MOVIL. Aqui decia `display: none`, con el argumento de que competia con el titular. El mockup aprobado resuelve el mismo choque sin sacrificar la cara: la manda al fondo, sangrada por el borde derecho, y refuerza el degradado. Esta firmado alli como «Opcion A, aprobada Dir. Arte». La colocacion y el degradado viven en `dd-core.css`, junto al resto del bloque destacado. Aqui solo se anula el ocultamiento —esta regla tiene dos clases y le ganaba a la de alla, que tiene una—. */ @media (max-width: 767px) { .dd-destacado .dd-destacado-cara { display: block; } } /* ================= LOS TITULARES DE LAS NOTAS ================= SIN SUBRAYADO. Y no lo poniamos nosotros: lo pone ASTRA, con la regla `.ast-single-post .entry-content a { text-decoration: underline }`. Como la portada es una PAGINA, todo su contenido cuelga de `.entry-content`, asi que Astra subraya cada enlace de la pagina — incluidos los titulares. Con titulares de dos y tres lineas eso es un bloque rayado de lado a lado. HOVER EN AZUL, no en naranja. El naranja es el color de la MARCA: esta en la barra de acento de cada seccion, en el punto del cierre de los titulares y en los botones. Usarlo tambien para «el mouse esta encima» lo gasta. Un azul mas claro que la tinta dice «esto se puede tocar» sin competir con nada. #2B5CA8 da 6.56:1 sobre blanco — se eligio midiendo, no a ojo: el siguiente tono mas claro que probamos (#3A6FC4) daba 4.94, y con texto de 14px eso es demasiado justo para el minimo de 4.5 que pide el diagnostico. La franja del cintillo queda FUERA: ahi los titulares son blancos sobre tinta, y un azul oscuro seria ilegible. */ .dd-cuerpo .elementor-post__title a, .dd-sec .elementor-post__title a, .dd-lat-lista .elementor-post__title a, .dd-leidas-nativa .elementor-post__title a, .dd-junior-lead .elementor-post__title a, .dd-junior-lista .elementor-post__title a { text-decoration: none; transition: color 150ms cubic-bezier(.16, 1, .3, 1); } .dd-cuerpo .elementor-post__title a:hover, .dd-sec .elementor-post__title a:hover, .dd-lat-lista .elementor-post__title a:hover, .dd-leidas-nativa .elementor-post__title a:hover, .dd-junior-lead .elementor-post__title a:hover, .dd-junior-lista .elementor-post__title a:hover { color: #2B5CA8; text-decoration: none; } /* Con el teclado se ve el foco igual: el color solo no alcanza para señalar donde esta uno, y ahi el subrayado si suma. */ .dd-cuerpo .elementor-post__title a:focus-visible, .dd-sec .elementor-post__title a:focus-visible, .dd-lat-lista .elementor-post__title a:focus-visible, .dd-leidas-nativa .elementor-post__title a:focus-visible, .dd-junior-lead .elementor-post__title a:focus-visible, .dd-junior-lista .elementor-post__title a:focus-visible { color: #2B5CA8; text-decoration: underline; text-underline-offset: 4px; } /* El cintillo tambien pierde el subrayado de Astra, pero su hover es OTRO: ahi los titulares son claros sobre tinta, y el azul oscuro de las secciones seria ilegible. Se aclara a blanco puro — mas luz, no menos. */ .dd-cintillo-auto .dd-cintillo-lista .elementor-post__title a { text-decoration: none; transition: color 150ms cubic-bezier(.16, 1, .3, 1); } .dd-cintillo-auto .dd-cintillo-lista .elementor-post__title a:hover { color: #FFFFFF; text-decoration: none; } .dd-cintillo-auto .dd-cintillo-lista .elementor-post__title a:focus-visible { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; } /* ================= EL ESCUDO DE LA SECCION ================= Como en la propuesta (`.sec-crest`). Hoy solo lo lleva Junior: es la seccion de identidad del diario y el escudo la hace reconocible sin leer. `object-fit: contain` y no `cover`: un escudo recortado es un escudo roto. El widget de imagen de Elementor estira por defecto. */ .dd-sec-escudo img { width: 34px; height: 34px; object-fit: contain; display: block; } /* EL GRUPO DEL ESCUDO Y EL TITULO SE MIDE POR SU CONTENIDO. `width: auto` no es de adorno: Elementor le pone `width: 100%` a todo contenedor «full», asi que este grupo ocupaba los 1137px enteros de la cabecera. Mientras la fila no podia partirse eso no se notaba —el boton se apretujaba al costado— pero al permitir el salto de linea, el grupo empujo el «Ver todo» a un segundo renglon. Los dos sintomas, el boton aplastado y el boton abajo, eran la misma causa. */ .dd-sec-marca { flex: 0 1 auto; width: auto; min-width: 0; } @media (max-width: 480px) { .dd-sec-escudo img { width: 28px; height: 28px; } } /* ================= CANAL DE WHATSAPP ================= Reemplaza al boletin. Mismo envase que tenia aquel —caja tinta con degradado, esquinas redondeadas— para que el cierre de la portada no cambie de registro: lo que cambia es el medio, no la promesa. */ .dd-whatsapp-caja > .e-con-inner, .dd-whatsapp-caja { align-items: center; } .dd-whatsapp-texto { flex: 1 1 auto; min-width: 0; } /* El `width: auto` NO sobra: Elementor le escribe `width: var(--width)` a TODO contenedor, con `--width: 100%`. Con `flex: 0 0 auto` («no encojas») esa columna reclamaba el ancho entero y se negaba a ceder, y al texto le quedaban 20px: un caracter por linea. Es el mismo caso de `.dd-sec-marca`. */ .dd-whatsapp-accion { flex: 0 0 auto; width: auto; min-width: 0; } .dd-whatsapp-bajada p, .dd-whatsapp-nota p { margin: 0; } /* El glifo de WhatsApp, del tamano del texto del boton. */ .dd-whatsapp-boton .elementor-button-icon svg, .dd-whatsapp-boton .elementor-button-icon i { width: 20px; height: 20px; font-size: 20px; } /* El verde se aclara al pasar el mouse, no se oscurece: es un boton de invitacion y tiene que sentirse que se enciende. */ .dd-whatsapp-boton .elementor-button:hover { background-color: #2EE875; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 211, 102, .28); } .dd-whatsapp-boton .elementor-button { transition: background-color 150ms, transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms cubic-bezier(.16,1,.3,1); } @media (max-width: 900px) { .dd-whatsapp-caja > .e-con-inner, .dd-whatsapp-caja { flex-direction: column !important; align-items: flex-start; gap: 24px !important; } /* Apiladas, las dos columnas tienen que arrancar en la MISMA linea vertical. Cada una traia 10px de relleno propio de Elementor, y al estirar el boton a todo el ancho ese relleno lo dejaba 10px a la izquierda del titulo. */ .dd-whatsapp-texto, .dd-whatsapp-accion { padding-inline: 0; } /* En movil el boton va a todo el ancho: es la accion de la franja y con el dedo se agradece un blanco grande. Hacen falta las TRES lineas: estirar el contenedor no estira el widget, y estirar el widget no estira el enlace, que es lo que se ve y se toca. */ .dd-whatsapp-accion { align-self: stretch; width: 100% !important; } .dd-whatsapp-boton { width: 100% !important; } .dd-whatsapp-boton .elementor-button { display: flex !important; width: 100% !important; justify-content: center; } } @media (max-width: 560px) { /* El relleno se cobra UNA sola vez. Un contenedor «boxed» son dos cajas, una dentro de la otra, y las dos traian relleno propio. Sumado al de la franja y al de la columna de accion, eran 100px por lado: de los 375px del telefono quedaban 175 utiles, y el boton —que si se estiraba al 100%— no podia medir mas que eso. Se lo dejo solo a la caja de adentro. */ .dd-whatsapp-caja { padding-inline: 0; } .dd-whatsapp-caja > .e-con-inner { padding: 30px 22px; } } /* ================= ANUNCIE EN DIARIO DEPORTES ================= */ /* Dos columnas: a la izquierda quien habla y como escribirle, a la derecha quienes ya pautan. El reparto no es mitad y mitad — el texto es el que hay que leer; los logos acompanan. */ .dd-pauta-caja > .e-con-inner, .dd-pauta-caja { align-items: center; } .dd-pauta-texto { flex: 1 1 auto; min-width: 0; } .dd-pauta-marcas { flex: 0 0 340px; max-width: 340px; } /* El logo del diario hace de titular, asi que se comporta como un titular: ni se estira ni se encoge con la caja. Van dos clases antes del `img` porque `.elementor img { height: auto }` es 1 clase + 1 etiqueta y le gana a un selector de una sola clase. */ .dd-pauta-logo img { display: block; width: 190px; max-width: 100%; height: auto; } .dd-pauta-bajada p { margin: 0; max-width: 46ch; } /* El «alcance real de cada espacio» va en negrita en el original del cliente: es la promesa concreta de la frase, y lo demas es cortesia. */ .dd-pauta-bajada strong { color: #000C24; font-weight: 700; } /* Boton de contorno. El area tactil minima del proyecto es 44px y el relleno ya la da, pero se fija igual: si alguien cambia la tipografia desde el panel, el minimo no se pierde. */ .dd-pauta-boton .elementor-button { min-height: 44px; display: inline-flex; align-items: center; transition: background-color 150ms, color 150ms; } /* ---------- Movil ---------- */ @media (max-width: 880px) { /* Las dos columnas se apilan. Los logos van DEBAJO del boton y no encima: en un telefono lo primero tiene que ser de que se trata y como escribir; la prueba social refuerza, no presenta. */ .dd-pauta-caja { flex-direction: column; } .dd-pauta-marcas { flex: 1 1 auto; max-width: 100%; width: 100%; padding-top: 8px; border-top: 1px solid #E7E8EC; } .dd-pauta-texto { width: 100%; } } @media (max-width: 600px) { .dd-pauta-caja { padding: 28px 20px; } .dd-pauta-logo img { width: 156px; } } /* ================= CANAL DE WHATSAPP, EN EL LATERAL ================= */ .dd-wa-lat .dd-wa-lat-titulo { margin: 0; } .dd-wa-lat-bajada p { margin: 0; } /* EL BOTON, A TODO EL ANCHO Y CON EL LOGO DE WHATSAPP. El logo va como SVG incrustado en el propio CSS y NO como icono de Font Awesome. Medido: en esta pagina no se carga ninguna hoja de iconos —cero elementos `fab`—, asi que pedirle el icono a Elementor haria que descargara la familia de marcas entera, unos 100 KB de fuente, para un solo glifo. Esto son 400 bytes y no depende de nada. Va con `background-image` y el color quemado, no con `mask-image` heredando el color del texto: por eso el estado de reposo y el de encima usan el mismo tinta, y el fondo es lo unico que cambia. Un boton que invirtiera a texto blanco dejaria el logo invisible. */ .dd-wa-lat-boton .elementor-button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background-color 150ms; } .dd-wa-lat-boton .elementor-button-text::before { content: ""; display: inline-block; vertical-align: -3px; margin-right: 9px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000C24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Al pasar por encima cambia SOLO el fondo. Ver la nota de arriba: si el texto invirtiera a blanco, el logo —que lleva el color quemado— desapareceria. */ .dd-wa-lat-boton .elementor-button:hover { background-color: #F6F7F9; } @media (prefers-reduced-motion: reduce) { .dd-wa-lat-boton .elementor-button { transition: none; } } /* El relleno del contenedor en movil. OJO CON EL SELECTOR: en un contenedor «boxed» Elementor no pinta el relleno sobre el contenedor sino sobre el `.e-con-inner` que mete en el medio. Una regla sobre `.dd-pauta-caja` a secas no lo pisa, y la caja se queda con sus 44px en un telefono de 375. Van los dos. */ @media (max-width: 600px) { .dd-pauta-caja > .e-con-inner, .dd-pauta-caja { padding: 28px 20px; } }