/* =========================================================================
   HOFT v4 — estilos
   Marca: negro #111 / blanco roto #f9f9f9 de base. El menú (con el claim),
   el submenú y los pop-ups van en blanco roto con texto negro; la foto y el pie,
   sobre negro; idiomas y redes, en recuadros blanco roto. Rosa neón como acento
   general; las secciones del menú se iluminan en verde sobre un recuadro negro y
   el submenú en verde sobre una píldora negra.
   El texto sobre neón va siempre en negro.
   Host Grotesk SemiBold (mayúsculas) · Host Grotesk Light · DM Mono Medium.
   ========================================================================= */

@font-face { font-family: 'Host Grotesk'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('../fonts/host-grotesk-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Host Grotesk'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/host-grotesk-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Host Grotesk'; font-weight: 600; font-style: italic; font-display: swap;
  src: url('../fonts/host-grotesk-600-italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/DMMono-Medium.ttf') format('truetype'); }

:root {
  --negro: #111111;
  --blanco: #f9f9f9;
  --acento: #ff00d3;
  --rosa: #ff00d3;
  --verde: #00ff00;
  --amarillo: #ffff00;
  --sobre-neon: #111111;             /* texto sobre rosa, verde o amarillo */
  --tenue: color-mix(in srgb, var(--blanco) 58%, var(--negro));
  --linea: color-mix(in srgb, var(--blanco) 16%, var(--negro));
  --hueco: color-mix(in srgb, var(--blanco) 7%, var(--negro));

  --f-titulo: 'Host Grotesk', system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, monospace;

  --margen: clamp(16px, 2.2vw, 32px);
  --esquina: 80px;                   /* hueco a la derecha para los recuadros de las esquinas */
  --menu-ancho: clamp(300px, 25vw, 420px);   /* una cuarta parte de la pantalla (foto del 6 oct) */
  --r: 10px;                         /* esquinas redondeadas del menú (24 px de la maqueta) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-inversa: cubic-bezier(.8, 0, .8, .2);   /* la misma curva recorrida al revés */
}

/* Menú, submenú y pop-ups en claro: dentro de ellos se intercambian el negro y
   el blanco roto (fondos, textos, filetes y botones). Los neones no cambian. */
.menu, .panel, .modal {
  --negro: #f9f9f9;
  --blanco: #111111;
  --tenue: color-mix(in srgb, var(--blanco) 58%, var(--negro));
  --linea: color-mix(in srgb, var(--blanco) 16%, var(--negro));
  --hueco: color-mix(in srgb, var(--blanco) 7%, var(--negro));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; overflow: hidden;
  background: var(--negro); color: var(--blanco);
  font: 300 16px/1.55 var(--f-titulo);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font: 500 12px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.caps { font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
::selection { background: var(--acento); color: var(--sobre-neon); }

/* ------------------------------------------------------------------ fondo */
.fondo { position: fixed; inset: 0; z-index: 0; }
.fondo img { width: 100%; height: 100%; object-fit: cover; }
.fondo::after {                     /* solo para que el pie se lea */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(17 17 17 / .7), rgb(17 17 17 / 0) 45%);
}

/* -------------------------------------------------------------------- pie */
.pie {
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center;
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
}
.pie ul { display: flex; flex-wrap: wrap; gap: 4px 0; }
.pie li + li::before { content: '–'; margin: 0 .6em; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--acento); }
.pie--portada { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; padding: 14px var(--esquina) 14px var(--margen); }

/* ---------------------------------------------------------------- esquinas
   Idiomas arriba a la derecha y redes abajo a la derecha: recuadros blanco roto
   con el texto en columna y una barra entre cada uno, centrada con las letras.
   El de arriba empieza a la altura del menú. Quedan por debajo del menú y de los
   pop-ups (que en escritorio les dejan libre el hueco --esquina). */
.esquina {
  position: fixed; z-index: 10; right: 10px; width: 54px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--blanco); color: var(--negro); border-radius: 8px;
  font: 500 12px/15px var(--f-mono); text-transform: uppercase;
}
.esquina--arriba { top: 32px; }
.esquina--abajo { bottom: 10px; }
.esquina li { display: flex; flex-direction: column; align-items: center; }
.esquina li + li::before { content: '/'; content: '/' / ''; }
.esquina a { display: block; padding: 0 8px; text-decoration: none; }
.esquina a:hover { color: var(--acento); }
.esquina a[aria-current='true'] { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ botón */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--blanco);
  background: transparent; color: var(--blanco); text-decoration: none; cursor: pointer;
  font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .02em;
  transition: background .2s, color .2s, border-color .2s;
}
.boton:hover { background: var(--blanco); color: var(--negro); }
.boton--acento { background: var(--acento); border-color: var(--acento); color: var(--sobre-neon); }
.boton--acento:hover { background: var(--blanco); border-color: var(--blanco); }
.boton--blanco { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.boton--blanco:hover { background: var(--negro); color: var(--blanco); }
.menu .boton[aria-current='page'] { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.boton--ancho { width: 100%; }
.boton--peq { min-height: 34px; padding: 0 12px; font-size: 12px; }
.boton[aria-disabled='true'] { opacity: .45; pointer-events: none; }
.boton svg { width: 16px; height: 16px; }

.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; text-transform: uppercase; font-size: 14px; }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.enlace-flecha:hover { color: var(--acento); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------- menú
   Disposición calcada de la maqueta del usuario (6 oct 2026, 928 px de ancho):
   --u es un píxel de esa maqueta, en unidades del ancho del menú (cqw), así que
   todo guarda la misma proporción a cualquier ancho. */
.menu {
  position: fixed; z-index: 30; left: 0; top: 0;
  width: min(var(--menu-ancho), calc(100vw - 32px));
  max-height: calc(100svh - 32px); display: flex; flex-direction: column;
  background: var(--negro); color: var(--blanco); border-radius: var(--r); overflow: hidden;
  container-type: inline-size;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.menu > * { --u: calc(100cqw / 928); }
.menu:not(.menu--listo) { visibility: hidden; }
.menu--arrastrando, .menu--arrastrando * { cursor: grabbing; }
.menu a, .menu button { cursor: pointer; }
/* Cabecera: logo y claim centrados */
.menu__cabeza { position: relative; display: grid; justify-items: center; padding: 0 calc(42 * var(--u)); text-align: center; }
/* El SVG del logo trae aire alrededor del dibujo: de ahí los márgenes negativos */
.menu__logo img { width: calc(208 * var(--u)); height: auto; margin-top: calc(-7 * var(--u)); -webkit-user-drag: none; }
.menu__claim { margin-top: calc(-38 * var(--u)); font-weight: 300; text-transform: uppercase;
  font-size: calc(60 * var(--u)); line-height: calc(78 * var(--u)); letter-spacing: -.005em; }
/* El −/+ solo existe en la barra anclada de móvil (ver responsive) */
.menu__plegar { display: none; width: 36px; height: 36px; place-items: center; background: none; border: 0; padding: 0; }
.menu__plegar svg { width: 18px; height: 18px; }
.menu__cuerpo { overflow-y: auto; padding: calc(22 * var(--u)) calc(42 * var(--u)) calc(52 * var(--u)); }
.menu--plegado .menu__cuerpo { display: none; }

/* Secciones: filas entre filetes negros, flecha delante y número a la derecha.
   Al pasar el cursor, al pulsar o con su pop-up abierto, letras en verde neón sobre
   un recuadro negro (las cuatro iguales). El número no cambia nunca; volver a pulsar
   la abierta la cierra. (Aquí --blanco es el negro.) */
.menu__principal { border-top: max(1px, calc(2.5 * var(--u))) solid var(--blanco); }
.menu__principal li { border-bottom: max(1px, calc(2.5 * var(--u))) solid var(--blanco); }
.menu__principal a {
  display: flex; align-items: baseline; height: calc(115.5 * var(--u)); padding: calc(23 * var(--u)) 0 0 calc(9 * var(--u));
  text-decoration: none; transition: color .2s, background-color .2s;
}
.menu__principal .flecha { display: inline-block; transform: rotate(90deg); font-weight: 300;
  font-size: calc(75 * var(--u)); line-height: 1; margin: 0 calc(21 * var(--u)) 0 calc(-2 * var(--u)); }
.menu__nombre { font-weight: 600; text-transform: uppercase; font-size: calc(72 * var(--u)); line-height: 1; }
.menu__num { margin-left: auto; font-weight: 300; font-size: calc(39 * var(--u)); line-height: 1; }
.menu__principal a:hover, .menu__principal a:focus-visible, .menu__principal a:active,
.menu__principal a[aria-current='page'] { color: var(--verde); background: var(--blanco); }

.menu__frase { margin-top: calc(39 * var(--u)); padding: 0 calc(57 * var(--u)) 0 calc(10 * var(--u)); font-weight: 300;
  font-size: calc(36 * var(--u)); line-height: calc(44 * var(--u)); }

/* Submenú: dos columnas con número volado, en negro. Al pasar el cursor, al pulsar
   o abierto: letras en verde sobre una píldora negra (el margen negativo compensa
   el relleno, así la píldora no mueve nada). */
.menu__secundario { display: grid; grid-auto-flow: column; grid-template-rows: auto auto;
  grid-template-columns: calc(456 * var(--u)) 1fr; margin-top: calc(56 * var(--u)); padding-left: calc(74 * var(--u)); }
.menu__secundario a { display: inline-flex; align-items: flex-start; gap: calc(14 * var(--u)); text-decoration: none;
  font-weight: 600; text-transform: uppercase; font-size: calc(31 * var(--u)); line-height: calc(37 * var(--u));
  margin: calc(5 * var(--u)) calc(-14 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 999px;
  transition: color .2s, background-color .2s; }
.menu__secundario a:hover, .menu__secundario a:focus-visible, .menu__secundario a:active,
.menu__secundario a[aria-current='page'] { color: var(--verde); background: var(--blanco); }
.menu__secundario sup { font-weight: 300; font-size: calc(14 * var(--u)); line-height: 1; margin-top: calc(9 * var(--u)); vertical-align: baseline; }

/* Siluetas pequeñas en las cuatro esquinas del menú: bailan al moverlo
   (assets/js/siluetas.js) */
.menu__siluetas span { position: absolute; width: calc(50 * var(--u)); aspect-ratio: 1; pointer-events: none; }
.menu__siluetas span:nth-child(1) { top: calc(18 * var(--u)); left: calc(16 * var(--u)); }
.menu__siluetas span:nth-child(2) { top: calc(18 * var(--u)); right: calc(16 * var(--u)); }
.menu__siluetas span:nth-child(3) { bottom: calc(18 * var(--u)); left: calc(16 * var(--u)); }
.menu__siluetas span:nth-child(4) { bottom: calc(18 * var(--u)); right: calc(16 * var(--u)); }

/* ------------------------------------------------------------------ panel */
.panel {
  --barra: 36px;
  /* Casi a pantalla completa y por encima del menú (maqueta del 6 oct 2026); a la
     derecha deja libres los recuadros de idiomas y redes */
  position: fixed; z-index: 35;
  top: var(--margen); bottom: var(--margen); left: 20px; right: var(--esquina);
  display: flex; flex-direction: column;
  background: var(--negro); color: var(--blanco); border-radius: var(--r); overflow: hidden;
}
.panel[hidden] { display: none; }
/* Como una ventana: primero aparece la barra y después la página se despliega
   hacia abajo desde ella, como una persiana. Al cerrar, el mismo recorrido al revés. */
.panel.entra { animation: abrir-ventana .65s linear both; }
.panel.sale { animation: cerrar-ventana .5s linear forwards; pointer-events: none; }
@keyframes abrir-ventana {
  0%   { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 calc(100% - var(--barra)) 0 round var(--r)); animation-timing-function: ease-out; }
  30%  { opacity: 1; transform: none; clip-path: inset(0 0 calc(100% - var(--barra)) 0 round var(--r)); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--r)); }
}
/* Abierta desde el menú: el menú ya se ha convertido en la barra (capa .fantasma,
   ver app.js), así que solo falta desplegar la página; al cerrar, plegarla. */
.panel.esperando { visibility: hidden; }
.panel.entra-barra { animation: desplegar-desde-barra .5s cubic-bezier(.2, .8, .2, 1) both; }
.panel.sale-barra { animation: plegar-hacia-barra .4s cubic-bezier(.8, 0, .8, .2) forwards; pointer-events: none; }
@keyframes desplegar-desde-barra { from { clip-path: inset(0 0 calc(100% - var(--barra)) 0 round var(--r)); } to { clip-path: inset(0 0 0 0 round var(--r)); } }
@keyframes plegar-hacia-barra { from { clip-path: inset(0 0 0 0 round var(--r)); } to { clip-path: inset(0 0 calc(100% - var(--barra)) 0 round var(--r)); } }
/* TRAXX sube desde abajo (app.js, «subida»): el panel se desplaza con translate y,
   mientras sube, su contenido se compensa para no moverse dentro; el hueco de abajo
   da el recorrido extra de scroll que ocupa la subida. */
.panel--sube .panel__scroll { padding-bottom: var(--inicio, 0px); }
.panel--sube .panel__scroll > * { translate: 0 var(--compensa, 0px); }
.panel.sale-sube { pointer-events: none; }
/* PARTIES crece desde su botón como una carpeta del Mac (app.js, «zoom») */
.panel--zoom { transform-origin: 0 0; }
.panel.sale-zoom { pointer-events: none; }
/* CONTACTO baja como una persiana bajo el menú y se va a su sitio (app.js, «persiana»).
   Se arrastra por la barra. */
.panel--persiana .panel__cabeza { cursor: grab; touch-action: none; user-select: none; }
.panel--arrastrando, .panel--arrastrando .panel__cabeza { cursor: grabbing; }
.panel.sale-persiana { pointer-events: none; }
.fantasma { position: fixed; z-index: 40; background: #f9f9f9; border-radius: var(--r); pointer-events: none; }
.menu { transition: opacity .2s; }
.menu--en-barra { opacity: 0; pointer-events: none; }
@keyframes cerrar-ventana {
  0%   { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--r)); animation-timing-function: cubic-bezier(.8, 0, .8, .2); }
  65%  { opacity: 1; transform: none; clip-path: inset(0 0 calc(100% - var(--barra)) 0 round var(--r)); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 calc(100% - var(--barra)) 0 round var(--r)); }
}

/* Barra de ventana (maqueta del 6 oct 2026): puntos rosa, amarillo y verde (solo
   decoración), título en minúsculas y la X a la derecha */
.panel__cabeza {
  position: relative; flex: none; display: flex; align-items: center; gap: 15px; height: var(--barra);
  padding: 0 6px 0 20px;
}
.panel__puntos { display: flex; gap: 5px; }
.panel__puntos i { width: 11px; height: 11px; border-radius: 50%; background: var(--rosa); }
.panel__puntos i:nth-child(2) { background: var(--amarillo); }
.panel__puntos i:nth-child(3) { background: var(--verde); }
.panel__centro { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.panel__centro:empty { display: none; }
.panel__logo { height: 16px; width: auto; }
.panel__titulo { font-weight: 300; font-size: 15px; line-height: 1; outline: 0; }
.panel__cabeza .panel__cerrar { width: 30px; height: 30px; }
.panel__cabeza .panel__cerrar svg { width: 15px; height: 15px; }
.panel__cerrar, .modal__cerrar { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.panel__cerrar svg, .modal__cerrar svg { width: 22px; height: 22px; }
.panel__cerrar:hover, .modal__cerrar:hover { color: var(--acento); }
.panel__atras { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 40px) 0; background: none; border: 0; padding: 0; cursor: pointer; font: 500 12px var(--f-mono); text-transform: uppercase; }
.panel__atras[hidden] { display: none; }
.panel__atras svg { width: 18px; height: 18px; }
.panel__atras:hover { color: var(--acento); }
.panel__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.panel__contenido { flex: 1; padding: clamp(20px, 3vw, 40px); }
.panel__scroll > .pie { padding: 18px clamp(18px, 3vw, 40px); border-top: 1px solid var(--linea); color: var(--tenue); }

/* ------------------------------------------------------------------ modal */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__velo { position: absolute; inset: 0; background: rgb(249 249 249 / .78); }
.modal__caja {
  position: relative; width: min(760px, 100%); max-height: calc(100svh - 32px); overflow-y: auto;
  background: var(--negro); color: var(--blanco); border: 1px solid var(--linea); animation: aparecer .3s var(--ease);
}
.modal__cerrar { position: absolute; top: 8px; right: 8px; z-index: 1; }
.modal__contenido { padding: clamp(20px, 4vw, 40px); }
.modal--estrecho .modal__caja { width: min(440px, 100%); }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } }

/* ---------------------------------------------------------- piezas comunes */
.cabecera-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: clamp(20px, 3vw, 36px); }
.claim-seccion { font-weight: 600; text-transform: uppercase; font-size: clamp(28px, 5vw, 64px); line-height: .92; letter-spacing: -.03em; }
.rotulo { font: 500 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); margin-bottom: 14px; }
.bloque + .bloque, .claim-seccion + .bloque { margin-top: clamp(32px, 5vw, 56px); }
.texto { max-width: 68ch; display: grid; gap: 1em; font-size: 17px; }
.texto h2 { font-weight: 600; text-transform: uppercase; font-size: 20px; line-height: 1.15; margin-top: .8em; }

/* Hueco para contenido que falta: se ve que falta, sin inventarlo */
.hueco {
  position: relative; display: grid; place-items: center; background: var(--hueco); overflow: hidden;
  aspect-ratio: var(--ar, 1); color: var(--tenue);
}
.hueco img.silueta { width: 46%; opacity: .16; }
.hueco .mono { position: absolute; left: 10px; bottom: 8px; font-size: 10px; }
.pendiente { display: inline-block; font: 500 10px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 6px; border: 1px dashed var(--tenue); color: var(--tenue); }
.foto { width: 100%; aspect-ratio: var(--ar, 1); object-fit: cover; background: var(--hueco); }

.rejilla { display: grid; gap: clamp(10px, 1.6vw, 20px); grid-template-columns: repeat(auto-fill, minmax(var(--min, 180px), 1fr)); }
.tarjeta { display: block; text-decoration: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; width: 100%; }
.tarjeta .foto, .tarjeta .hueco { transition: transform .5s var(--ease); }
.tarjeta__marco { overflow: hidden; }
.tarjeta:hover .foto, .tarjeta:hover .hueco { transform: scale(1.03); }
.tarjeta__nombre { font-weight: 600; text-transform: uppercase; font-size: 18px; line-height: 1.05; margin-top: 10px; }
.tarjeta:hover .tarjeta__nombre { color: var(--acento); }
.tarjeta__dato { font: 500 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); margin-top: 4px; }

/* Carrusel: scroll horizontal con imán y flechas */

/* ---------------------------------------------------------------- booking */
/* Lista de artistas (maqueta del 6 oct 2026): nombres centrados en filas de lado
   a lado del pop-up, entre filetes grises; el de arriba, más corto. Con el cursor,
   la fila en verde y la foto del artista a la derecha, centrada en la fila. */
.artistas { --filete-lista: color-mix(in srgb, var(--blanco) 45%, var(--negro));
  position: relative; margin: calc(-1 * clamp(20px, 3vw, 40px)) calc(-1 * clamp(20px, 3vw, 40px)) 0; padding-top: 28px; }
.artistas::before { content: ''; position: absolute; top: 28px; left: 12px; right: 12px; border-top: 1px solid var(--filete-lista); }
.artista { border-bottom: 1px solid var(--filete-lista); }
.artista__nombre {
  display: flex; justify-content: center; align-items: baseline; gap: 10px; padding-top: clamp(16px, 1.6vw, 24px);
  height: clamp(64px, 6.75vw, 97px); text-decoration: none;
  font-weight: 600; font-size: clamp(30px, 3.8vw, 55px); line-height: 1; letter-spacing: -.01em;
}
.artista__nombre small { display: none; font-weight: 300; font-size: 15px; letter-spacing: 0; }
.artista--abierto .artista__nombre small { display: inline; }
.artista:not(.artista--abierto) .artista__nombre:hover, .artista__nombre:focus-visible, .artista__nombre:active { background: var(--verde); color: var(--sobre-neon); }

/* Ficha desplegada debajo del nombre: foto, BIOGRAFÍA, texto y botones en píldora */
.artista__detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.artista--abierto .artista__detalle { grid-template-rows: 1fr; }
.artista__detalle > div { overflow: hidden; }
.artista__ficha { display: grid; grid-template-columns: minmax(0, 583fr) 84px minmax(0, 572fr); column-gap: 26px;
  padding: 6px 50px 37px 46px; }
.artista__imagen .foto, .artista__imagen .hueco { width: 100%; }
.artista__rotulo { font-weight: 600; text-transform: uppercase; font-size: 14px; line-height: 1.85; }
.artista__texto { display: flex; flex-direction: column; gap: 24px; }
/* Como en la maqueta: cada palabra con mayúscula inicial */
.artista__bio { display: grid; font-size: 15px; line-height: 26px; text-transform: capitalize; }
.artista__botones { margin-top: auto; display: flex; flex-wrap: wrap; gap: 18px; padding-bottom: 16px; }
.pildora { display: inline-flex; align-items: center; height: 27px; padding: 0 8px; border: 1px solid var(--blanco); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase; transition: background-color .2s, color .2s; }
.pildora:hover { background: var(--blanco); color: var(--verde); }
.artistas__foto {
  position: absolute; right: clamp(24px, 6vw, 88px); width: clamp(200px, 21vw, 302px); translate: 0 -50%;
  opacity: 0; pointer-events: none; transition: opacity .2s, top .25s var(--ease);
}
.artistas__foto--ve { opacity: 1; }
.artistas__foto .foto, .artistas__foto .hueco { width: 100%; }
.ficha { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.ficha__foto { position: sticky; top: 0; }
.ficha__nombre { font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 7vw, 96px); line-height: .88; letter-spacing: -.03em; }
.ficha__ciudades { margin: 10px 0 24px; }
.ficha .boton { margin-top: 28px; }
.ficha .bloque { margin-top: clamp(32px, 4vw, 48px); }
.sesion iframe { width: 100%; height: 166px; border: 0; }
.ep .tarjeta__nombre { font-size: 15px; }
.ep .boton { margin-top: 10px; }

/* ------------------------------------------------------------------ traxx */
/* Rejilla (maqueta del 6 oct 2026): un filete bajo la barra, como en Booking, y
   cuatro columnas con el título encima de cada portada */
.discos { position: relative; margin: calc(-1 * clamp(20px, 3vw, 40px)) calc(-1 * clamp(20px, 3vw, 40px)) 0;
  padding: 80px 14px 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 15px; }
.discos::before { content: ''; position: absolute; top: 38px; left: 14px; right: 14px;
  border-top: 1px solid color-mix(in srgb, var(--blanco) 45%, var(--negro)); }
.disco { display: block; text-decoration: none; }
.disco__titulo { display: block; margin: 0 0 9px 4px; font-weight: 600; font-size: clamp(16px, 1.45vw, 24px); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disco .foto, .disco .hueco { width: 100%; transition: transform .5s var(--ease); }
.disco .tarjeta__marco { display: block; }
.disco:hover .foto, .disco:hover .hueco { transform: scale(1.03); }
/* Lanzamiento desplegado (maqueta del 6 oct 2026): ocupa la fila entera, la portada
   (más grande) a la izquierda y la ficha a la derecha */
.disco__detalle { display: none; }
.disco-item--abierto { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  column-gap: clamp(20px, 2.6vw, 44px); padding-bottom: clamp(24px, 3vw, 50px); }
.disco-item--abierto .disco__detalle { display: flex; flex-direction: column; align-items: flex-start;
  padding-top: calc(clamp(16px, 1.45vw, 24px) * 1.2 + 9px + 8px); font-size: clamp(14px, 1.25vw, 21px); line-height: 1.3;
  animation: detalle-entra .45s var(--ease) both; }
.disco-item--abierto .disco:hover .foto, .disco-item--abierto .disco:hover .hueco { transform: none; }
@keyframes detalle-entra { from { opacity: 0; transform: translateY(10px); } }
.disco__rotulo { font-weight: 600; text-transform: uppercase; }
.disco__temas { margin-top: .6em; font-size: 1.1em; }
.disco__texto { margin-top: 1.5em; display: grid; max-width: 44em; }
.disco__rotulo--preview { margin-top: 2.4em; }
.reproductor { margin-top: 1em; width: min(100%, 26em); }
.reproductor__barra { display: block; height: 1.05em; padding: 2px; border: 1.5px solid var(--blanco); border-radius: 999px; }
.reproductor__barra i { display: block; height: 100%; width: 0; background: var(--blanco); border-radius: 999px; transition: width .25s linear; }
.reproductor__botones { display: flex; gap: .45em; margin-top: .6em; padding-left: .45em; }
.reproductor button { width: 1.75em; height: 1.75em; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--blanco); color: var(--negro); cursor: pointer; padding: 0; }
.reproductor button svg { width: 46%; height: 46%; fill: currentColor; }
.reproductor button:hover:not(:disabled) { color: var(--verde); }
.reproductor button:disabled { opacity: .35; cursor: default; }
.disco__compra { margin-top: 2.2em; }
@media (max-width: 1100px) { .discos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .discos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; padding-top: 64px; }
  .disco-item--abierto { grid-template-columns: 1fr; } .disco-item--abierto .disco__detalle { padding-top: 18px; font-size: 15px; }
  .discos::before { top: 28px; } }
.escucha__titulo { font-weight: 600; text-transform: uppercase; font-size: 28px; line-height: .95; }

/* ---------------------------------------------------------------- parties */
/* Maquetas del 7 oct 2026. Pestañas PRÓXIMOS / PASADOS en la barra de ventana: una
   píldora con la activa en negro. */
.pestanas { display: flex; width: max-content; border: 1px solid var(--blanco); border-radius: 999px;
  font-size: 12px; line-height: 1; text-transform: uppercase; }
.pestanas a { padding: 3px 7px 2px; border-radius: 999px; text-decoration: none; }
.pestanas a[aria-current] { background: var(--blanco); color: var(--negro); }
.pestanas a:not([aria-current]):hover { color: var(--verde); }
.fiestas { padding-top: clamp(8px, 1.5vw, 30px); }
/* Próximos: datos | flyer y ENTRADAS | line-up */
.fiesta { display: grid; grid-template-columns: minmax(0, 1fr) min(29vw, 500px) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 40px);
  align-items: start; font-size: clamp(26px, 3.2vw, 56px); line-height: 1; text-transform: uppercase; }
.fiesta + .fiesta { margin-top: clamp(60px, 6vw, 110px); }
.fiesta__datos, .fiesta__lineup { padding-top: 1em; }
.fiesta__lugar { margin-top: .3em; }
.fiesta__medio { font-size: .55em; padding-left: .45em; margin-top: .08em; }
.fiesta__grande + .fiesta__grande { margin-top: .2em; }
.fiesta__medio + .fiesta__grande { margin-top: .25em; }
.fiesta__pequeno { font-size: max(11px, .24em); line-height: 1.2; padding-left: 1.2em; margin-top: .35em; max-width: 26em; }
.fiesta__texto { margin-top: 1.8em; font-size: clamp(13px, .95vw, 17px); line-height: 1.2; text-transform: none; max-width: 24em; }
.fiesta__flyer { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.4vw, 26px); }
.fiesta__flyer .foto, .fiesta__flyer .hueco { width: 100%; }
.fiesta__flyer .pildora { height: 1.7em; padding: 0 .55em; font-size: clamp(14px, 1.15vw, 20px); font-weight: 400; }
.fiesta__lineup { display: flex; flex-direction: column; align-items: flex-end; gap: .4em; text-align: right; }
.fiesta__lineup small { font-size: .3em; vertical-align: top; margin-right: .25em; }
.fiesta__desde { display: block; font-size: .55em; }
.fiesta__desde small { font-size: .45em; vertical-align: baseline; }
.fiestas__vacio { text-align: center; }
/* Pasados: rejilla de flyers de tres en fondo */
.flyers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.flyers .foto, .flyers .hueco { width: 100%; }
@media (max-width: 760px) {
  .panel__centro { position: static; translate: none; margin-left: auto; }
  .fiesta { grid-template-columns: 1fr; row-gap: 24px; font-size: 30px; }
  .fiesta__datos, .fiesta__lineup { padding-top: 0; }
  .fiesta__lineup { align-items: flex-start; text-align: left; }
  .fiesta__texto { font-size: 15px; }
  .flyers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------- blog */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.filtros button { min-height: 34px; padding: 0 12px; background: none; border: 1px solid var(--linea); cursor: pointer; font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.filtros button[aria-pressed='true'] { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.filtros button:hover { border-color: var(--acento); }
.entrada .tarjeta__nombre { font-size: 17px; line-height: 1.15; text-transform: none; }
.articulo { max-width: 720px; margin: 0 auto; }
.articulo__titulo { font-weight: 600; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.02; letter-spacing: -.02em; margin: 10px 0 18px; }
.articulo__portada { margin: 24px 0 32px; }
.articulo__cuerpo { display: grid; gap: 1.1em; font-size: 18px; line-height: 1.65; }
.articulo__cuerpo h2 { font-weight: 600; text-transform: uppercase; font-size: 22px; line-height: 1.1; margin-top: 1.2em; }
.articulo__cuerpo h3 { font-weight: 600; font-size: 17px; margin-top: .6em; }
.articulo__cuerpo figure { margin: .8em 0; }
.articulo__cuerpo figure img { width: 100%; height: auto; }
figcaption { font: 500 11px/1.5 var(--f-mono); color: var(--tenue); margin-top: 8px; }
.notas { border-top: 1px solid var(--linea); padding-top: 16px; display: grid; gap: 8px; font-size: 14px; color: var(--tenue); }
.comentarios { margin-top: 56px; border-top: 1px solid var(--linea); padding-top: 24px; }

/* ------------------------------------------------------- manifiestos */
.acordeon { display: grid; gap: 12px; }
.acordeon details { border: 1px solid var(--linea); }
.acordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: clamp(20px, 3vw, 36px); font-weight: 600; text-transform: uppercase;
  font-size: clamp(22px, 3.6vw, 44px); line-height: .95; letter-spacing: -.02em;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary svg { width: 28px; height: 28px; flex: none; transition: transform .3s var(--ease); }
.acordeon details[open] summary svg { transform: rotate(45deg); }
.acordeon summary:hover { color: var(--acento); }
.acordeon .texto { padding: 0 clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px); }

/* ------------------------------------------------------------- formulario */
.form { display: grid; gap: 16px; max-width: 640px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo .etiqueta { font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; background: transparent;
  border: 1px solid var(--linea); border-radius: 0; font-size: 16px; appearance: none;
}
.campo select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo select option { background: var(--negro); }
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--blanco); outline: 0; }
.campo--doble { grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--acento); }
.trampa { position: absolute; left: -9999px; }
/* CONTACTO (maqueta del 7 oct 2026): pop-up verde, más pequeño, abajo a la derecha.
   Barra con «CONTACTO» y la X (sin puntos) y un filete negro debajo. */
.panel[data-seccion='contacto'] {
  --negro: var(--verde); --blanco: #111; --tenue: #111; --linea: #111;
  top: auto; left: auto; right: calc(var(--esquina) + 3vw); bottom: 11vh;
  width: clamp(520px, 40vw, 720px); max-height: calc(100vh - 2 * var(--margen));
}
.panel[data-seccion='contacto'] .panel__cabeza { margin: 0 14px; padding: 0 0 0 6px; border-bottom: 1px solid #111; }
.panel[data-seccion='contacto'] .panel__puntos,
.panel[data-seccion='contacto'] .pie { display: none; }
.panel[data-seccion='contacto'] .panel__titulo { font-size: 13px; font-weight: 400; text-transform: uppercase; }
.panel[data-seccion='contacto'] .panel__contenido { padding: 22px 20px 20px; container-type: inline-size; }
@container (max-width: 460px) {
  .form--contacto { gap: 18px; font-size: 12px; }
  .form--contacto .campo--doble { column-gap: 14px; }
  .form--contacto .campo input { padding: 2px 8px; border: 1px solid #111; border-radius: 999px; font-size: 12px; }
  .form--contacto .campo textarea { min-height: 66px; }
}
.form--contacto { max-width: none; gap: 22px; font-size: 13px; }
.form--contacto .campo label, .motivos legend { font: 400 13px/1.2 var(--f-titulo); letter-spacing: 0; text-transform: uppercase; color: inherit; }
.form--contacto .campo label { text-transform: none; }
.motivos { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.motivos legend { padding: 0; margin-bottom: 10px; }
.motivo { display: flex; align-items: center; gap: 10px; padding-left: 4px; cursor: pointer; width: max-content; }
.motivo input { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid #111; border-radius: 50%; cursor: pointer; }
.motivo input:checked { background: radial-gradient(circle, #111 0 3.5px, transparent 4px); }
.motivo input:focus-visible { outline: 1px solid #111; outline-offset: 2px; }
.form--contacto .campo--doble { column-gap: 40px; }
.form--contacto .campo input { min-height: 0; padding: 0; border: 0; font-size: 13px; }
.form--contacto .campo textarea { min-height: 96px; padding: 10px 8px; border: 1px solid #111; border-radius: 4px; font-size: 13px; }
.form--contacto ::placeholder { color: rgba(17, 17, 17, .5); }
.form--contacto .check { font-size: 11px; align-items: center; }
.form--contacto .check input { appearance: none; flex: none; width: 13px; height: 13px; margin: 0; border: 1px solid #111; border-radius: 2px; cursor: pointer; }
.form--contacto .check input:checked { background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%2300ff00' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center / 100% no-repeat; }
.form__enviar { text-align: center; }
.pildora--negra { height: 28px; min-width: 116px; justify-content: center; padding: 0 22px; background: #111; color: #f9f9f9;
  border-color: #111; font-weight: 400; font-size: 13px; cursor: pointer; }
.pildora--negra:hover { background: transparent; color: #111; }
.form--contacto .aviso-form { text-align: center; font-size: 12px; min-height: 0; }
.form--contacto .aviso-form:empty { display: none; }
.aviso-form { font-size: 14px; min-height: 1.4em; }
.aviso-form--ok { color: var(--acento); }
.legal-mini { font-size: 12px; color: var(--tenue); }

/* --------------------------------------------------------------- partners */
.partner { border: 1px solid var(--linea); padding: 20px; display: grid; gap: 14px; align-content: start; text-decoration: none; }
.partner__logo { height: 90px; display: grid; place-items: center start; }
.partner__logo img { max-height: 90px; width: auto; }
.partner__nombre { font-weight: 600; text-transform: uppercase; font-size: 26px; line-height: 1; }
a.partner:hover { border-color: var(--acento); }

/* ------------------------------------------------------------------ promo */
.promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: calc(-1 * clamp(20px, 4vw, 40px)); }
.promo__texto { padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; align-content: center; }
.promo__etiqueta { justify-self: start; background: var(--acento); color: var(--sobre-neon); padding: 5px 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; }
.promo__titulo { font-weight: 600; text-transform: uppercase; font-size: clamp(26px, 4vw, 40px); line-height: .95; letter-spacing: -.02em; }
.promo .hueco, .promo .foto { height: 100%; min-height: 260px; }

/* ------------------------------------------------------------------ legal */
.legal { max-width: 760px; display: grid; gap: 1em; font-size: 16px; }
.legal h2 { font-weight: 600; text-transform: uppercase; font-size: 18px; line-height: 1.2; margin-top: 1em; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 760px) {
  .panel { inset: 0 0 var(--dock, 0px) !important; border-radius: 0; --r: 0px; }
  /* En móvil, con un pop-up abierto, el menú se pliega y se ancla abajo como barra:
     desde ahí se despliega para cambiar de sección o cerrar la abierta. Al cerrar el
     pop-up vuelve a donde estaba. */
  .menu { width: calc(100vw - var(--esquina) - 16px); }   /* que no tape los idiomas */
  .esquina--arriba { top: 16px; }
  .menu--dock { transform: none; top: auto; bottom: 0; left: 0; width: 100%; max-height: 85svh;
    border-top: 1px solid var(--linea); border-radius: 0; cursor: default; }
  .menu--dock .menu__cabeza { padding: 12px 16px; }
  .menu--dock .menu__claim, .menu--dock .menu__siluetas { display: none; }
  .menu--dock .menu__logo img { width: 52px; }
  .menu--dock .menu__plegar { display: grid; position: absolute; right: 8px; top: 50%; translate: 0 -50%; }
  .ficha, .promo { grid-template-columns: 1fr; }
  .artistas__foto { display: none; }
  .artista__ficha { grid-template-columns: 1fr; row-gap: 14px; padding: 4px 20px 28px; }
  .artista__nombre small { display: none !important; }
  .ficha__foto { position: static; }
  .promo .hueco, .promo .foto { min-height: 200px; aspect-ratio: 4 / 3; }
  .campo--doble { grid-template-columns: 1fr; }
  .panel[data-seccion='contacto'] { width: auto; max-height: none; }
  .form--contacto .campo--doble { row-gap: 22px; }
  .pie--portada { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}