 /* ==========================================================
       POPUP — TODAS LAS FECHAS
       ========================================================== */

    .dates-modal{
      position:fixed;
      inset:0;
      z-index:2000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:30px;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .25s ease, visibility .25s ease;
    }

    .dates-modal.is-open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    .dates-modal__backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.75);
      backdrop-filter:blur(7px);
    }

    .dates-modal__dialog{
      position:relative;
      z-index:2;
      width:min(980px,100%);
      max-height:90vh;
      overflow:auto;
      background:#101112;
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 30px 90px rgba(0,0,0,.45);
    }

    .dates-modal__header{
      position:sticky;
      top:0;
      z-index:4;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:25px;
      padding:28px 34px;
      background:#101112;
      border-bottom:1px solid rgba(255,255,255,.15);
    }

    .dates-modal__heading{
      display:flex;
      flex-direction:column;
      gap:5px;
    }

    .dates-modal__heading span{
      color:#d95b72;
      font-family:'Kalam',cursive;
      font-size:.8rem;
      letter-spacing:.09em;
      text-transform:uppercase;
    }

    .dates-modal__heading h2{
      margin:0;
      font-family:'Playfair Display',serif;
      font-size:clamp(2rem,4vw,3.4rem);
      font-weight:500;
      line-height:1;
    }

    .dates-modal__tools{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .dates-modal__order{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 15px;
      border:1px solid rgba(255,255,255,.55);
      background:transparent;
      color:#fff;
      font-family:'Kalam',cursive;
      font-size:.8rem;
      letter-spacing:.04em;
      cursor:pointer;
      transition:.2s ease;
    }

    .dates-modal__order:hover{
      background:#fff;
      color:#101112;
    }

    .dates-modal__close{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.35);
      border-radius:50%;
      background:transparent;
      color:#fff;
      font-size:1.5rem;
      cursor:pointer;
      transition:.2s ease;
    }

    .dates-modal__close:hover{
      background:#fff;
      color:#101112;
    }

    .dates-modal__body{
      padding:8px 34px 34px;
    }

    .dates-modal .show{
      display:grid;
      grid-template-columns:130px minmax(0,1fr) auto;
      gap:25px;
      align-items:center;
      padding:20px 0;
      border-bottom:1px solid rgba(255,255,255,.18);
    }

    .dates-modal .show:last-child{
      border-bottom:0;
    }

    .dates-modal .show__date{
      color:#fff;
    }

    .dates-modal .show__venue strong{
      color:#fff;
    }

    .dates-modal .show__venue span{
      color:rgba(255,255,255,.68);
    }

    .dates-modal .ticket{
      white-space:nowrap;
    }

    /* ==========================================================
       FECHA MÁS CERCANA — LISTA PRINCIPAL
       ========================================================== */

    #publicShows .show--nearest-public{
      position:relative;
      margin-left:-12px;
      margin-right:-12px;
      padding-left:12px;
      padding-right:12px;
      border-color:rgba(213,63,89,.75);
      background:rgba(213,63,89,.055);
    }

    #publicShows .show--nearest-public::before{
      content:"";
      position:absolute;
      left:0;
      top:10px;
      bottom:10px;
      width:3px;
      background:#d53f59;
    }

    .show__nearest-label{
      display:inline-flex;
      align-items:center;
      width:max-content;
      margin-top:7px;
      padding:4px 8px;
      border:1px solid rgba(213,63,89,.85);
      color:#ff6b83;
      font-family:'Kalam',cursive;
      font-size:.68rem;
      line-height:1;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .dates-modal .show--nearest{
      position:relative;
      margin:10px -12px;
      padding:20px 12px;
      border:1px solid rgba(213,63,89,.75);
      background:rgba(213,63,89,.07);
    }

    .dates-modal .show--nearest::before{
      content:"";
      position:absolute;
      left:-1px;
      top:-1px;
      bottom:-1px;
      width:4px;
      background:#d53f59;
    }

    .dates-modal__nearest-label{
      display:inline-flex;
      align-items:center;
      width:max-content;
      margin-top:7px;
      padding:4px 8px;
      border:1px solid rgba(213,63,89,.85);
      color:#ff6b83;
      font-family:'Kalam',cursive;
      font-size:.68rem;
      line-height:1;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    body.dates-modal-open{
      overflow:hidden;
    }

    @media (max-width:700px){
      .dates-modal{
        padding:0;
      }

      .dates-modal__dialog{
        width:100%;
        height:100%;
        max-height:none;
      }

      .dates-modal__header{
        align-items:flex-start;
        padding:22px 18px;
      }

      .dates-modal__tools{
        flex-direction:column-reverse;
        align-items:flex-end;
      }

      .dates-modal__order{
        padding:8px 10px;
        font-size:.72rem;
      }

      .dates-modal__body{
        padding:5px 18px 30px;
      }

      .dates-modal .show{
        grid-template-columns:1fr auto;
        gap:8px 15px;
        padding:18px 0;
      }

      .dates-modal .show__date{
        grid-column:1;
      }

      .dates-modal .show__venue{
        grid-column:1;
      }

      .dates-modal .ticket{
        grid-column:2;
        grid-row:1 / span 2;
        align-self:center;
      }
    }

    @media (max-width:480px){
      .dates-modal .show{
        grid-template-columns:1fr;
      }

      .dates-modal .ticket{
        grid-column:1;
        grid-row:auto;
        justify-self:start;
      }
    }