/* ─────────────────────────────────────────────────
       LOADER
    ───────────────────────────────────────────────── */
    #loader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #loader-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
    }

    /* Wrapper de la imagen — circular para recortar el fondo blanco */
    #loader-img-wrap {
      position: relative;
      width: clamp(120px, 24vw, 180px);
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
    }

    /* La imagen de la mascota base — tenue como "fantasma" */
    #loader-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(0.25) saturate(0);
    }

    /* Capa de fill — a color, se revela de abajo hacia arriba */
    #loader-fill {
      position: absolute;
      inset: 0;
      background: url('assets/LoadingPelusa.png') center / cover no-repeat;
      clip-path: inset(100% 0 0 0);
    }

    /* Barra de progreso */
    #loader-bar-wrap {
      width: clamp(100px, 22vw, 160px);
      height: 2px;
      background: rgba(255,255,255,0.08);
      border-radius: 2px;
      overflow: hidden;
    }

    #loader-bar {
      height: 100%;
      width: 0%;
      background: #fff;
      border-radius: 2px;
      transition: width 0.05s linear;
    }

    /* ─────────────────────────────────────────────────
       RESET
    ───────────────────────────────────────────────── */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg: #0a0a0a;
      --bg2: #0f0f0f;
      --bg3: #111111;
      --text: #ede8e1;
      --text2: rgba(237, 232, 225, 0.62);
      --muted: rgba(237, 232, 225, 0.38);
      --accent: #c1121f;
      --accent2: #8a0d15;
      --line: rgba(237, 232, 225, 0.06);
      --line2: rgba(237, 232, 225, 0.10);
      --max: 1200px;
      --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--sans);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ─────────────────────────────────────────────────
       GRAIN — capa de película sobre toda la página
    ───────────────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: 0.038;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size: 180px 180px;
      mix-blend-mode: overlay;
    }

    /* ─────────────────────────────────────────────────
       LAYOUT
    ───────────────────────────────────────────────── */
    .wrap {
      max-width: var(--max);
      margin-inline: auto;
      padding-inline: 2.75rem;
    }

    .sec {
      padding-block: 10rem;
    }

    .sec--alt {
      background: var(--bg2);
    }

    .sec--dark {
      background: var(--bg);
    }

    /* ─────────────────────────────────────────────────
       REVEAL — entrada más cinematográfica
    ───────────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    .d1 {
      transition-delay: 0.12s;
    }

    .d2 {
      transition-delay: 0.24s;
    }

    .d3 {
      transition-delay: 0.36s;
    }

    .d4 {
      transition-delay: 0.48s;
    }

    /* ─────────────────────────────────────────────────
       PRIMITIVES
    ───────────────────────────────────────────────── */
    .label {
      display: inline-block;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 2rem;
    }

    /* BTN — más peso, más presencia */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 1.05rem 2.25rem;
      border: 1px solid rgba(237, 232, 225, 0.18);
      background: transparent;
      font-family: var(--sans);
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--text);
      cursor: pointer;
      position: relative;
      transition: color 0.35s ease, border-color 0.35s ease,
        background 0.35s ease, transform 0.25s ease;
    }

    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(237, 232, 225, 0.0);
      transition: background 0.35s ease;
    }

    .btn:hover {
      border-color: rgba(237, 232, 225, 0.42);
      transform: translateY(-1px);
    }

    .btn:hover::before {
      background: rgba(237, 232, 225, 0.04);
    }

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

    /* BTN primary — el CTA principal del hero */
    .btn--primary {
      border-color: var(--text);
      background: rgba(237, 232, 225, 0.06);
      padding: 1.1rem 2.5rem;
    }

    .btn--primary:hover {
      background: rgba(237, 232, 225, 0.12);
      border-color: var(--text);
    }

    /* ─────────────────────────────────────────────────
       NAV
    ───────────────────────────────────────────────── */
    #nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.75rem 2.75rem;
      transition: background 0.5s, border-bottom 0.5s, padding 0.4s;
    }

    #nav.solid {
      background: rgba(10, 10, 10, 0.92);
      backdrop-filter: blur(18px) saturate(120%);
      border-bottom: 1px solid var(--line);
      padding-block: 1.25rem;
    }

    .nav-logo {
      display: block;
      height: 26px;
      width: auto;
      position: relative;
      z-index: 102;
      mix-blend-mode: multiply;
      filter: contrast(1.1) brightness(1.05);
      transition: opacity 0.2s;
      user-select: none;
      -webkit-user-drag: none;
    }

    .nav-logo:hover {
      opacity: 0.75;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .nav-links {
      display: flex;
      gap: 2.5rem;
      align-items: center;
    }

    .nav-links a {
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.25s;
    }

    .nav-links a:hover {
      color: var(--text);
    }

    .nav-sep {
      width: 1px;
      height: 14px;
      background: var(--line2);
    }

    .nav-socials {
      display: flex;
      gap: 1.4rem;
      align-items: center;
    }

    .nav-socials a {
      display: flex;
      align-items: center;
      color: var(--muted);
      transition: color 0.25s;
    }

    .nav-socials a:hover {
      color: var(--text);
    }

    .nav-socials svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }

    .nav-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      z-index: 102;
      position: relative;
    }

    .nav-burger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--text);
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
      transform-origin: center;
    }

    .nav-burger.open span:first-child {
      transform: translateY(7.5px) rotate(45deg);
    }

    .nav-burger.open span:last-child {
      transform: translateY(-7.5px) rotate(-45deg);
    }

    /* ─────────────────────────────────────────────────
       MOBILE MENU
    ───────────────────────────────────────────────── */
    #mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 99;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    #mobile-menu::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(193, 18, 31, 0.06) 0%, transparent 65%);
      pointer-events: none;
    }

    #mobile-menu.open {
      opacity: 1;
      pointer-events: all;
    }

    .mm-link {
      font-size: clamp(2.5rem, 11vw, 3.75rem);
      font-weight: 900;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: rgba(237, 232, 225, 0.12);
      transition: color 0.25s, letter-spacing 0.35s;
      padding: 0.35rem 1rem;
      line-height: 1;
    }

    .mm-link:hover {
      color: var(--text);
      letter-spacing: 0.03em;
    }

    .mm-bottom {
      position: absolute;
      bottom: 3rem;
      display: flex;
      gap: 2rem;
    }

    .mm-bottom a {
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.2s;
    }

    .mm-bottom a:hover {
      color: var(--text);
    }

    /* ─────────────────────────────────────────────────
       HERO
    ───────────────────────────────────────────────── */
    #hero {
      height: 100vh;
      min-height: 680px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }

    /* Video de fondo — ocupa todo el hero */
    .hero-video-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
    }

    .hero-video-wrap video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      /* Desaturación cinematográfica + leve ajuste de contraste */
      filter: grayscale(85%) contrast(1.08) brightness(0.80);
      /* Sin interacción ni selección */
      pointer-events: none;
      user-select: none;
    }

    /* Overlay — controla la legibilidad del texto sobre el video */
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        /* Oscuro arriba para que el nav respire */
        linear-gradient(to bottom,
          rgba(10, 10, 10, 0.55) 0%,
          rgba(10, 10, 10, 0.08) 28%,
          rgba(10, 10, 10, 0.12) 55%,
          rgba(10, 10, 10, 0.96) 100%),
        /* Empuje lateral izquierdo — tensión editorial */
        linear-gradient(to right,
          rgba(10, 10, 10, 0.45) 0%,
          transparent 55%);
      pointer-events: none;
    }

    /* Haze cinematográfico — velo de luz desde arriba */
    .hero-haze {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 50% at 50% -10%,
          rgba(237, 232, 225, 0.04) 0%,
          transparent 70%);
      pointer-events: none;
      z-index: 1;
    }

    .hero-body {
      position: relative;
      z-index: 2;
      width: 100%;
      padding-bottom: 6.5rem;
      /* Tensión editorial: ligeramente off-center hacia la izquierda */
    }

    .hero-eye {
      font-size: 0.6rem;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: rgba(237, 232, 225, 0.35);
      margin-bottom: 1.25rem;
      display: block;
    }

    /* Hero logo PNG — reemplaza el h1 textual */
    .hero-logo {
      display: block;
      /* Ancho relativo al viewport, con tope razonable */
      width: clamp(280px, 72vw, 960px);
      height: auto;
      margin-bottom: 2.75rem;
      margin-left: -0.02em;
      /* mix-blend-mode elimina el fondo blanco del PNG,
         dejando solo la tipografía dorada sobre el video */
      mix-blend-mode: multiply;
      /* Invertimos el logo para que el dorado se lea bien
         sobre fondo oscuro: multiply sobre negro = negro,
         pero queremos que brille, así que no usamos invert.
         En su lugar aumentamos levemente el contraste. */
      filter: contrast(1.05) brightness(1.1);
      /* Sin arrastrar ni seleccionar */
      user-select: none;
      pointer-events: none;
      -webkit-user-drag: none;
    }

    .hero-row {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      flex-wrap: wrap;
    }

    .hero-tagline {
      font-size: 0.7rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--text2);
    }

    /* Línea divisoria vertical entre tagline y CTA */
    .hero-divider {
      width: 1px;
      height: 18px;
      background: var(--line2);
      flex-shrink: 0;
    }

    .scroll-cue {
      position: absolute;
      bottom: 2.5rem;
      right: 2.75rem;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.7rem;
    }

    .scroll-cue span {
      font-size: 0.55rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(237, 232, 225, 0.2);
      writing-mode: vertical-rl;
    }

    .scroll-cue::after {
      content: '';
      width: 1px;
      height: 60px;
      background: linear-gradient(to bottom, rgba(237, 232, 225, 0.18), transparent);
      animation: scrollPulse 2.2s ease-in-out infinite;
    }

    @keyframes scrollPulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.3;
      }
    }

    /* ─────────────────────────────────────────────────
       EDITORIAL / ÁLBUM
    ───────────────────────────────────────────────── */
    #album {
      position: relative;
      overflow: hidden;
    }

    /* Degradado sutil de fondo con información */
    #album::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 70% at 100% 100%,
          rgba(193, 18, 31, 0.035) 0%, transparent 70%);
      pointer-events: none;
    }

    .edit-grid {
      display: grid;
      grid-template-columns: 52% 1fr;
      gap: 6.5rem;
      align-items: center;
    }

    .edit-img {
      overflow: hidden;
      aspect-ratio: 4 / 5;
      position: relative;
    }

    /* Overlay sobre la imagen para integrarla */
    .edit-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, rgba(15, 15, 15, 0.45) 0%, transparent 40%),
        linear-gradient(to right, rgba(15, 15, 15, 0.22) 0%, transparent 40%);
      pointer-events: none;
    }

    .edit-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(22%) contrast(1.06) brightness(0.9);
      display: block;
      transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .edit-img:hover img {
      transform: scale(1.03);
    }

    .edit-text {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      /* Leve offset vertical para romper simetría */
      padding-top: 2rem;
    }

    .alb-year {
      font-size: 0.65rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .alb-name {
      font-size: clamp(3rem, 5.5vw, 5.25rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      line-height: 0.89;
      color: var(--text);
    }

    /* Línea horizontal decorativa */
    .alb-rule {
      width: 2.5rem;
      height: 1px;
      background: var(--accent);
      flex-shrink: 0;
    }

    .alb-desc {
      font-size: 1rem;
      line-height: 1.9;
      color: var(--text2);
      max-width: 30ch;
      font-weight: 300;
    }

    /* ─────────────────────────────────────────────────
       SHOWS — sección editorial con ritmo
    ───────────────────────────────────────────────── */
    #shows {
      position: relative;
    }

    #shows::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 50% 60% at 0% 50%,
          rgba(193, 18, 31, 0.04) 0%, transparent 70%);
      pointer-events: none;
    }

    .sec-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 4.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .sec-h2 {
      font-size: clamp(2.25rem, 4.5vw, 3.5rem);
      font-weight: 900;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      line-height: 1;
    }

    /* Grid de fechas — grilla editorial */
    .dates-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--line);
    }

    .date-card {
      background: var(--bg);
      padding: 3rem 2.75rem;
      display: grid;
      grid-template-rows: auto auto auto auto;
      gap: 0;
      position: relative;
      overflow: hidden;
      transition: background 0.35s ease;
      cursor: default;
    }

    /* Línea de acento que aparece en hover */
    .date-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 0;
      background: var(--accent);
      transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .date-card:hover {
      background: #141414;
    }

    .date-card:hover::before {
      height: 100%;
    }

    .dc-date {
      display: flex;
      align-items: baseline;
      gap: 0.65rem;
      margin-bottom: 1.5rem;
    }

    /* Número del día — enorme */
    .dc-day {
      font-size: clamp(2.75rem, 5vw, 4rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--text);
      transition: color 0.25s;
    }

    .date-card:hover .dc-day {
      color: var(--text);
    }

    .dc-mon {
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
    }

    .dc-venue {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.4rem;
      letter-spacing: -0.01em;
    }

    .dc-city {
      font-size: 0.65rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 2rem;
    }

    .dc-link {
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: color 0.25s, gap 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      align-self: flex-start;
    }

    .dc-link:hover {
      color: var(--text);
      gap: 0.9rem;
    }

    /* ─────────────────────────────────────────────────
       GALERIA
    ───────────────────────────────────────────────── */
    .gallery-grid {
      columns: 3;
      column-gap: 3px;
    }

    .gallery-item {
      break-inside: avoid;
      margin-bottom: 3px;
      overflow: hidden;
      cursor: pointer;
      display: block;
      position: relative;
    }
    .gallery-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(10,10,10,0);
      transition: background 0.35s ease;
    }
    .gallery-item:hover::after {
      background: rgba(10,10,10,0.18);
    }

    .gallery-item img {
      width: 100%;
      height: auto;
      display: block;
      filter: grayscale(30%) contrast(1.05) brightness(0.9);
      transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
    }
    .gallery-item:hover img {
      filter: grayscale(0%) contrast(1.08) brightness(0.95);
      transform: scale(1.025);
    }

    /* — LIGHTBOX — */
    #lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(5,5,5,0.97);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #lightbox.open {
      opacity: 1;
      pointer-events: all;
    }
    #lightbox-img {
      max-width: 92vw;
      max-height: 90vh;
      object-fit: contain;
      display: block;
      filter: contrast(1.06) brightness(0.95);
      transition: opacity 0.22s ease;
    }
    #lightbox-img.fade { opacity: 0; }

    .lb-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(237,232,225,0.45);
      cursor: pointer;
      padding: 1.5rem;
      font-size: 1.5rem;
      line-height: 1;
      transition: color 0.2s;
      z-index: 201;
    }
    .lb-btn:hover { color: var(--text); }
    #lb-prev { left: 0.5rem; }
    #lb-next { right: 0.5rem; }

    #lb-close {
      position: absolute;
      top: 1.25rem;
      right: 1.5rem;
      background: none;
      border: none;
      color: rgba(237,232,225,0.4);
      cursor: pointer;
      font-size: 0.6rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-family: var(--sans);
      font-weight: 600;
      transition: color 0.2s;
      z-index: 201;
    }
    #lb-close:hover { color: var(--text); }

    #lb-counter {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.58rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: rgba(237,232,225,0.28);
      font-family: var(--sans);
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      .gallery-grid { columns: 2; }
    }
    @media (max-width: 420px) {
      .gallery-grid { columns: 1; }
    }

    /* ─────────────────────────────────────────────────
       VIDEOS — carousel
    ───────────────────────────────────────────────── */
    #videos { position: relative; }

    .videos-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2.5rem;
    }

    .vid-arrows {
      display: flex;
      gap: 0.75rem;
    }

    .vid-arrow {
      background: none;
      border: 1px solid var(--line2);
      color: var(--muted);
      font-size: 1rem;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
      line-height: 1;
    }
    .vid-arrow:hover {
      color: var(--text);
      border-color: var(--line2);
    }

    /* Track wrapper — oculta los slides adyacentes */
    .vid-track-wrap {
      overflow: hidden;
      border-radius: 2px;
    }

    /* Track con scroll-snap */
    .vid-track {
      display: flex;
      transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .vid-slide {
      min-width: 100%;
      flex-shrink: 0;
    }

    /* Iframe 16:9 */
    .vid-frame-wrap {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #000;
      overflow: hidden;
    }
    .vid-frame-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* Dots */
    .vid-dots {
      display: flex;
      justify-content: center;
      gap: 0.6rem;
      margin-top: 1.75rem;
    }
    .vid-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      border: none;
      background: var(--line2);
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
      padding: 0;
    }
    .vid-dot.active {
      background: var(--text);
      transform: scale(1.3);
    }

    /* ─────────────────────────────────────────────────
       LISTEN
    ───────────────────────────────────────────────── */
    #listen {
      position: relative;
      overflow: hidden;
    }

    #listen::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 55% 70% at 50% 50%,
          rgba(193, 18, 31, 0.045) 0%, transparent 70%);
      pointer-events: none;
    }

    .listen-wrap {
      text-align: center;
    }

    .listen-h2 {
      font-size: clamp(2.5rem, 5.5vw, 4.5rem);
      font-weight: 900;
      letter-spacing: -0.025em;
      text-transform: uppercase;
      margin-bottom: 1rem;
      line-height: 0.9;
      color: var(--text);
    }

    /* Subtítulo breve debajo del título */
    .listen-sub {
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4rem;
      display: block;
    }

    .listen-btns {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .listen-btns .btn svg {
      opacity: .5;
      transition: opacity .3s;
    }

    .listen-btns .btn:hover svg {
      opacity: 0.9;
    }



    /* ─────────────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────────────── */
    .divider {
      height: 1px;
      background: var(--line);
    }

    footer {
      padding-block: 3.5rem;
      background: var(--bg);
    }

    .footer-logo {
      display: block;
      height: 22px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.35;
      transition: opacity 0.3s;
      user-select: none;
      flex-shrink: 0;
      -webkit-user-drag: none;
    }
    .footer-logo:hover { opacity: 0.6; }

    .footer-left {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.25rem;
    }

    .footer-copy {
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(237, 232, 225, 0.18);
    }

    .footer-links {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .footer-links a {
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.25s;
    }

    .footer-links a:hover {
      color: var(--text);
    }

    /* ─────────────────────────────────────────────────
       RESPONSIVE — TABLET
    ───────────────────────────────────────────────── */
    @media (max-width: 960px) {
      .edit-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
      }

      .edit-img {
        aspect-ratio: 3 / 2;
      }

      .edit-text {
        padding-top: 0;
      }
    }

    /* ─────────────────────────────────────────────────
       RESPONSIVE — MOBILE
    ───────────────────────────────────────────────── */
    @media (max-width: 768px) {
      .sec {
        padding-block: 6rem;
      }

      .wrap {
        padding-inline: 1.35rem;
      }

      #nav {
        padding: 1.35rem 1.35rem;
      }

      .nav-links {
        display: none;
      }

      .nav-sep {
        display: none;
      }

      .nav-burger {
        display: flex;
      }

      .dates-grid {
        grid-template-columns: 1fr;
      }

      .date-card {
        padding: 2.25rem 1.35rem;
      }

      .hero-body {
        padding-bottom: 4.5rem;
      }

      .scroll-cue {
        display: none;
      }

      .listen-btns {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px;
        margin-inline: auto;
      }

      .listen-btns .btn {
        justify-content: center;
      }

      .nl-form {
        flex-direction: column;
      }

      .nl-form button {
        border-left: none;
        border-top: 1px solid var(--line2);
        padding: 1rem;
      }

      .footer-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .footer-links {
        justify-content: center;
        gap: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .hero-h1 {
        font-size: clamp(4rem, 23vw, 5.5rem);
      }

      .alb-desc {
        max-width: 100%;
      }
    }