@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

    @font-face {
        font-family: "Brown Sugar";
        src:
        url("../font/Brown-Sugar-Regular.woff2");
        font-weight: bold;
    }
    
    :root{
      --cream:#f3ead9;
      --cream-2:#eadcc5;
      --ink:#101112;
      --rose:#b9344c;
      --rose-dark:#7e2336;
      --pink:#d66c7d;
      --gold:#b69449;
      --paper:#f7efdf;
      --white:#fffaf0;

      --sans:"DM Sans",sans-serif;
      --hand:"Kalam",cursive;
      --serif:"Playfair Display",serif;
      --mulish:"Mulish", sans-serif;
      --brown:"Brown Sugar", sans-serif;


      --container:1180px;
      --shadow:0 22px 60px rgba(31,19,15,.16);
    }

    html::-webkit-scrollbar-thumb {
        background: var(--rose-dark);
        border-radius: 10px;
    }

    html::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: var(--cream);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:var(--cream);
      font-family:var(--sans);
      overflow-x:hidden;
    }

    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    section{position:relative}

    .container{
      width:min(calc(100% - 40px),var(--container));
      margin-inline:auto;
      position:relative;
      z-index:2;
    }

    /* ---------------- HEADER ---------------- */
    #header-logo{
      width: 200px;
    }


    .site-header{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(243,234,217,.8);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(16,17,18,.07);
    }

    .nav{
      min-height:92px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
    }

    .brand{
      line-height:.9;
      min-width:max-content;
    }

    .brand__name{
      display:block;
      font-family:var(--brown);
      font-size:clamp(2rem,4vw,3.7rem);
      font-weight:300;
      letter-spacing:0.05em;
      text-align: center;
    }

    .brand__sub{
      display:block;
      margin-top:8px;
      padding-left:4px;
      color:var(--rose);
      font-family:var(--hand);
      font-size:.85rem;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .nav__links{
      display:flex;
      align-items:center;
      gap:clamp(20px,3vw,44px);
      font-family:var(--mulish);
      text-transform:uppercase;
      font-size:.94rem;
      letter-spacing:.08em;
    }

    .nav__links a{
      position:relative;
      padding:12px 2px;
    }

    .nav__links a::after{
      content:"";
      position:absolute;
      left:0;
      right:100%;
      bottom:6px;
      height:3px;
      background:var(--rose);
      transform:rotate(-3deg);
      transition:.25s ease;
    }

    .nav__links a:hover::after,
    .nav__links a.active::after{right:0}

    .menu-btn{
      display:none;
      width:44px;
      height:44px;
      border:0;
      background:transparent;
      cursor:pointer;
    }

    .menu-btn span{
      display:block;
      width:28px;
      height:2px;
      background:var(--ink);
      margin:6px auto;
      transition:.25s ease;
    }

    /* ---------------- ART / DECOR ---------------- */
    .scribble{
      position:absolute;
      pointer-events:none;
      z-index:3;
      opacity:.95;
    }

    .scribble--rose{
      width:110px;
      height:35px;
      background:
        linear-gradient(176deg,transparent 28%,var(--rose) 29% 38%,transparent 39% 47%,var(--rose) 48% 58%,transparent 59% 66%,var(--rose) 67% 76%,transparent 77%);
      transform:rotate(-6deg);
    }

    .star{
      position:absolute;
      z-index:4;
      font-family:var(--hand);
      color:var(--gold);
      font-size:2rem;
      transform:rotate(16deg);
      pointer-events:none;
    }

    .petal{
      position:absolute;
      z-index:4;
      width: 150px;
      border-radius:80% 20% 65% 35% / 70% 25% 75% 30%;

      transform:rotate(var(--r,15deg));
      pointer-events:none;
      filter:saturate(1.15);
    }

    .petal img{
        width: 100%;
    }

    .petal::after{
      
    }

    .outline-rose{
    
    }

    /* ANIMACIÓN PETALOS */

    .hero{
      position:relative;
      overflow:hidden;
    }

    /*
      Las zonas ocupan solamente los laterales.
      El centro queda libre para el contenido y la artista.
    */
    .petal-rain{
      position:absolute;
      top:0;
      bottom:0;
      width:19%;
      z-index:4;
      /* overflow:hidden; */
      pointer-events:none;
    }

    .petal-rain--left{
      left:0;
    }

    .petal-rain--right{
      right:0;
    }

    .falling-petal{
      position:absolute;
      top:-180px;

      width:var(--size);
      height:auto;

      opacity:var(--opacity);

      animation:
        petalFall var(--duration) linear infinite,
        petalSwing var(--swing-duration) ease-in-out infinite alternate;

      animation-delay:var(--delay);

      transform-origin:center center;

      will-change:transform, top;
    }

    .falling-petal img{
      display:block;
      width:100%;
      height:auto;

      animation:
        petalRotate var(--rotate-duration) linear infinite;
    }

    @keyframes petalFall{
      0%{
        top:-180px;
      }

      100%{
        top:calc(100% + 180px);
      }
    }

    @keyframes petalSwing{
      0%{
        transform:
          translateX(calc(var(--drift) * -1))
          rotate(var(--start-rotation));
      }

      50%{
        transform:
          translateX(var(--drift))
          rotate(var(--middle-rotation));
      }

      100%{
        transform:
          translateX(calc(var(--drift) * -.45))
          rotate(var(--end-rotation));
      }
    }

    @keyframes petalRotate{
      from{
        transform:rotate(0deg);
      }

      to{
        transform:rotate(var(--rotation-direction));
      }
    }

    @media (max-width:980px){
      .petal-rain{
        width:15%;
      }
    }

    @media (max-width:680px){
      .petal-rain{
        width:100%;
        opacity:.75;
      }

      .falling-petal{
        max-width:90px;
      }

      .petal-rain--right{
        opacity: 0 !important;
      }

      .hero h1{
        font-size: 55px !important;
        text-align: center;
        margin-left: 40px !important;

      }

      .eyebrow{
        text-align: center;
        margin-left: 40px;
      }
    }

    @media (prefers-reduced-motion:reduce){
      .falling-petal,
      .falling-petal img{
        animation:none !important;
      }
    }

    /* ---------------- HERO ---------------- */
    .hero{
      min-height:720px;
      background:var(--ink);
      color:var(--white);
      overflow:hidden;
    }

    @media (max-width:800px) {
        .hero::before{
            background:
            radial-gradient(circle at 65% 28%,rgba(201,111,52,.28),transparent 26%),
            linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.24) 65%,rgba(0,0,0,.72) 100%),
            url("../img/home.webp") 70% 43%/cover no-repeat !important;
        }
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 65% 28%,rgba(201,111,52,.28),transparent 26%),
        linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.24) 65%,rgba(0,0,0,.72) 100%),
        url("../img/home.webp") center 43%/cover no-repeat;
      filter:saturate(.8) contrast(1.02);
    }

    

    .hero::after{
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:40px;
      background:var(--cream);
      clip-path:polygon(0 65%,7% 45%,14% 60%,21% 40%,29% 58%,37% 42%,46% 60%,54% 38%,64% 54%,72% 34%,83% 60%,91% 42%,100% 58%,100% 100%,0 100%);
      z-index:5;
    }

    .hero__inner{
      min-height:720px;
      display:flex;
      align-items:center;
      padding-block:90px;
    }

    .hero__content{
      width:min(560px,58%);
      position:relative;
      z-index:2;
    }

    .eyebrow{
      font-family:var(--hand);
      text-transform:uppercase;
      color:#d9c69d;
      letter-spacing:.18em;
      font-size:.9rem;
    }

    .hero h1{
      margin:18px 0 24px;
      font-family:var(--brown);
      font-weight:300;
      font-size:85px;
      /* line-height:.92; */
      letter-spacing:-.04em;
    }

    .hero h1 span{
      display:block;
      color:#f0d8cc;
    }

    .hero__text{
      width:min(450px,100%);
      font-size:1.05rem;
      line-height:1.75;
      color:rgba(255,250,240,.78);
    }

    .cta{
      display:inline-flex;
      align-items:center;
      gap:10px;
      margin-top:30px;
      padding:14px 24px;
      border:1px solid rgba(255,255,255,.28);
      color:var(--ink);
      background:#d8c497;
      font-family:var(--hand);
      text-transform:uppercase;
      letter-spacing:.08em;
      box-shadow:5px 6px 0 rgba(0,0,0,.3);
      transform:rotate(-1.5deg);
      transition:.2s ease;
    }

    .cta:hover{
      transform:translateY(-3px) rotate(0);
      box-shadow:7px 9px 0 rgba(0,0,0,.28);
    }

    .hero .petal:nth-of-type(1){top:80px;right:6%;--r:20deg;transform:scale(1.25) rotate(20deg)}
    .hero .petal:nth-of-type(2){top:280px;right:5%;--r:-25deg}
    .hero .petal:nth-of-type(3){bottom:200px;left:2%;--r:12deg;transform:scale(1.35) rotate(12deg)}
    
    .hero .star.one{
        right:3%;
        top:150px
    }
    
    .hero .star.one img{
       width: 80px;
    }
    .hero .star.two{right:9%;bottom:130px;font-size:1.3rem}

    /* ==========================================================
   HERO — MUSIC PLATFORMS
   ========================================================== */

.hero{
  position:relative;
}

.hero__inner{
  position:relative;
}


/* ----------------------------------------------------------
   PLATFORM CONTAINER
   ---------------------------------------------------------- */

.hero-platforms{
  position:absolute;

  right:3.2%;
  top: 20%;

  transform:translateY(-48%);

  z-index:10;

  width:min(260px,17vw);

  display:flex;
  flex-direction:column;
  gap:16px;
}


/* ----------------------------------------------------------
   PLATFORM ITEM
   ---------------------------------------------------------- */

.hero-platform{
  width:100%;
  min-height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:17px 20px;

  border:1px solid rgba(255,255,255,.9);

  background:transparent;

  color:#fff;

  font-family:var(--mulish);
  font-size:.84rem;
  font-weight:500;

  letter-spacing:.11em;
  text-transform:uppercase;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    border-color .25s ease;
}


/* small staggered effect similar to editorial cards */

.hero-platform:nth-child(1){
  transform:translateX(-5px);
}

.hero-platform:nth-child(2){
  transform:translateX(8px);
}

.hero-platform:nth-child(3){
  transform:translateX(-1px);
}

.hero-platform:nth-child(4){
  transform:translateX(11px);
}

.hero-platform:nth-child(5){
  transform:translateX(3px);
}


/* ----------------------------------------------------------
   HOVER
   ---------------------------------------------------------- */

.hero-platform:hover{
  background:#fff;
  color:#111;
  border-color:#fff;
}

.hero-platform:nth-child(1):hover,
.hero-platform:nth-child(2):hover,
.hero-platform:nth-child(3):hover,
.hero-platform:nth-child(4):hover,
.hero-platform:nth-child(5):hover{
  transform:translateX(-4px);
}


/* ----------------------------------------------------------
   ARROW
   ---------------------------------------------------------- */

.hero-platform__arrow{
  font-family:Arial,sans-serif;
  font-size:1.15rem;

  opacity:.75;

  transition:transform .2s ease;
}

.hero-platform:hover .hero-platform__arrow{
  transform:translate(3px,-3px);
}


/* ----------------------------------------------------------
   SOCIAL ICON ROW
   ---------------------------------------------------------- */

.hero-socials{
  position:absolute;

  right:3.4%;
  bottom:40px;

  z-index:10;

  display:flex;
  align-items:center;
  gap:14px;
}

.hero-socials a{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;

  color:#fff;

  font-family:var(--mulish);
  font-size:.66rem;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.hero-socials a:hover{
  background:#fff;
  color:#111;
  transform:translateY(-3px);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1100px){

  .hero-platforms{
    right:2%;
    width:190px;
    gap:12px;
  }

  .hero-platform{
    min-height:60px;

    padding:13px 15px;

    font-size:.72rem;
  }

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:820px){

  /*
    On smaller screens the cards stop living on the right side
    and become a flexible horizontal block.
  */

  .hero-platforms{
    position:absolute;

    left:20px;
    right:20px;
    top:auto;
    bottom:75px;

    width:auto;

    transform:none;

    flex-direction:row;
    flex-flow:row wrap;

    gap:10px;
  }

  .hero-platform{
    width:auto;
    flex:1 1 calc(33.333% - 10px);

    min-width:150px;
    min-height:50px;

    padding:11px 14px;

    font-size:.7rem;

    transform:none !important;
  }

  .hero-socials{
    right:20px;
    bottom:20px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:580px){

  .hero__inner{
    align-items:flex-start;
  }

  .hero-platforms{
    left:14px;
    right:14px;
    bottom:140px;

    gap:8px;
  }

  .hero-platform{
    flex:1 1 calc(50% - 8px);

    min-width:0;
    min-height:48px;

    padding:10px 12px;

    font-size:.66rem;
  }

  .hero-socials{
    left:14px;
    right:auto;
    bottom:20px;
  }

}

    /* ---------------- COMMON SECTION ---------------- */
    .paper-section{
      padding:105px 0;
      background:
        radial-gradient(circle at 20% 20%,rgba(119,83,49,.05),transparent 18%),
        linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),
        var(--cream);
      overflow:hidden;
    }

    .section-title{
      display:inline-block;
      margin:0 0 26px;
      font-family:var(--brown);
      font-size:clamp(2.6rem,5vw,4.3rem);
      line-height:1;
      font-weight:400;
      position:relative;
    }

    .section-title::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-8px;
      width:72%;
      height:4px;
      background:var(--rose);
      transform:rotate(-3deg);
    }

    .section-kicker{
      color:var(--rose);
      font-family:var(--hand);
      text-transform:uppercase;
      letter-spacing:.11em;
      font-size:.84rem;
    }

    /* ---------------- BIO ---------------- */
    .bio__grid{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:70px;
      align-items:center;
    }

    .bio__copy p{
      max-width:530px;
      line-height:1.9;
      font-size:1.04rem;
      font-family: var(--mulish);
    }

    .text-link{
      display:inline-flex;
      gap:12px;
      margin-top:18px;
      color:var(--rose);
      font-family:var(--hand);
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .bio__visual{
      min-height:470px;
      position:relative;
    }

    .portrait-frame{
      position:absolute;
      right:5%;
      top:0;
      width:70%;
      height:430px;
      border:2px solid var(--gold);
      border-radius:48% 48% 5% 5% / 38% 38% 4% 4%;
      padding:18px;
      transform:rotate(2deg);
    }

    .portrait-frame img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:contrast(1.05);
      border-radius:45% 45% 2% 2% / 35% 35% 2% 2%;
    }

    .marker-block{
      position:absolute;
      right:0;
      bottom:28px;
      width:43%;
      height:120px;
      /* background:rgba(199,76,95,.76); */
      transform:rotate(-4deg);
    }

    .marker-block img{
        width: 200px;
        margin-left: 67px;
        margin-top: -58px;
    }

    .bio__visual .petal.a{left:5%;bottom:45px;transform:scale(1.5) rotate(18deg)}
    .bio__visual .petal.b{right:6%;top:60px;transform:scale(.55) rotate(-22deg)}

    /* ---------------- VIDEOS ---------------- */
    .videos{
      background:url("../img/texture.jpg");
      background-size: cover;
      background-attachment: fixed;
      color:var(--white);
      padding:100px 0 115px;
      overflow:hidden;
    }

    .videos::before,
    .videos::after{
      content:"";
      position:absolute;
      left:0;
      width:100%;
      height:35px;
      background:var(--cream);
      z-index:2;
    }

    .videos::before{
      top:0;
      clip-path:polygon(0 0,100% 0,100% 48%,92% 62%,84% 48%,75% 70%,64% 50%,56% 66%,47% 44%,35% 70%,25% 48%,14% 65%,0 46%);
    }
    .videos::after{
      bottom:0;
      clip-path:polygon(0 50%,10% 35%,19% 55%,30% 33%,39% 56%,50% 40%,62% 62%,72% 36%,82% 58%,92% 34%,100% 48%,100% 100%,0 100%);
    }

    .videos .section-title{color:var(--white)}

    @media (max-width: 980px) {
        .section-title:not([data="not-margin"]){
            margin-left: 20px;
        }
    }

    .video-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
      margin-top:26px;
    }

    .video-card{
      position:relative;
      margin-left: auto;
      margin-right: auto;
    }

    .video-card__thumb{
      aspect-ratio:16/9;
      overflow:hidden;
      position:relative;
      /* border:1px solid rgba(255,255,255,.12); */
    }

    .video-card__thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:.5s ease;
      filter:saturate(.78);
    }

    .video-card:hover img{transform:scale(1.04)}

    .play{
      position:absolute;
      inset:50% auto auto 50%;
      transform:translate(-50%,-50%);
      width:54px;
      height:54px;
      border:1px solid rgba(255,255,255,.9);
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(0,0,0,.35);
      backdrop-filter:blur(3px);
      transition:.2s ease;
    }

    .play::before{
      content:"";
      width:0;
      height:0;
      border-top:7px solid transparent;
      border-bottom:7px solid transparent;
      border-left:11px solid white;
      margin-left:4px;
    }

    .video-card:hover .play{
      transform:translate(-50%,-50%) scale(1.08);
      background:var(--rose);
    }

    .video-card__meta{
      margin-top:16px;
      color:#c8b795;
      font-family:var(--hand);
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.06em;
    }

    .video-card h3{
      margin:4px 0 0;
      font-family:var(--hand);
      font-weight:400;
      font-size:1.25rem;
      text-transform:uppercase;
    }

    /* ---------------- CONCERTS ---------------- */
    .concerts{
      padding:105px 0 120px;
      overflow:hidden;
    }

    .concerts__grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:70px;
      align-items:center;
    }

    .shows{
      margin-top:25px;
      border-top:1px solid rgba(16,17,18,.22);
    }

    .show{
      display:grid;
      grid-template-columns:90px 1fr auto;
      gap:18px;
      align-items:center;
      padding:19px 0;
      border-bottom:1px solid rgba(16,17,18,.22);
    }

    .show__date{
      font-family:var(--hand);
      font-size:1rem;
    }

    .show__venue strong{
      display:block;
      font-weight:600;
    }

    .show__venue span{
      display:block;
      margin-top:4px;
      color:#6e665c;
      font-size:.9rem;
    }

    .ticket{
      color:var(--rose);
      font-family:var(--hand);
      text-transform:uppercase;
      white-space:nowrap;
    }

    .concert-art{
      min-height:460px;
      position:relative;
    }

    .concert-art img{
      position:absolute;
      z-index:2;
      left:5%;
      bottom:0;
      width:72%;
      max-height:430px;
      object-fit:cover;
      object-position:center 25%;
      /* filter:grayscale(1); */
      clip-path:polygon(5% 2%,95% 0,100% 92%,83% 100%,10% 96%,0 15%);
    }

    .concert-art__quote{
      position:absolute;
      right:0;
      top:80px;
      z-index:3;
      width:54%;
      padding:25px 22px;
      background:#c65368;
      font-family:var(--hand);
      font-size:1.5rem;
      line-height:1.25;
      text-transform:uppercase;
      transform:rotate(-4deg);
      box-shadow:7px 8px 0 rgba(0,0,0,.08);
    }

    .concert-art .petal.a{right:6%;bottom:3%;transform:scale(1.1) rotate(-12deg)}
    .concert-art .petal.b{left:1%;top:10%;transform:scale(.65) rotate(22deg)}

    /* ---------------- CONTACT ---------------- */
    .contact{
      background:var(--ink);
      color:var(--white);
      padding:100px 0 70px;
      overflow:hidden;
    }

    .contact::before{
      content:"";
      position:absolute;
      left:0;top:0;
      width:100%;
      height:32px;
      background:var(--cream);
      clip-path:polygon(0 0,100% 0,100% 42%,89% 70%,77% 46%,64% 65%,52% 42%,42% 66%,30% 40%,17% 67%,0 46%);
    }

    .contact__grid{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:80px;
      align-items:start;
    }

    .contact__lead{
      max-width:430px;
      line-height:1.7;
      color:rgba(255,250,240,.8);
    }

    .contact__lead strong{
      color:#e57488;
      font-weight:500;
    }

    .contact-form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:7px;
    }

    .field--full{grid-column:1/-1}

    .field label{
      font-family:var(--hand);
      color:#d9c69d;
      text-transform:uppercase;
      font-size:.83rem;
      letter-spacing:.08em;
    }

    .field input,
    .field textarea{
      width:100%;
      color:var(--white);
      background:transparent;
      border:0;
      border-bottom:1px solid rgba(255,255,255,.28);
      padding:12px 3px;
      outline:none;
      transition:.2s ease;
    }

    .field textarea{
      min-height:100px;
      resize:vertical;
    }

    .field input:focus,
    .field textarea:focus{
      border-color:var(--rose);
    }

    .submit{
      grid-column:1/-1;
      justify-self:start;
      margin-top:8px;
      border:0;
      cursor:pointer;
    }

    .socials{
      display:flex;
      gap:14px;
      margin-top:28px;
    }

    .socials a{
      width:40px;
      height:40px;
      border:1px solid rgba(255,255,255,.26);
      border-radius:50%;
      display:grid;
      place-items:center;
      font-family:var(--hand);
      transition:.2s ease;
      font-size: 1.4em;
    }

    .socials a:hover{
      background:var(--rose);
      transform:translateY(-3px);
    }

    .footer{
      margin-top:70px;
      padding-top:25px;
      border-top:1px solid rgba(255,255,255,.1);
      display:flex;
      justify-content:space-between;
      gap:20px;
      color:rgba(255,255,255,.45);
      font-size:.78rem;
    }

    /* ---------------- REVEAL ---------------- */
    .reveal{
      opacity:0;
      transform:translateY(25px);
      transition:opacity .7s ease,transform .7s ease;
    }

    .reveal.is-visible{
      opacity:1;
      transform:none;
    }

    /* ---------------- RESPONSIVE ---------------- */
    @media (max-width: 980px){
      .nav{min-height:78px}

      .menu-btn{
        display:block;
        position:relative;
        z-index:102;
      }

      .nav__links{
        position:fixed;
        inset:78px 0 auto;
        padding:30px 20px 38px;
        display:flex;
        flex-direction:column;
        gap:12px;
        background:var(--cream);
        border-bottom:1px solid rgba(16,17,18,.1);
        transform:translateY(-130%);
        opacity:0;
        pointer-events:none;
        transition:.3s ease;
      }

      .nav__links.open{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto;
      }

      .hero__content{width:min(600px,78%)}
      .bio__grid,
      .concerts__grid,
      .contact__grid{
        grid-template-columns:1fr;
        gap:45px;
      }

      .bio__visual{min-height:430px}
      .portrait-frame{
        left:12%;
        right:auto;
        width:65%;
      }

      .video-grid{grid-template-columns:1fr 1fr}
      .video-card:last-child{grid-column:1/-1;width:calc(50% - 15px)}

      .concert-art{
        width:min(620px,100%);
        margin:auto;
      }
    }

    @media (max-width: 680px){
      .container{width:min(calc(100% - 28px),var(--container))}
      .brand__sub{padding-left:20px}
      .hero,.hero__inner{min-height:670px}
      .hero__inner{padding-top:60px}
      .hero__content{width:92%}
    

      .paper-section,
      .videos,
      .concerts,
      .contact{padding-top:78px;padding-bottom:85px}

      .bio__visual{min-height:370px}
      .portrait-frame{
        left:6%;
        width:78%;
        height:350px;
      }
      .marker-block{width:50%;height:90px}

      .video-grid{grid-template-columns:1fr}
      .video-card:last-child{grid-column:auto;width:auto}

      .show{
        grid-template-columns:70px 1fr;
      }
      .ticket{
        grid-column:2;
        justify-self:start;
      }

      .concert-art{min-height:400px}
      .concert-art img{width:80%}
      .concert-art__quote{
        top:45px;
        width:58%;
        font-size:1.15rem;
      }

      .contact-form{grid-template-columns:1fr}
      .field--full,.submit{grid-column:auto}
      .footer{flex-direction:column}

      .petal{opacity:.78}
      .hero .petal:nth-of-type(1){right:-15px}
      .hero .petal:nth-of-type(2){display:none}
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
      }
      .reveal{opacity:1;transform:none}
    }


#lanzamientos{
      position:relative;
      z-index:3;
      margin-top:-1px;
      padding-top:85px;
      padding-bottom: 80px;
      border-top:0 !important;
      outline:0 !important;
      box-shadow:none !important;
      background:url("../img/paper.jpg");
}

/* Por si main.css agrega bordes a secciones con info="bloques" */
#lanzamientos[info="bloques"]{
    border-top:0 !important;
    box-shadow:none !important;
}

#lanzamientos h1{
    width: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 0px;
    font-family: "Lato", serif;
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: normal;
    /* letter-spacing: 6px; */
}

#lanzamientos .container{
  width: 80%;
  justify-content: center;
}

#lanzamientos .columnas{
    margin: 30px;
}

#lanzamientos .columnas h2{
    font-weight: normal;
}

#lanzamientos .columnas p{
    font-size: 1.1em;
    margin-left: 5px;
    font-family: "Lora", serif;
}

#lanzamientos .columnas a{
    font-family: "Lora", serif;
    color: #333;
    text-decoration: none;
}

#lanzamientos .columnas a:hover{
    color: cadetblue;
    text-decoration: underline;
}

#lanzamientos .columnas img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: 0.3s;
}

#lanzamientos .columnas img:hover{
    transform: scale(1.05);
    transition: 0.3s;
}

#lanzamientos .lanzamientos-items{
    display: flex;
    flex-flow: wrap;
}

#lanzamientos .contenedor-musica iframe{
    width: 250px;
    height: 352px;
    margin: 20px;
}


@media (max-width:800px) {
    #lanzamientos .contenedor-musica iframe{
        width: 190px;
        height: 155px;
        margin: 5px;
    }
}


  /* ==========================================================
       FIX: VIDEOS -> LANZAMIENTOS
       Evita la línea negra horizontal que aparecía entre ambas.
       ========================================================== */

    .videos{
      margin-bottom:0 !important;
      border-bottom:0 !important;
    }

    /* El pseudo-elemento conserva el borde irregular, pero sin una
       línea negra residual en el cambio de sección. */
    .videos::after{
      bottom:-1px !important;
      height:38px !important;
      background:url("../img/paper.jpg") !important;
      background-position: 0px 10px !important;
      /* background-size: contain; */
      border:0 !important;
      outline:0 !important;
      box-shadow:none !important;
    }

    

    /* ==========================================================
       PROYECTOS
       Basado en las tres piezas proporcionadas:
       0.jpg = Las estrellas perdidas
       1.jpg = Curso de canto
       2.jpg = Taller DIY
       ========================================================== */

 /* ==========================================================
   PROYECTOS — 4 ELEMENTOS
   ========================================================== */

.projects{
  position:relative;
  overflow:hidden;
  padding:110px 0 125px;
  background:var(--cream);
}

.projects__heading{
  max-width:760px;
  margin-bottom:50px;
}

.projects__intro{
  max-width:700px;
  margin:16px 0 0;
  line-height:1.85;
  opacity:.78;
}


/* GRID PRINCIPAL */

.projects__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
  align-items:start;
}


/* TARJETAS */

.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* Desfase editorial ligero */

.project-card:nth-child(1){
  transform:rotate(-.45deg);
}

.project-card:nth-child(2){
  margin-top:50px;
  transform:rotate(.45deg);
}

.project-card:nth-child(3){
  margin-top:15px;
  transform:rotate(-.3deg);
}

.project-card:nth-child(4){
  margin-top:65px;
  transform:rotate(.35deg);
}


/* IMÁGENES */

.project-card__poster{
  position:relative;
  overflow:hidden;
  width:100%;
  background:#111;
  border:1px solid rgba(16,17,18,.12);
  box-shadow:8px 10px 0 rgba(16,17,18,.08);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.project-card:hover .project-card__poster{
  transform:translateY(-6px);
  box-shadow:12px 16px 0 rgba(16,17,18,.1);
}

.project-card__poster img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}


/* NÚMERO */

.project-card__number{
  position:absolute;
  right:13px;
  bottom:8px;
  z-index:2;

  color:var(--white);
  font-family:var(--hand);
  font-size:2.3rem;
  line-height:1;

  text-shadow:0 2px 10px rgba(0,0,0,.5);
}


/* TEXTO */

.project-card__copy{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  padding:23px 7px 0;
}

.project-card__tag{
  display:block;
  min-height:38px;
  margin-bottom:8px;

  color:var(--rose);
  font-family:var(--hand);
  font-size:.78rem;
  line-height:1.25;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.project-card h3{
  margin:0 0 12px;

  font-family:var(--brown);
  font-size:clamp(1.8rem,2.3vw,2.65rem);
  font-weight:400;
  line-height:1.04;
}

.project-card p{
  margin:0;

  font-size:.94rem;
  line-height:1.72;
  opacity:.76;
}

.project-card .text-link{
  margin-top:auto;
  padding-top:18px;
  align-self:flex-start;
}


/* BOTÓN VER MÁS */

.projects__actions{
  display:flex;
  justify-content:center;
  margin-top:75px;
}

.projects__more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  padding:15px 27px;

  border:1px solid var(--ink);

  background:transparent;
  color:var(--ink);

  font-family:var(--hand);
  font-size:.92rem;
  letter-spacing:.08em;
  text-transform:uppercase;

  box-shadow:5px 6px 0 rgba(16,17,18,.12);
  transform:rotate(-1deg);

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.projects__more:hover{
  background:var(--ink);
  color:var(--white);

  transform:translateY(-4px) rotate(0);
  box-shadow:8px 10px 0 rgba(185,52,76,.35);
}


/* DECORACIÓN */

.projects__marker{
  position:absolute;
  right:3%;
  top:95px;
  z-index:1;
  width:115px;
  pointer-events:none;
}

.projects__marker img{
  width:100%;
}

.projects .outline-rose{
  position:absolute;
  left:2%;
  bottom:45px;
  width:120px;
  pointer-events:none;
}

.projects .outline-rose img{
  width:100%;
}


/* LAPTOP */

@media (max-width:1100px){

  .projects__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:55px 30px;
  }

  .project-card:nth-child(1),
  .project-card:nth-child(2),
  .project-card:nth-child(3),
  .project-card:nth-child(4){
    margin-top:0;
  }

  .project-card:nth-child(2),
  .project-card:nth-child(4){
    margin-top:45px;
  }

}


/* TABLET */

@media (max-width:760px){

  .projects{
    padding:85px 0 95px;
  }

  .projects__grid{
    grid-template-columns:1fr 1fr;
    gap:45px 20px;
  }

  .project-card:nth-child(1),
  .project-card:nth-child(2),
  .project-card:nth-child(3),
  .project-card:nth-child(4){
    margin-top:0;
    transform:none;
  }

  .project-card h3{
    font-size:2rem;
  }

  .projects__actions{
    margin-top:55px;
  }

}


/* MOBILE */

@media (max-width:580px){

  .projects__grid{
    grid-template-columns:1fr;
    gap:55px;
  }

  .project-card{
    width:min(100%,470px);
    margin-inline:auto;
  }

  .project-card__copy{
    padding:20px 2px 0;
  }

  .project-card__tag{
    min-height:0;
  }

  .projects__marker,
  .projects .outline-rose{
    display:none;
  }

  .projects__more{
    width:100%;
    max-width:320px;
  }

}


/* ---------------- FECHAS DARK ---------------- */
#fechas{
  background:var(--ink);
  color:var(--white);
  font-family: var(--mulish);
}

#fechas .section-title,
#fechas .show__date,
#fechas .show__venue strong{
  color:var(--white);
}

#fechas .show__venue span{
  color:rgba(255,250,240,.68);
}

#fechas .shows{
  border-top-color:rgba(255,255,255,.25);
}

#fechas .show{
  border-bottom-color:rgba(255,255,255,.22);
}

#fechas .ticket,
#fechas .text-link{
  color:#e57488;
}


/* =========================================================
   VIDEO CAROUSEL
   ========================================================= */

.video-carousel{
    position:relative;
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:30px;
}

.video-carousel__viewport{
    width:100%;
    overflow:hidden;
}

.video-carousel__track{
    display:flex;
    transition:transform .6s cubic-bezier(.77,0,.18,1);
    will-change:transform;
}

.video-slide{
    flex:0 0 100%;
    min-width:0;

    display:flex;
    justify-content:center;

    padding:5px 15px 15px;
}

.video-slide .video-card{
    width:min(900px,100%);
}

.video-slide .video-card__thumb{
    position:relative;

    width:100%;
    aspect-ratio:16 / 9;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.14);

    box-shadow:
        0 18px 45px rgba(0,0,0,.32);
}

.video-slide .video-card__thumb iframe{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    border:0;
}

.video-slide .video-card__meta{
    margin-top:14px;

    color:#c8b795;

    font-family:var(--hand);
    font-size:.9rem;

    text-transform:uppercase;
    letter-spacing:.08em;
}


/* FLECHAS */

.video-carousel__btn{
    flex:0 0 auto;

    position:relative;
    z-index:5;

    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;

    background:rgba(15,15,15,.55);
    color:var(--white);

    font-family:Arial,sans-serif;
    font-size:2.6rem;
    line-height:1;

    cursor:pointer;

    backdrop-filter:blur(6px);

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;
}

.video-carousel__btn:hover{
    background:var(--rose);
    border-color:var(--rose);
    transform:scale(1.08);
}


/* DOTS */

.video-carousel__dots{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:11px;

    margin-top:22px;
}

.video-dot{
    width:9px;
    height:9px;

    padding:0;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.32);

    cursor:pointer;

    transition:
        width .25s ease,
        border-radius .25s ease,
        background .25s ease;
}

.video-dot.active{
    width:29px;
    border-radius:20px;

    background:var(--rose);
}


/* TABLET */

@media (max-width:980px){

    .video-carousel{
        gap:12px;
    }

    .video-carousel__btn{
        width:44px;
        height:44px;

        font-size:2.2rem;
    }

}


/* MOBILE */

@media (max-width:680px){

    .video-carousel{
        display:block;
    }

    .video-carousel__viewport{
        overflow:hidden;

        touch-action:pan-y;
    }

    .video-slide{
        padding:3px 0 12px;
    }

    .video-carousel__btn{
        position:absolute;
        top:50%;

        transform:translateY(-75%);

        width:42px;
        height:42px;

        background:rgba(10,10,10,.72);
    }

    .video-carousel__btn:hover{
        transform:translateY(-75%) scale(1.05);
    }

    .video-carousel__btn--prev{
        left:8px;
    }

    .video-carousel__btn--next{
        right:8px;
    }

}

@media (max-width:700px) {
    #home-socials{
        left: 27%;
        bottom: 40px !important;
    }
}

#home-socials{
    position: absolute;
    right: 5%;
    bottom: 60px;
    transform: scale(1.2);
}

/* ==========================================================
   BIO BUTTON
   ========================================================== */

.bio-open{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}


/* ==========================================================
   BIO MODAL
   ========================================================== */

.bio-modal{
  position:fixed;
  inset:0;

  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:35px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.bio-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}


/* BACKDROP */

.bio-modal__backdrop{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}


/* DIALOG */

.bio-modal__dialog{
  position:relative;

  z-index:2;

  width:min(1180px,100%);
  max-height:90vh;

  overflow:auto;

  background:var(--cream);

  box-shadow:
    0 35px 100px rgba(0,0,0,.45);

  transform:translateY(25px) scale(.98);

  transition:transform .35s ease;
}

.bio-modal.is-open .bio-modal__dialog{
  transform:none;
}


/* GRID */

.bio-modal__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;

  min-height:650px;
}


/* ==========================================================
   VISUAL SIDE
   ========================================================== */

.bio-modal__visual{
  position:relative;

  min-height:650px;

  overflow:hidden;

  background:var(--ink);
}

.bio-modal__photo{
  position:absolute;
  overflow:hidden;
}

.bio-modal__photo img{
  width:100%;
  height:100%;

  object-fit:cover;
}


/* MAIN PHOTO */

.bio-modal__photo--main{
  left:7%;
  top:7%;

  width:64%;
  height:67%;

  transform:rotate(-2deg);

  border:2px solid rgba(255,255,255,.8);

  z-index:2;
}


/* SECOND PHOTO */

.bio-modal__photo--secondary{
  right:5%;
  bottom:6%;

  width:50%;
  height:46%;

  transform:rotate(3deg);

  border:7px solid var(--cream);

  z-index:3;

  box-shadow:
    0 15px 40px rgba(0,0,0,.35);
}


/* PETAL */

.bio-modal__petal{
  position:absolute;

  left:5%;
  bottom:4%;

  width:145px;

  z-index:4;

  transform:rotate(-18deg);
}

.bio-modal__petal img{
  width:100%;
}


/* ==========================================================
   CONTENT SIDE
   ========================================================== */

.bio-modal__content{
  padding:70px 65px 65px;
}

.bio-modal__title{
  position:relative;

  display:inline-block;

  margin:8px 0 35px;

  font-family:var(--hand);
  font-size:clamp(3rem,6vw,5rem);
  font-weight:400;
  line-height:1;
}

.bio-modal__title::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-10px;

  width:70%;
  height:4px;

  background:var(--rose);

  transform:rotate(-3deg);
}

.bio-modal__text{
  max-width:620px;
}

.bio-modal__text p{
  margin:0 0 24px;

  line-height:1.85;

  font-size:1rem;

  color:rgba(16,17,18,.84);
}


/* ==========================================================
   CLOSE BUTTON
   ========================================================== */

.bio-modal__close{
  position:absolute;

  right:18px;
  top:15px;

  z-index:10;

  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border:1px solid rgba(16,17,18,.25);
  border-radius:50%;

  background:var(--cream);
  color:var(--ink);

  font-family:Arial,sans-serif;
  font-size:2rem;
  font-weight:300;
  line-height:1;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.bio-modal__close:hover{
  background:var(--ink);
  color:var(--white);

  transform:rotate(5deg);
}


/* Prevent page scrolling while modal is open */

body.bio-modal-open{
  overflow:hidden;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:900px){

  .bio-modal{
    padding:20px;
  }

  .bio-modal__grid{
    grid-template-columns:1fr;
  }

  .bio-modal__visual{
    min-height:470px;
  }

  .bio-modal__photo--main{
    width:52%;
    height:78%;
  }

  .bio-modal__photo--secondary{
    width:46%;
    height:60%;
  }

  .bio-modal__content{
    padding:55px 45px;
  }

  .contenedor-playlist{
    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .contenedor-musica{
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }

  .contenedor-musica iframe{
    width: 100% !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:580px){

  .bio-modal{
    padding:0;
  }

  .bio-modal__dialog{
    width:100%;
    height:100%;
    max-height:none;

    border-radius:0;
  }

  .bio-modal__visual{
    min-height:380px;
  }

  .bio-modal__photo--main{
    left:5%;
    top:8%;

    width:62%;
    height:72%;
  }

  .bio-modal__photo--secondary{
    width:49%;
    height:50%;
  }

  .bio-modal__petal{
    width:95px;
  }

  .bio-modal__content{
    padding:48px 24px 55px;
  }

  .bio-modal__close{
    position:fixed;

    right:14px;
    top:14px;
  }

}


.contenedor-playlist{
  width: 45%;
  height: 400px;
}

.contenedor-playlist iframe{
  width: 100%;
  height: 100%;
}

/* ==========================================================
   SHOW DESTACADO
   ========================================================== */

.featured-show{
  position:relative;
  overflow:hidden;

  padding:110px 0;

  background:var(--ink);
  color:var(--white);
  padding-bottom: 0px;
}


/* GRID */

.featured-show__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;

  align-items:start;
}


/* ==========================================================
   LEFT
   ========================================================== */

.featured-show__eyebrow{
  display:inline-block;

  margin-bottom:20px;

  color:#e57488;

  font-family:var(--hand);
  font-size:.9rem;

  letter-spacing:.12em;
  text-transform:uppercase;
}


/* DATE */

.featured-show__date{
  display:flex;
  align-items:center;

  gap:20px;

  margin-bottom:22px;
}

.featured-show__day{
  font-family:var(--brown);
  font-size:clamp(7rem,12vw,11rem);

  line-height:.75;
  font-weight:400;
}

.featured-show__month{
  display:flex;
  flex-direction:column;

  font-family:var(--mulish);

  letter-spacing:.12em;
}

.featured-show__month span{
  font-size:2rem;
}

.featured-show__month small{
  margin-top:5px;

  color:rgba(255,255,255,.55);

  font-size:.85rem;
}


/* TITLE */

.featured-show__title{
  margin:25px 0 4px;

  max-width:550px;

  font-family:var(--brown);
  font-size:clamp(2.7rem,5vw,5rem);

  font-weight:400;
  line-height:.95;
}

.featured-show__subtitle{
  margin:0 0 45px;

  color:#d9c69d;

  font-family:var(--hand);
  font-size:1.2rem;
}


/* DETAILS */

.featured-show__details{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:25px;

  max-width:570px;
}

.featured-show__detail{
  padding-top:14px;

  border-top:1px solid rgba(255,255,255,.25);
}

.featured-show__label{
  display:block;

  margin-bottom:8px;

  color:#e57488;

  font-family:var(--hand);
  font-size:.75rem;

  letter-spacing:.1em;
  text-transform:uppercase;
}

.featured-show__detail strong{
  display:block;

  margin-bottom:3px;

  font-size:1rem;
  font-weight:500;
}

.featured-show__detail span:last-child{
  color:rgba(255,255,255,.6);

  font-size:.9rem;
}


/* ==========================================================
   RIGHT / LINEUP
   ========================================================== */

.featured-show__lineup{
  position:relative;

  padding:34px 38px;

  border:1px solid rgba(255,255,255,.28);
}

.featured-show__lineup::before{
  content:"";

  position:absolute;

  inset:8px -8px -8px 8px;

  border:1px solid rgba(185,52,76,.5);

  pointer-events:none;
}


.featured-show__lineup-head{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:25px;

  color:#e57488;

  font-family:var(--hand);
  font-size:.82rem;

  letter-spacing:.11em;
  text-transform:uppercase;
}


/* ARTISTS */

.featured-show__artists{
  display:flex;
  flex-direction:column;
}

.featured-show__artist{
  display:grid;
  grid-template-columns:1fr auto;

  align-items:center;
  gap:20px;

  padding:13px 0;

  border-bottom:1px solid rgba(255,255,255,.14);
}

.featured-show__artist span{
  font-size:1rem;
}

.featured-show__artist small{
  color:rgba(255,255,255,.55);

  font-family:var(--hand);
  font-size:.76rem;

  text-align:right;
  text-transform:uppercase;
}

.featured-show__artist--principal span{
  color:#fff;

  font-family:var(--brown);
  font-size:2rem;
}


/* GUESTS */

.featured-show__guests{
  margin-top:30px;

  padding:22px;

  background:#c65368;
  color:#fff;

  transform:rotate(-1deg);
}

.featured-show__guests-title{
  display:block;

  margin-bottom:15px;

  font-family:var(--hand);
  font-size:.76rem;

  letter-spacing:.11em;
  text-transform:uppercase;
}

.featured-show__guest{
  display:flex;
  justify-content:space-between;

  gap:20px;

  padding:8px 0;

  border-top:1px solid rgba(255,255,255,.25);
}

.featured-show__guest strong{
  font-weight:500;
}

.featured-show__guest span{
  opacity:.72;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

  .featured-show__grid{
    grid-template-columns:1fr;

    gap:55px;
  }

  .featured-show__main{
    max-width:650px;
  }

}


@media (max-width:600px){

  .featured-show{
    padding:80px 0;
  }

  .featured-show__date{
    gap:15px;
  }

  .featured-show__day{
    font-size:7rem;
  }

  .featured-show__details{
    grid-template-columns:1fr;

    gap:20px;
  }

  .featured-show__lineup{
    padding:26px 20px;
  }

  .featured-show__artist{
    grid-template-columns:1fr;

    gap:3px;
  }

  .featured-show__artist small{
    text-align:left;
  }

  .featured-show__guest{
    flex-direction:column;

    gap:2px;
  }

}

.featured-show__tickets{
  display:inline-flex;
  align-items:center;
  gap:12px;

  margin-top:32px;
  padding:14px 24px;

  border:1px solid rgba(255,255,255,.85);

  color:var(--white);
  background:transparent;

  font-family:var(--hand);
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}

.featured-show__tickets:hover{
  background:var(--white);
  color:var(--ink);
  transform:translateY(-3px);
}

.featured-show__tickets span{
  transition:transform .2s ease;
}

.featured-show__tickets:hover span{
  transform:translateX(4px);
}

/* ==========================================================
   CONTACTO — MANAGEMENT
   ========================================================== */

.contact__management{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  margin:25px 0 28px;
  padding-left:16px;

  border-left:2px solid var(--rose);
}

.contact__management > span{
  margin-bottom:5px;

  color:var(--rose);
  font-family:var(--hand);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact__management a{
  color:inherit;

  font-size:1.05rem;
  font-weight:600;

  transition:color .2s ease;
}

.contact__management a:hover{
  color:var(--rose);
}

.contact__management small{
  margin-top:3px;

  font-size:.82rem;
  opacity:.65;
}


/* ==========================================================
   FOOTER ISOTIPO
   ========================================================== */

.footer__isotipo{
  display:flex;
  align-items:center;
  justify-content:center;
}

.footer__isotipo img{
  display:block;

  width:42px;
  height:42px;

  object-fit:contain;
  filter: invert(1);
}