/* 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; container-type: inline-size; }
/* --k = 1px a ancho completo (730 de contenido) y menos por debajo: la pieza de
   precios y la cabecera FASE 2 se escalan enteras con la caja, como el arte, en
   vez de saltar a tamaños fijos de móvil. Se resuelve donde se usa (cqi = la
   .ent-box contenedora). */
.ent-box { --k: min(1px, 100cqi / 730); }
/* 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; }

/* PREVENTA blanco sobre la píldora FASE 2, medidos en el arte (fila de precios =
   583px del arte = 730 aquí): píldora 403×119, FASE 2 a 69px de mayúscula,
   PREVENTA a .87 de esa altura. text-box recorta la caja a la mayúscula, así que
   el padding de la píldora es simétrico y la tinta queda centrada. */
.ent-presale__title {
  font-family: kikuta, sans-serif;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.ent-presale__over,
.ent-presale__tag { display: block; width: max-content; max-width: 100%; margin-inline: auto; text-box: trim-both cap alphabetic; }
.ent-presale__over { margin-bottom: calc(var(--k) * 12); font-size: calc(var(--k) * 80); color: var(--white); }
.ent-presale__tag {
  padding: .27em .68em;
  border-radius: 999px;
  background: #6C1BD1;
  color: #F4F343;
  font-size: calc(var(--k) * 92);
}
.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: calc(var(--k) * 14); }

.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--k) * 16);
  /* 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 calc(var(--k) * 18);
  min-height: calc(var(--k) * 66);
  /* 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: calc(var(--k) * 15) calc(var(--k) * 150) calc(var(--k) * 1) calc(var(--k) * 20);
  border-radius: calc(var(--k) * 10);
  /* the bar itself ends in the same arrow tip as the badge, so nothing peeks past it */
  clip-path: polygon(0 0, calc(100% - var(--k) * 22) 0, 100% 50%, calc(100% - var(--k) * 22) 100%, 0 100%);
  font-family: kikuta, sans-serif;
  font-size: calc(var(--k) * 51);  /* 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: calc(var(--k) * 11); padding-bottom: calc(var(--k) * 5); }

.tier__price {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--k) * 136);
  padding: calc(var(--k) * 14) calc(var(--k) * 37) 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% - var(--k) * 22) 0, 100% 50%, calc(100% - var(--k) * 22) 100%, 0 100%, calc(var(--k) * 22) 50%);
  font-family: kikuta, sans-serif;
  font-size: calc(var(--k) * 51);
  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: calc(var(--k) * 15) calc(var(--k) * 24) calc(var(--k) * 13);
  border-radius: 999px;
  background: #F4F343;
  color: #111;
  font-family: config, sans-serif;
  /* suelo de 11px: a escala del arte quedaría en ~8px en un teléfono */
  font-size: max(11px, var(--k) * 17.85);
  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__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 — --k shrinks everything to fit */
  .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); }
}