/* ===========================================================================
   Revista Capitalia — sistema visual
   ---------------------------------------------------------------------------
   Linea visual de revista economica britanica: cabecera roja con logotipo en
   blanco, reglas finas, antetitulos en sans condensada versalita, titulares en
   serif con interlineado corto, cuerpo en serif, y graficos con la etiqueta
   roja sobre el titulo del panel.

   Referencias de sistema (no de artes finales):
     - Guia de marca de The Economist Group, nov-2017
     - Guia de graficos de The Economist, may-2017

   Marcas propias: el logotipo, la ilustracion y la paleta de ilustracion son
   de la casa. No se reproduce ningun activo de terceros.

   REVERSION: este archivo se reemplaza por completo en cada rediseno. La
   version anterior queda en el historial de git; `git checkout <sha> --
   estaticos/capitalia.css` la devuelve sin tocar nada mas.
   =========================================================================== */

/* --- 1. Fichas de diseno -------------------------------------------------- */

:root {
  /* Tinta y papel */
  --tinta: #0c0c0c;
  --tinta-suave: #3f5661;
  --gris: #758d99;
  --gris-claro: #b7c6cf;
  --papel: #ffffff;
  --caja: #e9edf0;
  --caja-borde: #d5dde1;

  /* Rojo de cabecera. Un solo rojo en todo el sitio. */
  --rojo: #e3120b;
  --rojo-oscuro: #a81829;

  /* Reglas */
  --regla-fina: 1px solid var(--caja-borde);
  --regla-media: 1px solid var(--gris-claro);
  --regla-gruesa: 3px solid var(--tinta);
  --regla-roja: 3px solid var(--rojo);

  /* Serie de color para graficos (equilibrada en luminosidad) */
  --dato-azul: #006ba2;
  --dato-rojo: #db444b;
  --dato-cian: #3ebcd2;
  --dato-verde: #379a8b;
  --dato-amarillo: #ebb434;
  --dato-oliva: #b4ba39;
  --dato-morado: #9a607f;
  --dato-oro: #d1b07c;

  /* Tipografia */
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans-cnd: 'Archivo Narrow', 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Medidas */
  --ancho: 1220px;
  --ancho-lectura: 40rem;
  --canal: 28px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  font-feature-settings: 'onum' 1;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.envoltura-estrecha {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: 0 24px;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Foco visible: obligatorio, no decorativo. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

/* --- 2. Piezas tipograficas de la casa ----------------------------------- */

/* Antetitulo: sans condensada, versalita, rojo. Va encima del titular. */
.antetitulo {
  display: inline-block;
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rojo);
  line-height: 1;
}

/* Etiqueta de mercado: caja de linea fina, gris. */
.etiqueta-mercado {
  display: inline-block;
  font-family: var(--sans-cnd);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border: 1px solid var(--caja-borde);
  padding: 2px 6px;
  line-height: 1.2;
  vertical-align: 2px;
}

/* Linea de datos: fecha, minutos, autor. */
.meta {
  display: block;
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 400;
  color: var(--gris);
  letter-spacing: 0.01em;
}

/* Rotulo de bloque: sans condensada versalita sobre regla negra gruesa. */
.rotulo {
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta);
  border-top: var(--regla-gruesa);
  padding-top: 8px;
  margin: 0 0 20px;
}

/* --- 4. Cabecera ---------------------------------------------------------- */

.cabecera {
  border-bottom: var(--regla-gruesa);
}

.cabecera-roja {
  background: var(--rojo);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Logotipo propio: caja blanca de linea fina con el nombre en blanco. */
.marca {
  display: block;
  border: 2px solid #fff;
  padding: 9px 18px 11px;
}

.marca-linea-1 {
  display: block;
  font-family: var(--sans-cnd);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}

.marca-linea-2 {
  display: block;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: #fff;
  font-feature-settings: 'lnum' 1;
}

.cabecera-lado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

.cabecera-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cabecera-acciones .boton-suscripcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.cabecera-acciones .boton-mi-cuenta {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px #fff;
}

.cabecera-acciones .boton-mi-cuenta:hover {
  background: var(--tinta);
}

.cabecera-acciones a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.fecha-edicion {
  font-family: var(--sans-cnd);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  text-align: right;
  white-space: nowrap;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
}

.edicion-numero {
  font-weight: 700;
  letter-spacing: 0.13em;
}

.edicion-fecha {
  opacity: 1;
}

.boton-suscripcion {
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: #fff;
  color: var(--rojo);
  padding: 9px 16px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.boton-suscripcion:hover {
  background: var(--tinta);
  color: #fff;
}

/* Navegacion: barra negra, versalitas. */
.punto-premium {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-start: 6px;
  border-radius: 50%;
  background: var(--rojo);
  vertical-align: middle;
  flex-shrink: 0;
}

.navegacion {
  background: var(--tinta);
}

.navegacion-fila {
  display: grid;
  grid-template-columns: repeat(var(--temas-columnas, 7), minmax(max-content, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.navegacion-fila:focus-visible,
.navegacion-fila a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
.navegacion-fila::-webkit-scrollbar {
  display: none;
}

.navegacion-fila a {
  min-height: 44px;
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  padding: 11px 16px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.navegacion-fila a:hover {
  color: #fff;
  border-bottom-color: var(--rojo);
}

.navegacion-fila a.navegacion-salud,
.navegacion-fila a.navegacion-salud:hover {
  color: #86dca6;
}

.navegacion-secundaria {
  margin-left: 0;
  color: var(--gris-claro) !important;
}

/* --- 4 bis. Barra de cifras del dia --------------------------------------
   La razon para volver cada dia: cuatro numeros que cambian solos, con la
   fuente a un clic. Vive pegada a la navegacion, como la banda de mercados de
   un diario economico. */

.barra-cifras {
  background: var(--caja);
  border-bottom: var(--regla-fina);
}

.barra-cifras-fila {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.barra-cifras-rotulo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 20px 10px 0;
  border-right: 1px solid var(--caja-borde);
}

.barra-cifras-hoy {
  font-family: var(--sans-cnd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rojo);
}

.barra-cifras-hora {
  font-family: var(--sans-cnd);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gris);
  white-space: nowrap;
}

.barra-cifras-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.barra-cifras-lista::-webkit-scrollbar {
  display: none;
}

.cifra-item {
  flex: 1 1 0;
  min-width: 168px;
  border-right: 1px solid var(--caja-borde);
}

.cifra-item:last-child {
  border-right: 0;
}

.cifra-item > a {
  display: block;
  padding: 9px 18px;
  border-bottom: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cifra-item > a:hover {
  background: #dfe6ea;
  border-bottom-color: var(--rojo);
}

.cifra-pais {
  display: block;
  font-family: var(--sans-cnd);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris);
}

.cifra-valor {
  display: block;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.15;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  margin-top: 1px;
}

.cifra-pie {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 1px;
}

.cifra-etiqueta {
  font-family: var(--sans-cnd);
  font-size: 11.5px;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.cifra-var {
  font-family: var(--sans-cnd);
  font-size: 11.5px;
  font-weight: 600;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  white-space: nowrap;
}

/* El significado no depende del color: el triangulo ya dice la direccion, para
   quien no distingue rojo de verde. El color solo refuerza la convencion de
   mercado (sube verde, baja rojo). */
.cifra-sube {
  color: #2f7d70;
}

.cifra-baja {
  color: var(--dato-rojo);
}

.cifra-igual {
  color: var(--gris);
}

.cifra-aviso {
  display: block;
  font-family: var(--sans-cnd);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris);
  margin-top: 2px;
}

/* --- 5. Portada: noticia titular ----------------------------------------- */

.titular {
  border-bottom: var(--regla-media);
}

.titular-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

/* Con la columna "En breve" la portada pasa a tres calles, como la primera
   plana de un diario economico: relato, imagen y datos duros. */
.titular-rejilla.con-breves {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.58fr);
}

.columna-breves {
  padding: 34px 0 40px var(--canal);
  border-left: var(--regla-media);
}

.rotulo-breves {
  margin-top: 0;
}

.lista-breves {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-breves li {
  padding: 13px 0;
  border-bottom: var(--regla-fina);
}

.lista-breves li:first-child {
  padding-top: 4px;
}

.lista-breves li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.lista-breves p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.42;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.breve-fuente {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--sans-cnd);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: 1px solid var(--gris-claro);
}

.breve-fuente:hover {
  color: var(--rojo);
  border-bottom-color: var(--rojo);
}

.titular-texto {
  padding: 40px var(--canal) 44px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: var(--regla-media);
}

.titular-etiquetas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.titular-titulo {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.1vw, 3.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.021em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.titular-bajada {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0 0 22px;
  max-width: 42ch;
}

.titular a:hover .titular-titulo,
.pieza a:hover .pieza-titulo {
  color: var(--rojo-oscuro);
}

.titular-figura {
  margin: 0;
  position: relative;
  background: var(--caja);
  overflow: hidden;
}

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

/* La ilustración pictórica conserva la escena completa también en móvil. */
.titular-figura.titular-figura--pictorica {
  aspect-ratio: auto;
  align-self: start;
}
.titular-figura--pictorica > a {
  display: block;
  aspect-ratio: 8 / 5;
}
.titular-figura--pictorica picture {
  display: block;
  height: 100%;
}
.titular-figura--pictorica img {
  object-position: center;
}
.titular-figura--pictorica .credito-sobre {
  position: static;
  padding: 8px;
  font-size: 12px;
}

.credito {
  font-family: var(--sans-cnd);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 7px 0 0;
  margin: 0;
}

.credito-sobre {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 9px;
  border-top: 1px solid var(--caja-borde);
  border-right: 1px solid var(--caja-borde);
}

/* --- 6. Portada: rejilla de piezas --------------------------------------- */

.bloque {
  padding: 36px 0 40px;
}

.rejilla-piezas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

/* Una edicion con pocas piezas no deja columnas vacias: la rejilla se ajusta
   al numero real de articulos publicados. */
.rejilla-piezas[data-piezas='1'] {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.rejilla-piezas[data-piezas='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* La primera pieza de la reja ocupa dos columnas y muestra su imagen en
   panoramica. El tamano de la imagen es el factor mejor medido de cuanta gente
   la mira: en el Eyetrack III de Poynter una foto de 230x230 px la miro cerca
   del 70 % de los participantes y una tamano estampilla, el 10 %. Con esto la
   segunda nota mas importante de la edicion deja de competir en miniatura.
   REVERSION: borrar este bloque y la clase `pieza-ancha` en
   plantillas/portada.html. La reja vuelve a tres columnas iguales. */
.pieza-ancha {
  grid-column: span 2;
}

.pieza-ancha .pieza-figura {
  aspect-ratio: 16 / 9;
}

.pieza-ancha .pieza-titulo {
  font-size: 1.72rem;
}

.pieza {
  padding: 0 var(--canal);
  border-right: var(--regla-fina);
}

.pieza:first-child {
  padding-left: 0;
}

.pieza:last-child {
  border-right: 0;
  padding-right: 0;
}

.pieza-figura {
  margin: 0 0 14px;
  background: var(--caja);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Cuando la seccion tiene una sola pieza, su columna es mucho mas ancha: en
   4/3 la ilustracion se convertiria en un bloque enorme, asi que se apaisa. */
.rejilla-piezas[data-piezas='1'] .pieza-figura {
  aspect-ratio: 16 / 9;
}

.pieza-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.pieza-etiquetas {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.pieza-titulo {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 9px;
}

.pieza-bajada {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0 0 12px;
}

/* --- 7. Indice de secciones ---------------------------------------------- */

.franja-indice {
  background: var(--caja);
  border-top: var(--regla-media);
  border-bottom: var(--regla-media);
  padding: 34px 0 38px;
}

.rejilla-indice {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.indice-seccion {
  padding: 0 20px;
  border-right: 1px solid var(--gris-claro);
}

.indice-seccion:first-child {
  padding-left: 0;
}

.indice-seccion:last-child {
  border-right: 0;
  padding-right: 0;
}

.indice-seccion h3 {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  margin: 0 0 7px;
  border-top: 1px solid var(--tinta);
  padding-top: 9px;
}

.indice-seccion p {
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 0 0 9px;
}

.indice-seccion:hover h3 {
  color: var(--rojo-oscuro);
}

.cuenta {
  font-family: var(--sans-cnd);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --- 8. Pagina de seccion ------------------------------------------------ */

.encabezado-seccion {
  padding: 34px 24px 24px;
  border-bottom: var(--regla-media);
}

.titulo-seccion {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.bajada-seccion {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0;
  max-width: 52ch;
}

/* --- 9. Pagina de articulo ----------------------------------------------- */

.encabezado-articulo {
  padding-top: 38px;
  padding-bottom: 22px;
}

.articulo-etiquetas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.titulo-articulo {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.7vw, 3.1rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.021em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.bajada-articulo {
  font-size: 1.24rem;
  line-height: 1.46;
  color: var(--tinta-suave);
  margin: 0 0 18px;
}

/* Página de Salomón: conserva el sistema editorial sin cambiar los artículos. */
.salomon-pagina .encabezado-articulo {
  padding-top: 24px;
  padding-bottom: 16px;
}

.salomon-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.salomon-acciones [hidden] { display: none; }
.salomon-desplegable,
.salomon-cierre { display: none; }

.salomon-acciones > a {
  font-family: var(--sans);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 10px 0;
}

.salomon-acciones :focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
}

.salomon-pagina .cuerpo-articulo > h2:first-child { margin-top: 1rem; }

.salomon-pagina .salomon-ejemplo {
  background: var(--caja);
  border-left-color: var(--rojo);
  padding: 16px 20px;
}

.salomon-pagina .salomon-nota {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

@media (max-width: 30rem) {
  .salomon-pagina .encabezado-articulo { padding-top: 18px; }
  .salomon-pagina .bajada-articulo { font-size: 1.1rem; }
  .salomon-acciones { gap: 6px 18px; }
}

/* Sólo Salomón: navegación sin carriles cortados y lectura sin superposiciones. */
@media (max-width: 48rem) {
  .pagina-salomon .cabecera-fila {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 14px 16px;
  }
  .pagina-salomon .cabecera .marca { padding: 8px 10px; }
  .pagina-salomon .cabecera .marca-linea-2 { font-size: 28px; }
  .pagina-salomon .cabecera-lado {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
  }
  .pagina-salomon .fecha-edicion {
    max-width: 132px;
    white-space: normal;
    text-align: right;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  .salomon-banda-escritorio { display: none; }
  .salomon-desplegable { display: block; }
  .salomon-desplegable > summary {
    padding: 12px 24px;
    min-height: 44px;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }
  .salomon-desplegable > summary:focus-visible {
    outline: 2px solid var(--rojo);
    outline-offset: -4px;
  }
  .salomon-menu { background: var(--tinta); color: #fff; }
  .salomon-mercados { background: var(--caja); }
  .salomon-menu .navegacion-fila {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 0 16px 12px;
  }
  .salomon-menu .navegacion-fila a {
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 12px 8px;
    margin: 0;
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
  }
  .salomon-mercados .barra-cifras-fila {
    display: block;
    padding: 0 16px 12px;
  }
  .salomon-mercados .barra-cifras-rotulo {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    border-right: 0;
    border-bottom: var(--regla-fina);
  }
  .salomon-mercados .barra-cifras-hora { display: block; white-space: normal; }
  .salomon-mercados .barra-cifras-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .salomon-mercados .cifra-item { min-width: 0; border-bottom: var(--regla-fina); }
  .salomon-mercados .cifra-item:nth-child(even) { border-right: 0; }
  .salomon-mercados .cifra-item > a { padding: 12px 8px; }
  .salomon-mercados .cifra-pie { flex-wrap: wrap; gap: 2px 8px; }
  .salomon-mercados .cifra-pais,
  .salomon-mercados .cifra-etiqueta,
  .salomon-mercados .cifra-var,
  .salomon-mercados .cifra-aviso,
  .salomon-mercados .barra-cifras-hora {
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .salomon-pagina { overflow-wrap: anywhere; }
  .salomon-pagina .salomon-ejemplo { margin: 1rem 0; font-size: 1.14rem; }
  .salomon-cierre { display: flex; margin: 24px 0 32px; }
  .pagina-salomon .burbuja:not([data-abierta]) { display: none; }
}

.meta-articulo {
  border-top: var(--regla-fina);
  border-bottom: var(--regla-fina);
  padding: 9px 0;
}

.figura-articulo {
  max-width: 52rem;
  margin: 26px auto 30px;
  padding: 0 24px;
}

.figura-articulo img {
  width: 100%;
  border: 1px solid var(--caja-borde);
}

.cuerpo-articulo {
  font-size: 1.14rem;
  line-height: 1.62;
}

.cuerpo-articulo > p:first-of-type::first-letter {
  font-weight: 600;
}

.cuerpo-articulo p {
  margin: 0 0 1.1em;
}

.cuerpo-articulo h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 1.9em 0 0.55em;
}

.cuerpo-articulo h3 {
  font-family: var(--sans-cnd);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.7em 0 0.5em;
}

.cuerpo-articulo a {
  color: var(--tinta);
  border-bottom: 1px solid var(--rojo);
  padding-bottom: 1px;
}

.cuerpo-articulo a:hover {
  color: var(--rojo-oscuro);
}

.cuerpo-articulo ul,
.cuerpo-articulo ol {
  margin: 0 0 1.2em;
  padding-left: 1.15em;
}

.cuerpo-articulo li {
  margin-bottom: 0.45em;
}

.cuerpo-articulo blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 18px;
  border-left: var(--regla-roja);
  font-size: 1.28rem;
  line-height: 1.36;
  color: var(--tinta);
}

.cuerpo-articulo blockquote p:last-child {
  margin-bottom: 0;
}

.cuerpo-articulo strong {
  font-weight: 600;
}

/* Cifra destacada dentro del cuerpo. */
.cifra {
  display: block;
  font-family: var(--sans);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rojo);
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  margin: 1.4em 0 0.2em;
}

/* --- 10. Grafico de la casa ---------------------------------------------- */
/* La etiqueta roja va encima del titulo del panel. Ejes a la derecha,
   lineas de rejilla horizontales, fuente al pie. */

.grafico {
  margin: 30px 0;
  padding-top: 0;
}

.grafico::before {
  content: '';
  display: block;
  width: 28px;
  height: 5px;
  background: var(--rojo);
  margin-bottom: 11px;
}

.grafico-titulo {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0 0 3px;
}

.grafico-subtitulo {
  font-family: var(--sans-cnd);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta-suave);
  margin: 0 0 14px;
}

.grafico-lienzo {
  border-top: 1px solid var(--gris-claro);
  padding-top: 10px;
}

.grafico-fuente {
  font-family: var(--sans-cnd);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--gris);
  margin: 10px 0 0;
}

.grafico-fuente a {
  color: var(--gris);
  border-bottom: 1px solid var(--gris-claro);
}

/* --- 11. Fuentes y nota legal -------------------------------------------- */

.fuentes {
  padding-top: 26px;
  padding-bottom: 6px;
}

.titulo-fuentes {
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-top: var(--regla-gruesa);
  padding-top: 8px;
  margin: 0 0 12px;
}

.fuentes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuentes li {
  font-family: var(--sans-cnd);
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 6px 0;
  border-bottom: var(--regla-fina);
}

.fuentes a {
  color: var(--tinta);
}

.fuentes a:hover {
  color: var(--rojo-oscuro);
}

.nota-legal {
  font-family: var(--sans-cnd);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gris);
  padding-top: 20px;
  padding-bottom: 8px;
}

/* --- 12. Boletin --------------------------------------------------------- */

.boletin {
  background: var(--tinta);
  color: #fff;
  padding: 44px 0 48px;
  margin-top: 8px;
}

.boletin-titulo {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.017em;
  margin: 0 0 10px;
}

.boletin-titulo::before {
  content: '';
  display: block;
  width: 28px;
  height: 5px;
  background: var(--rojo);
  margin-bottom: 13px;
}

.boletin-texto {
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--gris-claro);
  margin: 0 0 18px;
  max-width: 46ch;
}

.boletin-forma {
  display: flex;
  gap: 0;
  max-width: 27rem;
}

.boletin-forma input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans-cnd);
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid var(--gris);
  background: var(--tinta);
  color: #fff;
}

.boletin-forma input::placeholder {
  color: var(--gris);
}

.boletin-forma button {
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid var(--rojo);
  background: var(--rojo);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.boletin-forma button:hover {
  background: #fff;
  color: var(--rojo);
  border-color: #fff;
}

.boletin-nota {
  font-family: var(--sans-cnd);
  font-size: 0.85rem;
  color: var(--gris);
  margin: 12px 0 0;
}

/* --- 13. Formulario de suscripcion --------------------------------------- */

.forma-suscripcion {
  max-width: 34rem;
}

.suscripcion-boletin {
  padding-inline: 24px;
}

.suscripcion-boletin .nota-forma {
  color: var(--tinta-suave);
}

.campo {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

.campo label,
.campo legend {
  display: block;
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.campo input[type='email'] {
  width: 100%;
  font-family: var(--sans-cnd);
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid var(--gris);
  background: var(--papel);
  color: var(--tinta);
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--sans-cnd);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 7px;
}

.casilla input {
  margin-top: 4px;
  accent-color: var(--rojo);
}

.casilla-consentimiento {
  border-top: var(--regla-fina);
  padding-top: 16px;
  margin: 22px 0;
  line-height: 1.45;
}

.boton-principal {
  font-family: var(--sans-cnd);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--rojo);
  color: #fff;
  border: 1px solid var(--rojo);
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.boton-principal:hover {
  background: var(--tinta);
  border-color: var(--tinta);
}

.nota-forma {
  font-family: var(--sans-cnd);
  font-size: 0.88rem;
  color: var(--gris);
  margin: 14px 0 0;
}

/* --- 14. Estado vacio ---------------------------------------------------- */

.vacio {
  font-family: var(--sans-cnd);
  font-size: 1rem;
  color: var(--gris);
  border-top: var(--regla-fina);
  border-bottom: var(--regla-fina);
  padding: 22px 0;
  margin: 0;
}

/* --- 15. Pie ------------------------------------------------------------- */

.pie {
  background: var(--tinta);
  color: var(--gris-claro);
  padding: 44px 0 34px;
  border-top: var(--regla-roja);
}

.pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));
  gap: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid #3f5661;
}

.pie .marca {
  display: inline-block;
  border-color: #fff;
  margin-bottom: 14px;
}

.pie .marca-linea-2 {
  font-size: 30px;
}

.pie-lema {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gris);
  margin: 0;
  max-width: 40ch;
}

.pie-titulo {
  font-family: var(--sans-cnd);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
  border-top: 1px solid #3f5661;
  padding-top: 9px;
}

.pie-redes {
  margin-top: 24px;
}

.pie-redes-titulo {
  margin: 0 0 8px;
  font-family: var(--sans-cnd);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gris-claro);
}

.pie-redes-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pie-redes-lista a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  color: var(--gris-claro);
  font-family: var(--sans-cnd);
  font-size: 0.875rem;
  text-decoration: none;
}

.pie-redes-lista svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.pie-redes-lista a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pie-redes-lista a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.pie-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-lista li {
  margin-bottom: 8px;
}

.pie-lista a {
  font-family: var(--sans-cnd);
  font-size: 0.98rem;
  color: var(--gris-claro);
}

.pie-lista a:hover {
  color: #fff;
}

.pie-divulgacion {
  font-family: var(--sans-cnd);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--gris);
  max-width: 68ch;
  margin: 22px 0 8px;
}

.pie-legal {
  font-family: var(--sans-cnd);
  font-size: 0.85rem;
  color: var(--gris);
  margin: 0;
  font-feature-settings: 'lnum' 1;
}

/* --- 16. Adaptacion a pantallas pequenas -------------------------------- */

@media (max-width: 980px) {
  .rejilla-indice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
  }

  .indice-seccion {
    padding: 0 18px;
  }

  .indice-seccion:nth-child(odd) {
    padding-left: 0;
  }

  .indice-seccion:nth-child(even) {
    border-right: 0;
    padding-right: 0;
  }

  .rejilla-piezas,
  .rejilla-piezas[data-piezas='1'],
  .rejilla-piezas[data-piezas='2'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }

  /* En dos columnas la pieza ancha ya ocuparia todo el ancho disponible, que
     es justo lo que queremos: sigue siendo la imagen mas grande de la reja. */
  .pieza-ancha {
    grid-column: span 2;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .pieza:nth-child(odd) {
    padding-left: 0;
  }

  .pieza:nth-child(even) {
    border-right: 0;
    padding-right: 0;
  }
}

@media (max-width: 780px) {
  body {
    font-size: 18px;
  }

  .titular-rejilla,
  .titular-rejilla.con-breves {
    grid-template-columns: 1fr;
  }

  /* El rotulo "En breve" ya trae su propia regla gruesa: la columna no debe
     anadir otra o quedan dos lineas negras pegadas. */
  .columna-breves {
    padding: 8px 0 30px;
    border-left: 0;
    border-top: 0;
  }

  .titular-figura {
    order: -1;
    aspect-ratio: 4 / 3;
  }

  .titular-texto {
    border-right: 0;
    padding: 24px 0 32px;
  }

  .cabecera-fila {
    flex-wrap: wrap;
    min-height: 0;
    gap: 14px;
  }

  .marca-linea-2 {
    font-size: 31px;
  }

  .fecha-edicion {
    text-align: left;
    max-width: none;
  }

  .cabecera-lado {
    justify-content: flex-start;
    gap: 12px;
  }

  .pagina-salomon .cabecera-acciones {
    justify-content: flex-end;
  }
}

@media (max-width: 620px) {
  .rejilla-piezas,
  .rejilla-piezas[data-piezas='1'],
  .rejilla-piezas[data-piezas='2'],
  .rejilla-indice {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  /* En escritorio las piezas llevan su propio canal interno, asi que el
     bloque va sin margen lateral. En movil ese canal desaparece, por lo que
     el bloque recupera el margen de la pagina y nada queda pegado al borde. */
  .envoltura.bloque {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* La navegacion se desliza en horizontal; el ultimo enlace nunca queda
     pegado al borde, para que se vea que hay mas secciones a la derecha. */
  .navegacion-fila a {
    padding: 11px 13px;
  }

  .navegacion-fila a:last-child {
    padding-right: 26px;
  }

  /* En movil la ilustracion de cada pieza se lee mejor apaisada y completa. */
  .pieza-figura {
    aspect-ratio: 16 / 10;
  }

  .pieza,
  .indice-seccion {
    padding: 22px 0;
    border-right: 0;
    border-bottom: var(--regla-fina);
  }

  .pieza:last-child,
  .indice-seccion:last-child {
    border-bottom: 0;
  }

  .titular-titulo {
    font-size: 2.1rem;
  }

  .pie-rejilla {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .boletin-forma {
    flex-direction: column;
  }

  /* En una pantalla de telefono la etiqueta de la barra no puede robarle dos
     tercios del ancho a los numeros: se comprime a una linea y la hora pasa
     debajo del primer indicador. */
  .barra-cifras-rotulo {
    padding: 8px 12px 8px 0;
  }

  .barra-cifras-hora {
    display: none;
  }

  .cifra-item {
    min-width: 142px;
  }

  .cifra-item > a {
    padding: 8px 14px;
  }

  .cifra-valor {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* --- 14. Tablero de mercados ---------------------------------------------
   Tablas de datos de la seccion Economia. Misma gramatica visual del resto
   del sitio: regla gruesa sobre el titulo, antetitulo en sans condensada,
   cifras en tabular para que las columnas se alineen solas.

   REVERSION: borrar este bloque devuelve el sitio a su estado anterior; las
   tablas quedarian sin estilo pero legibles.
   ------------------------------------------------------------------------ */

.tablero {
  margin: 2.5rem 0 0;
}

.tablero-bloque {
  margin-bottom: 3rem;
  padding-top: 1rem;
  border-top: var(--regla-gruesa);
}

.tablero-titulo {
  margin: 0 0 .35rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.tablero-bajada {
  max-width: 46rem;
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.tablero-columnas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--canal);
}

.tablero-mercado-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: var(--regla-media);
  font-family: var(--sans-cnd);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tablero-mercado-indice {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gris);
}

/* Tablas ------------------------------------------------------------------ */

.tabla-mercado {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .84rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.tabla-mercado thead th {
  padding: .3rem .4rem .35rem;
  border-bottom: var(--regla-fina);
  font-family: var(--sans-cnd);
  font-size: .68rem;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris);
  white-space: nowrap;
}

.tabla-mercado tbody tr + tr th,
.tabla-mercado tbody tr + tr td {
  border-top: var(--regla-fina);
}

.tabla-mercado tbody th,
.tabla-mercado tbody td {
  padding: .5rem .4rem;
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
}

.tabla-mercado .num,
.tabla-mercado td.num {
  text-align: right;
  white-space: nowrap;
}

.celda-nombre {
  font-weight: 600 !important;
  line-height: 1.25;
}

.celda-simbolo {
  display: block;
  font-family: var(--sans-cnd);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--gris);
}

.celda-monto {
  color: var(--tinta-suave);
}

.celda-tasa {
  font-weight: 700 !important;
  font-size: .95rem;
}

/* Variaciones. El signo va con flecha ademas del color: no se depende del
   color para leer si algo sube o baja. */
.var { font-weight: 600; }
.var-sube { color: var(--dato-verde); }
.var-baja { color: var(--dato-rojo); }
.var-igual { color: var(--gris); }

.marca-estable {
  display: inline-block;
  margin-left: .25rem;
  padding: .05rem .3rem;
  border: 1px solid var(--caja-borde);
  border-radius: 2px;
  font-family: var(--sans-cnd);
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  background: var(--caja);
  vertical-align: .08em;
}

/* Pies de tabla ----------------------------------------------------------- */

.tablero-nota,
.tablero-fuente {
  margin: .55rem 0 0;
  font-family: var(--sans-cnd);
  font-size: .72rem;
  line-height: 1.45;
  color: var(--gris);
}

.tablero-fuente a { color: var(--tinta-suave); }
.tablero-fuente strong { color: var(--rojo-oscuro); }

.tablero-aviso {
  margin: 1rem 0 0;
  padding: .8rem .9rem;
  border-left: 3px solid var(--rojo);
  background: var(--caja);
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* Angosto ----------------------------------------------------------------- */

@media (max-width: 900px) {
  .tablero-columnas { grid-template-columns: 1fr; gap: 2rem; }
  .tablero-titulo { font-size: 1.35rem; }
}

@media (max-width: 560px) {
  /* En pantalla angosta la columna de monto es la primera que sobra: el dato
     que importa es cual accion y cuanto se movio. */
  .tabla-mercado thead th:last-child,
  .tabla-mercado tbody td:last-child { display: none; }
  .tabla-rendimientos thead th:nth-child(4),
  .tabla-rendimientos tbody td:nth-child(4) { display: none; }
  .tabla-mercado { font-size: .8rem; }
}

/* Correcciones de ancho del tablero.
   Tres bolsas en paralelo no caben con la tipografia del cuerpo: la columna
   de monto se salia del contenedor. Se baja el cuerpo y se deja que el monto
   parta en dos lineas, que es preferible a que quede cortado. */
.tablero-columnas .tabla-mercado { font-size: .78rem; }
.tablero-columnas .tabla-mercado thead th { font-size: .62rem; padding: .3rem .25rem; }
.tablero-columnas .tabla-mercado tbody th,
.tablero-columnas .tabla-mercado tbody td { padding: .5rem .25rem; }
.tablero-columnas .celda-monto { white-space: normal; }

/* Las tablas de una sola columna no necesitan los 1.220 px completos: a ancho
   total las cifras quedan tan separadas del nombre que cuesta seguir la fila. */
.tabla-cripto,
.tabla-rendimientos { max-width: 62rem; }

/* --- Micrograficas de tendencia -------------------------------------------
   Un trazo de treinta ruedas al lado de cada fila. El color acompana a la
   forma pero nunca la sustituye: la linea ya cuenta la historia, y cada SVG
   lleva su descripcion en palabras para los lectores de pantalla. */
.chispa {
  display: block;
  width: 100%;
  max-width: 76px;
  height: 24px;
  margin-left: auto;
  overflow: visible;
}
.chispa-linea { fill: none; stroke-width: 1.25px; stroke-linejoin: round; stroke-linecap: round; }
.chispa-area { stroke: none; opacity: .1; }
.chispa-punta { stroke: none; }

.chispa-sube .chispa-linea,
.chispa-sube .chispa-punta { stroke: var(--dato-verde); fill: var(--dato-verde); }
.chispa-sube .chispa-area { fill: var(--dato-verde); }

.chispa-baja .chispa-linea,
.chispa-baja .chispa-punta { stroke: var(--dato-rojo); fill: var(--dato-rojo); }
.chispa-baja .chispa-area { fill: var(--dato-rojo); }

/* Un mes sin movimiento no merece color: pintarlo de verde o rojo sugeriria
   una direccion que no existe. */
.chispa-plano .chispa-linea,
.chispa-plano .chispa-punta { stroke: var(--gris); fill: var(--gris); }
.chispa-plano .chispa-area { fill: var(--gris); }

.chispa-vacia { color: var(--gris-claro); }
.celda-chispa { width: 82px; vertical-align: middle; }

/* En las tablas de acciones el precio y la variacion del dia comparten celda,
   uno debajo del otro. Asi cabe la micrografica sin apretar las tres bolsas. */
.celda-precio .precio-valor { display: block; }
.celda-precio .var { display: block; margin-top: .12rem; font-size: .95em; }

.tablero-columnas .chispa { max-width: 58px; height: 20px; }
.tablero-columnas .celda-chispa { width: 62px; }

@media (max-width: 560px) {
  /* En un celular la micrografica sigue siendo legible; el monto no. */
  .celda-chispa { width: 66px; }
  .tablero-columnas .chispa { max-width: 62px; }
}

/* --- Listados largos de la seccion Cripto -------------------------------- */
/* Cien filas por tabla. Las primeras veinte se ven siempre; el resto vive en
   un <details>. La columna del sitio oficial es la razon de ser de la tabla de
   monedas, asi que aqui se anula la regla general que esconde la ultima
   columna en pantallas angostas. Lo que sí se esconde en movil son las
   columnas marcadas .celda-secundaria, que son contexto y no dato principal. */

.listados { margin-top: 2.5rem; }

.tabla-listado { font-size: .82rem; }

.tabla-listado tbody tr:hover th,
.tabla-listado tbody tr:hover td { background: var(--caja); }

.celda-puesto {
  width: 2.4rem;
  color: var(--gris);
  font-family: var(--sans-cnd);
  font-size: .74rem;
}

.celda-precio-larga { white-space: nowrap; }
.celda-pais { color: var(--tinta-suave); white-space: nowrap; }
.celda-crecimiento { font-size: .88rem; }

/* Boton de sitio oficial. Es un enlace externo, se ve como pastilla para que
   se distinga de los enlaces del cuerpo del articulo. */
.boton-sitio {
  display: inline-block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .2rem .5rem;
  border: 1px solid var(--caja-borde);
  border-radius: 999px;
  background: var(--caja);
  font-family: var(--sans-cnd);
  font-size: .72rem;
  font-weight: 500;
  color: var(--dato-azul);
  text-decoration: none;
  vertical-align: middle;
}

.boton-sitio:hover,
.boton-sitio:focus-visible {
  background: var(--dato-azul);
  border-color: var(--dato-azul);
  color: var(--papel);
  text-decoration: none;
}

.sin-sitio {
  font-family: var(--sans-cnd);
  font-size: .72rem;
  color: var(--gris-claro);
}

/* La fila con vinculo con el editor. El fondo tenue acompana, pero quien no
   distinga colores igual lee el rotulo en palabras al lado del nombre. */


/* El resto de las filas, plegado. <details> nativo: sin JavaScript, y el
   buscador indexa igual las cien filas porque estan en el HTML. */
.listado-resto { margin-top: .25rem; }

.listado-resto > summary {
  padding: .55rem .6rem;
  border: var(--regla-fina);
  border-top: none;
  background: var(--caja);
  cursor: pointer;
  font-family: var(--sans-cnd);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  list-style: none;
}

.listado-resto > summary::-webkit-details-marker { display: none; }

.listado-resto > summary::before {
  content: "\25BC\00a0\00a0";
  font-size: .6rem;
  color: var(--gris);
}

.listado-resto[open] > summary::before { content: "\25B2\00a0\00a0"; }

.listado-resto > summary:hover { color: var(--tinta); }

.listado-resto > summary:focus-visible {
  outline: 2px solid var(--dato-azul);
  outline-offset: -2px;
}

.listado-resto[open] > summary { border-bottom: none; }

.listado-resto .tabla-listado thead th {
  position: sticky;
  top: 0;
  background: var(--papel);
  z-index: 1;
}

@media (max-width: 700px) {
  .tabla-listado .celda-secundaria { display: none; }
  .tabla-listado { font-size: .78rem; }
  .tabla-listado thead th { font-size: .6rem; padding: .3rem .25rem; }
  .tabla-listado tbody th,
  .tabla-listado tbody td { padding: .45rem .25rem; }
  .celda-puesto { width: 1.6rem; }
  .boton-sitio { max-width: 6.5rem; font-size: .66rem; padding: .18rem .4rem; }
}

/* La regla general del tablero esconde la ultima columna en pantallas muy
   angostas. En estos listados la ultima columna es el enlace al sitio y la
   variacion del dia, que son justamente lo que se vino a ver. */
@media (max-width: 560px) {
  .tabla-listado thead th:last-child,
  .tabla-listado tbody td:last-child { display: table-cell; }
  .tabla-listado thead th.celda-secundaria,
  .tabla-listado tbody td.celda-secundaria { display: none; }
}

/* En un telefono angosto los nombres largos de algunas empresas hacen la tabla
   mas ancha que la pantalla. En vez de encoger la letra hasta que no se lea,
   la tabla se desliza de lado dentro de su propia caja y el resto de la
   pagina se queda quieto. */
.listado-desliz {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.listado-desliz > .tabla-listado { min-width: 100%; }

/* --- Buscador de seccion ------------------------------------------------- */
/* Una sola caja, con la lupa adentro a la izquierda. Se ve como parte del
   papel, no como un formulario de banco: linea fina abajo, sin sombras. */

.buscador {
  position: relative;
  margin: 0 0 1.75rem;
  padding-bottom: .35rem;
}

.buscador[hidden] { display: none; }

.buscador-caja {
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: 30rem;
  padding: .5rem .75rem .5rem .7rem;
  border: 1px solid var(--caja-borde);
  border-radius: 3px;
  background: var(--papel);
  transition: border-color .15s ease;
}

.buscador-caja:focus-within {
  border-color: var(--tinta-suave);
}

/* El texto de la etiqueta existe para quien navega con lector de pantalla:
   se lee en voz alta, pero no ocupa lugar en la pagina. */
.buscador-etiqueta {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.buscador-lupa {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--gris);
  transition: color .15s ease;
}

.buscador-caja:focus-within .buscador-lupa { color: var(--rojo); }

.buscador-campo {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--tinta);
}

.buscador-campo::placeholder { color: var(--gris); }
.buscador-campo:focus { outline: none; }

/* Chrome dibuja su propia equis en los campos de busqueda. Sobra: ya hay un
   boton propio, y el del navegador no avisa nada al lector de pantalla. */
.buscador-campo::-webkit-search-cancel-button { -webkit-appearance: none; }

.buscador-limpiar {
  position: absolute;
  top: .45rem;
  left: 27.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gris);
  cursor: pointer;
}

.buscador-limpiar svg { width: 1rem; height: 1rem; }
.buscador-limpiar:hover { color: var(--rojo); background: var(--caja); }
.buscador-limpiar[hidden] { display: none; }

.buscador-limpiar:focus-visible {
  outline: 2px solid var(--dato-azul);
  outline-offset: 1px;
}

.buscador-conteo {
  margin: .45rem 0 0;
  min-height: 1.1rem;
  font-family: var(--sans-cnd);
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--tinta-suave);
}

.buscador-activo .buscador-conteo::before {
  content: "";
  display: inline-block;
  width: .35rem;
  height: .35rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--rojo);
  vertical-align: .1em;
}

@media (max-width: 700px) {
  .buscador-caja { max-width: none; }
  .buscador-limpiar { left: auto; right: .3rem; }
}

/* Filtrar es esconder. Se refuerza aqui porque las filas de tabla y las
   tarjetas traen su propio `display` y ganarian sobre el del navegador. */
.rejilla-piezas > [hidden],
.tabla-listado tbody > [hidden],
[data-bloque-buscable][hidden] { display: none !important; }

/* Resultados que viven en otras secciones del sitio. */
.buscador-resultados {
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
  border-top: var(--regla-fina);
}

.buscador-resultados[hidden] { display: none; }

.buscador-resultado + .buscador-resultado { border-top: var(--regla-fina); }

.buscador-resultado a {
  display: block;
  padding: .6rem .2rem;
  text-decoration: none;
  color: inherit;
}

.buscador-resultado a:hover,
.buscador-resultado a:focus-visible { background: var(--caja); }

.buscador-resultado-titulo {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

.buscador-resultado-bajada {
  display: block;
  margin-top: .15rem;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.4;
  color: var(--tinta-suave);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.buscador-resultado-meta {
  display: block;
  margin-top: .25rem;
  font-family: var(--sans-cnd);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris);
}

/* Rotulo de publicidad dentro de una tabla de mercado. Va en mayusculas
   pequenas, en caja gris, para que se lea como etiqueta y no como parte del
   nombre de la moneda. Contraste verificado sobre --caja.
   REVERSION: borrar este bloque y el {% if f.patrocinado %} de _listados.html. */
.marca-publicidad {
  display: inline-block;
  vertical-align: middle;
  margin-left: .4rem;
  padding: .08rem .3rem;
  border: 1px solid var(--gris);
  border-radius: 2px;
  font-family: var(--sans-cnd), var(--sans), sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: var(--caja);
  text-decoration: none;
  white-space: nowrap;
}

.marca-publicidad:hover,
.marca-publicidad:focus-visible {
  color: var(--papel);
  background: var(--tinta-suave);
  border-color: var(--tinta-suave);
}

/* Vinculo con el editor. Un asterisco del tamano del texto, que lleva a la
   nota al pie de la tabla. La fila no se resalta: es una moneda mas. */
.marca-editor {
  color: var(--rojo);
  font-weight: 700;
  text-decoration: none;
  margin-left: .1rem;
}

.marca-editor:hover,
.marca-editor:focus-visible { text-decoration: underline; }

.tablero-nota-editor {
  margin: .5rem 0 0;
  font-family: var(--sans);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--gris);
  max-width: 46rem;
}

/* Las veinte noticias de divisas de la semana. Revista de prensa: titular,
   medio y fecha. Se lee en columnas para que veinte lineas no se sientan
   veinte. REVERSION: borrar este bloque y NOTICIAS_EN_SECCION de config.py. */
.noticias {
  margin: 2.5rem 0 0;
}

.noticias-cabeza {
  padding-top: 1rem;
  border-top: var(--regla-fina);
}

.noticias-titulo {
  margin: 0 0 .35rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.noticias-bajada {
  max-width: 46rem;
  margin: 0 0 1.6rem;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.noticias-grupo {
  margin-bottom: 1.9rem;
}

.noticias-pais {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--caja-borde);
  font-family: var(--sans-cnd);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rojo-oscuro);
}


.noticias-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: noticia;
  columns: 2;
  column-gap: 2.4rem;
}

.noticia {
  counter-increment: noticia;
  break-inside: avoid;
  margin: 0 0 .95rem;
  padding-left: 1.7rem;
  position: relative;
}

.noticia::before {
  content: counter(noticia);
  position: absolute;
  left: 0;
  top: .1rem;
  font-family: var(--sans-cnd);
  font-size: .78rem;
  font-weight: 700;
  color: var(--gris-claro);
  font-variant-numeric: tabular-nums;
}

.noticia-titulo {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.noticia-titulo:hover,
.noticia-titulo:focus-visible {
  color: var(--rojo-oscuro);
  border-bottom-color: var(--rojo-oscuro);
}

.noticia-pie {
  margin: .2rem 0 0;
  font-family: var(--sans);
  font-size: .76rem;
  line-height: 1.4;
  color: var(--gris);
}

.noticia-medio {
  font-weight: 600;
  color: var(--tinta-suave);
}

.noticia-punto {
  margin: 0 .25rem;
}

.noticias-nota {
  margin: .4rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--caja-borde);
  max-width: 52rem;
  font-family: var(--sans);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--gris);
}

@media (max-width: 720px) {
  .noticias-lista {
    columns: 1;
  }

  .noticias-titulo {
    font-size: 1.35rem;
  }
}

/* --- Anuncio de la casa ---------------------------------------------------
   Un aviso propio dentro de una seccion. Tiene que verse claramente distinto
   del material editorial, y no puede depender solo del color para lograrlo:
   lleva la palabra "Anuncio" escrita, un borde punteado que ningun otro bloque
   del sitio usa, y una nota al pie que dice de quien es. */

.anuncio {
  border: 2px dashed var(--gris-claro);
  background: var(--caja);
  padding: 26px 28px 22px;
  margin: 8px 0 40px;
}

.anuncio-marca {
  display: inline-block;
  font-family: var(--sans-cnd);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel);
  background: var(--tinta-suave);
  padding: 3px 9px;
  margin-bottom: 14px;
}

.anuncio-titulo {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tinta);
  margin: 0 0 10px;
  max-width: 30ch;
}

.anuncio-texto {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0 0 16px;
  max-width: 62ch;
}

.anuncio-boton {
  display: inline-block;
  font-family: var(--sans-cnd);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--papel);
  background: var(--rojo);
  padding: 11px 20px;
  margin-bottom: 16px;
  text-decoration: none;
}

.anuncio-boton:hover { background: var(--rojo-oscuro); }

.anuncio-nota {
  font-family: var(--sans-cnd);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--gris);
  margin: 0;
  padding-top: 12px;
  border-top: var(--regla-fina);
  max-width: 70ch;
}

@media (max-width: 640px) {
  .anuncio { padding: 20px 18px 18px; }
  .anuncio-titulo { font-size: 1.32rem; }
}

/* En pantalla ancha el recuadro se partia en dos: texto a la izquierda y medio
   metro de vacio a la derecha, que se lee como un error de maquetacion. A
   partir de 900px el titulo y el cuerpo van en columnas, y la nota al pie
   cruza las dos. */
@media (min-width: 900px) {
  .anuncio {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 46px;
    align-items: start;
  }
  /* Sin justify-self la etiqueta se estira de lado a lado del recuadro y deja
     de leerse como una etiqueta. */
  .anuncio-marca { grid-column: 1 / -1; justify-self: start; }
  .anuncio-titulo { grid-column: 1; margin-bottom: 0; max-width: 22ch; }
  .anuncio-texto  { grid-column: 2; margin-bottom: 0; max-width: none; }
  .anuncio-boton  { grid-column: 2; justify-self: start; margin: 18px 0 0; }
  /* El max-width de 70ch en una condensada pequena la dejaba encerrada en la
     columna izquierda pese a ocupar las dos. */
  .anuncio-nota   { grid-column: 1 / -1; margin-top: 22px; max-width: none; }
}

/* --- 22. Pagina de datos personales --------------------------------------
   La casilla opcional se distingue por caja y por la palabra "Opcional" en el
   propio texto, nunca solo por color: quien no distingue tonos tiene que poder
   ver igual de claro que esa casilla no es obligatoria.

   REVERSION: borrar este bloque. La pagina /privacidad/ se ve sin cajas pero
   sigue siendo legible y sigue cumpliendo.
   ------------------------------------------------------------------------- */

.casilla-opcional {
  background: var(--caja);
  border: var(--regla-fina);
  border-left: 3px solid var(--gris);
  padding: 14px 16px;
  margin-top: 4px;
}

/* Campo trampa contra robots de spam. Fuera de la pantalla en vez de
   display:none, porque algunos robots ignoran lo que esta oculto asi. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.resumen-privacidad {
  background: var(--caja);
  border-left: var(--regla-roja);
  padding: 22px 26px;
  margin: 0 0 40px;
}

.resumen-privacidad h2 {
  font-family: var(--sans-cnd);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rojo);
  margin: 0 0 14px;
}

.resumen-privacidad ul { margin: 0; padding-left: 20px; }
.resumen-privacidad li { margin-bottom: 9px; line-height: 1.5; }

.texto-largo h2 {
  font-family: var(--sans-cnd);
  font-size: 1.32rem;
  font-weight: 700;
  margin: 42px 0 12px;
  padding-top: 14px;
  border-top: var(--regla-fina);
}

.texto-largo h3 {
  font-family: var(--sans-cnd);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 26px 0 10px;
}

.texto-largo ul { padding-left: 20px; }
.texto-largo li { margin-bottom: 9px; line-height: 1.55; }

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 26px;
  font-size: 0.92rem;
}

.tabla-datos thead th {
  font-family: var(--sans-cnd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--tinta);
}

.tabla-datos td {
  padding: 10px;
  border-bottom: var(--regla-fina);
  vertical-align: top;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .tabla-datos { font-size: 0.85rem; }
  .tabla-datos td, .tabla-datos thead th { padding: 8px 6px; }
}

/* --- 14. Lupa Capitalia ---------------------------------------------------
   La seccion de enganche: una promesa de inversion revisada contra registros
   oficiales. Tono de notario, no de alarma. Por eso el rojo de la casa se usa
   solo en el rotulo y en el foco, y los veredictos se apoyan en simbolo y
   palabra ademas del color: la pagina se entiende igual impresa en blanco y
   negro, en un lector de pantalla o por un lector daltonico.

   REVERSION: borrar este bloque completo. Ningun otro estilo depende de el. */

.navegacion-lupa {
  margin-left: 0;
  font-weight: 600 !important;
}

.franja-lupa {
  background: var(--caja);
  border-top: var(--regla-gruesa);
  border-bottom: var(--regla-fina);
  padding: 30px 0 34px;
  margin: 0 0 44px;
}

.lupa-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 28px;
  margin-bottom: 22px;
}

.rotulo-lupa {
  border-top: none;
  padding-top: 0;
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--rojo);
}

.lupa-lema {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 0;
  max-width: 52ch;
}

.lupa-enlace-seccion {
  font-family: var(--sans-cnd);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--rojo);
  padding-bottom: 3px;
  white-space: nowrap;
}

.lupa-enlace-seccion:hover { color: var(--rojo); }

.lupa-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: var(--regla-media);
}

.lupa-rejilla-amplia {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  border-left: var(--regla-media);
}

.lupa-ficha {
  border-bottom: var(--regla-media);
  border-right: var(--regla-media);
  background: var(--papel);
}

.lupa-rejilla-amplia .lupa-ficha { border-top: var(--regla-media); }

.lupa-ficha:last-child { border-right: none; }
.lupa-rejilla-amplia .lupa-ficha:last-child { border-right: var(--regla-media); }

.lupa-ficha-enlace {
  /* Columna flexible para que la linea de pais y fecha quede alineada al pie
     de las tres tarjetas, aunque los textos tengan largos distintos. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 18px 20px 20px;
  text-decoration: none;
  color: inherit;
}

.lupa-ficha-enlace .meta { margin-top: auto; padding-top: 4px; }

.lupa-ficha-enlace:hover { background: #f4f7f9; }

/* Veredicto: caja de linea fina con simbolo + palabra. El color acompana, no
   informa por si solo. */
.lupa-veredicto {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--sans-cnd);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid currentColor;
  margin-bottom: 12px;
  line-height: 1.2;
}

.lupa-simbolo { font-size: 0.95rem; line-height: 1; }

.lupa-veredicto-sin-registro { color: var(--rojo-oscuro); }
.lupa-veredicto-registro-parcial { color: #8a5a00; }
.lupa-veredicto-registrado { color: #1f6b53; }
.lupa-veredicto-en-verificacion { color: var(--tinta-suave); }

.lupa-nombre {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--tinta);
}

.lupa-promesa {
  font-family: var(--serif);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0 0 12px;
}

/* Bloque legal: leyenda del Decreto 2555 y nota de intereses. Es obligatorio y
   por eso se muestra, no se esconde. */
.lupa-legal {
  border-top: var(--regla-fina);
  margin-top: 24px;
  padding-top: 14px;
}

.lupa-legal p {
  font-family: var(--sans-cnd);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gris);
  margin: 0 0 8px;
  max-width: 88ch;
}

.lupa-legal p:last-child { margin-bottom: 0; }

/* Metodo: las cinco preguntas fijas. */
.lupa-metodo {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border-top: var(--regla-media);
  border-left: var(--regla-media);
}

.lupa-metodo li {
  border-bottom: var(--regla-media);
  border-right: var(--regla-media);
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.lupa-metodo-numero {
  font-family: var(--sans-cnd);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rojo);
  line-height: 1;
}

.lupa-metodo-texto {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--tinta);
}

.lupa-metodo-nota {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0 0 20px;
  max-width: 70ch;
}

/* Catalogo de veredictos. */
.lupa-catalogo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px 28px;
}

.lupa-catalogo-fila p {
  font-family: var(--serif);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0;
}

/* Registros publicos consultables. */
.lupa-registros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px 28px;
}

.lupa-registros li { border-top: var(--regla-media); padding-top: 12px; }

.lupa-registros a {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  margin: 8px 0 6px;
}

.lupa-registros a:hover { color: var(--rojo); }

.lupa-registros p {
  font-family: var(--serif);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0;
}

.lupa-servicio {
  border: 2px solid var(--tinta);
  padding: 26px 28px 22px;
  margin-bottom: 8px;
}

.lupa-servicio-correo {
  font-family: var(--sans-cnd);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0;
  padding-top: 14px;
  border-top: var(--regla-fina);
  max-width: 74ch;
}

/* --- Pagina de una verificacion ------------------------------------------ */

.lupa-articulo { padding: 12px 0 56px; }

.lupa-articulo-cabecera {
  border-bottom: var(--regla-gruesa);
  padding-bottom: 20px;
  margin-bottom: 28px;
}

.lupa-articulo-titulo {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 10px 0 6px;
}

.lupa-articulo-alias {
  font-family: var(--sans-cnd);
  font-size: 0.95rem;
  color: var(--gris);
  margin: 0 0 14px;
}

.lupa-articulo-veredicto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 12px 0 14px;
}

.lupa-articulo-veredicto p {
  font-family: var(--serif);
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 0;
  max-width: 52ch;
}

.lupa-articulo-veredicto .lupa-veredicto { margin-bottom: 0; }

.lupa-paso { margin-bottom: 34px; }

.lupa-paso-titulo {
  font-family: var(--sans-cnd);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta);
  border-top: var(--regla-media);
  padding-top: 10px;
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lupa-paso-numero {
  font-family: var(--sans-cnd);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--papel);
  background: var(--rojo);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
}

.lupa-paso p {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  margin: 0 0 10px;
}

.lupa-paso-detalle { color: var(--tinta-suave); font-size: 0.98rem !important; }

.lupa-consultas, .lupa-fuentes { list-style: none; margin: 0; padding: 0; }

.lupa-consultas li {
  border: var(--regla-media);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--caja);
}

.lupa-consulta-entidad {
  display: block;
  font-family: var(--sans-cnd);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 5px;
}

.lupa-consulta-resultado {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--tinta);
  margin-bottom: 8px;
}

.lupa-consulta-enlace {
  font-family: var(--sans-cnd);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta);
  border-bottom: 2px solid var(--rojo);
  text-decoration: none;
  padding-bottom: 2px;
}

.lupa-consulta-enlace:hover { color: var(--rojo); }

.lupa-veredicto-caja {
  border: 2px solid currentColor;
  padding: 18px 20px;
}

.lupa-veredicto-caja-marca {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans-cnd);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lupa-veredicto-caja p {
  color: var(--tinta);
  margin: 0;
}

.lupa-fuentes li {
  border-top: var(--regla-fina);
  padding: 9px 0;
  font-family: var(--sans-cnd);
  font-size: 0.92rem;
  line-height: 1.45;
}

.lupa-fuentes a { color: var(--tinta); }
.lupa-fuentes a:hover { color: var(--rojo); }

.lupa-volver {
  margin: 28px 0 0;
  font-family: var(--sans-cnd);
  font-size: 0.92rem;
}

.lupa-volver a { color: var(--tinta-suave); text-decoration: none; }
.lupa-volver a:hover { color: var(--rojo); }

@media (max-width: 900px) {
  .lupa-rejilla { grid-template-columns: 1fr 1fr; }
  .lupa-rejilla .lupa-ficha:nth-child(2n) { border-right: none; }
}

@media (max-width: 620px) {
  .franja-lupa { padding: 24px 0 26px; margin-bottom: 34px; }
  .lupa-rejilla,
  .lupa-rejilla-amplia { grid-template-columns: 1fr; border-left: none; }
  .lupa-ficha { border-right: none; }
  .lupa-rejilla-amplia .lupa-ficha:last-child { border-right: none; }
  .lupa-ficha-enlace { padding: 16px 0 18px; }
  .lupa-metodo { grid-template-columns: 1fr; border-left: none; }
  .lupa-metodo li { border-right: none; }
  .lupa-servicio { padding: 20px 18px 18px; }
  .navegacion-lupa { margin-left: 0; }
}

/* Tablas dentro del cuerpo de un articulo.
   Un articulo con datos propios necesita presentarlos con la misma sobriedad
   que el resto del texto: regla arriba, regla bajo el encabezado, filas
   separadas por una linea tenue y nada mas. Las cifras van en la fuente sans
   con numeros de ancho fijo, para que las columnas se alineen a ojo.
   La tabla se sale del ancho de lectura hacia ambos lados hasta donde deja el
   contenedor, porque una tabla apretada a la medida del parrafo obliga a
   partir palabras en cada celda.
   REVERSION: borrar este bloque. Las tablas vuelven al estilo por defecto del
   navegador; nada mas del sitio depende de estas reglas. */
.cuerpo-articulo table {
  width: 100%;
  margin: 2.2rem 0;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.35;
  border-top: 2px solid var(--tinta);
}
.cuerpo-articulo thead th {
  font-family: var(--sans-cnd);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  font-weight: 600;
  text-align: right;
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--tinta);
  vertical-align: bottom;
  white-space: nowrap;
}
.cuerpo-articulo thead th:first-child,
.cuerpo-articulo tbody td:first-child { text-align: left; }
.cuerpo-articulo thead th:last-child,
.cuerpo-articulo tbody td:last-child { text-align: left; white-space: nowrap; }
.cuerpo-articulo tbody td {
  padding: .6rem .5rem;
  border-bottom: 1px solid var(--caja-borde);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tinta);
}
.cuerpo-articulo tbody tr:last-child td { border-bottom: 1px solid var(--tinta); }
.cuerpo-articulo tbody td:first-child { font-weight: 500; }

@media (max-width: 640px) {
  .cuerpo-articulo table { font-size: .74rem; display: block; overflow-x: auto; }
  .cuerpo-articulo thead th,
  .cuerpo-articulo tbody td { padding: .5rem .35rem; }
}

/* ===========================================================================
   TABLERO DESCRIPTIVO DE CRIPTOMONEDAS (seccion Cripto)
   ---------------------------------------------------------------------------
   La columna del rango de noventa dias. La barra es apoyo visual, nunca la
   unica via: el porcentaje va escrito al lado y los extremos rotulados debajo,
   de modo que quien no distinga el color o no cargue el estilo lee lo mismo.

   REVERSION: borrar este bloque completo. El tablero sigue funcionando; la
   columna del rango queda como texto plano.
   =========================================================================== */
.tabla-cripto-desc .celda-rango {
  min-width: 9.5rem;
  text-align: left;
}
.tabla-cripto-desc thead th.celda-rango {
  white-space: normal;
  line-height: 1.15;
}
/* Un rotulo para pantalla ancha y otro para telefono. El corto no es un
   resumen distinto: dice lo mismo con menos letras. */
.tabla-cripto-desc .rotulo-corto { display: none; }
.rango-cifra {
  display: block;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: .82rem;
  color: var(--tinta);
}
.rango-barra {
  position: relative;
  display: block;
  height: 3px;
  margin: .3rem 0 .2rem;
  background: var(--caja);
  border-radius: 2px;
}
.rango-punto {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  transform: translateY(-50%);
  background: var(--tinta);
  border-radius: 50%;
}
.rango-extremos {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .6rem;
  color: var(--gris);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* El aviso de este bloque lleva el enlace al articulo que explica por que aqui
   no hay senales. Tiene que verse como enlace: es la salida que se le ofrece a
   quien llego buscando que comprar. */
.tablero-aviso a {
  color: var(--rojo-oscuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tablero-aviso a:hover { color: var(--tinta); }

@media (max-width: 640px) {
  /* En telefono la barra y los extremos no caben sin cortar la tabla. Se deja
     solo el porcentaje, que ya dice lo mismo en palabras. */
  .tabla-cripto-desc .celda-rango { min-width: 3.5rem; text-align: right; }
  .tabla-cripto-desc .rango-barra,
  .tabla-cripto-desc .rango-extremos { display: none; }
  .tabla-cripto-desc .rotulo-largo { display: none; }
  .tabla-cripto-desc .rotulo-corto { display: inline; }
  /* Cinco columnas tienen que caber en 390 px sin obligar a deslizar. Se
     aprieta el cuerpo de esta tabla, no el de las demas. */
  .tabla-cripto-desc { font-size: .7rem; }
  .tabla-cripto-desc thead th { font-size: .55rem; padding: .3rem .18rem; }
  .tabla-cripto-desc tbody th,
  .tabla-cripto-desc tbody td { padding: .45rem .18rem; }
  .tabla-cripto-desc .celda-simbolo { font-size: .55rem; }
  .tabla-cripto-desc .rango-cifra { font-size: .7rem; }
}

/* ==========================================================================
   AVISO DE VINCULO CON EL EDITOR
   Se pinta en los articulos que llevan `vinculo_editor: true`. Arriba, una
   linea; abajo, el parrafo completo. Nunca depende del color: lleva la
   palabra "Declaracion" escrita y un borde izquierdo grueso, igual que el
   recuadro de aviso del tablero.
   REVERSION: borrar este bloque; los avisos quedan sin estilo pero legibles.
   ========================================================================== */
.aviso-vinculo {
  border-left: 4px solid var(--rojo-oscuro);
  background: var(--caja);
  padding: .7rem .9rem;
  margin: 1.4rem auto;
}
.aviso-vinculo-arriba {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.35;
}
.aviso-vinculo-rotulo {
  font-family: var(--sans-cnd);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
  color: var(--rojo-oscuro);
  white-space: nowrap;
}
.aviso-vinculo-breve { color: var(--tinta); }
.aviso-vinculo-abajo { margin-top: 2rem; }
.aviso-vinculo-titulo {
  font-family: var(--sans-cnd);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .7rem;
  color: var(--rojo-oscuro);
  margin: 0 0 .35rem;
}
.aviso-vinculo-texto {
  font-family: var(--sans);
  font-size: .87rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0;
}

/* --- Opiniones de los lectores -----------------------------------------
   Van al pie del articulo, con el mismo aire que el resto de la pagina: la
   conversacion es del lector, no una caja de aplicacion pegada al final.
   REVERSION: borre este bloque y el include de _opiniones.html. */
.opiniones { border-top: 1px solid var(--caja); padding-top: 2rem; scroll-margin-top: 1.5rem; }
/* Titulo visible del bloque de opiniones y atajo desde la cabecera.
   REVERSION: borre hasta el cierre de .opiniones-ancla y restituya
   la linea .opiniones original de una sola declaracion. */
.opiniones-titulo {
  font-family: var(--serif); font-weight: 700;
  font-size: 1.55rem; line-height: 1.2; margin: 0 0 .4rem;
}
.opiniones-sub {
  font-family: var(--sans); font-size: .92rem; color: var(--gris);
  margin: 0 0 1.6rem; max-width: 34rem;
}
.opiniones-ancla { margin: .6rem 0 0; }
.opiniones-ancla a {
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--rojo); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.opiniones-ancla a:hover { color: var(--rojo-oscuro); }
.opiniones-lista { list-style: none; margin: 0 0 2rem; padding: 0; }
.opinion { padding: 1.1rem 0; border-bottom: 1px solid var(--caja); }
.opinion:last-child { border-bottom: 0; }
.opinion-firma {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline;
  margin: 0 0 .35rem;
}
.opinion-nombre {
  font-family: var(--sans); font-weight: 600; font-size: .93rem;
  color: var(--tinta);
}
.opinion-fecha {
  font-family: var(--sans); font-size: .78rem; color: var(--gris);
}
.opinion-texto {
  margin: 0; font-family: var(--serif); font-size: 1.02rem;
  line-height: 1.6; color: var(--tinta-suave); white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Hilos de respuesta. Un solo nivel de sangria.
   REVERSION: borre desde aqui hasta el comentario de cierre de las replicas. */
.opiniones-hilo {
  list-style: none; margin: .9rem 0 0; padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--caja);
}
/* Pasado el tope de sangria, el hilo sigue anidado en los datos pero ya no
   se corre a la derecha: en un telefono la columna de texto quedaria
   inservible. El parentesco se lee en el rotulo "Respuesta a <nombre>". */
.opiniones-hilo-plano { padding-left: 0; border-left: 0; }
@media (max-width: 640px) {
  .opiniones-hilo { padding-left: .7rem; }
}
/* Resalte momentaneo de la respuesta que el lector acaba de publicar. */
.opinion-nueva { animation: opinion-aparece 2.4s ease-out 1; }
@keyframes opinion-aparece {
  from { background: rgba(227, 18, 11, .07); }
  to { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .opinion-nueva { animation: none; }
}
.opiniones-hilo .opinion { padding: .8rem 0; border-bottom: 0; }
.opiniones-hilo .opinion + .opinion { border-top: 1px solid var(--caja); }
.opinion-marca {
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rojo-oscuro);
}
.opinion-respuesta .opinion-texto { font-size: .96rem; }
.opinion-acciones { margin: .7rem 0 0; }
.opinion-responder {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gris);
  border-bottom: 1px solid var(--caja);
}
.opinion-responder:hover { color: var(--rojo); border-bottom-color: currentColor; }
.opiniones-forma-replica { margin: .8rem 0 0; }
.opiniones-forma-replica textarea { min-height: 4.5rem; }
/* Especificidad a proposito: .opiniones-forma button define fondo rojo mas
   abajo en este archivo, y el boton de cancelar tiene que ganarle. */
.opiniones-forma button.opiniones-cancelar {
  background: none; color: var(--gris); border: 1px solid var(--caja);
}
.opiniones-forma button.opiniones-cancelar:hover {
  background: none; color: var(--tinta); border-color: var(--gris);
}
/* Fin de las replicas. */

.opiniones-vacio {
  font-family: var(--sans); font-size: .92rem; color: var(--gris);
  margin: 0 0 1.6rem;
}
.opiniones-caja { background: var(--caja); padding: 1.4rem; }
.opiniones-intro, .opiniones-nota {
  font-family: var(--sans); line-height: 1.55; color: var(--tinta-suave);
}
.opiniones-intro { font-size: .92rem; margin: 0 0 .9rem; }
.opiniones-nota { font-size: .8rem; color: var(--gris); margin: .7rem 0 0; }
.opiniones-nota a { color: var(--gris); }
.opiniones-etiqueta {
  display: block; font-family: var(--sans); font-size: .8rem;
  color: var(--tinta-suave); margin-bottom: .8rem;
}
.opiniones-forma input[type=email],
.opiniones-forma input[type=text],
.opiniones-forma textarea {
  width: 100%; box-sizing: border-box; font-family: var(--sans);
  font-size: 1rem; padding: .7rem .8rem; border: 1px solid #cfd8dd;
  background: var(--papel); color: var(--tinta); border-radius: 0;
  margin-top: .3rem;
}
.opiniones-forma textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
.opiniones-forma input:focus, .opiniones-forma textarea:focus {
  outline: 2px solid var(--rojo); outline-offset: 1px;
}
.opiniones-forma button {
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  background: var(--rojo); color: #fff; border: 0; padding: .72rem 1.4rem;
  cursor: pointer;
}
.opiniones-forma button:hover { background: var(--rojo-oscuro); }
.opiniones-forma button[disabled] { opacity: .55; cursor: progress; }
.opiniones-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: .7rem;
}
.opiniones-cuenta { font-family: var(--sans); font-size: .76rem; color: var(--gris); }
[data-forma-acceso] { display: flex; flex-wrap: wrap; gap: .6rem; }
[data-forma-acceso] .opiniones-intro,
[data-forma-acceso] .opiniones-nota { flex: 1 0 100%; margin-bottom: 0; }
[data-forma-acceso] input[type=email] { flex: 1 1 15rem; width: auto; margin-top: 0; }
[data-forma-acceso] button { flex: 0 0 auto; }
/* El aviso nunca depende solo del color: lleva simbolo y palabra. */
.opiniones-aviso {
  font-family: var(--sans); font-size: .88rem; line-height: 1.5;
  margin: 1rem 0 0; padding: .7rem .9rem; background: var(--papel);
  border-left: 3px solid var(--gris); color: var(--tinta-suave);
}
.opiniones-aviso.es-bien { border-left-color: #2f5d34; }
.opiniones-aviso.es-bien::before {
  content: "\2713"; font-weight: 700; color: #2f5d34; margin-right: .45em;
}
.opiniones-aviso.es-mal { border-left-color: #8a6d1f; }
.opiniones-aviso.es-mal::before {
  content: "\26A0"; font-weight: 700; color: #8a6d1f; margin-right: .45em;
}
@media (max-width: 640px) {
  .opiniones-caja { padding: 1.1rem; }
  .opiniones-pie { flex-direction: column; align-items: stretch; }
  .opiniones-pie button { width: 100%; }
}
/* Las reglas de arriba fijan `display` en los formularios, y `display` le gana
   al atributo `hidden`: sin esta linea los dos formularios se ven a la vez.
   REVERSION: borrela junto con el resto del bloque de opiniones. */
.opiniones [hidden] { display: none !important; }
.opiniones-firma { font-weight: 600; color: var(--tinta-suave); }
.opiniones-nota a { text-decoration: underline; }

/* --- Deep News: adelanto y puerta -----------------------------------------
   Solo se pintan en una entrada de Deep News que ya paso su semana abierta.
   El desvanecido del ultimo parrafo dice "esto sigue" sin necesidad de texto.
   REVERSION: borrar este bloque; sin las clases, el adelanto se ve como un
   cuerpo de articulo corriente y la puerta como una caja sin adornos. */
.cuerpo-adelanto {
  position: relative;
}
.cuerpo-adelanto > :last-child {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

/* Descargo de Acciones recomendadas. Se lee, pero no compite con el cuerpo:
   cuerpo de letra menor, tinta suave y una regla gris a la izquierda en vez de
   una caja, para que no parezca un recuadro destacado.
   REVERSION: borrar este bloque; el descargo se ve como un parrafo normal. */
.descargo-acciones {
  border-left: 3px solid var(--borde);
  padding: .1rem 0 .1rem 1rem;
  margin: 2rem auto 2.4rem;
}
.descargo-acciones p {
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0;
  max-width: 34rem;
}

.puerta-deep {
  border-top: var(--regla-roja);
  background: var(--caja);
  padding: 1.4rem 1.3rem 1.5rem;
  margin: .4rem auto 2.2rem;
}
.puerta-deep-titulo {
  font-family: var(--sans-cnd);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .55rem;
  color: var(--tinta);
}
.puerta-deep-texto {
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0 0 1.1rem;
  max-width: 34rem;
}
.puerta-deep-accion {
  margin: 0 0 .9rem;
}
.puerta-deep-boton {
  display: inline-block;
  background: var(--rojo);
  color: #fff;
  font-family: var(--sans-cnd);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .72rem 1.35rem;
  border: 0;
}
.puerta-deep-boton:hover,
.puerta-deep-boton:focus {
  background: var(--rojo-oscuro);
  color: #fff;
}
.puerta-deep-nota {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--gris);
  margin: 0;
}
.puerta-deep-nota a {
  color: var(--tinta-suave);
}

/* --- Deep News: franja de portada ----------------------------------------
   Va sobre fondo de tinta, al contrario de la franja de Lupa, que es caja
   clara. El contraste es el que hace el destaque: es la unica banda oscura de
   la portada. Las tarjetas quedan en papel para que su texto siga siendo
   tinta sobre blanco y no haya que pelear con el contraste.
   REVERSION: borrar este bloque; la franja se ve sin adornos pero legible. */
.franja-deep {
  background: var(--tinta);
  border-top: var(--regla-roja);
  padding: 30px 0 34px;
  margin: 0 0 44px;
}

.deep-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 28px;
  margin-bottom: 22px;
}

.rotulo-deep {
  color: var(--papel);
  margin: 0;
}

.deep-lema {
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--gris-claro);
  margin: .35rem 0 0;
  max-width: 38rem;
}

.deep-enlace-seccion {
  font-family: var(--sans-cnd);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--papel);
  border-bottom: 2px solid var(--rojo);
  padding-bottom: 2px;
  white-space: nowrap;
}
.deep-enlace-seccion:hover,
.deep-enlace-seccion:focus { color: var(--rojo); }

.deep-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tinta-suave);
}

.deep-rejilla[data-piezas="1"] { grid-template-columns: 1fr; }
.deep-rejilla[data-piezas="2"] { grid-template-columns: repeat(2, 1fr); }

.deep-pieza { background: var(--papel); }

.deep-pieza-enlace {
  /* Columna flexible para que la linea de fecha quede al pie de todas las
     tarjetas, aunque los titulos tengan largos distintos. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 18px 20px 20px;
  text-decoration: none;
  color: inherit;
}
.deep-pieza-enlace:hover { background: #f4f7f9; }
.deep-pieza-enlace .meta { margin-top: auto; padding-top: 8px; }

/* Estado de la entrada. El color acompana; la palabra informa por si sola. */
.deep-estado {
  display: inline-block;
  font-family: var(--sans-cnd);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 2px 7px;
  margin-bottom: 11px;
}
.deep-estado-abierta { color: #1f6b53; }
.deep-estado-cerrada { color: var(--rojo-oscuro); }

.deep-titulo {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 .45rem;
}

.deep-bajada {
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 0;
}

@media (max-width: 860px) {
  .deep-rejilla,
  .deep-rejilla[data-piezas="2"] { grid-template-columns: 1fr; }
  .deep-cabecera { align-items: flex-start; }
}

/* --- Voces: columnas de la comunidad -------------------------------------
   El retrato es el elemento nuevo de esta seccion. Va redondo y del mismo
   tamano siempre, aunque la foto original fuera vertical u horizontal: el
   recorte cuadrado lo hace el servidor antes de guardarla. Cuando no hay foto
   se pinta la inicial del autor en un circulo gris, para que la rejilla no se
   descuadre y la ficha no parezca rota.
   REVERSION: borrar este bloque; la seccion queda sin adornos pero legible. */
.navegacion-voces { color: #ff918c !important; }

/* Parche de contraste: sólo texto, sin cambiar fondos ni marca. */
.meta,
.barra-cifras-hora,
.cifra-pais,
.cifra-igual,
.breve-fuente,
.franja-indice .cuenta { color: #526874; }
.barra-cifras-hoy,
.cifra-baja { color: #b52c34; }
.cifra-sube { color: #24685d; }

.voces-retrato {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--caja);
  flex: 0 0 auto;
}

.voces-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans-cnd);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--tinta-suave);
  line-height: 1;
}

.voces-retrato-grande { width: 132px; height: 132px; }
.voces-retrato-grande.voces-inicial { font-size: 3.3rem; }

/* Columna de la semana: retrato a la izquierda, texto al lado. */
.voces-destacada {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  border-top: var(--regla-gruesa);
  border-bottom: var(--regla-fina);
  padding: 24px 0 26px;
}

.voces-destacada-texto { flex: 1 1 auto; min-width: 0; }

.voces-destacada-titulo {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .5rem;
}
.voces-destacada-titulo a { color: inherit; text-decoration: none; }
.voces-destacada-titulo a:hover { color: var(--rojo); }

.voces-destacada-bajada {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0 0 .7rem;
}

.voces-firma {
  font-family: var(--sans);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  margin: 0 0 .4rem;
}

/* Rejilla de columnas anteriores. */
/* El borde va en cada ficha y no como fondo de la rejilla: con dos o tres
   columnas, un fondo de rejilla deja bloques grises en las celdas que
   sobran. Asi la seccion se ve igual de ordenada con una columna o con doce. */
.voces-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.voces-ficha {
  background: var(--papel);
  border: 1px solid #dde4e8;
  border-top: 3px solid var(--tinta);
}

.voces-ficha-enlace {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
.voces-ficha-enlace:hover { background: #f4f7f9; }
.voces-ficha-enlace .meta { margin-top: auto; padding-top: 8px; }
.voces-ficha-enlace .voces-retrato { margin-bottom: 12px; }

.voces-ficha-titulo {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.24;
  margin: 0 0 .35rem;
}

/* Firma del autor arriba de la columna. */
.voces-autor {
  display: flex;
  gap: 16px;
  align-items: center;
  border-top: var(--regla-fina);
  border-bottom: var(--regla-fina);
  padding: 16px 0;
  margin: 20px 0 0;
}
.voces-autor-nombre {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
}
.voces-autor-nota {
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--tinta-suave);
  margin: .15rem 0 .25rem;
}

/* Aviso corto antes del texto y descargo largo al pie. */
.voces-aviso {
  font-family: var(--sans-cnd);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rojo-oscuro);
  border-left: 3px solid var(--rojo);
  padding: 6px 0 6px 12px;
  /* margin-block y no margin: `envoltura-estrecha` centra con margenes
     laterales automaticos, y un `margin` completo se los borraba, con lo que
     el aviso se iba al borde de la pantalla. */
  margin-block: 22px 4px;
}

.voces-descargo {
  background: var(--caja);
  border-top: 3px solid var(--tinta);
  padding: 20px 22px;
  margin-top: 34px;
}
.voces-descargo-titulo {
  font-family: var(--sans-cnd);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
}
.voces-descargo p {
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0;
}
.voces-descargo-pie { margin-top: .8rem !important; }

.voces-cuerpo a { color: var(--rojo-oscuro); }

/* Formulario de envio. */
.voces-invitacion {
  max-width: 42rem;
  margin-bottom: 22px;
}
.voces-invitacion p {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 .7rem;
}
.voces-nota-lectura {
  font-family: var(--sans) !important;
  font-size: .89rem !important;
  color: var(--tinta-suave);
}

.voces-forma {
  max-width: 42rem;
  border-top: var(--regla-media);
  padding-top: 22px;
}

.voces-forma-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.voces-campo { display: block; margin-bottom: 16px; }
.voces-campo > span {
  display: block;
  font-family: var(--sans-cnd);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.voces-campo > span em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gris-claro);
}
.voces-campo input[type=text],
.voces-campo input[type=email],
.voces-campo textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid #c3ced5;
  background: var(--papel);
  color: var(--tinta);
}
.voces-campo textarea {
  font-family: var(--serif);
  line-height: 1.6;
  resize: vertical;
}
.voces-campo input:focus,
.voces-campo textarea:focus {
  outline: 2px solid var(--rojo);
  outline-offset: 1px;
}
.voces-contador,
.voces-ayuda {
  display: block;
  font-family: var(--sans);
  font-size: .8rem;
  /* tinta-suave y no gris-claro: es texto que hay que poder leer, no un
     adorno. El gris claro de la casa sirve para reglas, no para letra chica. */
  color: var(--tinta-suave);
  margin-top: 5px;
  line-height: 1.45;
}

.voces-casilla {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: .89rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.voces-casilla input { margin-top: 3px; flex: 0 0 auto; }

.voces-descargo-forma {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  border-left: 2px solid #c3ced5;
  padding-left: 12px;
  margin: 18px 0;
}

.voces-boton {
  font-family: var(--sans-cnd);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--papel);
  background: var(--rojo);
  border: 0;
  padding: 13px 26px;
  cursor: pointer;
}
.voces-boton:hover { background: var(--rojo-oscuro); }
.voces-boton[disabled] { opacity: .5; cursor: default; }

.voces-respuesta {
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.5;
  padding: 11px 14px;
  margin: 14px 0 0;
}
.voces-respuesta.voces-bien { background: #eaf3ec; color: #1f6b53; }
.voces-respuesta.voces-mal { background: #fdecea; color: var(--rojo-oscuro); }

@media (max-width: 700px) {
  .voces-destacada { flex-direction: column; gap: 16px; }
  .voces-retrato-grande { width: 96px; height: 96px; }
  .voces-retrato-grande.voces-inicial { font-size: 2.4rem; }
  .voces-destacada-titulo { font-size: 1.5rem; }
}

/* EL BUZON DE VOCES
   La segunda via de entrada, debajo del formulario y claramente separada de
   el por una regla: son dos caminos al mismo lugar, no un paso siguiente.
   Mismo ancho de lectura que el formulario para que las dos columnas de texto
   queden alineadas en pantalla grande. */
.voces-buzon {
  max-width: 42rem;
  margin-top: 30px;
  padding-top: 22px;
  border-top: var(--regla-media);
}
.voces-buzon-titulo {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 .7rem;
}
.voces-buzon p {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 .7rem;
}
.voces-buzon a {
  color: var(--rojo-oscuro);
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* Editorial portada finita y Latam: no cambia los chats ni sus estilos. */
.editorial-cabecera { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; }
.editorial-cabecera .rotulo { margin-bottom:0; }
.editorial-enlace { font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:5px; }
.portada-latam { border-top:3px solid var(--rojo, #e3120b); padding-top:28px; }
.portada-latam #latam-titulo { font-family:var(--serif); font-size:34px; text-transform:none; letter-spacing:0; margin-top:8px; }
.editorial-final { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 0 0; margin-top:28px; border-top:1px solid #d8d8d8; }
.editorial-final p { margin:0; font-size:15px; }
.franja-indice-compacta .rejilla-indice { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.franja-indice-compacta .indice-seccion p { display:none; }
.franja-indice-compacta .indice-seccion { padding-block:10px; }
.franja-indice-compacta .indice-seccion h3 { font-size:20px; }
.editorial-paises { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.editorial-paises a { padding:10px 16px; border:1px solid #d0d0d0; font-size:15px; }
.editorial-paises a[aria-current] { background:#171717; color:white; border-color:#171717; }
.editorial-paginacion { display:flex; justify-content:center; align-items:center; gap:24px; padding-block:24px 48px; font-size:14px; }
.editorial-paginacion a { padding:12px 18px; border:1px solid #999; }
.editorial-paises a:focus-visible, .editorial-enlace:focus-visible, .editorial-paginacion a:focus-visible { outline:2px solid #e3120b; outline-offset:4px; }
@media(max-width:620px) {
 .editorial-cabecera { align-items:flex-start; }
 .editorial-cabecera .rotulo { font-size:23px; }
 .editorial-cabecera .editorial-enlace { max-width:135px; text-align:right; }
 .editorial-final { flex-direction:column; align-items:flex-start; }
 .franja-indice-compacta .rejilla-indice { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .editorial-paginacion { gap:12px; flex-wrap:wrap; }
 .portada-latam .pieza, .portada-recientes .pieza { padding:18px 0; }
 .portada-latam .pieza > a, .portada-recientes .pieza > a {
   display:grid; grid-template-columns:96px minmax(0,1fr); column-gap:16px; row-gap:5px;
 }
 .portada-latam .pieza-figura, .portada-recientes .pieza-figura {
   grid-column:1; grid-row:1 / span 5; width:96px; height:100px; margin:0; aspect-ratio:auto;
 }
 .portada-latam .pieza-figura img, .portada-recientes .pieza-figura img { height:100%; object-fit:contain; }
 .portada-latam .pieza > a > :not(figure), .portada-recientes .pieza > a > :not(figure) { grid-column:2; }
 .portada-latam .pieza-titulo, .portada-recientes .pieza-titulo {
   font-size:21px; line-height:1.16; margin:0;
 }
 .portada-latam .pieza-bajada, .portada-recientes .pieza-bajada { display:none; }
 .portada-latam .pieza > .cap-compartir, .portada-recientes .pieza > .cap-compartir { margin-left:112px; }
 .franja-indice-compacta .indice-seccion { padding:8px 0; border-right:0; }
 .franja-indice-compacta .indice-seccion h3 { font-size:17px; }
 body:has(.portada-recientes) .pie-rejilla { grid-template-columns:1fr 1fr; gap:24px; }
 body:has(.portada-recientes) .pie-marca { grid-column:1 / -1; }
}