/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       🔧  RESET — base limpia sin sorpresas
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 100%; height: 100%;
      overflow: hidden;
      background: #C84800;
      font-family: 'Archivo', sans-serif;
    }

    :root {
      --col-pad-y: clamp(14px, 2.5vh, 32px);
      --col-pad-x: clamp(12px, 1.6vw, 26px);
      --col-gap: clamp(6px, 1vh, 12px);
      --logo-w: clamp(200px, 17vw, 280px);
      --logo-mb: clamp(8px, 1.2vh, 14px);
      --portada-w: clamp(200px, 19vw, 260px);
      --player-h: clamp(100px, 12vh, 140px);
      --player-max: clamp(260px, 28vw, 340px);
      --conciertos-cols: 1;
      --conciertos-max: 300px;
      --contacto-max: 280px;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       🔥  PANTALLA PRINCIPAL — Naranja total · Blanco total
       Diseñado por RMI Factory Web
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #pantalla-principal {
      position: fixed; inset: 0; z-index: 50;
      background: #C04000;
      opacity: 1; pointer-events: auto; overflow: hidden;
    }
    #lienzo-brochas {
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
    }
    #pantalla-principal.visible { opacity: 1; pointer-events: auto; }
    #pantalla-principal::before {
      content: ''; position: absolute; inset: 0; z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 160px; opacity: 0.035; pointer-events: none;
    }
    #lienzo-estrellas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
    .franja-top {
      position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 10;
      background: linear-gradient(to right, transparent, rgba(0,0,0,0.6) 20%,
        rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.6) 80%, transparent);
    }
    .franja-bot {
      position: absolute; bottom: 0; left: 0; right: 0; height: 3px; z-index: 10;
      background: linear-gradient(to right, transparent, rgba(0,0,0,0.4) 20%,
        rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 80%, transparent);
    }

    /* ◇ Admin — acceso semioculto */
    .admin-ghost {
      position: fixed; top: 11px; right: 14px; z-index: 30;
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 9px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      text-decoration: none;
      color: rgba(0,0,0,0.55);
      background: rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 2px;
      opacity: 0.07;
      transform: rotate(0deg);
      transition: opacity 0.4s ease, background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
      backdrop-filter: blur(2px);
    }
    .admin-ghost-icon {
      font-size: 10px; line-height: 1;
      color: rgba(0,0,0,0.45);
      transition: color 0.25s;
    }
    .admin-ghost:hover,
    .admin-ghost:focus-visible {
      opacity: 0.72;
      color: rgba(0,0,0,0.88);
      background: rgba(0,0,0,0.12);
      border-color: rgba(0,0,0,0.28);
      transform: rotate(-2deg) translateY(1px);
      outline: none;
    }
    .admin-ghost:hover .admin-ghost-icon,
    .admin-ghost:focus-visible .admin-ghost-icon {
      color: #8b0000;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       📐  LAYOUT — 3 columnas · 100vh
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #distribucion {
      position: relative; z-index: 1;
      width: 100%; height: 100dvh;
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.42fr) minmax(0, 0.9fr);
      align-items: stretch;
    }
    #col-izquierda, #col-central, #col-derecha {
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: var(--col-pad-y) var(--col-pad-x);
      gap: var(--col-gap);
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,0,0,0.22) transparent;
    }
    #col-izquierda::-webkit-scrollbar,
    #col-central::-webkit-scrollbar,
    #col-derecha::-webkit-scrollbar { width: 4px; }
    #col-izquierda::-webkit-scrollbar-thumb,
    #col-central::-webkit-scrollbar-thumb,
    #col-derecha::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.2);
      border-radius: 4px;
    }
    #col-izquierda {
      padding-left: clamp(16px, 2vw, 32px);
      border-right: 1px solid rgba(0,0,0,0.18);
    }
    #col-derecha {
      padding-right: clamp(16px, 2vw, 32px);
      border-left: 1px solid rgba(0,0,0,0.18);
      overflow-x: visible; /* polaroid a medias fuera del cajetín Ver fotos */
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       🔤  TIPOGRAFÍA SOBRE NARANJA
       Regla de oro: BLANCO siempre. Con sombra oscura.
       Los grises son el enemigo del contraste.
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .texto-mono {
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
      color: rgba(255,255,255,0.70);
      text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    }
    .texto-mono-grande {
      font-family: 'JetBrains Mono', monospace; font-size: 12px;
      font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .texto-blanco {
      color: #FFFFFF; text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .titulo-display {
      font-family: 'Bebas Neue', sans-serif; letter-spacing: 3px;
      line-height: 0.9; color: #FFFFFF;
      text-shadow: 0 3px 14px rgba(0,0,0,0.35);
    }

    /* — Animaciones de entrada — */
    .revelar {
      opacity: 0; transform: translateY(16px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    #pantalla-principal.visible .revelar      { opacity:1; transform:translateY(0); }
    #pantalla-principal.visible .d1           { transition-delay:0.1s;  }
    #pantalla-principal.visible .d2           { transition-delay:0.2s; }
    #pantalla-principal.visible .d3           { transition-delay:0.35s;  }
    #pantalla-principal.visible .d4           { transition-delay:0.5s; }
    #pantalla-principal.visible .d5           { transition-delay:0.65s;  }
    #pantalla-principal.visible .d6           { transition-delay:0.8s; }
    #pantalla-principal.visible .d7           { transition-delay:0.95s;  }
    .revelar-escala {
      opacity:0; transform:scale(0.88);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    #pantalla-principal.visible .revelar-escala { opacity:1; transform:scale(1); }
    .revelar-izq {
      opacity:0; transform:translateX(-18px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    #pantalla-principal.visible .revelar-izq { opacity:1; transform:translateX(0); }
    .revelar-der {
      opacity:0; transform:translateX(18px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    #pantalla-principal.visible .revelar-der { opacity:1; transform:translateX(0); }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ◀ COLUMNA IZQUIERDA
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .logo-wrap {
      position: relative;
      width: var(--logo-w);
      margin: 0 auto var(--logo-mb);
      flex-shrink: 0;
    }
    #logo-principal {
      width: 100%; height: auto; display: block;
      mix-blend-mode: multiply;
      filter: contrast(1.12);
      animation: pulsarLogoPrincipal 4s ease-in-out infinite;
    }
    .bio-cajetin {
      position: absolute;
      top: clamp(-6px, -0.8vh, 2px);
      right: clamp(-18px, -4vw, -4px);
      z-index: 6;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 11px 6px 9px;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(10px, 1.1vw, 13px);
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #e8ff00;
      background: #0a0a0a;
      border: 2px solid #0a0a0a;
      cursor: pointer;
      transform: rotate(8deg);
      box-shadow: 3px 4px 0 #8b0000, 2px 2px 10px rgba(0,0,0,0.45);
      clip-path: polygon(2% 8%, 10% 2%, 92% 0%, 100% 10%, 98% 88%, 88% 100%, 6% 96%, 0% 78%);
      transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    }
    .bio-cajetin::after {
      content: '→';
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.95em;
      color: #f2ebe0;
    }
    .bio-cajetin:hover,
    .bio-cajetin:focus-visible {
      transform: rotate(4deg) translateY(-2px);
      filter: brightness(1.08);
      box-shadow: 5px 6px 0 #0a0a0a, 3px 3px 14px rgba(0,0,0,0.5);
      outline: none;
    }

    .bio-overlay {
      position: fixed; inset: 0; z-index: 200;
      display: flex; align-items: center; justify-content: center;
      padding: clamp(16px, 4vw, 32px);
      background: rgba(10,10,10,0.72);
      backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .bio-overlay.abierto {
      opacity: 1; pointer-events: auto;
    }
    .bio-panel {
      position: relative;
      width: min(520px, 94vw);
      max-height: min(84vh, 640px);
      overflow-y: auto;
      padding: clamp(14px, 2.5vw, 20px) clamp(14px, 2.8vw, 20px) clamp(16px, 2.5vw, 20px);
      background: #0a0a0a;
      border: 2px solid #f2ebe0;
      transform: rotate(-1.2deg) scale(0.94);
      box-shadow: 8px 10px 0 #8b0000, 0 24px 60px rgba(0,0,0,0.65);
      clip-path: polygon(1% 5%, 7% 1%, 93% 2%, 100% 8%, 99% 92%, 90% 100%, 5% 98%, 0% 85%);
      transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    }
    .bio-overlay.abierto .bio-panel {
      transform: rotate(-0.6deg) scale(1);
    }
    .bio-panel::before {
      content: '';
      position: absolute; inset: 0; pointer-events: none;
      opacity: 0.32; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 100px;
    }
    .bio-cerrar {
      position: absolute; top: 8px; right: 10px; z-index: 2;
      width: 28px; height: 28px; padding: 0;
      font-family: 'Black Ops One', sans-serif;
      font-size: 18px; line-height: 1;
      color: #0a0a0a; background: #e8ff00;
      border: 2px solid #0a0a0a;
      cursor: pointer;
      box-shadow: 2px 2px 0 #8b0000;
      transform: rotate(4deg);
    }
    .bio-cerrar:hover { filter: brightness(1.1); transform: rotate(0deg); }
    .bio-fotos {
      position: relative; z-index: 1;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      grid-template-rows: auto auto;
      gap: 5px;
      margin-bottom: clamp(12px, 1.6vh, 16px);
    }
    .bio-foto {
      width: 100%; display: block; object-fit: cover;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 4px 0 #8b0000;
      cursor: zoom-in;
      filter: contrast(1.06) saturate(0.92);
      transition: transform 0.15s ease;
    }
    .bio-foto:hover { transform: scale(1.02); }
    .bio-foto--hero {
      grid-row: 1 / span 2;
      min-height: clamp(140px, 22vh, 200px);
      transform: rotate(-1.5deg);
    }
    .bio-foto--hero:hover { transform: rotate(-1deg) scale(1.02); }
    .bio-foto--sec {
      min-height: clamp(68px, 10vh, 96px);
      transform: rotate(1.2deg);
    }
    .bio-foto--sec:nth-child(3) { transform: rotate(-0.8deg); }
    .bio-titulo {
      position: relative; z-index: 1;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(22px, 3.5vw, 32px);
      letter-spacing: 2px;
      color: #e8ff00;
      text-shadow: 2px 2px 0 #8b0000;
      margin-bottom: 4px;
      padding-right: 28px;
      line-height: 0.95;
    }
    .bio-subtitulo {
      position: relative; z-index: 1;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 0.75vw, 8.5px);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(232,255,0,0.72);
      margin-bottom: clamp(10px, 1.4vh, 14px);
    }
    .bio-texto {
      position: relative; z-index: 1;
      font-family: 'Archivo', sans-serif;
      font-size: clamp(11px, 1.15vw, 13px);
      font-weight: 600;
      line-height: 1.55;
      color: #f2ebe0;
      margin-bottom: clamp(12px, 1.6vh, 16px);
    }
    .bio-texto p { margin-bottom: 8px; }
    .bio-texto p:last-child { margin-bottom: 0; }
    .bio-seccion {
      position: relative; z-index: 1;
      margin-bottom: clamp(10px, 1.4vh, 14px);
    }
    .bio-seccion-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; font-weight: 700;
      letter-spacing: 2.2px; text-transform: uppercase;
      color: rgba(242,235,224,0.55);
      margin-bottom: 6px;
      padding-bottom: 4px;
      border-bottom: 1px dashed rgba(232,255,0,0.22);
    }
    .bio-miembros-lista {
      list-style: none;
      display: flex; flex-direction: column; gap: 4px;
    }
    .bio-miembro {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
      font-family: 'Archivo', sans-serif;
      font-size: clamp(10px, 1vw, 12px);
      font-weight: 700;
      color: #f2ebe0;
    }
    .bio-miembro-nombre {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(13px, 1.3vw, 15px);
      letter-spacing: 1px;
      color: #e8ff00;
      text-shadow: 1px 1px 0 #8b0000;
    }
    .bio-miembro-rol {
      font-family: 'JetBrains Mono', monospace;
      font-size: 6.5px; font-weight: 700;
      letter-spacing: 0.8px; text-transform: uppercase;
      color: rgba(242,235,224,0.6);
    }
    .bio-discografia-tags {
      display: flex; flex-wrap: wrap; gap: 5px;
    }
    .bio-disco-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6.5px, 0.7vw, 7.5px);
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: #0a0a0a;
      background: #e8ff00;
      border: 1.5px solid #0a0a0a;
      padding: 4px 7px;
      box-shadow: 2px 2px 0 #8b0000;
      transform: rotate(-1deg);
    }
    .bio-disco-tag:nth-child(even) {
      transform: rotate(1deg);
      background: #f2ebe0;
    }
    .bio-video-wrap {
      margin-bottom: 8px;
    }
    .bio-video-wrap:last-child { margin-bottom: 0; }
    .bio-video {
      width: 100%; display: block;
      max-height: 200px;
      background: #050505;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 3px 0 #8b0000;
    }
    .bio-video-embed {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 3px 0 #8b0000;
      background: #050505;
    }
    .bio-video-embed iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0;
    }
    .bio-video-link {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; font-weight: 700;
      letter-spacing: 0.8px; text-transform: uppercase;
      color: #e8ff00; text-decoration: none;
    }
    .bio-video-link:hover { text-decoration: underline; }
    .bio-links {
      position: relative; z-index: 1;
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 4px;
      padding-top: 10px;
      border-top: 1px dashed rgba(232,255,0,0.18);
    }
    .bio-link {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(8px, 0.85vw, 10px);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      text-decoration: none;
      color: #f2ebe0;
      background: rgba(0,0,0,0.35);
      border: 1.5px solid rgba(242,235,224,0.3);
      padding: 5px 10px;
      transition: color 0.15s, border-color 0.15s, background 0.15s;
    }
    .bio-link:hover {
      color: #e8ff00;
      border-color: #e8ff00;
      background: rgba(0,0,0,0.5);
    }
    @keyframes pulsarLogoPrincipal {
      0%,100% { transform:scale(1); }
      50%      { transform:scale(1.015); }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       📰  DOSSIER DE PRENSA
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .prensa-wrap {
      width: 100%;
      max-width: var(--centro-ancho);
      margin: clamp(2px, 0.4vh, 6px) auto 0;
      padding-bottom: clamp(6px, 0.9vh, 12px);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: clamp(6px, 1vw, 10px);
      flex-shrink: 0;
    }
    .prensa-btn-dossier {
      display: inline-flex;
      align-items: center;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(8px, 0.85vw, 10px);
      letter-spacing: 1.3px;
      text-transform: uppercase;
      padding: clamp(6px, 0.75vh, 8px) clamp(10px, 1vw, 14px);
      border-radius: 0;
      color: #f2ebe0;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      box-shadow: 4px 4px 0 #0a0a0a;
      transform: rotate(2deg);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .prensa-btn-dossier:hover {
      transform: rotate(0deg) translateY(-2px);
      background: #a50000;
      box-shadow: 6px 6px 0 #0a0a0a;
    }
    .prensa-descarga {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6.5px, 0.7vw, 8px);
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      text-decoration: underline;
      text-underline-offset: 3px;
      color: rgba(242,235,224,0.78);
      transition: color 0.15s;
    }
    .prensa-descarga:hover { color: #e8ff00; }

    .prensa-overlay {
      position: fixed; inset: 0; z-index: 210;
      display: flex; align-items: center; justify-content: center;
      padding: clamp(12px, 3vw, 28px);
      background: rgba(10,10,10,0.65);
      backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .prensa-overlay.abierto { opacity: 1; pointer-events: auto; }
    .prensa-visor {
      position: relative;
      width: min(860px, 96vw);
      height: min(92vh, 900px);
      background: #f2ebe0;
      border: 3px solid #0a0a0a;
      box-shadow: 8px 10px 0 #8b0000, 0 24px 60px rgba(0,0,0,0.55);
      transform: scale(0.94);
      transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
      overflow: hidden;
    }
    .prensa-overlay.abierto .prensa-visor { transform: scale(1); }
    .prensa-visor iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      background: #f2ebe0;
    }
    .prensa-cerrar {
      position: fixed;
      top: clamp(10px, 2vh, 18px);
      right: clamp(10px, 2vw, 18px);
      z-index: 211;
      width: 32px; height: 32px; padding: 0;
      font-family: 'Black Ops One', sans-serif;
      font-size: 20px; line-height: 1;
      color: #0a0a0a; background: #e8ff00;
      border: 2px solid #0a0a0a; cursor: pointer;
      box-shadow: 3px 3px 0 #8b0000;
    }

    .generos {
      display: flex; gap: 6px; flex-wrap: wrap;
      justify-content: center; margin-top: auto;
      flex-shrink: 0;
    }
    .etiq-genero {
      font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, 0.85vw, 10px);
      font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
      color: #FFFFFF; background: rgba(0,0,0,0.22);
      border: 1.5px solid rgba(255,255,255,0.35);
      padding: 4px 10px; border-radius: 2px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       🎤  CONCIERTOS — estética YA A LA VENTA
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .conciertos-wrap {
      width: 100%; max-width: var(--conciertos-max); margin: 0 auto;
      flex-shrink: 0;
    }
    .conciertos-hero {
      position: relative; width: 100%;
      margin: 0 auto clamp(6px, 1vh, 12px); text-align: center;
    }
    .conciertos-noise {
      position: absolute; inset: -6px; z-index: 0; pointer-events: none;
      opacity: 0.45; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 120px;
    }
    .conciertos-cinta {
      position: absolute; z-index: 4; top: -8px; right: -6px;
      pointer-events: none; transform: rotate(7deg);
      background: #e8ff00; color: #0a0a0a;
      font-family: 'Black Ops One', sans-serif;
      font-size: 9px; letter-spacing: 2px;
      padding: 4px 16px; border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
    }
    .conciertos-bloque {
      position: relative; z-index: 2;
      background: transparent; padding: 2px 6px 0;
    }
    .conciertos-pre {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 0.75vw, 8.5px); font-weight: 700; letter-spacing: 2.2px;
      text-transform: uppercase;
      color: #f2ebe0;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      padding: 4px 10px;
      display: inline-block;
      margin-bottom: clamp(4px, 0.8vh, 8px);
      box-shadow: 3px 3px 0 #0a0a0a;
    }
    .conciertos-titular {
      position: relative; margin-bottom: clamp(4px, 0.8vh, 10px); line-height: 0.82;
    }
    .conciertos-fantasma {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(28px, 5vw, 44px);
      color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.1);
      transform: translate(2px, 3px); pointer-events: none; line-height: 0.85;
    }
    .conciertos-main {
      position: relative; z-index: 2; margin: 0;
      display: flex; flex-direction: column; align-items: center;
      animation: yaVibrar 4.8s ease-in-out infinite;
    }
    .conciertos-linea {
      font-family: 'Black Ops One', sans-serif;
      text-transform: uppercase; display: block; line-height: 0.88;
    }
    .conciertos-linea--prox {
      font-size: clamp(18px, 2.8vw, 28px);
      color: #0a0a0a;
      -webkit-text-stroke: 1.5px #e8ff00;
      paint-order: stroke fill;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.55);
      letter-spacing: 0.12em;
      transform: rotate(-2deg);
    }
    .conciertos-linea--con {
      font-size: clamp(28px, 4.5vw, 44px);
      color: #0a0a0a;
      -webkit-text-stroke: 2px #e8ff00;
      paint-order: stroke fill;
      text-shadow: 3px 3px 0 rgba(0,0,0,0.6);
      letter-spacing: 0.08em;
      transform: rotate(-1deg) scaleX(1.03);
    }

    .conciertos-lista {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(var(--conciertos-cols), minmax(0, 1fr));
      gap: clamp(6px, 1vh, 10px) clamp(6px, 1vw, 10px);
      margin-bottom: clamp(4px, 0.8vh, 10px);
    }
    .concierto-item {
      position: relative;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      padding: 9px 11px 10px 13px;
      transform: rotate(-1.1deg) perspective(320px) rotateY(-1.5deg);
      text-align: left;
      overflow: hidden;
      isolation: isolate;
      clip-path: polygon(
        1% 6%, 5% 1%, 14% 3%, 88% 0%, 97% 4%, 100% 12%,
        99% 78%, 96% 94%, 82% 100%, 12% 98%, 3% 92%, 0% 72%
      );
      box-shadow: 4px 4px 0 #0a0a0a, 2px 3px 12px rgba(0,0,0,0.35);
    }
    .concierto-item::before {
      content: '';
      position: absolute; inset: -4px -5px -6px -3px; z-index: -1;
      background:
        linear-gradient(158deg, #a50000 0%, #8b0000 42%, #7a0000 78%, #8b0000 100%);
      clip-path: polygon(
        0% 8%, 6% 0%, 18% 2%, 90% 0%, 100% 6%, 100% 16%,
        100% 82%, 94% 100%, 8% 100%, 0% 88%, 2% 20%
      );
      filter: blur(0.6px);
      opacity: 0.95;
    }
    .concierto-item::after {
      content: '';
      position: absolute; top: 0; right: 0;
      width: clamp(26px, 18%, 42px); height: clamp(26px, 18%, 42px);
      z-index: 2; pointer-events: none;
      background: linear-gradient(225deg, #6b0000 0%, #5a0000 45%, #4a0000 100%);
      clip-path: polygon(100% 0, 0 0, 100% 100%);
      box-shadow: -3px 3px 6px rgba(0,0,0,0.45), inset 1px -1px 0 rgba(255,255,255,0.06);
    }
    .concierto-item .concierto-textura {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      opacity: 0.38; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 110px;
    }
    .concierto-item .concierto-doblez {
      position: absolute; bottom: 0; left: 0;
      width: 55%; height: 38%; z-index: 1; pointer-events: none;
      background: linear-gradient(18deg, transparent 55%, rgba(0,0,0,0.28) 78%, rgba(232,255,0,0.08) 100%);
    }
    .concierto-item .concierto-borde-pintado {
      position: absolute; top: 8%; bottom: 10%; left: 5px; width: 3px;
      z-index: 1; pointer-events: none;
      background: linear-gradient(180deg, transparent, #e8ff00 18%, #8b0000 55%, #e8ff00 82%, transparent);
      border-radius: 2px;
      opacity: 0.75;
      transform: rotate(1.5deg);
      filter: blur(0.3px);
    }
    .concierto-item > *:not(.concierto-textura):not(.concierto-doblez):not(.concierto-borde-pintado):not(.concierto-cartel-sticker):not(.concierto-maps-sticker):not(.concierto-stickers) {
      position: relative; z-index: 3;
    }
    .concierto-item:nth-child(3n+1) {
      transform: rotate(-1.4deg) perspective(300px) rotateY(-2deg);
      clip-path: polygon(2% 4%, 9% 0%, 96% 2%, 100% 9%, 98% 88%, 90% 100%, 5% 97%, 0% 82%);
    }
    .concierto-item:nth-child(3n+2) {
      transform: rotate(0.85deg) perspective(300px) rotateY(1.2deg);
      clip-path: polygon(0% 8%, 7% 2%, 94% 0%, 100% 7%, 99% 92%, 88% 100%, 4% 99%, 1% 70%);
    }
    .concierto-item:nth-child(3n) {
      transform: rotate(-0.5deg) perspective(280px) rotateX(1deg);
      clip-path: polygon(3% 5%, 11% 1%, 92% 3%, 100% 11%, 97% 95%, 84% 100%, 6% 96%, 0% 75%);
    }
    .concierto-cabecera {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 4px; margin-bottom: 1px;
    }
    .concierto-fecha {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(15px, 1.9vw, 22px);
      color: #e8ff00;
      -webkit-text-stroke: 1px #0a0a0a;
      paint-order: stroke fill;
      text-shadow: 2px 2px 0 #0a0a0a;
      letter-spacing: 0.04em;
      line-height: 1;
    }
    .concierto-hora {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 0.75vw, 9px); font-weight: 700; letter-spacing: 1px;
      color: #0a0a0a;
      background: #e8ff00;
      border: 1.5px solid #0a0a0a;
      padding: 3px 7px;
      text-shadow: none;
      box-shadow: 2px 2px 0 #0a0a0a;
    }
    .concierto-lugar {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(18px, 2.5vw, 28px);
      color: #f2ebe0;
      text-shadow: 2px 2px 0 #0a0a0a, 0 0 10px rgba(0,0,0,0.4);
      margin: 3px 0 2px;
      line-height: 1.05;
      letter-spacing: 0.02em;
    }
    .concierto-ciudad {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(12px, 1.4vw, 15px);
      letter-spacing: 1.5px;
      color: #e8ff00;
      text-shadow: 1px 1px 0 #0a0a0a;
      margin-bottom: 2px;
    }
    .concierto-llegar {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6.5px, 0.7vw, 8px); font-weight: 700; letter-spacing: 0.6px;
      line-height: 1.35; text-transform: uppercase;
      color: rgba(242,235,224,0.88);
      text-shadow: none;
      border-left: 2px solid #e8ff00;
      padding-left: 7px;
      margin-left: 2px;
      margin-top: 3px;
    }
    /* Fila de pegatinas: POSTER + cómo llegar seguidos */
    .concierto-stickers {
      position: absolute;
      z-index: 6;
      left: clamp(8px, 1vw, 12px);
      bottom: clamp(4px, 0.6vh, 7px);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 6px;
      pointer-events: none;
    }
    .concierto-stickers > * {
      pointer-events: auto;
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      top: auto;
    }
    .concierto-cartel-sticker {
      padding: 3px 9px 4px;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(8px, 0.85vw, 10px);
      letter-spacing: 1.6px;
      text-transform: uppercase;
      line-height: 1;
      color: #0a0a0a;
      background: #e8ff00;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 3px 0 #8b0000;
      transform: rotate(-10deg);
      cursor: pointer;
      transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
      animation: cartelStickerPulse 3.5s ease-in-out infinite;
    }
    .concierto-cartel-sticker:hover,
    .concierto-cartel-sticker:focus-visible {
      transform: rotate(-5deg) scale(1.08);
      filter: brightness(1.06);
      box-shadow: 3px 4px 0 #0a0a0a;
      outline: none;
    }
    @keyframes cartelStickerPulse {
      0%, 90%, 100% { transform: rotate(-10deg); }
      94% { transform: rotate(-8deg) scale(1.04); }
    }
    .concierto-item.tiene-cartel,
    .concierto-item:has(.concierto-stickers) {
      padding-bottom: clamp(22px, 2.8vh, 28px);
    }
    /* Pegatina cómo llegar — a continuación de POSTER */
    .concierto-maps-sticker {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(9px, 2.4cqi, 11px);
      letter-spacing: 0.3px;
      line-height: 1.1;
      color: #0a0a0a;
      background: #e8ff00;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 #8b0000;
      padding: 4px 9px 5px;
      cursor: pointer;
      transform: rotate(5deg);
      clip-path: polygon(
        4% 12%, 12% 2%, 50% 6%, 92% 0%, 100% 14%,
        97% 86%, 86% 100%, 48% 94%, 6% 100%, 0% 78%
      );
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
      animation: mapsStickerPulse 3.2s ease-in-out infinite;
      white-space: nowrap;
    }
    .concierto-maps-sticker:hover {
      transform: rotate(0deg) translateY(-2px) scale(1.05);
      filter: brightness(1.06);
      box-shadow: 5px 5px 0 #0a0a0a;
      animation: none;
    }
    @keyframes mapsStickerPulse {
      0%, 88%, 100% { filter: brightness(1); }
      92% { filter: brightness(1.12); }
    }

    /* Popup Maps — vuelo como polaroids */
    .maps-fs {
      position: fixed;
      inset: 0;
      z-index: 13500;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      perspective: 1400px;
    }
    .maps-fs.abierta { opacity: 1; pointer-events: auto; }
    .maps-fs[hidden] { display: none !important; }
    .maps-fs-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0);
      transition: background 0.45s ease;
      cursor: zoom-out;
    }
    .maps-fs.abierta .maps-fs-backdrop {
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    .maps-fs-flash {
      position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
      background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.5), transparent 65%);
    }
    .maps-fs.impacto .maps-fs-flash {
      animation: galeria-flash-golpe 0.4s ease-out forwards;
    }
    .maps-fs-onda {
      position: absolute; left: 50%; top: 50%; z-index: 1;
      width: 48px; height: 48px; margin: -24px 0 0 -24px;
      border: 3px solid rgba(232,255,0,0.5); border-radius: 50%;
      opacity: 0; pointer-events: none;
    }
    .maps-fs.impacto .maps-fs-onda {
      animation: galeria-onda-choque 0.7s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
    }
    .maps-fs-cerrar {
      position: absolute;
      top: max(12px, env(safe-area-inset-top));
      right: max(14px, env(safe-area-inset-right));
      z-index: 5;
      width: 48px; height: 48px;
      border: 2px solid #0a0a0a; border-radius: 50%;
      background: #f4efe4; color: #0a0a0a;
      font-size: 28px; line-height: 1; cursor: pointer;
      box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
      opacity: 0; transform: scale(0.6);
      transition: opacity 0.2s, transform 0.2s, background 0.15s;
    }
    .maps-fs.pegada .maps-fs-cerrar { opacity: 1; transform: scale(1); }
    .maps-fs-cerrar:hover { background: #e8ff00; }
    .maps-fs-panel {
      position: fixed;
      left: 50%; top: 50%;
      z-index: 3;
      width: min(92vw, 720px);
      max-height: min(82vh, 640px);
      display: flex;
      flex-direction: column;
      background: #f7f4ec;
      border: 3px solid #0a0a0a;
      box-shadow: 6px 8px 0 #8b0000, 0 28px 70px rgba(0,0,0,0.55);
      opacity: 0;
      transform-origin: center center;
      will-change: transform, opacity;
      overflow: hidden;
    }
    .maps-fs.vuelo .maps-fs-panel {
      animation: maps-fs-vuelo 0.8s cubic-bezier(0.14, 0.75, 0.2, 1) forwards;
    }
    @keyframes maps-fs-vuelo {
      0% {
        opacity: 0.85;
        transform:
          translate(-50%, -50%)
          translate(var(--maps-from-x, 0px), var(--maps-from-y, 0px))
          scale(var(--maps-from-s, 0.15))
          rotateY(-480deg) rotateZ(14deg);
        filter: blur(1px);
      }
      72% {
        opacity: 1;
        filter: none;
        transform: translate(-50%, -50%) scale(1.08) rotateY(18deg) rotateZ(-3deg);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotateY(0) rotateZ(-1deg);
        filter: none;
      }
    }
    .maps-fs.pegada .maps-fs-panel {
      opacity: 1 !important;
      animation: maps-fs-pegada 0.4s ease-out forwards;
    }
    @keyframes maps-fs-pegada {
      0%   { transform: translate(-50%, -50%) scale(1.03) rotate(-1deg); }
      25%  { transform: translate(calc(-50% - 3px), calc(-50% + 2px)) rotate(0.5deg); }
      100% { transform: translate(-50%, -50%) scale(1) rotate(-0.8deg); }
    }
    .maps-fs.impacto { animation: galeria-retumbo-capa 0.55s ease-out; }
    .maps-fs-head {
      padding: 12px 14px 10px;
      border-bottom: 2px solid #0a0a0a;
      background: linear-gradient(180deg, #fff 0%, #f0ebe0 100%);
    }
    .maps-fs-badge {
      display: inline-block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px; font-weight: 700;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: #0a0a0a; background: #e8ff00;
      border: 2px solid #0a0a0a;
      padding: 2px 8px;
      box-shadow: 2px 2px 0 #8b0000;
      transform: rotate(-2deg);
      margin-bottom: 6px;
    }
    .maps-fs-titulo {
      margin: 0 0 6px;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(16px, 3.5vw, 22px);
      letter-spacing: 1px;
      color: #0a0a0a;
      text-transform: uppercase;
    }
    .maps-fs-link {
      font-family: 'Permanent Marker', cursive;
      font-size: 13px;
      color: #8b0000;
      text-decoration: none;
    }
    .maps-fs-link:hover { color: #0a0a0a; text-decoration: underline; }
    .maps-fs-frame {
      flex: 1;
      min-height: min(52vh, 420px);
      background: #ddd;
      position: relative;
    }
    .maps-fs-iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0;
    }
    .maps-fs.saliendo .maps-fs-panel {
      animation: maps-fs-out 0.28s ease-in forwards;
    }
    .maps-fs.saliendo .maps-fs-backdrop {
      background: rgba(0,0,0,0) !important;
    }
    @keyframes maps-fs-out {
      to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotateY(35deg) rotateZ(-8deg);
      }
    }

    .concierto-sep {
      height: 2px; margin: 2px 0 6px;
      background: linear-gradient(90deg, #8b0000, rgba(232,255,0,0.45), transparent);
      opacity: 0.65;
    }
    .conciertos-lista .concierto-sep { display: none; }

    .conciertos-modo-tabs {
      display: flex; gap: 6px; justify-content: center;
      margin-bottom: clamp(8px, 1vh, 12px);
      flex-wrap: wrap;
    }
    .conciertos-modo-tab {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 0.75vw, 8.5px); font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      padding: 5px 12px;
      color: #f2ebe0;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 #0a0a0a;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .conciertos-modo-tab:hover {
      color: #e8ff00;
      background: #a50000;
    }
    .conciertos-modo-tab.activo {
      color: #0a0a0a;
      background: #e8ff00;
      border-color: #0a0a0a;
      box-shadow: 2px 2px 0 #8b0000;
    }
    .conciertos-panel[hidden] { display: none !important; }

    .conciertos-past-tabs {
      display: flex; gap: 5px; flex-wrap: nowrap;
      overflow-x: auto; scrollbar-width: none;
      margin-bottom: clamp(8px, 1vh, 10px);
      padding: 2px 1px 4px;
      -webkit-overflow-scrolling: touch;
    }
    .conciertos-past-tabs::-webkit-scrollbar { display: none; }
    .concierto-past-tab {
      flex: 0 0 auto;
      max-width: 140px;
      padding: 7px 10px;
      text-align: left;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      cursor: pointer;
      transform: rotate(-0.8deg);
      box-shadow: 3px 3px 0 #0a0a0a;
      transition: border-color 0.2s, transform 0.2s, background 0.2s;
    }
    .concierto-past-tab:hover { background: #a50000; }
    .concierto-past-tab.activo {
      background: #a50000;
      border-color: #0a0a0a;
      transform: rotate(0deg) translateY(-1px);
      box-shadow: 4px 4px 0 #0a0a0a;
    }
    .concierto-past-tab-fecha {
      display: block;
      font-family: 'Black Ops One', sans-serif;
      font-size: 11px;
      color: #e8ff00;
      letter-spacing: 0.04em;
      line-height: 1.1;
    }
    .concierto-past-tab-lugar {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-size: 6.5px; font-weight: 700;
      letter-spacing: 0.5px; text-transform: uppercase;
      color: rgba(242,235,224,0.65);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-top: 2px;
    }

    .concierto-archivo {
      position: relative;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      padding: clamp(10px, 1.2vh, 14px);
      margin-bottom: clamp(8px, 1vh, 10px);
      transform: rotate(-0.6deg);
      box-shadow: 4px 4px 0 #0a0a0a;
      clip-path: polygon(1% 4%, 8% 0%, 94% 2%, 100% 8%, 98% 94%, 88% 100%, 4% 98%, 0% 86%);
      overflow: hidden;
    }
    .concierto-archivo-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      color: rgba(232,255,0,0.75);
      margin-bottom: 8px;
    }
    .concierto-cartel-img {
      width: 100%; height: auto; display: block;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 4px 0 #8b0000;
      filter: contrast(1.05) saturate(0.95);
    }
    .concierto-fotos-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .concierto-foto {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 3px 0 #8b0000;
      cursor: zoom-in;
      transition: transform 0.15s;
    }
    .concierto-foto:hover { transform: scale(1.03); }
    .concierto-video-wrap {
      margin-bottom: 8px;
    }
    .concierto-video-wrap:last-child { margin-bottom: 0; }
    .concierto-video {
      width: 100%; display: block;
      max-height: 180px;
      background: #050505;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 3px 0 #8b0000;
    }
    .concierto-articulo {
      padding: 9px 10px;
      margin-bottom: 6px;
      background: rgba(0,0,0,0.22);
      border-left: 3px solid #e8ff00;
    }
    .concierto-articulo:last-child { margin-bottom: 0; }
    .concierto-articulo-titulo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(14px, 1.5vw, 17px);
      letter-spacing: 1px;
      color: #f2ebe0;
      margin-bottom: 4px;
    }
    .concierto-articulo-cuerpo {
      font-family: 'Archivo', sans-serif;
      font-size: clamp(10px, 1vw, 12px);
      font-weight: 600;
      line-height: 1.45;
      color: rgba(242,235,224,0.82);
      margin-bottom: 4px;
      white-space: pre-line;
    }
    .concierto-articulo-fuente {
      font-family: 'JetBrains Mono', monospace;
      font-size: 6.5px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      color: rgba(232,255,0,0.6);
    }
    .concierto-articulo-link {
      display: inline-block; margin-top: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; font-weight: 700;
      letter-spacing: 0.8px; text-transform: uppercase;
      color: #e8ff00; text-decoration: none;
    }
    .concierto-articulo-link:hover { text-decoration: underline; }
    .concierto-archivo-vacio {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      color: rgba(242,235,224,0.45);
      text-align: center;
      padding: 12px 8px;
    }

    .foto-lightbox {
      position: fixed; inset: 0; z-index: 210;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,0.88);
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
      cursor: zoom-out;
    }
    .foto-lightbox.abierto { opacity: 1; pointer-events: auto; }
    .foto-lightbox img {
      max-width: min(92vw, 720px);
      max-height: 88vh;
      border: 3px solid #e8ff00;
      box-shadow: 8px 10px 0 #8b0000;
    }

    /* RMI — esquina inferior derecha */
    .rmi-esquina {
      position: fixed; bottom: 12px; right: 14px; z-index: 25;
      display: flex; flex-direction: column; align-items: flex-end;
      gap: 3px; text-decoration: none; pointer-events: auto;
      transition: opacity 0.2s ease;
    }
    .rmi-esquina:hover { opacity: 0.85; }
    .rmi-esquina-logo {
      height: 12px; width: auto;
      filter: brightness(0); opacity: 0.72;
    }
    .rmi-esquina-txt,
    .rmi-esquina-web,
    .rmi-esquina-tel {
      font-family: 'JetBrains Mono', monospace;
      font-size: 6.5px; font-weight: 700;
      letter-spacing: 0.9px; line-height: 1.35;
      color: rgba(0,0,0,0.68); text-align: right;
    }
    .rmi-esquina-tel { opacity: 0.55; letter-spacing: 0.6px; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ▶ COLUMNA CENTRAL — OUT NOW · disco · venta · compra
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #col-central {
      justify-content: flex-start;
      align-items: stretch;
      width: 100%;
      --centro-ancho: 100%;
      padding-left: clamp(8px, 1.1vw, 18px);
      padding-right: clamp(8px, 1.1vw, 18px);
      container-type: inline-size;
      container-name: col-central;
    }
    #col-central > .outnow-hero,
    #col-central > .centro-duo,
    #col-central > .titulo-album,
    #col-central > .subtitulo-album,
    #col-central > .prensa-wrap {
      width: 100%;
      max-width: var(--centro-ancho);
    }

    /* Disco + Ya a la venta en paralelo */
    .centro-duo {
      position: relative;
      width: 100%;
      max-width: 100%;
      container-type: inline-size;
      container-name: centro-duo;
      margin: 0 auto clamp(6px, 1vh, 12px);
      padding: clamp(12px, 1.6vh, 18px) clamp(10px, 1.4vw, 16px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(10px, 1.6vw, 18px);
      align-items: stretch;
      flex-shrink: 0;
      background:
        linear-gradient(135deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.18) 100%);
      border: 1.5px solid rgba(255,255,255,0.07);
      box-shadow:
        inset 0 0 30px rgba(0,0,0,0.15),
        4px 6px 0 rgba(139,0,0,0.35);
      transform: rotate(-0.6deg);
      clip-path: polygon(
        1% 4%, 7% 1%, 48% 2%, 93% 0%, 99% 6%, 100% 12%,
        99% 88%, 94% 100%, 52% 98%, 6% 100%, 0% 92%, 1% 18%
      );
    }
    .centro-duo::before {
      content: '';
      position: absolute;
      top: 10%; bottom: 10%;
      left: 50%;
      width: 3px;
      transform: translateX(-50%) rotate(-1.2deg);
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(232,255,0,0.55) 18%,
        rgba(139,0,0,0.75) 50%,
        rgba(232,255,0,0.45) 82%,
        transparent 100%
      );
      opacity: 0.7;
      pointer-events: none;
      z-index: 1;
      filter: blur(0.3px);
    }
    .centro-duo-celda {
      position: relative;
      z-index: 2;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .centro-duo-celda--disco {
      padding: clamp(2px, 0.4vh, 4px) clamp(2px, 0.5vw, 4px) 0 0;
    }
    .centro-duo-celda--venta {
      padding: clamp(2px, 0.4vh, 4px) 0 0 clamp(2px, 0.5vw, 4px);
      transform: rotate(0.8deg);
    }
    .centro-duo .portada-wrap {
      width: 100%;
      margin-bottom: 0;
    }
    .centro-duo .imagen-portada {
      width: 100%;
      max-width: 100%;
      animation: flotarDiscoParalelo 5s ease-in-out infinite;
    }
    @keyframes flotarDiscoParalelo {
      0%, 100% { transform: translateY(0) rotate(-1.5deg); }
      50%      { transform: translateY(-5px) rotate(0.8deg); }
    }
    .centro-duo .portada-sticker {
      font-size: clamp(12px, 3.5cqi, 20px);
      bottom: -6px;
      left: -8px;
      padding: 4px 10px 5px;
    }
    .centro-duo .portada-cinta--tl { width: clamp(52px, 14cqi, 80px); height: clamp(16px, 4cqi, 24px); top: -6px; left: 10px; }
    .centro-duo .portada-cinta--br { width: clamp(58px, 16cqi, 90px); height: clamp(18px, 4.5cqi, 26px); bottom: 16px; right: -8px; }
    .centro-duo .ya-hero {
      width: 100%;
      max-width: 100%;
      margin: 0;
      height: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: clamp(4px, 0.8vh, 8px) clamp(2px, 0.4vw, 4px);
    }

    /* Hueco central: modos venta / videoclip */
    .centro-duo-celda--venta[hidden],
    .slot-modo[hidden] { display: none !important; }
    .slot-modo {
      width: 100%;
      height: 100%;
      min-height: 0;
    }
    .slot-modo--videoclip {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    /*
      Videoclip: tele a mitad del disco, antenas fuera por arriba.
      El marco grande se recorta por abajo (justo tras el cajetín).
    */
    .centro-duo:has(#slot-videoclip:not([hidden])) {
      overflow: visible; /* antenas pueden salir por arriba */
      clip-path: none;
      align-items: start; /* no estira celdas → recorta hueco vacío abajo */
      /* marco ceñido justo bajo el cajetín */
      padding-top: clamp(6px, 1vh, 12px);
      padding-bottom: clamp(8px, 1.2vh, 14px);
      margin-bottom: clamp(2px, 0.5vh, 8px);
      min-height: 0;
      height: auto;
    }
    .centro-duo-celda--disco:has(+ .centro-duo-celda--venta #slot-videoclip:not([hidden])),
    .centro-duo:has(#slot-videoclip:not([hidden])) .centro-duo-celda--disco {
      align-self: start;
      justify-content: center;
      padding-bottom: 0;
    }
    .centro-duo-celda--venta:has(#slot-videoclip:not([hidden])) {
      overflow: visible;
      justify-content: flex-start;
      align-items: center; /* tele centrada en su mitad del marco */
      align-self: start;
      height: auto;
      width: 100%;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
    }

    /* ── Videoclip: mismo grunge que YA A LA VENTA + tele naranja ── */
    .tv-hero--grunge {
      overflow: visible;
      justify-content: flex-start;
      align-items: center;
      height: auto;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      padding-bottom: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin: 0 auto;
    }
    .tv-hero--grunge .ya-bloque {
      overflow: visible;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: auto;
      min-height: 0;
      width: 100%;
      position: relative;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin: 0 auto;
    }
    .tv-hero--grunge .ya-pre {
      position: relative;
      z-index: 6;
      margin-bottom: 2px !important;
    }
    .tv-hero--grunge .ya-titular {
      position: relative;
      z-index: 6;
      margin-bottom: 0 !important;
      margin-top: 0;
      /* el asa de la tele se acerca a esta línea */
      line-height: 0.9;
    }
    /* título NUEVO VIDEOCLIP (tamaño normal) */
    .tv-hero--grunge .ya-linea.tv-linea-l1 {
      font-size: clamp(14px, 7.5cqi, 28px);
      letter-spacing: 0.04em;
      color: #e8ff00;
      text-shadow:
        2px 2px 0 #8b0000,
        0 0 14px rgba(232, 255, 0, 0.35);
    }
    .tv-hero--grunge .ya-linea.tv-linea-l2 {
      font-size: clamp(13px, 7cqi, 26px);
      letter-spacing: 0.03em;
    }
    .tv-hero--grunge .ya-fantasma {
      font-size: clamp(22px, 12cqi, 48px);
    }

    /*
      Tele con PNG recortado (hueco en pantalla):
      1) .tv-media  → vídeo DETRÁS
      2) .tv-frame  → marco naranja con alpha (encima)
      3) .tv-play   → botón aéreo centrado en el hueco
    */
    .tv-set {
      position: relative;
      z-index: 3;
      /* tamaño anterior (antes del “doble”) */
      width: min(100%, 420px);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      /*
        Sube fuerte:
        el asa de la tele ≈ «NUEVO VIDEOCLIP».
        Antenas sobresalen del marco por arriba.
        translateX negativo: centra en su celda.
      */
      transform: translate(
        clamp(-18px, -4cqi, -8px),
        clamp(-132px, -32cqi, -78px)
      );
      filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
      isolation: isolate;
    }
    .tv-frame {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }
    /*
      Capa de vídeo un poco MÁS GRANDE que el hueco del PNG
      para que no se vean bordes/gaps detrás del marco.
    */
    .tv-media {
      position: absolute;
      /* hueco ~24.5/48.6/59.5/42.5 → expandido ~+4% por lado */
      left: 21.5%;
      top: 46.2%;
      width: 65.5%;
      height: 48%;
      z-index: 1;
      overflow: hidden;
      border-radius: 8% / 10%;
      background: #000;
    }
    .tv-static {
      position: absolute;
      inset: -20%;
      z-index: 1;
      opacity: 0.55;
      background:
        repeating-radial-gradient(circle at 40% 40%, #1c1c1c 0 1px, transparent 1px 3px),
        repeating-linear-gradient(0deg, #0e0e0e 0 1px, #1a1a1a 1px 2px);
      animation: tvStatic 0.18s steps(2) infinite;
      pointer-events: none;
    }
    .tv-set[data-state="playing"] .tv-static {
      opacity: 0;
      animation: none;
      transition: opacity 0.3s;
    }
    @keyframes tvStatic {
      0% { transform: translate(0, 0); }
      50% { transform: translate(-2%, 1%); }
      100% { transform: translate(1%, -1%); }
    }
    .tv-video,
    .tv-youtube {
      position: absolute;
      /* sobredimensionar el media para tapar huecos del recorte */
      left: 50%;
      top: 50%;
      width: 130%;
      height: 130%;
      z-index: 2;
      border: 0;
      object-fit: cover;
      background: #000;
      transform: translate(-50%, -50%);
      transform-origin: center center;
    }
    .tv-youtube {
      /* YouTube: zoom extra para quitar letterbox y bordes */
      width: 150%;
      height: 150%;
    }
    .tv-video[hidden],
    .tv-youtube[hidden] { display: none !important; }

    /* Play grunge: centro al idle · esquina dcha. al reproducir (pause) */
    .tv-play {
      position: absolute;
      left: 24.5%;
      top: 48.6%;
      width: 59.5%;
      height: 42.5%;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      /* desliza a la esquina cuando hay play */
      transition:
        left 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
        top 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
        width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
        height 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
        opacity 0.28s ease;
    }
    /* En reproducción: esquina dcha. FUERA de la pantalla CRT (sobre el marco) */
    .tv-set[data-state="playing"] .tv-play {
      left: auto;
      right: 2%;
      top: auto;
      bottom: 6%;
      width: auto;
      height: auto;
      align-items: center;
      justify-content: center;
      opacity: 1;
      pointer-events: auto;
      z-index: 5; /* por encima del marco naranja */
    }
    .tv-set[data-state="frozen"] .tv-play {
      opacity: 0;
      pointer-events: none;
    }
    .tv-play-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: clamp(8px, 2.2cqi, 12px) clamp(14px, 4cqi, 22px);
      font-family: 'Black Ops One', sans-serif;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #0a0a0a;
      background: #e8ff00;
      border: 2.5px solid #0a0a0a;
      box-shadow:
        4px 4px 0 #8b0000,
        0 0 18px rgba(232, 255, 0, 0.35);
      transform: rotate(-3deg);
      clip-path: polygon(
        3% 10%, 10% 2%, 48% 5%, 90% 0%, 100% 12%,
        98% 88%, 88% 100%, 50% 95%, 8% 100%, 0% 80%
      );
      transition:
        transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1),
        box-shadow 0.2s,
        filter 0.15s,
        background 0.15s,
        padding 0.35s,
        gap 0.35s;
      animation: tvPlayPulse 2s ease-in-out infinite;
    }
    /* Badge más compacto en esquina (pause) */
    .tv-set[data-state="playing"] .tv-play-badge {
      padding: clamp(5px, 1.4cqi, 8px) clamp(8px, 2.2cqi, 12px);
      gap: 4px;
      transform: rotate(4deg) scale(0.92);
      animation: none;
      background: #e8ff00;
      box-shadow: 3px 3px 0 #8b0000;
    }
    @keyframes tvPlayPulse {
      0%, 100% {
        transform: rotate(-3deg) scale(1);
        filter: brightness(1);
      }
      50% {
        transform: rotate(-1.5deg) scale(1.05);
        filter: brightness(1.08);
      }
    }
    .tv-play-ico {
      font-size: clamp(14px, 4.2cqi, 20px);
      line-height: 1;
      color: #0a0a0a;
      transform: translateX(1px);
      pointer-events: none;
      text-shadow: none;
      transition: font-size 0.35s;
    }
    .tv-set[data-state="playing"] .tv-play-ico {
      font-size: clamp(11px, 3.2cqi, 15px);
      transform: none;
    }
    .tv-play-label {
      font-size: clamp(12px, 3.6cqi, 16px);
      line-height: 1;
      pointer-events: none;
      transition: font-size 0.35s, opacity 0.25s, max-width 0.35s;
      max-width: 5em;
      overflow: hidden;
      white-space: nowrap;
    }
    .tv-set[data-state="playing"] .tv-play-label {
      font-size: clamp(9px, 2.6cqi, 11px);
      letter-spacing: 1px;
    }
    .tv-play:hover .tv-play-badge,
    .tv-play:focus-visible .tv-play-badge {
      background: #fff45a;
      color: #0a0a0a;
      transform: rotate(0deg) translateY(-2px) scale(1.06);
      box-shadow:
        6px 6px 0 #0a0a0a,
        0 0 24px rgba(232, 255, 0, 0.5);
      animation: none;
      outline: none;
    }
    .tv-set[data-state="playing"] .tv-play:hover .tv-play-badge {
      transform: rotate(2deg) translateY(-2px) scale(1.05);
    }
    .tv-play:active .tv-play-badge {
      transform: rotate(-1deg) translateY(1px) scale(0.98);
      box-shadow: 2px 2px 0 #8b0000;
    }
    .tv-play:focus-visible {
      outline: none;
    }
    /* Cajetín BLANCO — sigue a la tele (sube con ella) */
    .tv-fs-ask {
      position: relative;
      z-index: 5;
      width: min(100%, 270px);
      /* margen negativo fuerte: se queda bajo el CRT tras subir la tele */
      margin: clamp(-96px, -22cqi, -56px) auto 0;
      padding: 9px 11px 10px;
      transform: rotate(-2deg);
      text-align: center;
      color: #0a0a0a;
      background: #f7f4ec;
      border: 2px solid #0a0a0a;
      box-shadow: 4px 4px 0 #0a0a0a;
      clip-path: polygon(
        2% 8%, 8% 2%, 48% 4%, 92% 0%, 100% 10%,
        98% 88%, 90% 100%, 52% 96%, 8% 100%, 0% 82%
      );
    }
    .tv-fs-ask[hidden] { display: none !important; }
    .tv-fs-ask-txt {
      margin: 0 0 8px;
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(11px, 3.1cqi, 13px);
      line-height: 1.22;
      color: #1a1510;
      text-shadow: none;
    }
    .tv-fs-ask-btns {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .tv-fs-ask-btn {
      min-width: 58px;
      padding: 6px 14px 7px;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(11px, 2.8cqi, 14px);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      border: 2px solid #0a0a0a;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    }
    .tv-fs-ask-btn--si {
      color: #0a0a0a;
      background: #e8ff00;
      box-shadow: 2px 2px 0 #0a0a0a;
      transform: rotate(-2deg);
    }
    .tv-fs-ask-btn--si2 {
      transform: rotate(2.5deg);
      background: #e8ff00;
    }
    .tv-fs-ask-btn:hover {
      transform: rotate(0deg) translateY(-2px);
      filter: brightness(1.05);
      box-shadow: 4px 4px 0 #0a0a0a;
    }
    .tv-fs-ask.rechazado {
      animation: tvFsAskOut 0.35s ease forwards;
    }
    @keyframes tvFsAskOut {
      to {
        opacity: 0;
        transform: rotate(6deg) scale(0.85);
      }
    }

    /* Títulos videoclip un poco más compactos */
    .tv-hero--grunge .ya-pre {
      margin-bottom: 0 !important;
      font-size: clamp(6px, 2cqi, 8px) !important;
    }
    .tv-hero--grunge .ya-titular {
      margin-bottom: 0 !important;
    }
    .tv-hero--grunge .ya-linea.tv-linea-l1 {
      font-size: clamp(14px, 7.5cqi, 28px);
    }
    .tv-hero--grunge .ya-linea.tv-linea-l2 {
      font-size: clamp(13px, 7cqi, 26px);
    }

    /* Popup fullscreen sin marcos — vuelo desde la tele */
    .tv-fs {
      position: fixed;
      inset: 0;
      z-index: 14000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      perspective: 1400px;
    }
    .tv-fs.abierta {
      opacity: 1;
      pointer-events: auto;
    }
    .tv-fs[hidden] { display: none !important; }
    .tv-fs-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0);
      transition: background 0.5s ease;
      cursor: zoom-out;
    }
    .tv-fs.abierta .tv-fs-backdrop {
      background: rgba(0, 0, 0, 0.78);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    .tv-fs-flash {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.55), transparent 65%);
    }
    .tv-fs.impacto .tv-fs-flash {
      animation: galeria-flash-golpe 0.4s ease-out forwards;
    }
    .tv-fs-onda {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 48px;
      height: 48px;
      margin: -24px 0 0 -24px;
      border: 3px solid rgba(232, 255, 0, 0.5);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }
    .tv-fs.impacto .tv-fs-onda {
      animation: galeria-onda-choque 0.7s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
    }
    .tv-fs-cerrar {
      position: absolute;
      top: max(12px, env(safe-area-inset-top));
      right: max(14px, env(safe-area-inset-right));
      z-index: 5;
      width: 48px;
      height: 48px;
      border: 2px solid #0a0a0a;
      border-radius: 50%;
      background: #f4efe4;
      color: #0a0a0a;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.2s, transform 0.2s, background 0.15s;
    }
    .tv-fs.pegada .tv-fs-cerrar {
      opacity: 1;
      transform: scale(1);
    }
    .tv-fs-cerrar:hover { background: #e8ff00; }

    .tv-fs-player {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 3;
      width: min(94vw, 960px);
      aspect-ratio: 16 / 9;
      max-height: min(78vh, 540px);
      background: #000;
      overflow: hidden;
      opacity: 0;
      transform-origin: center center;
      will-change: transform, opacity;
      box-shadow:
        0 0 0 2px #0a0a0a,
        0 28px 70px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(232, 255, 0, 0.12);
    }
    /* Vuelo: sale de la pantalla de la tele girando y se pega al cristal */
    .tv-fs.vuelo .tv-fs-player {
      animation: tv-fs-vuelo 0.82s cubic-bezier(0.14, 0.75, 0.2, 1) forwards;
    }
    @keyframes tv-fs-vuelo {
      0% {
        opacity: 0.85;
        transform:
          translate(-50%, -50%)
          translate(var(--tv-from-x, 0px), var(--tv-from-y, 0px))
          scale(var(--tv-from-s, 0.18))
          rotateY(-520deg)
          rotateX(22deg)
          rotateZ(16deg);
        filter: blur(1.5px) brightness(0.85);
      }
      58% {
        opacity: 1;
        filter: blur(0) brightness(1);
      }
      74% {
        transform:
          translate(-50%, -50%)
          scale(1.1)
          rotateY(22deg)
          rotateX(-5deg)
          rotateZ(-3deg);
        box-shadow:
          0 0 0 2px #e8ff00,
          0 40px 90px rgba(0, 0, 0, 0.7),
          0 0 50px rgba(232, 255, 0, 0.25);
      }
      86% {
        transform:
          translate(-50%, -50%)
          scale(1.03)
          rotateY(-5deg)
          rotateZ(2deg);
      }
      100% {
        opacity: 1;
        transform:
          translate(-50%, -50%)
          scale(1)
          rotateY(0deg)
          rotateX(0deg)
          rotateZ(-0.8deg);
        filter: none;
        box-shadow:
          0 0 0 2px #0a0a0a,
          0 22px 55px rgba(0, 0, 0, 0.6),
          4px 6px 0 rgba(139, 0, 0, 0.35);
      }
    }
    .tv-fs.pegada .tv-fs-player {
      opacity: 1 !important;
      animation: tv-fs-pegada 0.45s ease-out forwards;
    }
    @keyframes tv-fs-pegada {
      0%   { transform: translate(-50%, -50%) scale(1.02) rotate(-0.8deg); }
      20%  { transform: translate(calc(-50% - 4px), calc(-50% + 3px)) scale(1.01) rotate(0.4deg); }
      45%  { transform: translate(calc(-50% + 3px), calc(-50% - 2px)) scale(0.995) rotate(-1.1deg); }
      100% { transform: translate(-50%, -50%) scale(1) rotate(-0.6deg); }
    }
    .tv-fs.impacto {
      animation: galeria-retumbo-capa 0.55s ease-out;
    }
    .tv-fs-video,
    .tv-fs-youtube {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
      object-fit: contain;
    }
    .tv-fs-video[hidden],
    .tv-fs-youtube[hidden] { display: none !important; }
    .tv-fs.saliendo .tv-fs-player {
      animation: tv-fs-out 0.28s ease-in forwards;
    }
    .tv-fs.saliendo .tv-fs-backdrop {
      background: rgba(0, 0, 0, 0) !important;
    }
    @keyframes tv-fs-out {
      to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.55) rotateY(40deg) rotateZ(-8deg);
      }
    }
    @media (max-width: 900px) {
      .tv-set {
        width: min(100%, 360px);
        transform: translate(
          clamp(-10px, -2cqi, -4px),
          clamp(-100px, -26cqi, -60px)
        );
      }
      .tv-fs-ask {
        width: min(96%, 250px);
        margin-top: clamp(-72px, -18cqi, -42px);
        margin-left: auto;
        margin-right: auto;
      }
    }
    @media (min-width: 1400px) {
      .tv-set {
        width: min(100%, 460px);
        transform: translate(
          clamp(-22px, -3.5cqi, -10px),
          clamp(-148px, -30cqi, -90px)
        );
      }
      .tv-fs-ask {
        margin-top: clamp(-110px, -20cqi, -64px);
        margin-left: auto;
        margin-right: auto;
      }
    }
    .centro-duo .ya-bloque {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .centro-duo .ya-titular {
      margin-bottom: clamp(4px, 0.6vh, 8px);
    }

    /* Ya a la venta — grunge indie estridente */
    .ya-hero--grunge {
      isolation: isolate;
      transform: rotate(-1.2deg);
    }
    .ya-scan {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      opacity: 0.08; mix-blend-mode: soft-light;
      background: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 2px,
        rgba(0,0,0,0.55) 2px, rgba(0,0,0,0.55) 3px
      );
    }
    .ya-hero--grunge .ya-noise {
      inset: -6px;
      opacity: 0.38;
      mix-blend-mode: overlay;
      background-size: 100px;
    }
    .ya-cinta--izq {
      top: 42%;
      left: -10px;
      transform: rotate(-90deg) translateY(-50%);
      font-size: clamp(6px, 2cqi, 8px);
      padding: 3px 14px;
      background: #8b0000;
      color: #e8ff00;
      letter-spacing: 2.5px;
      box-shadow: 3px 3px 0 #0a0a0a;
      z-index: 5;
    }
    .centro-duo .ya-cinta--top {
      top: -8px;
      right: -6px;
      font-size: clamp(7px, 2.5cqi, 10px);
      padding: 4px 14px;
      transform: rotate(7deg);
      background: #0a0a0a;
      color: #e8ff00;
      border-color: #e8ff00;
      letter-spacing: 3px;
      animation: yaCintaPulse 2.2s step-end infinite;
    }
    @keyframes yaCintaPulse {
      0%, 86%, 100% { filter: brightness(1); }
      88% { filter: brightness(1.35); }
      90% { filter: brightness(0.85); }
    }
    .ya-hero--grunge .ya-bloque {
      padding: clamp(4px, 0.6vh, 8px) clamp(4px, 0.6vw, 6px) 0;
      background: transparent;
    }
    .centro-duo .ya-pre,
    .ya-hero--grunge .ya-pre {
      display: inline-block;
      font-size: clamp(6px, 2.6cqi, 9px);
      letter-spacing: 2px;
      margin: 0 auto clamp(6px, 0.8vh, 10px);
      padding: 0;
      color: #e8ff00;
      background: transparent;
      border: none;
      text-shadow: 0 0 12px rgba(232,255,0,0.45), 1px 1px 0 rgba(0,0,0,0.5);
      animation: yaPreParpadeo 2s step-end infinite;
    }
    @keyframes yaPreParpadeo {
      0%, 84%, 100% { opacity: 1; }
      86% { opacity: 0.4; }
      88% { opacity: 1; }
      90% { opacity: 0.55; }
    }
    @keyframes glitchA {
      0%, 93%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      94% { clip-path: inset(8% 0 55% 0); opacity: 1; transform: translate(-4px, 2px); }
      95% { clip-path: inset(60% 0 5% 0); opacity: 1; transform: translate(-2px, 0); }
      96% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes glitchB {
      0%, 91%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      92% { clip-path: inset(40% 0 20% 0); opacity: 1; transform: translate(3px, -2px); }
      93% { clip-path: inset(0 0 70% 0); opacity: 1; }
      94% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }

    .ya-glitch {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(20px, 11cqi, 44px);
      letter-spacing: 0.06em;
      line-height: 0.82;
      pointer-events: none;
      white-space: nowrap;
    }
    .ya-glitch--a {
      color: rgba(139,0,0,0.55);
      transform: translate(-3px, 2px) rotate(-1deg);
      animation: glitchA 3.2s steps(1) infinite;
      mix-blend-mode: screen;
    }
    .ya-glitch--b {
      color: rgba(232,255,0,0.4);
      transform: translate(3px, -2px) rotate(1deg);
      animation: glitchB 4s steps(1) infinite;
      mix-blend-mode: screen;
    }
    .centro-duo .ya-fantasma,
    .ya-hero--grunge .ya-fantasma {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(26px, 15cqi, 58px);
      -webkit-text-stroke: 1px rgba(255,255,255,0.1);
      transform: translate(3px, 4px) rotate(-1deg);
    }
    .centro-duo .ya-main,
    .ya-hero--grunge .ya-main {
      width: 100%;
      animation: yaVibrarGrunge 3.6s ease-in-out infinite;
    }
    .centro-duo .ya-linea,
    .ya-hero--grunge .ya-linea {
      width: 100%;
    }
    @keyframes yaVibrarGrunge {
      0%, 88%, 100% { transform: translate(0) rotate(0deg); }
      90% { transform: translate(3px, -2px) skewX(2deg); }
      91% { transform: translate(-4px, 1px) skewX(-1.5deg); }
      92% { transform: translate(2px, 0); }
      93% { transform: translate(-2px, -1px); }
    }
    .centro-duo .ya-linea--ya,
    .ya-hero--grunge .ya-linea--ya {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(22px, 10.5cqi, 48px);
      color: #f2ebe0;
      text-shadow: 3px 3px 0 #8b0000, -1px -1px 0 #0a0a0a;
      letter-spacing: 0.08em;
      transform: rotate(-2deg);
    }
    .centro-duo .ya-linea--ala,
    .ya-hero--grunge .ya-linea--ala {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(9px, 4.4cqi, 18px);
      color: #8b0000;
      text-shadow: 2px 2px 0 #0a0a0a;
      letter-spacing: 0.28em;
      padding: 2px 10px 3px;
      margin: -2px 0 2px;
      background: #e8ff00;
      border: 2px solid #0a0a0a;
      transform: rotate(1.5deg);
      box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
    }
    .centro-duo .ya-linea--venta,
    .ya-hero--grunge .ya-linea--venta {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(20px, 9.5cqi, 44px);
      color: #e8ff00;
      text-shadow: 4px 4px 0 #0a0a0a, 2px 2px 0 #8b0000, 0 0 28px rgba(232,255,0,0.35);
      letter-spacing: 0.1em;
      transform: rotate(-1deg) scaleX(1.05);
      animation: yaVentaGlow 2.4s ease-in-out infinite;
    }
    @keyframes yaVentaGlow {
      0%, 100% { filter: brightness(1) saturate(1); }
      50%      { filter: brightness(1.12) saturate(1.2); }
    }
    .ya-carrito {
      width: 100%;
      margin-top: clamp(2px, 0.4vh, 6px);
      text-align: left;
      position: relative;
      z-index: 4;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    /* Tipografía carrito — nítida, sin transform en texto */
    .ya-carrito,
    .ya-carrito * {
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
      text-rendering: optimizeLegibility;
    }
    .ya-carrito .carrito-tipo-display {
      font-family: 'Archivo', sans-serif !important;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1.15;
      text-shadow: none !important;
      -webkit-text-stroke: 0;
    }
    .ya-carrito .carrito-tipo-mono {
      font-family: 'JetBrains Mono', monospace !important;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: none !important;
      line-height: 1.2;
      -webkit-text-stroke: 0;
    }
    .ya-carrito .carrito-sim {
      position: relative;
      z-index: 2;
    }
    .carrito-ticket {
      position: relative;
      width: 100%;
      padding: clamp(8px, 2.6cqi, 12px) clamp(7px, 2.2cqi, 10px) clamp(9px, 2.8cqi, 12px);
      background:
        linear-gradient(168deg, #faf4ea 0%, #efe4d4 38%, #f7efe2 72%, #ebe0cf 100%);
      border: 2.5px solid #0a0a0a;
      box-shadow:
        6px 8px 0 rgba(139,0,0,0.72),
        0 14px 24px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.75);
      transform: none;
      clip-path: polygon(
        0% 3%, 5% 0%, 18% 2%, 82% 0%, 96% 3%, 100% 8%,
        100% 92%, 94% 100%, 72% 98%, 12% 100%, 2% 94%, 0% 86%
      );
      isolation: isolate;
      animation: carritoTicketEntra 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.05) 0.45s both;
    }
    @keyframes carritoTicketEntra {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .carrito-ticket::before {
      content: '';
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      opacity: 0.06;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 110px;
    }
    .carrito-ticket::after {
      content: '';
      position: absolute; top: 0; left: 8%; right: 8%; height: 5px; z-index: 1;
      pointer-events: none;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 5px,
        rgba(0,0,0,0.18) 5px, rgba(0,0,0,0.18) 7px
      );
      opacity: 0.55;
    }
    .carrito-ticket-cinta {
      position: absolute; top: -7px; right: -6px; z-index: 5;
      background: #8b0000;
      color: #e8ff00;
      font-size: 7px;
      padding: 3px 8px 4px;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 #0a0a0a;
      transform: none;
      animation: yaCintaPulse 2.2s step-end infinite;
    }
    .carrito-ticket-header {
      position: relative; z-index: 2;
      text-align: center;
      margin: -2px 0 clamp(5px, 1.4cqi, 7px);
    }
    .ya-carrito .compra-etiqueta {
      display: inline-block;
      margin: 0;
      transform: none;
    }
    .ya-carrito .compra-etiqueta::before {
      display: none;
    }
    .centro-duo .ya-carrito .compra-etiqueta-txt {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(13px, 4cqi, 18px);
      padding: 5px 14px 6px;
      letter-spacing: 0.1em;
      box-shadow: 4px 4px 0 #8b0000, 0 0 0 2px #0a0a0a;
      animation: none;
    }
    .centro-duo .ya-excla-txt,
    .ya-hero--grunge .ya-excla-txt {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(13px, 5cqi, 26px);
      color: #fff;
      background: #8b0000;
      padding: 3px 12px 5px;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 4px 0 #0a0a0a;
      text-shadow: 1px 1px 0 #0a0a0a;
      transform: rotate(-4deg) skewX(-3deg);
      animation: yaExclaGrunge 2.2s ease-in-out infinite;
    }
    @keyframes yaExclaGrunge {
      0%, 100% { transform: rotate(-4deg) skewX(-3deg) scale(1); }
      50%      { transform: rotate(-2deg) skewX(-1deg) scale(1.06); }
    }
    /* Carrito en YA A LA VENTA — ticket crema grunge (sin caja negra) */
    .carrito-sim--venta,
    .ya-hero--grunge .carrito-sim {
      position: relative; z-index: 2;
      background: transparent;
      border: none;
      box-shadow: none;
      clip-path: none;
      padding: 0;
      transform: none;
      overflow: visible;
      width: 100%;
    }
    .carrito-sim--venta::before,
    .ya-hero--grunge .carrito-sim::before {
      display: none;
    }
    .ya-hero--grunge .carrito-sim-top {
      display: flex; align-items: center; gap: 5px;
      margin-bottom: clamp(5px, 1.4cqi, 7px);
      padding: 4px 6px;
      background: rgba(0,0,0,0.06);
      border: 1px dashed rgba(0,0,0,0.28);
      transform: none;
    }
    .ya-hero--grunge .carrito-icono-wrap {
      display: flex; align-items: center; justify-content: center;
      width: clamp(22px, 7cqi, 28px); height: clamp(22px, 7cqi, 28px);
      flex-shrink: 0;
      background: #0a0a0a;
      border: 1.5px solid #e8ff00;
      box-shadow: 2px 2px 0 #8b0000;
      transform: none;
    }
    .ya-hero--grunge .carrito-icono {
      width: clamp(13px, 4.2cqi, 16px);
      height: clamp(13px, 4.2cqi, 16px);
      color: #e8ff00;
      filter: none;
    }
    .ya-hero--grunge .carrito-titulo {
      font-size: clamp(7px, 2cqi, 8px);
      color: #0a0a0a;
      flex: 1;
    }
    .ya-hero--grunge .carrito-badge {
      font-family: 'Black Ops One', sans-serif;
      font-size: 9px;
      min-width: 17px;
      height: 17px;
      border-width: 1.5px;
      box-shadow: 1px 2px 0 #8b0000;
    }
    .ya-hero--grunge .carrito-producto {
      position: relative;
      margin-bottom: clamp(5px, 1.4cqi, 7px);
      padding: clamp(5px, 1.6cqi, 7px);
      background: rgba(255,255,255,0.42);
      border: 2px solid rgba(0,0,0,0.22);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
      transform: none;
    }
    .ya-hero--grunge .carrito-producto::before {
      content: '';
      position: absolute; top: -5px; left: 14%;
      width: clamp(28px, 9cqi, 36px); height: 10px;
      background: rgba(230,220,200,0.9);
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      transform: none;
      pointer-events: none;
    }
    .ya-hero--grunge .carrito-item {
      margin-bottom: 0;
      gap: clamp(5px, 1.6cqi, 7px);
      align-items: center;
    }
    .ya-hero--grunge .carrito-item-portada {
      width: clamp(34px, 10.5cqi, 42px);
      height: clamp(34px, 10.5cqi, 42px);
      border: 2px solid #0a0a0a;
      box-shadow: 2px 3px 0 #8b0000;
      transform: none;
    }
    .ya-hero--grunge .carrito-item-nombre {
      font-size: clamp(10px, 2.9cqi, 12px);
      color: #0a0a0a;
      line-height: 1.1;
    }
    .ya-hero--grunge .carrito-item-tipo {
      font-size: clamp(6px, 1.7cqi, 7px);
      color: #0a0a0a;
      opacity: 0.72;
      margin-top: 1px;
    }
    .ya-hero--grunge .carrito-item-precio {
      font-size: clamp(9px, 2.6cqi, 11px);
      color: #8b0000;
      margin-top: 2px;
    }
    .ya-hero--grunge .carrito-cantidad {
      flex-direction: row;
      gap: 3px;
      padding: 3px 4px;
      background: #0a0a0a;
      border: 1.5px solid #e8ff00;
      box-shadow: 2px 2px 0 #8b0000;
      transform: none;
    }
    .ya-hero--grunge .carrito-qty-btn {
      width: 16px;
      height: 16px;
      font-size: 10px;
      line-height: 1;
      background: #e8ff00;
      border: 1.5px solid #0a0a0a;
    }
    .ya-hero--grunge .carrito-qty-btn:hover {
      background: #fff;
      transform: none;
      filter: brightness(1.05);
    }
    .ya-hero--grunge .carrito-qty-num {
      font-size: clamp(7px, 2cqi, 8px);
      color: #e8ff00;
      min-width: 10px;
      text-align: center;
    }
    .ya-hero--grunge .carrito-total {
      display: flex; justify-content: space-between; align-items: center;
      padding: 5px 6px;
      margin-bottom: clamp(5px, 1.4cqi, 7px);
      background: #0a0a0a;
      border: 1.5px solid #e8ff00;
      box-shadow: 2px 3px 0 #8b0000;
      transform: none;
    }
    .ya-hero--grunge .carrito-total-label {
      font-size: clamp(9px, 2.6cqi, 11px);
      color: #f2ebe0;
    }
    .ya-hero--grunge .carrito-total-precio {
      font-size: clamp(11px, 3.2cqi, 14px);
      color: #e8ff00;
      letter-spacing: 0.03em;
    }
    .ya-hero--grunge .carrito-btn {
      font-size: clamp(8px, 2.4cqi, 10px);
      letter-spacing: 0.1em;
      padding: 6px 10px;
      font-family: 'Archivo', sans-serif;
      font-weight: 700;
      box-shadow: 3px 3px 0 #8b0000, 0 0 0 1.5px #0a0a0a;
      animation: carritoBtnBrillo 3.2s ease-in-out infinite;
    }
    @keyframes carritoBtnBrillo {
      0%, 92%, 100% { filter: brightness(1); }
      94% { filter: brightness(1.1); }
    }
    .ya-hero--grunge .carrito-btn:hover {
      box-shadow: 6px 7px 0 #0a0a0a;
      filter: brightness(1.06);
    }
    .ya-hero--grunge .carrito-stripe-nota {
      font-family: 'Archivo', sans-serif;
      font-weight: 600;
      font-size: clamp(8px, 2.3cqi, 10px);
      line-height: 1.4;
      letter-spacing: 0.02em;
      text-transform: none;
      text-align: center;
      color: rgba(0,0,0,0.82);
      margin-top: 6px;
      padding: 0 2px;
    }
    .ya-hero--grunge .carrito-stripe-nota strong {
      font-weight: 700;
      color: #635bff;
    }
    .ya-hero--grunge .carrito-feedback {
      font-size: clamp(6px, 1.6cqi, 7px);
      color: #8b0000;
      margin-top: 3px;
    }
    .ya-chip {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(5.5px, 2cqi, 8px) !important;
      font-weight: 700;
      letter-spacing: 1.6px !important;
      text-transform: uppercase;
      color: #e8ff00 !important;
      background: #0a0a0a;
      border: 1.5px solid rgba(232,255,0,0.5);
      padding: 3px 7px 4px;
      text-shadow: none !important;
      box-shadow: 2px 2px 0 #8b0000;
      transform: rotate(var(--ya-chip-rot, 0deg));
    }
    .ya-chip:nth-child(1) { --ya-chip-rot: -3deg; }
    .ya-chip:nth-child(2) { --ya-chip-rot: 2deg; color: #f2ebe0 !important; border-color: #8b0000; }
    .ya-chip:nth-child(3) { --ya-chip-rot: -1.5deg; }
    .centro-duo + .titulo-album {
      margin-top: clamp(4px, 0.8vh, 8px);
    }

    .outnow-hero {
      position: relative; width: 100%; max-width: 100%;
      margin: 0 auto clamp(4px, 0.8vh, 12px);
      flex-shrink: 0;
    }
    .outnow-hero.revelar {
      opacity: 0;
      transform: rotate(-4deg) scale(1.08) translateY(-20px);
      transition: none;
    }
    #pantalla-principal.visible .outnow-hero.revelar {
      animation: outnowEntrada 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.15s forwards;
    }
    @keyframes outnowEntrada {
      from { opacity: 0; transform: rotate(-4deg) scale(1.08) translateY(-20px); }
      to   { opacity: 1; transform: rotate(-1.2deg) scale(1) translateY(0); }
    }

    .outnow-noise {
      position: absolute; inset: -8px; z-index: 0; pointer-events: none;
      opacity: 0.55; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 128px;
    }

    .outnow-cinta {
      position: absolute; z-index: 4; pointer-events: none;
      background: repeating-linear-gradient(
        -45deg, #1a1a1a, #1a1a1a 6px, #2a2a2a 6px, #2a2a2a 12px);
      box-shadow: 0 3px 10px rgba(0,0,0,0.45);
      padding: 5px 28px;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 2cqi, 9px);
      font-weight: 700; letter-spacing: 3px;
      color: rgba(255,255,255,0.75); text-transform: uppercase;
    }
    .outnow-cinta--izq { top: -6px; left: -14px; transform: rotate(-6deg); }
    .outnow-cinta--der { bottom: -8px; right: -10px; transform: rotate(4deg); }

    .outnow-bloque {
      position: relative; z-index: 2;
      width: 100%;
      background: transparent;
      border: none;
      padding: 4px 0 0;
      box-shadow: none;
    }

    .outnow-pre {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(8px, 2.4cqi, 12px);
      font-weight: 700; letter-spacing: 3.5px;
      text-transform: uppercase; text-align: center;
      color: #e8ff00; margin-bottom: clamp(6px, 0.8vh, 10px);
      text-shadow: 0 0 12px rgba(232,255,0,0.35);
      animation: outnowParpadeo 2.4s step-end infinite;
    }
    @keyframes outnowParpadeo {
      0%, 88%, 100% { opacity: 1; }
      90% { opacity: 0.35; } 92% { opacity: 1; } 94% { opacity: 0.5; }
    }

    .outnow-titular {
      position: relative; text-align: center;
      display: flex; justify-content: center;
      width: 100%;
      margin: 2px 0 clamp(8px, 1vh, 14px);
      line-height: 0.82;
    }
    .outnow-main {
      position: relative; z-index: 2; margin: 0 auto;
      display: inline-flex; align-items: baseline; justify-content: center;
      flex-wrap: nowrap;
      gap: 0.08em;
      width: auto;
      max-width: 100%;
      animation: outnowVibrar 5s ease-in-out infinite;
    }
    @keyframes outnowVibrar {
      0%, 96%, 100% { transform: translate(0); }
      97% { transform: translate(-2px, 1px) skewX(-1deg); }
      98% { transform: translate(3px, -1px) skewX(1deg); }
      99% { transform: translate(-1px, 0); }
    }

    .outnow-palabra-wrap {
      position: relative;
      display: inline-block;
      line-height: 0.9;
    }
    .outnow-palabra-wrap--now {
      transform: rotate(2deg) translateY(-2px);
    }

    .outnow-palabra,
    .outnow-palabra-falla {
      font-family: 'Black Ops One', sans-serif;
      line-height: 0.9;
      text-transform: uppercase;
      -webkit-font-smoothing: antialiased;
      color: #0a0a0a;
      -webkit-text-stroke: clamp(1.5px, 0.42cqi, 3.5px) #FFAB40;
      paint-order: stroke fill;
      text-shadow:
        1px 1px 0 #FF8C1A,
        2px 2px 0 #E87400,
        3px 3px 0 rgba(0,0,0,0.35),
        0 0 18px rgba(255, 171, 64, 0.45);
    }
    .outnow-palabra-falla {
      position: absolute;
      inset: 0;
      pointer-events: none;
      white-space: nowrap;
    }
    .outnow-palabra-falla--a {
      color: #FFAB40;
      -webkit-text-stroke: clamp(1px, 0.28cqi, 2px) #0a0a0a;
      text-shadow: none;
      animation: outnowFallaA 3.5s steps(1) infinite;
    }
    .outnow-palabra-falla--b {
      color: #0a0a0a;
      -webkit-text-stroke: clamp(1px, 0.28cqi, 2px) #FFD180;
      text-shadow: 0 0 14px rgba(255, 171, 64, 0.65);
      animation: outnowFallaB 4.2s steps(1) infinite;
    }
    @keyframes outnowFallaA {
      0%, 93%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
      94% { clip-path: inset(8% 0 55% 0); opacity: 1; transform: translate(-5px, 2px); }
      95% { clip-path: inset(60% 0 5% 0); opacity: 1; transform: translate(-3px, 0); }
      96% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowFallaB {
      0%, 91%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
      92% { clip-path: inset(40% 0 20% 0); opacity: 1; transform: translate(4px, -2px); }
      93% { clip-path: inset(0 0 70% 0); opacity: 1; transform: translate(2px, 1px); }
      94% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }

    .outnow-palabra {
      position: relative;
      z-index: 2;
      display: inline-block;
      animation: outnowFallaMain 3.8s steps(1) infinite;
    }
    @keyframes outnowFallaMain {
      0%, 87%, 100% { clip-path: inset(0 0 0 0); filter: none; transform: translate(0); }
      88% { clip-path: inset(12% 0 58% 0); filter: brightness(1.35); transform: translate(-3px, 1px); }
      89% { clip-path: inset(62% 0 8% 0); filter: brightness(0.85); transform: translate(2px, -1px); }
      90% { clip-path: inset(0 0 0 0); filter: none; transform: translate(0); }
      91% { clip-path: inset(35% 0 38% 0); filter: brightness(1.5) saturate(1.3); transform: translate(-4px, 0); }
      92% { clip-path: inset(0 0 0 0); filter: none; transform: translate(0); }
    }

    .outnow-palabra-wrap--out .outnow-palabra,
    .outnow-palabra-wrap--out .outnow-palabra-falla {
      font-size: clamp(44px, 14cqi, 108px);
      letter-spacing: 0.04em;
    }
    .outnow-palabra-wrap--now .outnow-palabra,
    .outnow-palabra-wrap--now .outnow-palabra-falla {
      font-size: clamp(50px, 16.5cqi, 118px);
      letter-spacing: 0.02em;
    }
    .outnow-palabra-wrap--now .outnow-palabra-falla--a { animation-delay: 0.35s; }
    .outnow-palabra-wrap--now .outnow-palabra-falla--b { animation-delay: 0.55s; }
    .outnow-palabra-wrap--now .outnow-palabra { animation-delay: 0.4s; }

    /* ═══════════════════════════════════════════════════════════
       OUT NOW — variantes grunge (clase en #outnow-hero)
       original|glitch|acid|blood|neon|scratch|spray|burn|poster|static
       + Grial: chrome|hologram|ember|film|matrix|shock|godrays
    ═══════════════════════════════════════════════════════════ */

    /* —— ACID: corrosivo lima / goteo —— */
    .outnow-fx--acid .outnow-pre { color: #c8ff00; text-shadow: 0 0 14px rgba(200,255,0,0.5); }
    .outnow-fx--acid .outnow-palabra,
    .outnow-fx--acid .outnow-palabra-falla {
      color: #12140a;
      -webkit-text-stroke: clamp(1.5px, 0.42cqi, 3.5px) #c8ff00;
      text-shadow:
        1px 1px 0 #8fbf00,
        2px 3px 0 #5a7a00,
        3px 5px 0 rgba(0,0,0,0.4),
        0 0 22px rgba(200,255,0,0.55),
        0 8px 0 rgba(90,122,0,0.25);
    }
    .outnow-fx--acid .outnow-palabra-falla--a {
      color: #c8ff00; -webkit-text-stroke: clamp(1px, 0.28cqi, 2px) #1a2200;
      text-shadow: none;
      animation: outnowAcidA 4s steps(1) infinite;
    }
    .outnow-fx--acid .outnow-palabra-falla--b {
      color: #6a8f00; -webkit-text-stroke: none;
      text-shadow: 0 0 18px rgba(200,255,0,0.7);
      animation: outnowAcidB 5.2s steps(1) infinite;
    }
    .outnow-fx--acid .outnow-palabra {
      animation: outnowAcidMain 4.5s steps(1) infinite;
      filter: contrast(1.15) saturate(1.2);
    }
    @keyframes outnowAcidA {
      0%, 90%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
      91% { clip-path: inset(0 0 40% 0); opacity: 0.9; transform: translate(-4px, 3px) skewY(1deg); }
      93% { clip-path: inset(50% 0 0 0); opacity: 0.7; transform: translate(2px, 6px); }
      95% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowAcidB {
      0%, 88%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      89% { clip-path: polygon(0 20%, 100% 15%, 100% 55%, 0 60%); opacity: 0.85; transform: translate(5px, -2px); }
      92% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowAcidMain {
      0%, 85%, 100% { filter: contrast(1.15) saturate(1.2); transform: translate(0); }
      86% { filter: contrast(1.4) brightness(1.2) hue-rotate(-8deg); transform: translate(-2px, 1px); }
      88% { filter: contrast(1.1) brightness(0.9); transform: translate(2px, 2px); }
      90% { filter: contrast(1.15) saturate(1.2); transform: translate(0); }
    }

    /* —— BLOOD: rojo sangre / doble exposición —— */
    .outnow-fx--blood .outnow-pre { color: #ff3b3b; text-shadow: 0 0 12px rgba(255,40,40,0.45); }
    .outnow-fx--blood .outnow-palabra,
    .outnow-fx--blood .outnow-palabra-falla {
      color: #0c0404;
      -webkit-text-stroke: clamp(1.5px, 0.42cqi, 3.5px) #e01010;
      text-shadow:
        2px 0 0 rgba(255,0,0,0.55),
        -2px 0 0 rgba(80,0,0,0.5),
        3px 3px 0 #4a0000,
        0 0 20px rgba(180,0,0,0.4);
    }
    .outnow-fx--blood .outnow-palabra-falla--a {
      color: #ff1a1a; -webkit-text-stroke: none; text-shadow: none;
      mix-blend-mode: screen;
      animation: outnowBloodA 3.8s steps(1) infinite;
    }
    .outnow-fx--blood .outnow-palabra-falla--b {
      color: #5a0000; -webkit-text-stroke: clamp(1px, 0.25cqi, 2px) #ff4040;
      text-shadow: 0 0 16px rgba(255,0,0,0.5);
      animation: outnowBloodB 4.6s steps(1) infinite;
    }
    .outnow-fx--blood .outnow-palabra {
      animation: outnowBloodMain 5s ease-in-out infinite;
    }
    @keyframes outnowBloodA {
      0%, 92%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
      93% { clip-path: inset(10% 0 50% 0); opacity: 1; transform: translate(-6px, 1px); }
      95% { clip-path: inset(55% 0 5% 0); opacity: 0.9; transform: translate(-4px, 3px); }
      97% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowBloodB {
      0%, 90%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      91% { clip-path: inset(30% 0 25% 0); opacity: 1; transform: translate(5px, -2px); }
      94% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowBloodMain {
      0%, 94%, 100% { transform: translate(0); filter: none; }
      95% { transform: translate(-3px, 0); filter: contrast(1.3) saturate(1.4); }
      96% { transform: translate(3px, 1px); filter: brightness(0.85); }
      97% { transform: translate(0); filter: none; }
    }

    /* —— NEON: cian / magenta ruido —— */
    .outnow-fx--neon .outnow-pre { color: #00f0ff; text-shadow: 0 0 14px #00f0ff, 0 0 28px #ff00aa; }
    .outnow-fx--neon .outnow-palabra,
    .outnow-fx--neon .outnow-palabra-falla {
      color: #050508;
      -webkit-text-stroke: clamp(1.2px, 0.35cqi, 2.8px) #00e5ff;
      text-shadow:
        0 0 8px rgba(0,240,255,0.9),
        0 0 22px rgba(0,200,255,0.55),
        3px 0 0 rgba(255,0,170,0.65),
        -2px 0 0 rgba(0,255,200,0.45),
        0 4px 0 rgba(0,0,0,0.5);
    }
    .outnow-fx--neon .outnow-palabra-falla--a {
      color: #ff00aa; -webkit-text-stroke: none; text-shadow: 0 0 12px #ff00aa;
      animation: outnowNeonA 3.2s steps(1) infinite;
    }
    .outnow-fx--neon .outnow-palabra-falla--b {
      color: #00ffc8; -webkit-text-stroke: none; text-shadow: 0 0 12px #00ffc8;
      animation: outnowNeonB 3.9s steps(1) infinite;
    }
    .outnow-fx--neon .outnow-palabra {
      animation: outnowNeonMain 2.8s ease-in-out infinite;
    }
    .outnow-fx--neon .outnow-noise { opacity: 0.7; mix-blend-mode: soft-light; }
    @keyframes outnowNeonA {
      0%, 86%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
      87% { clip-path: inset(0 0 60% 0); opacity: 1; transform: translate(-7px, 0); }
      89% { clip-path: inset(50% 0 0 0); opacity: 1; transform: translate(4px, 2px); }
      91% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowNeonB {
      0%, 84%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      85% { clip-path: inset(20% 0 40% 0); opacity: 1; transform: translate(6px, -1px); }
      88% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowNeonMain {
      0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(0,240,255,0.4)); }
      50% { filter: brightness(1.15) drop-shadow(0 0 14px rgba(255,0,170,0.35)); }
    }

    /* —— SCRATCH: rasgado / roto —— */
    .outnow-fx--scratch .outnow-pre { color: #f2ebe0; letter-spacing: 5px; }
    .outnow-fx--scratch .outnow-palabra,
    .outnow-fx--scratch .outnow-palabra-falla {
      color: #1a1208;
      -webkit-text-stroke: clamp(1.5px, 0.4cqi, 3px) #f0e6d2;
      text-shadow:
        1px 1px 0 #3a2a18,
        3px 3px 0 #0a0a0a,
        -1px 0 0 rgba(255,255,255,0.15);
      filter: url(#none);
    }
    .outnow-fx--scratch .outnow-palabra {
      animation: outnowScratchMain 6s steps(1) infinite;
    }
    .outnow-fx--scratch .outnow-palabra-falla--a {
      color: #f0e6d2; -webkit-text-stroke: none; opacity: 0.55;
      mix-blend-mode: difference;
      animation: outnowScratchA 5s steps(1) infinite;
    }
    .outnow-fx--scratch .outnow-palabra-falla--b {
      color: #0a0a0a; -webkit-text-stroke: 1px #f0e6d2;
      animation: outnowScratchB 7s steps(1) infinite;
    }
    @keyframes outnowScratchMain {
      0%, 80%, 100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translate(0) rotate(0deg);
      }
      82% {
        clip-path: polygon(0 0, 100% 2%, 98% 48%, 100% 100%, 0 97%, 2% 52%);
        transform: translate(-1px, 0) rotate(-0.4deg);
      }
      85% {
        clip-path: polygon(0 3%, 100% 0, 100% 100%, 3% 100%, 0 55%);
        transform: translate(2px, 1px) rotate(0.3deg);
      }
      88% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translate(0);
      }
    }
    @keyframes outnowScratchA {
      0%, 78%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      79% { clip-path: polygon(0 10%, 100% 8%, 100% 22%, 0 28%); opacity: 0.8; transform: translate(-8px, 0); }
      82% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowScratchB {
      0%, 83%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      84% { clip-path: polygon(0 60%, 100% 55%, 100% 78%, 0 82%); opacity: 0.7; transform: translate(6px, 2px); }
      87% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }

    /* —— SPRAY: stencil / spray paint —— */
    .outnow-fx--spray .outnow-pre { color: #e8ff00; font-family: 'Permanent Marker', cursive; letter-spacing: 2px; }
    .outnow-fx--spray .outnow-palabra,
    .outnow-fx--spray .outnow-palabra-falla {
      font-family: 'Black Ops One', sans-serif;
      color: #0a0a0a;
      -webkit-text-stroke: clamp(2px, 0.5cqi, 4px) #e8ff00;
      text-shadow:
        0 0 0 #e8ff00,
        4px 4px 0 rgba(0,0,0,0.55),
        0 0 1px #e8ff00,
        0 0 24px rgba(232,255,0,0.25);
      letter-spacing: 0.06em;
    }
    .outnow-fx--spray .outnow-palabra {
      animation: outnowSprayMain 8s ease-in-out infinite;
      filter: contrast(1.25);
    }
    .outnow-fx--spray .outnow-palabra-falla--a {
      color: #e8ff00; -webkit-text-stroke: none;
      opacity: 0.35; mix-blend-mode: overlay;
      filter: blur(0.6px);
      animation: outnowSprayA 6s steps(1) infinite;
    }
    .outnow-fx--spray .outnow-palabra-falla--b {
      color: transparent;
      -webkit-text-stroke: clamp(1px, 0.3cqi, 2px) rgba(232,255,0,0.45);
      text-shadow: none;
      transform: translate(3px, 3px);
      animation: outnowSprayB 7s ease-in-out infinite;
    }
    .outnow-fx--spray .outnow-noise { opacity: 0.85; mix-blend-mode: multiply; }
    @keyframes outnowSprayMain {
      0%, 100% { transform: translate(0) rotate(-0.5deg); opacity: 1; }
      50% { transform: translate(1px, -1px) rotate(0.4deg); opacity: 0.96; }
    }
    @keyframes outnowSprayA {
      0%, 70%, 100% { clip-path: inset(0 0 0 0); opacity: 0.25; }
      72% { clip-path: inset(0 40% 0 0); opacity: 0.5; }
      75% { clip-path: inset(0 0 0 35%); opacity: 0.4; }
      78% { clip-path: inset(0 0 0 0); opacity: 0.25; }
    }
    @keyframes outnowSprayB {
      0%, 100% { opacity: 0.5; transform: translate(3px, 3px); }
      50% { opacity: 0.75; transform: translate(4px, 2px); }
    }

    /* —— BURN: quemado / carbonizado —— */
    .outnow-fx--burn .outnow-pre { color: #ffb040; text-shadow: 0 0 10px rgba(255,100,0,0.5); }
    .outnow-fx--burn .outnow-palabra,
    .outnow-fx--burn .outnow-palabra-falla {
      color: #1a0c00;
      -webkit-text-stroke: clamp(1.5px, 0.4cqi, 3.2px) #ff8c1a;
      text-shadow:
        0 0 6px rgba(255,80,0,0.7),
        0 0 18px rgba(255,40,0,0.35),
        2px 2px 0 #3a1400,
        4px 4px 0 #0a0400,
        0 6px 12px rgba(0,0,0,0.6);
    }
    .outnow-fx--burn .outnow-palabra {
      animation: outnowBurnMain 4s ease-in-out infinite;
    }
    .outnow-fx--burn .outnow-palabra-falla--a {
      color: #ff4400; -webkit-text-stroke: none;
      text-shadow: 0 0 14px #ff2200;
      animation: outnowBurnA 3.6s steps(1) infinite;
    }
    .outnow-fx--burn .outnow-palabra-falla--b {
      color: #2a1000; -webkit-text-stroke: 1px #ffaa40;
      animation: outnowBurnB 5s steps(1) infinite;
    }
    @keyframes outnowBurnMain {
      0%, 100% { filter: brightness(1) sepia(0.15); }
      40% { filter: brightness(1.12) sepia(0.25) saturate(1.3); }
      70% { filter: brightness(0.92) sepia(0.35) contrast(1.1); }
    }
    @keyframes outnowBurnA {
      0%, 88%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      89% { clip-path: inset(0 0 55% 0); opacity: 0.9; transform: translate(-3px, -1px); }
      92% { clip-path: inset(45% 0 0 0); opacity: 0.7; transform: translate(2px, 2px); }
      94% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowBurnB {
      0%, 86%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      87% { clip-path: inset(25% 0 30% 0); opacity: 0.8; transform: translate(4px, 0); }
      90% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }

    /* —— POSTER: offset print / mal registro —— */
    .outnow-fx--poster .outnow-pre { color: #ffee58; }
    .outnow-fx--poster .outnow-palabra,
    .outnow-fx--poster .outnow-palabra-falla {
      color: #0a0a0a;
      -webkit-text-stroke: clamp(1.4px, 0.38cqi, 3px) #ffcc00;
      text-shadow:
        3px 0 0 rgba(0,120,255,0.55),
        -2px 1px 0 rgba(255,40,40,0.5),
        2px 3px 0 #1a1a1a;
    }
    .outnow-fx--poster .outnow-palabra {
      animation: outnowPosterMain 7s steps(2) infinite;
    }
    .outnow-fx--poster .outnow-palabra-falla--a {
      color: #0080ff; -webkit-text-stroke: none; text-shadow: none;
      opacity: 0.55; mix-blend-mode: multiply;
      animation: outnowPosterA 5.5s steps(1) infinite;
    }
    .outnow-fx--poster .outnow-palabra-falla--b {
      color: #ff2020; -webkit-text-stroke: none; text-shadow: none;
      opacity: 0.5; mix-blend-mode: multiply;
      animation: outnowPosterB 6.2s steps(1) infinite;
    }
    @keyframes outnowPosterMain {
      0%, 100% { transform: translate(0); }
      25% { transform: translate(1px, 0); }
      50% { transform: translate(-1px, 1px); }
      75% { transform: translate(0, -1px); }
    }
    @keyframes outnowPosterA {
      0%, 100% { transform: translate(-3px, 0); opacity: 0.45; clip-path: inset(0); }
      50% { transform: translate(-5px, 1px); opacity: 0.65; }
    }
    @keyframes outnowPosterB {
      0%, 100% { transform: translate(3px, 1px); opacity: 0.4; clip-path: inset(0); }
      50% { transform: translate(5px, -1px); opacity: 0.6; }
    }

    /* —— STATIC: TV estática / scanlines —— */
    .outnow-fx--static .outnow-pre {
      color: #d0d0d0;
      animation: outnowParpadeo 1.1s step-end infinite;
    }
    .outnow-fx--static .outnow-palabra,
    .outnow-fx--static .outnow-palabra-falla {
      color: #111;
      -webkit-text-stroke: clamp(1.5px, 0.4cqi, 3px) #e8e8e8;
      text-shadow:
        0 1px 0 #888,
        0 -1px 0 #444,
        2px 2px 0 #000,
        0 0 12px rgba(255,255,255,0.2);
    }
    .outnow-fx--static .outnow-palabra {
      animation: outnowStaticMain 0.35s steps(2) infinite;
    }
    .outnow-fx--static .outnow-palabra-falla--a {
      color: #fff; -webkit-text-stroke: none; opacity: 0.15;
      animation: outnowStaticA 0.2s steps(2) infinite;
    }
    .outnow-fx--static .outnow-palabra-falla--b {
      color: #000; -webkit-text-stroke: 1px #ccc; opacity: 0.25;
      animation: outnowStaticB 0.28s steps(2) infinite;
    }
    .outnow-fx--static .outnow-noise {
      opacity: 0.9; mix-blend-mode: soft-light;
      animation: outnowStaticNoise 0.15s steps(2) infinite;
    }
    .outnow-fx--static .outnow-titular::after {
      content: '';
      position: absolute; inset: -4% -2%;
      pointer-events: none; z-index: 5;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.12) 2px,
        rgba(0,0,0,0.12) 3px
      );
      mix-blend-mode: multiply;
    }
    @keyframes outnowStaticMain {
      0% { transform: translate(0, 0); filter: contrast(1.1); }
      50% { transform: translate(0.5px, -0.5px); filter: contrast(1.25) brightness(1.05); }
      100% { transform: translate(-0.5px, 0.5px); filter: contrast(1.05); }
    }
    @keyframes outnowStaticA {
      0% { clip-path: inset(0 0 70% 0); transform: translate(-2px, 0); }
      50% { clip-path: inset(40% 0 20% 0); transform: translate(2px, 1px); }
      100% { clip-path: inset(60% 0 0 0); transform: translate(-1px, -1px); }
    }
    @keyframes outnowStaticB {
      0% { clip-path: inset(30% 0 40% 0); transform: translate(1px, 0); }
      100% { clip-path: inset(10% 0 55% 0); transform: translate(-2px, 1px); }
    }
    @keyframes outnowStaticNoise {
      0% { transform: translate(0, 0); }
      50% { transform: translate(-2%, 1%); }
      100% { transform: translate(1%, -1%); }
    }

    /* ORIGINAL (primordial) + alias glitch: estilo del principio */
    .outnow-fx--original .outnow-palabra-falla--a,
    .outnow-fx--glitch .outnow-palabra-falla--a { animation-name: outnowFallaA; }
    .outnow-fx--original .outnow-palabra-falla--b,
    .outnow-fx--glitch .outnow-palabra-falla--b { animation-name: outnowFallaB; }
    .outnow-fx--original .outnow-palabra,
    .outnow-fx--glitch .outnow-palabra { animation-name: outnowFallaMain; }

    /* ═══════════════════════════════════════════════════════════
       THE GRIAL PUB intros → adaptados a OUT NOW (CSS)
       chrome | hologram | ember | film | matrix | shock | godrays
    ═══════════════════════════════════════════════════════════ */

    /* —— CHROME: cromo líquido (intro 15) —— */
    .outnow-fx--chrome .outnow-pre {
      color: #d8d8e0;
      text-shadow: 0 0 10px rgba(200,210,255,0.45);
    }
    .outnow-fx--chrome .outnow-palabra,
    .outnow-fx--chrome .outnow-palabra-falla {
      color: #b8b8c0;
      -webkit-text-stroke: clamp(1.2px, 0.35cqi, 2.8px) #1a1a22;
      text-shadow:
        0 1px 0 #ffffff,
        0 2px 0 #d0d0d8,
        0 3px 0 #9898a8,
        0 4px 0 #606070,
        0 5px 0 #303038,
        0 0 18px rgba(200,210,255,0.35),
        0 0 40px rgba(160,180,255,0.2);
      animation: outnowChromeMain 3.2s ease-in-out infinite;
    }
    .outnow-fx--chrome .outnow-palabra-falla--a {
      color: rgba(255,255,255,0.55);
      -webkit-text-stroke: none;
      text-shadow: 0 0 12px rgba(180,200,255,0.8);
      animation: outnowChromeA 4s steps(1) infinite;
    }
    .outnow-fx--chrome .outnow-palabra-falla--b {
      color: #6a6a78;
      -webkit-text-stroke: 1px #c8c8d8;
      text-shadow: none;
      animation: outnowChromeB 5s ease-in-out infinite;
    }
    @keyframes outnowChromeMain {
      0%, 100% { filter: brightness(1) contrast(1.15); }
      40% { filter: brightness(1.25) contrast(1.25) saturate(0.8); }
      70% { filter: brightness(0.92) contrast(1.1); }
    }
    @keyframes outnowChromeA {
      0%, 88%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
      89% { clip-path: inset(5% 0 55% 0); opacity: 0.9; transform: translate(-3px, 0); }
      92% { clip-path: inset(50% 0 5% 0); opacity: 0.7; transform: translate(2px, 1px); }
      94% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowChromeB {
      0%, 100% { opacity: 0.45; transform: translate(2px, 2px); }
      50% { opacity: 0.7; transform: translate(3px, 1px); }
    }

    /* —— HOLOGRAM: holograma escaneado (intro 09) —— */
    .outnow-fx--hologram .outnow-pre {
      color: #00ffdc;
      text-shadow: 0 0 12px rgba(0,255,220,0.55), 0 0 24px rgba(255,40,80,0.25);
      animation: outnowParpadeo 1.6s step-end infinite;
    }
    .outnow-fx--hologram .outnow-palabra,
    .outnow-fx--hologram .outnow-palabra-falla {
      color: rgba(240,235,227,0.92);
      -webkit-text-stroke: clamp(1px, 0.3cqi, 2.2px) rgba(0,255,220,0.65);
      text-shadow:
        0 0 10px rgba(0,255,220,0.55),
        3px 0 0 rgba(255,40,80,0.4),
        -2px 0 0 rgba(0,255,220,0.35),
        0 0 28px rgba(0,200,180,0.35);
    }
    .outnow-fx--hologram .outnow-palabra {
      animation: outnowHoloMain 2.4s ease-in-out infinite;
    }
    .outnow-fx--hologram .outnow-palabra-falla--a {
      color: rgba(0,255,220,0.55);
      -webkit-text-stroke: none;
      text-shadow: 0 0 14px #00ffdc;
      animation: outnowHoloA 3s linear infinite;
    }
    .outnow-fx--hologram .outnow-palabra-falla--b {
      color: rgba(255,40,80,0.45);
      -webkit-text-stroke: none;
      text-shadow: 0 0 12px rgba(255,40,80,0.6);
      animation: outnowHoloB 3.4s linear infinite;
    }
    .outnow-fx--hologram .outnow-titular::after {
      content: '';
      position: absolute; inset: -6% -4%;
      pointer-events: none; z-index: 5;
      background:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(0,0,0,0.18) 2px,
          rgba(0,0,0,0.18) 3px
        ),
        linear-gradient(
          180deg,
          transparent 0%,
          rgba(0,255,220,0.12) 48%,
          rgba(0,255,220,0.22) 50%,
          rgba(0,255,220,0.12) 52%,
          transparent 100%
        );
      background-size: 100% 100%, 100% 220%;
      animation: outnowHoloScan 2.8s linear infinite;
      mix-blend-mode: screen;
    }
    @keyframes outnowHoloMain {
      0%, 100% { filter: brightness(1); transform: translate(0); }
      50% { filter: brightness(1.12) hue-rotate(-6deg); transform: translate(0.5px, -0.5px); }
    }
    @keyframes outnowHoloA {
      0% { transform: translate(-4px, 0); opacity: 0.35; }
      50% { transform: translate(-6px, 1px); opacity: 0.65; }
      100% { transform: translate(-3px, -1px); opacity: 0.4; }
    }
    @keyframes outnowHoloB {
      0% { transform: translate(4px, 1px); opacity: 0.3; }
      50% { transform: translate(6px, -1px); opacity: 0.55; }
      100% { transform: translate(3px, 0); opacity: 0.35; }
    }
    @keyframes outnowHoloScan {
      0% { background-position: 0 0, 0 -100%; }
      100% { background-position: 0 0, 0 100%; }
    }

    /* —— EMBER: brasas / fuego (intro 18) —— */
    .outnow-fx--ember .outnow-pre {
      color: #ff8c30;
      text-shadow: 0 0 12px rgba(255,80,0,0.6);
    }
    .outnow-fx--ember .outnow-palabra,
    .outnow-fx--ember .outnow-palabra-falla {
      color: #1a0800;
      -webkit-text-stroke: clamp(1.4px, 0.38cqi, 3px) #ff6a00;
      text-shadow:
        0 0 6px rgba(255,100,0,0.9),
        0 0 16px rgba(255,50,0,0.55),
        0 0 32px rgba(255,30,0,0.35),
        0 4px 0 #3a1000,
        2px 6px 12px rgba(0,0,0,0.55);
    }
    .outnow-fx--ember .outnow-palabra {
      animation: outnowEmberMain 1.8s ease-in-out infinite;
    }
    .outnow-fx--ember .outnow-palabra-falla--a {
      color: #ff4400;
      -webkit-text-stroke: none;
      text-shadow: 0 0 16px #ff2200, 0 -4px 10px rgba(255,200,0,0.5);
      animation: outnowEmberA 2.6s steps(1) infinite;
    }
    .outnow-fx--ember .outnow-palabra-falla--b {
      color: #ffcc40;
      -webkit-text-stroke: none;
      text-shadow: 0 0 14px rgba(255,200,40,0.7);
      animation: outnowEmberB 3.1s steps(1) infinite;
      opacity: 0.55;
    }
    .outnow-fx--ember .outnow-noise {
      opacity: 0.75;
      mix-blend-mode: color-dodge;
      filter: hue-rotate(-20deg) saturate(1.4);
    }
    @keyframes outnowEmberMain {
      0%, 100% { filter: brightness(1) saturate(1.2); }
      30% { filter: brightness(1.2) saturate(1.5) hue-rotate(-8deg); }
      60% { filter: brightness(0.9) saturate(1.3) hue-rotate(6deg); }
    }
    @keyframes outnowEmberA {
      0%, 82%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0, 0); }
      83% { clip-path: inset(0 0 50% 0); opacity: 0.9; transform: translate(-2px, -3px); }
      87% { clip-path: inset(40% 0 0 0); opacity: 0.75; transform: translate(2px, -5px); }
      91% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }
    @keyframes outnowEmberB {
      0%, 78%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; }
      79% { clip-path: inset(15% 0 40% 0); opacity: 0.7; transform: translate(3px, -4px); }
      84% { clip-path: inset(0 0 100% 0); opacity: 0; }
    }

    /* —— FILM: film leader celuloide (intro 07) —— */
    .outnow-fx--film .outnow-pre {
      color: #f0ebe3;
      letter-spacing: 4px;
      animation: outnowFilmFlicker 0.18s steps(2) infinite;
    }
    .outnow-fx--film .outnow-palabra,
    .outnow-fx--film .outnow-palabra-falla {
      color: #f0ebe3;
      -webkit-text-stroke: clamp(1.2px, 0.32cqi, 2.5px) #1a1814;
      text-shadow:
        0 1px 0 #2a2820,
        2px 2px 0 #0a0a0a,
        0 0 1px #f0ebe3;
    }
    .outnow-fx--film .outnow-palabra {
      animation: outnowFilmShake 0.12s steps(2) infinite, outnowFilmFlicker 0.22s steps(2) infinite;
    }
    .outnow-fx--film .outnow-palabra-falla--a {
      color: rgba(255,255,255,0.35);
      -webkit-text-stroke: none;
      text-shadow: none;
      animation: outnowFilmScratch 2.8s steps(1) infinite;
    }
    .outnow-fx--film .outnow-palabra-falla--b {
      color: #0a0a0a;
      -webkit-text-stroke: 1px #f0ebe3;
      opacity: 0.35;
      animation: outnowFilmScratch 3.4s steps(1) infinite reverse;
    }
    .outnow-fx--film .outnow-noise {
      opacity: 0.85;
      mix-blend-mode: soft-light;
      animation: outnowStaticNoise 0.12s steps(2) infinite;
    }
    .outnow-fx--film .outnow-titular::before,
    .outnow-fx--film .outnow-titular::after {
      content: '';
      position: absolute;
      top: 8%; bottom: 8%;
      width: 10px;
      z-index: 6;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          180deg,
          #111 0 10px,
          transparent 10px 22px
        );
      opacity: 0.55;
    }
    .outnow-fx--film .outnow-titular::before { left: -6px; }
    .outnow-fx--film .outnow-titular::after { right: -6px; }
    @keyframes outnowFilmFlicker {
      0% { opacity: 1; filter: brightness(1); }
      50% { opacity: 0.88; filter: brightness(1.08); }
      100% { opacity: 0.96; filter: brightness(0.95); }
    }
    @keyframes outnowFilmShake {
      0% { transform: translate(0, 0); }
      25% { transform: translate(1px, -0.5px); }
      50% { transform: translate(-1px, 0.5px); }
      75% { transform: translate(0.5px, 0); }
      100% { transform: translate(0, 0); }
    }
    @keyframes outnowFilmScratch {
      0%, 86%, 100% { clip-path: inset(0 48% 0 48%); opacity: 0; }
      87% { clip-path: inset(0 46% 0 50%); opacity: 0.7; }
      90% { clip-path: inset(0 52% 0 44%); opacity: 0.5; }
      93% { clip-path: inset(0 48% 0 48%); opacity: 0; }
    }

    /* —— MATRIX: ASCII matrix estilo Grial (intro 11) —— */
    .outnow-fx--matrix .outnow-pre {
      color: #b41428;
      font-family: 'JetBrains Mono', monospace;
      text-shadow: 0 0 10px rgba(180,20,40,0.55);
    }
    .outnow-fx--matrix .outnow-palabra,
    .outnow-fx--matrix .outnow-palabra-falla {
      color: #f0ebe3;
      -webkit-text-stroke: clamp(1.2px, 0.32cqi, 2.5px) #b41428;
      text-shadow:
        0 0 8px rgba(180,20,40,0.55),
        0 0 20px rgba(180,20,40,0.3),
        2px 2px 0 #1a0508;
    }
    .outnow-fx--matrix .outnow-palabra {
      animation: outnowMatrixMain 2s steps(3) infinite;
    }
    .outnow-fx--matrix .outnow-palabra-falla--a {
      color: #b41428;
      -webkit-text-stroke: none;
      text-shadow: 0 0 12px rgba(180,20,40,0.8);
      font-family: 'JetBrains Mono', monospace;
      animation: outnowMatrixA 0.35s steps(2) infinite;
    }
    .outnow-fx--matrix .outnow-palabra-falla--b {
      color: rgba(240,235,227,0.35);
      -webkit-text-stroke: none;
      animation: outnowMatrixB 0.5s steps(2) infinite;
    }
    .outnow-fx--matrix .outnow-noise {
      opacity: 0.5;
      mix-blend-mode: multiply;
      filter: hue-rotate(-30deg) saturate(1.6);
    }
    @keyframes outnowMatrixMain {
      0%, 100% { filter: brightness(1); }
      33% { filter: brightness(1.15) contrast(1.1); }
      66% { filter: brightness(0.9); }
    }
    @keyframes outnowMatrixA {
      0% { clip-path: inset(0 0 70% 0); opacity: 0.5; transform: translate(-2px, 0); }
      50% { clip-path: inset(40% 0 20% 0); opacity: 0.85; transform: translate(2px, 1px); }
      100% { clip-path: inset(65% 0 0 0); opacity: 0.45; transform: translate(-1px, -1px); }
    }
    @keyframes outnowMatrixB {
      0% { opacity: 0.25; transform: translate(1px, 0); }
      100% { opacity: 0.45; transform: translate(-1px, 1px); }
    }

    /* —— SHOCK: shockwave 3-2-1 (intro 17) —— */
    .outnow-fx--shock .outnow-pre {
      color: #e8ff00;
      text-shadow: 0 0 14px rgba(232,255,0,0.5);
    }
    .outnow-fx--shock .outnow-palabra,
    .outnow-fx--shock .outnow-palabra-falla {
      color: #0a0a0a;
      -webkit-text-stroke: clamp(1.5px, 0.4cqi, 3.2px) #e8ff00;
      text-shadow:
        0 0 10px rgba(232,255,0,0.45),
        3px 3px 0 #1a1a00,
        0 0 24px rgba(232,255,0,0.25);
    }
    .outnow-fx--shock .outnow-palabra {
      animation: outnowShockMain 2.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite;
    }
    .outnow-fx--shock .outnow-palabra-falla--a {
      color: #e8ff00;
      -webkit-text-stroke: none;
      text-shadow: 0 0 16px #e8ff00;
      animation: outnowShockA 2.4s ease-out infinite;
    }
    .outnow-fx--shock .outnow-palabra-falla--b {
      color: transparent;
      -webkit-text-stroke: clamp(1px, 0.28cqi, 2px) rgba(232,255,0,0.45);
      text-shadow: none;
      animation: outnowShockB 2.4s ease-out infinite;
    }
    .outnow-fx--shock .outnow-titular {
      animation: outnowShockRing 2.4s ease-out infinite;
    }
    @keyframes outnowShockMain {
      0%, 70%, 100% { transform: scale(1); filter: brightness(1); }
      8% { transform: scale(1.06) skewX(-1deg); filter: brightness(1.35); }
      18% { transform: scale(0.98) skewX(0.5deg); filter: brightness(1.05); }
      28% { transform: scale(1.02); filter: brightness(1.15); }
      40% { transform: scale(1); filter: brightness(1); }
    }
    @keyframes outnowShockA {
      0%, 70%, 100% { opacity: 0; transform: scale(1); clip-path: inset(0); }
      8% { opacity: 0.85; transform: scale(1.12); }
      25% { opacity: 0; transform: scale(1.35); }
    }
    @keyframes outnowShockB {
      0%, 70%, 100% { opacity: 0; transform: scale(1); }
      10% { opacity: 0.6; transform: scale(1.18); }
      30% { opacity: 0; transform: scale(1.45); }
    }
    @keyframes outnowShockRing {
      0%, 70%, 100% { filter: drop-shadow(0 0 0 transparent); }
      10% { filter: drop-shadow(0 0 12px rgba(232,255,0,0.45)); }
      35% { filter: drop-shadow(0 0 0 transparent); }
    }

    /* —— GODRAYS: rayos / bloom (intro 13) —— */
    .outnow-fx--godrays .outnow-pre {
      color: #ffe8a0;
      text-shadow: 0 0 16px rgba(255,220,120,0.55);
    }
    .outnow-fx--godrays .outnow-palabra,
    .outnow-fx--godrays .outnow-palabra-falla {
      color: #1a1208;
      -webkit-text-stroke: clamp(1.3px, 0.36cqi, 2.8px) #ffe29a;
      text-shadow:
        0 0 12px rgba(255,220,140,0.75),
        0 0 28px rgba(255,180,60,0.45),
        0 0 48px rgba(255,140,20,0.25),
        2px 3px 0 rgba(40,20,0,0.55);
    }
    .outnow-fx--godrays .outnow-palabra {
      animation: outnowGodraysMain 4s ease-in-out infinite;
    }
    .outnow-fx--godrays .outnow-palabra-falla--a {
      color: rgba(255,240,180,0.55);
      -webkit-text-stroke: none;
      text-shadow: 0 0 20px rgba(255,220,100,0.8);
      animation: outnowGodraysA 5s ease-in-out infinite;
    }
    .outnow-fx--godrays .outnow-palabra-falla--b {
      color: rgba(255,160,40,0.35);
      -webkit-text-stroke: none;
      filter: blur(1px);
      animation: outnowGodraysB 6s ease-in-out infinite;
    }
    .outnow-fx--godrays .outnow-titular::before {
      content: '';
      position: absolute;
      left: 50%; top: 40%;
      width: 140%; height: 140%;
      transform: translate(-50%, -50%);
      pointer-events: none; z-index: 0;
      background: radial-gradient(
        ellipse at center,
        rgba(255,200,80,0.22) 0%,
        rgba(255,140,20,0.08) 35%,
        transparent 65%
      );
      animation: outnowGodraysGlow 4s ease-in-out infinite;
    }
    @keyframes outnowGodraysMain {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.18) saturate(1.15); }
    }
    @keyframes outnowGodraysA {
      0%, 100% { opacity: 0.35; transform: translate(0, 0) scale(1); }
      50% { opacity: 0.65; transform: translate(-1px, -1px) scale(1.02); }
    }
    @keyframes outnowGodraysB {
      0%, 100% { opacity: 0.25; transform: translate(2px, 2px) scale(1.03); }
      50% { opacity: 0.45; transform: translate(3px, 1px) scale(1.06); }
    }
    @keyframes outnowGodraysGlow {
      0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    }

    .outnow-franja {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
      gap: 5px 8px; margin-bottom: clamp(6px, 1vh, 10px);
      width: 100%;
      padding: 0;
      background: transparent;
      border: none;
      transform: rotate(0.6deg);
    }
    .outnow-tag {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(11px, 2.8cqi, 16px);
      color: #f2ebe0; letter-spacing: 1px;
      text-shadow: 1px 1px 0 #0a0a0a;
    }
    .outnow-sep {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(8px, 2cqi, 10px);
      color: rgba(232,255,0,0.55);
    }

    .outnow-sello {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap; gap: 4px 8px;
      padding: 4px 0 0;
      border: none;
      background: transparent;
      transform: rotate(-1deg);
    }
    .outnow-sello span {
      font-family: 'Archivo', sans-serif;
      font-size: clamp(7px, 1.8cqi, 9px);
      font-weight: 900;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    }
    .outnow-sello-icon {
      font-size: 11px !important; color: #e8ff00 !important;
      text-shadow: 0 0 8px rgba(232,255,0,0.5);
    }

    /* Portada — flyer pegado con cinta */
    .portada-wrap {
      position: relative; margin-bottom: clamp(6px, 1vh, 14px);
      flex-shrink: 0;
    }
    .portada-wrap.revelar-escala {
      opacity: 0;
      transform: rotate(5deg) scale(0.85);
      transition: none;
    }
    #pantalla-principal.visible .portada-wrap.revelar-escala {
      animation: portadaEntrada 1s ease 0.25s forwards;
    }
    @keyframes portadaEntrada {
      from { opacity: 0; transform: rotate(5deg) scale(0.85); }
      to   { opacity: 1; transform: rotate(1.5deg) scale(1); }
    }

    .portada-sombra {
      position: absolute; inset: 6px -6px -6px 8px; z-index: 0;
      background: #8b0000;
      transform: rotate(-2deg);
      opacity: 0.75;
    }
    .portada-sombra::after {
      content: ''; position: absolute; inset: 4px -4px -4px 6px;
      background: #e8ff00; transform: rotate(1.5deg); opacity: 0.35;
    }

    .portada-cinta {
      position: absolute; z-index: 4; pointer-events: none;
      background: rgba(230,220,200,0.82);
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    }
    .portada-cinta--tl {
      width: 72px; height: 22px; top: -8px; left: 18px;
      transform: rotate(-28deg);
    }
    .portada-cinta--br {
      width: 88px; height: 24px; bottom: 24px; right: -12px;
      transform: rotate(18deg);
      background: rgba(20,20,20,0.88);
    }

    .imagen-portada {
      position: relative; z-index: 2;
      width: var(--portada-w); height: auto; display: block;
      border-radius: 2px;
      border: 3px solid #0a0a0a;
      box-shadow:
        0 0 0 2px #f2ebe0,
        8px 10px 0 rgba(0,0,0,0.45),
        0 22px 55px rgba(0,0,0,0.55);
      filter: contrast(1.14) saturate(0.92) sepia(0.06);
      animation: flotarDisco 4.5s ease-in-out infinite;
    }
    @keyframes flotarDisco {
      0%, 100% { transform: translateY(0) rotate(-1deg); }
      50%      { transform: translateY(-8px) rotate(1deg); }
    }

    .portada-sticker {
      position: absolute; z-index: 5; bottom: -8px; left: -12px;
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(16px, 2vw, 22px); color: #0a0a0a;
      background: #e8ff00;
      padding: 4px 12px 6px;
      transform: rotate(-12deg);
      box-shadow: 3px 4px 0 rgba(0,0,0,0.5);
      border: 2px solid #0a0a0a;
    }

    .titulo-album {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(22px, 5.5cqi, 44px); letter-spacing: 3px;
      color: #f2ebe0; text-align: center;
      text-shadow:
        2px 2px 0 #8b0000,
        0 2px 14px rgba(0,0,0,0.45);
      margin-bottom: 2px;
      transform: rotate(-0.8deg);
      position: relative;
    }
    .titulo-album::after {
      content: ''; display: block; width: 85%; height: 3px;
      margin: 6px auto 0;
      background: linear-gradient(90deg, transparent, #e8ff00 20%, #8b0000 50%, #e8ff00 80%, transparent);
      transform: rotate(0.5deg);
      opacity: 0.9;
    }
    .subtitulo-album {
      font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, 0.85vw, 9.5px);
      font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
      color: rgba(242,235,224,0.72); text-align: center;
      text-shadow: 0 1px 4px rgba(0,0,0,0.35);
      margin-bottom: clamp(8px, 1.2vh, 16px);
      flex-shrink: 0;
    }

    /* 🎧 Reproductor — compacto, cajetín rojo (como conciertos) */
    .bzo-player {
      width: 100%; max-width: var(--player-max); margin: 0 auto;
      padding: clamp(6px, 0.9vh, 9px) clamp(8px, 1vw, 10px) clamp(6px, 0.8vh, 8px);
      flex-shrink: 0;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      text-align: left;
      transform: rotate(-0.6deg);
      clip-path: polygon(
        1% 5%, 6% 1%, 15% 2%, 90% 0%, 98% 5%, 100% 11%,
        99% 80%, 95% 95%, 84% 100%, 8% 98%, 2% 90%, 0% 70%
      );
      box-shadow: 4px 4px 0 #0a0a0a, 2px 3px 10px rgba(0,0,0,0.3);
    }
    .bzo-player::before {
      content: '';
      position: absolute; inset: -3px -4px -5px -2px; z-index: -1;
      background: linear-gradient(158deg, #a50000 0%, #8b0000 42%, #7a0000 78%, #8b0000 100%);
      clip-path: polygon(
        0% 7%, 7% 0%, 17% 2%, 91% 0%, 100% 5%, 100% 14%,
        100% 83%, 93% 100%, 7% 100%, 0% 86%, 2% 18%
      );
      filter: blur(0.4px);
      opacity: 0.9;
      pointer-events: none;
    }
    .bzo-player::after {
      content: '';
      position: absolute; top: 0; right: 0;
      width: clamp(18px, 12%, 28px); height: clamp(18px, 12%, 28px);
      z-index: 2; pointer-events: none;
      background: linear-gradient(225deg, #6b0000 0%, #5a0000 45%, #4a0000 100%);
      clip-path: polygon(100% 0, 0 0, 100% 100%);
      box-shadow: -2px 2px 4px rgba(0,0,0,0.35);
    }
    .bzo-player-textura,
    .bzo-player-doblez,
    .bzo-player-borde-pintado { display: none; }
    .bzo-player > *:not(.bzo-player-textura):not(.bzo-player-doblez):not(.bzo-player-borde-pintado) {
      position: relative; z-index: 3;
    }
    .bzo-player-top {
      display: flex; align-items: center; justify-content: space-between;
      gap: 6px; margin-bottom: clamp(4px, 0.6vh, 6px); position: relative; z-index: 1;
    }
    .bzo-player-marca {
      display: flex; align-items: center; gap: 6px; min-width: 0;
    }
    .bzo-player-icono {
      width: clamp(18px, 1.6vw, 22px); height: clamp(18px, 1.6vw, 22px); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(10px, 1vw, 13px);
      color: #0a0a0a; background: #e8ff00;
      border: 1.5px solid #0a0a0a;
      box-shadow: 2px 2px 0 #0a0a0a;
      transform: rotate(-4deg);
    }
    .bzo-player-marca-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .bzo-player-marca-titulo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 1.6px; line-height: 1;
      color: #f2ebe0; text-shadow: 1px 1px 0 #0a0a0a;
    }
    .bzo-player-marca-sub {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6px, 0.65vw, 7px); font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: rgba(232,255,0,0.8);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .bzo-eq {
      display: flex; align-items: flex-end; gap: 2px;
      height: 14px; flex-shrink: 0; padding-bottom: 0;
    }
    .bzo-eq span {
      display: block; width: 2px; border-radius: 1px;
      background: #e8ff00;
      box-shadow: 0 0 4px rgba(232,255,0,0.35);
      transform-origin: bottom;
      transform: scaleY(0.3);
      opacity: 0.45;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }
    .bzo-eq.activo span {
      animation: bzoEqBar 0.75s ease-in-out infinite;
      opacity: 1;
    }
    .bzo-eq span:nth-child(1) { height: 5px;  animation-delay: 0.00s; }
    .bzo-eq span:nth-child(2) { height: 10px; animation-delay: 0.12s; }
    .bzo-eq span:nth-child(3) { height: 7px;  animation-delay: 0.24s; }
    .bzo-eq span:nth-child(4) { height: 12px; animation-delay: 0.08s; }
    .bzo-eq span:nth-child(5) { height: 8px;  animation-delay: 0.18s; }
    .bzo-eq span:nth-child(6) { height: 11px; animation-delay: 0.30s; }
    .bzo-eq span:nth-child(7) { height: 6px;  animation-delay: 0.05s; }
    @keyframes bzoEqBar {
      0%, 100% { transform: scaleY(0.35); }
      50%      { transform: scaleY(1); }
    }
    .bzo-player-tabs {
      display: flex; gap: 4px; flex-wrap: nowrap;
      overflow-x: auto; scrollbar-width: none;
      margin-bottom: clamp(4px, 0.6vh, 6px); padding: 1px 0 2px;
      position: relative; z-index: 1;
      -webkit-overflow-scrolling: touch;
    }
    .bzo-player-tabs::-webkit-scrollbar { display: none; }
    .bzo-tab {
      flex: 0 0 auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6px, 0.65vw, 7.5px); font-weight: 700;
      letter-spacing: 0.7px; text-transform: uppercase;
      padding: 4px 7px; border-radius: 0;
      color: #f2ebe0;
      background: rgba(0,0,0,0.22);
      border: 1.5px solid rgba(242,235,224,0.35);
      cursor: pointer; white-space: nowrap;
      transition: all 0.2s ease;
    }
    .bzo-tab:hover {
      color: #e8ff00;
      border-color: rgba(232,255,0,0.55);
      background: rgba(0,0,0,0.32);
    }
    .bzo-tab.activo {
      color: #0a0a0a;
      background: #e8ff00;
      border-color: #0a0a0a;
      box-shadow: 2px 2px 0 #0a0a0a;
    }
    .bzo-player-marco {
      position: relative; z-index: 3;
      margin-top: 0;
      padding-top: clamp(3px, 0.5vh, 5px);
      border-top: 1px dashed rgba(242,235,224,0.28);
      overflow: hidden;
      background: transparent;
      border-left: none; border-right: none; border-bottom: none;
      box-shadow: none;
    }
    .bzo-player-marco.es-video { min-height: var(--player-h); }
    .bzo-player-media {
      position: relative; width: 100%;
      min-height: clamp(32px, 4vh, 44px);
      display: flex; align-items: center; justify-content: center;
      background: transparent;
    }
    .bzo-player-marco.es-video .bzo-player-media {
      min-height: var(--player-h);
      background: #050505;
    }
    .bzo-media-el {
      width: 100%; display: block;
      max-height: var(--player-h);
      object-fit: contain;
    }
    .bzo-media-el:not(video) { height: 0; overflow: hidden; position: absolute; }
    .bzo-player-marco.es-video .bzo-media-el { height: var(--player-h); position: relative; }
    .bzo-player-visual {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; padding: clamp(6px, 0.8vh, 10px) 8px;
      pointer-events: none;
    }
    .bzo-player-marco.es-video .bzo-player-visual { display: none; }
    .bzo-player-marco.vacio .bzo-player-visual { display: flex; }
    .bzo-player-marco.vacio .bzo-player-controls { display: none; }
    .bzo-player-visual-icon {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(16px, 2.2vw, 22px);
      color: #e8ff00;
      text-shadow: 1px 1px 0 #0a0a0a;
      opacity: 0.4;
      line-height: 1;
    }
    .bzo-player-visual-txt {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6px, 0.65vw, 7px); font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      color: rgba(242,235,224,0.45);
    }
    .bzo-player-controls {
      display: flex; align-items: center; gap: clamp(5px, 0.7vw, 8px);
      padding: clamp(4px, 0.6vh, 6px) 1px 1px;
      background: transparent;
      border-top: 1px dashed rgba(242,235,224,0.2);
    }
    .bzo-play-btn {
      flex-shrink: 0;
      width: clamp(26px, 2.6vw, 32px); height: clamp(26px, 2.6vw, 32px);
      display: flex; align-items: center; justify-content: center;
      font-size: clamp(11px, 1.1vw, 14px);
      color: #0a0a0a; background: #e8ff00;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 2px 0 #0a0a0a;
      cursor: pointer;
      transition: transform 0.15s, filter 0.15s;
      border-radius: 0;
      line-height: 1;
      padding: 0;
    }
    .bzo-play-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      filter: brightness(1.08);
    }
    .bzo-play-btn:disabled {
      opacity: 0.35; cursor: not-allowed;
      background: rgba(242,235,224,0.25);
    }
    .bzo-progress-wrap { flex: 1; min-width: 0; }
    .bzo-progress-bar {
      height: 4px; background: rgba(0,0,0,0.28);
      border: 1px solid rgba(0,0,0,0.45);
      cursor: pointer; position: relative;
      margin-bottom: 3px;
    }
    .bzo-progress-fill {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #8b0000, #e8ff00);
      box-shadow: 0 0 8px rgba(232,255,0,0.35);
      transition: width 0.08s linear;
      pointer-events: none;
    }
    .bzo-time {
      display: flex; justify-content: space-between;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6px, 0.6vw, 7px); font-weight: 700;
      letter-spacing: 0.8px; color: rgba(242,235,224,0.65);
    }
    .bzo-player-pie {
      display: flex; align-items: center; justify-content: space-between;
      gap: 6px; margin-top: clamp(4px, 0.5vh, 6px);
      position: relative; z-index: 1;
    }
    .bzo-player-contador {
      font-family: 'JetBrains Mono', monospace;
      font-size: 6.5px; font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      color: rgba(242,235,224,0.55);
    }
    .bzo-spotify-link {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7px; font-weight: 700;
      letter-spacing: 0.8px; text-transform: uppercase;
      color: rgba(242,235,224,0.7); text-decoration: none;
      transition: color 0.15s, text-shadow 0.15s;
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .bzo-spotify-link svg {
      width: 10px; height: 10px; flex-shrink: 0;
      opacity: 0.75; transition: opacity 0.15s;
    }
    .bzo-spotify-link:hover {
      color: #1DB954;
      text-shadow: 0 0 12px rgba(29,185,84,0.35);
    }
    .bzo-spotify-link:hover svg { opacity: 1; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ▶▶ COLUMNA DERECHA — reproductor · cita · contacto
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    #col-derecha .bzo-player {
      margin-top: 0;
    }
    .ya-hero {
      position: relative; width: 100%; max-width: min(300px, 92%);
      margin: 0 auto clamp(6px, 1.2vh, 16px); text-align: center;
      flex-shrink: 0;
    }
    .ya-hero.revelar-der {
      opacity: 0;
      transform: translateX(28px) rotate(3deg) scale(0.9);
      transition: none;
    }
    #pantalla-principal.visible .ya-hero.revelar-der {
      animation: yaEntrada 0.95s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.2s forwards;
    }
    @keyframes yaEntrada {
      from { opacity: 0; transform: translateX(28px) rotate(3deg) scale(0.9); }
      to   { opacity: 1; transform: translateX(0) rotate(1.4deg) scale(1); }
    }

    .ya-noise {
      position: absolute; inset: -6px; z-index: 0; pointer-events: none;
      opacity: 0.5; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 120px;
    }

    .ya-cinta {
      position: absolute; z-index: 4; pointer-events: none;
      background: #e8ff00;
      color: #0a0a0a;
      font-family: 'Black Ops One', sans-serif;
      font-size: 10px; letter-spacing: 2px;
      padding: 5px 22px;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
    }
    .ya-cinta--top { top: -10px; right: -8px; transform: rotate(8deg); }

    .ya-bloque {
      position: relative; z-index: 2;
      background: transparent;
      border: none;
      padding: 4px 8px 0;
      box-shadow: none;
    }

    .ya-pre {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 0.75vw, 8px); font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; color: rgba(255,255,255,0.72);
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
      margin-bottom: clamp(6px, 1vh, 10px);
    }

    .ya-titular {
      position: relative; margin-bottom: clamp(6px, 1vh, 12px); line-height: 0.82;
    }
    .ya-fantasma {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(40px, 7vw, 68px);
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.1);
      transform: translate(2px, 3px);
      pointer-events: none;
      line-height: 0.85;
    }

    .ya-main {
      position: relative; z-index: 2; margin: 0;
      display: flex; flex-direction: column; align-items: center;
      animation: yaVibrar 4.8s ease-in-out infinite;
    }
    @keyframes yaVibrar {
      0%, 94%, 100% { transform: translate(0); }
      95% { transform: translate(2px, -1px) skewX(1deg); }
      96% { transform: translate(-3px, 1px); }
      97% { transform: translate(1px, 0); }
    }

    .ya-linea {
      font-family: 'Black Ops One', sans-serif;
      text-transform: uppercase; display: block;
      line-height: 0.88;
    }
    .ya-linea--ya {
      font-size: clamp(42px, 6.5vw, 68px);
      color: #f2ebe0;
      text-shadow: 3px 3px 0 #8b0000, -1px -1px 0 #0a0a0a;
      letter-spacing: 0.08em;
      transform: rotate(-2deg);
    }
    .ya-linea--ala {
      font-size: clamp(18px, 2.8vw, 28px);
      color: #8b0000;
      text-shadow: 2px 2px 0 #0a0a0a;
      letter-spacing: 0.35em;
      margin: -2px 0 2px;
      background: #e8ff00;
      padding: 2px 14px 4px;
      border: 2px solid #0a0a0a;
      transform: rotate(1.5deg);
      box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
    }
    .ya-linea--venta {
      font-size: clamp(38px, 6vw, 62px);
      color: #e8ff00;
      text-shadow: 4px 4px 0 #0a0a0a, 2px 2px 0 #8b0000, 0 0 28px rgba(232,255,0,0.35);
      letter-spacing: 0.1em;
      transform: rotate(-1deg) scaleX(1.05);
    }

    .ya-exclamacion {
      margin-bottom: clamp(8px, 1.2vh, 14px);
    }
    .ya-excla-txt {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(20px, 3.5vw, 28px);
      color: #f2ebe0;
      text-shadow: 2px 2px 0 #8b0000, 0 0 16px rgba(255,255,255,0.1);
      display: inline-block;
      transform: rotate(-3deg);
      animation: yaExcla 2.8s ease-in-out infinite;
    }
    @keyframes yaExcla {
      0%, 100% { transform: rotate(-3deg) scale(1); }
      50%      { transform: rotate(-2deg) scale(1.04); }
    }

    .ya-sticker {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 8px;
      padding: 0;
      border: none;
      background: transparent;
      transform: rotate(-0.8deg);
    }
    .ya-sticker span {
      font-family: 'Archivo', sans-serif;
      font-size: 7px; font-weight: 900;
      letter-spacing: 1.8px; text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

    /* 🛒 Compralo aquí + carrito simulado */
    .compra-wrap {
      width: 100%; max-width: 100%;
      margin: 0 auto clamp(8px, 1.2vh, 16px);
      flex-shrink: 0; text-align: center;
    }
    #col-central .carrito-sim {
      width: 100%;
    }
    .compra-etiqueta {
      display: inline-block; position: relative;
      margin-bottom: clamp(10px, 1.4vh, 14px);
      transform: rotate(-2.5deg);
    }
    .compra-etiqueta::before {
      content: ''; position: absolute; inset: -4px -8px;
      background: rgba(0,0,0,0.35); z-index: 0;
      transform: rotate(3deg); filter: blur(2px);
    }
    .compra-etiqueta-txt {
      position: relative; z-index: 1;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(13px, 1.8vw, 17px);
      letter-spacing: 2.8px; text-transform: uppercase;
      color: #0a0a0a; background: #e8ff00;
      padding: 6px 18px 8px;
      border: 2px solid #0a0a0a;
      box-shadow: 4px 4px 0 #8b0000;
      animation: compraPulse 3.2s ease-in-out infinite;
    }
    @keyframes compraPulse {
      0%, 92%, 100% { transform: scale(1); }
      94% { transform: scale(1.04) rotate(0.5deg); }
      96% { transform: scale(0.98); }
    }

    .carrito-sim {
      position: relative; text-align: left;
      background: #0a0a0a;
      border: 2px solid rgba(242,235,224,0.2);
      padding: clamp(10px, 1.3vh, 14px) clamp(10px, 1.2vw, 13px);
      transform: rotate(1.1deg);
      box-shadow: 5px 7px 0 rgba(139,0,0,0.5), 3px 4px 16px rgba(0,0,0,0.5);
      clip-path: polygon(1% 4%, 6% 0%, 94% 1%, 100% 7%, 99% 93%, 90% 100%, 4% 98%, 0% 88%);
      overflow: hidden;
    }
    .carrito-sim::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      opacity: 0.32; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 100px;
    }
    .carrito-sim-top {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: clamp(8px, 1vh, 11px);
      padding-bottom: 7px;
      border-bottom: 1px dashed rgba(232,255,0,0.28);
      position: relative; z-index: 1;
    }
    .carrito-icono {
      width: clamp(28px, 3vw, 34px); height: clamp(28px, 3vw, 34px);
      flex-shrink: 0; color: #e8ff00;
      filter: drop-shadow(1px 1px 0 #8b0000);
      animation: carritoBalanceo 4s ease-in-out infinite;
    }
    @keyframes carritoBalanceo {
      0%, 88%, 100% { transform: rotate(0deg); }
      90% { transform: rotate(-6deg); }
      92% { transform: rotate(5deg); }
      94% { transform: rotate(-3deg); }
    }
    .carrito-titulo {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 0.75vw, 8.5px); font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      color: rgba(242,235,224,0.75); flex: 1;
    }
    .carrito-badge {
      font-family: 'Black Ops One', sans-serif;
      font-size: 11px; line-height: 1;
      min-width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      color: #0a0a0a; background: #e8ff00;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 2px 0 #8b0000;
      transform: rotate(8deg);
      animation: carritoBadge 2.5s ease-in-out infinite;
    }
    @keyframes carritoBadge {
      0%, 100% { transform: rotate(8deg) scale(1); }
      50% { transform: rotate(8deg) scale(1.12); }
    }
    .carrito-item {
      display: flex; align-items: center; gap: 9px;
      margin-bottom: clamp(8px, 1vh, 10px);
      position: relative; z-index: 1;
      animation: carritoItemEntra 0.7s ease 0.35s both;
    }
    @keyframes carritoItemEntra {
      from { opacity: 0; transform: translateX(12px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .carrito-item-portada {
      width: clamp(42px, 5vw, 52px); height: clamp(42px, 5vw, 52px);
      flex-shrink: 0; object-fit: cover;
      border: 2px solid #0a0a0a;
      box-shadow: 2px 3px 0 #8b0000;
      transform: rotate(-3deg);
    }
    .carrito-item-info {
      display: flex; flex-direction: column; gap: 2px; min-width: 0;
    }
    .carrito-item-nombre {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(14px, 1.6vw, 17px);
      letter-spacing: 1.2px; color: #f2ebe0;
      text-shadow: 1px 1px 0 #8b0000;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .carrito-item-tipo {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6px, 0.65vw, 7.5px); font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      color: rgba(232,255,0,0.65);
    }
    .carrito-item-precio {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(13px, 1.4vw, 16px);
      color: #e8ff00;
      text-shadow: 1px 1px 0 #0a0a0a;
    }
    .carrito-cantidad {
      display: flex; align-items: center; gap: 5px;
      margin-left: auto; flex-shrink: 0;
    }
    .carrito-qty-btn {
      width: 18px; height: 18px; padding: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; font-weight: 700;
      color: #0a0a0a; background: #f2ebe0;
      border: 1.5px solid #0a0a0a;
      cursor: pointer; line-height: 1;
      transition: background 0.15s, transform 0.15s;
    }
    .carrito-qty-btn:hover { background: #e8ff00; transform: scale(1.08); }
    .carrito-qty-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 9px; font-weight: 700;
      color: #f2ebe0; min-width: 12px; text-align: center;
    }
    .carrito-total {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 7px 0 8px;
      border-top: 1px solid rgba(232,255,0,0.2);
      margin-bottom: 8px;
      position: relative; z-index: 1;
    }
    .carrito-total-label {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(11px, 1.2vw, 13px);
      color: rgba(242,235,224,0.8);
    }
    .carrito-total-precio {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(16px, 1.8vw, 20px);
      color: #e8ff00;
      text-shadow: 2px 2px 0 #8b0000;
    }
    .carrito-btn {
      width: 100%; position: relative; z-index: 1;
      padding: clamp(8px, 1vh, 10px) 12px;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(10px, 1vw, 12px);
      letter-spacing: 1.5px; text-transform: uppercase;
      color: #0a0a0a; background: #e8ff00;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 #8b0000;
      cursor: pointer;
      transform: rotate(-0.6deg);
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    }
    .carrito-btn:hover {
      transform: rotate(0deg) translateY(-2px);
      box-shadow: 5px 5px 0 #0a0a0a;
      filter: brightness(1.05);
    }
    .carrito-btn.activo {
      animation: carritoBtnClick 0.45s ease;
    }
    @keyframes carritoBtnClick {
      0%   { transform: scale(1); }
      40%  { transform: scale(0.96); box-shadow: 1px 1px 0 #8b0000; }
      100% { transform: rotate(0deg) translateY(-1px); }
    }
    .carrito-stripe-nota {
      margin-top: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6px, 0.65vw, 7px); font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      text-align: center; color: rgba(242,235,224,0.5);
      position: relative; z-index: 1;
    }
    .carrito-stripe-nota::before { content: '◇ '; color: #635bff; }
    .carrito-feedback {
      min-height: 14px; margin-top: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(6.5px, 0.7vw, 7.5px); font-weight: 700;
      letter-spacing: 1px; text-transform: uppercase;
      text-align: center; color: #e8ff00;
      text-shadow: 0 0 10px rgba(232,255,0,0.35);
      position: relative; z-index: 1;
    }
    .carrito-sim.checkout .carrito-icono {
      animation: carritoCheckout 0.6s ease;
    }
    @keyframes carritoCheckout {
      0%   { transform: translateX(0); }
      30%  { transform: translateX(-4px) rotate(-8deg); }
      60%  { transform: translateX(6px) rotate(4deg); }
      100% { transform: translateX(0); }
    }

    .sep-grunge {
      width: 100%; max-width: 260px; margin: 0 auto clamp(6px, 1vh, 14px);
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      transform: rotate(-0.5deg);
    }
    .sep-grunge-linea {
      flex: 1; height: 3px; max-width: 70px;
      background: #0a0a0a;
      box-shadow: 2px 2px 0 #8b0000;
    }
    .sep-grunge-icono {
      font-family: 'Black Ops One', sans-serif;
      font-size: 14px; color: #e8ff00;
      text-shadow: 2px 2px 0 #0a0a0a;
      letter-spacing: 2px;
    }

    .cita-grunge {
      position: relative;
      max-width: min(280px, 92%); width: 100%;
      margin: 0 auto clamp(6px, 1vh, 14px);
      background: #f2ebe0;
      border: 2px solid #0a0a0a;
      padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.4vw, 16px);
      flex-shrink: 0;
      transform: rotate(-2deg);
      box-shadow: 5px 6px 0 #8b0000, -2px -2px 0 rgba(232,255,0,0.35);
    }
    .cita-grunge::before {
      content: '"'; position: absolute; top: -8px; left: 10px;
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(28px, 4vw, 40px); color: #8b0000; line-height: 1;
      opacity: 0.85;
    }
    .cita-grunge p {
      font-family: 'Archivo', sans-serif;
      font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; font-style: italic;
      color: #0a0a0a; line-height: 1.5;
      position: relative; z-index: 1;
    }
    .cita-grunge p strong {
      font-style: normal; font-weight: 900;
      color: #8b0000; text-transform: uppercase;
    }
    .cita-grunge-firma {
      display: block; margin-top: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 6.5px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
      color: rgba(10,10,10,0.55); text-align: right;
    }

    .plataformas-grunge {
      width: 100%; text-align: center;
    }
    .plataformas-grunge { flex-shrink: 0; }
    .plataformas-label {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(12px, 1.5vw, 15px);
      color: #f2ebe0;
      text-shadow: 2px 2px 0 #0a0a0a;
      margin-bottom: clamp(8px, 1vh, 12px);
      transform: rotate(-1deg);
      display: inline-block;
    }
    .fila-plataformas {
      display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
    }
    .boton-plataforma {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(9px, 0.95vw, 11px); letter-spacing: 1.3px; text-transform: uppercase;
      padding: clamp(7px, 0.9vh, 10px) clamp(12px, 1.2vw, 16px); border-radius: 0; text-decoration: none;
      color: #e8ff00; background: #0a0a0a;
      border: 2px solid #f2ebe0;
      box-shadow: 4px 4px 0 #8b0000;
      transition: all 0.15s ease;
    }
    /* YouTube */
    .boton-plataforma--yt,
    .boton-plataforma:first-child { transform: rotate(-2deg); }
    /* Instagram — cajetín rojo */
    .boton-plataforma--ig,
    .boton-plataforma:nth-child(2) {
      transform: rotate(2deg);
      color: #f2ebe0;
      background: #8b0000;
      border-color: #0a0a0a;
      box-shadow: 4px 4px 0 #0a0a0a;
    }
    /* Spotify */
    .boton-plataforma--sp {
      transform: rotate(-1.5deg);
      color: #0a0a0a;
      background: #1DB954;
      border-color: #0a0a0a;
      box-shadow: 4px 4px 0 #0a0a0a;
    }
    .boton-plataforma:hover {
      transform: rotate(0deg) translateY(-3px);
      box-shadow: 6px 6px 0 #0a0a0a;
      color: #e8ff00;
      background: #141414;
    }
    .boton-plataforma--ig:hover,
    .boton-plataforma:nth-child(2):hover {
      background: #a50000;
      color: #f2ebe0;
    }
    .boton-plataforma--sp:hover {
      background: #1ed760;
      color: #0a0a0a;
    }

    /* Cajetín rojo estilo Instagram (compartido) */
    .cajetin-ig {
      font-family: 'Permanent Marker', 'Archivo', cursive, sans-serif !important;
      color: #f2ebe0 !important;
      background: #8b0000 !important;
      border: 2px solid #0a0a0a !important;
      box-shadow: 4px 4px 0 #0a0a0a !important;
      text-transform: none;
      letter-spacing: 0.4px;
    }
    .cajetin-ig:hover {
      background: #a50000 !important;
      color: #fff !important;
      box-shadow: 6px 6px 0 #0a0a0a !important;
    }

    /* ✉ Contacto — formulario grunge */
    .contacto-grunge {
      width: 100%; max-width: var(--contacto-max);
      margin: clamp(6px, 1vh, 12px) auto 0;
      position: relative; transform: rotate(-1.1deg);
      flex-shrink: 0;
      overflow: visible; /* cámara polaroid a medias fuera del cajetín */
    }
    .contacto-grunge::before { display: none; }
    .contacto-inner {
      position: relative; z-index: 1;
      background: transparent;
      border: none;
      padding: clamp(6px, 1vh, 10px) 2px;
      box-shadow: none;
      overflow: visible;
    }
    .contacto-inner::after { display: none; }
    .contacto-pre {
      font-family: 'JetBrains Mono', monospace;
      font-size: 7.5px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: rgba(232,255,0,0.85);
      margin-bottom: 4px;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .contacto-titulo {
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(16px, 1.8vw, 20px); letter-spacing: 2.5px; color: #f2ebe0;
      text-shadow: 2px 2px 0 #8b0000, 0 1px 4px rgba(0,0,0,0.35);
      margin-bottom: clamp(8px, 1vh, 12px);
    }
    .contacto-campo { margin-bottom: clamp(6px, 0.9vh, 9px); }
    .contacto-campo label {
      display: block;
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(9px, 0.95vw, 11px); color: rgba(255,255,255,0.88);
      margin-bottom: 3px; transform: rotate(-0.5deg);
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .contacto-campo input,
    .contacto-campo textarea {
      width: 100%; padding: clamp(6px, 0.8vh, 8px) clamp(8px, 0.9vw, 10px);
      font-family: 'Archivo', sans-serif; font-size: clamp(10px, 1vw, 12px); font-weight: 600;
      color: #f2ebe0; background: rgba(0,0,0,0.22);
      border: 1.5px solid rgba(255,255,255,0.32);
      border-radius: 0;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .contacto-campo input:focus,
    .contacto-campo textarea:focus {
      outline: none;
      border-color: #e8ff00;
      box-shadow: 0 0 0 2px rgba(232,255,0,0.15);
    }
    .contacto-campo textarea {
      min-height: clamp(48px, 7vh, 64px); resize: vertical; line-height: 1.4;
    }
    .contacto-trampa {
      position: absolute; left: -9999px; width: 1px; height: 1px;
      opacity: 0; pointer-events: none;
    }
    .contacto-enviar {
      width: 100%; margin-top: 4px; padding: clamp(8px, 1vh, 10px) 12px;
      font-family: 'Black Ops One', sans-serif;
      font-size: clamp(10px, 1vw, 12px); letter-spacing: 1.8px; text-transform: uppercase;
      color: #0a0a0a; background: #e8ff00;
      border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 #8b0000;
      cursor: pointer;
      transform: rotate(0.8deg);
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    }
    .contacto-enviar:hover:not(:disabled) {
      transform: rotate(0deg) translateY(-2px);
      box-shadow: 5px 5px 0 #0a0a0a;
      filter: brightness(1.05);
    }
    .contacto-enviar:disabled { opacity: 0.55; cursor: wait; }
    .contacto-feedback {
      margin-top: 6px; min-height: 14px;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(7px, 0.75vw, 8px); font-weight: 700; letter-spacing: 0.9px;
      text-transform: uppercase; text-align: center;
    }
    .contacto-feedback.ok { color: #e8ff00; text-shadow: 0 0 10px rgba(232,255,0,0.35); }
    .contacto-feedback.err { color: #ff6b6b; }

    .contacto-ver-fotos {
      position: relative;
      width: 100%;
      margin-top: 10px;
      /* tamaño de cajetín original (antes de la cámara) */
      padding: clamp(9px, 1.1vh, 12px) 14px;
      font-family: 'Permanent Marker', 'Archivo', cursive, sans-serif;
      font-size: clamp(13px, 1.35vw, 16px);
      font-weight: 400;
      letter-spacing: 0.5px;
      text-transform: none;
      color: #f2ebe0;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      box-shadow: 4px 4px 0 #0a0a0a;
      cursor: pointer;
      transform: rotate(-1.2deg);
      transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, background 0.15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      overflow: visible;
    }
    .contacto-ver-fotos[hidden] { display: none !important; }
    .contacto-ver-fotos:hover {
      transform: rotate(0deg) translateY(-2px);
      box-shadow: 6px 6px 0 #0a0a0a;
      background: #a50000;
      filter: none;
      color: #fff;
    }
    .ver-fotos-txt { position: relative; z-index: 1; }

    /*
      Polaroid en esquina izq. del cajetín:
      medio dentro / medio fuera (fija, sin balanceo).
    */
    .ver-fotos-cam {
      position: absolute;
      z-index: 3;
      left: 0;
      top: 50%;
      /* doble base, un pelín más pequeña que 72–88 */
      width: clamp(62px, 15vw, 76px);
      height: clamp(62px, 15vw, 76px);
      display: block;
      pointer-events: none;
      transform: translate(-48%, -52%);
    }
    .ver-fotos-cam-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.5));
      transform: rotate(-8deg);
      transform-origin: 50% 70%;
    }
    /* Flash de la cámara al abrir galería */
    .ver-fotos-cam-flash {
      position: absolute;
      inset: -30%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,220,0.55) 35%, transparent 70%);
      opacity: 0;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .contacto-ver-fotos.flashing .ver-fotos-cam-flash {
      animation: verFotosFlash 0.45s ease-out forwards;
    }
    .contacto-ver-fotos.flashing .ver-fotos-cam-img {
      animation: verFotosCamShoot 0.45s ease-out;
    }
    @keyframes verFotosFlash {
      0%   { opacity: 0; transform: scale(0.4); }
      12%  { opacity: 1; transform: scale(1.35); }
      40%  { opacity: 0.85; transform: scale(1.1); }
      100% { opacity: 0; transform: scale(0.8); }
    }
    @keyframes verFotosCamShoot {
      0%   { transform: rotate(-8deg) scale(1); }
      15%  { transform: rotate(-2deg) scale(1.1); }
      35%  { transform: rotate(-12deg) scale(0.96); }
      100% { transform: rotate(-8deg) scale(1); }
    }
    /* Flash de pantalla al disparar */
    .ver-fotos-screen-flash {
      position: fixed;
      inset: 0;
      z-index: 12500;
      pointer-events: none;
      background: #fff;
      opacity: 0;
    }
    .ver-fotos-screen-flash.on {
      animation: verFotosScreenFlash 0.38s ease-out forwards;
    }
    @keyframes verFotosScreenFlash {
      0%   { opacity: 0; }
      8%   { opacity: 0.92; }
      35%  { opacity: 0.55; }
      100% { opacity: 0; }
    }

    /* ── Galería circular flotante (polaroid + fondo transparente) ── */
    .galeria-overlay {
      position: fixed;
      inset: 0;
      z-index: 12000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 16px 28px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .galeria-overlay.abierta {
      opacity: 1;
      pointer-events: auto;
    }
    .galeria-overlay[hidden] { display: none !important; }
    .galeria-backdrop {
      position: absolute;
      inset: 0;
      background: transparent;
      /* deja ver la web detrás; clic fuera cierra */
    }
    .galeria-cerrar {
      position: absolute;
      top: max(12px, env(safe-area-inset-top));
      right: max(14px, env(safe-area-inset-right));
      z-index: 3;
      width: 46px;
      height: 46px;
      border: 2px solid #0a0a0a;
      border-radius: 50%;
      background: #f4efe4;
      color: #0a0a0a;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
      transition: transform 0.15s, background 0.15s;
    }
    .galeria-cerrar:hover {
      transform: scale(1.06) rotate(8deg);
      background: #e8ff00;
    }
    .galeria-escena {
      position: relative;
      z-index: 2;
      width: min(96vw, 820px);
      height: min(64vh, 480px);
      perspective: 900px;
      perspective-origin: 50% 45%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      pointer-events: auto; /* arrastre del cilindro */
      cursor: grab;
      transform-style: preserve-3d;
      touch-action: pan-y;
    }
    .galeria-escena:active { cursor: grabbing; }
    .galeria-anillo {
      position: relative;
      width: 1px;
      height: 1px;
      transform-style: preserve-3d;
      will-change: transform;
      pointer-events: none;
      /* sin transition: el giro 3D es continuo por JS */
    }
    /* Polaroid antigua — cara del cilindro 3D */
    .galeria-item {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(112px, 17vw, 156px);
      height: auto;
      margin: 0;
      padding: 8px 8px 28px;
      border: none;
      border-radius: 2px 3px 2px 2px;
      overflow: visible;
      background:
        linear-gradient(165deg, #f7f2e6 0%, #efe6d4 48%, #e8dcc6 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -1px 0 rgba(0, 0, 0, 0.06) inset,
        0 18px 36px rgba(0, 0, 0, 0.42),
        3px 4px 0 rgba(0, 0, 0, 0.14);
      cursor: zoom-in;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      pointer-events: auto;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: filter 0.2s, box-shadow 0.2s, opacity 0.2s;
      filter:
        contrast(0.94) saturate(0.78) sepia(0.22) brightness(0.98);
    }
    /* delante: más fácil de clicar en hit-test 3D */
    .galeria-item.activo {
      z-index: 5;
    }
    /* detrás del cilindro: no roban clics a las de delante */
    .galeria-item.detras {
      pointer-events: none !important;
    }
    .galeria-item::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0.35;
      background:
        radial-gradient(ellipse at 20% 15%, rgba(255,255,255,0.45), transparent 40%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }
    .galeria-item::after {
      content: attr(data-caption);
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 7px;
      font-family: 'Permanent Marker', 'Archivo', cursive, sans-serif;
      font-size: clamp(8px, 1.1vw, 10px);
      letter-spacing: 0.3px;
      color: #3a3228;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0.85;
      pointer-events: none;
      transform: rotate(-0.4deg);
    }
    .galeria-item.activo {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 22px 40px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(232, 255, 0, 0.55),
        0 0 24px rgba(232, 255, 0, 0.25);
      filter:
        contrast(1) saturate(0.92) sepia(0.1) brightness(1.04);
    }
    .galeria-item.detras {
      opacity: 0.55;
      filter:
        contrast(0.88) saturate(0.65) sepia(0.28) brightness(0.88);
    }
    .galeria-item-foto {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 1px;
      background: #1a1510;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      /* revelado polaroid / algo desgastado */
      filter: contrast(1.05) saturate(0.9);
    }
    .galeria-controles {
      position: relative;
      z-index: 2;
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: min(92vw, 480px);
      pointer-events: auto;
    }
    .galeria-nav {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid #0a0a0a;
      background: #f4efe4;
      color: #0a0a0a;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
      transition: transform 0.15s, background 0.15s;
    }
    .galeria-nav:hover {
      transform: scale(1.08);
      background: #e8ff00;
    }
    .galeria-meta {
      flex: 1;
      min-width: 0;
      text-align: center;
      padding: 6px 10px;
      background: rgba(244, 239, 228, 0.88);
      border: 2px solid #0a0a0a;
      box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
      transform: rotate(-0.5deg);
    }
    .galeria-titulo {
      display: block;
      font-family: 'Permanent Marker', 'Archivo', cursive, sans-serif;
      font-size: clamp(12px, 2.4vw, 15px);
      letter-spacing: 0.4px;
      color: #2a241c;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .galeria-contador {
      display: block;
      margin-top: 2px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #8b0000;
      text-transform: uppercase;
    }
    .galeria-hint {
      position: relative;
      z-index: 2;
      margin-top: 12px;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.35em;
      max-width: min(92vw, 420px);
      padding: 8px 14px 9px;
      font-family: 'Permanent Marker', 'Archivo', cursive, sans-serif;
      font-size: clamp(12px, 2.6vw, 15px);
      font-weight: 400;
      letter-spacing: 0.35px;
      line-height: 1.25;
      text-align: center;
      text-transform: none;
      color: #f2ebe0;
      background: #8b0000;
      border: 2px solid #0a0a0a;
      box-shadow: 4px 4px 0 #0a0a0a;
      transform: rotate(-1.1deg);
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
    }
    .galeria-hint-brand {
      color: #e8ff00;
      text-shadow: 1px 1px 0 #0a0a0a;
    }
    .galeria-hint-dot {
      color: rgba(242, 235, 224, 0.75);
      font-weight: 700;
      padding: 0 0.05em;
    }

    /* Zoom grande: vuelo 3D + golpe + pegado a pantalla */
    .galeria-zoom {
      position: fixed;
      inset: 0;
      z-index: 13000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      perspective: 1400px;
      perspective-origin: 50% 45%;
      transform-style: preserve-3d;
    }
    .galeria-zoom.abierta {
      opacity: 1;
      pointer-events: auto;
    }
    .galeria-zoom[hidden] { display: none !important; }
    .galeria-zoom-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
      cursor: zoom-out;
      transition: background 0.55s ease, backdrop-filter 0.55s ease;
    }
    .galeria-zoom.abierta .galeria-zoom-backdrop {
      background: rgba(0, 0, 0, 0.52);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    /* Flash de impacto (detrás de la polaroid para no taparla) */
    .galeria-zoom-flash {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.45), rgba(255,240,200,0.12) 42%, transparent 72%);
      opacity: 0;
    }
    .galeria-zoom.impacto .galeria-zoom-flash {
      animation: galeria-flash-golpe 0.4s ease-out forwards;
    }
    @keyframes galeria-flash-golpe {
      0%   { opacity: 0.7; }
      45%  { opacity: 0.25; }
      100% { opacity: 0; }
    }
    /* Onda de choque al pegar */
    .galeria-zoom-onda {
      position: absolute;
      left: 50%;
      top: 48%;
      z-index: 1;
      width: 40px;
      height: 40px;
      margin: -20px 0 0 -20px;
      border: 3px solid rgba(232, 255, 0, 0.45);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }
    .galeria-zoom.impacto .galeria-zoom-onda {
      animation: galeria-onda-choque 0.7s cubic-bezier(0.15, 0.8, 0.25, 1) forwards;
    }
    @keyframes galeria-onda-choque {
      0%   { transform: scale(0.4); opacity: 0.9; border-width: 6px; }
      100% { transform: scale(18); opacity: 0; border-width: 0; }
    }
    .galeria-zoom-polaroid {
      position: relative;
      z-index: 3;
      width: min(88vw, 420px);
      padding: 14px 14px 52px;
      background:
        linear-gradient(168deg, #f8f3e8 0%, #efe6d2 50%, #e6d9c0 100%);
      box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.55) inset,
        0 40px 80px rgba(0, 0, 0, 0.55),
        6px 10px 0 rgba(0, 0, 0, 0.18);
      filter: contrast(0.96) saturate(0.82) sepia(0.18);
      transform-style: preserve-3d;
      will-change: transform, filter, opacity;
      opacity: 0;
      /* estado inicial: lejos, girando */
      transform:
        perspective(1200px)
        translate3d(0, 40px, -900px)
        rotateY(-520deg)
        rotateX(28deg)
        rotateZ(18deg)
        scale(0.18);
    }
    /* Vuelo: gira + zoom hasta pegarse */
    .galeria-zoom.vuelo .galeria-zoom-polaroid {
      animation: galeria-vuelo-zoom 0.78s cubic-bezier(0.14, 0.75, 0.2, 1) forwards;
    }
    @keyframes galeria-vuelo-zoom {
      0% {
        opacity: 0.55;
        transform:
          perspective(1200px)
          translate3d(0, 60px, -980px)
          rotateY(-540deg)
          rotateX(32deg)
          rotateZ(22deg)
          scale(0.14);
        filter: contrast(0.9) saturate(0.7) sepia(0.25) blur(2px);
        box-shadow:
          0 2px 0 rgba(255, 255, 255, 0.3) inset,
          0 8px 20px rgba(0, 0, 0, 0.25);
      }
      55% {
        opacity: 1;
        filter: contrast(0.96) saturate(0.85) sepia(0.15) blur(0);
      }
      /* se acerca y sigue girando */
      72% {
        opacity: 1;
        transform:
          perspective(1200px)
          translate3d(0, -6px, 80px)
          rotateY(28deg)
          rotateX(-6deg)
          rotateZ(-4deg)
          scale(1.12);
        box-shadow:
          0 2px 0 rgba(255, 255, 255, 0.55) inset,
          0 50px 90px rgba(0, 0, 0, 0.6),
          0 0 40px rgba(232, 255, 0, 0.15);
      }
      /* golpe / sobre-escala */
      82% {
        opacity: 1;
        transform:
          perspective(1200px)
          translate3d(0, 4px, 0)
          rotateY(-6deg)
          rotateX(2deg)
          rotateZ(2.5deg)
          scale(1.04);
      }
      /* rebote y se pega a la pantalla */
      100% {
        opacity: 1;
        transform:
          perspective(1200px)
          translate3d(0, 0, 0)
          rotateY(0deg)
          rotateX(0deg)
          rotateZ(-1.4deg)
          scale(1);
        filter: contrast(0.98) saturate(0.9) sepia(0.12);
        box-shadow:
          0 2px 0 rgba(255, 255, 255, 0.55) inset,
          0 22px 50px rgba(0, 0, 0, 0.55),
          5px 8px 0 rgba(0, 0, 0, 0.2),
          0 0 0 1px rgba(0, 0, 0, 0.08);
      }
    }
    /*
      Estado PEGADA AL CRISTAL:
      - opacity fija a 1 (si no, al quitar .vuelo vuelve a opacity:0 del base y desaparece)
      - transform plano, como chafada contra el cristal
    */
    .galeria-zoom.pegada .galeria-zoom-polaroid {
      opacity: 1 !important;
      visibility: visible;
      filter: contrast(0.98) saturate(0.9) sepia(0.12);
      /* sombra corta = pegada al cristal, no flotando */
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 0 0 1px rgba(0, 0, 0, 0.14),
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 10px 28px rgba(0, 0, 0, 0.28),
        3px 4px 0 rgba(0, 0, 0, 0.12);
      animation: galeria-pegada-temblor 0.5s ease-out forwards;
    }
    @keyframes galeria-pegada-temblor {
      0% {
        opacity: 1;
        transform: rotate(-1.4deg) scale(1.03) translate(0, 0);
      }
      14% {
        opacity: 1;
        transform: rotate(-0.3deg) scale(1.01) translate(-2px, 2px);
      }
      30% {
        opacity: 1;
        transform: rotate(-1.9deg) scale(0.995) translate(3px, -2px);
      }
      48% {
        opacity: 1;
        transform: rotate(-0.9deg) scale(1.004) translate(-1px, 1px);
      }
      70% {
        opacity: 1;
        transform: rotate(-1.5deg) scale(0.999) translate(1px, 0);
      }
      100% {
        opacity: 1;
        /* queda fija en el cristal */
        transform: rotate(-1.2deg) scale(1) translate(0, 0);
      }
    }
    /* Tras el temblor residual, se queda quieta (forwards ya la deja en 100%) */
    .galeria-zoom.pegada.fija .galeria-zoom-polaroid {
      animation: none;
      opacity: 1 !important;
      transform: rotate(-1.2deg) scale(1) translate(0, 0);
    }
    /* Retumbo de toda la capa (y se propaga al html) */
    .galeria-zoom.impacto {
      animation: galeria-retumbo-capa 0.55s ease-out;
    }
    @keyframes galeria-retumbo-capa {
      0%, 70% { transform: translate(0, 0) rotate(0); }
      72% { transform: translate(-10px, 6px) rotate(-0.6deg); }
      78% { transform: translate(12px, -8px) rotate(0.7deg); }
      84% { transform: translate(-8px, -4px) rotate(-0.4deg); }
      90% { transform: translate(6px, 5px) rotate(0.3deg); }
      96% { transform: translate(-3px, 2px) rotate(-0.15deg); }
      100% { transform: translate(0, 0) rotate(0); }
    }
    html.galeria-retumbo,
    html.galeria-retumbo body {
      animation: galeria-retumbo-pantalla 0.55s ease-out;
    }
    @keyframes galeria-retumbo-pantalla {
      0%, 68% { transform: translate(0, 0); }
      70% { transform: translate(-7px, 4px); }
      76% { transform: translate(9px, -5px); }
      82% { transform: translate(-5px, -3px); }
      88% { transform: translate(4px, 3px); }
      94% { transform: translate(-2px, 1px); }
      100% { transform: translate(0, 0); }
    }
    .galeria-zoom-polaroid::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.28;
      background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }
    .galeria-zoom-polaroid img {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: #1a1510;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
      filter: contrast(1.06) saturate(0.92);
    }
    .galeria-zoom-caption {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      font-family: 'Permanent Marker', 'Archivo', cursive, sans-serif;
      font-size: clamp(14px, 3.2vw, 18px);
      color: #2e281f;
      text-align: center;
      transform: rotate(-0.6deg);
      opacity: 0;
    }
    .galeria-zoom.pegada .galeria-zoom-caption {
      animation: galeria-caption-in 0.35s ease 0.05s forwards;
    }
    @keyframes galeria-caption-in {
      from { opacity: 0; transform: rotate(-0.6deg) translateY(6px); }
      to   { opacity: 1; transform: rotate(-0.6deg) translateY(0); }
    }
    .galeria-zoom-cerrar {
      position: absolute;
      top: max(12px, env(safe-area-inset-top));
      right: max(14px, env(safe-area-inset-right));
      z-index: 5;
      width: 46px;
      height: 46px;
      border: 2px solid #0a0a0a;
      border-radius: 50%;
      background: #f4efe4;
      color: #0a0a0a;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.2s, transform 0.2s, background 0.15s;
    }
    .galeria-zoom.pegada .galeria-zoom-cerrar {
      opacity: 1;
      transform: scale(1);
    }
    .galeria-zoom-cerrar:hover { background: #e8ff00; }
    /* Salida rápida al cerrar */
    .galeria-zoom.saliendo .galeria-zoom-polaroid {
      animation: galeria-zoom-out 0.28s ease-in forwards;
    }
    .galeria-zoom.saliendo .galeria-zoom-backdrop {
      background: rgba(0, 0, 0, 0) !important;
      backdrop-filter: blur(0) !important;
    }
    @keyframes galeria-zoom-out {
      to {
        opacity: 0;
        transform:
          perspective(1200px)
          translate3d(0, 30px, -200px)
          rotateY(40deg)
          rotateZ(-8deg)
          scale(0.55);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .galeria-zoom.vuelo .galeria-zoom-polaroid,
      .galeria-zoom.pegada .galeria-zoom-polaroid,
      .galeria-zoom.impacto,
      html.galeria-retumbo,
      html.galeria-retumbo body {
        animation: none !important;
      }
      .galeria-zoom.abierta .galeria-zoom-polaroid,
      .galeria-zoom.pegada .galeria-zoom-polaroid {
        opacity: 1 !important;
        transform: rotate(-1.2deg) scale(1);
      }
    }

    @media (max-width: 640px) {
      .galeria-escena {
        height: min(52vh, 380px);
      }
      .galeria-item {
        width: clamp(92px, 26vw, 120px);
        padding: 6px 6px 24px;
      }
      .galeria-item::after {
        font-size: 7.5px;
        bottom: 5px;
      }
    }

    /* ── Desktop grande ── */
    @media (min-width: 1400px) {
      :root {
        --logo-w: clamp(240px, 16vw, 300px);
        --portada-w: clamp(230px, 17vw, 270px);
        --player-h: clamp(120px, 14vh, 160px);
        --player-max: 360px;
        --conciertos-max: 320px;
        --contacto-max: 300px;
      }
      #distribucion {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.55fr) minmax(0, 0.82fr);
      }
    }

    /* ── Laptop / desktop estrecho ── */
    @media (min-width: 901px) and (max-width: 1199px) {
      :root {
        --logo-w: clamp(180px, 16vw, 220px);
        --portada-w: clamp(175px, 17vw, 210px);
        --player-h: clamp(100px, 12vh, 130px);
        --player-max: 320px;
        --conciertos-max: 280px;
        --contacto-max: 260px;
        --col-pad-y: clamp(10px, 2vh, 20px);
        --conciertos-cols: 1;
      }
    }

    /* ── Pantalla baja (portátiles 768p, etc.) ── */
    @media (min-width: 901px) and (max-height: 860px) {
      :root {
        --logo-w: clamp(160px, 14vw, 200px);
        --portada-w: clamp(155px, 15vw, 185px);
        --player-h: clamp(90px, 11vh, 120px);
        --col-pad-y: clamp(8px, 1.6vh, 14px);
        --col-gap: 4px;
        --conciertos-cols: 2;
      }
      .outnow-sello { display: none; }
      .carrito-ticket { padding: 10px 8px 12px; }
      .ya-hero--grunge .carrito-item-portada {
        width: clamp(38px, 12cqi, 52px);
        height: clamp(38px, 12cqi, 52px);
      }
      .generos { display: none; }
      .centro-duo { padding: 8px 6px; gap: 8px; }
    }

    /* ── Pantalla muy baja ── */
    @media (min-width: 901px) and (max-height: 720px) {
      :root {
        --logo-w: clamp(140px, 13vw, 175px);
        --portada-w: clamp(130px, 13vw, 160px);
        --player-h: clamp(80px, 10vh, 110px);
        --col-pad-y: 6px;
      }
      .ya-pre { display: none; }
      .outnow-pre { font-size: 7px; letter-spacing: 2px; }
      .centro-duo { padding: 6px 5px; gap: 6px; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       📱  TABLET — una columna con scroll
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 900px) {
      html, body { overflow: auto; height: auto; min-height: 100%; }
      #distribucion {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100dvh;
      }
      #pantalla-principal { position: relative; overflow-y: auto; min-height: 100dvh; }
      #col-izquierda, #col-central, #col-derecha {
        border: none;
        border-bottom: 1px solid rgba(0,0,0,0.15);
        padding: clamp(28px, 6vw, 44px) clamp(20px, 5vw, 32px);
        height: auto;
        min-height: auto;
        overflow: visible;
        gap: clamp(10px, 2.5vw, 16px);
      }
      :root {
        --logo-w: min(260px, 68vw);
        --portada-w: min(240px, 72vw);
        --player-h: 140px;
        --player-max: min(380px, 94vw);
        --conciertos-max: min(400px, 94vw);
        --contacto-max: min(360px, 94vw);
        --conciertos-cols: 1;
      }
      .generos { margin-top: 0; margin-bottom: 4px; }
      .conciertos-lista .concierto-sep { display: block; }
      #col-central { --centro-ancho: 100%; }
      #col-central > .outnow-hero,
      #col-central > .centro-duo,
      #col-central > .titulo-album,
      #col-central > .subtitulo-album,
      #col-central > .prensa-wrap {
        max-width: var(--centro-ancho);
      }
    }

    /* ── Móvil ── */
    @media (max-width: 600px) {
      :root {
        --logo-w: min(220px, 78vw);
        --portada-w: min(210px, 80vw);
        --player-h: 120px;
        --conciertos-cols: 1;
      }
      #col-central { --centro-ancho: 100%; }
      #col-izquierda, #col-central, #col-derecha {
        padding: 24px 18px;
      }
      .conciertos-linea--prox { font-size: 20px; }
      .conciertos-linea--con { font-size: 32px; }
    }

    @media (max-width: 520px) {
      #col-central { --centro-ancho: min(100%, 96vw); }
      .centro-duo {
        grid-template-columns: 1fr 1fr;
        padding: 8px 6px;
        gap: 6px;
      }
      .bzo-player { padding: 7px 8px; }
      .bzo-player-marca-titulo { font-size: 12px; }
      .bzo-tab { font-size: 7px; padding: 4px 7px; }
      .bzo-player-pie { flex-direction: column; align-items: flex-start; gap: 6px; }
      .outnow-hero { margin-bottom: 12px; }
      .outnow-cinta { display: none; }
      .outnow-franja { gap: 4px 6px; }
      .outnow-tag { font-size: 10px; }
      .portada-sticker { left: -8px; }
      .ya-hero, .cita-grunge, .contacto-grunge { max-width: 100%; }
    }

    @media (max-width: 480px) {
      .centro-duo {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 12px 10px;
      }
      .centro-duo::before { display: none; }
      .centro-duo-celda--disco,
      .centro-duo-celda--venta { padding: 0; }
      .centro-duo .portada-wrap { max-width: min(240px, 78vw); }
      .ya-cinta--top { right: -4px; font-size: 9px; padding: 4px 14px; }
      .ya-linea--ala { letter-spacing: 0.2em; padding: 2px 10px; }
      .boton-plataforma { font-size: 10px; padding: 9px 14px; }
      .contacto-grunge { margin-top: 14px; }
      .admin-ghost { top: 8px; right: 8px; font-size: 7px; padding: 4px 7px; }
      .rmi-esquina { bottom: 10px; right: 10px; }
      .rmi-esquina-logo { height: 11px; }
      .rmi-esquina-txt, .rmi-esquina-web, .rmi-esquina-tel { font-size: 6px; }
    }