/* Lo que comparten rheo.com.ar/tickets y rheo.com.ar/fotos, las dos páginas que reemplazan a los Linktree (Max, 27/10/2026).
   Arriba, la animación del cierre de la portada tal cual (recorrido/codex-escena.css + codex-cierre.js: el logo de neón,
   la luz que corre por sus tubos y "Buenos Aires" que se abre y se cierra). Si se cambia allá, se cambia acá.
   Todo lo que se mueve es transform u opacity, salvo el "Buenos Aires" que se abre (max-width, como en la portada:
   es una palabra chica). Con "reducir movimiento" o ahorro de datos (html.calmo) queda todo quieto. */
@font-face { font-family: 'Big Shoulders Display'; font-weight: 700 900; font-display: swap; src: url(/fuentes/big-shoulders-display.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 400 700; font-display: swap; src: url(/fuentes/instrument-sans.woff2) format('woff2'); }
:root {
  --bg: #050506; --ink: #F5F2EE; --muted: rgba(245, 242, 238, .66); --card: #0f0f12; --card-2: #17171b; --neon: #FF2E2E;
  --display: 'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
  --body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; overflow-x: clip; overscroll-behavior-y: none; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased;
  background: radial-gradient(110% 40% at 50% -4%, rgba(255, 46, 46, .18), transparent 64%) no-repeat, var(--bg);
  background-color: var(--bg); -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.brand-rheo { --event: #FF3B30; --event-rgb: 255, 59, 48; }
.brand-human { --event: #5B9BFF; --event-rgb: 91, 155, 255; }
.brand-bagfest { --event: #B6F24A; --event-rgb: 182, 242, 74; }
.brand-dorothy { --event: #FF7BD5; --event-rgb: 255, 123, 213; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 600px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 34px); }

/* ── La marca ─────────────────────────────────────────────────────────────────────────────────────────────── */
.marca { position: relative; display: grid; justify-items: center; padding: 30px 0 4px; }
.marca::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff307e 40%, #fff1fc 75%, transparent) no-repeat; background-size: 34vw 2px; background-position: -34vw 0; animation: cx-cometa 9s infinite; }
.cx-cierre-brand { position: relative; perspective: 900px; display: block; }
.logo-pie { width: min(64vw, 290px); height: auto; aspect-ratio: 1200 / 695; animation: cx-nace-luz 1.2s linear .15s both; }
.marca.chica .logo-pie { width: min(56vw, 250px); }
.cx-cierre-brillos { position: absolute; left: 0; top: 0; pointer-events: none; }
.cx-ciudad { display: flex; justify-content: center; gap: .23em; margin-top: -10px; font: italic clamp(22px, 6vw, 30px) Georgia, serif; color: #fff7f7; text-shadow: 0 0 1px #fff, 0 0 4px rgba(255, 120, 120, .95), 0 0 10px rgba(255, 45, 45, .8), 0 0 22px rgba(255, 20, 20, .4); }
.cx-ciudad-expande { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .8em .6em .8em .5em; margin: -.8em -.6em -.8em -.5em; -webkit-mask-image: linear-gradient(90deg,#000 calc(100% - .6em),transparent); mask-image: linear-gradient(90deg,#000 calc(100% - .6em),transparent);  max-width: 0; opacity: 0; transform: rotateY(-65deg); animation: cx-ciudad-abre 11s ease-in-out -1.4s infinite; }
.marca.quieto .cx-ciudad-expande, .marca.quieto::before { animation-play-state: paused; }
@keyframes cx-ciudad-abre { 0%, 15%, 100% { max-width: 0; opacity: 0; transform: rotateY(-65deg); } 24% { opacity: .4; } 26% { opacity: .95; } 27.5% { opacity: .5; } 30%, 82% { max-width: 5.4em; opacity: 1; transform: rotateY(0); } }
/* La tirita cruza la pantalla de borde a borde (Max, 29/10: "no sale desde el costado, sale del medio"), y NUNCA SE SALE DEL
   ANCHO (video de Max, 29/10: con un 34vw corrido con transform, el navegador de Instagram dejaba arrastrar la página de costado,
   porque overflow-x: clip en el html no lo frena en iOS). Es una franja de 100vw quieta y lo que corre es su fondo. */
@keyframes cx-cometa { 0% { background-position: -34vw 0; animation-timing-function: cubic-bezier(.45, .05, .55, .95); } 26%, 100% { background-position: 100vw 0; } }
@keyframes cx-nace-luz { 0% { opacity: .25; } 10% { opacity: 1; } 16% { opacity: .4; } 24% { opacity: 1; } 33% { opacity: .7; } 42%, 100% { opacity: 1; } }
.handle { margin: 12px 0 0; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
/* @rheoba lleva al Instagram (Max, 29/10): el dedo tiene que poder tocarlo bien (44 px de alto), sin que se vea más grande. */
.handle a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: -12px 0 -10px; color: inherit; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .handle a:hover { color: var(--ink); } }

/* Títulos de sección: grandes y en la tipografía de la marca, no etiquetitas. */
.tit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 4px 12px; }
.tit h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tit a, .tit span { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.tit a { text-decoration: underline; text-underline-offset: 4px; }

/* Entrada de las piezas: suben y aparecen, de a una. */
.sube { opacity: 0; transform: translateY(18px); animation: sube .65s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes sube { to { opacity: 1; transform: none; } }

/* Redes y pie. */
.redes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.redes a {
  display: grid; justify-items: center; gap: 5px; padding: 11px 6px 9px; border-radius: 14px; font-size: 11.5px; color: var(--muted);
  background: var(--card); transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s;
}
.redes a:active { transform: scale(.96); }
@media (hover: hover) { .redes a:hover { transform: translateY(-2px); background-color: var(--card-2); } }
.redes svg { width: 19px; height: 19px; fill: var(--ink); }
.pie { margin-top: 30px; text-align: center; font-size: 13.5px; color: var(--muted); }
.pie a { text-decoration: underline; text-underline-offset: 3px; }
.vacio { padding: 20px; border-radius: 18px; background: var(--card); color: var(--muted); text-align: center; font-size: 15px; }
.vacio a { color: var(--ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .logo-pie, .marca::before, .sube { animation: none !important; }
  .sube { opacity: 1; transform: none; }
  .cx-ciudad-expande { animation: none; max-width: 5.4em; opacity: 1; transform: none; }
}
.calmo .marca::before, .calmo .sube { animation: none !important; }
.calmo .sube { opacity: 1; transform: none; }