/* Josh Beats · vitrina · estilos de la dirección «Firma» (diseno/variantes/firma/prototipo/css/firma.css, adaptado a
 * las páginas pintadas en el servidor: sin estilos en línea, por la CSP). Todos los valores salen de tokens.css y de
 * marca.css (colores y letras desde sitio.config.mjs). Ni una itálica: font-style normal en todo y font-synthesis: none.
 * Etapa 1: portada, menú, pie y las páginas «Próximamente». Etapa 2: la lámina de cambio de página (tanda A); Proyectos,
 * cada proyecto, Trayectoria, la grabación y las listas de conciertos (tanda B); la pantalla partida de Sobre y
 * Bosphorus, Escuchar con su galería y su visor, y las legales (tanda C). Etapa 3: Clases (tanda A); la Agenda y cada
 * concierto (tanda B); Contratar (tanda C). */

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { font-style: normal; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-synthesis: none; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
  background: var(--color-detras); color: var(--color-texto);
  scrollbar-color: var(--color-superficie-alta) var(--color-fondo);
}
body {
  margin: 0; min-height: 100vh; background: var(--color-detras); color: var(--color-texto);
  font-family: var(--fuente-texto); font-size: var(--t-texto); line-height: var(--t-texto-alto); font-weight: 400;
  overflow-x: hidden;
}
html.bloqueo-desplazamiento, html.bloqueo-desplazamiento body { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-bronce-claro); outline-offset: 4px; }
[data-claro] :focus-visible { outline-color: var(--color-tinta); }
::selection { background: var(--color-bronce); color: var(--color-fondo); }
[hidden] { display: none !important; }

.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar {
  position: fixed; top: var(--e-3); left: var(--e-3); z-index: calc(var(--z-cursor) + 1);
  padding: var(--e-3) var(--e-4); background: var(--color-texto); color: var(--color-fondo);
  font-size: var(--t-dato); transform: translateY(-200%);
  transition: transform var(--mov-estado) var(--curva-ease-out);
}
.saltar:focus-visible { transform: none; }

/* Fotos: contorno interior neutro (lista de acabado), salvo a sangre o fundidas */
.foto { position: relative; overflow: hidden; background: var(--color-superficie); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--brillo-foto); }
.foto--sangre::after, .foto--fundida::after { display: none; }

/* ── Tipos ───────────────────────────────────────────────────────────────── */
.titulo {
  font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo); line-height: var(--t-titulo-alto);
  text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance;
}
.titulo-2 { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo-2); line-height: 1.12; text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
.titulo-3 { font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-titulo-3); line-height: 1.2; text-wrap: balance; }
.etiqueta { font-family: var(--fuente-texto); font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.5; color: var(--color-texto-suave); }
.texto { font-size: var(--t-texto); line-height: var(--t-texto-alto); max-width: 32.5em; text-wrap: pretty; }
.dato { font-size: var(--t-dato); line-height: 1.6; color: var(--color-texto-suave); letter-spacing: 0.02em; text-wrap: pretty; }
.cifras { font-variant-numeric: tabular-nums lining-nums; }
.versales { font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); line-height: 1.3; font-weight: 450; }
.tag-ejemplo {
  display: inline-block; padding: 2px var(--e-2); border: var(--hilo) solid var(--color-texto-suave); color: var(--color-texto-suave);
  font-family: var(--fuente-texto); font-size: var(--t-mini); font-weight: 600; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.5; vertical-align: middle;
}

/* Enlaces de texto con subrayado que crece (§5: 0,3 s ease-out) */
.enlace {
  position: relative; display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque);
  transition: color var(--mov-enlace) var(--curva-ease-out);
}
.enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: var(--hilo); background: currentColor;
  transform: scaleX(0.35); transform-origin: 0 50%; transition: transform var(--mov-subrayado) var(--curva-ease-out);
}
.enlace:hover, .enlace:focus-visible { color: var(--color-bronce-claro); }
.enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(1); }
.enlace--versales { font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); }
.enlace .flecha { width: 14px; height: 10px; }
.enlace .flecha--fuera { width: 9px; height: 9px; }

/* ── Botón redondo de dos anillos (§3 y §5) ──────────────────────────────── */
.redondo {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--boton-caja); height: var(--boton-caja); color: var(--color-texto);
  transition: color var(--mov-enlace) var(--curva-ease-out);
}
.anillos { position: absolute; inset: calc((var(--boton-caja) - var(--boton-anillo)) / 2); pointer-events: none; }
.anillos i {
  position: absolute; inset: 0; border: var(--hilo) solid var(--color-bronce); border-radius: 50%;
  animation: anillo-forma-1 var(--mov-anillo-forma) var(--curva-ease-out) infinite, anillo-giro var(--mov-anillo-giro-1) linear infinite;
  transition: border-color var(--mov-enlace) var(--curva-ease-out);
}
.anillos i + i { animation: anillo-forma-2 var(--mov-anillo-forma) var(--curva-ease-out) infinite, anillo-giro var(--mov-anillo-giro-2) linear infinite; }
.redondo:hover .anillos i, .redondo:focus-visible .anillos i { border-color: var(--color-bronce-claro); }
.redondo:hover, .redondo:focus-visible { color: var(--color-blanco); }
.redondo:focus-visible { outline-offset: -6px; border-radius: 50%; }
.redondo:active .redondo-etiqueta, .redondo:active .mas { transform: scale(0.96); }
.redondo-etiqueta { position: relative; font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); line-height: 1; font-weight: 450; transition: transform var(--mov-estado) var(--curva-ease-out); }
.redondo-etiqueta--chica { font-family: var(--fuente-texto); font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.14em; }
.mas { position: relative; width: 26px; height: 26px; transition: transform var(--mov-estado) var(--curva-ease-out); }
.mas::before, .mas::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--hilo); background: currentColor; }
.mas::after { transform: rotate(90deg); }
.mas--cerrar { transform: rotate(45deg); width: 30px; height: 30px; }
.redondo:active .mas--cerrar { transform: rotate(45deg) scale(0.96); }
.anillos-pausa .anillos i { animation-play-state: paused; }
/* claro (sobre marfil) */
.redondo--tinta { color: var(--color-tinta); }
.redondo--tinta .anillos i { border-color: var(--color-tinta); }
/* acento: solo «Contratar» principal */
.redondo--acento { color: var(--color-sobre-acento); }
.redondo--acento::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--color-acento); transition: transform var(--mov-enlace) var(--curva-ease-out); }
.redondo--acento .anillos i { border-color: var(--color-acento); }
.flecha-redonda { position: relative; width: 22px; height: 14px; }
.flecha-redonda .flecha { width: 22px; height: 14px; }
.con-etiqueta { display: inline-flex; align-items: center; gap: var(--e-2); }
.con-etiqueta > .versales { transition: transform var(--mov-enlace) var(--curva-ease-out), color var(--mov-enlace) var(--curva-ease-out); }
.con-etiqueta:hover > .versales, .con-etiqueta:focus-visible > .versales { transform: translateX(5px); color: var(--color-bronce-claro); }
[data-claro] .con-etiqueta:hover > .versales, [data-claro] .con-etiqueta:focus-visible > .versales { color: var(--color-bronce-oscuro); }
.con-etiqueta:hover .anillos i, .con-etiqueta:focus-visible .anillos i { border-color: var(--color-bronce-claro); }
.con-etiqueta.redondo--tinta-grupo:hover .anillos i, .con-etiqueta.redondo--tinta-grupo:focus-visible .anillos i { border-color: var(--color-bronce-oscuro); }
.con-etiqueta:hover .redondo--acento::before, .con-etiqueta:focus-visible .redondo--acento::before { transform: scale(1.06); }
.con-etiqueta:hover .redondo--acento .anillos i, .con-etiqueta:focus-visible .redondo--acento .anillos i { border-color: var(--color-acento); }
.con-etiqueta:focus-visible { outline-offset: 2px; }

@keyframes anillo-giro { to { transform: rotate(360deg); } }
/* Óvalos irregulares (±8–12 %) que respiran y se cruzan al girar (boton-redondo-*-detalle, §5). */
@keyframes anillo-forma-1 {
  0%, 100% { border-radius: 54% 46% 58% 42% / 44% 57% 43% 56%; }
  30% { border-radius: 43% 57% 45% 55% / 58% 44% 56% 42%; }
  66% { border-radius: 57% 44% 41% 59% / 46% 59% 42% 55%; }
}
@keyframes anillo-forma-2 {
  0%, 100% { border-radius: 42% 44% 41% 45% / 44% 41% 45% 42%; }
  30% { border-radius: 56% 42% 58% 44% / 42% 57% 44% 59%; }
  66% { border-radius: 45% 58% 47% 54% / 57% 45% 58% 41%; }
}

/* ── Cabecera fija: el botón «Menú» (§3: arriba a la derecha, caja de 100 px con anillos de 80) ── */
.cabecera { position: fixed; top: 25px; right: calc(var(--margen) - (var(--boton-caja) - var(--boton-anillo)) / 2); z-index: var(--z-cabecera); }
/* Un halo oscuro y suave detrás de los anillos: sobre el cuadro más claro del video (o una foto clara) el bronce sigue
   por encima de 3:1. En cuanto hay marfil bajo la etiqueta (el programa de mano o los bloques de marfil encendidos), el
   botón pasa a tinta y el halo a marfil, que sostiene su fuerza hasta media altura: a medio revelado, con foto y marfil
   bajo la etiqueta, la tinta se sigue leyendo sobre la parte de foto. */
.boton-menu::before, .boton-menu::after { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 50%; pointer-events: none; transition: opacity var(--mov-enlace) var(--curva-ease-out); }
.boton-menu::before { background: radial-gradient(closest-side, var(--velo-fuerte), var(--velo-medio) 62%, var(--velo-0)); }
.boton-menu::after { background: radial-gradient(closest-side, var(--velo-claro-fuerte), var(--velo-claro-fuerte) 50%, var(--velo-claro-medio) 72%, var(--velo-claro-0)); opacity: 0; }
.boton-menu.sobre-claro::before { opacity: 0; }
.boton-menu.sobre-claro::after { opacity: 1; }
.boton-menu.al-instante, .boton-menu.al-instante::before, .boton-menu.al-instante::after, .boton-menu.al-instante .anillos i { transition: none; }
.boton-menu.sobre-claro { color: var(--color-tinta); }
.boton-menu.sobre-claro .anillos i { border-color: var(--color-tinta); }
.boton-menu--sin-js { display: none; }

.pagina { position: relative; z-index: var(--z-pagina); background: var(--color-fondo); min-height: 100vh; }

/* ── Lámina de cambio de página (§6.1–6.2): la página misma se vuelve una hoja fija; detrás, el fondo del sitio ── */
/* Con el ancho y el alto que tenía la página en su sitio: con barras de desplazamiento clásicas, la que desaparece
   mientras las dos hojas dejan la página sin altura no le cambia el ancho a ninguna. */
.pagina[data-lamina] {
  position: fixed; top: 0; left: 0; width: var(--ancho-ventana, 100%); height: var(--alto-ventana, 100vh); overflow: hidden;
  transform-origin: 50% 100%; box-shadow: var(--sombra-lamina); outline: var(--hilo) solid var(--hilo-bronce); outline-offset: -1px;
  will-change: transform, opacity; pointer-events: none;
}
.pagina[data-lamina="sale"] { z-index: var(--z-lamina-sale); }
.pagina[data-lamina="entra"] { z-index: var(--z-lamina-entra); }
.pagina[data-lamina="entra"].suelta { pointer-events: auto; } /* desde los 0,5 s ya se puede pulsar la que entra */
/* El menú que viaja con la hoja que sale: su «×» cede el sitio al botón «Menú» fijo, que queda por encima de las dos */
.pagina[data-lamina] .menu-cerrar { visibility: hidden; }
.bloqueo { position: fixed; inset: 0; z-index: var(--z-bloqueo); cursor: wait; }
/* Palabras y líneas de la página que entra (§6.1): suben desde su renglón, que las recorta */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.04em 0.08em; margin: -0.14em -0.04em -0.08em; }
.palabra-in { display: inline-block; transform-origin: 0 100%; }
.linea-partida { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.linea-partida > span { display: block; }

/* ── Grano de película (§5: 0,2 s, 10 posiciones, opacidad 0,6) ───────── */
.grano {
  position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: var(--z-grano); pointer-events: none;
  background-image: var(--grano-textura, none); background-size: 180px 180px; opacity: 0.6;
  animation: grano var(--mov-grano) var(--curva-ease) infinite;
}
.grano.quieto { animation-play-state: paused; }
@keyframes grano {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -15%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 15%); }
  80% { transform: translate(3%, 5%); }
  90% { transform: translate(-10%, 10%); }
}

/* ── Cursor (biblioteca/efectos/cursor, adaptado a §5: anillo de 25 px con borde de 1 px pegado al puntero) ── */
:root { --efx-claro: var(--color-bronce); }
.efx-cursor-punto { mix-blend-mode: normal; }
.efx-cursor-disco { left: -12.5px; top: -12.5px; width: 25px; height: 25px; background: transparent; border: var(--hilo) solid var(--efx-claro); }
.efx-cursor-aro, .efx-cursor-halo { display: none; }

/* ── Esquinas (§3, §4.1) ─────────────────────────────────────────────── */
.firma { position: absolute; top: 34px; left: var(--margen); z-index: 4; display: block; line-height: 1.25; }
.firma-nombre { display: block; font-family: var(--fuente-titulos); font-size: clamp(19px, 1.6vw, 23px); font-weight: 480; text-transform: uppercase; letter-spacing: 0.06em; transition: color var(--mov-enlace) var(--curva-ease-out); }
.firma-oficio { display: block; margin-top: var(--e-1); font-size: var(--t-mini); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-texto-suave); }
.firma:hover .firma-nombre, .firma:focus-visible .firma-nombre { color: var(--color-bronce-claro); }
/* La firma de las páginas interiores y del menú: «suave» (Firma y el referente) o «marfil» (como la portada), desde
   sitio.config.mjs (firmaInterior → --firma-interior en marca.css). */
.pagina:not(.pagina--portada) .firma-nombre, .menu-capa .firma-nombre { color: var(--firma-interior, var(--color-texto-suave)); }
.pagina:not(.pagina--portada) .firma:hover .firma-nombre { color: var(--color-bronce-claro); }

.idiomas { display: flex; align-items: center; gap: var(--e-3); font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); }
.idiomas a { position: relative; display: inline-flex; align-items: center; min-height: var(--toque); min-width: var(--toque); justify-content: center; transition: color var(--mov-enlace) var(--curva-ease-out); }
.idiomas a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: var(--hilo); background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mov-subrayado) var(--curva-ease-out); }
.idiomas a:hover::after, .idiomas a:focus-visible::after, .idiomas a[aria-current="true"]::after { transform: scaleX(1); }
.idiomas a:not([aria-current="true"]) { color: var(--color-texto-suave); }
.idiomas a:hover { color: var(--color-bronce-claro); }
.idiomas .sep { color: var(--color-bronce); }

.escuchar { position: relative; display: inline-flex; flex-direction: column; align-items: center; min-height: var(--toque); min-width: 100px; padding-top: var(--e-2); color: var(--color-texto); transition: color var(--mov-enlace) var(--curva-ease-out); }
.escuchar:hover, .escuchar:focus-visible { color: var(--color-bronce-claro); }
.escuchar canvas { width: 100px; height: 40px; margin-top: calc(var(--e-2) * -1); margin-bottom: calc(var(--e-3) * -1); }
.escuchar-etiqueta { font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); line-height: 1.3; font-weight: 450; }

.boton-video {
  position: relative; display: grid; place-items: center; width: var(--toque); height: var(--toque); border-radius: 50%;
  border: var(--hilo) solid var(--marfil-tenue); color: var(--color-texto);
  transition: border-color var(--mov-enlace) var(--curva-ease-out), color var(--mov-enlace) var(--curva-ease-out);
}
.boton-video:hover, .boton-video:focus-visible { border-color: var(--color-bronce-claro); color: var(--color-bronce-claro); }
.boton-video svg { width: 12px; height: 12px; }
.boton-video .icono-play { display: none; }
.boton-video[data-pausado="true"] .icono-pausa { display: none; }
.boton-video[data-pausado="true"] .icono-play { display: block; }

/* ── Portada · primera pantalla partida (escritorio) ─────────────────── */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 72% 62% at 50% -6%, var(--color-foco) 0%, var(--color-foco-medio) 42%, var(--color-fondo) 72%); }
@supports (height: 100svh) { .hero { height: 100svh; } }
.hero-video { position: absolute; top: 0; bottom: 0; right: 50%; width: min(50%, 720px); overflow: hidden; background: var(--color-negro-video); z-index: 0; }
.hero-video video, .hero-video .poster, .hero-video .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco-video-portada, 50% 42%); }
.hero-video video, .hero-video .poster img { filter: var(--filtro-video); }
.hero-video video { opacity: 0; transition: opacity var(--mov-video) var(--curva-ease-out); }
.hero-video video.corriendo { opacity: 1; }
.hero-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--velo-suave), var(--velo-0) 40%); pointer-events: none; }
.hero-retrato { position: absolute; left: 50%; width: min(50%, 1080px); top: 9%; height: 99.5%; max-height: 1343px; z-index: 0; mix-blend-mode: lighten; }
.hero-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 0; }
.hero-velo { position: absolute; left: 0; right: 0; top: 47%; height: 52%; transform: translateY(-50%); z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 50% at 50% 50%, var(--velo-letra) 0%, var(--velo-letra) 42%, var(--velo-0) 100%); }
.hero-cabeza-velo { position: absolute; left: 0; right: 0; top: 0; height: 190px; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--velo-letra), var(--velo-0)); }
.hero-pie-velo { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--velo-medio), var(--velo-0)); }
.nombre {
  position: absolute; left: 0; right: 0; top: 47%; z-index: 5; margin: 0; transform: translateY(-50%);
  text-align: center; white-space: nowrap; pointer-events: none;
  font-family: var(--fuente-titulos); font-weight: var(--peso-nombre); font-size: var(--nombre-tam, var(--nombre-tam-escritorio)); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-texto);
  text-box: trim-both cap alphabetic;
}
.nombre-letra { display: inline-block; transform-origin: 50% 60%; font-variation-settings: "wght" var(--peso-nombre); }
.lema::before { content: ""; position: absolute; inset: -22px -40px -22px -36px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 60% at 45% 50%, var(--velo-fuerte), var(--velo-medio) 55%, var(--velo-0) 100%); }
.lema { position: absolute; z-index: 3; left: 11.25%; top: calc(47% + var(--nombre-tam, var(--nombre-tam-escritorio)) * 0.36 + var(--e-6)); max-width: 30em;
  font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.8; color: var(--color-texto); text-wrap: balance; }
.hero-esquina-ii { position: absolute; z-index: 4; left: var(--margen); bottom: 38px; }
.hero-esquina-id { position: absolute; z-index: 4; right: var(--margen); bottom: 38px; }
.hero-centro { position: absolute; z-index: 4; left: 50%; bottom: 44px; transform: translateX(-50%); }

/* Portada · retrato a pantalla completa (solo celular) */
.retrato-celular { display: none; }

/* ── Portada · próximo concierto ─────────────────────────────────────── */
.seccion { position: relative; padding-left: var(--margen); padding-right: var(--margen); }
.proximo { background: var(--color-superficie); padding-top: var(--e-9); padding-bottom: var(--e-9); border-top: var(--hilo) solid var(--hilo-bronce); }
.proximo-cabeza { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-6); }
.punto-vivo { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--color-acento); flex: none; }
.punto-vivo::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: var(--hilo) solid var(--color-acento); opacity: 0.6; animation: latido var(--mov-latido) var(--curva-ease-out) infinite; }
@keyframes latido { 0% { transform: scale(0.6); opacity: 0.7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.proximo-cuerpo { display: grid; grid-template-columns: minmax(220px, 3fr) 6fr auto; align-items: end; gap: var(--e-7); }
.fecha-grande { font-family: var(--fuente-titulos); color: var(--color-bronce); line-height: 0.82; }
.fecha-grande time { display: flex; align-items: baseline; gap: var(--e-3); }
.fecha-dia { font-size: var(--t-fecha); font-weight: 420; font-variant-numeric: tabular-nums lining-nums; }
.fecha-mes { font-size: var(--t-titulo-3); text-transform: uppercase; letter-spacing: 0.08em; }
.proximo-lugar { font-family: var(--fuente-titulos); font-size: var(--t-titulo-2); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; font-weight: var(--peso-titulo); margin: var(--e-2) 0 var(--e-3); }
.proximo-acciones { display: flex; align-items: center; gap: var(--e-6); }
.estado-entrada { display: inline-flex; align-items: center; min-height: var(--toque); font-size: var(--t-dato); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-bronce); }
.proximo-vacio { grid-template-columns: minmax(0, 1fr) auto; }
.proximo-vacio .titulo-2 { max-width: 18em; }

/* ── Portada · proyecto destacado y Sobre (§4.1 y §5 paralaje) ───────── */
.reja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0; }
.destacado { padding-top: var(--e-10); padding-bottom: var(--e-10); }
.destacado-foto { grid-column: 3 / 7; grid-row: 1; aspect-ratio: 432 / 560; align-self: start; }
.destacado-texto { grid-column: 6 / 13; grid-row: 1; margin-left: -40px; margin-top: 52%; position: relative; z-index: 2; }
.destacado-texto .titulo, .sobre-texto .titulo { max-width: 11em; text-shadow: 0 1px 2px var(--velo-medio), 0 0 28px var(--velo-medio); }
.destacado-cuerpo { margin-left: calc(150% / 7); margin-top: var(--e-6); }
.destacado-cuerpo .etiqueta { margin-bottom: var(--e-1); }
.destacado-cuerpo .dato { margin-bottom: var(--e-3); }
.destacado-cuerpo .redondo { margin-top: var(--e-6); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.sobre { padding-top: var(--e-9); padding-bottom: var(--e-10); }
.sobre-foto { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 974 / 640; }
.sobre-foto picture { display: contents; }
.sobre-texto { grid-column: 8 / 12; grid-row: 1; margin-top: 30%; position: relative; z-index: 2; }
.sobre-texto .texto { margin-top: var(--e-6); max-width: 26em; }
.sobre-texto .redondo { margin-top: var(--e-6); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }

/* ── Foto a sangre con revelado por bloques (§6.1, §6.3) ─────────────── */
.sangre { position: relative; height: 768px; overflow: hidden; background: var(--color-fondo); }
.sangre img { width: 100%; height: 100%; object-fit: cover; }
.bloques { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; }
.bloques i { position: absolute; display: block; opacity: 0; background: var(--bloques-color, var(--color-marfil)); }
.bloques i.on { opacity: 1; }
.bloques--marfil { --bloques-color: var(--color-marfil); }
.bloques--superficie { --bloques-color: var(--color-superficie); }

/* ── Portada · clases como programa de mano (sección clara) ──────────── */
.programa { background: var(--color-marfil); color: var(--color-tinta); padding-top: var(--e-9); padding-bottom: var(--e-9); }
.programa .etiqueta, .programa .dato { color: var(--color-tinta-suave); }
.programa-intro { grid-column: 1 / 5; padding-right: var(--e-7); }
.programa-intro .texto { margin-top: var(--e-5); max-width: 22em; }
.programa-intro .con-etiqueta { margin-top: var(--e-6); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.programa-lista { grid-column: 5 / 13; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.programa-plan { position: relative; padding: var(--e-1) var(--e-5) var(--e-2); border-left: var(--hilo) solid var(--hilo-tinta); display: flex; flex-direction: column; gap: var(--e-3); container-type: inline-size; }
.programa-num { font-family: var(--fuente-titulos); font-size: var(--t-chico); color: var(--color-bronce-oscuro); letter-spacing: 0.12em; }
.programa-plan .titulo-3 { text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(20px, 1.75vw, 26px); }
.programa-plan .texto { font-size: var(--t-chico); line-height: 1.6; color: var(--color-tinta); }
.programa-precio { margin-top: auto; padding-top: var(--e-4); font-family: var(--fuente-titulos); font-size: var(--t-lista); font-variant-numeric: tabular-nums lining-nums; }
.programa-precio small { display: block; font-variant-numeric: tabular-nums lining-nums; font-family: var(--fuente-texto); font-size: var(--t-mini); letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-tinta-suave); }
.programa .junto { white-space: nowrap; }
/* La cifra con su moneda nunca se parte; si la columna es estrecha, baja de cuerpo (14,5 % del plan: «COP 1,020,000» mide 6,8 em). */
.programa-cifra { display: block; white-space: nowrap; font-size: min(1em, 14.5cqi); }

/* ── Portada · disponible para ───────────────────────────────────────── */
.disponible { padding-top: var(--e-10); padding-bottom: var(--e-10); }
.disponible-cabeza { grid-column: 1 / 6; padding-right: var(--e-7); }
.disponible-cabeza .titulo { max-width: 7em; } /* «AVAILABLE FOR» en dos líneas como «DISPONIBLE PARA»: no toca la lista */
.disponible-cabeza .texto { margin-top: var(--e-5); color: var(--color-texto-suave); }
.disponible-cabeza .con-etiqueta { margin-top: var(--e-7); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.formatos-lista { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-7); align-content: start; }
.formatos-lista li { position: relative; }
.formatos-lista a { display: flex; align-items: baseline; gap: var(--e-4); padding: var(--e-4) 0; min-height: 64px; transition: color var(--mov-enlace) var(--curva-ease-out); }
.formatos-lista a .titulo-3 { text-transform: uppercase; letter-spacing: 0.03em; transition: transform var(--mov-titulo-tarjeta) var(--curva-ease-out); }
.formatos-lista a:hover, .formatos-lista a:focus-visible { color: var(--color-bronce-claro); }
.formatos-lista a:hover .titulo-3, .formatos-lista a:focus-visible .titulo-3 { transform: translateX(5px); }
.formatos-lista .num { font-size: var(--t-etiqueta); letter-spacing: 0.1em; color: var(--color-bronce); font-variant-numeric: tabular-nums lining-nums; min-width: 2em; }
.linea { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hilo); background: var(--hilo-gris); transform-origin: 0 50%; }
.linea--arriba { top: 0; bottom: auto; }

/* ── Pie (todas) ──────────────────────────────────────────────────────── */
.pie { position: relative; padding: var(--e-8) var(--margen) var(--e-6); background: var(--color-fondo); border-top: var(--hilo) solid var(--hilo-gris-tenue); }
.pie-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-6); }
.pie-nombre { font-family: var(--fuente-titulos); font-size: var(--t-lista); text-transform: uppercase; letter-spacing: 0.06em; }
.pie-centro { display: flex; gap: var(--e-6); justify-content: center; }
.pie-redes { display: flex; gap: var(--e-5); justify-content: flex-end; flex-wrap: wrap; }
.pie-redes a { font-size: var(--t-dato); }
.pie-fila--chica { margin-top: var(--e-7); padding-top: var(--e-4); border-top: var(--hilo) solid var(--hilo-gris-tenue); grid-template-columns: auto 1fr auto; font-size: var(--t-etiqueta); color: var(--color-texto-suave); }
.pie-legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); align-items: center; }
.pie-legal > a { display: inline-flex; align-items: center; min-height: var(--toque); min-width: var(--toque); color: var(--color-texto-suave); transition: color var(--mov-enlace) var(--curva-ease-out); text-decoration: underline; text-decoration-color: var(--hilo-gris); text-underline-offset: 4px; }
.pie-legal > a:hover { color: var(--color-texto); }
.pie-credito { text-wrap: pretty; }
.pie .idiomas { font-size: var(--t-dato); }

/* ── Páginas interiores: cabeza y «Próximamente» (Mi cuenta y el 404) ─── */
.interior { padding-left: var(--margen); padding-right: var(--margen); }
.pagina-cabeza { position: relative; height: 130px; }
.interior .pagina-cabeza .firma { left: 0; }
.proximamente-reja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); padding-top: var(--e-7); padding-bottom: var(--e-10); align-items: start; }
.proximamente-texto { grid-column: 1 / 8; }
.proximamente-etiqueta { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-5); }
.punto-bronce { width: 7px; height: 7px; border-radius: 50%; background: var(--color-bronce); flex: none; }
.proximamente-texto .titulo { max-width: 12em; }
.proximamente-bajada { margin-top: var(--e-6); font-size: var(--t-bajada); line-height: 1.6; color: var(--color-texto); max-width: 28em; }
.proximamente .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-6); margin-top: var(--e-7); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.proximamente-panel { margin-top: var(--e-6); }
.proximamente-foto { grid-column: 9 / 13; aspect-ratio: 2 / 3; margin-top: var(--e-2); }
.proximamente-foto img { filter: grayscale(1); }

/* ── Proyectos (§4.3; vitrina() de Firma): título y filtro con el hilo de cada formato; tarjetas de 1 px ──────── */
.vitrina-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); padding-top: var(--e-2); }
.filtro { display: flex; flex-wrap: wrap; gap: var(--e-5); }
.filtro button { position: relative; min-height: var(--toque); font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); color: var(--color-texto-suave); transition: color var(--mov-enlace) var(--curva-ease-out); }
.filtro button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: var(--hilo); background: var(--hilo-color, var(--color-texto-suave)); }
.filtro button[aria-pressed="true"] { color: var(--color-texto); }
.filtro button[aria-pressed="true"]::after { height: 2px; }
.filtro button:hover { color: var(--color-texto); }
.hilo--todos { --hilo-color: var(--color-texto-suave); }
.tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-7) 44px; padding-top: var(--e-10); padding-bottom: var(--e-10); }
.tarjeta { border: var(--hilo) solid var(--hilo-color, var(--color-bronce)); }
.tarjeta-enlace { display: flex; flex-direction: column; height: 100%; padding: var(--e-5); }
.tarjeta-enlace:focus-visible { outline-offset: -8px; }
.tarjeta-foto { display: block; aspect-ratio: 1 / 1; }
.tarjeta-nombre { margin-top: var(--e-5); min-height: 2.24em; font-family: var(--fuente-titulos); font-size: clamp(22px, 2vw, 30px); line-height: 1.12; text-transform: uppercase; letter-spacing: 0.02em; font-weight: var(--peso-titulo); text-wrap: balance; transition: transform var(--mov-titulo-tarjeta) var(--curva-ease-out); }
/* §5 «Título de proyecto al pasar»: el nombre se corre 5 px en 0,5 s ease-out */
.tarjeta-enlace:hover .tarjeta-nombre, .tarjeta-enlace:focus-visible .tarjeta-nombre { transform: translateX(5px); }
.tarjeta-pie { margin-top: auto; padding-top: var(--e-8); display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); font-size: var(--t-dato); letter-spacing: 0.04em; color: var(--color-texto-suave); }
.tarjeta-pie .cifras { color: var(--color-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* ── Cada proyecto (§4.4): nombre, ficha corta y flecha a un lado; la tira de tres fotos al otro; texto, grabación y
   próximos conciertos debajo, en la columna de la tira ───────────────────────────────────────────────────────────── */
.proyecto-titulo { max-width: 14em; padding-top: var(--e-2); }
.proyecto-reja { margin-top: var(--e-8); align-items: start; }
.proyecto-lado { grid-column: 1 / 4; padding-right: var(--e-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-7); }
.ficha { display: grid; gap: var(--e-4); }
.ficha dt { margin-bottom: var(--e-1); }
.ficha dd { margin: 0; font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.35; text-wrap: balance; }
.volver { display: inline-flex; align-items: center; min-width: var(--toque); min-height: var(--toque); color: var(--color-texto); transition: color var(--mov-enlace) var(--curva-ease-out); }
.flecha-volver { width: 54px; height: 30px; transition: transform var(--mov-titulo-tarjeta) var(--curva-ease-out); }
.volver:hover, .volver:focus-visible { color: var(--color-bronce-claro); }
.volver:hover .flecha-volver, .volver:focus-visible .flecha-volver { transform: translateX(-5px); }
.proyecto-tira { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
.proyecto-tira .foto { aspect-ratio: 4 / 5; }
.proyecto-cuerpo { padding-top: var(--e-9); }
.proyecto-texto { grid-column: 4 / 13; max-width: 34em; font-family: var(--fuente-titulos); font-size: var(--t-lista); line-height: 1.5; text-wrap: pretty; }
.proyecto-grabacion { padding-top: var(--e-9); }
.proyecto-grabacion > .etiqueta, .proyecto-grabacion > .grabacion { grid-column: 2 / 13; }
.proyecto-grabacion > .etiqueta { margin-bottom: var(--e-5); }
.proyecto-proximos { padding-top: var(--e-9); padding-bottom: var(--e-10); }
.proyecto-proximos > * { grid-column: 4 / 13; }

/* ── Grabación (YouTube sin cookies al tocar; la tarjeta de video de Firma) ─────────────────────────────────── */
.grabacion { position: relative; border: var(--hilo) solid var(--hilo-color, var(--color-hilo-ensamble)); padding: var(--e-5); }
.grabacion-marco { position: relative; aspect-ratio: 16 / 9; background: var(--color-negro-video); overflow: hidden; }
.grabacion-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.grabacion-tocar { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--color-negro-video); }
.grabacion-tocar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--mov-enlace) var(--curva-ease-out); }
.grabacion-tocar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, var(--velo-medio) 0, var(--velo-suave) 46%); }
.grabacion-tocar .redondo { position: absolute; z-index: 1; pointer-events: none; color: var(--color-texto); }
.grabacion-tocar:hover img, .grabacion-tocar:focus-visible img { transform: scale(1.03); }
.grabacion-tocar:hover .anillos i:not(.gira), .grabacion-tocar:focus-visible .anillos i:not(.gira) { border-color: var(--color-bronce-claro); }
.grabacion-tocar:focus-visible { outline-offset: -4px; }
.grabacion-play { position: relative; display: grid; place-items: center; }
.triangulo { width: 18px; height: 20px; margin-left: 4px; }
/* Cargando: un tercer anillo, abierto, que gira por fuera de los dos (Firma: «anillo que gira, aria-busy»); por fuera y
   en bronce claro para que no se confunda con ellos sobre la foto */
.anillos i.gira { display: none; inset: -8px; border-color: transparent; border-top-color: var(--color-bronce-claro); border-right-color: var(--color-bronce-claro); border-radius: 50%; animation: anillo-giro var(--mov-giro-envio) linear infinite; }
.redondo:hover .anillos i.gira, .redondo:focus-visible .anillos i.gira { border-color: transparent; border-top-color: var(--color-bronce-claro); border-right-color: var(--color-bronce-claro); } /* abierto también al pasar */
.grabacion[data-estado="cargando"] .anillos i.gira { display: block; }
.grabacion figcaption { margin-top: var(--e-5); display: flex; flex-direction: column; gap: var(--e-1); }
.grabacion-titulo { font-family: var(--fuente-titulos); font-size: var(--t-lista); line-height: 1.25; text-wrap: balance; }
.grabacion-fallo { margin-top: var(--e-3); }

/* ── Listas de conciertos (la agenda de Firma): próximos de cada proyecto y pasados de Trayectoria ─────────── */
.lista-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3); }
.conciertos { margin-top: var(--e-5); }
.conciertos li { position: relative; display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--e-6); padding: var(--e-7) 0; }
.conciertos .fecha-grande time { flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.conciertos .fecha-dia { font-size: clamp(64px, 6vw, 88px); }
.concierto-hora { margin-top: var(--e-2); font-size: var(--t-dato); color: var(--color-texto-suave); letter-spacing: 0.04em; font-variant-numeric: tabular-nums lining-nums; }
.concierto-lugar { font-family: var(--fuente-titulos); font-size: clamp(26px, 2.3vw, 34px); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; font-weight: var(--peso-titulo); text-wrap: balance; }
.concierto-con { margin-top: var(--e-2); }
.concierto-accion { margin-top: var(--e-4); display: flex; align-items: center; gap: var(--e-4); }
.concierto-accion .redondo { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.lista-vacia { padding: var(--e-6) 0 0; }
.lista-vacia .titulo-3 { max-width: 18em; }
.lista-vacia .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-6); margin-top: var(--e-5); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
.lista-vacia .dato + .enlace { margin-top: var(--e-3); }

/* ── Trayectoria (§4.6, la agenda del referente y de Firma): la lista larga y, a su derecha, la tira de fotos en blanco
   y negro, tan larga como la lista (en el celular, al final) ─────────────────────────────────────────────────────── */
.lista-larga { display: grid; grid-template-columns: minmax(0, 1fr) 540px; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
.lista-larga-titulo { grid-column: 1; grid-row: 1; padding-top: var(--e-9); } /* el paralaje sube el título ≈ 40 px al cargar (§5), como en Firma */
.lista-larga-bajada { margin-top: var(--e-6); max-width: 30em; font-size: var(--t-bajada); line-height: 1.6; text-wrap: pretty; }
.lista-larga-cuerpo { grid-column: 1; grid-row: 2; padding-top: var(--e-9); padding-bottom: var(--e-10); }
.tira-columna { grid-column: 2; grid-row: 2; align-self: stretch; position: relative; margin-top: var(--e-9); margin-bottom: var(--e-10); }
.tira { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--e-5); }
.tira .foto { flex: 1 1 0; min-height: 0; }
.tira .foto img { filter: grayscale(1) contrast(1.05); }
.tray-bloque + .tray-bloque { margin-top: var(--e-10); }
.ciudades { margin-top: var(--e-4); font-family: var(--fuente-titulos); font-size: var(--t-titulo-2); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; text-wrap: balance; }
.ciudades .sep { color: var(--color-bronce); padding: 0 0.1em 0 0.25em; }
.ciudad { white-space: nowrap; }
.lugares-grupo { margin-top: var(--e-7); }
.lugares-grupo .etiqueta { margin-bottom: var(--e-3); }
.lugar { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-5); padding: var(--e-3) 0; font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.35; }
.lugar-nota, .lugar-ciudad { font-family: var(--fuente-texto); font-size: var(--t-dato); letter-spacing: 0.04em; color: var(--color-texto-suave); }
.lugar-ciudad { flex: none; }

/* ── Una fila de concierto (la agenda, los próximos de cada proyecto y los pasados de Trayectoria): el lugar lleva a su
   página y se corre 5 px al pasar (§5 «Título de proyecto al pasar»); el próximo, con el punto vivo bermellón; el
   cancelado, tachado ───────────────────────────────────────────────────────────────────────────────────────────── */
.concierto-enlace { display: inline-block; padding: var(--e-2) 0; margin: calc(var(--e-2) * -1) 0; transition: transform var(--mov-titulo-tarjeta) var(--curva-ease-out), color var(--mov-enlace) var(--curva-ease-out); } /* 8 px arriba y abajo: área de toque de 46 px en el celular sin mover nada */
.concierto-enlace:hover, .concierto-enlace:focus-visible { transform: translateX(5px); color: var(--color-bronce-claro); }
.concierto-marca { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.5; color: var(--color-texto-suave); }
.concierto-marca--vivo, .etiqueta--vivo { color: var(--color-acento); } /* «En vivo»: el punto vivo, uno de los cuatro sitios del acento */
.concierto--cancelado .concierto-enlace, .concierto-titulo--tachado { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: currentColor; }
.concierto--cancelado .concierto-lugar, .concierto--cancelado .fecha-grande, .concierto-pagina[data-momento="cancelado"] .fecha-grande { color: var(--color-texto-suave); }
.estado-entrada--cancelado, .concierto-marca--cancelado { color: var(--color-texto); }

/* ── Agenda (`agenda()` de Firma, §4.6): el título enorme y «Próximos conciertos» arriba a la izquierda; a la derecha, el
   video 26 y la tira de fotos en blanco y negro en una columna que acompaña el desplazamiento (§5); debajo del título,
   la lista larga y el cierre. En el celular, todo en una columna con la tira al final ─────────────────────────────── */
.agenda-reja { display: grid; grid-template-columns: minmax(0, 1fr) 540px; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
.agenda-titulo-zona { grid-column: 1; grid-row: 1; padding-top: var(--e-9); } /* el paralaje sube el título ≈ 50 px al cargar (§5): con 96 px queda a la altura del referente (corrección 3 de Firma) */
.agenda-intro { margin-top: var(--e-8); display: flex; align-items: center; gap: var(--e-3); }
.agenda-col { grid-column: 2; grid-row: 1 / span 2; }
.agenda-foto { position: relative; aspect-ratio: 3 / 4; background: var(--color-negro-video); overflow: hidden; }
.agenda-foto .poster, .agenda-foto .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.agenda-tira { margin-top: var(--e-5); display: flex; flex-direction: column; gap: var(--e-5); }
.agenda-tira .foto img { filter: grayscale(1) contrast(1.05); }
.agenda-tira .foto--v { aspect-ratio: 3 / 4; }
.agenda-tira .foto--h { aspect-ratio: 3 / 2; }
.agenda-lista-zona { grid-column: 1; grid-row: 2; padding-top: var(--e-6); padding-bottom: var(--e-10); }
.agenda .conciertos { margin-top: 0; }
.agenda-vacia { padding: var(--e-8) 0; }
.agenda-vacia .titulo-2 { max-width: 14em; }
.agenda-cierre { padding-top: var(--e-8); }
.agenda-vacia .acciones, .agenda-cierre .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-6); margin-top: var(--e-6); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }

/* ── Cada concierto: la cabeza de las interiores; a un lado lo de la lista en grande (la fecha con su año, las horas, el
   lugar como título, con quién, la entrada, su texto, el calendario, «Compartir» y «Ver agenda»), al otro su foto ──── */
.concierto-reja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); padding-top: var(--e-7); padding-bottom: var(--e-10); align-items: start; }
.concierto-lado { grid-column: 1 / 8; }
.concierto-foto { grid-column: 9 / 13; aspect-ratio: 4 / 5; margin-top: var(--e-2); }
.concierto-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-6); }
.concierto-cabeza .concierto-marca { margin: 0; }
.concierto-fecha time { flex-wrap: wrap; }
.fecha-ano { font-size: var(--t-titulo-3); letter-spacing: 0.08em; font-variant-numeric: tabular-nums lining-nums; }
.concierto-pagina .concierto-hora { margin-top: var(--e-4); }
.concierto-titulo { margin-top: var(--e-7); max-width: 12em; }
.concierto-pagina .concierto-con { margin-top: var(--e-4); font-size: var(--t-texto); }
.concierto-con a { padding: var(--e-3) 0; } /* en línea: el relleno agranda el área de toque (45 px) sin mover el renglón */
.concierto-pagina .concierto-accion { flex-direction: column; align-items: flex-start; gap: var(--e-2); margin-top: var(--e-5); }
.concierto-nota { max-width: 30em; }
.concierto-texto { margin-top: var(--e-6); }
.concierto-pagina .acciones { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-6); row-gap: var(--e-2); margin-top: var(--e-7); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
/* «Compartir» y su aviso debajo, sin mover nada al aparecer (§5 «Enlaces y botones»; PRINCIPIOS, respuesta de un control) */
.compartir { position: relative; display: inline-flex; }
.compartir-aviso { position: absolute; left: 0; top: calc(100% - var(--e-2)); white-space: nowrap; font-size: var(--t-dato); letter-spacing: 0.02em; color: var(--color-bronce-claro);
  opacity: 0; pointer-events: none; transition: opacity var(--mov-estado) var(--curva-ease-out); }
.compartir-aviso.visible { opacity: 1; }

/* ── Pantalla partida (Sobre y Bosphorus; §4.5 y §4.7, la de Clases de Firma): dos fotos a sangre y el título sobre la
   unión; al pie, la banda de bloques del color de lo que sigue (§6.4) ─────────────────────────────────────────────── */
.partida { position: relative; height: 100vh; min-height: 620px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
@supports (height: 100svh) { .partida { height: 100svh; } }
.partida .foto { height: 100%; }
.foto--bn img { filter: grayscale(1); }
.partida-titulo { position: absolute; left: var(--margen); right: var(--margen); top: 44%; z-index: 3; margin: 0 auto; max-width: 13em; transform: translateY(-50%); text-align: center; pointer-events: none; text-shadow: 0 2px 30px var(--velo-fuerte);
  font-size: min(var(--t-titulo), 12.5vw); } /* a 320 px, 40 px (§2: 40–44 en el celular): «AMBASSADOR» cabe y «SOBRE JOSUÉ» va en una línea */
.partida-velo { position: absolute; left: 0; right: 0; top: 44%; height: 44%; transform: translateY(-50%); z-index: 2; pointer-events: none; background: radial-gradient(ellipse 42% 50% at 50% 50%, var(--velo-fuerte), var(--velo-medio) 55%, var(--velo-0)); }
.partida-cabeza-velo { position: absolute; left: 0; right: 0; top: 0; height: 190px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--velo-letra), var(--velo-0)); }
.pagina .partida .firma-nombre { color: var(--color-texto); } /* sobre las fotos, en marfil (Firma) */
.partida .bloques { z-index: 4; }
/* Fotos con la cara a la altura del centro (Bosphorus): el título y su velo, en el tercio de arriba (sobre la frente y el
   fondo; nunca sobre ojos, nariz ni boca). En el celular vuelve a la unión. */
.partida--titulo-alto .partida-titulo, .partida--titulo-alto .partida-velo { top: 21%; }
.bloques--fondo { --bloques-color: var(--color-fondo); }
.acciones-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-6); padding-top: var(--e-6); padding-bottom: var(--e-10); }
.acciones-pie { padding-left: calc(var(--margen) - (var(--boton-caja) - var(--boton-anillo)) / 2); } /* el anillo, alineado con el margen */

/* ── Sobre Josué: quién es (en la letra de títulos, como la entrada del referente), los tres pilares en columnas, los
   estilos y las ciudades ─────────────────────────────────────────────────────────────────────────────────────── */
.sobre-quien { padding-top: var(--e-10); padding-bottom: var(--e-9); }
.sobre-intro { grid-column: 3 / 12; font-family: var(--fuente-titulos); font-size: clamp(22px, 1.95vw, 28px); line-height: 1.5; text-wrap: pretty; }
.sobre-pilares { padding-bottom: var(--e-9); }
.sobre-pilares > .etiqueta { grid-column: 1 / 13; margin-bottom: var(--e-6); }
.pilares { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-7); }
.pilares li { position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding-top: var(--e-6); }
.pilares .num { font-size: var(--t-etiqueta); letter-spacing: 0.1em; color: var(--color-bronce); }
.pilares .titulo-3 { font-size: var(--t-lista); text-transform: uppercase; letter-spacing: 0.03em; }
.sobre-datos { padding-bottom: var(--e-7); row-gap: var(--e-8); }
.sobre-datos .etiqueta { margin-bottom: var(--e-3); }
.sobre-estilos { grid-column: 1 / 6; padding-right: var(--e-7); }
.sobre-ciudades { grid-column: 6 / 13; }
.estilos li { position: relative; padding: var(--e-3) 0; font-family: var(--fuente-titulos); font-size: var(--t-bajada); line-height: 1.35; }

/* ── Bosphorus: el logo oficial con su nota y el enlace a la marca a un lado; los tres frentes al otro ─────────── */
.bosphorus-cuerpo { padding-top: var(--e-10); padding-bottom: var(--e-8); align-items: start; }
.bosphorus-marca { grid-column: 1 / 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); padding-right: var(--e-7); }
.bosphorus-logo { width: 208px; height: auto; margin-bottom: var(--e-2); } /* el archivo oficial, a su proporción (833×400) */
.bosphorus-frentes { grid-column: 5 / 13; }
.bosphorus-frentes > .etiqueta { margin-bottom: var(--e-3); }
.frentes li { position: relative; display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--e-5); padding: var(--e-5) 0; }
.frentes .titulo-3 { font-size: var(--t-lista); text-transform: uppercase; letter-spacing: 0.03em; }

/* ── Escuchar (§4.8, la galería del referente): las grabaciones en tres columnas con el álbum que viene, y el mosaico
   de fotos de tres columnas; cada una con el hilo de 1 px de su tipo ─────────────────────────────────────────── */
.escuchar-bloque { padding-top: var(--e-9); }
.escuchar-bloque:first-child { padding-top: var(--e-10); }
.escuchar-bloque:last-child { padding-bottom: var(--e-10); }
.escuchar-bloque > .etiqueta { margin-bottom: var(--e-6); }
.grabaciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-7) 44px; }
.grabaciones > li { display: flex; }
.grabaciones .grabacion { flex: 1; }
.album { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); border: var(--hilo) solid var(--hilo-bronce-fuerte); padding: var(--e-5); }
.album-caratula { position: relative; align-self: stretch; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: var(--e-3); overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, var(--color-foco), var(--color-fondo) 75%); }
.album-disco, .album-disco::before { position: absolute; border: var(--hilo) solid var(--hilo-bronce-fuerte); border-radius: 50%; }
.album-disco { width: 46%; aspect-ratio: 1; }
.album-disco::before { content: ""; inset: 34%; }
.album-nombre { position: relative; font-family: var(--fuente-titulos); font-size: clamp(22px, 2vw, 30px); line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; text-shadow: 0 0 18px var(--velo-fuerte); }
.album-etiqueta { display: flex; align-items: center; gap: var(--e-2); }
.album-proyecto { display: inline-flex; align-items: center; min-height: var(--toque); margin-top: calc(var(--e-2) * -1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--hilo-gris);
  transition: color var(--mov-enlace) var(--curva-ease-out), text-decoration-color var(--mov-enlace) var(--curva-ease-out); }
.album-proyecto:hover, .album-proyecto:focus-visible { color: var(--color-bronce-claro); text-decoration-color: currentColor; }
.galeria { columns: 3; column-gap: 44px; }
.galeria-item { break-inside: avoid; margin-bottom: 44px; border: var(--hilo) solid var(--hilo-color); padding: var(--e-5); }
.galeria-foto { position: relative; display: block; overflow: hidden; background: var(--color-superficie); }
.galeria-foto img { width: 100%; height: auto; transition: transform var(--mov-enlace) var(--curva-ease-out); }
.galeria-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px var(--brillo-foto); }
.galeria-foto:hover img, .galeria-foto:focus-visible img { transform: scale(1.03); }
.galeria-foto:focus-visible { outline-offset: 6px; } /* por fuera: la foto que crece (1,03) taparía un contorno por dentro */
.galeria-foto, .visor button { -webkit-tap-highlight-color: transparent; } /* el resalte azul del toque no se pinta sobre la foto */

/* ── El visor de fotos (§5 «Foto ampliada»: al instante, fondo casi negro al 80 %); el «×» en el sitio del «Menú» ── */
.visor { position: fixed; inset: 0; z-index: var(--z-visor); display: grid; place-items: center; background: var(--velo-visor); }
.cabecera.bajo-visor { visibility: hidden; }
.visor-figura { display: flex; flex-direction: column; width: min(75vw, 1080px); height: 80vh; margin: 0; }
@supports (height: 100svh) { .visor-figura { height: 80svh; } }
.visor-escena { position: relative; flex: 1; min-height: 0; touch-action: pan-y pinch-zoom; }
.visor-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.visor-escena.vuelve .visor-img { transition: transform var(--mov-estado) var(--curva-ease-out); }
.visor-carga { position: absolute; left: 50%; top: 50%; width: var(--boton-anillo); height: var(--boton-anillo); margin: calc(var(--boton-anillo) / -2) 0 0 calc(var(--boton-anillo) / -2); display: none; }
.visor-carga .anillos { inset: 0; }
.visor-carga .anillos i:not(.gira) { display: none; }
.visor-escena[data-estado="cargando"] .visor-carga, .visor-escena[data-estado="cargando"] .visor-carga .gira { display: block; }
.visor-pie { padding-top: var(--e-3); text-align: center; font-size: var(--t-dato); letter-spacing: 0.12em; color: var(--color-texto-suave); }
.visor-flecha { position: absolute; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin-top: -36px; color: var(--color-texto); transition: color var(--mov-enlace) var(--curva-ease-out); }
.visor-flecha .flecha-volver { width: 54px; height: 30px; transition: transform var(--mov-titulo-tarjeta) var(--curva-ease-out); }
.visor-flecha:hover, .visor-flecha:focus-visible { color: var(--color-bronce-claro); }
.visor-anterior { left: calc(var(--margen) - 10px); }
.visor-siguiente { right: calc(var(--margen) - 10px); }
.visor-anterior:hover .flecha-volver, .visor-anterior:focus-visible .flecha-volver { transform: translateX(-5px); }
.visor-siguiente:hover .flecha-volver, .visor-siguiente:focus-visible .flecha-volver { transform: translateX(5px); }
.visor-cerrar { position: absolute; top: 25px; right: calc(var(--margen) - (var(--boton-caja) - var(--boton-anillo)) / 2); }

/* ── Clases (`clases()` de Firma): cómo enseño, el selector de lugar, los planes (normal · pasar · marcado · elegido en
   bermellón, uno de los cuatro sitios del acento), el resumen, las reglas y «¿Para una institución?» ─────────────── */
.ensena { padding-top: var(--e-10); padding-bottom: var(--e-9); }
.ensena-cabeza, .reglas-cabeza, .institucion-cabeza { grid-column: 1 / 5; padding-right: var(--e-7); }
.ensena-lista { grid-column: 5 / 13; }
.ensena-lista li { position: relative; display: grid; grid-template-columns: 3em 1fr; gap: var(--e-4); padding: var(--e-5) 0; font-family: var(--fuente-titulos); font-size: var(--t-titulo-3); line-height: 1.35; text-wrap: balance; }
.ensena-lista .num { font-family: var(--fuente-texto); font-size: var(--t-etiqueta); letter-spacing: 0.1em; color: var(--color-bronce); padding-top: 0.6em; }
.planes { padding-bottom: var(--e-10); }
.planes-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap; margin-bottom: var(--e-7); }
.planes-lugar { display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; }
/* Etapa 6: con la cuenta de un alumno que tiene clases por reservar, el camino a Reservar antes de los planes (el anillo de
   siempre; sin la cuenta, la página no cambia). */
.planes-con-saldo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-6); margin-bottom: var(--e-7); padding: var(--e-3) 0; border-top: var(--hilo) solid var(--hilo-bronce); border-bottom: var(--hilo) solid var(--hilo-bronce); }
.planes-con-saldo .dato { color: var(--color-texto); font-size: var(--t-chico); }
.selector { display: flex; gap: var(--e-6); margin: 0; padding: 0; border: 0; min-width: 0; }
.selector-opcion { position: relative; display: inline-flex; }
/* El radio de verdad, transparente encima de su etiqueta: el toque y el clic caen en él (y el teclado, como siempre) */
.selector input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.selector label { position: relative; display: inline-flex; align-items: center; min-height: var(--toque); font-family: var(--fuente-titulos); font-size: clamp(18px, 1.6vw, 22px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-texto-suave); transition: color var(--mov-enlace) var(--curva-ease-out); }
.selector label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: var(--hilo); background: var(--color-bronce); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--mov-subrayado) var(--curva-ease-out); }
.selector input:checked + label, .selector-opcion:hover label { color: var(--color-texto); }
.selector input:checked + label::after, .selector-opcion:hover label::after { transform: scaleX(1); }
.selector input:focus-visible + label { outline: 2px solid var(--color-bronce-claro); outline-offset: 4px; }
.boton-linea.selector-enviar { display: none; } /* sin JavaScript se ve (sin-js.css): manda el lugar y vuelve a #planes */
.planes-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6) var(--e-5) var(--e-5); border: var(--hilo) solid var(--hilo-bronce-fuerte); container-type: inline-size;
  transition: border-color var(--mov-estado) var(--curva-ease-out), background-color var(--mov-estado) var(--curva-ease-out); }
.plan:hover { border-color: var(--color-bronce-claro); }
.plan.elegido { border-color: var(--color-acento); background: var(--acento-velo); }
.plan-marca { position: absolute; top: -11px; left: var(--e-5); padding: 2px var(--e-2); background: var(--color-fondo); color: var(--color-bronce); font-size: var(--t-mini); font-weight: 600; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; line-height: 1.5; }
.plan.elegido .plan-marca { color: var(--color-acento); }
.plan-nombre { font-family: var(--fuente-titulos); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.03em; font-weight: var(--peso-titulo); }
.plan-cuenta { font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-texto-suave); }
.plan-meta { font-size: var(--t-chico); line-height: 1.6; min-height: 4.8em; }
.plan-incluye { display: flex; flex-direction: column; gap: var(--e-1); padding-top: var(--e-3); border-top: var(--hilo) solid var(--hilo-gris-tenue); }
.plan-incluye li { position: relative; padding-left: var(--e-4); font-size: var(--t-dato); line-height: 1.55; color: var(--color-texto-suave); text-wrap: pretty; }
.plan-incluye li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 8px; height: var(--hilo); background: var(--color-bronce); }
/* El precio del lugar elegido, en bermellón (Firma); la cifra nunca se parte: si la tarjeta es estrecha, baja de cuerpo
   («COP 1,320,000» mide unas 7 em). */
.plan-precio { margin-top: auto; padding-top: var(--e-4); font-family: var(--fuente-titulos); font-size: min(clamp(26px, 2.2vw, 32px), 13.5cqi); color: var(--color-acento); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.boton-linea {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--toque); padding: 0 var(--e-5);
  border: var(--hilo) solid var(--color-bronce); color: var(--color-texto); font-family: var(--fuente-titulos); font-size: var(--t-chico); text-transform: uppercase; letter-spacing: var(--espaciado-versales);
  transition: border-color var(--mov-estado) var(--curva-ease-out), color var(--mov-estado) var(--curva-ease-out), background-color var(--mov-estado) var(--curva-ease-out);
}
.boton-linea:hover, .boton-linea:focus-visible { border-color: var(--color-bronce-claro); color: var(--color-bronce-claro); }
.boton-linea:active { transform: scale(0.96); }
.boton-linea[aria-pressed="true"] { border-color: var(--color-acento); color: var(--color-acento); }
/* Etapa 5: el Primer golpe de quien ya lo tomó (con su cuenta): «Ya la tomaste» en el sitio de «Elegir», quieto (no es un
   control), en el gris del texto; y, si sigue en plazo, su descuento debajo. */
.plan--tomada { border-color: var(--hilo-gris-tenue); }
.plan--tomada:hover { border-color: var(--hilo-gris-tenue); }
.plan-tomada { display: inline-flex; align-items: center; justify-content: center; min-height: var(--toque); padding: 0 var(--e-5); border: var(--hilo) dashed var(--color-texto-suave); color: var(--color-texto-suave); }
.plan-descuento { margin-top: calc(var(--e-1) * -1); color: var(--color-texto); }
.resumen-alterno { flex: 1 0 100%; }
.planes-resumen .resumen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-7); margin-top: var(--e-7); padding-top: var(--e-6); border-top: var(--hilo) solid var(--hilo-bronce); }
.resumen-frase { flex: 1 1 22em; font-family: var(--fuente-titulos); font-size: var(--t-lista); line-height: 1.35; text-wrap: balance; }
.resumen-frase strong { font-weight: 560; }
.resumen-reservar { flex: none; }
.resumen-siguiente { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.reglas { padding-bottom: var(--e-9); }
.reglas-cuerpo { grid-column: 5 / 13; }
.reglas-lista li { position: relative; display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--e-5); padding: var(--e-5) 0; }
.reglas-lista .versales { padding-top: 0.3em; color: var(--color-bronce-claro); }
.reglas-cuerpo > .enlace { margin-top: var(--e-4); }
.institucion { padding-top: var(--e-9); padding-bottom: var(--e-10); }
.institucion-texto { grid-column: 5 / 12; }
.institucion-texto .con-etiqueta { margin-top: var(--e-6); margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }

/* ── Contratar (`contratar()` de Firma, §4.9): a la izquierda el título, la bajada y «Escribir por WhatsApp»; debajo,
   «Disponible para» (los ocho formatos como botones de elección) y el formulario de línea fina en dos columnas, con el
   botón redondo «Enviar» asomado hacia la foto (como el «Send» del referente); a la derecha, la foto en blanco y negro.
   Estados: errores bajo cada campo (el rojo claro de la marca), enviando (el tercer anillo), enviado y no enviado ──── */
.contratar-reja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); padding-bottom: var(--e-10); }
.contratar-cabeza { grid-column: 1 / 9; padding-top: var(--e-6); }
.contratar-bajada { margin-top: var(--e-4); font-size: var(--t-bajada); color: var(--color-texto); }
.contratar-whatsapp { margin-top: var(--e-4); }
.whatsapp { flex-wrap: wrap; column-gap: var(--e-2); }
.whatsapp::after { display: none; }
.whatsapp .whatsapp-texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--marfil-tenue); transition: text-decoration-color var(--mov-subrayado) var(--curva-ease-out); }
.whatsapp:hover .whatsapp-texto, .whatsapp:focus-visible .whatsapp-texto { text-decoration-color: currentColor; }
.whatsapp .icono-whatsapp { width: 18px; height: 18px; }
.whatsapp-nota { margin-left: var(--e-2); font-size: var(--t-mini); letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-texto-suave); }
.formulario { grid-column: 1 / 9; margin-top: var(--e-7); }
.contratar-form { color-scheme: dark; } /* el autocompletado y los controles del sistema, en oscuro */
.formatos, .campos { min-width: 0; margin: 0; padding: 0; border: 0; }
.formatos { margin-bottom: var(--e-7); }
.formatos legend { padding: 0; margin-bottom: var(--e-4); }
.formatos-opciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
/* Botón de formato: el radio de verdad, transparente, encima de su etiqueta (como el selector de Clases); el punto del
   elegido va en el relleno de la izquierda, así ningún botón cambia de ancho al elegirlo. */
.formato-opcion { position: relative; display: inline-flex; }
.formato-opcion input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.formato-opcion label {
  position: relative; display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 var(--e-4) 0 var(--e-5);
  border: var(--hilo) solid var(--color-borde-campo); font-size: var(--t-dato); letter-spacing: 0.02em; color: var(--color-texto);
  transition: border-color var(--mov-estado) var(--curva-ease-out), background-color var(--mov-estado) var(--curva-ease-out), color var(--mov-estado) var(--curva-ease-out);
}
.formato-opcion label::before { content: ""; position: absolute; left: var(--e-2); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--color-bronce); opacity: 0; transition: opacity var(--mov-estado) var(--curva-ease-out); }
.formato-opcion input:hover + label { border-color: var(--color-bronce-claro); }
.formato-opcion input:checked + label { border-color: var(--color-bronce); background: var(--color-superficie-alta); color: var(--color-bronce-claro); }
.formato-opcion input:checked + label::before { opacity: 1; }
.formato-opcion input:focus-visible + label { outline: 2px solid var(--color-bronce-claro); outline-offset: 3px; }
.formatos[data-error] .formato-opcion label { border-color: var(--color-error); }
.formato-opcion input:disabled { cursor: progress; }
.formato-opcion input:disabled + label { opacity: 0.6; }
/* Campo de línea fina (y el mensaje, en su cuadro) */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
.campos-col { display: flex; flex-direction: column; min-width: 0; }
.campo { display: flex; flex-direction: column; padding-bottom: var(--e-4); }
.campo label { padding: var(--e-2) 0 var(--e-1); font-family: var(--fuente-titulos); font-size: var(--t-chico); text-transform: uppercase; letter-spacing: var(--espaciado-versales); color: var(--color-texto); }
.req { margin-left: 2px; color: var(--color-bronce); }
.campo input, .campo textarea {
  width: 100%; min-height: var(--toque); padding: var(--e-2) 0; border: 0; border-bottom: var(--hilo) solid var(--color-borde-campo); border-radius: 0;
  background: transparent; color: var(--color-texto); font: inherit; font-size: var(--t-campo);
  transition: border-color var(--mov-estado) var(--curva-ease-out), box-shadow var(--mov-estado) var(--curva-ease-out);
}
.campo textarea { min-height: 236px; margin-top: var(--e-2); padding: var(--e-3); border: var(--hilo) solid var(--color-borde-campo); resize: vertical; line-height: 1.6; }
.campo input:hover, .campo textarea:hover { border-color: var(--color-texto-suave); }
.campo [aria-invalid="true"] { border-color: var(--color-error); }
.campo input:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--color-bronce-claro); box-shadow: 0 1px 0 0 var(--color-bronce-claro); }
.campo textarea:focus-visible { box-shadow: inset 0 0 0 1px var(--color-bronce-claro); }
.campo :disabled { color: var(--color-texto-suave); -webkit-text-fill-color: var(--color-texto-suave); cursor: progress; }
/* Lo que pone el autocompletado del navegador, en los colores de la página */
.campo input:-webkit-autofill { -webkit-text-fill-color: var(--color-texto); caret-color: var(--color-texto); box-shadow: inset 0 0 0 100vmax var(--color-fondo); }
.campo input:-webkit-autofill:focus-visible { box-shadow: inset 0 0 0 100vmax var(--color-fondo), 0 1px 0 0 var(--color-bronce-claro); }
.campo-error { margin-top: var(--e-2); font-size: var(--t-dato); line-height: 1.5; color: var(--color-error); }
/* Casilla de autorización */
.autorizacion-envoltura { display: flex; flex-direction: column; }
.autorizacion { display: flex; gap: var(--e-3); align-items: flex-start; margin-top: var(--e-4); max-width: 40em; font-size: var(--t-dato); line-height: 1.6; color: var(--color-texto-suave); }
.autorizacion input {
  flex: none; display: grid; place-items: center; width: var(--e-5); height: var(--e-5); margin: var(--e-2) 0 0; appearance: none; -webkit-appearance: none;
  border: var(--hilo) solid var(--color-borde-campo); background: transparent; cursor: pointer;
  transition: border-color var(--mov-estado) var(--curva-ease-out), background-color var(--mov-estado) var(--curva-ease-out);
}
.autorizacion input::after { content: ""; width: 10px; height: 5px; border-left: 1.5px solid var(--color-fondo); border-bottom: 1.5px solid var(--color-fondo); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.autorizacion input:checked { background: var(--color-bronce); border-color: var(--color-bronce); }
.autorizacion input:checked::after { opacity: 1; }
.autorizacion input:hover { border-color: var(--color-bronce-claro); }
.autorizacion input:focus-visible { outline: 2px solid var(--color-bronce-claro); outline-offset: 3px; }
.autorizacion input[aria-invalid="true"] { border-color: var(--color-error); }
.autorizacion input:disabled { cursor: progress; opacity: 0.6; }
.autorizacion label { min-height: var(--toque); padding: var(--e-1) 0; cursor: pointer; }
.autorizacion-politica { padding-left: calc(var(--e-5) + var(--e-3)); }
.autorizacion-politica a { display: inline-flex; align-items: center; min-height: var(--toque); } /* el enlace de texto de la app (.enlace-texto), con su área de toque */
.autorizacion-envoltura .campo-error { padding-left: calc(var(--e-5) + var(--e-3)); }
/* Campo trampa: fuera de la vista (los robots lo llenan) */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* «No enviado» y el límite: el aviso con WhatsApp, sobre el botón, con lo escrito intacto */
.aviso-envio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); margin-top: var(--e-5); padding-top: var(--e-5); border-top: var(--hilo) solid var(--hilo-bronce); }
.aviso-texto { max-width: 26em; font-family: var(--fuente-titulos); font-size: var(--t-titulo-3); line-height: 1.25; text-wrap: pretty; }
.aviso-envio:focus-visible { outline-offset: 8px; }
/* El pie del formulario: el resumen de errores y «Enviar» (enviando: el tercer anillo gira; deshabilitado: cursor de espera) */
.form-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); margin-top: var(--e-5); }
.resumen-error { font-size: var(--t-dato); line-height: 1.5; color: var(--color-error); }
.form-pie .redondo { margin-right: calc(var(--toque) * -1); }
.boton-enviar .redondo-etiqueta { font-size: var(--t-chico); }
.redondo.enviando .anillos i.gira { display: block; }
.redondo.enviando .redondo-etiqueta { font-family: var(--fuente-texto); font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.12em; }
.redondo[disabled] { cursor: progress; }
/* Enviado: «Gracias…», la marca de EJEMPLO si el envío es simulado, y lo que sigue */
.enviado { padding: var(--e-7) 0; border-top: var(--hilo) solid var(--hilo-bronce); }
.enviado-gracias { max-width: 16em; }
.enviado-gracias:focus-visible { outline-offset: 8px; }
.enviado-ejemplo { max-width: 40em; margin-top: var(--e-4); }
.enviado .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); margin-top: var(--e-6); }
.contratar-foto { grid-column: 9 / 13; grid-row: 1 / span 2; align-self: start; margin-top: var(--e-11); aspect-ratio: 2 / 3; }
.contratar-foto img { filter: grayscale(1); }

/* ── Páginas legales: la cabeza de las interiores, la marca de borrador y el texto en una columna para leer ──── */
.legal-reja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-6); padding-top: var(--e-2); padding-bottom: var(--e-10); }
.legal-cabeza { grid-column: 1 / 13; margin-bottom: var(--e-8); }
.legal-cabeza .titulo { max-width: 14em; }
.legal-vigencia { margin-top: var(--e-5); }
.legal-borrador { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); font-size: var(--t-mini); font-weight: 600; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; color: var(--color-bronce-claro); }
.legal-prosa { grid-column: 3 / 11; }
.legal-prosa h2 { margin: var(--e-8) 0 var(--e-4); font-family: var(--fuente-titulos); font-weight: var(--peso-titulo); font-size: var(--t-lista); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.03em; text-wrap: balance; }
.legal-prosa h2:first-child { margin-top: 0; }
.legal-prosa p, .legal-prosa li { max-width: 38em; text-wrap: pretty; }
.legal-prosa p + p, .legal-prosa p + ul, .legal-prosa p + ol, .legal-prosa ul + p, .legal-prosa ol + p, .legal-prosa ul + ul { margin-top: var(--e-4); }
.legal-prosa li { position: relative; padding-left: var(--e-5); }
.legal-prosa li + li { margin-top: var(--e-2); }
.legal-prosa ul > li::before { content: ""; position: absolute; left: 0; top: 0.9em; width: 10px; height: var(--hilo); background: var(--color-bronce); }
.legal-prosa ol { counter-reset: legal; }
.legal-prosa ol > li { counter-increment: legal; }
.legal-prosa ol > li::before { content: counter(legal) "."; position: absolute; left: 0; color: var(--color-bronce); font-variant-numeric: tabular-nums lining-nums; }
.legal-prosa strong { font-weight: 600; }
.enlace-texto { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--hilo-bronce-fuerte);
  transition: color var(--mov-enlace) var(--curva-ease-out), text-decoration-color var(--mov-enlace) var(--curva-ease-out); }
.enlace-texto:hover, .enlace-texto:focus-visible { color: var(--color-bronce-claro); text-decoration-color: currentColor; }
.correo-ejemplo { color: var(--color-texto-suave); }

/* ── Menú: la batería despiezada (§4.2 y §5) ─────────────────────────── */
.menu-capa { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--color-fondo); overflow: hidden; color: var(--color-texto); will-change: transform; }
.menu-capa::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 55% 0%, var(--brillo-foco), var(--brillo-foco-0) 70%); }
.menu-cerrar { position: absolute; top: 25px; right: calc(var(--margen) - (var(--boton-caja) - var(--boton-anillo)) / 2); z-index: 3; }
.menu-mesa { position: absolute; left: var(--margen); top: var(--e-cabeza); width: 1340px; height: 690px; transform-origin: 0 0; }
.pieza { position: absolute; }
/* Posición de cada pieza en la mesa de 1340×690 (escritorio) y su ancho (el del dibujo + 16) */
.pieza[data-pieza="bombo"] { left: 10px; top: 140px; width: 396px; }
.pieza[data-pieza="redoblante"] { left: 450px; top: 0; width: 256px; }
.pieza[data-pieza="tom"] { left: 770px; top: 10px; width: 216px; }
.pieza[data-pieza="platillo"] { left: 990px; top: 10px; width: 356px; }
.pieza[data-pieza="tomPiso"] { left: 455px; top: 340px; width: 216px; }
.pieza[data-pieza="hihat"] { left: 740px; top: 250px; width: 206px; }
.pieza[data-pieza="banco"] { left: 990px; top: 300px; width: 166px; }
.pieza[data-pieza="baquetas"] { left: 1165px; top: 230px; width: 186px; }
.pieza a { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e-3); color: var(--color-texto); }
.pieza-nombre { position: relative; display: inline-block; font-family: var(--fuente-titulos); font-size: var(--t-lista); line-height: 1.3; font-weight: 440; white-space: nowrap; transition: transform var(--mov-pieza) var(--curva-ease-out), color var(--mov-pieza) var(--curva-ease-out); }
.pieza svg { overflow: visible; }
.pieza .trazo, .pieza .eco { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.pieza .trazo { stroke: var(--color-texto-suave); transition: stroke var(--mov-pieza) var(--curva-ease-out); }
.pieza .eco { stroke: var(--color-texto); opacity: 0; transform: translate(0, 0); transition: transform var(--mov-pieza) var(--curva-ease-out), opacity var(--mov-pieza) var(--curva-ease-out); }
.pieza a:hover .trazo, .pieza a:focus-visible .trazo { stroke: var(--color-texto); }
.pieza a:hover .eco, .pieza a:focus-visible .eco { opacity: 1; transform: translate(7px, 7px); }
.pieza.eco-arriba a:hover .eco, .pieza.eco-arriba a:focus-visible .eco { transform: translate(7px, -7px); }
.pieza a:hover .pieza-nombre, .pieza a:focus-visible .pieza-nombre { transform: translateX(5px); color: var(--color-blanco); }
.pieza a[aria-current="page"] .trazo { stroke: var(--color-bronce); }
.pieza a[aria-current="page"] .pieza-nombre { color: var(--color-bronce-claro); }
.pieza a:focus-visible { outline-offset: 8px; }
.menu-pie { position: absolute; left: var(--margen); right: var(--margen); bottom: 30px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.menu-pie .enlace { font-family: var(--fuente-titulos); font-size: var(--t-esquina); text-transform: uppercase; letter-spacing: var(--espaciado-versales); color: var(--color-texto-suave); }

/* ── Escritorio: el texto bajo la portada deja libre la columna del botón «Menú» fijo ── */
@media (min-width: 768px) {
  .proximo-cuerpo, .destacado-texto, .sobre-texto, .formatos-lista { padding-right: var(--libre-menu); }
  /* Proyectos, cada proyecto y Trayectoria: todo termina a 170 px del borde, como la portada */
  .proyectos, .proyecto-pagina, .trayectoria, .agenda, .concierto-pagina, .escuchar-pagina, .legal, .contratar { padding-right: calc(var(--margen) + var(--libre-menu)); }
  /* Sobre y Bosphorus: lo de debajo de la pantalla partida, también */
  .pagina-partida .seccion { padding-right: calc(var(--margen) + var(--libre-menu)); }
  .sobre-texto { grid-column: 8 / 13; }
  .programa-lista { padding-right: calc(var(--libre-menu) - var(--e-5)); } /* el último plan ya trae sus 24 px a la derecha */
}

/* ── Tableta y portátil: con la columna libre, los cuatro planes al lado de la intro quedan estrechos ── */
@media (max-width: 1300px) {
  .programa-intro { grid-column: 1 / 13; padding-right: 0; margin-bottom: var(--e-7); }
  .programa-lista { grid-column: 1 / 13; }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .disponible-cabeza { grid-column: 1 / 13; padding-right: 0; }
  .formatos-lista { grid-column: 1 / 13; margin-top: var(--e-7); }
}
/* Clases (Firma, ≤ 1100 px): los planes en 2 × 2; aquí hasta 1200, porque la columna del «Menú» les quita 120 px */
@media (max-width: 1200px) and (min-width: 768px) {
  .planes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-7); }
}
/* Contratar: con la columna libre, el formulario al lado de la foto queda estrecho; el formulario a lo ancho y la foto
   debajo, en la mitad */
@media (max-width: 1000px) and (min-width: 768px) {
  .contratar-cabeza, .formulario { grid-column: 1 / 13; }
  .contratar-foto { grid-column: 1 / 7; grid-row: auto; margin-top: var(--e-8); }
  .form-pie .redondo { margin-right: 0; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .programa-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e-7); }
  .formatos-lista { grid-template-columns: 1fr; }
  .proximo-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .proximo-acciones { grid-column: 1 / -1; }
  /* El pie de abajo: el crédito de las fotos en su propia fila (entre las legales y los idiomas quedaba de una palabra por
     línea: remate de la etapa 6, los cortes de tableta) */
  .pie-fila--chica { grid-template-columns: 1fr auto; }
  .pie-fila--chica > .pie-credito { grid-column: 1 / -1; grid-row: 2; }
  .pie-fila--chica > .pie-legal:last-child { grid-column: 2; grid-row: 1; }
}

/* ── Celular (≤ 767 px, una columna; §3: márgenes de 20 px, anillos de 80 px) ── */
@media (max-width: 767px) {
  :root { --margen: var(--margen-celular); --t-texto: 15px; }
  .cabecera { top: 26px; }
  .firma-nombre { font-size: var(--t-bajada); }
  .firma-oficio { letter-spacing: 0.1em; white-space: nowrap; }
  /* Portada: video 22 a sangre con velo abajo y el nombre a lo ancho (§6.5: ≈ 90 %) */
  .hero-video { right: 0; left: 0; width: 100%; }
  .hero-video::after { background: linear-gradient(to bottom, var(--velo-0) 38%, var(--velo-medio) 62%, var(--velo-pie) 100%); }
  .hero-retrato, .hero-velo, .hero-pie-velo { display: none; }
  .hero-cabeza-velo { height: 220px; background: linear-gradient(to bottom, var(--velo-fuerte), var(--velo-medio) 45%, var(--velo-0)); }
  .nombre { top: auto; bottom: 150px; transform: none; font-size: var(--nombre-tam, var(--nombre-tam-celular)); }
  .lema { left: var(--margen); right: var(--margen); top: auto; bottom: 96px; max-width: 24em; font-size: var(--t-mini); }
  .hero-esquina-ii, .hero-esquina-id { bottom: 22px; }
  .hero-centro { bottom: 22px; }
  /* el retrato mide lo que su foto (120vw de ancho): sin la franja oscura vacía que dejaba encima la pantalla entera */
  .retrato-celular { display: block; position: relative; height: calc(120vw * 1343 / 1080); overflow: hidden; isolation: isolate;
    background: radial-gradient(ellipse 90% 55% at 50% 0%, var(--color-foco) 0%, var(--color-fondo) 70%); }
  .retrato-celular .foto { position: absolute; left: 50%; bottom: 0; width: 120vw; max-width: 1080px; aspect-ratio: 1080 / 1343; transform: translateX(-46%); background: transparent; mix-blend-mode: lighten; }
  /* El retrato delante y el video detrás (portada.celular, decisión de Juanchi del 2026-11-11): R3 «retrato», subido, con
     la cara entera sobre el nombre; R1 «retrato-abajo», apoyado abajo, con la cara a la altura del nombre */
  .hero--con-retrato .hero-retrato { display: block; left: 50%; top: auto; bottom: 190px; width: 120vw; max-width: 1080px; height: auto; aspect-ratio: 1080 / 1343; transform: translateX(-46%); z-index: 1; }
  .hero--celular-retrato-abajo .hero-retrato { bottom: 0; }
  .hero--con-retrato .hero-video::after { background: linear-gradient(to bottom, var(--velo-medio) 0%, var(--velo-fuerte) 55%, var(--velo-pie) 100%); }
  .reja { display: block; }
  .proximo { padding-top: var(--e-8); padding-bottom: var(--e-8); }
  .proximo-cuerpo { grid-template-columns: 1fr; gap: var(--e-5); }
  .proximo-acciones { justify-content: space-between; flex-wrap: wrap; row-gap: var(--e-4); }
  .proximo-cabeza { padding-right: var(--boton-caja); } /* la etiqueta EJEMPLO no queda bajo el botón «Menú» fijo */
  .proximo-vacio { grid-template-columns: 1fr; }
  .proximo-vacio .proximo-acciones { justify-content: flex-start; column-gap: var(--e-6); }
  .destacado { padding-top: var(--e-9); padding-bottom: var(--e-9); }
  .destacado-foto { width: 78%; }
  .destacado-texto { margin-top: -44px; margin-left: 0; } /* el −40 px de escritorio (título montado sobre la foto) lo sacaba del borde */
  .destacado-cuerpo { margin-left: 0; }
  .sobre { padding-top: var(--e-6); }
  .sobre-foto { aspect-ratio: 4 / 5; }
  .sobre-texto { margin-top: -48px; }
  .sangre { height: 500px; }
  .programa-intro { margin-bottom: var(--e-7); }
  .programa-lista { grid-template-columns: 1fr; }
  .programa-plan { border-left: 0; border-top: var(--hilo) solid var(--hilo-tinta); padding: var(--e-5) 0; display: grid; grid-template-columns: 2.4em 1fr; column-gap: var(--e-3); row-gap: var(--e-2); }
  .programa-plan .programa-num { grid-row: 1 / span 4; padding-top: var(--e-2); }
  .programa-plan > :not(.programa-num) { grid-column: 2; }
  /* la etiqueta en su línea, encima de la cifra, en los cuatro planes y los dos idiomas: «COP 1,020,000» y «FROM · AT THE
     STUDIO» no caben en una línea a 375 px y las filas tienen que seguir alineadas */
  .programa-precio { margin: 0; padding: var(--e-1) 0 0; font-size: var(--t-bajada); }
  .programa-precio small { margin-bottom: var(--e-1); }
  .formatos-lista { grid-template-columns: 1fr; margin-top: var(--e-7); }
  .pie { padding-top: var(--e-7); }
  .pie-fila { grid-template-columns: 1fr; gap: var(--e-5); }
  .pie-centro, .pie-redes { justify-content: flex-start; }
  .pie-fila--chica { grid-template-columns: 1fr; }
  .pagina-cabeza { height: 140px; }
  .proximamente-reja { display: block; padding-top: var(--e-4); }
  .proximamente-foto { margin-top: var(--e-8); width: 82%; }
  .proximamente .acciones { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
  .proximamente .acciones > .enlace { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / 2); } /* el anillo de 80 px en su caja de 100 queda alineado con el margen */
  /* Proyectos: el título encima del filtro, los cuatro formatos en una línea (Firma y el referente); una columna */
  .vitrina-cabeza { flex-direction: column; align-items: flex-start; gap: var(--e-6); }
  .filtro { column-gap: var(--e-3); row-gap: var(--e-2); }
  .tarjetas { grid-template-columns: 1fr; gap: var(--e-6); padding-top: var(--e-8); padding-bottom: var(--e-9); }
  /* Cada proyecto: nombre, ficha, flecha, la tira de tres en una fila, texto, grabación y próximos, en una columna */
  .proyecto-reja { margin-top: var(--e-6); }
  .proyecto-lado { padding-right: 0; gap: var(--e-5); }
  .proyecto-tira { margin-top: var(--e-7); gap: var(--e-2); }
  .proyecto-cuerpo, .proyecto-grabacion, .proyecto-proximos { padding-top: var(--e-8); }
  .proyecto-proximos { padding-bottom: var(--e-9); }
  .proyecto-texto { font-size: var(--t-bajada); }
  .grabacion { padding: var(--e-3); }
  .grabacion figcaption { margin-top: var(--e-3); }
  .conciertos li { grid-template-columns: 1fr; gap: var(--e-3); padding: var(--e-6) 0; }
  .conciertos .fecha-grande time { flex-direction: row; align-items: baseline; }
  .lista-vacia .acciones { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
  .lista-vacia .acciones > .enlace { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / 2); } /* en columna, alineado con el margen */
  /* Trayectoria: el título, la lista y la tira al final (§4.6), con su propio paralaje */
  .lista-larga { display: block; }
  .lista-larga-titulo { padding-top: 48px; }
  .lista-larga-cuerpo { padding-top: var(--e-8); padding-bottom: var(--e-8); }
  .tira-columna { position: static; margin: 0 0 var(--e-8); }
  .tira { position: static; }
  .tira .foto { flex: none; aspect-ratio: 4 / 5; }
  .tray-bloque + .tray-bloque { margin-top: var(--e-9); }
  /* Agenda: el título, el video, la lista y la tira al final (§4.6), con su propio paralaje */
  .agenda-reja { grid-template-columns: minmax(0, 1fr); }
  .agenda-col { display: contents; }
  .agenda-titulo-zona { grid-row: 1; padding-top: 48px; }
  .agenda-intro { margin-top: var(--e-7); }
  .agenda-foto { grid-column: 1; grid-row: 2; margin-top: var(--e-6); aspect-ratio: 4 / 5; }
  .agenda-lista-zona { grid-column: 1; grid-row: 3; padding-bottom: var(--e-8); }
  .agenda-tira { grid-column: 1; grid-row: 4; margin-top: 0; padding-bottom: var(--e-8); }
  .agenda-vacia .acciones, .agenda-cierre .acciones, .concierto-pagina .acciones { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
  .agenda-vacia .acciones > .enlace, .agenda-cierre .acciones > .enlace, .concierto-pagina .acciones > .enlace, .concierto-pagina .acciones > .compartir { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / 2); } /* en columna, alineado con el margen */
  /* Cada concierto: una columna, la foto al final */
  .concierto-reja { display: block; padding-top: var(--e-4); padding-bottom: var(--e-9); }
  /* El lugar como título: una palabra larga en versales («INTERNACIONAL», 374 px a 44 px) no cabe en 335; a 9,5vw cabe
     hasta en 320 px (barrido final de la etapa 3) */
  .concierto-titulo { margin-top: var(--e-6); font-size: min(var(--t-titulo), 9.5vw); }
  .concierto-foto { margin-top: var(--e-8); }
  .concierto-pagina .acciones { padding-bottom: var(--e-2); }
  .lugar { flex-wrap: wrap; column-gap: var(--e-3); row-gap: 0; }
  /* Sobre y Bosphorus: las dos fotos una sobre otra, con el título en medio (ficha §4) */
  .partida { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .partida-titulo, .partida-velo, .partida--titulo-alto .partida-titulo, .partida--titulo-alto .partida-velo { top: 50%; }
  .partida--celular-invertida .partida-der { order: -1; } /* la foto de la derecha, arriba */
  /* La foto de abajo enseña su parte de arriba: su cara baja y se aleja del título (Sobre: a 320 px quedaba a 5 px) */
  .partida:not(.partida--celular-invertida) .partida-der img { object-position: 50% 0; }
  .partida-cabeza-velo { height: 220px; background: linear-gradient(to bottom, var(--velo-fuerte), var(--velo-medio) 45%, var(--velo-0)); }
  .sobre-quien { padding-top: var(--e-9); padding-bottom: var(--e-8); }
  .sobre-intro { font-size: 21px; }
  .sobre-pilares { padding-bottom: var(--e-8); }
  .pilares { grid-template-columns: 1fr; gap: var(--e-5); }
  .sobre-estilos { padding-right: 0; margin-bottom: var(--e-7); }
  .acciones-pie { flex-direction: column; align-items: flex-start; gap: var(--e-4); padding-bottom: var(--e-9); }
  .bosphorus-cuerpo { padding-top: var(--e-9); }
  .bosphorus-marca { padding-right: 0; margin-bottom: var(--e-8); }
  .frentes li { grid-template-columns: 1fr; gap: var(--e-2); }
  /* Clases: una columna; el selector debajo del título, partido si no cabe en una línea */
  .ensena { padding-top: var(--e-9); padding-bottom: var(--e-8); }
  .ensena-cabeza, .reglas-cabeza, .institucion-cabeza { padding-right: 0; margin-bottom: var(--e-4); }
  .ensena-lista li { grid-template-columns: 2.4em 1fr; gap: var(--e-3); }
  .planes { padding-bottom: var(--e-9); }
  .planes-cabeza { flex-direction: column; align-items: flex-start; gap: var(--e-4); margin-bottom: var(--e-8); }
  .selector { flex-wrap: wrap; column-gap: var(--e-5); row-gap: 0; }
  .planes-lista { grid-template-columns: 1fr; row-gap: var(--e-7); }
  .plan-meta { min-height: 0; }
  .resumen-reservar { margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
  /* La foto de arriba enseña su parte de arriba (la cara baja y se aleja de la firma) y el título sube 8 px sobre la
     unión: la cara de «energía», con la cabeza echada atrás, queda arriba de la foto de abajo (a 320 px, 16 px de aire) */
  .clases-pagina .partida-izq img { object-position: 50% 0; }
  .clases-pagina .partida-titulo, .clases-pagina .partida-velo { top: calc(50% - var(--e-2)); }
  .reglas { padding-bottom: var(--e-8); }
  .reglas-lista li { grid-template-columns: 1fr; gap: var(--e-2); }
  .institucion { padding-top: var(--e-8); padding-bottom: var(--e-9); }
  /* Escuchar: una columna; el filtro en una línea */
  .escuchar-bloque, .escuchar-bloque:first-child { padding-top: var(--e-8); }
  .escuchar-bloque:last-child { padding-bottom: var(--e-9); }
  .grabaciones { grid-template-columns: 1fr; gap: var(--e-6); }
  .album { padding: var(--e-3); }
  .galeria { columns: 1; }
  .galeria-item { margin-bottom: var(--e-6); padding: var(--e-3); }
  /* El visor: la foto a todo el ancho entre el «×» y una barra abajo, al alcance del pulgar: ← «1 de 16» → */
  .visor { place-items: start center; }
  .visor-figura { width: 100vw; height: calc(100vh - 236px); margin-top: 132px; }
  @supports (height: 100svh) { .visor-figura { height: calc(100svh - 236px); } }
  .visor-pie { position: absolute; left: 0; right: 0; bottom: 12px; display: grid; place-items: center; height: 72px; padding: 0; pointer-events: none; }
  .visor-flecha { top: auto; bottom: 12px; margin-top: 0; }
  .visor-anterior { left: 4px; }
  .visor-siguiente { right: 4px; }
  /* Contratar: una columna; los campos uno debajo de otro, «Enviar» a la izquierda al alcance del pulgar y la foto al final */
  .contratar-reja { display: block; }
  .whatsapp-nota { flex-basis: 100%; margin-left: var(--e-5); margin-top: calc(var(--e-3) * -1); }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .form-pie { flex-direction: row-reverse; justify-content: flex-end; }
  .form-pie .redondo { margin-right: 0; margin-left: calc((var(--boton-caja) - var(--boton-anillo)) / -2); }
  .enviado .acciones { flex-direction: column; align-items: flex-start; gap: 0; }
  .contratar-foto { width: 82%; margin-top: var(--e-7); }
  /* Legales: el texto a todo el ancho */
  .legal-reja { display: block; }
  .legal-cabeza { margin-bottom: var(--e-7); }
  /* Menú en celular: dos columnas de piezas pequeñas (§4.2) */
  .menu-capa { overflow-y: auto; overscroll-behavior: contain; }
  .menu-mesa { position: relative; left: auto; top: auto; width: auto; height: auto; margin: var(--e-cabeza) var(--margen) 0; display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--e-5); transform: none !important; }
  .pieza[data-pieza] { position: relative; left: auto; top: auto; width: auto; }
  .pieza a { flex-direction: column-reverse; gap: var(--e-2); min-height: 120px; justify-content: flex-end; }
  .pieza svg { width: auto; height: 66px; max-width: 120px; }
  .pieza-nombre { font-size: var(--t-bajada); }
  .menu-pie { position: relative; left: auto; right: auto; bottom: auto; margin: var(--e-6) var(--margen) var(--e-6); }
}

@media (max-width: 380px) {
  /* Como Firma (relleno de 12 px), con el punto del elegido en los 16 px de la izquierda: caben cuatro filas a 375 px */
  .formato-opcion label { padding: 0 var(--e-3) 0 var(--e-4); }
  .formato-opcion label::before { left: 5px; }
}

/* ── Reducir movimiento: nada se desplaza; grano quieto; sin cursor ni bloques ── */
@media (prefers-reduced-motion: reduce) {
  .grano { animation: none; }
  .anillos i, .punto-vivo::after { animation: none; }
  .bloques { display: none; }
  .redondo:active .redondo-etiqueta, .redondo:active .mas, .boton-linea:active { transform: none; }
  .formatos-lista a:hover .titulo-3, .pieza a:hover .pieza-nombre, .con-etiqueta:hover > .versales { transform: none; }
  .tarjeta-enlace:hover .tarjeta-nombre, .tarjeta-enlace:focus-visible .tarjeta-nombre, .volver:hover .flecha-volver, .volver:focus-visible .flecha-volver { transform: none; }
  .grabacion-tocar:hover img, .grabacion-tocar:focus-visible img { transform: none; }
  .galeria-foto:hover img, .galeria-foto:focus-visible img { transform: none; }
  .visor-flecha:hover .flecha-volver, .visor-flecha:focus-visible .flecha-volver { transform: none; }
  .visor-escena.vuelve .visor-img { transition: none; }
  .anillos i.gira { animation: none; }
  .pieza a:hover .eco { transform: none; opacity: 0; }
  .hero-video video, .compartir-aviso { transition: none; }
  .concierto-enlace:hover, .concierto-enlace:focus-visible { transform: none; }
}