/* ==========================================================================
   La Tusa SV — principal.css
   Todo lo que no es crítico: retícula de portada, bloques de sección, franjas,
   artículo, liveblog, overlay de búsqueda, formularios, pie y reproductores.
   Se carga diferido. Depende de tokens.css.
   ========================================================================== */

/* --- Barra de administración de WordPress ---------------------------------
   La cabecera fija se corre hacia abajo cuando WordPress imprime su barra. */
:root { --alto-proto: 0px; }
.cabecera__nav { top: var(--alto-proto); }
body.admin-bar { --alto-proto: 32px; }
@media (max-width: 782px) { body.admin-bar { --alto-proto: 46px; } }

/* --- Portada: apertura ---------------------------------------------------- */
.portada { padding-block: var(--e-7) var(--e-12); }
.apertura { display: grid; gap: var(--e-7); }
@media (min-width: 900px) {
  .apertura {
    grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
    gap: var(--e-8);
  }
  .apertura__rail {
    border-inline-start: var(--filete) solid var(--borde-fuerte);
    padding-inline-start: var(--e-7);
  }
}
.apertura__rail { display: grid; gap: var(--e-5); align-content: start; }
.apertura__rail .tarjeta--lista:first-of-type { margin-top: var(--e-2); }

.tira { display: grid; gap: var(--e-6); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 2px solid var(--tinta); }
@media (min-width: 720px) { .tira { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .tira { grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 0; }
  /* Con tres piezas se dibujan tres columnas, no cuatro con una hueca. */
  .tira:has(> :last-child:nth-child(3)) { grid-template-columns: 1.35fr 1fr 1fr; }
  .tira > * { padding-inline: var(--e-6); border-inline-start: var(--filete) solid var(--borde); }
  .tira > *:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .tira > *:last-child { padding-inline-end: 0; }
}

/* --- Bloque de sección ---------------------------------------------------- */
.bloque { margin-top: var(--e-11); }
.bloque__cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 2px solid var(--tinta);
  margin-bottom: var(--e-6);
}
.bloque__titulo {
  font-size: var(--paso-3); font-weight: 800; letter-spacing: -0.02em; color: var(--tinta);
}
.bloque__titulo a { transition: color var(--dur-2) var(--sal); }
@media (hover: hover) and (pointer: fine) { .bloque__titulo a:hover { color: var(--enlace-activo); } }
.enlace-mas {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--paso--1); font-weight: 600; color: var(--enlace); white-space: nowrap;
  transition: color var(--dur-2) var(--sal);
}
.enlace-mas svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-3) var(--sal); }
@media (hover: hover) and (pointer: fine) {
  .enlace-mas:hover { color: var(--enlace-activo); }
  .enlace-mas:hover svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .enlace-mas svg { transition: none; } .enlace-mas:hover svg { transform: none; } }

.bloque__cuerpo { display: grid; gap: var(--e-7); }
@media (min-width: 900px) {
  .bloque--principal .bloque__cuerpo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--e-8); }
  .bloque--principal .bloque__rail { border-inline-start: var(--filete) solid var(--borde-fuerte); padding-inline-start: var(--e-7); }
}
.bloque__rail { display: grid; align-content: start; }
.bloque__rail .tarjeta--lista:first-child,
.bloque__rail .tarjeta--numerada:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 900px) {
  .bloque--doble .bloque__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
  .bloque--doble .bloque__mitad + .bloque__mitad { border-inline-start: var(--filete) solid var(--borde-fuerte); padding-inline-start: var(--e-8); }
}
.bloque__mitad { display: grid; gap: var(--e-5); align-content: start; }
.bloque__mitad-titulo {
  font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta);
  text-transform: uppercase; color: var(--enlace);
}

/* Rejilla de sección: una pieza ancha y las demás en columnas, separadas por
   filete como en la tira. Es el mismo idioma tipográfico de un periódico de
   papel —columnas con corondel— y es lo que hace que un bloque de sección se
   lea como sección y no como una lista larga.

   Antes estos bloques salían sin variante y se apilaban en una sola columna a
   todo el ancho: el CSS de la rejilla existía pero ninguna plantilla lo pedía. */
@media (min-width: 720px) { .bloque--rejilla .bloque__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .bloque--rejilla .bloque__cuerpo { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 0; }
  .bloque--rejilla .bloque__cuerpo:has(> :last-child:nth-child(3)) { grid-template-columns: 1.6fr 1fr 1fr; }
  .bloque--rejilla .bloque__cuerpo > * {
    padding-inline: var(--e-6);
    border-inline-start: var(--filete) solid var(--borde);
  }
  .bloque--rejilla .bloque__cuerpo > *:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .bloque--rejilla .bloque__cuerpo > *:last-child { padding-inline-end: 0; }
}

/* --- Franja En Vivo en portada -------------------------------------------- */
.franja-vivo { margin-top: var(--e-11); background: var(--fondo-2); padding-block: var(--e-8); }
.franja-vivo__cabecera { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-6); }
.insignia-vivo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta); text-transform: uppercase;
  color: #FFFFFF; background: var(--rojo-fuerte); padding: var(--e-1) var(--e-3); border-radius: var(--r-1);
}
:root[data-tema="oscuro"] .insignia-vivo { color: var(--alerta-tinta); background: var(--alerta); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .insignia-vivo { color: var(--alerta-tinta); background: var(--alerta); } }
.franja-vivo__titulo { font-size: var(--paso-2); font-weight: 800; letter-spacing: -0.02em; }
.franja-vivo__cuerpo { display: grid; gap: var(--e-7); }
@media (min-width: 900px) { .franja-vivo__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); } }

/* --- Franja multimedia ---------------------------------------------------- */
.franja-media { margin-top: var(--e-11); background: var(--azul-negro); color: #F2F5FB; padding-block: var(--e-9); }
.franja-media .bloque__cabecera { border-bottom-color: rgba(255,255,255,.22); }
.franja-media .bloque__titulo, .franja-media .tarjeta__titular { color: #F2F5FB; }
.franja-media .tarjeta__meta { color: #8894AD; }
.franja-media .etiqueta-seccion { color: #7BA5FF; }
.franja-media .enlace-mas { color: #7BA5FF; }
.franja-media .medios { background: #17233C; }
.franja-media .guardar { color: #8894AD; }
.franja-media__cuerpo { display: grid; gap: var(--e-6); }
@media (min-width: 720px) { .franja-media__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .franja-media__cuerpo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Boletín -------------------------------------------------------------- */
.boletin { margin-top: var(--e-11); border-block: 2px solid var(--tinta); padding-block: var(--e-8); }
.boletin__interior { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 900px) { .boletin__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--e-10); } }
.boletin__titulo { font-size: var(--paso-4); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; }
.boletin__texto { font-family: var(--fuente-texto); font-size: var(--paso-1); color: var(--tinta-meta); margin-top: var(--e-3); max-width: 46ch; }
.boletin__campos { display: grid; gap: var(--e-3); }
.boletin__fila { display: flex; gap: var(--e-2); }
.boletin__fila .campo { flex: 1 1 auto; }
.boletin__legal { font-size: var(--paso--2); color: var(--tinta-meta); }
.boletin__estado { font-size: var(--paso--1); font-weight: 600; min-height: 1.4em; }
.boletin__estado[data-estado="error"] { color: var(--alerta); }
.boletin__estado[data-estado="ok"] { color: var(--enlace); }

/* --- Campos de formulario ------------------------------------------------- */
.campo {
  width: 100%;
  background: var(--fondo);
  color: var(--tinta);
  border: var(--filete) solid var(--borde-campo);
  border-radius: var(--r-2);
  padding: var(--e-3) var(--e-4);
  font-size: var(--paso-0);
  transition: border-color var(--dur-2) var(--sal), box-shadow var(--dur-2) var(--sal);
}
.campo::placeholder { color: var(--tinta-meta); opacity: 1; }
.campo:focus-visible { outline: none; border-color: var(--anillo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--anillo) 28%, transparent); }
.etiqueta-campo { display: block; font-size: var(--paso--1); font-weight: 600; margin-bottom: var(--e-2); }
.ayuda-campo { font-size: var(--paso--2); color: var(--tinta-meta); margin-top: var(--e-1); }
.error-campo { font-size: var(--paso--2); color: var(--alerta); font-weight: 600; margin-top: var(--e-1); }

/* --- Pie ------------------------------------------------------------------ */
.pie { margin-top: var(--e-12); background: var(--azul-negro); color: #DCE3EF; padding-block: var(--e-10) var(--e-7); }

/* Cuando la página cierra con una franja a todo el ancho —el boletín, el banner
   del canal— el relleno inferior del <main> y el margen del pie se suman: 96 +
   96 px de nada entre una regla gruesa y el fondo azul del pie. Parecía un
   bloque que no había cargado. El cambio de color ya es toda la separación que
   hace falta, así que el pie va pegado. */
main:has(> .boletin:last-child),
main:has(> .wa--franja:last-child) { padding-block-end: 0; }
main:has(> .boletin:last-child) + .pie,
main:has(> .wa--franja:last-child) + .pie { margin-top: 0; }
.pie__rejilla { display: grid; gap: var(--e-8); }
@media (min-width: 720px) { .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .pie__rejilla { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.pie .marca { color: #F2F5FB; font-size: var(--paso-3); }
.pie .marca__dominio { color: #7BA5FF; }
.pie__lema { font-family: var(--fuente-texto); color: #8894AD; margin-top: var(--e-3); max-width: 34ch; }
.pie__titulo { font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta); text-transform: uppercase; color: #8894AD; margin-bottom: var(--e-4); }
.pie__lista { display: grid; gap: var(--e-3); }
.pie__lista a { font-size: var(--paso--1); font-weight: 500; color: #DCE3EF; transition: color var(--dur-2) var(--sal); }
@media (hover: hover) and (pointer: fine) { .pie__lista a:hover { color: #FFFFFF; } }
.pie__legal {
  margin-top: var(--e-9); padding-top: var(--e-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  font-size: var(--paso--2); color: #8894AD;
}

/* --- Migas y paginación --------------------------------------------------- */
.migas { padding-block: var(--e-5) 0; }
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; font-size: var(--paso--2); color: var(--tinta-meta); }
.migas li + li::before { content: "/"; margin-inline-end: var(--e-2); opacity: .5; }
.migas a { transition: color var(--dur-2) var(--sal); }
@media (hover: hover) and (pointer: fine) { .migas a:hover { color: var(--enlace-activo); } }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }

.paginacion { margin-top: var(--e-9); padding-top: var(--e-6); border-top: 2px solid var(--tinta); }
.paginacion .nav-links { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.paginacion .page-numbers {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding-inline: var(--e-3);
  font-size: var(--paso--1); font-weight: 600; border: var(--filete) solid var(--borde); border-radius: var(--r-2);
  transition: border-color var(--dur-2) var(--sal), color var(--dur-2) var(--sal), background-color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.paginacion .page-numbers:active { transform: scale(.97); }
.paginacion .current { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .paginacion a.page-numbers:hover { border-color: var(--enlace); color: var(--enlace-activo); } }

/* --- Cabecera de sección -------------------------------------------------- */
.masthead-seccion { padding-block: var(--e-8) var(--e-7); border-bottom: 3px solid var(--tinta); }
.masthead-seccion__titulo { font-size: var(--paso-5); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.masthead-seccion__texto { font-family: var(--fuente-texto); font-size: var(--paso-1); color: var(--tinta-meta); margin-top: var(--e-3); max-width: 58ch; }
.masthead-seccion__barra { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-4); margin-top: var(--e-5); font-size: var(--paso--1); color: var(--tinta-meta); }
.masthead-seccion__barra .rss { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--enlace); font-weight: 600; }
.masthead-seccion__barra .rss svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.archivo { padding-block: var(--e-7) var(--e-11); }
.archivo__cuerpo { display: grid; gap: var(--e-8); }
@media (min-width: 980px) { .archivo__cuerpo { grid-template-columns: minmax(0, 1fr) 316px; gap: var(--e-10); } }
.archivo__lista { display: grid; gap: var(--e-7); }
@media (min-width: 720px) { .archivo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.archivo__lista .tarjeta--destacada { grid-column: 1 / -1; }
.lateral { display: grid; gap: var(--e-8); align-content: start; }
@media (min-width: 980px) { .lateral { border-inline-start: var(--filete) solid var(--borde-fuerte); padding-inline-start: var(--e-7); position: sticky; top: calc(var(--alto-proto) + var(--alto-cabecera) + 24px); } }
.widget__titulo { font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta); text-transform: uppercase; color: var(--tinta); padding-bottom: var(--e-3); border-bottom: 2px solid var(--tinta); margin-bottom: var(--e-2); }

/* --- Artículo ------------------------------------------------------------- */
.progreso { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: var(--z-pista); background: transparent; pointer-events: none; }
.progreso__barra { height: 100%; background: var(--azul-latusa); transform: scaleX(0); transform-origin: left; will-change: transform; }

.articulo { padding-block: var(--e-6) var(--e-11); }
.articulo__encabezado { max-width: var(--ancho-articulo); margin-inline: auto; padding-block: var(--e-6) var(--e-7); }
.articulo__titulo { font-size: var(--paso-6); font-weight: 800; line-height: var(--lh-apertura); letter-spacing: var(--track-apertura); margin-top: var(--e-4); }
.articulo__entradilla { font-family: var(--fuente-texto); font-size: var(--paso-2); line-height: 1.45; color: var(--tinta-cuerpo); margin-top: var(--e-5); max-width: 56ch; }
.articulo__firma { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-6); padding-top: var(--e-5); border-top: var(--filete) solid var(--borde); font-size: var(--paso--1); color: var(--tinta-meta); }
.articulo__firma a { color: var(--tinta); font-weight: 600; }
.articulo__firma .sep { opacity: .5; }
.articulo__acciones { display: flex; gap: var(--e-2); margin-inline-start: auto; }
.accion {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--paso--1); font-weight: 600; color: var(--tinta);
  border: var(--filete) solid var(--borde); border-radius: var(--r-2);
  padding: var(--e-2) var(--e-3);
  transition: border-color var(--dur-2) var(--sal), color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.accion svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.accion:active { transform: scale(.97); }
.accion[aria-pressed="true"] { color: var(--enlace); border-color: var(--enlace); }
.accion[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .accion:hover { border-color: var(--enlace); color: var(--enlace-activo); } }

.articulo__medios { margin-block: var(--e-4) var(--e-3); max-width: var(--ancho-articulo); margin-inline: auto; }
/* Misma proporción que la apertura de portada: a 16:9 la fotografía empujaba
   el arranque del texto casi una pantalla hacia abajo. */
/* La portada del articulo va 16:9: es el formato en que se producen. */
.pie-foto { font-size: var(--paso--2); color: var(--tinta-meta); margin-top: var(--e-3); max-width: 70ch; }
.pie-foto strong { color: var(--tinta); font-weight: 600; }

.articulo__reticula { display: grid; }
@media (min-width: 1160px) {
  .articulo__reticula { grid-template-columns: 68px minmax(0, var(--ancho-texto)) 68px; justify-content: center; gap: var(--e-8); }
  .articulo__rail { position: sticky; top: calc(var(--alto-proto) + var(--alto-cabecera) + 20px); align-self: start; display: grid; gap: var(--e-2); justify-items: center; }
}
.articulo__rail { display: none; }
@media (min-width: 1160px) { .articulo__rail { display: grid; } }
.articulo__principal { max-width: var(--ancho-texto); margin-inline: auto; width: 100%; }

.cuerpo { font-family: var(--fuente-texto); font-size: var(--paso-1); line-height: var(--lh-cuerpo); color: var(--tinta-cuerpo); }
.cuerpo > * + * { margin-top: var(--e-6); }
.cuerpo p { max-width: var(--ancho-texto); }
.cuerpo h2 { font-family: var(--fuente-ui); font-size: var(--paso-3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--tinta); margin-top: var(--e-9); }
.cuerpo h3 { font-family: var(--fuente-ui); font-size: var(--paso-2); font-weight: 700; color: var(--tinta); margin-top: var(--e-8); }
.cuerpo a { color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-2) var(--sal); }
@media (hover: hover) and (pointer: fine) { .cuerpo a:hover { color: var(--enlace-activo); text-decoration-thickness: 2px; } }
.cuerpo strong { font-weight: 600; }
/* El reset quita los marcadores a toda lista con clase, y el editor de
   WordPress se las pone: dentro del cuerpo del artículo se restituyen. */
.cuerpo ul, .cuerpo ol { padding-inline-start: var(--e-6); }
.cuerpo ul { list-style: disc; }
.cuerpo ol { list-style: decimal; }
.cuerpo li + li { margin-top: var(--e-3); }
.cuerpo li::marker { color: var(--tinta-meta); }
.cuerpo blockquote {
  font-size: var(--paso-3); line-height: 1.3; font-weight: 400; color: var(--tinta);
  border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
  padding-block: var(--e-6); margin-block: var(--e-9);
}
.cuerpo blockquote cite { display: block; font-family: var(--fuente-ui); font-size: var(--paso--1); font-style: normal; font-weight: 600; color: var(--tinta-meta); margin-top: var(--e-4); }
.cuerpo figure { margin-block: var(--e-8); }
.destacado-dato {
  display: grid; gap: var(--e-2);
  background: var(--fondo-2); padding: var(--e-6); border-radius: var(--r-3);
  font-family: var(--fuente-ui);
}
.destacado-dato__cifra { font-size: var(--paso-5); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--enlace); font-variant-numeric: tabular-nums; }
.destacado-dato__texto { font-size: var(--paso--1); color: var(--tinta-meta); max-width: 44ch; }

.autor-caja { display: grid; gap: var(--e-3); margin-top: var(--e-9); padding-top: var(--e-6); border-top: 2px solid var(--tinta); }
.autor-caja__nombre { font-size: var(--paso-1); font-weight: 700; }
.autor-caja__bio { font-family: var(--fuente-texto); color: var(--tinta-meta); max-width: 62ch; }
.autor-caja__enlaces { display: flex; gap: var(--e-4); font-size: var(--paso--1); font-weight: 600; color: var(--enlace); }

.relacionados { margin-top: var(--e-10); }
.relacionados__cuerpo { display: grid; gap: var(--e-6); }
@media (min-width: 720px) { .relacionados__cuerpo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Liveblog ------------------------------------------------------------- */
.vivo { padding-block: var(--e-7) var(--e-11); }
.vivo__encabezado { max-width: 62rem; }
.vivo__titulo { font-size: var(--paso-5); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; margin-top: var(--e-4); }
.vivo__resumen { font-family: var(--fuente-texto); font-size: var(--paso-1); color: var(--tinta-cuerpo); margin-top: var(--e-4); max-width: 60ch; }
.vivo__estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-5); font-size: var(--paso--1); color: var(--tinta-meta); }
.vivo__cuerpo { display: grid; gap: var(--e-8); margin-top: var(--e-8); }
@media (min-width: 980px) { .vivo__cuerpo { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-10); } }

.aviso-nuevas {
  position: sticky; top: calc(var(--alto-proto) + var(--alto-cabecera) + 12px); z-index: var(--z-elevado);
  justify-self: center; margin-bottom: var(--e-4);
  display: inline-flex; align-items: center; gap: var(--e-2);
  background: var(--tinta); color: var(--fondo);
  font-size: var(--paso--1); font-weight: 600;
  padding: var(--e-3) var(--e-5); border-radius: var(--r-pastilla);
  box-shadow: var(--sombra-2);
  opacity: 0; transform: translateY(-8px) scale(.96); pointer-events: none;
  transition: opacity var(--dur-3) var(--sal), transform var(--dur-3) var(--sal);
}
.aviso-nuevas[data-visible="true"] { opacity: 1; transform: none; pointer-events: auto; }
.aviso-nuevas:active { transform: scale(.97); }

.liveblog { display: grid; }
.entrada-vivo { display: grid; gap: var(--e-4); padding-block: var(--e-6); border-top: var(--filete) solid var(--borde); }
@media (min-width: 640px) { .entrada-vivo { grid-template-columns: 104px minmax(0, 1fr); gap: var(--e-5); } }
.entrada-vivo__marca { display: grid; gap: var(--e-1); align-content: start; padding-top: 2px; }
.entrada-vivo__hora { font-size: var(--paso--1); font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.entrada-vivo__relativa { font-size: var(--paso--2); color: var(--tinta-meta); }
.entrada-vivo__cuerpo { position: relative; padding-inline-start: var(--e-6); border-inline-start: 2px solid var(--borde); }
.entrada-vivo__cuerpo::before {
  content: ""; position: absolute; inset-inline-start: -6px; inset-block-start: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--borde-fuerte); box-shadow: 0 0 0 3px var(--fondo);
}
.entrada-vivo--destacada .entrada-vivo__cuerpo::before { background: var(--alerta-pura); }
.entrada-vivo__titulo { font-size: var(--paso-2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.entrada-vivo__texto { font-family: var(--fuente-texto); color: var(--tinta-cuerpo); margin-top: var(--e-3); max-width: var(--ancho-texto); }
.entrada-vivo--nueva { animation: entra-entrada var(--dur-4) var(--sal) both; }
@keyframes entra-entrada { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .entrada-vivo--nueva { animation: aparece var(--dur-3) ease both; }
  .aviso-nuevas { transition: opacity var(--dur-3) ease; transform: none; }
  .aviso-nuevas[data-visible="true"] { transform: none; }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* --- Overlay de búsqueda -------------------------------------------------- */
.buscador {
  position: fixed; inset: var(--alto-proto) 0 0 0; z-index: var(--z-modal);
  background: var(--fondo);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  /* visibility cambia de golpe (0s) y al cerrar espera a que acabe el fundido:
     así el foco puede entrar en el primer frame tras abrir. */
  transition: opacity var(--dur-2) var(--suave), transform var(--dur-2) var(--suave), visibility 0s linear var(--dur-2);
}
.buscador[data-abierto="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-3) var(--sal), transform var(--dur-3) var(--sal), visibility 0s;
}
@media (prefers-reduced-motion: reduce) { .buscador { transform: none; } }
.buscador__barra { border-bottom: var(--filete) solid var(--borde); }
.buscador__fila { display: flex; align-items: center; gap: var(--e-3); height: 74px; }
.buscador__icono { color: var(--tinta-meta); display: grid; place-items: center; flex: none; }
.buscador__icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.buscador__entrada {
  flex: 1 1 auto; min-width: 0; background: none; border: 0;
  font-size: var(--paso-3); font-weight: 700; letter-spacing: -0.02em; color: var(--tinta);
}
.buscador__entrada::placeholder { color: var(--tinta-meta); font-weight: 500; letter-spacing: 0; }
.buscador__entrada:focus-visible { outline: none; }
.buscador__filtros { border-bottom: var(--filete) solid var(--borde); background: var(--fondo-2); }
.buscador__filtros-fila { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: end; padding-block: var(--e-4); }
.filtro { display: grid; gap: var(--e-1); }
.filtro__rotulo { font-size: var(--paso--2); font-weight: 600; color: var(--tinta-meta); }
.filtro .campo { padding: var(--e-2) var(--e-3); font-size: var(--paso--1); min-width: 150px; background: var(--fondo); }
.buscador__limpiar { margin-inline-start: auto; font-size: var(--paso--1); font-weight: 600; color: var(--enlace); }
.buscador__panel { overflow-y: auto; overscroll-behavior: contain; }
.buscador__estado { padding-block: var(--e-5); font-size: var(--paso--1); color: var(--tinta-meta); }
.buscador__resultados { display: grid; padding-bottom: var(--e-10); }
.resultado {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: center;
  padding: var(--e-4); border-top: var(--filete) solid var(--borde); border-radius: var(--r-2);
  transition: background-color var(--dur-1) var(--suave);
}
.resultado[data-activo="true"] { background: var(--fondo-3); }
.resultado__titulo { font-size: var(--paso-1); font-weight: 600; line-height: 1.25; color: var(--tinta); }
.resultado__titulo mark { background: transparent; color: var(--enlace); font-weight: 800; }
.resultado__meta { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--paso--2); color: var(--tinta-meta); margin-top: var(--e-2); }
.resultado__medios { width: 92px; aspect-ratio: 16 / 10; border-radius: var(--r-1); overflow: hidden; background: var(--fondo-2); flex: none; }
.buscador__vacio { padding-block: var(--e-10); display: grid; gap: var(--e-3); justify-items: start; }
.buscador__vacio h2 { font-size: var(--paso-2); font-weight: 700; }
.buscador__vacio p { color: var(--tinta-meta); font-family: var(--fuente-texto); max-width: 48ch; }
.buscador__sugerencias { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.pastilla {
  font-size: var(--paso--1); font-weight: 600; color: var(--tinta);
  background: var(--fondo-2); border: var(--filete) solid var(--borde);
  padding: var(--e-2) var(--e-4); border-radius: var(--r-pastilla);
  transition: border-color var(--dur-2) var(--sal), color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.pastilla:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pastilla:hover { border-color: var(--enlace); color: var(--enlace-activo); } }
.buscador__pista { display: flex; flex-wrap: wrap; gap: var(--e-4); padding-block: var(--e-4); font-size: var(--paso--2); color: var(--tinta-meta); border-top: var(--filete) solid var(--borde); }
.tecla {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px;
  font-family: var(--fuente-mono); font-size: 11px; color: var(--tinta);
  background: var(--fondo-2); border: var(--filete) solid var(--borde-fuerte); border-radius: var(--r-1);
  margin-inline-end: var(--e-1);
}

/* --- Menú móvil ----------------------------------------------------------- */
.panel-movil {
  position: fixed; inset: var(--alto-proto) 0 0 0; z-index: var(--z-modal);
  background: var(--fondo); padding: var(--e-6) var(--canal) var(--e-10);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--suave), transform var(--dur-2) var(--suave), visibility 0s linear var(--dur-2);
}
.panel-movil[data-abierto="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-3) var(--sal), transform var(--dur-3) var(--sal), visibility 0s;
}
.panel-movil__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e-7); }
.panel-movil__lista { display: grid; }
.panel-movil__lista a {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--paso-3); font-weight: 700; letter-spacing: -0.02em;
  padding-block: var(--e-4); border-bottom: var(--filete) solid var(--borde);
}
.panel-movil__lista a svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta-meta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --- Guardados ------------------------------------------------------------ */
.guardados { padding-block: var(--e-8) var(--e-11); }
.guardados__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-4); padding-bottom: var(--e-4); border-bottom: 3px solid var(--tinta); }
.guardados__titulo { font-size: var(--paso-5); font-weight: 800; letter-spacing: -0.03em; }
.guardados__cuenta { font-size: var(--paso--1); color: var(--tinta-meta); }
.guardados__lista { display: grid; margin-top: var(--e-2); }
.guardado { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: start; padding-block: var(--e-5); border-bottom: var(--filete) solid var(--borde); }
.guardado__titulo { font-size: var(--paso-2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.guardado__meta { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--paso--2); color: var(--tinta-meta); margin-top: var(--e-2); }
.vacio { display: grid; gap: var(--e-4); justify-items: start; padding-block: var(--e-10); max-width: 52ch; }
.vacio__titulo { font-size: var(--paso-3); font-weight: 700; letter-spacing: -0.02em; }
.vacio__texto { font-family: var(--fuente-texto); font-size: var(--paso-1); color: var(--tinta-meta); }
.nota-sincronizacion { margin-top: var(--e-7); padding-top: var(--e-5); border-top: var(--filete) solid var(--borde); font-size: var(--paso--2); color: var(--tinta-meta); max-width: 62ch; }

/* --- Reproductores -------------------------------------------------------- */
.reproductor { background: var(--azul-negro); border-radius: var(--r-3); overflow: hidden; color: #F2F5FB; }
.reproductor__lienzo { position: relative; aspect-ratio: 16 / 9; background: #17233C; display: grid; place-items: center; }
.reproductor--audio .reproductor__lienzo { aspect-ratio: auto; padding: var(--e-7); }
.reproductor__controles { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: rgba(0,0,0,.35); }
.reproductor--audio .reproductor__controles { background: rgba(255,255,255,.05); }
.control {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-2);
  color: #F2F5FB;
  transition: background-color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.control svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.control svg[data-relleno] { fill: currentColor; stroke: none; }
.control:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .control:hover { background: rgba(255,255,255,.14); } }
.control:focus-visible { outline-color: #7BA5FF; }
.reproductor__tiempo { font-size: var(--paso--2); font-variant-numeric: tabular-nums; color: #DCE3EF; flex: none; }
.linea-tiempo { flex: 1 1 auto; min-width: 0; height: 26px; display: grid; align-items: center; cursor: pointer; }
.linea-tiempo__pista { height: 4px; border-radius: var(--r-pastilla); background: rgba(255,255,255,.22); position: relative; }
.linea-tiempo__avance { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0%; background: var(--rojo-alerta); border-radius: inherit; }
.reproductor--audio .linea-tiempo__avance { background: #4A82F3; }
.linea-tiempo__puntero { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #FFFFFF; transform: translate(-50%, -50%) scale(.7); transition: transform var(--dur-2) var(--sal); }
.linea-tiempo:hover .linea-tiempo__puntero, .linea-tiempo:focus-visible .linea-tiempo__puntero { transform: translate(-50%, -50%) scale(1); }
.reproductor__cartel { font-size: var(--paso--2); color: #8894AD; padding: var(--e-3) var(--e-4) var(--e-4); }
.reproductor__velocidad { font-size: var(--paso--2); font-weight: 700; color: #DCE3EF; padding-inline: var(--e-2); height: 28px; border-radius: var(--r-2); border: 1px solid rgba(255,255,255,.22); }
.reproductor__onda { display: flex; align-items: end; gap: 2px; height: 46px; width: 100%; }
.reproductor__onda span { flex: 1 1 auto; background: rgba(255,255,255,.20); border-radius: 1px; }
.reproductor__onda span[data-activa="true"] { background: #4A82F3; }

/* --- Galería -------------------------------------------------------------- */
.galeria { position: relative; }
.galeria__pista { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--e-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-2); }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__lamina { scroll-snap-align: start; aspect-ratio: 16 / 9; background: var(--fondo-2); border-radius: var(--r-2); overflow: hidden; }
.galeria__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-3); font-size: var(--paso--2); color: var(--tinta-meta); }
.galeria__navegacion { display: flex; gap: var(--e-1); }
.galeria__navegacion .boton-icono svg { transform: none; }
.galeria__contador { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- 404 y utilidades ----------------------------------------------------- */

.aviso {
  position: fixed; inset-block-end: var(--e-6); inset-inline-start: 50%;
  z-index: var(--z-aviso);
  display: flex; align-items: center; gap: var(--e-4);
  max-inline-size: min(92vw, 30rem);
  background: var(--tinta); color: var(--fondo);
  font-size: var(--paso--1); font-weight: 600;
  padding: var(--e-3) var(--e-5); border-radius: var(--r-pastilla);
  box-shadow: var(--sombra-2);
  opacity: 0; transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity var(--dur-3) var(--sal), transform var(--dur-3) var(--sal);
}
.aviso[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }
/* Con acción el aviso deja de ser decorativo: hay que poder pulsarlo. */
.aviso[data-accion="true"] { pointer-events: auto; }
.aviso__texto { min-width: 0; }
.aviso__accion {
  flex: none;
  color: var(--fondo);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--e-1) var(--e-2);
  margin: calc(var(--e-1) * -1) calc(var(--e-2) * -1);
  border-radius: var(--r-1);
  transition: opacity var(--dur-2) var(--sal);
}
@media (hover: hover) and (pointer: fine) { .aviso__accion:hover { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .aviso { transition: opacity var(--dur-2) linear; transform: translate(-50%, 0); } }

/* --- Volver arriba -------------------------------------------------------- */
/* El href="#top" sube sin JavaScript; el JS solo decide cuándo se ve y devuelve
   el foco al principio del documento, que es lo que el navegador no hace. */
.arriba {
  position: fixed;
  inset-block-end: var(--e-6);
  inset-inline-end: var(--e-6);
  z-index: var(--z-aviso);
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  border: var(--filete) solid var(--borde-fuerte);
  border-radius: var(--r-pastilla);
  background: var(--fondo);
  color: var(--tinta);
  font-size: var(--paso--1); font-weight: var(--peso-menu);
  box-shadow: var(--sombra-1);
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--dur-3) var(--sal), transform var(--dur-3) var(--sal), background-color var(--dur-2) var(--sal);
}
.arriba[data-visible="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.arriba svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arriba:active { transform: translateY(0) scale(.97); }
@media (hover: hover) and (pointer: fine) { .arriba:hover { background: var(--fondo-2); } }
@media (max-width: 719px) { .arriba span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .arriba { padding: var(--e-3); } }
@media (prefers-reduced-motion: reduce) { .arriba { transition: opacity var(--dur-2) linear; transform: none; } .arriba[data-visible="true"] { transform: none; } }

/* --- Esqueletos de carga -------------------------------------------------- */
/* Tienen la forma exacta de un resultado: si el hueco cambia de tamaño cuando
   llegan los datos, el esqueleto ha mentido y salta la maquetación. */
.esqueleto {
  display: block;
  border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--fondo-2) 0%, var(--borde) 50%, var(--fondo-2) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .esqueleto { animation: brillo 1400ms linear infinite; }
}
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.esqueleto--titulo { block-size: 1.1em; inline-size: min(38ch, 80%); margin-block-end: var(--e-2); }
.esqueleto--meta { block-size: .8em; inline-size: 22ch; max-inline-size: 60%; }
.esqueleto--medios { inline-size: 112px; block-size: 63px; border-radius: var(--r-2); }
.resultado--esqueleto { pointer-events: none; }

/* --- Transición entre páginas --------------------------------------------- */
/* Continuidad de portada a nota: la foto de la tarjeta pulsada y la de apertura
   del artículo son la misma pieza. Donde no exista la API no pasa nada. */
@view-transition { navigation: auto; }
.articulo__medios img { view-transition-name: nota-medio; }
::view-transition-old(root) { animation-duration: 160ms; }
::view-transition-new(root) { animation-duration: 220ms; }
::view-transition-group(nota-medio) { animation-duration: 320ms; animation-timing-function: var(--sal); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .articulo__medios img { view-transition-name: none; }
}

/* --- Portada sin nada publicado ------------------------------------------- */
.portada-vacia {
  display: grid; gap: var(--e-4); justify-items: start;
  max-inline-size: 54ch;
  padding-block: var(--e-11) var(--e-10);
}
.portada-vacia__rotulo {
  font-size: var(--paso--2); font-weight: var(--peso-menu);
  letter-spacing: var(--track-etiqueta); text-transform: uppercase;
  color: var(--enlace);
}
.portada-vacia__titulo { font-size: var(--paso-4); font-weight: var(--peso-titular); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.portada-vacia__texto { font-family: var(--fuente-texto); font-size: var(--paso-1); line-height: 1.55; color: var(--tinta-cuerpo); }
@media (max-width: 719px) { .portada-vacia { padding-block: var(--e-9) var(--e-8); } .portada-vacia__titulo { font-size: var(--paso-3); } }

.cuerpo-bloqueado { overflow: hidden; }

/* Transición breve al cambiar de tema: solo color, nunca layout. */
html.transicion-tema, html.transicion-tema body { transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
@media (prefers-reduced-motion: reduce) { html.transicion-tema, html.transicion-tema body { transition: none; } }

/* La destacada del archivo ocupa dos columnas: se aplana para no comerse el
   pliegue entero. */
@media (min-width: 720px) {
  .archivo__lista .tarjeta--destacada > .medios { aspect-ratio: 16 / 9; }
}

/* --- Franja de Facebook ----------------------------------------------------
   Es el único sitio del diseño donde la tarjeta con borde es la afordancia
   correcta: la pieza de origen ya es un objeto acotado en otra plataforma.
   Las imágenes las sirve nuestro servidor; no hay incrustación de Meta.    */
.franja-fb { margin-top: var(--e-11); background: var(--fondo-2); padding-block: var(--e-9); }
.franja-fb__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-5); font-size: var(--paso--1); color: var(--tinta-meta); }
.franja-fb__meta span { font-variant-numeric: tabular-nums; }
.franja-fb__cuerpo { display: grid; gap: var(--e-5); }
@media (min-width: 720px) { .franja-fb__cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .franja-fb__cuerpo { grid-template-columns: 1.25fr 1fr 1fr; gap: var(--e-6); } }
.franja-fb__columna { display: grid; gap: var(--e-5); align-content: start; }

.post-fb {
  display: grid; gap: var(--e-3); align-content: start;
  background: var(--fondo);
  border: var(--filete) solid var(--borde);
  border-radius: var(--r-3);
  padding: var(--e-5);
}
.post-fb__cabecera { display: flex; align-items: center; gap: var(--e-3); }
.post-fb__marca {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-2);
  background: var(--tinta); color: var(--fondo);
  font-weight: 800; font-size: var(--paso--1); letter-spacing: -0.04em;
  flex: none;
}
.post-fb__quien { display: grid; gap: 1px; min-width: 0; }
.post-fb__pagina { font-size: var(--paso--1); font-weight: 700; color: var(--tinta); }
.post-fb__hora { font-size: var(--paso--2); color: var(--tinta-meta); }
.post-fb__texto { font-size: var(--paso-0); line-height: 1.5; color: var(--tinta-cuerpo); }
.post-fb--destacado .post-fb__texto { font-size: var(--paso-1); line-height: 1.45; }

/* Medios: la foto de la pieza dominante pesa más que la de las compactas. */
.post-fb__medios { margin-block: var(--e-1); aspect-ratio: 16 / 9; }
.post-fb--destacado .post-fb__medios { aspect-ratio: 16 / 10; }

/* Álbum: mosaico 1 + 2, como lo publica Facebook. */
.post-fb__album {
  position: relative;
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  aspect-ratio: 16 / 10;
  margin-block: var(--e-1);
  border-radius: var(--r-1);
  overflow: hidden;
}
.post-fb__pieza { position: relative; display: block; overflow: hidden; background: var(--fondo-2); }
.post-fb__pieza:first-child { grid-row: span 2; }
.post-fb__mas {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(11, 18, 32, .64);
  color: #FFFFFF;
  font-size: var(--paso-1); font-weight: 800; letter-spacing: -0.02em;
}
.post-fb__sello {
  position: absolute; left: var(--e-2); bottom: var(--e-2);
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--paso--2); font-weight: 700;
  color: #FFFFFF; background: rgba(11, 18, 32, .72);
  padding: 3px var(--e-2); border-radius: var(--r-1);
}
.post-fb__sello svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Tarjeta de enlace: la vista previa que arma Facebook con nuestro artículo. */
.post-fb__enlace {
  display: grid;
  margin-block: var(--e-1);
  border: var(--filete) solid var(--borde);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--fondo-2);
  transition: border-color var(--dur-2) var(--sal);
}
.post-fb__enlace .medios { border-radius: 0; aspect-ratio: 1.91 / 1; }
.post-fb__enlace-pie { display: grid; gap: 3px; padding: var(--e-3) var(--e-4) var(--e-4); }
.post-fb__enlace-dominio { font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta); text-transform: uppercase; color: var(--tinta-meta); }
.post-fb__enlace-titulo { font-size: var(--paso-0); font-weight: 700; line-height: var(--lh-tarjeta); color: var(--tinta); }
.post-fb__enlace-sumario { font-size: var(--paso--1); line-height: 1.45; color: var(--tinta-meta); }
@media (hover: hover) and (pointer: fine) {
  .post-fb__enlace:hover { border-color: var(--borde-fuerte); }
  .post-fb__enlace:hover .post-fb__enlace-titulo { color: var(--enlace-activo); }
}

.post-fb__cifras { font-size: var(--paso--2); color: var(--tinta-meta); font-variant-numeric: tabular-nums; }
.post-fb__cifras .sep { opacity: .5; }
.post-fb__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1);
  margin-top: var(--e-1); padding-top: var(--e-3);
  border-top: var(--filete) solid var(--borde);
}
.accion-fb {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--paso--1); font-weight: 600; color: var(--tinta);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-2);
  transition: background-color var(--dur-2) var(--sal), color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.accion-fb:active { transform: scale(.97); }
.accion-fb--fantasma { color: var(--tinta-meta); font-weight: 500; }
.accion-fb[data-estado="cargando"] { color: var(--tinta-meta); cursor: progress; }
.accion-fb[data-estado="error"] { color: var(--alerta); }
.post-fb__salir { margin-inline-start: auto; }
@media (hover: hover) and (pointer: fine) {
  .accion-fb:hover { background: var(--fondo-2); color: var(--enlace-activo); }
}
.fb-oficial { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 34px; }
.fb-oficial--maqueta {
  font-size: var(--paso--2); font-weight: 600; color: var(--enlace);
  background: var(--fondo-3); border-radius: var(--r-2);
  padding: var(--e-2) var(--e-3);
  animation: aparece var(--dur-3) var(--sal) both;
}

/* Cierre: la llamada a seguir la página y el aviso de privacidad, en una sola
   línea, para no repetir una tarjeta más dentro de la retícula. */
.franja-fb__cierre {
  display: grid; gap: var(--e-5); align-items: center;
  margin-top: var(--e-7); padding-top: var(--e-5);
  border-top: var(--filete) solid var(--borde-fuerte);
}
@media (min-width: 900px) { .franja-fb__cierre { grid-template-columns: auto minmax(0, 1fr); gap: var(--e-8); } }
.fb-seguir {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3);
  background: var(--fondo); border: var(--filete) solid var(--borde);
  border-radius: var(--r-3); padding: var(--e-4) var(--e-5);
  transition: border-color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.fb-seguir:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .fb-seguir:hover { border-color: var(--borde-fuerte); } }
.fb-seguir__titulo { font-size: var(--paso-1); font-weight: 700; letter-spacing: -0.015em; color: var(--tinta); }
.fb-seguir__accion { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--paso--1); font-weight: 600; color: var(--enlace); }
.franja-fb__aviso { font-size: var(--paso--2); line-height: 1.55; color: var(--tinta-meta); max-width: 72ch; }

/* --- Widget de Facebook en columna ----------------------------------------
   Vive en el riel de la apertura y en el lateral de sección. Usa la gramática
   de la tarjeta de lista (miniatura cuadrada + texto), no la de la franja: en
   una columna estrecha, repetir la tarjeta con borde haría ruido.         */
.widget-fb { display: grid; gap: var(--e-4); align-content: start; }
.apertura__rail .widget-fb { margin-top: var(--e-2); padding-top: var(--e-6); border-top: var(--filete) solid var(--borde); }

.widget-fb__pagina {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3);
  background: var(--fondo-2);
  border-radius: var(--r-3);
  transition: background-color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.widget-fb__pagina:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .widget-fb__pagina:hover { background: var(--fondo-3); } }
.widget-fb__quien { display: grid; gap: 1px; min-width: 0; }
.widget-fb__nombre { font-size: var(--paso--1); font-weight: 700; color: var(--tinta); }
.widget-fb__seguidores { font-size: var(--paso--2); color: var(--tinta-meta); font-variant-numeric: tabular-nums; }
.widget-fb__seguir {
  margin-inline-start: auto; flex: none;
  display: inline-flex; align-items: center; gap: var(--e-1);
  font-size: var(--paso--2); font-weight: 700; color: var(--enlace);
  white-space: nowrap;
}
.widget-fb__seguir svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.widget-fb__lista { display: grid; }
.widget-fb__lista > li + li { margin-top: var(--e-4); padding-top: var(--e-4); border-top: var(--filete) solid var(--borde); }

.fb-mini { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--e-3); align-items: start; }
.fb-mini__medios { aspect-ratio: 1 / 1; align-self: start; }
.fb-mini__cuerpo { display: grid; gap: var(--e-1); min-width: 0; }
.fb-mini__texto {
  font-size: var(--paso--1); line-height: 1.35; font-weight: var(--peso-meta); color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--dur-2) var(--sal);
}
.fb-mini__meta { font-size: var(--paso--2); color: var(--tinta-meta); font-variant-numeric: tabular-nums; }
.fb-mini__meta .sep { opacity: .5; }
@media (hover: hover) and (pointer: fine) { .fb-mini:hover .fb-mini__texto { color: var(--enlace-activo); } }
.fb-mini__marca {
  position: absolute; left: var(--e-1); bottom: var(--e-1);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #FFFFFF; background: rgba(11, 18, 32, .72);
  padding: 4px 6px; border-radius: var(--r-1);
}
.fb-mini__marca svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fb-mini__marca:not(.fb-mini__marca--album) svg { fill: currentColor; stroke: none; width: 11px; height: 11px; }

/* ==========================================================================
   Páginas nuevas: búsqueda, 404, página estática, firma y comentarios.
   Todas reutilizan la retícula de archivo y los campos ya definidos.
   ========================================================================== */

/* --- Búsqueda (search.php) y 404 ------------------------------------------ */
.pastillas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pastilla { display: inline-block; }

.busqueda__form {
  display: grid; gap: var(--e-4);
  margin-top: var(--e-6);
  align-items: end;
}
@media (min-width: 720px) {
  .busqueda__form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--e-4); }
  .busqueda__form--suelto { grid-template-columns: minmax(0, 1fr) auto; }
}
.busqueda__form .boton { height: 48px; }
.busqueda__form--suelto { max-width: 44rem; }
.masthead-seccion__codigo {
  font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta);
  text-transform: uppercase; color: var(--alerta); margin-bottom: var(--e-3);
}
.busqueda mark { background: var(--fondo-3); color: var(--tinta); padding-inline: 2px; border-radius: var(--r-1); }
:root[data-tema="oscuro"] .busqueda mark { background: #23375E; }

.estado-vacio { padding-block: var(--e-8) var(--e-9); }
.estado-vacio__titulo { font-size: var(--paso-3); font-weight: 700; letter-spacing: -0.015em; }
.estado-vacio__texto { font-family: var(--fuente-texto); font-size: var(--paso-1); line-height: 1.55; color: var(--tinta-cuerpo); margin-top: var(--e-4); max-width: 56ch; }
.estado-vacio__rotulo {
  font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta);
  text-transform: uppercase; color: var(--tinta-meta); margin-top: var(--e-7); margin-bottom: var(--e-3);
}

.no-encontrada .relacionados { margin-top: var(--e-9); }
.secciones-sueltas {
  display: grid; gap: var(--e-3);
  margin-top: var(--e-8); padding-top: var(--e-6);
  border-top: var(--filete) solid var(--borde);
}
.secciones-sueltas__rotulo {
  font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta);
  text-transform: uppercase; color: var(--tinta-meta);
}

/* --- Página estática (page.php) ------------------------------------------- */
.pagina { padding-block: var(--e-6) var(--e-11); }
.pagina__encabezado {
  max-width: var(--ancho-articulo); margin-inline: auto;
  padding-block: var(--e-6) var(--e-7);
  border-bottom: 3px solid var(--tinta);
}
.pagina__titulo { font-size: var(--paso-5); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
.pagina__lema { font-family: var(--fuente-texto); font-size: var(--paso-2); line-height: 1.45; color: var(--tinta-cuerpo); margin-top: var(--e-4); max-width: 52ch; }
.pagina__meta { font-size: var(--paso--1); color: var(--tinta-meta); margin-top: var(--e-5); }
.pagina__cuerpo { max-width: var(--ancho-articulo); margin-inline: auto; padding-top: var(--e-7); }

.redaccion { max-width: var(--ancho-articulo); margin-inline: auto; margin-top: var(--e-10); }
.redaccion__lista { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
@media (min-width: 720px) { .redaccion__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-6); } }
.redaccion__lista--columna { grid-template-columns: minmax(0, 1fr); margin-top: var(--e-3); }
@media (min-width: 720px) { .redaccion__lista--columna { grid-template-columns: minmax(0, 1fr); } }

.ficha-firma {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3); border-radius: var(--r-3);
  transition: background-color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.ficha-firma:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .ficha-firma:hover { background: var(--fondo-2); }
  .ficha-firma:hover .ficha-firma__nombre { color: var(--enlace-activo); }
}
.ficha-firma__cuerpo { display: grid; gap: 1px; min-width: 0; }
.ficha-firma__nombre { font-size: var(--paso--1); font-weight: 700; color: var(--tinta); transition: color var(--dur-2) var(--sal); }
.ficha-firma__puesto { font-size: var(--paso--2); color: var(--tinta-meta); }

/* Monograma en vez de fotografía: no inventamos caras de gente que no existe. */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--fondo-3); color: var(--enlace-activo);
  font-size: var(--paso--1); font-weight: 800; letter-spacing: -0.02em;
}
.avatar--grande { width: 76px; height: 76px; font-size: var(--paso-3); }
.avatar--redaccion { background: var(--tinta); color: var(--fondo); }

/* --- Archivo de firma (author.php) ---------------------------------------- */
.masthead-autor {
  display: grid; gap: var(--e-5);
  padding-block: var(--e-8) var(--e-7);
  border-bottom: 3px solid var(--tinta);
}
@media (min-width: 720px) {
  .masthead-autor { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--e-6); }
}
.masthead-autor__nombre { font-size: var(--paso-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.masthead-autor__puesto {
  font-size: var(--paso--2); font-weight: 700; letter-spacing: var(--track-etiqueta);
  text-transform: uppercase; color: var(--enlace); margin-top: var(--e-2);
}
.masthead-autor__bio { font-family: var(--fuente-texto); font-size: var(--paso-1); line-height: 1.55; color: var(--tinta-cuerpo); margin-top: var(--e-4); max-width: 56ch; }
.masthead-autor__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-5); margin-top: var(--e-5); }
.masthead-autor__enlaces a { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--paso--1); font-weight: 600; color: var(--enlace); }
.masthead-autor__enlaces svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.masthead-autor__cifras { display: grid; justify-items: start; align-content: start; }
@media (min-width: 720px) {
  .masthead-autor__cifras { justify-items: end; border-inline-start: var(--filete) solid var(--borde); padding-inline-start: var(--e-6); }
}
.masthead-autor__cifra { font-size: var(--paso-4); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.masthead-autor__rotulo { font-size: var(--paso--2); font-weight: 600; letter-spacing: var(--track-etiqueta); text-transform: uppercase; color: var(--tinta-meta); }

/* --- Comentarios (comments.php) ------------------------------------------- */
.comentarios { max-width: var(--ancho-articulo); margin-inline: auto; margin-top: var(--e-10); padding-top: var(--e-7); border-top: 2px solid var(--tinta); }
.comentarios__cuenta { color: var(--tinta-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.comentarios__aviso { font-size: var(--paso--1); color: var(--tinta-meta); }

.form-comentario { display: grid; gap: var(--e-4); margin-top: var(--e-6); padding: var(--e-5); background: var(--fondo-2); border-radius: var(--r-3); }
/* Sin esta línea el display:flex de abajo gana al [hidden] del navegador y el
   contexto de respuesta se queda visible después de enviar. */
.form-comentario__contexto[hidden] { display: none; }
.form-comentario__contexto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3);
  font-size: var(--paso--1); color: var(--tinta-meta);
  padding-bottom: var(--e-3); border-bottom: var(--filete) solid var(--borde);
}
.form-comentario__contexto strong { color: var(--tinta); }
.form-comentario__cancelar { font-size: var(--paso--1); font-weight: 600; color: var(--enlace); }
@media (hover: hover) and (pointer: fine) { .form-comentario__cancelar:hover { color: var(--enlace-activo); text-decoration: underline; } }
.form-comentario__fila { display: grid; gap: var(--e-4); }
@media (min-width: 620px) { .form-comentario__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo--area { font-family: var(--fuente-ui); line-height: 1.5; resize: vertical; min-height: 108px; }
.requerido { color: var(--alerta); }
.form-comentario__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.form-comentario__estado { font-size: var(--paso--1); color: var(--tinta-meta); }
.form-comentario__estado[data-estado="ok"] { color: var(--enlace); font-weight: 600; }
.form-comentario__estado[data-estado="error"] { color: var(--alerta); font-weight: 600; }

.comentarios__lista { display: grid; gap: var(--e-6); margin-top: var(--e-7); }
.comentario__caja { display: grid; gap: var(--e-3); }
.comentario__cabecera { display: flex; align-items: center; gap: var(--e-3); }
.comentario__quien { display: grid; gap: 1px; min-width: 0; }
.comentario__nombre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--paso--1); font-weight: 700; color: var(--tinta); }
.comentario__hora { font-size: var(--paso--2); color: var(--tinta-meta); }
.comentario__sello {
  font-size: 10px; font-weight: 800; letter-spacing: var(--track-etiqueta); text-transform: uppercase;
  color: var(--fondo); background: var(--tinta); padding: 2px var(--e-2); border-radius: var(--r-1);
}
.comentario__sello--revision { color: var(--alerta-tinta); background: var(--alerta); }
.comentario__texto { font-family: var(--fuente-texto); font-size: var(--paso-0); line-height: 1.6; color: var(--tinta-cuerpo); }
.comentario__acciones { margin-top: calc(var(--e-1) * -1); }
.comentario__responder {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--paso--1); font-weight: 600; color: var(--tinta-meta);
  transition: color var(--dur-2) var(--sal);
}
.comentario__responder svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .comentario__responder:hover { color: var(--enlace-activo); } }
.comentario .comentarios__lista { margin-top: var(--e-5); gap: var(--e-5); padding-inline-start: var(--e-6); border-inline-start: 2px solid var(--borde); }
.comentario--pendiente .comentario__caja { padding: var(--e-4); background: var(--fondo-3); border-radius: var(--r-3); }
.comentario--pendiente { animation: aparece var(--dur-4) var(--sal) both; }
.comentario__nota { font-size: var(--paso--2); color: var(--tinta-meta); }
.comentarios__mas { margin-top: var(--e-7); padding-top: var(--e-5); border-top: var(--filete) solid var(--borde); }
.comentarios__fin { font-size: var(--paso--1); color: var(--tinta-meta); }

/* Los resultados van en lista densa, no en retícula de portada: aquí el lector
   compara titulares, no mira fotos. */
.busqueda .archivo__lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
.busqueda .archivo__lista > .tarjeta { padding-block: var(--e-5); border-top: var(--filete) solid var(--borde); }
.busqueda .archivo__lista > .tarjeta:first-child { border-top: 0; padding-top: var(--e-4); }
@media (min-width: 720px) { .busqueda .tarjeta--lista .medios { width: 132px; aspect-ratio: 3 / 2; } }

/* Sin esto, cuando el lateral es más alto que la lista (búsqueda con pocos
   resultados, firma con pocas notas) la retícula reparte el sobrante entre las
   filas y las tarjetas quedan estiradas. */
.archivo__lista { align-content: start; }


/* --- Banner del canal de WhatsApp -----------------------------------------
   Es la única superficie del sitio que no sigue el tema del lector: el panel
   va en verde casi negro tanto en claro como en oscuro. Es deliberado. Un
   banner tiene que leerse como un objeto aparte de la página, y ese verde dice
   «WhatsApp» antes de que nadie lea una palabra. Todo lo demás —tipografía,
   espaciado, radios— sale de los mismos tokens que el resto del periódico, así
   que se siente ajeno sin sentirse pegado. */
.wa {
  --wa-verde: #25D366;
  --wa-fondo: #062B1C;
  --wa-tinta: #F3FBF6;
  --wa-tinta-2: rgba(243, 251, 246, .70);
  --wa-borde: rgba(255, 255, 255, .10);
}

.wa__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-4);
  background: var(--wa-fondo);
  color: var(--wa-tinta);
  /* Un filo interior de 1 px: es lo que separa un rectángulo de color de una
     superficie con canto. Sin él el panel parece recortado con tijera. */
  box-shadow: inset 0 0 0 1px var(--wa-borde), 0 18px 40px -28px rgba(2, 20, 12, .8);
}

/* Una veladura verde que entra por la esquina de arriba a la derecha. Va muy
   abierta y muy floja a propósito: si se cierra, deja de ser luz y se ve el
   círculo, que parece una mancha. Esto es lo único que evita que el panel sea
   un rectángulo de color plano. */
.wa__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 88% -12%, rgba(37, 211, 102, .14), transparent 56%);
  pointer-events: none;
}

.wa__antetitulo {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--paso--2);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wa-verde);
}
.wa__pulso {
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--wa-verde);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .wa__pulso { animation: latido 1800ms var(--suave) infinite; }
}

.wa__titulo {
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.06;
  text-wrap: balance;
  margin-block-start: var(--e-3);
}
.wa__cuerpo {
  font-family: var(--fuente-texto);
  color: var(--wa-tinta-2);
  margin-block-start: var(--e-3);
  max-width: 44ch;
}

.wa__boton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  background: var(--wa-verde);
  color: #04240F;
  font-size: var(--paso--1);
  font-weight: 700;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-pastilla);
  transition: background-color var(--dur-2) var(--sal), transform var(--dur-1) var(--sal);
}
.wa__boton-icono { display: inline-grid; place-items: center; }
.wa__boton svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.wa__boton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .wa__boton:hover { background: #3BE07A; }
}
.wa__letra-chica { font-size: var(--paso--2); color: var(--wa-tinta-2); }

/* El hilo: las dos últimas notas montadas como mensajes recibidos. La esquina
   superior izquierda va sin redondear, que es como WhatsApp dibuja la primera
   burbuja de quien te escribe. */
.wa__hilo { display: grid; gap: var(--e-3); align-content: center; }
.wa__burbuja {
  display: block;
  position: relative;
  padding: var(--e-4);
  border-radius: var(--r-4);
  border-start-start-radius: var(--r-1);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: background-color var(--dur-2) var(--sal), transform var(--dur-2) var(--sal);
}
.wa__remitente {
  display: block;
  font-size: var(--paso--2);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wa-verde);
}
.wa__mensaje {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-block-start: var(--e-1);
  font-weight: 600;
  line-height: 1.28;
  color: var(--wa-tinta);
}
.wa__pie {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--e-1);
  margin-block-start: var(--e-2);
  font-size: var(--paso--2);
  font-variant-numeric: tabular-nums;
  color: var(--wa-tinta-2);
}
/* El doble tic azul de «leído». Es el detalle que hace que la burbuja se lea
   como un mensaje y no como una tarjeta más del periódico. */
.wa__pie svg {
  width: 17px; height: 17px;
  fill: none; stroke: #53BDEB;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .wa__burbuja:hover { background: rgba(255, 255, 255, .11); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .wa__burbuja:hover { transform: none; }
}

/* --- Variante ancha: final de portada ------------------------------------- */
.wa--franja { margin-block: var(--e-11); }
.wa--franja .wa__panel {
  display: grid;
  gap: var(--e-7);
  padding: var(--e-8);
}
.wa--franja .wa__titulo { font-size: var(--paso-4); }
.wa--franja .wa__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5);
  margin-block-start: var(--e-6);
}
.wa--franja .wa__letra-chica { max-width: 30ch; }

@media (min-width: 900px) {
  .wa--franja .wa__panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: var(--e-10);
    padding: var(--e-9);
  }
}

/* --- Variante compacta: al terminar una nota ------------------------------ */
.wa--inline { margin-block-start: var(--e-9); }
.wa--inline .wa__panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5);
  padding: var(--e-6);
}
.wa--inline .wa__decir { flex: 1 1 20rem; min-width: 0; }
.wa--inline .wa__titulo { font-size: var(--paso-2); }
.wa--inline .wa__cuerpo { font-size: var(--paso--1); }
.wa--inline .wa__acciones { margin-block-start: var(--e-5); }
.wa--inline .wa__letra-chica { display: none; }

@media (max-width: 599px) {
  .wa--franja .wa__panel,
  .wa--inline .wa__panel { padding: var(--e-6); }
  .wa__boton { inline-size: 100%; justify-content: center; }
  .wa--franja .wa__acciones { gap: var(--e-3); }
}