/* ÉTNICO. Sistema visual del sitio publico.
   Oscuro por omision, acentos calidos (ambar, dorado, rojizo) sobre negro y
   tierra. Nada de degradados morados de plantilla.
   Sin @import y sin fuentes de fuera: todo se sirve desde el propio dominio.

   Tipografia: Jost para titulos y etiquetas (geometrica, de mayusculas
   espaciadas, la misma logica de los flyers) y Archivo para el texto corrido,
   que es donde una geometrica cansa. Las dos son variables y de licencia
   abierta (SIL OFL, el texto esta en /fuentes/). Los archivos son el subconjunto
   latino: cubren el espanol completo. */

@font-face {
  font-family: 'Jost';
  src: url('/fuentes/jost-v20.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
/* Pagkaki es la letra de los flyers. Las dos pesadas van bajo el mismo nombre
   de familia para poder cambiar de una a otra con font-weight y no con otro
   nombre distinto en cada regla. Licencia comprada, ver LICENCIA-Pagkaki.txt
   en la carpeta de fuentes: no es libre y no se copia a otro proyecto. */
@font-face {
  font-family: 'Pagkaki';
  src: url('/fuentes/pagkaki-regular-v1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pagkaki';
  src: url('/fuentes/pagkaki-full-v1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fuentes/archivo-v25.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --negro: #0b0a09;
  --carbon: #131110;
  --tierra: #1b1613;
  --tierra-clara: #241d18;
  --linea: rgba(224, 164, 88, 0.16);
  --linea-suave: rgba(244, 239, 232, 0.08);

  --hueso: #f5f0e8;
  --arena: #cbbfae;
  --humo: #8e8377;

  --ambar: #e0a458;
  --dorado: #c9932f;
  --rojizo: #b04a32;
  --vivo: #6fbf8b;

  --brillo: radial-gradient(120% 80% at 50% 0%, rgba(224, 164, 88, 0.22), transparent 60%);

  --tipo: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tipo-titulo: 'Pagkaki', 'Jost', 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Jost se queda en todo lo que Pagkaki no puede hacer bien: los rotulos
     chicos con mucho espaciado, que en una letra de mano se vuelven un borron,
     y sobre todo los numeros. Los digitos de Pagkaki miden distinto entre si
     (el 2 mide 794 y el 6 mide 1093), asi que una cuenta regresiva escrita con
     ella salta en cada segundo y los precios de una tabla no alinean. */
  --tipo-ui: 'Jost', 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Las mayusculas de Jost ya nacen anchas. El espaciado que las hacia respirar
     en un flyer impreso las volvia en pantalla una fila de letras sueltas que
     ocupaba el doble de lo que decia, y en el movil partia la fecha en dos
     lineas. Tres medidas, y ninguna suelta: el sello de la marca, el rotulo, y
     el dato. Cuanta mas informacion carga el texto, menos espaciado lleva. */
  --letras-sello: 0.3em;
  --letras-rotulo: 0.14em;
  --letras-dato: 0.11em;

  --ancho: 1180px;
  --ancho-angosto: 720px;
  --radio: 2px;
  --radio-grande: 4px;

  --aire-1: clamp(0.5rem, 1vw, 0.75rem);
  --aire-2: clamp(1rem, 2vw, 1.5rem);
  --aire-3: clamp(1.75rem, 3.5vw, 2.75rem);
  --aire-4: clamp(2.25rem, 4.5vw, 4rem);
  --aire-5: clamp(3rem, 6vw, 5.5rem);

  --transicion: 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--negro);
  background-image: url("/img/grano.svg");
  background-size: 320px 320px;
  color: var(--hueso);
  font-family: var(--tipo);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  letter-spacing: 0;
  font-synthesis: none;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
}

/* Los titulos son mayusculas finas y espaciadas. Es lo contrario de una
   portada gritada: el flyer de la marca dice lo mismo con poca tinta. */
h1, h2, h3 {
  font-family: var(--tipo-titulo);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.05em;
  margin: 0 0 var(--aire-2);
  text-wrap: balance;
}

/* El titular de la pagina va con la pesada, igual que en los flyers. Los
   subtitulos con la fina, para que se note cual manda. Pagkaki solo trae esas
   dos: pedirle un 300 o un 700 hace que el navegador se lo invente. */
h1 { font-weight: 500; }

p { margin: 0 0 var(--aire-2); }
ul { margin: 0; padding: 0; list-style: none; }

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

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ambar); color: var(--negro); padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* Cabecera ---------------------------------------------------------------- */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--aire-2);
  padding: var(--aire-2) clamp(1rem, 4vw, 3rem);
  transition: background-color var(--transicion), backdrop-filter var(--transicion),
    border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
.cabecera.pegada {
  background-color: rgba(11, 10, 9, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--linea-suave);
}

.marca-texto {
  font-family: var(--tipo-ui);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  letter-spacing: var(--letras-sello);
  text-indent: var(--letras-sello);
}

.menu ul {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem);
  font-family: var(--tipo-ui); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: var(--letras-rotulo);
  color: var(--arena);
}
.menu a { position: relative; padding-block: 0.35rem; transition: color var(--transicion); }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--ambar); transition: right var(--transicion);
}
.menu a:hover { color: var(--hueso); }
.menu a:hover::after, .menu a[aria-current="page"]::after { right: 0; }
.menu a[aria-current="page"] { color: var(--hueso); }

.menu-boton {
  display: none; width: 44px; height: 44px; border: 0; background: none;
  padding: 0; cursor: pointer; position: relative;
}
.menu-linea {
  display: block; width: 24px; height: 1.5px; background: var(--hueso);
  margin: 5px auto; transition: transform var(--transicion), opacity var(--transicion);
}

@media (max-width: 860px) {
  .menu-boton { display: block; }
  .menu {
    position: fixed; inset: 0; background: var(--negro);
    display: grid; place-items: center;
    opacity: 0; pointer-events: none; transition: opacity var(--transicion);
  }
  .menu.abierto { opacity: 1; pointer-events: auto; }
  .menu ul { flex-direction: column; gap: var(--aire-3); font-size: 1.1rem; }
  .menu-boton[aria-expanded="true"] .menu-linea:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-linea:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--aire-4) + 1.5rem) clamp(1rem, 4vw, 3rem) var(--aire-4);
  isolation: isolate;
  overflow: hidden;
}
/* El recorte va aca y no en el hero. La foto y el video se agrandan despacio
   y se salen de la caja a proposito; dejar ese recorte en manos de un ancestro
   depende de como el navegador arme las capas, y hay navegadores que dejan
   asomar una franja de video debajo de la portada. */
.hero-fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-fondo img, .hero-fondo video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.05) contrast(1.05);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--negro) 4%, rgba(11, 10, 9, 0.72) 38%, rgba(11, 10, 9, 0.28) 70%),
    var(--brillo);
}
.hero-vacio { min-height: 78svh; background: var(--brillo); }
.hero-vacio.hero-con-fondo { min-height: 92svh; }

/* Video de fondo. Entra encima de la imagen y solo cuando ya puede correr
   sin cortarse: si nunca llega, lo que se ve es la foto y nadie nota nada.
   Son dos capas para poder cruzar el final con el principio y que el loop
   no se sienta como un corte. */
.hero-video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1200ms ease;
  z-index: 1;
}
.hero-video.encima { z-index: 2; }
.hero-video.visible { opacity: 1; }
.hero-fondo > * { transform-origin: 52% 48%; }
.hero-con-video .hero-fondo > * {
  animation: deriva 46s ease-in-out infinite alternate;
}
@keyframes deriva {
  from { transform: scale(1.02); }
  to { transform: scale(1.09); }
}

.hero-cuerpo { max-width: 46rem; }
.kicker {
  font-family: var(--tipo-ui); font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--letras-sello);
  color: var(--ambar); margin-bottom: var(--aire-2);
}
.hero-titulo {
  font-size: clamp(2.2rem, 7vw, 5.2rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1.06;
  margin-bottom: var(--aire-2);
}
.hero-bajada { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--arena); max-width: 38rem; }
.hero-datos {
  display: flex; flex-wrap: wrap; gap: 0.5rem var(--aire-2);
  font-family: var(--tipo-ui); font-size: 0.875rem; text-transform: uppercase; letter-spacing: var(--letras-dato);
  color: var(--hueso);
}
.hero-datos span { position: relative; }
.hero-datos span + span::before {
  content: "·"; position: absolute; left: calc(var(--aire-2) / -2 - 0.15rem); color: var(--humo);
}
/* En el movil la fila se parte y el punto de separacion queda colgando al
   principio del renglon, separando de nada. Ahi la ficha se apila, que es como
   viene escrita en un flyer: una linea por dato y sin adornos entre medio. */
@media (max-width: 640px) {
  .hero-datos { display: grid; gap: 0.2rem; }
  .hero-datos span + span::before { content: none; }
}
.hero-precio { font-size: 0.875rem; color: var(--arena); margin-top: var(--aire-2); }

.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--aire-1); margin-top: var(--aire-3); }
.hero-acciones.centrado { justify-content: center; }

/* Sonido del hero ---------------------------------------------------------
   Vive encima del video, abajo a la derecha. Casi no se ve hasta que se pasa
   por encima: el video manda, el boton solo tiene que estar cuando se lo
   busca. El vidrio esmerilado lo despega del fondo sin taparlo. */
.hero-sonido {
  position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 6;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.5rem 0.7rem;
  font-family: var(--tipo-ui); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: var(--letras-rotulo);
  color: var(--arena); background: rgba(19, 17, 16, 0.34);
  border: 1px solid var(--linea-suave); border-radius: 999px;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0.62; cursor: pointer;
  transition: opacity var(--transicion), color var(--transicion),
              border-color var(--transicion), background var(--transicion),
              transform var(--transicion);
}
.hero-sonido:hover, .hero-sonido:focus-visible {
  opacity: 1; color: var(--hueso);
  border-color: var(--linea); background: rgba(19, 17, 16, 0.52);
}
.hero-sonido[hidden] { display: none; }
/* Se quita solo mientras hay un dialogo abierto encima. Al bajar del hero se
   queda: la musica sigue sonando y apagarla tiene que estar siempre a mano. */
.hero-sonido.fuera { opacity: 0; pointer-events: none; transform: translateY(0.5rem); }
.hero-sonido-icono { display: inline-flex; }
.hero-sonido svg { width: 17px; height: 17px; display: block; }

/* Apagado: la raya cruzada puesta, las ondas quitadas. Encendido, al reves.
   El estado se lee del aria-pressed, que es el mismo dato que oye un lector
   de pantalla, asi que no pueden discrepar. */
.hero-sonido[aria-pressed="false"] .hero-sonido-ondas { opacity: 0; }
.hero-sonido[aria-pressed="true"] .hero-sonido-corte { opacity: 0; }
.hero-sonido[aria-pressed="true"] { color: var(--ambar); }
.hero-sonido[aria-pressed="true"]:hover { color: var(--hueso); }
.hero-sonido-ondas, .hero-sonido-corte { transition: opacity var(--transicion); }

@media (max-width: 720px) {
  /* En pantalla chica se queda solo con el icono. Abajo del todo y pegado al
     borde derecho: la flecha de bajar esta centrada, asi que no se estorban, y
     mas arriba se montaba encima de la linea del precio. */
  .hero-sonido { right: 1rem; bottom: 1.25rem; padding: 0.5rem; }
  .hero-sonido-texto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-sonido { transition: none; }
}

.hero-flecha {
  position: absolute; left: 50%; bottom: 1.75rem; width: 28px; height: 28px;
  transform: translateX(-50%); border-right: 1px solid var(--arena);
  border-bottom: 1px solid var(--arena); rotate: 45deg;
  animation: bajar 2.6s ease-in-out infinite;
}
@keyframes bajar {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* Cuenta regresiva -------------------------------------------------------- */
.cuenta {
  display: flex; gap: var(--aire-2); margin-top: var(--aire-3);
  font-variant-numeric: tabular-nums;
}
.cuenta-bloque {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  min-width: 3.5rem; padding: 0.65rem 0.5rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: rgba(19, 17, 16, 0.55);
}
.cuenta-bloque span { font-family: var(--tipo-ui); font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.cuenta-bloque small {
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: var(--letras-rotulo); color: var(--humo);
}

/* Botones ----------------------------------------------------------------- */
.boton, .boton-fantasma {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 1rem 2rem; min-height: 48px;
  font-family: var(--tipo-ui); font-size: 0.78rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--letras-rotulo); border-radius: var(--radio); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--transicion), background-color var(--transicion),
    color var(--transicion), border-color var(--transicion);
}
.boton { background: var(--ambar); color: #16110b; }
.boton:hover { background: var(--hueso); transform: translateY(-2px); }
.boton-fantasma { border-color: var(--linea); color: var(--hueso); }
.boton-fantasma:hover { border-color: var(--ambar); color: var(--ambar); transform: translateY(-2px); }
.boton-chico { padding: 0.75rem 1.4rem; min-height: 44px; }
.boton-apagado {
  background: transparent; border-color: var(--linea-suave); color: var(--humo);
  cursor: default; pointer-events: none;
}

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--tipo-ui); font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--letras-rotulo);
  color: var(--ambar); border-bottom: 1px solid var(--linea); padding-bottom: 0.35rem;
  transition: color var(--transicion), border-color var(--transicion);
}
.enlace-flecha::after { content: "→"; transition: transform var(--transicion); }
.enlace-flecha:hover { color: var(--hueso); border-color: var(--hueso); }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* Franjas y contenedores -------------------------------------------------- */
.franja { padding-block: var(--aire-5); }
.franja-titulo { padding-top: calc(var(--aire-5) + 2.5rem); padding-bottom: var(--aire-3); }
.franja-numeros { padding-block: var(--aire-4); border-block: 1px solid var(--linea-suave); }
.franja-cierre { background: linear-gradient(to bottom, transparent, rgba(176, 74, 50, 0.08)); }

.contenido { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.angosto { max-width: var(--ancho-angosto); }
.centrado { text-align: center; margin-inline: auto; }

.titulo-pagina {
  font-size: clamp(2rem, 5.6vw, 3.9rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.08;
}
.titulo-seccion {
  font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em;
}
.titulo-chico { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-top: var(--aire-3); }
.titulo-fila {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--aire-2); margin-bottom: var(--aire-3);
}
.texto-grande { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.45; color: var(--hueso); }
.texto-medio { color: var(--arena); }
.texto-costado { max-width: 34rem; }
.letra-chica { font-size: 0.8125rem; color: var(--humo); line-height: 1.55; }
.letra-chica a { color: var(--arena); text-decoration: underline; text-underline-offset: 3px; }

.dos-columnas { display: grid; gap: var(--aire-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: var(--aire-4); } }

.lista-puntos { display: grid; gap: 0.75rem; color: var(--arena); }
.lista-puntos li { padding-left: 1.5rem; position: relative; }
.lista-puntos li::before {
  content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--ambar);
}

.prosa p { color: var(--arena); }
.prosa h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: var(--aire-3); text-transform: none; }

/* Rejillas y tarjetas ----------------------------------------------------- */
.rejilla { display: grid; gap: var(--aire-2); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla-4 { grid-template-columns: repeat(4, 1fr); }
}

.tarjeta { position: relative; }
.tarjeta-enlace { display: block; }
.tarjeta-imagen {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--tierra); border-radius: var(--radio);
}
.tarjeta-imagen img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--transicion);
  filter: saturate(0.92);
}
.tarjeta-enlace:hover .tarjeta-imagen img { transform: scale(1.04); filter: saturate(1.05); }
.tarjeta-texto { padding-top: var(--aire-2); }
.tarjeta-texto h3 { font-size: 1.25rem; text-transform: uppercase; margin-bottom: 0.35rem; }
.tarjeta-texto p { color: var(--humo); font-size: 0.9375rem; margin-bottom: 0.75rem; }
.tarjeta-accion {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--letras-rotulo); color: var(--ambar);
}

.chip {
  display: inline-block; margin-bottom: 0.75rem;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--letras-dato);
  color: var(--humo); border: 1px solid var(--linea-suave); padding: 0.3rem 0.6rem;
  border-radius: var(--radio);
}
.chip-vivo { color: var(--ambar); border-color: var(--linea); }

.marco-vacio {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radio);
  background: linear-gradient(135deg, var(--tierra), var(--carbon));
  border: 1px solid var(--linea-suave);
}

/* Numeros ----------------------------------------------------------------- */
.numeros { display: grid; gap: var(--aire-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .numeros { grid-template-columns: repeat(4, 1fr); } }
.numero { text-align: center; }
.numero-valor {
  display: block; font-family: var(--tipo-ui); font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 300; line-height: 1;
  color: var(--hueso); font-variant-numeric: tabular-nums;
}
.numero-etiqueta {
  display: block; margin-top: 0.6rem; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: var(--letras-dato); color: var(--humo);
}

/* Evento ------------------------------------------------------------------ */
.evento-cabecera {
  display: grid; gap: var(--aire-3); align-items: start;
  width: min(100% - 2rem, var(--ancho)); margin-inline: auto;
  padding-top: calc(var(--aire-5) + 3rem);
}
@media (min-width: 900px) {
  .evento-cabecera { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--aire-4); }
}
.evento-flyer img, .evento-flyer .marco-vacio { border-radius: var(--radio-grande); width: 100%; }
.evento-datos h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.evento-bajada { color: var(--arena); font-size: 1.1rem; }
.evento-acciones { display: flex; flex-wrap: wrap; gap: var(--aire-1); margin-top: var(--aire-3); }

.ficha { display: grid; gap: 0.85rem; margin: var(--aire-3) 0 0; }
.ficha div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--aire-1); align-items: baseline; }
.ficha dt {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--letras-dato); color: var(--humo);
}
.ficha dd { margin: 0; color: var(--hueso); }
.ficha-ancha div { grid-template-columns: 11rem 1fr; }
@media (max-width: 620px) {
  .ficha div, .ficha-ancha div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Fases ------------------------------------------------------------------- */
.fases { display: grid; gap: var(--aire-1); }
.fase {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--aire-2); padding: var(--aire-2);
  border: 1px solid var(--linea-suave); border-radius: var(--radio);
  background: linear-gradient(to right, rgba(27, 22, 19, 0.7), transparent);
}
.fase-nombre {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.25rem;
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: var(--letras-rotulo); color: var(--arena);
}
.fase-precio { font-family: var(--tipo-ui); font-size: 1.9rem; font-weight: 300; margin: 0; font-variant-numeric: tabular-nums; }
.fase-desglose { font-size: 0.75rem; color: var(--humo); margin: 0.35rem 0 0; }
.fase-nota { font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--letras-dato); color: var(--humo); }

.estado {
  font-size: 0.625rem; letter-spacing: var(--letras-dato); padding: 0.2rem 0.5rem;
  border: 1px solid currentColor; border-radius: var(--radio);
}
.estado-vive { color: var(--vivo); }
.estado-espera { color: var(--ambar); }
.estado-fin { color: var(--humo); }

/* Line up ----------------------------------------------------------------- */
.lineup { display: grid; gap: var(--aire-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .lineup { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .lineup { grid-template-columns: repeat(4, 1fr); } }
.lineup-foto { aspect-ratio: 1; overflow: hidden; border-radius: var(--radio); background: var(--tierra); }
.lineup-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms; }
.lineup-item a:hover .lineup-foto img { transform: scale(1.05); }
.lineup-nombre { margin: 0.75rem 0 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lineup-pais, .lineup-hora { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--humo); }
.lineup-hora { color: var(--ambar); font-variant-numeric: tabular-nums; }

.artistas-lista { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.artista-chip a {
  display: inline-flex; gap: 0.5rem; align-items: baseline;
  border: 1px solid var(--linea-suave); border-radius: 999px; padding: 0.55rem 1.1rem;
  font-size: 0.875rem; transition: border-color var(--transicion), color var(--transicion);
}
.artista-chip a:hover { border-color: var(--ambar); color: var(--ambar); }
.artista-chip span { color: var(--humo); font-size: 0.75rem; }

.tarjeta-artista-foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radio); background: var(--tierra); }
.tarjeta-artista-foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-artista-nombre { margin: 0.75rem 0 0; text-transform: uppercase; font-size: 1rem; }
.tarjeta-artista-pais { margin: 0.1rem 0 0; color: var(--humo); font-size: 0.8125rem; }

.ficha-artista { display: grid; gap: var(--aire-3); }
@media (min-width: 860px) { .ficha-artista { grid-template-columns: 0.6fr 1fr; gap: var(--aire-4); } }
.enlaces-artista { display: flex; gap: var(--aire-2); margin-top: var(--aire-2); }
.enlaces-artista a { color: var(--ambar); border-bottom: 1px solid var(--linea); padding-bottom: 2px; }
.lista-ediciones { display: grid; gap: 0.5rem; margin-top: var(--aire-2); }
.lista-ediciones a { display: flex; justify-content: space-between; gap: var(--aire-2); border-bottom: 1px solid var(--linea-suave); padding: 0.6rem 0; }
.lista-ediciones span { color: var(--humo); font-size: 0.875rem; }

/* Galeria ----------------------------------------------------------------- */
.galeria { display: grid; gap: 0.5rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.foto { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radio); background: var(--tierra); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms; }
.foto:hover img { transform: scale(1.03); }
@media (min-width: 860px) {
  .galeria-marca .foto-ancha { grid-column: span 2; aspect-ratio: 3 / 2; }
}

.bloque {
  padding: var(--aire-3); border: 1px solid var(--linea-suave); border-radius: var(--radio);
  background: linear-gradient(160deg, var(--tierra), transparent);
}
.bloque h3 { font-size: 1.2rem; text-transform: uppercase; }
.bloque p { color: var(--arena); margin: 0; }

/* Captura de correo ------------------------------------------------------- */
.captura { padding-block: var(--aire-5); }
.captura-caja {
  width: min(100% - 2rem, var(--ancho-angosto)); margin-inline: auto; text-align: center;
  padding: var(--aire-4) var(--aire-3);
  border: 1px solid var(--linea); border-radius: var(--radio-grande);
  background: radial-gradient(120% 140% at 50% 0%, rgba(224, 164, 88, 0.12), transparent 65%), var(--carbon);
}
.captura-caja h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; }
.captura-caja p { color: var(--arena); }

.formulario { display: grid; gap: 0.75rem; margin-top: var(--aire-2); text-align: left; }
.captura .formulario { max-width: 30rem; margin-inline: auto; }
.formulario label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--letras-dato); color: var(--humo); }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; padding: 0.95rem 1rem; min-height: 48px;
  background: var(--negro); color: var(--hueso);
  border: 1px solid var(--linea-suave); border-radius: var(--radio);
  font: inherit; font-size: 1rem;
}
.formulario input::placeholder { color: var(--humo); }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--ambar); }
.formulario button {
  padding: 1rem 2rem; min-height: 48px; border: 0; border-radius: var(--radio);
  background: var(--ambar); color: #16110b; font: inherit; font-family: var(--tipo-ui); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--letras-rotulo); font-size: 0.78rem; cursor: pointer;
  transition: background-color var(--transicion);
}
.formulario button:hover { background: var(--hueso); }
.formulario button[disabled] { opacity: 0.6; cursor: progress; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.aviso { margin: 0; font-size: 0.875rem; color: var(--ambar); min-height: 1.2em; }
.aviso.mal { color: var(--rojizo); }

.lista-contacto { display: grid; gap: 0.75rem; font-size: 1.1rem; }
.lista-contacto a { border-bottom: 1px solid var(--linea); padding-bottom: 0.35rem; }

/* Barra de compra en movil ------------------------------------------------ */
.barra-compra {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--aire-2);
  padding: 0.75rem clamp(1rem, 4vw, 2rem);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(11, 10, 9, 0.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  transform: translateY(110%); transition: transform var(--transicion);
}
.barra-compra.visible { transform: translateY(0); }
.barra-texto { display: grid; gap: 0.1rem; min-width: 0; }
.barra-nombre {
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: var(--letras-rotulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-precio { font-size: 0.75rem; color: var(--humo); }
@media (min-width: 900px) { .barra-compra { display: none; } }

/* Pie --------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--linea-suave); padding: var(--aire-4) clamp(1rem, 4vw, 3rem) var(--aire-3);
}
.pie-grid {
  width: min(100%, var(--ancho)); margin-inline: auto;
  display: grid; gap: var(--aire-3); grid-template-columns: 1fr;
}
@media (min-width: 860px) { .pie-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.pie-marca { font-family: var(--tipo-ui); font-size: 1.1rem; letter-spacing: var(--letras-sello); margin-bottom: 0.5rem; }
.pie-lema { color: var(--humo); font-size: 0.875rem; }
.pie-menu ul, .pie-contacto ul { display: grid; gap: 0.6rem; font-size: 0.9375rem; color: var(--arena); }
.pie-menu a:hover, .pie-contacto a:hover { color: var(--ambar); }
.pie-legal {
  width: min(100%, var(--ancho)); margin: var(--aire-3) auto 0;
  font-size: 0.75rem; color: var(--humo); border-top: 1px solid var(--linea-suave);
  padding-top: var(--aire-2);
}

/* Aparicion suave --------------------------------------------------------- */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
.aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .aparece { opacity: 1; transform: none; }
  .hero-video { display: none; }
  .hero-con-video .hero-fondo > * { animation: none; transform: none; }
}

/* Quienes somos ----------------------------------------------------------
   El texto solo, centrado y a todo lo ancho, se leia como una entrada de blog.
   Ahora son dos columnas contra una foto que se sale de la caja por la derecha
   hasta el borde de la pantalla: es lo que rompe la fila de bloques centrados
   que trae el resto de la portada. */
.franja-que-es { position: relative; overflow: hidden; }

/* El sol de la marca, enorme y casi apagado, saliendo por la izquierda. No es
   un adorno suelto: es el mismo trazo del icono, al tamano en que se ve que
   son rayos y no un circulo. */
.franja-que-es::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: -16%; top: 50%; transform: translateY(-50%);
  width: min(66vw, 720px); aspect-ratio: 1;
  background: url("/img/icono.svg") left center / contain no-repeat;
  opacity: 0.11;
}

.que-es { position: relative; z-index: 1; display: grid; gap: var(--aire-3); align-items: center; }
@media (min-width: 900px) {
  .que-es { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(2.5rem, 6vw, 5rem); }
}

.que-es-texto { display: grid; gap: var(--aire-2); justify-items: start; }
.que-es-texto > * { margin: 0; }
/* Sin foto al lado, el texto vuelve a una medida de lectura y se queda solo. */
.que-es-texto:only-child { max-width: var(--ancho-angosto); }
.que-es-texto .texto-grande { max-width: 30ch; }
.que-es-texto .texto-medio { max-width: 42ch; }

/* Una raya de oro antes del rotulo, igual que en los flyers. */
.que-es-texto .kicker::before {
  content: ''; display: inline-block; width: 2.25rem; height: 1px;
  margin-right: 0.9rem; vertical-align: middle; background: var(--dorado);
}

.que-es-foto { position: relative; margin: 0; }
/* Un marco de oro corrido detras de la foto, hacia arriba y a la izquierda,
   que es el lado que queda a la vista cuando la foto se va al borde. */
.que-es-foto::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  /* El lado derecho se manda fuera de la ventana a proposito: la foto sangra
     hasta el borde y una raya cerrando ahi se leeria como un error. */
  inset: -1rem -2rem -1rem -1rem;
  border: 1px solid rgba(224, 164, 88, 0.34);
}
/* La foto no termina en un canto recto: se apaga contra el fondo por el lado
   del texto, asi la seccion se lee entera y no como dos tarjetas pegadas. */
.que-es-foto::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--negro), rgba(11, 10, 9, 0) 26%);
}
.que-es-foto img {
  display: block; position: relative; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 38%;
}
@media (min-width: 900px) {
  /* Hasta el borde de la ventana. Un margen en por ciento no sirve aca: en una
     rejilla se mide contra la columna, no contra el contenedor, y la foto se
     iba trescientos pixeles de largo. Se calcula el sobrante de la caja. */
  .que-es-foto { margin-right: calc(0px - max(1rem, (100vw - var(--ancho)) / 2)); }
  /* Al sangrar, el ancho depende de la ventana: si la altura saliera de una
     proporcion, la foto crece sin techo y se come la seccion. Se fija a mano. */
  .que-es-foto img { aspect-ratio: auto; height: clamp(380px, 44vw, 560px); }
}
@media (max-width: 899px) {
  .que-es-foto::before { inset: -0.7rem; }
  .que-es-foto::after { display: none; }
}

/* La invitacion que se abre sola ------------------------------------------
   Aparece una sola vez y recien cuando la portada quedo atras. La foto ocupa
   la mitad en pantalla ancha y se va en pantalla chica, donde el espacio hace
   falta para el formulario y no para la decoracion. */
.invitacion {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 1rem;
}
.invitacion[hidden] { display: none; }
.invitacion-fondo {
  position: absolute; inset: 0;
  background: rgba(6, 5, 5, 0.82);
  backdrop-filter: blur(6px) saturate(0.9);
  opacity: 0; transition: opacity var(--transicion);
}
.invitacion.abierta .invitacion-fondo { opacity: 1; }

.invitacion-caja {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  width: min(100%, 900px); max-height: calc(100dvh - 2rem);
  overflow: hidden auto;
  border: 1px solid var(--linea); border-radius: var(--radio-grande);
  background: radial-gradient(120% 120% at 100% 0%, rgba(224, 164, 88, 0.14), transparent 60%), var(--carbon);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(1rem) scale(0.985);
  transition: opacity var(--transicion), transform var(--transicion);
}
.invitacion.abierta .invitacion-caja { opacity: 1; transform: none; }

.invitacion-foto { position: relative; overflow: hidden; background: var(--tierra); }
/* Las fotos que hay son horizontales y esta columna es alta, asi que el
   recorte es fuerte. Se encuadra un poco arriba del centro, que es donde
   suelen estar las caras y la tarima. */
.invitacion-imagen { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* La foto se apaga hacia el lado del texto para que el borde entre las dos
   mitades no sea una linea dura. */
.invitacion-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11, 10, 9, 0.15) 40%, rgba(19, 17, 16, 0.92) 100%);
}

.invitacion-cuerpo { padding: var(--aire-4) var(--aire-3); }
.invitacion-cuerpo h2 {
  margin: 0.35rem 0 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 500;
  line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em;
}
.invitacion-evento {
  display: grid; gap: 0.1rem; margin: var(--aire-2) 0 0;
  padding-top: var(--aire-2); border-top: 1px solid var(--linea);
  font-family: var(--tipo-ui); font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: var(--letras-dato);
}
.invitacion-evento strong { color: var(--ambar); font-weight: 500; }
.invitacion-evento span { color: var(--humo); }
.invitacion-texto { margin: var(--aire-2) 0 0; color: var(--arena); font-size: 0.9375rem; }
.invitacion .formulario { margin-top: var(--aire-2); }
.invitacion .letra-chica { margin-top: 0.75rem; }

.invitacion-cerrar {
  position: absolute; top: 0.5rem; right: 0.5rem;
  display: grid; place-items: center; width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(11, 10, 9, 0.55); color: var(--arena); cursor: pointer;
  transition: color var(--transicion), background var(--transicion);
}
.invitacion-cerrar:hover, .invitacion-cerrar:focus-visible { color: var(--hueso); background: rgba(11, 10, 9, 0.85); }
.invitacion-cerrar svg { width: 18px; height: 18px; }

.invitacion-luego {
  margin-top: var(--aire-2); padding: 0; border: 0; background: none;
  color: var(--humo); font: inherit; font-family: var(--tipo-ui);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--letras-dato);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.invitacion-luego:hover, .invitacion-luego:focus-visible { color: var(--arena); }

@media (max-width: 720px) {
  .invitacion-caja { grid-template-columns: 1fr; }
  /* La foto se queda, pero como una franja: da el tono sin comerse la pantalla. */
  .invitacion-foto { height: 32vw; min-height: 120px; max-height: 190px; }
  .invitacion-foto::after {
    background: linear-gradient(180deg, rgba(11, 10, 9, 0.1) 30%, rgba(19, 17, 16, 0.95) 100%);
  }
  .invitacion-cuerpo { padding: var(--aire-3) var(--aire-2) var(--aire-3); }
}

@media (prefers-reduced-motion: reduce) {
  .invitacion-fondo, .invitacion-caja { transition: none; }
  .invitacion-caja { transform: none; }
}