/* ============================================================
   Visit Bilbao — logotipo
   ------------------------------------------------------------
   Marca + wordmark. La marca es un SVG en línea que hereda el
   color del contexto (currentColor), así que sirve igual sobre
   el hero oscuro que sobre el pie verde.

   El wordmark va en HTML, no dentro del SVG, para que use las
   tipografías ya cargadas y siga siendo texto seleccionable.
   ============================================================ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #FCF8F0;
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 42px;
  height: 42px;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
a.brand:hover .brand-mark { transform: rotate(-9deg) scale(1.06); }
a.brand:active .brand-mark { transform: rotate(-4deg) scale(.98); }

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* "Visit" en la condensada, muy espaciada: contrapunto seco al serif */
.brand-eyebrow {
  font-family: 'Roboto Condensed', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .36em;
  text-transform: uppercase;
  opacity: .72;
  padding-left: .12em;
}

/* "Bilbao" en el display, con el tracking cerrado del sistema */
.brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.03em;
  margin-top: 3px;
}

/* Pie: algo más contenido */
.brand--footer .brand-mark { width: 38px; height: 38px; }
.brand--footer .brand-name { font-size: 27px; }

@media (max-width: 767px) {
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 25px; }
  .brand-eyebrow { font-size: 10px; letter-spacing: .32em; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  a.brand:hover .brand-mark, a.brand:active .brand-mark { transform: none; }
}