/* marea-marca | tema-ghost | assets/built/campana.css
   GENERADO por scripts/tema-ghost.mjs desde campanas/campana.css (md5 de la
   fuente e9dc5fb0ccdba429e072b4646da02416). No editar a mano.

   Componentes de la capa de campana para la tarjeta HTML de una entrada
   (tarea 1754). Cada selector queda bajo una clase .campana o .campana-*, y lo
   que no la llevaba va con :where(.campana), sin sumar especificidad. Las
   reglas de la lamina de redes no entran. El encaje en la rejilla de Ghost
   vive en assets/css/07-campana.css. */

.campana {
  --campana-fondo-figura: var(--marea-color-fondo-base);
  --campana-leyenda-familia: var(--marea-tipografia-familia-titulo);
  --campana-leyenda-peso: var(--marea-tipografia-peso-texto-fuerte);
  color: var(--marea-color-tinta-cuerpo);
  font-family: var(--marea-tipografia-familia-texto);
}

.campana-cinta {
  height: var(--marea-cinta-altura);
  background-image: linear-gradient(
    to right,
    var(--marea-cinta-color-inicio) 0%,
    var(--marea-cinta-color-inicio) var(--marea-cinta-proporcion-inicio),
    var(--marea-cinta-color-fin) var(--marea-cinta-proporcion-inicio),
    var(--marea-cinta-color-fin) 100%
  );
}

.campana-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--marea-espacio-apretado) var(--marea-espacio-componente);
}

.campana-frase {
  margin: 0;
  font-family: var(--marea-tipografia-familia-titulo);
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  color: var(--marea-color-tinta-cuerpo);
}

.campana-fin {
  margin: 0;
  font-weight: var(--marea-tipografia-peso-etiqueta);
  color: var(--marea-color-tinta-suave);
  white-space: nowrap;
}

:where(.campana) .capricho {
  margin: 0;
}

:where(.campana) .capricho-figura {
  position: relative;
  background: var(--campana-fondo-figura);
}

:where(.campana) .capricho-figura img {
  display: block;
  margin-inline: auto;
}

:where(.campana) .capricho-credito {
  margin: var(--marea-base-espacio-1) 0 0;
  color: var(--marea-color-tinta-suave);
  text-align: right;
}

:where(.campana) .capricho-leyenda {
  margin: 0;
  font-family: var(--campana-leyenda-familia);
  font-weight: var(--campana-leyenda-peso);
  color: var(--marea-color-tinta-cuerpo);
  text-wrap: pretty;
}

:where(.campana) .parte-implicada {
  margin: 0;
  color: var(--marea-color-margen-tinta);
  border-left: var(--marea-trazo-marcador) solid var(--marea-color-margen-marcador);
}

:where(.campana) .parte-implicada strong {
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  color: var(--marea-color-tinta-cuerpo);
}

:where(.campana) .firma {
  display: flex;
  align-items: center;
  margin: 0;
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  color: var(--marea-color-tinta-cuerpo);
  white-space: nowrap;
}

:where(.campana) .firma img {
  display: block;
  width: auto;
}

:where(.campana) .borrador {
  position: relative;
  outline: 2px dashed var(--marea-color-borde-fuerte);
  outline-offset: 3px;
}

:where(.campana) .borrador-etiqueta {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 2px 6px;
  background: var(--marea-color-fondo-fuerte);
  color: var(--marea-color-tinta-sobre-fuerte);
  font-family: var(--marea-tipografia-familia-texto);
  font-size: 12px;
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  line-height: 1.4;
  white-space: nowrap;
}

:where(.campana) .borrador-etiqueta-linea {
  position: static;
  display: block;
  width: max-content;
  margin-bottom: 4px;
}

.campana-web {
  margin: 0;
  background: var(--marea-color-fondo-base);
  font-size: var(--marea-tipografia-tamano-cuerpo);
  line-height: var(--marea-tipografia-interlinea-cuerpo);
}

.campana-web .campana-columna {
  max-width: var(--marea-medida-lectura);
  margin-inline: auto;
  padding: var(--marea-espacio-holgado) var(--marea-espacio-componente) var(--marea-espacio-seccion);
}

.campana-web .campana-cabeza {
  padding-bottom: var(--marea-espacio-apretado);
  border-bottom: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
}

.campana-web .campana-frase {
  font-size: var(--marea-tipografia-tamano-pie);
}

.campana-web .campana-fin {
  font-size: var(--marea-tipografia-tamano-pie);
}

.campana-web .campana-titulo {
  margin: var(--marea-espacio-bloque) 0 var(--marea-espacio-componente);
  font-family: var(--marea-tipografia-familia-titulo);
  font-size: var(--marea-tipografia-tamano-titulo-2);
  font-weight: var(--marea-tipografia-peso-titulo);
  line-height: var(--marea-tipografia-interlinea-titulo);
  letter-spacing: var(--marea-tipografia-letra-titulo);
  text-wrap: balance;
}

.campana-web .capricho {
  margin-block: var(--marea-espacio-holgado);
}

.campana-web .capricho-figura {
  padding: var(--marea-espacio-componente);
}

.campana-web .capricho-figura img {
  max-width: 100%;
  max-height: 34rem;
  height: auto;
}

.campana-web .capricho-credito {
  font-size: var(--marea-tipografia-tamano-micro);
}

.campana-web .capricho-leyenda {
  margin-top: var(--marea-espacio-componente);
  font-size: var(--marea-tipografia-tamano-titulo-4);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
}

.campana-web .parte-implicada {
  margin-block: var(--marea-espacio-bloque);
  padding: var(--marea-espacio-componente);
  background: var(--marea-color-margen-fondo);
  font-size: var(--marea-tipografia-tamano-pie);
}

.campana-web .llamada {
  margin-block: var(--marea-espacio-bloque);
  padding: var(--marea-espacio-bloque);
  background: var(--marea-color-fondo-acento);
  color: var(--marea-color-tinta-sobre-acento);
  border-radius: var(--marea-radio-tarjeta);
}

.campana-web .llamada-titulo {
  margin: 0 0 var(--marea-espacio-apretado);
  font-family: var(--marea-tipografia-familia-titulo);
  font-size: var(--marea-tipografia-tamano-titulo-4);
  font-weight: var(--marea-tipografia-peso-titulo);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
}

.campana-web .llamada-texto {
  margin: 0 0 var(--marea-espacio-componente);
}

.campana-web .llamada-boton {
  display: inline-flex;
  padding: var(--marea-espacio-apretado) var(--marea-espacio-bloque);
  background: var(--marea-color-interactivo-boton-fondo);
  color: var(--marea-color-interactivo-boton-tinta);
  border-radius: var(--marea-radio-control);
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  text-decoration: none;
}

.campana-web .llamada-boton:hover {
  background: var(--marea-color-interactivo-boton-fondo-activo);
}

.campana-web .llamada-boton:focus-visible {
  outline: var(--marea-trazo-foco) solid var(--marea-color-tinta-cuerpo);
  outline-offset: var(--marea-espacio-apretado);
}

.campana-web .firma {
  gap: var(--marea-espacio-apretado);
  margin-top: var(--marea-espacio-bloque);
  font-size: var(--marea-tipografia-tamano-pie);
}

.campana-web .firma img {
  height: 1rem;
}

.campana-web .campana-aviso {
  margin: 0;
  padding: var(--marea-espacio-apretado) var(--marea-espacio-componente);
  background: var(--marea-color-fondo-fuerte);
  color: var(--marea-color-tinta-sobre-fuerte);
  font-size: var(--marea-tipografia-tamano-pie);
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  text-align: center;
}