/* ==========================================================================
   MIBF 2026 - hoja de estilo global
   meridainternationalbrassfestival.com
   Holaloro Studio - septiembre 2026

   Se carga UNA vez, a nivel de proyecto (RapidWeaver: Page Inspector >
   CSS del sitio, o mejor por FTP en /resources/css/mibf-global.css y
   enlazada desde el Head de cada pagina con head-mibf.html).

   CINCO REGLAS QUE GOBIERNAN ESTE ARCHIVO. Cada una se pago con un error
   real en el montaje de /ponto:
   1. Nunca :root. Los tokens viven en .mibf. Un :root dentro de un CSS de
      stack cae sobre toda la pagina y sobre la interfaz del editor Stacks.
   2. Todo prefijado --mibf- y .mibf-. Foundation ya define --radius, .card,
      .tag, .button y .note.
   3. Nunca selectores de elemento sueltos (h1, input, button) fuera de .mibf.
   4. Comentarios solo en ASCII. Los caracteres de dibujo de caja son UTF-8
      multibyte y matan todo el CSS que sigue si cambia la codificacion.
   5. .mibf .algo NO alcanza a <div class="mibf algo">: es el mismo elemento,
      no un descendiente. O compuesto (.mibf.algo) o descendiente, nunca
      mezclados.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FUENTES - servidas desde el propio servidor, nunca desde el CDN de
   Google: manda la IP del visitante a Google y en Europa ya se ha sancionado.
   Subir los woff2 a /resources/fonts/. Descarga: fonts.google.com, licencia
   SIL OFL.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/resources/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/resources/fonts/barlow-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/resources/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/resources/fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/resources/fonts/barlow-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   2. TOKENS - los valores reales del sitio, en oklch. Viven en .mibf, que es
   el envoltorio de cada bloque. Cualquier pagina nueva empieza por
   <div class="mibf"> y hereda todo esto.
   -------------------------------------------------------------------------- */

.mibf {
  --mibf-bg: oklch(12% 0.020 262);
  --mibf-bg-panel: oklch(10% 0.018 262);
  --mibf-bg-up: oklch(15% 0.022 262);
  --mibf-brass: oklch(68% 0.140 55);
  --mibf-brass-hi: oklch(76% 0.160 55);
  --mibf-brass-lo: oklch(44% 0.090 55);
  --mibf-brass-dim: oklch(68% 0.14 55 / 0.40);
  --mibf-field: oklch(20% 0.022 262);
  --mibf-field-border: oklch(30% 0.026 262);
  --mibf-rule: oklch(24% 0.020 262);
  --mibf-text: oklch(96% 0.008 80);
  --mibf-text-dim: oklch(62% 0.012 80);
  --mibf-text-mute: oklch(57% 0.010 80);
  --mibf-on-brass: oklch(11% 0.015 260);

  --mibf-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mibf-body: 'Barlow', system-ui, -apple-system, sans-serif;

  --mibf-gutter: 48px;
  --mibf-max: 1440px;
  --mibf-control-h: 48px;
  --mibf-radius: 3px;
  --mibf-radius-lg: 12px;
  --mibf-band: 72px;
  --mibf-band-lg: clamp(72px, 8vw, 128px);
  --mibf-measure: 62ch;

  /* Movimiento: una sola curva y dos duraciones para todo el sitio. */
  --mibf-ease: cubic-bezier(0.22, 0.75, 0.2, 1);
  --mibf-fast: 180ms;
  --mibf-slow: 420ms;

  /* Sombra tintada con el azul del fondo, nunca negro puro. */
  --mibf-shadow: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 18px 40px -24px oklch(6% 0.03 262 / 0.9);
  --mibf-glow: oklch(68% 0.140 55 / 0.10);

  color: var(--mibf-text);
  font-family: var(--mibf-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--mibf-bg);
  box-sizing: border-box;
}

.mibf *,
.mibf *::before,
.mibf *::after { box-sizing: inherit; }

/* El atributo hidden vale display:none en la hoja del navegador, que es la
   mas debil de todas: una clase con display explicito lo anula y el elemento
   oculto se queda en pantalla. */
.mibf [hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */

.mibf-h1,
.mibf-h2,
.mibf-h3 {
  margin: 0;
  font-family: var(--mibf-display);
  text-transform: uppercase;
  color: var(--mibf-text);
}
.mibf-h1 { font-weight: 900; font-size: clamp(52px, 6.6vw, 116px); line-height: 0.86; letter-spacing: -0.015em; text-wrap: balance; }
.mibf-h2 { font-weight: 900; font-size: clamp(40px, 4.2vw, 72px); line-height: 0.9; letter-spacing: -0.01em; text-wrap: balance; }
/* El h3 ya no va en mayusculas: con titulares, botones y etiquetas en
   versales, un tercer nivel en mayusculas aplanaba toda la jerarquia. */
.mibf-h3 { font-weight: 700; font-size: clamp(22px, 1.7vw, 27px); line-height: 1.1; letter-spacing: 0; text-transform: none; text-wrap: balance; }

.mibf-eyebrow {
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mibf-brass);
}
.mibf-label {
  font-family: var(--mibf-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mibf-text-dim);
}
.mibf-lead { margin: 0; max-width: var(--mibf-measure); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; text-wrap: pretty; }
.mibf-quote { margin: 0; font-weight: 300; font-style: italic; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.mibf-dim { color: var(--mibf-text-dim); }
.mibf-brass { color: var(--mibf-brass); }
.mibf-p { margin: 0 0 16px; }
.mibf-p:last-child { margin-bottom: 0; }

.mibf a { color: var(--mibf-brass); text-decoration: none; }
.mibf a:hover { color: var(--mibf-brass-hi); }
.mibf a:focus-visible,
.mibf button:focus-visible,
.mibf input:focus-visible,
.mibf select:focus-visible {
  outline: 2px solid var(--mibf-brass-hi);
  outline-offset: 2px;
}

/* Solo para lectores de pantalla. */
.mibf-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   4. ESTRUCTURA - bandas y rejillas. Foundation 6 no trae utilidades de
   espaciado, asi que el ritmo vertical vive aqui.
   -------------------------------------------------------------------------- */

.mibf-band {
  padding: var(--mibf-band) var(--mibf-gutter);
  border-bottom: 1px solid var(--mibf-rule);
}
.mibf-band--panel { background: var(--mibf-bg-panel); }
.mibf-band--up { background: var(--mibf-bg-up); }
.mibf-band--tight { padding-top: 40px; padding-bottom: 40px; }
.mibf-inner { max-width: var(--mibf-max); margin: 0 auto; }

.mibf-stack { display: flex; flex-direction: column; gap: 24px; }
.mibf-row { display: flex; gap: 24px; }
.mibf-row--wrap { flex-wrap: wrap; }
.mibf-row--center { align-items: center; }
.mibf-row--end { align-items: flex-end; }
.mibf-grow { flex-grow: 1; }

.mibf-grid { display: grid; gap: 24px; }
.mibf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mibf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mibf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mibf-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }

.mibf-rule { height: 1px; background: var(--mibf-rule); border: 0; margin: 0; }
.mibf-vrule { width: 1px; align-self: stretch; background: var(--mibf-rule); }


/* --------------------------------------------------------------------------
   5. COMPONENTES
   -------------------------------------------------------------------------- */

/* Botones - el boton de laton lleva texto oscuro, nunca blanco. */
.mibf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--mibf-radius);
  background: var(--mibf-brass);
  color: var(--mibf-on-brass);
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--mibf-fast) var(--mibf-ease),
              border-color var(--mibf-fast) var(--mibf-ease),
              color var(--mibf-fast) var(--mibf-ease),
              transform var(--mibf-fast) var(--mibf-ease);
}
.mibf-btn:hover { background: var(--mibf-brass-hi); color: var(--mibf-on-brass); }
/* Pulsacion fisica: el boton cede un pixel y un punto de escala. */
.mibf-btn:active { background: var(--mibf-brass-lo); transform: translateY(1px) scale(0.985); }
.mibf-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.mibf-btn--ghost {
  background: transparent;
  border: 1px solid var(--mibf-brass-dim);
  color: var(--mibf-text);
}
.mibf-btn--ghost:hover { background: transparent; border-color: var(--mibf-brass); color: var(--mibf-brass-hi); }
.mibf-btn--lg { min-height: 52px; padding: 0 30px; font-size: 17px; }
.mibf-btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.mibf-btn--block { width: 100%; }

.mibf-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mibf-link-arrow__icon {
  display: inline-block;
  transition: transform var(--mibf-fast) var(--mibf-ease);
}
.mibf-link-arrow:hover .mibf-link-arrow__icon { transform: translateX(4px); }

/* Tarjetas */
.mibf-card {
  padding: 32px;
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius);
  background: var(--mibf-bg-panel);
}
.mibf-card--accent { border-color: var(--mibf-brass-dim); }
.mibf-card--flat { background: var(--mibf-bg); }
.mibf-card--tight { padding: 22px; }

/* Tarjeta de persona o agrupacion, usada en la home y en el indice */
.mibf-person {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius);
  background: var(--mibf-bg-panel);
  overflow: hidden;
  color: var(--mibf-text);
  transition: border-color var(--mibf-fast) var(--mibf-ease), transform var(--mibf-slow) var(--mibf-ease);
}
.mibf-person:hover { border-color: var(--mibf-brass-dim); color: var(--mibf-text); }
a.mibf-person:active { transform: scale(0.99); }
.mibf-person__img {
  aspect-ratio: 4 / 5;
  background: var(--mibf-field);
  background-size: cover;
  background-position: center 20%;
  position: relative;
  transition: transform var(--mibf-slow) var(--mibf-ease);
}
/* La foto crece dentro de la tarjeta; el cuerpo, posicionado y con fondo,
   queda por encima y tapa el borde inferior de la foto ampliada. */
a.mibf-person:hover .mibf-person__img { transform: scale(1.04); }
.mibf-person__flag {
  position: absolute;
  top: 10px; left: 10px;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  background: var(--mibf-brass);
  color: var(--mibf-on-brass);
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mibf-person__body { position: relative; display: block; padding: 18px 20px 20px; background: var(--mibf-bg-panel); }
.mibf-person__name { display: block; }
.mibf-person__meta { display: block; }
.mibf-person__name {
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.mibf-person__meta { margin-top: 5px; font-size: 13px; color: var(--mibf-text-dim); }

/* Hueco: una tarjeta que aun no tiene nombre */
.mibf-person--ghost { pointer-events: none; }
.mibf-person--ghost .mibf-person__img { background: var(--mibf-field); }
.mibf-ghost-bar { height: 14px; border-radius: 2px; background: var(--mibf-rule); }
.mibf-ghost-bar--short { width: 60%; height: 10px; margin-top: 9px; }

/* Aviso: lo que todavia no esta confirmado */
.mibf-notice {
  padding: 18px 24px;
  border: 1px dashed var(--mibf-brass-dim);
  border-radius: var(--mibf-radius);
  font-size: 17px;
  line-height: 1.6;
}
.mibf-notice--solid {
  border: 1px solid var(--mibf-brass-dim);
  border-radius: var(--mibf-radius);
  background: var(--mibf-bg-up);
  font-size: 16px;
}

/* Cifra grande */
.mibf-stat { display: flex; align-items: baseline; gap: 14px; }
.mibf-stat__value {
  font-family: var(--mibf-display);
  font-weight: 900;
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1;
  color: var(--mibf-brass);
}
.mibf-stat__label { font-size: 16px; color: var(--mibf-text-dim); }

/* Dia de concierto */
.mibf-day {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius);
  background: var(--mibf-bg-panel);
}
.mibf-day--featured { border-color: var(--mibf-brass-dim); }
.mibf-day__num {
  font-family: var(--mibf-display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color: var(--mibf-brass);
}
.mibf-day__dow {
  font-family: var(--mibf-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mibf-text-dim);
}
.mibf-day__what { font-size: 15px; line-height: 1.6; }
.mibf-day__where { margin-top: auto; font-size: 14px; color: var(--mibf-text-dim); }

/* Cuenta regresiva */
.mibf-count { display: flex; gap: 14px; }
.mibf-count__box {
  width: 104px;
  padding: 14px 0;
  text-align: center;
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius);
  background: var(--mibf-bg);
}
.mibf-count__n {
  font-family: var(--mibf-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--mibf-brass);
  font-variant-numeric: tabular-nums;
}
.mibf-count__u {
  font-family: var(--mibf-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mibf-text-dim);
}

/* Formularios */
.mibf-field { display: flex; flex-direction: column; gap: 8px; }
.mibf-input {
  width: 100%;
  height: var(--mibf-control-h);
  padding: 0 16px;
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius);
  background: var(--mibf-field);
  color: var(--mibf-text);
  font-family: var(--mibf-body);
  font-size: 16px;
}
.mibf-input::placeholder { color: var(--mibf-text-mute); }
.mibf-input:focus { border-color: var(--mibf-brass); }
.mibf-form-inline { display: flex; gap: 12px; flex-wrap: wrap; }
.mibf-form-inline .mibf-input { width: auto; flex-grow: 1; min-width: 220px; }
.mibf-form-msg { font-size: 15px; }
.mibf-form-msg--ok { color: var(--mibf-brass); }
.mibf-form-msg--err { color: oklch(70% 0.170 25); }

/* Cabecera y navegacion (solo paginas fuera de RapidWeaver; en las paginas
   RapidWeaver la cabecera la pone el tema Foundation) */
.mibf-header {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 76px;
  padding: 0 var(--mibf-gutter);
  border-bottom: 1px solid var(--mibf-rule);
  background: var(--mibf-bg-panel);
}
.mibf-wordmark {
  font-family: var(--mibf-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--mibf-text);
}
.mibf-nav { display: flex; align-items: center; gap: 26px; }
.mibf-nav a {
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mibf-text);
}
.mibf-nav a:hover { color: var(--mibf-brass); }

/* Conmutador de idioma */
.mibf-lang {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius);
}
.mibf-lang a {
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--mibf-text-dim);
}
.mibf-lang a[aria-current='true'] { background: var(--mibf-brass); color: var(--mibf-on-brass); }

/* Pie */
.mibf-footer {
  display: flex;
  gap: 64px;
  padding: 56px var(--mibf-gutter);
  background: var(--mibf-bg-panel);
}
.mibf-footer__col { display: flex; flex-direction: column; gap: 12px; }
.mibf-footer__col a { font-size: 15px; }

/* Logo institucional */
.mibf-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--mibf-rule);
  border-radius: var(--mibf-radius);
}
.mibf-logo-slot img { max-height: 52px; width: auto; }


/* --------------------------------------------------------------------------
   6. RESPONSIVE - los cortes son los de Foundation 6 (640 / 1024 / 1200),
   leidos del consolidated.css del tema, no inventados.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1199px) {
  .mibf { --mibf-gutter: 32px; --mibf-band: 56px; }
  .mibf-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mibf-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 1023px) {
  .mibf-grid--4,
  .mibf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mibf-row { flex-wrap: wrap; }
  .mibf-footer { flex-wrap: wrap; gap: 32px; }
  .mibf-nav { display: none; }
}

@media screen and (max-width: 639px) {
  .mibf { --mibf-gutter: 20px; --mibf-band: 44px; }
  .mibf-grid--2,
  .mibf-grid--3,
  .mibf-grid--4,
  .mibf-grid--6 { grid-template-columns: minmax(0, 1fr); }
  .mibf-card { padding: 22px; }
  .mibf-count__box { width: 33.33%; }
  .mibf-vrule { display: none; }
  .mibf-btn { width: 100%; }
  .mibf-form-inline .mibf-input { min-width: 0; width: 100%; }
}


/* --------------------------------------------------------------------------
   7. MOVIMIENTO E IMPRESION
   -------------------------------------------------------------------------- */

/* prefers-reduced-motion: ver 9.6. Ya no se anula todo: se quita el
   desplazamiento y se conservan los fundidos que confirman un estado. */

@media print {
  .mibf {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .mibf-header,
  .mibf-lang,
  .mibf-count,
  .mibf-btn { display: none !important; }
  .mibf-card,
  .mibf-person { border-color: #999; background: #fff; }
}


/* =========================================================================
   PARCHE 23-09-2026 - contraste y botones
   Dos fallos reales, los dos de especificidad.
   ASCII solamente en estos comentarios, regla 4 del sistema de diseno.
   ========================================================================= */

/* 1. Texto de los botones invisible.
   ".mibf a" es (0,1,1) y gana a ".mibf-btn" que es (0,1,0): el texto tomaba
   el naranja del enlace sobre el fondo naranja del boton. Contraste 1.00:1.
   ".mibf .mibf-btn" es (0,2,0) y recupera el mando. */
.mibf .mibf-btn,
.mibf a.mibf-btn {
  color: var(--mibf-on-brass);
}
.mibf .mibf-btn:hover,
.mibf .mibf-btn:focus,
.mibf a.mibf-btn:hover,
.mibf a.mibf-btn:focus {
  color: var(--mibf-on-brass);
}
.mibf .mibf-btn--ghost,
.mibf a.mibf-btn--ghost {
  color: var(--mibf-text);
}
.mibf .mibf-btn--ghost:hover,
.mibf .mibf-btn--ghost:focus,
.mibf a.mibf-btn--ghost:hover,
.mibf a.mibf-btn--ghost:focus {
  color: var(--mibf-brass-hi);
}

/* 2. Parrafos casi invisibles.
   Foundation pinta el color en selectores de ELEMENTO (p, li, h1...). El
   color de ".mibf" solo se hereda, y la herencia pierde contra cualquier
   regla directa, asi que todo lo que sale de cms.locale.styledtext() -sin
   clase propia- se quedaba con el color del tema.
   Estos selectores estan acotados a .mibf: no tocan los demas stacks. */
.mibf p,
.mibf li,
.mibf ul,
.mibf ol,
.mibf dl,
.mibf dt,
.mibf dd,
.mibf h1,
.mibf h2,
.mibf h3,
.mibf h4,
.mibf h5,
.mibf h6,
.mibf span,
.mibf strong,
.mibf em,
.mibf b,
.mibf i,
.mibf small,
.mibf blockquote,
.mibf figcaption,
.mibf label,
.mibf td,
.mibf th {
  color: inherit;
}

/* Las listas del campo "obras" y de cualquier styledtext llegan sin clase:
   Foundation les quita la vinyeta y el margen. Se los devolvemos dentro. */
.mibf .mibf-lead ul,
.mibf .mibf-lead ol,
.mibf .mibf-rich ul,
.mibf .mibf-rich ol {
  margin: 0 0 16px 20px;
  padding-left: 0;
  list-style: disc outside;
}
.mibf .mibf-lead ol,
.mibf .mibf-rich ol { list-style: decimal outside; }
.mibf .mibf-lead li,
.mibf .mibf-rich li { margin-bottom: 4px; }
.mibf .mibf-lead p,
.mibf .mibf-rich p { margin: 0 0 16px; }
.mibf .mibf-lead p:last-child,
.mibf .mibf-lead ul:last-child,
.mibf .mibf-rich p:last-child,
.mibf .mibf-rich ul:last-child { margin-bottom: 0; }

/* 3. .mibf-lead no declara color: solo hereda, y la herencia es justo lo que
   perdia contra Foundation. Con el bloque 2 ya queda resuelto; esto lo deja
   explicito para que un cambio futuro en el tema no lo vuelva a romper.
   Color de texto pleno: 18.07:1 sobre el fondo. */
.mibf .mibf-lead { color: var(--mibf-text); }

/* =========================================================================
   Logos de instituciones sobre fondo oscuro.
   ImageWorks no sabe invertir ni tintar, asi que el blanco se hace aqui.
   La clase la elige el editor en el campo "Tratamiento del logo".
   ========================================================================= */

/* Una sola tinta -el escudo azul de UADY, un logo negro plano-: se aplasta
   todo a negro y se invierte a blanco puro. Respeta la transparencia. */
.mibf .mibf-logo--blanco {
  filter: brightness(0) invert(1);
}

/* Logos negros con partes CALADAS en blanco -el de UNAY, con la palabra
   dentro de la caja-. Aqui brightness(0) borraria el calado: la caja y las
   letras acabarian del mismo blanco. Invertir a secas lo mantiene legible. */
.mibf .mibf-logo--invertir {
  filter: invert(1);
}

/* Los logos que ya vienen en blanco no llevan clase y no se tocan. */
.mibf .mibf-logo {
  max-width: 100%;
  height: auto;
  display: block;
}


/* =========================================================================
   8. REDISENO 15-10-2026 (pasada Taste / redesign)
   Clases nuevas para la home. Sustituyen los estilos en linea que llevaban
   las secciones: anchos fijos en px, gaps y bordes escritos a mano. Las
   clases antiguas siguen aqui porque las usan /artistas y las fichas.
   ========================================================================= */

/* --- 8.1 Rejillas de composicion ---------------------------------------- */

/* Asimetrica 7/5: texto a la izquierda, pieza a la derecha. */
.mibf-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: end;
}
.mibf-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mibf-split--top { align-items: start; }
.mibf-split--center { align-items: center; }

/* Cabecera de seccion: titulo a la izquierda, entradilla abajo a la derecha. */
.mibf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.mibf-head .mibf-eyebrow { margin: 0 0 14px; }

/* Rejilla que se adapta sola: una tarjeta ocupa todo, dos se reparten. */
.mibf-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.mibf-band--lg { padding-top: var(--mibf-band-lg); padding-bottom: var(--mibf-band-lg); }


/* --- 8.2 Cabecera y menu movil ------------------------------------------ */

.mibf-header {
  position: relative;
  z-index: 2;
}
.mibf-nav a {
  position: relative;
  padding: 8px 0;
  transition: color var(--mibf-fast) var(--mibf-ease);
}
.mibf-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--mibf-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mibf-fast) var(--mibf-ease);
}
.mibf-nav a:hover::after { transform: scaleX(1); }

/* Menu movil sin JavaScript: un details que se abre con el summary. */
.mibf-menu { display: none; position: relative; }
.mibf-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius);
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mibf-text);
  cursor: pointer;
  list-style: none;
}
.mibf-menu__btn::-webkit-details-marker { display: none; }
.mibf-menu__bars,
.mibf-menu__bars::before,
.mibf-menu__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--mibf-fast) var(--mibf-ease), opacity var(--mibf-fast) var(--mibf-ease);
}
.mibf-menu__bars { position: relative; }
.mibf-menu__bars::before,
.mibf-menu__bars::after { content: ""; position: absolute; left: 0; }
.mibf-menu__bars::before { top: -5px; }
.mibf-menu__bars::after { top: 5px; }
.mibf-menu[open] .mibf-menu__bars { background: transparent; }
.mibf-menu[open] .mibf-menu__bars::before { transform: translateY(5px) rotate(45deg); }
.mibf-menu[open] .mibf-menu__bars::after { transform: translateY(-5px) rotate(-45deg); }
.mibf-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: var(--mibf-radius-lg);
  background: var(--mibf-bg-up);
  box-shadow: var(--mibf-shadow);
}
.mibf-menu__panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--mibf-radius);
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mibf-text);
}
.mibf-menu__panel a:hover { background: var(--mibf-bg-up); color: var(--mibf-brass-hi); }


/* --- 8.3 Hero ------------------------------------------------------------ */

.mibf-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(48px, 7vw, 112px);
  padding-bottom: 0;
}
/* Luz de laton arriba a la derecha y grano fijo: rompen el negro plano sin
   meter imagenes. El grano es un SVG en linea; no se anima. */
.mibf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 85% 10%, oklch(68% 0.140 55 / 0.16), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, oklch(40% 0.06 262 / 0.35), transparent 70%);
}
.mibf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.mibf-hero__copy { display: flex; flex-direction: column; gap: 26px; }
.mibf-hero__copy .mibf-eyebrow { margin: 0; }
.mibf-hero__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
}
.mibf-hero__dates {
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: 0.04em;
  color: var(--mibf-brass);
  font-variant-numeric: tabular-nums;
}
.mibf-hero__what { color: var(--mibf-text-dim); font-size: 16px; }
.mibf-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Doble bisel: marco de laton exterior, video con radio interior menor. */
.mibf-hero__media {
  margin: 0;
  padding: 6px;
  border: 1px solid var(--mibf-brass-dim);
  border-radius: var(--mibf-radius-lg);
  background: var(--mibf-bg-panel);
}
.mibf-hero__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: var(--mibf-bg);
  object-fit: cover;
}
.mibf-hero__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 6px 4px;
}
.mibf-hero__caption .mibf-label { margin: 0; }

.mibf-hero__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px 56px;
  align-items: center;
  margin-top: clamp(48px, 6vw, 88px);
  padding: 28px 0 36px;
  border-top: 1px solid var(--mibf-rule);
}
.mibf-hero__foot .mibf-dim { margin: 0; max-width: var(--mibf-measure); }

/* Cuenta regresiva en linea: cifras sueltas separadas por filetes. */
.mibf-count--inline { gap: 0; }
.mibf-count--inline .mibf-count__box {
  width: auto;
  min-width: 88px;
  padding: 0 24px;
  border: 0;
  border-left: 1px solid var(--mibf-rule);
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.mibf-count--inline .mibf-count__box:first-child { padding-left: 0; border-left: 0; }
.mibf-count--inline .mibf-count__n { font-size: clamp(40px, 3.4vw, 52px); }
.mibf-count--inline .mibf-count__u { margin-top: 6px; }


/* --- 8.4 Cifras ---------------------------------------------------------
   Una sola linea de cartel en vez de tres tarjetas de numero grande: cifra
   en laton, etiqueta en el mismo cuerpo. Sin separadores: al partirse la
   linea, un separador quedaba colgando al principio del renglon. */

.mibf-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 0;
  margin: 0;
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: clamp(28px, 3.3vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.mibf-stats__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  margin-right: 1.1em;
}
.mibf-stats__item:last-child { margin-right: 0; }
.mibf-stats__value { font-weight: 900; font-variant-numeric: tabular-nums; }
.mibf-stats__label { font-weight: 700; }

/* --- 8.5 Listas con filete ---------------------------------------------- */

.mibf .mibf-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mibf .mibf-list li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--mibf-rule);
  line-height: 1.5;
}
.mibf .mibf-list li:first-child { border-top: 1px solid var(--mibf-rule); }
.mibf .mibf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 12px;
  height: 1px;
  background: var(--mibf-brass);
}
.mibf-col { display: flex; flex-direction: column; gap: 18px; }


/* --- 8.6 Programa academico -------------------------------------------- */

.mibf-aca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 0.95fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* El "boleto": la tarjeta de cuotas, la unica con elevacion en la seccion. */
.mibf-ticket {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  border: 1px solid var(--mibf-brass-dim);
  border-radius: var(--mibf-radius-lg);
  background:
    radial-gradient(90% 60% at 100% 0%, var(--mibf-glow), transparent 70%),
    var(--mibf-bg-panel);
}
.mibf-ticket .mibf-h3 { margin-bottom: 10px; }
.mibf-ticket__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--mibf-rule);
}
.mibf-ticket__row:last-child { border-bottom: 0; padding-bottom: 0; }
.mibf-ticket__concept { font-size: 15px; line-height: 1.45; color: var(--mibf-text-dim); }
.mibf-ticket__value {
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--mibf-brass);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mibf-ticket__row:first-of-type .mibf-ticket__value { font-size: 30px; }
.mibf-ticket__value--pending { color: var(--mibf-text-mute); font-size: 18px; }

/* Franja de aviso: sin caja, entre dos filetes. */
.mibf-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 20px 48px;
  align-items: center;
  margin-top: clamp(40px, 4vw, 64px);
  padding: 28px 0;
  border-top: 1px solid var(--mibf-rule);
  border-bottom: 1px solid var(--mibf-rule);
}
.mibf-strip .mibf-h3 { margin: 0 0 6px; }
.mibf-strip .mibf-dim { margin: 0; }
.mibf-strip__action { justify-self: end; }


/* --- 8.7 Concurso ------------------------------------------------------- */

.mibf-cat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--mibf-field-border);
  border-radius: var(--mibf-radius-lg);
  background: var(--mibf-bg-panel);
}
.mibf-cat__title {
  margin: 0;
  font-family: var(--mibf-display);
  font-weight: 900;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}
.mibf-cat__desc { margin: 0; line-height: 1.7; color: var(--mibf-text-dim); }
.mibf-cat__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mibf-rule);
}
.mibf-cat__foot .mibf-eyebrow { margin: 0; }


/* --- 8.8 Conciertos ----------------------------------------------------- */

.mibf-day { transition: border-color var(--mibf-fast) var(--mibf-ease); }
.mibf-day:hover { border-color: var(--mibf-brass-dim); }
/* Estado vacio: los seis dias del festival con el programa por anunciar. */
.mibf-day--empty {
  border-style: dashed;
  background: transparent;
}
.mibf-day--empty .mibf-day__num { color: var(--mibf-text); opacity: 0.85; }
.mibf-day--empty .mibf-day__what { color: var(--mibf-text-mute); }


/* --- 8.9 Festival e instituciones ---------------------------------------- */

.mibf-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.mibf-logo-slot { transition: border-color var(--mibf-fast) var(--mibf-ease); }
a.mibf-logo-slot:hover { border-color: var(--mibf-brass-dim); }
.mibf-logo-slot__name {
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--mibf-text-dim);
}


/* --- 8.10 Llamada a patrocinar ------------------------------------------ */

.mibf-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 56px;
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--mibf-brass-dim);
  border-radius: var(--mibf-radius-lg);
  background:
    radial-gradient(70% 120% at 100% 50%, oklch(68% 0.140 55 / 0.14), transparent 70%),
    var(--mibf-bg-panel);
}
.mibf-cta .mibf-h2 { font-size: clamp(32px, 3vw, 52px); margin-bottom: 14px; }


/* --- 8.11 Formulario de avisos ------------------------------------------ */

.mibf-signup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.mibf-signup__full { grid-column: 1 / -1; }
.mibf-input {
  transition: border-color var(--mibf-fast) var(--mibf-ease), background-color var(--mibf-fast) var(--mibf-ease);
}
.mibf-input:hover { border-color: var(--mibf-text-mute); }
.mibf-input:focus { outline: none; border-color: var(--mibf-brass); background: var(--mibf-bg-up); }
.mibf-input:focus-visible { outline: 2px solid var(--mibf-brass-dim); outline-offset: 1px; }


/* --- 8.12 Pie ----------------------------------------------------------- */

.mibf-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
  border-top: 1px solid var(--mibf-rule);
}
.mibf-footer__col { align-items: flex-start; }
.mibf-footer__col .mibf-dim { margin: 0; line-height: 1.7; max-width: 42ch; }
.mibf-footer__social { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mibf-footer__credit { font-size: 13px; color: var(--mibf-text-mute); }


/* --- 8.13 Responsive del rediseno --------------------------------------- */

@media screen and (max-width: 1199px) {
  .mibf-aca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mibf-aca .mibf-ticket { grid-column: 1 / -1; }
  .mibf-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mibf-footer__col:first-child { grid-column: 1 / -1; }
}

@media screen and (max-width: 1023px) {
  .mibf-menu { display: block; margin-left: auto; }
  .mibf-header { gap: 16px; }
  .mibf-header > .mibf-btn { display: none; }
  .mibf-split,
  .mibf-split--even,
  .mibf-hero__grid,
  .mibf-head,
  .mibf-strip,
  .mibf-cta { grid-template-columns: minmax(0, 1fr); }
  .mibf-strip__action { justify-self: stretch; }
  .mibf-hero__foot { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 639px) {
  .mibf-header { padding-top: 10px; padding-bottom: 10px; }
  .mibf-lang { display: none; }
  .mibf-stats { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mibf-aca,
  .mibf-signup { grid-template-columns: minmax(0, 1fr); }
  .mibf-footer { grid-template-columns: minmax(0, 1fr); }
  .mibf-count--inline .mibf-count__box { min-width: 0; flex: 1 1 0; padding: 0 14px; }
  .mibf-ticket { padding: 22px 20px 18px; }
  .mibf-ticket__row { grid-template-columns: minmax(0, 1fr); }
  .mibf-hero__actions .mibf-btn { width: 100%; }
  .mibf-link-arrow { width: auto; }
}

/* --- 8.14 Tarjeta de alta en el cartel ---------------------------------- */
.mibf-person--signup {
  justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  border-color: var(--mibf-brass-dim);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--mibf-glow), transparent 70%),
    var(--mibf-bg-panel);
}
.mibf-person--signup .mibf-h3,
.mibf-person--signup .mibf-dim { margin: 0; }
.mibf-person--signup .mibf-dim { font-size: 15px; line-height: 1.55; }
.mibf-person__form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
@media screen and (max-width: 1023px) {
  .mibf-head > .mibf-link-arrow { justify-self: start !important; }
}

/* --- 8.15 Color de las clases frente al parche de herencia --------------
   El parche del 23-09 (".mibf p, .mibf span... { color: inherit }") pesa
   (0,1,1) y le ganaba a cualquier clase de color de un solo nivel (0,1,0):
   las etiquetas en laton salian blancas y las cifras tambien. Aqui cada
   clase que pinta color sube a (0,2,0) anteponiendo .mibf. */
.mibf .mibf-eyebrow,
.mibf .mibf-brass,
.mibf .mibf-stat__value,
.mibf .mibf-day__num,
.mibf .mibf-count__n,
.mibf .mibf-hero__dates,
.mibf .mibf-ticket__value,
.mibf .mibf-form-msg--ok { color: var(--mibf-brass); }

.mibf .mibf-label,
.mibf .mibf-dim,
.mibf .mibf-stat__label,
.mibf .mibf-person__meta,
.mibf .mibf-day__dow,
.mibf .mibf-day__where,
.mibf .mibf-count__u,
.mibf .mibf-hero__what,
.mibf .mibf-ticket__concept,
.mibf .mibf-cat__desc,
.mibf .mibf-logo-slot__name { color: var(--mibf-text-dim); }

.mibf .mibf-stats__label { color: var(--mibf-text); }
.mibf .mibf-ticket__value--pending,
.mibf .mibf-footer__credit,
.mibf .mibf-day--empty .mibf-day__what { color: var(--mibf-text-mute); }

.mibf .mibf-stats__value { color: var(--mibf-brass); }
.mibf .mibf-quote,
.mibf .mibf-person__name { color: var(--mibf-text); }

.mibf .mibf-person__flag { color: var(--mibf-on-brass); }
.mibf .mibf-form-msg--err { color: oklch(70% 0.170 25); }

/* --- 8.16 Huecos del cartel y enlaces del pie --------------------------
   Las barras del hueco son <span>: en linea, la altura no se aplicaba y no
   se veian. Y el hueco era un bloque negro pesado; ahora es un contorno. */
.mibf-ghost-bar { display: block; }
.mibf-person--ghost {
  border-style: dashed;
  background: transparent;
}
.mibf-person--ghost .mibf-person__img {
  background: oklch(14% 0.02 262 / 0.55);
}
.mibf-person--ghost .mibf-person__body { background: transparent; }

.mibf .mibf-footer a { color: var(--mibf-text); transition: color var(--mibf-fast) var(--mibf-ease); }
.mibf .mibf-footer a:hover { color: var(--mibf-brass-hi); }

/* --- 8.17 Dato bajo el titular -----------------------------------------
   Lo que antes iba como etiqueta ENCIMA del titular (fechas, "Novedad de
   la VI edicion") va ahora debajo: el titular abre la seccion. */
.mibf .mibf-meta {
  margin: 14px 0 0;
  font-family: var(--mibf-display);
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 20px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mibf-brass);
}
.mibf .mibf-hero__sub { margin: -10px 0 0; max-width: 52ch; color: var(--mibf-text-dim); font-size: 17px; line-height: 1.55; }
.mibf-link-arrow__icon { flex: none; }

/* Superficies del navegador: seleccion y cursor de texto en el color de la
   casa, no los azules del sistema. */
.mibf ::selection { background: var(--mibf-brass); color: var(--mibf-on-brass); }
.mibf .mibf-input { caret-color: var(--mibf-brass-hi); }


/* =========================================================================
   9. MOVIMIENTO (pasada impeccable, 15-10-2026)
   Tesis: se encienden las luces del escenario sobre el laton. Un unico
   momento con autor, al cargar el hero. El resto del movimiento solo
   confirma acciones o explica estados.
   Todo el contenido es visible por defecto: las animaciones de entrada
   arrancan desde un estado visible si el CSS o el JS fallan, y las de
   lista solo se preparan cuando el JS ha marcado el bloque con .mibf-js.
   ========================================================================= */

/* --- 9.1 El momento: el hero se enciende ------------------------------- */

@keyframes mibf-bloom {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: none; }
}
@keyframes mibf-rise {
  from { opacity: 0; transform: translateY(0.4em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes mibf-lift {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mibf-open {
  from { opacity: 0; clip-path: inset(10% 8% 10% 8% round 12px); filter: brightness(0.6); }
  to   { opacity: 1; clip-path: inset(0 0 0 0 round 12px); filter: none; }
}

.mibf-hero::before { animation: mibf-bloom 1600ms var(--mibf-ease) both; }
.mibf-hero .mibf-h1 { animation: mibf-rise 820ms var(--mibf-ease) 120ms both; }
.mibf-hero__when    { animation: mibf-lift 600ms var(--mibf-ease) 380ms both; }
.mibf-hero__sub     { animation: mibf-lift 600ms var(--mibf-ease) 460ms both; }
.mibf-hero .mibf-quote { animation: mibf-lift 600ms var(--mibf-ease) 540ms both; }
.mibf-hero__actions { animation: mibf-lift 600ms var(--mibf-ease) 620ms both; }
.mibf-hero__media   { animation: mibf-open 1000ms var(--mibf-ease) 300ms both; }
.mibf-hero__foot    { animation: mibf-lift 700ms var(--mibf-ease) 780ms both; }


/* --- 9.2 Listas que llegan como lista: cartel y dias de concierto ------ */

/* Animacion con relleno "backwards" y no transicion: al terminar, la
   tarjeta vuelve a sus propias transiciones de hover y pulsacion sin
   arrastrar el retraso de la cascada. */
.mibf-js [data-mibf-stagger]:not(.is-in) > * { opacity: 0; }
.mibf-js [data-mibf-stagger].is-in > * {
  animation: mibf-lift 640ms var(--mibf-ease) backwards;
  animation-delay: calc(var(--mibf-i, 0) * 70ms);
}


/* --- 9.3 Cuenta regresiva: la cifra rueda cuando cambia ---------------- */

@keyframes mibf-roll {
  from { opacity: 0; transform: translateY(-0.45em); }
  to   { opacity: 1; transform: none; }
}
.mibf-count__n.is-tick { animation: mibf-roll 420ms var(--mibf-ease); }


/* --- 9.4 Menu movil y mensajes de formulario --------------------------- */

@keyframes mibf-drop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.mibf-menu[open] .mibf-menu__panel { animation: mibf-drop 200ms var(--mibf-ease); transform-origin: top right; }

@keyframes mibf-fade { from { opacity: 0; } to { opacity: 1; } }
.mibf-form-msg--ok,
.mibf-form-msg--err { animation: mibf-fade 240ms var(--mibf-ease); }
.mibf-btn[disabled] { transform: none; }


/* --- 9.5 Anclas: desplazamiento suave dentro de la home ---------------- */
/* scroll-behavior vive en el elemento que hace scroll (html), que esta fuera
   de .mibf: lo pone el JS solo en la home, para no tocar las demas paginas. */


/* --- 9.6 Movimiento reducido ------------------------------------------- */
/* Se quita todo desplazamiento, escala y recorte. Quedan los fundidos
   cortos, que confirman lo que pasa sin mover nada. */
@media (prefers-reduced-motion: reduce) {
  .mibf-hero::before,
  .mibf-hero .mibf-h1,
  .mibf-hero__when,
  .mibf-hero__sub,
  .mibf-hero .mibf-quote,
  .mibf-hero__actions,
  .mibf-hero__media,
  .mibf-hero__foot,
  .mibf-count__n.is-tick,
  .mibf-menu[open] .mibf-menu__panel {
    animation: mibf-fade 200ms linear both;
  }
  .mibf-js [data-mibf-stagger].is-in > * { animation: mibf-fade 200ms linear backwards; animation-delay: 0ms; }
  .mibf-btn:active,
  a.mibf-person:active,
  a.mibf-person:hover .mibf-person__img,
  .mibf-link-arrow:hover .mibf-link-arrow__icon { transform: none; }
}

/* --- 9.7 Ajustes de ritmo en movil (ronda de revision) -----------------
   A una columna, los seis dias y las siete tarjetas del cartel hacian una
   pagina interminable. A dos columnas se leen como calendario y cartel. */
@media screen and (max-width: 639px) {
  .mibf .mibf-grid--6,
  .mibf .mibf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mibf-day { padding: 18px 16px; }
  .mibf-day__num { font-size: 38px; }
  .mibf-person__body { padding: 12px 12px 14px; }
  .mibf-person__name { font-size: 17px; }
  .mibf-person--signup { grid-column: 1 / -1; }
}
@media screen and (max-width: 639px) {
  /* Un solo hueco junto a la ultima tarjeta real; el resto sobra en movil. */
  .mibf-person--ghost ~ .mibf-person--ghost { display: none; }
}

/* Placeholder: 4.1:1 con text-mute; sube a ~5.2:1 sobre el fondo del campo. */
.mibf .mibf-input::placeholder { color: oklch(65% 0.012 80); }

/* --- 9.8 Select del formulario de avisos --------------------------------
   Sin el aspecto del sistema: flecha propia en laton (SVG en linea), el
   mismo alto y borde que los campos de texto. La opcion vacia se ve como
   placeholder hasta que se elige algo. */
.mibf .mibf-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23d0883f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5 7 9.5 11 5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
}
.mibf .mibf-select:has(option[value=""]:checked) { color: oklch(65% 0.012 80); }
.mibf .mibf-select option { background: var(--mibf-bg-panel); color: var(--mibf-text); }


/* =========================================================================
   10. PAGINA /artistas/ (indice y perfiles) - 15-10-2026
   ========================================================================= */

.mibf-hero--page { padding-bottom: clamp(48px, 6vw, 88px); }
.mibf-hero--page .mibf-h1 { font-size: clamp(48px, 6vw, 104px); }

/* Foto de agrupacion: apaisada en la tarjeta del indice. */
.mibf-person__img--wide { aspect-ratio: 4 / 5; background-position: center; }

/* El salto a un perfil deja aire bajo la cabecera del tema. */
.mibf-profile { scroll-margin-top: 24px; }
.mibf-profile__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.mibf-profile__media {
  position: sticky;
  top: 24px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mibf-radius-lg);
  border: 1px solid var(--mibf-field-border);
  background: var(--mibf-field);
}
.mibf-profile__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}
.mibf-profile__media--wide .mibf-profile__img { aspect-ratio: 4 / 3; object-position: center; }
.mibf-profile__img--empty { background: oklch(14% 0.02 262 / 0.55); }

.mibf-profile__body { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.mibf .mibf-profile__role { color: var(--mibf-text); }
.mibf-profile__bio { max-width: var(--mibf-measure); line-height: 1.7; color: var(--mibf-text-dim); }
.mibf .mibf-profile__bio p { color: var(--mibf-text-dim); }
.mibf-profile__block { display: flex; flex-direction: column; gap: 12px; }
.mibf-profile__block .mibf-label { margin: 0; }
.mibf .mibf-list--cols { columns: 2 220px; column-gap: 32px; }
.mibf .mibf-list--cols li { break-inside: avoid; }
.mibf .mibf-list--cols li:first-child { border-top: 0; }

.mibf-profile__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px 32px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--mibf-rule);
}
.mibf-profile__facts div { display: flex; flex-direction: column; gap: 6px; }
.mibf-profile__facts dt { margin: 0; }
.mibf-profile__facts dd { margin: 0; line-height: 1.55; }

.mibf-profile__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; }
.mibf .mibf-profile__back {
  align-self: flex-start;
  font-size: 14px;
  color: var(--mibf-text-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--mibf-field-border);
  transition: color var(--mibf-fast) var(--mibf-ease);
}
.mibf .mibf-profile__back:hover { color: var(--mibf-brass-hi); }

/* Al saltar a un perfil, la foto se enciende un instante: confirma donde
   ha caido el lector. */
@keyframes mibf-target {
  from { box-shadow: 0 0 0 1px var(--mibf-brass), 0 0 0 10px oklch(68% 0.14 55 / 0.18); }
  to   { box-shadow: 0 0 0 1px transparent, 0 0 0 0 transparent; }
}
.mibf-profile:target .mibf-profile__media { animation: mibf-target 1400ms var(--mibf-ease) 200ms both; }

@media screen and (max-width: 1023px) {
  .mibf-profile__grid { grid-template-columns: minmax(0, 1fr); }
  .mibf-profile__media { position: static; max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .mibf-profile:target .mibf-profile__media { animation: mibf-fade 200ms linear both; }
}


/* --- 10.1 Ficha individual (/artistas/{id}) ----------------------------- */
.mibf-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-size: 14px;
  color: var(--mibf-text-dim);
}
.mibf .mibf-crumbs a { color: var(--mibf-text-dim); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--mibf-field-border); }
.mibf .mibf-crumbs a:hover { color: var(--mibf-brass-hi); }
.mibf .mibf-crumbs span[aria-current] { color: var(--mibf-text); }
.mibf-profile__name { font-size: clamp(44px, 5.4vw, 92px); }
.mibf .mibf-profile__group { margin: 0; color: var(--mibf-text-dim); }
.mibf .mibf-list--cols a { color: var(--mibf-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--mibf-field-border); }
.mibf .mibf-list--cols a:hover { color: var(--mibf-brass-hi); }
/* En la ficha la foto entra con el mismo "encendido" que el video del hero. */
.mibf-hero .mibf-profile__media { animation: mibf-open 1000ms var(--mibf-ease) 200ms both; }
.mibf-hero .mibf-profile__body { animation: mibf-lift 700ms var(--mibf-ease) 380ms both; }
@media (prefers-reduced-motion: reduce) {
  .mibf-hero .mibf-profile__media,
  .mibf-hero .mibf-profile__body { animation: mibf-fade 200ms linear both; }
}

/* --- 8.18 Categorias del concurso: una por instrumento ------------------ */
.mibf-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.mibf-cats .mibf-cat { padding: 24px; gap: 14px; }
.mibf-cats .mibf-cat__title { font-size: clamp(28px, 2.2vw, 36px); }
.mibf .mibf-cat__obras { font-size: 15px; line-height: 1.55; color: var(--mibf-text-dim); }
.mibf .mibf-cat__obras ul { margin: 0 0 12px 18px; }
.mibf .mibf-cat__obras li { margin-bottom: 6px; color: var(--mibf-text-dim); }
.mibf .mibf-cat__obras p { margin: 4px 0 8px; color: var(--mibf-text); font-size: 14px; }
@media screen and (max-width: 639px) {
  .mibf-cats { grid-template-columns: minmax(0, 1fr); }
}

/* --- 10.2 Indice de artistas en dos bloques ----------------------------- */
.mibf .mibf-roster__title {
  margin: 0 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--mibf-rule);
  font-size: clamp(24px, 2vw, 30px);
}
.mibf-roster + .mibf-roster__title { margin-top: clamp(48px, 6vw, 80px); }

/* --- 10.3 Rediseno 17-10-2026: hero, academico y concurso --------------- */

/* Hero: un solo parrafo de invitacion en lugar de edicion + subtitulo + lema. */
.mibf .mibf-hero__pitch {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.6;
  color: var(--mibf-text);
  text-wrap: pretty;
  animation: mibf-lift 600ms var(--mibf-ease) 460ms both;
}

/* Academico: dos columnas y, debajo, el cuadro de cuotas a todo el ancho. */
.mibf-aca { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mibf-ticket--wide { margin-top: clamp(40px, 5vw, 64px); }
.mibf-ticket__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  column-gap: 40px;
}
.mibf-ticket--wide .mibf-ticket__row:last-child { border-bottom: 1px solid var(--mibf-rule); padding-bottom: 14px; }
.mibf-ticket__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 22px;
}
.mibf-ticket__foot .mibf-dim { margin: 0; max-width: 56ch; }

/* Concurso: fila horizontal de tarjetas anchas. */
.mibf-cats-wrap { margin-top: clamp(40px, 5vw, 64px); }
.mibf .mibf-cats {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(320px, 400px);
  gap: 16px;
  margin-top: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--mibf-brass-dim) transparent;
}
.mibf-cats > .mibf-cat { scroll-snap-align: start; }
.mibf-cats:focus-visible { outline: 2px solid var(--mibf-brass-dim); outline-offset: 4px; }
.mibf-cats::-webkit-scrollbar { height: 6px; }
.mibf-cats::-webkit-scrollbar-thumb { background: var(--mibf-brass-dim); border-radius: 3px; }
.mibf-cats__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mibf-cats__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--mibf-brass-dim);
  border-radius: var(--mibf-radius);
  background: transparent;
  color: var(--mibf-text);
  cursor: pointer;
  transition: border-color var(--mibf-fast) var(--mibf-ease), color var(--mibf-fast) var(--mibf-ease), transform var(--mibf-fast) var(--mibf-ease);
}
.mibf-cats__btn:hover { border-color: var(--mibf-brass); color: var(--mibf-brass-hi); }
.mibf-cats__btn:active { transform: scale(0.95); }
@media screen and (max-width: 639px) {
  .mibf .mibf-cats { grid-template-columns: none; grid-auto-columns: 84%; }
  .mibf-aca { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mibf .mibf-hero__pitch { animation: mibf-fade 200ms linear both; }
  .mibf-cats__btn:active { transform: none; }
}

/* --- 10.4 Botones del concurso (17-10-2026) ------------------------------ */
.mibf-con-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mibf-con-actions .mibf-btn { gap: 10px; }
@media screen and (max-width: 639px) {
  .mibf-con-actions .mibf-btn { width: 100%; }
}

/* --- 10.5 Rondas en la tarjeta de categoria (singleton concurso) -------- */
.mibf-cat__rondas { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mibf-cat__rondas div { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--mibf-rule); }
.mibf-cat__rondas dt { margin: 0; }
.mibf .mibf-cat__rondas dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mibf-text); }