/**
 * Lo propio de /captacion/: el aviso, como se ve en una bandeja.
 *
 * Es una tarjeta clara sobre el bloque de tinta, igual que las de /seo/: no
 * hace falta versión oscura, y sí hace falta deshacer el centrado —eso ya lo
 * hace landing.css para cualquier .sector-card dentro de .sector-cifra, y por
 * eso esta hoja no lo repite—.
 *
 * NO imita un cliente de correo con su barra de ventana y sus botones. Un
 * dibujo de Gmail envejece, se ve falso en cuanto alguien usa otro, y sugiere
 * que enseñamos una captura cuando lo que enseñamos es un texto. Lo único que
 * se marca es lo que importa: que el asunto lleva la puntuación.
 *
 * Solo tokens --kairikos-*. Si falta un color o una medida, se añade al :root
 * del tema padre; aquí no se escribe ni un hex.
 */

.le-aviso {
  max-width: 44rem;
  margin: var(--kairikos-sp-6) auto var(--kairikos-sp-4);
  padding: var(--kairikos-sp-5);
  text-align: left;
  background: var(--kairikos-hueso);
  border: 1px solid var(--kairikos-linea);
  border-radius: var(--kairikos-radius-lg);
}

/* En monoespaciada porque es un asunto de correo, no un titular: la fuente
   dice «esto es literal» sin necesidad de explicarlo. */
.le-aviso__asunto {
  font-family: var(--kairikos-font-mono);
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-snug);
  color: var(--kairikos-tinta);
  font-weight: 600;
  margin: 0 0 var(--kairikos-sp-4);
  padding-bottom: var(--kairikos-sp-3);
  border-bottom: 1px solid var(--kairikos-linea);
  /* Un asunto largo no parte la tarjeta en un móvil. */
  overflow-wrap: anywhere;
}

.le-aviso__cuerpo {
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-body);
  color: var(--kairikos-tinta-soft);
  margin: 0 0 var(--kairikos-sp-3);
  overflow-wrap: anywhere;
}

.le-aviso__cuerpo strong {
  color: var(--kairikos-tinta);
  font-weight: 600;
}

.le-aviso__motivo {
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-body);
  color: var(--kairikos-tinta-soft);
  margin: var(--kairikos-sp-4) 0 0;
  padding-top: var(--kairikos-sp-3);
  border-top: 1px solid var(--kairikos-linea);
}

.le-aviso__motivo em {
  color: var(--kairikos-tinta);
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 767px) {
  .le-aviso {
    margin-left: 0;
    margin-right: 0;
    padding: var(--kairikos-sp-4);
  }
}