/* PANAMA CROSSROADS — /entradas/ (precios). Loads after main.css.
   HTML version of the "Info-Boletos-Web.png" social piece: VIP tiers in Heineken
   green, General tiers in teal, yellow COMPRAR pills. Boxed to 760px like the
   portrait artwork so it reads the same on desktop.
   WEB 2027 (ronda 2): fuera el cuerpo blanco — la página entera va sobre la textura
   del body, con la copia en blanco (la sombra de legibilidad está en el grupo de
   main.css) y las píldoras conservando sus colores. */

/* E1 — hero (same shape as the /galeria/ hero) -------------------------- */

.ent-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 276px;   /* title alone in the band; flex centres it */
}
.ent-hero__inner { position: relative; max-width: 848px; }
.ent-hero__title {
  font-family: kikuta, sans-serif;
  font-size: 4.2em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

/* E1b — presale block (top of the artwork) ------------------------------- */

.ent-presale, .ent-tiers, .ent-info { color: var(--white); }
.ent-box { max-width: 760px; }
/* los .deco de los tiers viven en los flancos de la caja de 760 */
.ent-tiers { position: relative; overflow: hidden; }
.ent-tiers .container { position: relative; }

.ent-presale__title {
  font-family: kikuta, sans-serif;
  font-size: 3.4em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  --eb-purple: #6C1BD1;        /* morado de marca: PREVENTA y EARLY BIRD lo comparten */
  color: var(--eb-purple);     /* ya no lleva la sombra de legibilidad, ver main.css */
}
.ent-presale__tag {
  display: block;
  width: max-content;
  max-width: 100%;
  /* PREVENTA y la placa van como un solo bloque, como en el arte: el hueco de
     tinta es ~12% de la altura de PREVENTA; negativo porque kikuta deja mucho
     aire bajo la línea base. En em para que escale con el título */
  margin: -0.16em auto 0;
  /* kikuta reserva más hueco bajo la línea base que encima: padding asimétrico
     para que el trazo (no la caja de línea) quede centrado en la placa */
  padding: 21px 26px 7px;
  border-radius: 12px;
  background: #F4F343;
  color: var(--eb-purple);
}
.ent-presale__note {
  margin-top: 28px;
  font-family: config, sans-serif;
  font-size: 1.1em;
  line-height: 1.4;
  text-align: center;
}

/* E2 — tiers ------------------------------------------------------------ */

.ent-group { width: 100%; }
.ent-group + .ent-group { margin-top: 56px; }
.tiers { display: flex; flex-direction: column; gap: 14px; }

.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  /* sin el cuerpo blanco las barras flotan sobre el degradado: una sombra las
     despega. drop-shadow y no box-shadow porque las barras van con clip-path. */
  filter: drop-shadow(0 6px 14px rgba(70, 0, 55, .3));
}
/* name + price share one rounded bar; the price is the chevron at its right end */
.tier__name {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 18px;
  min-height: 66px;
  /* right padding = room for the price chevron; the top/bottom split is uneven on
     purpose: Kikuta's caps sit high in the line box, so the ink lands centred */
  padding: 15px 150px 1px 20px;
  border-radius: 10px;
  /* the bar itself ends in the same arrow tip as the badge, so nothing peeks past it */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  font-family: kikuta, sans-serif;
  font-size: 3em;                  /* artwork: cap height ≈ 55% of the bar */
  line-height: 1;
  text-transform: uppercase;
}
.tier--vip .tier__name { background: #fff; color: #0B8F49; box-shadow: inset 0 0 0 2px #E4E4E4; }
.tier--gen .tier__name { background: linear-gradient(90deg, #4EC8A2, #4EC8CF); color: #111; }
/* green wordmark + red star, cropped from the client logo. ~1.3× the cap height;
   the translate cancels the bar's uneven padding so the logo centres on the bar */
/* margin-left:auto pins it to the end of the white area, so the three VIP rows line
   the logos up in one column whatever the tier name's width */
.tier__brand { height: .9em; width: auto; margin-left: auto; transform: translateY(-.137em); }
.tier__early { flex-basis: 100%; font-size: .72em; margin-top: .1em; }
/* two lines sit differently in the box than one, so they need their own split */
.tier__name:has(.tier__early) { padding-top: 11px; padding-bottom: 5px; }

.tier__price {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 136px;
  padding: 14px 37px 0;   /* symmetric sides: the notch and the arrow cancel out */
  /* arrow badge like the artwork: notch on the left (the bar's tip), point on the right */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
  font-family: kikuta, sans-serif;
  font-size: 3em;
  line-height: 1;
}
.tier--vip .tier__price { background: #0B8F49; color: #fff; }
.tier--gen .tier__price { background: #fff; color: #2BA9A9; }

.tier__buy {
  grid-column: 2;
  display: inline-block;
  padding: 15px 24px 13px;
  border-radius: 999px;
  background: #F4F343;
  color: #111;
  font-family: config, sans-serif;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s ease;
}
.tier__buy:hover, .tier__buy:focus-visible { transform: scale(1.04); }

/* la nota va de <li> justo debajo de su tier: el gap de la lista la separa por
   arriba, el margen de abajo aparta la pareja siguiente (viernes / sábado / combo) */
.ent-group__note {
  margin-bottom: 14px;
  padding-left: 18px;
  font-family: config, sans-serif;
  font-size: .95em;
  line-height: 1.35;
  color: var(--white);
}
/* el lockup sale recortado del arte Info-Boletos del cliente, con sus colores
   propios (negro + monolito magenta) sobre fondo transparente: nada de filtros */
.ent-tiki { width: 100%; margin-top: 60px; text-align: center; }
.ent-tiki img { width: 174px; height: auto; }

/* E3 — includes, dentro del pie de montañas ------------------------------ */

/* Personajes: 460px a 1440 y menos por debajo — el hueco entre los dos con un
   3% de sangrado es 1.06·100vw − 2·--char y la caja de texto mide 580, así que
   --char = 53vw − 300px deja ~20px de aire a cada lado (378 a 1280, 243 a 1024).
   El móvil (≤1023) toma su --char de main.css. */
.ent-foot { --char: min(460px, 53vw - 300px); }
/* sin título a la altura del pecho: el texto arranca arriba y son él y su suelo
   (.ent-info__foot) los que dan el alto, con los personajes de pie al fondo */
.ent-foot { padding-top: 60px; }
.ent-foot .ent-box { max-width: 580px; }
.ent-info__foot { --h: calc(var(--foot) + 260px); }   /* palmera 240 + aire */

.ent-include { width: 100%; margin-top: 40px; }
.ent-include__title {
  margin: 0 0 14px;
  font-family: config, sans-serif;
  font-size: 1.55em;
  font-weight: 700;
  text-transform: uppercase;
}
.ent-include__list {
  font-family: config, sans-serif;
  font-size: 1.05em;
  line-height: 1.5;
  color: var(--white);
}

/* responsive ------------------------------------------------------------ */

@media (max-width: 767px) {
  .ent-hero { min-height: 200px; }
  .ent-hero__title { font-size: 2.4em; }
  .ent-hero .spacer { --h: 36px !important; }
  .ent-tiki img { width: 140px; }
  .ent-presale__title { font-size: 2.1em; }
  .ent-presale__tag { padding: 15px 18px 5px; }  /* misma asimetría que en desktop */
  .ent-presale__note { font-size: 1em; }

  /* the artwork keeps the bar and the COMPRAR pill on one line, so the grid stays
     two columns down to 320px — everything just shrinks to fit */
  .tier { column-gap: 10px; }
  .tier__name {
    min-height: 54px;
    padding: 11px 82px 5px 12px;
    gap: 0 6px;
    font-size: 1.25em;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  }
  .tier__price {
    min-width: 76px;
    padding: 8px 21px 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    font-size: 1.6em;
  }
  .tier__name:has(.tier__early) { padding-top: 10px; padding-bottom: 6px; }
  .tier__brand { height: .65em; transform: translateY(-.105em); }
  .tier__buy { padding: 11px 12px 9px; font-size: .8em; }
  .ent-group + .ent-group { margin-top: 44px; }
  .ent-include__title { font-size: 1.25em; }
}
@media (max-width: 1023px) {
  /* banda de suelo bajo el lockup de Tiki para las piñas y las cajas (128px de alto) */
  .ent-tiers__foot { --h: 150px !important; }
  /* el texto ocupa la fila: EL y ELLA (--char-h de alto) bajan bajo él */
  .ent-info__foot { --h: calc(var(--foot) + var(--char-h) + 24px); }
}