:root {
  --tinta: #0E2238;
  --tinta-suave: #3B4F66;
  --niebla: #ECEFF1;
  --blanco: #FFFFFF;
  --laton: #B8892E;
  --laton-claro: #E3BE6A;
  --noche: #0E2238;
  --linea: rgba(14, 34, 56, 0.18);
  --titulos: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "Newsreader", Georgia, "Times New Roman", serif;
  --ancho: 68rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--niebla);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.1875rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--laton);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--tinta);
  color: var(--blanco);
  padding: .75rem 1rem;
  z-index: 100;
}
.saltar:focus { left: 0; }

/* Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem var(--gutter);
  background: rgba(236, 239, 241, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.marca {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .04em;
  text-decoration: none;
}

.menu { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }

.menu a {
  font-family: var(--titulos);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--laton); }

/* Portada */
.portada {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6.5rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}

.portada h1 {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: clamp(2.5rem, 8.4vw, 6.25rem);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}




.portada-pie {
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
}
.portada-pie p { margin: 0; font-size: 1.25rem; }

.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Botones */
.boton {
  display: inline-block;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: .85rem 1.4rem;
  border: 2px solid var(--tinta);
  border-radius: 3px;
  transition: background-color .15s, color .15s;
}
.boton-principal { background: var(--tinta); color: var(--blanco); }
.boton-principal:hover { background: #1B3A5C; }
.boton-secundario { background: transparent; color: var(--tinta); }
.boton-secundario:hover { background: var(--tinta); color: var(--blanco); }
.boton-latón { background: var(--laton-claro); border-color: var(--laton-claro); color: var(--tinta); }
.boton-latón:hover { background: var(--blanco); border-color: var(--blanco); }

/* Secciones */
.seccion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}

.seccion h2 {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}

.columna-texto { max-width: 38rem; }
.columna-texto p { margin: 0 0 1.1rem; }
.columna-texto .boton { margin-top: .6rem; }

/* Datos */
.datos { margin: 0; display: grid; gap: 0; align-content: start; }
.datos div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--linea);
}
.datos div:first-child { padding-top: 0; }
.datos dt {
  font-family: var(--titulos);
  font-weight: 500;
  font-size: .95rem;
  color: var(--tinta-suave);
}
.datos dd {
  margin: .15rem 0 0;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.2;
}

/* Conciertos (sección oscura) */
.seccion-noche {
  max-width: none;
  display: block;
  background: var(--noche);
  color: var(--blanco);
  border-top: none;
}
.envoltura { max-width: var(--ancho); margin: 0 auto; }
.seccion-noche h2 { color: var(--blanco); margin-bottom: 2rem; }

.proximos {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.proximos h3 {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 .6rem;
}
.proximos p { margin: 0 0 1.4rem; color: rgba(255, 255, 255, .86); }

.programa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 5vw, 4rem);
}
.estado {
  margin: 0 0 .5rem;
  font-family: var(--titulos);
  font-weight: 500;
  color: var(--laton-claro);
}
.programa h3 {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.lugar { margin: 0; font-size: 1.2rem; color: rgba(255, 255, 255, .86); }

.programa h4 {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--laton-claro);
  margin: 0 0 .6rem;
}
.programa h4:not(:first-child) { margin-top: 2rem; }

.obras { list-style: none; margin: 0; padding: 0; }
.obras li {
  display: grid;
  gap: .1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.obra { font-family: var(--titulos); font-weight: 700; font-size: 1.2rem; }
.autor { color: rgba(255, 255, 255, .8); font-size: 1.05rem; }

/* Comunidad */
.seccion-comunidad { grid-template-columns: minmax(0, 1fr); }

/* Contacto */
.contacto { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contacto li { padding: .8rem 0; border-top: 1px solid var(--linea); }
.contacto li span {
  display: block;
  font-family: var(--titulos);
  font-weight: 500;
  font-size: .95rem;
  color: var(--tinta-suave);
}
.contacto a { font-weight: 600; }

/* Pie */
.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, .85);
  padding: 2.5rem var(--gutter);
  font-size: 1rem;
}
.pie p { max-width: var(--ancho); margin: 0 auto .3rem; }
.pie-nombre {
  font-family: var(--titulos);
  font-weight: 700;
  color: var(--blanco);
}

/* Móvil */
@media (max-width: 780px) {
  body { font-size: 1.125rem; }
  .cabecera { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .menu { gap: .2rem 1.1rem; }
  .menu a { font-size: .9rem; }
  .seccion, .programa { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton { transition: none; }
}

/* Historial de conciertos */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}
.cifras div { border-top: 2px solid var(--laton-claro); padding-top: .8rem; }
.cifras dt { font-family: var(--titulos); font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.8); }
.cifras dd { margin: .2rem 0 0; font-family: var(--titulos); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.1; }

.historial-titulo {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
}

.mes { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.mes-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1.5rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--laton-claro);
}
.mes-cab h3 { margin: 0; font-family: var(--titulos); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.mes-cab p { margin: 0; color: var(--laton-claro); font-family: var(--titulos); font-weight: 500; }

.lista-conciertos { list-style: none; margin: 0; padding: 0; }
.concierto {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.fecha { text-align: right; }
.dia { font-family: var(--titulos); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--laton-claro); }
.detalle h4 { margin: 0 0 .25rem; font-family: var(--titulos); font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.lugar-fila { margin: 0; color: rgba(255,255,255,.86); font-size: 1.05rem; }
.meta-fila { margin: .2rem 0 0; color: rgba(255,255,255,.7); font-size: 1rem; font-style: italic; }

.programa-det { margin-top: .8rem; }
.programa-det summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .95rem;
  color: var(--laton-claro);
  border-bottom: 2px solid var(--laton-claro);
}
.programa-det[open] summary { margin-bottom: 1rem; }
.programa-det .programa-cuerpo { max-width: 40rem; }

@media (max-width: 780px) {
  .cifras { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .concierto { grid-template-columns: 3rem minmax(0, 1fr); gap: .8rem; }
  .dia { font-size: 2.1rem; }
}

/* ---- Logos ---- */
.marca { display: flex; align-items: center; gap: .6rem; }
.marca-logo { height: 2.5rem; width: auto; }
.pie-logos {
  max-width: var(--ancho);
  margin: 0 auto 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.pie-logos img { width: auto; max-width: 100%; }
.logo-osro { height: 6.5rem; }
.logo-mcd { height: 7.5rem; }
@media (max-width: 780px) {
  .logo-osro { height: 5rem; }
  .logo-mcd { height: 5.75rem; }
  .pie-logos { justify-content: flex-start; }
}

/* ---- Fotografías, repertorio e integrantes ---- */
.galeria {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .5rem;
}
.galeria img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
}
.foto { display: block; cursor: zoom-in; }
.foto:hover img { opacity: .88; }

#visor {
  width: min(94vw, 64rem);
  max-height: 94vh;
  padding: .75rem;
  border: 0;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--blanco);
}
#visor::backdrop { background: rgba(5, 14, 24, .86); }
#visor img { width: 100%; max-height: 78vh; object-fit: contain; }
#visor p { margin: .5rem 0 0; font-size: 1rem; }
#visor .cerrar {
  display: block;
  margin: 0 0 .6rem auto;
  padding: .45rem 1rem;
  font: 700 .95rem var(--titulos);
  color: var(--tinta);
  background: var(--laton-claro);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.programa-det .programa-cuerpo h5 {
  margin: 1.4rem 0 .5rem;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1rem;
  color: var(--laton-claro);
}
.programa-det .programa-cuerpo h5:first-child { margin-top: 0; }
.dirige { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: 1.15rem; }
.bio { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.5; margin-top: .25rem; }

.seccion-repertorio { grid-template-columns: minmax(0, 1fr); }
.columna-ancha { max-width: 46rem; }
.grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.grupo-obras h3 {
  margin: 0 0 .5rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--laton);
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1.35rem;
}
.repertorio { list-style: none; margin: 0; padding: 0; }
.repertorio li { padding: .8rem 0; border-bottom: 1px solid var(--linea); }
.repertorio .obra { display: block; font-family: var(--titulos); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.repertorio .autor { display: block; font-size: 1rem; color: var(--tinta-suave); }
.repertorio .cuando { display: block; margin-top: .15rem; font-size: .95rem; font-style: italic; color: var(--tinta-suave); }

.seccion-blanca {
  max-width: none;
  display: block;
  background: var(--blanco);
}
.seccion-blanca .envoltura { max-width: var(--ancho); margin: 0 auto; }
.intro-integrantes { margin: 0 0 1.5rem; max-width: 38rem; }
.direccion { margin: 0 0 clamp(2rem, 5vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.direccion div { border-top: 2px solid var(--laton); padding-top: .8rem; }
.direccion dt { font-family: var(--titulos); font-weight: 500; font-size: .95rem; color: var(--tinta-suave); }
.direccion dd { margin: .15rem 0 0; font-family: var(--titulos); font-weight: 800; font-size: 1.5rem; line-height: 1.2; }

.plantilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.familia { margin-bottom: 1.6rem; }
.familia h4 {
  margin: 0 0 .4rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--linea);
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1.05rem;
}
.familia ul { list-style: none; margin: 0; padding: 0; }
.familia li { padding: .12rem 0; font-size: 1.05rem; line-height: 1.45; }

@media (max-width: 900px) {
  .grupos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .direccion, .plantilla { grid-template-columns: minmax(0, 1fr); }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

/* ---- Partitura y ubicación ---- */
.partitura { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.partitura img {
  width: 100%;
  height: auto;
  padding: clamp(.75rem, 2vw, 1.5rem);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 2px;
}

.seccion-ubicacion { align-items: start; }
.sede-nombre { font-family: var(--titulos); font-weight: 700; font-size: 1.35rem; line-height: 1.25; margin: 0 0 .3rem; }
.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 18rem;
  border: 1px solid var(--linea);
  background: var(--blanco);
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 780px) {
  .mapa { aspect-ratio: 1 / 1; min-height: 16rem; }
}

/* ---- Fotos y videos (Drive) ---- */
.seccion-drive { grid-template-columns: minmax(0, 1fr); }
.visor-drive {
  height: min(78vh, 42rem);
  min-height: 24rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
}
.visor-drive iframe { display: block; width: 100%; height: 100%; border: 0; }