/* ===== Sección Entradas ===== */
/*.section-tickets{
  background-color: #050616;
  background-image: linear-gradient(180deg,
                      rgba(5,6,22,0) 0%,
                      #050616 8%,
                      #050616 92%,
                      rgba(5,6,22,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}*/

:root {
    --fade-h: 150px;
}

/* Título alineado a la izquierda */
.tickets-heading{
  margin: 0 0 clamp(22px,3vw,32px);
  font-size: clamp(50px, 6.2vw, 100px);
  line-height: 100%;
  text-align: left;
}

/* Grid principal: video | tarjeta dividida */
.tickets-grid{
  display: grid;
  grid-template-columns: 1.15fr 2.5fr;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: stretch;
}

/* ===== Columna 1 (video) ===== */
.ticket-media{
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  height: 440px;
}
.ticket-video{
  display: block;
  width: 100%;
  height: 100%;        /* deja que fluya sin forzar contenedor */
  object-fit: cover;
}

/* ===== Columna 2 (tarjeta dividida) ===== */
.ticket-split{
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 18px 0.9fr; /* izquierda | separador | derecha */
  height: 100%;
  min-height: 440px;
  border-radius: 55px;
  isolation: isolate;
}

/* Izquierda: esquinas redondeadas sólo a la izquierda, sin borde derecho */
.slab-left{
  background: linear-gradient(90deg, #071b34, #18142d);
  border-top-left-radius: 55px;
  border-bottom-left-radius: 55px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  /* “glass” en 3 lados */
  border-left: 1px solid rgba(255,255,255,.18);
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* Separador transparente */
.ticket-divider{
  width: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 40%, rgba(0,0,0,.18) 100%);
  opacity: .35;
  border-left: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(0,0,0,.25);
}

/* Derecha: esquinas redondeadas sólo a la derecha, sin borde izquierdo */
.slab-right{
  background: linear-gradient(90deg, #17142d, #2b1c2f);
  border-top-right-radius: 55px;
  border-bottom-right-radius: 55px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  border-right: 1px solid rgba(255,255,255,.18);
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);

  padding-top: calc(clamp(20px,2.2vw,28px) + 120px);
}

/* Contenido izquierdo */
.slab-title{
  margin: 0;
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.05;
}
.slab-intro{
  margin: 0;
  opacity: 1;
  line-height: 100%;
  font-size: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.slab-features{
  --gap: 12px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: clamp(8px, 1.4vw, 10px);
  padding-left: 15px;
}
.slab-features li{
  position: relative;
  padding-left: 28px;
  font-size: 22px;
}
.slab-features li::before{
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 2px),
              linear-gradient(90deg, #1b94d6, #584990, #ce6174);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset, 0 2px 10px rgba(0,0,0,.35);
}

/* Contenido derecho (precio) */
.slab-kicker{
  margin: 0 0 2px;
  font-weight: 400;
  opacity: 1;
  font-size: 22px;
}
.slab-price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  margin-bottom: clamp(8px, 1.2vw, 14px);
}
.slab-price .currency{
  font-size: clamp(28px, 3vw, 40px);
  opacity: .95;
}
.slab-price .amount{
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 700;
}
.slab-note{
  margin: 0 0 clamp(14px, 2vw, 22px);
  opacity: 1;
  font-size: clamp(22px, 3vw, 22px);
}
.slab-cta{
  align-self: start;
  justify-self: start;
  border-radius: 999px !important;
  padding: 14px 26px;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .ticket-video {
    display: grid;
    width: 70%;
    height: 100%;
    object-fit: cover;
    justify-content: center;
    margin-left: 10%;
  }
  
  .header-cta.btn-entradas {
    display: block !important;
    width: fit-content;
    margin-bottom: 10px;
    margin-left: 37.5%;
  }
  .tickets-grid{
    grid-template-columns: 1fr;
  }
  .ticket-split{
    grid-template-columns: 1fr;
    border-radius: 34px;
  }
  .slab-left{
    background: linear-gradient(90deg, rgba(27, 148, 214, 0.2) 1.86%, rgba(88, 73, 144, 0.2) 50%, rgba(206, 97, 116, 0.2) 98.14%);
    border-radius: 34px 34px 0 0;
    border-left: 1px solid rgba(255,255,255,.18);
    border-top: 1px solid rgba(255,255,255,.14);
    border-right: 1px solid rgba(255,255,255,.12);
    border-bottom: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    margin-top: 8px;
  }

  .slab-right{
    background: linear-gradient(90deg, rgba(27, 148, 214, 0.2) 1.86%, rgba(88, 73, 144, 0.2) 50%, rgba(206, 97, 116, 0.2) 98.14%);
    border-radius: 0 0 34px 34px;
    border-left: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.14);
    border-right: 1px solid rgba(255,255,255,.12);
    border-top: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    margin-top: 8px;
    padding-top: 25px !important;
    padding-bottom: 10px !important;
  }
  .ticket-divider{ display: none; }

  .slab-price .amount {
    margin-left: 37.5% !important;
  }
  .slab-kicker {
    margin: 0 0 2px;
    font-weight: 400;
    opacity: 1;
    font-size: 22px;
    text-align: center;
  }

  .slab-note {
    margin: 0 0 clamp(14px, 2vw, 22px);
    opacity: 1;
    font-size: clamp(22px, 3vw, 22px);
    text-align: center;
  }
}

@media (max-width: 640px){
  .ticket-video{ aspect-ratio: 16/10; }
  .slab-price .amount{ 
    font-size: clamp(100px, 12vw, 100px); 
    margin-left: 25% !important;
  }
}

.slab-note{ line-height: 1.6; }

@media (max-width: 800px){
  .ticket-media{ height: clamp(260px, 42vh, 440px); }
  .slab-features li{
    position: relative;
    padding-left: 28px;
    font-size: 20px;
  }
  .slab-kicker {
    text-align: center;
  }

  .slab-note {
    text-align: center;
  }

  .btn span {
    transition: transform 0.2s var(--ease);
    font-size: 26px;
  }

  .header-cta.btn-entradas {
    display: block !important;
    width: fit-content;
    margin-bottom: 20px;
    margin-left: 8%;
  }
}


/* Fondo interno de la sección + stacking para que el fade quede por encima del fondo */
/*.section-tickets{
  position: relative;
  background: #050616; 
  overflow: hidden; 
}*/

/* Fades superior e inferior */
.tickets-fade{
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;                  /* puedes ajustar (o usar clamp) */
  pointer-events: none;           /* no bloquea clics */
  z-index: 0;                     /* detrás del contenido */
}

/* Arriba: transparente -> #050616 */
.tickets-fade.top{
  top: -1px;
  background: linear-gradient(to bottom, rgba(5,6,22,0) 0%, #050616 65%);
}

/* Abajo: #050616 -> transparente */
.tickets-fade.bottom{
  bottom: -1px;
  background: linear-gradient(to top, rgba(5,6,22,0) 0%, #050616 65%);
}

/* Opcional: responsive */
@media (max-width: 900px){
  .tickets-fade{ height: 100px; }
}

.section-tickets{
  position: relative;
  background: #050616;
  overflow: hidden;
  /* usa la var, con fallback por si algo la pisa */
  padding-top: var(--fade-h, 140px);
  padding-bottom: var(--fade-h, 140px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #050616 5%, #050616 95%, rgba(0, 0, 0, 0) 100%);
  margin-top: -5% !important;
  margin-bottom: -5% !important;
}

/* Asegura que el contenido esté por encima de los fades */
.section-tickets > .tickets-inner,
.section-tickets .container{
  position: relative;
  z-index: 1;
}

.tickets-fade{
  position: absolute;
  left: 0; right: 0;
  height: var(--fade-h);
  pointer-events: none;
  z-index: 0;                      /* detrás del contenido */
}

.tickets-fade.top{
  top: 0;
  background: linear-gradient(to bottom, rgba(5,6,22,0) 0%, #050616 75%);
}

.tickets-fade.bottom{
  bottom: 0;
  background: linear-gradient(to top, rgba(5,6,22,0) 0%, #050616 75%) !important;
}

/* Responsive: reduce el fade si quieres en pantallas pequeñas */
@media (max-width: 900px){
  .section-tickets{ --fade-h: 100px;
    margin-top: -14% !important;
    margin-bottom: -14% !important;}

  .slab-intro{
    line-height: 125%;
    font-size: 20px;
  }
}

/* === Entradas: bajar altura total === */

/* 1) Video un poco más bajo */
.ticket-media{
  height: 360px;            /* antes 440px */
}
@media (max-width: 900px){
  .ticket-media{ height: clamp(240px, 40vh, 360px); }
  .slab-price .amount{ margin-left: 25%; }
}

/* 2) Tarjeta dividida más compacta */
.ticket-split{
  min-height: 360px;        /* antes 440px */
}

/* 3) Menos relleno interno */
.ticket-slab{
  gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(18px, 1.9vw, 35px) clamp(20px, 2.3vw, 35px);
}

/* 4) La columna derecha empezaba 120px más abajo: bájalo */
.slab-right{
  padding-top: calc(clamp(16px,1.8vw,22px) + 70px);   /* antes + 120px */
}

/* 5) Listado más compacto */
.slab-features{
  gap: clamp(4px, 0.7vw, 7px);
}

/* 6) Tipografías un pelín más chicas para que quepa todo con menos alto */
.slab-title{ font-size: clamp(35px, 2.6vw, 34px); }
.slab-price .amount{ font-size: clamp(100px, 7vw, 100px); }

/* 7) Si aún quieres bajar un poco más en desktop grandes, reduce el fade vertical
      para que la sección no se sienta “alta” por los degradados. */
:root{ --fade-h: 120px; }           /* antes 150px */
@media (max-width: 900px){
  :root{ --fade-h: 90px; }
}

@media (max-width: 450px) {
  .header-cta.btn-entradas {
    display: block !important;
    width: fit-content;
    margin-bottom: 20px;
    margin-left: 5%;
  }
}