/** * Diario Deportes — Core * Estilos de los bloques propios. * * Solo se carga en las páginas que usan alguno de estos bloques. * Los colores por defecto se pueden cambiar desde Elementor: aquí van los * valores del diseño aprobado. * * --------------------------------------------------------------------------- * UNA REGLA PARA TODO ESTE ARCHIVO: LOS TITULOS VAN CON DOS CLASES * --------------------------------------------------------------------------- * Elementor genera una hoja con la tipografía global del sitio, y ahí adentro * hay reglas como esta: * * .elementor-kit-5 h2 { font-size: 34px; } * * Eso es «una clase + un elemento». Un selector nuestro de una sola clase * —`.dd-leidas-titulo`— es «una clase» a secas, y pierde. Sin aviso, sin error * y sin que se note al mirar el archivo: la regla está ahí, escrita, correcta, * y el navegador la descarta. * * Costó encontrarlo dos veces. «Lo más leído» estuvo con su título a 34px * dentro de una columna de 320px, y se veía tan mal que parecía un problema de * maquetación, no de especificidad. * * Así que TODO título que sea `

`–`

` se escribe con la clase del bloque * por delante: * * .dd-leidas .dd-leidas-titulo { … } ← dos clases, gana * .dd-leidas-titulo { … } ← una clase, pierde * * Los `
` y `` no tienen el problema: la hoja del kit apunta a * etiquetas de encabezado, no a cualquier cosa. Pero cuesta lo mismo hacerlo * bien siempre que acordarse de la excepción. */ /* ========================================================================= EL ANILLO DE FOCO ------------------------------------------------------------------------- Es la marca que aparece alrededor de un control cuando se llega a el con el teclado. Sin ella, quien no usa raton no sabe donde esta parado. Estaba escrito de OCHO formas distintas para la misma interaccion —medido: 3px naranja con 3 de separacion, 2px naranja con 2, 2px blanco con 3, 3px tinta, 2px naranja con 4, 2px naranja con 3, 3px naranja hacia adentro, 3px naranja con 2—. Ninguna estaba mal; simplemente cada una se escribio en un momento distinto. Ahora hay UNO, y tres excepciones que si tienen motivo. Estan abajo, cada una con su medicion. ========================================================================= */ :root { --dd-foco: 3px solid #CF7C0E; --dd-foco-sep: 3px; /* Sobre una FOTO. El naranja no es fiable contra una imagen cualquiera: puede caer sobre un fondo naranja y desaparecer. El blanco con su propia sombra si se ve sobre cualquier cosa. */ --dd-foco-inv: 2px solid #FFFFFF; /* Sobre el PROPIO naranja de la marca. Medido: naranja sobre naranja da 1.0:1 —el anillo no existe—. El tinta sobre ese mismo naranja da 6.07:1. */ --dd-foco-sobre-acento: 3px solid #000C24; } /* ========================================================================= HERO — LAS NOTAS PRINCIPALES ========================================================================= */ .dd-hero { position: relative; height: 88vh; min-height: 620px; max-height: 860px; overflow: hidden; background: #000C24; /* Cede el eje horizontal para poder deslizar, y deja el desplazamiento vertical de la página intacto. Solo afecta a pantallas táctiles. */ touch-action: pan-y; } .dd-hero-nota { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .dd-hero-nota.es-visible { opacity: 1; visibility: visible; } /* OJO — EL SELECTOR LLEVA `.dd-hero` A PROPÓSITO, NO SOBRA. Con `.dd-hero-foto` a secas esta regla PERDÍA, y de la forma más silenciosa: img { height: auto } Astra 0 clases, 1 etiqueta .elementor img { height: auto } Elementor 1 clase, 1 etiqueta ← ganaba .dd-hero-foto { height: 100% } nosotros 1 clase, 0 etiquetas Gana Elementor por UNA etiqueta. La foto se quedaba con su proporción original y `object-fit: cover` no servía de nada: recorta dentro de la caja de la imagen, y esa caja era la equivocada. En un teléfono la foto quedaba más baja que el hero y sobraba fondo; en escritorio quedaba más alta y la recortaba el `overflow` del contenedor, o sea desde arriba y no por donde dice `object-position`. Dos síntomas distintos, una sola causa. Con `.dd-hero` delante son dos clases y gana sin `!important`. */ .dd-hero .dd-hero-foto { width: 100%; height: 100%; object-fit: cover; /* Un poco por encima del centro: en fotos de deporte la acción y las caras suelen estar en el tercio superior, y abajo va el titular. */ object-position: center 20%; display: block; } /* Acercamiento lento mientras la nota está a la vista. La animación arranca de cero cada vez que la nota se vuelve visible. */ .dd-hero.con-zoom .dd-hero-nota.es-visible .dd-hero-foto { animation: dd-hero-zoom 6800ms cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes dd-hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } } /* El velo. Sin él, un titular blanco sobre una foto clara no se lee — y el diagnóstico exige 4.5:1 de contraste como mínimo. Es más denso abajo, que es donde va el texto, y arriba lo justo para que el encabezado se despegue. */ .dd-hero-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 12, 36, .72) 0%, rgba(0, 12, 36, .15) 26%, rgba(0, 12, 36, 0) 44%, rgba(0, 12, 36, .55) 82%, rgba(0, 12, 36, .90) 100%); } .dd-hero-cuerpo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 15; padding: 0 24px 52px; } .dd-hero-caja { max-width: 1320px; margin: 0 auto; } /* 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-etiqueta { display: block; margin-bottom: 12px; color: #fff; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; font-weight: 600; } .dd-hero-titular { margin: 0 0 16px; max-width: 34ch; font-family: Archivo, system-ui, sans-serif; font-size: 46px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); } /* Dos nombres de clase antes del enlace, a propósito: el color de enlaces que define el kit de Elementor tiene el mismo peso que `.dd-hero-titular a` y, al empatar, ganaba por orden de carga. El titular salía en color acento sobre una foto oscura en vez de blanco. */ .dd-hero .dd-hero-titular a, .dd-hero .dd-hero-titular a:visited { color: #fff; text-decoration: none; } /* SIN PUNTO NARANJA al cierre del titular (oct-2026, correcciones de Lizeth). Era la firma de marca del mockup; la redaccion pidio quitarlo. */ .dd-hero .dd-hero-titular a:hover { color: #FC9901; text-decoration: none; } .dd-hero .dd-hero-titular a:focus-visible { color: #FC9901; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .dd-hero-firma { display: flex; align-items: center; gap: 11px; color: #D7DAE3; font-family: Inter, system-ui, sans-serif; font-size: 14.5px; } .dd-hero-autor { font-weight: 700; color: #fff; } .dd-hero-punto { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .5); flex: 0 0 auto; } /* -------- Controles -------- */ .dd-hero-flechas { position: absolute; right: 40px; bottom: 120px; z-index: 16; display: flex; gap: 10px; } /* `padding: 0` no es de adorno: el tema le pone 15px/30px a todos los botones, y con `box-sizing: border-box` ese relleno impone un ancho mínimo de 62px. El botón salía ovalado en vez de redondo. */ .dd-hero .dd-hero-flecha { width: 46px; height: 46px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms, transform 150ms; } .dd-hero-flecha:hover { background: rgba(255, 255, 255, .15); } .dd-hero-flecha:active { transform: scale(.92); } .dd-hero-flecha svg { width: 18px; height: 18px; } .dd-hero-barras { position: absolute; right: 40px; bottom: 60px; z-index: 16; display: flex; gap: 3px; } /* La barrita se ve fina, pero se puede tocar en 44×44. El diseño pide un indicador delgado; la norma pide algo en lo que se pueda dar sin apuntar. EL ÁREA TÁCTIL VA EN UN PSEUDO-ELEMENTO, no en el botón. Antes el botón medía 44×44 de verdad, y eso ocupa 44px de alto en la maqueta: con las barras centradas bajo el texto, la caja invisible se comía la línea del autor —12px de solape, medidos—. Un pseudo-elemento posicionado no ocupa sitio: se toca igual y no empuja nada. Es la técnica del mockup aprobado (`site.css`, bloque de 1080px). */ .dd-hero .dd-hero-barra-boton { position: relative; width: auto; height: auto; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .dd-hero .dd-hero-barra-boton::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 44 de ALTO siempre: por ahi no hay vecino con quien chocar. El ANCHO no puede ser 44 a ciegas — ver la nota de abajo. */ width: 100%; height: 44px; } /* ========================================================================= POR QUE EL ANCHO TACTIL NO ES 44px FIJO ------------------------------------------------------------------------- Lo era, y estaba mal. Las barritas miden 16px (28 la activa) y estaban separadas 3px, o sea unos 30px entre centros. Un area de 44px de ancho centrada en cada una se METIA ENCIMA de la vecina: medido, se solapaban entre 14 y 20px. El efecto no era teorico. Comprobado con `elementFromPoint`: tocando 3px a la derecha de la primera barrita, quien recibia el toque era LA SEGUNDA. El lector pedia una nota y le salia otra. Un area tactil que invade a la de al lado es peor que una pequena: la pequena falla y no pasa nada; la que se solapa acierta en el objetivo equivocado, y encima parece que el sitio hace cosas raras solas. El arreglo tiene dos partes: - la separacion sube a 22px, para que quepan 44 entre centros; - el area de cada boton ocupa su propio hueco, sin invadir al vecino. ========================================================================= */ .dd-hero-barras { gap: 4px; } /* EL AREA CRECE CON `padding`, Y SIN MARGEN NEGATIVO. Ese detalle es el arreglo entero. Un elemento de una fila flexible NO PUEDE solaparse con su vecino si su caja crece con relleno: la fila los reparte. En cuanto se le pone margen negativo para «recuperar» el espacio visual, la caja vuelve a invadir a la de al lado — probado, volvieron los 14px de solape. Asi que no se recupera: las barritas quedan mas separadas, y eso es lo correcto para algo que se toca con el dedo. */ /* 14px de relleno a cada lado, no 10. La barrita visible mide 16px, así que con 14 a cada lado el botón entero llega a 44 de ancho — el mínimo del proyecto— y con 20 arriba y abajo llega a 44 de alto. Ahora sí cumple los 44x44 completos. Y NO reaparece el solape que se documenta arriba, porque aquel venía de los MARGENES NEGATIVOS, no del relleno: entre hermanos de un `flex` que sólo usan relleno, cada uno ocupa su sitio y pisarse es imposible. La cuenta a 375px: tres botones de 44, el activo de 56 y tres separaciones de 4 son 200px sobre los 343 disponibles. Entra sobrado. */ .dd-hero .dd-hero-barra-boton { padding: 20px 14px; } /* EL ACTIVO SE DISTINGUE POR LARGO, NO SOLO POR COLOR. Es una regla no negociable del diagnóstico: el estado activo no puede depender únicamente del color. Estuvo mal: las cuatro barras medían 28px y solo cambiaba el naranja, así que para quien no distingue ese naranja del blanco translúcido no había ninguna señal. El propio proyecto ya lo hacía bien en el rotador de staff (`.dd-rot-barra`, 16 → 28). El hero se había quedado con la versión vieja. */ .dd-hero-barra { display: block; width: 16px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .4); transition: background 240ms, width 240ms cubic-bezier(.16, 1, .3, 1); } .dd-hero-barra.es-visible { width: 28px; background: #FC9901; } .dd-hero-flecha:focus-visible, .dd-hero-barra-boton:focus-visible { /* EXCEPCION: va sobre una foto. Ver la nota de `--dd-foco-inv`. */ outline: var(--dd-foco-inv); outline-offset: 3px; } /* -------- Quien pidió menos movimiento -------- */ /* Sin fundido, sin zoom y sin pasar solo (eso lo apaga el JavaScript). Las flechas y las barras siguen funcionando: se puede ver todo, a mano. */ @media (prefers-reduced-motion: reduce) { .dd-hero-nota { transition: none; } .dd-hero.con-zoom .dd-hero-nota.es-visible .dd-hero-foto { animation: none; } .dd-hero-barra { transition: none; } } /* -------- Táctil: móvil Y TABLET -------- El corte va en 1080, no en 767, y eso importa. Estaba en 767 y dejaba una franja huérfana entre 768 y 1080 —iPad vertical, tablets Android— donde las flechas seguían en `right: 40px; bottom: 120px`, o sea encima del titular, que a ese ancho ya ocupa la pantalla entera. El mockup aprobado corta en 1080 por ese motivo. */ @media (max-width: 1080px) { /* Fuera las flechas: en una pantalla táctil se cambia de nota deslizando. Fue un pedido explícito del cliente. El gesto lo hace `dd-core.js`; hasta ahora las flechas se ocultaban y NADIE lo reemplazaba. */ .dd-hero-flechas { display: none; } /* Las barras pasan a ser el único control visible, así que se centran debajo del texto en vez de esconderse en una esquina. Estaban en `left: 12px; bottom: 4px`, encima de la línea del autor. */ .dd-hero-barras { left: 0; right: 0; bottom: 24px; /* 4px, no 8: el hueco entre barritas lo pone ahora el relleno de cada boton. Ver la nota del area tactil mas arriba. */ gap: 4px; justify-content: center; } /* El carril para las barras. Sin esto el texto llega hasta abajo y se solapa con ellas. */ .dd-hero-cuerpo { padding-bottom: 56px; } } /* -------- Móvil -------- */ @media (max-width: 767px) { .dd-hero { height: 72vh; min-height: 460px; } /* 22px de relleno lateral, el mismo que `.wrap` del mockup: así el titular arranca en la misma línea vertical que el logo y el menú. Estaba en 20 y se notaba el desfase de 4px contra la barra. */ .dd-hero-cuerpo { padding: 0 22px 56px; } .dd-hero-titular { font-size: 28px; max-width: none; } .dd-hero-etiqueta { margin-bottom: 8px; font-size: 12.5px; } } /* ========================================================================= LO MÁS LEÍDO ========================================================================= */ .dd-leidas .dd-leidas-titulo { font-family: Archivo, system-ui, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #000C24; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid #FC9901; } .dd-leidas-lista { list-style: none; margin: 0; padding: 0; counter-reset: dd-leidas; } .dd-leidas-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; } .dd-leidas-item + .dd-leidas-item { border-top: 1px solid #E7E8EC; } /* El número grande al costado. Va como `aria-hidden` porque la lista ya es un
    : un lector de pantalla anuncia la posición por su cuenta y, si no, la leería dos veces. */ .dd-leidas-numero { font-family: Archivo, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1; color: #9C5F0A; /* oscuro: el #FC9901 del logo sobre blanco da 2,2:1 */ flex: 0 0 auto; min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; } .dd-leidas-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .dd-leidas-seccion { font-family: Inter, system-ui, sans-serif; /* 13px y no 11. Es un rótulo, así que puede ir por debajo de los 16px del texto de lectura, pero 11px con mayúsculas y letra espaciada no lo lee nadie con la vista cansada — y el lector de este diario tiene 20 años de costumbre encima. 13px es el piso que se fija para rótulos. */ font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6B6E7A; } /* Área táctil de 44px, como en el resto del sitio. El titular puede ocupar una sola línea y aun así hay que poder darle con el dedo. */ /* EL TITULAR SE LEE ENTERO. NO SE RECORTA. ------------------------------------------------------------------------- Aquí había un recorte a dos líneas, y estaba roto de tres formas a la vez: 1. `-webkit-line-clamp` NUNCA se aplicó. Exige `display: -webkit-box` y aquí había `display: flex`. El comentario original ya sospechaba que «necesita un display que no siempre sobrevive» — no sobrevivía nunca. 2. El recorte quedaba entonces en manos de `max-height: 2.6em` = 39px… pero `min-height: 44px` le gana. La caja medía 44 y el texto 51. 3. Con `align-items: center`, esos 7px de sobra se cortaban ARRIBA Y ABAJO a la vez. Por eso el titular se veía partido a media línea, en lugar de terminar en puntos suspensivos. El resultado era lo peor de las dos opciones: recortaba, y encima lo hacía mal y sin avisar. Se quita el recorte. Un diario no trunca titulares a media palabra, y esta es una lista de ocho: que una nota ocupe tres líneas no rompe nada. El `min-height` se queda porque es el área táctil, no un tope. */ .dd-leidas-enlace { display: block; padding: 4px 0; min-height: 44px; font-family: Archivo, system-ui, sans-serif; /* 16px, el mínimo del proyecto para texto de lectura. Son titulares de nota, no un rótulo suelto: se leen. */ font-size: 16px; font-weight: 500; line-height: 1.35; color: #000C24; text-decoration: none; /* Una palabra sin espacios —una URL pegada en un titular— no puede empujar la columna. */ overflow-wrap: break-word; } .dd-leidas-enlace:hover, .dd-leidas-enlace:focus-visible { color: #9C5F0A; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================= ROTADOR DE STAFF ========================================================================= */ .dd-staff { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 0 0 auto; border-left: 1px solid rgba(255, 255, 255, .28); padding-left: 16px; } /* Los tres cargos ocupan la MISMA celda de la rejilla, uno encima de otro. Así están todos en el HTML —un lector de pantalla los lee los tres— pero solo uno se ve, y el alto no cambia al rotar. */ .dd-staff-texto { display: grid; min-width: 132px; } .dd-staff-persona { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(4px); transition: opacity 240ms cubic-bezier(.16, 1, .3, 1), transform 240ms cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .dd-staff-persona.es-visible { opacity: 1; transform: none; pointer-events: auto; } .dd-staff-cargo { font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .07em; text-transform: uppercase; color: #FC9901; } .dd-staff-nombre { font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; color: #fff; } .dd-staff-puntos { display: flex; gap: 2px; } /* El punto se ve de 6px, pero el botón mide 24×24. El diseño pide un punto discreto; la norma pide algo en lo que se pueda hacer clic sin apuntar con lupa. Se resuelve separando las dos cosas: el botón es grande y transparente, y el punto se dibuja dentro. 24px es el mínimo de la norma para objetivos de puntero (WCAG 2.5.8). Este bloque solo se muestra en escritorio —se esconde por debajo de 1300px—, así que el contexto es mouse, no dedo. */ .dd-staff-punto { width: 24px; height: 24px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .dd-staff-punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background 150ms, transform 150ms; } .dd-staff-punto.es-visible::before { background: #FC9901; transform: scale(1.25); } .dd-staff-punto:hover::before { background: rgba(255, 255, 255, .6); } /* El foco por teclado tiene que verse: es la única pista de dónde está parado quien navega sin mouse. */ .dd-staff-punto:focus-visible { outline: var(--dd-foco); outline-offset: var(--dd-foco-sep); border-radius: 50%; } /* Quien pidió menos movimiento no ve la transición. El cambio de persona igual funciona con los puntos; simplemente no se desvanece. */ @media (prefers-reduced-motion: reduce) { .dd-staff-persona { transition: none; transform: none; } .dd-staff-punto::before { transition: none; } } /* ========================================================================= CINTILLO DE ÚLTIMA HORA ========================================================================= */ .dd-cintillo { display: flex; align-items: stretch; background: #000C24; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); } .dd-cintillo-etiqueta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 13px 20px 13px 24px; color: #fff; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } /* El punto que late. Marca «esto está vivo» sin decir nada. */ .dd-cintillo-punto { width: 8px; height: 8px; border-radius: 50%; background: #FC9901; flex: 0 0 auto; animation: dd-latido 1.8s infinite; } @keyframes dd-latido { 0% { box-shadow: 0 0 0 0 rgba(252, 153, 1, .5); } 70% { box-shadow: 0 0 0 7px rgba(252, 153, 1, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 153, 1, 0); } } /* El marco recorta lo que sobresale y difumina los bordes, para que los titulares no aparezcan y desaparezcan de golpe. */ .dd-cintillo-marco { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .dd-cintillo-pista { display: flex; width: max-content; animation: dd-desplazar 32s linear infinite; will-change: transform; } .dd-cintillo-pista-mitad { display: flex; gap: 44px; padding-right: 44px; } /* Se desplaza exactamente la mitad: como el contenido está duplicado, al llegar ahí la imagen es idéntica al punto de partida y el giro no se nota. */ @keyframes dd-desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Se detiene para poder leer. Un cintillo que no para es decoración. */ .dd-cintillo:hover .dd-cintillo-pista, .dd-cintillo:focus-within .dd-cintillo-pista { animation-play-state: paused; } /* Área táctil de 44px, como en el resto del sitio. Son enlaces reales y en un teléfono hay que poder darles sin apuntar. El alto no agranda el cintillo: la franja ya mide más que eso. */ .dd-cintillo-pista a { display: inline-flex; align-items: center; min-height: 44px; color: #C7CAD4; font-family: Inter, system-ui, sans-serif; /* 16px. Son TITULARES DE NOTA, no un rótulo: se leen, y encima se leen en movimiento, que ya cuesta bastante más. El mínimo de 16 del proyecto vale acá con más razón que en un texto quieto. */ font-size: 16px; line-height: 1.4; white-space: nowrap; text-decoration: none; transition: color 150ms; } .dd-cintillo-pista a:hover, .dd-cintillo-pista a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .dd-cintillo-pista b { color: #FC9901; margin-right: 7px; font-weight: 700; } /* -------- Quien pidió menos movimiento, no ve movimiento -------- Es la regla 2.3 de accesibilidad. Para alguien con migraña, mareo o epilepsia fotosensible, un texto que se desplaza sin parar no es un detalle de diseño: es una barrera. Los titulares se muestran quietos, uno debajo de otro, y se sigue pudiendo leer todo. */ @media (prefers-reduced-motion: reduce) { .dd-cintillo-pista { animation: none; width: 100%; } .dd-cintillo-punto { animation: none; } .dd-cintillo-marco { -webkit-mask-image: none; mask-image: none; overflow-x: auto; } .dd-cintillo-pista-mitad[aria-hidden="true"] { display: none; } } /* -------- Móvil -------- La etiqueta pasa arriba: en 375px, «Última hora» más un titular en la misma línea deja al titular sin sitio. */ @media (max-width: 767px) { /* LA ETIQUETA Y LOS TITULARES, EN LA MISMA LÍNEA. Aquí decía `flex-direction: column`: la etiqueta arriba y el cintillo debajo, 94px de alto para una franja que en escritorio mide 56. En un teléfono, donde el alto es lo que escasea, era el peor sitio para gastar 40px de más — y además rompía la lectura: «Última hora» dejaba de ser la marca de la franja y pasaba a parecer un título de sección. Se queda en fila. Lo que se recorta es el relleno, no la maqueta. */ .dd-cintillo-etiqueta { padding: 10px 12px 10px 16px; font-size: 11.5px; letter-spacing: .04em; } /* `min-width: 0` es lo que deja al cintillo ocupar lo que sobra sin empujar a la etiqueta: sin esto, un elemento flex no baja de su ancho de contenido y los titulares largos desbordarían la franja. */ .dd-cintillo-marco { min-width: 0; flex: 1 1 auto; } .dd-cintillo-pista-mitad { gap: 32px; padding-right: 32px; } } /* ========================================================================= PODCAST ========================================================================= Adentro del recuadro hay otra página web, servida por iHeart. Sus colores, su tipografía y su botón de play son suyos y desde acá no se tocan: es una regla del navegador, no una limitación nuestra. Todo lo de acá abajo es el marco: lo que rodea al recuadro y hace que se lea como una sección del diario y no como el anuncio que hoy parece. ========================================================================= */ .dd-podcast { background: #F6F7F9; padding: 56px 24px; } .dd-podcast-caja { /* El ancho máximo lo pone Elementor. Sin él, un reproductor de audio estirado a 1320px son cuatro controles pequeños flotando en el vacío. */ margin: 0 auto; } .dd-podcast-cabecera { margin-bottom: 20px; } .dd-podcast-rotulo { margin: 0 0 6px; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; /* El mismo tratamiento que la etiqueta «Publicidad», por la misma razón: decir qué es esto ANTES de que cargue, para que nadie se quede mirando un rectángulo gris preguntándose si el sitio se rompió. */ letter-spacing: .14em; text-transform: uppercase; color: #6B6E7A; } .dd-podcast .dd-podcast-titulo { margin: 0; font-family: Archivo, system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #000C24; } .dd-podcast-bajada { margin: 10px 0 0; font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.5; /* #6B6E7A sobre #F6F7F9 da 4.6:1 — pasa el mínimo de 4.5 que pide el diagnóstico, y por poco. No aclarar este gris. */ color: #6B6E7A; } /* El marco. `overflow: hidden` + `border-radius` es lo que le recorta las esquinas a la página de iHeart, que viene cuadrada. */ .dd-podcast-marco { position: relative; overflow: hidden; border-radius: 16px; background: #FFFFFF; border: 1px solid #E7E8EC; /* El alto lo pone Elementor (300px por defecto, igual que hoy). Se reserva acá para que la página no dé un salto cuando el reproductor termina de cargar: con `loading="lazy"` llega tarde a propósito, y sin alto reservado el contenido de abajo se corre solo. */ height: 300px; } .dd-podcast-reproductor { display: block; width: 100%; height: 100%; border: 0; } .dd-podcast-pie { margin: 16px 0 0; } .dd-podcast-enlace { font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 600; color: #9C5F0A; text-decoration: none; /* 44px de alto para el dedo, sin mover el texto de su sitio: el relleno crece hacia afuera y el margen negativo lo compensa. */ display: inline-block; padding: 12px 4px; margin: -12px -4px; } .dd-podcast-enlace:hover, .dd-podcast-enlace:focus-visible { text-decoration: underline; } /* Aviso solo para quien edita. En el sitio público no aparece nunca. */ .dd-podcast-aviso { padding: 20px; border: 1px dashed #FC9901; border-radius: 12px; font-family: Inter, system-ui, sans-serif; font-size: 14px; color: #9C5F0A; background: #FFF8EE; } @media (max-width: 767px) { .dd-podcast { padding: 40px 20px; } .dd-podcast .dd-podcast-titulo { font-size: 22px; } /* NO se achica en el teléfono. Estaba en 15px, y achicar el cuerpo del texto justo donde la pantalla es más chica es al revés de lo que hay que hacer. El mínimo del proyecto para texto de lectura son 16px, y vale igual en móvil. Se deja escrito para que no vuelva a bajarse. */ .dd-podcast-bajada { font-size: 16px; } } /* ========================================================================= COLUMNA DESTACADA — la banda que va debajo del hero ========================================================================= Pieza del diseño aprobado (`.feature` en la propuesta). El degradado en forma de abanico detrás del texto no es adorno: sin él, un titular blanco sobre una foto clara no llega a 4.5:1 y el diagnóstico pide ese mínimo. ========================================================================= */ .dd-destacado { position: relative; overflow: hidden; display: flex; align-items: stretch; min-height: 424px; background: #000C24; border-top: 20px solid #000C24; } .dd-destacado-fondo { position: absolute; inset: 0; overflow: hidden; } .dd-destacado-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .dd-destacado-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,12,36,.50) 0%, rgba(0,12,36,.08) 45%, rgba(0,12,36,.22) 100%); } .dd-destacado-caja { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; } .dd-destacado-texto { position: relative; z-index: 2; max-width: 560px; } /* El abanico oscuro que nace en la esquina inferior izquierda. Va detrás del texto (`z-index: -1`) y se sale de la caja a propósito, para que el degradado no tenga un borde visible justo donde termina el titular. */ .dd-destacado-texto::before { content: ""; position: absolute; z-index: -1; left: -64px; right: -64px; top: -48px; bottom: -56px; pointer-events: none; background: radial-gradient(120% 150% at 0% 100%, rgba(0,12,36,.96) 0%, rgba(0,12,36,.85) 30%, rgba(0,12,36,.45) 55%, transparent 78%); } /* 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-destacado-etiqueta { display: block; margin-bottom: 10px; color: #fff; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; font-weight: 600; } /* Dos clases: la hoja del kit de Elementor define `h2` y le gana a una sola. Ver la nota del principio de este archivo. */ .dd-destacado .dd-destacado-titular { margin: 0 0 14px; max-width: 17ch; font-family: Archivo, system-ui, sans-serif; font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: -.015em; color: #fff; } .dd-destacado .dd-destacado-titular a, .dd-destacado .dd-destacado-titular a:visited { color: #fff; text-decoration: none; transition: color 150ms cubic-bezier(.16, 1, .3, 1); } /* Hover en ACENTO, sin subrayado. Sobre la foto oscura el naranja destaca sin ensuciar el titular con una linea que le cruza dos renglones. Aca el color de marca si funciona: no compite con nada, porque en esta banda no hay barras de seccion ni botones naranjas al lado. */ .dd-destacado .dd-destacado-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-destacado .dd-destacado-titular a:focus-visible { color: #FC9901; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .dd-destacado-firma { display: flex; align-items: center; gap: 11px; font-family: Inter, system-ui, sans-serif; font-size: 14px; color: #B7BBC8; } .dd-destacado-autor { font-weight: 600; color: #fff; } .dd-destacado-punto { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); flex: 0 0 auto; } /* El retrato recortado. Sale por debajo del borde a propósito: es lo que da la sensación de que la persona está apoyada en la banda y no pegada encima. */ .dd-destacado-cara { position: absolute; z-index: 1; right: -16px; bottom: -24px; width: 354px; } .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 { min-height: 408px; } .dd-destacado .dd-destacado-titular { font-size: 32px; max-width: 18ch; } .dd-destacado-cara { width: 300px; right: -16px; bottom: -20px; } .dd-destacado-texto::before { left: -48px; right: -56px; } } @media (max-width: 767px) { .dd-destacado { min-height: 340px; } .dd-destacado .dd-destacado-titular { font-size: 26px; max-width: none; } /* EL RETRATO SE QUEDA, TAMBIÉN EN MÓVIL. Aquí decía `display: none` con el argumento de que competía 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 para que el texto siga encima. La decisión está firmada en el mockup como «Opción A, aprobada Dir. Arte». La cara de Hugo Illera es lo que le da identidad a la columna. Sin ella, en móvil la banda es un rectángulo azul con texto. */ .dd-destacado-cara { display: block; position: absolute; z-index: 1; right: -24px; bottom: -16px; width: 340px; } /* El texto por encima del retrato. */ .dd-destacado-caja, .dd-destacado-texto { position: relative; z-index: 2; } /* EL DEGRADADO, RECALCULADO PARA ESTE ANCHO. Sin esto el punto anterior es un error de contraste: un degradado pensado para 1320px, aplicado a una caja de 375, cubre una proporción completamente distinta de la foto y el titular blanco cae sobre la zona clara. Es un abanico desde la esquina inferior izquierda, que es justo donde va el texto. */ .dd-destacado-texto::before { content: ""; position: absolute; z-index: -1; left: -22px; right: -48px; top: -40px; bottom: -40px; pointer-events: none; background: radial-gradient(90% 135% at 0% 100%, rgba(0, 12, 36, .95) 0%, rgba(0, 12, 36, .82) 26%, rgba(0, 12, 36, .40) 48%, transparent 66%); } .dd-destacado-caja { padding: 32px 20px; } } @media (max-width: 480px) { /* En pantallas muy chicas el retrato baja de 340 a 260: a 340px se comía más de la mitad del ancho y el titular se partía en cinco líneas. */ .dd-destacado-cara { width: 260px; right: -20px; bottom: -12px; } } /* ========================================================================= CIFRAS — la banda de números ========================================================================= */ .dd-cifras { background: #000C24; padding: 44px 24px; } .dd-cifras-rejilla { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .dd-cifra-numero { font-family: Archivo, system-ui, sans-serif; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; /* Cifras de ancho fijo: sin esto el número «baila» de izquierda a derecha mientras sube, porque el 1 es más angosto que el 8. */ font-variant-numeric: tabular-nums; } .dd-cifra-sufijo { color: #FC9901; } .dd-cifra-texto { margin-top: 8px; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; color: #9CA1B5; } @media (max-width: 1080px) { .dd-cifras-rejilla { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } } @media (max-width: 480px) { .dd-cifra-numero { font-size: 32px; } } /* ========================================================================= RESULTADOS Y PROGRAMACION ========================================================================= Es una `` de verdad, no una rejilla de `div`s. Son datos tabulares: un lector de pantalla tiene que poder decir «Junior, puntos, 40», y para eso necesita saber que la columna se llama «Pts». Con `div`s lee cuatro números sueltos sin ninguna relación entre ellos. ========================================================================= */ .dd-resultados { background: #000C24; padding: 56px 24px; } .dd-resultados-rejilla { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .dd-panel { background: #0A142E; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; } .dd-panel-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); } .dd-panel .dd-panel-titulo { margin: 0; font-family: Archivo, system-ui, sans-serif; font-size: 16px; font-weight: 700; color: #fff; } .dd-panel-sub { font-family: Inter, system-ui, sans-serif; font-size: 12.5px; color: #8A90A3; } /* -------- Tabla de posiciones -------- */ .dd-tabla { width: 100%; border-collapse: collapse; font-family: Inter, system-ui, sans-serif; font-size: 14px; font-variant-numeric: tabular-nums; } .dd-tabla th { padding: 9px 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #7D8299; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); } .dd-tabla th.dd-col-club { text-align: left; } /* El subrayado punteado que el navegador le pone a `abbr` sobre fondo oscuro se ve como suciedad. Se quita el estilo pero se conserva el `title`, que es lo que hace el trabajo. */ .dd-tabla abbr[title] { text-decoration: none; border: 0; cursor: help; } .dd-tabla td { padding: 11px 20px; border-bottom: 1px solid rgba(255,255,255,.05); text-align: center; } .dd-tabla tbody tr:last-child td { border-bottom: none; } .dd-tabla tbody tr { transition: background-color 150ms cubic-bezier(.16,1,.3,1); } .dd-tabla tbody tr:hover { background-color: rgba(255,255,255,.045); } .dd-tabla .dd-col-pos { position: relative; width: 26px; color: #fff; font-weight: 600; } /* La marca naranja de los que clasifican, pegada al borde del panel. */ .dd-tabla tr.dd-clasifica .dd-col-pos::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: #FC9901; } .dd-tabla .dd-col-club { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; color: #E7E9EE; font-weight: 500; } .dd-tabla .dd-col-club span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-escudo { width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; } .dd-tabla .dd-col-pj { width: 34px; color: #8A90A3; } .dd-tabla .dd-col-pts { width: 40px; color: #fff; font-weight: 700; } /* -------- El marco de un embebido dentro de un panel -------- Adentro hay OTRA pagina web (WPlay, DataFactory, futbolenlatv). Sus colores y su tipografia son de quien la sirve y desde aca no se tocan: es una regla del navegador. Lo unico nuestro es el marco. El alto se reserva desde Elementor para que la pagina no de un salto cuando el embebido termina de cargar: con `loading="lazy"` llega tarde a proposito, y sin alto reservado todo lo de abajo se corre solo. */ .dd-embebido-marco { position: relative; height: 420px; overflow: hidden; } .dd-embebido { display: block; width: 100%; height: 100%; border: 0; } /* Aviso solo para quien edita. En el sitio publico no aparece nunca. */ .dd-panel-aviso { grid-column: 1 / -1; padding: 20px; border: 1px dashed #FC9901; border-radius: 12px; font-family: Inter, system-ui, sans-serif; font-size: 14px; color: #F0B860; background: rgba(252, 153, 1, .08); } /* -------- Programación de TV -------- */ .dd-tv { list-style: none; margin: 0; padding: 0; } .dd-tv-fila { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background-color 150ms cubic-bezier(.16,1,.3,1); } .dd-tv-fila:last-child { border-bottom: none; } .dd-tv-fila:hover { background-color: rgba(255,255,255,.045); } .dd-tv-hora { font-family: Archivo, system-ui, sans-serif; font-size: 14px; font-weight: 600; color: #fff; text-align: center; font-variant-numeric: tabular-nums; } .dd-tv-partido { font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 500; color: #E7E9EE; } .dd-tv-partido small { display: block; font-size: 11.5px; font-weight: 400; color: #8A90A3; } .dd-tv-canal { padding: 3px 8px; border: 1px solid rgba(252, 153, 1,.4); border-radius: 5px; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; color: #FC9901; white-space: nowrap; } @media (max-width: 1080px) { .dd-resultados-rejilla { grid-template-columns: 1fr; } } @media (max-width: 480px) { .dd-tabla th, .dd-tabla td { padding-left: 12px; padding-right: 12px; } .dd-tv-fila { padding-left: 14px; padding-right: 14px; } } /* ========================================================================= BOLETIN ========================================================================= */ .dd-boletin { padding: 56px 24px; } .dd-boletin-caja { max-width: 1320px; margin: 0 auto; padding: 44px; border-radius: 16px; background: linear-gradient(120deg, #000C24, #0A142E); display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; } .dd-boletin .dd-boletin-titulo { margin: 0 0 10px; font-family: Archivo, system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.15; color: #fff; } .dd-boletin-bajada { margin: 0; font-family: Inter, system-ui, sans-serif; font-size: 15px; color: #B7BBC8; } .dd-boletin-etiqueta { display: block; margin-bottom: 8px; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 500; color: #C7CAD4; } .dd-boletin-campos { display: flex; gap: 10px; } .dd-boletin-correo { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid #2A3350; border-radius: 10px; background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: 15px; outline: none; transition: border-color 150ms; } .dd-boletin-correo::placeholder { color: #7D8299; } .dd-boletin-correo:focus { border-color: #FC9901; } .dd-boletin .dd-boletin-boton { flex: 0 0 auto; height: 50px; min-height: 44px; padding: 0 28px; border: 0; border-radius: 60px; background: #FC9901; /* Tinta, no blanco: el blanco sobre el naranja del logo da 2,2:1; la tinta, 9:1. */ color: #000C24; font-family: Inter, system-ui, sans-serif; font-weight: 600; cursor: pointer; transition: background 150ms, transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms cubic-bezier(.16,1,.3,1); } .dd-boletin .dd-boletin-boton:hover { background: #E08A1A; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(252, 153, 1,.28); } .dd-boletin .dd-boletin-boton:active { transform: scale(.97); } /* El aviso de «todavía no está conectado». Nace oculto y solo aparece cuando alguien intenta suscribirse de verdad. */ .dd-boletin-respuesta { display: none; margin: 10px 0 0; font-family: Inter, system-ui, sans-serif; font-size: 13.5px; color: #F0B860; } .dd-boletin-respuesta.es-visible { display: block; } .dd-boletin-nota { margin: 9px 0 0; font-family: Inter, system-ui, sans-serif; font-size: 12px; color: #7D8299; } @media (max-width: 1080px) { .dd-boletin-caja { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 560px) { .dd-boletin-caja { padding: 30px 22px; } .dd-boletin .dd-boletin-titulo { font-size: 23px; } /* El campo y el botón uno debajo del otro: a 375px, en fila, el botón se come el campo y queda un cuadrito donde no se ve lo que uno escribe. */ .dd-boletin-campos { flex-direction: column; } .dd-boletin .dd-boletin-boton { width: 100%; } } /* ========================================================================= ROTADOR GENERICO — un comportamiento, no una maqueta ========================================================================= Cualquier contenedor de Elementor con la clase `dd-rotador` muestra sus hijos de a uno, alternandolos. El contenido y el estilo son suyos; nosotros solo ponemos el turno. Los turnos se apilan en el mismo sitio con `grid-area`, y no con `position:absolute`, para que el contenedor conserve el ALTO del mas alto. Con posicionamiento absoluto el contenedor colapsa a cero y todo lo de abajo se sube encima. ========================================================================= */ .dd-rotador { display: grid !important; } .dd-rotador > .e-con-inner { display: grid; } /* OJO CON COMO SE OCULTA UN TURNO. `visibility: hidden` lo saca del arbol de accesibilidad: un lector de pantalla deja de verlo. Con tres cargos de la redaccion eso significa que quien no ve la pantalla se entera de UNO, el que le haya tocado al entrar. Con `opacity: 0` el elemento sigue estando para el lector de pantalla —los tres cargos se leen— y `pointer-events: none` evita que el turno invisible se coma los clics del que si se ve, que es lo unico que `visibility` estaba resolviendo. */ .dd-rotador .dd-rotador-turno { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(.16, 1, .3, 1); } .dd-rotador .dd-rotador-turno.es-visible { opacity: 1; pointer-events: auto; } /* Quien pidio menos movimiento ve el primero, quieto. El JavaScript ya no lo hace pasar; esto quita ademas el fundido. */ @media (prefers-reduced-motion: reduce) { .dd-rotador .dd-rotador-turno { transition: none; } } /* ========================================================================= MARQUESINA GENERICA ========================================================================= El JavaScript envuelve el contenido en la ventana y la pista, y clona lo de adentro. Aca solo va el recorte y el movimiento. ========================================================================= */ .dd-marquesina { overflow: hidden; } .dd-marq-ventana { overflow: hidden; width: 100%; min-width: 0; } .dd-marq-pista { display: flex; width: max-content; /* La duracion la pone el JavaScript segun el ancho real: un cintillo con tres titulares no tiene por que ir cinco veces mas rapido que uno con quince. */ animation: dd-desplazar 32s linear infinite; will-change: transform; } /* La lista de Elementor viene en rejilla; aca tiene que ir en fila. */ .dd-marq-pista .elementor-posts-container { display: flex !important; flex-wrap: nowrap; width: max-content; gap: 0; } .dd-marq-pista .elementor-post { flex: 0 0 auto; margin: 0; padding: 0 22px 0 0; border: 0; white-space: nowrap; } /* Se detiene para poder leer. Un cintillo que no para es decoracion, no informacion — y con el foco puesto tiene que parar tambien, o no se puede navegar con el teclado. */ .dd-marquesina:hover .dd-marq-pista, .dd-marquesina:focus-within .dd-marq-pista { animation-play-state: paused; } /* Quien pidio menos movimiento no ve movimiento. Se queda quieto y se puede desplazar a mano: la informacion sigue estando. */ @media (prefers-reduced-motion: reduce) { .dd-marq-pista { animation: none; } .dd-marq-ventana { overflow-x: auto; scrollbar-width: thin; } } /* ========================================================================= CONTROLES DEL ROTADOR — flechas y barras ========================================================================= Los genera el JavaScript, y la distincion importa: no son contenido, son la interfaz del comportamiento. Solo aparecen si el contenedor lleva ademas la clase `dd-rotador-controles`. ========================================================================= */ /* LA LINEA DE BASE DE LOS CONTROLES. Los controles no viven dentro de la columna de texto —estan posicionados sobre el contenedor— asi que su altura hay que darsela a mano. Este numero es la distancia desde el borde de abajo hasta donde termina el texto: el relleno inferior de la columna (20px) mas el aire que queda debajo de ella (otros 52). Va en una variable y no escrito dos veces porque las flechas y las barras dependen del mismo dato: si manana cambia el relleno de la columna, se corrige aca y las dos se acomodan. Antes estaban con numeros sueltos y las barras quedaban 40px por debajo de la firma. */ .dd-rotador-controles { position: relative; --dd-base: 72px; } /* LAS DOS FILAS MIDEN LO MISMO: 112px. Antes las flechas median 102 y las barras 185, asi que compartian el borde derecho pero arrancaban en sitios distintos y se veian corridas una respecto de la otra. Con el mismo ancho quedan encolumnadas. El reparto se hace con `space-between` y no con `gap`, para que el ancho total mande sobre la separacion y no al reves. */ .dd-rot-flechas, .dd-rot-barras { position: absolute; right: 40px; z-index: 16; display: flex; width: 112px; justify-content: space-between; align-items: center; } /* Las flechas van encima de las barras: su alto (44) mas 12 de aire. */ .dd-rot-flechas { bottom: calc(var(--dd-base) + 56px); } /* `padding: 0` y `min-width: 0` no son de adorno: el tema le pone relleno a todos los botones y, con `box-sizing: border-box`, eso impone un ancho minimo de 62px. El boton salia ovalado en vez de redondo. */ .dd-rot-flechas .dd-rot-flecha { width: 46px; height: 46px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms, transform 150ms; } .dd-rot-flecha:hover { background: rgba(255, 255, 255, .15); } .dd-rot-flecha:active { transform: scale(.92); } .dd-rot-flecha svg { width: 18px; height: 18px; } /* Las barras cierran a la misma altura que la ultima linea de texto. */ .dd-rot-barras { bottom: var(--dd-base); } /* La barrita se ve de 28x4, pero el boton mide 44x44. El diseno pide un indicador fino; la norma pide algo en lo que se pueda dar sin apuntar. Se separan las dos cosas: boton grande y transparente, barra dibujada dentro. */ /* 25x44. El alto se mantiene generoso para el dedo; el ancho lo fija la alineacion con las flechas. 25px supera el minimo de 24 que pide la norma para objetivos de puntero (WCAG 2.5.8), aunque queda por debajo de los 44 que preferimos en el resto del sitio — es el precio de que las dos filas midan lo mismo, y en movil se recupera (ver mas abajo). */ .dd-rot-barras .dd-rot-barra-boton { width: 25px; height: 44px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .dd-rot-barra { display: block; width: 20px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .4); transition: background 240ms; } .dd-rot-barra-boton.es-visible .dd-rot-barra { background: #FC9901; } .dd-rot-flecha:focus-visible, .dd-rot-barra-boton:focus-visible { /* EXCEPCION: va sobre una foto. Ver la nota de `--dd-foco-inv`. */ outline: var(--dd-foco-inv); outline-offset: 3px; } /* En movil y tablet el hero se pasa DESLIZANDO, como pidio el cliente: las flechas se van y las barras quedan centradas debajo del texto. */ @media (max-width: 1080px) { .dd-rot-flechas { display: none; } /* Sin flechas no hay con que alinearse, asi que las barras recuperan su area tactil completa y se centran debajo del texto. */ .dd-rot-barras { left: 0; right: 0; bottom: 18px; width: auto; gap: 8px; justify-content: center; } .dd-rot-barras .dd-rot-barra-boton { width: 44px; } /* El estado activo no puede depender solo del color: es una regla del proyecto. La barra activa ademas es mas larga. */ .dd-rot-barra { width: 16px; } .dd-rot-barra-boton.es-visible .dd-rot-barra { width: 28px; } } /* ========================================================================= BARRA DE PROGRESO DE LECTURA ========================================================================= La linea fina de arriba que se va llenando a medida que se baja. Se activa poniendole la clase `dd-con-progreso` a la barra del encabezado. SE HACE CON CSS, NO CON JAVASCRIPT, y la diferencia no es de estilo: una animacion guiada por scroll corre en el COMPOSITOR del navegador, o sea fuera del hilo principal. En este sitio el hilo principal se lo pelean Elementor, Astra, AdSense, Google Ad Manager y HBAgency; una barra movida por un `scroll` de JavaScript se veria a tirones justo cuando hay anuncios cargando — que es siempre. Safari y Firefox todavia no lo admiten, asi que para ellos hay un respaldo en JavaScript que escribe la variable `--dd-avance`. El aspecto es el mismo. ========================================================================= */ .dd-progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; /* por encima de la barra pegada, que esta en 999 */ pointer-events: none; overflow: hidden; } .dd-progreso-relleno { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #FC9901, #FFC266); transform-origin: 0 50%; /* El respaldo: la variable la escribe el JavaScript. Sin el, 0. */ transform: scaleX(var(--dd-avance, 0)); } /* La via buena, donde el navegador la admite. */ @supports (animation-timeline: scroll(root block)) { .dd-progreso-relleno { transform: scaleX(0); animation: dd-avance linear forwards; animation-timeline: scroll(root block); } @keyframes dd-avance { to { transform: scaleX(1); } } } /* Quien pidio menos movimiento la sigue viendo: no es una animacion decorativa que aparece sola, es la respuesta directa a lo que esta haciendo con el dedo. Lo unico que se quita es el degradado, que no aporta informacion. */ @media (prefers-reduced-motion: reduce) { .dd-progreso-relleno { background: #FC9901; } } /* ========================================================================= ANIMACION DE ENTRADA ========================================================================= TODO ESTO CUELGA DE `.dd-anima`, que le pone el JavaScript al ``. Sin esa clase no hay nada escondido: si el JavaScript no corre, la pagina se ve normal. Es la unica forma segura de escribir esto — al reves, cualquier fallo dejaria el diario en blanco con el HTML entero ahi, invisible. ========================================================================= */ .dd-anima .e-con.dd-entra { opacity: 0; transform: translateY(-14px); } .dd-anima .e-con.dd-entra.dd-visible { opacity: 1; transform: none; transition: opacity 460ms cubic-bezier(.16, 1, .3, 1), transform 460ms cubic-bezier(.16, 1, .3, 1); } /* Doble seguro. El JavaScript ya se detiene solo si la preferencia esta puesta, pero si alguien la activa CON la pagina abierta, el JavaScript ya corrio y las clases estan puestas: esto las desarma al vuelo. */ @media (prefers-reduced-motion: reduce) { .dd-anima .e-con.dd-entra, .dd-anima .e-con.dd-entra.dd-visible { opacity: 1; transform: none; transition: none; } } /* =========================================================================== BOTON «VOLVER ARRIBA» --------------------------------------------------------------------------- Este boton no es nuestro: lo pone Astra, y vive FUERA de `#page`, asi que no lo alcanza ninguna plantilla de Elementor. Se estiliza desde aqui, que es lo unico que se carga en todo el sitio. Venia azul `#046BD2`, de 32x32 y con esquinas de 2px: el azul de Astra por defecto, que no es ninguno de los dos azules de la marca. El selector lleva ID + clase a proposito. Astra escribe sus reglas sobre `#ast-scroll-top`, que es un ID y pesa mas que cualquier clase; para ganarle sin recurrir a `!important` basta con sumarle la clase que ya trae. =========================================================================== */ #ast-scroll-top.ast-scroll-top-icon { width: 52px; height: 52px; border-radius: 50%; /* Naranja de marca, con la flecha en tinta. El blanco sobre este naranja da 3,1:1 —pasa raspando para un icono y no llegaria si fuera texto—; la tinta da 8,1:1. Ademas es lo que ya hacen los botones naranjas del sitio. */ background-color: #FC9901; color: #000C24; border: 0; box-shadow: 0 6px 18px rgba(0, 12, 36, .22); transition: background-color 150ms, transform 240ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 240ms cubic-bezier(.16, 1, .3, 1); } /* La flecha hereda el color del boton en vez de traer el suyo pintado. */ #ast-scroll-top.ast-scroll-top-icon .ast-arrow-svg, #ast-scroll-top.ast-scroll-top-icon .ast-arrow-svg path { fill: currentColor; } /* El centrado NO puede hacerse con `display: flex` en el boton: Astra le escribe `display: block` EN LINEA desde su JavaScript —asi lo muestra y lo esconde segun el scroll— y un estilo en linea le gana a cualquier hoja. Forzarlo con `!important` dejaria el boton visible siempre. Asi que el que centra es el `span` de adentro, estirado sobre todo el boton. */ #ast-scroll-top.ast-scroll-top-icon .ast-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 0; } /* Astra fija el tamano de la flecha con `#ast-scroll-top .ast-icon.icon-arrow svg`, que trae un elemento de mas y por eso le ganaba a mi selector. Repito su misma forma sumandole la clase del boton. */ #ast-scroll-top.ast-scroll-top-icon .ast-icon.icon-arrow svg { width: 20px; height: auto; /* Astra gira la flecha 180 grados —el icono original apunta hacia abajo— y ademas la sube 2,5px, un retoque calculado para su boton de 32px. En uno de 52 ese retoque descentra. Se conserva el giro y se descarta el corrimiento. */ transform: rotate(180deg); } /* Se enciende al pasar el mouse, no se apaga: aclarar el naranja sube el contraste con la flecha en vez de bajarlo. */ #ast-scroll-top.ast-scroll-top-icon:hover, #ast-scroll-top.ast-scroll-top-icon:focus { background-color: #FFB238; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(252, 153, 1, .34); } /* El boton trae `tabindex="0"`, o sea que se llega con el teclado. Astra no le deja marca de foco visible; sin esto, quien navegue con Tab no sabe que esta parado encima. */ #ast-scroll-top.ast-scroll-top-icon:focus-visible { /* EXCEPCION: el fondo de este control ES el naranja de la marca. Ver la nota de `--dd-foco-sobre-acento`. */ outline: var(--dd-foco-sobre-acento); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #ast-scroll-top.ast-scroll-top-icon, #ast-scroll-top.ast-scroll-top-icon:hover, #ast-scroll-top.ast-scroll-top-icon:focus { transition: none; transform: none; } } /* ========================================================================= ARCHIVO DE BALONCITO — la cuadricula con todas las piezas ------------------------------------------------------------------------- La pagina a la que lleva el «Ver todos los Baloncito» de la portada. Existe para sostener una decision: no hacer carrusel. El argumento era que se ven cuatro y las demas no se pierden porque tienen su propia pagina. Sin esta pagina, ese argumento se cae y el bloque esconde 24 piezas. Las columnas y la separacion NO se fijan aqui: son controles del widget, con valor propio por tamano de pantalla. Aqui va lo que ningun control cubre. ========================================================================= */ /* OJO — EL SELECTOR LLEVA EL ENVOLTORIO DEL WIDGET, Y NO SOBRA. Con `.dd-balarchivo-lista` a secas el `padding: 0` PERDÍA: .entry-content ul { padding-left: 20px } 1 clase + 1 etiqueta ← ganaba .dd-balarchivo-lista { padding: 0 } 1 clase Astra le pone sangría a cualquier lista dentro del contenido, que es lo correcto para una lista de texto y lo incorrecto para una cuadrícula. En cuadrícula esos 20px solo corrían todo un poco. En carrusel se veía peor: medido acá, el carrusel arrancaba desplazado 20px y la flecha izquierda salía encendida apuntando a nada. Con la clase del widget delante son dos clases y gana sin `!important`. */ .elementor-widget-dd-baloncito-archivo .dd-balarchivo-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .dd-balarchivo-item { display: flex; flex-direction: column; gap: 8px; } /* ========================================================================= BALONCITO EN CARRUSEL ------------------------------------------------------------------------- No lleva puntos de navegación, y esa es la decisión central. Con 27 piezas —y creciendo— los puntos pedirían 27 áreas táctiles de 44px: más de 1.200px de ancho. Fue el motivo por el que se descartó el carrusel en la portada. Aquí se resuelve de otra forma: la barra de desplazamiento ES la señal de que hay más, y el dedo, la rueda del ratón y el teclado ya sirven para moverse. No hay que inventar un control nuevo. `scroll-snap` es lo que hace que se detenga encuadrado en cada pieza en vez de quedar cortada a la mitad. Sin él se siente como una lista que se arrastra y no como un carrusel. ========================================================================= */ .elementor-widget-dd-baloncito-archivo .dd-balarchivo-lista--carrusel { display: flex; overflow-x: auto; overflow-y: hidden; /* `proximity`, NO `mandatory`. Con `mandatory` el navegador obliga a encajar SIEMPRE, incluso al montar la página: medido acá, el carrusel arrancaba desplazado 18px sin que nadie lo tocara, y por eso la flecha izquierda salía encendida apuntando a nada. `proximity` encaja cuando uno suelta cerca de una pieza y deja la posición inicial en cero. De paso evita el otro defecto de `mandatory`: en listas largas se siente pegajoso y a veces impide detenerse donde uno quiere. */ scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 14px; /* Deja el eje horizontal para el gesto y no toca el vertical de la página: sin esto, deslizar en diagonal secuestra el scroll de la nota. */ touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } .dd-balarchivo-lista--carrusel .dd-balarchivo-item { flex: 0 0 auto; /* 2:3 vertical, la proporción real de todas las piezas medidas. */ width: min(240px, 62vw); scroll-snap-align: start; } /* La barra se deja A LA VISTA a propósito. Escondiéndola el carrusel queda más limpio y nadie descubre que hay 26 piezas más. */ .dd-balarchivo-lista--carrusel::-webkit-scrollbar { height: 6px; } .dd-balarchivo-lista--carrusel::-webkit-scrollbar-track { background: #E7E8EC; border-radius: 3px; } .dd-balarchivo-lista--carrusel::-webkit-scrollbar-thumb { background: #9CA1B5; border-radius: 3px; } .dd-balarchivo-lista--carrusel:focus-visible { outline: var(--dd-foco); outline-offset: var(--dd-foco-sep); } .dd-balarchivo-carro { position: relative; } /* Las flechas son un añadido para el ratón. En una pantalla táctil sobran —el dedo ya hace el trabajo— así que ahí no se pintan. */ .dd-balarchivo-flechas { display: none; } @media (hover: hover) and (min-width: 768px) { .dd-balarchivo-flechas { display: block; } .dd-balarchivo-flecha { position: absolute; top: calc(50% - 28px); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #E7E8EC; border-radius: 50%; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0, 12, 36, .12); color: #000C24; font-size: 22px; line-height: 1; cursor: pointer; transition: background-color 150ms, transform 150ms; } .dd-balarchivo-flecha[data-dd-dir="-1"] { left: -14px; } .dd-balarchivo-flecha[data-dd-dir="1"] { right: -14px; } .dd-balarchivo-flecha:hover { background: #F6F7F9; transform: scale(1.06); } /* Al llegar a un extremo la flecha se apaga en vez de desaparecer: si se quitara, la otra saltaría de sitio y el ratón quedaría apuntando a nada. */ .dd-balarchivo-flecha[disabled] { opacity: .35; cursor: default; box-shadow: none; } .dd-balarchivo-flecha[disabled]:hover { background: #FFFFFF; transform: none; } } @media (prefers-reduced-motion: reduce) { .dd-balarchivo-lista--carrusel { scroll-behavior: auto; } .dd-balarchivo-flecha { transition: none; } .dd-balarchivo-flecha:hover { transform: none; } } .dd-balarchivo-enlace { display: block; border-radius: 12px; overflow: hidden; transition: transform 240ms cubic-bezier(.16, 1, .3, 1), box-shadow 240ms cubic-bezier(.16, 1, .3, 1); } /* `aspect-ratio` fija el hueco ANTES de que la imagen llegue. Sin esto, 28 imagenes cargando desordenan la cuadricula y la pagina salta bajo el dedo. */ .dd-balarchivo-foto { width: 100%; height: auto; display: block; aspect-ratio: 2 / 3; object-fit: cover; } .dd-balarchivo-enlace:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 12, 36, .16); } /* Marca de foco para el teclado. En una pagina que es solo imagenes, sin esto quien navega con Tab no tiene forma de saber donde esta parado. */ .dd-balarchivo-enlace:focus-visible { outline: var(--dd-foco); outline-offset: var(--dd-foco-sep); } /* La fecha: dato, no adorno. Es lo unico que situa la pieza en el tiempo para quien no ve el dibujo. #6B6E7A sobre blanco da 4,87:1. */ .dd-balarchivo-fecha { font-family: Inter, system-ui, sans-serif; font-size: 13px; color: #6B6E7A; } .dd-balarchivo-vacio { font-family: Inter, system-ui, sans-serif; color: #6B6E7A; } @media (prefers-reduced-motion: reduce) { .dd-balarchivo-enlace, .dd-balarchivo-enlace:hover { transition: none; transform: none; } } /* ========================================================================= EL SUBRAYADO QUE PONE ASTRA, Y QUE NO ES NUESTRO ------------------------------------------------------------------------- Astra trae un ajuste de «subrayar los enlaces del contenido» y lo aplica con este selector, desde su CSS en línea: .ast-single-post .entry-content a { text-decoration: underline } Son dos clases y un elemento. Cualquier regla nuestra de una sola clase —`.dd-leidas-enlace`, `.dd-rejilla a`— pierde, así que el subrayado se cuela en TODO lo que vive dentro del contenido de la página. Medido en la portada: 44 de 80 enlaces subrayados. El cintillo, las rejillas de sección, la lista de Junior, el podcast, «Lo más leído», y hasta los enlaces de las imágenes de Baloncito —donde el subrayado se dibuja como una raya suelta bajo la foto—. Esto es lo que había detrás de varios «estos títulos subrayados están fatales» que se fueron corrigiendo uno por uno. La causa era una sola. El subrayado en el CUERPO DE UNA NOTA sí se queda: ahí un enlace dentro del texto tiene que distinguirse de la prosa, y esa regla se reafirma en la plantilla de artículo con más peso que esta. ========================================================================= */ body.ast-single-post .entry-content .elementor a { text-decoration: none; } body.ast-single-post .entry-content .elementor a:hover, body.ast-single-post .entry-content .elementor a:focus-visible { text-decoration: none; } /* ========================================================================= EL VIDEO SE VE DONDE SE PULSA ------------------------------------------------------------------------- Al pulsar una tarjeta de video no se sale de la página: se abre una ventana con el reproductor encima. Volver es cerrar, y el lector sigue donde estaba. El `