/* ═══════════════════════════════════════════════════════════════════════
   SIE7E COLORES — hoja de estilo única.

   ── La regla de color (versión C) ─────────────────────────────────────
   Dos capas, y no se mezclan.

   Lo FUNCIONAL es siempre teal (--marca, #39AAB0), el color del pájaro:
   botones, enlaces, foco, bordes de formulario, hover de tarjeta. Si algo
   se puede apretar, es teal en todo el sitio.

   Lo que ORIENTA toma el color de su sección (--banda): el número de rótulo,
   el acento que cruza la tarjeta, la barra del ecualizador, el filo de la
   galería. Cambia al bajar, y bajar es recorrer el espectro.

   La portada queda fuera: ahí --banda es la marca y no hay un solo color de
   más. Es lo que pidió el cliente y además funciona mejor — el espectro se
   revela al entrar, no golpea en la puerta. Los siete colores juntos se ven
   en dos lugares: el playhead de arriba y la línea del pie.

   ── Tipografía ───────────────────────────────────────────────────────
   Dos familias, nada más. Oswald para títulos: es la condensada equivalente
   a Big Noodle Titling —la del logo— con licencia abierta (OFL) y casi
   calcada. Inter para todo el resto, incluidas las etiquetas chicas, que
   antes iban en Space Mono. El nombre de la marca nunca se escribe con
   fuente —va como imagen— porque la T convertida en 7 es un dibujo, no una
   letra.

   Mobile first. Sin CDN: las tipografías se sirven desde este dominio.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/assets/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/assets/fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Los grises se corrieron apenas hacia el azul verdoso para que el teal de
     la marca no quede flotando sobre un negro neutro que le es ajeno. */
  --fondo:       #0a0d0e;
  --fondo-alt:   #0e1214;
  --superficie:  #141a1c;
  --borde:       #223034;
  --texto:       #eef4f5;
  --suave:       #8fa2a6;

  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --cuerpo:  "Inter", system-ui, sans-serif;

  --ancho: 70rem;
  --radio: 12px;
  --borde-fino: 1px solid var(--borde);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 16px/1.7 var(--cuerpo);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Oswald es condensada y de caja alta: pide mayúsculas y poco interletrado,
   que es exactamente como está construido el logo. */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 500; line-height: 1.02;
  letter-spacing: .005em; text-transform: uppercase; margin: 0 0 .45em;
}
h2 { font-size: clamp(2.2rem, 7.5vw, 4rem); }
h3 { font-size: 1.35rem; }
p  { margin: 0 0 1rem; }
a  { color: inherit; }
img, iframe, svg { max-width: 100%; display: block; }

::selection { background: var(--marca); color: #04191b; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Etiqueta: el reemplazo de la vieja monoespaciada. Inter en mayúsculas con
   interletrado abierto — se lee como rótulo sin sonar a terminal.

   Solo van acá los rótulos de una o dos palabras. Una frase entera en
   mayúsculas no se lee: se descifra. Por eso quedan afuera el aviso de
   staging, el estado del formulario y la nota de cada lista, y también los
   nombres propios (artistas) y el Plus Code, que no son rótulos. */
.etiqueta, .hero-kicker, .subtitulo, .lista-fuera, .precio, .rotulo, .eq-rotulo,
.formulario label, .equipo-rol, .contacto-datos strong,
.galeria figcaption, .track-rol, .track-tiempo,
.hero-scroll, .plegable summary {
  font-family: var(--cuerpo);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ── Playhead ───────────────────────────────────────────────────────────
   El progreso de lectura revela el espectro entero de izquierda a derecha.
   Es el único lugar donde los siete colores se ven juntos y en orden. */
.playhead { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; background: rgb(255 255 255 / 6%); }
.playhead span {
  display: block; height: 100%; width: 0; background: var(--espectro);
  box-shadow: 0 0 12px rgb(255 255 255 / 22%); transition: width .1s linear;
}

/* ── Grano ──────────────────────────────────────────────────────────── */
.grano {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

mark.pendiente {
  background: #3a3411; color: #ffd970; border-radius: 3px;
  padding: 0 .35em; font-size: .9em;
}
.vacio {
  border: 1px dashed var(--borde); border-left: 3px solid var(--banda);
  border-radius: 0 var(--radio) var(--radio) 0; padding: 1.1rem 1.35rem;
  color: var(--suave); background: rgb(255 255 255 / 2%);
  font-size: .95rem; max-width: 46rem;
}

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.25rem; background: rgb(10 13 14 / 80%);
  backdrop-filter: blur(14px); border-bottom: var(--borde-fino);
}
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.logo-pajaro { width: 38px; height: auto; transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.logo:hover .logo-pajaro { transform: translateX(3px) rotate(-4deg); }
.logo-texto {
  font-family: var(--display); font-weight: 500; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .02em;
}

/* OJO CON ESTE PANEL: vive adentro de .cabecera, que tiene backdrop-filter, y
   un elemento con backdrop-filter PASA A SER EL BLOQUE CONTENEDOR de sus
   descendientes position:fixed. O sea que acá "fixed" no se mide contra la
   pantalla sino contra la cabecera, que mide unos 50 px de alto.

   Con el `inset: 0 0 0 auto` que tenía antes, el panel quedaba del alto de la
   cabecera: pintaba el fondo solo en esa franja y los enlaces, empujados por
   el padding, caían FUERA de la caja, encima del texto de la página y sin nada
   atrás. Se veía como si el menú fuera transparente.

   Por eso el alto y la posición van explícitos y no por inset: así se dibuja
   igual se mida contra la pantalla o contra la cabecera, que está pegada
   arriba de todo (sticky, top: 0) y por lo tanto empieza en el mismo lugar.
   Si algún día se saca el backdrop-filter, esto sigue andando igual. */
.nav {
  position: fixed; top: 0; right: 0; z-index: 1;
  width: min(80vw, 21rem); height: 100dvh;
  transform: translateX(101%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  background: var(--fondo-alt); border-left: var(--borde-fino);
  box-shadow: -18px 0 40px rgb(0 0 0 / 45%);
  display: flex; flex-direction: column; padding: 5.5rem 1.75rem 2rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.nav.abierto { transform: none; }
.nav a {
  text-decoration: none; color: var(--suave); font-family: var(--display);
  text-transform: uppercase; font-size: 1.5rem; padding: .7rem 0;
  border-bottom: var(--borde-fino); transition: color .2s, padding-left .2s;
}
.nav a:hover, .nav a:focus-visible { color: var(--marca); padding-left: .5rem; }

.nav-toggle {
  position: relative; z-index: 60; width: 40px; height: 32px; padding: 7px 5px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--texto); transition: .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .nav {
    position: static; width: auto; height: auto; transform: none;
    flex-direction: row; overflow: visible;
    background: none; border: 0; box-shadow: none;
    padding: 0; gap: 1.7rem; align-items: center;
  }
  .nav a { border: 0; padding: .2rem 0; font-size: .95rem; letter-spacing: .04em; }
  .nav a:hover { padding-left: 0; }
}

/* ── Ecualizador lateral ────────────────────────────────────────────────
   Una barra por sección, con su número y su nombre al lado. La de la sección
   en pantalla se enciende y crece. Solo en escritorio: en celular el menú de
   arriba ya hace el trabajo y esto sería un estorbo sobre el contenido. */
.ecualizador { display: none; }
@media (min-width: 70rem) {
  .ecualizador {
    position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%);
    z-index: 45; display: flex; flex-direction: column; gap: .55rem;
  }
  .ecualizador a { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
  .eq-barra {
    display: block; width: 3px; height: 18px; border-radius: 2px;
    background: var(--borde); transition: .35s cubic-bezier(.34,1.4,.64,1);
  }
  .ecualizador a:hover .eq-barra { background: var(--banda); }
  .ecualizador a.activa .eq-barra { background: var(--banda); height: 40px; box-shadow: 0 0 14px var(--banda); }
  .eq-rotulo {
    font-size: .64rem; color: var(--suave); letter-spacing: .1em;
    opacity: 0; transform: translateX(-6px); transition: .25s; white-space: nowrap;
  }
  /* El número toma el color de su sección, que es lo que quedó en lugar del
     nombre de la banda. */
  .eq-n { color: var(--banda); font-weight: 600; margin-right: .45em; }
  .ecualizador a:hover .eq-rotulo, .ecualizador a.activa .eq-rotulo { opacity: 1; transform: none; }
  .ecualizador a.activa .eq-rotulo { color: var(--texto); }
}

/* ── Portada ────────────────────────────────────────────────────────── */
.hero {
  position: relative; display: grid; align-content: center; justify-items: center;
  min-height: min(94vh, 52rem); padding: 5rem 1.25rem 5rem; overflow: hidden; text-align: center;
}
/* Relleno mientras no llega la foto del control room. Al tenerla, va acá,
   tratada en duotono con el teal de la marca. */
.hero-fondo {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 70% at 50% 8%, rgb(57 170 176 / 16%), transparent 62%),
    radial-gradient(80% 60% at 12% 95%, rgb(63 223 170 / 8%), transparent 62%),
    var(--fondo);
}

.hero-cuerpo {
  position: relative; z-index: 2; width: 100%; max-width: var(--ancho);
  display: grid; justify-items: center;
}

.hero-kicker {
  display: flex; align-items: center; gap: .6rem;
  letter-spacing: .18em; font-size: .7rem; color: var(--suave); margin-bottom: 1.6rem;
}
.punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--vivo);
  box-shadow: 0 0 10px var(--vivo); animation: latir 2.4s ease-in-out infinite;
}
@keyframes latir { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

/* El lockup de la marca: el pájaro arriba, el nombre abajo. */
.hero-titulo { display: grid; justify-items: center; gap: 1.6rem; margin: 0 0 1.5rem; }
.hero-pajaro {
  width: clamp(11rem, 34vw, 20rem); height: auto;
  animation: planear 1s cubic-bezier(.16,1,.3,1) backwards;
  filter: drop-shadow(0 0 42px rgb(57 170 176 / 30%));
}
.hero-nombre {
  width: clamp(15rem, 56vw, 34rem); height: auto;
  animation: entrar .9s .25s cubic-bezier(.16,1,.3,1) backwards;
}
/* El pájaro entra planeando desde la izquierda, que es hacia donde mira. */
@keyframes planear { from { opacity: 0; transform: translate(-2.5rem, -1rem) rotate(-6deg) } }
@keyframes entrar  { from { opacity: 0; transform: translateY(1rem) } }

.hero-bajada {
  font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--suave);
  max-width: 34rem; margin-bottom: 0;
  animation: entrar .9s .4s cubic-bezier(.16,1,.3,1) backwards;
}

.boton {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.7rem; border-radius: 999px; text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent; cursor: pointer; transition: .2s;
}
.boton-primario { background: var(--marca); color: #04191b; }
.boton-primario:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px var(--marca); }
.boton-fantasma { border-color: var(--borde); color: var(--texto); }
.boton-fantasma:hover { border-color: var(--marca); color: var(--marca); }
.boton-whatsapp { background: #25d366; color: #06331a; }
.boton-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -8px #25d366; }

.hero-scroll {
  position: absolute; z-index: 2; right: 1.5rem; bottom: 1.5rem; margin: 0;
  display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; letter-spacing: .18em; color: var(--suave);
}
.hero-scroll span {
  display: block; width: 1px; height: 2.5rem;
  background: linear-gradient(to bottom, var(--suave), transparent);
  animation: caer 2s ease-in-out infinite;
}
@keyframes caer { 0%,100% { opacity: .3; transform: scaleY(.6) } 50% { opacity: 1; transform: scaleY(1) } }

/* ── Ondas separadoras ──────────────────────────────────────────────── */
.separador { padding: 0 1.25rem; overflow: hidden; }
.onda { width: 100%; height: 70px; stroke: currentColor; }
.separador .onda { color: var(--borde); opacity: .55; }

/* ── Secciones ──────────────────────────────────────────────────────── */
.seccion { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; padding: 5rem 1.25rem; }
.seccion-alterna { max-width: none; background: var(--fondo-alt); border-block: var(--borde-fino); }
.seccion-alterna > * { max-width: var(--ancho); margin-inline: auto; }

/* Rótulo de sección: el número en el color de la sección, y la línea. Sin
   nombre de banda y sin Hz: los dos quedaron afuera por pedido del cliente. */
.rotulo {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  font-size: .7rem; letter-spacing: .1em; color: var(--suave); margin-bottom: 1.1rem;
}
.rotulo-n { color: var(--banda); font-weight: 600; }
.rotulo-linea { flex: 0 0 2.5rem; height: 1px; background: var(--banda); }

.seccion h2 { max-width: 20ch; }
.seccion-intro { color: var(--suave); max-width: 46rem; margin-bottom: 2.5rem; }
.seccion-intro.grande { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--texto); max-width: 40rem; }
.subtitulo {
  margin-top: 3.5rem; font-size: .8rem; letter-spacing: .12em;
  color: var(--suave); font-weight: 500; font-family: var(--cuerpo);
}

.grilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.tarjeta {
  position: relative; overflow: hidden;
  background: var(--superficie); border: var(--borde-fino);
  border-radius: var(--radio); padding: 1.6rem 1.5rem 1.4rem;
  transition: border-color .25s, transform .25s;
}
.tarjeta::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px; width: 2.5rem;
  background: var(--banda); transition: width .3s cubic-bezier(.4,0,.2,1);
}
.tarjeta:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--borde)); transform: translateY(-3px); }
.tarjeta:hover::before { width: 100%; }
.tarjeta p { color: var(--suave); font-size: .95rem; }
.precio {
  color: var(--texto) !important; font-size: .72rem;
  margin: 1.2rem 0 0; padding-top: .8rem; border-top: var(--borde-fino);
}
.lista-simple { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--suave); font-size: .92rem; }
.lista-simple li { margin-bottom: .2rem; }

/* ── Servicios: la lista de trabajos cuelga de cada servicio ──────────
   La tarjeta es del sitio; el reproductor de Spotify se trae recién al
   hacer clic y reemplaza el contenido de la tarjeta. */
/* La muestra de trabajo: una sola, al cierre de Servicios. */
.muestra { margin-top: 3rem; }
.muestra .subtitulo { margin-top: 0; }
.fachada { display: grid; justify-items: start; gap: .4rem; max-width: 34rem; }

.lista-play {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  margin: .4rem 0 .9rem; padding: .7rem .9rem; cursor: pointer;
  background: transparent; border: var(--borde-fino); border-radius: 999px;
  color: var(--texto); text-align: left; transition: .2s;
}
.lista-play svg { width: 18px; height: 18px; flex: none; fill: var(--banda); transition: fill .2s; }
.lista-play:hover { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, transparent); }
.lista-play-texto {
  display: grid; gap: .1rem; font-family: var(--display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
}
.lista-nota { font-size: .68rem; letter-spacing: .01em; color: var(--suave);
  text-transform: none; font-family: var(--cuerpo); font-weight: 400; }
.lista-fuera {
  font-size: .65rem; color: var(--suave); text-decoration: none;
  white-space: nowrap; transition: color .2s; margin-top: auto;
}
.lista-fuera:hover { color: var(--marca); }
.enlace-servicio { display: inline-block; margin-top: .6rem; color: var(--marca); }
/* Con el reproductor adentro, la fachada deja de ser un botón. */
.fachada-abierta {
  max-width: 100%; border: var(--borde-fino); border-color: var(--marca);
  border-radius: var(--radio); overflow: hidden;
}
.fachada-abierta iframe { width: 100%; height: 352px; border: 0; display: block; }

/* ── Equipos y backline ─────────────────────────────────────────────── */
.equipos { margin-top: 1rem; }
.plegables { display: grid; gap: .5rem; }
.plegable {
  background: var(--superficie); border: var(--borde-fino);
  border-radius: var(--radio); overflow: hidden; transition: border-color .25s;
}
.plegable:hover { border-color: color-mix(in srgb, var(--marca) 40%, var(--borde)); }
.plegable summary {
  cursor: pointer; padding: .95rem 1.2rem; font-size: .78rem; letter-spacing: .1em;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  list-style: none; color: var(--texto);
}
.plegable summary::-webkit-details-marker { display: none; }
/* Flecha propia: rota al abrir. */
.plegable summary::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-left: auto;
  border-right: 2px solid var(--banda); border-bottom: 2px solid var(--banda);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s;
}
.plegable[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.plegable .lista-simple { padding: 0 1.2rem 1.1rem 2.4rem; margin: 0; }

/* ── Reproductor ────────────────────────────────────────────────────────
   Sin <audio controls>: el control nativo es gris y rompe el tono. Solo
   aparece si algún día se cargan cortes propios en config. */
.tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.track {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
  background: var(--superficie); border: var(--borde-fino);
  border-radius: var(--radio); padding: 1rem 1.25rem; transition: border-color .25s;
}
.track:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--borde)); }
.track.sonando { border-color: var(--vivo); }

.track-play {
  width: 48px; height: 48px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1px solid var(--marca); background: transparent; color: var(--marca);
  display: grid; place-items: center; transition: .2s;
}
.track-play:hover { background: var(--marca); color: #04191b; }
.track-play svg { width: 20px; height: 20px; fill: currentColor; }
.track-play .ic-pause { display: none; }
.track.sonando .track-play { background: var(--vivo); border-color: var(--vivo); color: #04191b; }
.track.sonando .ic-play { display: none; }
.track.sonando .ic-pause { display: block; }

.track-cuerpo { min-width: 0; display: grid; gap: .5rem; }
.track-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem; }
.track-titulo { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 1.15rem; }
.track-artista { color: var(--suave); font-size: .9rem; }
.track-rol {
  font-size: .62rem; letter-spacing: .1em;
  color: var(--suave); border: var(--borde-fino); border-radius: 999px; padding: .12rem .55rem;
}
.track.sonando .track-rol { color: var(--vivo); border-color: color-mix(in srgb, var(--vivo) 45%, transparent); }

.track-onda { position: relative; cursor: pointer; height: 44px; }
.track-onda .onda { height: 44px; color: var(--borde); }
.track-pintado { position: absolute; inset: 0; width: 0; overflow: hidden; transition: width .1s linear; pointer-events: none; }
.track-pintado .onda { color: var(--vivo); }
.track-tiempo { font-size: .7rem; color: var(--suave); }

@media (min-width: 52rem) {
  .track-cuerpo { grid-template-columns: minmax(0,1fr) minmax(12rem, 26rem) auto; align-items: center; gap: 1.25rem; }
}

/* ── Galería ────────────────────────────────────────────────────────── */
.galeria { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.galeria figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radio); background: var(--superficie); }
.galeria img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  filter: saturate(.85); transition: transform .5s cubic-bezier(.16,1,.3,1), filter .4s;
}
.galeria figure:hover img { transform: scale(1.05); filter: saturate(1.05); }
.galeria figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.5rem .9rem .8rem;
  font-size: .65rem; letter-spacing: .06em;
  background: linear-gradient(to top, rgb(0 0 0 / 85%), transparent);
  opacity: 0; transform: translateY(.5rem); transition: .3s;
}
.galeria figure:hover figcaption { opacity: 1; transform: none; }
.galeria figure::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--banda);
  transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.galeria figure:hover::after { transform: none; }

/* La foto es un enlace, pero tiene que seguir pareciendo una foto. */
.galeria-abrir {
  display: block; text-decoration: none; cursor: zoom-in;
  border-radius: var(--radio); overflow: hidden;
}
.galeria-abrir:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

/* ── Visor de la galería ──────────────────────────────────────────────
   <dialog> nativo: el foco queda adentro y Escape cierra sin JavaScript
   nuestro. Ocupa la pantalla entera y la foto se adapta al hueco que queda
   entre las dos flechas y el pie. */
.visor {
  /* dvh y no %: en el celular la barra del navegador aparece y desaparece, y
     con 100% el visor se dibujaba más alto que lo que se ve — el pie y las
     flechas quedaban abajo del borde. */
  width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: var(--texto);
  grid-template-columns: auto 1fr auto; align-items: center;
}
.visor[open] { display: grid; }
.visor::backdrop { background: rgb(6 10 11 / 92%); }

.visor-marco {
  margin: 0; min-width: 0; height: 100%;
  display: grid; align-content: center; justify-items: center; gap: .8rem;
  padding: 1rem 0;
}
.visor-img {
  max-width: 100%; max-height: calc(100dvh - 8rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radio);
}
/* El pie no va en mayúsculas: es el rótulo de la foto y el contador,
   y tiene que leerse de un vistazo. */
.visor-pie {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  align-items: baseline; justify-content: center; text-align: center;
  max-width: 46rem; padding: 0 1rem;
  font-size: .82rem; color: var(--texto);
}
.visor-cuenta { color: var(--marca); font-variant-numeric: tabular-nums; }

.visor-cerrar, .visor-ir {
  display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / 7%); color: var(--texto);
  border: var(--borde-fino); border-radius: 999px;
  font-family: var(--cuerpo); line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.visor-ir { width: 3rem; height: 3rem; margin: 0 .9rem; font-size: 1.7rem; }
.visor-cerrar {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.6rem; height: 2.6rem; font-size: 1.5rem;
}
.visor-ir:hover, .visor-cerrar:hover,
.visor-ir:focus-visible, .visor-cerrar:focus-visible {
  background: var(--marca); border-color: var(--marca); color: #04191b;
}
/* display:grid le gana a [hidden] si no se dice lo contrario. */
.visor-ir[hidden] { display: none; }

/* En celular las flechas NO pueden estar al costado de la foto: entre las
   dos se comían casi cien píxeles de ancho y la imagen quedaba chiquita en el
   medio de la pantalla. Salen del flujo y se van a las esquinas de abajo,
   sobre el fondo, así la foto se queda con todo el ancho. */
@media (max-width: 40rem) {
  .visor { grid-template-columns: 1fr; }
  .visor-ir {
    position: absolute; bottom: 1.1rem; z-index: 2; margin: 0;
    width: 3rem; height: 3rem; font-size: 1.5rem;
    background: rgb(255 255 255 / 12%);
  }
  .visor-antes   { left: 1.1rem; }
  .visor-despues { right: 1.1rem; }
  /* Lugar arriba para el botón de cerrar y abajo para la fila de flechas. */
  .visor-marco { padding: 3.8rem .5rem 5.2rem; gap: .6rem; }
  .visor-img { max-height: calc(100dvh - 11rem); }
  .visor-pie { font-size: .78rem; padding: 0 .4rem; }
}

.artistas { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.artistas li {
  font-size: .82rem; color: var(--suave);
  border: var(--borde-fino); border-radius: 999px; padding: .35rem 1rem; transition: .2s;
}
.artistas li:hover { color: var(--marca); border-color: var(--marca); }

/* ── Reserva ────────────────────────────────────────────────────────── */
.reserva { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) { .reserva { grid-template-columns: 17rem 1fr; align-items: start; } }
.nota { color: var(--suave); font-size: .85rem; margin-top: .7rem; }

.formulario { display: grid; gap: 1.1rem; max-width: 34rem; }
.formulario label {
  display: grid; gap: .4rem; font-size: .68rem; letter-spacing: .1em; color: var(--suave);
}
.formulario input, .formulario select, .formulario textarea {
  font: 400 1rem/1.5 var(--cuerpo); color: var(--texto);
  background: var(--superficie); border: var(--borde-fino);
  border-radius: 8px; padding: .8rem .9rem; width: 100%; transition: border-color .2s;
  text-transform: none; letter-spacing: normal;
}
.formulario input:hover, .formulario textarea:hover { border-color: var(--suave); }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}
.formulario button { justify-self: start; margin-top: .3rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-estado { font-size: .85rem; margin: 0; min-height: 1.2em; }
.form-estado.ok { color: var(--vivo); }
.form-estado.error { color: #e8543f; }
/* Aparece recién cuando la consulta quedó registrada: el aviso al estudio
   viaja por WhatsApp, que es el canal que ellos miran. */
.form-wa { justify-self: start; }

/* ── Contacto ───────────────────────────────────────────────────────── */
.contacto { display: grid; gap: 2rem; }
@media (min-width: 54rem) { .contacto { grid-template-columns: 1fr 1.4fr; } }
.contacto-datos p { color: var(--suave); text-transform: none; letter-spacing: normal; }
.contacto-datos strong {
  display: block; color: var(--banda);
  font-size: .65rem; letter-spacing: .12em;
  font-weight: 500; margin-bottom: .15rem;
}
.enlace { color: var(--marca); }

.contacto-mapa iframe {
  width: 100%; min-height: 21rem; border: var(--borde-fino); border-radius: var(--radio);
  filter: grayscale(1) invert(.92) hue-rotate(180deg);
}

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie { position: relative; z-index: 2; padding: 3.5rem 1.25rem 3rem; text-align: center; color: var(--suave); }
.pie-espectro { height: 3px; max-width: 70rem; margin: 0 auto 2.5rem; background: var(--espectro); border-radius: 2px; }
.pie-nombre { width: clamp(12rem, 40vw, 22rem); height: auto; margin: 0 auto 1.2rem; opacity: .9; }
.pie p { font-size: .85rem; margin: 0 0 .3rem; }
.pie-credito { opacity: .6; }
.pie-credito a { color: inherit; }

/* ── WhatsApp flotante ──────────────────────────────────────────────── */
.wa-flotante {
  /* z-index por debajo de la cabecera (50), que es donde vive el menú: con 55
     el botón quedaba flotando arriba del panel abierto. */
  position: fixed; right: 1rem; bottom: 1rem; z-index: 45;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #06331a; display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgb(37 211 102 / 60%); transition: transform .2s;
}
.wa-flotante svg { width: 27px; height: 27px; fill: currentColor; }
.wa-flotante:hover { transform: scale(1.08); }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 3px; }

.revelar { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s, transform .7s cubic-bezier(.16,1,.3,1); }
.revelar.visible { opacity: 1; transform: none; }

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

/* ── Equipo ─────────────────────────────────────────────────────────── */
.equipo { list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.equipo li {
  border: var(--borde-fino); border-left: 3px solid var(--banda);
  border-radius: 0 var(--radio) var(--radio) 0; padding: .9rem 1.1rem;
  background: var(--superficie); display: grid; gap: .15rem;
}
.equipo-nombre { font-family: var(--display); font-weight: 500; text-transform: uppercase; font-size: 1.1rem; }
.equipo-rol { font-size: .65rem; letter-spacing: .08em; color: var(--suave); }
.equipo-ig { font-size: .7rem; color: var(--marca); text-decoration: none; letter-spacing: .04em; text-transform: none; }
.equipo-ig:hover { text-decoration: underline; }