/* =========================================================================
   El Sentido de la Birra Live — landing de fechas
   ========================================================================= */

/* Anton (SIL Open Font License 1.1) para titulares.
   Montserrat (SIL OFL 1.1) para el texto pequeno: es la que ya usa el resto de
   elsentidodelabirra.com. Sustituye a la Gill Sans de las referencias, que es
   de Monotype y su licencia no permite incrustarla en una web. */
@font-face {
  font-family: 'Anton';
  src: url('/static/live/fonts/anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/static/live/fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  /* fuente variable: un solo archivo cubre todos los pesos */
  font-style: normal;
  font-display: swap;
}

:root {
  --cyan: #00DFE4;
  --cyan-dim: #00a9ad;
  --magenta: #FF2D9B;
  --ink: #0B0D0E;
  --white: #fff;
  --muted: rgba(255, 255, 255, .62);
  --rule: rgba(255, 255, 255, .32);

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 3.2vw, 4rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--ui);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Fondo
   ------------------------------------------------------------------------- */

/* El fondo se queda en z-index 0 y el contenido se sube a 1. Con z-index:-1 la
   capa fija se compone POR ENCIMA del contenido al hacer scroll en algunos
   navegadores, y la pagina se queda en negro. */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}

.bg__img {
  position: absolute;
  /* Sobresale un 10% por arriba y por abajo. El JS nunca lo desplaza mas de
     ese 10%, asi que el fondo jamas deja un hueco, sea cual sea el largo. */
  inset: -10% 0;
  background: url('/static/live/img/bg.webp') center / cover no-repeat;
  will-change: transform;
}

/* La textura original es muy clara: se oscurece mas por la izquierda, que es
   donde va el claim en blanco, y se deja respirar hacia la derecha. */
.bg__tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(6, 7, 8, .90) 0%,
      rgba(6, 7, 8, .86) 26%,
      rgba(8, 10, 11, .68) 58%,
      rgba(8, 10, 11, .56) 100%);
}

/* Los halos de color se pintan en CSS: pesan cero y escalan a cualquier pantalla */
.bg__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 45% at 100% 0%, rgba(0, 223, 228, .30), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(255, 45, 155, .26), transparent 70%),
    radial-gradient(38% 30% at 8% 42%, rgba(255, 45, 155, .12), transparent 70%);
}

/* -------------------------------------------------------------------------
   Rejilla
   ------------------------------------------------------------------------- */

.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: clamp(1.5rem, 3vw, 4rem);
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------------------
   Columna izquierda
   ------------------------------------------------------------------------- */

.brand {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(1rem, 2.5vh, 2.5rem);
}

/* Las medidas salen de la referencia de desktop. Ojo: los dos PNG llevan mucho
   margen transparente (el halo del neon en el logo, el recorte en la cara), asi
   que las cajas se posicionan en negativo para que lo que se VE quede donde toca. */
.brand__art {
  position: relative;
  aspect-ratio: 1 / .577;
  margin-bottom: clamp(.5rem, 1.6vh, 1.5rem);
}

.brand__logo {
  position: absolute;
  left: -9%;
  top: -17%;
  width: 90%;
  height: auto;
  /* Por encima: en la referencia el "Live" rosa cruza por delante de la cara */
  z-index: 2;
}

.brand__face {
  position: absolute;
  left: 34.8%;
  top: -10.6%;
  width: 75.4%;
  height: auto;
  z-index: 1;
  opacity: 0;
  transition: opacity .18s ease-out;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55));
}

.brand__face.is-on {
  opacity: 1;
}

.brand__presenta {
  margin: 0 0 .15em;
  padding-left: 42%;
  font-size: clamp(.55rem, .72vw, .82rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand__name {
  margin: 0;
  padding-left: 42%;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.9vw, 2.3rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.brand__claim {
  margin: auto 0 0;
  padding-top: clamp(1rem, 3vh, 3rem);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.85vw, 7rem);
  line-height: .93;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.brand__credits {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 3rem);
  margin-top: auto;
  padding-top: clamp(1rem, 3vh, 2.5rem);
}

.credit__label {
  display: block;
  margin-bottom: .5em;
  padding-bottom: .45em;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(.5rem, .62vw, .7rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.credit img {
  height: clamp(.85rem, 1.15vw, 1.4rem);
  width: auto;
}

/* -------------------------------------------------------------------------
   Listado de fechas
   ------------------------------------------------------------------------- */

.content {
  padding-block: clamp(2rem, 5vh, 4.5rem);
  min-width: 0;
}

.dates {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dates__empty {
  padding: 2rem 0;
  border-block: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.8vw, 1.8rem);
  line-height: 1.2;
  text-transform: uppercase;
}

.show {
  border-bottom: 1px solid var(--rule);
}

.show:first-child {
  border-top: 1px solid var(--rule);
}

.show__link {
  display: block;
  padding: clamp(1.1rem, 2.4vh, 2rem) 0;
  color: inherit;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.show__head {
  margin: 0 0 .55em;
  font-family: var(--display);
  font-size: clamp(1.32rem, 2.25vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: .005em;
  text-transform: uppercase;
  transition: text-shadow .22s ease, color .22s ease;
}

.show__cta {
  display: inline-block;
  padding: .34em .6em .3em;
  background: var(--cyan);
  color: #000;
  font-family: var(--display);
  font-size: clamp(.82rem, 1.05vw, 1.22rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: box-shadow .22s ease, background-color .22s ease;
}

/* Fechas todavia sin link de venta */
.show--soon .show__head {
  color: rgba(255, 255, 255, .78);
}

.show__cta--soon {
  background: transparent;
  color: rgba(255, 255, 255, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}

/* Resplandor: en desktop con el raton, en movil con el scroll (.is-active) */
@media (hover: hover) {
  .show:not(.show--soon) .show__link:hover {
    transform: translateX(.5rem);
  }

  .show__link:hover .show__head {
    text-shadow: 0 0 18px rgba(0, 223, 228, .85), 0 0 46px rgba(0, 223, 228, .45);
  }

  .show__link:hover .show__cta:not(.show__cta--soon) {
    box-shadow: 0 0 22px rgba(0, 223, 228, .75);
  }
}

.show.is-active .show__head {
  text-shadow: 0 0 18px rgba(0, 223, 228, .85), 0 0 46px rgba(0, 223, 228, .45);
}

.show.is-active .show__cta:not(.show__cta--soon) {
  box-shadow: 0 0 22px rgba(0, 223, 228, .75);
}

/* -------------------------------------------------------------------------
   Peticion de ciudad + video
   ------------------------------------------------------------------------- */

.request,
.promo {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
}

.request__title,
.promo__title {
  margin: 0 0 .4em;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.9vw, 2.1rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.request__text {
  margin: 0 0 1.4em;
  max-width: 46ch;
  font-size: clamp(.85rem, 1vw, 1rem);
  line-height: 1.55;
  color: var(--muted);
}

.btn {
  display: inline-block;
  padding: .85em 1.6em;
  border: 0;
  background: var(--magenta);
  color: var(--white);
  font-family: var(--ui);
  font-size: clamp(.82rem, .95vw, .98rem);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .22s ease, transform .22s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(255, 45, 155, .5);
}

.btn--full {
  width: 100%;
  margin-top: 1.6rem;
}

.promo__video {
  position: relative;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.promo__video img,
.promo__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.promo__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(0, 0, 0, .28);
  cursor: pointer;
  transition: background-color .22s ease;
}

.promo__play:hover {
  background: rgba(0, 0, 0, .1);
}

.promo__playIcon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.05rem 0 1.05rem 1.75rem;
  border-color: transparent transparent transparent var(--white);
  filter: drop-shadow(0 0 16px rgba(0, 223, 228, .8));
  transition: transform .22s ease;
}

.promo__play:hover .promo__playIcon {
  transform: scale(1.12);
}

.foot {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .75rem;
  color: var(--muted);
}

.foot p {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(4px);
}

.modal__box {
  position: relative;
  width: 100%;
  max-width: 26rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: #141617;
  border: 1px solid rgba(255, 255, 255, .12);
}

.modal__close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover {
  color: var(--white);
}

.modal__title {
  margin: 0 0 1.4rem;
  font-family: var(--display);
  font-size: 1.6rem;
  text-transform: uppercase;
}

.modal label {
  display: block;
  margin-bottom: .35rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .85);
}

.modal input[type=text],
.modal input[type=email],
.modal select {
  width: 100%;
  margin-bottom: 1rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(255, 255, 255, .22);
  background: #0b0d0e;
  color: var(--white);
  font: inherit;
  font-size: .92rem;
}

.modal__consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--muted);
}

.modal__consent input {
  margin-top: .2rem;
  flex-shrink: 0;
  accent-color: var(--magenta);
}

.modal__consent label {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* -------------------------------------------------------------------------
   Movil / tablet
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .brand {
    position: static;
    height: auto;
    padding-top: clamp(1rem, 4vw, 2rem);
  }

  /* Se conserva la misma geometria del arte que en desktop: las medidas son
     porcentajes de la propia caja, asi que escalan solas. Tocar solo el ancho
     aqui descuadraba el logo respecto a la cara y dejaba un hueco enorme. */
  .brand__art {
    max-width: 34rem;
    margin-inline: auto;
    width: 100%;
  }

  .brand__presenta,
  .brand__name {
    padding-left: 0;
    text-align: right;
    max-width: 34rem;
    margin-inline: auto;
  }

  .brand__presenta {
    font-size: .68rem;
  }

  .brand__name {
    font-size: clamp(1.35rem, 5.6vw, 2rem);
  }

  .brand__claim {
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
    padding-top: 0;
    font-size: clamp(2.35rem, 11.5vw, 4.2rem);
  }

  .brand__credits {
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
    padding-top: 0;
    gap: 1.5rem;
  }

  .credit__label {
    font-size: .5rem;
  }

  .credit img {
    height: .95rem;
  }

  .content {
    padding-block: clamp(1.75rem, 7vw, 3rem) 3rem;
  }

  .show__head {
    font-size: clamp(1.28rem, 6.1vw, 2.1rem);
  }

  /* En movil, ciudad y fecha en una linea y la sala debajo */
  .show__dash {
    display: none;
  }

  .show__venue {
    display: block;
  }

  .show__cta {
    font-size: clamp(.8rem, 3.5vw, 1rem);
  }
}

/* -------------------------------------------------------------------------
   Pantallas bajas: que la columna fija quepa siempre
   ------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-height: 780px) {
  .brand__claim {
    font-size: clamp(2rem, 4.1vw, 4.4rem);
  }

  .brand__art {
    aspect-ratio: 1 / .62;
  }

  .brand__logo {
    width: 64%;
  }

  .brand__face {
    width: 47%;
  }
}

/* -------------------------------------------------------------------------
   Accesibilidad: sin movimiento
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .show__link:hover {
    transform: none !important;
  }
}

/* ---- Enlaces rescatados de la home antigua ---------------------------- */

.credit__link {
  display: inline-block;
  line-height: 0;
  transition: opacity .2s ease;
}

.credit__link:hover {
  opacity: .7;
}

.promo__todas {
  display: inline-block;
  margin-top: 1rem;
  padding-bottom: .15em;
  border-bottom: 1px solid var(--cyan);
  color: var(--cyan);
  font-size: clamp(.82rem, .95vw, .95rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.promo__todas:hover {
  color: var(--white);
  border-color: var(--white);
}