/* CAMBIO DE MIRADA. · Logotipo tipográfico (decisión 048)
   Urbanist 600 en mayúsculas (sistema tipográfico, decisión 053) con el punto bermellón de la identidad: mismo color (#C23B2A) y
   mismo diámetro relativo que en el lettering v3 (≈ 31 % de la altura de las mayúsculas).
   Aprobado en la vista previa de prototipos/propuesta-cabecera-cambio-de-mirada/. */

.wordmark {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  font: var(--w-title) 25px/1 var(--font);
  letter-spacing: .045em; color: var(--ink);
}
.wordmark .pt {
  display: inline-block; width: .22em; height: .22em; border-radius: 50%;
  background: var(--verm); margin-left: .06em;
}
@media (max-width: 760px) { .wordmark { font-size: 17px; letter-spacing: .035em; } }
@media (max-width: 350px) { .wordmark { font-size: 15.5px; } }

/* Pie de la portada: el logotipo, más pequeño, donde antes iba el lettering a 18 px. */
.wordmark.wordmark-foot { font-size: 15px; }

/* ---------- Logotipo maestro en SVG (Logotipo.astro) ----------
   Inactivo hasta recibir los archivos de web/src/marca/. Se fija solo la altura: el ancho sale del viewBox,
   así que nunca se deforma. Alturas de partida, iguales a las del logotipo provisional; se ajustan con el
   archivo real (y, si hace falta, con el área de respeto que defina su diseño). */
.logo { display: block; line-height: 0; color: var(--ink); }
.logo-svg { display: block; width: auto; height: 26px; overflow: visible; }
.logo-pie .logo-svg { height: 18px; }
@media (max-width: 760px) {
  .logo-cabecera .logo-svg, .logo-menu .logo-svg {
    height: 20px;
    /* En pantallas estrechas, el logotipo nunca invade el botón del menú. */
    max-width: calc(100vw - 2 * var(--margin) - 60px);
  }
}

/* ---------- Recortes rasterizados de la lámina (decisión 057) ----------
   Altura fija y ancho según su proporción: nunca se deforman. Alturas pensadas para no ampliar el archivo:
   el horizontal (29 px de alto) se muestra a 20 px en escritorio y 16 px en el pie; en móvil se usa el de dos
   líneas (132 px de alto), a 36 px en la cabecera y 30 px en el pie, porque es el único nítido a 3×. */
.logo-png { display: block; width: auto; height: 20px; }
.logo-pie .logo-png { height: 16px; }
@media (max-width: 760px) {
  .logo-cabecera .logo-png, .logo-menu .logo-png { height: 36px; max-width: calc(100vw - 2 * var(--margin) - 60px); object-fit: contain; object-position: left center; }
  .logo-pie .logo-png { height: 30px; }
}