/* Campaña Black Friday · el desarrollo de idea: «BLACK FRIDAY» repetido en diagonal y una luz dorada que recorre el interior de las letras.
   Un solo componente para la portada de la home, la de la página del Black Friday y la banda de la home (el popup lleva el suyo en bf-popup.css). */
.bfl { position: absolute; left: 50%; top: 50%; width: 220vmax; transform: translate(-50%, -50%) rotate(-11deg); display: grid; user-select: none; -webkit-user-select: none; pointer-events: none;
  --ruta: 700px; --base: #1d1c18;
  background-image: linear-gradient(104deg, rgba(217, 178, 122, 0) 0%, #D9B27A 30%, #F7DFAE 50%, #D9B27A 70%, rgba(217, 178, 122, 0) 100%), linear-gradient(var(--base), var(--base));
  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: bflLuz 3.4s ease-in-out infinite; }
.bfl span { display: block; white-space: nowrap; font: 700 clamp(4.2rem, 17vmin, 10rem)/.86 var(--sans, "Inria Sans", "Helvetica Neue", Arial, sans-serif); letter-spacing: -.045em; text-transform: uppercase; color: transparent; -webkit-text-fill-color: transparent; }
.bfl span:nth-child(even) { margin-left: -.55em; }
@keyframes bflLuz { 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) { .bfl { --ruta: 1150px; animation-duration: 4.4s; } }
@media (prefers-reduced-motion: reduce) { .bfl { animation: none; background-position: calc(50% - 250px) 0, 0 0; } }
/* variante oscura (página del Black Friday): letras apenas visibles y la luz dorada por dentro */
.bfl-oscuro { --base: #26231f; }
.bfl-oscuro span { font-size: clamp(3.4rem, 13vmin, 8rem); }