/* Banda de los Black Days a mitad de la home: la palabra repetida en diagonal y una tarjeta de «recordatorio» */
.bf-banda { padding-block: clamp(14px, 2vw, 26px) 0; }
.bf-banda-a { position: relative; display: grid; grid-template-columns: min(400px, 100%); place-items: center; justify-content: center; overflow: hidden; border-radius: 28px; padding: clamp(40px, 6vw, 72px) 20px; background: var(--bf-fondo, #E4E3DD); color: var(--bf-texto, #1d1c18); text-decoration: none; isolation: isolate; }
.bf-banda-fondo { position: absolute; left: 50%; top: 50%; width: 200vmax; z-index: -1; transform: translate(-50%, -50%) rotate(-11deg); display: grid; user-select: none; -webkit-user-select: none; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.bf-banda-fondo span { display: block; white-space: nowrap; font: 700 clamp(3.4rem, 9vw, 7rem)/.86 var(--sans, "Inria Sans", "Helvetica Neue", Arial, sans-serif); letter-spacing: -.045em; color: transparent; -webkit-text-fill-color: transparent; text-transform: uppercase; }
.bf-banda-fondo span:nth-child(even) { margin-left: -.55em; }
.bf-banda-a:hover .bf-banda-fondo { transform: translate(-50%, -50%) rotate(-11deg) scale(1.03); }
.bf-banda-card { display: grid; width: min(400px, 100%); border-radius: 26px; background: #f4f4f2; color: var(--bf-texto, #1d1c18); text-align: center; overflow: hidden; box-shadow: 0 30px 80px -34px rgba(0, 0, 0, .55); }
.bf-banda-t { padding: 28px 24px 0; font: 700 1.05rem var(--sans, "Inria Sans", sans-serif); }
.bf-banda-a .bf-banda-x { padding: 18px 28px 26px; font: 400 1.25rem/1.28 var(--sans, "Inria Sans", sans-serif); text-wrap: balance; }
.bf-banda-b { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; border-top: 1px solid rgba(29, 28, 24, .28); font: 700 1.1rem var(--sans, "Inria Sans", sans-serif); color: var(--bf-texto, #1d1c18); transition: background .2s ease; }
.bf-banda-a:hover .bf-banda-b, .bf-banda-a:focus-visible .bf-banda-b { background: color-mix(in srgb, var(--bf-acento, #4D5847) 14%, transparent); }
.bf-banda-a:focus-visible { outline: 3px solid var(--bf-acento, #4D5847); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bf-banda-fondo { transition: none; } }

/* La luz dorada que recorre el interior de las letras (la misma de la portada y del aviso) */
.bf-banda-fondo { --ruta: 700px; background-image: linear-gradient(104deg, rgba(227, 234, 154, 0) 0%, #E3EA9A 30%, #FAFCDC 50%, #E3EA9A 70%, rgba(227, 234, 154, 0) 100%), linear-gradient(var(--bf-letras, #2a2820), var(--bf-letras, #2a2820)); background-size: 860px 100%, 100% 100%; background-repeat: no-repeat; background-position: calc(50% - var(--ruta)) 0, 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: bfbLuz 3.6s ease-in-out infinite; }
@keyframes bfbLuz { 0% { background-position: calc(50% - var(--ruta)) 0, 0 0; } 82%, 100% { background-position: calc(50% + var(--ruta)) 0, 0 0; } }
@media (min-width: 700px) { .bf-banda-fondo { --ruta: 1150px; animation-duration: 4.4s; } }
@media (prefers-reduced-motion: reduce) { .bf-banda-fondo { animation: none; background-position: calc(50% - 250px) 0, 0 0; } }

/* Efecto v2 · luz difusa: tres focos de oro de bordes suaves que van a la deriva por trayectorias curvas, cada uno a su ritmo, dentro de las letras; tono base con matices (no plano) */
.bf-banda-fondo { background-image: radial-gradient(closest-side, rgba(250, 252, 220, 1) 0%, rgba(232, 238, 160, .9) 24%, rgba(214, 224, 120, .38) 52%, rgba(214, 224, 120, 0) 100%), radial-gradient(closest-side, rgba(250, 252, 220, 1) 0%, rgba(232, 238, 160, .9) 24%, rgba(214, 224, 120, .38) 52%, rgba(214, 224, 120, 0) 100%), radial-gradient(closest-side, rgba(250, 252, 220, 1) 0%, rgba(232, 238, 160, .9) 24%, rgba(214, 224, 120, .38) 52%, rgba(214, 224, 120, 0) 100%), linear-gradient(162deg, var(--bf-texto, #1d1c18) 0%, var(--base2, #2d251c) 50%, var(--bf-texto, #1d1c18) 100%); background-size: 560px 430px, 430px 380px, 700px 480px, 100% 100%; background-repeat: no-repeat;
  background-position: 8% 18%, 90% 70%, 42% 92%, 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: bfLuz2 26s ease-in-out infinite; }
@keyframes bfLuz2 {
  0%, 100% { background-position: 8% 18%, 90% 70%, 42% 92%, 0 0; }
  21% { background-position: 34% 62%, 66% 22%, 12% 38%, 0 0; }
  46% { background-position: 63% 30%, 36% 84%, 78% 58%, 0 0; }
  72% { background-position: 88% 76%, 14% 34%, 54% 12%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .bf-banda-fondo { animation: none; background-position: 40% 40%, 70% 60%, 30% 80%, 0 0; } }

.bf-banda-fondo { --base2: #2d251c; }

@media (min-width: 700px) { .bf-banda-fondo { background-size: 980px 720px, 760px 620px, 1200px 820px, 100% 100%; } }
.bf-banda-fondo { --bf-letras: #2a2820; --base2: #3a3727; }
.bf-banda-card, .bf-banda-b { color: #1d1c18; }