/*--------------------------------------------------------------
# Marca "Campana de Oro": tipografía Renos Rough (la del logo).
# Archivo aparte y reversible; se carga DESPUÉS de style.css para
# aplicar ajustes visuales de marca sin tocar el layout general.
--------------------------------------------------------------*/

/* Tipografía de marca. Regular para detalles; Black para destacados grandes.
   font-display: swap -> mientras carga se ve Figtree y no queda texto invisible. */
@font-face {
  font-family: 'Renos Rough';
  src: url('../fonts/Renos-rough-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Renos Rough';
  src: url('../fonts/Renos-rough-black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Helper opcional para textos cortos de marca. No se aplica a los títulos de
   sección porque Renos Rough se ve demasiado irregular en frases largas. */
.brand-display-title {
  font-family: 'Renos Rough', 'Figtree', sans-serif;
  font-weight: 400;      /* la fuente "rough" ya tiene cuerpo; evita el faux-bold feo */
  letter-spacing: 3px;   /* respira mejor con esta tipografía */
}

/* Logo de marca en la sección "about". El SVG solo trae viewBox (sin width/
   height), así que dentro del flex con .img-fluid colapsaría a 0: le damos un
   ancho explícito. Es casi cuadrado, así que anulamos el scale del logo viejo. */
.about .logoevento {
  width: 220px;
  max-width: 100%;
  height: auto;
  transform: none;
}

/*--------------------------------------------------------------
# Header con el look & feel de marca
# Barra oscura translúcida (glass) que deja ver apenas el fondo dorado
# desenfocado, en lugar del gradiente arcoíris viejo. Conserva el blur y el
# texto blanco del nav (que ya tiene relleno dorado en hover/activo).
--------------------------------------------------------------*/
#header {
  background: rgba(0, 0, 0, 0.72);
  border-bottom: var(--brand-line);
}
#header.header-scrolled {
  background: rgba(0, 0, 0, 0.9);
  border-bottom: var(--brand-line);
}

/* Logo de marca en el header (SVG dorado sobre barra oscura). Igual que el
   otro SVG, necesita alto/ancho definidos porque solo trae viewBox. */
#header .logo img {
  height: 60px;
  width: auto;
  max-height: none;
}
#header.header-scrolled .logo img {
  height: 50px;
}