/* ==========================================================================
   UlanBatar | sitio principal (prototipo exploratorio)
   Identidad compartida con La Clave Primal y Delta Sesh: misma paleta,
   Cinzel + EB Garamond + Cormorant, ángulos rectos, oro sobre negro.
   ========================================================================== */

@font-face { font-family: Cinzel; src: url('assets/fonts/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('assets/fonts/eb-garamond.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: Cormorant; src: url('assets/fonts/cormorant.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --bg: #07050a;
  --bg-2: #0d0a0d;
  --card: #130d0e;
  --line: #3a2a1c;
  --line-2: #735132;
  --bone: #e9d9b8;
  --ash: #f3d8a5;
  --muted: #b39d7c;
  --gold: #d9a155;
  --fire: #ff7a2a;
  --serif: 'EB Garamond', Georgia, serif;
  --display: Cinzel, 'Trajan Pro', serif;
  --italic: Cormorant, 'EB Garamond', serif;
  --gutter: clamp(16px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--bone); font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
body.gated { overflow: hidden; }

/* ---------- Botones ---------- */
.button { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.5em; background: var(--gold); color: var(--bg); font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; transition: background .2s, transform .2s; }
.button:hover { background: var(--ash); }
.button:active { transform: scale(.98); }
.button.ghost { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line-2); }
.button.ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); background: transparent; }
.text-link { display: inline-flex; align-items: center; gap: .5em; color: var(--gold); font-family: var(--display); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; }
.text-link:hover { color: var(--ash); }

/* ======================= EL UMBRAL ======================= */
.gate { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(ellipse at 50% 55%, #1a110b 0%, var(--bg) 62%); transition: opacity 1.1s ease, visibility 1.1s; touch-action: none; user-select: none; -webkit-user-select: none; }
.gate[hidden] { display: none; }
.gate.is-leaving { opacity: 0; visibility: hidden; }
.gate-grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.gate-head { position: relative; z-index: 2; padding: clamp(18px, 4vh, 40px) 16px 0; text-align: center; }
.gate-head img { width: clamp(140px, 22vw, 220px); height: auto; margin: 0 auto; opacity: .92; }
.gate-kicker { margin-top: .9rem; font-family: var(--display); font-size: .68rem; letter-spacing: .38em; text-transform: uppercase; color: var(--muted); }
.gate-kicker strong { color: var(--gold); font-weight: 600; }
.stage { position: relative; z-index: 1; overflow: hidden; }
.slots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.slots .slot { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 4 6; transition: stroke .4s, fill .4s; }
.slots .slot.is-near { stroke: var(--gold); fill: rgba(217, 161, 85, .06); }
.slots .slot.is-filled { stroke: transparent; }
.slots .slot-num { font-family: var(--display); font-size: 13px; letter-spacing: .12em; fill: var(--line-2); text-anchor: middle; dominant-baseline: middle; transition: opacity .4s; }
.slots .slot-num.is-filled { opacity: 0; }
.slots .outer { fill: none; stroke: rgba(217, 161, 85, .12); stroke-width: 1; }

.piece { position: absolute; left: 0; top: 0; cursor: grab; touch-action: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1); will-change: transform; -webkit-tap-highlight-color: transparent; }
.piece svg { width: 100%; height: 100%; overflow: visible; }
.piece .tri { fill: rgba(217, 161, 85, .04); stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: fill .5s, stroke .5s; }
.piece { transform-origin: 50% 66.667%; }
.piece .num { position: absolute; left: 50%; top: 66.667%; font-family: var(--display); font-size: clamp(.7rem, 1.4vw, .95rem); letter-spacing: .12em; color: var(--gold); pointer-events: none; transition: color .5s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.piece.is-dragging .num { transition: color .5s; }
.piece.is-dragging { cursor: grabbing; transition: none; z-index: 5; filter: drop-shadow(0 0 14px rgba(217, 161, 85, .35)); }
.piece.is-placed { cursor: default; }
.piece.is-placed .tri { fill: rgba(217, 161, 85, .22); }
.piece.is-shake { animation: shake .4s; }
.piece:focus-visible { outline: none; }
.piece:focus-visible .tri { stroke: var(--ash); stroke-width: 2.4; }
@keyframes shake { 25% { translate: -6px 0; } 50% { translate: 6px 0; } 75% { translate: -3px 0; } }

.gate.is-solved .piece .tri { fill: var(--gold); stroke: var(--ash); }
.gate.is-solved .piece .num { color: var(--bg); }
.gate.is-solved .stage { animation: bloom 1.4s ease forwards; }
/* Entrar al triángulo: el umbral se agranda desde el hueco del medio, cada vez más rápido */
.gate.is-entering { transition: transform 2.1s cubic-bezier(.8, 0, .96, .55); will-change: transform; }
.gate.is-entering .gate-head, .gate.is-entering .gate-foot { opacity: 0; transition: opacity .35s ease; }
.gate.is-entering .piece .tri { fill: var(--ash); transition: fill .5s; }
@keyframes bloom { 0% { filter: none; } 40% { filter: drop-shadow(0 0 30px rgba(255, 122, 42, .6)) brightness(1.25); } 100% { filter: drop-shadow(0 0 60px rgba(217, 161, 85, .5)); } }

.gate-foot { position: relative; z-index: 2; display: grid; gap: .9rem; justify-items: center; padding: 0 16px clamp(18px, 4vh, 36px); text-align: center; }
.gate-hint { max-width: 34ch; font-family: var(--italic); font-style: italic; font-size: 1.2rem; color: var(--bone); line-height: 1.35; min-height: 4.05em; }
.gate-hint span { color: var(--muted); }
.gate-skip { font-family: var(--display); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); padding: .7em 1em; border-bottom: 1px solid var(--line); }
.gate-skip:hover { color: var(--gold); border-color: var(--gold); }

/* ======================= SITIO ======================= */
.site { opacity: 1; transition: opacity 1.2s ease .2s; }
body.gated .site { opacity: 0; }

.nav { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding: 14px var(--gutter); background: rgba(7, 5, 10, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(115, 81, 50, .35); }
.nav-logo img { width: 112px; height: auto; }
.nav nav { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
/* El espaciado de letras deja aire después de la última: se compensa para que cada palabra quede centrada */
.nav nav a { font-family: var(--display); font-size: .7rem; letter-spacing: .24em; margin-right: -.24em; line-height: 1; display: inline-flex; align-items: center; min-height: 44px; text-transform: uppercase; color: var(--muted); transition: color .2s; white-space: nowrap; }
.nav nav a:hover { color: var(--gold); }

.hero { position: relative; display: grid; justify-items: center; align-content: start; gap: 1.4rem; padding: clamp(48px, 7vw, 80px) var(--gutter) 0; text-align: center; overflow: hidden; isolation: isolate; }
/* La foto va debajo de los botones, a todo el ancho y encuadrada en las cuatro caras */
.hero-banda { width: calc(100% + 2 * var(--gutter)); margin: clamp(8px, 2vw, 24px) calc(-1 * var(--gutter)) 0; }
.hero-banda img { width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 30%; filter: saturate(.8) sepia(.15); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 78%, transparent 100%); }
.hero-glow { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 55% 50% at 50% 46%, rgba(7, 5, 10, .55), rgba(7, 5, 10, .2) 70%), radial-gradient(ellipse 60% 50% at 50% 46%, rgba(255, 122, 42, .14), transparent 70%), linear-gradient(180deg, rgba(7, 5, 10, .6) 0%, transparent 30%, transparent 60%, var(--bg) 100%); }
.hero-triada { position: absolute; z-index: -1; width: min(78vh, 92vw); left: 50%; top: 50%; translate: -50% -54%; color: var(--gold); opacity: .07; }
.hero-logo { width: min(620px, 84vw); height: auto; filter: drop-shadow(0 0 30px rgba(217, 161, 85, .25)); }
.hero-kicker { font-family: var(--display); font-size: .74rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); }
.hero-lede { max-width: 30ch; font-family: var(--italic); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.3; color: var(--ash); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: .6rem; }

.element-strip { display: flex; justify-content: space-between; gap: 1rem; padding: 26px var(--gutter); border-block: 1px solid var(--line); background: #0a080b; overflow-x: auto; scrollbar-width: none; }
.element-strip a { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; font-family: var(--display); font-size: .82rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); white-space: nowrap; transition: color .2s; }
.element-strip a:hover { color: var(--ash); }
.element-strip .is-music { color: var(--ash); }

/* Bloques */
.block { padding: clamp(80px, 12vw, 150px) var(--gutter); max-width: 1320px; margin: 0 auto; }
.block-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.eyebrow { display: inline-flex; align-items: center; gap: .7em; font-family: var(--display); font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.12; letter-spacing: .02em; color: var(--ash); text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 500; letter-spacing: .06em; color: var(--ash); }
.block-sub { margin-top: 1.2rem; font-size: 1.2rem; color: var(--muted); max-width: 62ch; }

/* La banda */
.banda-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: stretch; }
.banda-lado { position: relative; display: grid; gap: 1.6rem; min-width: 0; min-height: 320px; }
/* Las fotos en vivo rotan solas y ocupan exactamente el alto del texto de al lado */
.banda-slides { position: absolute; inset: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.banda-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 7s ease-out; }
.banda-slides img.is-on { opacity: 1; transform: scale(1); }
.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 24vw, 320px); gap: 12px; margin-top: clamp(48px, 7vw, 90px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-bottom: 12px; }
.galeria li { scroll-snap-align: start; }
.galeria img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; filter: saturate(.85); transition: filter .4s; }
.galeria img:hover { filter: none; }
.prose p + p { margin-top: 1.1em; }
.prose .lead { font-size: 1.32rem; color: var(--ash); line-height: 1.5; }
.prose p:not(.lead) { color: #d4c3a2; }
.quote { margin-top: 2.4rem; padding-left: 1.4rem; border-left: 1px solid var(--gold); }
.quote p { font-family: var(--italic); font-style: italic; font-size: 1.6rem; line-height: 1.25; color: var(--ash); margin: 0 !important; }
.quote cite { display: block; margin-top: .5rem; font-style: normal; font-size: .9rem; color: var(--muted); }
/* El origen */
.origen { max-width: 760px; margin-top: clamp(56px, 8vw, 100px); scroll-margin-top: 90px; }
.origen-titulo { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 1.2rem; }
.origen .prose a { color: var(--gold); border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .2s; }
.origen .prose a:hover { color: var(--ash); border-color: var(--gold); }
.origen .prose h4 { margin-top: 2rem; font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.origen .prose h4 + p { margin-top: .8em; }
.origen-mas { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.origen-mas + .origen-mas { margin-top: 0; }
.origen-mas:last-child { border-bottom: 1px solid var(--line); }
.origen-mas summary { display: flex; align-items: center; gap: .8em; min-height: 44px; padding: .4rem 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.origen-mas summary::-webkit-details-marker { display: none; }
.origen-mas summary::before { content: "+"; width: 1em; font-size: 1.1rem; line-height: 1; text-align: center; transition: transform .2s; }
.origen-mas[open] summary::before { transform: rotate(45deg); }
.origen-mas summary:hover { color: var(--ash); }
.origen-mas > .prose { padding: .4rem 0 1.6rem; }
.origen-dialogo { font-family: var(--italic); font-style: italic; font-size: 1.15rem; padding-left: 1rem; border-left: 1px solid var(--line-2); }
.integrantes-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; margin-top: clamp(56px, 8vw, 100px); margin-bottom: clamp(20px, 3vw, 32px); }
.integrantes-titulo { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.integrantes-head p { font-family: var(--italic); font-style: italic; font-size: 1.2rem; color: var(--muted); }
.integrantes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.integrante { display: flex; flex-direction: column; gap: .5rem; padding: clamp(18px, 2.2vw, 28px); background: var(--bg-2); scroll-margin-top: 90px; }
.integrante-retrato { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: .6rem; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(217, 161, 85, .12), transparent 65%), #0f0b0c; color: var(--gold); }
.integrante-retrato .ic { width: 42%; height: auto; stroke-width: .9; opacity: .8; }
.integrante-retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.integrante-elemento { display: inline-flex; align-items: center; gap: .6em; font-family: var(--display); font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.integrante h3 { font-size: 1.1rem; letter-spacing: .04em; }
.integrante-rol { color: var(--muted); font-size: 1rem; }
.integrante-bio { color: #d4c3a2; font-size: 1rem; margin-top: .4rem; }

/* Trilogía */
.actos { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.acto { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(24px, 3vw, 40px); background: var(--bg-2); }
.acto-mark { position: absolute; top: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); width: 34px; }
.acto-mark .t { fill: none; stroke: var(--line-2); stroke-width: .8; }
/* Orden del triángulo maestro, de izquierda a derecha: I abajo a la izquierda, II arriba, III abajo a la derecha */
.acto-1 .acto-mark .t-left, .acto-2 .acto-mark .t-left { fill: var(--gold); stroke: var(--gold); }
.acto-2 .acto-mark .t-top { fill: rgba(217, 161, 85, .35); stroke: var(--gold); }
.acto-3 .acto-mark .t-left, .acto-3 .acto-mark .t-top { fill: var(--gold); stroke: var(--gold); opacity: .35; }
.acto-3 .acto-mark .t-right { stroke: var(--gold); stroke-dasharray: 1 1.4; }
.acto-num { font-family: var(--display); font-size: .7rem; letter-spacing: .36em; text-transform: uppercase; color: var(--gold); }
.acto-cover { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); }
.acto h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.acto-meta { font-family: var(--display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.acto p:not([class]) { color: #d4c3a2; }
.acto-clave { font-family: var(--italic); font-style: italic; font-size: 1.15rem; color: var(--ash); border-left: 1px solid var(--line-2); padding-left: 1rem; }
.acto .button { align-self: flex-start; margin-top: auto; }
.streams { display: grid; gap: .7rem; }
.streams .show-escucha-titulo { font-size: 1rem; }
.streams a { padding: .45em .8em; font-family: var(--display); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .2s, box-shadow .2s; }
.streams a:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }

/* Tapas veladas: el archivo ya viene degradado; la nitidez no existe en el servidor */
.acto-velada { position: relative; display: grid; place-items: center; overflow: hidden; }
.acto-velada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: saturate(.85); }
.acto-velada span { position: relative; font-family: var(--display); font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--ash); padding: .8em 1.2em; background: rgba(7, 5, 10, .45); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Hito: Delta Sesh, el cierre del Acto I. Banda a todo el ancho, con el agua del Delta */
.hito { position: relative; border-block: 1px solid var(--line); background: radial-gradient(ellipse 70% 80% at 85% 50%, rgba(60, 120, 140, .14), transparent 70%), radial-gradient(ellipse 50% 60% at 15% 80%, rgba(255, 122, 42, .1), transparent 70%), #08070b; overflow: hidden; }
.hito-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 90px); align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(80px, 11vw, 140px) var(--gutter); }
.hito-texto { display: grid; gap: 1.1rem; justify-items: start; }
.hito-texto .eyebrow { margin: 0; }
.hito h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: .04em; }
.hito-fecha { font-family: var(--display); font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.hito-lede { color: #d4c3a2; max-width: 46ch; }
.hito-remate { font-family: var(--italic); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--ash); }
.hito-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }
.hito-apertura { background: radial-gradient(ellipse 70% 80% at 15% 50%, rgba(255, 122, 42, .13), transparent 70%), radial-gradient(ellipse 50% 60% at 85% 80%, rgba(217, 161, 85, .08), transparent 70%), #0a0708; border-top: 0; }
/* La apertura va espejada respecto del cierre: fotos a la izquierda, texto a la derecha */
.hito-apertura .hito-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.hito-apertura .hito-texto { order: 2; }
.hito-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.hito-fotos li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.hito-fotos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.hito-fotos li:nth-child(1) img { aspect-ratio: auto; }
@media (max-width: 1000px) {
  .hito-inner { grid-template-columns: 1fr; }
  .hito-apertura .hito-inner { grid-template-columns: 1fr; }
  .hito-apertura .hito-texto { order: 0; }
}

/* Shows: los próximos grandes, la memoria en grilla de flyers */
.agenda { display: grid; gap: clamp(28px, 4vw, 48px); }
.shows-proximos { display: grid; gap: clamp(20px, 3vw, 32px); }
.shows-proximos .show { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(18px, 2.4vw, 28px); background: var(--bg-2); border: 1px solid var(--line); }
.show-flyer { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #120c0c; border: 1px solid var(--line); }
.show-flyer img { width: 100%; height: 100%; object-fit: cover; }
.show-sin-flyer { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--line-2); font-family: var(--display); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; }
.show-sin-flyer svg { width: 64px; fill: currentColor; }
.show-datos { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.show-fecha { display: flex; align-items: baseline; gap: .8rem; font-family: var(--display); color: var(--gold); }
.show-dia { font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; color: var(--ash); }
.show-mes { font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; }
.show-lugar { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: .04em; color: var(--ash); }
.show-barrio { color: var(--muted); font-size: .7em; }
/* El nombre del lugar enlaza a su Instagram: se ve como el texto, con subrayado fino que se enciende al pasar */
.show-lugar a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color .2s, text-decoration-color .2s; }
.show-lugar a:hover, .show-lugar a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); }
.show-cuando { color: var(--muted); }
.show-cuenta { font-family: var(--display); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fire); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.show-escucha { display: grid; gap: .7rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.show-escucha-titulo { font-family: var(--italic); font-style: italic; font-size: 1.05rem; color: var(--muted); }
.show-escucha-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.show-escucha-lista a { display: grid; place-items: center; width: 46px; height: 46px; color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .2s, box-shadow .2s, background .2s; }
.show-escucha-lista a:hover, .show-escucha-lista a:focus-visible { color: var(--bg); background: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.show-escucha + .show-acciones { margin-top: 0; }
.show-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .8rem; }
.show-btn { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .7em 1.1em; font-family: var(--display); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s, color .2s, background .2s; }
.show-btn:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--ash); }
.show-btn.principal { background: var(--gold); color: var(--bg); box-shadow: none; }
.show-btn.principal:hover { background: var(--ash); color: var(--bg); }
.shows-proximos [data-solo="pasado"], .shows-memoria [data-solo="proximo"] { display: none; }
.shows-vacio { color: var(--muted); max-width: 46ch; padding: 1.4rem 0; border-block: 1px solid var(--line); }
.memoria-titulo { font-size: 1.15rem; margin-top: clamp(16px, 3vw, 32px); }
.shows-memoria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.shows-memoria .show { display: grid; gap: .7rem; align-content: start; }
.shows-memoria .show-flyer img { filter: saturate(.75); transition: filter .4s; }
.shows-memoria .show:hover .show-flyer img { filter: none; }
.shows-memoria .show-fecha { gap: .5rem; }
.shows-memoria .show-dia { font-size: 1.5rem; }
.shows-memoria .show-mes { font-size: .64rem; }
.shows-memoria .show-lugar { font-size: 1rem; }
.shows-memoria .show-cuando { display: none; }
.shows-memoria .show-acciones { padding-top: 0; }
.shows-memoria .show-btn { min-height: 40px; padding: .55em .9em; font-size: .6rem; }

.vivo-pie { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; margin-top: clamp(56px, 8vw, 100px); }
.vivo-llamado { display: grid; gap: 1rem; }
.vivo-llamado p { font-family: var(--italic); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--ash); line-height: 1.3; }
.video-card { position: relative; display: grid; align-content: end; gap: .3rem; aspect-ratio: 16 / 10; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); background: var(--bg); overflow: hidden; isolation: isolate; transition: border-color .3s; }
.video-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .4s, scale .6s; }
.video-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(7, 5, 10, .9)); }
.video-card:hover { border-color: var(--gold); }
.video-card:hover > img { opacity: .9; scale: 1.03; }
.video-play { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); background: rgba(7, 5, 10, .35); transition: background .3s, color .3s; }
.video-play svg { width: 26px; margin-left: 4px; }
.video-card:hover .video-play { background: var(--gold); color: var(--bg); }
.video-label { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ash); }
.video-sub { color: var(--bone); font-size: 1rem; }

/* Convocatoria */
.formatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.formatos article { padding: clamp(24px, 3vw, 40px); background: var(--bg-2); }
.f-time { font-family: var(--display); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.formatos h3 { font-size: 1.35rem; margin-bottom: .7rem; }
.formatos p:not(.f-time) { color: #d4c3a2; }
.convocatoria .contacto { margin-top: 1.6rem; }
.kit { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; margin-top: 2.4rem; }
.kit-title { font-family: var(--display); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.kit a { display: inline-flex; align-items: center; gap: .5em; color: var(--gold); border-bottom: 1px solid var(--line-2); padding-bottom: .15em; }
.kit a:hover { color: var(--ash); border-color: var(--gold); }
.inscripcion { position: relative; margin: clamp(60px, 9vw, 110px) auto 0; padding: clamp(70px, 12vw, 150px) 16px; text-align: center; overflow: hidden; isolation: isolate; border: 1px solid var(--line); }
.inscripcion-foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.inscripcion p { font-family: var(--italic); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: var(--ash); }
.inscripcion cite { display: block; margin-top: .6rem; font-style: normal; font-size: .95rem; color: var(--bone); }
.inscripcion p { text-shadow: 0 2px 20px rgba(0, 0, 0, .9); }

/* Tribu */
/* La tribu: dos fotos que se alternan solas, con el mismo fundido que el slideshow de la banda */
.tribu-foto { position: relative; height: clamp(240px, 34vw, 440px); margin-bottom: clamp(36px, 5vw, 60px); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.tribu-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease, transform 7s ease-out; }
.tribu-foto img.tribu-delta { object-position: 50% 62%; }
.tribu-foto img.is-on { opacity: 1; transform: scale(1); }
.testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.testimonios figure { padding-top: 1.4rem; border-top: 1px solid var(--gold); }
.testimonios blockquote { font-family: var(--italic); font-style: italic; font-size: 1.35rem; line-height: 1.35; color: var(--ash); }

/* Footer */
.footer { display: grid; justify-items: center; gap: 1.4rem; padding: 80px var(--gutter) 60px; border-top: 1px solid var(--line); text-align: center; background: #0a080b; }
.footer > img { width: 160px; height: auto; opacity: .85; }
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.8rem; }
.redes a { font-family: var(--display); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.redes a:hover { color: var(--ash); }
.apoyo, .legal { color: var(--muted); font-size: 1rem; }
.apoyo a, .legal a { color: var(--bone); border-bottom: 1px solid var(--line-2); }
/* «Cookies» se ve como un enlace más del pie y reabre el aviso de estadísticas */
.enlace-cookies { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; background: none; border: 0; padding: 0; }
.enlace-cookies:hover { color: var(--gold); }
/* El aviso toma la paleta del sitio */
:root { --ub-c-bg: #0d0a0d; --ub-c-fg: #e9d9b8; --ub-c-line: #5a4128; --ub-c-accent: #d9a155; }
.replay { display: inline-flex; align-items: center; gap: .6em; margin-top: 1rem; font-family: var(--display); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.replay:hover { color: var(--gold); }

/* Reveal al scrollear */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .9s ease, translate .9s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; translate: 0 0; }

/* El zorro: cada 7,77 minutos cruza la pantalla en 3D (zorro.js dirige, zorro3d.js dibuja) */
.zorro { position: fixed; inset: 0; z-index: 45; pointer-events: none; display: none; overflow: hidden; }
.zorro.en-escena { display: block; }
.zorro-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Mientras mira, la web se apaga: el texto de la página no compite con el del zorro */
.zorro-velo { position: absolute; inset: 0; opacity: 0; background: linear-gradient(0deg, rgba(4, 3, 6, .97) 0%, rgba(4, 3, 6, .9) 22%, transparent 42%), radial-gradient(ellipse 55% 60% at 50% 48%, rgba(7, 5, 10, .74), rgba(4, 3, 6, .93) 100%); }
.zorro-filtros { position: absolute; width: 0; height: 0; }
/* La frase: tinta que se asienta y después se disuelve en el papel */
.zorro-frase { position: absolute; left: 50%; bottom: max(4vh, env(safe-area-inset-bottom, 0px)); translate: -50% 0; width: min(92vw, 34ch); margin: 0; text-align: center; font-family: var(--italic); font-style: italic; font-size: clamp(1.35rem, 3.2vw, 2.3rem); line-height: 1.25; opacity: 0; filter: url(#zorro-tinta); color: #f6e3bd; text-shadow: 0 0 24px rgba(4, 3, 6, 1), 0 0 6px rgba(4, 3, 6, 1), 0 0 2px rgba(4, 3, 6, 1); }
.zorro-frase.suelta { bottom: auto; translate: none; max-width: 34ch; }
.zorro-frase.hacia-der { text-align: right; }
.zorro-frase.hacia-izq { text-align: left; }

/* El mapa de los escenarios: dibujado a mano por tools/mapa.py, sin teselas de terceros */
.mapa { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(56px, 8vw, 110px); }
.mapa-head { grid-column: 1 / -1; display: grid; gap: .6rem; max-width: 60ch; }
.mapa-titulo { font-family: var(--display); font-weight: 500; letter-spacing: .06em; color: var(--ash); font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.mapa-head p { color: var(--muted); }
.mapa-lienzo { position: relative; align-self: stretch; min-height: 420px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 50%, #140d08, var(--bg-2)); overflow: hidden; }
/* El mapa ocupa todo el alto de la lista de al lado; la geografía sigue más allá del recuadro */
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.mapa-agua { fill: #0c1820; stroke: none; }
.mapa-rios { fill: none; stroke: rgba(120, 170, 190, .22); stroke-width: 1; stroke-linejoin: round; }
.mapa-costa { fill: none; stroke: rgba(217, 161, 85, .55); stroke-width: 1.6; stroke-linejoin: round; }
.mapa-ciudad { fill: rgba(217, 161, 85, .035); stroke: rgba(217, 161, 85, .28); stroke-width: 1; stroke-dasharray: 3 5; }
.mapa-ref { font-family: var(--display); font-size: 15px; letter-spacing: .32em; text-transform: uppercase; text-anchor: middle; pointer-events: none; }
.mapa-ref-agua { fill: rgba(140, 185, 200, .45); font-style: italic; }
.mapa-ref-tierra { fill: rgba(217, 161, 85, .4); }
.mapa-osm { position: absolute; right: 8px; bottom: 6px; font-size: .68rem; color: var(--muted); opacity: .8; }
.mapa-osm a { color: inherit; text-decoration: underline; }
.mapa-ruta { fill: none; stroke: rgba(217, 161, 85, .75); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; animation: marcha 1.6s linear infinite; }
.mapa-lancha { fill: none; stroke: rgba(150, 195, 215, .85); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; pointer-events: none; animation: marcha 1.6s linear infinite; }
.mapa-auto { color: var(--gold); fill: currentColor; stroke: var(--bg); stroke-width: 2; pointer-events: none; filter: drop-shadow(0 0 6px currentColor); }
@keyframes marcha { to { stroke-dashoffset: -9; } }
.mapa-total { position: absolute; right: 16px; top: 22%; display: grid; justify-items: end; text-align: right; gap: 3px; pointer-events: none; max-width: 46%; }
.mapa-total-km { font-family: var(--display); color: var(--gold); font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: .06em; line-height: 1; }
.mapa-total-det { font-size: .74rem; color: var(--muted); letter-spacing: .04em; font-style: italic; }
.mapa-leyenda { position: absolute; left: 12px; bottom: 8px; display: flex; gap: 16px; font-size: .72rem; letter-spacing: .08em; color: var(--muted); pointer-events: none; }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.mapa-leyenda span::before { content: ""; width: 24px; border-top: 2px dotted rgba(217, 161, 85, .85); }
.mapa-leyenda .ley-lancha::before { border-top: 2px dashed rgba(150, 195, 215, .85); }
@media (prefers-reduced-motion: reduce) { .mapa-ruta, .mapa-lancha { animation: none; } .mapa-auto { display: none; } }
.mapa-rosa path { fill: var(--gold); opacity: .7; } .mapa-rosa .sur { opacity: .2; }
.mapa-rosa text { fill: var(--muted); font-family: var(--display); font-size: 14px; letter-spacing: .1em; text-anchor: middle; }
.mapa-hit { fill: transparent; }
/* El fuego de cada escenario: la llama (hecho) y las chispas (próximo) */
.mapa-fuego { transform: scale(.85); }
.mapa-chispas, .mapa-punto.is-proximo .mapa-llama { display: none; }
.mapa-punto.is-proximo .mapa-chispas { display: inline; }
.llama-ext { fill: var(--gold); stroke: var(--bg); stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: gota 1.8s ease-in-out infinite; }
.llama-int { fill: #f6d9a0; transform-box: fill-box; transform-origin: 50% 100%; animation: gota 1.3s ease-in-out infinite reverse; }
@keyframes gota { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 30% { transform: scale(.94, 1.08) skewX(-4deg); } 65% { transform: scale(1.04, .94) skewX(3deg); } }
.chispas-base { fill: var(--gold); stroke: var(--bg); stroke-width: 1.5; }
.chispa { fill: #f6d9a0; animation: chispa 2.2s ease-out infinite; }
.chispa:nth-of-type(3) { animation-delay: -.7s; }
.chispa:nth-of-type(4) { animation-delay: -1.4s; }
@keyframes chispa { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(3px, -16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .llama-ext, .llama-int, .chispa { animation: none; } .chispa { opacity: .8; } }
.mapa-punto .mapa-halo { fill: rgba(217, 161, 85, .12); transition: fill .3s; }
.mapa-punto.is-proximo .mapa-halo { animation: latido 2.4s ease-in-out infinite; }
.mapa-punto:hover .mapa-halo, .mapa-punto:focus-visible .mapa-halo { fill: rgba(217, 161, 85, .35); }
.mapa-num { fill: var(--ash); font-family: var(--display); font-size: 17px; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
@keyframes latido { 50% { fill: rgba(217, 161, 85, .32); } }
.mapa-lista { display: grid; gap: .55rem; counter-reset: none; }
.mapa-lista li { display: grid; grid-template-columns: 1.8em 1fr; column-gap: .6rem; align-items: baseline; }
.mapa-n { font-family: var(--display); color: var(--gold); text-align: right; }
.mapa-lista a { color: var(--bone); font-family: var(--display); letter-spacing: .04em; }
.mapa-lista a:hover { color: var(--gold); }
.mapa-detalle { grid-column: 2; color: var(--muted); font-style: italic; font-size: .92em; }
.mapa-fechas { grid-column: 2; color: var(--muted); font-size: .85em; letter-spacing: .06em; }
.mapa-lista li.is-proximo .mapa-fechas { color: var(--gold); }
.mapa .text-link { grid-column: 1 / -1; justify-self: start; }
.mapa { align-items: stretch; }

/* Objetivos táctiles: todo enlace suelto tiene al menos 44 px de alto para el dedo */
.text-link, .redes a, .replay, .mapa-lista a { display: inline-flex; align-items: center; min-height: 44px; }
.mapa-lista { gap: 0; }
.mapa-lista li { padding-bottom: .35rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  /* En pantallas angostas las secciones pasan a una segunda fila, deslizable */
  .nav { grid-template-columns: 1fr; justify-items: center; gap: .4rem; padding-block: 10px 4px; }
  .nav nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; padding-inline: 4px; }
  .nav nav::-webkit-scrollbar { display: none; }
  .banda-grid, .vivo-pie { grid-template-columns: 1fr; }
  .mapa { grid-template-columns: 1fr; }
  .mapa-lienzo { min-height: 0; aspect-ratio: 1000 / var(--mapa-alto, 1000); }
  .mapa-svg { position: absolute; }
  .banda-lado { position: static; min-height: 0; }
  .banda-slides { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 78vh; }
  .actos { grid-template-columns: 1fr; }
  .acto-2, .acto-3 { display: grid; grid-template-columns: 120px 1fr; gap: .6rem 1.4rem; align-content: start; }
  .acto-2 > *, .acto-3 > * { grid-column: 2; }
  .acto-2 .acto-cover, .acto-3 .acto-cover { grid-column: 1; grid-row: 1 / span 5; }
  .acto-2 .acto-mark, .acto-3 .acto-mark { grid-column: auto; }
  .formatos, .testimonios { grid-template-columns: 1fr; }
  .integrantes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 1.05rem; }
  .nav-logo img { width: 92px; }
  /* Los cinco elementos entran juntos: ícono arriba, nombre abajo */
  .element-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; padding-block: 14px; overflow: visible; }
  .element-strip a { flex-direction: column; justify-content: center; gap: .45rem; font-size: .58rem; letter-spacing: .16em; }
  .acto-2, .acto-3 { grid-template-columns: 1fr; }
  .acto-2 > *, .acto-3 > * { grid-column: 1; }
  .acto-2 .acto-cover, .acto-3 .acto-cover { grid-row: auto; aspect-ratio: 16 / 9; }
  .shows-proximos .show { grid-template-columns: 1fr; }
  /* El mapa se achica a lo ancho del teléfono: puntos y números más grandes para que se lean */
  .mapa-fuego { transform: scale(1.7); } .mapa-halo { r: 26px; } .mapa-num { font-size: 34px; stroke-width: 7px; }
  .shows-proximos .show-flyer { max-width: 320px; }
  .shows-proximos .show-flyer:has(.show-sin-flyer) { aspect-ratio: 3 / 1; max-width: none; }
  .shows-memoria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-banda img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; translate: none; }
}