/* =========================================================
   SPAICY EVENTS
   El cartel, hecho web.
   Todo el lenguaje sale del cartel del First Event:
   filetes a los lados del rótulo, las pinceladas y el lettering
   a mano, corona, chile, duotono rojo y blanco puro.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Colores del cartel */
  --negro:     #000000;   /* negro puro, sin lavar */
  --negro-2:   #0A0A0A;   /* superficies */
  --negro-3:   #151515;   /* superficies elevadas */
  --rojo:      #E3120B;   /* el rojo del logo: el que manda */
  --rojo-luz:  #FF2A17;   /* rojo encendido, para estados activos */
  --rojo-hondo:#9B0A05;   /* rojo profundo, para masas grandes */
  --rojo-seco: #3D0301;   /* rojo casi negro, para bordes y fondos */
  --blanco:    #FFFFFF;   /* blanco puro, como en el cartel */
  --gris:      #ADADAD;   /* gris neutro, sin tinte cálido */
  --gris-2:    #6E6E6E;

  --filete:    rgba(255, 255, 255, .24);
  --filete-2:  rgba(255, 255, 255, .11);

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --ancho: 1260px;
  --lado: clamp(20px, 4.5vw, 60px);
  --bloque: clamp(88px, 10vw, 160px);
  --nav-h: 74px;

  --sal: cubic-bezier(.16, 1, .3, 1);
  --golpe: cubic-bezier(.34, 1.56, .64, 1);   /* rebote de pegatina */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--negro); color: var(--blanco);
  font-family: var(--sans); font-size: 17.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 2px solid var(--rojo-luz); outline-offset: 4px; }

.caja { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--lado); }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 300; background: #fff; color: #000; padding: 12px 20px; font-weight: 700; }
.saltar:focus { left: 8px; }

/* Textura de impresión sobre todo el sitio */
.papel {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 2. RECURSOS DEL CARTEL ---------- */

/* ──── RÓTULO ────  el recurso que más repite el cartel */
.flanco {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 26px);
  margin: 0; font-weight: 500; font-variation-settings: "wdth" 112;
  font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .48em; text-transform: uppercase;
  color: var(--blanco); white-space: nowrap;
}
.flanco::before, .flanco::after { content: ""; height: 1px; flex: 1 1 auto; max-width: clamp(40px, 9vw, 130px); background: var(--filete); }
.flanco--izq { justify-content: flex-start; }
.flanco--izq::before { display: none; }
.flanco--corto::before, .flanco--corto::after { max-width: 42px; }
.flanco--rojo::before, .flanco--rojo::after { background: var(--rojo); }
.flanco--gris { color: var(--gris); }

/* Rótulo suelto tipo "SPAICY EVENTS / PRESENTS" */
.presenta { margin: 0; font-weight: 600; font-variation-settings: "wdth" 110; font-size: clamp(11px, 1vw, 13px); letter-spacing: .42em; text-transform: uppercase; line-height: 1.9; }
.presenta::after { content: ""; display: block; width: 58px; height: 1px; background: var(--filete); margin-top: 12px; }

/* Rotulación a pincel */
/* Voz "rotulada" para texto variable: la itálica pesada del wordmark.
   El lettering real del cartel vive en assets/marca/ como imagen. */
.rotulo { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; }

/* Titular pesado tipo wordmark */
.bloque-tit {
  margin: 0; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 66;
  text-transform: uppercase; line-height: .84; letter-spacing: -.02em;
  font-size: clamp(42px, 7.6vw, 122px);
}
.bloque-tit .hueco { color: transparent; -webkit-text-stroke: 1.4px var(--blanco); }
.bloque-tit .rojo { color: var(--rojo); }

/* Pinceladas reales del cartel, se pintan de izquierda a derecha */
/* Subrayado: la pincelada real del cartel, tamaño relativo al texto.
   El contenedor necesita position:relative. */
.trazo {
  position: absolute; left: 1%; bottom: -.02em; width: 98%; height: .17em;
  object-fit: fill;            /* se estira a lo ancho sin engordar */
  pointer-events: none;
}
.pintar { clip-path: inset(0 100% 0 0); }
.is-visto .pintar, .pintar.is-visto { animation: pintar .8s var(--sal) forwards; animation-delay: var(--esp, 0ms); }
@keyframes pintar { to { clip-path: inset(0 -2% 0 0); } }

/* Pegatina: papel recortado con sombra y giro */
.pegatina { position: relative; display: inline-block; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.pegatina--gira { rotate: -7deg; }

/* Celo */
.celo {
  position: absolute; width: clamp(66px, 7vw, 104px); height: clamp(22px, 2.2vw, 30px); z-index: 3;
  background: rgba(255,255,255,.18);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  clip-path: polygon(0% 14%, 12% 0%, 26% 12%, 40% 1%, 55% 13%, 70% 2%, 85% 12%, 100% 3%,
                     100% 88%, 86% 100%, 71% 87%, 56% 99%, 41% 86%, 26% 98%, 12% 87%, 0% 97%);
}

/* Foto en duotono rojo, como el cartel */
.duo { filter: contrast(1.15) saturate(1.02) brightness(.34); }
.duo--suave { filter: contrast(1.06) saturate(1.02) brightness(.92); }

/* Trama de semitono para los bloques rojos */
.trama::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: radial-gradient(circle at center, rgba(0,0,0,.85) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
}

/* ---------- 3. BOTONES ---------- */
.btn {
  --alto: 58px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--alto); padding: 0 32px; border: 0; cursor: pointer; overflow: hidden;
  font-family: var(--sans); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 78;
  font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  background: var(--rojo); color: #fff;
  transition: transform .28s var(--golpe), background .25s, color .25s, box-shadow .3s;
}
.btn > span { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--blanco);
  transform: translateY(101%); transition: transform .42s var(--sal);
}
.btn:hover { color: var(--negro); transform: rotate(-1.2deg) scale(1.03); box-shadow: 0 16px 34px -14px rgba(227,18,11,.8); }
.btn:hover::before { transform: none; }
.btn:active { transform: scale(.98); }
.btn--hueco { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 2px var(--blanco); }
.btn--hueco:hover { color: var(--negro); box-shadow: inset 0 0 0 2px var(--blanco); }
.btn--negro { background: var(--negro); color: var(--blanco); }
.btn--negro:hover { color: var(--negro); }
.btn--pequeno { --alto: 42px; padding: 0 18px; font-size: 13px; }
.btn--ancho { width: 100%; }
/* Chile detrás del botón, asoma al pasar por encima */
.btn--chile::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 16px; height: 22px; translate: 0 -50%; z-index: 1;
  background: currentColor; opacity: 0; transition: opacity .3s, translate .3s var(--sal);
  clip-path: path("M8 0c1.6 2.4.6 4-1 5.2 3.2.2 6 2.6 6.6 6 .8 4.4-1.6 9-5 10.4-3.6 1.4-7.4-.8-8.4-4.6C-.8 12.6 1.6 7.4 5 5.2 3 4 2.6 2 4 0Z");
}
.btn--chile:hover::after { opacity: .9; translate: 0 -50%; }

/* ---------- 4. NAV ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 120; transition: background .35s, box-shadow .35s; }
.nav__barra { height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--lado); }
.nav.solido { background: rgba(11,4,6,.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--filete-2); }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a {
  position: relative; padding: 6px 0; font-weight: 600; font-variation-settings: "wdth" 104;
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--blanco); opacity: .72;
  transition: opacity .25s;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { opacity: 1; }
/* Subrayado de pincel en el enlace activo */
.nav__links a::after {
  content: ""; position: absolute; left: -3px; right: -3px; bottom: -2px; height: 5px; background: var(--rojo);
  clip-path: polygon(0 62%, 9% 20%, 22% 48%, 38% 12%, 54% 44%, 70% 16%, 85% 46%, 100% 22%, 100% 78%, 86% 96%, 70% 62%, 54% 92%, 38% 60%, 22% 94%, 9% 66%, 0 96%);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--sal);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__dcha { display: flex; align-items: center; gap: 14px; }
.nav__menu { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.nav__menu span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--blanco); transition: transform .35s var(--sal), top .3s; }
.nav__menu span:first-child { top: 18px; }
.nav__menu span:last-child { top: 26px; }
.nav__menu[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* =========================================================
   5. PORTADA — el cartel a pantalla completa
   ========================================================= */
.portada { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + clamp(20px, 3.4vh, 42px)) 0 clamp(34px, 5vh, 64px); }
.portada__fondo { position: absolute; inset: 0; z-index: -2; }
.portada__foto {
  position: absolute; inset: -6% -3%;
  background: url("assets/hero.jpg") 44% 8% / cover no-repeat;
  scale: 1.06; translate: 0 var(--py, 0px);
  animation: acercar 30s var(--sal) both;
}
.portada__velo {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);    /* velo plano: apaga la foto, no la ensucia */
}
/* Rayas de luz roja, como las del cartel abajo a la derecha */
.portada__rayas { position: absolute; right: -6%; bottom: -10%; width: min(30vw, 360px); height: 52%; z-index: -1; opacity: .2; }
.portada__rayas path { fill: var(--rojo); }

.portada__caja { position: relative; max-width: 800px; margin-inline: auto; padding-inline: var(--lado); text-align: center; }

/* Cabecera: "SPAICY EVENTS / PRESENTS" y la pegatina HOT PEOPLE */
.portada__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; text-align: left; margin-bottom: clamp(4px, .8vh, 12px); }
.arte--hotpeople { flex: none; width: clamp(84px, 9vw, 132px); rotate: -6deg; }

/* Marca */
.portada__marca { margin: 0 0 clamp(14px, 2.4vh, 26px); }
.portada__logo { width: min(58%, 470px); margin: 0 auto clamp(8px, 1.2vh, 14px); filter: drop-shadow(0 18px 46px rgba(0,0,0,.72)); }
.portada__marca .flanco { max-width: 460px; margin-inline: auto; }

/* ---------- Piezas reales recortadas del cartel ---------- */
.arte { display: block; height: auto; user-select: none; -webkit-user-drag: none; }

/* FIRST EVENT: el lettering original, no una fuente */
.arte--first { width: min(44%, 356px); margin: 0 auto clamp(18px, 2.8vh, 34px); }

/* Fila de datos: fecha · sala · claim */
.portada__datos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 48px); margin-bottom: clamp(22px, 3.4vh, 42px); }
.arte--fecha { width: clamp(104px, 11.5vw, 156px); justify-self: center; }
.arte--picante { width: clamp(82px, 9.5vw, 128px); justify-self: center; }

/* Fecha alternativa, si cambias de evento y ya no vale la del cartel */
.fecha-alt { justify-self: center; position: relative; padding: 24px 40px 26px; rotate: -4deg; text-align: center; }
.fecha-alt::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--rojo); border-radius: 50%; }
.fecha-alt__dia { position: relative; display: block; font-weight: 700; font-variation-settings: "wdth" 108; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .28em; text-transform: uppercase; color: var(--rojo); }
.fecha-alt__num { position: relative; display: block; margin-top: 4px; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: clamp(28px, 3.4vw, 46px); line-height: 1; color: var(--rojo); }

.sala { justify-self: center; }
.sala__nombre { display: block; font-weight: 700; font-variation-settings: "wdth" 116; font-size: clamp(19px, 2vw, 30px); letter-spacing: .16em; line-height: 1; text-transform: uppercase; }
.sala__tipo { display: block; margin-top: 6px; font-weight: 500; font-variation-settings: "wdth" 112; font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .44em; text-transform: uppercase; color: var(--blanco); }
.sala .flanco { margin-top: 12px; }

/* DJs: el lettering real de cada uno */
.portada__djs { margin-bottom: clamp(22px, 3.4vh, 40px); }
.portada__djs .flanco { margin-bottom: clamp(12px, 2vh, 20px); }
.djs-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3.6vw, 52px); }
.arte--dj { width: clamp(92px, 10.5vw, 148px); }
.djs-fila--interior { justify-content: flex-start; gap: clamp(26px, 5vw, 76px); }
.djs-fila--interior .arte--dj { width: clamp(118px, 13vw, 190px); }
.djs-fila--interior .arte--dj-alto { width: clamp(98px, 11vw, 158px); }
.arte--dj-alto { width: clamp(78px, 8.8vw, 124px); }

.portada__acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Cuenta atrás, en la estética del cartel */
.reloj { display: flex; justify-content: center; gap: clamp(10px, 2vw, 30px); margin: 0 0 clamp(20px, 3vh, 34px); }
.reloj__celda { min-width: 62px; }
.reloj__celda b { display: block; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: clamp(30px, 3.6vw, 50px); line-height: 1; font-variant-numeric: tabular-nums; }
.reloj__celda span { display: block; margin-top: 6px; font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gris); }
.reloj__falta { margin: 0 auto clamp(24px, 4vh, 44px); max-width: 30em; color: var(--gris); }

/* Entrada: el cartel se va pegando */
.pega { opacity: 0; }
.is-listo .pega { animation: pegar .72s var(--golpe) both; animation-delay: var(--esp, 0ms); }
@keyframes pegar {
  from { opacity: 0; transform: translateY(26px) scale(.94) rotate(var(--giro, -3deg)); }
  to   { opacity: 1; transform: none; }
}
@keyframes acercar { from { scale: 1.14; } to { scale: 1.06; } }

/* =========================================================
   6. BANDA ROJA
   ========================================================= */
.banda { position: relative; z-index: 2; overflow: hidden; background: var(--rojo); color: #fff; padding: 13px 0; rotate: -1.4deg; scale: 1.05; margin-block: clamp(-22px, -2vw, -12px) clamp(22px, 3vw, 40px); }
.banda__via { display: flex; align-items: center; gap: 30px; width: max-content; animation: correr 36s linear infinite; }
.banda__via span { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 68; text-transform: uppercase; font-size: clamp(19px, 2.3vw, 32px); line-height: 1; white-space: nowrap; }
.banda__via .hueco { color: transparent; -webkit-text-stroke: 1px #fff; }
.banda__via i { width: 2px; height: .9em; flex: none; background: var(--negro); opacity: .5; }
@keyframes correr { to { transform: translateX(-50%); } }

/* =========================================================
   7. CABECERA DE SECCIÓN
   ========================================================= */
.seccion { padding-block: var(--bloque); }
.seccion--arriba { padding-block: var(--bloque) 0; }
.cab { margin-bottom: clamp(38px, 5vw, 70px); }
.cab .flanco { margin-bottom: 18px; }
.cab__fila { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,25em); gap: 22px 54px; align-items: end; }
.cab__nota { margin: 0; color: var(--gris); }

/* =========================================================
   8. PRÓXIMO EVENTO — el cartel pegado con celo
   ========================================================= */
.evento { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(38px, 6vw, 88px); align-items: start; }
.evento__cartel { position: relative; margin: 0; rotate: -2.2deg; transition: rotate .5s var(--sal); }
.evento__cartel:hover { rotate: 0deg; }
.evento__cartel .celo { top: -13px; left: 50%; translate: -50% 0; rotate: -3deg; }
.evento__cartel img { width: 100%; box-shadow: 0 34px 70px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07); }
.evento__pie { margin-top: 16px; display: flex; justify-content: space-between; font-weight: 500; font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); }

.datos { margin: 0 0 clamp(30px, 4vw, 46px); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--filete-2); }
.datos > div { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--filete-2); }
.datos > div:nth-child(odd) { border-right: 1px solid var(--filete-2); }
.datos > div:nth-child(even) { padding-left: 24px; }
.datos dt { margin-bottom: 9px; font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gris-2); }
.datos dd { margin: 0; font-weight: 700; font-variation-settings: "wdth" 108; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: .1em; text-transform: uppercase; line-height: 1.15; }
.datos dd.sub { margin-top: 7px; font-weight: 400; font-variation-settings: "wdth" 100; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--gris); }

/* =========================================================
   9. NIVELES — tres lotes, lenguaje de drop
   ========================================================= */
.lotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px, 2vw, 26px); }
.lote {
  position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px);
  background: var(--negro-2); box-shadow: inset 0 0 0 1px var(--filete-2);
  transition: transform .45s var(--sal), box-shadow .45s, background .4s;
}
.lote:nth-child(1) { rotate: -.7deg; }
.lote:nth-child(2) { rotate: .5deg; }
.lote:nth-child(3) { rotate: -.4deg; }
.lote:hover { transform: translateY(-8px); rotate: 0deg; background: var(--negro-3); box-shadow: inset 0 0 0 1px var(--filete), 0 34px 60px -34px rgba(227,18,11,.8); }
.lote__n { font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gris-2); }
.lote__nombre { position: relative; display: inline-block; margin: 14px 0 2px; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 68; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -.015em; }
.lote__nombre + .lote__que { margin-top: 18px; }
.lote__que { margin: 0 0 20px; font-weight: 500; font-variation-settings: "wdth" 110; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--blanco); }
.lote__precio { margin: 0 0 6px; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: clamp(32px, 3.6vw, 48px); line-height: 1; }
.lote__cond { margin: 0 0 22px; font-size: 13.5px; color: var(--gris); }
.lote ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 9px; }
.lote li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--gris); }
.lote li::before { content: ""; margin-top: .5em; width: 14px; height: 1px; flex: none; background: var(--rojo); }
.lote .btn { margin-top: auto; }
/* Sello girado, como los "SOLD OUT" de los drops */
.lote__sello {
  position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px); rotate: 9deg;
  padding: 5px 11px; border: 1.5px solid var(--rojo); color: var(--rojo);
  font-weight: 800; font-variation-settings: "wdth" 104; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
}
.lote--vip { background: var(--negro-3); }
.lote--vip .lote__sello { border-color: var(--blanco); color: var(--blanco); }

/* =========================================================
   10. TOUR — resguardos de entrada
   ========================================================= */
.tour { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.parada {
  position: relative; display: grid; grid-template-columns: 96px 128px minmax(0,1.2fr) minmax(0,1fr) auto;
  gap: clamp(14px, 2vw, 28px); align-items: center; padding: 20px 24px;
  background: var(--negro-2); box-shadow: inset 0 0 0 1px var(--filete-2);
  transition: transform .4s var(--sal), background .35s;
}
/* Perforado del resguardo */
.parada::before {
  content: ""; position: absolute; left: 88px; top: 8px; bottom: 8px; width: 2px;
  background: radial-gradient(circle, var(--negro) 1.6px, transparent 1.7px) 0 0 / 2px 9px repeat-y;
}
.parada:hover { transform: translateX(8px); background: var(--negro-3); }
.parada__n { font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .28em; color: var(--gris-2); }
.parada__fecha { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 72; font-size: clamp(20px, 2vw, 27px); line-height: 1; }
.parada__club { font-weight: 700; font-variation-settings: "wdth" 112; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
.parada__ciudad { font-weight: 500; font-variation-settings: "wdth" 110; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--gris-2); }
.parada__estado { font-weight: 600; font-variation-settings: "wdth" 110; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); }
.parada.es-next { background: var(--rojo); color: #fff; box-shadow: none; }
.parada.es-next::before { background: radial-gradient(circle, var(--negro) 1.6px, transparent 1.7px) 0 0 / 2px 9px repeat-y; }
.parada.es-next .parada__n, .parada.es-next .parada__ciudad { color: rgba(255,255,255,.8); }
.parada.es-soon { opacity: .5; }
.parada.es-done .parada__estado { color: var(--rojo); }

/* =========================================================
   11. GALERÍA — recortes pegados
   ========================================================= */
.collage { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.recorte { position: relative; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.recorte img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 22px 44px -22px rgba(0,0,0,.9); transition: transform .55s var(--sal), filter .5s; }
.recorte:hover img { transform: scale(1.03) rotate(.6deg); }
.recorte figcaption, .recorte__pie {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; background: var(--negro);
  font-weight: 500; font-variation-settings: "wdth" 110; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--blanco);
}
.recorte--1 { grid-column: span 7; aspect-ratio: 16 / 11; rotate: -1.6deg; }
.recorte--2 { grid-column: span 5; aspect-ratio: 4 / 5; rotate: 1.4deg; align-self: end; }
.recorte--3 { grid-column: span 4; aspect-ratio: 1 / 1; rotate: 1deg; }
.recorte--4 { grid-column: span 4; aspect-ratio: 1 / 1; rotate: -1.2deg; }
.recorte--ig {
  grid-column: span 4; aspect-ratio: 1 / 1; rotate: 2deg; position: relative; overflow: hidden;
  background: var(--rojo); color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 2vw, 26px); text-align: left; box-shadow: 0 22px 44px -22px rgba(0,0,0,.9);
}
.recorte--ig b { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: clamp(18px, 2vw, 26px); line-height: 1.02; }
.recorte--ig span { font-weight: 500; font-variation-settings: "wdth" 110; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.recorte .celo { top: -12px; left: 22%; rotate: -5deg; }
.recorte--2 .celo { left: auto; right: 18%; rotate: 6deg; }

.visor { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.visor::backdrop { background: rgba(8,3,4,.96); }
.visor img { max-width: 94vw; max-height: 92vh; object-fit: contain; }
.visor__x { position: fixed; top: 18px; right: 18px; width: 46px; height: 46px; border: 0; background: var(--rojo); color: #fff; cursor: pointer; display: grid; place-items: center; }

/* =========================================================
   12. COMUNIDAD Y PIE
   ========================================================= */
.comunidad { position: relative; overflow: hidden; background: var(--rojo); color: #fff; padding-block: clamp(62px, 8vw, 110px); }
.comunidad__fila { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.comunidad .flanco { color: #fff; justify-content: flex-start; }
.comunidad .flanco::before { display: none; }
.comunidad .flanco::after { background: rgba(255,255,255,.5); }
.comunidad p { margin: 18px 0 0; max-width: 30em; color: rgba(255,255,255,.9); }
.comunidad__tit { margin: 12px 0 0; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 66; text-transform: uppercase; font-size: clamp(32px, 5vw, 70px); line-height: .9; letter-spacing: -.022em; }

.pie { border-top: 1px solid var(--filete-2); }
.pie__via { overflow: hidden; padding: clamp(16px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--filete-2); }
.pie__via .banda__via { animation-duration: 46s; gap: 44px; }
.pie__via img { height: clamp(40px, 6vw, 84px); width: auto; opacity: .85; }
.pie__via span { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 66; text-transform: uppercase; font-size: clamp(26px, 4vw, 58px); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); white-space: nowrap; }
.pie__cols { padding-block: clamp(42px, 5vw, 66px) 32px; display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: 34px; }
.pie__cols h4 { margin: 0 0 14px; font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gris-2); }
.pie__cols a, .pie__cols p { display: block; margin: 0 0 9px; font-size: 14.5px; color: var(--gris); transition: color .25s, transform .3s var(--sal); }
.pie__cols a:hover { color: var(--rojo); transform: translateX(5px); }
.pie__claim { font-size: 15.5px; line-height: 1.6; color: var(--gris); max-width: 22em; }
.pie__legal { padding: 22px 0 36px; border-top: 1px solid var(--filete-2); display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: space-between; font-size: 11.5px; letter-spacing: .04em; color: var(--gris-2); }

.wa { position: fixed; right: 18px; bottom: 18px; z-index: 100; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--rojo); box-shadow: 0 14px 34px -10px rgba(227,18,11,.85); transition: transform .3s var(--golpe); }
.wa:hover { transform: scale(1.1) rotate(8deg); }

/* =========================================================
   13. APARICIONES
   ========================================================= */
[data-ver] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--sal), transform .8s var(--sal); transition-delay: var(--esp, 0ms); }
[data-ver].is-visto { opacity: 1; transform: none; }

/* =========================================================
   14. RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__menu { display: block; }
  .cab__fila { grid-template-columns: 1fr; }
  .lotes { grid-template-columns: 1fr; }
  .evento { grid-template-columns: 1fr; }
  .evento__cartel { max-width: 420px; }
  .pie__cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .portada__datos { grid-template-columns: 1fr; gap: 26px; }
  .claim,   .collage { grid-template-columns: repeat(2, 1fr); }
  .recorte--1, .recorte--2, .recorte--3, .recorte--4, .recorte--ig { grid-column: span 1; aspect-ratio: 1 / 1; rotate: 0deg; }
  .recorte--1 { grid-column: span 2; aspect-ratio: 16 / 10; }
  .parada { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 18px; }
  .parada::before { display: none; }
  .parada__n { display: none; }
  .parada__fecha, .parada__club, .parada__ciudad { grid-column: 1; }
  .parada__estado, .parada .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .portada__cabecera { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .presenta { text-align: center; }
  .presenta::after { margin-inline: auto; }
  .portada__logo { width: 92%; }
  .portada__acciones .btn { width: 100%; }
  .djs-fila { gap: 16px 22px; }
  .datos { grid-template-columns: 1fr; }
  .datos > div:nth-child(odd) { border-right: 0; }
  .datos > div:nth-child(even) { padding-left: 0; }
  .reloj { gap: 12px; }
  .reloj__celda { min-width: 0; flex: 1; }
  .pie__cols { grid-template-columns: 1fr; }
  .comunidad__fila .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-ver], .pega { opacity: 1 !important; transform: none !important; }
  .pintar { clip-path: none !important; }
}

/* =========================================================
   15. AJUSTES
   ========================================================= */

/* Las formas se reutilizan con <use>, así que el color va por
   herencia (currentColor), no con selectores a los path. */
.hotpeople__corona { color: var(--rojo); }
.claim__chile { color: var(--rojo); }
.portada__rayas { color: var(--rojo); }

/* Panel de menú en móvil: una nota pegada */
.nav__panel {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--negro-2); border-top: 1px solid var(--filete-2);
  border-bottom: 3px solid var(--rojo); padding: 10px var(--lado) 20px;
}
.nav__panel a {
  padding: 12px 0; border-bottom: 1px solid var(--filete-2);
  font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70;
  font-size: clamp(26px, 7vw, 38px); text-transform: uppercase; line-height: 1;
}
.nav__panel a[aria-current="page"] { color: var(--rojo); }
.nav__panel a:last-child { border-bottom: 0; }

/* El logo del pie se ve mejor con algo de aire */
.pie__via .banda__via { align-items: center; }

/* Foto de portada: que no la tape del todo el velo en pantallas bajas */
@media (max-height: 760px) and (min-width: 861px) {
  .portada { padding-top: calc(var(--nav-h) + 20px); }
  .portada__logo { width: min(68%, 560px); }
  .reloj { margin-bottom: 26px; }
}

/* =========================================================
   16. CABECERA DE PÁGINA INTERIOR
   ========================================================= */
.cabpag { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(46px, 7vw, 96px)) 0 clamp(36px, 5vw, 66px); }
.cabpag::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rojo);
}
.cabpag__fila { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,25em); gap: 26px 56px; align-items: end; }
.cabpag__nota { margin: 0; color: var(--gris); }

/* Título mixto: bloque pesado + rótulo a pincel, como el cartel */
.tit-mix { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2px, .6vw, 8px); }
.tit-mix__a {
  font-style: italic; font-weight: 900; font-variation-settings: "wdth" 66; text-transform: uppercase;
  font-size: clamp(38px, 6.8vw, 104px); line-height: .84; letter-spacing: -.022em;
}
.tit-mix__b {
  position: relative; display: inline-block; font-style: italic; font-weight: 900;
  font-variation-settings: "wdth" 66; text-transform: uppercase; color: var(--rojo);
  font-size: clamp(36px, 6.4vw, 96px); line-height: .88; letter-spacing: -.022em; padding-bottom: .12em;
}
.tit-mix__b .trazo { left: 0; width: 100%; bottom: .02em; height: .13em; }
.tit-mix--hueco .tit-mix__a { color: transparent; -webkit-text-stroke: 1.4px var(--blanco); }

/* Fichas de datos en cabecera */
.fichas { margin: clamp(26px, 3vw, 38px) 0 0; display: flex; flex-wrap: wrap; gap: 10px 38px; }
.fichas > div { display: flex; flex-direction: column; gap: 6px; }
.fichas dt { font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gris-2); }
.fichas dd { margin: 0; font-weight: 700; font-variation-settings: "wdth" 108; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }

/* =========================================================
   17. FORMULARIOS
   ========================================================= */
.form { display: grid; gap: 18px; }
.form__fila { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 9px; font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gris-2); }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 0; appearance: none;
  background: rgba(0,0,0,.42); border: 1px solid var(--filete-2); border-bottom: 2px solid var(--filete);
  font-family: var(--sans); font-weight: 400; font-size: 16.5px; letter-spacing: 0; text-transform: none; color: var(--blanco);
  transition: border-color .25s, background .25s;
}
.form select { background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form textarea { resize: vertical; line-height: 1.55; }
.form input::placeholder, .form textarea::placeholder { color: #6A5D5A; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--rojo); border-bottom-color: var(--rojo); background: rgba(0,0,0,.6); }
.form .marca { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; font-variation-settings: "wdth" 100; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--gris); line-height: 1.5; }
.form .marca input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--rojo); }
.trampa { position: absolute; left: -9999px; }
.opcional { color: var(--gris-2); }
.fichas-radio { border: 0; margin: 0; padding: 0; }
.fichas-radio legend { padding: 0; margin-bottom: 10px; font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gris-2); }
.fichas-radio label { display: inline-flex; margin: 0 8px 8px 0; }
.fichas-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.fichas-radio span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; cursor: pointer; border: 1px solid var(--filete-2); font-size: 14px; color: var(--gris); transition: all .25s; }
.fichas-radio input:checked + span { background: var(--rojo); border-color: var(--rojo); color: #fff; font-weight: 700; }
.fichas-radio input:focus-visible + span { outline: 2px solid var(--blanco); outline-offset: 2px; }

/* =========================================================
   18. LOTE GRANDE (página de entradas)
   ========================================================= */
.lote-xl { position: relative; display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(28px, 4vw, 66px); padding: clamp(26px, 3.2vw, 46px); background: var(--negro-2); box-shadow: inset 0 0 0 1px var(--filete-2); }
.lote-xl + .lote-xl { margin-top: clamp(18px, 2.4vw, 30px); }
.lote-xl--vip { background: var(--negro-3); box-shadow: inset 0 0 0 1px var(--filete); }
.lote-xl__n { font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gris-2); }
.lote-xl__nombre { position: relative; display: inline-block; margin: 12px 0 20px; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 68; text-transform: uppercase; font-size: clamp(32px, 4vw, 54px); line-height: .96; letter-spacing: -.018em; padding-bottom: .12em; }
.lote-xl__nombre .trazo { left: 0; width: 100%; bottom: .02em; height: .15em; }
.lote-xl__precio { margin: 0 0 4px; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.lote-xl__cond { margin: 0 0 22px; font-size: 14px; color: var(--gris); }
.lote-xl p.texto { margin: 0 0 22px; color: var(--gris); max-width: 34em; }
.lote-xl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lote-xl li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.lote-xl li::before { content: ""; margin-top: .55em; width: 15px; height: 1px; flex: none; background: var(--rojo); }
.lote-xl__aviso { margin: 16px 0 0; font-size: 13.5px; color: var(--gris-2); }

/* =========================================================
   19. HORARIO, NORMAS, SERVICIOS, PASOS, FICHA
   ========================================================= */
.horario { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete-2); }
.horario li { display: grid; grid-template-columns: 124px minmax(0,1fr) auto; gap: 22px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--filete-2); }
.horario time { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 72; font-size: clamp(19px, 2vw, 26px); color: var(--rojo); }
.horario b { font-weight: 700; font-variation-settings: "wdth" 110; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .12em; text-transform: uppercase; }
.horario span { font-size: 14px; color: var(--gris); text-align: right; }

.normas { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rojo); counter-reset: norma; }
.normas li { counter-increment: norma; display: grid; grid-template-columns: 62px minmax(0, 22em) minmax(0, 1fr); gap: clamp(14px, 3vw, 40px); align-items: baseline; padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--filete-2); transition: background .3s; }
.normas li:hover { background: var(--negro-2); }
.normas li::before { content: counter(norma, decimal-leading-zero); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: clamp(17px, 1.7vw, 22px); color: var(--rojo); }
.normas h3 { margin: 0; font-weight: 700; font-variation-settings: "wdth" 108; font-size: clamp(16px, 1.6vw, 21px); letter-spacing: .1em; text-transform: uppercase; }
.normas p { margin: 0; color: var(--gris); font-size: 14.5px; }
@media (max-width: 860px) {
  .normas li { grid-template-columns: 42px minmax(0,1fr); gap: 6px 16px; }
  .normas p { grid-column: 2; }
}

.servicios { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.8vw, 24px); }
.servicio { position: relative; background: var(--negro-2); box-shadow: inset 0 0 0 1px var(--filete-2); padding: clamp(24px, 2.8vw, 38px); transition: transform .4s var(--sal), box-shadow .4s; }
.servicio:nth-child(2) { rotate: .5deg; }
.servicio:nth-child(3) { rotate: -.5deg; }
.servicio:hover { transform: translateY(-6px); rotate: 0deg; box-shadow: inset 0 0 0 1px var(--filete), 0 30px 54px -32px rgba(227,18,11,.7); }
.servicio__n { font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .32em; color: var(--rojo); }
.servicio h3 { position: relative; display: inline-block; margin: 14px 0 14px; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 72; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.012em; padding-bottom: .14em; }
.servicio h3 .trazo { left: 0; width: 100%; bottom: .02em; height: .16em; }
.servicio p { margin: 0; color: var(--gris); font-size: 14.5px; }
.servicio ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.servicio li { display: flex; gap: 10px; font-weight: 500; font-variation-settings: "wdth" 110; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); }
.servicio li::before { content: ""; margin-top: .62em; width: 12px; height: 1px; flex: none; background: var(--rojo); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(22px, 3vw, 46px); counter-reset: paso; }
.pasos li { counter-increment: paso; position: relative; padding-top: 26px; border-top: 2px solid var(--rojo); }
.pasos li::before { content: counter(paso, decimal-leading-zero); position: absolute; top: 0; left: 0; transform: translateY(-50%); background: var(--negro); padding-right: 12px; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: 17px; color: var(--rojo); }
.pasos h3 { margin: 0 0 10px; font-weight: 700; font-variation-settings: "wdth" 110; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: .1em; text-transform: uppercase; }
.pasos p { margin: 0; color: var(--gris); font-size: 14.5px; }

.ficha-nums { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--filete-2); border: 1px solid var(--filete-2); }
.ficha-nums > div { background: var(--negro-2); padding: clamp(20px, 2.4vw, 32px); }
.ficha-nums b { display: block; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 68; font-size: clamp(28px, 3.4vw, 46px); line-height: 1; }
.ficha-nums span { display: block; margin-top: 10px; font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); }

/* Tabla comparativa */
.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.tabla th, .tabla td { padding: 17px 16px; border-bottom: 1px solid var(--filete-2); text-align: left; }
.tabla thead th { font-weight: 500; font-variation-settings: "wdth" 112; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); border-bottom-color: var(--filete); }
.tabla tbody th { font-weight: 600; color: var(--gris); font-size: 14px; }
.tabla .si { color: var(--rojo); font-weight: 700; }
.tabla .no { color: var(--gris-2); }
.tabla tbody tr:hover { background: rgba(255,255,255,.025); }

/* =========================================================
   20. DUDAS
   ========================================================= */
.dudas { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
.dudas__lado { position: sticky; top: calc(var(--nav-h) + 30px); }
.dudas__ayuda { margin: 22px 0 20px; color: var(--gris); max-width: 24em; }
.dudas__lista { border-top: 1px solid var(--filete-2); }
.dudas details { border-bottom: 1px solid var(--filete-2); }
.dudas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 24px 0; font-weight: 700; font-variation-settings: "wdth" 106; font-size: clamp(16px, 1.4vw, 20px); color: var(--gris); transition: color .25s, padding-left .35s var(--sal); }
.dudas summary:hover { color: var(--blanco); padding-left: 10px; }
.dudas summary::-webkit-details-marker { display: none; }
.dudas summary::after { content: ""; width: 13px; height: 13px; flex: none; transition: transform .4s var(--sal); background: linear-gradient(var(--rojo), var(--rojo)) center/100% 2px no-repeat, linear-gradient(var(--rojo), var(--rojo)) center/2px 100% no-repeat; }
.dudas details[open] summary { color: var(--blanco); }
.dudas details[open] summary::after { transform: rotate(135deg); }
.dudas__cuerpo p { margin: 0 0 26px; max-width: 40em; color: var(--gris); }

/* =========================================================
   21. CIERRE Y GRACIAS
   ========================================================= */
.cierre { position: relative; overflow: hidden; padding-block: clamp(70px, 9vw, 130px); text-align: center; border-top: 1px solid var(--filete-2); }
.cierre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rojo); }
.cierre__caja { position: relative; }
.cierre .tit-mix { align-items: center; }
.cierre p { margin: 22px auto 30px; max-width: 32em; color: var(--gris); }
.cierre__botones { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

.gracias { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: calc(var(--nav-h) + 54px) var(--lado) 66px; text-align: center; }
.gracias::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rojo); }
.gracias__caja { position: relative; max-width: 42em; }
.gracias__logo { width: min(58vw, 270px); margin: 0 auto 30px; }
.gracias .flanco { margin-bottom: 18px; }
.gracias > * > p { color: var(--gris); }
.gracias__pasos { list-style: none; margin: 30px auto 34px; padding: 0; display: grid; gap: 1px; background: var(--filete-2); border: 1px solid var(--filete-2); text-align: left; }
.gracias__pasos li { display: flex; gap: 16px; align-items: baseline; padding: 17px 21px; background: var(--negro-2); }
.gracias__pasos b { flex: none; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: 15px; color: var(--rojo); }
.gracias__pasos span { font-size: 15px; color: var(--gris); }
.gracias__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* =========================================================
   22. RESPONSIVE DE LO NUEVO
   ========================================================= */
@media (max-width: 1100px) {
  .cabpag__fila { grid-template-columns: 1fr; }
  .servicios, .pasos { grid-template-columns: 1fr; }
  .ficha-nums { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lote-xl { grid-template-columns: 1fr; }
  .dudas { grid-template-columns: 1fr; }
  .dudas__lado { position: static; }
}
@media (max-width: 860px) {
  .normas { grid-template-columns: 1fr; }
  .horario li { grid-template-columns: 96px minmax(0,1fr); }
  .horario span { grid-column: 2; text-align: left; }
}
@media (max-width: 620px) {
  .form__fila { grid-template-columns: 1fr; }
  .ficha-nums { grid-template-columns: 1fr; }
  .cierre__botones .btn, .gracias__botones .btn { width: 100%; }
  .fichas { gap: 14px 26px; }
}

/* Dos columnas genérico */
.doble { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
@media (max-width: 960px) { .doble { grid-template-columns: 1fr; } }

/* =========================================================
   23. COMPOSICIÓN — romper la monotonía de sección
   Todas las secciones tenían la misma forma. Aquí viven
   los recursos que les dan ritmo distinto.
   ========================================================= */

/* A sangre: se sale del contenedor */
.sangre { width: 100vw; margin-left: 50%; translate: -50% 0; }

/* Tipografía enorme, hasta salirse por el borde */
.mega-txt {
  margin: 0; font-style: italic; font-weight: 900; font-variation-settings: "wdth" 62;
  text-transform: uppercase; line-height: .78; letter-spacing: -.035em;
  font-size: clamp(54px, 15.5vw, 230px);
}
.mega-txt .vacio { color: transparent; -webkit-text-stroke: 1.5px var(--blanco); }
.mega-txt .rojo { color: var(--rojo); }
.desborda { white-space: nowrap; }

/* ---------- Manifiesto ---------- */
.mani { position: relative; padding-block: clamp(70px, 9vw, 140px) clamp(50px, 6vw, 90px); overflow: hidden; }
.mani__txt { padding-left: var(--lado); }
.mani__pie {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30em);
  gap: 24px clamp(30px, 6vw, 90px); align-items: end;
  margin-top: clamp(28px, 4vw, 52px); padding-inline: var(--lado);
}
.mani__pie p { margin: 0; color: var(--gris); font-size: clamp(16px, 1.4vw, 19px); }
.mani__marca { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 76; text-transform: uppercase; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .04em; color: var(--blanco); }

/* ---------- Tarifario: la puerta de un club, no tres tarjetas ---------- */
.tarifa { border-top: 2px solid var(--rojo); }
.tarifa__fila {
  position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(0, 15em) auto 52px;
  gap: clamp(12px, 2.4vw, 40px); align-items: center;
  padding: clamp(22px, 3vw, 40px) var(--lado);
  border-bottom: 1px solid var(--filete-2); color: var(--blanco);
  transition: color .3s, padding-left .45s var(--sal);
}
.tarifa__fila::before {
  content: ""; position: absolute; inset: 0; background: var(--rojo); z-index: -1;
  transform: scaleY(0); transform-origin: bottom; transition: transform .42s var(--sal);
}
.tarifa__fila:hover { padding-left: calc(var(--lado) + 18px); }
.tarifa__fila:hover::before { transform: scaleY(1); }
.tarifa__n { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 70; font-size: clamp(15px, 1.5vw, 20px); color: var(--rojo); transition: color .3s; }
.tarifa__fila:hover .tarifa__n { color: var(--negro); }
.tarifa__nombre { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 66; text-transform: uppercase; font-size: clamp(28px, 4.6vw, 68px); line-height: .92; letter-spacing: -.022em; }
.tarifa__que { font-size: 14.5px; color: var(--gris); transition: color .3s; }
.tarifa__fila:hover .tarifa__que { color: rgba(0,0,0,.72); }
.tarifa__precio { font-style: italic; font-weight: 900; font-variation-settings: "wdth" 72; font-size: clamp(22px, 3vw, 44px); line-height: 1; white-space: nowrap; }
.tarifa__ir { justify-self: end; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; font-size: 15px; transition: transform .4s var(--sal); }
.tarifa__fila:hover .tarifa__ir { transform: translate(5px, -5px); }
.tarifa__fila:hover { color: var(--negro); }

/* ---------- Evento: el cartel se sale del contenedor ---------- */
.ficha-evento { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.ficha-evento__cartel { position: relative; margin: 0 0 0 calc(var(--lado) * -1); }
.ficha-evento__cartel img { width: 100%; display: block; }
.ficha-evento__cartel figcaption { position: absolute; right: 14px; bottom: 14px; background: var(--rojo); color: #fff; padding: 5px 11px; font-weight: 700; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.ficha-evento__datos { padding-right: var(--lado); }

/* ---------- Galería a sangre, sin huecos ---------- */
.tira { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tira__foto { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.tira__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sal), filter .5s; }
.tira__foto:hover img { transform: scale(1.05); filter: none; }
.tira__foto figcaption, .tira__pie { position: absolute; left: 12px; bottom: 12px; font-weight: 700; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--blanco); mix-blend-mode: difference; }

/* ---------- Tour a sangre ---------- */
.tour--sangre .parada { padding-inline: var(--lado); box-shadow: none; border-bottom: 1px solid var(--filete-2); background: transparent; }
.tour--sangre .parada::before { display: none; }
.tour--sangre { gap: 0; border-top: 2px solid var(--rojo); }
.tour--sangre .parada.es-next { background: var(--rojo); }

@media (max-width: 960px) {
  .tarifa__fila { grid-template-columns: 46px minmax(0,1fr) auto; gap: 6px 16px; }
  .tarifa__que { grid-column: 2 / -1; }
  .tarifa__ir { display: none; }
  .ficha-evento { grid-template-columns: 1fr; }
  .ficha-evento__cartel { margin-left: 0; max-width: 460px; }
  .ficha-evento__datos { padding-right: 0; }
  .tira { grid-template-columns: repeat(2, 1fr); }
  .mani__pie { grid-template-columns: 1fr; }
}