/**
 * common/financiacion — Franja de financiación europea sobre el pie.
 * Handle: pf_pfuture_component_financiacion
 *
 * Bloques: __inner (contenedor de 1120), __emblemas (los dos logos), __texto
 * (título en negrita y descargo).
 *
 * EXCEPCIÓN DECLARADA AL SISTEMA DE TOKENS (issue #159, anotada en
 * docs/DISENO-EXPEDIENTE.md): la franja es BLANCA en los dos modos. Los emblemas son
 * azul Reflex y rojo bandera, tienen normas de uso que prohíben recolorearlos y no se
 * leen sobre el navy del pie ni sobre el fondo del modo oscuro. Como ningún token de la
 * paleta vale blanco en los dos modos —`surface` y `on-ink` cambian en oscuro—, el
 * fondo es el único literal de color del módulo, y va aquí, en un token propio, para
 * que se vea que es una decisión y no un descuido. El texto cuelga de `bg-ink`, que es
 * navy en los dos modos (DEC-049): sobre blanco da 17,17:1 en claro y 19,2:1 en oscuro.
 *
 * Los emblemas se pintan a ALTO FIJO (48 px, 40 en móvil) con `width: auto`: la
 * proporción la conserva el navegador y no hay `object-fit` que recorte nada.
 */

.pf-financiacion {
  --pf-financiacion-bg: #ffffff;
  --pf-financiacion-text: var(--pf-color-bg-ink);
  --pf-financiacion-rule: color-mix(in srgb, var(--pf-color-bg-ink) 14%, #ffffff);
  --pf-financiacion-emblema-height: 48px;

  border-top: 1px solid var(--pf-financiacion-rule);
  background: var(--pf-financiacion-bg);
  color: var(--pf-financiacion-text);
  color-scheme: light;
}

.pf-financiacion__inner {
  display: flex;
  align-items: center;
  gap: var(--pf-space-lg);
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding: var(--pf-space-md) var(--pf-gutter);
}

.pf-financiacion__emblemas {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--pf-space-md);
}

.pf-financiacion__emblema {
  display: block;
}

.pf-financiacion__img {
  display: block;
  width: auto;
  height: var(--pf-financiacion-emblema-height);
}

.pf-financiacion__texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--pf-text-xs);
  line-height: var(--pf-leading-normal);
}

.pf-financiacion__titulo {
  margin: 0 0 var(--pf-space-3xs);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-weight-bold);
}

.pf-financiacion__descargo {
  margin: 0;
}

/* Por debajo de 900 px: logos arriba, texto debajo. */
@media (max-width: 899px) {
  .pf-financiacion {
    --pf-financiacion-emblema-height: 40px;
  }

  .pf-financiacion__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pf-space-md);
  }

  .pf-financiacion__emblemas {
    flex-wrap: wrap;
  }
}