/* ========================================================================= Noticias24Colombia — hoja de estilos principal ========================================================================= */ /* ------------------------------------------------------------------------- Temas El sitio nace CLARO para todo el mundo. El servidor escribe siempre o segun la cookie, de modo que la pagina ya llega con el tema puesto y no parpadea. Los valores de :root son los del tema oscuro y sirven de base; el bloque [data-theme="light"] los sustituye. Solo cambian los colores: la tipografia y las medidas son las mismas en los dos temas. El flujo de la portada tambien cambia: el texto va sobre la fotografia, asi que en modo claro el velo pasa a ser blanco y la letra oscura. Todo eso vive en las variables --card-* y --rail-*, mas abajo. ------------------------------------------------------------------------- */ :root { /* Colores base — tema oscuro */ --bg: #0b0d12; --bg-soft: #12151d; --bg-card: #171b24; --line: #262b37; --line-soft: #1e222c; --text: #f2f4f8; --text-soft: #aeb6c6; --text-dim: #7c8497; /* Acentos (bandera de Colombia, en tono sobrio) */ --amarillo: #ffcf33; --azul: #1f4fd8; --rojo: #e0243a; --accent: var(--amarillo); --accent-ink: #1a1400; --radius: 14px; --radius-lg: 24px; --header-h: 64px; --shadow: 0 12px 32px rgba(0, 0, 0, .45); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-title: "Georgia", "Times New Roman", serif; /* Colores de apoyo que cambian con el tema */ --scrim-top: rgba(8, 10, 14, .9); --scrim-mid: rgba(8, 10, 14, .55); --header-bg: rgba(11, 13, 18, .92); --glass: rgba(255, 255, 255, .07); --glass-strong: rgba(255, 255, 255, .13); --glass-line: rgba(255, 255, 255, .16); --chip-ink: #1a1400; --link: var(--amarillo); /* --- Flujo de la portada (tema oscuro) --- */ --card-bg: #05070b; --card-scrim: linear-gradient(180deg, rgba(5,7,11,.75) 0%, rgba(5,7,11,.15) 26%, rgba(5,7,11,.15) 42%, rgba(5,7,11,.72) 74%, rgba(5,7,11,.96) 100%); --card-ink: #f2f4f8; --card-ink-soft: rgba(238, 242, 250, .9); --card-ink-dim: rgba(255, 255, 255, .66); --card-ink-time: rgba(255, 255, 255, .72); --card-shadow: 0 2px 18px rgba(0, 0, 0, .6); --card-shadow-soft: 0 1px 10px rgba(0, 0, 0, .5); --rail-bg: rgba(15, 18, 26, .55); --rail-bg-hover: rgba(30, 36, 50, .8); --rail-line: rgba(255, 255, 255, .12); --rail-ink: #fff; --overlay-veil: linear-gradient(180deg, rgba(8,10,14,.82) 0%, rgba(8,10,14,.45) 60%, transparent 100%); --overlay-ink: #f2f4f8; --overlay-glass: rgba(255, 255, 255, .14); --overlay-glass-line: rgba(255, 255, 255, .2); --placeholder-bg: linear-gradient(140deg, #101725 0%, #1c2740 55%, #241a12 100%); --placeholder-ink: rgba(255, 207, 51, .17); } /* ------------------------------ Tema claro ------------------------------ */ :root[data-theme="light"] { --bg: #f6f7fa; --bg-soft: #ffffff; --bg-card: #eef1f6; --line: #d9dee8; --line-soft: #e6eaf1; --text: #14181f; --text-soft: #4a5262; --text-dim: #6b7488; /* El azul y el rojo se oscurecen un poco para que contrasten sobre blanco */ --amarillo: #ffcf33; --azul: #1a41b0; --rojo: #c31229; --accent-ink: #1a1400; --link: #9a6b00; --shadow: 0 10px 28px rgba(20, 24, 31, .12); --header-bg: rgba(255, 255, 255, .94); --glass: rgba(20, 24, 31, .05); --glass-strong: rgba(20, 24, 31, .1); --glass-line: rgba(20, 24, 31, .14); /* --- Flujo de la portada (tema claro) --- El texto sigue yendo encima de la fotografia, asi que lo que cambia es el velo: de negro pasa a blanco, y la letra de blanca pasa a oscura. Arriba el velo es casi transparente para que la foto se vea entera. */ --card-bg: #e9ecf2; --card-scrim: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.06) 24%, rgba(255,255,255,.22) 44%, rgba(246,247,250,.90) 72%, rgba(246,247,250,.99) 100%); --card-ink: #14181f; --card-ink-soft: rgba(20, 24, 31, .84); --card-ink-dim: rgba(20, 24, 31, .62); --card-ink-time: rgba(20, 24, 31, .66); --card-shadow: 0 1px 14px rgba(255, 255, 255, .8); --card-shadow-soft: 0 1px 8px rgba(255, 255, 255, .75); --rail-bg: rgba(255, 255, 255, .78); --rail-bg-hover: rgba(255, 255, 255, .95); --rail-line: rgba(20, 24, 31, .12); --rail-ink: #14181f; --overlay-veil: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 62%, transparent 100%); --overlay-ink: #14181f; --overlay-glass: rgba(20, 24, 31, .06); --overlay-glass-line: rgba(20, 24, 31, .14); --placeholder-bg: linear-gradient(140deg, #e4e8f0 0%, #eef1f6 55%, #f6f2e6 100%); --placeholder-ink: rgba(190, 150, 20, .28); } /* Ya no hace falta mirar (prefers-color-scheme): el servidor escribe siempre data-theme en , y de partida es "light". */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } :focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; border-radius: 4px; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 12px; z-index: 200; background: var(--amarillo); color: #000; padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 0; } /* ------------------------------ Botones ---------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 600; font-size: .93rem; cursor: pointer; text-decoration: none; transition: transform .12s ease, background .15s ease, border-color .15s ease; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--amarillo); color: var(--accent-ink); } .btn--primary:hover { background: #ffd94f; } .btn--ghost { background: var(--glass); border-color: var(--glass-line); color: var(--text); backdrop-filter: blur(6px); } .btn--ghost:hover { background: var(--glass-strong); } .btn--save { background: var(--azul); color: #fff; } .linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .chip { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--amarillo); color: #1a1400; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .chip:hover { text-decoration: none; filter: brightness(1.08); } .chip--sm { font-size: .65rem; padding: 3px 9px; } /* ------------------------------ Cabecera --------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--header-bg); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(14px); } .site-header--overlay { position: fixed; left: 0; right: 0; border-bottom: 0; /* El velo y los colores estan mas abajo, en --overlay-*. */ } .site-header__inner { height: var(--header-h); max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .brand:hover { text-decoration: none; } .brand__mark { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px rgba(255,255,255,.12); } .brand__stripe { display: block; } .brand__stripe--y { flex: 2; background: var(--amarillo); } .brand__stripe--b { flex: 1; background: var(--azul); } .brand__stripe--r { flex: 1; background: var(--rojo); } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } .brand__name strong { color: var(--amarillo); } .brand__tag { font-size: .66rem; color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; } /* El menu de secciones. Antes tenia overflow:hidden, asi que en una pantalla mediana las ultimas secciones desaparecian sin dejar rastro — ni se veian, ni habia forma de llegar a ellas. Ahora la barra se desplaza de lado, como en cualquier periodico, y una sombra al borde avisa de que sigue habiendo secciones. */ .site-nav { display: flex; gap: 4px; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); } .site-nav::-webkit-scrollbar { display: none; } .site-nav__link { scroll-snap-align: start; } /* Entre 900 y 1200 px el hueco es justo: se aprieta un poco la barra para que quepan mas secciones antes de tener que desplazarla. */ @media (min-width: 901px) and (max-width: 1200px) { .site-header__inner { gap: 12px; } .site-nav { gap: 2px; } .site-nav__link { padding: 7px 9px; font-size: .83rem; } } .site-nav__link { padding: 7px 12px; border-radius: 999px; font-size: .88rem; color: var(--text-soft); white-space: nowrap; } .site-nav__link:hover { background: var(--glass); color: var(--text); text-decoration: none; } .site-nav__link.is-active { background: var(--glass-strong); color: var(--text); } .site-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .search { display: flex; align-items: center; } .search input { width: 160px; padding: 8px 12px; background: var(--glass); border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; color: var(--text); font: inherit; font-size: .86rem; } .search input::placeholder { color: var(--text-dim); } .search button { padding: 8px 13px; background: var(--glass); border: 1px solid var(--line); border-left: 0; border-radius: 0 999px 999px 0; color: var(--text-soft); cursor: pointer; } .search button:hover { color: var(--amarillo); } .search svg { width: 17px; height: 17px; } .rss-link { padding: 8px; color: var(--text-soft); border-radius: 50%; } .rss-link:hover { color: var(--amarillo); background: var(--glass); } .menu-toggle { display: none; flex-direction: column; gap: 4px; justify-content: center; width: 40px; height: 40px; padding: 0 9px; background: none; border: 0; cursor: pointer; } .menu-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; } .mobile-menu { display: none; flex-direction: column; padding: 8px 16px 18px; background: var(--header-bg); border-bottom: 1px solid var(--line); } .mobile-menu a { padding: 11px 4px; border-bottom: 1px solid var(--line-soft); color: var(--text-soft); } .mobile-menu a:hover { color: var(--text); } .mobile-menu[hidden] { display: none; } @media (max-width: 900px) { .site-nav { display: none; } .menu-toggle { display: flex; } .search input { width: 108px; } .mobile-menu:not([hidden]) { display: flex; } } @media (max-width: 520px) { .brand__tag { display: none; } .search { display: none; } } /* En pantallas muy estrechas (320 px, iPhone SE) la marca no cabia entera y empujaba el boton del menu fuera de la pantalla: toda la pagina se podia desplazar de lado. Se le deja encogerse. */ @media (max-width: 380px) { .site-header__inner { gap: 10px; padding: 0 10px; } .brand { flex: 0 1 auto; min-width: 0; } .brand__text { min-width: 0; } .brand__name { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ====================== FLUJO PRINCIPAL (tipo TikTok) ==================== */ body.page-feed { height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scrollbar-width: none; } body.page-feed::-webkit-scrollbar { width: 0; } .feed { display: block; } .feed__filter { position: fixed; top: calc(var(--header-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 12px; padding: 7px 16px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .82rem; backdrop-filter: blur(8px); } .feed__filter a { color: var(--amarillo); } /* ------------------------------- Tarjeta --------------------------------- */ .card { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: var(--card-bg); color: var(--card-ink); } .card__media { position: absolute; inset: 0; z-index: 1; } .card__media img { width: 100%; height: 100%; object-fit: cover; } /* Tarjeta sin fotografia: el fondo acompana al tema, si no en modo claro quedaria una mancha oscura con la letra oscura encima. */ .card__media-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--placeholder-bg); } .card__media-placeholder span { font-family: var(--font-title); font-size: clamp(3rem, 12vw, 6rem); font-weight: 700; letter-spacing: .04em; color: var(--placeholder-ink); } .card__scrim { position: absolute; inset: 0; background: var(--card-scrim); } .card__content { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 82px 34px 20px; padding-bottom: max(34px, env(safe-area-inset-bottom, 0px)); } .card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .card__time { font-size: .78rem; color: var(--card-ink-time); } .card__title { margin: 0 0 10px; font-family: var(--font-title); font-size: clamp(1.45rem, 5.4vw, 2.1rem); line-height: 1.16; font-weight: 700; letter-spacing: -.015em; text-shadow: var(--card-shadow); } .card__title a:hover { text-decoration: none; color: var(--amarillo); } .card__summary { margin: 0 0 12px; font-size: .96rem; line-height: 1.5; color: var(--card-ink-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-shadow: var(--card-shadow-soft); } .card__meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: .78rem; color: var(--card-ink-dim); margin-bottom: 16px; } .card__cta { display: flex; gap: 10px; flex-wrap: wrap; } /* ------------------------ Barra lateral de acciones ---------------------- */ .rail { position: absolute; z-index: 4; right: 12px; bottom: 118px; display: flex; flex-direction: column; gap: 16px; align-items: center; } .rail__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; padding: 9px 0; background: var(--rail-bg); border: 1px solid var(--rail-line); border-radius: 16px; color: var(--rail-ink); cursor: pointer; backdrop-filter: blur(8px); transition: transform .14s ease, background .15s ease; } .rail__btn:hover { background: var(--rail-bg-hover); transform: scale(1.05); text-decoration: none; } .rail__btn[aria-pressed="true"] { color: var(--rojo); border-color: rgba(224,36,58,.6); } .rail__btn[aria-pressed="true"] svg { fill: var(--rojo); stroke: var(--rojo); } .rail__count { font-size: .68rem; font-weight: 600; letter-spacing: .02em; } .rail__btn--xml .rail__count { color: var(--amarillo); } .rail__btn.is-bumped { animation: bump .35s ease; } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } /* --------------------------- Estado del flujo ---------------------------- */ .feed__status { min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; background: var(--bg); scroll-snap-align: start; } .feed__end { color: var(--text-soft); text-align: center; font-size: .92rem; } .feed__end a { color: var(--amarillo); } .feed__noscript { color: var(--text-soft); text-align: center; } .spinner { display: flex; gap: 6px; } .spinner span { width: 9px; height: 9px; border-radius: 50%; background: var(--amarillo); opacity: .35; animation: pulse 1.1s infinite ease-in-out; } .spinner span:nth-child(2) { animation-delay: .15s; } .spinner span:nth-child(3) { animation-delay: .3s; } @keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } } .feed__progress { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 58; height: 3px; background: var(--glass); } .feed__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amarillo), var(--rojo)); transition: width .18s ease; } .feed__hint { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: rgba(15, 18, 26, .72); border: 1px solid rgba(255,255,255,.13); font-size: .78rem; color: rgba(255,255,255,.85); backdrop-filter: blur(8px); animation: floaty 2.4s ease-in-out infinite; transition: opacity .4s ease; } .feed__hint svg { width: 16px; height: 16px; } .feed__hint.is-hidden { opacity: 0; pointer-events: none; } @keyframes floaty { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } } .empty-state { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; text-align: center; } .empty-state a { color: var(--amarillo); } /* Vista de escritorio: columna central tipo movil */ @media (min-width: 900px) { .card { display: block; padding: calc(var(--header-h) + 14px) 0 26px; } .card__media { top: calc(var(--header-h) + 14px); bottom: 26px; left: 50%; right: auto; transform: translateX(-50%); width: min(94vw, 540px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .card__scrim { border-radius: var(--radius-lg); } .card__content { left: 50%; right: auto; transform: translateX(-50%); width: min(94vw, 540px); bottom: 26px; padding: 0 26px 30px; } .rail { right: auto; left: calc(50% + min(47vw, 270px) + 14px); bottom: 60px; } } @media (min-width: 900px) and (max-width: 1140px) { .rail { left: auto; right: 18px; } } /* ============================ PAGINA ARTICULO ============================= */ .article-page { max-width: 780px; margin: 0 auto; padding: 28px 18px 60px; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; color: var(--text-dim); margin-bottom: 20px; } .breadcrumb a { color: var(--text-soft); } .breadcrumb a:hover { color: var(--amarillo); } .breadcrumb__current { color: var(--text-dim); } .article__header { margin-bottom: 22px; } .article__title { font-family: var(--font-title); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 12px; } .article__lead { font-size: 1.12rem; line-height: 1.55; color: var(--text-soft); margin: 0 0 14px; } .article__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: var(--text-dim); padding-bottom: 16px; border-bottom: 1px solid var(--line); } .article__figure { margin: 0 0 26px; } .article__figure img { width: 100%; height: auto; /* con width/height en el HTML, el navegador ya reserva el sitio */ border-radius: var(--radius); background: var(--bg-card); /* mientras carga, en vez de un hueco */ } /* Foto de una direccion externa: no se conocen sus medidas, asi que se le da un marco de proporcion fija. Reserva el sitio igualmente y la pagina tampoco salta. */ .article__figure--sin-medidas img { aspect-ratio: 16 / 9; object-fit: cover; } .article__figure figcaption { margin-top: 8px; font-size: .78rem; color: var(--text-dim); font-style: italic; } .article__body { font-size: 1.06rem; line-height: 1.75; color: var(--text); } .article__body p { margin: 0 0 1.15em; } .article__body h2 { font-family: var(--font-title); font-size: 1.5rem; margin: 1.8em 0 .6em; line-height: 1.25; } .article__body h3 { font-size: 1.2rem; margin: 1.5em 0 .5em; } .article__body h4 { font-size: 1.06rem; margin: 1.4em 0 .45em; color: var(--text); } /* ---------------------------- Redes sociales ---------------------------- */ .redes { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0 0 14px; padding: 0; } .redes__enlace { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--glass); border: 1px solid var(--line); color: var(--text-soft); transition: color .15s ease, border-color .15s ease, background .15s ease; } .redes__enlace:hover { color: var(--amarillo); border-color: var(--amarillo); background: var(--glass-strong); text-decoration: none; } .redes__enlace svg { width: 19px; height: 19px; fill: currentColor; stroke: none; } /* --------------------------- Documento legal ---------------------------- */ /* La maqueta original venia con colores fijos (fondo claro, texto oscuro). Aqui se conserva su aspecto —el filete amarillo arriba, la bandera, los titulos con barra azul, los recuadros de aviso— pero con los tokens del sitio, para que funcione igual en tema claro y en tema oscuro. */ .legal-doc { --doc-amarillo: #fcd116; --doc-azul: #003893; --doc-rojo: #ce1126; max-width: 1000px; padding: clamp(22px, 4vw, 42px); margin: 30px auto 60px; background: var(--bg-soft); border: 1px solid var(--line); border-top: 7px solid var(--doc-amarillo); border-radius: 14px; box-shadow: var(--shadow); line-height: 1.75; } :root[data-theme="dark"] .legal-doc { --doc-azul: #7aa7ff; } .legal-doc h1 { color: var(--doc-azul); margin-bottom: 10px; } .legal-doc__kicker { margin: 0 0 26px; color: var(--text-dim); font-size: 1rem; } .legal-doc__flag { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 5px; margin: 0 0 30px; border-radius: 999px; overflow: hidden; } .legal-doc__flag span:nth-child(1) { background: var(--doc-amarillo); } .legal-doc__flag span:nth-child(2) { background: #003893; } .legal-doc__flag span:nth-child(3) { background: var(--doc-rojo); } .legal-doc h2 { margin: 36px 0 14px; padding: 11px 16px; background: var(--bg-card); border-left: 5px solid var(--doc-azul); border-radius: 7px; color: var(--doc-azul); font-size: 1.18rem; line-height: 1.35; } .legal-doc__notice, .legal-doc__editorial, .legal-doc__datos { margin: 26px 0; padding: 18px 20px; border-radius: 8px; } .legal-doc__notice { background: rgba(252, 209, 22, .12); border-left: 5px solid var(--doc-amarillo); } .legal-doc__editorial { background: rgba(47, 107, 255, .11); border-left: 5px solid var(--doc-azul); } .legal-doc__datos { background: rgba(46, 160, 90, .11); border-left: 5px solid #2ea05a; } .legal-doc__datos ul { margin: 10px 0 0; } .legal-doc__datos li { margin: 9px 0; } .legal-doc__footer { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: .94rem; } /* ------------------------------- Archivo -------------------------------- */ /* Esta pagina usa la caja .prose, que subraya y colorea todos los enlaces —bien para un texto legal, mal para una lista—. Aqui se vuelve atras. */ .prose .archivo-mes, .prose .archivo-item__enlace, .prose .paginacion a { text-decoration: none; color: inherit; } .prose .archivo-item__titulo { color: var(--text); } .prose .archivo-item__enlace:hover .archivo-item__titulo { color: var(--amarillo); } .archivo-ano { font-family: var(--font-title); font-size: 1.5rem; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .archivo-fila { display: flex; flex-wrap: wrap; gap: 8px; } .archivo-mes { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .88rem; text-transform: capitalize; } .archivo-mes:hover, .archivo-mes.is-active { border-color: var(--amarillo); text-decoration: none; } .archivo-mes.is-active { background: rgba(255,207,51,.12); } .archivo-mes em { font-style: normal; font-weight: 700; font-size: .78rem; color: var(--text-dim); } .archivo-mes.is-active em, .archivo-mes:hover em { color: var(--amarillo); } .archivo-lista { list-style: none; margin: 14px 0 0; padding: 0; } .archivo-item + .archivo-item { border-top: 1px solid var(--line-soft); } .archivo-item__enlace { display: flex; gap: 14px; align-items: center; padding: 12px 6px; border-radius: 10px; } .archivo-item__enlace:hover { background: var(--bg-soft); text-decoration: none; } .archivo-item__foto { flex: 0 0 84px; width: 84px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--bg-card); } .archivo-item__foto img { width: 100%; height: 100%; object-fit: cover; } .archivo-item__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .archivo-item__titulo { font-weight: 600; line-height: 1.35; } .archivo-item__meta { font-size: .78rem; color: var(--text-dim); } .paginacion { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; } .paginacion a { min-width: 38px; padding: 7px 10px; text-align: center; border-radius: 8px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .86rem; } .paginacion a:hover { border-color: var(--amarillo); text-decoration: none; } .paginacion a.is-active { background: var(--amarillo); color: var(--accent-ink); font-weight: 700; } /* --------------------- Incrustaciones (TikTok, X…) ---------------------- */ /* El alto lo pone el PHP en el atributo style: o una proporcion (los videos) o una altura fija (las publicaciones). Reservarlo aqui es lo que evita que el texto salte cuando la incrustacion termina de cargar. */ .incrustacion { margin: 1.8em auto; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); position: relative; } .incrustacion iframe { width: 100%; height: 100%; display: block; border: 0; } .incrustacion__pie { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .72rem; } .incrustacion__pie a { color: var(--text-soft); } .incrustacion__pie a:hover { color: var(--amarillo); text-decoration: none; } /* En un movil estrecho, una incrustacion vertical no cabe a su ancho fijo. */ @media (max-width: 460px) { .incrustacion { max-width: 100% !important; } } /* Hueco para Taboola / Outbrain al final de la noticia. min-height a proposito: estos widgets tardan un par de segundos en dibujarse y, sin sitio reservado, empujan hacia abajo todo lo que hay debajo justo cuando el lector esta ahi. Es lo que Google penaliza como CLS. Reservando el alto tipico, la pagina no se mueve. */ .article-endslot { max-width: 900px; margin: 8px auto 40px; padding: 0 18px; min-height: 320px; } .article-endslot:empty, .article-endslot.esta-vacio { display: none; min-height: 0; } .article__body figure { margin: 1.4em 0; } .article__body figcaption { font-size: .85rem; color: var(--text-soft); margin-top: .5em; } .article__body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .article__body ul, .article__body ol { padding-left: 1.3em; margin: 0 0 1.15em; } .article__body li { margin-bottom: .45em; } .article__body blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--amarillo); color: var(--text-soft); font-style: italic; } .article__body img { border-radius: var(--radius); margin: 1.2em 0; } .article__body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } .article__source { margin: 22px 0 0; padding: 12px 16px; background: var(--bg-soft); border-radius: var(--radius); font-size: .88rem; color: var(--text-soft); } .article__source a { color: var(--amarillo); } .article__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--text-soft); font-size: .87rem; font-weight: 500; cursor: pointer; font-family: inherit; } .action:hover { background: var(--bg-card); color: var(--text); text-decoration: none; } .action svg { width: 18px; height: 18px; } .action[aria-pressed="true"] { color: var(--rojo); border-color: rgba(224,36,58,.45); } .action[aria-pressed="true"] svg { fill: var(--rojo); stroke: var(--rojo); } .action__count { color: var(--text-dim); font-variant-numeric: tabular-nums; } .share-sheet { margin-top: 16px; padding: 18px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); } .share-sheet > p { margin: 0 0 12px; font-weight: 600; } .share-sheet__links { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; } .share-sheet__links a, .share-sheet__links button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: .86rem; cursor: pointer; } .share-sheet__links a:hover, .share-sheet__links button:hover { border-color: var(--amarillo); text-decoration: none; } .article-nav { display: grid; gap: 12px; margin: 30px 0; grid-template-columns: 1fr; } @media (min-width: 640px) { .article-nav { grid-template-columns: 1fr 1fr; } } .article-nav__item { padding: 14px 18px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; } .article-nav__item:hover { border-color: var(--amarillo); text-decoration: none; } .article-nav__item span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); } .article-nav__item strong { font-size: .95rem; line-height: 1.35; font-weight: 600; } .article-nav__item--next { text-align: right; } /* ----------------------------- Comentarios -------------------------------- */ .comments { margin-top: 42px; } .comments h2 { font-family: var(--font-title); font-size: 1.5rem; margin: 0 0 18px; } .comments__count { color: var(--text-dim); font-weight: 400; } .comments__empty { color: var(--text-dim); font-style: italic; } .notice { padding: 13px 16px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); font-size: .9rem; margin: 0 0 18px; } .notice--ok { border-color: rgba(46, 160, 90, .5); background: rgba(46, 160, 90, .1); } .notice--error { border-color: rgba(224, 36, 58, .5); background: rgba(224, 36, 58, .1); } .notice--info { border-color: rgba(31, 79, 216, .5); background: rgba(31, 79, 216, .12); } .comment-form { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 26px; } .comment-form__row { margin-bottom: 14px; position: relative; } .comment-form__row label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 600; color: var(--text-soft); } .comment-form input[type="text"], .comment-form textarea { width: 100%; padding: 11px 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: .95rem; resize: vertical; } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--amarillo); outline: none; } .comment-form__counter { position: absolute; right: 4px; bottom: -16px; font-size: .72rem; color: var(--text-dim); } .comment-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .comment-form__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 18px; } .comment-form__note { margin: 0; font-size: .78rem; color: var(--text-dim); max-width: 380px; } .comment-form__note a { color: var(--amarillo); } .comment-form__feedback { margin: 14px 0 0; padding: 11px 14px; border-radius: 10px; font-size: .88rem; } .comment-form__feedback.is-ok { background: rgba(46,160,90,.12); border: 1px solid rgba(46,160,90,.4); } .comment-form__feedback.is-error { background: rgba(224,36,58,.12); border: 1px solid rgba(224,36,58,.4); } .comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .comment { display: flex; gap: 13px; } .comment__avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--azul), var(--rojo)); font-weight: 700; font-size: 1rem; color: #fff; } .comment__body { flex: 1; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 12px 15px; } .comment__head { margin: 0 0 5px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .comment__head time { font-size: .76rem; color: var(--text-dim); } .comment__text { margin: 0; color: var(--text-soft); line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .comment:target .comment__body { border-color: var(--amarillo); } /* ---------------------------- Relacionadas -------------------------------- */ .related { margin-top: 44px; } .related h2 { font-family: var(--font-title); font-size: 1.4rem; margin: 0 0 16px; } .related__grid { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 640px) { .related__grid { grid-template-columns: 1fr 1fr; } } .related__item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); } .related__item:hover { border-color: var(--amarillo); text-decoration: none; } .related__thumb { flex: 0 0 74px; width: 74px; height: 58px; border-radius: 9px; overflow: hidden; background: var(--bg-card); } .related__thumb img { width: 100%; height: 100%; object-fit: cover; } .related__text { display: flex; flex-direction: column; gap: 4px; } .related__title { font-size: .92rem; line-height: 1.35; font-weight: 600; } .related__time { font-size: .74rem; color: var(--text-dim); } /* ============================ PAGINAS DE TEXTO ============================ */ .prose { max-width: 760px; margin: 0 auto; padding: 30px 18px 64px; } .prose--wide { max-width: 980px; } .prose--center { text-align: center; padding-top: 70px; } .prose h1 { font-family: var(--font-title); font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 18px; line-height: 1.18; } .prose h2 { font-size: 1.3rem; margin: 2em 0 .6em; color: var(--text); } .prose h3 { font-size: 1.05rem; margin: 1.6em 0 .5em; color: var(--text-soft); } .prose p, .prose li { color: var(--text-soft); line-height: 1.7; } .prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li { margin-bottom: .45em; } .prose__lead { font-size: 1.08rem; color: var(--text) !important; } .prose__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .prose code { background: var(--bg-card); padding: 2px 6px; border-radius: 5px; font-size: .86em; color: var(--amarillo); } .big-code { font-family: var(--font-title); font-size: 5rem; line-height: 1; color: var(--amarillo); margin: 0 0 4px; font-weight: 700; } .table-wrap { overflow-x: auto; margin: 1em 0 1.6em; } table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; } th, td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--line); } th { color: var(--text); font-weight: 600; background: var(--bg-soft); } td { color: var(--text-soft); } .contact-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 24px 0; } @media (min-width: 640px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-card { padding: 18px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); } .contact-card h2 { margin: 0 0 8px; font-size: 1.05rem; } .contact-card p { margin: 0 0 6px; font-size: .9rem; } .search--big { display: flex; gap: 10px; margin: 20px 0 26px; } .search--big input { flex: 1; width: auto; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--text); font: inherit; } .search__count { color: var(--text-soft); margin-bottom: 18px; } .result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .result__link { display: flex; gap: 14px; padding: 12px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); } .result__link:hover { border-color: var(--amarillo); text-decoration: none; } .result__thumb { flex: 0 0 110px; width: 110px; height: 82px; border-radius: 10px; overflow: hidden; background: var(--bg-card); } .result__thumb img { width: 100%; height: 100%; object-fit: cover; } .result__text { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .result__text strong { font-size: 1rem; line-height: 1.35; } .result__summary { font-size: .86rem; color: var(--text-soft); } .result__meta { font-size: .75rem; color: var(--text-dim); } .cat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 22px; } .cat-card { display: flex; align-items: stretch; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); } .cat-card:hover { border-color: var(--amarillo); } .cat-card__main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 4px; } .cat-card__main:hover { text-decoration: none; } .cat-card__main strong { font-size: 1.02rem; } .cat-card__main span { font-size: .8rem; color: var(--text-dim); } .cat-card__rss { display: grid; place-items: center; padding: 0 14px; background: rgba(255,255,255,.04); border-left: 1px solid var(--line); font-size: .72rem; font-weight: 700; color: var(--amarillo); letter-spacing: .06em; } .cat-card__rss:hover { background: var(--amarillo); color: #1a1400; text-decoration: none; } /* ================================ PIE ==================================== */ .site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 44px 18px 0; } body.page-feed .site-footer { scroll-snap-align: start; } .site-footer__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 30px; grid-template-columns: 1fr; } @media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } .site-footer__brand .brand__name { font-size: 1.1rem; } .site-footer__brand p { color: var(--text-dim); font-size: .89rem; margin: 10px 0 14px; max-width: 320px; } .footer-rss { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-soft); font-size: .84rem; } .footer-rss:hover { border-color: var(--amarillo); color: var(--amarillo); text-decoration: none; } .footer-rss svg { width: 16px; height: 16px; } .site-footer__col h2 { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin: 0 0 12px; } .site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer__col a, .site-footer__col button { color: var(--text-soft); font-size: .89rem; } .site-footer__col a:hover, .site-footer__col button:hover { color: var(--amarillo); } .site-footer__legal { max-width: 1120px; margin: 34px auto 0; padding: 18px 0 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: .82rem; color: var(--text-dim); } .site-footer__legal p { margin: 0; } /* ========================= BANDEJA DE COOKIES ============================ */ .cookie-banner { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: 12px; background: rgba(18, 21, 29, .985); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: slideUp .35s ease; } .cookie-banner[hidden] { display: none; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } .cookie-banner__inner { max-width: 1040px; margin: 0 auto; padding: 20px 22px; } .cookie-banner__text h2 { margin: 0 0 7px; font-size: 1.02rem; } .cookie-banner__text p { margin: 0; font-size: .85rem; color: var(--text-soft); line-height: 1.55; } .cookie-banner__text a { color: var(--amarillo); text-decoration: underline; } .cookie-banner__options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 4px; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); } .cookie-banner__options[hidden] { display: none; } .cookie-option { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--text-soft); cursor: pointer; } .cookie-option input { margin-top: 3px; accent-color: var(--amarillo); width: 16px; height: 16px; } .cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; margin-top: 16px; } .cookie-banner__actions .btn { font-size: .85rem; padding: 9px 16px; } .cookie-banner__actions .btn[hidden] { display: none; } @media (max-width: 620px) { .cookie-banner__actions { justify-content: stretch; } .cookie-banner__actions .btn { flex: 1 1 auto; } } /* Mientras el aviso de cookies este visible, ocultamos la pista del flujo */ body.has-cookie-banner .feed__hint { opacity: 0; visibility: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } body.page-feed { scroll-snap-type: none; } } /* ====================== ESPACIOS PUBLICITARIOS ========================== */ .card--ad { display: grid; place-items: center; background: linear-gradient(160deg, #0f1420 0%, #161d2c 100%); } .card__ad-inner { width: min(94vw, 540px); padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .card__ad-label, .article-ad__label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); } .card__ad-slot { width: 100%; min-height: 250px; display: grid; place-items: center; } .card__ad-slot ins { display: block; width: 100%; } .card--ad:has(ins[data-ad-status="unfilled"]) { display: none; } /* Si la red no rellena el bloque, la tarjeta no deja un hueco vacio. */ .card--ad:has(.card__ad-slot:empty) { display: none; } .article-ad { display: block; margin: 2em 0; padding: 14px; /* En movil se aprieta el marco: ver la nota de mas abajo. */ border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); text-align: center; } .article-ad__label { display: block; margin-bottom: 8px; } /* Se reserva el alto del anuncio ANTES de que llegue. Sin esto, cuando la red lo rellena empuja hacia abajo todo el texto que el lector estaba leyendo: es el "salto" que Google mide como CLS y una de las cosas que mas molestan al leer en el movil. */ .article-ad__slot { min-height: 280px; display: grid; place-items: center; } .article-ad__slot ins { display: block; width: 100%; } /* Y si al final no hay anuncio, el hueco desaparece en vez de quedarse vacio. AdSense marca la etiqueta con data-ad-status="unfilled" cuando no tiene nada que mostrar. */ .article-ad:has(.article-ad__slot:empty), .article-ad:has(ins[data-ad-status="unfilled"]) { display: none; } /* Modo diagnostico: el hueco se queda a la vista aunque Google no mande nada, con una etiqueta que dice por que esta vacio. Sirve para ver de un vistazo si el problema es el codigo pegado o es que AdSense no tiene anuncios para este sitio todavia. */ .article-ad--visible:has(ins[data-ad-status="unfilled"]), .article-ad--visible:has(.article-ad__slot:empty) { display: block; border-style: dashed; opacity: .75; } .article-ad--visible:has(ins[data-ad-status="unfilled"]) .article-ad__label::after { content: " — AdSense no ha enviado ningún anuncio (unfilled)"; text-transform: none; letter-spacing: 0; color: var(--rojo); } .card--ad-visible:has(ins[data-ad-status="unfilled"]) { display: grid; } .card--ad-visible:has(ins[data-ad-status="unfilled"]) .card__ad-label::after { content: " — sin anuncio (unfilled)"; color: var(--rojo); } /* ------------------------- Pie de foto ---------------------------------- */ .article__figure figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 9px; } .article__figcaption { font-size: .9rem; line-height: 1.45; color: var(--text-soft); font-style: normal; } .article__figcredit { font-size: .76rem; color: var(--text-dim); font-style: italic; } /* ======================== BOTON DE TEMA CLARO/OSCURO ==================== */ .theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--text-soft); cursor: pointer; } .theme-toggle:hover { color: var(--amarillo); background: var(--glass); } .theme-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; } /* Se ve la luna en el tema oscuro y el sol en el claro. */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } :root[data-theme="light"] .theme-toggle__sun { display: block; } :root[data-theme="light"] .theme-toggle__moon { display: none; } /* En el flujo, la cabecera va sobre la foto: el boton necesita contraste. */ /* ------- La cabecera del flujo, que va encima de la fotografia ---------- */ /* Sobre una foto hace falta un velo para leer el logotipo y el menu. En tema oscuro el velo es negro y la letra blanca; en tema claro el velo es blanco y la letra oscura. Las dos variantes viven en --overlay-*. */ .site-header--overlay { background: var(--overlay-veil); } .site-header--overlay .brand__name, .site-header--overlay .brand__tag, .site-header--overlay .site-nav__link, .site-header--overlay .search input, .site-header--overlay .search button, .site-header--overlay .theme-toggle, .site-header--overlay .rss-link { color: var(--overlay-ink); } .site-header--overlay .search input, .site-header--overlay .search button { background: var(--overlay-glass); border-color: var(--overlay-glass-line); } .site-header--overlay .menu-toggle span { background: var(--overlay-ink); } .site-header--overlay .theme-toggle:hover, .site-header--overlay .rss-link:hover { color: var(--amarillo); } /* El titulo de la tarjeta, al pasar por encima. */ .card__title a:hover { color: var(--amarillo); } /* El aviso de cookies mantiene su fondo propio. */ :root[data-theme="light"] .cookie-banner { background: rgba(255, 255, 255, .99); } /* -------------- La publicidad tiene que caber en el movil ---------------- */ /* Un bloque de AdSense de ancho fijo —300x250, 300x600— necesita esos 300 pixeles EXACTOS. Si el hueco mide menos, Google no manda anuncio y el espacio se queda vacio sin decir por que. En una pantalla de 360 px (iPhone SE y buena parte de los Android) la cuenta salia justa por debajo: 360 menos el margen de la pagina (36) menos el marco del anuncio (30) = 294 px. Seis pixeles de menos, y ni un anuncio. Aqui se recupera ese espacio apretando los margenes solo en pantallas estrechas. Con un bloque adaptable no haria falta, pero muchos editores usan los de tamano fijo y no hay motivo para castigarlos. */ /* Publicidad en el movil. El problema medido: en un telefono de 360 px el hueco quedaba en 294 px y el bloque de AdSense mas pequeno pide 300 px. Como no cabia, Google no mandaba anuncio y el recuadro desaparecia (data-ad-status="unfilled"). Aqui el anuncio sale del margen del articulo y ocupa el ancho entero de la pantalla, que es lo que hacen todos los diarios: 320 px de hueco en el telefono mas estrecho que se vende hoy, de sobra para 300 px. */ @media (max-width: 520px) { .article-page { padding-left: 12px; padding-right: 12px; } .article-ad { padding-left: 0; padding-right: 0; margin-left: -12px; margin-right: -12px; } /* El anuncio va centrado en la franja. Ya no hace falta permitir el desplazamiento lateral: desde que el hueco ocupa el ancho entero, el bloque mas pequeno de AdSense (300 px) cabe hasta en 320 px de pantalla. */ .article-ad__slot { display: flex; justify-content: center; } .card__ad-inner { width: min(98vw, 540px); } } /* La pista "Desliza para ver más" no debe taparle los botones a la tarjeta. */ @media (max-width: 899px) { .card__content { padding-bottom: max(74px, calc(env(safe-area-inset-bottom, 0px) + 74px)); } .feed__hint { bottom: 16px; font-size: .74rem; padding: 6px 13px; } } /* ========================== FICHA DEL AUTOR ============================== */ /* Debajo de cada noticia firmada por alguien con ficha, y en su propia pagina. Se apoya en los mismos tokens que las tarjetas, asi que sigue el tema claro y el oscuro sin reglas aparte. */ .article__autor { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .article__autor:hover { color: var(--amarillo); border-bottom-color: currentColor; text-decoration: none; } .autor-ficha { margin: 30px 0; padding: 20px 22px; background: var(--card-bg, var(--glass)); border: 1px solid var(--line); border-radius: var(--radius, 14px); border-left: 3px solid var(--amarillo); } .autor-ficha__rotulo { margin: 0 0 2px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .autor-ficha__nombre { margin: 0 0 8px; font-size: 1.16rem; line-height: 1.25; } .autor-ficha__nombre a { color: inherit; } .autor-ficha__nombre a:hover { color: var(--amarillo); text-decoration: none; } .autor-ficha__bio { margin: 0 0 12px; color: var(--text-soft); font-size: .93rem; line-height: 1.6; } .autor-ficha__redes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .autor-ficha__redes a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line); color: var(--text-soft); } .autor-ficha__redes a:hover { color: var(--amarillo); background: var(--glass-strong); text-decoration: none; } .autor-ficha__redes svg { width: 17px; height: 17px; fill: currentColor; stroke: none; } .autor-ficha__mas { margin: 12px 0 0; font-size: .88rem; } /* La cabecera de /autor/… reutiliza los mismos trozos. */ .autor-cabecera { margin-bottom: 6px; } .autor-cabecera__rotulo { margin: 0 0 4px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); } .autor-cabecera__bio { margin: 10px 0 0; color: var(--text-soft); line-height: 1.65; max-width: 62ch; } .autor-cabecera__redes { margin-top: 14px; } @media (max-width: 520px) { .autor-ficha { padding: 16px 16px; } }