/* * main.css — la hoja base de colorfans. Todo lo global vive aquí. * * Hojas por vista solo si pesan ~8 KB o más, y encoladas condicionalmente desde * inc/assets.php. Si no llegan a ese tamaño, su sitio es este archivo. * * Cero estilos en línea en las plantillas. Sin excepciones. * * El diseño NO reproduce el de colormusic.cl: aprovecha que el tema es nuevo para * partir de una retícula y una tipografía propias. */ /* ─── Variables ─────────────────────────────────────────────────────────────── */ :root { /* * 🌑 OSCURO ES EL DEFECTO. Va en `:root` a secas, y el claro solo como * sobreescritura en `[data-theme="light"]`. Así, si el interruptor o el * localStorage fallan, el sitio cae en el modo que se quiere por defecto. * * 🔴 NINGÚN COLOR LITERAL FUERA DE ESTE BLOQUE. Ni un hexadecimal, ni una función * de color, ni un nombre de color dentro de una regla de componente. Un color * suelto se rompe en una de las dos versiones y no se descubre hasta que alguien * pulsa el interruptor. * * ⚠️ Este comentario evita a propósito escribir las cadenas que busca la auditoría: * escribirlas aquí haría que la métrica se encontrase a sí misma y devolviera 1 * para siempre. Ya pasó con la etiqueta de estilo y con el prefijo del tema viejo. */ color-scheme: dark; --cf-fondo: #070c18; /* NO negro puro: cansa y hace flotar las fotos */ --cf-superficie: #0e1729; /* tarjetas y cajas */ --cf-superficie-2: #16223a; /* elevación sobre superficie */ --cf-borde: #1e2d4a; --cf-texto: #e8eefc; /* NO blanco puro */ --cf-texto-suave: #a8b7d6; --cf-texto-tenue: #8494b5; /* * 🔴 EL ACENTO ES EL ROJO DE LA MARCA, no un azul. * * Era `#6aa5ff` heredado del arranque del tema, y Mario lo señaló: el hover de * todos los enlaces salía celeste, un color que no está en la identidad. Ahora * el acento de interfaz y el de la marca son el mismo tono. * * ⚠️ `--cf-acento` y `--cf-marca` siguen siendo DOS variables aunque hoy * coincidan: la marca no debe moverse si algún día se rediseña la interfaz. * Medido: 5,84:1 sobre el fondo oscuro. */ --cf-acento: #ff4b3a; --cf-acento-vivo: #ff7a6d; --cf-acento-texto: #070c18; /* texto legible SOBRE el acento */ /* * El acento de la MARCA. No es `--cf-acento` a propósito: el acento de la interfaz * puede cambiar el día que se rediseñe algo, y el rojo del logotipo no debe moverse * con él. Son dos decisiones distintas y por eso son dos variables distintas. * * ⚠️ Los dos valores están medidos: el vivo da 5,7:1 sobre el fondo oscuro y el * profundo 5,6:1 sobre el claro. Un solo rojo para ambos falla en uno de los dos. */ --cf-marca: #ff4b3a; --cf-brasa: #ff9a4d; /* la fecha de un evento */ --cf-brasa-hover: #ffb072; --cf-brasa-activo: #e6853d; --cf-sobre-brasa: #070c18; /* texto SOBRE la brasa: aquí la brasa es clara */ --cf-borde-fuerte: #2c4066; /* borde al pasar por encima */ /* Velos y superficies fijas: no dependen del modo porque van sobre imagen. */ --cf-velo: rgba(0, 0, 0, .55); --cf-velo-fuerte: rgba(0, 0, 0, .88); --cf-velo-suave: rgba(255, 255, 255, .14); --cf-claro-30: rgba(255, 255, 255, .30); --cf-claro-50: rgba(255, 255, 255, .50); --cf-claro-80: rgba(255, 255, 255, .80); --cf-sombra-tenue: rgba(0, 0, 0, .35); --cf-sobre-oscuro: #f7f7f8; /* texto e iconos sobre un velo oscuro */ /* * El degradado de «Noticias destacadas» (30-ago-2026): el titular va * ENCIMA de la foto, así que el velo es siempre negro, en las dos * versiones — igual criterio que `--cf-velo` de arriba. Las tres paradas * hacen el degradado; `-suave` es la variante de las tarjetas chicas, * donde la copia pesa menos y no hace falta tanto velo. */ --cf-sombra-dest-1: rgba(0, 0, 0, .06); --cf-sombra-dest-2: rgba(0, 0, 0, .28); --cf-sombra-dest-3: rgba(0, 0, 0, .86); --cf-sombra-dest-1-suave: rgba(0, 0, 0, .03); --cf-sombra-dest-2-suave: rgba(0, 0, 0, .52); --cf-sombra-dest-3-suave: rgba(0, 0, 0, .88); /* Negro sólido para el velo de «Más noticias»: la foto llena la tarjeta entera y el texto necesita opacidad total al pie, no solo un matiz. */ --cf-sombra-dest-solida: rgba(0, 0, 0, 1); /* * 🔴 EL VELO DE LAS TARJETAS ARRANCABA EN 6 %% DE NEGRO, NO EN CERO — y eso es un borde * duro, no una percepción. Las capas iban `inset: 26%% 0 0` con el degradado empezando en * `--cf-sombra-dest-1` (`rgba(0,0,0,.06)`): en esa línea la imagen pasaba de 0 a 6 %% de * golpe y **se veía dónde terminaba el velo**. Lo señaló Mario el 04-sep-2026. * * ⚠️ Y ARREGLARLO NO ES SOLO EMPEZAR EN `transparent`: un degradado lineal en alfa sigue * dejando el arranque visible, porque el ojo no percibe la opacidad de forma lineal. * Estos 16 pasos siguen una curva suave (ease-in-out) hasta el mismo negro final de * `--cf-sombra-dest-3`, así que el velo tapa igual y no se ve empezar. * * 📌 Va en el bloque de tokens porque es donde viven los colores literales: usado desde una * regla de componente rompería la regla de «ningún color literal fuera de los tokens». */ --cf-velo-degradado: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.011) 8.1%, rgba(0, 0, 0, 0.042) 15.5%, rgba(0, 0, 0, 0.089) 22.5%, rgba(0, 0, 0, 0.150) 29%, rgba(0, 0, 0, 0.223) 35.3%, rgba(0, 0, 0, 0.303) 41.2%, rgba(0, 0, 0, 0.387) 47.1%, rgba(0, 0, 0, 0.473) 52.9%, rgba(0, 0, 0, 0.557) 58.8%, rgba(0, 0, 0, 0.637) 64.7%, rgba(0, 0, 0, 0.709) 71%, rgba(0, 0, 0, 0.771) 77.5%, rgba(0, 0, 0, 0.818) 84.5%, rgba(0, 0, 0, 0.849) 91.9%, rgba(0, 0, 0, 0.860) 100%); /* Divisor de cabecera de sección — más visible que `--cf-borde` (pensado para bordes de tarjeta, no para separar bloques enteros de la portada). Pedido de Mario el 31-ago-2026 con un valor exacto: #5d5d5d. */ --cf-divisor-seccion: #5d5d5d; /* * El pin del mapa GENÉRICO (single-evento.php, sin coordenadas reales): * amarillo a propósito, distinto del naranja/rojo de marca, para que no * se confunda con un marcador real cuando el recinto sí tiene * coordenadas. Fijo en las dos versiones — es un pin sobre un mapa * apagado, no depende del modo. */ --cf-amarillo-pin: #f2b90c; --cf-modal-fondo: #111114; --cf-marcador-1: #3a3f4b; /* gradiente de la imagen que falta */ --cf-marcador-2: #1d2028; /* Estados. */ --cf-ok: #4ade80; --cf-ok-fondo: #14301f; --cf-error: #f87171; --cf-error-fondo: #3a1a1a; --cf-aviso-fondo: #3a2a10; --cf-aviso-texto: #ffc978; --cf-cabecera-vidrio: rgba(13, 13, 15, .88); --cf-sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45); /* * El rail tiene dos anchos y el contenido se aparta según el que esté activo. * CERRADO es el estado por defecto: solo iconos. */ --cf-rail: 70px; /* rail cerrado: solo iconos */ --cf-rail-abierto: 280px; /* rail abierto: icono + etiqueta */ --cf-barra: 56px; /* alto de la barra superior */ --cf-ancho: 1240px; --cf-ancho-texto: 68ch; --cf-radio: 12px; --cf-radio-chico: 8px; --cf-espacio: 1rem; --cf-espacio-2: 1.5rem; --cf-espacio-3: 2.5rem; --cf-espacio-4: 4rem; /* * 🔴 INTER, no system-ui — 31-ago-2026. Los mockups del rediseño v4 usan * Inter en todo el texto; el sitio nunca la cargó y corría en la pila del * sistema, que en pesos altos (800-900) se ve visiblemente más redondeada * que Inter. Cargada como Google Font en inc/assets.php. */ --cf-fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* * Los titulares comparten la sans del resto del sitio. * * Se probó con serif —Georgia, como El País o The Guardian— y Mario prefirió la sans: * *«la tipografía era mejor la anterior»*. Lo que sí se conserva del experimento es lo * que de verdad cambió la cara de la portada: **titulares mucho más grandes**, la nota * sin caja y la foto como excepción. La familia era lo de menos. * * Se deja como token propio para que cambiar la tipografía de titulares en el futuro * sea tocar una línea y no cincuenta reglas. */ --cf-titulo: var(--cf-fuente); } :root[data-theme="light"] { color-scheme: light; --cf-fondo: #f4f8ff; --cf-superficie: #ffffff; --cf-superficie-2: #e8f0fe; --cf-borde: #d3e0f5; --cf-texto: #0b1526; /* NO negro puro */ --cf-texto-suave: #45587c; --cf-texto-tenue: #5d7091; --cf-acento: #c62a1a; /* 5,60:1 sobre blanco */ --cf-acento-vivo: #9e1f12; --cf-acento-texto: #ffffff; --cf-marca: #c62a1a; /* el #ff4b3a del oscuro da 3,5:1 sobre blanco */ --cf-brasa: #b8560c; /* #f2761a sobre blanco da 2,9:1 — insuficiente */ --cf-brasa-hover: #96450a; --cf-brasa-activo: #7d3908; --cf-sobre-brasa: #ffffff; /* aquí la brasa es oscura */ --cf-borde-fuerte: #b3c7e6; --cf-sombra-tenue: rgba(0, 0, 0, .07); --cf-divisor-seccion: #b0b0b8; --cf-ok: #1a7f3c; --cf-ok-fondo: #e8f6ec; --cf-error: #b3261e; --cf-error-fondo: #fdecec; --cf-aviso-fondo: #fff4e0; --cf-aviso-texto: #a86200; --cf-cabecera-vidrio: rgba(244, 248, 255, .90); --cf-sombra: 0 1px 2px rgba(20, 22, 27, .05), 0 10px 30px rgba(20, 22, 27, .07); } /* ─── Reset mínimo ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* * 🔴 `[hidden]` TIENE QUE GANAR, Y NO GANA SOLO — medido en producción el 06-sep-2026. * * `[hidden] { display:none }` vive en la hoja del NAVEGADOR, y **cualquier `display` de una * hoja de autor le gana**, sin que la especificidad tenga nada que ver: es el orden de origen * de la cascada. Así que un `hidden` puesto por JavaScript deja el atributo en el elemento y * el elemento a la vista, sin error y sin aviso. * * Lo que costó: la cartelera paginada de la ficha de recinto marcaba `hidden` sus 4 tarjetas * de la segunda página y **las 8 seguían viéndose**, porque `.cme-card` declara `display:flex`. * «Tipos de recinto», al lado, funcionaba — sus hijos son `
  • ` sin `display` de autor. Y mi * primera comprobación dio por bueno el bloque roto porque **conté el atributo en vez de mirar * si la pieza se veía**: la forma, no el efecto. * * ⚠️ Es de los pocos `!important` justificados del tema: no impone un capricho, restituye el * comportamiento del navegador que una regla de componente pisó por accidente. Sin él hay * que acordarse de esto en cada componente nuevo que se paginé, y no se acuerda nadie. */ [hidden] { display: none !important; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--cf-fondo); color: var(--cf-texto); font-family: var(--cf-fuente); font-size: 1rem; /* * ⚠️ 1.6 es para el TEXTO CORRIDO, y los titulares lo heredaban. * * En un titular de tres líneas ese interlineado abre casi 30 px entre renglones: * el bloque se estira y las líneas dejan de leerse como una unidad. Los titulares * fijan el suyo —entre 1.15 y 1.2— justo debajo. */ line-height: 1.6; min-height: 100vh; text-rendering: optimizeSpeed; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } a { color: var(--cf-acento); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--cf-acento-vivo); } :focus-visible { outline: 2px solid var(--cf-acento); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ─── Tipografía ────────────────────────────────────────────────────────────── */ /* * ⚠️ `text-wrap: pretty`, NO `balance`. * * `balance` iguala el largo de todas las líneas, y en un titular ancho eso significa * **cortarlo antes de tiempo**: la primera línea se acorta para parecerse a la segunda y * queda un vacío a la derecha, con la bajada de debajo ocupando todo el ancho. Lo señaló * Mario el 30-ago-2026 sobre la pieza grande de Cine y Streaming. * * `pretty` hace lo que aquí se quería —evitar que la última línea sea una palabra sola— * sin tocar el ancho de las demás. */ h1, h2, h3, h4 { line-height: 1.15; font-weight: 750; letter-spacing: -.018em; text-wrap: pretty; } h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem); } h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); } h3 { font-size: 1.2rem; } p + p { margin-top: var(--cf-espacio); } /* ─── Estructura ────────────────────────────────────────────────────────────── */ .cf-contenedor { width: min(100% - 2rem, var(--cf-ancho)); margin-inline: auto; } /* * ⚠️ MENOS AIRE ARRIBA — Mario, 07-sep-2026: «reduce el padding-top para que no quede tanto * espacio perdido entre el header y el primer bloque». Baja de `--cf-espacio-3` (40 px) a * `--cf-espacio` (16 px): la barra superior ya separa visualmente, y 40 px encima de ella * empujaban el primer bloque fuera de la primera pantalla sin aportar nada. * El relleno INFERIOR no se toca: ahí sí hace falta aire antes del pie. */ .cf-principal { padding-block: var(--cf-espacio) var(--cf-espacio-4); } /* * ⚠️ EN MÓVIL, MENOS AIRE ANTES DEL PIE. * * El relleno inferior del contenido y el margen superior del pie se suman: en una * pantalla de 375 px eso dejaba una franja negra de más de 150 px entre el último * bloque y el pie, que en escritorio pasa desapercibida y en móvil parece que la * página se acabó antes de tiempo. */ /* Listado + barra lateral. Sin barra, el contenido ocupa todo. */ .cf-columnas { display: grid; gap: var(--cf-espacio-3); } @media (min-width: 1000px) { /* Mismo criterio que el artículo: ancho fijo y centrado, sin pasillos. */ .cf-columnas--con-lateral { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; max-width: 1240px; margin-inline: auto; } } .cf-saltar { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--cf-texto); color: var(--cf-fondo); padding: .75rem 1rem; border-radius: 0 0 var(--cf-radio-chico) 0; } .cf-saltar:focus { left: 0; } /* ─── Menús ─────────────────────────────────────────────────────────────────── */ .cf-menu ul { display: flex; flex-wrap: wrap; gap: var(--cf-espacio-2); list-style: none; margin: 0; padding: 0; } .cf-menu a { color: var(--cf-texto); text-decoration: none; font-weight: 600; font-size: .93rem; padding-block: .35rem; display: inline-block; } .cf-menu a:hover, .cf-menu .current-menu-item > a, .cf-menu .current-menu-parent > a { color: var(--cf-acento); } /* Botón de menú en móvil. Sin JS queda oculto y el menú se ve siempre. */ @media (max-width: 860px) { /* ⏹️ `.cf-con-js .cf-menu-boton` se retiró: la hamburguesa ya se ve siempre, con JS o sin él. ⚠️ Sin JS no hace nada al pulsarla, pero el rail queda como lista en el flujo (`.cf-sin-js .cf-rail`), así que la navegación sigue estando. */ .cf-con-js .cf-menu--principal { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cf-fondo); border-bottom: 1px solid var(--cf-borde); box-shadow: var(--cf-sombra); padding: var(--cf-espacio) max(1rem, calc((100vw - var(--cf-ancho)) / 2)); } .cf-con-js .cf-menu--principal.esta-abierto { display: block; } .cf-menu--principal ul { flex-direction: column; gap: 0; } .cf-menu--principal li + li { border-top: 1px solid var(--cf-borde); } .cf-menu--principal a { padding-block: .8rem; width: 100%; } } /* ─── Encabezado de sección ─────────────────────────────────────────────────── */ .cf-encabezado { margin-bottom: var(--cf-espacio-2); } .cf-encabezado p { color: var(--cf-texto-suave); margin-top: .4rem; } .cf-seccion { margin-bottom: var(--cf-espacio-3); } .cf-seccion__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cf-espacio); flex-wrap: wrap; margin-bottom: var(--cf-espacio-2); padding-bottom: .6rem; border-bottom: 2px solid var(--cf-texto); } .cf-seccion__titulo h2 { margin: 0; } .cf-seccion__mas { font-size: .9rem; font-weight: 650; text-decoration: none; white-space: nowrap; } .cf-seccion__mas::after { content: " →"; } /* ─── Contenido de una ficha ────────────────────────────────────────────────── */ .cf-entrada__encabezado { margin-bottom: var(--cf-espacio-2); } .cf-entrada__figura { margin: 0 0 var(--cf-espacio-2); border-radius: var(--cf-radio); overflow: hidden; } /* Mismo criterio que el artículo: la columna fija la medida de lectura, no un `max-width` dentro que haga terminar el texto antes que la imagen. */ .cf-entrada__contenido { max-width: none; } .cf-entrada__contenido > * + * { margin-top: var(--cf-espacio); } .cf-entrada__contenido h2 { margin-top: var(--cf-espacio-3); } .cf-entrada__contenido img { border-radius: var(--cf-radio); } .cf-entrada__contenido code { background: var(--cf-superficie); padding: .1em .35em; border-radius: 4px; font-size: .9em; } /* ─── Barra lateral ─────────────────────────────────────────────────────────── */ .cf-lateral { display: grid; gap: var(--cf-espacio-2); align-content: start; } .cf-widget { border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); padding: var(--cf-espacio); background: var(--cf-superficie); } .cf-widget__titulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cf-texto-suave); margin-bottom: .7rem; } .cf-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .cf-widget li { font-size: .92rem; } .cf-widget a { text-decoration: none; color: var(--cf-texto); font-weight: 600; } .cf-widget a:hover { color: var(--cf-acento); } .cf-widget__cuenta { color: var(--cf-texto-tenue); font-weight: 400; font-size: .85em; } /* ─── Paginación — UNA para todo el sitio ─────────────────────────────────────── * * 🔴 Había CINCO maquetas distintas, una por vista: `.cme-paginacion` con estado y botones en * recintos y personalidades, números sueltos en la cartelera, el marcado de WordPress en los * listados y `.archive-continuation` en la búsqueda. Mario, 06-sep-2026: «usa un mismo estilo * de paginación en todas las páginas que usen paginación… reutilízala». La pinta * `cf_paginacion_html()` (`inc/utilidades.php`) y las cinco vistas la llaman. * * ⚠️ AQUÍ Y NO EN `eventos.css`: la que se tomó de modelo vivía allí, y esa hoja **no se encola * en los listados ni en la búsqueda**. Una pieza de todo el sitio va en la hoja de todo el * sitio — si no, se repite el botón invisible de `/personalidades/`. * ⚠️ Se retiraron de aquí las reglas de `.page-numbers`: eran para `the_posts_pagination()`, que * ya no se usa. Una regla que sirve a un marcado que nadie emite es una regla muerta. */ .cf-paginacion { margin-top: var(--cf-espacio-3); display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; } .cf-paginacion__estado { font-size: .78rem; color: var(--cf-texto-suave); } .cf-paginacion__ir { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); font-size: .8rem; font-weight: 700; color: var(--cf-texto); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; } .cf-paginacion__ir:hover { border-color: var(--cf-borde-fuerte); background: var(--cf-superficie-2); } /* Los enlaces que WordPress emite dentro de `wp_link_pages()` (una entrada partida en páginas) reciben el mismo aspecto sin tener que llevar la clase. */ .cf-paginacion > a:not(.cf-paginacion__ir) { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; padding: .5rem .6rem; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); font-size: .8rem; font-weight: 700; text-decoration: none; } /* ─── Pie ───────────────────────────────────────────────────────────────────── */ .cf-pie__interior { display: grid; gap: var(--cf-espacio-2); } @media (min-width: 760px) { .cf-pie__interior { grid-template-columns: 1fr auto; align-items: center; } } .cf-pie p { color: var(--cf-texto-suave); font-size: .88rem; } /* ─── Utilidades ────────────────────────────────────────────────────────────── */ .cf-oculto-visualmente { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .cf-vacio { color: var(--cf-texto-suave); padding: var(--cf-espacio-3) 0; } /* ─── Tarjeta de evento (portada y listados generales) ──────────────────────── */ /* * 🔴 UNA SOLA PROPORCIÓN PARA TODA LA CARTELERA, y la manda la mayoría. * * Los afiches llegan de PuntoTicket en formatos muy distintos —apaisados de * 1300×501, cuadrados de 500×500, verticales— y el carrusel se veía como una * dentadura: cada tarjeta con una altura. Lo señaló Mario. * * 16/9 porque es lo que traen la mayoría (`re_banner` es 2,6:1 y `md` cuadrado; * 16/9 queda entre los dos y no destroza ninguno). El encuadre lo resuelve * `object-fit: cover`, que recorta sin deformar. * * ⚠️ `cover` recorta por los bordes: por eso la proporción no puede ser extrema. * Con 21/9 un afiche cuadrado perdería la cabeza del artista. */ .cf-tarjeta__figura--afiche { aspect-ratio: 16 / 9; overflow: hidden; } .cf-tarjeta__figura--afiche img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-tarjeta__fecha { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-brasa); } .cf-tarjeta--evento .cf-tarjeta__bajada a { color: var(--cf-texto-suave); text-decoration: none; } .cf-tarjeta--evento .cf-tarjeta__bajada a:hover { color: var(--cf-acento); text-decoration: underline; } /* Separador entre los datos de una misma línea de metadatos: sin él, «Santiago aforo 12.000 2 eventos» se lee como una sola frase confusa. */ .cf-tarjeta__meta > span + span::before { content: "·"; margin-right: .5rem; color: var(--cf-texto-tenue); } /* ─── Tarjeta de evento de la Cartelera — mockup del 30-ago-2026 ───────────── Antes casi sin estilo propio (heredaba de `.cf-nota`, que a propósito no es una tarjeta): un carrusel de eventos SÍ necesita caja, porque son fichas de datos —fecha, lugar, precio—, no titulares de diario. ─────────────────── */ .cf-tarjeta--evento { display: flex; flex-direction: column; background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .18s ease; } .cf-tarjeta--evento:hover { border-color: var(--cf-borde-fuerte); } .cf-tarjeta--evento .cf-tarjeta__figura { position: relative; margin: 0; } /* `.cf-tarjeta__favorito` (corazón) se retiró el 31-ago-2026 — sin cuenta de usuario no tenía destino real. Ver template-parts/tarjeta-evento.php. */ .cf-tarjeta--evento .cf-tarjeta__cuerpo { display: flex; flex-direction: column; gap: .4rem; padding: .9rem 1rem 1rem; } .cf-tarjeta--evento .cf-tarjeta__fecha { display: flex; align-items: center; gap: .4rem; color: var(--cf-texto-suave); } .cf-tarjeta--evento .cf-tarjeta__fecha svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--cf-texto-tenue); } .cf-tarjeta--evento .cf-tarjeta__titulo { margin: 0; font-size: 1.05rem; line-height: 1.32; } .cf-tarjeta--evento .cf-tarjeta__titulo a { color: var(--cf-brasa); text-decoration: none; } /* * ⚠️ SIN SUBRAYADO AL PASAR POR ENCIMA (Mario, 05-sep-2026). La regla se retira entera en vez * de dejarla vacía o con `text-decoration: none`: el enlace ya lo lleva en la línea de * arriba, y una regla que no declara nada es basura que el siguiente tiene que descifrar. */ .cf-tarjeta--evento .cf-tarjeta__bajada { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .86rem; } .cf-tarjeta--evento .cf-tarjeta__bajada svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--cf-texto-tenue); } .cf-tarjeta--evento .cf-tarjeta__precio { margin: .3rem 0 0; display: inline-block; align-self: flex-start; background: var(--cf-superficie-2); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio-chico); padding: .35rem .7rem; font-size: .8rem; font-weight: 700; } /* ─── Puntos de paginación del carrusel — solo en Cartelera ────────────────── main.js los construye según cuántas «páginas» de tarjetas caben en el ancho visible; `hidden` por defecto hasta que haya más de una. ──────────────── */ .cf-carrusel__puntos { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: .9rem; } .cf-carrusel__punto { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--cf-borde-fuerte); cursor: pointer; transition: background-color .18s ease, width .18s ease; } .cf-carrusel__punto[aria-current="true"] { background: var(--cf-acento); width: 20px; border-radius: 4px; } /* ─── Interruptor de tema ───────────────────────────────────────────────────── */ .cf-cabecera__acciones { display: flex; align-items: center; gap: .6rem; } .cf-tema { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: none; cursor: pointer; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio-chico); color: var(--cf-texto-suave); } .cf-tema:hover { color: var(--cf-texto); border-color: var(--cf-borde-fuerte); } .cf-tema svg { width: 17px; height: 17px; } /* En oscuro se ofrece pasar a claro: se ve el sol. En claro, la luna. */ .cf-tema__luna { display: none; } :root[data-theme="light"] .cf-tema__sol { display: none; } :root[data-theme="light"] .cf-tema__luna { display: inline-flex; } /* ─── Epígrafe y bajada de un artículo ──────────────────────────────────────── */ .cf-epigrafe { margin: 0 0 .4rem; font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cf-brasa); } .cf-bajada { margin-top: .6rem; font-size: 1.1rem; line-height: 1.45; color: var(--cf-texto-suave); max-width: var(--cf-ancho-texto); } /* ─── Destacado de la portada ───────────────────────────────────────────────── */ .cf-destacado { display: grid; gap: 0; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); background: var(--cf-superficie); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .18s ease; } .cf-destacado:hover { box-shadow: var(--cf-sombra); } @media (min-width: 800px) { .cf-destacado { grid-template-columns: 1.35fr 1fr; align-items: stretch; } } .cf-destacado__figura { margin: 0; background: var(--cf-superficie-2); aspect-ratio: 16 / 9; overflow: hidden; } .cf-destacado__figura img { width: 100%; height: 100%; object-fit: cover; } .cf-destacado__cuerpo { padding: var(--cf-espacio-2); display: flex; flex-direction: column; justify-content: center; gap: .5rem; } .cf-destacado__titulo { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); margin: 0; } .cf-destacado:hover .cf-destacado__titulo { color: var(--cf-acento); } .cf-destacado__bajada { color: var(--cf-texto-suave); margin: 0; } /* ─── Cabecera grande — SOLO Cartelera y Recintos destacados ───────────────── Mockup de Mario del 30-ago-2026. Deliberadamente más pesada que `.cf-seccion__titulo`: estos dos bloques son el activo propio del sitio (ver la nota junto a `__cartelera__` en `$cf_reparto`), no una sección editorial más. `var(--cf-titulo)` sigue siendo la sans del resto del sitio — Mario ya probó serif en los titulares de nota y lo descartó, y aquí no hay motivo para reabrir esa decisión ni cargar una fuente nueva. ─────────────────── */ .cf-bloque-grande { margin-bottom: var(--cf-espacio-4); } /* * EN LA PORTADA LOS BLOQUES VAN MÁS JUNTOS. Pedido de Mario el 05-sep-2026. Fuera del home * un bloque grande es casi siempre el único de la página y los 4rem le dan aire; en la * portada hay CATORCE seguidos —medido en el HTML servido— y ese mismo aire suma 14 rem de * blanco que obligan a desplazar de más entre sección y sección. * * ⚠️ VA ACOTADO CON `.home` Y CON ESPECIFICIDAD 0,2,0 A PROPÓSITO. Las 14 cajas llevan * también `.cf-seccion`, que declara su propio `margin-bottom` (2,5 rem) en la línea 349: * a igual especificidad decidiría el orden de la hoja, y aquí no se está afinando el orden * sino una vista. Con `.home` delante gana siempre, y en el resto del sitio no cambia nada. * * ⚠️ 3rem literal y no un token: la escala va 1 / 1,5 / 2,5 / 4 rem y no tiene este valor. * Añadirle un peldaño para un ajuste de una sola vista ensucia la escala para todas. */ .home .cf-bloque-grande { margin-bottom: 3rem; } .cf-bloque-grande__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cf-espacio); flex-wrap: wrap; margin-bottom: var(--cf-espacio-2); padding-bottom: 1rem; /* Mario, 06-sep-2026: el divisor pasa de `--cf-divisor-seccion` (#5d5d5d) al borde normal del tema (#2a2a30). Con una decena de secciones por página, la raya fuerte pesaba. */ border-bottom: 1px solid var(--cf-borde); } /* * 🔴 `--cf-brasa`, NO `--cf-acento` — 31-ago-2026. El mockup real usa * `var(--accent2)` (#FF9A4D, naranja) para TODO `.eyebrow`, en las 18 * láminas del paquete v4 sin excepción (home, single-evento, single-lugar) * — verificado extrayendo el CSS de las tres con Python, no al ojo. * `--accent2` ya está mapeada a `--cf-brasa` en este proyecto («la fecha de * un evento», documentado en eventos.css). Antes usaba `--cf-acento` * (rojo/coral), que es `--accent`, no `--accent2` — se veía rojo donde el * mockup pide naranja, en TODAS las cabeceras de sección del sitio (esta * clase la comparten home, single-evento y taxonomy-lugar). */ .cf-bloque-grande__ojo { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cf-brasa); } .cf-bloque-grande__icono { display: flex; flex: 0 0 auto; } .cf-bloque-grande__icono svg { width: 15px; height: 15px; } .cf-bloque-grande__titulo { margin: 0; font-family: var(--cf-titulo); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.1; } .cf-bloque-grande__subtitulo { margin: .5rem 0 0; color: var(--cf-texto-suave); font-size: .95rem; max-width: 67ch; line-height: 1em; } .cf-boton-linea { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.15rem; border: 1px solid var(--cf-acento); border-radius: 999px; color: var(--cf-acento); font-size: .75rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease; } .cf-boton-linea svg { width: 11px; height: 11px; } .cf-boton-linea:hover { background: var(--cf-acento); color: var(--cf-acento-texto); } /* * 🔴 ENLACE EDITORIAL, NO PÍLDORA — pedido de Mario el 31-ago-2026: «no pondría * botón grande en todos los bloques… lo reduciría a un enlace editorial * consistente». La píldora con borde (`.cf-boton-linea`) queda SOLO para * acciones de verdad —Cartelera, Recintos—; el resto de secciones cierra su * cabecera con este enlace de texto, para que la portada se sienta medio * editorial y no catálogo con un botón en cada esquina. */ .cf-enlace-seccion { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; flex: 0 0 auto; color: var(--cf-acento); font-size: .8rem; font-weight: 100; text-decoration: none; white-space: nowrap; text-transform: uppercase; letter-spacing: .1rem; } .cf-enlace-seccion:hover { text-decoration: underline; } /* * 🔴 EL ENLACE DE UN CARRUSEL VA AL PIE, EN TODAS LAS ANCHURAS — Mario, 06-sep-2026. En la * cabecera peleaba con las flechas por el mismo hueco a la derecha del título. * * 🔴 Y SIN CAJA: A LA DERECHA, EN VERSALITAS — Mario, el mismo día. El rectángulo con borde * pesaba como un botón de acción, y esto no lo es: es el «ver todos» de un bloque. En * escritorio va alineado a la derecha, que es donde el ojo lo busca tras recorrer el * carrusel; en móvil, centrado. */ .cf-enlace-seccion--pie { display: flex; justify-content: flex-end; align-items: center; width: 100%; margin-top: var(--cf-espacio); padding: 0; border: 0; text-transform: uppercase; letter-spacing: .1rem; font-size: .8rem; font-weight: 100; } .cf-enlace-seccion svg { width: 10px; height: 10px; } /* * 🔴 CABECERA COMPACTA — 31-ago-2026, calcada de `.section-head`/`.section-title` * en los mockups de single-evento y single-lugar (30px fijo, letras más * juntas, borde inferior más ceñido), a diferencia del tamaño de mega-sección * del home. Ver `cf_titulo_seccion_grande( ..., $compacto = true )`. */ .cf-bloque-grande__cabecera--compacta { padding-bottom: .875rem; margin-bottom: 1.25rem; } .cf-bloque-grande__cabecera--compacta .cf-bloque-grande__ojo { letter-spacing: .12em; } .cf-bloque-grande__cabecera--compacta .cf-bloque-grande__titulo { font-size: 30px; letter-spacing: -.025em; } /* * 🔴 Y EN RESPONSIVE BAJA EN DOS TRAMOS — Mario, 06-sep-2026: «reduce el font-size». * * ⚠️ EL AJUSTE MÓVIL GENÉRICO NO LLEGABA AQUÍ: `.cf-bloque-grande__titulo` a secas es 0,1,0 y * esta regla es 0,2,0, así que el `1.3rem` del bloque de 767 px **no la tocaba** y la * cabecera compacta seguía a 30 px —su tamaño de escritorio— hasta los 560. Entre 561 y 767, * que es el móvil real de la ficha de recinto, no se reducía nada. * ⚠️ Los dos `max-width` van de MAYOR a MENOR: el de 560 tiene que poder pisar al de 767. */ @media (max-width: 767px) { .cf-bloque-grande__cabecera--compacta .cf-bloque-grande__titulo { font-size: 22px; } } @media (max-width: 560px) { .cf-bloque-grande__cabecera--compacta .cf-bloque-grande__titulo { font-size: 19px; } } /* ─── Recintos — su propio formato: banda de fichas compactas ───────────────── */ /* * 🔴 TRES COLUMNAS FIJAS, NO auto-fill. El mockup es una rejilla 3×2 exacta: * `auto-fill` daba 3 o 4 columnas según el ancho real de la caja y con seis * fichas una fila quedaba coja. Los mismos cortes que el carrusel de al lado * (1100/900 no aplican aquí porque esta sección solo vive en la portada, cuyo * contenido no baja de esos anchos hasta el propio breakpoint de 2 columnas). */ .cf-recintos__cuerpo { display: grid; gap: var(--cf-espacio); grid-template-columns: repeat(3, 1fr); } /* * ⚠️ DOS COLUMNAS SIEMPRE, incluso en el móvil más angosto — el mockup de * Mario del 30-ago-2026 las mantiene en 2×3 hasta 375px. No baja a una. */ @media (max-width: 900px) { .cf-recintos__cuerpo { grid-template-columns: repeat(2, 1fr); } } .cf-recinto { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem .7rem .7rem; background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); text-decoration: none; color: inherit; transition: border-color .18s ease; } .cf-recinto:hover { border-color: var(--cf-borde-fuerte); } .cf-recinto__figura { flex: 0 0 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--cf-superficie-2); } .cf-recinto__figura img { width: 100%; height: 100%; object-fit: cover; } .cf-recinto__cuerpo { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; } /* ⚠️ CON TOPE DE DOS LÍNEAS: un nombre largo («Piscina temperada Parque O'Higgins») estiraba su ficha más que las vecinas — la misma trampa que el título de `.cme-linea__titulo` más arriba. */ .cf-recinto__nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: .95rem; line-height: 1.25; } .cf-recinto:hover .cf-recinto__nombre { color: var(--cf-acento); } .cf-recinto__meta { color: var(--cf-texto-tenue); font-size: .78rem; line-height: 1.4; } .cf-recinto__meta--eventos { display: flex; align-items: center; gap: .35rem; } .cf-recinto__meta--eventos svg { width: 10px; height: 10px; flex: 0 0 auto; } .cf-recinto__flecha { flex: 0 0 auto; display: flex; color: var(--cf-texto-tenue); } .cf-recinto__flecha svg { width: 11px; height: 11px; } .cf-recinto:hover .cf-recinto__flecha { color: var(--cf-acento); } /* ═══════════════════════════════════════════════════════════════════════════════ EL SISTEMA DE LA PORTADA — 1 tarjeta × 4 tamaños × 3 contenedores Medido sobre diez portadas profesionales: la variedad NO sale de inventar diseños de tarjeta. Infobae repite UN `story-card` 107 veces; Billboard y Variety usan cuatro contenedores y una tarjeta. La variedad sale de las COMBINACIONES. 🔴 Y la regla que más cambia la sensación: LA PRIMERA NOTA DE CADA BLOQUE ES MÁS GRANDE. La pone el contenedor con `:first-child`, no cada llamada, así que nadie tiene que acordarse. Billboard le puso nombre propio: `story-grid-primary`. ═══════════════════════════════════════════════════════════════════════════════ */ /* * 🔴 LA NOTA NO ES UNA TARJETA. * * Tenía fondo propio, borde y esquinas redondeadas, y al repetirla ochenta veces la * portada parecía un tablero de fichas. Ningún diario hace eso: en El País cada nota es * **texto directamente sobre el fondo**, separada de la siguiente por una línea fina. * * Quitar la caja es lo que deja respirar al titular, que es quien tiene que mandar. */ .cf-nota { display: flex; flex-direction: column; min-width: 0; background: none; border: 0; border-radius: 0; } .cf-nota:hover { box-shadow: none; transform: none; } .cf-nota__medio { margin: 0; background: var(--cf-superficie-2); overflow: hidden; border-radius: var(--cf-radio-chico); aspect-ratio: 4 / 3; } .cf-nota__medio img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .cf-nota:hover .cf-nota__medio img { transform: scale(1.03); } .cf-nota__cuerpo { display: flex; flex-direction: column; gap: .3rem; padding-top: .6rem; min-width: 0; } .cf-nota__volanta { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--cf-brasa); text-decoration: none; align-self: start; } .cf-nota__volanta:hover { text-decoration: underline; } .cf-nota__titulo { font-family: var(--cf-titulo); font-size: 1.22rem; line-height: 1.22; font-weight: 700; letter-spacing: -.005em; /* Tope de líneas: un titular de tres líneas frente a uno de una descuadra la fila. Los `--xl` y `--l` lo levantan más abajo, porque ahí sí hay sitio. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cf-nota__titulo a { color: inherit; text-decoration: none; } .cf-nota:hover .cf-nota__titulo a { color: var(--cf-acento); } /* Por defecto la bajada NO se ve: la muestran solo --xl y --l. El marcado es el mismo para los cuatro tamaños, así que cambiar de tamaño no obliga a tocar PHP. */ .cf-nota__bajada { display: none; margin: 0; color: var(--cf-texto-suave); font-size: .92rem; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cf-nota--xl .cf-nota__bajada, .cf-nota--l .cf-nota__bajada, .cf-rejilla > .cf-nota:first-child .cf-nota__bajada { display: -webkit-box; } .cf-nota__meta { margin: .3rem 0 0; color: var(--cf-texto-tenue); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; display: flex; gap: .45rem; flex-wrap: wrap; } .cf-nota__firma { color: var(--cf-texto-suave); font-weight: 600; } .cf-nota__firma::after { content: "|"; margin-left: .45rem; color: var(--cf-borde-fuerte); } /* ─── Los cuatro tamaños ────────────────────────────────────────────────────── */ .cf-nota--xl .cf-nota__medio { aspect-ratio: 16 / 9; border-radius: var(--cf-radio); } .cf-nota--xl .cf-nota__cuerpo { gap: .45rem; padding-top: .9rem; } .cf-nota--xl .cf-nota__titulo { font-family: var(--cf-titulo); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem); line-height: 1.06; font-weight: 700; -webkit-line-clamp: 4; } .cf-nota--xl .cf-nota__bajada { font-size: 1.05rem; } .cf-nota--xl .cf-nota__volanta { font-size: .76rem; } .cf-nota--l .cf-nota__medio { aspect-ratio: 16 / 9; border-radius: var(--cf-radio); } .cf-nota--l .cf-nota__cuerpo { gap: .38rem; padding-top: .75rem; } .cf-nota--l .cf-nota__titulo { font-family: var(--cf-titulo); font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem); line-height: 1.14; font-weight: 700; } .cf-nota--m .cf-nota__titulo { font-size: 1.18rem; } .cf-nota--s { flex-direction: row; gap: .8rem; align-items: flex-start; } .cf-nota--s .cf-nota__medio { flex: 0 0 80px; aspect-ratio: 1; } .cf-nota--s .cf-nota__cuerpo { padding-top: 0; gap: .2rem; } .cf-nota--s .cf-nota__titulo { font-size: 1.02rem; line-height: 1.25; } .cf-nota--s .cf-nota__volanta { font-size: .63rem; } /* ─── Contenedor 1 · Rejilla ────────────────────────────────────────────────── */ /* * Las columnas se separan con una línea vertical y las filas con una horizontal, como en * un diario. Antes cada nota traía su propia caja y el conjunto parecía un tablero. */ .cf-rejilla { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); align-items: stretch; } .cf-rejilla > .cf-nota { padding: var(--cf-espacio) var(--cf-espacio); border-top: 1px solid var(--cf-borde); height: 100%; } .cf-rejilla > .cf-nota:not(:nth-child(3n+1)) { border-left: 1px solid var(--cf-borde); } /* ── Los cuatro tramos de la rejilla ────────────────────────────────────────── * * 🔴 CADA BLOQUE TRAE 9 NOTAS Y NO SON IGUALES: las 3 primeras llevan foto y las 6 * siguientes son filas `--s` con miniatura. Medido en la portada servida, en las 8 rejillas. * Por eso el reparto que pidió Mario el 05-sep-2026 se puede expresar por posición: * * ≥ 1001 px la líder ocupa 2×2 y la 2 y la 3 se apilan a su derecha · el resto, 3 columnas * 700-1000 la líder a lo ancho · la 2 y la 3 a mitad · el resto, 3 columnas * 561-699 la líder a lo ancho · el resto, 2 columnas * ≤ 560 todo a una columna * * ⚠️ EL TRAMO 700-1000 NECESITA SEIS COLUMNAS, no tres. Hay que mezclar mitades (la 2 y la * 3) con tercios (el resto) en la misma rejilla, y 6 es el mínimo común múltiplo: media * fila son 3 pistas y un tercio son 2. Con `repeat(3, 1fr)` no hay forma de partir una * fila en dos. */ @media (min-width: 561px) and (max-width: 699px) { .cf-rejilla { grid-template-columns: repeat(2, 1fr); } /* * ⚠️ LA PROPORCIÓN VA EN LA CELDA, NO EN LA FOTO. La líder es la pieza hero: su imagen va * `position: absolute; inset: 0`, así que quien decide el alto es el `
    `. A lo * ancho y sin proporción, la celda solo medía lo que midiera su texto. */ .cf-rejilla > .cf-nota:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; } /* * ⚠️ EL BORDE IZQUIERDO NO SE PUEDE DEJAR EN `3n+1` CUANDO LAS FILAS SON DE DOS. Las * primeras de cada fila visual son la 1 (que va sola), la 2, la 4, la 6 y la 8 — o * sea las pares más la primera—, y una raya vertical al principio de una fila se ve * como un borde suelto. */ .cf-rejilla > .cf-nota { border-left: 1px solid var(--cf-borde); } .cf-rejilla > .cf-nota:first-child, .cf-rejilla > .cf-nota:nth-child(2n) { border-left: 0; } } @media (min-width: 700px) and (max-width: 1000px) { .cf-rejilla { grid-template-columns: repeat(6, 1fr); } /* * MEDIA FILA CADA UNA (Mario, 05-sep-2026, corrigiendo el `span 2` de la primera versión). * Sobre 6 pistas, `span 3` son dos por fila: [1] · [2,3] · [4,5] · [6,7] · [8,9]. * * ⚠️ LAS NOTAS 2 Y 3 YA NO NECESITAN REGLA PROPIA: tenían `span 3` para diferenciarse del * `span 2` general, y ahora todas valen lo mismo. Se retira en vez de dejarla repitiendo * un valor — el día que alguien cambie el general, una regla igual escrita aparte le * haría creer que la 2 y la 3 quedan fuera del cambio. */ .cf-rejilla > .cf-nota { grid-column: span 3; } /* Más ancha que en el tramo de abajo, así que apaisada: 4:3 la haría altísima. */ .cf-rejilla > .cf-nota:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } /* Filas visuales: [1] · [2,3] · [4,5] · [6,7] · [8,9]. Abren fila la 1 y las pares. */ .cf-rejilla > .cf-nota { border-left: 1px solid var(--cf-borde); } .cf-rejilla > .cf-nota:first-child, .cf-rejilla > .cf-nota:nth-child(2n) { border-left: 0; } } @media (min-width: 1001px) { .cf-rejilla { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .cf-rejilla--4 { grid-template-columns: repeat(4, 1fr); } } /* 🔴 La primera manda: ocupa dos columnas y sube de tamaño. Es el `story-grid-primary` de Billboard, y es lo que separa una portada de una hoja de cálculo. */ /* * 🔴 UNA SOLA PROPORCIÓN DE IMAGEN POR REJILLA. Medido a 1280 px, la causa de los huecos * eran CINCO proporciones conviviendo (1.00, 1.33, 1.50, 1.60, 1.78): dos tarjetas de la * misma fila con proporciones distintas tienen alturas distintas, y la más corta deja el * agujero. En Influencers eran 186 px debajo de cada tarjeta pequeña. * * Dentro de `.cf-rejilla` **todo va en 16:9**. Otras rejillas pueden usar otra proporción, * pero nunca dos dentro del mismo contenedor. */ .cf-rejilla > .cf-nota .cf-nota__medio { aspect-ratio: 16 / 9; } /* * 🔴 LA MINIATURA DE `--s` DENTRO DE LA REJILLA — 03-sep-2026. * * `.cf-rejilla > .cf-nota .cf-nota__medio` fuerza 16:9 a TODO lo que caiga en * la rejilla, y esa regla tiene 3 clases de especificidad frente a las 2 de * `.cf-nota--s .cf-nota__medio`: sin esto, las notas pequeñas del pie del * bloque salían con una foto panorámica gigante en vez de su miniatura. * * ⚠️ Va DESPUÉS de la regla que pisa, a propósito: misma especificidad (3 * clases), así que **gana la última de la hoja**. Colocarla antes no habría * hecho nada y no habría dado ningún aviso. */ .cf-rejilla > .cf-nota--s { flex-direction: row; gap: .85rem; align-items: flex-start; } .cf-rejilla > .cf-nota--s .cf-nota__medio { flex: 0 0 92px; aspect-ratio: 1; align-self: flex-start; } .cf-rejilla > .cf-nota--s .cf-nota__cuerpo { padding-top: 0; } /* Con miniatura al lado no cabe la bajada: el titular es lo que se lee. */ .cf-rejilla > .cf-nota--s .cf-nota__bajada { display: none; } /* * 🔴 Y la red de seguridad, por si un titular de tres líneas descuadra igual: las * tarjetas se estiran a la altura de su fila y la meta se empuja abajo. Así el pie de * todas las tarjetas de una fila queda alineado pase lo que pase con el texto. */ .cf-rejilla > .cf-nota .cf-nota__cuerpo { flex: 1; } .cf-rejilla > .cf-nota .cf-nota__meta { margin-top: auto; } /* * 🔴 La líder ocupa DOS COLUMNAS Y DOS FILAS — SOLO DESDE 1001 px. * * Antes ocupaba solo dos columnas, en la MISMA fila que las pequeñas: al ser más * alta sobresalía y dejaba hueco al lado. Con `span 2 / span 2`, las pequeñas se * apilan a su derecha y rellenan exactamente su altura. Es lo que hacen El País, * Variety y Billboard — El País tiene 10 hijos con `span` y CERO filas con hueco. * * ⚠️ Esto cambia los múltiplos: la líder come 4 celdas, así que el bloque cierra * exacto con un número de notas MÚLTIPLO DE 3 (3, 6, 9, 12…), no con 2+3n. * * ⚠️ POR DEBAJO DE 1001 px LA LÍDER VA A LO ANCHO, no a 2×2 (Mario, 05-sep-2026): en * una rejilla de 6 pistas apiladas a su derecha las dos pequeñas quedaban demasiado * estrechas. Su `grid-column` lo fijan los tramos de más arriba. */ @media (min-width: 1001px) { .cf-rejilla > .cf-nota:first-child { grid-column: span 2; grid-row: span 2; } } /* * 🔴 EL TRATAMIENTO DE LÍDER ARRANCA EN 561 px, NO EN 700, y es un cambio del 05-sep-2026. * Desde que la nota 1 va a lo ancho también entre 561 y 699, tratarla como una nota normal * dejaba una foto 16:9 a pantalla completa con el texto debajo: la pieza más grande del * bloque sin la jerarquía que la justifica. Con el hero, la foto llena la celda y el texto * va superpuesto, que es lo que se ve en las capturas que mandó Mario a esa anchura. */ @media (min-width: 561px) { .cf-rejilla > .cf-nota:first-child .cf-nota__titulo { font-size: clamp(1.15rem, .95rem + .8vw, 1.55rem); line-height: 1.18; font-weight: 750; } /* * 🔴 LÍDER CON FOTO A TODA LA CELDA Y TEXTO SUPERPUESTO — 31-ago-2026. * * El comentario de arriba decía "las pequeñas se apilan a su derecha y * rellenan exactamente su altura", y era falso apenas el título o la * bajada variaban de largo: la imagen (16:9) y el texto DEBAJO suman una * altura que rara vez calza con las dos notas pequeñas apiladas al * lado, dejando un hueco. Aumentar la imagen o achicar las pequeñas no * lo resuelve — el texto sigue siendo variable. Mario lo señaló el * 31-ago-2026 con capturas reales de Música y Cine y Streaming. * * La solución real: mismo tratamiento que la pieza hero de "Noticias * destacadas" (`cf_dest_card()`/`.cf-card-hero`) — la foto llena TODA la * celda (2×2), y el título/bajada quedan superpuestos abajo con un velo, * no debajo en el flujo normal. Así la imagen SIEMPRE mide el alto * completo de la celda, sin importar cuánto texto tenga encima. * * Solo la líder (`:first-child`), y solo si tiene foto — sin foto sigue * en el flujo normal de texto, como cualquier otra nota sin imagen. */ .cf-rejilla > .cf-nota:first-child { position: relative; } .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__medio { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; } .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__medio a { display: block; height: 100%; } /* * 🔴 EL ENCUADRE SE ANCLA ARRIBA, NO AL CENTRO — 03-sep-2026. * * La celda de la líder es casi cuadrada (~784×698: ese alto se lo fijan las * dos tarjetas de la derecha) y las fotos de prensa llegan apaisadas, en * 16:9. **El recorte es inevitable, no cabe**: la única decisión posible es * POR DÓNDE se recorta. * * Con el `center center` por defecto se comía la misma cantidad arriba y * abajo, y en foto periodística el sujeto —la cara, la acción— está en el * tercio superior: salían cabezas cortadas. Anclando en el 30% se conserva * la parte que informa y se sacrifica el suelo, que casi nunca aporta. * * 📌 No es un apaño: `.cf-news-row` ya usaba `object-position: top center` * por esta misma razón. Se unifica el criterio. */ .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__medio img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__medio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cf-sombra-dest-1) 3%, var(--cf-sombra-dest-2) 45%, var(--cf-sombra-dest-3) 82%); } .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__cuerpo { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; flex: none; padding: 20px; color: var(--cf-sobre-oscuro); } /* * 🔴 MISMO TAMAÑO DE TÍTULO QUE `.cf-card-hero h2` — 31-ago-2026, a pedido de * Mario ("titulo mas grande, trae el mismo css del captinon"). No un clamp * propio más chico: el mismo valor exacto que usa la pieza hero de * "Noticias destacadas" para el título superpuesto sobre foto. */ .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__titulo { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.08; max-width: 700px; } .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__titulo, .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__titulo a { color: var(--cf-sobre-oscuro); } .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__bajada, .cf-rejilla > .cf-nota:first-child:has(.cf-nota__medio) .cf-nota__meta { color: var(--cf-claro-80); } /* * ⚠️ La rejilla de 4 NO amplía la primera, y esta anulación tiene que ir DESPUÉS de * la regla de arriba: las dos tienen la misma especificidad, así que gana la última. * Puesta antes —como estaba— perdía por cascada y dejaba una celda vacía en «Lo * último» y en «Entretenimiento». * * Son cuatro iguales por fila, así que ahí basta con múltiplos de 4. Mezclar líder y * cuatro columnas complica los múltiplos sin ganar nada. */ .cf-rejilla--4 > .cf-nota:first-child { grid-column: auto; grid-row: auto; } .cf-rejilla--4 > .cf-nota:first-child .cf-nota__titulo { font-size: .97rem; line-height: 1.27; font-weight: 700; } .cf-rejilla--4 > .cf-nota:first-child .cf-nota__bajada { display: none; } } /* ─── Contenedor 2 · Río — lista densa. Cambia el ritmo con casi nada ───────── */ .cf-rio { display: grid; gap: 0; } .cf-rio > .cf-nota { flex-direction: row; gap: .85rem; align-items: flex-start; padding-block: .85rem; border-bottom: 1px solid var(--cf-borde); } .cf-rio > .cf-nota:last-child { border-bottom: 0; } .cf-rio > .cf-nota .cf-nota__medio { flex: 0 0 84px; aspect-ratio: 1; } .cf-rio > .cf-nota .cf-nota__cuerpo { padding-top: 0; } .cf-rio > .cf-nota .cf-nota__titulo { font-size: .93rem; } .cf-rio > .cf-nota .cf-nota__bajada { display: none; } /* En dos columnas cuando hay sitio: un río de 8 en una sola columna es un tobogán. */ @media (min-width: 900px) { .cf-rio--2 { grid-template-columns: 1fr 1fr; column-gap: var(--cf-espacio-3); } } /* * 🔴 EL RÍO, EN DOS COLUMNAS: la principal a la izquierda y las demás apiladas a su lado. * * Antes la principal era horizontal —imagen a un lado, texto al otro— y su texto ocupaba * 85 px frente a los 338 px de la imagen: **253 px de vacío** en la columna del texto. * Agrandar el titular habría ganado 100-150 px de esos 253; no llega. * * Lo que hacen El País, Variety y Billboard es rellenar ese lado con CONTENIDO: la * columna derecha no lleva solo el texto de la principal, lleva titulares secundarios. * * Aquí sale con la misma pieza y sin marcado nuevo: la principal va vertical ocupando la * columna izquierda entera —imagen arriba, texto debajo— y las cinco restantes se apilan * a su derecha. Las alturas se igualan solas, que es el patrón que ya funciona en la * apertura. * * ⚠️ Si un bloque no tiene secundarias suficientes para llenar esa columna, no usa esta * forma: usa rejilla. */ @media (min-width: 760px) { .cf-rio:not(.cf-rio--plano) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--cf-espacio-2); align-items: start; } /* * 🔴 La principal SE ESTIRA a la altura de su columna, en vez de cuadrarla contando * secundarias. * * Se intentó lo otro —ajustar cuántas notas van al lado hasta que las alturas * coincidieran— y no converge: la altura de cada secundaria depende de lo largo que * sea su titular, así que el número que cuadra hoy deja de cuadrar mañana con otro * contenido. Con `align-self: stretch` y la imagen a `height: 100%` con * `object-fit: cover`, **el desajuste es cero por construcción**, venga el contenido * que venga. * * El recorte de la imagen no se nota porque la foto ya venía recortada por * `object-fit` en todos los formatos del tema. */ .cf-rio:not(.cf-rio--plano) > .cf-nota:first-child { grid-column: 1; grid-row: 1 / -1; align-self: stretch; flex-direction: column; gap: 0; padding-block: 0; border-bottom: 0; } .cf-rio:not(.cf-rio--plano) > .cf-nota:first-child .cf-nota__medio { flex: 1 1 auto; width: 100%; aspect-ratio: auto; min-height: 260px; border-radius: var(--cf-radio); } .cf-rio:not(.cf-rio--plano) > .cf-nota:first-child .cf-nota__medio img { height: 100%; object-fit: cover; } .cf-rio:not(.cf-rio--plano) > .cf-nota:first-child .cf-nota__cuerpo { padding-top: .8rem; } .cf-rio:not(.cf-rio--plano) > .cf-nota:first-child .cf-nota__titulo { font-size: 1.4rem; line-height: 1.16; } .cf-rio:not(.cf-rio--plano) > .cf-nota:first-child .cf-nota__bajada { display: -webkit-box; } .cf-rio:not(.cf-rio--plano) > .cf-nota:not(:first-child) { grid-column: 2; } .cf-rio:not(.cf-rio--plano) > .cf-nota:nth-child(2) { padding-top: 0; } /* * ⚠️ Las secundarias van COMPACTAS para que las cinco sumen la altura de la principal. * Con la altura normal ocupaban 181 px cada una —908 px las cinco frente a los 460 de * la principal— y el hueco se mudaba a la otra columna en vez de desaparecer. * * Miniatura más pequeña, titular a dos líneas y sin fecha: en una lista de apoyo el * titular es lo único que se lee. */ .cf-rio:not(.cf-rio--plano) > .cf-nota:not(:first-child) { padding-block: .55rem; gap: .7rem; } .cf-rio:not(.cf-rio--plano) > .cf-nota:not(:first-child) .cf-nota__medio { flex: 0 0 68px; aspect-ratio: 1; } .cf-rio:not(.cf-rio--plano) > .cf-nota:not(:first-child) .cf-nota__titulo { font-size: .88rem; -webkit-line-clamp: 2; } .cf-rio:not(.cf-rio--plano) > .cf-nota:not(:first-child) .cf-nota__meta { display: none; } .cf-rio:not(.cf-rio--plano) > .cf-nota:not(:first-child) .cf-nota__cuerpo { gap: .15rem; } } /* * 🔴 «Lo más leído» — COMPONENTE PROPIO, valores calcados 1:1 del CSS real * del mockup (`colorfans-redesign-plantillas-v3/01-home.html`: * `.ranking-v2` `.rank-lead` `.rank-badge` `.rank-list-v2` `.rank-item-v2`). * NO es `.cf-nota` con modificadores — es su propio marcado, con sus * propias clases, para no forzar el componente genérico a un layout que de * verdad es distinto (foto de fondo con texto encima, insignia con borde, * dos columnas EN FILA). `var(--line)`→`var(--cf-borde)`, * `var(--accent2)`→`var(--cf-brasa)` (mismo rol: acento secundario/naranja), * `rgba(13,13,15,.72)`→`var(--cf-velo-fuerte)` (mismo rol: velo oscuro * sobre foto), `var(--serif)` NO se porta —decisión ya tomada de no usar * serif en titulares, `var(--cf-titulo)` en su lugar—. */ .cf-ranking { display: grid; grid-template-columns: .78fr 1.22fr; gap: var(--cf-espacio); align-items: stretch; } .cf-rank-lead { position: relative; min-height: 360px; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); overflow: hidden; background: var(--cf-superficie); } .cf-rank-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cf-rank-lead::after { content: ""; position: absolute; inset: 38% 0 0; background: var(--cf-velo-degradado); } .cf-rank-lead__copy { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; } .cf-rank-lead__copy h3 { font-size: 1.5rem; line-height: 1.12; margin: .6rem 0 0; font-family: var(--cf-titulo); } .cf-rank-lead__copy h3 a { color: inherit; text-decoration: none; } .cf-rank-lead__copy h3 a:hover { color: var(--cf-acento); } .cf-rank-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--cf-brasa); border-radius: 1rem; font-family: var(--cf-titulo); font-size: 1.8rem; font-weight: 800; color: var(--cf-brasa); background: var(--cf-velo-fuerte); } .cf-rank-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } .cf-rank-item { display: grid; grid-template-columns: 40px 1fr; gap: .6rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--cf-borde); } .cf-rank-item .cf-rank-badge { width: 40px; height: 40px; border-width: 1px; border-radius: .75rem; font-size: 1.35rem; background: transparent; } .cf-rank-item h4 { margin: .2rem 0; font-size: .875rem; line-height: 1.25; } .cf-rank-item h4 a { color: inherit; text-decoration: none; } .cf-rank-item h4 a:hover { color: var(--cf-acento); } .cf-rank-label { font-size: .7rem; font-weight: 800; letter-spacing: .02em; color: var(--cf-brasa); text-transform: uppercase; } @media (max-width: 900px) { .cf-ranking { grid-template-columns: 1fr; } .cf-rank-list { grid-template-columns: 1fr; } } /* * 🔴 `.category-note` — AUTOCONTENIDA AQUÍ, no importada de `categoria.css`. * Esa hoja solo se encola en `is_category()` (`inc/assets.php`); desde el * 31-ago-2026 la misma franja de agenda (`cf_cat_franja_agenda()`) también * se pinta en el home, donde `categoria.css` no está cargada. En vez de * acoplar esta hoja a las clases `.cf-cat .eyebrow`/`.cf-cat .text-link` de * la otra, se declara su propio juego mínimo — evita que un cambio en * categoria.css rompa el home sin avisar, o viceversa. */ .category-note { margin-top: 2rem; padding: 1.1rem; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); background: var(--cf-superficie); } .category-note .eyebrow { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--cf-brasa); display: flex; align-items: center; gap: .4rem; } .category-note h3 { font-size: 1.05rem; margin: .3rem 0 .4rem; } .category-note .story-deck { color: var(--cf-texto-suave); font-size: .85rem; line-height: 1.5; margin: 0 0 .75rem; } .category-note .text-link { display: inline-block; margin-top: .3rem; color: var(--cf-acento); font-weight: 800; font-size: .8rem; text-decoration: none; } .category-note .text-link:hover { text-decoration: underline; } /* ─── Contenedor 3 · Carrusel ───────────────────────────────────────────────── */ .cf-carrusel { /* * 🔴 EL ANCHO SALE DE LA CAJA, no de una medida fija. * * Con `minmax(215px, 250px)` en un contenedor de 1176 entraban **5,23 tarjetas**: * la sexta asomaba cortada por el borde y el carrusel se veía descuadrado a * cualquier anchura que no fuera múltiplo de la tarjeta. Lo señaló Mario el * 30-ago-2026. * * Calculado a partir del contenedor entran exactamente N y ninguna queda partida. * ⚠️ La cuenta descuenta los huecos: con N tarjetas hay N-1 huecos. */ --cf-carr-visibles: 5; display: grid; grid-auto-flow: column; /* ⚠️ EL MISMO HUECO QUE EL `gap` DE ABAJO (`--cf-espacio`), o la cuenta no cuadra: con `--cf-espacio-2` la tarjeta salía a 216 px en vez de 222 y volvía a asomar una quinta parte de tarjeta por el borde. */ grid-auto-columns: calc((100% - (var(--cf-carr-visibles) - 1) * var(--cf-espacio)) / var(--cf-carr-visibles)); gap: var(--cf-espacio); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: .7rem; scrollbar-width: thin; scrollbar-color: var(--cf-borde-fuerte) transparent; } .cf-carrusel > * { scroll-snap-align: start; } /* * La barra de desplazamiento se oculta CUANDO HAY JS, porque entonces se recorre con las * flechas. Sin JS se deja visible: es la única forma de llegar al resto de eventos, y un * carrusel que no se puede recorrer es contenido perdido. */ .cf-sin-js .cf-carrusel::-webkit-scrollbar { height: 7px; } .cf-sin-js .cf-carrusel::-webkit-scrollbar-thumb { background: var(--cf-borde-fuerte); border-radius: 4px; } /* * 🔴 CON JS, SIN `scroll-snap` NINGUNO. * * `scroll-snap-type` junto a `scroll-behavior: smooth` **frena el desplazamiento * programático**: el navegador reengancha al punto de snap y la animación muere. Medido: * con `mandatory` el `scrollBy` dejaba `scrollLeft` en 0, y con `proximity` avanzaba * 5 px de los 945 pedidos. Sin snap, los mismos 945 se aplican enteros. * * No da error de ninguna clase: las flechas simplemente no mueven nada. * * Y el snap aquí no aportaba: las flechas ya calculan el salto por el ancho de la * tarjeta, que es justo lo que el snap intentaba corregir a posteriori. * * ⚠️ Sin JS el snap SÍ se queda (regla de más arriba): allí se arrastra a mano y ayuda * a que las tarjetas no queden cortadas. */ .cf-con-js .cf-carrusel { scrollbar-width: none; padding-bottom: 0; scroll-snap-type: none; /* * ⚠️ Y SIN `scroll-behavior: smooth` aquí tampoco. * * Declarado en CSS, deja el desplazamiento programático en cero: `scrollBy` no avanza * ni un píxel. Es el mismo patrón que ya apareció con la transición del rail — el * navegador no completa la animación y el valor se queda donde estaba. * * La suavidad se pide desde JS, en cada llamada, con `behavior: 'smooth'`: si el * entorno no anima, al menos salta, y el carrusel se recorre igual. */ } .cf-con-js .cf-carrusel::-webkit-scrollbar { display: none; } /* ─── Flechas del carrusel ──────────────────────────────────────────────────── */ .cf-carrusel-marco { position: relative; } .cf-carrusel__flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; cursor: pointer; background: var(--cf-superficie); color: var(--cf-texto); border: 1px solid var(--cf-borde-fuerte); border-radius: 50%; box-shadow: var(--cf-sombra); } .cf-carrusel__flecha:hover { background: var(--cf-superficie-2); } .cf-carrusel__flecha svg { width: 13px; height: 13px; } /* * 🔴 DENTRO DEL MARCO, SIN NEGATIVOS (Mario, 05-sep-2026). Con `left: -18px` la flecha sobresale * del contenedor: por la izquierda solo se ve cortada, pero por la derecha **empuja el ancho del * documento y saca una barra de desplazamiento horizontal** en cuanto el contenedor no la * recorta. Medido a 762 px: la flecha izquierda caía en `left: -2`. */ .cf-carrusel__flecha--izq { left: 0; } .cf-carrusel__flecha--der { right: 0; } /* Al llegar a un extremo la flecha se apaga en vez de desaparecer: si se quitara, la otra se movería de sitio y el dedo o el ratón fallarían el clic siguiente. */ .cf-carrusel__flecha[disabled] { opacity: .3; cursor: default; box-shadow: none; } @media (max-width: 700px) { /* En una pantalla estrecha las flechas taparían las tarjetas: ahí se arrastra. */ .cf-carrusel__flecha { display: none; } .cf-con-js .cf-carrusel { scrollbar-width: thin; } } /* * ─── Franja de agenda por sección («Teatro y escena esta semana») — 31-ago-2026 ─── * * 🔴 CONFIRMADO ROTO Y REHECHO. La versión anterior reutilizaba `.category-note` * (pensada para una lista de texto plano) para un componente que en el mockup real * es genuinamente distinto: un carril de tarjetas con insignia de fecha. Componente * nuevo y aislado, no una adaptación — HANDOFF.md §5.2 / CLAUDE.md. * * CSS extraído 1:1 de `colorfans_redesign_v4/01-home.html`, clases * `.event-context`/`.rail-shell`/`.rail-arrow`/`.event-context-grid`/`.context-event`/ * `.event-date`, renombradas con prefijo `cf-agenda-` y con sus variables mapeadas a * los tokens del proyecto por rol, no por nombre: * var(--panel) → --cf-superficie var(--panel2) → --cf-superficie-2 * var(--line) → --cf-borde var(--text) → --cf-texto * var(--accent) → --cf-acento * var(--accent2)→ --cf-brasa (ya documentada arriba como «la fecha de un evento» — encaje exacto) * var(--soft) → --cf-fondo (el proyecto no tiene un tono intermedio entre fondo y * superficie; --cf-fondo es el más cercano al #121215 del mockup) */ .cf-agenda { margin-top: 20px; border: 1px solid var(--cf-borde); border-radius: 14px; background: linear-gradient(135deg, var(--cf-superficie), var(--cf-fondo)); padding: 14px; } .cf-agenda__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .cf-agenda__cabecera strong { display: flex; align-items: center; gap: 6px; font-size: .95rem; } /* * 🔴 UN SVG SIN MEDIDAS SE ESTIRA A LO QUE LE DÉ EL CONTENEDOR — pasó de nuevo, * 01-sep-2026. `cf_cat_franja_agenda()` pasó de un glifo de texto («★») a un * ícono SVG real (`cf_icono()`), pero el `` queda suelto dentro de * `` sin ancho/alto: crecía a pantalla casi completa dentro de la * tarjeta de Entretenimiento («Humor en vivo»). Mismo patrón documentado ya * cuatro veces en este proyecto — la regla que cubre `.cme-mas`/`.cme-lado__mas` * es de otra hoja (`eventos.css`) y no alcanza aquí. */ .cf-agenda__cabecera strong svg { width: 15px; height: 15px; flex: 0 0 15px; fill: currentColor; } .cf-agenda__enlace { color: var(--cf-acento); font-weight: 800; font-size: .8rem; text-decoration: none; white-space: nowrap; } .cf-agenda__enlace:hover { text-decoration: underline; } .cf-agenda-riel { position: relative; } .cf-agenda-riel__pista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; padding-inline: 4px; } /* Las flechas solo existen para el riel angosto (media query al pie): en la grilla de 3 columnas de escritorio no hay nada que recorrer. */ .cf-agenda-riel__flecha { display: none; position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--cf-borde); background: var(--cf-velo-fuerte); color: var(--cf-texto); font-size: 22px; align-items: center; justify-content: center; cursor: pointer; } .cf-agenda-riel__flecha--prev { left: 0; } .cf-agenda-riel__flecha--next { right: 0; } .cf-agenda-evento { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: var(--cf-superficie-2); border: 1px solid var(--cf-borde); text-decoration: none; color: inherit; } .cf-agenda-evento h4 { margin: 0 0 3px; font-size: .875rem; line-height: 1.18; } .cf-agenda-evento small { color: var(--cf-texto-suave); } .cf-agenda-evento__fecha { width: 54px; height: 54px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--cf-acento) 55%, var(--cf-borde)); display: grid; place-items: center; text-align: center; color: var(--cf-brasa); font-weight: 900; font-size: 11px; line-height: 1.05; } /* * ─── «Grandes eventos» del home — 31-ago-2026 ─────────────────────────────── * * CSS extraído de `colorfans_redesign_v4/01-home.html`, clases `.big-events`/ * `.big-event-main`/`.big-event-copy`/`.big-event-side`/`.big-event-row`, * renombradas `cf-eventos-grandes*`. El mockup usa placeholders con * `background:linear-gradient(...)` porque no tenía fotos reales — aquí SÍ * hay foto real (destacada del evento), así que se reutiliza la técnica ya * resuelta de foto-a-toda-caja + velo (`.cf-image-shade`/`--cf-sombra-dest-*`, * la misma de `.cf-news-copy` más arriba) en vez de duplicar un degradado * nuevo — es la misma clase de componente, no una adaptación forzada. */ .cf-eventos-grandes { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 18px; } .cf-eventos-grandes__principal { min-height: 300px; position: relative; border: 1px solid var(--cf-borde); border-radius: 14px; overflow: hidden; background: var(--cf-superficie); } .cf-eventos-grandes__principal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cf-eventos-grandes__copia { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; color: var(--cf-texto); } .cf-eventos-grandes__etiqueta { font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--cf-texto-suave); text-transform: uppercase; } .cf-eventos-grandes__copia h3 { font-size: 1.7rem; line-height: 1.08; margin: 6px 0; } .cf-eventos-grandes__copia p { color: var(--cf-texto-suave); font-size: .9rem; margin: 0; } /* * ⚠️ `space-between`, NO `1fr`: con 4 filas la columna lateral puede quedar más corta * que la pieza principal, y estirar las tarjetas las dejaría distintas a las del * resto del sitio —una foto de 82 px centrada en una fila de 200—. Se reparte el * espacio ENTRE ellas, que es el precedente ya resuelto en la líder de categoría. * Así sirve igual con 2, 3 o 4 tarjetas y no aparece un hueco al pie. */ .cf-eventos-grandes__lado { display: grid; gap: 12px; align-content: space-between; } .cf-eventos-grandes__fila { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; border: 1px solid var(--cf-borde); background: var(--cf-superficie); border-radius: 12px; padding: 10px; text-decoration: none; color: inherit; } .cf-eventos-grandes__fila img { width: 104px; height: 82px; border-radius: 8px; object-fit: cover; } .cf-eventos-grandes__fila h3 { margin: 4px 0; font-size: .94rem; line-height: 1.2; } .cf-eventos-grandes__fila small { color: var(--cf-texto-suave); } /* * ─── «Recintos destacados» — rehecho 31-ago-2026 (tarde) ──────────────────── * * CSS extraído de `colorfans_redesign_v4/01-home.html`, clases * `.home-venues-feature`/`.venue-feature-main`/`.venue-copy`/ * `.venue-feature-side`/`.venue-compact`, renombradas `cf-recintos-feature*`. * Mismo mapeo de tokens que el resto de esta hoja (`--panel`→`--cf-superficie`, * `--line`→`--cf-borde`, `--muted`→`--cf-texto-suave`). */ .cf-recintos-feature { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 18px; } .cf-recintos-feature__principal { display: grid; grid-template-columns: 1.05fr .95fr; border: 1px solid var(--cf-borde); border-radius: 14px; overflow: hidden; background: var(--cf-superficie); color: inherit; text-decoration: none; } .cf-recintos-feature__foto { min-height: 310px; margin-bottom: 0; background: var(--cf-superficie-2); } .cf-recintos-feature__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* * ⚠️ AQUÍ HABÍA `padding: 26px; align-self: center;` Y NO PINTABA NADA. Este bloque solo * existe en `front-page.php`, que carga `v4.css` DESPUÉS de esta hoja, y allí se declaran * las dos propiedades: la regla llevaba tiempo muerta. Se retira al cambiar la buena * (05-sep-2026, `align-self: end`) para que nadie la lea creyendo que está vigente — es la * trampa que este proyecto ya documentó: comprobar que una regla está escrita no es * comprobar que se aplica. */ .cf-recintos-feature__etiqueta { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--cf-acento); text-transform: uppercase; } .cf-recintos-feature__nombre { display: block; font-size: 1.9rem; line-height: 1.05; margin: 7px 0; font-weight: 750; } .cf-recintos-feature__bajada { display: block; color: var(--cf-texto-suave); font-size: .9rem; margin-bottom: 14px; } .cf-recintos-feature__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--cf-borde); border-radius: 999px; color: var(--cf-texto-suave); font-size: .78rem; font-weight: 650; } .cf-recintos-feature__chip svg { width: 11px; height: 11px; } .cf-recintos-feature__riel { position: relative; } .cf-recintos-feature__lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cf-recintos-feature__compacto { display: block; border: 1px solid var(--cf-borde); border-radius: 12px; background: var(--cf-superficie); padding: 14px; text-decoration: none; color: inherit; } .cf-recintos-feature__foto-chica { display: block; min-height: 92px; margin-bottom: 0; border-radius: 8px; overflow: hidden; background: var(--cf-superficie-2); } .cf-recintos-feature__foto-chica img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-recintos-feature__nombre-chico { display: block; font-size: .94rem; margin: 3px 0; font-weight: 650; } .cf-recintos-feature__cuenta { display: block; font-size: .78rem; color: var(--cf-texto-suave); } /* Flechas: solo existen para el riel angosto (media query al pie) — en el 2×2 de escritorio no hay nada que recorrer, igual criterio que `.cf-agenda`. */ .cf-recintos-feature__flecha { display: none; position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--cf-borde); background: var(--cf-velo-fuerte); color: var(--cf-texto); align-items: center; justify-content: center; cursor: pointer; } .cf-recintos-feature__flecha svg { width: 12px; height: 12px; } .cf-recintos-feature__flecha--prev { left: 0; } .cf-recintos-feature__flecha--next { right: 0; } /* ─── Evento en fila («.cme-listado») — mudado de eventos.css el 30-ago-2026 ── Lo usan las dos: «Próximos eventos» en la ficha de recinto (taxonomy-lugar.php, que además carga eventos.css) y la Cartelera de la portada en móvil (que NO la carga, ver más abajo). Un componente que cruza esa frontera va en la hoja base. Mismos nombres de clase que produce `cf_evt_card_html($id, 'lista')` en inc/eventos.php — no se reescribe el PHP, solo se reubica el CSS. ⚠️ Convertido de los tokens `--cme-*` (aliases locales de eventos.css, que la portada tampoco carga) a los `--cf-*` de siempre. Mismos valores. ────── */ .cme-listado { display: grid; gap: 7px; } .cme-linea__enlace { display: grid; grid-template-columns: 52px 74px minmax(0,1fr) auto 22px; /* ⚠️ GAP SIMÉTRICO Y RELLENO PAREJO — corregido el 30-ago-2026. Llevaba `gap:13px` (una sola cifra, ya simétrico) pero un `padding` de cuatro valores distintos (9/13/9/9); Mario lo señaló como «no simétrico». */ gap: 10px; align-items: center; padding: 10px; text-decoration: none; color: var(--cf-texto); background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: 3px; transition: border-color .15s ease, background .15s ease; } .cme-linea__enlace:hover { border-color: var(--cf-brasa); background: var(--cf-superficie-2); } .cme-linea__fecha { display: block; text-align: center; line-height: 1.05; } .cme-linea__fecha .cme-fecha__dia { display: block; font-size: 9.5px; font-weight: 700; color: var(--cf-texto-suave); font-style: normal; } .cme-linea__fecha .cme-fecha__num { display: block; font-size: 21px; font-weight: 800; color: var(--cf-brasa); font-style: normal; } .cme-linea__fecha .cme-fecha__mes { display: block; font-size: 9.5px; font-weight: 700; color: var(--cf-texto-suave); font-style: normal; } .cme-linea__img { display: block; border-radius: 3px; overflow: hidden; aspect-ratio: 16/10; background: var(--cf-superficie-2); } .cme-linea__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .cme-linea__cuerpo { min-width: 0; } /* * ⚠️ CON TOPE DE DOS LÍNEAS. Un título largo («Breath y Float – Floating * Breathwork») se estiraba a tres renglones y esa fila salía más alta que * las demás — la fuente real del «no es simétrico» que señaló Mario: no era * el espaciado, era que cada fila medía lo que su título quisiera. */ .cme-linea__titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.2; } .cme-linea__meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; font-size: 10.5px; color: var(--cf-texto-suave); } .cme-linea__meta i { font-style: normal; opacity: .6; } .cme-linea__precio { display: grid; gap: 1px; text-align: right; } .cme-linea__precio em { font-style: normal; font-size: 12px; font-weight: 650; color: var(--cf-texto); white-space: nowrap; line-height: 1.25; } /* * 🔴 `fill: currentColor` FALTABA — la flecha salía NEGRA. * * `cf_evt_icono()` (inc/eventos.php) imprime el `` SIN `fill="currentColor"` * a propósito: cada componente que lo usa lo fija en su propio CSS (así es en * TODO eventos.css — `.cme-boton svg`, `.cme-datos svg`, `.cme-flecha svg`…, * ninguno confía en una regla `svg{}` global). A esta regla se le olvidó, y * sin `fill` un SVG cae al negro puro del propio spec, no al color del texto. * Mario lo vio el 30-ago-2026: «el arrow está negro, debe ser blanco». */ .cme-linea__ir { display: grid; place-items: center; color: var(--cf-texto); } .cme-linea__ir svg { width: 14px; height: 14px; fill: currentColor; } .cme-linea__enlace:hover .cme-linea__titulo, .cme-linea__enlace:hover .cme-linea__ir { color: var(--cf-brasa); } /* * 🔴 `.cf-apertura*` SE BORRÓ el 30-ago-2026: la apertura de tres columnas * (foto/SIN foto/foto) la reemplazó «Noticias destacadas» —mockup de Mario, * todas las piezas con foto—. Sus reglas quedaban sin usar en ningún `.php`. */ /* * ─── Noticias destacadas + Más noticias — rediseño del 30-ago-2026 ─────────── * * 🔴 CALCADO del archivo que Mario entregó (`~/Downloads/index.html` + * `styles.css`), NO reinterpretado desde una captura. Los nombres de clase * son los suyos tal cual; lo único que cambia son los colores, pasados de * sus variables sueltas (`--cf-accent`, `--cf-text`…) a los tokens de * siempre del tema — casi todas calzan casi exactas: * --cf-bg #0d0d0f = --cf-fondo · --cf-text #ececf1 = --cf-texto · * --cf-border #2a2a2f ≈ --cf-borde · --cf-accent #ff513a ≈ --cf-acento * Así responde al interruptor de tema, que el archivo original no llevaba. * * ⚠️ SIN Playfair Display: el archivo que mandó Mario la pedía para * `.cf-card h1`/`h2`, pero pidió revertir a la sans de siempre por * **consistencia** con el resto de la portada (`var(--cf-titulo)`, la misma * decisión ya tomada para `template-parts/nota.php`). El enqueue de Google * Fonts en `inc/assets.php` también se retiró. */ .cf-section + .cf-section { margin-top: 34px; } /* * ─── «Ahora en ColorFans» — franja de tendencias bajo el header ───────────── * Pedida por Mario el 31-ago-2026: una sola fila en escritorio, scroll * horizontal sin saltos de línea en móvil. Las etiquetas salen de * `cf_tags_tendencia()` (post_tag reales, no inventadas). */ .cf-ahora { border-bottom: 1px solid var(--cf-borde); margin-bottom: var(--cf-espacio-2); } /* * 🔴 TODA LA FILA se desplaza junta, no solo `.cf-ahora__tags` — corregido el * 31-ago-2026. Con `.cf-ahora__tags` en `flex:1 1 auto`, el navegador la * encogía por debajo de su contenido (las etiquetas no caben) y, como * `overflow` seguía en `visible`, el texto se salía de su caja y quedaba * ENCIMA de «Tendencias →» en vez de empujarlo fuera de pantalla. La fila * entera va en `flex-wrap:nowrap` con `flex:0 0 auto` en cada hijo: si no * cabe, se desplaza `.cf-ahora__marco` completo — que es justo lo pedido: * «mobile: scroll horizontal, sin saltos de línea». */ .cf-ahora__marco { display: flex; align-items: center; gap: .9rem; flex-wrap: nowrap; padding-block: .7rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cf-ahora__marco::-webkit-scrollbar { display: none; } .cf-ahora__etiqueta { flex: 0 0 auto; color: var(--cf-acento); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .cf-ahora__tags { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; white-space: nowrap; } .cf-ahora__tags a { color: var(--cf-texto-suave); font-size: .82rem; font-weight: 600; text-decoration: none; } .cf-ahora__tags a:hover { color: var(--cf-texto); } .cf-ahora__mas { flex: 0 0 auto; margin-left: auto; color: var(--cf-acento); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .cf-ahora__mas:hover { text-decoration: underline; } /* Etiqueta mínima de «Noticias destacadas» — SIN la cabecera grande completa (sin H2, sin bajada): pedido de Mario el 31-ago-2026, para que el mosaico entre en pantalla de inmediato. Reutiliza la tipografía del ojo de `.cf-bloque-grande__ojo`, pero suelta, con menos margen. */ .cf-rotulo-mosaico { display: flex; align-items: center; gap: .4rem; margin: 0 0 .7rem; color: var(--cf-acento); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .cf-featured-grid { display: grid; grid-template-columns: minmax(0, 1.90fr) minmax(0, .92fr) minmax(0, .92fr); grid-template-rows: 330px 301px; gap: 14px; } .cf-card, .cf-news-card, .cf-news-row { min-width: 0; overflow: hidden; background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); } .cf-card { position: relative; } /* * ⚠️ Sin `text-decoration: none` aquí, el enlace de una tarjeta salía * subrayado — la regla global `a{}` de este tema fija el color y el grosor * del subrayado (para los enlaces DENTRO de un texto), pero no lo quita: eso * lo decide cada componente que lo necesita. Se pone en cada regla que ya * existe para el enlace, no en un `a{}` global — un reset global quitaría el * subrayado de los enlaces de verdad dentro del cuerpo de un artículo, que * sí lo necesitan por accesibilidad. */ .cf-card-link { position: relative; display: block; width: 100%; height: 100%; text-decoration: none; } .cf-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .cf-card:hover .cf-card-image, .cf-news-card:hover img, .cf-news-row:hover img { transform: scale(1.025); } /* Los degradados van SIEMPRE hacia negro puro: son un velo sobre una foto, fijos en las dos versiones a propósito — igual que `--cf-velo` en el resto del sitio. */ .cf-image-shade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--cf-sombra-dest-1) 3%, var(--cf-sombra-dest-2) 37%, var(--cf-sombra-dest-3) 67%); } .cf-image-shade-soft { background: linear-gradient(180deg, var(--cf-sombra-dest-1-suave) 22%, var(--cf-sombra-dest-2-suave) 43%, var(--cf-sombra-dest-3-suave) 88%); } .cf-card-copy { position: relative; z-index: 1; } /* * 🔴 TOPE DE 50% DE ALTO — pedido de Mario el 30-ago-2026: título + bajada + * fecha no pueden tapar más de la mitad de la foto. `overflow:hidden` + el * tope de líneas de abajo (`h1`/`h2`/`p`) es lo que de verdad lo hace * cumplir — sin ellos el texto se saldría igual del recuadro, solo que * invisible en vez de recortado. */ .cf-card-copy-overlay { position: absolute; left: 0; right: 0; bottom: 0; max-height: inherit; overflow: hidden; padding: 20px; } .cf-card-copy-overlay.compact { padding: 16px; } .cf-category { display: block; margin-bottom: 7px; color: var(--cf-acento); font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .cf-card h2, .cf-news-card h3, .cf-news-row h3 { margin: 0; color: var(--cf-texto); letter-spacing: -.03em; } .cf-card h2 { max-width: 540px; font-family: var(--cf-titulo); font-size: clamp(17px, 1.6vw, 24px); line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* * 🔴 `.cf-card-hero h2`, no `.cf-card h1` — la pieza destacada pasó de `

    ` a * `

    ` el 31-ago-2026 (ver `cf_dest_card()` en front-page.php: la portada ya * tenía su `

    ` en el logotipo, y esta era la segunda). El tamaño grande que * antes llevaba el `

    ` se conserva aquí, apuntado por clase — visualmente * idéntico, semánticamente correcto. */ /* * ⚠️ CLAMP 5 PARA UN TITULAR DE 4 LÍNEAS, y no es un descuido. * Con `-webkit-line-clamp: 4` la caja mide exactamente 4 × (38 × 1.08) = 164,16 px, * que el navegador redondea a 164 mientras el texto ocupa 167: **se cortaba la * cuarta línea por 3 px**. Medido en producción a 412 px de ancho de tarjeta. * Con `-webkit-box` la altura la pone el contenido hasta el tope, así que subir el * tope a 5 no añade espacio vacío: solo deja de recortar por redondeo. */ .cf-card-hero h2 { max-width: 700px; font-size: clamp(28px, 2.6vw, 44px); line-height: 1.08; -webkit-line-clamp: 5; } /* * 🔴 CADA TARJETA DE LA FRANJA NECESITA SU TAMAÑO Y SU NÚMERO DE LÍNEAS. * * `.cf-card h2` servía a las cuatro con un solo valor —hasta 24 px y 2 líneas— y en las * dos pequeñas, que miden un tercio del ancho, eso cortaba el titular a media palabra: * «Padre de Felipe Camiroaga abre su…» y «El Deshielo inicia su ruta al Óscar con la…». * Lo vio Mario el 03-sep-2026. * * Medido sobre los titulares reales de la franja: 71, 72, 78 y 85 caracteres. A 18 px en * una tarjeta pequeña entran ~33 por línea, así que 71 caracteres piden 3 líneas, no 2. * * ⚠️ Van DESPUÉS de `.cf-card h2` a propósito: misma especificidad, y en CSS a igual * especificidad gana la última regla de la hoja. Colocadas antes no harían nada y no * darían ningún aviso. * ⚠️ Y se baja la fuente además de subir las líneas: solo subir el clamp haría la * tarjeta pequeña un muro de texto de 24 px sobre la foto. */ .cf-card-feature h2 { font-size: clamp(19px, 1.6vw, 27px); line-height: 1.14; -webkit-line-clamp: 3; } .cf-card-small h2 { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.24; -webkit-line-clamp: 4; } /* La bajada solo cabe en la apertura; en las otras tres roba las líneas del titular. */ .cf-card-feature p, .cf-card-small p { display: none; } .cf-card p { max-width: 680px; margin: 8px 0 0; color: var(--cf-texto-suave); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cf-card time, .cf-news-card time, .cf-news-row time { display: block; margin-top: 12px; color: var(--cf-texto-tenue); font-size: 11px; letter-spacing: .06em; } .cf-card-hero { grid-column: 1 / 2; grid-row: 1 / 3; } .cf-card-feature { grid-column: 2 / 4; } .cf-feature-spain { grid-column: 2 / 3; } .cf-feature-gohan { grid-column: 3 / 4; } /* 8 tarjetas en 4 columnas = dos filas exactas. `auto-rows` iguala el alto de las dos filas para que la rejilla cierre pareja aunque un titular ocupe más líneas que otro. 03-sep-2026. */ .cf-news-grid-primary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; } .cf-news-card a { display: flex; flex-direction: column; min-height: 100%; text-decoration: none; overflow: hidden; align-items: center; justify-content: center; height: 100%; position: relative; aspect-ratio: 5 / 5; width: 100%; } .cf-news-card img { aspect-ratio: 16 / 24; object-fit: cover; transition: transform .35s ease; width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } /* La foto ahora llena toda la tarjeta (absoluta) y el texto flota encima con un velo — igual técnica que `.cf-card-copy-overlay` de la apertura, para que «Más noticias» tenga la misma lectura foto-a-toda-caja. 31-ago-2026. */ .cf-news-copy { padding: 90px 14px 16px; position: absolute; bottom: 0; background: linear-gradient(180deg, transparent 0%, var(--cf-sombra-dest-2-suave) 29%, var(--cf-sombra-dest-solida) 81%); } .cf-news-card h3 { font-size: 17px; line-height: 1.16; } .cf-news-grid-secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } /* * ⚠️ SE QUEDA LA REJILLA `124px / 1fr` — no la reemplaza `aspect-ratio`, la * acompaña. `min-height: 124px` manda sobre `height: 0`, así que la fila * sigue midiendo 124px con la imagen a la izquierda y el texto a la * derecha; `aspect-ratio`/`width` quedan de la iteración anterior sin * efecto práctico, pero Mario pidió dejarlos tal cual, sin `position: * absolute` en la imagen (vuelve a su sitio normal dentro de la rejilla). */ .cf-news-row a { display: grid; grid-template-columns: 124px minmax(0, 1fr); min-height: 124px; aspect-ratio: 1 / 1; height: 0; width: 100%; text-decoration: none; } .cf-news-row img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .35s ease; } .cf-news-row a > div { padding: 14px; } .cf-news-row h3 { font-size: 14px; line-height: 1.2; } .cf-more-cta { display: flex; justify-content: center; margin-top: 24px; } .cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 28px; border: 1px solid var(--cf-acento); border-radius: 8px; color: var(--cf-acento); font-size: 13px; font-weight: 700; transition: background .2s ease, color .2s ease, border-color .2s ease; } .cf-btn:hover { background: var(--cf-acento); color: var(--cf-acento-texto); border-color: var(--cf-acento); } @media (max-width: 1024px) { .cf-featured-grid { grid-template-columns: 1.25fr .75fr; grid-template-rows: 300px 210px 210px; } .cf-card-hero { grid-column: 1; grid-row: 1 / 4; } .cf-card-feature, .cf-feature-spain, .cf-feature-gohan { grid-column: 2; } .cf-card-feature { grid-row: 1; } .cf-feature-spain { grid-row: 2; } .cf-feature-gohan { grid-row: 3; } .cf-news-grid-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-news-grid-secondary { grid-template-columns: 1fr; } } /* Sin foto: el titular ocupa todo el sitio que la imagen dejaba. */ .cf-nota--sin-foto .cf-nota__cuerpo { padding-top: 0; } /* Sin foto, la bajada sí aparece: es lo que da cuerpo a la nota cuando no hay imagen. */ .cf-rejilla > .cf-nota--sin-foto .cf-nota__bajada { display: -webkit-box; -webkit-line-clamp: 2; } /* ─── Una nota sola a todo el ancho: el respiro entre bloques densos ────────── */ /* La líder ancha vive DENTRO de la sección de su bloque, separada de la rejilla que la sigue. Antes era una sección suelta y no hacía falta el margen. */ .cf-ancho { margin-block-end: var(--cf-espacio-2); } .cf-ancho > .cf-nota { flex-direction: column; } @media (min-width: 800px) { /* * La imagen se ESTIRA a la altura del texto. Con una proporción fija medía 389 px * frente a los 174 del texto: 215 px de vacío al lado. Aquí manda el contenido y la * foto se recorta, que es lo contrario de dejar aire. */ .cf-ancho > .cf-nota { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--cf-espacio-2); align-items: stretch; } .cf-ancho > .cf-nota .cf-nota__medio { aspect-ratio: auto; height: 100%; min-height: 240px; } .cf-ancho > .cf-nota .cf-nota__medio img { height: 100%; object-fit: cover; } .cf-ancho > .cf-nota .cf-nota__cuerpo { padding-top: 0; justify-content: center; } } /* ─── Sugerencias del buscador ──────────────────────────────────────────────── */ .cf-buscador__sugerencias { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 80; background: var(--cf-superficie); border: 1px solid var(--cf-borde-fuerte); border-radius: var(--cf-radio-chico); box-shadow: var(--cf-sombra); overflow: hidden; } .cf-buscador__item { display: block; padding: .6rem .8rem; text-decoration: none; color: var(--cf-texto); font-size: .9rem; line-height: 1.3; border-bottom: 1px solid var(--cf-borde); } .cf-buscador__item:last-child { border-bottom: 0; } .cf-buscador__item:hover { background: var(--cf-superficie-2); color: var(--cf-acento); } .cf-buscador__tipo { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cf-brasa); margin-bottom: .15rem; } .cf-buscador__vacio { margin: 0; padding: .7rem .8rem; color: var(--cf-texto-tenue); font-size: .85rem; } /* ─── El artículo ───────────────────────────────────────────────────────────── */ .cf-articulo { max-width: 860px; margin-inline: auto; } .cf-articulo__volanta { font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--cf-brasa); text-decoration: none; } .cf-articulo__titulo { margin-top: .5rem; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; } .cf-articulo__bajada { margin-top: .7rem; font-size: 1.15rem; line-height: 1.5; color: var(--cf-texto-suave); } .cf-articulo__creditos { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--cf-borde); display: flex; gap: .8rem; flex-wrap: wrap; color: var(--cf-texto-tenue); font-size: .82rem; } .cf-articulo__firma { color: var(--cf-texto); font-weight: 650; } .cf-articulo__portada { margin: var(--cf-espacio-2) 0 0; } /* * 🔴 NO SE FUERZA 16:9 — se limita el ALTO. Aquí había `aspect-ratio: 16/9` + `cover`, y su * motivo era bueno: una imagen alta a ancho completo se comía media pantalla antes del primer * párrafo. Pero recortaba TODA imagen que no fuera apaisada. * * Medido el 04-sep-2026 sobre las 440 destacadas publicadas: 70 % son 16:9 o más apaisadas, * pero **12 % son verticales y 2 % cuadradas** — 64 artículos a los que el recorte les cortaba * la cara o el texto de la imagen. Lo señaló Mario. * * 📌 Limitando el ALTO se resuelven las dos cosas: una apaisada llena la columna y se ve * entera, y una vertical queda más estrecha que la columna, centrada y **completa**. Ninguna * pasa de 70 % de la pantalla, que era la preocupación original. * * ⚠️ Hace falta `width: auto` ADEMÁS de `max-height`: con `width: 100%` el ancho manda, el * `max-height` solo aplasta la imagen y `object-fit` vuelve a recortar. Los dos juntos son * los que dejan que la proporción natural decida. */ .cf-articulo__portada img { display: block; margin-inline: auto; width: auto; max-width: 100%; height: auto; max-height: 70vh; border-radius: var(--cf-radio); } .cf-articulo__portada figcaption { margin-top: .5rem; font-size: .78rem; color: var(--cf-texto-tenue); } /* * El cuerpo ocupa TODO el ancho de su columna: la medida de lectura ya la fija la columna * (720 px ≈ 70 caracteres). Ponerle además un `max-width` propio es lo que hacía que el * texto terminara antes que la imagen y pareciera cortado. * * El interlineado a 1.75 es más generoso que el del resto del sitio, porque en oscuro un * texto apretado cansa antes. */ .cf-articulo__cuerpo { margin-top: var(--cf-espacio-3); max-width: none; font-size: 1.06rem; line-height: 1.75; color: var(--cf-texto); } .cf-articulo__cuerpo > * + * { margin-top: 1.35rem; } .cf-articulo__cuerpo h2 { margin-top: var(--cf-espacio-3); font-size: 1.5rem; } .cf-articulo__cuerpo img { border-radius: var(--cf-radio); } .cf-articulo__cuerpo code { background: var(--cf-superficie-2); padding: .1em .35em; border-radius: 4px; font-size: .9em; } .cf-articulo__cuerpo blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 3px solid var(--cf-brasa); font-size: 1.2rem; line-height: 1.5; color: var(--cf-texto); } .cf-articulo__etiquetas { margin-top: var(--cf-espacio-3); display: flex; gap: .5rem; flex-wrap: wrap; } .cf-articulo__etiquetas a { font-size: .82rem; text-decoration: none; background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: 999px; padding: .3rem .8rem; color: var(--cf-texto-suave); } .cf-articulo__etiquetas a:hover { color: var(--cf-texto); border-color: var(--cf-borde-fuerte); } /* La recirculación vuelve al ancho completo: es navegación, no lectura. */ .cf-recirculacion { max-width: none; margin-top: var(--cf-espacio-4); } /* ─── Pie ───────────────────────────────────────────────────────────────────── */ /* * 🔴 EL PIE VA A TODO EL ANCHO. Se convirtió en una caja acotada al contenedor y * fue un error: **antes ocupaba la pantalla entera y así debe seguir**. * * Un pie recortado a 1176 px deja dos franjas del color del fondo a los lados y el * sitio parece terminar antes de llegar al borde. El fondo y la línea superior van * de lado a lado; **lo que se alinea con el contenido es el contenido de dentro**, * no la caja. */ .cf-pie { border-top: 1px solid var(--cf-borde); background: var(--cf-superficie); margin-top: var(--cf-espacio-4); padding-block: var(--cf-espacio-3); } /* Y dentro, alineado con el resto de la página. Cuatro rem por lado desde el 06-sep-2026: ese valor solo regía por debajo de 560 px y Mario lo quiso en todas las anchuras. */ .cf-pie > .cf-contenedor { width: min(100% - 4rem, var(--cf-ancho)); margin-inline: auto; } .cf-pie__titulo { /* Punto naranja delante del rótulo, como en el diseño. */ display: flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-texto-tenue); margin-bottom: .9rem; } .cf-pie__recirculacion { padding-bottom: var(--cf-espacio-3); border-bottom: 1px solid var(--cf-borde); } .cf-pie__cuerpo { display: grid; gap: var(--cf-espacio-2); padding-block: var(--cf-espacio-3); } @media (min-width: 900px) { /* La marca ancla el pie a la izquierda y las listas se reparten a su derecha. */ .cf-pie__cuerpo { grid-template-columns: minmax(200px, 1fr) 3fr; gap: var(--cf-espacio-3); } } .cf-pie__marca .cf-marca { text-decoration: none; color: inherit; } /* El logotipo del pie va grande, como en el diseño: es la firma del sitio, no una nota al margen. */ .cf-pie__marca .cf-marca__svg { height: 2.1rem; width: auto; } @media (max-width: 700px) { .cf-pie__marca .cf-marca__svg { height: 2.6rem; } } /* Línea vertical entre la marca y las columnas, como en el diseño. En móvil, donde todo va apilado, se convierte en la línea horizontal que ya separa los grupos. */ @media (min-width: 900px) { .cf-pie__cuerpo { position: relative; } .cf-pie__columnas { border-left: 1px solid var(--cf-borde); padding-left: var(--cf-espacio-2); } } /* La fila de redes: solo se pinta si `cf_redes()` devuelve algo. */ .cf-pie__redes { display: flex; gap: .55rem; margin-top: var(--cf-espacio); padding: 0; list-style: none; } .cf-pie__redes a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--cf-borde); border-radius: 50%; color: var(--cf-texto-suave); transition: border-color .15s ease, color .15s ease; } .cf-pie__redes a:hover { border-color: var(--cf-marca); color: var(--cf-marca); } .cf-pie__redes svg { width: 16px; height: 16px; fill: currentColor; } @media (max-width: 700px) { .cf-pie__redes { justify-content: center; } } .cf-pie__lema { margin-top: .5rem; color: var(--cf-texto-tenue); font-size: .85rem; max-width: 26ch; } .cf-pie__columnas { display: grid; gap: var(--cf-espacio-2); grid-template-columns: repeat(2, 1fr); } /* * ⚠️ UNA COLUMNA EN EL MÓVIL ESTRECHO. * * A dos columnas en 375 px cada una se queda en 160 px: los títulos de sección se * parten y las listas de enlaces quedan en escalera. Mario lo llamó «poco prolijo» * el 30-ago-2026. Un pie es una lista de enlaces, y a lo ancho se leen de corrido. */ /* * ── EL PIE EN MÓVIL ───────────────────────────────────────────────────────── * * A dos columnas de 160 px las listas quedaban en escalera y los títulos partidos; * apiladas y alineadas a la izquierda, era una tira larga de enlaces sueltos donde * no se veía dónde acababa un grupo y empezaba el siguiente. Mario pidió el * 30-ago-2026 «centrar, agrupar, agregar división de líneas». * * Lo que hace esto: una columna centrada, cada grupo separado por una línea fina, y * los títulos en versalitas pequeñas para que se lean como rótulos y no como * enlaces más. El resultado se recorre de arriba abajo con el pulgar sin dudar * dónde está cada cosa. */ @media (max-width: 560px) { .cf-pie__cuerpo { text-align: center; } /* ⚠️ El pie, más compacto: sin el bloque de noticias que se retiró, lo que queda son cuatro listas cortas y no necesitan tanto aire entre ellas. */ .cf-pie__cuerpo { padding-block: var(--cf-espacio-2); gap: var(--cf-espacio); } /* ⚠️ El logotipo va CENTRADO: es un `` en línea, así que `align-items` del contenedor no basta —hay que centrar también su propia caja—. */ .cf-pie__marca { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: .2rem; text-align: center; } .cf-pie__marca .cf-marca { display: block; margin-inline: auto; } .cf-pie__marca .cf-marca__svg { display: block; margin-inline: auto; } .cf-pie__columna { padding: .7rem 0; } .cf-pie__legal { padding-block: var(--cf-espacio); } .cf-pie__lema { max-width: 30ch; margin-inline: auto; } .cf-pie__contacto { align-items: center; } .cf-pie__contacto li { justify-content: center; } .cf-pie__columnas { grid-template-columns: 1fr; gap: 0; } /* La línea separa grupos; la primera no la lleva porque ya viene de la marca. */ .cf-pie__columna { padding: var(--cf-espacio) 0; border-top: 1px solid var(--cf-borde); } .cf-pie__legal { text-align: center; } } @media (min-width: 700px) { .cf-pie__columnas { grid-template-columns: repeat(4, 1fr); } } .cf-pie__columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .cf-pie__columna a { color: var(--cf-texto-suave); text-decoration: none; font-size: .9rem; } .cf-pie__columna a:hover { color: var(--cf-acento); } .cf-pie__legal { display: flex; justify-content: space-between; align-items: center; gap: var(--cf-espacio); flex-wrap: wrap; padding-top: var(--cf-espacio); border-top: 1px solid var(--cf-borde); color: var(--cf-texto-tenue); font-size: .84rem; } /* ═══════════════════════════════════════════════════════════════════════════════ NAVEGACIÓN LATERAL FIJA — el rail, al estilo de YouTube en escritorio ═══════════════════════════════════════════════════════════════════════════════ */ /* * 🔴 ARRANCA BAJO LA BARRA, NO DESDE ARRIBA — Mario, 06-sep-2026: `top: 56px`. Así la marca y * el buscador siguen visibles con el menú abierto, y la barra no queda partida en dos. */ .cf-rail { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 70; width: var(--cf-rail); display: flex; flex-direction: column; background: var(--cf-fondo); border-right: 1px solid var(--cf-borde); padding-block: 0; /* * 🔴 CERRADO NO SCROLLEA, ABIERTO SÍ — pedido de Mario el 06-sep-2026. * * Cerrado el rail mide 70 px y solo lleva iconos: una barra de desplazamiento ahí se * come una fracción visible del ancho y aparece por una lista que **no se lee**. Abierto * mide 280 px y las etiquetas pueden no caber —la lista crece sola cada vez que alguien * añade una sección en el panel—, así que ahí el desplazamiento es obligatorio. * * ⚠️ NO se toca el bloque de `max-width: 1400`, que ya pone `overflow-y: auto` para el * panel: allí el rail cerrado está fuera de pantalla, así que esconder su * desbordamiento no cambia nada, y con `data-rail="abierto"` gana la regla de abajo * por especificidad (0,2,1 contra 0,1,0), en la media query y fuera de ella. */ overflow-y: hidden; } .cf-rail__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; flex: 1; align-content: start; } /* * 🔴 LA GEOMETRÍA DE LA BASE ES LA MISMA QUE LA DEL ESTADO ABIERTO, y eso es el diseño. * * `padding` y `align-items` coinciden con los de `:root[data-rail="abierto"]`, así que el * icono cae en la MISMA x cerrado que abierto (22,4 px del borde) y no se desplaza al * desplegar: lo único que se mueve es la etiqueta, que entra a su lado. Con el relleno * centrado de antes, abrir el menú movía también los trece iconos. * * ⚠️ Y EL BORDE TRANSPARENTE NO ES DECORATIVO: RESERVA EL PÍXEL. El separador solo existe * con el rail abierto; sin declararlo aquí, cada entrada crecería 1 px al desplegarse y * la lista daría un salto de 13 px. Declarado transparente, la caja mide igual en los dos * estados y lo único que cambia es si la raya se ve. */ .cf-rail__enlace { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; padding: .5rem 1.4rem; text-decoration: none; color: var(--cf-texto-suave); position: relative; border-bottom: 1px solid transparent; border-radius: var(--cf-radio-chico); } .cf-rail__enlace:hover { color: var(--cf-texto); background: var(--cf-superficie); } .cf-rail__icono { display: flex; } .cf-rail__icono svg { width: 20px; height: 20px; } /* La sección activa, con barra de acento a la izquierda. */ .cf-rail__enlace.esta-activo { color: var(--cf-texto); background: var(--cf-superficie); } .cf-rail__enlace.esta-activo::before { content: ""; position: absolute; left: -.6rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--cf-brasa); } .cf-rail__pie { display: flex; justify-content: center; padding-top: .5rem; border-top: 1px solid var(--cf-borde); } /* El contenido se DESPLAZA, no se mete debajo del rail. */ /* * El contenido reserva el sitio del rail. La BARRA no: desde el 06-sep-2026 vive fuera de * `.cf-marco`, colgando del ``, justo para poder cruzar la pantalla entera. * * ⏹️ Antes de eso se probó `.cf-marco { margin: 0 }` para que la barra no se corriera, y el * efecto colateral era que el rail pasaba a SUPERPONERSE al contenido en vez de correrlo. * Sacar el header del marco resuelve las dos cosas a la vez. */ .cf-marco { margin-left: var(--cf-rail); } /* ─── El rail, plegado y desplegado ─────────────────────────────────────────── */ /* ⏹️ Aquí estaban `.cf-rail__plegar` y `.cf-rail__cerrar`. Sus botones se retiraron del marcado el 06-sep-2026: el rail se acciona desde una sola hamburguesa, en la barra. */ /* * 🔴 SIN `transition: width` en el rail, y no es un olvido. * * El ancho se controla redefiniendo `--cf-rail`, y **las custom properties no son * animables**: al cambiar la variable el motor no reanima `width`, y el valor se queda * congelado en el anterior. Síntoma exacto: `--cf-rail` computaba 240px en el elemento, * `width: var(--cf-rail)` estaba declarado, y `width` seguía dando 72px. * * Costó un rato encontrarlo porque no falla: simplemente no cambia. * * La transición se queda solo en el `margin-left` del contenido, donde el valor sí se * recalcula, así que el desplazamiento sigue viéndose suave. */ /* * 🔴 CERRADO: la etiqueta DEJA DE EXISTIR EN EL LAYOUT, con `display: none`. * * Esconderla con `visibility: hidden`, `opacity: 0` o `width: 0` no sirve: el texto * sigue ocupando sitio y forzando altura, y el rail se ve ancho aunque su contenedor * mida 72 px. Era exactamente lo que pasaba: 9 etiquetas renderizándose dentro. * * Como el enlace se queda solo con el icono, el nombre viaja en `title` y `aria-label` * —lo pone `header.php`—, así que ni el ratón ni el lector de pantalla se quedan sin él. */ .cf-rail__texto { display: none; } /* * ⚠️ AQUÍ VAN TODAS LAS PROPIEDADES DEL TEXTO, no solo las que cambian. * * Antes había una segunda definición de `.cf-rail__texto` más arriba con el tamaño * del rail cerrado. Era **una regla muerta**: la etiqueta está en `display: none` * mientras el rail está cerrado, así que su tamaño no se veía nunca; lo único suyo * que llegaba a aplicarse era el `letter-spacing`, heredado aquí por no estar * redefinido. Un valor que sobrevive por omisión es imposible de rastrear leyendo * la hoja. */ :root[data-rail="abierto"] .cf-rail__texto { display: block; text-align: left; line-height: 1em; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-size: .7rem; } /* * 🔴 Se cambia LA VARIABLE, no el `width` de cada elemento. * * El rail y el margen del contenido ya consumen `--cf-rail`, así que redefinirla aquí * reajusta las dos cosas de una vez y no hay forma de que se desincronicen — que es lo * que pasaría con dos reglas separadas si alguien tocara una y olvidara la otra. */ /* * 🔴 EL RAIL SOLO SE PUEDE ABRIR DESDE 1401 px — Mario, 05-sep-2026: «el nav abierto rompe el * diseño entre 901 y 1400; sería mejor abrirlo solo desde 1401 y que hasta 1400 funcione el de * móvil». Y es la salida correcta: el rail abierto se come 240 px, así que a 1280 dejaba ~1000 * útiles y había que **parchear la rejilla a 2 columnas** para que no se estrangulara. Un modo * que necesita un parche para no romper en la mitad de su rango es un modo mal acotado. * * 📌 Medido a 1401 con el rail abierto: 1.114 px útiles, 3 columnas, líder de 743×698 y las * demás de 371 px —más holgadas que los 354 de 1280 con el rail cerrado—. Por eso el parche * de `(min-width: 901px) and (max-width: 1400px)` se retiró: ya no hay caso que arreglar. * * ⚠️ VA ACOTADO AUNQUE EL BLOQUE MÓVIL YA NEUTRALICE `--cf-rail`. El estado se guarda en * `localStorage`, así que quien abra el rail en una pantalla grande y luego estreche la * ventana sigue trayendo `data-rail="abierto"`: sin acotarlo, esas reglas se aplicarían * sobre el panel móvil. */ /* * 🔴 EL MODO ABIERTO YA NO ESTÁ ACOTADO A ESCRITORIO — 06-sep-2026, al unificar los dos * comportamientos del rail en uno. Antes vivía dentro de `@media (min-width: 1401px)` porque * abajo mandaba OTRO mecanismo, el panel a pantalla completa con `.esta-abierto`. Ya no hay * segundo mecanismo: `data-rail="abierto"` es EL estado en todas las anchuras, y lo único que * cambia con el ancho es qué significa —barra de 280 px que corre el contenido, o panel de * 280 px que se superpone—. Eso lo resuelve el bloque de 1400 de más abajo. * * 📌 Se cambia LA VARIABLE, no el `width` de cada elemento: el rail y el margen del contenido * la consumen los dos, así que no hay forma de que se desincronicen. */ :root[data-rail="abierto"] { --cf-rail: var(--cf-rail-abierto); } :root[data-rail="abierto"] .cf-rail { overflow-y: auto; overscroll-behavior: contain; } :root[data-rail="abierto"] .cf-rail__enlace { flex-direction: row; gap: 1.3rem; justify-content: flex-start; padding: .5rem 1.4rem; align-items: center; /* * ⚠️ EL SEPARADOR VA CON TOKEN, NO CON `#222`. Mario lo dictó así y en oscuro se ve * igual, pero un literal aquí **rompe el modo claro sin dar error**: sería una raya * casi negra sobre fondo blanco. `--cf-borde` vale #2a2a30 en oscuro y #d9d9e3 en * claro, que es la misma decisión expresada una sola vez. */ border-bottom: 1px solid var(--cf-borde); border-radius: 0; } :root[data-rail="abierto"] .cf-rail__enlace.esta-activo::before { left: 0; } /* * ⚠️ AQUÍ HABÍA UN PARCHE: entre 901 y 1400 px, con el rail abierto la rejilla bajaba a 2 * columnas «porque una de 3 con la líder a doble ancho se estrangula». Se retiró el * 05-sep-2026 al acotar el rail abierto a 1401 px hacia arriba — **el caso ya no puede * darse**, y un parche que no puede dispararse solo confunde a quien lo lee. */ @media (prefers-reduced-motion: reduce) { .cf-rail, .cf-marco { transition: none; } } /* ─── Barra superior fina ───────────────────────────────────────────────────── */ /* * 🔴 LA BARRA VA POR ENCIMA DEL RAIL Y A TODO EL ANCHO — Mario, 06-sep-2026. * * El rail arranca ahora DEBAJO de ella (`top: 56px`), así que la barra tiene que cruzar la * pantalla entera y quedar por delante: con el `z-index: 60` de antes —el rail tiene 70— el * panel se le montaba encima al abrirse. */ .cf-barra { position: sticky; top: 0; z-index: 4444; width: 100%; background: var(--cf-cabecera-vidrio); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--cf-borde); } /* * ⚠️ SIN `width: min(100% - 2rem, var(--cf-ancho))`: la barra ya no se alinea con la columna * de lectura sino con la pantalla, porque el rail vive a su izquierda y la hamburguesa * tiene que caer pegada al borde, sobre él. */ .cf-barra__interior { display: flex; align-items: center; gap: var(--cf-espacio); min-height: var(--cf-barra); width: auto; margin-inline: auto; padding-inline: 20px; } /* * El logotipo se mide POR SU ALTURA, no por su anchura. * * Es un SVG con `viewBox` y sin dimensiones fijas: fijando el alto, el ancho lo calcula * el navegador a partir de la proporción y la pieza nunca se deforma. Fijar el ancho * daría un alto distinto en cada sitio donde se use. */ /* * ⚠️ EL LOGOTIPO NO CAMBIA AL PASAR EL RATÓN, aunque esté hecho de letras. * * Lo pidió Mario y es lo correcto: un logotipo es una marca, no un enlace más. * Que se tiña del color de hover como cualquier texto lo convierte en otra cosa * — y aquí, además, teñiría de rojo la mitad que ya es roja. */ .cf-marca { text-decoration: none; color: inherit; flex: 0 0 auto; display: flex; align-items: center; } .cf-marca:hover, .cf-marca:focus { color: inherit; } .cf-marca:hover .cf-marca__svg { opacity: 1; } .cf-marca__svg { height: 26px; width: auto; display: block; } .cf-marca--pie .cf-marca__svg { height: 34px; } /* * ─── Bajada, ubicación y fecha de la barra superior — 31-ago-2026 ─────────── * Tres piezas que aparecen de forma escalonada según el ancho de pantalla, * spec de Mario con 4 anchos de referencia (1440 / 1280 / 1024 / 375). Cada * una se oculta por defecto (mobile-first) y se enciende en su propio * `min-width` — así el elemento más grande sigue siendo el que MENOS espacio * necesita, que es como debe leerse una cabecera que se va llenando. */ .cf-barra__tagline { display: none; flex: 0 0 auto; margin-left: .9rem; padding-left: .9rem; border-left: 1px solid var(--cf-borde); color: var(--cf-texto-suave); font-size: .78rem; line-height: 1.25; max-width: 20ch; } .cf-barra__ubicacion { display: none; flex: 0 0 auto; align-items: center; gap: .35rem; padding-left: .9rem; margin-left: .2rem; border-left: 1px solid var(--cf-borde); color: var(--cf-texto-suave); font-size: .85rem; font-weight: 600; white-space: nowrap; } .cf-barra__ubicacion svg { width: 13px; height: 13px; color: var(--cf-acento); } .cf-barra__fecha { display: none; flex: 0 0 auto; padding-left: .9rem; margin-left: .2rem; border-left: 1px solid var(--cf-borde); color: var(--cf-texto-suave); font-size: .85rem; white-space: nowrap; } @media (min-width: 1024px) { .cf-barra__fecha { display: inline-block; } } @media (min-width: 1280px) { .cf-barra__ubicacion { display: inline-flex; } } @media (min-width: 1440px) { .cf-barra__tagline { display: block; } } .cf-buscador { position: relative; display: flex; flex: 1 1 auto; max-width: 460px; margin-left: auto; } .cf-buscador input { flex: 1 1 auto; min-width: 0; background: var(--cf-superficie); color: var(--cf-texto); border: 1px solid var(--cf-borde); border-right: 0; border-radius: var(--cf-radio-chico) 0 0 var(--cf-radio-chico); padding: .42rem .8rem; font-size: .88rem; } .cf-buscador input::placeholder { color: var(--cf-texto-tenue); } .cf-buscador input:focus { outline: none; border-color: var(--cf-acento); } .cf-buscador button { display: inline-flex; align-items: center; justify-content: center; width: 40px; cursor: pointer; background: var(--cf-superficie); color: var(--cf-texto-suave); border: 1px solid var(--cf-borde); border-radius: 0 var(--cf-radio-chico) var(--cf-radio-chico) 0; } .cf-buscador button:hover { color: var(--cf-texto); } .cf-buscador button svg { width: 14px; height: 14px; } /* * 🔴 SIEMPRE VISIBLE — Mario: «el icono hamburguesa debe ser solo uno y siempre en el header». * Antes salía en `display: none` y lo encendían dos reglas: una para «hay JS» y otra por debajo * de 1400. Ahora es el único mando del rail en TODAS las anchuras, así que no puede depender de * la anchura. */ .cf-menu-boton { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer; background: none; color: var(--cf-texto-suave); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio-chico); } .cf-menu-boton svg { width: 16px; height: 16px; } /* La barra fija taparía el titular al saltar a un ancla. */ :target { scroll-margin-top: calc(var(--cf-barra) + 1.5rem); } /* ─── El rail en móvil: panel a pantalla completa ───────────────────────────── */ /* * 🔴 EL PANEL MÓVIL LLEGA HASTA 1400 px, no hasta 900 — Mario, 05-sep-2026. Entre 901 y 1400 el * rail fijo dejaba poco ancho útil y su modo abierto rompía la rejilla; con el panel, esas * anchuras recuperan la página entera y el nav se abre por encima cuando se pide. */ @media (max-width: 1400px) { /* Aquí el rail se superpone en vez de correr el contenido: no hay sitio que reservar. ⏹️ `.cf-menu-boton { display: inline-flex }` sí se retiró: la hamburguesa se ve siempre. */ .cf-marco { margin-left: 0; } .cf-buscador { max-width: none; } /* * 🔴 EL PANEL MÓVIL SCROLLEA, y no era una precaución: YA ESTABA ROTO. * * `.cf-rail` es `position: fixed` con `inset-block: 0`, así que su alto es el de la * pantalla y lo que no cabe **se sale sin dejar forma de alcanzarlo** —`overflow` * valía `visible` en el panel y en la lista—. * * Medido el 04-sep-2026 con 13 entradas: * · 375×812 (iPhone 12+): el último ítem termina en y=788. Quedaban **24 px**. * · 375×667 (iPhone SE, Android común): **3 entradas fuera de la pantalla** — * Recintos, Personalidades y Contacto—, invisibles e inalcanzables. * * ⚠️ Y AHORA LA LISTA CRECE SOLA: desde que las secciones se configuran en * «Ajustes → ColorFans», añadir una sección alarga este panel sin que nadie toque * CSS. Un límite que depende de cuántas secciones haya es un límite que se rompe * el día que alguien añade la novena. * * 📌 Scrollea el PANEL entero, no solo la lista: fijar el pie —el interruptor de * tema— le robaría alto a lo que de verdad se usa, que son los enlaces. * 📌 `overscroll-behavior: contain` evita el encadenado: sin él, al llegar al final * del panel el gesto sigue desplazando la portada que hay detrás. */ /* * 🔴 SIN TRANSICIÓN, PUNTO — Mario, 06-sep-2026, tras dos intentos míos de conservarla sin * que se disparara al cargar. Su decisión zanja el problema por la raíz: si el panel no * tiene animación, no hay ráfaga posible en ninguna carga y no hace falta congelar nada. * * ⏹️ POR ESO SE RETIRÓ `.cf-cargando`, que existía solo para congelar ESTA transición * mientras la página se montaba. Sin ella, la clase, su regla y el JS que la quitaba se * quedaban sin trabajo: maquinaria muerta, y de la peor —la que parece que hace algo—. * * 📌 Lo que se pierde es el deslizamiento al abrir el menú móvil; lo que se gana es que la * página nunca se mueva sola al cargar, que es lo que Mario venía señalando. */ /* * 🔴 PANEL SUPERPUESTO DE 280 px, NUNCA A TODO EL ANCHO — Mario, 06-sep-2026: «menú se * superpone, pero no full wide, nunca; con 280px». Y cerrado **no se ve nada**: decisión * suya, preguntada expresamente, porque una barra fija de 70 px se come el 19 % de una * pantalla de 375 px y taparía contenido de forma permanente. * * ⚠️ EL ANCHO SE FIJA AQUÍ Y NO DEPENDE DEL ESTADO: por debajo de 1400 el panel mide 280 * siempre, y lo que decide si se ve es el `transform`. Dejarlo colgando de `--cf-rail` * lo habría dejado en 70 px al estar cerrado, y al abrirse crecería *y* entraría a la * vez — dos cosas moviéndose por un solo gesto. */ .cf-rail { width: var(--cf-rail-abierto); padding: var(--cf-espacio-2) var(--cf-espacio); transform: translateX(-100%); transition: none; border-right: 0; overflow-y: auto; overscroll-behavior: contain; } /* * 🔴 EL PANEL ABIERTO NO LLEVA RELLENO PROPIO, Y SÍ LLEVA BORDE — Mario, 06-sep-2026. * * El relleno del contenedor (`--cf-espacio-2` / `--cf-espacio`) sobraba desde que el * enlace trae el suyo: sumaban, y el texto del panel arrancaba más adentro que el del * rail de escritorio. Con `0` aquí, la etiqueta cae a los mismos 22,4 px del borde en * las dos anchuras — que es lo que hace que se lea como el mismo componente. * * Y el borde derecho vuelve porque **el panel se superpone al contenido**: sin una línea * que lo cierre, sus 280 px se confunden con la página que tiene detrás. La base de este * bloque lo pone a 0 para el rail cerrado, que está fuera de pantalla y no necesita * ninguno. * * 📌 Se declara sobre `[data-rail="abierto"]` (0,2,1) y por eso gana a la base (0,1,0) * sin importar el orden dentro de la media query. */ :root[data-rail="abierto"] .cf-rail { transform: translateX(0); padding: 0; border-right: 1px solid var(--cf-borde); } /* * En el panel las etiquetas van siempre: mide 280 px, no es la barra de iconos. * * ⚠️ DESDE EL 06-sep-2026 ESTAS DOS REGLAS NO SE VEN CON JAVASCRIPT, Y AUN ASÍ NO SE * BORRAN. Los valores de Mario viven en `:root[data-rail="abierto"]` (0,2,1) y ganan * a estas (0,1,0) esté donde esté la media query — comprobado midiendo a 1400 y a * 375: uppercase, 11,2 px, peso 500. Pero el panel también se pinta **sin JS**, y ahí * `data-rail` no existe nunca: sin estas reglas volverían los «nueve iconos y ni una * palabra» que ya costaron un diagnóstico. Medido con `.cf-sin-js` puesta a mano: * etiquetas visibles a 16 px, enlaces en fila. */ .cf-rail__texto { display: block; font-size: .88rem; font-weight: 650; letter-spacing: .01em; text-align: left; line-height: 1.2; } .cf-rail__enlace { flex-direction: row; gap: .8rem; justify-content: flex-start; padding: .7rem .9rem; } .cf-rail__enlace.esta-activo::before { left: 0; } /* * ⚠️ `flex: 1` + `align-content: start` empujaba la lista a ocupar todo el alto * disponible; dentro de un contenedor que ahora scrollea hace falta permitirle * encoger, o el `min-height: auto` que traen los hijos de flex vuelve a impedir * el desbordamiento controlado. */ .cf-rail__lista { flex: 0 0 auto; } /* Sin JS no hay transform que valga: el rail se muestra como una lista normal. */ .cf-sin-js .cf-rail { position: static; width: auto; transform: none; } .cf-rail__lista { gap: .2rem; } .cf-rail__icono svg { width: 19px; height: 19px; } .cf-rail__texto { font-size: 1rem; letter-spacing: 0; } /* * ⏹️ AQUÍ HABÍA TRES BLOQUES MÁS, retirados el 06-sep-2026 al unificar el rail: * * · `.cf-rail.esta-abierto` — el segundo mecanismo de estado. Ahora lo mueve `data-rail`, * el mismo que en escritorio. * · `.cf-rail__plegar { display: none }` y todo `.cf-rail__cerrar` — sus botones ya no * existen: hay **una sola hamburguesa y vive en la barra**. * * 📌 Y con ellos se va la trampa que este proyecto tenía escrita desde el 30-ago: «el panel * móvil sale con nueve iconos y ni una palabra porque no usa `data-rail` sino * `.esta-abierto`». Con un solo atributo no puede volver a pasar: no hay dos sitios que * puedan discrepar. */ } /* * ─── Buscador en móvil: icono que despliega el formulario ────────────────── * Bajo 620px no cabe el campo completo en la barra. Antes desaparecía sin * dejar nada en su lugar — no había forma de buscar desde el celular. Ahora * un botón de lupa lo despliega como panel bajo la barra (main.js). */ .cf-buscador-movil { display: none; } @media (max-width: 620px) { .cf-buscador { display: none; } .cf-buscador.esta-abierto { display: flex; max-width: none; position: absolute; left: 1rem; right: 1rem; top: 100%; margin: 0; padding: .6rem 0; } .cf-buscador-movil { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer; margin-left: auto; background: none; color: var(--cf-texto-suave); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio-chico); } .cf-buscador-movil svg { width: 15px; height: 15px; } } /* El velo que cubre el contenido con el panel abierto. */ .cf-velo { position: fixed; inset: 0; z-index: 65; background: var(--cf-velo); } /* ─── El artículo, con barra lateral que acompaña ───────────────────────────── */ /* * ⚠️ `.cf-vista` sustituye a un `
    ` que venía copiado del tema viejo en SEIS plantillas. * * Las clases `col-*` son de un sistema de rejilla que este tema no usa —no existen en * ninguna hoja— y el `margin-bottom` iba en línea, que es justo lo que el proyecto no * quiere. Lo señaló Mario el 30-ago-2026 al ver estilos inline en el código. */ .cf-vista { margin-bottom: 0; } .cf-vista__texto { margin-top: 28px; } .cf-single { display: grid; gap: var(--cf-espacio-3); } /* * 🔴 `min-width: 0` NO SOBRA: sin él la ficha de evento se rompía entera. * * Un hijo de grid trae `min-width: auto`, que le impide encogerse por debajo del * ancho de su contenido. Dentro va el carrusel de eventos relacionados, que es una * fila horizontal, así que **el grid crecía hasta abarcarlo todo**: medido a 900 px * de ventana, la columna pedía **50.950 px** y la imagen del afiche se estiraba a * 19.361 px de ancho. Con `min-width: 0` la columna vuelve a 868 px y la imagen a * 330 px. * * Lo señaló Mario el 30-ago-2026 como «un bug tremendo entre 767 y 1024 px». Por * debajo de 768 no se veía porque ahí el carrusel pasa a rejilla de una columna, y * por encima de 1024 el contenedor tiene ancho fijo. */ .cf-single__principal { min-width: 0; } /* Vista sin barra lateral: una sola columna a todo el ancho. */ @media (min-width: 1060px) { /* * ⚠️ El bloque de ancho fijo (720+48+320=1088, centrado) se descartó a propósito el * 30-ago-2026: la columna del artículo pasa a ser FLUIDA (`1fr`) y la barra lateral * a un ancho fijo angosto (`275px`), a todo el ancho disponible del contenedor * (`max-width: 100%`) en vez de quedarse encajonada en 1088 px. Pedido de Mario. */ .cf-single { grid-template-columns: 1fr 275px; column-gap: 48px; max-width: 100%; align-items: start; } } /* * ⚠️ El sticky va en el HIJO, y a `.cf-single` NO se le pone `overflow`: `position: * sticky` deja de funcionar en silencio si cualquier ancestro tiene `overflow: hidden`, * y también si el padre no es más alto que el elemento pegajoso. */ .cf-single__columna { display: grid; gap: var(--cf-espacio-2); align-content: start; } /* ⚠️ Va DENTRO del media, o la regla de arriba la pisa: una vista sin barra lateral no debe reservar su columna. */ /* * ⚠️ Y `max-width: 100%`, no los 1088 px del artículo. * * Esa medida es la del artículo con su barra lateral —720 + 320 + hueco—, pensada * para que el texto no supere las 68 columnas. Una vista sin lateral no tiene ese * problema y sí tiene rejillas y carruseles que agradecen el ancho: heredarla * dejaba la ficha más estrecha que la portada, con la que comparte contenedor. */ .cf-single--completo { grid-template-columns: 1fr; max-width: 100%; } /* * 🔴 El artículo ocupa SU COLUMNA ENTERA, sin `max-width` propio. * * Tenía un tope de 760 px dentro de una columna más ancha, y esa diferencia se veía como * un corte: el texto terminaba y quedaba una franja muerta antes de la barra lateral. * Parecía un fallo de maquetación y era un ancho de más. * * La medida de lectura la fija ahora la propia columna del grid, y el cuerpo del texto * conserva su límite en `ch` — que es lo que de verdad importa para leer. */ .cf-single .cf-articulo { max-width: none; margin-inline: 0; } /* * 🔴 EL RÓTULO DEL LATERAL VA EN EL ACENTO — maqueta de Mario, 06-sep-2026. * * Estaba en `--cf-texto-tenue` con una raya BLANCA de 2 px: el rótulo pesaba menos que su * propio subrayado y los tres bloques se leían como separadores, no como cabeceras. En la * maqueta el color lo pone el texto y la raya solo lo acompaña. */ .cf-lateral__titulo { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-acento); margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--cf-acento); } /* ─── Compartir ─────────────────────────────────────────────────────────────── */ .cf-compartir { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-top: var(--cf-espacio-2); margin-bottom: var(--cf-espacio-2); padding-top: var(--cf-espacio); border-top: 1px solid var(--cf-borde); } .cf-compartir__etiqueta { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--cf-texto-tenue); margin-right: .3rem; } .cf-compartir__boton { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 38px; height: 38px; cursor: pointer; background: var(--cf-superficie); color: var(--cf-texto-suave); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio-chico); text-decoration: none; } .cf-compartir__boton:hover { color: var(--cf-texto); border-color: var(--cf-borde-fuerte); } .cf-compartir__boton svg { width: 15px; height: 15px; } .cf-compartir__aviso { position: absolute; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; color: var(--cf-ok); } /* ─── Río regular: todas iguales, sin agrandar la primera ───────────────────── */ .cf-rio--regular > .cf-nota:first-child { flex-direction: row; gap: .85rem; padding-top: .85rem; } .cf-rio--regular > .cf-nota:first-child .cf-nota__medio { flex: 0 0 84px; aspect-ratio: 1; border-radius: var(--cf-radio-chico); } .cf-rio--regular > .cf-nota:first-child .cf-nota__cuerpo { padding-top: 0; } .cf-rio--regular > .cf-nota:first-child .cf-nota__titulo { font-size: .93rem; } .cf-rio--regular > .cf-nota:first-child .cf-nota__bajada { display: none; } /* ─── Migas de pan ──────────────────────────────────────────────────────────── */ .cf-migas { margin-bottom: var(--cf-espacio); font-size: .8rem; color: var(--cf-texto-tenue); } .cf-migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .cf-migas li + li::before { content: "›"; margin-right: .4rem; color: var(--cf-borde-fuerte); } .cf-migas a { color: var(--cf-texto-suave); text-decoration: none; } .cf-migas a:hover { color: var(--cf-acento); text-decoration: underline; } /* ─── Contacto: formulario, modal y avisos ──────────────────────────────────── */ /* * 🔴 La trampa para robots. No lleva `display: none` ni `visibility: hidden` a propósito: * un robot que lea el CSS reconoce esas dos y sabe que debe dejar el campo en paz. Sacarlo * de la pantalla lo mantiene invisible para las personas y no lo delata. * * ⚠️ Y NO se puede usar la clase `.cf-oculto-visualmente` del tema: esa está pensada para * texto que el lector de pantalla SÍ debe leer. Aquí el `aria-hidden` del contenedor ya lo * esconde de la accesibilidad, que es justo lo contrario. */ .cf-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cf-contacto__caja { margin-top: var(--cf-espacio-3); } .cf-contacto__fila { display: grid; gap: var(--cf-espacio); grid-template-columns: 1fr 1fr; } .cf-campo { margin: 0 0 var(--cf-espacio); } .cf-campo label { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 600; color: var(--cf-texto-suave); } .cf-campo input, .cf-campo select, .cf-campo textarea { width: 100%; padding: .6rem .75rem; font: inherit; font-size: .95rem; color: var(--cf-texto); background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio-chico); } .cf-campo input:focus-visible, .cf-campo select:focus-visible, .cf-campo textarea:focus-visible { outline: 2px solid var(--cf-acento); outline-offset: 1px; border-color: var(--cf-acento); } .cf-contacto__pie { display: flex; align-items: center; gap: var(--cf-espacio); flex-wrap: wrap; } .cf-contacto__nota { font-size: .8rem; color: var(--cf-texto-tenue); } .cf-boton { padding: .62rem 1.3rem; font: inherit; font-weight: 650; color: var(--cf-acento-texto); background: var(--cf-acento); border: 0; border-radius: var(--cf-radio-chico); cursor: pointer; } .cf-boton:hover { background: var(--cf-acento-vivo); } .cf-aviso { margin: 0 0 var(--cf-espacio); padding: .7rem .9rem; font-size: .9rem; border-radius: var(--cf-radio-chico); border: 1px solid transparent; } .cf-aviso--ok { color: var(--cf-ok); background: var(--cf-ok-fondo); border-color: var(--cf-ok); } .cf-aviso--error { color: var(--cf-error); background: var(--cf-error-fondo); border-color: var(--cf-error); } /* * El nativo. Se estiliza el elemento y no un div dentro, porque el navegador ya * lo coloca en la capa superior: no hace falta ningún z-index, que es de donde salen las * guerras de apilamiento. */ .cf-modal { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; color: var(--cf-texto); background: var(--cf-modal-fondo); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); box-shadow: var(--cf-sombra); } .cf-modal::backdrop { background: var(--cf-velo-fuerte); } .cf-modal__caja { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); } .cf-modal__cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-espacio); padding: var(--cf-espacio-2) var(--cf-espacio-2) var(--cf-espacio); border-bottom: 1px solid var(--cf-borde); } .cf-modal__titulo { margin: 0; font-size: 1.15rem; } .cf-modal__cerrar { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: var(--cf-texto-suave); background: none; border: 0; border-radius: 50%; cursor: pointer; } .cf-modal__cerrar:hover { color: var(--cf-texto); background: var(--cf-superficie-2); } .cf-modal__cerrar svg { width: .85rem; height: .85rem; fill: currentColor; } /* El cuerpo desplaza, la cabecera no: en móvil el formulario no cabe entero. */ .cf-modal__cuerpo { padding: var(--cf-espacio-2); overflow-y: auto; } /* Datos de contacto del pie. */ .cf-pie__contacto { margin: var(--cf-espacio) 0 0; padding: 0; list-style: none; } .cf-pie__contacto li { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .88rem; color: var(--cf-texto-suave); } .cf-pie__contacto svg { flex: 0 0 auto; width: .85rem; height: .85rem; fill: currentColor; opacity: .7; } .cf-pie__contacto a { color: inherit; text-decoration: none; } .cf-pie__contacto a:hover { color: var(--cf-texto); text-decoration: underline; } @media (max-width: 600px) { .cf-contacto__fila { grid-template-columns: 1fr; } } /* ─── Agenda de la barra lateral ────────────────────────────────────────────── */ /* * La agenda NO usa `template-parts/nota.php` a propósito, aunque sea el único componente * de tarjeta del sitio: un evento no es una nota. Lo que hay que leer aquí es CUÁNDO y * DÓNDE, y en ese orden; un titular con bajada respondería a otra pregunta. */ .cf-lateral__agenda { margin: 0; padding: 0; list-style: none; } .cf-lateral__agenda li + li { margin-top: .1rem; border-top: 1px solid var(--cf-borde); } /* La definición completa está más abajo, junto a la miniatura. */ .cf-lateral__agenda a:hover .cf-lateral__que { color: var(--cf-acento); } .cf-lateral__cuando { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cf-brasa); } /* ⚠️ EL COLOR SE DECLARA: sin él heredaba el rojo del `` y los cuatro titulares de la agenda salían en acento, compitiendo con la fecha naranja de al lado. Mario, 06-sep. */ .cf-lateral__que { font-size: .92rem; font-weight: 650; line-height: 1.3; color: var(--cf-texto); } .cf-lateral__donde { font-size: .78rem; color: var(--cf-texto-tenue); } .cf-lateral__mas { display: inline-block; margin-top: .7rem; font-size: .82rem; font-weight: 650; color: var(--cf-acento); text-decoration: none; } .cf-lateral__mas:hover { text-decoration: underline; } /* ─── Cuerpos largos ────────────────────────────────────────────────────────── */ /* * 📌 Lo de aquí abajo existe porque los artículos van a crecer. Con tres párrafos casi * cualquier CSS vale; con 2.000 palabras se nota lo que falta: la jerarquía de subtítulos, * las listas, los pies de foto y las tablas. */ .cf-articulo__cuerpo h3 { margin-top: var(--cf-espacio-2); font-size: 1.22rem; line-height: 1.3; } .cf-articulo__cuerpo h4 { margin-top: var(--cf-espacio-2); font-size: 1.05rem; line-height: 1.35; } /* * ⚠️ `scroll-margin-top` NO sobra: sin él, al llegar desde el índice —o desde el enlace * «Ir a la sección» de Google— el subtítulo queda TAPADO por la barra superior fija. Es el * fallo clásico de las cabeceras `sticky`, y no se ve hasta que alguien usa un ancla. */ .cf-articulo__cuerpo :is(h2, h3, h4) { scroll-margin-top: calc(var(--cf-barra) + 1.2rem); text-wrap: pretty; /* que no acabe en una palabra sola, sin recortar el ancho */ } .cf-articulo__cuerpo p { text-wrap: pretty; } .cf-articulo__cuerpo :is(ul, ol) { padding-left: 1.4rem; } .cf-articulo__cuerpo li + li { margin-top: .45rem; } .cf-articulo__cuerpo a { color: var(--cf-acento); text-underline-offset: .18em; } .cf-articulo__cuerpo a:hover { color: var(--cf-acento-vivo); } .cf-articulo__cuerpo figure { margin-inline: 0; } .cf-articulo__cuerpo figcaption { margin-top: .5rem; font-size: .82rem; line-height: 1.45; color: var(--cf-texto-tenue); } /* Una tabla ancha DESPLAZA DENTRO DE SU CAJA; nunca empuja el ancho de la página. */ .cf-articulo__cuerpo :is(table, .wp-block-table) { display: block; overflow-x: auto; max-width: 100%; } .cf-articulo__cuerpo table { border-collapse: collapse; font-size: .93rem; } .cf-articulo__cuerpo :is(th, td) { padding: .5rem .7rem; border-bottom: 1px solid var(--cf-borde); text-align: left; } .cf-articulo__cuerpo th { font-weight: 650; color: var(--cf-texto-suave); } .cf-articulo__cuerpo hr { margin-block: var(--cf-espacio-3); border: 0; border-top: 1px solid var(--cf-borde); } /* El índice de contenidos. */ .cf-indice { margin-bottom: var(--cf-espacio-2); padding: .9rem 1.1rem; font-size: .95rem; background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); } .cf-indice summary { font-weight: 650; cursor: pointer; color: var(--cf-texto-suave); } .cf-indice[open] summary { margin-bottom: .6rem; } .cf-indice ol { margin: 0; padding-left: 1.3rem; } .cf-indice li + li { margin-top: .3rem; } .cf-indice a { color: var(--cf-texto); text-decoration: none; } .cf-indice a:hover { color: var(--cf-acento); text-decoration: underline; } /* * El `

    ` que envuelve la marca en la portada. * * 🔴 No debe dibujar NADA. Su único trabajo es existir para el buscador: heredarlo todo y * no ocupar. Si cambiara el tamaño o el interlineado, la cabecera de la portada se vería * distinta a la del resto del sitio y el arreglo de SEO se habría pagado con un fallo de * diseño. */ .cf-marca-titulo { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; display: flex; } /* * Para texto que deben leer los lectores de pantalla pero no debe verse. * * ⚠️ NUNCA con `display: none` ni `visibility: hidden`: eso lo saca del árbol de * accesibilidad —el lector de pantalla no lo lee— y los buscadores lo descuentan. La * técnica correcta es recortarlo a un píxel. */ .cf-solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * La nota XL cuando va APAISADA: foto a un lado, texto al otro. * * 🔴 El texto se centra respecto a la foto. Medido en la portada: la imagen ocupaba 448 px * de alto y el titular con su bajada 235, pegados arriba — **213 px de blanco muerto** bajo * el texto. Es el criterio 4 de `scripts/revisar-layout.js`, y era el único que fallaba. * * ⚠️ Se centra el CONTENIDO dentro del cuerpo (`justify-content`, que en una columna flex * es el eje vertical), no el cuerpo dentro de la rejilla: si se alineara el cuerpo con * `align-items: center`, dejaría de estirarse y el fondo de la tarjeta no llegaría abajo. * * Solo cuando de verdad hay dos columnas. En móvil la foto va encima del texto, no al * lado, y ahí centrar no significa nada. */ @media (min-width: 900px) { .cf-nota--xl.cf-nota--apaisada .cf-nota__cuerpo, .cf-ancho > .cf-nota--xl .cf-nota__cuerpo { justify-content: center; padding-block: .6rem; } } /* ─── La barra lateral, sin sticky y con foto en la agenda ──────────────────── */ /* * 🔴 SE RETIRA `position: sticky`. Decisión de Mario: «sin sticky, de lo contrario * se pierde mucho espacio». * * Con la columna fija, en cuanto el artículo era más largo que ella quedaba un * hueco enorme a la derecha durante toda la lectura. Sin ella, la barra acompaña * al texto hasta abajo y cabe el doble de contenido — que era el otro encargo. */ /* La agenda ahora lleva miniatura: un afiche identifica el evento antes que su título. */ /* ⚠️ Sin subrayado: son tres líneas por fila —cuándo, qué y dónde— y subrayarlas todas convierte el bloque en ruido. El enlace se reconoce por el color y por el `hover`, que sí lo devuelve donde hace falta. */ .cf-lateral__agenda a, .cf-lateral__agenda a:hover { text-decoration: none; } .cf-lateral__agenda a { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: .7rem; align-items: center; padding: .65rem 0; } .cf-lateral__foto { display: block; overflow: hidden; border-radius: var(--cf-radio-chico); background: var(--cf-superficie-2); aspect-ratio: 1 / 1; } .cf-lateral__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-lateral__datos { display: grid; gap: .12rem; min-width: 0; } /* ─── Cartelera a ancho completo ──────────────────────────────────────────── * * La página de cartelera NO lleva barra lateral: su contenido es la lista, y una * columna de apoyo al lado le quita el espacio a lo que se viene a ver. * Decisión de Mario del 30-ago-2026. */ .cf-cartelera { display: block; max-width: var(--cf-ancho); margin-inline: auto; } .cf-cartelera__ancho { max-width: none; } /* ── La fuente, al pie del artículo ────────────────────────────────────────── Discreta y separada del cuerpo: informa de dónde viene el dato sin competir con la lectura ni parecer una nota más. */ .cf-fuente { margin-top: var(--cf-espacio-2); padding-top: var(--cf-espacio); border-top: 1px solid var(--cf-borde); font-size: .85rem; color: var(--cf-texto-tenue); } .cf-fuente__etiqueta { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; } .cf-fuente a { color: var(--cf-texto); font-weight: 600; } /* * ⚠️ EN MÓVIL, MENOS AIRE ANTES DEL PIE — y esta regla va AL FINAL de la hoja. * * Estaba junto a `.cf-principal`, unas 800 líneas antes de `.cf-pie { margin-top }`: * misma especificidad, así que ganaba la última y el margen seguía en 64 px. * * Sumados el relleno del contenido y el margen del pie eran **88 px** de franja negra * en una pantalla de 375, que en escritorio no se nota y en móvil parece que la * página se acabó antes de tiempo. */ @media (max-width: 700px) { .cf-principal { padding-block: var(--cf-espacio-2) var(--cf-espacio); } .cf-pie { margin-top: var(--cf-espacio); } } /* Menos tarjetas cuando hay menos sitio: apretarlas más las volvería ilegibles. */ @media (max-width: 1100px) { .cf-carrusel { --cf-carr-visibles: 4; } } @media (max-width: 900px) { .cf-carrusel { --cf-carr-visibles: 3; } } @media (max-width: 640px) { .cf-carrusel { --cf-carr-visibles: 2; } } @media (max-width: 460px) { .cf-carrusel { --cf-carr-visibles: 1; } } /* El rótulo de cada columna lleva un punto naranja delante, como en el diseño. */ .cf-pie__titulo::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--cf-marca); } /* ─── Acordeón del pie — SOLO plegable en móvil (mockup del 30-ago-2026) ────── `
    ` nativo, mismo patrón sin JavaScript que el índice de lectura en inc/lectura.php. El `

    ` vive DENTRO del `` para no perder la jerarquía de encabezados por usar el elemento plegable. ─────────────────── */ .cf-pie__acordeon summary { list-style: none; } .cf-pie__acordeon summary::-webkit-details-marker { display: none; } .cf-pie__acordeon summary::marker { content: ""; } .cf-pie__acordeon .cf-pie__titulo svg { display: none; width: 10px; height: 10px; flex: 0 0 auto; } /* * 🔴 «DISPLAY: BLOCK !IMPORTANT» NO VENCE EL COLAPSO NATIVO DE `
    `. * * Estuvo aquí una versión que forzaba el contenido visible por CSS —sin el * atributo `open`— para que en escritorio no fuera un acordeón. El * `getComputedStyle` decía «block», pero en un navegador real el contenido * seguía sin verse: el colapso de `
    ` no es una regla de autor * corriente que un `!important` pueda pisar. Mario lo encontró roto el * 30-ago-2026 («en desktop desaparecieron, aparece solo el título»). * * La solución real es el atributo `open` en el HTML (footer.php) — las * cuatro columnas empiezan abiertas siempre, en escritorio y en móvil. Aquí * solo queda impedir que en escritorio alguien las cierre sin querer. */ @media (min-width: 701px) { .cf-pie__acordeon summary { cursor: default; pointer-events: none; } } /* Oculto en escritorio a propósito: el bloque «No te pierdas nada» del mockup es solo para móvil (confirmado por Mario). */ .cf-pie__suscribir { display: none; } /* La línea inferior: copyright a la izquierda, el resto a la derecha. */ .cf-pie__copy { margin: 0; } .cf-pie__punto { color: var(--cf-marca); margin-inline: .35rem; } .cf-pie__legal-der { display: flex; align-items: center; gap: var(--cf-espacio); flex-wrap: wrap; } .cf-pie__legal-der a { color: var(--cf-texto-suave); text-decoration: none; } .cf-pie__legal-der a:hover { color: var(--cf-texto); text-decoration: underline; } .cf-pie__hecho { display: inline-flex; align-items: center; gap: .3rem; } .cf-pie__hecho span { color: var(--cf-marca); } @media (max-width: 700px) { /* En móvil el legal se apila y se centra, como el resto del pie. */ .cf-pie { padding-block: var(--cf-espacio-2); } .cf-pie__legal { justify-content: center; text-align: center; } .cf-pie__legal-der { justify-content: center; } .cf-pie__reservado { display: none; } } /* ════════════════════════════════════════════════════════════════════════════ 🔴 LAS MEDIA QUERIES DE MÓVIL VAN AL FINAL DE LA HOJA ════════════════════════════════════════════════════════════════════════════ Regla de Mario, 30-ago-2026: *«el mediaquery menor debería ir siempre al final del CSS para que la declaración de mismo nombre global no sobrescriba instancias mobile»*. Y tiene una razón exacta: **a igual especificidad gana la última regla del archivo**, sin importar que una esté dentro de una media query. Un ajuste móvil escrito antes de la regla general que quiere pisar no hace nada — y CSS no avisa. Ya costó dos correcciones esta jornada: el margen del pie, que se quedaba en 64 px, y estos mismos enlaces. Escribiéndolas aquí, al final, el problema desaparece y **no hace falta ningún `!important`**. ════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 560px) { /* * ⏹️ AQUÍ SE REPETÍA `.cf-pie > .cf-contenedor` con `4rem` — retirada el 06-sep-2026, que * es ahora el valor de la regla base: repetirlo aquí no cambiaba nada. * ⚠️ Y su comentario describía algo que la regla NO hacía —«se retira el `width`, se anula * con `auto`»— cuando lo que había era un `width` fijado. Un comentario que contradice a * su regla manda a la siguiente sesión a buscar un `auto` que no existe. */ /* * Los enlaces del pie, en fila y envolviendo. * * ⚠️ Estaba `display: grid` desde la regla global y `justify-items: center`, así * que caían uno por línea y centrados: el pie se convertía en una escalera de * cuarenta renglones. En fila, las siete secciones ocupan dos. */ .cf-pie__columna ul { display: flex; flex-wrap: wrap; justify-content: left; } .cf-pie__columna li a { display: block; padding: .2rem .6rem; line-height: 1em; font-size: 12px; } /* El rótulo de cada grupo, en el rojo de la marca: es lo que separa un grupo del siguiente cuando todo va apilado. ⚠️ `var(--cf-marca)` y no el literal `#fe4c3a`: ningún color suelto fuera de los tokens, o se rompe al pulsar el interruptor de tema. */ .cf-pie__columna .cf-pie__titulo { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--cf-marca); margin-bottom: .55rem; } } /* * ─── Acordeón del pie y «No te pierdas nada» — el comportamiento real ─────── * Va DESPUÉS del bloque de arriba a propósito: `.cf-pie__acordeon ul` pisa a * `.cf-pie__columna ul` (misma especificidad, gana la última regla de la * hoja) sin necesitar `!important`. El corte es en 700px, no en 560, porque * es el mismo punto en el que el resto del pie —`.cf-pie__legal`— ya pasa a * apilarse. */ @media (max-width: 700px) { .cf-pie__acordeon summary { cursor: pointer; } .cf-pie__acordeon .cf-pie__titulo { justify-content: space-between; } .cf-pie__acordeon .cf-pie__titulo svg { display: block; color: var(--cf-texto-tenue); transition: transform .18s ease; } /* Cerrado: flecha apuntando hacia abajo (giro de 90° sobre el ícono «der»). */ .cf-pie__acordeon:not([open]) .cf-pie__titulo svg { transform: rotate(90deg); } .cf-pie__acordeon[open] .cf-pie__titulo svg { transform: rotate(-90deg); } /* * 🔴 EN FILA, no en columna — corregido el 30-ago-2026. La primera versión * las apilaba una por línea; Mario pidió el estilo del mockup: título y * lista alineados a la izquierda, los enlaces en fila con `flex-wrap` y * poca separación vertical entre filas, igual que ya hacía * `.cf-pie__columna ul` en el bloque de arriba (≤560px) — aquí se repite * explícito para que también se vea así entre 561 y 700px, donde el pie * ya está apilado en una columna pero ese bloque más viejo todavía no * entra. */ .cf-pie__acordeon .cf-pie__titulo { justify-content: flex-start; gap: .4rem; } .cf-pie__acordeon .cf-pie__titulo svg { margin-left: auto; } .cf-pie__acordeon ul { display: flex; flex-wrap: wrap; justify-content: left; gap: .25rem .6rem; padding-top: .6rem; } .cf-pie__acordeon li a { display: block; padding: .15rem .5rem; line-height: 1.3; font-size: 12px; } .cf-pie__suscribir { display: flex; align-items: center; gap: .8rem; margin-top: var(--cf-espacio-2); padding: var(--cf-espacio); background: var(--cf-superficie); border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); } .cf-pie__suscribir-icono { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--cf-superficie-2); border: 1px solid var(--cf-borde); border-radius: 50%; color: var(--cf-acento); } .cf-pie__suscribir-icono svg { width: 16px; height: 16px; } .cf-pie__suscribir-texto { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .cf-pie__suscribir-texto strong { font-size: .92rem; } .cf-pie__suscribir-texto span { color: var(--cf-texto-suave); font-size: .8rem; } .cf-pie__suscribir .cf-boton-linea { flex: 0 0 auto; padding: .5rem .9rem; font-size: .8rem; } } /* * ─── «.cme-linea» en columna estrecha — la rejilla del diseño de Mario ────── * * [ DOM ] [ afiche ] Aespa [ > ] * [ 06 ] 20:00 hrs. · Movistar Arena * [ SEP ] $52.988 – $320.543 * * Trasladado de eventos.css el 30-ago-2026 (ver la nota junto a `.cme-listado` * más arriba). El corte sigue en 900px, el propio de este componente —donde * la ficha de recinto deja de tener dos columnas—, independiente del punto en * que la portada cambia de carrusel a lista (ver `.cf-cartelera-lista` más * abajo, que corta en 700px: el de siempre para el resto del sitio). */ @media (max-width: 900px) { /* * ⚠️ AJUSTADO el 30-ago-2026 tras verlo Mario en el sitio: afiche más * chico (74→56px), letra más chica (16→15px título, 13→12px meta), y el * mismo `gap` simétrico en las dos direcciones (antes 3px de fila contra * 10px de columna). */ /* Valores afinados por Mario a mano el 30-ago-2026, comparando contra su captura. */ .cme-linea__enlace { grid-template-columns: 41px 62px minmax(0,1fr) 20px; grid-template-rows: auto auto; align-items: center; gap: 3px 11px; padding: 10px 10px 10px 8px; } .cme-linea__fecha { grid-column: 1; grid-row: 1 / span 2; } .cme-linea__img { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 1/1; } .cme-linea__cuerpo{ grid-column: 3; grid-row: 1; align-self: end; } .cme-linea__precio{ grid-column: 3; grid-row: 2; align-self: start; text-align: left; } .cme-linea__ir { grid-column: 4; grid-row: 1 / span 2; } /* * ⚠️ UNA LÍNEA, NO `height: 10px`. Mario pidió esa altura para el título, * pero a 12px de letra una línea sola ya mide ~14px — 10px habría cortado * el texto por la mitad de la letra. El límite real («que no se pase») * es una línea con puntos suspensivos, que es lo que de verdad evita que * un título largo desborde. */ .cme-linea__titulo { /* `display: block` desactiva el `-webkit-line-clamp: 2` de la regla base (solo aplica junto a `display: -webkit-box`) y pasa a una sola línea con puntos suspensivos. */ display: block; font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cme-linea__meta { font-size: 11px; margin-top: 4px; display: block; line-height: 1.1em; } .cme-linea__precio { display: block; white-space: nowrap; line-height: 1; } /* #fe4a3b ≈ var(--cf-acento) (#ff4b3a): mismo color, sin literal fuera de los tokens. */ .cme-linea__precio em { display: inline; font-size: 11px; font-weight: 300; color: var(--cf-acento); } /* «fill: white» pedido → ya hereda `color` de `.cme-linea__ir` (--cf-texto, casi blanco) vía `fill: currentColor`; blanco puro está fuera de los tokens a propósito. */ .cme-linea__ir svg { width: 15px; height: 15px; } } /* * ─── Cartelera de portada: carrusel en escritorio, LISTA en móvil ─────────── * Pedido de Mario el 30-ago-2026: el carrusel horizontal no va en móvil, la * misma cartelera se ve como la lista de «Próximos eventos» de una ficha de * recinto (`.cme-listado`, arriba). Se pintan las dos en el HTML — no una * plantilla por dispositivo, PHP no sabe el ancho de la pantalla— y CSS * decide cuál se ve. Con `loading="lazy"` en las imágenes de las dos, la que * queda en `display: none` nunca llega a pedirse por red. */ /* * ── `.cf-cartelera-lista` · una lista de eventos en UNA caja ───────────────── * * 🔴 ES UNA PRESENTACIÓN REUTILIZABLE, y hasta el 05-sep-2026 no lo era: nacía con * `display: none` y solo se encendía bajo 700 px, así que **solo existía en la portada y solo * en móvil**. Mario la pidió también para «Próximos eventos» de la ficha de recinto, así que * la presentación se separa de la decisión de cuándo se ve. * * Qué hace: `.cme-listado` normal da a cada fila su propio borde y separación (`gap: 7px`); * esto la convierte en **una sola caja con las filas pegadas y un divisor fino** entre ellas. * Se pone junto a `.cme-listado`, no en su lugar. * * ⚠️ La última fila TAMBIÉN lleva divisor — pedido de Mario el 30-ago-2026, revirtiendo el * `:last-child { border-bottom: 0 }` de la versión anterior. */ .cf-cartelera-lista { /* * 🔴 `display: block` ES PARTE DE LA PRESENTACIÓN, NO UN DETALLE. `.cme-listado` es * `grid` con `gap: 7px`, y ese hueco es justo lo que esta caja NO quiere: las filas van * pegadas con un divisor fino. En bloque el `gap` no se aplica y se pegan solas. * * ⚠️ EN LA PORTADA ESTO VENÍA POR ACCIDENTE. El `display: block` lo ponía la regla que * ENCIENDE la lista bajo 700 px, así que al reutilizar la clase en la ficha de recinto * —donde no hay nada que encender— quedaba en `grid` y las filas salían separadas 7 px. * Medido el 05-sep-2026: huecos de 0 px en la portada y de 7 en la ficha, con el mismo * marcado y la misma anchura. Un efecto lateral de otra regla no es una presentación. */ display: block; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); overflow: hidden; } .cf-cartelera-lista .cme-linea__enlace { border: 0; border-radius: 0; border-bottom: 1px solid var(--cf-borde); } /* * 🔴 Y LA ALTERNANCIA CARRUSEL/LISTA ES COSA DE LA PORTADA, no de la clase. Allí se pintan las * dos y el CSS decide cuál se ve; en cualquier otra vista la lista se ve siempre. * 📌 Acotado con `.home` sin cambiar nada: `.cf-carrusel-marco` **solo existe en * `front-page.php`** —medido—, así que la regla ya era suya de hecho. Ahora también de * derecho, que es lo que permite reutilizar la lista fuera. */ .home .cf-cartelera-lista { display: none; } /* * ⚠️ UNA SOLA CAJA, NO TARJETAS SUELTAS. `.cme-listado` normal —el de la ficha * de recinto— da a cada fila su propio borde y separación (`gap: 7px`); el * mockup de la portada en móvil es una única caja con las filas pegadas y un * divisor fino entre ellas. Se anula aquí, solo para este contexto: el resto * de usos de `.cme-listado` sigue con las tarjetas sueltas de siempre. */ @media (max-width: 700px) { .home .cf-carrusel-marco, .home .cf-carrusel__puntos { display: none; } .home .cf-cartelera-lista { display: block; } } /* * ─── Recintos destacados en 2 columnas angostas — corregido el 30-ago-2026 ── * A 375px con dos columnas, `.cf-recinto` se veía «ahogado»: la foto de 56px * más el relleno de siempre dejaban muy poco ancho para el nombre, que se * partía en dos o tres líneas y chocaba con la flecha. Foto más chica, letra * más chica y relleno más justo — la flecha no se toca, ya centra bien sola. */ @media (max-width: 560px) { .cf-recinto { gap: .5rem; padding: .55rem .6rem .55rem .55rem; } .cf-recinto__figura { flex-basis: 40px; width: 40px; height: 40px; } .cf-recinto__nombre { font-size: .8rem; line-height: 1.2; } .cf-recinto__meta { font-size: .68rem; line-height: 1.3; } .cf-recinto__meta--eventos svg { width: 8px; height: 8px; } .cf-recinto__flecha svg { width: 9px; height: 9px; } } /* * ─── Noticias destacadas + Más noticias en móvil — calcado del archivo ────── * de Mario, `~/Downloads/index.html` + `styles.css`. Va al final por la * convención de siempre: los `max-width` de aquí pisan las reglas de arriba * sin necesitar `!important`. */ @media (max-width: 767px) { .cf-section + .cf-section { margin-top: 28px; } .cf-featured-grid { display: flex; flex-direction: column; gap: 10px; } .cf-card-hero { min-height: 490px; aspect-ratio: auto; } .cf-card-hero .cf-card-image { min-height: 490px; } .cf-card-feature, .cf-card-small { min-height: 112px; } .cf-card-feature .cf-card-link, .cf-card-small .cf-card-link { display: grid; grid-template-columns: 36% minmax(0, 1fr); background: var(--cf-superficie); } .cf-card-feature .cf-card-image, .cf-card-small .cf-card-image { position: static; height: 0; min-height: 112px; object-fit: cover; } .cf-card-feature .cf-image-shade, .cf-card-small .cf-image-shade { display: none; } .cf-card-feature .cf-card-copy-overlay, .cf-card-small .cf-card-copy-overlay { position: static; padding: 12px; align-self: center; } .cf-card h2 { font-size: 15px; line-height: 1.2; } /* Después de `.cf-card h2`, a propósito: misma especificidad, y esta debe ganar en la hero. */ .cf-card-hero h2 { font-size: clamp(26px, 9vw, 38px); line-height: 1.08; -webkit-line-clamp: 4; } .cf-card p { font-size: 13px; line-height: 1.4; -webkit-line-clamp: 2; } .cf-card-copy-overlay { padding: 18px; } .cf-card-copy-overlay.compact { padding: 12px; } .cf-category { margin-bottom: 5px; font-size: 9.5px; } .cf-card time, .cf-news-card time, .cf-news-row time { margin-top: 8px; font-size: 9.5px; } .cf-news-grid-primary, .cf-news-grid-secondary { display: flex; flex-direction: column; gap: 0; margin-top: 0; border-top: 1px solid var(--cf-borde); } .cf-news-card, .cf-news-row { border: 0; border-radius: 0; border-bottom: 1px solid var(--cf-borde); background: transparent; } .cf-news-card a, .cf-news-row a { display: grid; grid-template-columns: 118px minmax(0, 1fr); min-height: 96px; padding: 10px 0; aspect-ratio: inherit; } .cf-news-card img, .cf-news-row img { width: 118px; height: 86px; aspect-ratio: auto; border-radius: 8px; object-fit: cover; position: relative; } /* ⚠️ `background: transparent` en los dos modos, no solo en claro: la regla que lo ponía colgaba de `:root[data-theme="light"]`, así que en oscuro la fila seguía arrastrando el degradado de la tarjeta, que aquí ya no es tarjeta sino fila. Mario, 06-sep-2026. */ .cf-news-copy, .cf-news-row a > div { padding: 2px 0 2px 16px; align-self: center; position: relative; width: 100%; background: transparent; } .cf-news-card h3, .cf-news-row h3 { font-size: 14px; line-height: 1.18; } .cf-more-cta { margin-top: 18px; } .cf-btn { width: 100%; } /* * ─── Cabecera de bloque grande en móvil — pedido de Mario el 31-ago-2026 ── * En 375px el botón «Ver más» a la derecha del título se ahorcaba con él. * Baja a su propia fila, a todo el ancho, debajo de la bajada — mismo * criterio que «Ver todas las noticias» de más arriba en este archivo. */ .cf-bloque-grande__titulo { font-size: 1.15rem; } .cf-bloque-grande__subtitulo { font-size: .82rem; line-height: 1.2; } /* * 🔴 EL «VER TODOS» BAJA AL FINAL DEL BLOQUE, DEBAJO DEL LISTADO — Mario, 06-sep-2026: * «debería ir abajo del listado como botón para que no colisione con el título». * * ⚠️ `display: contents` EN LA CABECERA, y es la única forma sin tocar el HTML: el enlace * vive DENTRO de ella, y ningún `order` puede sacarlo de su contenedor. Con `contents` * la caja de la cabecera desaparece y sus hijos —el texto y el enlace— pasan a ser * hijos de la sección, que sí puede ordenarlos. * * ⚠️ Y LO QUE ERA DE LA CABECERA SE TRASLADA AL TEXTO: al quitarle la caja se pierden su * borde inferior, su relleno y su margen. Sin esto, el título se quedaba pegado al * contenido y sin la raya que separa cada bloque. */ .cf-bloque-grande { display: flex; flex-direction: column; } .cf-bloque-grande__cabecera { display: contents; } .cf-bloque-grande__texto { order: 0; padding-bottom: 1rem; margin-bottom: var(--cf-espacio-2); /* ⚠️ LA MISMA VARIABLE QUE ARRIBA, y no es un detalle: esta declaración no es otra raya, es la de la cabecera trasladada aquí porque en móvil la caja desaparece con `display:contents`. Dejarla en `--cf-divisor-seccion` habría pintado el mismo trazo de dos colores según la anchura. */ border-bottom: 1px solid var(--cf-borde); } /* * 🔴 PERO UN BLOQUE PAGINADO NO NECESITA NADA DE ESO, Y CON ELLO SE ROMPÍA. El * `display:contents` de arriba existe para UNA cosa: sacar de la cabecera un enlace que * vive dentro de ella. En un bloque paginado el enlace ya nace fuera —`cf_paginado_html()` * lo emite al pie, hermano de la sección— y lo que queda dentro de la cabecera son las * flechas. Deshaciendo la caja, las flechas perdían su celda a la derecha del título y * caían a una fila propia de ancho completo, con 41 px de aire por encima. Medido a 375 px. * * 📌 Así la cabecera se ve IGUAL que en escritorio —título a la izquierda, mandos a la * derecha— que es lo que Mario pidió al mandar usar `cme-carrusel__mandos`. * ⚠️ Y hay que devolver la raya y el relleno a la cabecera: al recuperar su caja, los que * se habían trasladado al texto quedarían dibujados dos veces. */ [data-cf-pag] .cf-bloque-grande__cabecera { display: flex; flex-wrap: nowrap; } [data-cf-pag] .cf-bloque-grande__texto { /* * ⚠️ `flex: 1` + `min-width: 0` O LAS FLECHAS SE VAN A UNA SEGUNDA FILA. La cabecera * lleva `flex-wrap: wrap`, y a 375 px el título pide 297 px y los mandos 61: no * caben, así que envolvía y las flechas caían solas a la izquierda. Con esto el * texto cede el sitio —el `min-width:0` es lo que le permite encoger por debajo de * su contenido— y el título parte en dos líneas, que es lo correcto. */ flex: 1 1 auto; min-width: 0; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } /* * Al final, centrado y con borde: en una columna estrecha un enlace de texto suelto bajo * el listado no se lee como una acción, y un rectángulo sí. * 📌 Las dos variantes reciben el mismo trato —la píldora y el enlace— o la que quedara * fuera se plantaría en medio del bloque, que es peor que el problema original. */ .cf-bloque-grande .cf-enlace-seccion, .cf-bloque-grande .cf-boton-linea { order: 99; display: flex; justify-content: center; align-items: center; width: 100%; max-width: none; margin-top: var(--cf-espacio); padding: .75rem 1rem; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); font-size: .8rem; } /* * ⚠️ EN MÓVIL EL DEL PIE SÍ ES UN RECUADRO — Mario, 06-sep-2026, revisando lo de esa misma * mañana: en escritorio queda como enlace suelto a la derecha, y en una columna estrecha * vuelve a leerse mejor como botón centrado. Hay que repetir aquí el relleno y el borde * porque la regla base los pone a 0, y esta es 0,2,0 frente a su 0,1,0. */ .cf-bloque-grande .cf-enlace-seccion--pie { justify-content: center; margin-top: var(--cf-espacio); padding: .75rem 1rem; border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); font-size: .8rem; } } @media (max-width: 390px) { .cf-card-feature .cf-card-link, .cf-card-small .cf-card-link { grid-template-columns: 34% minmax(0, 1fr); } .cf-news-card a, .cf-news-row a { grid-template-columns: 104px minmax(0, 1fr); } .cf-news-card img, .cf-news-row img { width: 104px; height: 78px; } .cf-news-card h3, .cf-news-row h3 { font-size: 13px; } } @media (max-width: 959px) { /* Igual que el mockup: de 3 columnas a 2 antes de pasar al riel angosto. */ .cf-agenda-riel__pista { grid-template-columns: 1fr 1fr; } /* «Grandes eventos»: la pieza principal y las filas laterales se apilan. */ .cf-eventos-grandes { grid-template-columns: 1fr; } /* «Recintos destacados»: foto y copia del líder se apilan (igual que el mockup). */ .cf-recintos-feature__principal { grid-template-columns: 1fr; } .cf-recintos-feature__foto { min-height: 220px; } } @media (max-width: 767px) { /* «Recintos destacados»: el líder pasa a ancho completo y el 2×2 se convierte en riel angosto con flechas — igual criterio que `.cf-agenda`. */ .cf-recintos-feature { grid-template-columns: 1fr; } .cf-recintos-feature__lado { display: flex; overflow: auto; scroll-snap-type: x proximity; gap: 10px; } .cf-recintos-feature__compacto { min-width: 72%; scroll-snap-align: start; } .cf-recintos-feature__flecha { display: flex; } } @media (max-width: 560px) { .cf-agenda { padding: 11px; } .cf-agenda-riel__pista { display: flex; overflow: auto; } .cf-agenda-riel__pista > * { scroll-snap-align: start; min-width: 82%; grid-template-columns: 58px 1fr; } .cf-agenda-riel__flecha { display: flex; } } /* * ─── Tag — dossier temático, `tag.php` — 31-ago-2026 ──────────────────────── * Extraído de `03-tag-gala-caldirola.html`. Clases propias `cf-tag*` / * reutiliza nombres genéricos del paquete (`tag-identity`, `tag-lead`, * `context-panel`…) tal como vienen, aislados aquí — este archivo es la * única vista que los usa. */ .cf-tag .tag-identity { position: relative; padding: 34px; border: 1px solid var(--cf-borde); border-radius: 18px; background: var(--cf-superficie); overflow: hidden; margin-top: 18px; } .cf-tag .tag-mark { font-family: var(--cf-titulo); font-size: 82px; line-height: .7; color: var(--cf-acento); float: left; margin-right: 24px; } .cf-tag .eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--cf-brasa); margin: 0; } .cf-tag .page-title { font-size: clamp(34px, 4vw, 48px); line-height: 1.02; margin: 7px 0 12px; letter-spacing: -.03em; } .cf-tag .deck { font-size: 16px; line-height: 1.55; color: var(--cf-texto-suave); max-width: 720px; margin: 0 0 10px; } .cf-tag .tag-count { color: var(--cf-brasa); font-weight: 800; margin: 0; } .cf-tag .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .cf-tag .chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border: 1px solid var(--cf-borde); background: var(--cf-superficie); border-radius: 999px; color: var(--cf-texto-suave); font-size: 12px; font-weight: 650; text-decoration: none; } .cf-tag .chip:hover { color: var(--cf-texto); border-color: var(--cf-borde-fuerte); } .cf-tag .tag-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin-top: 28px; } .cf-tag .tag-lead { border: 1px solid var(--cf-borde); border-radius: 14px; background: var(--cf-superficie); overflow: hidden; padding-bottom: 18px; } /* 📌 Aquí `.media` es un `
    ` (`tag.php`), así que la caja obedece: la trampa del `` en línea —que ignora `min-height` y `aspect-ratio`— no aplica en esta vista. */ .cf-tag .tag-lead .media { min-height: 260px; max-height: 350px; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--cf-superficie-2); } .cf-tag .tag-lead .media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-tag .tag-lead .label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-brasa); margin: 16px 18px 4px; } .cf-tag .tag-lead h2 { margin: 0 18px 8px; font-size: 22px; line-height: 1.18; } .cf-tag .tag-lead h2 a { color: inherit; text-decoration: none; } .cf-tag .tag-lead .story-deck { margin: 0 18px 10px; color: var(--cf-texto-suave); font-size: 13.5px; line-height: 1.5; } .cf-tag .tag-lead .meta { display: flex; gap: 8px; align-items: center; margin: 0 18px; color: var(--cf-texto-tenue); font-size: 12px; } .cf-tag .context-panel { border: 1px solid var(--cf-borde); border-radius: 14px; padding: 20px; background: var(--cf-superficie); } .cf-tag .context-panel .story-title { font-size: 20px; margin: 6px 0; } .cf-tag .context-panel .story-deck { color: var(--cf-texto-suave); font-size: 13px; line-height: 1.5; margin: 0; } .cf-tag .people-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .cf-tag .person-chip { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border: 1px solid var(--cf-borde); border-radius: 999px; text-decoration: none; color: var(--cf-texto); font-size: 13px; font-weight: 650; } .cf-tag .person-chip:hover { border-color: var(--cf-borde-fuerte); } .cf-tag .avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cf-acento); color: var(--cf-acento-texto); font-size: 11px; font-weight: 800; } .cf-tag .tag-lower { display: grid; grid-template-columns: 1fr 300px; gap: 34px; margin-top: 42px; } .cf-tag .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--cf-borde); margin: 0 0 20px; } .cf-tag .section-title { font-size: 26px; line-height: 1.1; letter-spacing: -.02em; margin: 6px 0; } .cf-tag .timeline-item { display: grid; grid-template-columns: 45px 1fr; gap: 18px; padding: 0 0 22px; border-bottom: 1px solid var(--cf-borde); margin-bottom: 20px; } .cf-tag .timeline-item:last-child { border-bottom: 0; margin-bottom: 0; } .cf-tag .timeline-item .date { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-texto-tenue); padding-top: 3px; } .cf-tag .timeline-item .label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cf-brasa); margin-bottom: 3px; } .cf-tag .timeline-item h3 { margin: 2px 0 6px; font-size: 17px; line-height: 1.2; } .cf-tag .timeline-item h3 a { color: inherit; text-decoration: none; } .cf-tag .timeline-item .story-deck { margin: 0; color: var(--cf-texto-suave); font-size: 13px; line-height: 1.45; } .cf-tag .related-box { border: 1px solid var(--cf-borde); border-radius: 14px; padding: 18px; background: var(--cf-superficie); margin-bottom: 16px; } .cf-tag .related-box h3 { font-size: 15px; margin: 0 0 4px; } .cf-tag .related-box .story-deck { color: var(--cf-texto-suave); font-size: 12.5px; margin: 0 0 8px; } .cf-tag .related-box .text-link { color: var(--cf-acento); font-weight: 700; font-size: 12.5px; text-decoration: none; } .cf-tag .related-box .text-link:hover { text-decoration: underline; } @media (max-width: 900px) { .cf-tag .tag-grid, .cf-tag .tag-lower { grid-template-columns: 1fr; } .cf-tag .tag-mark { font-size: 62px; } .cf-tag .tag-identity { padding: 22px; } } /* * ─── Búsqueda con pestañas por tipo, `search.php` — 31-ago-2026 ───────────── * Extraído de `04-search-musica-chilena.html`. Aislado con `.cf-buscar` — * única vista que usa estas clases. */ .cf-buscar .search-page-head { margin-top: 18px; } .cf-buscar .eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--cf-brasa); margin: 0; } .cf-buscar .page-title { font-size: clamp(28px, 4vw, 44px); margin: 7px 0 16px; line-height: 1.08; } .cf-buscar .big-search { display: flex; gap: 10px; margin-bottom: 16px; } .cf-buscar .big-search input { flex: 1; height: 48px; padding: 0 16px; border: 1px solid var(--cf-borde); border-radius: 10px; background: var(--cf-superficie); color: var(--cf-texto); font-size: 15px; } .cf-buscar .big-search button { width: 48px; height: 48px; border: 1px solid var(--cf-acento); border-radius: 10px; background: var(--cf-acento); color: var(--cf-acento-texto); cursor: pointer; display: flex; align-items: center; justify-content: center; } .cf-buscar .big-search button svg { width: 16px; height: 16px; fill: currentColor; } .cf-buscar .search-summary { color: var(--cf-texto-suave); font-size: 14px; margin: 0 0 14px; } .cf-buscar .search-summary b { color: var(--cf-brasa); } .cf-buscar .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .cf-buscar .chip { border: 1px solid var(--cf-borde); background: var(--cf-superficie); color: var(--cf-texto-suave); padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 650; cursor: pointer; } .cf-buscar .chip.active { color: var(--cf-acento-texto); border-color: var(--cf-acento); background: var(--cf-acento); } .cf-buscar .results { display: grid; gap: 14px; } .cf-buscar .result-card { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--cf-borde); border-radius: 12px; background: var(--cf-superficie); } .cf-buscar .result-card .media { display: block; min-height: 90px; border-radius: 8px; overflow: hidden; background: var(--cf-superficie-2); } .cf-buscar .result-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-buscar .type-badge { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cf-brasa); } .cf-buscar .result-card h3 { margin: 4px 0 5px; font-size: 16px; line-height: 1.2; } .cf-buscar .result-card h3 a { color: inherit; text-decoration: none; } .cf-buscar .result-card .story-deck { margin: 0 0 6px; color: var(--cf-texto-suave); font-size: 13px; line-height: 1.4; } .cf-buscar .result-card .date { font-size: 11px; color: var(--cf-texto-tenue); text-transform: uppercase; } @media (max-width: 620px) { .cf-buscar .result-card { grid-template-columns: 84px 1fr; } } /* ── Tira de Personalidades en la portada — 03-sep-2026 ────────────────────── Seis fichas en fila: foto cuadrada, nombre y el rol en una línea. Es una pieza de DIRECTORIO, no de noticia — por eso no lleva fecha ni bajada: un perfil no caduca y la fecha solo aportaría ruido. */ .cf-perfiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: var(--cf-espacio-2, 1.2rem); } .cf-perfil-tarjeta { display: flex; flex-direction: column; gap: .55rem; text-decoration: none; color: inherit; } /* 4:5, el mismo criterio que el archivo de Personalidades: las fotos son retratos (mediana 3:4 medida sobre las 50), y en una caja cuadrada se perdía un 25% del alto — con 4:5 se pierde un 6%. Misma forma en las dos vistas: es el mismo contenido. */ .cf-perfil-tarjeta__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--cf-radio); background: var(--cf-superficie); border: 1px solid var(--cf-borde); } .cf-perfil-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .cf-perfil-tarjeta:hover .cf-perfil-tarjeta__foto img { transform: scale(1.04); } .cf-perfil-tarjeta__nombre { font-weight: 800; font-size: .95rem; line-height: 1.2; letter-spacing: -.01em; } /* El rol se corta a dos líneas: viene de Wikidata y su largo es imprevisible. */ .cf-perfil-tarjeta__rol { font-size: .78rem; color: var(--cf-texto-suave); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cf-perfil-tarjeta:hover .cf-perfil-tarjeta__nombre { color: var(--cf-acento); } /* Móvil: la tira de perfiles pasa a riel horizontal. Seis caras en 390 px darían 55 px cada una — ilegible. Va al final de la hoja a propósito: el media query menor tiene que ganar sin `!important`. */ @media (max-width: 900px) { .cf-perfiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .cf-perfiles { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 12px; padding-bottom: 6px; } .cf-perfil-tarjeta { flex: 0 0 132px; scroll-snap-align: start; } } /* * ─── MÓVIL: la rejilla de bloque pasa a UNA columna ───────────────────────── * * 🔴 `.cf-rejilla` se quedaba en 2 columnas hasta 375 px y no tenía NINGUNA regla móvil. * * Medido en producción a 375 px: tarjeta de 172 px, caja del título de **140 px con * fuente de 19,5 px** — unos 7 caracteres por línea. Los titulares salían «Un heredero * torpe…», «Nicolas Cage y Simon…», «Blue Beetle regresa…». Lo describió Mario el * 03-sep-2026: «queda demasiado ahorcado». * * 📌 Y la solución no era encoger la fuente: `.cf-nota--s` **ya es una fila** (foto de 92 * px a la izquierda, texto a la derecha), que es el formato que este proyecto ya eligió * para móvil en la cartelera —«una tarjeta de foto+titular no lee bien angosta, una fila * sí»—. Lo que faltaba era darle el ancho completo: a una columna, el título pasa de 140 * a ~250 px sin tocar un solo tamaño de letra. * * ⚠️ Va AL FINAL DE LA HOJA, como manda la regla de Mario del 30-ago-2026: así el ajuste * móvil gana sin necesidad de `!important`. Colocado junto a `.cf-rejilla` (línea 816) * no habría hecho nada. */ /* * ── Hasta 767 px ───────────────────────────────────────────────────────────── * * La foto de las tarjetas de «Noticias destacadas» deja de estar recortada a la caja y pasa a * ser una banda apaisada de alto propio (Mario, 05-sep-2026). * * ⚠️ `position: static` es la mitad del arreglo: la imagen va `absolute` para llenar la * tarjeta, y sin sacarla del posicionamiento absoluto ni `aspect-ratio` ni `min-height` * tendrían nada contra lo que medir. */ @media (max-width: 767px) { .cf-card-feature .cf-card-image, .cf-card-small .cf-card-image { position: static; min-height: 112px; height: 100%; aspect-ratio: 2 / 1; object-fit: cover; } } /* * ── Hasta 1240 px ──────────────────────────────────────────────────────────── * * Dos ajustes que Mario pidió a partir de esta anchura y no solo en móvil: en cuanto la * columna se estrecha, el titular de una fila y la firma de cualquier nota pesan demasiado. * * ⚠️ VA ANTES DEL BLOQUE DE 560, no después: las dos son `max-width` y la de 560 es la más * restrictiva, así que tiene que poder pisar a esta. Al revés no haría nada por debajo de * 560 y no daría ningún aviso. * * ⚠️ Y SOLO PARA `--s` EN EL CASO DEL TITULAR. Entre 561 y 1240 las notas 2 y 3 siguen siendo * tarjetas con foto grande: a 0,8 rem su titular quedaría minúsculo al lado de la imagen. */ @media (max-width: 1240px) { .cf-rejilla > .cf-nota--s .cf-nota__titulo { font-size: .8rem; } .cf-rejilla > .cf-nota .cf-nota__meta { line-height: 1em; font-size: .65rem; } } @media (max-width: 560px) { .cf-rejilla { grid-template-columns: 1fr; } /* En una columna no hay vecino a la izquierda: ese borde solo dibujaba una raya. */ .cf-rejilla > .cf-nota:not(:nth-child(3n+1)) { border-left: 0; } /* * 🔴 EN MÓVIL LAS NOTAS 2 Y 3 SE VEN COMO LAS DEMÁS (Mario, 05-sep-2026). A una columna, * dos piezas con foto panorámica de 319 px entre la líder y las filas rompían el ritmo: * medido antes del cambio, 307 y 331 px de alto frente a los 114 de una fila. * * ⚠️ NO SE LES PUEDE PONER LA CLASE `--s` EN EL HTML, que es lo que parecería obvio: de * 561 px para arriba esas dos son las piezas con foto grande que acompañan a la * líder. La clase viaja en el marcado y no entiende de anchuras; esto sí. * * 📌 Por eso se AÑADEN a los selectores que ya tratan `--s` en vez de copiar sus valores: * el día que cambie la miniatura, cambia para las tres. */ /* La foto de la fila, más pequeña y cuadrada: le devuelve ~21 px al titular. */ .cf-rejilla > .cf-nota--s .cf-nota__medio, .cf-rejilla > .cf-nota:nth-child(2) .cf-nota__medio, .cf-rejilla > .cf-nota:nth-child(3) .cf-nota__medio { flex: 0 0 75px; aspect-ratio: 4 / 4; align-self: flex-start; } /* * Lo que en `--s` viene de la hoja base y aquí hay que activar para la 2 y la 3: la * tarjeta pasa de columna a fila. */ .cf-rejilla > .cf-nota:nth-child(2), .cf-rejilla > .cf-nota:nth-child(3) { flex-direction: row; gap: .85rem; align-items: flex-start; } .cf-rejilla > .cf-nota:nth-child(2) .cf-nota__cuerpo, .cf-rejilla > .cf-nota:nth-child(3) .cf-nota__cuerpo { padding-top: 0; } /* * La líder del bloque también: a 19,5 px en 319 px entran ~30 caracteres por línea, y * un titular de 90 («Nace el primer nieto de John Lennon: Sean Ono…») pide 4 líneas, * no 3. Medidos los tres que seguían cortados sobre la portada servida. */ .cf-rejilla > .cf-nota .cf-nota__titulo { -webkit-line-clamp: 4; } /* * 🔴 LA FILA (`--s`) VA DESPUÉS DEL GENÉRICO, Y ESO NO ES ORDEN ESTÉTICO. Las dos * reglas tienen la MISMA especificidad (0,3,0), así que decide cuál va última en la * hoja. Estaba antes: su `-webkit-line-clamp` lo pisaba el de arriba y el número que * hubiera escrito aquí daba igual — la regla llevaba tiempo sin hacer nada. * * ⚠️ Y ESTO REACTIVA EL RECORTE EN MÓVIL PARA ESTA VARIANTE, contra la regla general * de más abajo («en móvil el titular no se recorta»). Es una decisión de Mario del * 05-sep-2026 con la maqueta delante: en una fila de 75 px de foto el titular tiene * ancho de sobra, y lo que descuadra es el alto. Gana por especificidad —0,3,0 * contra el 0,1,0 de `.cf-nota__titulo`—, no por orden. */ .cf-rejilla > .cf-nota--s .cf-nota__titulo, .cf-rejilla > .cf-nota:nth-child(2) .cf-nota__titulo, .cf-rejilla > .cf-nota:nth-child(3) .cf-nota__titulo { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; font-size: .8rem; text-wrap: auto; } /* * La bajada y la firma, más compactas: en una columna el bloque de texto crecía tanto * que una sola nota ocupaba media pantalla. * * ⚠️ EN LAS FILAS `--s` LA BAJADA NO SE VE, y no es este ajuste: la esconde * `.cf-rejilla > .cf-nota--s .cf-nota__bajada { display: none }` desde el rediseño * —con miniatura al lado no cabe—. Esto afecta al resto de notas de la rejilla. */ .cf-rejilla > .cf-nota .cf-nota__bajada { font-size: .7em; line-height: 1.2; -webkit-line-clamp: 3; } /* La firma ya viene ajustada desde 1240 px: aquí no hace falta repetirla. */ /* El padding lateral de la celda le quitaba 32 px al texto en una pantalla de 375. */ .cf-rejilla > .cf-nota { padding-left: 12px; padding-right: 12px; } /* * 🔴 EN MÓVIL EL TITULAR NO SE RECORTA. Punto. * * Subir el tope línea a línea fue persiguiendo casos: de «muchos cortados» a 3, a 2, * y siempre quedaba uno —el titular más largo de la tanda de ese día—. **Un recorte * calibrado contra el contenido de hoy vuelve a fallar con el de mañana**, y esto es * justo lo que Mario pidió que quedara resuelto para siempre y no a revisar a mano. * * En una pantalla angosta hay espacio vertical de sobra: lo que no sobra es el ancho. * * 📌 Se desactiva con `display: block`, que es la forma de anular `-webkit-line-clamp` * —ya está documentado más arriba en esta hoja—, y no subiendo el tope: con un tope * alto quedaban dos casos igual, uno por **2 px de redondeo** (184 > 182 sobre 8 * líneas) y otro porque dos reglas mías con la misma especificidad se pisaban. Sin * recorte no hay número que calibrar ni cascada que resolver. * * ⚠️ Solo en móvil. En escritorio el recorte se mantiene, porque allí un titular de * cuatro líneas descuadra la rejilla. */ .cf-nota__titulo, .cf-card h2, .cf-news-card h3 { display: block; overflow: visible; } } /* La línea de identidad jurídica al pie de las páginas legales. Discreta: informa, no compite con el texto legal que tiene encima. */ .cf-confianza__entidad { margin-top: var(--cf-espacio-2); padding-top: var(--cf-espacio); border-top: 1px solid var(--cf-borde); color: var(--cf-texto-suave); font-size: .9rem; line-height: 1.55; } /* * Logotipo subido (Ajustes → ColorFans). Se emiten las DOS imágenes y el CSS enseña la del * modo activo: el tema conmuta con `data-theme` en , no con `prefers-color-scheme`, así * que un con media query seguiría al sistema operativo y no al interruptor del sitio. */ .cf-marca__img { display: block; max-height: 34px; width: auto; } .cf-marca__img--claro { display: none; } :root[data-theme="light"] .cf-marca__img--oscuro { display: none; } :root[data-theme="light"] .cf-marca__img--claro { display: block; } /* ─── Modo claro: el texto que va SOBRE una foto ──────────────────────────── * * 🔴 EN CLARO, `--cf-texto` ES OSCURO — Y ESTAS PIEZAS NO LO LLEVAN SOBRE EL FONDO DE LA * PÁGINA, SINO SOBRE UNA FOTO CON VELO. La pieza hero de «Noticias destacadas», la líder del * ranking y los títulos de sus tarjetas se pintan encima de la imagen: al pulsar el * interruptor pasaban a texto oscuro sobre foto oscurecida y dejaban de leerse. Mario, * 05-sep-2026. * * ⚠️ Es la trampa que este proyecto ya documenta —«un color que cumple en oscuro puede fallar * en claro, y no se ve hasta que alguien pulsa el interruptor»— apareciendo en las piezas * que NO heredan el fondo del documento. * * 📌 `--cf-sobre-oscuro` es el token que existe justo para esto: «texto e iconos sobre un velo * oscuro». No se escribe un color literal. */ :root[data-theme="light"] .cf-card-hero h2, :root[data-theme="light"] .cf-rank-lead__copy h3 { color: var(--cf-sobre-oscuro); } /* * Desde 768 px la tarjeta lleva el texto ENCIMA de la foto; por debajo se convierte en fila y * el texto sale de la imagen, así que ahí sí toca el color normal del documento. */ @media (min-width: 768px) { :root[data-theme="light"] .cf-card h2, :root[data-theme="light"] .cf-news-card h3, :root[data-theme="light"] .cf-news-row h3 { color: var(--cf-sobre-oscuro); } } /* * Y el velo se retira con el texto: en fila, ese degradado oscuro ya no cae sobre ninguna foto * —el texto está al lado, sobre el fondo de la página— y en claro se veía como una mancha gris * bajo el titular. En oscuro no se nota, y por eso solo se corrige aquí. */ @media (max-width: 767px) { :root[data-theme="light"] .cf-news-copy, :root[data-theme="light"] .cf-news-row a > div { background: transparent; } } /* ─── El lateral del artículo: Top 5 en caja, y el mosaico de relacionados ──── * * Pedido de Mario el 06-sep-2026 con capturas de referencia. Dos piezas que estaban a * medias, y las dos por la misma razón: **la clase existía y nadie la había estilado**. * `.cf-rio--numerado` se pasaba desde `lateral.php` y `.cf-nota__orden` se imprimía en * `nota.php` desde que se escribieron, sin una sola regla — o sea que «Lo más leído» del * lateral nunca se vio numerado. Es el mismo patrón que este proyecto lleva contando. */ /* * 🔴 LA CAJA ES DE TODOS LOS BLOQUES DEL LATERAL, no solo del ranking. * * Se puso primero solo en «Lo más leído» y al comparar con la maqueta de Mario quedaba a la * vista el problema: «Qué hacer estos días» al lado, sin caja, no se leía como un bloque * hermano sino como texto suelto. Una columna con una pieza enmarcada y dos sin marco parece * un olvido, no una jerarquía. * * 📌 Y el rótulo va DENTRO de la caja, como en la captura. */ .cf-lateral__bloque { border: 1px solid var(--cf-borde); border-radius: var(--cf-radio); padding: var(--cf-espacio); } /* * El ranking NO lleva miniatura: son cinco titulares y su número. Con foto, cinco * rectángulos de 75 px compiten con «Qué hacer estos días», que sí las necesita porque * ahí la foto identifica el show. */ .cf-rio--numerado .cf-nota { display: grid; grid-template-columns: 2.1rem 1fr; gap: .75rem; align-items: start; } .cf-rio--numerado .cf-nota__medio { display: none; } .cf-rio--numerado .cf-nota__orden { display: block; font-size: 1.9rem; font-weight: 800; line-height: .9; color: var(--cf-acento); font-variant-numeric: tabular-nums; } /* * ⚠️ EN EL RANKING SOLO VAN EL NÚMERO Y EL TITULAR — maqueta de Mario. * * Lo que ordena es el número, no la sección ni la fecha: con las tres cosas, cinco filas de * dos líneas se convierten en cinco de cuatro y el bloque deja de leerse de un golpe. * * 🔴 LOS NOMBRES DE CLASE SE MIDIERON, NO SE SUPUSIERON. El primer intento escondía * `.cf-nota__firma` y `.cf-nota__fecha`, que **no existen en este componente**: la sección * es `.cf-nota__volanta` y la fecha es un `