/* Exacta — estilos del sitio. Colores, tipografías y medidas salen SÓLO de tokens.css (se carga antes).
   Referencia visual: paquete/maqueta/ (index.html, nota.html, movil.html). */

:root { --margen: var(--ex-margen); }
@media (max-width: 1279px) { :root { --margen: 40px; } }
@media (max-width: 767px)  { :root { --margen: 16px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ex-papel); color: var(--ex-tinta); font-family: var(--ex-sans); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.ancho { width: 100%; max-width: calc(var(--ex-contenido) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rotulo { font-size: var(--ex-rotulo); font-weight: 700; font-stretch: var(--ex-ancho-rotulo); letter-spacing: .1em; text-transform: uppercase; }
.num { font-variant-numeric: tabular-nums; }

/* ── Barra de fecha (fija arriba) ───────────────────────────────────────────── */
.barra-fecha { position: sticky; top: 0; z-index: 20; background: var(--ex-tinta); color: var(--ex-linea-2); font-size: var(--ex-meta); }
.barra-fecha .ancho { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.barra-fecha .fecha { display: flex; align-items: center; gap: 10px; }
.barra-fecha .fecha strong { font-size: 15px; font-weight: 700; color: var(--ex-papel); }
.barra-fecha nav { display: flex; gap: 24px; align-items: center; }
.barra-fecha .resumen { color: var(--ex-rojo-claro); font-weight: 600; }

/* ── Cabecera ──────────────────────────────────────────────────────────────── */
.cabecera { background: var(--ex-tinta); border-top: 1px solid var(--ex-tinta-2); }
.cabecera .ancho { min-height: 122px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 16px; padding-bottom: 16px; }
.marca-cabecera { display: flex; flex-direction: column; gap: 10px; }
.marca-cabecera svg { width: 300px; height: auto; display: block; }
.marca-cabecera .lema { font-size: var(--ex-meta); color: var(--ex-gris-hecho); letter-spacing: .02em; }
.marca-cabecera:hover { text-decoration: none; }

/* ── Menú ──────────────────────────────────────────────────────────────────── */
.menu { background: var(--ex-tinta); border-top: 1px solid var(--ex-tinta-2); border-bottom: 4px solid var(--ex-rojo); }
.menu .ancho { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 34px; font-size: 15px; font-weight: 600; color: var(--ex-papel); }
.menu a[aria-current="page"] { color: var(--ex-rojo-claro); }
.boton-buscar { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--ex-linea-oscura); border-radius: 22px; display: flex; align-items: center; justify-content: center; }

/* ── Franja AHORA ──────────────────────────────────────────────────────────── */
.ahora { background: var(--ex-blanco); border-bottom: 1px solid var(--ex-linea); }
.ahora .ancho { height: 52px; display: flex; align-items: center; gap: 20px; font-size: 14px; white-space: nowrap; overflow: hidden; }
.ahora .etiqueta { height: 28px; padding: 0 12px; background: var(--ex-rojo-franja); color: var(--ex-blanco); display: flex; align-items: center; flex-shrink: 0; }
.ahora a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ahora svg { flex-shrink: 0; }

/* ── Fecha en móvil (fija arriba; reemplaza a la barra de fecha) ───────────── */
.fecha-movil { display: none; }

/* ── Espacio publicitario ──────────────────────────────────────────────────── */
.publicidad { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.publicidad .rotulo-pub { font-size: var(--ex-rotulo); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ex-texto-2); font-variant-numeric: tabular-nums; }
.publicidad .caja { width: var(--w); max-width: 100%; aspect-ratio: var(--w-n) / var(--h-n); flex-shrink: 0; overflow: hidden; }
.publicidad .caja img { width: 100%; height: 100%; object-fit: contain; }
.pieza-propia { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--ex-superficie); border: 1px solid var(--ex-linea-2); color: var(--ex-texto-2); font-size: 14px; font-weight: 600; text-align: center; padding: 8px; }
.pieza-propia svg { width: 28px; height: auto; }
.pieza-propia:hover { text-decoration: none; border-color: var(--ex-tinta); }
.cabecera .publicidad { align-items: flex-end; gap: 4px; }
.cabecera .publicidad .rotulo-pub { color: var(--ex-linea-2); }
.cabecera .pieza-propia { background: var(--ex-tinta-2); border-color: var(--ex-linea-oscura); color: var(--ex-linea-2); flex-direction: row; gap: 12px; }
.franja-pub { padding: 24px 0; border-bottom: 1px solid var(--ex-linea); }
/* Escritorio y móvil tienen espacios distintos (mapeo pendiente de Bernardo: pendientes.md, punto 9). */
.solo-movil { display: none; }
.franja-pub.solo-movil { padding: 14px 0; }

/* ── Pie ───────────────────────────────────────────────────────────────────── */
.pie { background: var(--ex-tinta); color: var(--ex-linea-2); }
.pie .ancho { padding-top: 44px; padding-bottom: 44px; display: flex; flex-direction: column; gap: 28px; }
.pie .arriba { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pie .arriba svg { width: 200px; height: auto; display: block; }
.pie nav { display: flex; gap: 28px; font-size: 14px; flex-wrap: wrap; }
.pie .abajo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--ex-linea-oscura); font-size: var(--ex-meta); color: var(--ex-gris-hecho); }

/* ── Tableta: el banner de cabecera baja debajo del logo ───────────────────── */
@media (max-width: 1279px) {
  .cabecera .ancho { flex-wrap: wrap; }
  .menu ul { gap: 24px; }
}

/* ── Móvil ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .barra-fecha, .ahora, .cabecera .publicidad, .solo-escritorio { display: none; }
  .solo-movil { display: block; }
  .cabecera .ancho { min-height: 64px; padding-top: 0; padding-bottom: 0; }
  .marca-cabecera svg { width: 140px; }
  .marca-cabecera .lema { display: none; }
  .menu .ancho { height: 44px; padding-right: 0; }
  .menu ul { gap: 20px; font-size: 14px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; height: 100%; padding-right: var(--margen); }
  .menu ul::-webkit-scrollbar { display: none; }
  .menu li a { display: flex; align-items: center; min-height: 44px; }
  .menu .boton-buscar { display: none; }
  .fecha-movil { display: block; position: sticky; top: 0; z-index: 20; background: var(--ex-blanco); border-bottom: 1px solid var(--ex-linea); font-size: 14px; }
  .fecha-movil .ancho { height: 36px; display: flex; align-items: center; justify-content: space-between; }
  .fecha-movil strong { font-weight: 700; }
  .fecha-movil span { color: var(--ex-texto-3); }
  .cabecera .buscar-movil { display: flex; border: 0; }
  .pie nav { gap: 8px 20px; }
  .pie nav a { min-height: 44px; display: flex; align-items: center; }
}
.cabecera .buscar-movil { display: none; }

/* ── Contenido provisorio (se rehace en el paso de portada y nota) ─────────── */
.contenido { padding-top: 44px; padding-bottom: 56px; }
.lista-notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.lista-notas li { display: flex; flex-direction: column; gap: 12px; }
.lista-notas img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.lista-notas .seccion { color: var(--ex-rojo-texto); }
.lista-notas h2 { margin: 0; font-size: var(--ex-titulo-tarjeta); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.lista-notas .meta { font-size: var(--ex-meta); color: var(--ex-texto-3); }
.lista-notas .meta b { color: var(--ex-tinta); }
.vacio { font-family: var(--ex-serif); font-size: var(--ex-bajada); color: var(--ex-texto-2); margin: 0; }
.pagina-titulo { margin: 0 0 24px; font-size: var(--ex-h2); font-weight: 750; letter-spacing: -.01em; padding-bottom: 12px; border-bottom: 3px solid var(--ex-tinta); }

.nota { max-width: 816px; }
.nota .antetitulo { color: var(--ex-rojo-texto); margin: 0 0 16px; }
.nota h1 { margin: 0 0 18px; font-size: var(--ex-h1-nota); line-height: 1.08; font-weight: 750; letter-spacing: -.015em; }
.nota .bajada { margin: 0 0 20px; font-family: var(--ex-serif); font-size: var(--ex-bajada); line-height: 1.4; color: var(--ex-texto-2); }
.nota .firma { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--ex-linea); border-bottom: 1px solid var(--ex-linea); font-size: var(--ex-meta); color: var(--ex-texto-3); }
.nota .firma b { color: var(--ex-tinta); }
.nota figure { margin: 28px 0; }
.nota figcaption { margin-top: 8px; font-size: var(--ex-meta); line-height: 1.45; color: var(--ex-texto-3); }
.nota .cuerpo { font-family: var(--ex-serif); font-size: var(--ex-cuerpo); line-height: 1.6; }
.nota .cuerpo h2 { font-family: var(--ex-sans); font-size: var(--ex-h2); line-height: 1.2; font-weight: 750; margin: 40px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ex-tinta); }
.nota .cuerpo p, .nota .cuerpo li { margin: 0 0 16px; }
.nota .cuerpo table { width: 100%; border-collapse: collapse; font-family: var(--ex-sans); font-size: 15px; display: block; overflow-x: auto; }
.nota .cuerpo th, .nota .cuerpo td { border-bottom: 1px solid var(--ex-linea); padding: 8px 10px; text-align: left; }
.nota .cuerpo hr { border: 0; border-top: 1px solid var(--ex-linea); margin: 36px 0 20px; }
.nota .cuerpo figcaption, .nota .cuerpo .ap-credito { font-family: var(--ex-sans); }
.fuentes { margin-top: 36px; }
.fuentes h2 { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 3px solid var(--ex-tinta); }
.fuentes ol { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.fuentes li { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ex-linea); }
.fuentes .f-emisor { font-weight: 600; flex-shrink: 0; width: 170px; }
.fuentes .f-titulo { flex-grow: 1; }
.fuentes .f-fecha { color: var(--ex-texto-3); white-space: nowrap; }
.compartir { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; font-size: 14px; font-weight: 600; }
.compartir a, .compartir button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--ex-linea-2); background: none; color: var(--ex-tinta); font: inherit; cursor: pointer; }
.compartir a:hover, .compartir button:hover { border-color: var(--ex-tinta); text-decoration: none; }
@media (max-width: 767px) {
  .contenido { padding-top: 22px; }
  .nota h1 { font-size: 32px; }
  .nota .bajada { font-size: 18px; }
  .nota .cuerpo { font-size: 18px; }
  .fuentes li { flex-direction: column; gap: 2px; }
  .fuentes .f-emisor { width: auto; }
}