/*
  Las Guardianas KPOP – Gran Tour Ecuador 2026
  El diseño original mide 1920 x 5073 px. Cada pieza (.el) lleva su posición y ancho
  en píxeles del diseño (--x, --y, --w) y en pantallas grandes todo se escala con --u
  (1 px del diseño = 100vw / 1920), así queda idéntico al arte.
  En pantallas angostas (menos de 1000 px) las piezas se apilan una debajo de otra
  con tamaños propios, para que los textos y las tarjetas se lean bien en el celular.
*/

:root {
  --base: #0b040f;        /* color de fondo bajo el escenario */
  --u: calc(100vw / 1920);
}

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

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--base);
}

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }

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

/* =====================================================
   CELULAR Y TABLET: piezas apiladas
   ===================================================== */

.page {
  position: relative;
  overflow: hidden;
  background: var(--base) url("../img/bg.webp") center top / 180vw auto no-repeat;
}

/* piezas más anchas que la pantalla se centran y se recorta el sobrante */
.el {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  height: auto;
}

/* bandas magenta con el logo de Artística */
.band { position: relative; overflow: hidden; height: calc(150vw * 170 / 1920); }
.band--bottom { height: calc(150vw * 217 / 1920); margin-top: 6vw; }
.band img {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 150vw;
  max-width: none;
}

.title    { width: 92vw;  margin-top: 4vw; }
.logo     { width: 106vw; margin-top: -1vw; }
.intro    { width: 124vw; margin-top: 100vw; }
.concierto{ width: 100vw; margin-top: 1vw; }
.fechas   { width: 96vw;  margin-top: -5vw; }

/* ---------- Tarjetas de ciudades ---------- */
.frame-a { display: none; }

.cards {
  --cs: calc(min(72vw, 400px) / 418);   /* 1 px del diseño dentro de las tarjetas */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6vw;
}

.card-item {
  position: relative;
  width: calc(543 * var(--cs));
  height: calc(647 * var(--cs));
  margin-bottom: calc(-24 * var(--cs));
}

.frame-b {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;   /* el marco es más ancho que la tarjeta; sin esto `img { max-width: 100% }` lo recorta */
  pointer-events: none;
}

.card {
  position: absolute;
  left: calc(62 * var(--cs));
  top: calc(31 * var(--cs));
  width: calc(418 * var(--cs));
  display: block;
  border-radius: 6%;
  transition: transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.card img { width: 100%; height: auto; }
.card:hover  { transform: translateY(-6px) scale(1.02); }
.card:active { transform: translateY(-2px) scale(1.01); }
.card:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

/* ---------- Collage + Guardianas ---------- */
.fans {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 112vw;
  aspect-ratio: 1841 / 838;
  margin-top: 4vw;
  pointer-events: none;
}
.fans__collage { position: absolute; left: 0; top: 0; width: 100%; }
.fans__girls {
  position: absolute;
  left: calc(525 / 1841 * 100%);
  top: calc(316 / 838 * 100%);
  width: calc(797 / 1841 * 100%);
}

/* ---------- Textos legales ---------- */
.legal {
  position: relative;
  z-index: 2;
  width: min(92vw, 640px);
  margin: -9vw auto 0;
  padding: 5vw 5vw 5vw 7vw;
  border: 2px solid #f3d9ff;
  border-radius: 18px;
  background: rgba(6, 2, 10, .92);
  box-shadow: 0 0 0 3px rgba(215, 60, 215, .45), 0 0 22px 4px rgba(215, 60, 215, .6), inset 0 0 22px rgba(190, 40, 190, .5);
}

.legal__list {
  font-size: clamp(13px, 3.7vw, 20px);
  line-height: 1.5;
  color: #f3eef7;
}

.legal__list li { position: relative; padding-left: 1.1em; }
.legal__list li + li { margin-top: .2em; }
.legal__list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
}

/* =====================================================
   ESCRITORIO: réplica exacta del diseño (1920 x 5073)
   ===================================================== */
@media (min-width: 1000px) {

  .page {
    height: calc(5073 * var(--u));
    background-size: 100% auto;
  }

  .el {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    margin: 0;
    transform: none;
  }

  .band, .band--bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
  }
  .band--top { top: 0; }
  .band--bottom { top: calc(4856 * var(--u)); }
  .band img {
    position: static;
    transform: none;
    width: 100%;
  }

  .cards {
    --cs: var(--u);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    pointer-events: none;
  }

  .frame-a {
    display: block;
    position: absolute;
    left: calc(459 * var(--u));
    top: calc(2887 * var(--u));
    width: calc(1012 * var(--u));
    pointer-events: none;
  }

  .card-item {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(418 * var(--u));
    height: auto;
    margin: 0;
    pointer-events: auto;
  }

  .frame-b {
    left: calc(-62 * var(--u));
    top: calc(-31 * var(--u));
    width: calc(543 * var(--u));
    height: auto;
  }
  /* Quito y Cuenca comparten el marco grande (frame-a); Guayaquil lleva el suyo */
  .card-item--quito .frame-b,
  .card-item--cuenca .frame-b { display: none; }

  .card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .fans {
    position: absolute;
    left: calc(39 * var(--u));
    top: calc(3864 * var(--u));
    width: calc(1841 * var(--u));
    margin: 0;
    transform: none;
  }
  /* orden de capas del diseño: collage < marcos y tarjetas < Guardianas < textos legales */
  .fans__collage { z-index: 1; }
  .cards { z-index: 2; }
  .fans__girls { z-index: 3; }

  .legal {
    position: absolute;
    left: calc(319 * var(--u));
    top: calc(4548 * var(--u));
    width: calc(1286 * var(--u));
    height: calc(249 * var(--u));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: url("../img/legal-box.png") 0 0 / 100% 100% no-repeat;
    z-index: 4;
    pointer-events: none;
  }

  .legal__list {
    position: absolute;
    left: calc(161 * var(--u));
    top: calc(69 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(36 * var(--u));
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:active { transform: none; }
}