/* Fulana News — componentes (estilo de referencia: Polymarket — bordes uniformes, sombra suave, pills de color) */

/* ---------- Fuentes propias (bloque 14 del plan de desarrollo) ----------
   Antes cargaban desde fonts.googleapis.com/fonts.gstatic.com (ver header.php): dos
   dominios de terceros, con su propio DNS+TLS, en el camino crítico antes de poder
   pintar texto. Self-host lo saca de la ecuación entera.

   Solo los subsets latin/latin-ext: el sitio es 100% español de Argentina, así que
   los otros 6 subsets que sirve Google (cyrillic, greek, vietnamese, etc.) no cubren
   ni un carácter real del contenido — bajarlos igual sería puro peso muerto.

   Los cuatro pesos de Inter (400/500/600/700) van en un solo @font-face con
   `font-weight: 400 700`: Google los sirve como CUATRO declaraciones que apuntan al
   MISMO archivo (es una fuente variable, expuesta como "estática" cuatro veces solo
   por compatibilidad hacia atrás) — confirmado bajando el CSS real de Google y
   comparando las URLs byte a byte, 2026-07-26. Un solo archivo declarado como rango
   de peso es lo mismo que sirve Google, sin la duplicación cosmética.

   Urbanist va aparte: la usan los isologos de marca (Fulana-News.svg y hermanos, SVG
   inline vía inline_logo()) con `font-family: Urbanist-BlackItalic, Urbanist` — un
   solo peso/estilo (800 italic), nunca se usa en texto normal del sitio. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Urbanist';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/urbanist-800italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Urbanist';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/urbanist-800italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Article card ---------- */
.card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  will-change: transform;
  transition: transform var(--duration-standard) ease-out,
    box-shadow var(--duration-standard) ease-out,
    border-color var(--duration-standard) ease-out;
}

.card:hover,
.card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--categoria-color, var(--color-accent));
}

.card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-2);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--categoria-color, var(--color-accent)) 12%, var(--color-surface-2)), var(--color-surface-2));
}
.card-media-placeholder img { width: 32px; height: 32px; object-fit: contain; opacity: 0.8; }

.card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }

.card-title {
  font-size: var(--text-headline);
  line-height: var(--lh-headline);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-title a { position: static; }

.card-excerpt {
  color: var(--color-ink-muted);
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
  flex: 1;
}

/* Meta sin "eyebrow": pill de categoría + fecha en una sola línea, debajo del título */
.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-footnote);
  line-height: var(--lh-footnote);
  color: var(--color-ink-muted);
}
.categoria-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  font-weight: 600;
  background: color-mix(in srgb, var(--categoria-color, var(--color-accent)) 14%, transparent);
  color: var(--categoria-color, var(--color-accent));
}
.card-meta .dot { opacity: 0.5; }

/* Card destacada: usada suelta (ej. "Seguir leyendo") con una imagen de
   altura acotada normal — nada de flex:1 acá, porque sin un contenedor con
   altura fija (como el grid de 2 filas del home) el navegador no tiene de
   dónde sacar esa altura y termina usando el tamaño intrínseco de la imagen
   (pixelada, gigante, tapando todo). */
.card-featured .card-title {
  font-size: var(--text-title1);
  line-height: var(--lh-title1);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
.card-featured .card-excerpt { font-size: var(--text-body); line-height: var(--lh-body); flex: 0 0 auto; }
.card-featured .card-media { aspect-ratio: 16 / 9; max-height: 440px; }
.card-featured .card-body { padding: var(--space-5); gap: var(--space-3); flex: 0 0 auto; }

/* ---------- Carrusel "Breaking News" (mobile, rediseño v2) ----------
   En ≤767px .hero-grid (y, desde el pedido de "repetir el patrón en el
   home", cada 2da sección .article-grid--carousel — ver index.php) pasan a
   carrusel horizontal (ver layout.css) y CADA slide (destacada incluida)
   usa el mismo tratamiento "imagen de fondo + texto encima" en vez del
   formato editorial de desktop (imagen arriba, cuerpo blanco abajo). Esta
   regla tiene que ir DESPUÉS de las de arriba (misma especificidad, 3
   clases) para ganarles en la cascada — si no, el min-height:280px/flex:1/
   order pensados para el hero de 2 filas de desktop se lo comen entero. */
@media (max-width: 767px) {
  .hero-grid .card,
  .article-grid--carousel > .card {
    position: relative;
    aspect-ratio: 3 / 4;
    border: none;
  }
  .hero-grid .card .card-media,
  .article-grid--carousel > .card .card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    flex: none;
    order: unset;
  }
  .hero-grid .card .card-media::after,
  .article-grid--carousel > .card .card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.8) 100%);
  }
  .hero-grid .card .card-body,
  .article-grid--carousel > .card .card-body {
    position: relative;
    z-index: 1;
    order: unset;
    /* .card-body base trae flex:1 (crece para llenar el alto de la card) —
       correcto para el grid normal, pero acá con .card-media absoluto de
       fondo, ese flex:1 le gana el espacio a margin-top:auto antes de que
       pueda empujar nada: el body terminaba ocupando el 100% del alto de la
       card y el texto quedaba arriba, no abajo. La destacada no tenía este
       bug porque .card-featured .card-body ya pisaba flex:1 con
       flex:0 0 auto — acá se hace lo mismo para el resto de las slides. */
    flex: 0 0 auto;
    margin-top: auto;
    padding: var(--space-4);
    gap: var(--space-2);
  }
  .hero-grid .card .card-title,
  .hero-grid .card .card-meta,
  .hero-grid .card .card-meta .dot,
  .hero-grid .card .card-meta time,
  .article-grid--carousel > .card .card-title,
  .article-grid--carousel > .card .card-meta,
  .article-grid--carousel > .card .card-meta .dot,
  .article-grid--carousel > .card .card-meta time {
    color: #fff;
  }
  .hero-grid .card .card-excerpt,
  .article-grid--carousel > .card .card-excerpt {
    display: none;
  }
  .hero-grid .card,
  .article-grid--carousel > .card {
    /* El primer slide a veces queda con la imagen invisible hasta que el
       usuario empieza a hacer swipe. La combinación de .reveal (opacity:0 +
       translateY del IntersectionObserver) con .card-media position:absolute
       en WebKit/iOS hace que la capa compuesta no se repinte correctamente
       hasta el primer scroll/touch. Sacamos la animación de entrada en las
       cards del carrusel hero: ya están en viewport inicial y el efecto no
       aporta; además fuerzamos will-change:auto explícito. */
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  .hero-grid .card .card-media,
  .article-grid--carousel > .card .card-media {
    /* Resguardo extra para el bug de composición: una capa de composición
       bien definida sin transform heredada de .reveal. */
    will-change: auto;
    transform: translateZ(0);
  }
  .hero-grid .card .card-title,
  .article-grid--carousel > .card .card-title {
    font-size: var(--text-title3);
    line-height: var(--lh-title3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* La destacada sigue siendo la más grande del carrusel, solo en tipografía
     (todas las slides miden lo mismo — ver flex:0 0 86% en layout.css). */
  .hero-grid .card-featured .card-title {
    font-size: var(--text-title2);
    line-height: var(--lh-title2);
  }
  /* Hero Compactas en el carrusel: la variante .card-compact es una fila horizontal
     (thumb 96px + título) pensada para desktop; acá el thumb es el fondo absoluto de
     la slide, así que la card vuelve a columna y el cuerpo se limita al ancho de la
     card — sin esto el título se desbordaba fuera de la slide (bugs mobile). */
  .hero-grid .card-compact { flex-direction: column; }
  .hero-grid .card-compact .card-body { width: 100%; min-width: 0; }
}

/* Card compacta: fila horizontal (thumb + título), para hero secundario y listas */
.card-compact { flex-direction: row; align-items: stretch; }
.card-compact .card-media {
  aspect-ratio: 1 / 1;
  width: 96px;
  flex-shrink: 0;
}
.card-compact .card-body { padding: var(--space-3); justify-content: center; gap: var(--space-1); }
.card-compact .card-title {
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-compact .card-media-placeholder img { width: 24px; height: 24px; }

/* Card fila ancha: para la segunda tanda de una categoría (article-list-grid),
   thumb más grande que la compacta y con bajada visible. */
.card-row { flex-direction: row; align-items: stretch; }
.card-row .card-media { width: 220px; aspect-ratio: 4 / 3; flex-shrink: 0; }
.card-row .card-body { justify-content: center; }
.card-row .card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 479px) {
  .card-row { flex-direction: column; }
  .card-row .card-media { width: 100%; aspect-ratio: 16 / 10; }
}

/* ---------- Ad slot (placeholder de espacio publicitario) ----------
   Genérico y discreto a propósito: cuando haya un ad real, este bloque se
   reemplaza por el snippet del proveedor sin tocar el layout que lo rodea.
   Dos formas de fijar tamaño conviven a propósito: el mega menú (JS, ver
   renderAdSlot() en mega-menu.js) sigue mandando width/height inline; el
   resto del sitio (PHP, ver ad_slot() en bootstrap.php) usa los modificadores
   de acá (--leaderboard/--rectangulo/--skyscraper), que sí responden a estos
   media queries — así el tamaño IAB se puede achicar en mobile sin tocar PHP. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  text-align: center;
  flex-shrink: 0;
}
.ad-slot-label { opacity: 0.8; }

/* El leaderboard cambia de tamaño real por breakpoint — el texto del
   cartel tiene que cambiar con él (ver ad_slot() en bootstrap.php), si no
   queda un cartel de 320×50 que dice "728×90" arriba. */
.ad-slot-size-mobile { display: none; }
@media (max-width: 767px) {
  .ad-slot-size-desktop { display: none; }
  .ad-slot-size-mobile { display: inline; }
}

.ad-slot--leaderboard { width: 728px; height: 90px; max-width: 100%; margin-block: var(--space-6); }
.ad-slot--rectangulo { width: 300px; height: 250px; margin-block: var(--space-5); }
.ad-slot--skyscraper { width: 300px; height: 600px; }

/* Anuncio real (bloque 17): reemplaza el placeholder gris por una creatividad
   vendida. El link envuelve la imagen y el JS (ads.js) mide la impresión
   viewable con IntersectionObserver + sendBeacon. */
.ad-slot--real { border: none; background: transparent; }
.ad-slot--real .ad-slot-label { display: none; }
.ad-slot--real .ad-slot-link {
  display: block;
  line-height: 0; /* evita gap debajo de la imagen inline */
}
.ad-slot--real .ad-slot-link img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card, 16px);
}
.ad-slot--real .ad-slot-link:hover img {
  opacity: 0.9;
}

@media (max-width: 767px) {
  .ad-slot--leaderboard { width: 320px; height: 50px; margin-block: var(--space-4); }
  /* Sin sidebar en mobile/tablet (ver layout.css .page-layout) — este
     tamaño solo tiene sentido en la columna lateral de desktop. */
  .ad-slot--skyscraper { display: none; }

  /*
    Ubicación sin campaña vendida: en mobile no se muestra el cartel gris.

    Esto ya estaba decidido y anotado (ver el comentario de las posiciones del feed
    en index.php y la nota de arquitectura en el vault), pero el CSS solo escondía el
    skyscraper: los dos rectángulos del feed del home seguían saliendo a 250px cada
    uno. Medido el 2026-08-04 en un iPhone de 390px: 500px de cajas grises que dicen
    "Espacio publicitario 300×250" en el medio del scroll de noticias. Al lector no le
    dice nada y hace ver el sitio a medio terminar.

    Solo se esconde el placeholder. `.ad-slot--real` (la creatividad vendida de
    verdad) no entra acá: eso es lo que se factura y se sigue mostrando igual.
  */
  .ad-slot:not(.ad-slot--real) { display: none; }
}

/* ---------- Aviso de lectura con bloqueador activo ----------
   Nombrado a propósito sin "ad*" en ninguna clase: un aviso llamado
   ".adblock-banner" corre el riesgo real de que el mismo bloqueador que
   estamos avisando lo oculte a él (reglas cosméticas genéricas tipo
   [class*="ad-"] son comunes en EasyList). No es un modal: no hay backdrop,
   así que se puede seguir navegando con el aviso abierto — el wrapper tiene
   pointer-events:none y solo el card en sí es clickeable. Ver
   adblock-notice.js. */
.reader-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--space-5);
  display: flex;
  justify-content: center;
  padding-inline: var(--space-4);
  z-index: 190;
  pointer-events: none;
}
.reader-notice-card {
  pointer-events: auto;
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-6);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-standard) var(--ease-standard),
    transform var(--duration-standard) var(--ease-standard);
}
.reader-notice.is-open .reader-notice-card { opacity: 1; transform: translateY(0); }

.reader-notice-title {
  font-family: var(--font-display);
  font-size: var(--text-title1);
  line-height: var(--lh-title1);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0 0 var(--space-3);
}
.reader-notice-body {
  color: var(--color-ink-muted);
  font-size: var(--text-subhead);
  line-height: var(--lh-subhead);
  margin: 0 0 var(--space-5);
}
.reader-notice-dismiss { width: 100%; justify-content: center; }

@media (max-width: 639px) {
  .reader-notice { bottom: var(--space-3); padding-inline: var(--space-3); }
  .reader-notice-card { padding: var(--space-5); }
  .reader-notice-title { font-size: var(--text-title2); line-height: var(--lh-title2); }
}

/* La bottom-tabbar (rediseño mobile v2) vive fija abajo en todo ≤767px —
   tiene que ganarle en cascada a la regla de arriba (misma especificidad),
   por eso va después. */
@media (max-width: 767px) {
  .reader-notice { bottom: calc(var(--bottom-tabbar-space) + env(safe-area-inset-bottom)); }
}

/* ---------- Buscador (bloque 12) ---------- */
.search-heading {
  padding-top: var(--header-clearance); /* mismo aire que .section-heading cuando es lo primero de la página */
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.search-heading h1 { margin-bottom: var(--space-4); }
.search-form {
  display: flex;
  gap: var(--space-2);
  max-width: 520px;
}
.search-form input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}
.search-form input[type="search"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.search-resultado-de { margin-bottom: var(--space-4); }
.search-paginacion { margin-top: var(--space-6); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-subhead);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--color-surface-2); border-color: var(--color-ink); }

.btn-accent {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn-accent:hover { background: var(--color-accent-dim); border-color: var(--color-accent-dim); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  /* Sin esto, Safari de iOS renderiza el <button> sin appearance:none con el
     tinte azul del sistema para su contenido (el SVG usa currentColor) — se
     ve bien en Chrome/desktop (donde el default ya es negruzco) pero azul
     en un iPhone real. Los otros icon-buttons del header (mobile-drawer-close,
     mobile-nav-expand, radio-play-btn) ya seteaban color explícito; a este
     le faltaba. */
  color: var(--color-ink);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.icon-btn:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Ticker financiero ---------- */
.ticker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-footnote);
  flex: 1;
}

.ticker-track {
  display: flex;
  gap: var(--space-6);
  white-space: nowrap;
  animation: ticker-scroll 32s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ticker-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.ticker-item .label { color: var(--color-ink-muted); }
.ticker-item .value { font-weight: 600; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delta.up { color: var(--color-up); background: var(--color-up-soft); }
.delta.down { color: var(--color-down); background: var(--color-down-soft); }
.delta svg { width: 10px; height: 10px; }

.quote-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-footnote); }
.quote-row .quote-values { display: flex; align-items: center; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.quote-row .quote-values strong { font-size: var(--text-subhead); font-weight: 600; }

/* ---------- Clima v2 — estilo Apple Weather ---------- */
.weather-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.weather-chip svg { width: 16px; height: 16px; color: var(--color-accent); }

[data-weather-extended] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.weather-section-title {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

/* Header grande: icono + temp + descripción + ciudad */
.weather-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)), var(--color-surface));
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}
.weather-header-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.weather-header-icon {
  width: 48px;
  height: 48px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.weather-header-text { min-width: 0; }
.weather-temp {
  font-size: var(--text-title1);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.weather-desc {
  font-size: var(--text-subhead);
  color: var(--color-ink-muted);
  margin-top: 2px;
}
.weather-city {
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
  margin-top: 2px;
}
.weather-fallback { opacity: 0.7; }
.weather-high-low {
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Pronóstico por hora: scroll horizontal */
.weather-hourly {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}
.weather-hourly::-webkit-scrollbar { display: none; }
.weather-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 44px;
}
.weather-hour-label {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
  font-weight: 600;
}
.weather-hour-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
}
.weather-hour-temp {
  font-size: var(--text-footnote);
  font-weight: 700;
}

/* Pronóstico 7 días con barras */
.weather-daily {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.weather-day-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-footnote);
}
.weather-day-name {
  width: 44px;
  flex-shrink: 0;
  font-weight: 600;
}
.weather-day-row-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.weather-day-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.weather-day-bar-track {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  position: relative;
}
.weather-day-bar {
  position: absolute;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent-dim), var(--color-accent));
  border-radius: var(--radius-pill);
}
.weather-day-min { color: var(--color-ink-muted); width: 28px; text-align: right; }
.weather-day-max { font-weight: 600; width: 28px; }

/* Grilla de condiciones tipo Apple Weather */
.weather-conditions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.weather-condition {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  min-height: 80px;
}
.weather-condition-label {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.weather-condition-value {
  font-size: var(--text-title3);
  line-height: var(--lh-title3);
  font-weight: 700;
  margin-top: auto;
}
.weather-condition-sub {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

/* Satélite NOAA */
.weather-satellite {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.weather-satellite img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.weather-satellite-credit {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
  padding: 2px 6px;
  background: rgb(0 0 0 / 0.35);
  border-radius: var(--radius-sm);
}

.weather-city-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}
.weather-change-link {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-caption);
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
}
.weather-change-link:hover { text-decoration: underline; }

.weather-city-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.weather-city-form input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-footnote);
  background: var(--color-surface);
  color: var(--color-ink);
}
.weather-city-form button {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-footnote);
  font-weight: 600;
  cursor: pointer;
}

.weather-retry {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-footnote);
  font-weight: 600;
  cursor: pointer;
}

/* En mobile el widget de clima del sidebar pasa a ocupar todo el ancho disponible */
@media (max-width: 767px) {
  [data-weather-extended] { gap: var(--space-5); }
  .weather-conditions { grid-template-columns: repeat(2, 1fr); }
}


.weather-city-search {
  padding: var(--space-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)), var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.weather-city-search label {
  display: block;
  font-size: var(--text-title3);
  line-height: var(--lh-title3);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.weather-city-search-row {
  display: flex;
  gap: var(--space-2);
}
.weather-city-search input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-footnote);
  background: var(--color-surface);
  color: var(--color-ink);
}
.weather-city-search button {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-footnote);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.weather-city-search button:hover { background: var(--color-accent-dim); }

/* Buscador integrado en el encabezado de la página de clima */
.weather-section-heading {
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.weather-section-heading-text { flex: 1 1 auto; min-width: 0; }
.weather-section-heading-text h1 { margin-bottom: 0; }
.weather-section-heading-text .section-lead { margin-top: var(--space-1); }
.weather-city-search--inline {
  flex: 1 1 360px;
  max-width: 420px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .weather-section-heading { flex-direction: column; gap: var(--space-4); }
  .weather-city-search--inline { flex: 1 1 auto; max-width: none; width: 100%; }
  .weather-city-search { padding: var(--space-3); }
  .weather-city-search label { font-size: var(--text-body); }
  .weather-city-search-row { flex-direction: column; }
  .weather-city-search button { width: 100%; }
}

/* ---------- Página completa de clima ---------- */

/* ---------- Página completa de clima ---------- */
.weather-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}
.weather-page-main { min-width: 0; }
.weather-page-aside { position: sticky; top: 176px; } /* +28 por la barra IA, ver .header-ia-notice */

.weather-full {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.weather-full .weather-header {
  padding: var(--space-5);
}
.weather-full .weather-temp {
  font-size: clamp(3rem, 8vw, 5rem);
}
.weather-full .weather-header-icon {
  width: 80px;
  height: 80px;
}
.weather-full .weather-hourly {
  gap: var(--space-5);
}
.weather-full .weather-hour {
  min-width: 56px;
}
.weather-full .weather-hour-icon {
  width: 28px;
  height: 28px;
}
.weather-full .weather-hour-temp {
  font-size: var(--text-subhead);
}
.weather-full .weather-conditions {
  grid-template-columns: repeat(4, 1fr);
}
.weather-full .weather-condition {
  min-height: 110px;
}
.weather-full .weather-condition-value {
  font-size: var(--text-title2);
}
.weather-full .weather-satellite img {
  aspect-ratio: 16 / 9;
}

@media (max-width: 1023px) {
  .weather-page {
    grid-template-columns: 1fr;
  }
  .weather-page-aside {
    position: static;
    order: -1;
  }
  .weather-full .weather-conditions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Reproductor de radio: mini-player flotante ----------
   Fixed en la esquina, fuera del flujo del header — vive en <header> (ver
   src/templates/header.php) para que pjax.js nunca lo reemplace y el audio
   no se corte al navegar. column-reverse: el primer hijo en el DOM
   (.mini-player-bar, la pastilla siempre visible) queda ABAJO y el panel
   expandido crece hacia arriba, para no salirse de la pantalla estando
   anclado al borde inferior. */
.mini-player {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 80;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: calc(100vw - var(--space-5) * 2);
}

.mini-player-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-2);
}

.mini-player-play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-brand-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.mini-player-play:hover { transform: scale(1.08); }
.mini-player-play svg { width: 17px; height: 17px; }

/* Botón de flecha: toda la pastilla colapsada es solo play + esta flecha,
   sin texto — el nombre de la radio/canción vive en el panel expandido
   (ver .mini-player-track), así la pastilla ocupa el mínimo espacio posible. */
.mini-player-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard);
}
.mini-player-chevron-btn:hover { background: rgb(255 255 255 / 0.12); }

.mini-player-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-standard) var(--ease-standard);
}
.is-expanded .mini-player-chevron { transform: rotate(180deg); }

.mini-player-track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  min-width: 0;
}

.mini-player-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
  min-width: 0;
  flex: 1;
}
.mini-player-title,
.mini-player-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-player-title { font-size: var(--text-footnote); font-weight: 700; }
.mini-player-subtitle { font-size: var(--text-caption); opacity: 0.75; }

/* En vez de display:none (que mataría la transición), max-height + opacity
   colapsados a 0: el panel sigue en el DOM (accesible al toggle) pero no
   ocupa espacio ni se puede clickear hasta expandir. */
.mini-player-panel {
  width: min(230px, calc(100vw - var(--space-5) * 2));
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(6px);
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  padding: 0 var(--space-4);
  transition: max-height var(--duration-standard) var(--ease-standard),
    opacity var(--duration-standard) var(--ease-standard),
    padding var(--duration-standard) var(--ease-standard),
    transform var(--duration-standard) var(--ease-standard);
}
.is-expanded .mini-player-panel {
  max-height: 200px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  padding: var(--space-4);
}

.mini-player-volume {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.mini-player-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  cursor: pointer;
}
.mini-player-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-brand-teal);
  cursor: pointer;
}
.mini-player-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--color-brand-teal);
  cursor: pointer;
}
.mini-player-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.mini-player-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: inherit;
  font-size: var(--text-footnote);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.mini-player-action:hover { background: var(--color-border); }
.mini-player-action svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Sonando en la ventana aparte (popup) o en Document PiP: se aclara que el
   audio de esta pestaña está en pausa, en vez de dejar la pastilla como si
   nada (confuso si el usuario vuelve acá y no entiende por qué no suena). */
.mini-player.is-popped-out .mini-player-subtitle::after {
  content: " · en otra ventana";
}

/* Indicador "EN VIVO": arco que pulsa, no un punto genérico */
.live-arc {
  width: 14px;
  height: 8px;
  border: 2px solid var(--color-brand-teal);
  border-top: none;
  border-radius: 0 0 10px 10px;
  flex-shrink: 0;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 0.5; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 639px) {
  .mini-player {
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: calc(100vw - var(--space-3) * 2);
  }
  .mini-player-play { width: 44px; height: 44px; }
  .mini-player-chevron-btn { width: 40px; height: 40px; }
  .mini-player-panel { width: min(220px, calc(100vw - var(--space-3) * 2)); }
}

/* ---------- Mini-player como tab de la bottom-tabbar (≤767px) ----------
   Mismo markup y mismos data-* de siempre (radio-core.js/radio-player.js no
   se tocan) — acá solo deja de ser una pastilla flotante fixed y pasa a ser
   un slot más de la bottom-tabbar (ver layout.css .bottom-tab-radio-slot).
   Tiene que ir DESPUÉS de las reglas de arriba (misma especificidad) para
   ganarles en la cascada, si no el right/bottom/max-width de la pastilla
   flotante se lo comen entero. */
@media (max-width: 767px) {
  .mini-player {
    position: static;
    right: auto;
    bottom: auto;
    max-width: none;
    gap: 0;
  }
  .mini-player-bar {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    flex-direction: column;
    gap: 2px;
    color: var(--color-ink-muted);
  }
  .mini-player.is-expanded .mini-player-bar {
    color: var(--color-brand-teal);
  }
  .mini-player-play {
    width: auto;
    height: auto;
    background: none;
    color: inherit;
  }
  .mini-player-play svg { width: 22px; height: 22px; }

  /* Botón de expandir: oculto por defecto (pausada, no hay nada útil que
     expandir) — aparece fusionado arriba de la barra, centrado sobre el
     slot de radio, apenas arranca a sonar, con una entrada animada
     (scale + opacity). El aria-label que ya setea setPlayingIcon() en
     radio-player.js ("Pausar radio en vivo" = está sonando) alcanza como
     señal, sin agregar clases ni JS nuevo. Se queda visible mientras el
     panel esté expandido aunque se pause (si no, desaparecería el botón
     para cerrarlo con el panel abierto). */
  .mini-player-chevron-btn {
    position: absolute;
    top: -26px;
    left: 50%;
    right: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    border: none;
    /* Sin box-shadow a propósito: una sombra propia dibuja un borde/aro que
       delata la unión con la barra y se lee como dos piezas separadas en
       vez de una sola — fusionado es CERO sombra acá, la sombra de todo el
       conjunto la sigue poniendo .bottom-tabbar. */
    box-shadow: none;
    color: var(--color-brand-teal);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.4);
    transition: transform var(--duration-standard) var(--ease-standard),
      opacity var(--duration-standard) var(--ease-standard);
  }
  .mini-player-chevron-btn svg { width: 16px; height: 16px; }
  .mini-player:has(.mini-player-play[aria-label="Pausar radio en vivo"]) .mini-player-chevron-btn,
  .mini-player.is-expanded .mini-player-chevron-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
  }

  /* No hace falta en mobile: la ventana aparte es un caso de escritorio
     (dejar la radio sonando en otra pestaña) — acá el audio ya sigue
     sonando aunque se navegue, el botón solo agregaba una fila más al
     panel expandido sin aportar nada. */
  .mini-player-action { display: none; }

  .mini-player-panel {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-3));
    transform: translateX(-50%) translateY(6px);
  }
  .is-expanded .mini-player-panel { transform: translateX(-50%) translateY(0); }

  /* ---------- Reproductor expandido: usa todo el ancho de la bottom-tabbar ----------
     Antes el panel expandido era una tarjetita flotante de 230px con una
     flecha diminuta (18px) apretada en la esquina del ícono — se leía mal y
     no daba lugar cómodo al volumen. Ahora, al expandir, la tabbar entera se
     convierte en el reproductor (se ocultan las otras 4 tabs y el slot de
     radio pasa a ocupar el 100% del ancho), con una flecha de cerrar de
     tamaño normal arriba a la derecha — no hace falta JS nuevo: :has()
     reacciona al mismo .is-expanded que ya togglea radio-player.js en
     .mini-player, sin tocar ese archivo. */
  .bottom-tabbar:has(.mini-player.is-expanded) .bottom-tab {
    display: none;
  }
  .bottom-tabbar:has(.mini-player.is-expanded) {
    align-items: stretch;
    /* El radio-pill (999px) de la barra colapsada, aplicado a un panel alto,
       se ve como una cápsula estirada rara — un radio moderado se lee mejor
       en un panel vertical. */
    border-radius: var(--radius-card);
  }
  .bottom-tabbar:has(.mini-player.is-expanded) .bottom-tab-radio-slot {
    flex: 1 1 100%;
  }
  /* Layout en grid, no en columna: "info" (nombre+en vivo) arriba a la
     izquierda, "close" (flecha) arriba a la derecha, "play" centrado en su
     propia fila, "volume" abajo ocupando todo el ancho — así el centro no
     queda vacío como con todo apilado en una sola columna angosta.
     .mini-player-bar y .mini-player-panel pasan a display:contents: dejan
     de ser cajas propias y sus hijos (play/chevron/track/volumen) entran
     directo como ítems del grid del padre, sin tener que tocar el HTML. */
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "info  close"
      "play  play"
      "volume volume";
    align-items: center;
    row-gap: var(--space-4);
    column-gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) 0 var(--space-1);
  }
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-bar,
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-panel {
    display: contents;
  }
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-track {
    grid-area: info;
    justify-self: start;
    align-self: start;
    margin-bottom: 0;
  }
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-chevron-btn {
    grid-area: close;
    justify-self: end;
    align-self: start;
    position: static;
    width: 32px;
    height: 32px;
    background: var(--color-surface-2);
    border: none;
    /* Reset del translateX(-50%) que usa la versión "nub" flotante (ver
       arriba) — acá ya es un ítem de grid normal, no centrado por transform. */
    transform: none;
  }
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-chevron-btn svg {
    width: 16px;
    height: 16px;
  }
  /* Play/pausa como pieza central: más grande y con fondo de marca, en vez
     del ícono pelado de la barra colapsada — se lee como el control
     principal del reproductor, no una opción más entre otras. */
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-play {
    grid-area: play;
    justify-self: center;
    width: 56px;
    height: 56px;
    background: color-mix(in srgb, var(--color-brand-teal) 14%, transparent);
    border-radius: 50%;
    color: var(--color-brand-teal);
  }
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-play svg { width: 24px; height: 24px; }
  /* Volumen oculto en mobile: iOS y la mayoría de Android ignoran
     audio.volume — solo funciona el volumen físico del dispositivo. No
     tiene sentido mostrar un control sin efecto. */
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-volume {
    display: none;
  }
  /* El panel expandido, sin control de volumen, solo muestra info + play +
     cerrar. Bajamos un poco el max-height para que no quede excesivo aire. */
  .bottom-tabbar:has(.mini-player.is-expanded) .mini-player-panel {
    max-height: 120px;
  }
}

/* ---------- Toggle de tema ---------- */
.theme-toggle svg { transition: opacity var(--duration-fast) var(--ease-standard); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-flex; }

/* ---------- Sidebar widgets ---------- */
.widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
}
/* Ojo: selector de hijo directo, no descendiente — un widget puede tener
   cards adentro (ej. "Más de X") cuyo título también es un <h3>; con ">"
   esta regla no las toca. Con el selector descendiente de antes, los
   títulos de esas cards heredaban las mayúsculas/tamaño de este heading. */
.widget > h3 {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
}

.trending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.trending-list li { display: flex; gap: var(--space-2); align-items: baseline; }
.trending-list .rank { font-weight: 700; color: var(--color-accent); font-size: var(--text-footnote); line-height: 1; min-width: 1em; }
.trending-list a {
  font-size: var(--text-footnote);
  line-height: var(--lh-footnote);
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-standard);
}
.trending-list a:hover { color: var(--color-accent); }

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.reveal { opacity: 1; transform: none; }
.js-enhanced .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-reveal) ease-out, transform var(--duration-reveal) ease-out;
}
.js-enhanced .reveal.is-visible { opacity: 1; transform: none; }

/* ============ Fulana Finances ============ */
.fin-hero {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-finances) 9%, var(--color-surface)), var(--color-surface));
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--header-clearance) var(--space-4); /* aire mínimo respecto del header sticky, ver .section-heading */
}
.fin-logo { margin-bottom: var(--space-2); }
.fin-logo svg { height: 40px; }
.fin-subtitle { color: var(--color-ink-muted); margin-bottom: var(--space-4); }

.fin-ticker {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
  -webkit-overflow-scrolling: touch;
}
.fin-ticker-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  min-width: 130px;
}
.fin-ticker-name { font-size: var(--text-caption); color: var(--color-ink-muted); }
.fin-ticker-value { font-weight: 700; font-size: var(--text-headline); }

.fin-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
}
.fin-nav {
  position: sticky;
  top: 124px; /* +28 por la barra IA, ver .header-ia-notice */
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.fin-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-subhead);
  font-weight: 500;
  color: var(--color-ink-muted);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.fin-nav a:hover { background: var(--color-surface-2); color: var(--color-ink); }

.fin-block { margin-bottom: var(--space-7); scroll-margin-top: 118px; } /* +28 por la barra IA, ver .header-ia-notice */
.fin-block > h2 {
  font-size: var(--text-title3);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.fin-indices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.fin-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fin-table-wrap h3 {
  font-size: var(--text-subhead);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

/* Tabla de mercado */
.market-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.market-table thead th {
  text-align: right;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-muted);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.market-table thead th:first-child { text-align: left; }
.market-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  font-size: var(--text-subhead);
}
.market-table tbody tr:last-child td { border-bottom: none; }
.market-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.market-table tbody tr:hover { background: var(--color-surface-2); }
.ma-name { text-align: left !important; font-weight: 500; padding: 0 !important; }
.ma-name a { display: block; padding: var(--space-3) var(--space-4); }
.ma-name a:hover .ma-symbol { background: var(--color-finances); color: #fff; }
.ma-symbol {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--color-surface-2);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  font-weight: 600;
}
.ma-price { font-weight: 600; }
.ma-cur { color: var(--color-ink-muted); font-weight: 400; font-size: var(--text-caption); }

/* Conversor */
.converter {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.converter-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto 1.4fr;
  gap: var(--space-3);
  align-items: end;
}
.converter-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.converter-field label { font-size: var(--text-caption); color: var(--color-ink-muted); font-weight: 600; }
.converter-field input,
.converter-field select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-subhead);
}
.converter-field input:focus,
.converter-field select:focus { outline: none; border-color: var(--color-accent); }
.converter-swap { align-self: end; margin-bottom: 2px; }
.converter-result {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.converter-result [data-converter-result] {
  display: block;
  font-size: var(--text-title2);
  line-height: var(--lh-title2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.converter-result small { color: var(--color-ink-muted); }

@media (max-width: 1023px) {
  .fin-layout { grid-template-columns: 1fr; }
  .fin-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
  }
  .fin-nav a { white-space: nowrap; }
}
@media (max-width: 639px) {
  .converter-row { grid-template-columns: 1fr; }
  .converter-swap { justify-self: center; transform: rotate(90deg); }
}

/* ============ Página de activo (activo.php) ============ */
.asset-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-finances) 9%, var(--color-surface)), var(--color-surface));
  border-bottom: 1px solid var(--color-border);
  padding: var(--header-clearance) 0 var(--space-5);
}
.asset-header .container { display: flex; flex-direction: column; gap: var(--space-3); }
.asset-back { font-size: var(--text-footnote); color: var(--color-ink-muted); font-weight: 600; }
.asset-back:hover { color: var(--color-finances); }
.asset-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.asset-title-row h1 { margin: var(--space-2) 0 0; display: flex; align-items: baseline; gap: var(--space-2); }
.asset-symbol { font-size: var(--text-subhead); color: var(--color-ink-muted); font-weight: 600; }
.asset-price-block { display: flex; align-items: baseline; gap: var(--space-3); }
.asset-price { font-size: var(--text-title1); font-weight: 700; font-variant-numeric: tabular-nums; }
.asset-price small { font-size: var(--text-subhead); color: var(--color-ink-muted); font-weight: 400; }

.asset-layout { padding-block: var(--space-6); }
.asset-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-7);
}
.tradingview-widget-container { height: 520px; }
.tradingview-widget-container__widget { height: 100%; }

.asset-news h2 { margin-bottom: var(--space-5); }

/* ============ Touch targets mobile/tablet (Apple HIG, mínimo 44×44pt) ============
   Va al final del archivo a propósito: .icon-btn y .mobile-nav-expand tienen su
   tamaño base más arriba en este mismo archivo, y .mobile-drawer-close en
   layout.css (que carga antes que este) — con la misma especificidad, el último
   declarado gana, así que cualquier override tiene que quedar después de todos. */
@media (max-width: 1023px) {
  .icon-btn,
  .nav-hamburger,
  .mobile-drawer-close,
  .mobile-nav-expand {
    width: 44px;
    height: 44px;
  }
  .icon-btn svg,
  .nav-hamburger svg,
  .mobile-drawer-close svg {
    width: 20px;
    height: 20px;
  }
}

/* ── Live scoreboard: partidos en vivo (2026-09-18) ─────────────────────────
   Bloque de tarjetas con los partidos que ESPN reporta en juego. Se usa entero
   en la sección Deporte y en versión de una sola tarjeta como destacado del
   home (`.live-board--compacto`). El punto rojo late para señalar que es en
   vivo; con prefers-reduced-motion queda fijo. */
.live-board {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  overflow: hidden;
}

.live-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.live-board-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-headline);
  font-weight: 600;
  color: var(--color-ink);
}

.live-board-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-news);
  box-shadow: 0 0 0 4px rgb(211 26 43 / 0.14);
  animation: live-board-pulse 1.6s ease-in-out infinite;
}

@keyframes live-board-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-board-dot {
    animation: none;
  }
}

.live-board-count {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.live-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--color-border);
}

.live-board-vacio {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: var(--text-footnote);
}

.live-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  /* Alto mínimo para que el reloj quede a la misma altura en todas las tarjetas
     de una misma fila, aunque una tenga una línea de nombres más que otra. */
  min-height: 150px;
}

.live-card-league {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-sports);
}

.live-card-sport {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.live-card-liga {
  color: var(--color-ink-muted);
  font-weight: 500;
}

.live-card-stats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.live-card-stat-label {
  color: var(--color-ink);
  font-weight: 500;
}

.live-card-teams {
  display: grid;
  /* Por defecto los competidores van uno DEBAJO del otro: es el caso del tenis, el
     golf y el automovilismo, donde los nombres son largos (y en dobles son dos
     apellidos juntos). Uno por línea y con todo el ancho entra sin apilarse. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: var(--text-callout);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
}

/* Fútbol, básquet, hockey: visitante — marcador — local, los tres en la misma línea. */
.live-card-teams--con-marcador {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
}

/* Un solo sujeto (torneo, carrera, partido sin competidores cargados). */
.live-card-teams--simple {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
}

/* Escalón de tipografía según el nombre más largo del partido (la clase la pone el
   PHP al renderizar y el JS al refrescar): así un nombre largo se lee igual de bien
   que uno corto, sin romper la tarjeta ni salirse del alto. */
.live-card--nombre-medio .live-card-teams {
  font-size: var(--text-subhead);
}

.live-card--nombre-largo .live-card-teams {
  font-size: var(--text-footnote);
}

.live-card--nombre-muy-largo .live-card-teams {
  font-size: 12px;
}

.live-card-team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* El equipo local va alineado a la derecha: el nombre primero y el escudo después
   (por eso la fila se invierte — el escudo sigue primero en el HTML). */
.live-card-team--local {
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}

/* En el caso de un competidor por línea, los dos quedan alineados a la izquierda. */
.live-card-teams--sin-marcador .live-card-team--local,
.live-card-teams--simple .live-card-team--local {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}

.live-card-team-nombre {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.live-card-team--local .live-card-team-nombre {
  text-align: right;
}

.live-card-teams--sin-marcador .live-card-team--local .live-card-team-nombre,
.live-card-teams--simple .live-card-team--local .live-card-team-nombre {
  text-align: left;
}

.live-card-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: none;
}

.live-card-score {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--color-surface-2);
  font-size: var(--text-headline);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.live-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  /* `margin-top: auto` empuja el reloj al pie de la tarjeta: en una misma fila del
     tablero todos los relojes quedan a la misma altura. */
  margin: auto 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.live-card-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.live-card-clock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-news);
  flex: none;
}

.live-card-link {
  color: var(--color-link);
  font-weight: 500;
}

.live-board--compacto .live-board-grid {
  grid-template-columns: 1fr;
}

.live-board-credito {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
  text-align: right;
}

/* ── Posiciones (standings) — acordeón cerrado por defecto ────────────────── */
.standings {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  overflow: hidden;
}

.standings-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

.standings-summary::-webkit-details-marker {
  display: none;
}

.standings-summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-ink-muted);
  border-bottom: 2px solid var(--color-ink-muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
  margin-left: var(--space-2);
  flex: none;
}

.standings[open] .standings-summary::after {
  transform: rotate(-135deg);
}

.standings[open] .standings-summary {
  border-bottom: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  .standings-summary::after {
    transition: none;
  }
}

.standings-title {
  margin: 0;
  font-size: var(--text-headline);
  font-weight: 600;
  color: var(--color-ink);
}

.standings-sub {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-footnote);
}

.standings-table th,
.standings-table td {
  padding: 8px var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

.standings-table thead th {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.standings-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--color-ink);
}

.standings-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.standings-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: none;
}

.standings-table tbody tr:last-child th,
.standings-table tbody tr:last-child td {
  border-bottom: 0;
}

.standings-table tbody tr:nth-child(-n+4) td:first-child {
  color: var(--color-up);
  font-weight: 600;
}

@media (max-width: 767px) {
  .live-board {
    margin-bottom: var(--space-5);
    border-radius: 12px;
  }

  .live-board-grid {
    grid-template-columns: 1fr;
  }

  .standings-table th,
  .standings-table td {
    padding: 7px 6px;
  }

  /* En mobile la tabla entra sin scroll: se ocultan G, E y P (quedan PJ, DIF y Pts). */
  .standings-table tr > *:nth-child(4),
  .standings-table tr > *:nth-child(5),
  .standings-table tr > *:nth-child(6) {
    display: none;
  }
}

/* ── Centro deportivo (sección Deporte) — 2026-09-18 ───────────────────────────
   La sección Deporte pasó de listado plano a centro deportivo: en vivo arriba,
   navegación por deporte y una sección por deporte con sus noticias, sus tablas
   (posiciones, rankings de tenis, campeonatos de F1, leaderboard de golf) y sus
   próximos partidos. Todo el bloque se apoya en los tokens de tokens.css.
   Ojo: las secciones llevan ancla (#deporte-tenis), así que el scroll-margin-top
   tiene que despejar el header sticky — ver --header-clearance y las 7 medidas
   calibradas que la acompañan. */

.deporte-nav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

/* Los chips son anclas a cada deporte: el desplazamiento se anima, salvo que el
   lector haya pedido menos movimiento en el sistema. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.deporte-nav::-webkit-scrollbar {
  display: none;
}

.deporte-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.deporte-chip:hover,
.deporte-chip:focus-visible {
  border-color: var(--color-sports);
  color: var(--color-sports);
}

.deporte-chip--vivo {
  border-color: rgb(211 26 43 / 0.35);
}

.deporte-chip-vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-news);
}

.deporte-chip-vivo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-news);
}

.deporte-seccion {
  /* El ancla llega justo debajo del header sticky. */
  scroll-margin-top: calc(var(--header-clearance) + var(--space-5));
  margin-bottom: var(--space-8);
}

.deporte-seccion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 2px solid var(--color-sports);
}

.deporte-seccion-titulo {
  margin: 0;
  font-size: var(--text-title3);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.deporte-seccion-link {
  flex: none;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-sports);
  text-decoration: none;
}

.deporte-seccion-link:hover,
.deporte-seccion-link:focus-visible {
  text-decoration: underline;
}

.deporte-envivo {
  margin-bottom: var(--space-5);
}

.deporte-vacio {
  margin: 0 0 var(--space-5);
  font-size: var(--text-subhead);
  color: var(--color-ink-muted);
}

.deporte-datos {
  margin-top: var(--space-6);
}

.deporte-bloque {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.deporte-bloque-titulo {
  margin: 0 0 var(--space-1);
  font-size: var(--text-headline);
  font-weight: 600;
  color: var(--color-ink);
}

.deporte-bloque-sub {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.deporte-tabla-scroll {
  overflow-x: auto;
}

.deporte-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-footnote);
}

.deporte-tabla th,
.deporte-tabla td {
  padding: 7px var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.deporte-tabla thead th {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.deporte-tabla tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--color-ink);
}

.deporte-tabla tbody tr:last-child th,
.deporte-tabla tbody tr:last-child td {
  border-bottom: 0;
}

.deporte-tabla-pos {
  width: 2.2em;
  color: var(--color-ink-muted);
}

.deporte-tabla-equipo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deporte-tabla-logo {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}

/* Acordeón de tabla completa: reusa el componente .standings pero sin borde propio,
   porque ya vive dentro de la tarjeta .deporte-bloque. */
.standings--deporte {
  margin: var(--space-2) 0 0;
  border: 0;
  border-radius: 0;
  background: var(--color-surface-2);
}

.standings--deporte .standings-summary {
  padding: var(--space-2) var(--space-3);
}

.standings--deporte .standings-title {
  font-size: var(--text-subhead);
  font-weight: 600;
}

.standings--deporte .standings-sub {
  font-size: var(--text-caption);
  text-transform: none;
  letter-spacing: 0;
}

.standings--deporte .deporte-tabla th,
.standings--deporte .deporte-tabla td {
  background: var(--color-surface);
}

.deporte-fixture {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.deporte-fixture-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.deporte-fixture-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.deporte-fixture-equipos {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-subhead);
  color: var(--color-ink);
}

.deporte-fixture-logo {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}

.deporte-fixture-vs {
  font-size: var(--text-caption);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.deporte-fixture-sede {
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.deporte-fixture-hora {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--text-footnote);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.deporte-fixture-liga {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-sports);
}

.deporte-listing-head {
  margin: var(--space-8) 0 var(--space-5);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-border);
}

.deporte-listing-bajada {
  margin: var(--space-2) 0 0;
  font-size: var(--text-subhead);
  color: var(--color-ink-muted);
}

/* ── Novedades del sitio (changelog público) — 2026-09-18 ──────────────────────
   Página /novedades/: las entradas se agrupan por fecha, con el resumen a la vista
   y el detalle en un <details> (sin JavaScript). El color lo trae cada entrada por
   `--changelog-color` según el tipo (Nuevo / Mejora / Arreglo). */

.changelog-encabezado {
  margin-bottom: var(--space-7);
}

.changelog-h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-title1);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.changelog-meta {
  margin: var(--space-3) 0 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.changelog-dia {
  margin-bottom: var(--space-7);
}

.changelog-fecha {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-subhead);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

.changelog-entradas {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.changelog-item {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--changelog-color, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* Color por tipo de novedad (clases, no estilos en línea: ver changelog-lista.php). */
.changelog-item--nuevo {
  --changelog-color: var(--color-sports);
}

.changelog-item--mejora {
  --changelog-color: var(--color-brand-teal);
}

.changelog-item--arreglo {
  --changelog-color: var(--color-news);
}

.changelog-tipo {
  margin: 0 0 6px;
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--changelog-color, var(--color-ink-muted));
}

.changelog-titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title3);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.changelog-resumen {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

.changelog-detalles {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.changelog-detalles-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--changelog-color, var(--color-link));
}

.changelog-detalles-summary::-webkit-details-marker {
  display: none;
}

.changelog-detalles-texto::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.changelog-detalles[open] .changelog-detalles-texto::after {
  transform: rotate(-135deg) translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .changelog-detalles-texto::after {
    transition: none;
  }
}

.changelog-detalles-cantidad {
  margin-left: auto;
  font-size: var(--text-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.changelog-detalles-lista {
  margin: var(--space-3) 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-subhead);
  line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

@media (max-width: 767px) {
  .changelog-item {
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  }

  .changelog-titulo {
    font-size: var(--text-title3);
  }
}

/* ── Detalle de Fórmula 1 (sección Automovilismo) ──────────────────────────────
   Próximo GP con sus cinco sesiones y cuenta regresiva, y podio del último GP.
   Va dentro de la tarjeta de datos del deporte, así que no lleva borde propio. */

.f1-bloque {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

.f1-bloque:last-child {
  margin-bottom: 0;
}

.f1-bloque-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.f1-bloque-titulo {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-sports);
}

.f1-cuenta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.f1-cuenta-label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.f1-cuenta-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-ink);
}

.f1-cuenta--en-vivo .f1-cuenta-valor {
  color: var(--color-news);
}

.f1-gp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 var(--space-3);
  font-size: var(--text-subhead);
  color: var(--color-ink);
}

.f1-gp-circuito {
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.f1-sesiones {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.f1-sesion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-footnote);
}

.f1-sesion:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.f1-sesion-nombre {
  color: var(--color-ink);
  font-weight: 500;
}

.f1-sesion-fecha {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.f1-sesion--terminada .f1-sesion-nombre,
.f1-sesion--terminada .f1-sesion-fecha {
  color: var(--color-ink-muted);
  text-decoration: line-through;
}

.f1-podio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-podio-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-subhead);
  color: var(--color-ink);
}

.f1-podio-pos {
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--color-sports);
}

.f1-bandera {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  flex: none;
}

.f1-extras {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
  font-size: var(--text-footnote);
  color: var(--color-ink);
}

/* Ficha del circuito del próximo GP: dibujo del trazado + datos duros. */

.f1-circuito {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.f1-circuito-mapa {
  flex: none;
  width: 190px;
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.f1-circuito-mapa img {
  display: block;
  width: 100%;
  height: auto;
}

.f1-circuito-datos {
  min-width: 0;
  flex: 1;
}

.f1-circuito-nombre {
  margin: 0;
  font-size: var(--text-subhead);
  font-weight: 700;
  color: var(--color-ink);
}

.f1-circuito-ubicacion {
  margin: 2px 0 var(--space-3);
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.f1-circuito-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-circuito-ficha li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.f1-circuito-etiqueta {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.f1-circuito-valor {
  font-size: var(--text-subhead);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-circuito-notas {
  margin: var(--space-3) 0 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.f1-circuito-fuente {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.f1-enlace-analisis {
  margin: var(--space-3) 0 0;
  font-size: var(--text-footnote);
}

.f1-enlace-analisis a {
  color: var(--color-sports);
  font-weight: 600;
  text-decoration: none;
}

.f1-enlace-analisis a:hover,
.f1-enlace-analisis a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .f1-circuito {
    flex-direction: column;
    gap: var(--space-3);
  }

  .f1-circuito-mapa {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
}

/* ── Página propia de Fórmula 1 (/formula-1/) ──────────────────────────────────
   Reúne el resumen (próximo GP, circuito, último GP) y el análisis completo.
   Los bloques de análisis son los mismos componentes reutilizados: tablas,
   rankings, barras del ADN del circuito y un gráfico de líneas dibujado en el
   servidor (SVG, sin librerías). */

.f1-pagina-encabezado {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-sports);
}

.f1-pagina-titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--text-largetitle);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.f1-pagina-volver {
  margin: var(--space-3) 0 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.f1-pagina-volver a {
  color: var(--color-sports);
  font-weight: 600;
  text-decoration: none;
}

.f1-pagina-volver a:hover {
  text-decoration: underline;
}

.f1-apartado {
  margin: var(--space-7) 0;
}

.f1-apartado-titulo {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-title3);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.f1-apartado-bajada {
  margin: 0 0 var(--space-4);
  font-size: var(--text-subhead);
  color: var(--color-ink-muted);
}

.f1-apartado-nota {
  margin: var(--space-3) 0 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

/* Tabla de clasificación (y cualquier tabla de F1). */

.f1-tabla-scroll {
  overflow-x: auto;
}

.f1-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-footnote);
}

.f1-tabla th,
.f1-tabla td {
  padding: 8px var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.f1-tabla thead th {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.f1-tabla tbody tr:last-child th,
.f1-tabla tbody tr:last-child td {
  border-bottom: 0;
}

.f1-tabla-pos {
  width: 2.4em;
  font-weight: 700;
  color: var(--color-ink);
}

.f1-tabla-piloto {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-weight: 500;
  color: var(--color-ink);
}

.f1-tabla-color {
  width: 3px;
  height: 18px;
  flex: none;
  border-radius: 2px;
  background: var(--f1-equipo, var(--color-border));
}

.f1-tabla-numero {
  min-width: 1.6em;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--color-ink-muted);
}

.f1-tabla-equipo {
  text-align: left;
  color: var(--color-ink-muted);
}

.f1-tabla-puntos {
  font-weight: 700;
  color: var(--color-sports);
}

/* Gráfico de la evolución del campeonato. */

.f1-grafico {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-ink);
}

.f1-grafico svg {
  display: block;
  width: 100%;
  height: auto;
}

.f1-grafico-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.f1-grafico-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.f1-grafico-item strong {
  color: var(--color-ink);
}

.f1-grafico-color {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
}

/* Barras del ADN del circuito. */

.f1-adn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-adn-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-footnote);
  color: var(--color-ink);
}

.f1-adn-etiqueta {
  flex: 1;
  min-width: 0;
}

.f1-adn-barras {
  display: inline-flex;
  gap: 3px;
  flex: none;
}

.f1-adn-barra {
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-surface-2);
}

.f1-adn-barra--activa {
  background: var(--color-sports);
}

.f1-adn-valor {
  flex: none;
  width: 2.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

/* Grilla de pilotos. */

.f1-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-grilla-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--f1-equipo, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.f1-grilla-numero {
  flex: none;
  min-width: 2.2em;
  font-size: var(--text-title3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--f1-equipo, var(--color-ink-muted));
}

.f1-grilla-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.f1-grilla-nombre {
  font-size: var(--text-subhead);
  font-weight: 600;
  color: var(--color-ink);
}

.f1-grilla-equipo,
.f1-grilla-puntos small {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.f1-grilla-puntos {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--text-subhead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

/* Bloques de ranking (copa de vuelta rápida, boxes, daños). */

.f1-dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.f1-mini-bloque {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.f1-mini-titulo {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-sports);
}

.f1-ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-ranking li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-subhead);
  color: var(--color-ink);
}

.f1-ranking li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.f1-ranking-pos {
  flex: none;
  width: 1.6em;
  font-size: var(--text-footnote);
  font-weight: 700;
  color: var(--color-ink-muted);
}

.f1-ranking-color {
  width: 3px;
  height: 18px;
  flex: none;
  border-radius: 2px;
  background: var(--f1-equipo, var(--color-border));
}

.f1-ranking-nombre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.f1-ranking-nombre small {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.f1-ranking-valor,
.f1-ranking-tiempo {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-sports);
}

/* Piezas de motor usadas. */

.f1-piezas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-piezas-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.f1-piezas-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.f1-piezas-piloto {
  font-size: var(--text-subhead);
  font-weight: 600;
  color: var(--color-ink);
}

.f1-piezas-piloto small,
.f1-piezas-detalle {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.f1-piezas-total {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--text-headline);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-piezas-total small {
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--color-ink-muted);
}

@media (max-width: 767px) {
  .f1-pagina-titulo {
    font-size: var(--text-title1);
  }

  .f1-apartado {
    margin: var(--space-6) 0;
  }

  .f1-tabla th,
  .f1-tabla td {
    padding: 7px 6px;
  }
}

.f1-extra-label {
  display: inline-block;
  min-width: 92px;
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

.f1-extra-equipo,
.f1-extra-gp {
  color: var(--color-ink-muted);
}

.f1-extra-tiempo {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-sports);
}

/* ── Próximos eventos (home) — 2026-09-18 ──────────────────────────────────────
   Resumen de la agenda deportiva que se arma solo con lo que devuelve ESPN: la
   carrera de F1 del fin de semana, la próxima fecha de la Liga, los partidos de
   la NBA. Mismo lenguaje visual que el tablero en vivo, pero como agenda: la
   fecha arriba (es lo primero que se mira), el evento al medio y el deporte al pie. */

.proximos-board {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  overflow: hidden;
}

.proximos-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.proximos-board-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-headline);
  font-weight: 600;
  color: var(--color-ink);
}

.proximos-board-icono {
  display: inline-flex;
  color: var(--color-sports);
}

.proximos-board-icono svg {
  width: 18px;
  height: 18px;
}

.proximos-board-link {
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-sports);
  text-decoration: none;
  white-space: nowrap;
}

.proximos-board-link:hover,
.proximos-board-link:focus-visible {
  text-decoration: underline;
}

.proximos-lista {
  display: grid;
  /* Mismo criterio que el tablero en vivo: entran todos en una fila mientras el
     ancho lo permita y si no bajan de a uno. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-border);
}

.proximo-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
}

.proximo-fecha {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--color-sports);
}

.proximo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  font-size: var(--text-subhead);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
}

.proximo-logo {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}

.proximo-detalle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

.proximo-deporte {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-weight: 600;
}

.proximo-lugar {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .proximos-board {
    margin-bottom: var(--space-5);
    border-radius: 12px;
  }

  .proximos-lista {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  /* En desktop las tablas del mismo deporte se acomodan de a dos, salvo los
     próximos partidos (filas anchas) y los bloques con muchos grupos.
     align-items: start para que una tarjeta corta (el acordeón "Más competencias")
     no se estire hasta la altura de su vecina y quede con medio metro de vacío
     adentro — se veía así en la verificación del 2026-09-18. */
  .deporte-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .deporte-bloque {
    margin-bottom: 0;
  }

  /* Los próximos partidos ocupan la fila entera. (Acá había dos reglas más para
     el pie "Datos: ESPN" del centro deportivo: se borró el 2026-09-18 junto con
     el crédito, que ya no existe.) */
  .deporte-bloque--proximos {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  /* Tablas con muchas columnas (fútbol, básquet: PJ, G, E, P, DIF, PTS): se ocultan
     G, E y P —igual que en la tabla de posiciones histórica— para que el equipo,
     los partidos jugados y los puntos entren sin scroll lateral. */
  .deporte-tabla--ancha tr > *:nth-child(4),
  .deporte-tabla--ancha tr > *:nth-child(5),
  .deporte-tabla--ancha tr > *:nth-child(6) {
    display: none;
  }

  .deporte-tabla th,
  .deporte-tabla td {
    padding: 6px var(--space-2);
  }

  .deporte-nav {
    margin-bottom: var(--space-5);
  }

  .deporte-seccion {
    margin-bottom: var(--space-7);
  }

  .deporte-seccion-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .deporte-bloque {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }

  .deporte-fixture-item {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .deporte-fixture-hora {
    align-items: flex-start;
  }
}

/* ══ ANCLA-LIVE-HOME (2026-09-18) ═════════════════════════════════════════════
   Bloque "Partidos en vivo" del home: carrusel horizontal y tarjetas resumidas.
   Las reglas van acá abajo a propósito (pisan las base de .live-board/.live-card
   de más arriba sin tocar aquel bloque). */

/* Por qué: en el home el bloque era una sola tarjeta estirada a todo el ancho y,
   a los 60 segundos, el refresco la reemplazaba por todos los partidos en vivo
   apilados hacia abajo: ~560 px de alto de los partidos y nada del contenido
   propio del portal. Ahora es una tira que se desliza de costado, con tarjetas
   resumidas (una fila por equipo, el marcador al lado) y los detalles escondidos
   detrás de "Detalles", que se abre dentro de la misma tarjeta.
   El tablero completo sigue existiendo, tal cual, en la sección Deporte. */

.live-board--home {
  margin-bottom: var(--space-5);
}

.live-board--home .live-board-head {
  justify-content: flex-start;
  gap: var(--space-3);
}

/* El contador se va al medio (empuja con el auto) y el link queda a la derecha. */
.live-board--home .live-board-count {
  margin-left: auto;
}

.live-board-mas {
  flex: none;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-sports);
  text-decoration: none;
}

.live-board-mas:hover,
.live-board-mas:focus-visible {
  text-decoration: underline;
}

/* Tira deslizable: scroll horizontal con snap, sin barra a la vista. */
.live-home-strip {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.live-home-strip::-webkit-scrollbar {
  display: none;
}

.live-mini {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Tres tarjetas a la vista en pantallas grandes, dos en tablet; el clamp evita
     que en un teléfono queden dos columnas apretadas. La tarjeta es enfrentada, así
     que necesita un poco más de ancho que la fila simple anterior. */
  flex: 0 0 clamp(260px, 31%, 360px);
  scroll-snap-align: start;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.live-mini-cabecera {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: var(--text-caption);
}

.live-mini-deporte {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.live-mini-liga {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-ink-muted);
}

/* ── Tarjeta enfrentada (local — marcador — visitante) ──────────────────────────
   Mateo pidió el 2026-09-18 por la tarde que en el home los partidos "se vean
   enfrentados", como la referencia que pasó: un escudo de cada lado, el marcador
   grande en el medio, la pastilla "En vivo" arriba y el reloj abajo. El local va a
   la izquierda y el visitante a la derecha. */

.live-h2h {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-2) 0 0;
}

.live-h2h-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

/* El visitante arranca el nombre desde el otro lado: sin esto, dos nombres de dos
   líneas quedaban desalineados entre sí. */
.live-h2h-lado--visitante {
  align-items: center;
}

.live-h2h-escudo {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.live-h2h-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Dos líneas de alto como mínimo: con un nombre corto y otro largo, "Local" y
     "Visitante" quedaban a distinta altura y la tarjeta se veía torcida. */
  min-height: 2.5em;
  font-size: var(--text-footnote);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
}

.live-h2h-rol {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}

.live-h2h-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 var(--space-1);
}

.live-h2h-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-news);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.live-h2h-punto {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  animation: live-board-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .live-h2h-punto {
    animation: none;
  }
}

.live-h2h-marcador {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-ink);
}

.live-h2h-reloj {
  font-size: var(--text-footnote);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-sports);
}

/* Detalles desplegables: el resumen se ve como un link chico y el cuerpo aparece
   debajo, dentro de la misma tarjeta. */
.live-mini-detalle {
  margin-top: auto;
}

.live-mini-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-sports);
}

.live-mini-summary::-webkit-details-marker {
  display: none;
}

.live-mini-summary::after {
  content: "▾";
  font-size: 10px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.live-mini-detalle[open] .live-mini-summary::after {
  transform: rotate(180deg);
}

.live-mini-summary:hover,
.live-mini-summary:focus-visible {
  text-decoration: underline;
}

.live-mini-cuerpo {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.live-mini-stats {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.live-mini-stat-label {
  font-weight: 600;
  color: var(--color-ink);
}

.live-mini-link {
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-sports);
  text-decoration: none;
}

.live-mini-link:hover,
.live-mini-link:focus-visible {
  text-decoration: underline;
}

/* Tablet: tres tarjetas a la vista. */
@media (max-width: 1023px) {
  .live-mini {
    flex-basis: clamp(240px, 44%, 340px);
  }
}

/* Mobile: una tarjeta completa y un pedazo de la siguiente — así se entiende que
   la tira se desliza. */
@media (max-width: 767px) {
  .live-board--home .live-board-head {
    flex-wrap: wrap;
  }

  .live-board--home .live-board-count {
    margin-left: auto;
  }

  .live-mini {
    flex-basis: 86%;
  }
}

/* Un solo partido en juego (lo normal con el filtro de ligas argentinas): la
   tarjeta se queda con un ancho cómodo en vez de dejar media tira vacía. */
.live-home-strip > .live-mini:only-child {
  flex-basis: min(100%, 520px);
}
/* fin ANCLA-LIVE-HOME */

/* ══ ANCLA-DEPORTE-PERF (2026-09-18) ══════════════════════════════════════════
   Rendimiento del centro deportivo: carga diferida de escudos, bloques fuera de
   pantalla y esqueletos. */

/* Por qué: la portada de Deporte tenía 183 <img> (112 escudos distintos) del CDN de
   ESPN y era la sección más lenta del sitio. Ahora los escudos se piden en versión
   de 40 px (~2 KB en vez de ~30 KB) y los de los deportes que quedan abajo del
   pliegue recién se buscan cuando el lector se acerca (ver deporte_logo_img() en
   src/templates/deporte-centro.php y assets/js/deporte-centro.js). */

/* Los bloques de cada deporte son altísimos y la mayoría arranca fuera de pantalla:
   con content-visibility el navegador no calcula ni pinta lo que no se ve (ahorra
   trabajo de layout en la primera carga). contain-intrinsic-size reserva una altura
   estimada para que la barra de scroll no salte cuando el bloque entra en pantalla,
   y scroll-margin-top deja el título debajo del header sticky cuando se llega por
   los chips de deporte (que saltan a #deporte-<slug>). */
.deporte-seccion {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
  scroll-margin-top: 180px;
}

/* Mientras el JS no les pone el src, los escudos diferidos reservan su lugar (tienen
   width/height) y se ven como un cuadradito gris: no hay salto de layout ni ícono
   roto. */
img[data-deporte-logo] {
  background: var(--color-surface-2);
  border-radius: 4px;
}

@media (max-width: 767px) {
  /* En mobile el header es más bajo: el ancla no necesita tanto aire. */
  .deporte-seccion {
    scroll-margin-top: 90px;
  }
}
/* fin ANCLA-DEPORTE-PERF */

/* ══ ANCLA-F1-PAGINA (2026-09-18) ═════════════════════════════════════════════
   Página propia de Fórmula 1 (/formula-1/): layout ancho en grillas de 2 y 3
   columnas, tarjetas y números grandes. */

/* ── Tablero de portada (rediseño de la tarde del 2026-09-18) ──────────────────
   Mateo comparó la página con app.formula1dashboard.com: sus tarjetas tienen
   borde fino, radio 12, una etiqueta chica en gris, un número grande y el dato
   secundario abajo, y el rojo se usa sólo para lo que está pasando. Acá se copia
   esa gramática (no su código ni sus imágenes): las tarjetas dejan de ser cajas
   sueltas y cada dato dice de qué circuito, de qué ronda o de qué temporada
   habla. */

.f1-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.f1-cabecera-texto {
  min-width: 0;
}

.f1-cabecera-badge {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgb(239 68 68 / 0.12);
  color: var(--f1-rojo);
  font-size: var(--text-caption);
  font-weight: 600;
}

.f1-cabecera-titulo {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.f1-cabecera-bajada {
  max-width: 64ch;
  margin: 0;
  font-size: var(--text-subhead);
  color: var(--color-ink-muted);
}

.f1-cabecera-volver {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-footnote);
}

.f1-cabecera-volver a {
  color: var(--f1-rojo);
  font-weight: 600;
  text-decoration: none;
}

.f1-cabecera-volver a:hover,
.f1-cabecera-volver a:focus-visible {
  text-decoration: underline;
}

.f1-tablero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.f1-tablero--secundario {
  margin-bottom: var(--space-6);
}

.f1-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--f1-borde);
  border-radius: var(--f1-radio);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

/* La única tarjeta con color: es la que muestra lo que está por pasar. */
.f1-tarjeta--roja {
  border-color: #dc2626;
  background: linear-gradient(140deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
}

.f1-tarjeta--roja .f1-tarjeta-kicker,
.f1-tarjeta--roja .f1-tarjeta-pie {
  color: rgb(255 255 255 / 0.85);
}

.f1-tarjeta-kicker {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-ink-muted);
}

.f1-tarjeta-titulo {
  margin: 0;
  font-size: var(--text-subhead);
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

.f1-tarjeta-subtitulo {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title3);
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.f1-tarjeta-valor {
  margin: 2px 0 0;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.f1-tarjeta-dato {
  margin: 0;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: inherit;
}

.f1-tarjeta-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0;
  font-size: var(--text-footnote);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.f1-tarjeta-delta svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Verde para lo que sube (más gasto, más piezas: el color es el mismo que usa el
   sitio para las variaciones de mercado). */
.f1-tarjeta-delta--sube {
  color: #dc2626;
}

.f1-tarjeta-pie {
  margin: auto 0 0;
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.f1-tarjeta-pie-extra {
  display: block;
  margin-top: 2px;
  font-weight: 600;
}

.f1-tarjeta-link {
  margin-top: var(--space-2);
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--f1-rojo);
  text-decoration: none;
}

.f1-tarjeta-link:hover,
.f1-tarjeta-link:focus-visible {
  text-decoration: underline;
}

.f1-tarjeta--roja .f1-tarjeta-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.f1-tarjeta-sin-dato {
  margin: var(--space-2) 0 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

/* Reloj dentro de la tarjeta roja. */
.f1-reloj--roja {
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  border: 0;
  background: none;
}

.f1-tarjeta--roja .f1-reloj-unidad {
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.16);
}

.f1-tarjeta--roja .f1-reloj-numero {
  color: #fff;
}

.f1-tarjeta--roja .f1-reloj-label {
  color: rgb(255 255 255 / 0.85);
}

.f1-mini-mapa {
  margin: var(--space-2) 0;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--f1-fondo-suave);
}

.f1-mini-mapa img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.f1-progreso {
  display: block;
  height: 6px;
  margin: 2px 0 0;
  border-radius: var(--radius-pill);
  background: var(--f1-borde);
  overflow: hidden;
}

.f1-progreso-barra {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--f1-rojo);
}

.f1-progreso-texto {
  margin: 0;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-ink);
}

/* Ficha del líder del campeonato: foto, bandera, equipo y puntos. */
.f1-lider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 2px;
}

.f1-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--f1-equipo, var(--f1-fondo-suave));
}

.f1-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.f1-avatar-iniciales {
  font-size: var(--text-headline);
  font-weight: 700;
  color: #fff;
}

.f1-lider-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.f1-lider-nombre {
  font-size: var(--text-subhead);
  font-weight: 600;
  color: var(--color-ink);
}

.f1-lider-equipo {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.f1-lider-puntos {
  flex: none;
  font-size: var(--text-title3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-lider-puntos small {
  margin-left: 2px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-ink-muted);
}

.f1-bandera-emoji {
  margin-right: 4px;
  font-size: 0.95em;
  line-height: 1;
}

/* ── Grilla de pilotos con foto ─────────────────────────────────────────────── */

.f1-pilotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-piloto {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--f1-borde);
  border-left: 3px solid var(--f1-equipo, var(--f1-borde));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.f1-piloto-pos {
  flex: none;
  width: 1.6em;
  font-size: var(--text-footnote);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.f1-piloto-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--f1-fondo-suave);
}

.f1-piloto-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.f1-piloto-iniciales {
  font-size: var(--text-footnote);
  font-weight: 700;
  color: var(--color-ink-muted);
}

.f1-piloto-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.f1-piloto-nombre {
  display: flex;
  align-items: center;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f1-piloto-numero {
  flex: none;
  margin-left: 4px;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--f1-equipo, var(--color-ink-muted));
}

.f1-piloto-equipo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

.f1-equipo-mini {
  flex: none;
  object-fit: contain;
}

/* Foto redonda del piloto en las listas de "Las mejores de cada piloto" (paradas) y
   "Los que más rompieron" (choques). Mateo la marcó dos veces el 2026-09-19: primero
   a 64 px y después se corrigió ("no funciona con esa medida, hay que achicar todos
   a este tamaño") → 30 px, que es el mismo alto que el escudo de las listas de al
   lado para que las cuatro listas se lean parejas. */
.f1-avatar-mini {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
}

.f1-piloto-puntos {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--text-subhead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-piloto-puntos small {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-ink-muted);
}

.f1-tabla-delta {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

/* ── Filas con barra (choques por piloto/equipo, paradas por equipo) ────────── */

.f1-barras,
.f1-equipos-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-barra-fila,
.f1-equipo-fila {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
}

.f1-barra-fila:hover,
.f1-equipo-fila:hover {
  background: var(--f1-fondo-suave);
}

.f1-barra-pos {
  flex: none;
  width: 1.4em;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--color-ink-muted);
}

.f1-barra-datos,
.f1-equipo-nombre {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.f1-barra-nombre,
.f1-equipo-nombre {
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f1-equipo-nombre small {
  font-weight: 500;
  color: var(--color-ink-muted);
}

.f1-barra-sub {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

/* La barra va detrás del nombre, con el color del equipo: se lee el ranking de un
   vistazo, sin tener que comparar números. */
.f1-barra-pista {
  display: block;
  height: 5px;
  margin-top: 4px;
  border-radius: var(--radius-pill);
  background: var(--f1-borde);
  overflow: hidden;
}

.f1-barra-relleno {
  display: block;
  height: 100%;
  width: var(--f1-barra, 0%);
  border-radius: var(--radius-pill);
  background: var(--f1-equipo, var(--f1-rojo));
}

.f1-barra-valor {
  flex: none;
  font-size: var(--text-footnote);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-equipo-dato {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 4.5em;
  font-size: var(--text-footnote);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-equipo-dato small {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
}

/* ── Responsive del tablero ─────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .f1-tablero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .f1-tablero {
    grid-template-columns: minmax(0, 1fr);
  }

  .f1-cabecera {
    align-items: flex-start;
  }

  .f1-tarjeta-valor {
    font-size: 1.75rem;
  }
}

/* ── Escudos de equipo ────────────────────────────────────────────────────────
   El CDN de la F1 publica los logos en blanco (están pensados para fondo oscuro):
   sobre la tarjeta blanca no se veían — Mateo lo reportó como "algunas marcas no
   muestran su logo". Se muestran dentro de un chip pintado con el color del equipo,
   que además los hace reconocibles de un vistazo. */

.f1-equipo-mini {
  padding: 3px;
  border-radius: 6px;
  background: var(--f1-equipo, var(--f1-fondo-suave));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

/* Logo del equipo en las listas "Por equipo" (paradas y choques): mismo tamaño que la
   foto del piloto de la lista de al lado —Mateo lo marcó el 2026-09-19— y **sin
   recuadro de fondo**, que fue su segunda marca sobre el mismo render: sobre la
   tarjeta clara el escudo a color se lee solo y el chip era ruido. */
.f1-equipo-lista {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
}

/* ── 2026 Liveries ────────────────────────────────────────────────────────────
   Sección pedida por Mateo (la vio en formula1.com/en/teams): el auto de cada
   equipo, su logo, sus pilotos y cómo va en el campeonato. Las imágenes son del
   CDN oficial de la F1, descargadas al servidor. */

.f1-liveries {
  margin: 0 0 var(--space-6);
}

.f1-liveries-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.f1-liveries-titulo {
  margin: 0;
  font-size: var(--text-title2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.f1-liveries-bajada {
  margin: 0;
  font-size: var(--text-subhead);
  color: var(--color-ink-muted);
}

.f1-liveries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-livery {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--f1-borde);
  border-top: 3px solid var(--f1-equipo, var(--f1-borde));
  border-radius: var(--f1-radio);
  /* Fondo con el color del equipo muy suavizado: da identidad sin arruinar el
     contraste del texto (varios colores de F1 son clarísimos). */
  background: color-mix(in srgb, var(--f1-equipo, var(--f1-fondo-suave)) 12%, var(--color-surface));
}

.f1-livery-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.f1-livery-equipo {
  font-size: var(--text-headline);
  font-weight: 700;
  color: var(--color-ink);
}

.f1-livery-pos {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--text-subhead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-livery-pos small {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-ink-muted);
}

.f1-livery-figura {
  position: relative;
  margin: 0;
  padding: 0 var(--space-2);
}

.f1-livery-auto {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

.f1-livery-logo {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--f1-equipo, var(--f1-fondo-suave));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

.f1-livery-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.f1-livery-pilotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-livery-pilotos li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.6);
}

:root[data-theme="dark"] .f1-livery-pilotos li {
  background: rgb(0 0 0 / 0.25);
}

.f1-livery-piloto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-footnote);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f1-livery-numero {
  flex: none;
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

/* ══ FICHAS DE PILOTO, LIVERIES Y TEASER (2026-09-18, noche) ═══════════════════
   Mateo pidió tres cosas después de ver la landing en producción: (1) las fichas
   de piloto como las de formula1.com —foto sobre el color del equipo, nombre,
   equipo, número grande y bandera—, (2) que la grilla de liveries NO ocupa la
   landing: una tarjeta con una foto de F1 de fondo que la abra en un popup, y (3)
   logos de equipo a color y más grandes (los blancos del CDN no se distinguían).
   El head-to-head quedó descartado por pedido explícito. */

/* ── Fichas de piloto ───────────────────────────────────────────────────────── */

.f1-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-ficha {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 168px;
  overflow: hidden;
  border-radius: var(--f1-radio);
  /* El equipo pinta la ficha; el texto cambia a oscuro en los colores claros
     (Mercedes turquesa, Haas gris) desde PHP con --f1-equipo-texto. */
  background: linear-gradient(135deg,
      var(--f1-equipo, #333) 0%,
      color-mix(in srgb, var(--f1-equipo, #333) 62%, #05070a) 100%);
  color: var(--f1-equipo-texto, #fff);
}

.f1-ficha-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  min-width: 0;
  z-index: 1;
}

.f1-ficha-pos {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  opacity: 0.8;
}

.f1-ficha-nombre {
  margin: 0;
  font-size: var(--text-title3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.f1-ficha-equipo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: var(--text-footnote);
  font-weight: 600;
  opacity: 0.92;
}

/* El logo va sobre el color del equipo, así que acá NO se fuerza ningún color: PHP
   elige la versión (a color o blanca) según la lista de Formula1::logoFicha(). Con el
   filtro blanco que había antes, el escudo de Ferrari quedaba un óvalo blanco vacío
   y la estrella de Mercedes desaparecía sobre el turquesa (2026-09-19). */
.f1-ficha-logo {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
}

.f1-ficha-numero {
  margin: auto 0 0;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

.f1-ficha-pais {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: var(--text-caption);
  font-weight: 600;
  opacity: 0.85;
}

.f1-ficha-bandera {
  font-size: 1.05rem;
  line-height: 1;
}

.f1-ficha-foto {
  flex: 0 0 48%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
}

/* El retrato va sangrado al borde derecho y al pie de la ficha. Mateo pidió un
   respiro (2026-09-19): "no se sienta pegado a los bordes". Son los tokens más
   cercanos a lo que marcó (10/30/5 px → 8/28/4), para no meter medidas sueltas
   fuera de la escala. El padding izquierdo queda en 0 a propósito: por ahí el
   recorte del piloto se cruza con el nombre y el número. */
.f1-ficha-foto img {
  width: 100%;
  height: 100%;
  max-height: 190px;
  padding: var(--space-2) var(--space-6) var(--space-1) 0;
  object-fit: contain;
  object-position: bottom right;
}

/* ── Ficha con la foto de fondo (2026-09-19) ──────────────────────────────────
   Mateo pidió que la foto del piloto vaya de fondo de la tarjeta con un velo, como
   en formula1.com. La foto es el recorte de cara y hombros (`-fondo.webp`) y ocupa
   el 62% derecho; el `mask` la funde con el color del equipo sobre su borde
   izquierdo, así el nombre y el número se leen sin un velo aparte. El texto se
   limita al 58% de la izquierda para que nunca se cruce con la cara.
   El resto de la tarjeta (borde superior, color, alto) queda igual. */
.f1-ficha-foto--fondo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  align-items: stretch;
  justify-content: flex-start;
  z-index: 0;
}

.f1-ficha-foto--fondo img {
  max-height: none;
  padding: 0;
  object-fit: cover;
  object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%);
  mask-image: linear-gradient(to right, transparent 0%, #000 46%);
}

.f1-ficha--con-fondo .f1-ficha-texto {
  max-width: 58%;
}

.f1-ficha-iniciales {
  padding: var(--space-4);
  font-size: 2rem;
  font-weight: 800;
  opacity: 0.45;
}

/* ── Tarjeta "2026 Liveries" (foto de fondo + popup) ────────────────────────── */

.f1-teaser {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 230px;
  margin: 0 0 var(--space-5);
  overflow: hidden;
  border: 1px solid var(--f1-borde);
  border-radius: var(--f1-radio);
}

.f1-teaser-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f1-teaser-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      rgb(8 10 14 / 0.94) 0%,
      rgb(8 10 14 / 0.78) 45%,
      rgb(8 10 14 / 0.3) 100%);
}

.f1-teaser-contenido {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: var(--space-5) var(--space-6);
  color: #fff;
}

.f1-teaser-kicker {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.7);
}

.f1-teaser-titulo {
  margin: 2px 0 var(--space-2);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.f1-teaser-bajada {
  margin: 0 0 var(--space-3);
  font-size: var(--text-subhead);
  color: rgb(255 255 255 / 0.82);
}

.f1-teaser-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.f1-teaser-logos li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.1);
}

.f1-teaser-logos img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.f1-teaser-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #0b0e11;
  font-family: inherit;
  font-size: var(--text-subhead);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.f1-teaser-boton svg {
  width: 16px;
  height: 16px;
}

.f1-teaser-boton:hover,
.f1-teaser-boton:focus-visible {
  transform: translateY(-1px);
}

/* ── Popup de liveries ──────────────────────────────────────────────────────── */

.f1-modal {
  width: min(1180px, 94vw);
  max-height: 88vh;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--f1-borde);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-ink);
}

.f1-modal::backdrop {
  background: rgb(6 8 11 / 0.72);
}

.f1-modal-cabecera {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--f1-borde);
  background: var(--color-surface);
}

.f1-modal-kicker {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
}

.f1-modal-titulo {
  margin: 2px 0 0;
  font-size: var(--text-title2);
  font-weight: 700;
}

.f1-modal-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--f1-borde);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.f1-modal-cerrar svg {
  width: 18px;
  height: 18px;
}

.f1-modal .f1-liveries-grid {
  padding: var(--space-5);
}

/* ── Tarjetas de livery (dentro del popup) ──────────────────────────────────── */

.f1-livery {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--f1-equipo, #333) 45%, #0b0e11);
  border-radius: var(--f1-radio);
  background: linear-gradient(155deg,
      color-mix(in srgb, var(--f1-equipo, #333) 38%, #0a0c10) 0%,
      #0a0c10 72%);
  color: #fff;
}

.f1-livery-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.f1-livery-equipo {
  margin: 0;
  font-size: var(--text-title3);
  font-weight: 700;
  color: color-mix(in srgb, var(--f1-equipo, #fff) 65%, #fff);
}

.f1-livery-chasis {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: rgb(255 255 255 / 0.65);
}

.f1-livery-puntos {
  margin-left: 6px;
  font-weight: 700;
  color: rgb(255 255 255 / 0.85);
}

.f1-livery-avatares {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-livery-avatares img,
.f1-livery-avatar-vacio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.2);
  object-fit: cover;
  object-position: top center;
}

/* La marca del equipo va detrás del auto, como marca de agua. */
.f1-livery-figura {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  margin: var(--space-2) 0 0;
}

.f1-livery-marca {
  position: absolute;
  inset: 0;
  max-width: 58%;
  max-height: 86%;
  margin: auto;
  object-fit: contain;
  opacity: 0.2;
}

.f1-livery-auto {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}

.f1-livery-pilotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.f1-livery-pilotos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.08);
}

.f1-livery-piloto {
  font-size: var(--text-footnote);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f1-livery-numero {
  flex: none;
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.7);
}

/* Logos de equipo a color, al tamaño en que se distinguen. */
.f1-tabla-logo-equipo {
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
}

@media (max-width: 767px) {
  .f1-teaser-contenido {
    padding: var(--space-4);
  }

  .f1-teaser-logos li {
    width: 36px;
    height: 36px;
  }

  .f1-teaser-logos img {
    width: 22px;
    height: 22px;
  }

  .f1-fichas {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ficha más baja en el teléfono: 22 fichas de 240 px eran 5.000 px de scroll.
     Con la foto a 150 px y menos aire quedan en ~150 px cada una. */
  .f1-ficha {
    min-height: 150px;
  }

  .f1-ficha-texto {
    padding: var(--space-3) var(--space-4);
  }

  .f1-ficha-nombre {
    font-size: var(--text-title3);
  }

  .f1-ficha-numero {
    font-size: 2rem;
  }

  .f1-ficha-foto img {
    max-height: 150px;
  }

  /* Los nombres de los pilotos en la livery van uno por fila: en dos columnas de
     160 px quedaban cortados ("Kimi Anto…"). */
  .f1-livery-pilotos {
    grid-template-columns: minmax(0, 1fr);
  }

  .f1-modal .f1-liveries-grid {
    padding: var(--space-4);
  }
}

/* ── Performance de la página ─────────────────────────────────────────────────
   La landing tiene muchos bloques largos (tablas, rankings, barras). Con
   content-visibility el navegador no calcula ni pinta los que están fuera de
   pantalla: la primera carga y el scroll se sienten más livianos. El
   contain-intrinsic-size reserva una altura estimada para que la barra de scroll
   no salte, y scroll-margin-top deja el título debajo del header cuando se llega
   por los links "Ver promedio…" / "Ver por piloto…". */

.f1-pagina .f1-apartado {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
  scroll-margin-top: 180px;
}

@media (max-width: 767px) {
  .f1-liveries-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .f1-pagina .f1-apartado {
    scroll-margin-top: 90px;
  }
}

/* Por qué: la página vivía dentro de la columna de lectura de 760 px —en un
   monitor de 1440 px quedaban ~680 px de aire al costado y el contenido se
   apilaba en una tira larguísima de 5.000 px. Ahora usa el ancho completo
   (.page-layout--wide, 1.280 px) y reparte las piezas en una grilla de 12
   columnas: portada con la cuenta regresiva en números grandes, cuatro tarjetas
   de estadísticas y después los bloques de a dos o tres por fila.
   Todo va prefijado con .f1-pagina para no tocar la versión del bloque que se
   muestra adentro de la tarjeta de Automovilismo en la sección Deporte. */

.f1-pagina {
  --f1-rojo: #e10600;
  --f1-rojo-claro: #ff4b3e;
  /* Tokens del tablero: son los valores de la app de referencia (borde slate-200,
     radio 12, fondo slate-50) para que las tarjetas se lean igual de prolijas. */
  --f1-borde: #e2e8f0;
  --f1-radio: 12px;
  --f1-fondo-suave: #f8fafc;
}

:root[data-theme="dark"] .f1-pagina {
  --f1-borde: #262c31;
  --f1-fondo-suave: #1b2024;
}

/* ── Portada del Mundial: título, próximo GP y cuenta regresiva ─────────────── */

.f1-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) var(--space-6);
  border: 1px solid rgb(225 6 0 / 0.4);
  border-radius: var(--radius-card);
  /* Fondo oscuro con el rojo de F1 entrando desde la esquina: el mismo tono en
     modo claro y oscuro, así la portada se lee igual en los dos temas. */
  background:
    radial-gradient(120% 130% at 100% 0%, rgb(225 6 0 / 0.55) 0%, rgb(225 6 0 / 0) 58%),
    linear-gradient(135deg, #1b1f26 0%, #0d1014 68%);
  color: #f4f5f7;
}

/* Líneas diagonales muy suaves: dan textura sin competir con el texto. */
.f1-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

.f1-hero-texto,
.f1-reloj {
  position: relative;
  z-index: 1;
}

.f1-hero-badge {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(255 255 255 / 0.22);
  background: rgb(225 6 0 / 0.22);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}

.f1-hero-titulo {
  margin: 0 0 var(--space-3);
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.f1-hero-bajada {
  max-width: 46ch;
  margin: 0;
  font-size: var(--text-callout);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.78);
}

.f1-hero-volver {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-5) 0 0;
  font-size: var(--text-footnote);
}

.f1-hero-volver a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
  padding-bottom: 1px;
}

.f1-hero-volver a:hover,
.f1-hero-volver a:focus-visible {
  border-bottom-color: var(--f1-rojo-claro);
  color: var(--f1-rojo-claro);
}

/* Reloj de la próxima sesión. */

.f1-reloj {
  padding: var(--space-5);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-card);
  background: rgb(9 11 14 / 0.55);
}

.f1-reloj-titulo {
  margin: 0;
  font-size: var(--text-title3);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: #fff;
}

.f1-reloj-sede {
  display: block;
  margin-top: 2px;
  font-size: var(--text-footnote);
  font-weight: 500;
  color: rgb(255 255 255 / 0.68);
}

.f1-reloj-subtitulo {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgb(255 255 255 / 0.72);
}

.f1-reloj-unidades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.f1-reloj-unidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2) 2px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.06);
}

.f1-reloj-numero {
  /* Más chico que en la primera versión: con 2,5 rem las cuatro cifras no entraban
     en la tarjeta del tablero y se salían del recuadro (lo reportó Mateo el
     2026-09-18 a la noche). */
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.f1-reloj-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.6);
}

/* Cuando la sesión ya arrancó el contador queda en cero y el subtítulo avisa. */
.f1-cuenta--en-vivo .f1-reloj-numero {
  color: var(--f1-rojo-claro);
}

.f1-reloj-pie {
  margin: var(--space-3) 0 0;
  font-size: var(--text-footnote);
  color: rgb(255 255 255 / 0.78);
}

.f1-reloj-carrera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: var(--text-subhead);
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.f1-reloj-carrera-label {
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgb(255 255 255 / 0.6);
}

/* ── Tira de números grandes ────────────────────────────────────────────────── */

.f1-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.f1-numero {
  position: relative;
  overflow: hidden;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 6px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* Barra roja al costado: identifica la página como F1 de un vistazo. */
.f1-numero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--f1-rojo) 0%, #ff8a3d 100%);
}

.f1-numero-etiqueta {
  margin: 0 0 var(--space-1);
  font-size: var(--text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-muted);
}

.f1-numero-valor {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.f1-numero-unidad {
  display: block;
  margin-top: 3px;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.f1-numero-detalle {
  margin: var(--space-2) 0 0;
  font-size: var(--text-footnote);
  color: var(--color-ink-muted);
}

/* ── Grilla de 12 columnas de la página ─────────────────────────────────────── */

.f1-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  /* stretch (y no start): las tarjetas de una misma fila terminan a la misma
     altura, así la grilla se lee prolija aunque una tenga menos contenido. El
     aire sobrante queda adentro de la tarjeta, empujando su último bloque al pie
     (ver el margin-top:auto de .f1-sesiones y .f1-extras). */
  align-items: stretch;
  margin-bottom: var(--space-7);
}

.f1-col-4 { grid-column: span 4; }
.f1-col-5 { grid-column: span 5; }
.f1-col-6 { grid-column: span 6; }
.f1-col-7 { grid-column: span 7; }
.f1-col-8 { grid-column: span 8; }
.f1-col-12 { grid-column: span 12; }

/* Las piezas de la página son tarjetas: borde, sombra suave y una guía roja al
   pie. Los apartados del análisis (tablas, rankings, gráfico) van con el mismo
   tratamiento para que la grilla se lea como una sola cosa. */
.f1-pagina .f1-bloque,
.f1-pagina .f1-apartado {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.f1-pagina .f1-bloque {
  border-bottom: 2px solid var(--f1-rojo);
}

.f1-pagina .f1-bloque-titulo,
.f1-pagina .f1-apartado-titulo {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.f1-pagina .f1-bloque-titulo {
  margin-bottom: var(--space-3);
  color: var(--f1-rojo);
}

.f1-pagina .f1-apartado-titulo {
  font-size: var(--text-title3);
}

.f1-pagina .f1-apartado-bajada {
  margin-bottom: var(--space-3);
}

/* El dibujo del circuito respira mejor en la columna ancha: un poco más grande
   que en la tarjeta de la sección y centrado. */
.f1-pagina .f1-circuito-mapa {
  width: 220px;
  background: var(--color-surface-2);
}

.f1-pagina .f1-circuito-valor {
  font-size: var(--text-headline);
  font-weight: 700;
}

.f1-pagina .f1-grafico {
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

/* Con la grilla estirada, el último bloque de cada tarjeta baja al pie: en el
   próximo GP la lista de sesiones y en el circuito / último GP la línea de
   récords o de pole y vuelta rápida. */
.f1-pagina .f1-sesiones,
.f1-pagina .f1-extras {
  margin-top: auto;
}

/* Piezas de motor: en una fila ancha entran tres o cuatro pilotos por línea. */
.f1-pagina .f1-piezas {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ── Tablet: dos columnas ───────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .f1-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
  }

  .f1-reloj {
    max-width: 520px;
  }

  .f1-numeros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .f1-col-4,
  .f1-col-5,
  .f1-col-6 {
    grid-column: span 6;
  }
}

/* ── Mobile: una columna ────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .f1-hero {
    padding: var(--space-5) var(--space-4);
  }

  .f1-hero-bajada {
    font-size: var(--text-subhead);
  }

  .f1-numeros {
    gap: var(--space-3);
    margin: var(--space-4) 0;
  }

  .f1-grid {
    gap: var(--space-4);
  }

  .f1-col-4,
  .f1-col-5,
  .f1-col-6,
  .f1-col-7,
  .f1-col-8,
  .f1-col-12 {
    grid-column: span 12;
  }

  .f1-pagina .f1-bloque,
  .f1-pagina .f1-apartado {
    padding: var(--space-4);
  }

  .f1-pagina .f1-circuito-mapa {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
}

@media (max-width: 479px) {
  .f1-reloj-unidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .f1-numeros {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* fin ANCLA-F1-PAGINA */


/* ============================================================================
   Migas de pan (bloque 11)
   Reflejan el BreadcrumbList del schema: son las mismas migas, una visible y
   otra para Google. Discretas y en una línea, con scroll horizontal propio en
   mobile para que un título largo no rompa el layout (mismo patrón que .main-nav).
   ============================================================================ */
.migas {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--ancho-contenido, 1100px);
  margin: 0 auto 14px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  font-size: 13px;
  color: var(--texto-suave, #8b939c);
}
.migas::-webkit-scrollbar { display: none; }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { color: var(--acento, #1fa3a6); text-decoration: underline; }
.migas-sep { opacity: .5; }
.migas-actual { overflow: hidden; text-overflow: ellipsis; }


/* ============================================================================
   Formulario de contacto y avisos (bloque 13)
   ============================================================================ */
.formulario { display: flex; flex-direction: column; gap: 6px; max-width: 620px; margin: 18px 0 8px; }
.formulario label { font-size: 14px; font-weight: 600; color: var(--texto-suave, #555); }
.formulario input, .formulario textarea {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--borde, #d8dde3);
  border-radius: 8px;
  background: var(--fondo-campo, #fff);
  color: inherit;
  margin-bottom: 10px;
}
.formulario textarea { resize: vertical; }
.formulario button { align-self: flex-start; margin-top: 4px; cursor: pointer; }
/* Trampa antispam: fuera de la vista pero no con display:none, que algunos bots detectan. */
.formulario-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { padding: 11px 14px; border-radius: 8px; margin: 12px 0; font-size: 15px; }
.aviso--ok    { background: #e8f5ec; color: #1c6b34; border: 1px solid #b9e0c6; }
.aviso--error { background: #fdecec; color: #8a1f1f; border: 1px solid #f3c2c2; }