/*
 * twitters.es — tema «Hemeroteca»
 * Archivo de tuits: azul cobalto sobre gris frío (modo oscuro automático), Onest para el texto y JetBrains Mono para
 * horas, fechas y cifras. Cronología en mapa de calor mes a mes, días como fichas, cada tuit como pieza tipográfica.
 */
:root {
  --fondo: #f3f5f9;
  --superficie: #ffffff;
  --tinta: #0f172a;
  --tenue: #556070;
  --linea: #dde3ec;
  --azul: #2450d8;
  --azul-hondo: #1a3cae;
  --azul-suave: #e8eefc;
  --marca: #ffe066;
  --verde: #0d7a55;
  --calor-0: #e7ebf2;
  --calor-1: #d6e1fb;
  --calor-2: #a6bdf4;
  --calor-3: #6c8fea;
  --calor-4: #3760d8;
  --calor-5: #1b3a9e;
  --sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ancho-texto: 44rem;
  --ancho-amplio: 72rem;
  --hueco: clamp(1rem, 2.5vw, 2rem);
  --radio: 14px;
  --color-texto: var(--tinta);
  --color-fondo: var(--fondo);
  --color-suave: var(--azul-suave);
  --color-borde: var(--linea);
  --color-acento: var(--azul);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--sans);
  --fuente-titulos: var(--sans);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b1020;
    --superficie: #121a2e;
    --tinta: #e6ebf5;
    --tenue: #98a4b9;
    --linea: #253150;
    --azul: #8aabff;
    --azul-hondo: #b3c8ff;
    --azul-suave: #1a2747;
    --marca: #6b5a14;
    --verde: #5fd3a5;
    --calor-0: #161f36;
    --calor-1: #1d2c55;
    --calor-2: #24438f;
    --calor-3: #2f5fd0;
    --calor-4: #5c88ff;
    --calor-5: #a9c2ff;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--azul); color: #fff; }
.icono { width: 1.2rem; height: 1.2rem; flex: none; }
.envoltorio { width: min(100% - 2.5rem, var(--ancho-amplio)); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--azul); color: #fff; padding: .6rem 1rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
.saltar:focus { left: .5rem; }
main { outline: 0; }
mark { background: var(--marca); color: inherit; border-radius: 3px; padding: 0 .1em; }

/* ------------------------------------------------------------ cabecera */
.cabecera { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.marca { display: inline-flex; align-items: center; gap: .7rem; color: var(--tinta); text-decoration: none; font-weight: 750; font-size: 1.1rem; letter-spacing: -.01em; min-height: 44px; }
.marca-icono { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: var(--azul); color: #fff; }
.marca-icono .icono { width: 1.3rem; height: 1.3rem; stroke-width: 2.2; }
@media (prefers-color-scheme: dark) { .marca-icono { color: #0b1020; } }
.marca:hover .marca-nombre { color: var(--azul); }
.navegacion { display: flex; align-items: center; gap: 1.25rem; }
.navegacion .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.navegacion .menu a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .8rem; border-radius: 999px; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .95rem; }
.navegacion .menu a:hover, .navegacion .menu a[aria-current] { background: var(--azul-suave); color: var(--azul); }
.buscador-mini { display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; min-height: 40px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); color: var(--tenue); }
.buscador-mini:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.buscador-mini .icono { width: 1.05rem; height: 1.05rem; }
.buscador-mini input { width: 10rem; border: 0; background: transparent; color: var(--tinta); font: 400 .95rem/1 var(--sans); padding: .55rem 0; outline: 0; }
.buscador-mini input::placeholder { color: var(--tenue); opacity: 1; }
.menu-boton { display: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); cursor: pointer; }
.menu-boton .icono-cerrar, .menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
.menu-boton[aria-expanded="true"] .icono-cerrar { display: block; }
@media (max-width: 46rem) {
  .menu-boton { display: grid; }
  .navegacion { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: .75rem; padding: 1rem 1.25rem 1.25rem; background: var(--fondo); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra); }
  .navegacion.abierto { display: flex; }
  .navegacion .menu { flex-direction: column; }
  .navegacion .menu a { min-height: 48px; font-size: 1.05rem; }
  .buscador-mini input { width: 100%; flex: 1; font-size: 1rem; }
  .buscador-mini { min-height: 48px; }
}

/* ------------------------------------------------------------ portada */
.heroe { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); background-image: radial-gradient(color-mix(in srgb, var(--azul) 22%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; background-position: -11px -11px; border-bottom: 1px solid var(--linea); }
.heroe-rejilla { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.antetitulo, .migas { margin: 0 0 1rem; font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.migas a { color: var(--tenue); text-decoration: none; }
.migas a:hover { color: var(--azul); text-decoration: underline; }
.migas span[aria-hidden] { color: var(--linea); margin: 0 .2rem; }
.heroe-titulo { margin: 0; font: 800 clamp(2.6rem, 6.4vw, 5.2rem)/.98 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.heroe-lema { margin: 1rem 0 2rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--tenue); max-width: 32rem; }
.buscador-grande { position: relative; display: flex; align-items: center; max-width: 40rem; background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 999px; box-shadow: var(--sombra); padding: .35rem .35rem .35rem 1.25rem; }
.buscador-grande:focus-within { border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-suave), var(--sombra); }
.buscador-grande > .icono { color: var(--tenue); width: 1.35rem; height: 1.35rem; }
.buscador-grande input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinta); font: 400 1.1rem/1.2 var(--sans); padding: .85rem .75rem; outline: 0; }
.buscador-grande input::placeholder { color: var(--tenue); opacity: 1; }
.buscador-grande button { flex: none; min-height: 48px; padding: 0 1.4rem; border: 0; border-radius: 999px; background: var(--azul); color: #fff; font: 600 1rem/1 var(--sans); cursor: pointer; transition: background-color .15s ease; }
.buscador-grande button:hover { background: var(--azul-hondo); }
@media (prefers-color-scheme: dark) { .buscador-grande button { color: #0b1020; } }
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.cifras > div { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.15rem; display: flex; flex-direction: column-reverse; gap: .2rem; }
.cifras dt { font-size: .85rem; color: var(--tenue); }
.cifras dd { margin: 0; font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.05 var(--mono); letter-spacing: -.03em; color: var(--tinta); }
.cifras > div:first-child dd { color: var(--azul); }

.seccion { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.seccion-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.5rem; }
.seccion-cabecera h2 { margin: 0; font: 750 clamp(1.5rem, 3vw, 2rem)/1.15 var(--sans); letter-spacing: -.025em; }
.seccion-cabecera p { margin: 0; color: var(--tenue); max-width: 34rem; }
.seccion-sub { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1rem; font: 700 1.25rem/1.2 var(--sans); letter-spacing: -.015em; }
.seccion-sub span { font: 500 .8rem/1 var(--mono); color: var(--tenue); }

/* cronología */
.cronologia-marco { background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--sombra); overflow-x: auto; }
.cronologia { width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 5px; table-layout: fixed; font-family: var(--mono); }
.cronologia th { font-weight: 500; font-size: .75rem; color: var(--tenue); }
.cronologia thead th { padding-bottom: .2rem; }
.cronologia abbr { text-decoration: none; }
.cronologia thead th:first-child, .cronologia tbody th { width: 3.6rem; }
.cronologia tbody th { text-align: left; font-size: .85rem; color: var(--tinta); font-weight: 600; }
.cronologia tbody th a { color: inherit; text-decoration: none; }
.cronologia tbody th a:hover { color: var(--azul); text-decoration: underline; }
.cronologia td { padding: 0; }
.cronologia .cronologia-total { width: 4.2rem; text-align: right; font-size: .8rem; color: var(--tenue); }
.celda { display: grid; place-items: center; height: 2.6rem; border-radius: 8px; background: var(--calor-0); text-decoration: none; font-size: .72rem; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; }
a.celda:hover, a.celda:focus-visible { transform: scale(1.12); box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--azul); position: relative; z-index: 1; }
.celda.nivel-1 { background: var(--calor-1); color: var(--azul-hondo); }
.celda.nivel-2 { background: var(--calor-2); color: #10276e; }
.celda.nivel-3 { background: var(--calor-3); color: #fff; }
.celda.nivel-4 { background: var(--calor-4); color: #fff; }
.celda.nivel-5 { background: var(--calor-5); color: #fff; }
@media (prefers-color-scheme: dark) {
  .celda.nivel-1 { color: #c9d6ff; } .celda.nivel-2 { color: #e6ecff; } .celda.nivel-4, .celda.nivel-5 { color: #0b1020; }
}
.anio-vacio th { color: var(--tenue) !important; font-weight: 400 !important; }
.anio-vacio .celda-vacia { background: transparent; border: 1px dashed var(--linea); }
.anio-actual th { color: var(--azul) !important; }
.cronologia-escala { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; margin: .75rem 5px 0 0; font: 500 .72rem/1 var(--mono); color: var(--tenue); }
.cronologia-escala i { width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; }
.cronologia-escala span:first-child { margin-right: .25rem; } .cronologia-escala span:last-child { margin-left: .25rem; }
.cronologia-escala .nivel-1 { background: var(--calor-1); } .cronologia-escala .nivel-2 { background: var(--calor-2); } .cronologia-escala .nivel-3 { background: var(--calor-3); } .cronologia-escala .nivel-4 { background: var(--calor-4); } .cronologia-escala .nivel-5 { background: var(--calor-5); }

/* ------------------------------------------------------------ días y tuits */
.columna-tuits { max-width: 46rem; }
.seccion-ultimos .columna-tuits, .listado .columna-tuits { margin-inline: auto; }
.dia { margin-bottom: 1.75rem; }
.dia-titulo { position: sticky; top: 4rem; z-index: 5; margin: 0 0 .6rem; padding: .5rem 0; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: inherit; }
.dia-titulo a { display: inline-flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; min-height: 40px; }
.dia-num { display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .4rem; border-radius: 10px; background: var(--azul); color: #fff; font: 700 1.05rem/1 var(--mono); }
@media (prefers-color-scheme: dark) { .dia-num { color: #0b1020; } }
.dia-semana { order: 2; font-weight: 700; font-size: 1.05rem; text-transform: capitalize; }
.dia-num { order: 1; }
.dia-mes { order: 3; font: 500 .8rem/1 var(--mono); color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.dia-titulo a:hover .dia-semana { color: var(--azul); text-decoration: underline; }

.tuits { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); overflow: hidden; }
.tuits > li + li { border-top: 1px solid var(--linea); }
.tuit { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.05rem 1.25rem 1.1rem 1rem; transition: background-color .15s ease; }
.tuit:hover { background: color-mix(in srgb, var(--azul-suave) 45%, transparent); }
.tuit-actual { background: var(--azul-suave); box-shadow: inset 4px 0 0 var(--azul); }
.tuit-hora { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding-top: .2rem; font: 500 .82rem/1.2 var(--mono); color: var(--tenue); text-decoration: none; min-height: 44px; }
.tuit-hora:hover { color: var(--azul); }
.tuit-hora:hover time { text-decoration: underline; }
.tuit-fecha { font-size: .72rem; color: var(--azul); white-space: nowrap; }
.tuit-cuerpo { min-width: 0; }
.tuit-tipo { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .3rem; font-size: .82rem; font-weight: 600; color: var(--tenue); }
.tuit-tipo .icono { width: 1rem; height: 1rem; }
.tuit-retuit .tuit-tipo { color: var(--verde); }
.tuit-texto { font-size: 1.08rem; line-height: 1.55; overflow-wrap: anywhere; }
.tuit-texto p { margin: 0 0 .5em; }
.tuit-texto p:last-child { margin-bottom: 0; }
.tuit-texto a { color: var(--azul); text-decoration: none; font-weight: 500; }
.tuit-texto a:hover { text-decoration: underline; }
.tuit-texto a[href^="http"]:not([href*="twitter.com/"]) { font: 500 .88em/1.4 var(--mono); }
.tuit-enlace-texto { color: var(--tinta) !important; font-weight: 400 !important; }
.tuit-adjunto { margin-top: .6rem !important; }
.tuit-adjunto a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--linea); border-radius: 999px; font: 500 .85rem/1.2 var(--sans) !important; color: var(--tinta) !important; }
.tuit-adjunto a:hover { border-color: var(--azul); color: var(--azul) !important; text-decoration: none !important; }
.tuit-adjunto .icono { width: 1rem; height: 1rem; color: var(--azul); }
.tuit-texto blockquote { margin: .5rem 0 0; padding: .6rem .9rem; border-left: 3px solid var(--linea); color: var(--tenue); }

.seguir { margin: 1.5rem 0 0; }
.boton { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .75rem 1.3rem; border-radius: 999px; background: var(--superficie); border: 1.5px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; transition: border-color .15s ease, color .15s ease; }
.boton:hover { border-color: var(--azul); color: var(--azul); }
.boton .icono { width: 1.1rem; height: 1.1rem; }

.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.etiquetas a { display: inline-flex; align-items: center; gap: .1rem; min-height: 40px; padding: .4rem .55rem .4rem .85rem; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 500; }
.etiquetas a:hover { border-color: var(--azul); color: var(--azul); }
.etiqueta-almohadilla { color: var(--azul); font-weight: 700; }
.etiqueta-n { margin-left: .5rem; padding: .15rem .45rem; border-radius: 999px; background: var(--azul-suave); color: var(--azul); font: 600 .72rem/1.2 var(--mono); }

/* ------------------------------------------------------------ listados */
.listado { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.listado-cabecera { max-width: 46rem; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); }
.listado-titulo { margin: 0; font: 800 clamp(2.3rem, 6vw, 4.2rem)/1 var(--sans); letter-spacing: -.04em; text-wrap: balance; overflow-wrap: anywhere; }
.listado-titulo span { font-weight: 300; color: var(--tenue); }
.listado-titulo .almohadilla { color: var(--azul); font-weight: 800; }
.listado-cuenta { margin: .75rem 0 0; font: 500 .85rem/1.4 var(--mono); color: var(--tenue); }
.listado-texto { margin: 1rem 0 0; font-size: 1.15rem; color: var(--tenue); }
.listado .buscador-grande { margin-top: 1.5rem; }
.tira-meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; margin-top: 1.5rem; }
.tira-meses a, .tira-vacia { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .2rem; border-radius: 10px; background: var(--superficie); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-size: .8rem; font-weight: 600; text-transform: capitalize; min-height: 44px; }
.tira-meses small { font: 500 .68rem/1 var(--mono); color: var(--tenue); }
.tira-meses a:hover { border-color: var(--azul); color: var(--azul); }
.tira-meses a[aria-current] { background: var(--azul); border-color: var(--azul); color: #fff; }
.tira-meses a[aria-current] small { color: inherit; opacity: .85; }
@media (prefers-color-scheme: dark) { .tira-meses a[aria-current] { color: #0b1020; } }
.tira-vacia { opacity: .45; background: transparent; border-style: dashed; }
.meses { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.meses a, .meses li > span { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1rem 1.1rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); }
.meses a:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.mes-vacio > span { opacity: .5; border-style: dashed !important; background: transparent !important; }
.mes-nombre { font-weight: 650; text-transform: capitalize; }
.mes-n { font: 600 1.6rem/1 var(--mono); letter-spacing: -.03em; color: var(--azul); }
.mes-vacio .mes-n { color: var(--tenue); }
.mes-barra { display: block; height: 6px; border-radius: 3px; background: var(--calor-0); overflow: hidden; }
.mes-barra i { display: block; height: 100%; border-radius: 3px; background: var(--azul); }
.listado .seccion { max-width: 46rem; margin-inline: auto; }
.vecinos { display: flex; justify-content: space-between; gap: 1rem; max-width: 46rem; margin: 2.5rem auto 0; }
.vecino { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.1rem; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; text-transform: capitalize; }
.vecino:hover { border-color: var(--azul); color: var(--azul); }
.vecino .icono { width: 1.05rem; height: 1.05rem; }
.aviso-vacio { color: var(--tenue); font-size: 1.1rem; }

.paginacion { margin-block: 2rem 0; font-family: var(--mono); font-size: .88rem; }
.paginacion a, .paginacion span[aria-current] { border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--superficie); }
.paginacion a:hover { border-color: var(--azul); color: var(--azul); }
.paginacion span[aria-current] { background: var(--azul); border-color: var(--azul); color: #fff; }
@media (prefers-color-scheme: dark) { .paginacion span[aria-current] { color: #0b1020; } }

/* ------------------------------------------------------------ un tuit */
.tuit-pagina { max-width: 48rem; padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.tuit-grande { position: relative; background: var(--superficie); border: 1px solid var(--linea); border-radius: 26px; box-shadow: var(--sombra); padding: clamp(1.5rem, 5vw, 3.25rem); overflow: hidden; }
.tuit-grande::before { content: "“"; position: absolute; right: clamp(1rem, 4vw, 2.5rem); top: -.15em; font: 800 clamp(8rem, 20vw, 13rem)/1 var(--sans); color: var(--azul-suave); pointer-events: none; }
.tuit-grande-cabecera { position: relative; margin: 0 0 1.25rem; font: inherit; }
.tuit-grande .tuit-tipo { font-size: .85rem; color: var(--azul); text-transform: uppercase; letter-spacing: .05em; font-family: var(--mono); font-weight: 600; }
.tuit-grande.tuit-retuit .tuit-tipo { color: var(--verde); }
.tuit-grande-texto { position: relative; font: 500 clamp(1.45rem, 3.4vw, 2.35rem)/1.32 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: pretty; }
.tuit-grande-texto p { margin: 0 0 .5em; }
.tuit-grande-texto p:last-child { margin-bottom: 0; }
.tuit-grande-texto a { color: var(--azul); text-decoration: none; }
.tuit-grande-texto a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.tuit-grande-texto a[href^="http"]:not([href*="twitter.com/"]) { font: 500 .62em/1.4 var(--mono); letter-spacing: 0; }
.tuit-grande-texto .tuit-adjunto a { font-size: 1rem !important; }
.tuit-datos { position: relative; display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: .75rem 2rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px dashed var(--linea); }
.tuit-datos dt { font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.tuit-datos dd { margin: .2rem 0 0; font: 500 .95rem/1.35 var(--mono); }
.tuit-datos dd a { color: var(--tinta); text-decoration: none; }
.tuit-datos dd a:hover { color: var(--azul); text-decoration: underline; }
.tuit-datos-etiquetas dd a { color: var(--azul); margin-right: .4rem; }
.tuit-vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.tuit-vecino { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.15rem; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.tuit-vecino:hover { border-color: var(--azul); }
.tuit-vecino-siguiente { text-align: right; align-items: flex-end; }
.tuit-vecino-rotulo { display: inline-flex; align-items: center; gap: .35rem; font: 500 .74rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--azul); }
.tuit-vecino-rotulo .icono { width: .95rem; height: .95rem; }
.tuit-vecino-texto { font-size: .95rem; line-height: 1.4; color: var(--tenue); overflow-wrap: anywhere; }
.mismo-dia { padding-top: 2.5rem; }
.comentarios { padding-top: 2rem; }
.comentario { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 1rem 1.2rem; }
.comentario-cabeza { margin: 0 0 .4rem; font-size: .9rem; color: var(--tenue); }
.comentario-cabeza strong { color: var(--tinta); }
.comentario-texto p { margin: 0; }

/* ------------------------------------------------------------ pie */
.pie { margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: 2.5rem; background: var(--superficie); border-top: 1px solid var(--linea); font-size: .92rem; }
.pie-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: 2rem; align-items: start; }
.pie-nombre { margin: 0; font-weight: 750; font-size: 1.1rem; letter-spacing: -.01em; }
.pie-lema { margin: .25rem 0 .5rem; color: var(--tenue); }
.pie-datos { margin: 0; font: 500 .78rem/1.4 var(--mono); color: var(--tenue); }
.pie-anios { display: flex; flex-wrap: wrap; gap: .4rem; }
.pie-anios a { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 40px; padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font: 600 .9rem/1.2 var(--mono); }
.pie-anios small { font-size: .72rem; font-weight: 400; color: var(--tenue); }
.pie-anios a:hover { border-color: var(--azul); color: var(--azul); }
.pie-menu { list-style: none; margin: 0; padding: 0; }
.pie-menu a, .pie-red a { display: inline-block; padding: .35rem 0; color: var(--tinta); text-decoration: none; }
.pie-menu a:hover, .pie-red a:hover { color: var(--azul); text-decoration: underline; }
.pie-red { margin: 0; }
.pie-nota { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); font: 400 .8rem/1.5 var(--mono); color: var(--tenue); }

/* ------------------------------------------------------------ adaptación */
@media (max-width: 60rem) {
  .heroe-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pie-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .envoltorio { width: min(100% - 2rem, var(--ancho-amplio)); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buscador-grande { padding-left: 1rem; }
  .buscador-grande button { padding: 0 1rem; }
  .buscador-grande input { font-size: 1rem; padding-inline: .5rem; }
  .cronologia-marco { margin-inline: -.25rem; padding: .75rem .5rem; border-radius: 16px; }
  .cronologia { min-width: 0; border-spacing: 2px; }
  .cronologia thead th:first-child, .cronologia tbody th { width: 2.4rem; font-size: .7rem; }
  .cronologia .cronologia-total { display: none; }
  .celda { height: 1.6rem; border-radius: 4px; }
  .celda-n { display: none; }
  .tuit { grid-template-columns: minmax(0, 1fr); padding: .9rem 1rem 1rem; }
  .tuit-hora { flex-direction: row; gap: .5rem; min-height: 0; padding: 0; }
  .tuits { border-radius: 14px; }
  .tira-meses { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuit-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuit-datos-etiquetas { grid-column: 1 / -1; }
  .tuit-vecinos { grid-template-columns: minmax(0, 1fr); }
  .tuit-vecino-siguiente { text-align: left; align-items: flex-start; }
  .pie-rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { a.celda:hover { transform: none; } }
@media print {
  .cabecera, .pie, .buscador-grande, .tuit-vecinos, .paginacion, .vecinos { display: none !important; }
  body { background: #fff; color: #000; }
  .tuits, .tuit-grande { box-shadow: none; border-color: #ccc; }
  .dia-titulo { position: static; }
}

/* portada: últimos tuits a dos columnas (cabecera fija a la izquierda) */
@media (min-width: 60rem) {
  .seccion-ultimos { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); justify-content: space-between; gap: 3rem; align-items: start; }
  .seccion-ultimos .seccion-cabecera { position: sticky; top: 5.5rem; flex-direction: column; }
  .seccion-ultimos .columna-tuits { margin: 0; width: 100%; }
}
.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; text-decoration: none; }
.enlace-flecha .icono { width: 1.05rem; height: 1.05rem; transition: transform .2s ease; }
.enlace-flecha:hover .icono { transform: translateX(3px); }
@media (max-width: 40rem) { .tuit-grande::before { display: none; } }
.tipo-etiqueta .listado-titulo { font-size: clamp(1.7rem, 3.8vw, 2.9rem); letter-spacing: -.03em; }

/* ------------------------------------------------------------ afinado */
/* años sin actividad: una sola fila discreta */
.cronologia .sin-actividad { position: relative; height: 1.9rem; text-align: center; }
.cronologia .sin-actividad::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 1px dashed var(--linea); }
.cronologia .sin-actividad span { position: relative; padding: 0 .8rem; background: var(--superficie); font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.anio-vacio th { font-size: .74rem !important; white-space: nowrap; }
@media (max-width: 40rem) { .cronologia .sin-actividad { height: 1.4rem; } .cronologia .sin-actividad span { font-size: .64rem; padding: 0 .5rem; } }
/* micro-tipografía y estados */
.tuit-texto, .tuit-grande-texto, .heroe-lema, .seccion-cabecera p { text-wrap: pretty; }
.tuit-hora, .cifras dd, .mes-n, .tira-meses small, .pie-anios small, .etiqueta-n, .dia-num, .listado-cuenta { font-variant-numeric: tabular-nums; }
.boton:active, .vecino:active, .etiquetas a:active, .pie-anios a:active { transform: translateY(1px); }
.buscador-grande button:active { background: var(--azul-hondo); transform: translateY(1px); }
a.celda:active { transform: scale(1.04); }
.tuit:has(.tuit-hora:focus-visible) { background: color-mix(in srgb, var(--azul-suave) 60%, transparent); }

/* ------------------------------------------------------------ ronda 2 */
.como-hoy .tuits { border-color: color-mix(in srgb, var(--azul) 35%, var(--linea)); }
.como-hoy .tuit-fecha { font-weight: 700; }
.dias-activos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dias-activos a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .6rem 1rem; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 600; }
.dias-activos a:hover { border-color: var(--azul); color: var(--azul); }
.da-n { font: 600 .82rem/1 var(--mono); color: var(--azul); font-variant-numeric: tabular-nums; }
.atajos { margin: .9rem 0 0; font: 500 .72rem/1.4 var(--mono); color: var(--tenue); text-align: center; }
@media (hover: none), (max-width: 40rem) { .atajos { display: none; } }

/* ============================================================ ronda 3: sistema visual y acabado */
:root {
  --esp-1: .25rem; --esp-2: .5rem; --esp-3: .75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem; --esp-8: 4rem; --esp-9: 6rem;
  --t-s: .9375rem; --t-m: 1.0625rem; --t-l: 1.25rem; --t-xl: 1.5rem;
  accent-color: var(--azul);
  scrollbar-color: color-mix(in srgb, var(--azul) 60%, var(--tenue)) var(--fondo);
}
a, button { -webkit-tap-highlight-color: color-mix(in srgb, var(--azul) 20%, transparent); }

/* portada: ficha de archivo en vez de panel de cifras */
.heroe { background-image: none; padding-block: var(--esp-8) var(--esp-7); }
.heroe-titulo { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--tinta); }
.cifras > div { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--linea); padding: var(--esp-4) 0; }
.cifras > div:nth-child(odd) { padding-right: var(--esp-4); border-right: 1px solid var(--linea); }
.cifras > div:nth-child(even) { padding-left: var(--esp-4); }
.cifras dt { font: 500 .8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.cifras dd { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* tuits: rótulos legibles, enlaces sobrios, cajas planas */
.tuit-tipo { font-size: var(--t-s); }
.tuit-texto a[href^="http"]:not([href*="twitter.com/"]), .tuit-grande-texto a[href^="http"]:not([href*="twitter.com/"]) { font: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--azul) 45%, transparent); overflow-wrap: anywhere; }
.tuit-texto a:hover, .tuit-grande-texto a:hover { text-decoration-color: currentColor; }
.tuits { box-shadow: none; }
@media (min-width: 40.01rem) { .tuit { grid-template-columns: 4rem minmax(0, 1fr); } }
.tuit-grande { box-shadow: none; }
.tuit-grande::before { top: .05em; }
.cronologia-marco { box-shadow: none; }

/* cronología: años como objetivos cómodos, casillas algo mayores */
.cronologia tbody th a { display: flex; align-items: center; min-height: 2.75rem; }
.celda { height: 2.75rem; }
.cronologia .sin-actividad { height: 2.75rem; }

/* buscador de cabecera sin zoom en iOS */
.buscador-mini input { font-size: 1rem; }

/* menú móvil: cajón bajo la cabecera, fondo bloqueado */
@media (max-width: 46rem) {
  .navegacion { display: flex; position: fixed; inset: 4rem 0 0; top: 4rem; z-index: 29; padding: var(--esp-5) var(--esp-5) calc(var(--esp-7) + env(safe-area-inset-bottom)); border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .navegacion.abierto { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
  .navegacion .menu a { font-size: var(--t-l); font-weight: 600; min-height: 52px; padding-inline: var(--esp-2); border-radius: 12px; }
}
@media (max-width: 40rem) {
  .heroe { padding-block: var(--esp-7) var(--esp-6); }
  .cronologia { border-spacing: 2px; }
  .cronologia thead th:first-child, .cronologia tbody th { width: 2.7rem; }
  .cronologia tbody th a { min-height: 1.9rem; }
  .celda { height: 1.9rem; }
  .cronologia .sin-actividad { height: 1.9rem; }
  .tuit-texto, .tuit-grande-texto p { hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) { .navegacion { transition: none !important; } }
.listado-cuenta { font-size: var(--t-s); }
.tuit-grande .tuit-tipo { font-size: var(--t-s); }
@media (max-width: 46rem) { .cabecera { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--fondo); } }

/* ============================================================ ronda 4: portada con ritmo */
:root { --noche: #0f172a; --noche-texto: #e6ebf5; --noche-tenue: #9fb0cc; }
@media (prefers-color-scheme: dark) { :root { --noche: #050913; } }

/* cabecera con contador */
.p-heroe { padding-block: var(--esp-8) var(--esp-7); border-bottom: 1px solid var(--linea); }
.p-heroe-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--esp-7); align-items: end; }
.p-heroe .heroe-titulo { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
.p-atajos { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-5) 0 0; }
.p-atajos a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-4); border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font: 500 .9375rem/1 var(--sans); transition: border-color .15s ease, color .15s ease; }
.p-atajos a:hover { border-color: var(--azul); color: var(--azul); }
.contador { margin: 0; text-align: right; }
.contador-n { display: block; font: 800 clamp(5rem, 13vw, 11.5rem)/.82 var(--sans); letter-spacing: -.065em; color: var(--azul); font-variant-numeric: tabular-nums; }
.contador-t { display: block; margin-top: var(--esp-4); font: 500 .9375rem/1.45 var(--mono); color: var(--tenue); text-wrap: balance; }

/* primer y último tuit */
.extremos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-5); margin-top: var(--esp-8); }
.extremo { position: relative; display: flex; flex-direction: column; gap: var(--esp-4); padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 26px; background: var(--superficie); border: 1px solid var(--linea); overflow: hidden; }
.extremo::before { content: "\201C"; position: absolute; right: var(--esp-5); top: -.12em; font: 800 9rem/1 var(--sans); color: var(--azul-suave); pointer-events: none; }
.extremo-ultimo { background: var(--noche); border-color: var(--noche); color: var(--noche-texto); }
.extremo-ultimo::before { color: rgba(138, 171, 255, .18); }
.extremo-rotulo { position: relative; margin: 0; font: 600 .8125rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.extremo-ultimo .extremo-rotulo { color: #8aabff; }
.extremo-texto { position: relative; margin: 0; font: 500 clamp(1.45rem, 2.6vw, 2.15rem)/1.3 var(--sans); letter-spacing: -.02em; text-wrap: pretty; overflow-wrap: anywhere; }
.extremo-texto p { margin: 0; }
.extremo-texto a { color: var(--azul); text-decoration: none; }
.extremo-ultimo .extremo-texto a { color: #8aabff; }
.extremo-pie { position: relative; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); font: 500 .9375rem/1.4 var(--mono); color: var(--tenue); }
.extremo-ultimo .extremo-pie { color: var(--noche-tenue); }
.extremo-pie a { color: inherit; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.extremo-pie a:hover { color: var(--azul); }

/* banda de cifras */
.banda-cifras { margin-top: var(--esp-8); padding-block: var(--esp-8); background: var(--noche); color: var(--noche-texto); }
.banda-titulo { margin: 0 0 var(--esp-6); font: 750 clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--sans); letter-spacing: -.025em; color: #fff; }
.cifras-banda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.cifras-banda > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-5) var(--esp-5) var(--esp-5) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cifras-banda dt { font: 500 .875rem/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--noche-tenue); }
.cifras-banda dd { margin: 0; display: flex; flex-direction: column; font: 800 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--sans); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.cifras-banda dd a { color: #fff; text-decoration: none; }
.cifras-banda dd a:hover { color: #8aabff; }
.cifras-banda small { margin-top: var(--esp-2); font: 500 .9375rem/1.3 var(--mono); letter-spacing: 0; color: #c9d6f2; text-transform: none; }
.cifra-unidad { font-size: .45em; margin-left: .1em; color: var(--noche-tenue); }
.cifras-banda dd:has(.cifra-unidad) { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
.cifras-banda dd:has(.cifra-unidad) small { flex-basis: 100%; }

/* ritmo: horas y días */
.ritmo-rejilla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--esp-5); }
.grafico { margin: 0; padding: var(--esp-5); border-radius: 20px; background: var(--superficie); border: 1px solid var(--linea); }
.grafico figcaption { margin-bottom: var(--esp-4); font: 600 .875rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.barras-horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 11rem; border-bottom: 1px solid var(--linea); }
.barras-horas li { height: max(2px, calc(var(--v) * 100%)); border-radius: 4px 4px 0 0; background: var(--calor-2); transition: background-color .15s ease; }
.barras-horas li.punta { background: var(--azul); }
.barras-horas li:hover { background: var(--calor-4); }
.eje { display: flex; justify-content: space-between; margin: var(--esp-2) 0 0; font: 500 .8125rem/1 var(--mono); color: var(--tenue); }
.barras-semana { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.barras-semana li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--esp-3); }
.bs-dia { font: 600 .9375rem/1 var(--mono); text-transform: capitalize; }
.bs-dia abbr { text-decoration: none; }
.bs-barra { height: .9rem; border-radius: 99px; background: var(--calor-0); overflow: hidden; }
.bs-barra i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 99px; background: var(--azul); }
.bs-n { text-align: right; font: 500 .9375rem/1 var(--mono); color: var(--tenue); font-variant-numeric: tabular-nums; }

/* año a año */
.anios-fichas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: var(--esp-3); }
.anios-fichas a { display: flex; flex-direction: column; gap: var(--esp-1); height: 100%; padding: var(--esp-5) var(--esp-5) var(--esp-4); border-radius: 18px; background: var(--superficie); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.anios-fichas a:hover { border-color: var(--azul); transform: translateY(-2px); }
.af-anio { font: 800 2.4rem/1 var(--sans); letter-spacing: -.04em; }
.af-total { margin-bottom: var(--esp-2); font: 600 .9375rem/1.3 var(--mono); color: var(--azul); }
.af-dato { font-size: .9375rem; color: var(--tenue); }
.af-barra { display: block; margin-top: auto; padding-top: var(--esp-4); }
.af-barra i { display: block; height: 6px; width: max(4px, calc(var(--v) * 100%)); border-radius: 3px; background: var(--azul); }

/* conversaciones y temas */
.conv-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-7); }
.seccion-sub-grande { margin: 0; font: 750 clamp(1.5rem, 3vw, 2rem)/1.15 var(--sans); letter-spacing: -.025em; }
.seccion-nota { margin: var(--esp-2) 0 var(--esp-5); color: var(--tenue); }
.ranking { list-style: none; margin: 0 0 var(--esp-4); padding: 0; counter-reset: r; }
.ranking li { counter-increment: r; border-bottom: 1px solid var(--linea); }
.ranking a { display: grid; grid-template-columns: 1.8rem minmax(0, 1.2fr) minmax(0, 1fr) 3rem; align-items: center; gap: var(--esp-3); min-height: 48px; color: var(--tinta); text-decoration: none; }
.ranking a::before { content: counter(r); font: 500 .875rem/1 var(--mono); color: var(--tenue); }
.r-nombre { font-weight: 600; overflow-wrap: anywhere; }
.r-nombre span { color: var(--azul); }
.r-barra { height: .55rem; border-radius: 99px; background: var(--calor-0); overflow: hidden; }
.r-barra i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 99px; background: var(--azul); }
.r-n { text-align: right; font: 600 .9375rem/1 var(--mono); color: var(--azul); font-variant-numeric: tabular-nums; }
.ranking a:hover .r-nombre { color: var(--azul); }

/* un día como hoy: tarjetas */
.tarjetas-tuit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); }
.tarjeta-tuit { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-5); border-radius: 20px; background: var(--superficie); border: 1px solid var(--linea); }
.tt-fecha { margin: 0; font: 600 .875rem/1.3 var(--mono); }
.tt-fecha a { color: var(--azul); text-decoration: none; }
.tt-fecha a:hover { text-decoration: underline; text-underline-offset: .25em; }
.tt-texto { font-size: 1.05rem; }

/* pie con marca */
.pie-nombre { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }

@media (max-width: 60rem) {
  .p-heroe-rejilla, .extremos, .ritmo-rejilla, .conv-rejilla { grid-template-columns: minmax(0, 1fr); }
  .contador { text-align: left; }
  .cifras-banda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarjetas-tuit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .p-heroe { padding-block: var(--esp-7) var(--esp-6); }
  .contador-n { font-size: clamp(4.5rem, 24vw, 6rem); }
  .extremos { margin-top: var(--esp-7); }
  .banda-cifras { margin-top: var(--esp-7); padding-block: var(--esp-7); }
  .cifras-banda > div { padding-right: var(--esp-3); }
  .cifras-banda dd { font-size: 2.2rem; }
  .barras-horas { height: 8rem; gap: 2px; }
  .tarjetas-tuit { grid-template-columns: minmax(0, 1fr); }
  .ranking a { grid-template-columns: 1.5rem minmax(0, 1.3fr) minmax(0, .8fr) 2.6rem; gap: var(--esp-2); }
}
.cifras-banda small { overflow-wrap: anywhere; }
@media (max-width: 40rem) { .anios-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .af-anio { font-size: 1.9rem; } .anios-fichas a { padding: var(--esp-4); } }
.af-dato { overflow-wrap: anywhere; }