/* ===================================================================
   ORQUESTA CLM — tokens
=================================================================== */
:root{
  --ink:        #17181c;
  --red:        #c31d0f; /* rojo exacto del logo, para que las imágenes se integren sin costura */
  --red-deep:   #85140a;
  --red-bright: #d2564b;
  --red-soft:   #f2cdca;
  --parchment:  #f3eee4;
  --parchment-2:#e8e0cf;
  --slate:      #6e6a62;
  --white:      #ffffff;

  --font-display: "Fraunces", serif;
  --font-body:    "Work Sans", sans-serif;

  --header-h: 96px;
  --accent-h: 11px; /* filete superior + inferior */
  --ease: cubic-bezier(.4,0,.2,1);
  --radius: 2px; /* acabado casi recto, sin esquinas informales */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + var(--accent-h) + 10px); }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2{ font-family: var(--font-display); margin:0; font-weight:500; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--ink); color:var(--white); padding:.8em 1.2em;
}
.skip-link:focus{ left:0; }

/* ===================================================================
   CABECERA PRINCIPAL
=================================================================== */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  /* la cabecera anima su propia altura (masthead + header-main) al
     hacer scroll; sin esto, el "scroll anchoring" del navegador
     intenta compensar ese cambio de layout re-ajustando el scroll,
     lo que cruza el umbral is-scrolled una y otra vez y deja la
     cabecera oscilando entre grande y pequeña sin asentarse nunca */
  overflow-anchor: none;
}

/* --- filete superior de color --- */
.top-accent{
  height:6px;
  background: var(--ink);
}

/* --- filete inferior de color: firma de la cabecera, como el aro del logo --- */
.bottom-accent{
  height:3px;
  background: var(--white);
}

.header-main{
  position:relative;
  background: var(--red);
  height: var(--header-h);
  transition: height .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled .header-main{
  height: 66px;
  box-shadow: 0 8px 18px -16px rgba(23,24,28,.35);
}
.header-main__inner{
  max-width:1320px;
  margin:0 auto;
  height:100%;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
  display:flex;
  align-items:center;
  gap: clamp(1rem, 3vw, 2.6rem);
}
/* --- las filas son solo de agrupación semántica: no alteran el layout --- */
.header-main__brand-row,
.header-main__nav-row{ display:contents; }

/* --- marca: logo de CLM Sinfónica, siempre en su versión ampliada --- */
.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand__mark--wide{
  display:block;
  height:64px;
  width:auto;
  transition: height .3s var(--ease);
}
.site-header.is-scrolled .brand__mark--wide{ height:44px; }

/* --- navegación: subdivisiones directas, sin botón "menú" --- */
.main-nav{ margin-right:auto; }
.main-nav__list{
  display:flex;
  align-items:center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  margin-left: clamp(.6rem, 2vw, 1.6rem);
}
.has-dropdown{ position:relative; }
.main-nav__list > li{ position:relative; }
.main-nav__link{
  display:inline-flex;
  align-items:center;
  padding: .5rem .05rem;
  font-size:.94rem;
  font-weight:600;
  color: var(--white);
  position:relative;
  white-space:nowrap;
  letter-spacing:.005em;
}
.main-nav__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0px;
  height:2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .28s var(--ease);
}
.main-nav__link:hover::after,
.has-dropdown:focus-within .main-nav__link::after{
  transform: scaleX(1);
}
.main-nav__link:hover,
.has-dropdown:focus-within .main-nav__link{ color: var(--ink); }

.dropdown{
  position:absolute;
  top: calc(100% + 18px);
  left:50%;
  transform: translate(-50%, 6px);
  min-width: 230px;
  background: var(--white);
  padding:.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(23,24,28,.1);
  border-top: 2px solid var(--red-deep);
  opacity:0;
  visibility:hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  box-shadow: 0 16px 30px -20px rgba(23,24,28,.24);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{
  opacity:1;
  visibility:visible;
  transform: translate(-50%, 0);
}
.dropdown li a{
  display:block;
  padding: .62rem .85rem;
  font-size:.86rem;
  font-weight:500;
  color: var(--ink);
  border-radius: var(--radius);
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .18s var(--ease);
}
.dropdown li a:hover{
  background: var(--parchment);
  color: var(--red);
  padding-left: 1.05rem;
}

/* --- acciones --- */
.header-main__actions{
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-shrink:0;
}
.btn{
  font-family: var(--font-body);
  font-size:.78rem;
  font-weight:600;
  padding: .78rem 1.6rem;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing:.08em;
  border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space:nowrap;
}
.btn--primary{
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.btn--primary:hover{
  background: var(--white);
  color: var(--red);
  border-color: var(--white);
}

/* --- botón circular (búsqueda) --- */
.icon-btn{
  width:40px; height:40px;
  border-radius: var(--radius);
  border: 1px solid rgba(23,24,28,.18);
  background: var(--white);
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.icon-btn[aria-expanded="true"]{
  background: var(--ink);
  color: var(--white);
}

/* --- panel de búsqueda --- */
.search-panel{
  position:absolute;
  top:100%; left:0; right:0;
  background: var(--white);
  border-top: 1px solid rgba(23,24,28,.08);
  box-shadow: 0 12px 22px -18px rgba(23,24,28,.22);
  max-height:0;
  overflow:hidden;
  transition: max-height .3s var(--ease);
}
.search-panel.is-open{ max-height:90px; }
.search-panel__inner{
  max-width:1320px;
  margin:0 auto;
  padding: 1.1rem clamp(1.2rem, 4vw, 2.5rem);
  display:flex;
  align-items:center;
  gap:1rem;
}
.search-panel__inner input{
  flex:1;
  border:none;
  outline:none;
  font-family: var(--font-body);
  font-size:1.05rem;
  background:transparent;
  color: var(--ink);
}
.search-panel__inner input::placeholder{ color: var(--slate); }
.search-panel__close{
  border:none;
  background:none;
  font-size:1.4rem;
  line-height:1;
  color: var(--slate);
  cursor:pointer;
  padding:.2rem .4rem;
}
.search-panel__close:hover{ color: var(--ink); }

/* --- hamburguesa (móvil) --- */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px; height:38px;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.hamburger span{
  display:block;
  height:2px;
  background: var(--white);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===================================================================
   RESPONSIVE — cabecera
=================================================================== */
@media (max-width: 940px){
  .header-main__inner{ gap:1rem; }
  .main-nav{
    position:fixed;
    top: calc(66px + var(--accent-h));
    left:0; right:0; bottom:0;
    background: var(--ink);
    padding: 1.2rem 1.4rem 2.5rem;
    overflow-y:auto;
    transform: translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .main-nav.is-open{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .main-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .has-dropdown{ border-bottom:1px solid rgba(243,238,228,.1); }
  .main-nav__link{
    color: var(--parchment);
    padding: 1rem 0;
    width:100%;
    font-size:1.02rem;
  }
  .main-nav__link::after{ display:none; }
  .dropdown{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
    box-shadow:none;
    background:transparent;
    padding: 0 0 .6rem .9rem;
    min-width:0;
  }
  .dropdown::before{ display:none; }
  .has-dropdown.is-open .dropdown{ display:block; }
  .dropdown li a{ color: var(--parchment-2); padding: .55rem 0; }
  .dropdown li a:hover{ background:none; color: var(--red-soft); padding-left:.3rem; }

  .header-main__actions .btn--primary{ padding:.6rem .95rem; font-size:.8rem; }
  .hamburger{ display:flex; }
}

@media (max-width: 480px){
  .header-main__inner{ gap:.7rem; }
  .brand__mark--wide{ height:48px; }
}

/* ===================================================================
   SECCIONES DE CONTENIDO (marcadores de posición)
=================================================================== */
.section{ padding: clamp(4rem,10vw,7rem) clamp(1.2rem,4vw,2.5rem); }
.section__inner{ max-width:1280px; margin:0 auto; }
/* separador de apartado: franja de acento en vez de alternar el
   fondo — marca el inicio de cada sección con el mismo color en
   toda la página */
.section__inner::before{
  content:"";
  display:block;
  width:48px;
  height:4px;
  background: var(--red);
  margin-bottom: clamp(1.4rem, 3vw, 1.8rem);
}

/* ===================================================================
   CARRUSEL — portada, justo pegado a la cabecera
   Prototipo: los fondos de cada .carrusel__slide son marcadores de
   posición en la paleta de marca (garnet/negro/champán). Sustituir
   por fotografías reales (background-image) cuando estén disponibles.
=================================================================== */
.carrusel{
  position:relative;
  overflow:hidden;
  height: min(82vh, 720px);
  min-height: 420px;
  background: var(--black);
}
.carrusel__track{
  display:flex;
  height:100%;
  transition: transform .6s var(--ease);
}
.carrusel__slide{
  flex: 0 0 100%;
  min-width:100%;
  position:relative;
  display:flex;
  align-items:flex-end;
}
/* filtro oscuro sobre toda la foto (no solo un degradado bajo el
   texto) para que cualquier imagen quede integrada con la paleta
   negra/granate y el título se lea bien caiga donde caiga */
.carrusel__slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg,
    rgba(0,0,0,.8) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.5) 100%);
}
/* diapositiva 1: coloca la foto en imagenes/carrusel-1.jpg (horizontal,
   mínimo 1600×900px) — mientras no exista el archivo se ve el degradado
   de abajo, que hace de respaldo si la imagen no carga */
.carrusel__slide--1{
  background:
    url('imagenes/orquesta/brujera---almagro47_53891855815_o.jpg') center / cover no-repeat,
    linear-gradient(155deg, #1c1712 0%, #5e0e17 55%, #2a2118 100%);
}
.carrusel__slide--2{ background: url('imagenes/orquesta/brujera---almagro47_53891438496_o.jpg') center / cover no-repeat,
    linear-gradient(155deg, #1c1712 0%, #5e0e17 55%, #2a2118 100%); }
.carrusel__slide--3{ background: url('imagenes/orquesta/brujera---almagro47_53891855780_o.jpg') center / cover no-repeat,
    linear-gradient(155deg, #17181c 0%, #5e0e17 45%, #000 100%); }

.carrusel__caption{
  position:relative;
  z-index:1;
  max-width:1280px;
  width:100%;
  margin:0 auto;
  padding: 0 clamp(1.2rem,4vw,2.5rem) clamp(3rem,8vw,5rem);
  color: var(--parchment);
}
.carrusel__caption .eyebrow{ color: var(--champagne); }
.carrusel__caption h1{
  font-family: var(--font-display);
  font-weight:500;
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  line-height:1.08;
  max-width: 16ch;
  margin: .6rem 0 1.4rem;
  color: var(--parchment);
}
.carrusel__caption .section__lead{ color: rgba(243,238,228,.75); max-width:52ch; }
.carrusel__caption--min .carrusel__title{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height:1.3;
  max-width: 26ch;
  margin: .5rem 0 0;
}

.carrusel__arrow{
  position:absolute; top:50%;
  transform: translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(232,221,198,.35);
  background: rgba(0,0,0,.25);
  color: var(--parchment);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
  z-index:2;
}
.carrusel__arrow:hover{ background: rgba(0,0,0,.5); border-color: var(--champagne); }
.carrusel__arrow--prev{ left: clamp(1rem,3vw,2rem); }
.carrusel__arrow--next{ right: clamp(1rem,3vw,2rem); }

.carrusel__dots{
  position:absolute; left:50%; bottom: clamp(1.2rem,3vw,1.8rem);
  transform: translateX(-50%);
  display:flex; gap:.6rem;
  z-index:2;
}
.carrusel__dot{
  width:8px; height:8px;
  border-radius:50%;
  border:1px solid rgba(232,221,198,.6);
  background: transparent;
  padding:0;
  cursor:pointer;
  transition: background .2s var(--ease), width .2s var(--ease);
}
.carrusel__dot.is-active{
  background: var(--champagne);
  width:22px;
  border-radius:4px;
}

@media (max-width: 640px){
  .carrusel{ height: min(72vh, 560px); }
  .carrusel__arrow{ width:38px; height:38px; }
}

/* --- banner de apartado (páginas que no son la Home)
       admite foto de fondo por página: cada id de abajo apunta a un
       archivo en imagenes/cabeceras/ — mientras no exista el archivo
       se ve el fondo negro de siempre, así que no rompe nada hasta
       que se suba la foto --- */
.section--intro{
  position:relative;
  overflow:hidden;
  text-align:left;
  background: var(--ink);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color: var(--parchment);
  padding-bottom: clamp(3rem,7vw,4rem);
}
.section--intro::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg,
    rgba(0,0,0,.8) 0%,
    rgba(0,0,0,.4) 55%,
    rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.section--intro .section__inner{ position:relative; z-index:1; }
#entradas.section--intro{
  background-image: url('imagenes/cabeceras/conciertos.jpg');
}
#orquesta.section--intro{
  background-image: url('imagenes/cabeceras/orquesta.jpg');
  background-position: center 35%;
}
#ver-escuchar.section--intro{
  background-image: url('imagenes/cabeceras/ver-y-escuchar.jpg');
}
#patrocinio.section--intro{
  background-image: url('imagenes/cabeceras/patrocinio.jpg');
}
#noticias-intro.section--intro{
  background-image: url('imagenes/cabeceras/noticias.jpg');
}
.section--intro .eyebrow{
  color: var(--red-soft);
  animation: cabecera-titulo-entrada .45s var(--ease) both;
}
.section--intro h1{
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height:1.1;
  margin: .6rem 0 1rem;
  animation: cabecera-titulo-entrada .45s var(--ease) .06s both;
}
.section--intro .section__lead{
  color: rgba(243,238,228,.75);
  max-width:52ch;
  animation: cabecera-titulo-entrada .45s var(--ease) .12s both;
}
@keyframes cabecera-titulo-entrada{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .section--intro .eyebrow, .section--intro h1, .section--intro .section__lead{ animation:none; }
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.76rem;
  font-weight:600;
  color: var(--red);
  margin:0 0 .6rem;
}
.section h2{ font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom:.8rem; }
.section__lead{
  max-width:56ch;
  color: var(--slate);
  font-size:1.05rem;
  line-height:1.6;
}

/* ===================================================================
   LA ORQUESTA — Historia y Director (texto + foto)
=================================================================== */
.bio .section__lead{ margin: 0 0 clamp(2rem,5vw,2.6rem); }

/* --- Director: retrato en columna lateral fija --- */
.bio__grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) 460px;
  gap: clamp(2rem,5vw,3.5rem);
  align-items:start;
}
.bio__grid--reverse{ grid-template-columns: 320px minmax(0,1fr); }
.bio__grid--reverse .bio__photo{ order:-1; }
.bio__photo{
  margin:0;
  position:sticky;
  top: calc(var(--header-h) + var(--accent-h) + 24px);
}
.bio__photo img{
  display:block;
  width:100%;
  aspect-ratio: 3 / 4;
  object-fit:cover;
  box-shadow: 0 30px 50px -24px rgba(23,24,28,.45);
}
/* --- foto de grupo del Festival: es 4:3, se ve entera sin recortar --- */
.bio__photo--square img{
  aspect-ratio: 4 / 3;
}

/* --- texto compartido --- */
.bio__text p{
  color: var(--ink);
  font-size:1.02rem;
  line-height:1.75;
  margin:0 0 1.2rem;
}
.bio__text p:last-child{ margin-bottom:0; }
.bio__text strong{ font-weight:600; }
.bio__name{
  font-family: var(--font-display);
  font-size:1.4rem;
  font-weight:500;
  margin:0 0 .2rem !important;
}
.bio__role{
  color: var(--red);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  margin:0 0 1.4rem !important;
}

@media (max-width: 860px){
  .bio__grid, .bio__grid--reverse{ grid-template-columns: 1fr; }
  .bio__grid--reverse .bio__photo{ order:0; }
  .bio__photo{ position:static; max-width:320px; margin:0 0 1.6rem; }
  .bio__grid .bio__photo{ max-width:460px; }
}
/* ===================================================================
   PRÓXIMOS EVENTOS — calendario + tarjetas
   El contenido lo genera eventos.js a partir de eventos-datos.js;
   aquí solo vive el aspecto visual.
=================================================================== */
.eventos__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
}
.eventos__head h2{ margin-bottom:0; text-transform:capitalize; }
.eventos__link{
  font-family: var(--font-header);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.03em;
  color: var(--red);
  white-space:nowrap;
  transition: opacity .2s var(--ease);
}
.eventos__link:hover{ opacity:.7; }
.eventos__link span{ display:inline-block; transition: transform .2s var(--ease); }
.eventos__link:hover span{ transform: translateX(3px); }

/* --- tira de días del mes: todos caben en el ancho, sin scroll --- */
.eventos__calendario{
  display:flex;
  gap: clamp(.15rem, .5vw, .5rem);
  padding-bottom: 1.6rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(23,24,28,.1);
}
.eventos__dia{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  flex: 1 1 0;
  min-width:0;
  padding:.3rem 0 0;
}
.eventos__dia-num{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(.78rem, 1.6vw, 1rem);
  color: var(--ink);
  width: clamp(22px, 2.4vw, 30px);
  height: clamp(22px, 2.4vw, 30px);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.eventos__dia.is-today .eventos__dia-num{
  background: var(--ink);
  color: var(--white);
}
.eventos__dia-nombre{
  font-family: var(--font-header);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.04em;
  color: var(--slate);
}
.eventos__dia.has-evento .eventos__dia-nombre{ color: var(--red); }
/* punto que señala los días con concierto: siempre reservado, solo
   se colorea cuando el día tiene evento, para que la fila no salte */
.eventos__dia-punto{
  width:5px; height:5px;
  border-radius:50%;
  background: transparent;
}
.eventos__dia.has-evento .eventos__dia-punto{ background: var(--red); }

@media (max-width: 640px){
  .eventos__dia-nombre{ display:none; }
}

/* --- tarjetas de los próximos conciertos + la destacada --- */
.eventos__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2rem);
  align-items:stretch;
}
.evento-card{ display:flex; flex-direction:column; }
.evento-card__cuerpo{ flex:1 1 auto; }
.evento-card__poster{
  aspect-ratio: 1 / 1;
  background-size:cover;
  background-position:center;
  border-radius: var(--radius);
  margin-bottom:1rem;
}
.evento-card__fecha{
  display:flex;
  align-items:baseline;
  gap:.7rem;
}
.evento-card__dia{
  font-family: var(--font-display);
  font-size:2.1rem;
  font-weight:600;
  line-height:1;
  color: var(--ink);
}
.evento-card__fecha-texto{
  font-size:.82rem;
  line-height:1.45;
  color: var(--slate);
}
.evento-card__fecha-texto strong{ color: var(--ink); font-weight:700; }
.evento-card__divider{
  border:none;
  border-top:2px solid var(--ink);
  width:38px;
  margin: .8rem 0 .7rem;
}
.evento-card__categoria{
  text-transform:uppercase;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  color: var(--slate);
  margin:0 0 .35rem;
}
.evento-card__titulo{
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  line-height:1.3;
  color: var(--ink);
  margin:0 0 .6rem;
  transition: color .2s var(--ease);
}
.evento-card:hover .evento-card__titulo{ color: var(--red); }
.evento-card__artista{
  font-size:.86rem;
  font-weight:700;
  color: var(--ink);
  margin:0;
}
.evento-card__ciudad{
  font-size:.82rem;
  color: var(--slate);
  margin:.15rem 0 0;
}
.evento-card__cta{
  display:inline-block;
  align-self:flex-start;
  margin-top:1rem;
  font-size:.72rem;
  padding:.65rem 1.3rem;
}

/* --- tarjeta destacada: misma columna, foto de fondo oscurecida.
       Es un <button> (abre la ventana emergente), así que se anulan
       los estilos por defecto del elemento --- */
.evento-destacado{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  position:relative;
  width:100%;
  min-height: 320px;
  border:none;
  border-radius: var(--radius);
  background-color: var(--ink);
  background-size:cover;
  background-position:center;
  padding: clamp(1.2rem, 3vw, 1.6rem);
  overflow:hidden;
  isolation:isolate;
  cursor:pointer;
  text-align:left;
  font-family: inherit;
}
.evento-destacado::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55) 100%);
}
.evento-destacado__barra{
  display:block;
  width:26px; height:3px;
  background: var(--red);
  margin-bottom:.9rem;
}
.evento-destacado h3{
  font-family: var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  color: var(--white);
  margin:0 0 .6rem;
}
.evento-destacado p{
  font-size:.86rem;
  line-height:1.5;
  color: rgba(255,255,255,.78);
  margin:0;
}
.evento-destacado__mas{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  margin-top:1rem;
  font-family: var(--font-header);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  color: var(--champagne, var(--red-soft));
  transition: gap .2s var(--ease);
}
.evento-destacado:hover .evento-destacado__mas{ gap:.5rem; }

/* ===================================================================
   VENTANA EMERGENTE — detalle de la tarjeta destacada
=================================================================== */
.modal{
  position:fixed; inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(1rem, 4vw, 2rem);
  visibility:hidden;
  opacity:0;
  transition: opacity .25s var(--ease), visibility .25s;
}
.modal.is-open{ visibility:visible; opacity:1; }
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(23,24,28,.7);
}
.modal__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:720px;
  max-height:88vh;
  overflow-y:auto;
  background: var(--white);
  border-radius: var(--radius);
  transform: translateY(14px);
  transition: transform .25s var(--ease);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
}
@media (min-width: 700px){
  .modal__panel{
    display:flex;
    align-items:stretch;
    max-width:920px;
    max-height:82vh;
    overflow-y:hidden;
  }
}
.modal.is-open .modal__panel{ transform: translateY(0); }
.modal__close{
  position:absolute; top:.9rem; right:.9rem;
  z-index:2;
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background: rgba(23,24,28,.55);
  color: var(--white);
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease);
}
.modal__close:hover{ background: var(--garnet); }
.modal__media{
  position:relative;
  height: clamp(160px, 30vw, 260px);
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center;
  background-color: var(--ink);
}
.modal__media::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 -40px 50px -30px rgba(0,0,0,.6);
  pointer-events:none;
}
@media (min-width: 700px){
  .modal__media{
    flex: 0 0 42%;
    height:auto;
  }
  .modal__media::after{
    box-shadow: inset -50px 0 60px -35px rgba(0,0,0,.55);
  }
}
.modal__body{ padding: clamp(1.4rem, 4vw, 2.2rem); position:relative; }
@media (min-width: 700px){
  .modal__body{
    flex:1 1 auto;
    overflow-y:auto;
    max-height:82vh;
  }
}
.modal__body::before{
  content:"Abono de temporada";
  display:block;
  font-family: var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--red);
  margin:0 0 .5rem;
}
.modal__body h3{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight:600;
  color: var(--garnet);
  margin:0 0 .9rem;
}
.modal__body p{
  font-size:.95rem;
  line-height:1.7;
  color: var(--slate);
  margin:0 0 1.5rem;
}
#evento-modal-texto{ white-space: pre-line; }
#evento-modal-cta{
  background: var(--garnet);
  border-color: var(--garnet);
}
#evento-modal-cta:hover{
  background: var(--white);
  color: var(--garnet);
  border-color: var(--garnet);
}

@media (max-width: 940px){
  .eventos__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .eventos__grid{ grid-template-columns: 1fr; }
}

/* ===================================================================
   ABONO DE TEMPORADA (conciertos.html)
   El contenido lo genera eventos.js a partir de CONCIERTO_DESTACADO
   en eventos-datos.js; aquí solo vive el aspecto visual.
=================================================================== */
.abono__grid{
  display:grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap: clamp(2rem,5vw,3.5rem);
  align-items:start;
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
}
.abono__poster{
  margin:0;
  aspect-ratio: 7 / 10;
  background-size:cover;
  background-position:center;
  border-radius: var(--radius);
  box-shadow: 0 30px 50px -24px rgba(23,24,28,.45);
}
.abono__body p{
  color: var(--ink);
  font-size:1.02rem;
  line-height:1.75;
  margin:0 0 1.2rem;
}
.abono__lista{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin: 0 0 1.8rem;
  padding: clamp(1.2rem,3vw,1.6rem) 0 0;
  border-top: 1px solid rgba(23,24,28,.12);
}
.abono__lista li{
  color: var(--ink);
  font-size:.94rem;
  line-height:1.6;
  padding-left:1rem;
  border-left: 2px solid var(--red);
}
.abono__lista strong{ font-weight:600; }

@media (max-width: 720px){
  .abono__grid{ grid-template-columns: 1fr; }
  .abono__poster{ max-width:280px; }
}

/* ===================================================================
   GALERÍA DE IMÁGENES (ver-y-escuchar.html)
   El contenido lo genera galeria.js a partir de galeria-datos.js;
   aquí solo vive el aspecto visual de la cuadrícula y del visor.
=================================================================== */
.galeria__grid{
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.6vw, 1rem);
}
.galeria__miniatura{
  position:relative;
  aspect-ratio: 1 / 1;
  border:none;
  padding:0;
  border-radius: var(--radius);
  overflow:hidden;
  cursor:pointer;
  background: var(--ink);
}
.galeria__miniatura img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.galeria__miniatura::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(23,24,28,0);
  transition: background .2s var(--ease);
  pointer-events:none;
}
.galeria__miniatura:hover img,
.galeria__miniatura:focus-visible img{ transform: scale(1.06); }
.galeria__miniatura:hover::after,
.galeria__miniatura:focus-visible::after{ background: rgba(23,24,28,.15); }

@media (max-width: 940px){
  .galeria__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .galeria__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* --- visor a pantalla completa --- */
.lightbox__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1100px;
  max-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox__img{
  max-width:100%;
  max-height:80vh;
  display:block;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.lightbox__contador{
  position:absolute;
  bottom:-2.2rem; left:0; right:0;
  text-align:center;
  color: rgba(243,238,228,.75);
  font-size:.85rem;
}
.lightbox__nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background: rgba(23,24,28,.55);
  color: var(--white);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease);
}
.lightbox__nav:hover{ background: var(--garnet); }
.lightbox__nav--prev{ left:-.5rem; }
.lightbox__nav--next{ right:-.5rem; }
@media (min-width: 700px){
  .lightbox__nav--prev{ left:-3.2rem; }
  .lightbox__nav--next{ right:-3.2rem; }
}
@media (max-width: 560px){
  .lightbox__nav{ width:36px; height:36px; font-size:1.3rem; }
  .lightbox__nav--prev{ left:.3rem; }
  .lightbox__nav--next{ right:.3rem; }
}

/* ===================================================================
   VÍDEOS EN CONCIERTO (ver-y-escuchar.html)
   El contenido lo genera videos.js a partir de videos-datos.js;
   aquí solo vive el aspecto visual de la cuadrícula y del visor.
   Reutiliza la base de .modal / .lightbox__panel / .lightbox__nav
   ya definida para la galería de imágenes.
=================================================================== */
.videos__grid{
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.videos__miniatura{
  position:relative;
  aspect-ratio: 16 / 9;
  border:none;
  padding:0;
  border-radius: var(--radius);
  overflow:hidden;
  cursor:pointer;
  background: var(--ink);
}
.videos__miniatura video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  transition: transform .35s var(--ease);
}
.videos__miniatura::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(23,24,28,.25);
  transition: background .2s var(--ease);
  pointer-events:none;
}
.videos__miniatura:hover video,
.videos__miniatura:focus-visible video{ transform: scale(1.06); }
.videos__miniatura:hover::after,
.videos__miniatura:focus-visible::after{ background: rgba(23,24,28,.4); }
.videos__play{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  z-index:1;
  width:56px; height:56px;
  border-radius:50%;
  background: rgba(243,238,228,.92);
  color: var(--garnet);
  display:flex; align-items:center; justify-content:center;
  padding-left:3px;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.5);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.videos__miniatura:hover .videos__play,
.videos__miniatura:focus-visible .videos__play{
  background: var(--garnet);
  color: var(--white);
  transform: translate(-50%, -50%) scale(1.08);
}
.videos__titulo{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  padding: 1.6rem .9rem .7rem;
  background: linear-gradient(to top, rgba(23,24,28,.85), rgba(23,24,28,0));
  color: var(--white);
  font-family: var(--font-body);
  font-size:.85rem;
  font-weight:500;
  text-align:left;
}

@media (max-width: 720px){
  .videos__grid{ grid-template-columns: 1fr; }
}

/* --- visor a pantalla completa --- */
.lightbox__panel--video{ max-width:960px; }
.lightbox__video-wrap{ width:100%; }
.lightbox__video{
  width:100%;
  max-height:78vh;
  display:block;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  background: #000;
}
.lightbox__video-titulo{
  margin: .8rem 0 0;
  text-align:center;
  color: var(--white);
  font-size:.95rem;
}

/* ===================================================================
   NOTICIAS — filas horizontales editoriales, deliberadamente
   distintas de las tarjetas verticales de "Próximos eventos": foto
   apaisada a la izquierda, texto a la derecha, separadas por líneas
   finas en vez de tarjetas encajonadas.
   El contenido lo genera noticias.js a partir de noticias-datos.js.
=================================================================== */
.noticias__lista{
  display:flex;
  flex-direction:column;
  margin-top: clamp(2rem, 5vw, 2.6rem);
}
.noticia-fila{
  display:grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  align-items:center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.6rem, 4vw, 2.4rem) 0;
  border-top: 1px solid rgba(23,24,28,.12);
}
.noticias__lista .noticia-fila:last-child{ border-bottom: 1px solid rgba(23,24,28,.12); }
.noticia-fila__imagen{
  aspect-ratio: 3 / 2;
  background-size:cover;
  background-position:center;
  border-radius: var(--radius);
}
.noticia-fila__meta{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:.6rem;
}
.noticia-fila__categoria{
  text-transform:uppercase;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  color: var(--red);
}
.noticia-fila__fecha{
  position:relative;
  padding-left:1rem;
  font-size:.78rem;
  color: var(--slate);
}
.noticia-fila__fecha::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:4px; height:4px;
  border-radius:50%;
  background: var(--slate);
  transform: translateY(-50%);
}
.noticia-fila__titulo{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height:1.25;
  color: var(--ink);
  margin:0 0 .5rem;
  transition: color .2s var(--ease);
}
.noticia-fila:hover .noticia-fila__titulo{ color: var(--red); }
.noticia-fila__resumen{
  font-size:.94rem;
  line-height:1.6;
  color: var(--slate);
  max-width:60ch;
  margin:0 0 .7rem;
}
.noticia-fila__mas{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-family: var(--font-header);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  color: var(--ink);
  transition: gap .2s var(--ease);
}
.noticia-fila:hover .noticia-fila__mas{ gap:.5rem; color: var(--red); }

@media (max-width: 700px){
  .noticia-fila{ grid-template-columns: 1fr; }
  .noticia-fila__imagen{ aspect-ratio: 16 / 9; }
}

/* --- página de una noticia individual (noticia-*.html) --- */
.articulo__portada-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.articulo__portada{
  aspect-ratio: 16 / 9;
  max-width:640px;
  width:100%;
  background-size:cover;
  background-position:center;
  border-radius: var(--radius);
}
.articulo{ max-width:68ch; margin:0 auto; }
.articulo p{
  font-size:1.05rem;
  line-height:1.75;
  color: var(--ink);
  margin:0 0 1.3rem;
  text-align:center;
}
.articulo p:first-of-type{
  font-family: var(--font-display);
  font-size:1.25rem;
  color: var(--slate);
}

/* --- variante alineada a la izquierda: para bloques de texto que
       preceden a un listado también alineado a la izquierda (p.ej.
       la intro de patrocinio.html, justo encima del listado de
       patrocinadores) --- */
.articulo--izquierda{ margin-left:0; margin-right:auto; }
.articulo--izquierda p{ text-align:left; }

/* --- enlaces anterior / siguiente al lado de la foto de portada, con
       flecha + título y fecha de la noticia a la que llevan; los
       genera noticias.js dentro de #noticia-nav (el propio
       .articulo__portada-wrap) según el orden por fecha --- */
.articulo__nav-item{
  flex-shrink:0;
  width:180px;
  display:flex;
  align-items:center;
  gap:.7rem;
  transition: opacity .2s var(--ease);
}
.articulo__nav-item:hover{ opacity:.65; }
.articulo__nav-item--next{ flex-direction:row-reverse; text-align:right; }
.articulo__nav-item--vacio{ visibility:hidden; }
.articulo__arrow{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(23,24,28,.18);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  line-height:1;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.articulo__nav-item:hover .articulo__arrow{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.articulo__nav-texto{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.articulo__nav-fecha{
  text-transform:uppercase;
  font-family: var(--font-header);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.05em;
  color: var(--slate);
}
.articulo__nav-titulo{
  font-family: var(--font-display);
  font-size:.92rem;
  line-height:1.25;
  color: var(--ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width: 860px){
  .articulo__nav-item{ width:46px; }
  .articulo__nav-texto{ display:none; }
}
@media (max-width: 640px){
  .articulo__nav-item, .articulo__arrow{ width:38px; height:38px; }
  .articulo__arrow{ font-size:1.2rem; }
}

/* --- botón de volver, tras el cuerpo del artículo --- */
.noticia-volver-wrap{
  max-width:68ch;
  margin-top: clamp(2rem, 5vw, 2.6rem);
  padding-top: clamp(1.6rem, 4vw, 2.2rem);
  border-top: 1px solid rgba(23,24,28,.12);
}

/* ===================================================================
   PATROCINADORES — fila de logos que se desliza (flechas, arrastre
   con el puntero o scroll táctil nativo). El contenido lo genera
   patrocinadores.js a partir de patrocinadores-datos.js.
=================================================================== */
.patrocinadores__fila-wrap{
  display:flex;
  align-items:center;
  gap: clamp(.6rem, 2vw, 1.2rem);
  margin-top: clamp(2rem, 5vw, 2.6rem);
}
.patrocinadores__fila{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  gap: clamp(2.4rem, 6vw, 4rem);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  cursor:grab;
  padding:.5rem clamp(.5rem, 2vw, 1rem);
  scrollbar-width:none;
}
.patrocinadores__fila::-webkit-scrollbar{ display:none; }
.patrocinadores__fila.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.patrocinadores__logo{
  flex-shrink:0;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  filter:grayscale(1);
  opacity:.65;
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.patrocinadores__logo:hover{ filter:grayscale(0); opacity:1; }
.patrocinadores__logo-texto{
  font-family: var(--font-header);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  color: var(--ink);
  white-space:nowrap;
}
.patrocinadores__logo-texto--respaldo{ display:none; }
.patrocinadores__logo-img{
  display:block;
  width:140px; height:100%;
  object-fit:contain;
  object-position:center;
}

/* --- patrocinio.html: tres niveles sin título propio, uno debajo de
       otro y separados por una línea fina, ordenados de mayor a menor
       aportación; la única diferencia entre ellos es el tamaño del
       logo, sin otro tipo de distinción --- */
.patrocinadores__niveles{
  margin-top: clamp(2rem, 5vw, 2.6rem);
}
.patrocinadores__niveles .patrocinadores__grid + .patrocinadores__grid{
  margin-top: clamp(2.2rem, 5vw, 3rem);
  padding-top: clamp(2.2rem, 5vw, 3rem);
  border-top: 1px solid rgba(23,24,28,.12);
}
.patrocinadores__grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap: clamp(2rem, 5vw, 3.2rem);
}
.patrocinadores__grid .patrocinadores__logo{
  height:52px;
  justify-content:flex-start;
  filter:none;
  opacity:1;
}
.patrocinadores__grid .patrocinadores__logo-img{ width:140px; }
.patrocinadores__grid .patrocinadores__logo-texto{ text-align:left; }
.patrocinadores__grid--principales .patrocinadores__logo{ height:76px; }
.patrocinadores__grid--principales .patrocinadores__logo-img{ width:190px; }
.patrocinadores__grid--principales .patrocinadores__logo-texto{ font-size:1.25rem; }
.patrocinadores__grid--medio .patrocinadores__logo{ height:60px; }
.patrocinadores__grid--medio .patrocinadores__logo-img{ width:160px; }

/* --- pista de "se puede deslizar": texto + flecha, a la derecha de
       la fila; al hacer clic también desplaza la fila --- */
.patrocinadores__ver-mas{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-family: var(--font-header);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.03em;
  color: var(--red);
  white-space:nowrap;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  transition: opacity .2s var(--ease);
}
.patrocinadores__ver-mas:hover{ opacity:.7; }
.patrocinadores__ver-mas span{ display:inline-block; transition: transform .2s var(--ease); }
.patrocinadores__ver-mas:hover span{ transform: translateX(3px); }

/* ===================================================================
   PIE — generado por pie.js sobre <div id="pie-mount">. Arriba: marca
   + mapa del sitio + contacto; abajo, la franja legal de siempre.
=================================================================== */
.site-footer{
  background: var(--ink);
  color: var(--parchment-2);
  padding: clamp(3rem,6vw,4rem) clamp(1.2rem,4vw,2.5rem) 2rem;
  font-size:.85rem;
}
.site-footer__inner{ max-width:1280px; margin:0 auto; }

.site-footer__top{
  display:grid;
  grid-template-columns: 1.1fr 2.6fr 1.1fr;
  gap: clamp(2rem,5vw,3rem);
  padding-bottom: clamp(2rem,5vw,2.6rem);
  border-bottom: 1px solid rgba(243,238,228,.14);
}

.site-footer__brand{ display:flex; flex-direction:column; align-items:flex-start; }
.site-footer__logo{ height:46px; width:auto; margin-bottom:1.1rem; }
.site-footer__tagline{
  font-family: var(--font-display);
  font-style:italic;
  color: var(--parchment);
  font-size:1rem;
  line-height:1.5;
  max-width:24ch;
  margin:0 0 1.3rem;
}
.site-footer__brand .social-icons{ gap:.85rem; }
.site-footer__brand .social-icons a{ opacity:.75; transition:opacity .2s var(--ease), color .2s var(--ease); }
.site-footer__brand .social-icons a:hover{ opacity:1; color: var(--red-soft); }
.site-footer__brand .social-icons svg{ width:17px; height:17px; }

.site-footer__mapa{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem 2rem;
}
.site-footer__top h3{
  font-family: var(--font-header);
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.09em;
  font-weight:600;
  color: var(--parchment);
  margin:0 0 .9rem;
}
.site-footer__col ul{ display:flex; flex-direction:column; gap:.55rem; }
.site-footer__col a{ opacity:.75; transition:opacity .2s var(--ease), color .2s var(--ease); }
.site-footer__col a:hover{ opacity:1; color: var(--red-soft); }

.site-footer__contacto address{
  font-style:normal;
  line-height:1.6;
  opacity:.85;
  margin:0 0 1rem;
}
.site-footer__contacto a{
  display:block;
  opacity:.85;
  margin-bottom:.5rem;
  transition:opacity .2s var(--ease), color .2s var(--ease);
}
.site-footer__contacto a:hover{ opacity:1; color: var(--red-soft); }

.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center;
  justify-content:space-between;
  padding-top: 1.6rem;
}
.footer-legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-legal a, .footer-legal button{
  font: inherit;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  color:inherit;
  opacity:.75;
  transition:opacity .2s var(--ease);
}
.footer-legal a:hover, .footer-legal button:hover{ opacity:1; color:var(--red-soft); }

@media (max-width: 900px){
  .site-footer__top{ grid-template-columns: 1fr; gap:2.2rem; }
  .site-footer__mapa{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .site-footer__mapa{ grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ===================================================================
   PÁGINAS LEGALES — aviso legal, privacidad, cookies
=================================================================== */
.legal{ max-width:72ch; margin:0 auto; }
.legal__actualizado{ color: var(--slate); font-size:.85rem; margin:0 0 2.2rem; }
.legal h2{
  font-size: clamp(1.25rem,2.6vw,1.55rem);
  margin: 2.6rem 0 .9rem;
}
.legal h2:first-child{ margin-top:0; }
.legal h3{
  font-family: var(--font-body);
  font-size:1rem;
  font-weight:600;
  margin: 1.6rem 0 .6rem;
}
.legal p{ font-size:1rem; line-height:1.75; color: var(--ink); margin:0 0 1.1rem; }
.legal ul{ list-style:disc; margin:0 0 1.2rem 1.3rem; padding:0; }
.legal ul li{ font-size:1rem; line-height:1.7; margin-bottom:.4rem; }
.legal a{ color: var(--red); text-decoration:underline; text-underline-offset:.15em; }
.legal a:hover{ color: var(--red-deep); }
.legal strong{ font-weight:600; }

.legal__tabla-wrap{ overflow-x:auto; margin:0 0 1.6rem; border:1px solid rgba(23,24,28,.12); border-radius: var(--radius); }
.legal table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; }
.legal th, .legal td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid rgba(23,24,28,.12); vertical-align:top; }
.legal tr:last-child td{ border-bottom:none; }
.legal th{ font-weight:600; background: var(--parchment-2); }

/* ===================================================================
   AVISO DE COOKIES — banner inferior (cookies.js)
=================================================================== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  background: var(--ink);
  padding: 1.5rem clamp(1.2rem,4vw,2.5rem);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.cookie-banner.is-open{ transform:translateY(0); }
.cookie-banner__inner{
  max-width:1280px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1.1rem 2rem; justify-content:space-between;
}
.cookie-banner__texto{ flex:1 1 420px; font-size:.92rem; line-height:1.6; color: rgba(243,238,228,.85); margin:0; }
.cookie-banner__texto a{ color: var(--red-soft); text-decoration:underline; }
.cookie-banner__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; flex-shrink:0; }
.cookie-banner .btn--ghost{ background:transparent; color: var(--parchment); border-color: rgba(243,238,228,.4); }
.cookie-banner .btn--ghost:hover{ background: rgba(243,238,228,.12); border-color: var(--parchment); color: var(--white); }

.cookie-panel{ max-width:1280px; margin:0 auto; overflow:hidden; max-height:0; transition: max-height .3s var(--ease); }
.cookie-banner.is-config .cookie-panel{ max-height:340px; }
.cookie-panel__inner{ display:flex; flex-direction:column; gap:.9rem; border-top:1px solid rgba(243,238,228,.18); padding-top:1.2rem; margin-top:1.2rem; }
.cookie-opcion{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem; }
.cookie-opcion__info strong{ display:block; font-size:.92rem; color: var(--parchment); margin-bottom:.2rem; }
.cookie-opcion__info span{ display:block; font-size:.83rem; line-height:1.5; color: rgba(243,238,228,.65); max-width:56ch; }
.cookie-opcion__switch{ position:relative; flex-shrink:0; width:42px; height:24px; }
.cookie-opcion__switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.cookie-opcion__track{ position:absolute; inset:0; background: rgba(243,238,228,.25); border-radius:999px; transition: background .2s var(--ease); pointer-events:none; }
.cookie-opcion__track::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  background: var(--parchment); border-radius:50%; transition: transform .2s var(--ease);
}
.cookie-opcion__switch input:checked ~ .cookie-opcion__track{ background: var(--red); }
.cookie-opcion__switch input:checked ~ .cookie-opcion__track::after{ transform: translateX(18px); }
.cookie-opcion__switch input:disabled ~ .cookie-opcion__track{ opacity:.55; cursor:not-allowed; }
.cookie-panel__guardar{ align-self:flex-end; }

@media (max-width:700px){
  .cookie-banner__inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner__acciones .btn{ flex:1; text-align:center; }
  .cookie-panel__guardar{ align-self:stretch; }
}

/* ===================================================================
   CABECERA — "Programa de mano"
   Negro idéntico al del logo, nombre de la Orquesta con presencia
   real, marca de selección en forma de rombo (eco del aro del logo)
   y "Entradas" como óvalo de contorno. Capa aparte dentro del mismo
   archivo para no tocar las reglas de cabecera que usa script.js.
=================================================================== */
:root{
  --black:            #000000;   /* idéntico al negro del logo_negro.jpg */
  --black-2:          #1c1712;
  --champagne:        #c9a15a;
  --champagne-soft:   #e8ddc6;
  --champagne-line:   rgba(201,161,90,.18);
  --garnet:           #5e0e17;   /* exacto del aro de rect_logo_granate.png */
  --garnet-bright:    #b5394a;   /* variante clara, para que se lea sobre negro */
  --font-header:      "Montserrat", sans-serif;

  --header-h-noir:        68px;
  --header-h-noir-small:  54px;
  --masthead-h-noir:      54px;
}

.site-header--noir .top-accent{ display:none; }

/* --- franja superior: fina, con un pequeño adorno centrado en la
       regla — un detalle de programa impreso --- */
.masthead{
  background: var(--black);
  border-bottom: 1px solid var(--champagne-line);
  position: relative;
  transition: max-height .3s var(--ease), opacity .25s var(--ease), border-color .3s var(--ease), border-bottom-width .3s var(--ease);
  max-height: var(--masthead-h-noir);
  overflow: hidden;
}
.masthead::after{
  content:"";
  position:absolute;
  left:50%; bottom:-3px;
  width:6px; height:6px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--champagne);
  transition: opacity .3s var(--ease);
}
@media (min-width: 941px){
  .site-header--noir.is-scrolled .masthead{
    max-height: 0;
    opacity: 0;
    border-bottom-color: transparent;
    border-bottom-width: 0;
  }
  .site-header--noir.is-scrolled .masthead::after{ opacity:0; }
}
.masthead__inner{
  max-width:1320px;
  margin:0 auto;
  height: var(--masthead-h-noir);
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.masthead__region{
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(201,161,90,.7);
}
.masthead__aside{
  display:flex;
  align-items:center;
  gap:1.2rem;
  flex-shrink:0;
}
.masthead__divider{
  width:1px;
  height:20px;
  background: var(--champagne-line);
}

/* --- redes sociales --- */
.social-icons{ display:flex; align-items:center; gap:.25rem; }
.social-icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  color: rgba(201,161,90,.75);
  border-radius:50%;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.social-icons a:hover,
.social-icons a:focus-visible{
  color: var(--champagne-soft);
  background: rgba(201,161,90,.1);
}
.social-icons svg{ width:16px; height:16px; }

/* --- buscador --- */
.masthead .icon-btn{
  width:34px; height:34px;
  background: transparent;
  border: 1px solid var(--champagne-line);
  border-radius: 50%;
  color: rgba(201,161,90,.75);
}
.masthead .icon-btn:hover,
.masthead .icon-btn[aria-expanded="true"]{
  border-color: var(--champagne);
  color: var(--champagne-soft);
  background: transparent;
}
.masthead .icon-btn svg{ width:16px; height:16px; }

/* --- fila principal --- */
.site-header--noir .header-main{
  background: var(--black);
  height: var(--header-h-noir);
  transition: height .3s var(--ease);
}
.site-header--noir.is-scrolled .header-main{
  height: var(--header-h-noir-small);
}
.site-header--noir .header-main__inner{
  display:flex;
  align-items:flex-end;
  padding-bottom: .5rem;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
/* al encogerse, "Inicio…Patrocinio" pasa a centrarse en la fila —
   el aro queda a la izquierda y "Entradas" a la derecha, a partes
   iguales, en vez de todo apretado hacia el lado del botón */
@media (min-width: 941px){
  .site-header--noir.is-scrolled .header-main__inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .site-header--noir.is-scrolled .brand{ justify-self:start; }
  .site-header--noir.is-scrolled .main-nav{
    justify-self:center;
    margin-left:0;
    margin-right:0;
  }
  .site-header--noir.is-scrolled .header-main__actions{ justify-self:end; }
}
.site-header--noir .main-nav{ margin-left:auto; margin-right:0; }
.site-header--noir .main-nav__list{
  gap: clamp(1.5rem, 2.6vw, 2.6rem);
}

/* --- marca: un único logo (aro + nombre ya vienen dibujados en la
       imagen), sin texto añadido al lado --- */
.site-header--noir .brand{
  display:flex;
  align-items:center;
  margin-left: 59px; /* centra el aro con el texto "Castilla · La Mancha" de arriba: ambos arrancan en el mismo margen izquierdo, pero el logo es mucho más estrecho que el rótulo */
}
.brand__mark--wide-noir{
  display:block;
  height:52px;
  width:auto;
  transition: height .3s var(--ease);
  flex-shrink:0;
}
.site-header--noir.is-scrolled .brand__mark--wide-noir{ height:36px; }

/* --- navegación: sans-serif geométrica en mayúsculas, con tracking
       amplio — limpia y discreta, como el rótulo de región --- */
.site-header--noir .main-nav__link{
  font-family: var(--font-header);
  font-weight: 500;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--champagne-soft);
  transition: color .2s var(--ease);
}
/* la marca de selección: el rombo por defecto queda anulado, la
   franja del hover vive en .has-dropdown para poder pegarse al
   borde inferior de la fila (no al de la palabra) */
.site-header--noir .main-nav__link::after{ content:none; }
.site-header--noir .main-nav__link:hover,
.site-header--noir .has-dropdown:focus-within .main-nav__link,
.site-header--noir .main-nav__list > li.is-current .main-nav__link{
  color: var(--white);
}

/* --- marca de selección: barra granate pegada al borde inferior real
       de la cabecera, no al del texto — .has-dropdown termina donde
       termina el texto, así que se compensa el padding-bottom de
       .header-main__inner (.5rem) para llegar hasta el borde --- */
@media (min-width: 941px){
  .site-header--noir .main-nav__list > li::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-.5rem;
    height:3px;
    background: var(--garnet);
    opacity:0;
  }
  .site-header--noir .main-nav__list > li:hover::after,
  .site-header--noir .main-nav__list > li:focus-within::after,
  .site-header--noir .main-nav__list > li.is-current::after{
    opacity:1;
  }
}

/* --- "Entradas": un óvalo de contorno, como el aro del logo --- */
.site-header--noir .header-main__actions{ flex-shrink:0; }
.site-header--noir .btn--primary{
  background: transparent;
  border: 1.5px solid var(--champagne);
  border-radius: 999px;
  padding: .55rem 1.55rem;
  position: static;
  font-family: var(--font-header);
  font-weight: 600;
  font-style: normal;
  font-size: .95rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--champagne);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.site-header--noir .btn--primary::after{
  content: none;
}
.site-header--noir .btn--primary:hover{
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--black);
}

/* --- dropdown: surge justo debajo de la barra granate del hover
       (que llega hasta el borde inferior real de la cabecera),
       sin línea granate propia, solo negro. Efecto persiana: el
       panel entero (opaco, sin desvanecerse) se va revelando de
       arriba a abajo mediante clip-path, no una traslación --- */
.site-header--noir .dropdown{
  top: calc(100% + .5rem);
  left:0;
  background: var(--black);
  border: 1px solid var(--champagne-line);
  box-shadow: 0 26px 46px -22px rgba(0,0,0,.65);
  opacity:1;
  transform:none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .2s ease-in, visibility .2s;
}
.site-header--noir .has-dropdown:hover .dropdown,
.site-header--noir .has-dropdown:focus-within .dropdown{
  transform: none;
  clip-path: inset(0 0 0% 0);
  transition: clip-path .35s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.site-header--noir .dropdown li a{
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight:400;
  color: var(--champagne-soft);
  transition: color .2s var(--ease), text-shadow .2s var(--ease);
}
.site-header--noir .dropdown li a:hover{
  background: none;
  color: var(--garnet-bright);
  text-shadow: 0 0 8px rgba(232,221,198,.5);
}

/* --- panel de búsqueda --- */
.site-header--noir .search-panel{
  background: var(--black);
  border-top: 1px solid var(--champagne-line);
}
.site-header--noir .search-panel__inner input{ color: var(--champagne-soft); font-family: var(--font-display); font-size:1.15rem; }
.site-header--noir .search-panel__inner input::placeholder{ color: rgba(232,221,198,.4); }
.site-header--noir .search-panel__close{ color: var(--champagne); }
.site-header--noir .search-panel__close:hover{ color: var(--white); }

@media (max-width: 940px){
  .masthead::after{ display:none; }
  .masthead__region{ display:none; }

  .site-header--noir .header-main__inner{ gap:.7rem; }
  .site-header--noir .main-nav{ background: var(--black); margin-left:0; }
  .site-header--noir .main-nav__link{ color: var(--champagne-soft); font-size:1.1rem; }
  .site-header--noir .has-dropdown{ border-bottom-color: var(--champagne-line); }
  .site-header--noir .dropdown li a{ color: rgba(232,221,198,.72); }
  .site-header--noir .dropdown li a:hover{ color: var(--garnet-bright); }

  .brand__mark--wide-noir{ height:42px; }
  .site-header--noir.is-scrolled .brand__mark--wide-noir{ height:36px; }

  .site-header--noir .btn--primary{ font-size:.92rem; }
}