/* =========================================================================
   Desinformantes — estilos propios del especial.

   CSS plano, sin compilación: la plantilla lo carga con
   {% static 'desinformantes/desinformantes.css' %}, igual que las series de
   apps/series/. Solo contiene lo que es de este especial; el resto sale de
   dist/styles.css, que ya carga base.html:

     - retícula .container / .row / .col-*   (layout/_grid-system.scss)
     - .form-control de los selectores       (components/_forms.scss)
     - .modal y su JS por delegación         (components/_modal.scss)
     - .scl-button-primary / -secondary      (components/_buttons.scss)
     - .scl-icons-list de compartir          (components/_icons-list.scss)
     - .scl-icon de los {% svg_icon %}       (components/_icons.scss)
     - tokens --scl-* (color, tipografía, alturas)  (base/_variables.scss)

   Las medidas van en rem porque el sitio sube la raíz a 110% en pantallas
   grandes (base/_globals.scss): en px no escalarían con el resto.

   Breakpoints, los mismos que utils/_mixins.scss:
     min-width: 768px (md) / 992px (lg)   ·   max-width: 769px (phone)
   ========================================================================= */

.scl-desinformantes,
.scl-desinformante {
  --desinformantes-accent: var(--scl-indigo);
  --desinformantes-soft: color-mix(
    in srgb,
    var(--desinformantes-accent) 7%,
    var(--scl-white)
  );
  --desinformantes-line: color-mix(
    in srgb,
    var(--desinformantes-accent) 22%,
    var(--scl-white)
  );

  /* Triángulo de alerta (Font Awesome, licencia CC BY 4.0) usado como
     máscara: el color lo pone background-color allí donde se aplica. */
  --desinformantes-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill-rule='evenodd' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");

  /* Mismo dibujo que templates/icons/external-link.svg, como máscara para el
     pseudoelemento de los enlaces de las tablas. */
  --desinformantes-external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/svg%3E");
}

/* =========================================================================
   Portada
   ========================================================================= */

.scl-desinformantes {
  padding-top: var(--scl-main-nav-height);
}

/* --- Portada: cabecera --------------------------------------------------- */

.scl-desinformantes-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* svh: en móvil 100vh cuenta la barra del navegador, así que el hero se
     salía de pantalla y empujaba el resto hacia abajo. La línea con vh es el
     respaldo para los navegadores que no entienden svh. */
  height: calc(100vh - var(--scl-main-nav-height));
  height: calc(100svh - var(--scl-main-nav-height));
  min-height: 26.25rem;
  background-color: var(--scl-series-ink);
}

.scl-desinformantes-header__picture,
.scl-desinformantes-header__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Scrim del sitio: el titular en blanco necesita contraste sobre la
   ilustración, y así no depende de un text-shadow duro. El degradado solo no
   basta —la ilustración tiene zonas claras justo a la altura del texto—, así
   que debajo va un velo plano. */
.scl-desinformantes-header__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 12, 33, 0.32);
  background-image: var(--scl-scrim-ink-soft);
}

.scl-desinformantes-header__content {
  position: relative;
  z-index: 1;
  width: min(100%, 56.25rem);
  padding: 0 1.25rem;
  color: var(--scl-white);
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* El titular funciona como logotipo de la serie: bloque compacto de sans en
   el peso más alto. Va con la Figtree variable del sitio (llega a 900 sin
   sintetizar) y no con la Noe Display de los titulares, que solo trae bold. */
.scl-desinformantes-header__title {
  margin: 0;
  font-family: var(--scl-font-sans-serif);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.01em;
  font-size: clamp(3.5rem, 13vw, 7.5rem);
}

/* Los cortes de palabra son decorativos: en móvil el titular baja a cuatro
   líneas (DES/INFOR/MAN/TES) y en escritorio a dos (DESINFOR/MANTES). El h1
   lleva aria-label con la palabra entera. */
.scl-desinformantes-header__title-line {
  display: block;
}

.scl-desinformantes-header__title-line span {
  display: block;
}

.scl-desinformantes-header__subtitle {
  margin: 1.125rem auto 0;
  max-width: 38.75rem;
  font-family: var(--scl-font-sans-serif);
  font-weight: 500;
  line-height: 1.35;
  font-size: clamp(1.0625rem, 3.4vw, 1.875rem);
}

.scl-desinformantes-header__subtitle br {
  display: none;
}

@media screen and (min-width: 768px) {
  .scl-desinformantes-header__title-line span {
    display: inline;
  }

  .scl-desinformantes-header__subtitle br {
    display: initial;
  }
}

/* --- Portada: bajada ----------------------------------------------------- */

.scl-desinformantes-intro {
  padding: 3rem 0 2rem;
  font-family: var(--scl-font-serif);
  color: var(--scl-color-text-secondary);
}

.scl-desinformantes-intro p {
  margin: 0 0 1.2em;
  font-size: 1.125rem;
  line-height: var(--scl-font-serif-line-height);
}

.scl-desinformantes-intro p:last-child {
  margin-bottom: 0;
}

/* Los enlaces del texto van subrayados, pero el botón de «Metodología»
   también es un <a>: sin el :not() salía con el subrayado y el color de
   enlace por dentro y el borde del botón por fuera. */
.scl-desinformantes-intro a:not([class*="scl-button"]) {
  color: var(--scl-color-link);
  text-decoration: underline;
}

.scl-desinformantes-intro__actions {
  margin-top: 1.5rem;
  text-align: right;
}

.scl-desinformantes-intro__actions .scl-button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}

/* --- Portada: filtros ---------------------------------------------------- */

.scl-desinformantes-filters {
  padding: 1.5rem;
  border: solid 1px var(--scl-color-border);
  border-radius: 0.75rem;
  background-color: var(--desinformantes-soft);
}

.scl-desinformantes-filters__title {
  margin: 0 0 1rem;
  font-family: var(--scl-font-label);
  font-size: 0.75rem;
  font-weight: var(--scl-font-label-weight);
  letter-spacing: var(--scl-font-label-letter-spacing);
  text-transform: uppercase;
  color: var(--scl-color-text-muted);
}

/* Columna en flex con el selector abajo: si un rótulo se parte en dos líneas,
   los tres siguen alineados entre sí. */
.scl-desinformantes-filters__field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.scl-desinformantes-filters__label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--scl-font-label);
  font-size: 0.8125rem;
  font-weight: var(--scl-font-label-weight);
  color: var(--scl-color-text);
}

/* Campo de búsqueda: el .form-control es el del core; aquí solo se le hace
   sitio a la lupa. La «x» nativa del type="search" se deja como está: es la
   forma más rápida de vaciar la búsqueda y su evento input ya se escucha. */

/* Clase propia y no __field: a esa se le quita el margen inferior en
   escritorio (allí las tres columnas van en una fila) y la búsqueda quedaba
   pegada a los rótulos de los selectores. */
.scl-desinformantes-filters__search-field {
  margin-bottom: 1.5rem;
}

.scl-desinformantes-filters__search {
  position: relative;
  /* Una caja de texto de 1.800 px para escribir un apellido se lee como un
     error de maquetación; con el tope, además, la lupa queda cerca del
     cursor. */
  max-width: 30rem;
}

.scl-desinformantes-filters__search .scl-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--scl-color-text-muted);
  pointer-events: none;
}

.scl-desinformantes-filters__search .form-control {
  padding-left: 2.25rem;
}

.scl-desinformantes-filters__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.scl-desinformantes-filters__count {
  margin: 0;
  font-size: 0.875rem;
  color: var(--scl-color-text-muted);
}

.scl-desinformantes-filters__count b {
  color: var(--scl-color-text);
}

/* El botón de limpiar solo aparece cuando hay algún filtro puesto; el JS
   alterna el atributo hidden. Hace falta declarar el display:none porque el
   `display: inline-block` de .scl-button-secondary le gana al hidden del
   navegador. */
.scl-desinformantes-filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.scl-desinformantes-filters__reset[hidden] {
  display: none;
}

@media screen and (min-width: 768px) {
  .scl-desinformantes-filters__field {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 769px) {
  .scl-desinformantes-filters {
    padding: 1.125rem;
  }
}

/* --- Portada: listado ---------------------------------------------------- */

.scl-desinformantes-list {
  margin: 2rem 0 5rem;
}

/* El filtro esconde la columna entera, no la tarjeta: así no queda el hueco
   del grid. */
.scl-desinformantes-list__col {
  margin-bottom: 1.5rem;
}

.scl-desinformantes-list__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--scl-color-text-muted);
}

.scl-desinformantes-list__empty[hidden] {
  display: none;
}

.scl-desinformante-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  border: solid 1px var(--scl-color-border);
  border-radius: 0.625rem;
  background-color: var(--scl-white);
  transition: var(--scl-transition-fast);
}

.scl-desinformante-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: color-mix(
    in srgb,
    var(--desinformantes-accent) 35%,
    var(--scl-color-border)
  );
}

.scl-desinformante-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: solid 1px var(--scl-color-border);
}

.scl-desinformante-card__photo {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  overflow: hidden;
  background-color: var(--scl-gray-lighter);
}

.scl-desinformante-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.scl-desinformante-card__identity {
  min-width: 0;
}

.scl-desinformante-card__name {
  margin: 0 0 0.25rem;
  font-family: var(--scl-font-heading);
  font-size: 1.0625rem;
  line-height: 1.2;
}

.scl-desinformante-card__name a {
  color: var(--scl-color-text);
  transition: var(--scl-transition-fast);
}

/* Toda la tarjeta es zona de clic, pero el enlace real sigue siendo el
   nombre: así el teclado y los lectores de pantalla ven un solo destino. */
.scl-desinformante-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.scl-desinformante-card__name a:hover {
  color: var(--desinformantes-accent);
}

.scl-desinformante-card__role {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--scl-color-text-muted);
}

/* El separador entre profesión y país lo pone el CSS: cualquiera de los dos
   datos puede faltar, y así la plantilla no depende de un espacio pegado a un
   {% if %} (que el formateador colapsa). */
.scl-desinformante-card__role span + span::before {
  content: "·";
  margin: 0 0.35em;
}

.scl-desinformante-card__body {
  flex: 1 1 auto;
  padding-top: 0.75rem;
}

.scl-desinformante-card__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--scl-font-label);
  font-size: 0.6875rem;
  font-weight: var(--scl-font-label-weight);
  letter-spacing: var(--scl-font-label-letter-spacing);
  text-transform: uppercase;
  color: var(--scl-color-text-muted);
}

/* Mismo triángulo de alerta que las listas de la ficha, para que el número de
   registros se lea como lo que es: un contador de alertas. */
.scl-desinformante-card__alerts {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: solid 1px var(--scl-color-border);
  font-size: 0.8125rem;
  color: var(--scl-color-text-muted);
}

.scl-desinformante-card__alerts::before {
  content: "";
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--scl-pink);
  mask: var(--desinformantes-alert-icon) center / contain no-repeat;
}

.scl-desinformante-card__alerts b {
  color: var(--scl-pink);
}

/* Chips de tópicos, compartidos por la tarjeta y la ficha. */
.scl-desinformantes-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scl-desinformantes-tag {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border: solid 1px
    color-mix(
      in srgb,
      var(--desinformantes-accent) 30%,
      var(--scl-color-border)
    );
  border-radius: 999px;
  background-color: var(--desinformantes-soft);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--scl-color-text-secondary);
}

/* =========================================================================
   Ficha de perfil
   ========================================================================= */

.scl-desinformante {
  padding-top: var(--scl-main-nav-height);
  padding-bottom: 5rem;
}

.scl-desinformante__inner {
  width: min(100%, 53.75rem);
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Ficha: barra con el nombre de la serie ------------------------------ */

.scl-desinformante__serie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: var(--scl-series-ink);
  color: var(--scl-white);
  font-size: 0.875rem;
  text-align: center;
}

.scl-desinformante__serie a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
}

.scl-desinformante__serie a:hover {
  text-decoration: underline;
}

.scl-desinformante__serie b {
  font-weight: 700;
}

.scl-desinformante__serie .scl-icon {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentcolor;
}

/* --- Ficha: cabecera ----------------------------------------------------- */

.scl-desinformante__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
}

.scl-desinformante__title {
  margin: 0;
  font-family: var(--scl-font-heading);
  font-size: clamp(1.625rem, 5vw, 2.375rem);
  line-height: 1.15;
}

.scl-desinformante__identity {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}

.scl-desinformante__photo {
  flex: 0 0 auto;
  width: 8.75rem;
  height: 8.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--scl-gray-lighter);
}

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

.scl-desinformante__facts {
  flex: 1 1 auto;
  min-width: 0;
}

.scl-desinformante__fact {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.scl-desinformante__fact b {
  font-weight: 700;
}

.scl-desinformante__description {
  margin-top: 1.25rem;
  font-family: var(--scl-font-serif);
  font-size: 1.0625rem;
  line-height: var(--scl-font-serif-line-height);
  color: var(--scl-color-text-secondary);
}

.scl-desinformante__description p {
  margin: 0 0 1em;
}

.scl-desinformante__description p:last-child {
  margin-bottom: 0;
}

.scl-desinformante__description a {
  color: var(--scl-color-link);
  text-decoration: underline;
}

@media screen and (max-width: 769px) {
  .scl-desinformante__identity {
    gap: 0.875rem;
  }

  .scl-desinformante__photo {
    width: 6rem;
    height: 6rem;
  }
}

/* --- Ficha: secciones ---------------------------------------------------- */

.scl-desinformante__section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: solid 1px var(--scl-color-border);
}

.scl-desinformante__section-title {
  margin: 0 0 0.875rem;
  font-family: var(--scl-font-label);
  font-size: 0.8125rem;
  font-weight: var(--scl-font-label-weight);
  letter-spacing: var(--scl-font-label-letter-spacing);
  text-transform: uppercase;
  color: var(--scl-color-text-muted);
}

.scl-desinformante__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.55;
  list-style: disc;
}

.scl-desinformante__list li {
  margin-bottom: 0.625rem;
}

.scl-desinformante__list li:last-child {
  margin-bottom: 0;
}

.scl-desinformante__list li::marker {
  color: var(--scl-gray-mid);
}

/* Lista de afirmaciones desinformativas: cada una lleva un triángulo de
   alerta en lugar de la viñeta. Va como máscara y no como {% svg_icon %}
   porque es decorativo y se repite en cada <li>: así no se mete un SVG por
   ítem en el HTML. */
.scl-desinformante__list--alert {
  padding-left: 1.875rem;
  list-style: none;
}

.scl-desinformante__list--alert li {
  position: relative;
}

.scl-desinformante__list--alert li::before {
  content: "";
  position: absolute;
  left: -1.875rem;
  top: 0.25rem;
  width: 1.0625rem;
  height: 1.0625rem;
  background-color: var(--scl-pink);
  mask: var(--desinformantes-alert-icon) center / contain no-repeat;
}

.scl-desinformante__note {
  padding: 1rem;
  border-left: solid 3px var(--scl-pink);
  background-color: var(--scl-gray-lightest);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.scl-desinformante__note p {
  margin: 0 0 0.8em;
}

.scl-desinformante__note p:last-child {
  margin-bottom: 0;
}

.scl-desinformante__note a {
  color: var(--scl-color-link);
  text-decoration: underline;
}

.scl-desinformante__footer {
  margin-top: 2rem;
  text-align: center;
}

/* --- Ficha: tablas ------------------------------------------------------- */
/* En escritorio son tablas normales; por debajo de 769px cada fila se apila
   como una ficha y el nombre de la columna sale del data-label de la celda.
   La versión anterior usaba las clases .table/.table-responsive de Bootstrap,
   que este sitio no define: las tablas salían sin bordes y desbordaban la
   pantalla en móvil. */

.scl-desinformante-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.45;
}

.scl-desinformante-table th,
.scl-desinformante-table td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.scl-desinformante-table thead th {
  background-color: var(--desinformantes-soft);
  border-bottom: solid 2px var(--desinformantes-line);
  font-family: var(--scl-font-label);
  font-size: 0.75rem;
  font-weight: var(--scl-font-label-weight);
  letter-spacing: var(--scl-font-label-letter-spacing);
  text-transform: uppercase;
  color: var(--desinformantes-accent);
  white-space: nowrap;
}

/* Sin cebreado: con descripciones de varias líneas las bandas grises pesaban
   más que el propio texto. Basta una línea fina entre filas y el realce al
   pasar el cursor. */
.scl-desinformante-table tbody tr {
  border-bottom: solid 1px var(--scl-color-border);
  transition: background-color 200ms ease-out;
}

.scl-desinformante-table tbody tr:last-child {
  border-bottom: none;
}

.scl-desinformante-table tbody tr:hover {
  background-color: var(--desinformantes-soft);
}

.scl-desinformante-table tbody td {
  color: var(--scl-color-text-secondary);
}

.scl-desinformante-table__date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--scl-color-text-muted);
}

/* El nombre de la fuente en el color del texto y con subrayado tenue: en la
   columna había una fila de enlaces morados que competían con la lectura. */
.scl-desinformante-table__link {
  color: var(--scl-color-text);
  text-decoration: underline;
  text-decoration-color: var(--desinformantes-line);
  text-underline-offset: 3px;
  transition: var(--scl-transition-fast);
}

/* El icono va como pseudoelemento pegado a la última palabra, sin espacio en
   blanco delante: así nunca cae solo en la línea siguiente, que es lo que
   pasaba con el {% svg_icon %} dentro del enlace. */
.scl-desinformante-table__link::after {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.35em;
  background-color: currentcolor;
  mask: var(--desinformantes-external-icon) center / contain no-repeat;
}

.scl-desinformante-table__link:hover {
  color: var(--desinformantes-accent);
  text-decoration-color: currentcolor;
}

@media screen and (max-width: 769px) {
  .scl-desinformante-table {
    display: block;
  }

  /* clip en vez de display:none: la cabecera sigue existiendo para los
     lectores de pantalla que anuncian la relación celda-columna. */
  .scl-desinformante-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .scl-desinformante-table tbody,
  .scl-desinformante-table tr,
  .scl-desinformante-table td {
    display: block;
    width: 100%;
  }

  .scl-desinformante-table tbody tr {
    margin-bottom: 0.75rem;
    padding: 0.375rem 0;
    border: solid 1px var(--scl-color-border);
    border-left: solid 3px var(--desinformantes-line);
    border-radius: 0.5rem;
    background-color: var(--scl-white);
  }

  .scl-desinformante-table tbody tr:last-child {
    margin-bottom: 0;
    border-bottom: solid 1px var(--scl-color-border);
  }

  .scl-desinformante-table td {
    padding: 0.375rem 0.75rem;
  }

  .scl-desinformante-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    font-family: var(--scl-font-label);
    font-size: 0.6875rem;
    font-weight: var(--scl-font-label-weight);
    letter-spacing: var(--scl-font-label-letter-spacing);
    text-transform: uppercase;
    color: var(--scl-color-text-muted);
  }

  /* Las celdas vacías no dejan una etiqueta suelta. */
  .scl-desinformante-table td:empty {
    display: none;
  }
}

/* --- Ficha: versión incrustada (pym.js) ---------------------------------- */
/* El iframe muestra solo la tarjeta de presentación: sin cabecera del sitio,
   sin historial y con un enlace a la ficha completa. */

.scl-desinformante--embed {
  padding-top: 0;
  padding-bottom: 1.5rem;
}

.scl-desinformante--embed .scl-desinformante__header {
  margin-top: 1.25rem;
}