/* ===========================================================================
   alier-brand.css — tipografía e identidad de marca
   ---------------------------------------------------------------------------
   Única hoja donde vive la marca. El resto de la aplicación sigue siendo
   agnóstica de tema y no conoce ni la fuente ni el nombre del producto.
   =========================================================================== */

/* --- ALIERnet Display -------------------------------------------------------
   Fuente display de marca, generada a partir del lettering original del
   wordmark. Es ALL CAPS: las minúsculas están mapeadas a las mismas formas
   mayúsculas, así que no sirve para texto corrido — solo para la marca.

   Trae una ligadura OpenType que reproduce el wordmark ALIERNET completo.
   Aquí NO se activa, porque escribimos "ALIER CONNECT" y el espacio la
   rompe; si alguna vez se quiere el wordmark íntegro basta con escribir
   ALIERNET seguido y activar las ligaduras discrecionales.

   WOFF2 pesa 4 KB: se puede precargar sin coste apreciable. */
@font-face {
    font-family: "Aliernet Display";
    /* El WOFF2 original del paquete se lee bien con herramientas pero el
       navegador le daba anchura de avance CERO y las letras salían
       superpuestas. Estos se han regenerado desde el OTF, cuyas tablas
       (hmtx, hhea, cmap, CFF) están verificadas una a una.
       El OTF queda de último recurso. */
    src: url("../assets/fonts/AliernetDisplay-Regular.woff2") format("woff2"),
         url("../assets/fonts/AliernetDisplay-Regular.woff") format("woff"),
         url("../assets/fonts/AliernetDisplay-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    /* swap: el nombre se ve desde el primer frame con la fuente de respaldo
       y se sustituye al cargar. Nunca hay un hueco en blanco en la cabecera. */
    font-display: swap;
}

/* --- Wordmark ---------------------------------------------------------------
   Dos SVG en línea, uno por palabra, para poder darles colores distintos.
   La altura la fija el contenedor y el ancho lo calcula el viewBox de cada
   uno, así que las proporciones del lettering se respetan siempre. */
.al-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    text-decoration: none;
    flex: 0 0 auto;
}

.al-brand__mark,
.al-brand__product {
    display: block;
    block-size: 1.125rem;
}

/* --- Isotipo ----------------------------------------------------------------
   El isotipo de Alier Connect, delante del lettering. Se sale un poco por
   arriba y por abajo del alto de las letras (36px contra 18px): es lo normal
   en una marca compuesta, así el símbolo no parece hundido.

   Dos SVG de marketing, copiados tal cual. El color vive en el archivo, no
   en esta hoja. El de color en temas claros; el negativo cuando
   `html[data-al-scheme="dark"]` (los 7 temas oscuros). No se tiñen.

   Mide 36 px (2.25rem) contra los 18 px del lettering: término medio entre
   los 24 px (se leía como icono de barra) y los 48 px (rozaba la cabecera
   de 56). El tamaño lo fija este bloque, no el viewBox del SVG.

   EXCEPCIÓN DE COLOR, documentada: este es el único elemento de la aplicación
   con color propio, junto con los logos de transportista. Un logotipo de
   marca no se deriva del tema. */
.al-brand__isotype {
    display: block;
    block-size: 2.25rem;
    flex: 0 0 auto;
}
.al-brand__isotype-img {
    display: block;
    block-size: 100%;
    inline-size: auto;
}
.al-brand__isotype-img--neg { display: none; }
html[data-al-scheme="dark"] .al-brand__isotype-img--color { display: none; }
html[data-al-scheme="dark"] .al-brand__isotype-img--neg { display: block; }
.al-brand__mark svg,
.al-brand__product svg {
    display: block;
    block-size: 100%;
    inline-size: auto;
}

/* Misma jerarquía que la marca anterior: la casa en el color de texto y el
   producto en el acento DEL TEMA, nunca un color fijo. */
.al-brand__mark    { color: var(--al-text); }
.al-brand__product { color: var(--al-accent); }

.al-brand:focus-visible {
    box-shadow: var(--al-focus-ring);
    outline: none;
    border-radius: 3px;
}

/* En pantallas estrechas se cae "CONNECT" y queda solo ALIER: sigue siendo
   reconocible y libera sitio para los controles de la cabecera. */
@media (max-width: 640px) {
    .al-brand__product { display: none; }
}