/* ============================================================================
   BIF — Design System · Componentes
   ----------------------------------------------------------------------------
   Componentes reutilizables nombrados con prefijo `bif-` (BEM-light).
   Cargar después de tokens.css + base.css.
   ============================================================================ */

/* ============================================================================
   CONTAINER
   ============================================================================ */
.bif-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.bif-container--narrow {
    max-width: 1080px;
}

.bif-container--wide {
    max-width: 1680px;
}

/* ============================================================================
   SECTION / EYEBROW
   ============================================================================ */
.bif-section {
    padding-block: var(--section-y);
    position: relative;
}

.bif-section--bordered {
    border-top: var(--border-thin);
}

.bif-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--bif-fire);
}

.bif-eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--bif-fire);
}

.bif-section-header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

.bif-section-header__title {
    font-size: var(--fs-3xl);
}

.bif-section-header__lead {
    max-width: 60ch;
    color: var(--bif-ash);
    font-size: var(--fs-lg);
}

@media (min-width: 768px) {
    .bif-section-header--split {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .bif-section-header--split .bif-section-header__lead {
        text-align: right;
        margin-bottom: var(--sp-2);
    }
}

/* ============================================================================
   BOTONES
   ----------------------------------------------------------------------------
   .bif-btn (base) + modificadores: --primary, --ghost, --gold, --lg, --block
   Bordes angulares con clip-path (esquinas cortadas estilo fight card)
   ============================================================================ */
.bif-btn {
    --btn-bg:           var(--bif-fire);
    --btn-color:        var(--bif-white);
    --btn-border:       var(--bif-fire);
    --btn-bg-hover:     var(--bif-blood);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-7);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--btn-color);
    background: var(--btn-bg);
    border: 2px solid var(--btn-border);
    clip-path: polygon(
        12px 0,
        100% 0,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0 100%,
        0 12px
    );
    transition:
        background var(--dur-base) var(--ease-out),
        transform  var(--dur-fast) var(--ease-impact),
        box-shadow var(--dur-base) var(--ease-out),
        color      var(--dur-base) var(--ease-out);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
}

.bif-btn::before {
    /* Brillo que cruza al hacer hover (sweep effect) */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 70%
    );
    transform: translateX(-120%);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: -1;
}

.bif-btn:hover {
    background: var(--btn-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--bif-glow-red);
}

.bif-btn:hover::before {
    transform: translateX(120%);
}

.bif-btn:active {
    transform: translateY(0);
}

.bif-btn:disabled {
    background: var(--bif-graphite);
    border-color: var(--bif-graphite);
    color: var(--bif-smoke);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- Variantes --- */
.bif-btn--ghost {
    --btn-bg:           transparent;
    --btn-color:        var(--bif-white);
    --btn-border:       var(--bif-bone);
    --btn-bg-hover:     var(--bif-white);
}
.bif-btn--ghost:hover { color: var(--bif-black); }

.bif-btn--outline-red {
    --btn-bg:           transparent;
    --btn-color:        var(--bif-fire);
    --btn-border:       var(--bif-fire);
    --btn-bg-hover:     var(--bif-fire);
}
.bif-btn--outline-red:hover { color: var(--bif-white); }

.bif-btn--gold {
    --btn-bg:           var(--bif-gold);
    --btn-color:        var(--bif-black);
    --btn-border:       var(--bif-gold);
    --btn-bg-hover:     var(--bif-gold-light);
}
.bif-btn--gold:hover { box-shadow: var(--bif-glow-gold); }

.bif-btn--dark {
    --btn-bg:           var(--bif-charcoal);
    --btn-color:        var(--bif-bone);
    --btn-border:       var(--bif-graphite);
    --btn-bg-hover:     var(--bif-iron);
}

/* --- Tamaños --- */
.bif-btn--lg {
    padding: var(--sp-5) var(--sp-8);
    font-size: var(--fs-lg);
}

.bif-btn--xl {
    padding: var(--sp-6) var(--sp-9);
    font-size: var(--fs-xl);
}

.bif-btn--sm {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-sm);
}

.bif-btn--block {
    display: flex;
    width: 100%;
}

/* Icono dentro del botón con animación de "empuje" */
.bif-btn__icon {
    width: 1.2em;
    height: 1.2em;
    transition: transform var(--dur-base) var(--ease-impact);
}

.bif-btn:hover .bif-btn__icon {
    transform: translateX(4px);
}

/* ============================================================================
   BADGES
   ============================================================================ */
.bif-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--bif-bone);
    background: var(--bif-graphite);
    border: 1px solid var(--bif-iron);
}

.bif-badge--blood     { background: var(--bif-blood);   color: var(--bif-white);  border-color: var(--bif-blood); }
.bif-badge--fire      { background: var(--bif-fire);    color: var(--bif-white);  border-color: var(--bif-fire); }
.bif-badge--gold      { background: var(--bif-gold);    color: var(--bif-black);  border-color: var(--bif-gold); }
.bif-badge--ghost     { background: transparent;        color: var(--bif-bone);   border-color: var(--bif-graphite); }
.bif-badge--success   { background: rgba(0,200,83,0.15);color: var(--bif-success);border-color: var(--bif-success); }
.bif-badge--danger    { background: rgba(255,23,68,0.15);color: var(--bif-danger);border-color: var(--bif-danger); }

.bif-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.bif-badge--live .bif-badge__dot {
    animation: bif-pulse 1.5s infinite;
}

@keyframes bif-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.3); }
}

/* ============================================================================
   CARD genérica (fondo charcoal con borde sutil)
   ============================================================================ */
.bif-card {
    position: relative;
    background: var(--bif-charcoal);
    border: var(--border-thin);
    padding: var(--sp-6);
    transition:
        border-color var(--dur-base) var(--ease-out),
        transform    var(--dur-base) var(--ease-out);
}

/* La sombra/glow vive en un pseudo-elemento para no animar box-shadow
   (animar box-shadow fuerza repaint en cada frame). Animamos opacity. */
.bif-card::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-lg), var(--bif-glow-red-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
}

.bif-card:hover {
    border-color: var(--bif-blood);
    transform: translateY(-4px);
}

.bif-card:hover::after { opacity: 1; }

.bif-card--flat:hover {
    transform: none;
}

/* Esquina cortada estilo fight card */
.bif-card--cut {
    clip-path: polygon(
        0 0,
        calc(100% - 24px) 0,
        100% 24px,
        100% 100%,
        24px 100%,
        0 calc(100% - 24px)
    );
}

/* ============================================================================
   INPUTS
   ============================================================================ */
.bif-input,
.bif-textarea,
.bif-select {
    width: 100%;
    padding: var(--sp-4) var(--sp-4);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--bif-white);
    background: var(--bif-charcoal);
    border: 2px solid var(--bif-graphite);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

.bif-input::placeholder,
.bif-textarea::placeholder {
    color: var(--bif-smoke);
}

.bif-input:hover,
.bif-textarea:hover,
.bif-select:hover {
    border-color: var(--bif-iron);
}

.bif-input:focus,
.bif-textarea:focus,
.bif-select:focus {
    outline: none;
    border-color: var(--bif-fire);
    background: var(--bif-black);
}

.bif-input--error {
    border-color: var(--bif-danger);
}

.bif-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--bif-ash);
}

.bif-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.bif-field__error {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--bif-danger);
}

/* ============================================================================
   HEADER / NAV (sitio público)
   ============================================================================ */
.bif-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    padding: var(--sp-4) 0;
    /* Sin backdrop-filter: en un elemento fijo recompondría todo el viewport
       en cada frame de scroll. Usamos un gradiente sólido con buena alpha. */
    background: linear-gradient(to bottom, rgba(10,10,10,0.95) 30%, rgba(10,10,10,0.6) 100%);
    transition: background var(--dur-base) var(--ease-out);
    will-change: background;
}

.bif-header.is-scrolled {
    background: var(--bif-overlay-90);
    border-bottom: 1px solid var(--bif-graphite);
}

.bif-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
}

/* ──────────────────────────────────────────────────────────────────────────
   Logo BIF — imagen real del cliente (shared/img/logo.jpg).
   El JPG viene sobre fondo negro: mix-blend-mode:lighten "come" el negro
   cuando el logo está sobre cualquier fondo oscuro (que es donde se usa
   en todo el sitio). Si en el futuro recibimos el SVG vectorial, solo hay
   que cambiar el src — el wrapper sigue igual.
   ────────────────────────────────────────────────────────────────────────── */
.bif-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--bif-white);
    line-height: 1;
    text-decoration: none;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.bif-logo:hover {
    opacity: 0.85;
    color: var(--bif-white); /* prevenir el hover rojo global de <a> */
}

.bif-logo__img {
    display: block;
    height: 36px;
    width: auto;
    /* "lighten" hace que cualquier pixel del logo más oscuro que el fondo
       del header se ignore — el fondo negro del JPG desaparece visualmente. */
    mix-blend-mode: lighten;
    /* Si el cliente nos pasa después un SVG/PNG con transparencia, basta
       con eliminar la línea de arriba. */
    user-select: none;
}

/* Tagline opcional al lado del logo (footer, splash, etc.) */
.bif-logo__sub {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--bif-ash);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
}

.bif-logo--with-sub .bif-logo__sub {
    display: inline-block;
}

/* Tamaños */
.bif-logo--sm .bif-logo__img { height: 28px; }
.bif-logo--lg .bif-logo__img { height: 52px; }
.bif-logo--xl .bif-logo__img { height: 80px; }

/* Mostrar tagline solo en pantallas amplias para no saturar el header móvil */
@media (min-width: 1024px) {
    .bif-logo--responsive-sub .bif-logo__sub {
        display: inline-block;
    }
}

.bif-nav {
    display: none;
}

@media (min-width: 1024px) {
    .bif-nav {
        display: flex;
        align-items: center;
        gap: var(--sp-7);
    }
}

.bif-nav__link {
    position: relative;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--bif-bone);
    padding-block: var(--sp-2);
}

.bif-nav__link::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: var(--bif-fire);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
}

.bif-nav__link:hover {
    color: var(--bif-white);
}

.bif-nav__link:hover::after,
.bif-nav__link.is-active::after {
    transform: scaleX(1);
}

/* Burger móvil */
.bif-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--sp-2);
}

.bif-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--bif-bone);
    transition: transform var(--dur-base) var(--ease-out);
}

@media (min-width: 1024px) {
    .bif-burger { display: none; }
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.bif-footer {
    background: var(--bif-charcoal);
    border-top: var(--border-thin);
    padding-block: var(--sp-9) var(--sp-6);
}

.bif-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    margin-bottom: var(--sp-9);
}

@media (min-width: 768px) {
    .bif-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.bif-footer__title {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--bif-ash);
    margin-bottom: var(--sp-4);
}

.bif-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.bif-footer__link {
    color: var(--bif-bone);
    font-size: var(--fs-sm);
    transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}

.bif-footer__link:hover {
    color: var(--bif-fire);
    padding-left: var(--sp-2);
}

.bif-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-top: var(--sp-5);
    border-top: var(--border-thin);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--bif-smoke);
    text-transform: uppercase;
}

/* Iconos sociales */
.bif-socials {
    display: flex;
    gap: var(--sp-3);
}

.bif-socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bif-graphite);
    color: var(--bif-bone);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-impact);
}

.bif-socials__link:hover {
    border-color: var(--bif-fire);
    color: var(--bif-fire);
    transform: translateY(-2px);
}

.bif-socials__link svg {
    width: 18px;
    height: 18px;
}

/* ============================================================================
   COUNTDOWN
   ============================================================================ */
.bif-countdown {
    display: flex;
    gap: var(--sp-2);
}

@media (min-width: 640px) {
    .bif-countdown { gap: var(--sp-4); }
}

.bif-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    min-width: 76px;
    /* Sin backdrop-filter: usamos un fondo sólido. La diferencia visual
       es mínima sobre el hero pero el coste de pintura cae a casi cero. */
    background: rgba(20, 20, 20, 0.88);
    border: 1px solid var(--bif-graphite);
}

@media (min-width: 640px) {
    .bif-countdown__unit {
        min-width: 100px;
        padding: var(--sp-4) var(--sp-5);
    }
}

.bif-countdown__value {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    color: var(--bif-white);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bif-countdown__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--bif-ash);
}

/* ============================================================================
   FIGHT CARD (visual de evento/poster)
   ============================================================================ */
.bif-fight-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bif-charcoal);
    border: var(--border-thin);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out);
}

.bif-fight-card:hover {
    border-color: var(--bif-blood);
}

@media (min-width: 1024px) {
    .bif-fight-card {
        grid-template-columns: 1.1fr 1fr;
    }
}

.bif-fight-card__media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--bif-iron);
}

@media (min-width: 1024px) {
    .bif-fight-card__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 480px;
    }
}

.bif-fight-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.2) contrast(1.1);
    transition: transform var(--dur-slower) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.bif-fight-card:hover .bif-fight-card__img {
    transform: scale(1.05);
    filter: grayscale(0) contrast(1.15);
}

/* Overlay duotono al fondo de la imagen */
.bif-fight-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10,10,10,0) 30%,
        rgba(10,10,10,0.85) 100%
    );
    pointer-events: none;
}

.bif-fight-card__body {
    padding: var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    justify-content: space-between;
}

.bif-fight-card__title {
    font-size: var(--fs-3xl);
    line-height: 0.95;
}

.bif-fight-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--bif-ash);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

.bif-fight-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.bif-fight-card__meta-item svg {
    width: 16px;
    height: 16px;
    color: var(--bif-fire);
}

/* ============================================================================
   STATS STRIP (banda con números grandes)
   ============================================================================ */
.bif-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--bif-graphite);
    border-block: var(--border-thin);
}

@media (min-width: 768px) {
    .bif-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bif-stat {
    background: var(--bif-black);
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    transition: background var(--dur-base) var(--ease-out);
}

.bif-stat:hover {
    background: var(--bif-charcoal);
}

.bif-stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    color: var(--bif-white);
    line-height: 1;
    margin-bottom: var(--sp-2);
    font-variant-numeric: tabular-nums;
}

.bif-stat__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--bif-ash);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
}

/* ============================================================================
   GRID DE EVENTOS PASADOS
   ============================================================================ */
.bif-event-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 640px)  { .bif-event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bif-event-grid { grid-template-columns: repeat(3, 1fr); } }

.bif-event-thumb {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--bif-charcoal);
    border: var(--border-thin);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out);
}

.bif-event-thumb:hover {
    border-color: var(--bif-blood);
    box-shadow: var(--bif-glow-red-sm);
}

.bif-event-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.85) contrast(1.2) brightness(0.7);
    transition:
        filter var(--dur-slow) var(--ease-out),
        transform var(--dur-slower) var(--ease-out);
}

.bif-event-thumb:hover .bif-event-thumb__img {
    filter: grayscale(0) contrast(1.1) brightness(1);
    transform: scale(1.06);
}

/* Tratamiento duotono rojo en hover */
.bif-event-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(193, 18, 31, 0) 40%,
        rgba(193, 18, 31, 0.35) 100%
    );
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    z-index: 1;
    pointer-events: none;
}

.bif-event-thumb:hover::before {
    opacity: 1;
}

.bif-event-thumb__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-5);
    z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(10,10,10,0.95));
}

.bif-event-thumb__title {
    font-size: var(--fs-xl);
    line-height: 1;
    margin-bottom: var(--sp-2);
}

.bif-event-thumb__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--bif-ash);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* ============================================================================
   POSTER FALLBACK (placeholder visual cuando aún no hay imagen del cliente)
   ----------------------------------------------------------------------------
   Genera un poster estilo fight night con CSS puro a partir de variables.
   ============================================================================ */
.bif-poster {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at center top, rgba(193,18,31,0.45), transparent 60%),
        radial-gradient(ellipse at center bottom, rgba(212,175,55,0.15), transparent 50%),
        linear-gradient(135deg, var(--bif-iron) 0%, var(--bif-black) 100%);
    overflow: hidden;
}

.bif-poster::after {
    /* Líneas diagonales decorativas. El grano lo aporta el body (base.css),
       así evitamos ocho capas SVG con feTurbulence renderizándose en cada
       poster (era el segundo cuello de botella de pintura). */
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 24px,
        rgba(255,255,255,0.02) 24px 25px
    );
    pointer-events: none;
}

.bif-poster__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--sp-6);
}

.bif-poster__edition {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    color: var(--bif-fire);
    text-transform: uppercase;
    margin-bottom: var(--sp-2);
}

.bif-poster__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 0.85;
    color: var(--bif-white);
    margin-bottom: var(--sp-4);
    text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

.bif-poster__subtitle {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-widest);
    color: var(--bif-ash);
    text-transform: uppercase;
}

/* ============================================================================
   FORMULARIO NEWSLETTER
   ============================================================================ */
.bif-newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

@media (min-width: 640px) {
    .bif-newsletter {
        flex-direction: row;
    }
    .bif-newsletter .bif-input { flex: 1; }
}

/* ============================================================================
   ANIMACIONES GLOBALES REUTILIZABLES
   ============================================================================ */
@keyframes bif-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bif-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bif-glitch {
    0%, 100% { transform: translate(0); }
    20%      { transform: translate(-2px, 1px); }
    40%      { transform: translate(2px, -1px); }
    60%      { transform: translate(-1px, -2px); }
    80%      { transform: translate(1px, 2px); }
}

@keyframes bif-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

.bif-anim-fade-up {
    animation: bif-fade-up var(--dur-slow) var(--ease-out) both;
}

.bif-anim-delay-1 { animation-delay: 120ms; }
.bif-anim-delay-2 { animation-delay: 240ms; }
.bif-anim-delay-3 { animation-delay: 360ms; }
.bif-anim-delay-4 { animation-delay: 480ms; }
.bif-anim-delay-5 { animation-delay: 600ms; }