/* ============================================
   TIPOGRAFÍA
   Libre Franklin: la versión libre/de Google Fonts de la familia Franklin Gothic,
   con los mismos pesos (Book ≈ 400/500, Heavy ≈ 800/900).
   Se sirve desde este mismo dominio (assets/fonts) para que cargue más rápido
   y para no depender de que Google esté disponible.
   Es una fuente "variable": un solo archivo cubre todos los pesos.
   ============================================ */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/libre-franklin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/libre-franklin-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================
   RESET BÁSICO
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* El sitio es claro a propósito: "only light" evita que Chrome en Android
     (y los navegadores que hacen lo mismo) le apliquen un modo oscuro
     automático e inviertan los colores. El "only" es imprescindible. */
  color-scheme: only light;

  --bg: #f5f4f1;
  --ink: #111111;
  --max-width: 720px;
  --max-width-wide: 960px;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Libre Franklin", Helvetica, Arial, sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* <picture> es sólo un envoltorio para poder servir WebP:
   no tiene que afectar el diseño. */
picture {
  display: block;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

/* Marco visible al navegar con el teclado (tecla Tab) */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Las secciones reciben el foco al llegar desde el menú (para teclado y
   lectores de pantalla), pero ahí el marco no aporta nada. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Texto sólo para lectores de pantalla: no se ve, pero se lee */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link "Saltar al contenido": sólo aparece al navegar con teclado */
.skip-link {
  position: absolute;
  top: -70px;
  left: 8px;
  z-index: 10;
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 0 0 6px 6px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   NAV
   ============================================ */
.nav {
  padding: 32px 40px;
}

.nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.nav a {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.nav a:hover {
  opacity: 0.6;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 24px 90px;
  text-align: center;
}

.hero__title {
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero__title-light {
  font-weight: 500;
}

.hero__title-bold {
  font-weight: 900;
}

.hero__title-small {
  display: inline-block;
  font-weight: 500;
  font-size: 0.5em;
  vertical-align: middle;
  margin: 0 4px;
}

.hero__photo {
  width: 260px;
  max-width: 70%;
  height: auto;
  margin: 48px auto 40px;
  display: block;
}

.social-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
  margin-bottom: 32px;
}

.social-badge {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.social-badge:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.social-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__url {
  display: inline-block;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: lowercase;
}

.hero__url:hover {
  text-decoration: underline;
}

/* ============================================
   SECCIONES (¿Quién es? / Shows / Música / Videos / Redes)
   ============================================ */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.section--wide {
  max-width: var(--max-width-wide);
}

.section--alt {
  background: #ece9e1;
  max-width: 100%;
}

.section--alt > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.section--wide.section--alt > * {
  max-width: var(--max-width-wide);
}

.section__title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 24px;
  text-wrap: balance;
}

/* ¿Quién es? — foto + texto */
.quien-es__content {
  display: flex;
  align-items: center;
  gap: 48px;
  text-align: left;
}

.quien-es__content > picture {
  flex: 0 0 auto;
  width: 400px;
  max-width: 45%;
}

.quien-es__photo {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  filter: grayscale(100%);
  transition: filter 3.5s ease;
}

/* Esta clase la agrega el script del index cuando la foto entra en pantalla */
.quien-es__photo.is-visible {
  filter: grayscale(0%);
}

.quien-es__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.quien-es__text p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.btn:hover {
  opacity: 0.85;
}

.btn--random {
  margin-bottom: 44px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================
   SHOWS
   ============================================ */
.shows-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.show-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

.show-row:last-child {
  border-bottom: none;
}

.show-date {
  font-weight: 900;
  font-size: 1rem;
  min-width: 48px;
}

.show-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.show-event {
  font-weight: 800;
  font-size: 0.95rem;
}

.show-venue {
  font-weight: 500;
  font-size: 0.82rem;
  opacity: 0.65;
}

.show-tag {
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.show-tag--free {
  border: 1.5px solid var(--ink);
}

/* Shows que ya pasaron: tachados y apagados. Se dejan en la lista como
   registro, pero el botón deja de ser un link para no mandar a comprar
   entradas de una fecha que ya fue. */
.show-row--past {
  opacity: 0.45;
}

.show-row--past .show-date,
.show-row--past .show-event,
.show-row--past .show-venue {
  text-decoration: line-through;
}

.show-tag--tickets {
  background: var(--ink);
  color: var(--bg);
  transition: opacity 0.15s ease;
}

.show-tag--tickets:hover {
  opacity: 0.85;
}

/* ============================================
   MÚSICA / ÁLBUMES
   ============================================ */
.album {
  margin-bottom: 48px;
}

.album:last-child {
  margin-bottom: 0;
}

.album__cover {
  width: 420px;
  max-width: 85%;
  /* height: auto para que aspect-ratio mande: con una altura fija en px, en
     pantallas angostas la tapa quedaba rectangular y recortaba la portada. */
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

.album__title {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.platform-icons {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.platform-icon:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.platform-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Portada con reverso: con el mouse en desktop, con un toque en celular
   (el toque agrega la clase .is-flipped desde el script del index) */
.album__cover-flip {
  position: relative;
  width: 420px;
  max-width: 85%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.album__cover-flip .album__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  border-radius: 0;
  transition: opacity 0.05s ease;
}

.album__cover-flip .album__cover--back {
  opacity: 0;
}

.album__cover-flip.is-flipped .album__cover--front {
  opacity: 0;
}

.album__cover-flip.is-flipped .album__cover--back {
  opacity: 1;
}

/* Sólo en dispositivos con mouse: así en celular no queda "pegado" el hover */
@media (hover: hover) {
  .album__cover-flip:hover .album__cover--front {
    opacity: 0;
  }

  .album__cover-flip:hover .album__cover--back {
    opacity: 1;
  }
}

/* ============================================
   VIDEOS
   ============================================ */
.video-grid {
  display: grid;
  /* minmax(0, 1fr) evita que las miniaturas grandes ensanchen la grilla */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
}

.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* proporción 16:9 */
  background: var(--ink);
  border-radius: 6px;
  overflow: hidden;
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Miniatura + botón de play que reemplaza al reproductor hasta el primer click */
.video-facade {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}

.video-facade:hover img {
  opacity: 0.7;
}

.video-facade:focus-visible {
  outline: 3px solid var(--bg);
  outline-offset: -6px;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

/* Triángulo de play */
.video-play::before {
  content: "";
  margin-left: 4px; /* centro óptico del triángulo */
  border-left: 18px solid var(--bg);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.video-facade:hover .video-play,
.video-facade:focus-visible .video-play {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-caption {
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  text-align: center;
  padding: 40px 24px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ============================================
   APARICIÓN AL SCROLLEAR
   Cada bloque entra con un fade corto la primera vez que se ve, y después
   queda quieto. El hero queda fuera a propósito: es lo primero que se ve y
   tiene que estar ahí de entrada.
   - Sólo se aplica si hay JavaScript (clase .js en <html>).
   - No se aplica si la persona pidió menos animación en su sistema.
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .section__title,
  .js .quien-es__content,
  .js .show-row,
  .js .btn--random,
  .js .album,
  .js .video-item,
  .js .social-row--bottom,
  .js .footer {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }

  /* Va después y con la misma especificidad, para ganarle al estado de arriba
     una vez que el bloque entró en pantalla. Por eso cada selector de la lista
     tiene que ser UNA sola clase: si se agrega algo como `.js .footer p` o
     `.js #redes .social-row`, pesa más que esta regla y el bloque se queda
     invisible para siempre. */
  .js .is-in {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   RESPONSIVE — CELULAR
   ============================================ */
@media (max-width: 640px) {
  .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quien-es__content {
    flex-direction: column;
  }

  .quien-es__content > picture {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  .nav {
    padding: 24px 20px;
  }

  .nav nav {
    justify-content: center;
    gap: 10px 18px;
  }

  .nav a {
    font-size: 0.8rem;
  }

  .hero {
    padding: 40px 20px 60px;
  }

  .hero__title {
    font-size: clamp(1.3rem, 6.5vw, 1.8rem);
  }

  .section {
    padding: 56px 20px;
  }

  /* En pantallas chicas la fila pasa a dos líneas: arriba fecha + nombre,
     abajo el botón de Gratis / Entradas alineado con el nombre.
     (Con flex el texto se achicaba hasta partirse en pedacitos.) */
  .show-row {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 4px 18px;
    align-items: start;
  }

  .show-date {
    grid-column: 1;
  }

  .show-info {
    grid-column: 2;
  }

  .show-tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 10px;
  }

  .video-play {
    width: 54px;
    height: 54px;
  }
}

/* ============================================
   ACCESIBILIDAD — quien pidió menos animación en su sistema
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}