/* =============================================
       CAPA 1: VARIABLES CSS Y TOKENS DE DISEÑO
       ============================================= */
    :root {
      --bm-black:     #0a0a0a;
      --bm-dark:      #111111;
      --bm-card:      #161616;
      --bm-border:    #2a2a2a;
      --bm-card-border: #252525;
      --bm-red:       #8B0000;
      --bm-red-light: #cc0000;
      --bm-red-glow:  rgba(139,0,0,0.4);
      --bm-red-titulo: #f04444;  /* H2 del cuerpo de articulo: rojo aclarado
                                    para que contraste sobre la tarjeta */
      --bm-orange:    #ff8c42;   /* H3 del cuerpo de articulo */
      --bm-white:     #f0f0f0;
      --bm-gray:      #888888;
      --bm-gray-lt:   #bbbbbb;
      /* ── Tipografía ───────────────────────────── */
      --bm-font-h1:   'Grenze', serif;               /* H1, títulos principales */
      --bm-font-h2:   'Bree Serif', serif;          /* H2, H3, botones         */
      --bm-font-body: 'Roboto', sans-serif;         /* H4, body, párrafos      */
      --bm-font-head: 'Bebas Neue', sans-serif;     /* Labels, números (legacy)*/
      --bm-font-sub:  'Oswald', sans-serif;         /* Badges, caps pequeños   */
      /* ── Resto ───────────────────────────────── */
      --bm-font-size-body: 12pt;                   /* = 16px — parrafos */
      --bm-radius:    8px;
      --bm-transition:0.3s ease;
      --bm-card-ratio: calc(16 / 9);
    }

    /* ── Cascada tipográfica global ──────────────── */
    h1                         { font-family: var(--bm-font-h1); font-weight: 400; }
    h2, h3                     { font-family: var(--bm-font-h2);   }
    h4, p, li, span.body-text  { font-family: var(--bm-font-body); }
    p, li                      { font-size: var(--bm-font-size-body); }
    button, .bm-btn, .ca-btn   { font-family: var(--bm-font-h2);   }
    .bm-modal-article          { font-family: var(--bm-font-body); line-height: 1.7; }

    /* =============================================
       CAPA 2: RESET Y BASE GLOBAL
       ============================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bm-black);
      color: var(--bm-white);
      font-family: var(--bm-font-body);
      min-height: 100vh;
      overflow-x: hidden;
    }
    a { color: var(--bm-red-light); text-decoration: none; }

    /* =============================================
       CAPA 3: HEADER
       - Móvil: estático, sube con el scroll (no sticky)
       - Desktop: estático también, misma lógica
       ============================================= */
    .bm-header {
      background: var(--bm-black);
      border-bottom: 1px solid var(--bm-border);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: center; /* Logo centrado en desktop */
    }

    /* Desktop: ocultar la barra del header y flotar el logo arriba-izquierda */
    @media (min-width: 992px) {
      .bm-header {
        position: fixed;
        top: 0; left: 0;
        background: transparent;
        border-bottom: none;
        padding: 20px 0 0 28px;
        justify-content: flex-start;
        z-index: 500;
        pointer-events: none; /* solo el logo recibe clicks */
      }
      .bm-header .bm-logo-link {
        pointer-events: auto; /* el enlace sí es clickeable */
      }
      .bm-header .bm-logo-img {
        filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9));
      }
    }
    .bm-header .bm-logo-img,
    .bm-logo-img {
      height: 50px !important;        /* 40px + 25% */
      max-height: 50px !important;
      width: auto;
      display: block;
      transition: opacity 0.2s;
    }
    .bm-logo-link { display: inline-flex; cursor: pointer; }
    .bm-logo-link:hover .bm-logo-img { opacity: 0.75; }
    .bm-logo {
      font-family: var(--bm-font-head);
      font-size: 2rem;
      color: var(--bm-white);
      letter-spacing: 2px;
      line-height: 1;
    }
    .bm-logo span { color: var(--bm-red-light); }
    .bm-tagline {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      color: var(--bm-red-light);
      letter-spacing: 4px;
      text-transform: uppercase;
    }
    .bm-nav-icons { display: flex; gap: 24px; align-items: center; }
    .bm-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 2px;
      color: var(--bm-gray);
      cursor: pointer;
      transition: color var(--bm-transition);
    }
    .bm-nav-item i { font-size: 1.2rem; margin-bottom: 2px; }
    .bm-nav-item:hover { color: var(--bm-red-light); }

    /* =============================================
       CAPA 4: GRID PRINCIPAL
       
       MÓVIL: 1 columna, cada card = 100vw × 177.78vh
              (proporción 1080×1920 = 9:16)
       
       DESKTOP: 3 columnas con gap, cada card mantiene
                la proporción 9:16 usando aspect-ratio
       ============================================= */

    /* --- MÓVIL (default) --- */
    .bm-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
      background: var(--bm-black);
    }

    /* --- DESKTOP (≥992px): COVER FLOW SLIDER --- */
    @media (min-width: 992px) {
      .bm-grid {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0 20px;
        background: var(--bm-black);
        height: 100vh;          /* toda la ventana */
        position: relative;
        overflow: hidden;
        perspective: 2000px;
      }

      /* Cada card en el slider — dimensionada por ALTURA para que quepa completa */
      .bm-grid .bm-card {
        position: absolute;
        height: 82vh;                        /* deja margen para los dots abajo */
        width: auto;
        aspect-ratio: 9 / 16;                /* el ancho se deriva del alto */
        max-width: 90vw;
        transition: transform 0.6s cubic-bezier(0.25,0.8,0.35,1),
                    opacity 0.6s ease,
                    filter 0.6s ease;
        cursor: pointer;
      }

      /* Card central — destacada e interactiva */
      .bm-grid .bm-card.slide-active {
        transform: translateX(0) scale(1);
        opacity: 1;
        z-index: 10;
        filter: none;
        pointer-events: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.7),
                    0 0 40px rgba(139,0,0,0.25);
      }

      /* Card lateral izquierda */
      .bm-grid .bm-card.slide-prev {
        transform: translateX(-88%) scale(0.72);
        opacity: 0.55;
        z-index: 5;
        filter: brightness(0.5);
        pointer-events: none;
      }

      /* Card lateral derecha */
      .bm-grid .bm-card.slide-next {
        transform: translateX(88%) scale(0.72);
        opacity: 0.55;
        z-index: 5;
        filter: brightness(0.5);
        pointer-events: none;
      }

      /* Cards ocultas (fuera del rango visible) */
      .bm-grid .bm-card.slide-hidden {
        transform: translateX(0) scale(0.6);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
      }

      /* Hover en central deshabilita el translateY heredado */
      .bm-grid .bm-card.slide-active:hover {
        transform: translateX(0) scale(1);
      }
    }

    /* Flechas de navegación — solo desktop */
    .slider-arrow {
      display: none;
    }
    @media (min-width: 992px) {
      .slider-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 60px; height: 60px;
        border-radius: 50%;
        background: rgba(20,0,0,0.6);
        border: 2px solid var(--bm-red);
        color: var(--bm-red-light);
        font-size: 1.6rem;
        cursor: pointer;
        z-index: 100;
        transition: all 0.3s ease;
        box-shadow: 0 0 20px rgba(139,0,0,0.4);
      }
      .slider-arrow:hover {
        background: var(--bm-red);
        color: var(--bm-white);
        box-shadow: 0 0 30px rgba(204,0,0,0.7);
      }
      .slider-arrow-prev { left: 40px; }
      .slider-arrow-next { right: 40px; }
    }
    /* ═══════════════════════════════════════════════
       MEJORAS DEL SLIDER COVER FLOW (solo desktop)
       ═══════════════════════════════════════════════ */
    @media (min-width: 992px) {

      /* ③ Reflejo especular bajo la card central */
      .bm-grid .bm-card.slide-active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -14px;
        transform: translateX(-50%);
        width: 70%;
        height: 40px;
        background: radial-gradient(ellipse at center,
          rgba(139,0,0,0.35) 0%,
          rgba(139,0,0,0.1) 45%,
          transparent 75%);
        filter: blur(8px);
        z-index: -1;
        pointer-events: none;
      }

      /* ⑤ Fade-in del contenido al centrar */
      /* .ca-content queda fuera: sus hijos entran en cascada con su
         propia regla (ver CAPA 15c). Si el contenedor se animara
         tambien, el desfase se perderia dentro del bloque. */
      .bm-grid .bm-card.slide-active > *:not(.ca-bg):not(.ca-overlay):not(.hero-bg):not(.hero-overlay):not(.bm-like):not(.ca-content) {
        animation: card-content-fade 0.6s ease both;
      }
      @keyframes card-content-fade {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* ①② Contenedor de controles: dots + contador */
      .slider-controls {
        position: fixed;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 400;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }

      /* ① Dots minimalistas */
      .slider-dots {
        display: flex;
        gap: 10px;
        pointer-events: auto;
      }
      .slider-dot {
        width: 9px; height: 9px;
        border-radius: 50%;
        background: rgba(255,255,255,0.25);
        border: 1px solid rgba(255,255,255,0.15);
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
      }
      .slider-dot:hover { background: rgba(204,0,0,0.6); }
      .slider-dot.active {
        background: var(--bm-red-light);
        border-color: var(--bm-red-light);
        width: 26px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(204,0,0,0.6);
      }

      /* ② Contador de posición */
      .slider-counter {
        font-family: var(--bm-font-head);
        font-size: 0.9rem;
        letter-spacing: 2px;
        color: rgba(255,255,255,0.5);
      }
      .slider-counter .current { color: var(--bm-red-light); }
    }

    /* Ocultar controles del slider en móvil */
    @media (max-width: 991px) {
      .slider-controls { display: none; }
    }

    /* Botón flotante scroll-to-top (solo móvil) */
    .scroll-top-btn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 48px; height: 48px;
      border-radius: 50%;
      background: rgba(20,0,0,0.85);
      border: 2px solid var(--bm-red);
      color: var(--bm-red-light);
      font-size: 1.3rem;
      cursor: pointer;
      z-index: 900;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(139,0,0,0.5);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
    }
    .scroll-top-btn.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .scroll-top-btn:active {
      background: var(--bm-red);
      color: var(--bm-white);
    }
    /* Solo se muestra en móvil */
    @media (max-width: 991px) {
      .scroll-top-btn { display: flex; }
    }

    /* =============================================
       CAPA 5: CARD BASE
       
       MÓVIL: ocupa 100% ancho × proporción 9:16
              usando aspect-ratio para mantener 1080×1920
       
       DESKTOP: misma proporción 9:16 por columna
       ============================================= */
    .bm-card {
      background: var(--bm-card);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: transform var(--bm-transition);
      /* borde de card eliminado a peticion (sep 2026) */
      /* Proporción 9:16 en todos los viewports — igual que desktop */
      width: 100%;
      aspect-ratio: 9 / 16;
      padding: clamp(16px, 4%, 32px);
    }

    /* Cards con fondo inyectado: contenido sobre el overlay */
    .bm-card.has-bg > *:not(.ca-bg):not(.ca-overlay):not(.hero-bg):not(.hero-overlay):not(.hero-lateral):not(.bm-like):not(.reel-video):not(.reel-velo):not(.reel-info):not(.reel-sonido):not(.reel-play):not(.reel-chevron) {
      position: relative;
      z-index: 2;
    }

    /* Móvil: ancho 100% + altura completa del viewport */
    @media (max-width: 991px) {
      /* Ocultar header de navegación en móvil */
      .bm-header { display: none; }
    }

    @media (max-width: 991px) {
      .bm-card {
        width: 100%;
        aspect-ratio: unset;
        min-height: 0;
        /* dvh, no svh: svh mide el viewport CON la barra de direcciones
           visible, asi que al ocultarse quedaba un sobrante por el que
           asomaba la card siguiente. dvh sigue al viewport real.
           Las dos primeras lineas son respaldo para navegadores viejos. */
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        /* overflow hidden, no auto: con auto quedaba 1-2px de scroll
           interno residual y el primer gesto se gastaba ahi, de ahi la
           sensacion de atasco. El contenido largo vive en los modales. */
        overflow: hidden;
      }
    }

    /* --- MOVIL: snap vertical (una card = una pagina) ---
       El contenedor de scroll es el BODY, no el documento. Con el documento
       scrolleando, la barra de direcciones colapsa a media inercia, las cards
       en dvh cambian de altura todas a la vez y el navegador re-ancla en otra
       card: eso producia el brinco. Con el body de altura fija la barra ya no
       colapsa, la altura nunca cambia y el snap cae exacto. */
    @media (max-width: 991px) {
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100dvh;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .bm-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;   /* un swipe = una card, nunca salta dos */
      }
      /* Ya no existen cards excluidas del snap: todas miden una pantalla
         y resuelven el exceso con scroll propio */
    }

    /* El hover translateY se elimina — interfiere con el slider Cover Flow */

    /* Elementos internos de cards */
    .bm-card-num {
      font-family: var(--bm-font-head);
      font-size: 2.2rem; /* bm-card-num */
      color: rgba(255,255,255,0.55);
      margin-bottom: 4px;
      line-height: 1;
      letter-spacing: 1px;
    }
    .bm-card-label {
      font-family: var(--bm-font-sub);
      font-size: 0.9rem; /* bm-card-label */
      letter-spacing: 4px;
      color: var(--bm-red-light);
      text-transform: uppercase;
      text-align: center;                        /* ② Centrado */
      margin-bottom: 6px;
    }
    .bm-card-title {
      font-family: var(--bm-font-h1);
      font-weight: 400;
      font-size: 1.8rem; /* bm-card-title */
      line-height: 1.15;                         /* ⑥ Interlineado */
      letter-spacing: 1px;
      margin-bottom: 10px;
      text-align: center;
    }
    .bm-card-body {
      font-family: var(--bm-font-body);
      font-size: var(--bm-font-size-body); /* bm-card-body */
      color: var(--bm-gray-lt);
      line-height: 1.6;
      flex: 1;
    }
    .bm-card-img {
      width: 100%;
      flex: 1;
      object-fit: cover;
      border-radius: var(--bm-radius);
      margin: 10px 0;
      background: var(--bm-border);
      min-height: 0;
    }
    .bm-img-placeholder {
      width: 100%;
      flex: 1;
      min-height: 0;
      background: linear-gradient(135deg, #1a0000 0%, #2d0000 50%, #1a0000 100%);
      border-radius: var(--bm-radius);
      margin: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem; /* placeholder emoji */
      color: var(--bm-red);
      border: 1px solid var(--bm-border);
    }
    .bm-btn {
      font-family: var(--bm-font-h2);           /* Bree Serif */
      font-size: 0.9rem; /* bm-btn */
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 10px 16px;
      border: 1px solid var(--bm-red);
      background: transparent;
      color: var(--bm-white);
      cursor: pointer;
      transition: all var(--bm-transition);
      border-radius: 2px;
      margin-top: 10px;
      width: 100%;
    }
    .bm-btn:hover, .bm-btn.active {
      background: var(--bm-red);
      box-shadow: 0 0 20px var(--bm-red-glow);
    }
    .bm-btn-solid { background: var(--bm-red); border-color: var(--bm-red); }

    /* ④ Chevron global — más grande con círculo */
    .bm-chevron {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      animation: bounce 2s infinite;
      cursor: pointer;
    }
    .bm-chevron i {
      width: 34px;
      height: 34px;
      border: 1.5px solid rgba(255,255,255,0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.6);
      transition: border-color 0.2s, color 0.2s;
    }
    .bm-chevron:hover i {
      border-color: var(--bm-red-light);
      color: var(--bm-red-light);
    }
    @media (min-width: 992px) {
      .bm-chevron { display: none; }
    }
    @keyframes bounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(6px); }
    }

    /* =============================================
       CAPA 6: CARD 01 — PORTADA HERO
       ============================================= */
    /* ── CARD 01: PORTADA HERO ─────────────────────────── */
    .card-01 {
      position: relative;
      overflow: hidden;
      padding: 0;
      cursor: pointer;
      background: #0a0000;
    }

    /* Imagen de fondo */
    .hero-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      transform: scale(1.02);
      transition: transform 6s ease;
      z-index: 0;
    }
    .card-01:hover .hero-bg { transform: scale(1.07); }
    .hero-bg--placeholder {
      background: radial-gradient(ellipse at 50% 45%, #3d0000 0%, #1a0000 40%, #0a0000 100%);
    }

    /* Overlay: oscurece arriba y abajo para legibilidad del texto */
    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(0,0,0,0.75) 0%,
          rgba(0,0,0,0.05) 30%,
          rgba(0,0,0,0.05) 60%,
          rgba(0,0,0,0.82) 100%
        );
      z-index: 1;
    }

    /* Texto lateral rotado */
    /* ③ Texto lateral: centrado vertical con flexbox (más confiable) */
    .hero-lateral {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;  /* centra verticalmente con writing-mode:vertical-rl */
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-family: var(--bm-font-sub);
      font-size: 0.8rem; /* hero-lateral */
      letter-spacing: 3px;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      z-index: 2;
      padding: 0 6px;
      white-space: nowrap;
    }

    /* Contenido principal encima de todo */
    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      flex: 1;              /* llena el espacio del bm-card flex */
      padding: 20px 20px 20px 28px; /* ① top 20px */
    }

    /* Barra superior: num | badge | fecha */
    .hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
    }
    .hero-num {
      font-family: var(--bm-font-head);  /* ⑤ Bebas Neue = igual que bm-card-num */
      font-size: 2.2rem;                /* ⑤ mismo tamaño */
      color: rgba(255,255,255,0.55);   /* ⑤ mismo color */
      line-height: 1;
      letter-spacing: 1px;
    }
    .hero-badge {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem; /* hero-badge */
      letter-spacing: 2px;
      color: rgba(255,255,255,0.7);
      text-transform: uppercase;
      text-align: center;
      flex: 1;
    }
    .hero-date {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem; /* hero-date */
      letter-spacing: 2px;
      color: rgba(255,255,255,0.5);
      text-align: right;
      white-space: nowrap;
    }

    /* Área del logo */
    .hero-logo-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 4px;
    }
    .hero-logo-img {
      max-width: min(340px, 86%);
      max-height: 170px;
      object-fit: contain;
      filter: drop-shadow(0 2px 14px rgba(180,0,0,0.55));
    }
    .hero-logo-text {
      text-align: center;
    }
    .hero-logo-main {
      display: block;
      font-family: var(--bm-font-title);
      font-size: 2.6rem; /* hero-logo-main */
      color: white;
      letter-spacing: 3px;
      text-shadow:
        0 0 20px rgba(180,0,0,0.6),
        2px 0 var(--bm-red),
        -2px 0 rgba(0,0,80,0.8);
      line-height: 1;
    }
    .hero-logo-sub {
      display: block;
      font-family: var(--bm-font-sub);
      font-size: 0.8rem; /* hero-logo-sub */
      letter-spacing: 6px;
      color: rgba(255,255,255,0.6);
      margin-top: 2px;
    }

    /* Espaciador — ocupa el área de la imagen de fondo */
    .hero-spacer { flex: 1; }

    /* ② Textos inferiores: pegados al fondo */
    .hero-bottom {
      text-align: center;
      padding-bottom: 4px;
    }
    .hero-title-white {
      font-family: var(--bm-font-h1);   /* ④ Metal Mania = igual que H1 cards */
      font-weight: 400;
      font-size: 1.8rem;
      color: white;
      letter-spacing: 2px;
      line-height: 1.15;
      text-transform: uppercase;
    }
    .hero-title-red {
      font-family: var(--bm-font-h2);   /* Bree Serif */
      font-size: 1.35rem;
      color: var(--bm-red-light);
      font-style: normal;               /* sin cursiva */
      letter-spacing: 2px;
      line-height: 1.2;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .hero-scroll-text {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem; /* hero-scroll */
      letter-spacing: 4px;
      color: rgba(255,255,255,0.45);
      text-transform: uppercase;
    }

    /* Glitch en hover sobre el logo-text */
    .card-01:hover .hero-logo-main {
      animation: glitch 0.4s infinite;
    }
    @keyframes glitch {
      0%   { text-shadow: 2px 0 var(--bm-red), -2px 0 #003, 0 0 20px rgba(180,0,0,0.6); }
      25%  { text-shadow: -2px 0 var(--bm-red), 2px 0 #003, 0 0 20px rgba(180,0,0,0.6); }
      50%  { text-shadow: 2px 2px var(--bm-red), -2px -2px #003, 0 0 20px rgba(180,0,0,0.6); }
      75%  { text-shadow: -2px 2px var(--bm-red), 2px -2px #003, 0 0 20px rgba(180,0,0,0.6); }
      100% { text-shadow: 2px 0 var(--bm-red), -2px 0 #003, 0 0 20px rgba(180,0,0,0.6); }
    }

    /* =============================================
       CAPA 7: CARD 03 — NOTICIAS
       ============================================= */
    /* ── Card Noticias ───────────────────────────────────── */
    .card-noticias {
      justify-content: flex-start;
      position: relative;
      overflow: hidden;
    }
    /* Los elementos de contenido de noticias van sobre el fondo */
    .card-noticias .cn-header,
    .card-noticias .cn-title,
    .card-noticias .cn-subtitle,
    .card-noticias .news-list,
    .card-noticias .bm-btn,
    .card-noticias .ca-btn-wrap,
    .card-noticias .ca-btn-fallback,
    .card-noticias .bm-chevron {
      position: relative;
      z-index: 2;
    }

    .cn-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .cn-num {
      font-family: var(--bm-font-head);
      font-size: 2.2rem;
      color: var(--bm-red-light);  /* Número en rojo */
      line-height: 1;
      letter-spacing: 1px;
    }
    .cn-title {
      font-family: var(--bm-font-h1);
      font-weight: 400;
      font-size: 3rem;
      color: var(--bm-white);
      text-align: center;
      line-height: 1;
      margin: 0 0 6px;
      letter-spacing: 2px;
    }
    .cn-subtitle {
      font-family: var(--bm-font-sub);
      font-size: 1.0rem;
      letter-spacing: 4px;
      color: var(--bm-gray);
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    /* Lista */
    .news-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      margin-bottom: 12px;
    }
    .news-item {
      display: flex;
      gap: 14px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--bm-border);
      transition: background var(--bm-transition), padding-left var(--bm-transition);
    }
    .news-item--clickable { cursor: pointer; }
    .news-item--clickable:hover {
      background: rgba(139,0,0,0.08);
      padding-left: 6px;
    }

    /* Thumbnail */
    .news-thumb {
      width: 99px;
      height: 99px;
      background: #2a2a2a;   /* placeholder gris */
      border-radius: 6px;
      flex-shrink: 0;
      overflow: hidden;
    }
    .news-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Texto */
    .news-body { flex: 1; min-width: 0; }
    .news-band {
      font-family: var(--bm-font-h2);   /* Bree Serif */
      font-size: 1.0rem;
      color: var(--bm-red-light);
      margin-bottom: 4px;
      line-height: 1.2;
    }
    .news-text {
      font-family: var(--bm-font-body); /* Roboto */
      font-size: 1rem;
      color: var(--bm-white);
      line-height: 1.45;
    }

    /* Flecha derecha */
    .news-arrow {
      color: var(--bm-gray);
      font-size: 0.8rem;
      flex-shrink: 0;
    }
    .news-item--clickable:hover .news-arrow { color: var(--bm-red-light); }

    /* Empty state */
    .news-empty {
      color: var(--bm-gray);
      font-size: 0.82rem;
      text-align: center;
      padding: 20px 0;
      font-family: var(--bm-font-body);
    }

    /* =============================================
       CAPA 8: CARD 04 — TAROT SONORO
       ============================================= */
    /* ── CARD 04: TAROT SONORO ────────────────────────── */
    .card-tarot {
      padding: clamp(16px,4%,28px);
      display: flex;
      flex-direction: column;
    }
    .tarot-header {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
    }
    .tarot-title {
      font-family: var(--bm-font-h1);
      font-weight: 400;
      font-size: 2.2rem;
      color: var(--bm-white);
      text-align: center;
      line-height: 1;
      margin: 0 0 4px;
      letter-spacing: 2px;
    }
    .tarot-subtitle {
      font-family: var(--bm-font-sub);
      font-size: 0.9rem;
      letter-spacing: 5px;
      color: var(--bm-red-light);
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    /* Carta — más grande, ocupa el espacio disponible */
    .tarot-card-wrap {
      /* Altura calculada, no negociada: con flex:1 la carta cedia espacio a
         los demas elementos y quedaba diminuta. El min() toma lo que sea
         menor entre el alto disponible y lo que permite el ancho de pantalla,
         asi nunca se corta ni se encoge de mas. dvh, no vh: en iOS vh mide
         el viewport con la barra oculta y sobreestima el espacio real. */
      flex: 0 0 auto;
      width: auto;
      height: min(58dvh, calc(84vw * 1.8));
      max-height: 58vh;            /* respaldo si no hay soporte de dvh */
      aspect-ratio: 5 / 9;
      margin: 0 auto 12px;
      perspective: 900px;
      cursor: pointer;
    }
    .tarot-card-inner {
      width: 100%; height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.85s cubic-bezier(0.4,0,0.2,1);
    }
    .tarot-card-inner.flipped { transform: rotateY(180deg); }

    .tarot-face, .tarot-back {
      position: absolute; width: 100%; height: 100%;
      backface-visibility: hidden;
      border-radius: var(--bm-radius);
      overflow: hidden;
      border: 1px solid var(--bm-border);
    }

    /* Reverso */
    .tarot-back {
      background: #0d0d0d;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 3rem;
      color: var(--bm-red);
      animation: tarot-pulse-border 3s ease-in-out infinite;
    }
    @keyframes tarot-pulse-border {
      0%,100% { box-shadow: 0 0 0 0 rgba(139,0,0,0); }
      50%      { box-shadow: 0 0 0 3px rgba(139,0,0,0.5); }
    }
    .tarot-back-img {
      width: 100%; height: 100%;
      object-fit: contain;
      background: #0d0d0d;
      position: absolute; inset: 0;
    }
    .tarot-tap-hint {
      position: absolute;
      bottom: 12px;
      left: 0; right: 0;
      text-align: center;
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 3px;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
    }

    /* Cara: solo imagen */
    .tarot-face {
      background: #080808;
      transform: rotateY(180deg);
    }
    .tarot-face-img {
      width: 100%; height: 100%;
      /* contain, no cover: la ilustracion ES la carta y debe verse entera.
         Con cover se recortaba el borde inferior cuando la proporcion del
         archivo no coincidia con el marco 5:9. */
      object-fit: contain;
      display: block;
      background: #080808;
    }

    /* Mensaje */
    .tarot-mensaje {
      font-family: var(--bm-font-body);
      font-size: 0.95rem;
      color: var(--bm-gray-lt);
      text-align: center;
      line-height: 1.65;
      padding: 0 8px;
      flex: 1;
      opacity: 0;
      transition: opacity 0.6s ease 0.5s;
    }
    .tarot-mensaje.visible { opacity: 1; }

    /* Instrucción */
    .tarot-instruccion {
      font-family: var(--bm-font-body);
      font-size: 0.95rem;
      color: var(--bm-gray);
      text-align: center;
      margin-bottom: 6px;
      transition: opacity 0.4s;
    }
    /* !important: en desktop la animacion card-content-fade del slider termina
       con opacity:1 y fill-mode both, y una animacion gana a una regla normal.
       Sin esto el texto no desaparece al revelar la carta. */
    .tarot-instruccion.hidden {
      opacity: 0 !important;
      visibility: hidden;
      pointer-events: none;
    }

    /* =============================================
       CAPA 9: CARD 05 — OPINIÓN & DEBATE
       ============================================= */
    /* ── CARD 05: OPINIÓN & DEBATE ──────────────────── */
    .card-debate { justify-content: flex-start; }

    .debate-num { margin-bottom: 2px; }

    .debate-title {
      font-family: var(--bm-font-h1);
      font-weight: 400;
      font-size: 2.4rem;
      color: var(--bm-white);
      text-align: center;
      line-height: 1.1;
      margin: 0 0 4px;
      letter-spacing: 2px;
    }
    .debate-amp {
      color: var(--bm-red-light);
      font-style: normal;
    }
    .debate-subtitle {
      font-family: var(--bm-font-sub);
      font-size: 0.9rem;
      letter-spacing: 4px;
      color: var(--bm-gray);
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .debate-pregunta {
      font-family: var(--bm-font-h2);
      font-size: 1.35rem;
      color: var(--bm-white);
      text-align: center;
      line-height: 1.4;
      margin-bottom: 20px;
      padding: 0 4px;
    }

    /* Botones de voto */
    .vote-options {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 14px;
    }
    .debate-vote-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 10px 8px;
      border-radius: var(--bm-radius);
      transition: background var(--bm-transition);
    }
    .debate-vote-btn:hover { background: rgba(139,0,0,0.06); }

    .debate-vote-btn:first-child { z-index: 2; } /* VERDAD encima del overflow de HEREJIA */
    .debate-icon-wrap {
      width: min(160px, 42vw); /* respeta el ancho del dispositivo */
      height: min(160px, 42vw);
      border-radius: 50%;
      border: none;
      display: flex; align-items: center; justify-content: center;
      overflow: visible;
      font-size: 3rem;
      position: relative;
      transition: transform 0.3s ease;
    }
    .debate-icon-wrap img {
      width: 100%; height: 100%;
      object-fit: contain;
      border-radius: 50%;
      position: relative;
      z-index: 1;
      transition: filter 0.3s ease;
    }

    /* ① Hover: ember glow — luz solo en el núcleo del ícono */
    .debate-icon-wrap::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 55%; height: 55%;
      transform: translate(-50%, -50%) scale(0);
      border-radius: 50%;
      background: radial-gradient(circle at center,
        rgba(255, 80, 0, 0.55) 0%,
        rgba(200, 0, 0, 0.25) 45%,
        transparent 75%
      );
      transition: transform 0.35s ease, opacity 0.35s ease;
      opacity: 0;
      z-index: 2; /* encima del img para que el glow sea visible */
      pointer-events: none;
    }
    .debate-vote-btn:hover .debate-icon-wrap::before {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    .debate-vote-btn:hover .debate-icon-wrap img {
      filter: brightness(1.15);
    }
    .debate-vote-btn:hover .debate-icon-wrap {
      transform: scale(1.06);
    }

    /* ② Click: lightning core — destello que implota al centro */
    @keyframes lightning-core {
      0%   { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
      15%  { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
      50%  { transform: translate(-50%,-50%) scale(0.8); opacity: 0.9; }
      100% { transform: translate(-50%,-50%) scale(0);   opacity: 0; }
    }
    .debate-icon-wrap.shock::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 50%; height: 50%;
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(255, 230, 150, 0.95) 0%,
        rgba(255, 80, 0, 0.7)   35%,
        rgba(180, 0, 0, 0.3)    65%,
        transparent 85%
      );
      animation: lightning-core 0.55s ease-in forwards;
      pointer-events: none;
      z-index: 10;
    }

    /* Estado: votado */
    .debate-vote-btn.voted .debate-icon-wrap::before {
      transform: translate(-50%, -50%) scale(0.85);
      opacity: 0.7;
    }
    .debate-vote-btn.voted .debate-icon-wrap img {
      filter: brightness(1.2);
    }
    .debate-vote-btn.voted .debate-vote-label {
      color: var(--bm-red-light);
    }
    .debate-vote-btn.no-voted {
      opacity: 0.38;
      pointer-events: none;
    }
    /* Insignia "YA VOTASTE" en el botón elegido */
    .debate-vote-btn.voted::after {
      content: '✓ TU VOTO';
      display: block;
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 2px;
      color: var(--bm-red-light);
      margin-top: 2px;
    }

    .debate-vote-label {
      font-family: var(--bm-font-sub);
      font-size: 1.38rem;
      letter-spacing: 3px;
      color: var(--bm-white);
      text-transform: uppercase;
    }

    .debate-divider {
      width: 1px;
      height: 80px;
      background: var(--bm-border);
      flex-shrink: 0;
      margin: 0 8px;
    }

    .debate-cta {
      font-family: var(--bm-font-sub);
      font-size: 1.0rem;
      letter-spacing: 3px;
      color: var(--bm-gray);
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    /* Scoreboard de votos */
    .vote-scoreboard {
      padding: 12px 0 4px;
      text-align: center;
    }
    .scoreboard-title {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 4px;
      color: var(--bm-gray);
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .scoreboard-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .scoreboard-side {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    .scoreboard-num {
      font-family: var(--bm-font-head);
      font-size: 4.5rem;
      line-height: 1;
      letter-spacing: -1px;
    }
    .scoreboard-verdad  .scoreboard-num { color: var(--bm-red-light); }
    .scoreboard-heresia .scoreboard-num { color: rgba(200,200,200,0.7); }
    .scoreboard-side-label {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 3px;
      color: var(--bm-gray);
      margin-top: 2px;
    }
    .scoreboard-vs {
      font-family: var(--bm-font-head);
      font-size: 1.6rem;
      color: var(--bm-red);
      flex-shrink: 0;
    }
    .scoreboard-total {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 3px;
      color: var(--bm-gray);
      margin-top: 8px;
      text-transform: uppercase;
    }
    /* Barra de resultados — accordion */
    .vote-bar-wrap { margin-top: 8px; }
    .vote-results-accordion {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.55s ease, opacity 0.4s ease;
    }
    .vote-results-accordion.accordion-open {
      max-height: 240px;
      opacity: 1;
    }
    .vote-bar-label {
      display: flex; justify-content: space-between;
      font-family: var(--bm-font-sub);
      font-size: 0.88rem;
      letter-spacing: 2px; margin-bottom: 6px;
    }
    .vote-bar-label .verdad { color: var(--bm-red-light); }
    .vote-bar-label .heresy { color: var(--bm-gray); }
    .vote-bar { height: 5px; background: var(--bm-border); border-radius: 3px; overflow: hidden; }
    .vote-bar-fill { height: 100%; background: linear-gradient(90deg, var(--bm-red), var(--bm-red-light)); border-radius: 3px; transition: width 0.8s ease; }

    .debate-spacer { flex: 1; min-height: 8px; }

    /* Último resultado */
    .debate-prev-wrap {
      border-top: 1px solid var(--bm-border);
      padding-top: 10px;
      margin-top: 4px;
    }
    .prev-question {
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 3px;
      color: var(--bm-red-light);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .prev-title {
      font-family: var(--bm-font-body);
      font-size: 0.95rem;
      color: var(--bm-gray-lt);
      margin-bottom: 8px;
      line-height: 1.4;
    }

    /* =============================================
       CAPA 10: CARD 06 — BESTIARIO OSCURO
       ============================================= */
    .card-bestiario {
      display: flex;
      flex-direction: column;
      padding: clamp(16px,4%,28px);
    }
    .beast-top { display: flex; align-items: center; margin-bottom: 4px; }

    .beast-title {
      font-family: var(--bm-font-h1);
      font-weight: 400;
      font-size: 2.4rem;
      color: var(--bm-white);
      text-align: center;
      line-height: 1.05;
      margin: 0 0 4px;
      letter-spacing: 1px;
    }
    .beast-subtitle {
      font-family: var(--bm-font-sub);
      font-size: 0.9rem;
      letter-spacing: 4px;
      color: var(--bm-gray);
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    /* Imagen de la criatura */
    .beast-img {
      flex: 1;
      min-height: 0;
      padding-top: 24px;   /* separacion respecto al subtitulo */
      margin-bottom: 12px;
      position: relative;
      overflow: hidden;
    }
    .beast-img--placeholder {
      background: linear-gradient(180deg, #1a0000 0%, #0d0000 100%);
      display: flex; align-items: center; justify-content: center;
    }
    .beast-placeholder-icon {
      font-size: 3rem;
      color: rgba(139,0,0,0.5);
    }
    .beast-img-src {
      width: 100%; height: 100%;
      object-fit: contain;   /* imagen completa, sin recorte */
      object-position: center bottom;
      display: block;
    }

    /* Nombre de la criatura */
    .beast-name {
      font-family: var(--bm-font-h2);
      font-size: 1.15rem;
      letter-spacing: 2px;
      color: var(--bm-red-light);
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 10px;
    }

    /* Descripción */
    .beast-desc {
      font-family: var(--bm-font-body);
      font-size: 0.92rem;
      color: var(--bm-gray-lt);
      text-align: center;
      line-height: 1.6;
      margin-bottom: 12px;
    }

    /* =============================================
       CARD PUBLICIDAD — imagen full-bleed + social
       ============================================= */
    .card-publicidad {
      padding: 0 !important;
      position: relative;
      overflow: hidden;
      display: block;
    }
    /* El arte del patrocinador se muestra COMPLETO, nunca recortado.
       Llega hecho desde fuera y suele traer el telefono, la direccion y
       la fecha pegados al borde: con 'cover' eso se corta en cuanto la
       pantalla no coincide con la proporcion del flyer, y recortarle los
       datos a quien pago el espacio no es una opcion. */
    .card-publicidad .pub-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      /* El PHP pone el background-image en linea aqui, pero quien lo
         pinta son los dos pseudoelementos de abajo. Con tamano 0 el
         elemento no dibuja su propia copia; la imagen sigue estando
         en la propiedad, que es lo que los pseudos heredan. */
      background-size: 0 0;
      background-repeat: no-repeat;
    }
    /* Dos capas sobre la misma imagen, sin tocar el componente:
       ::before es el relleno desenfocado de las franjas y ::after el
       arte completo encima. El orden del DOM decide cual queda arriba,
       asi que no hace falta z-index — y de hecho no serviria: .pub-bg
       crea su propio contexto de apilado, y dentro de el un hijo con
       z-index negativo se pinta por ENCIMA del fondo del padre. */
    .card-publicidad .pub-bg::before,
    .card-publicidad .pub-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: inherit;
      background-position: center;
      background-repeat: no-repeat;
      pointer-events: none;
    }
    /* Relleno: copia ampliada y desenfocada */
    .card-publicidad .pub-bg::before {
      background-size: cover;
      filter: blur(30px) brightness(0.45) saturate(1.1);
      transform: scale(1.18);   /* tapa el borde claro que deja el blur */
    }
    /* Arte del patrocinador: completo, nitido, nunca recortado */
    .card-publicidad .pub-bg::after {
      background-size: contain;
    }
    .pub-bg--placeholder {
      background: linear-gradient(135deg, #1a0000 0%, #0d0d0d 100%);
    }
    .card-publicidad .pub-social {
      position: absolute;
      top: clamp(18px, 5%, 32px);   /* arriba: abajo queda el chevron */
      left: 0; right: 0;
      z-index: 3;
      display: flex;
      justify-content: center;
      gap: 14px;
    }
    /* Relleno solido desde el principio. Antes eran circulos negros al
       55% con un borde blanco tenue, y sobre una imagen de anuncio —que
       puede ser de cualquier color— apenas se distinguian. El relleno
       opaco funciona encima de cualquier fondo.
       Se fue tambien el backdrop-filter: estaba para dar cuerpo al
       circulo translucido y con relleno opaco no aporta nada, pero
       sigue costando lo mismo, que en un telefono no es poco. */
    .pub-social-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--bm-red);
      border: 1px solid var(--bm-red-light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bm-white);
      font-size: 1.3rem;
      transition: all 0.3s ease;
      box-shadow: 0 2px 10px rgba(0,0,0,0.55);
    }
    .pub-social-icon:hover {
      background: var(--bm-red-light);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(139,0,0,0.6);
    }

    /* Facebook con su azul de marca. Contraste del icono blanco sobre
       #1877F2: 3.72:1, por encima del 3:1 que piden los elementos no
       textuales. */
    .pub-social-icon--fb {
      background: #1877f2;
      border-color: #4a95f5;
    }
    .pub-social-icon--fb:hover {
      background: #4a95f5;
      box-shadow: 0 4px 16px rgba(24,119,242,0.6);
    }

    /* =============================================
       CAPA 11: CARD 07 — SÍMBOLO PROHIBIDO
       ============================================= */
    /* Zona bloqueable: simbolo + nombre + descripcion. Es la que enmarca al velo. */
    .symbol-zone {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column;
      position: relative;
      margin: 10px 0;
    }
    /* El simbolo tiene alto RESERVADO, no reparte espacio con el texto.
       Antes el wrap era flex:1 con min-height:0 y el mensaje tambien era
       flex:1, pero un bloque de texto no puede encogerse por debajo de su
       contenido y el wrap si: el texto se quedaba con todo el alto y la
       imagen con lo que sobrara — poco en desktop y literalmente CERO en
       movil, donde el simbolo desaparecia. */
    .symbol-wrap {
      flex: 0 0 auto;
      /* El alto se reparte distinto segun la pantalla. En el telefono la
         card ocupa toda la ventana pero el texto se compone en lineas mas
         cortas, asi que ocupa mas alto y al simbolo le toca menos; en
         desktop la card es mas estrecha que la ventana y sobra sitio.
         Estos numeros salen de medir el caso normal —un texto de dos
         parrafos— buscando que quepa entero sin desplazarse y sin rozar
         el boton. Subirlos devuelve el scroll. */
      height: clamp(120px, 17vh, 190px);
      display: flex; align-items: center; justify-content: center;
    }
    @media (min-width: 992px) {
      .symbol-wrap { height: clamp(150px, 20vh, 220px); }
    }
    .symbol-svg {
      width: min(140px, 60%); height: auto;
      animation: rotate-slow 20s linear infinite;
      filter: drop-shadow(0 0 8px var(--bm-red-glow));
    }
    @keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* PNG del simbolo (reemplaza al SVG cuando hay url_simbolo) */
    /* Se dimensiona por ALTURA, para llenar el alto reservado sea cual sea
       la proporcion del PNG; el ancho se deriva y solo se limita para que
       un simbolo apaisado no se coma la card. */
    /* Los !important son para ganarle a la regla global
         img { max-width:100% !important; height:auto !important }
       que esta mas abajo en esta hoja y se escribio para las imagenes
       del editor WYSIWYG, pero alcanza a TODAS las del sitio. Mientras
       esa regla no se acote al cuerpo del articulo, cualquier imagen que
       quiera dimensionarse por altura tiene que defenderse asi.
       PENDIENTE: acotarla a .bm-modal-article y quitar estos !important. */
    .symbol-img {
      height: 100% !important;
      width: auto !important;
      max-width: min(260px, 72%);
      object-fit: contain;
      display: block;
      margin: 0 auto;
      animation: symbol-reveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) both,
                 symbol-glow 3.2s ease-in-out 1.1s infinite;
    }
    /* Aparicion: emerge desde la oscuridad */
    @keyframes symbol-reveal {
      0%   { opacity: 0; transform: scale(0.82); filter: blur(6px) brightness(0.4); }
      60%  { opacity: 1; transform: scale(1.04); filter: blur(0)    brightness(1.3); }
      100% { opacity: 1; transform: scale(1);    filter: blur(0)    brightness(1); }
    }
    /* Glow rojo pulsante alrededor del PNG */
    @keyframes symbol-glow {
      0%, 100% { filter: drop-shadow(0 0 10px rgba(139,0,0,0.55))
                         drop-shadow(0 0 22px rgba(204,0,0,0.28)); }
      50%      { filter: drop-shadow(0 0 20px rgba(204,0,0,0.85))
                         drop-shadow(0 0 44px rgba(139,0,0,0.5)); }
    }
    .symbol-wrap:hover .symbol-img { transform: scale(1.05); transition: transform var(--bm-transition); }

    /* Nombre del simbolo: mas grande y separado de la imagen */
    .bm-card.card-simbolo .bm-card-label.symbol-name {
      font-size: clamp(1.5rem, 5.5vw, 2rem);
      letter-spacing: 3px;
      line-height: 1.2;
      padding-top: 14px;
      margin-bottom: 8px;
      flex: 0 0 auto;
    }
    /* El mensaje es lo unico que cede: se queda con el espacio que sobre y
       si no alcanza, se desplaza dentro de su caja en vez de desbordarse
       por encima del boton. Va al mismo cuerpo que el resto de las cards
       (12pt); el 14pt anterior lo hacia destacar sin motivo. */
    .bm-card.card-simbolo .bm-card-body {
      font-size: var(--bm-font-size-body);
      flex: 1 1 auto;
      min-height: 0;
      /* Aire antes del boton: aunque el texto no llegue a tocarlo, el
         desvanecido de abajo hacia que la ultima linea pareciera meterse
         debajo del boton. */
      margin-bottom: 10px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--bm-red-light) transparent;
      /* El texto largo se corta a media linea y eso se lee como un fallo.
         El desvanecido del borde inferior lo convierte en lo que es: hay
         mas abajo. Si el texto es corto, el degradado cae sobre espacio
         vacio y no se nota. */
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
              mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
    }
    /* Desde que este campo tiene editor, su contenido llega en <p>. Sin
       esto el margen que el navegador pone por defecto abriria un hueco
       antes del primer parrafo y otro bajo el ultimo. */
    .bm-card.card-simbolo .bm-card-body p { margin: 0 0 10px; }
    .bm-card.card-simbolo .bm-card-body p:last-child { margin-bottom: 0; }
    .bm-card.card-simbolo .bm-card-body ul,
    .bm-card.card-simbolo .bm-card-body ol { margin: 0 0 10px; padding-left: 1.2em; text-align: left; }
    /* Cita: filete rojo a la izquierda en vez de las comillas grandes del
       navegador, que en una caja estrecha se comen una linea entera. */
    .bm-card.card-simbolo .bm-card-body blockquote {
      margin: 0 0 10px;
      padding: 2px 0 2px 12px;
      border-left: 2px solid var(--bm-red-light);
      text-align: left;
      font-style: italic;
      color: var(--bm-gray-lt);
    }
    .bm-card.card-simbolo .bm-card-body blockquote p:last-child { margin-bottom: 0; }
    /* Divisoria: se desvanece hacia los bordes para no cortar la card en
       dos con una raya dura. */
    .bm-card.card-simbolo .bm-card-body hr {
      border: 0;
      height: 1px;
      margin: 14px auto;
      width: 70%;
      background: linear-gradient(to right, transparent, var(--bm-red-light), transparent);
      opacity: 0.6;
    }
    @media (prefers-reduced-motion: reduce) {
      .symbol-img { animation: none; filter: drop-shadow(0 0 14px rgba(139,0,0,0.6)); }
    }
    .locked-msg {
      position: absolute; inset: 0;
      background: rgba(10,10,10,0.85);
      display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
      border-radius: var(--bm-radius);
      backdrop-filter: blur(4px);
      transition: opacity var(--bm-transition);
    }
    .locked-msg.unlocked { opacity: 0; pointer-events: none; }
    .locked-msg i { font-size: 1.6rem; /* locked-msg icon */ color: var(--bm-red-light); }
    .locked-msg p { font-family: var(--bm-font-sub); font-size: 0.85rem; letter-spacing: 3px; color: var(--bm-gray); }

    /* =============================================
       CAPA 12: CARD 08 — ORÁCULO
       ============================================= */
    .oracle-ball {
      width: min(160px, 55%); aspect-ratio: 1;
      background: radial-gradient(circle at 35% 35%, #3d0000 0%, #1a0000 40%, #0a0000 100%);
      border-radius: 50%; margin: 0 auto 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 2.5rem; /* oracle ball */
      box-shadow: 0 0 40px rgba(139,0,0,0.3), inset 0 0 30px rgba(0,0,0,0.5);
      cursor: pointer; transition: all var(--bm-transition);
      border: 1px solid rgba(139,0,0,0.3);
    }
    .oracle-ball:hover { box-shadow: 0 0 60px rgba(139,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.5); }
    .oracle-ball.spinning { animation: spin-glow 0.5s ease; }
    @keyframes spin-glow {
      0%   { transform: scale(1); }
      50%  { transform: scale(0.92); box-shadow: 0 0 80px rgba(139,0,0,0.7); }
      100% { transform: scale(1); }
    }
    /* PNG de la esfera (reemplaza a .oracle-ball cuando hay url_esfera) */
    .oracle-visual { display: block; width: 100%; }
    .oracle-img {
      width: min(300px, 80%);
      aspect-ratio: 1;
      object-fit: contain;
      display: block;
      margin: 40px auto 20px;
      cursor: pointer;
      transition: transform var(--bm-transition), filter var(--bm-transition);
      animation: oracle-glow 3.4s ease-in-out infinite;
    }
    .oracle-img:hover { transform: scale(1.05); }
    .oracle-img.spinning { animation: oracle-consult 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes oracle-glow {
      0%, 100% { filter: drop-shadow(0 0 12px rgba(139,0,0,0.5)); }
      50%      { filter: drop-shadow(0 0 26px rgba(204,0,0,0.75)); }
    }
    @keyframes oracle-consult {
      0%   { transform: scale(1);    filter: drop-shadow(0 0 12px rgba(139,0,0,0.5)); }
      30%  { transform: scale(0.90); filter: drop-shadow(0 0 46px rgba(204,0,0,0.95)) brightness(1.45); }
      65%  { transform: scale(1.08); filter: drop-shadow(0 0 34px rgba(204,0,0,0.8))  brightness(1.2); }
      100% { transform: scale(1);    filter: drop-shadow(0 0 12px rgba(139,0,0,0.5)); }
    }
    @media (prefers-reduced-motion: reduce) {
      .oracle-img { animation: none; filter: drop-shadow(0 0 16px rgba(139,0,0,0.6)); }
    }
    .oracle-text {
      font-family: var(--bm-font-body);
      font-size: 13pt; /* oracle text */
      color: var(--bm-gray-lt); font-style: italic;
      text-align: center; line-height: 1.6;
      flex: 1; display: flex; align-items: center; justify-content: center;
      transition: opacity 0.3s ease;
    }
    .oracle-text.fade { opacity: 0; }

    /* =============================================
       CAPA 13: CARD 09 — PLAYLIST
       ============================================= */
    /* Cover con animación NOW PLAYING — sin fondo ni borde */
    .playlist-cover {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 14px;
      padding: 20px 0;
      margin: 8px 0;
    }
    .playlist-title-inner {
      font-family: var(--bm-font-head);
      font-size: 1.5rem;
      letter-spacing: 4px;
      text-align: center;
      color: var(--bm-white);
    }
    /* Barras del ecualizador — más grandes */
    .spotify-bar {
      display: flex;
      align-items: flex-end;
      gap: 5px;
      height: 56px;
    }
    .spotify-bar span {
      display: inline-block;
      width: 6px;
      background: #1DB954;
      border-radius: 3px;
      animation: eq var(--d,0.5s) ease-in-out infinite alternate;
    }
    @keyframes eq { from { height: 8px; } to { height: var(--h,40px); } }

    /* Botón "Escuchar en Spotify" */
    .playlist-spotify-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 14px;
      margin-top: 12px;
      background: #1DB954;
      color: #fff;
      font-family: var(--bm-font-h2);
      font-size: 0.9rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      border-radius: 30px;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    .playlist-spotify-btn:hover {
      background: #1ed760;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(29,185,84,0.4);
      color: #fff;
    }
    .playlist-spotify-btn i { font-size: 1.3rem; }

    /* =============================================
       CAPA 14: MODAL LIGHTBOX
       ============================================= */
    .bm-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.92);
      z-index: 2000;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
      backdrop-filter: blur(6px);
    }
    .bm-modal-overlay.open { opacity: 1; pointer-events: all; }
    .bm-modal {
      background: var(--bm-card);
      border: 1px solid var(--bm-border);
      border-radius: var(--bm-radius);
      width: 100%; max-width: 900px;
      max-height: 85vh;
      overflow-y: auto;
      position: relative;
      transform: translateY(20px);
      transition: transform 0.3s ease;
      scrollbar-width: thin;
      scrollbar-color: var(--bm-red) var(--bm-dark);
    }
    .bm-modal::-webkit-scrollbar { width: 4px; }
    .bm-modal::-webkit-scrollbar-track { background: var(--bm-dark); }
    .bm-modal::-webkit-scrollbar-thumb { background: var(--bm-red); border-radius: 2px; }
    .bm-modal-overlay.open .bm-modal { transform: translateY(0); }

    /* Móvil: modal a pantalla completa + scrollbar más visible */
    @media (max-width: 991px) {
      .bm-modal-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
      }
      .bm-modal {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        height: 100svh;
        border: none;
        border-radius: 0;
        scrollbar-width: auto;                 /* Firefox: barra normal */
        scrollbar-color: var(--bm-red-light) var(--bm-dark);
      }
      .bm-modal::-webkit-scrollbar { width: 10px; }  /* más ancha en móvil */
      .bm-modal::-webkit-scrollbar-track {
        background: var(--bm-dark);
      }
      .bm-modal::-webkit-scrollbar-thumb {
        background: var(--bm-red-light);
        border-radius: 5px;
        border: 2px solid var(--bm-dark);      /* separación visual */
      }
    }
    .bm-modal-header {
      padding: 20px 24px 16px;
      position: sticky; top: 0;
      background: var(--bm-card);
      z-index: 1; border-bottom: 1px solid var(--bm-border);
    }
    /* 44 px es el minimo recomendado para un objetivo tactil (Apple pide
       44, Material 48 dp). Estaba en 32, y ademas gris sobre gris: ni se
       podia acertar ni se veia. Ahora es rojo macizo. */
    .bm-modal-close {
      position: absolute; top: 14px; right: 14px;
      background: var(--bm-red); border: 1px solid var(--bm-red-light);
      color: var(--bm-white); width: 44px; height: 44px;
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all var(--bm-transition); font-size: 1.35rem;
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
      z-index: 3;
    }
    .bm-modal-close:hover { background: var(--bm-red-light); transform: scale(1.08); }

    @media (max-width: 991px) {
      /* El boton de cierre, ya de 44 px, ocupa hasta 58 px desde el borde
         derecho. El titular se apartaba 52 (24 de aqui mas 28 que trae en
         linea desde modales.php), asi que una linea que llenase el ancho
         se le metia debajo. Se aparta a los dos lados para que el titulo
         siga centrado. */
      .bm-modal-header { padding-left: 34px; padding-right: 34px; }
    }
    .bm-modal-body { padding: 24px; }
    .bm-modal-hero {
      width: 100%; height: 200px;
      background: linear-gradient(135deg, #1a0000, #0d0d0d);
      border-radius: var(--bm-radius); margin-bottom: 20px;
      display: flex; align-items: center; justify-content: center;
      font-size: 4rem; border: 1px solid var(--bm-border);
    }
    .bm-modal-img-wrap {
      width: 100%;
      border-radius: var(--bm-radius);
      margin-bottom: 20px;
      overflow: hidden;
      border: 1px solid var(--bm-border);
    }
    .bm-modal-img {
      width: 100%;
      display: block;
      object-fit: cover;
      max-height: 320px;
    }
    /* ── Cuerpo del articulo ─────────────────────────────────
       Aqui entra HTML escrito por los editores, asi que todo lo
       que pueda llegar tiene que estar contemplado. Lo critico:
       nada puede ser mas ancho que la columna. Una palabra sin
       espacios, una URL pegada o una imagen con width="737" en
       el atributo sacarian la barra de scroll horizontal. */
    .bm-modal-article {
      overflow-wrap: break-word;   /* parte palabras larguisimas */
      word-break: break-word;      /* respaldo para WebKit viejo */
      /* Sin hyphens: el texto va alineado a la izquierda, y el guionado
         en texto no justificado corta la lectura sin ganar nada. Lo que
         contiene las cadenas sin espacios es overflow-wrap, no esto. */
    }
    .bm-modal-article p { font-size: var(--bm-font-size-body); color: var(--bm-gray-lt); line-height: 1.8; margin-bottom: 14px; }
    .bm-modal-article h4 { font-family: var(--bm-font-sub); font-size: 0.95rem; letter-spacing: 2px; color: var(--bm-red-light); margin-bottom: 8px; }

    /* El atributo width del editor manda sobre el ancho natural,
       pero no sobre max-width: por eso la imagen de 761px cabe */
    .bm-modal-article img,
    .bm-modal-article video,
    .bm-modal-article iframe,
    .bm-modal-article table {
      max-width: 100%;
    }
    .bm-modal-article img,
    .bm-modal-article video {
      height: auto;                /* conserva la proporcion al encoger */
      display: block;
      border-radius: 4px;
    }
    /* Un iframe pegado del editor suele venir sin medidas y el
       navegador le pone 300x150. Se fuerza al ancho de la columna
       en formato 16:9, que es lo que devuelven YouTube y Vimeo. */
    .bm-modal-article iframe {
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      border: 0;
      display: block;
      margin: 18px auto;
      background: #000;
      border-radius: 4px;
    }
    /* Centrado: el editor lo aplica al parrafo, no a la imagen */
    .bm-modal-article p[style*="center"] img { margin-left: auto; margin-right: auto; }

    /* Encabezados dentro del articulo. Sin esto quedaban con el
       tamano por omision del navegador, que no corresponde con
       nada del resto de la revista. */
    .bm-modal-article h1,
    .bm-modal-article h2,
    .bm-modal-article h3 {
      font-family: var(--bm-font-h2);
      color: var(--bm-white);
      line-height: 1.25;
      margin: 28px 0 12px;
      text-wrap: balance;
    }
    .bm-modal-article h1 { font-family: var(--bm-font-h1); font-size: 1.9rem; }
    /* Jerarquia por color: rojo para el H2, naranja para el H3. Asi el
       lector distingue el nivel de un vistazo, sin depender solo del
       tamano, que en movil queda muy parecido entre uno y otro. */
    .bm-modal-article h2 { font-size: 1.45rem; color: var(--bm-red-titulo); }
    .bm-modal-article h3 {
      font-size: 1.15rem;
      color: var(--bm-orange);
      letter-spacing: 0.3px;
    }
    .bm-modal-article > :first-child { margin-top: 0; }

    .bm-modal-article ul,
    .bm-modal-article ol { margin: 0 0 16px 22px; color: var(--bm-gray-lt); }
    .bm-modal-article li { margin-bottom: 6px; line-height: 1.7; }

    .bm-modal-article blockquote {
      border-left: 3px solid var(--bm-red);
      padding: 4px 0 4px 16px;
      margin: 20px 0;
      color: var(--bm-white);
      font-style: italic;
    }
    .bm-modal-article hr {
      border: 0;
      border-top: 1px solid var(--bm-border);
      margin: 26px 0;
    }
    .bm-modal-article a { text-decoration: underline; text-underline-offset: 2px; }
    .bm-modal-article strong { color: var(--bm-white); }

    /* ...pero no dentro de un encabezado. El editor que pone en negrita
       un titulo acaba con <h3><strong>texto</strong></h3>, y entonces el
       texto visible pertenece al <strong>: su color propio le gana al
       naranja que el h3 solo le pasaba por herencia, y el titular salia
       blanco. Heredar es lo correcto: la negrita dentro de un titulo no
       es un enfasis dentro del parrafo, es el titulo entero. */
    .bm-modal-article h1 strong, .bm-modal-article h1 b,
    .bm-modal-article h2 strong, .bm-modal-article h2 b,
    .bm-modal-article h3 strong, .bm-modal-article h3 b,
    .bm-modal-article h4 strong, .bm-modal-article h4 b {
      color: inherit;
    }

    /* Tampoco cuando el editor le ha puesto un color a mano. TinyMCE
       envuelve el texto coloreado en <span style="color:…"> y la negrita
       queda dentro; el blanco de arriba le ganaba al color elegido,
       porque al <strong> solo le llegaba por herencia. El selector mira
       el atributo style del span, que es el unico sitio donde consta que
       hubo una eleccion deliberada. */
    .bm-modal-article span[style*="color"] strong,
    .bm-modal-article span[style*="color"] b {
      color: inherit;
    }

    /* Ultimo seguro: si algo se desborda pese a todo lo anterior,
       se recorta en lugar de empujar la barra horizontal */
    .bm-modal-body { overflow-x: hidden; }

    /* =============================================
       TIPO 19 — PLAYLIST
       Reproductor propio dentro de la card, sin modal.
       ============================================= */
    .card-tracks .tk-descripcion {
      font-size: 0.92rem; color: var(--bm-gray-lt); line-height: 1.6;
      text-align: center; margin: 0 0 18px; padding: 0 14px;
    }
    .tk-player { width: 100%; max-width: 30rem; margin: 0 auto; }

    .tk-lista { list-style: none; margin: 0 0 18px; padding: 0; }
    .tk-pista { border-bottom: 1px solid var(--bm-border); }
    .tk-pista:last-child { border-bottom: none; }

    /* La fila entera es el boton: en un telefono, un area de toque
       grande vale mas que un icono bonito y pequeno. */
    .tk-fila {
      width: 100%; min-height: 52px;
      display: flex; align-items: center; gap: 12px;
      padding: 10px 6px; background: none; border: none;
      color: inherit; text-align: left; cursor: pointer;
      font-family: inherit; transition: background 0.18s ease;
      border-radius: 4px;
    }
    .tk-fila:hover { background: rgba(255,255,255,0.05); }
    .tk-pista.sonando .tk-fila { background: rgba(139,0,0,0.18); }

    .tk-indice {
      font-family: var(--bm-font-sub); font-size: 0.78rem;
      color: var(--bm-gray); letter-spacing: 1px;
      min-width: 20px; flex-shrink: 0;
    }
    .tk-pista.sonando .tk-indice { color: var(--bm-red-light); }

    .tk-icono {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.08); color: var(--bm-white);
      font-size: 0.95rem; transition: background 0.18s ease;
    }
    .tk-pista.sonando .tk-icono { background: var(--bm-red); }

    .tk-nombres {
      flex: 1 1 auto; min-width: 0;
      display: flex; flex-direction: column; gap: 1px;
    }
    .tk-artista {
      font-family: var(--bm-font-sub); font-size: 0.86rem; letter-spacing: 1px;
      color: var(--bm-white); text-transform: uppercase;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tk-titulo {
      font-size: 0.8rem; color: var(--bm-gray-lt);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tk-dur {
      flex-shrink: 0; font-family: var(--bm-font-sub);
      font-size: 0.74rem; color: var(--bm-gray); letter-spacing: 0.5px;
    }

    /* ── Barra de control ─────────────────────────────────── */
    .tk-barra {
      background: rgba(0,0,0,0.45);
      border: 1px solid var(--bm-border); border-radius: 8px;
      padding: 12px 14px 10px;
      backdrop-filter: blur(6px);
    }
    .tk-barra[hidden] { display: none; }
    .tk-ahora {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 10px; margin-bottom: 8px;
    }
    .tk-ahora-nombre {
      flex: 1 1 auto; min-width: 0;
      font-family: var(--bm-font-sub); font-size: 0.78rem; letter-spacing: 1px;
      color: var(--bm-white); text-transform: uppercase;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tk-tiempo {
      flex-shrink: 0; font-family: var(--bm-font-sub);
      font-size: 0.72rem; color: var(--bm-gray); letter-spacing: 0.5px;
    }

    /* 16px de alto para poder arrastrarla con el dedo; la linea
       visible es de 4px y el resto es area de toque. */
    .tk-progreso {
      position: relative; height: 16px; cursor: pointer;
      display: flex; align-items: center; margin-bottom: 6px;
    }
    .tk-progreso::before {
      content: ''; position: absolute; left: 0; right: 0; height: 4px;
      background: rgba(255,255,255,0.14); border-radius: 2px;
    }
    .tk-progreso-relleno {
      position: relative; height: 4px; width: 0;
      background: var(--bm-red-light); border-radius: 2px;
      transition: width 0.1s linear;
    }
    .tk-progreso:focus-visible { outline: 2px solid var(--bm-red-light); outline-offset: 3px; }

    .tk-controles { display: flex; align-items: center; justify-content: center; gap: 18px; }
    .tk-ctrl {
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; color: var(--bm-white);
      font-size: 1.4rem; cursor: pointer; transition: color 0.18s ease;
    }
    .tk-ctrl:hover { color: var(--bm-red-light); }
    .tk-pp {
      background: var(--bm-red); font-size: 1.5rem;
      width: 52px; height: 52px;
    }
    .tk-pp:hover { background: var(--bm-red-light); color: #fff; }

    /* =============================================
       TIPO 21 — AGENDA DE CONCIERTOS
       La misma lista sirve en la card y en el modal; cambia el
       espaciado y el modal agrega el boton de boletos.
       ============================================= */
    .card-agenda .ag-descripcion {
      font-size: 0.9rem; color: var(--bm-gray-lt); line-height: 1.6;
      text-align: center; margin: 0 0 16px; padding: 0 14px;
    }

    .ag-lista { list-style: none; margin: 0 auto 14px; padding: 0; width: 100%; max-width: 30rem; }
    .ag-fecha {
      display: flex; align-items: center; gap: 14px;
      padding: 10px 4px;
      border-bottom: 1px solid var(--bm-border);
    }
    .ag-fecha:last-child { border-bottom: none; }

    /* Bloque del dia: el numero grande es el ancla visual de una
       agenda; se lee antes que el nombre de la banda. */
    .ag-dia {
      flex-shrink: 0; width: 46px; text-align: center;
      display: flex; flex-direction: column; line-height: 1;
    }
    .ag-dia-num {
      font-family: var(--bm-font-head); font-size: 1.75rem;
      color: var(--bm-red-light); letter-spacing: 1px;
    }
    .ag-dia-mes {
      font-family: var(--bm-font-sub); font-size: 0.62rem;
      letter-spacing: 2px; color: var(--bm-gray); margin-top: 2px;
    }

    .ag-datos {
      flex: 1 1 auto; min-width: 0;
      display: flex; flex-direction: column; gap: 2px;
    }
    .ag-bandas {
      font-family: var(--bm-font-sub); font-size: 0.88rem; letter-spacing: 0.8px;
      color: var(--bm-white); text-transform: uppercase; line-height: 1.25;
    }
    .ag-lugar {
      font-size: 0.78rem; color: var(--bm-gray-lt); line-height: 1.3;
    }

    /* Un concierto que ya paso no se oculta: la edicion es un numero
       cerrado y debe seguir mostrando lo que publico. Se atenua para
       que no compita con lo que todavia se puede ver. */
    .ag-fecha--pasado { opacity: 0.4; }
    /* Sin fecha confirmada: el dia va en gris, para que no compita con
       los conciertos que si tienen dia. */
    .ag-fecha--sinfecha .ag-dia-num { color: var(--bm-gray); font-size: 1.3rem; }
    .ag-fecha--sinfecha .ag-dia-mes { letter-spacing: 1px; }
    .ag-fecha--pasado .ag-dia-num { color: var(--bm-gray); }
    .ag-ya {
      flex-shrink: 0; font-family: var(--bm-font-sub);
      font-size: 0.62rem; letter-spacing: 1.5px; color: var(--bm-gray);
      border: 1px solid var(--bm-border); border-radius: 3px; padding: 3px 7px;
    }

    .card-agenda .ag-mas {
      font-family: var(--bm-font-body); font-size: 0.8rem;
      color: var(--bm-gray); text-align: center; margin: 0 0 16px;
    }

    /* ── Dentro del modal ─────────────────────────────────── */
    .ag-lista--modal { max-width: none; margin-bottom: 0; }
    .ag-lista--modal .ag-fecha { padding: 13px 2px; }
    /* 44px: lo minimo para acertar con el pulgar */
    .ag-boletos {
      flex-shrink: 0;
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--bm-red); color: #fff; font-size: 1.1rem;
      text-decoration: none; transition: background 0.2s ease, transform 0.15s ease;
    }
    .ag-boletos:hover { background: var(--bm-red-light); transform: scale(1.06); color: #fff; }

    /* =============================================
       TIPO 20 — BLACK STORE
       ============================================= */
    .card-store .st-content {
      position: relative; z-index: 3;
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-start;
      height: 100%; width: 100%;
      /* La card se dimensiona con min-height, no con height: sin esta
         linea el 100% de arriba resuelve a 'auto' y el contenido se
         apelotona arriba en lugar de llegar al pie. */
      min-height: inherit;
      padding: clamp(44px,6%,58px) clamp(18px,6%,44px) clamp(16px,4%,28px);
      text-align: center;
    }
    /* La fila superior necesita el ancho completo: .ca-num va posicionado
       a la izquierda dentro de ella, y si .ca-top se encoge al tamano de
       su texto el numero termina encima de la seccion. */
    .card-store .ca-top { width: 100%; }
    .card-store .st-titulo {
      font-family: var(--bm-font-h1); font-weight: 400;
      font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.05;
      color: var(--bm-white);
      /* El 'auto' de arriba empuja el titulo y todo lo que le sigue al
         pie de la card. Va en el atajo y no en una regla aparte: un
         'margin' posterior lo reseteaba a cero. */
      margin: auto 0 14px;
      text-shadow: 0 2px 18px rgba(0,0,0,0.85);
      text-wrap: balance;
    }
    .card-store .st-texto {
      font-size: 0.95rem; line-height: 1.6; color: var(--bm-gray-lt);
      margin: 0 0 22px; max-width: 34rem;
      text-shadow: 0 1px 10px rgba(0,0,0,0.9);
    }
    .bm-modal-tag {
      display: inline-block;
      background: rgba(139,0,0,0.2); border: 1px solid var(--bm-red);
      color: var(--bm-red-light); font-family: var(--bm-font-sub);
      font-size: 0.8rem; letter-spacing: 2px;
      padding: 4px 10px; border-radius: 2px; margin: 2px;
    }

    /* =============================================
       CAPA 15: FOOTER
       - Móvil: estático, fluye con el documento
       - Desktop: estático también
       ============================================= */
    /* Footer con enlace a hemeroteca */
    .bm-footer {
      padding: 24px 20px 40px;
      text-align: center;
      background: var(--bm-black);
      border-top: 1px solid var(--bm-border);
    }
    .bm-footer-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--bm-gray);
      text-decoration: none;
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      transition: color 0.25s ease;
      padding: 10px 20px;
      border: 1px solid var(--bm-border);
      border-radius: 30px;
    }
    .bm-footer-link:hover {
      color: var(--bm-red-light);
      border-color: var(--bm-red);
    }
    /* En desktop (slider Cover Flow) el footer se oculta */
    @media (min-width: 992px) {
      .bm-footer { display: none; }
    }

    .bm-footer-bar {
      background: var(--bm-black);
      border-top: 1px solid var(--bm-border);
      padding: 12px 20px;
      display: flex; align-items: center;
      justify-content: space-between;
      flex-wrap: wrap; gap: 8px;
      /* Sin position sticky — fluye con el documento */
    }
    .bm-footer-actions { display: flex; gap: 16px; }
    .bm-footer-action {
      display: flex; flex-direction: column; align-items: center;
      font-family: var(--bm-font-sub); font-size: 0.8rem;
      letter-spacing: 1px; color: var(--bm-gray);
      cursor: pointer; transition: color var(--bm-transition); gap: 2px;
    }
    .bm-footer-action i { font-size: 1rem; }
    .bm-footer-action:hover { color: var(--bm-red-light); }
    .bm-footer-social { display: flex; gap: 12px; align-items: center; }
    .bm-footer-social a { color: var(--bm-gray); font-size: 1rem; transition: color var(--bm-transition); }
    .bm-footer-social a:hover { color: var(--bm-red-light); }

    /* =============================================
       CAPA 16: PANEL ADMIN
       Accesible solo via ?admin=true en la URL.
       En producción: reemplazar por autenticación real.
       ============================================= */
    .bm-admin-panel {
      position: fixed; top: 0; right: -340px;
      width: 320px; height: 100vh;
      background: var(--bm-dark);
      border-left: 1px solid var(--bm-border);
      z-index: 1600; transition: right 0.4s ease;
      overflow-y: auto; padding: 20px;
    }
    .bm-admin-panel.open { right: 0; }
    .bm-admin-title { font-family: var(--bm-font-head); font-size: 1.4rem; color: var(--bm-red-light); letter-spacing: 2px; margin-bottom: 4px; }
    .bm-admin-sub { font-size: 0.8rem; color: var(--bm-gray); margin-bottom: 20px; font-family: var(--bm-font-sub); letter-spacing: 2px; }
    .admin-card-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--bm-border); gap: 12px; }
    .admin-card-info { flex: 1; }
    .admin-card-num { font-family: var(--bm-font-sub); font-size: 0.8rem; color: var(--bm-gray); letter-spacing: 2px; }
    .admin-card-name { font-size: 0.82rem; color: var(--bm-white); font-family: var(--bm-font-sub); }
    .form-check-input:checked { background-color: var(--bm-red); border-color: var(--bm-red); }
    .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(139,0,0,0.4); }
    .admin-editor-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bm-border); }
    .admin-editor-title { font-family: var(--bm-font-sub); font-size: 0.8rem; letter-spacing: 3px; color: var(--bm-red-light); text-transform: uppercase; margin-bottom: 12px; }
    .admin-editor-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bm-border); font-size: 0.8rem; color: var(--bm-gray-lt); }
    .admin-editor-item i { color: var(--bm-red-light); }
    .bm-admin-close { background: none; border: 1px solid var(--bm-border); color: var(--bm-gray); padding: 8px 16px; cursor: pointer; font-family: var(--bm-font-sub); font-size: 0.8rem; letter-spacing: 2px; margin-top: 16px; width: 100%; transition: all var(--bm-transition); border-radius: 2px; }
    .bm-admin-close:hover { border-color: var(--bm-red); color: var(--bm-red-light); }

    /* Card oculta por admin */
    .bm-card-hidden { display: none !important; }

    /* =============================================
       CAPA 18: CARD_ARTICULO — Template reutilizable
       Usar como base para cualquier card de artículo.
       Duplicar el HTML y cambiar: imagen, num, sección,
       título, descripción, subtítulo y modal target.
       ============================================= */

    /* =============================================
       CAPA 15b: BACKGROUND UNIVERSAL (ca-bg / ca-overlay)
       Aplica a cualquier .bm-card que tenga estos elementos
       ============================================= */

    /* Imagen de fondo — global, funciona en cualquier card */
    .ca-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transform: scale(1.02);
      transition: transform 8s ease;
      z-index: 0;
    }
    /* card-articulo: hover parallax en la imagen */
    .card-articulo:hover .ca-bg { transform: scale(1.06); }

    /* ── CARD ARTÍCULO ESTÁNDAR ─────────────────────────── */
    .card-articulo {
      padding: 0;
      position: relative;   /* referencia para top% de la imagen frontal */
    }
    .ca-bg--placeholder {
      background: radial-gradient(ellipse at 50% 60%, #3d0000 0%, #1a0000 50%, #0a0000 100%);
    }

    /* Overlay degradado */
    .ca-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      /* El velo oscurece arriba y abajo —donde van el titulo y el
         boton— y se abre del todo en el centro: de 45% a 62% el alfa
         es 0 y la ilustracion se ve a plena intensidad.
         Son dos paradas a 0 y no una: con un solo punto transparente
         el claro queda como un destello estrecho, porque el degradado
         empieza a oscurecer de inmediato a ambos lados. */
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.45) 30%,
        rgba(0,0,0,0)    45%,
        rgba(0,0,0,0)    62%,
        rgba(0,0,0,0.65) 80%,
        rgba(0,0,0,0.95) 100%
      );
    }

    /* Velo suave: para las cards de articulo con los textos ocultos,
       cuando el diseño ya viene entero en la imagen de fondo. Se quita
       el oscurecido de arriba —estaba para que se leyera el titular, y
       ya no hay titular— y se conserva algo abajo, donde sigue el
       boton. Mismo criterio que .hero-overlay--suave en la portada. */
    .ca-overlay--suave {
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.30) 0%,
        rgba(0,0,0,0)    22%,
        rgba(0,0,0,0)    68%,
        rgba(0,0,0,0.55) 88%,
        rgba(0,0,0,0.80) 100%
      );
    }

    /* ③ Imagen frontal — capa estática anclada abajo, idéntica en todos los viewports */
    /* ③ Imagen frontal — cubre la card igual que el fondo, imagen centrada */
    .ca-frontal-wrap {
      position: absolute;
      inset: 0;                    /* mismo marco que ca-bg — referencia idéntica */
      z-index: 2;
      pointer-events: none;
      padding: 14% clamp(20px, 6%, 48px);
      display: flex;
      justify-content: center;
      align-items: center;         /* centrado vertical dentro de la card */
    }
    .ca-frontal-img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 6px 24px rgba(0,0,0,0.75));
      /* El parallax escribe --px / --py desde JS. En reposo valen 0,
         asi que sin JS la imagen se queda exactamente donde estaba.
         Transform 2D y sin will-change a proposito: translate3d o
         will-change promoverian cada imagen a su propia capa de
         composicion de forma permanente, y con veinte cards a
         pantalla completa eso es mucha memoria de video en un
         telefono. El navegador ya compone solo mientras se mueve.
         Se aplica aqui y no en .ca-frontal-wrap porque el wrap es
         hijo directo de la card y lo alcanza la animacion del
         slider, que al llevar fill-mode 'both' gana a cualquier
         transform que pusieramos desde JS. */
      transform: translate(var(--px, 0px), var(--py, 0px));
    }

    /* =============================================
       CAPA 15c: ENTRADA ESCALONADA DEL CONTENIDO
       Los hijos de .ca-content aparecen en cascada en lugar de
       hacerlo en bloque. Se dispara con .slide-active en desktop
       y con .card-en-vista (la pone app.js) en movil.
       ============================================= */

    @keyframes bm-reveal-up {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .bm-card.slide-active  .ca-content > *:not(.ca-spacer):not(.hidden),
    .bm-card.card-en-vista .ca-content > *:not(.ca-spacer):not(.hidden) {
      animation: bm-reveal-up 0.55s cubic-bezier(0.22, 0.75, 0.3, 1) both;
    }

    /* La cascada. Los retrasos crecen de a 90 ms: lo bastante para
       percibir el orden, no tanto como para hacer esperar. */
    .bm-card.slide-active  .ca-content > *:nth-child(1),
    .bm-card.card-en-vista .ca-content > *:nth-child(1) { animation-delay: 0.05s; }
    .bm-card.slide-active  .ca-content > *:nth-child(2),
    .bm-card.card-en-vista .ca-content > *:nth-child(2) { animation-delay: 0.14s; }
    .bm-card.slide-active  .ca-content > *:nth-child(3),
    .bm-card.card-en-vista .ca-content > *:nth-child(3) { animation-delay: 0.23s; }
    .bm-card.slide-active  .ca-content > *:nth-child(4),
    .bm-card.card-en-vista .ca-content > *:nth-child(4) { animation-delay: 0.32s; }
    .bm-card.slide-active  .ca-content > *:nth-child(5),
    .bm-card.card-en-vista .ca-content > *:nth-child(5) { animation-delay: 0.41s; }
    .bm-card.slide-active  .ca-content > *:nth-child(n+6),
    .bm-card.card-en-vista .ca-content > *:nth-child(n+6) { animation-delay: 0.5s; }

    /* Respeto al ajuste de movimiento reducido: hay lectores a
       quienes el movimiento les provoca mareo o migrana. Para ellos
       no hay parallax ni cascada, pero el contenido se ve igual
       (nunca queda en opacity 0). */
    @media (prefers-reduced-motion: reduce) {
      .ca-frontal-img {
        transform: none;
      }
      .bm-card.slide-active  .ca-content > *,
      .bm-card.card-en-vista .ca-content > * {
        animation: none;
        opacity: 1;
        transform: none;
      }
    }

    /* Contenido */
    .ca-content {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      /* Top 50px para separar sección del borde superior */
      padding: clamp(44px,6%,58px) clamp(16px,6%,32px) clamp(16px,4%,28px);
      min-height: inherit;
    }

    /* Fila superior: num + sección */
    /* ca-top: num a la izquierda, sección centrada absoluta */
    .ca-top {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
    }
    .ca-num {
      position: absolute;
      left: 0;
      font-family: var(--bm-font-head);
      font-size: 2.2rem; /* ca-num */
      color: rgba(255,255,255,0.55);
      line-height: 1;
      letter-spacing: 1px;
    }
    .ca-section {
      font-family: var(--bm-font-sub);
      font-size: 0.9rem; /* ca-section */
      letter-spacing: 5px;
      color: var(--bm-red-light);
      text-transform: uppercase;
      text-align: center;                        /* ② Centrado */
      font-weight: 400;
    }

    /* Título H1 — Metal Mania */
    .ca-title {
      font-family: var(--bm-font-h1);
      font-weight: 400;
      font-size: 1.85rem;
      line-height: 1.2; /* ca-title */                         /* ⑥ Interlineado amplio */
      color: var(--bm-white);
      text-align: center;
      margin-bottom: clamp(12px,3%,20px);
      text-shadow: 0 2px 20px rgba(0,0,0,0.9);
    }

    /* Resumen — Roboto */
    .ca-resumen {
      font-family: var(--bm-font-body);
      font-size: 0.88rem; /* ca-resumen */
      color: rgba(220,220,220,0.9);
      text-align: center;
      line-height: 1.7;
      margin-bottom: clamp(10px,2%,16px);
    }

    /* Subtítulo destacado — Bree Serif, mayúsculas */
    .ca-subtitulo {
      font-family: var(--bm-font-h2);
      font-size: 0.92rem;
      letter-spacing: 2px; /* ca-subtitulo */
      color: var(--bm-white);
      text-align: center;
      text-transform: uppercase;
      line-height: 1.6;
      text-shadow: 0 1px 10px rgba(0,0,0,0.9);
      margin-bottom: 4px;
    }

    .ca-spacer { flex: 1; min-height: 20px; }

    /* Botón con PNG */
    .ca-btn-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 4px;
    }
    /* Cuando el boton es un enlace de verdad (ver render_boton_png con
       $href) hace falta esto: un <a> es inline, asi que ignoraria el
       width:100% de .bm-btn y el texto no quedaria centrado. */
    a.bm-btn, a.ca-btn-png { display: block; text-align: center; }

    .ca-btn-png {
      position: relative;
      background: none;
      border: none;
      cursor: pointer;
      width: 100%;
      max-width: 320px;
      padding: 0;
      transition: transform 0.25s ease;
    }
    .ca-btn-img {
      width: 100%;
      display: block;
      animation: ca-btn-pulse 2.4s ease-in-out infinite;
    }
    /* ⑤ Texto botón SIEMPRE visible */
    .ca-btn-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--bm-font-h2);
      font-size: 0.9rem;
      letter-spacing: 4px;
      color: white;
      text-transform: uppercase;
      opacity: 1; /* ca-btn-overlay — siempre visible */
      text-shadow: 0 1px 8px rgba(0,0,0,0.9);
      pointer-events: none;
    }
    /* Hover: solo crece el botón, sin iluminar el área */
    .ca-btn-png:hover  { transform: scale(1.06); }
    .ca-btn-png:active { transform: scale(0.98); }

    @keyframes ca-btn-pulse {
      0%,100% { filter: drop-shadow(0 0 6px rgba(204,0,0,0.35)); }
      50%      { filter: drop-shadow(0 0 18px rgba(204,0,0,0.7)); }
    }

    /* Botón CSS fallback (cuando no hay PNG) */
    .ca-btn-fallback {
      width: 100%;
      padding: clamp(12px,3%,16px);
      background: var(--bm-red);
      border: none;
      color: var(--bm-white);
      font-family: var(--bm-font-h2);
      font-size: 0.9rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      cursor: pointer; /* ca-btn-fallback */
      transition: all var(--bm-transition);
      animation: ca-btn-pulse 2.4s ease-in-out infinite;
    }
    .ca-btn-fallback:hover {
      background: var(--bm-red-light);
      transform: translateY(-1px);
    }

    /* =============================================
       CAPA 17: TOAST NOTIFICATION
       ============================================= */
    .bm-toast {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--bm-red); color: var(--bm-white);
      font-family: var(--bm-font-sub); font-size: 0.9rem;
      letter-spacing: 2px; padding: 10px 24px;
      border-radius: 2px; z-index: 3000;
      opacity: 0; transition: all 0.3s ease; white-space: nowrap;
    }
    .bm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Reset para los textos generados por TinyMCE dentro de las cards */
.ca-desc p, .ca-subtitle p {
    margin: 0;
    padding: 0;
}

/* Ajuste responsivo para imágenes del WYSIWYG */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================
   AJUSTE RESPONSIVO PARA VIDEOS E IMÁGENES (WYSIWYG)
   ========================================== */

/* Hace que las imágenes no superen el ancho del celular */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fuerza a los videos a ser responsivos manteniendo formato 16:9 */
iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px; /* Opcional: para que las esquinas del video encajen con tu diseño */
}

    /* =========================================================
       CARD 11 — EL MANIFIESTO (Editorial)
       ========================================================= */
    .manifiesto-cuerpo {
      flex: 1; min-height: 0;
      display: flex; align-items: center;
      overflow: hidden;
      margin: 14px 0 10px;
    }
    .manifiesto-entrada {
      font-family: var(--bm-font-body);
      font-size: var(--bm-font-size-body);
      line-height: 1.85;
      color: var(--bm-gray-lt);
      text-align: center;
      font-style: italic;
    }
    .manifiesto-firma {
      display: flex; flex-direction: column; align-items: center;
      gap: 4px;
      margin-bottom: 14px;
    }
    .manifiesto-firma-linea {
      display: block; width: 54px; height: 1px;
      background: var(--bm-red);
      margin-bottom: 10px;
    }
    .manifiesto-firma-nombre {
      font-family: var(--bm-font-sub);
      font-size: 0.9rem;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--bm-red-light);
    }
    .manifiesto-firma-cargo {
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 2px;
      color: var(--bm-gray);
    }
    .manifiesto-firma--modal { margin: 28px 0 8px; }

    /* =========================================================
       ME GUSTA UNIVERSAL (todas las cards menos la portada)
       ========================================================= */
    .bm-card > .bm-like,
    .bm-like {
      position: absolute;
      bottom: 14px; right: 14px;
      z-index: 6;
      width: auto; flex: 0 0 auto; align-self: flex-end;
      display: flex; align-items: center; gap: 7px;
      padding: 7px 12px 7px 10px;
      background: rgba(10,10,10,0.55);
      border: 1px solid rgba(240,240,240,0.14);
      border-radius: 999px;
      color: var(--bm-gray-lt);
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: color var(--bm-transition), border-color var(--bm-transition),
                  background var(--bm-transition), transform var(--bm-transition);
    }
    .bm-like:hover {
      color: var(--bm-white);
      border-color: rgba(204,0,0,0.55);
      transform: scale(1.05);
    }
    .bm-like-icon { width: 20px; height: 20px; flex: 0 0 auto; overflow: visible; }
    .bm-like-icon path {
      fill: none;
      stroke: currentColor;
      stroke-width: 9;
      transition: fill var(--bm-transition);
    }
    .bm-like.liked .bm-like-icon path { fill: currentColor; }
    .bm-like-count {
      font-family: var(--bm-font-head);
      font-size: 0.95rem;
      line-height: 1;
      letter-spacing: 1px;
      min-width: 1ch;
    }
    /* Estado activo: el visitante ya dio like */
    .bm-like.liked {
      color: var(--bm-red-light);
      border-color: rgba(204,0,0,0.6);
      background: rgba(139,0,0,0.22);
    }
    .bm-like.liked .bm-like-icon { animation: like-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
    @keyframes like-pop {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.38); }
      70%  { transform: scale(0.94); }
      100% { transform: scale(1); }
    }
    /* Mientras el servidor responde */
    .bm-like.enviando { opacity: 0.6; pointer-events: none; }

    /* Movil: el boton flotante de subir vive abajo a la derecha,
       asi que el "me gusta" se recoloca para no encimarse */
    @media (max-width: 991px) {
      /* Misma especificidad que la regla base, o el right:14px de arriba
         sobrevive y el boton queda anclado a ambos lados (estirado) */
      .bm-card > .bm-like,
      .bm-like {
        /* Separado del borde inferior a proposito. Pegado a 16px, con
           la barra de direcciones colapsada el boton queda medio fuera
           del area visible; al tocarlo el navegador le da foco y lo
           desplaza para hacerlo visible, y con scroll snap ese
           desplazamiento se convierte en un salto de pagina. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
        left: 16px;
        right: auto;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .bm-like.liked .bm-like-icon { animation: none; }
    }

    /* =========================================================
       CARD 12 — TALENTO EMERGENTE
       ========================================================= */
    .talento-foto {
      flex: 1; min-height: 0;
      margin: 12px 0 14px;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .talento-foto-src {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      border-radius: var(--bm-radius);
    }
    .talento-foto--vacia {
      background: linear-gradient(160deg, #1a1a1a, #0f0f0f);
      border: 1px dashed #2a2a2a;
      border-radius: var(--bm-radius);
      color: #333;
      font-size: 3rem;
    }
    .talento-nombre {
      font-family: var(--bm-font-sub);
      font-size: 1.35rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--bm-red-light);
      text-align: center;
      line-height: 1.2;
    }
    .talento-genero {
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--bm-gray);
      text-align: center;
      margin-top: 4px;
    }
    .talento-descripcion {
      font-family: var(--bm-font-body);
      font-size: var(--bm-font-size-body);
      line-height: 1.7;
      color: var(--bm-gray-lt);
      text-align: center;
      margin: 10px 0 12px;
    }

    /* Iconos de redes */
    .talento-redes {
      display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
      margin-bottom: 14px;
    }
    .talento-red {
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(240,240,240,0.18);
      border-radius: 50%;
      color: var(--bm-gray-lt);
      font-size: 1.05rem;
      text-decoration: none;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: all var(--bm-transition);
    }
    .talento-red:hover {
      color: var(--bm-white);
      border-color: var(--bm-red-light);
      background: rgba(139,0,0,0.3);
      transform: translateY(-2px);
    }
    .talento-redes--modal { margin: 22px 0 6px; }

    /* Galeria dentro del modal */
    .talento-galeria {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-top: 18px;
    }
    .talento-galeria img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: var(--bm-radius);
      display: block;
    }
    @media (max-width: 575px) {
      .talento-galeria { grid-template-columns: 1fr; }
    }

    /* =========================================================
       CARD 13 — FORO DE LAS SOMBRAS
       ========================================================= */
    .foro-subtitulo {
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--bm-gray);
      text-align: center;
      margin-bottom: 14px;
    }
    /* Portada de la card: ocupa el espacio libre y no depende del contenido */
    .foro-portada {
      flex: 1; min-height: 0;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
      color: rgba(204,0,0,0.28);
      font-size: clamp(3.5rem, 14vw, 6rem);
    }
    /* Con imagen de fondo cargada, el icono de respaldo se retira */
    .card-foro.has-bg .foro-portada i { display: none; }

    /* La lista solo existe dentro del modal */
    .foro-lista {
      display: flex; flex-direction: column; gap: 16px;
    }

    .foro-comentario {
      background: rgba(255,255,255,0.03);
      border-left: 2px solid var(--bm-red);
      border-radius: 0 var(--bm-radius) var(--bm-radius) 0;
      padding: 12px 14px;
    }
    .foro-alias {
      font-family: var(--bm-font-sub);
      font-size: 0.95rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--bm-red-light);
      margin-bottom: 10px;
      /* inline-flex: el recuadro se ajusta al alias, no al ancho del bloque */
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--bm-black);
      border: 1px solid rgba(204,0,0,0.35);
      border-radius: 4px;
      padding: 5px 11px;
    }
    .foro-alias i { font-size: 1.05rem; opacity: 0.7; }
    .foro-texto {
      font-family: var(--bm-font-body);
      font-size: 1rem;
      line-height: 1.65;
      color: var(--bm-gray-lt);
      font-style: italic;
    }
    /* Respuesta de la redaccion */
    .foro-respuesta {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-family: var(--bm-font-body);
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--bm-gray);
    }
    .foro-respuesta-etiqueta {
      display: inline-block;
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 3px;
      color: var(--bm-red-light);
      background: var(--bm-black);
      border: 1px solid rgba(204,0,0,0.35);
      border-radius: 4px;
      padding: 4px 10px;
      margin-bottom: 8px;
    }
    .foro-vacio {
      color: var(--bm-gray);
      font-size: 0.95rem;
      text-align: center;
      margin: auto 0;
    }

    /* Chevron de la card de publicidad: flota sobre la imagen full-bleed */
    .card-publicidad .pub-chevron {
      position: absolute;
      bottom: clamp(14px, 4%, 26px);
      left: 0; right: 0;
      z-index: 3;
      margin-top: 0;
    }

    /* =========================================================
       AJUSTES MOVILES POR TIPO DE CARD
       ========================================================= */
    @media (max-width: 991px) {

      /* La foto cede espacio antes que el resto: el chevron nunca queda fuera */
      .card-talento .talento-foto { flex: 1 1 auto; min-height: 120px; }
      .card-talento .talento-descripcion {
        max-height: 5.2em;
        overflow: hidden;
      }
    }

    /* El chevron siempre por encima de fondos e imagenes, y con area tocable amplia */
    .bm-chevron {
      position: relative;
      z-index: 7;
      flex: 0 0 auto;
    }
    .bm-chevron i { padding: 4px; }

    /* =========================================================
       CARD 14 — COLABORACIONES
       ========================================================= */
    .colab-cuerpo {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 22px;
      text-align: center;
      padding: 8px 0;
    }
    .colab-texto {
      font-family: var(--bm-font-body);
      font-size: var(--bm-font-size-body);
      line-height: 1.8;
      color: var(--bm-gray-lt);
      margin: 0;
    }
    .colab-email {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: var(--bm-font-sub);
      font-size: 0.9rem;
      letter-spacing: 1px;
      color: var(--bm-red-light);
      text-decoration: none;
      background: var(--bm-black);
      border: 1px solid rgba(204,0,0,0.4);
      border-radius: 4px;
      padding: 9px 15px;
      word-break: break-all;
      transition: all var(--bm-transition);
    }
    .colab-email:hover {
      color: var(--bm-white);
      border-color: var(--bm-red-light);
      background: rgba(139,0,0,0.3);
    }

    /* =========================================================
       CARD 15 — NEWSLETTER
       ========================================================= */
    .news-cuerpo {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 16px;
      text-align: center;
    }
    .news-icono {
      font-size: clamp(3rem, 12vw, 4.5rem);
      color: var(--bm-red);
      line-height: 1;
    }
    .news-texto {
      font-family: var(--bm-font-body);
      font-size: var(--bm-font-size-body);
      line-height: 1.75;
      color: var(--bm-gray-lt);
      margin: 0;
    }
    .news-nota {
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--bm-gray);
      margin: 0;
    }

    /* =========================================================
       CARD 16 — CONTRAPORTADA
       ========================================================= */
    .contra-contenido {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 20px;
      text-align: center;
    }
    .contra-logo {
      width: min(240px, 62%);
      max-height: 34%;
      object-fit: contain;
      display: block;
    }
    .contra-cierre {
      font-family: var(--bm-font-sub);
      font-size: 1rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--bm-gray-lt);
      line-height: 1.6;
      max-width: 80%;
    }
    .contra-redes {
      display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
    }
    .contra-red {
      width: 42px; height: 42px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(240,240,240,0.22);
      border-radius: 50%;
      color: var(--bm-white);
      font-size: 1.15rem;
      text-decoration: none;
      background: rgba(10,10,10,0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: all var(--bm-transition);
    }
    .contra-red:hover {
      border-color: var(--bm-red-light);
      background: rgba(139,0,0,0.45);
      transform: translateY(-2px);
    }
    .contra-creditos {
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 1px;
      color: var(--bm-gray);
      line-height: 1.8;
    }

    /* =========================================================
       CARD 17 — VIDEO (portada + modal fullscreen)
       ========================================================= */
    .video-portada {
      flex: 1; min-height: 0;
      display: flex; align-items: center; justify-content: center;
      margin: 14px 0;
    }
    .video-play {
      width: clamp(76px, 22vw, 104px);
      aspect-ratio: 1;
      border-radius: 50%;
      border: 2px solid var(--bm-red-light);
      background: rgba(10,10,10,0.55);
      color: var(--bm-white);
      font-size: clamp(2.4rem, 8vw, 3.4rem);
      line-height: 0;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 0 0 0 rgba(204,0,0,0.55);
      animation: video-pulso 2.4s ease-out infinite;
      transition: transform var(--bm-transition), background var(--bm-transition);
    }
    .video-play:hover { transform: scale(1.07); background: rgba(139,0,0,0.5); }
    .video-play i { margin-left: 4px; }   /* el triangulo se ve descentrado si no */
    @keyframes video-pulso {
      0%   { box-shadow: 0 0 0 0 rgba(204,0,0,0.5); }
      70%  { box-shadow: 0 0 0 22px rgba(204,0,0,0); }
      100% { box-shadow: 0 0 0 0 rgba(204,0,0,0); }
    }
    .video-icono-vacio { font-size: 3.4rem; color: #2a2a2a; }
    .video-descripcion {
      font-family: var(--bm-font-body);
      font-size: var(--bm-font-size-body);
      line-height: 1.6;
      color: var(--bm-gray-lt);
      text-align: center;
      margin: 0 0 12px;
    }
    @media (prefers-reduced-motion: reduce) {
      .video-play { animation: none; }
    }

    /* --- Modal de video: el reproductor manda, no el texto --- */
    .bm-modal--video {
      max-width: 1100px;
      width: 100%;
      background: #000;
      padding: 0;
      overflow: hidden;
    }
    .bm-modal-header--video {
      padding: 16px 20px 12px;
      margin-bottom: 0;
    }
    /* Marco 16:9: reserva el espacio antes de cargar, sin salto de layout */
    .video-marco {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
    }
    .video-embed {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0;
      display: block;
    }
    /* En movil el modal ya es fullscreen: el video se centra verticalmente */
    @media (max-width: 991px) {
      .bm-modal--video {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .video-marco { flex: 0 0 auto; }
    }

    /* =========================================================
       PANTALLA COMPLETA DE VIDEO
       Dos correcciones:
       1) El elemento en fullscreen debe medirse contra la pantalla.
          Sus width/height/inset de autor pisaban los del navegador
          y seguia usando el tamano del marco 16:9.
       2) Un ancestro con transform (el translateY del modal) contiene
          al position:fixed del fullscreen y lo desborda. Mientras haya
          fullscreen se anulan esas transformaciones (clase del JS).
       ========================================================= */
    .video-embed:fullscreen,
    .video-embed:-webkit-full-screen,
    video:fullscreen,
    video:-webkit-full-screen,
    iframe:fullscreen,
    iframe:-webkit-full-screen,
    .video-marco:fullscreen,
    .video-marco:-webkit-full-screen {
      position: fixed !important;
      top: 0 !important; left: 0 !important;
      right: 0 !important; bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      max-height: none !important;
      aspect-ratio: auto !important;
      object-fit: contain;
      background: #000;
      border-radius: 0 !important;
    }

    /* Mientras algo esta en pantalla completa: sin transform en la cadena
       de ancestros, y sin limites de alto que recorten el video */
    body.bkm-fullscreen .bm-modal,
    body.bkm-fullscreen .bm-modal--video {
      transform: none !important;
      max-height: none !important;
      overflow: visible !important;
    }
    body.bkm-fullscreen .bm-modal-overlay,
    body.bkm-fullscreen .video-marco,
    body.bkm-fullscreen .bm-modal-article {
      transform: none !important;
      overflow: visible !important;
    }
    /* El video manda: el resto del modal se aparta */
    body.bkm-fullscreen .bm-modal-header { display: none !important; }

    /* =========================================================
       AVISO DE VERSION NUEVA (PWA)
       ========================================================= */
    .bkm-update {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translate(-50%, 140%);
      z-index: 9998;
      display: flex; align-items: center; gap: 12px;
      max-width: min(560px, calc(100vw - 24px));
      padding: 12px 14px 12px 18px;
      background: rgba(17,17,17,0.96);
      border: 1px solid var(--bm-red);
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .bkm-update.visible { transform: translate(-50%, 0); }
    .bkm-update-txt {
      font-family: var(--bm-font-body);
      font-size: 0.9rem;
      line-height: 1.4;
      color: var(--bm-white);
    }
    .bkm-update-btn {
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 1.5px;
      color: var(--bm-white);
      background: var(--bm-red);
      border: 0; border-radius: 4px;
      padding: 10px 16px;
      min-height: 44px;   /* objetivo tactil segun WCAG 2.5.8 */
      cursor: pointer;
      white-space: nowrap;
      transition: background var(--bm-transition);
    }
    .bkm-update-btn:hover { background: var(--bm-red-light); }
    .bkm-update-x {
      font-size: 1.5rem;
      line-height: 1;
      color: var(--bm-gray);
      background: none; border: 0;
      padding: 0 4px;
      min-width: 32px; min-height: 32px;
      cursor: pointer;
    }
    .bkm-update-x:hover { color: var(--bm-white); }
    @media (max-width: 575px) {
      .bkm-update { bottom: 12px; padding: 10px 10px 10px 14px; gap: 8px; }
      .bkm-update-txt { font-size: 0.85rem; }
    }

    /* Portada de imagen unica: sin logo ni titulares el degradado solo
       ensuciaria el arte, asi que se reduce a una vineta minima */
    .hero-overlay--suave {
      background: linear-gradient(180deg,
        rgba(10,10,10,0.35) 0%,
        rgba(10,10,10,0) 28%,
        rgba(10,10,10,0) 72%,
        rgba(10,10,10,0.45) 100%) !important;
    }

    /* =========================================================
       BARRA DE PREVISUALIZACION (solo la ve el equipo)
       ========================================================= */
    .bm-preview-barra {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 9997;
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      padding: 8px 14px;
      background: #c8a000;
      color: #121212;
      font-family: var(--bm-font-sub);
      font-size: 0.8rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .bm-preview-barra a {
      color: #121212;
      background: rgba(0,0,0,0.14);
      border-radius: 4px;
      padding: 6px 12px;
      text-decoration: none;
      white-space: nowrap;
      min-height: 32px;
      display: inline-flex; align-items: center;
    }
    .bm-preview-barra a:hover { background: rgba(0,0,0,0.26); }
    @media (max-width: 575px) {
      .bm-preview-barra { font-size: 0.72rem; padding: 7px 10px; letter-spacing: 1px; }
    }

    /* Aviso de edicion vacia, solo en previsualizacion */
    .bm-preview-vacio {
      min-height: 80dvh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 16px; text-align: center; padding: 40px 24px;
      color: var(--bm-gray-lt);
    }
    .bm-preview-vacio i { font-size: 3.4rem; color: #c8a000; }
    .bm-preview-vacio h2 {
      font-family: var(--bm-font-sub);
      font-size: 1rem; letter-spacing: 3px; color: var(--bm-white); margin: 0;
    }
    .bm-preview-vacio p {
      font-family: var(--bm-font-body);
      font-size: var(--bm-font-size-body);
      line-height: 1.7; max-width: 34rem; margin: 0;
    }
    .bm-preview-vacio a {
      font-family: var(--bm-font-sub); font-size: 0.85rem; letter-spacing: 2px;
      color: var(--bm-white); background: var(--bm-red);
      padding: 12px 22px; border-radius: 4px; text-decoration: none; min-height: 44px;
      display: inline-flex; align-items: center;
    }

    /* =========================================================
       AVISO INICIAL (pantalla completa / instalacion)
       Se ofrece una vez al empezar a leer y se retira solo.
       Sin boton fijo: estorbaba a los botones de cerrar de los
       modales y ocupaba sitio permanente por una accion unica.
       ========================================================= */
    .bkm-aviso {
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translate(-50%, 170%);
      z-index: 9995;
      /* Columna centrada: logo, accion y texto al pie */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: min(300px, calc(100vw - 32px));
      padding: 22px 20px 18px;
      background: rgba(14,14,14,0.97);
      border: 1px solid rgba(204,0,0,0.35);
      border-radius: 14px;
      box-shadow: 0 14px 40px rgba(0,0,0,0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .bkm-aviso.visible { transform: translate(-50%, 0); }

    /* Logo en circulo */
    .bkm-aviso-logo {
      width: 72px; height: 72px;
      flex: 0 0 auto;
      border-radius: 50%;
      border: 1px solid rgba(204,0,0,0.5);
      background: var(--bm-black);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      box-shadow: 0 0 18px rgba(139,0,0,0.45);
    }
    .bkm-aviso-logo img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    .bkm-aviso-btn {
      font-family: var(--bm-font-sub);
      font-size: 0.85rem;
      letter-spacing: 2px;
      color: var(--bm-white);
      background: var(--bm-red);
      border: 0; border-radius: 6px;
      padding: 12px 22px;
      min-height: 44px;
      width: 100%;
      cursor: pointer;
      transition: background var(--bm-transition);
    }
    .bkm-aviso-btn:hover { background: var(--bm-red-light); }

    /* Texto al pie, centrado */
    .bkm-aviso-txt {
      font-family: var(--bm-font-body);
      font-size: 0.85rem;
      line-height: 1.5;
      color: var(--bm-gray-lt);
      text-align: center;
      margin: 0;
    }
    .bkm-aviso-txt i { color: var(--bm-red-light); }

    /* Cerrar: esquina del propio aviso */
    .bkm-aviso-x {
      position: absolute;
      top: 6px; right: 8px;
      font-size: 1.4rem; line-height: 1;
      color: var(--bm-gray);
      background: none; border: 0;
      min-width: 32px; min-height: 32px;
      cursor: pointer;
    }
    .bkm-aviso-x:hover { color: var(--bm-white); }

    @media (max-width: 575px) {
      .bkm-aviso { bottom: 16px; padding: 20px 18px 16px; }
    }

    /* =========================================================
       PAGINA EN PANTALLA COMPLETA
       El navegador pone overflow:hidden al elemento en fullscreen.
       Hay que devolver el scroll al body, que es quien scrollea
       en movil, y asegurar el del modal.
       ========================================================= */
    :root:fullscreen,
    :root:-webkit-full-screen {
      overflow: hidden;
      height: 100%;
    }
    body.bkm-fs-pagina {
      height: 100dvh;
      overflow-y: auto;
    }
    body.bkm-fs-pagina .bm-modal-overlay {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    body.bkm-fs-pagina .bm-modal {
      max-height: 100dvh;
      overflow-y: auto;
    }

    /* =========================================================
       CARD 18 — REEL (video vertical a sangre)
       El video ocupa la card entera. Nada de marco ni padding: la
       informacion flota encima, como en las apps de video vertical.
       ========================================================= */
    .card-reel {
      padding: 0 !important;
      position: relative;
      overflow: hidden;
      display: block;
      background: #000;
      isolation: isolate;   /* el velo no se mezcla con cards vecinas */
    }

    .reel-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;    /* llena la card; el 9:16 encaja casi exacto */
      object-position: center;
      z-index: 0;
      background: #000;
    }

    /* Oscurece arriba y abajo para que el texto y los botones se lean
       sobre cualquier fotograma. Un reel cambia de brillo a cada
       instante y sin esto el titulo desaparece a ratos. */
    .reel-velo {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to bottom,
          rgba(0,0,0,0.55) 0%,
          rgba(0,0,0,0.10) 22%,
          rgba(0,0,0,0.00) 45%,
          rgba(0,0,0,0.45) 78%,
          rgba(0,0,0,0.88) 100%);
    }

    /* ── Informacion sobre el video ── */
    .reel-info {
      position: absolute;
      left: 0; right: 0;
      /* Deja libre la esquina donde vive el "me gusta" y el chevron */
      bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
      z-index: 3;
      padding: 0 clamp(18px, 6%, 40px);
      text-align: center;
      pointer-events: none;   /* no estorba al toque sobre el video */
    }
    .reel-seccion {
      font-family: var(--bm-font-sub, 'Oswald', sans-serif);
      font-size: 0.78rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--bm-red-light);
      margin-bottom: 8px;
    }
    .reel-titulo {
      font-family: var(--bm-font-title, 'Bree Serif', serif);
      font-size: clamp(1.4rem, 5.5vw, 2rem);
      line-height: 1.2;
      color: var(--bm-white);
      margin: 0 0 10px;
      text-shadow: 0 2px 12px rgba(0,0,0,0.8);
    }
    .reel-pie {
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--bm-gray-lt);
      max-width: 32rem;
      margin: 0 auto;
      text-shadow: 0 1px 8px rgba(0,0,0,0.9);
    }
    .reel-credito {
      margin-top: 10px;
      font-size: 0.78rem;
      letter-spacing: 1px;
      color: var(--bm-gray);
      text-transform: uppercase;
    }

    /* ── Boton de sonido ── */
    .reel-sonido {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 16px);
      right: 16px;
      z-index: 4;
      width: 44px; height: 44px;   /* objetivo tactil accesible */
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(10,10,10,0.55);
      border: 1px solid rgba(240,240,240,0.22);
      color: var(--bm-white);
      font-size: 1.1rem;
      cursor: pointer;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      transition: background 0.25s ease, border-color 0.25s ease;
    }
    .reel-sonido:hover { border-color: var(--bm-red-light); background: rgba(139,0,0,0.5); }

    /* ── Boton de play (respaldo) ── */
    .reel-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      width: 76px; height: 76px;
      border-radius: 50%;
      display: none;            /* el JS lo muestra solo si hace falta */
      align-items: center; justify-content: center;
      background: rgba(139,0,0,0.75);
      border: 2px solid rgba(240,240,240,0.5);
      color: var(--bm-white);
      font-size: 2.2rem;
      cursor: pointer;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .card-reel.reel-manual .reel-play { display: flex; }
    .reel-play:hover { background: var(--bm-red-light); }

    /* El altavoz late un par de veces al aparecer el aviso, para que la
       mirada lo encuentre sin tener que buscarlo. */
    @keyframes reel-latido {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(204,0,0,0.18); }
    }
    .reel-sonido.llamando { animation: reel-latido 1.1s ease 2; }

    @media (prefers-reduced-motion: reduce) {
      .reel-sonido.llamando { animation: none; }
    }

    /* El chevron se ancla abajo y al centro. Sin esto queda en el flujo
       normal, y como en el reel el video esta posicionado en absoluto y
       sale del flujo, el chevron acaba siendo una banda del ancho de la
       card en la parte de ARRIBA — encima del boton de sonido y, con su
       z-index mas alto, robandole el toque. */
    .card-reel .reel-chevron {
      position: absolute;
      left: 50%;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
      transform: translateX(-50%);
      width: 44px;
      height: 44px;
      margin-top: 0;
      z-index: 3;          /* por debajo de los controles, no encima */
      align-items: center;
    }

    .reel-vacio {
      position: absolute; inset: 0;
      z-index: 2;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 14px;
      color: var(--bm-gray);
      background: linear-gradient(135deg, #1a0000 0%, #0d0d0d 100%);
    }
    .reel-vacio i { font-size: 3rem; color: var(--bm-red); }

    /* En desktop la card es una tarjeta del slider, no la pantalla:
       el texto encima tiene que encogerse con ella. */
    @media (min-width: 992px) {
      .reel-info { bottom: 70px; }
      .reel-titulo { font-size: 1.3rem; }
      .reel-pie { font-size: 0.85rem; }
    }