/* ==========================================================================
   Unión Cultural · web nueva · estilos
   Colores: solo las variables de colores.css (copia exacta de
   Marca/paleta/colores.css). Tipografías: Satoshi (titulares) e Inter (texto).
   ========================================================================== */

/* 1. Variables (tamaños, espacios, derivados de la paleta) ---------------- */

:root {
  --uc-fuente-titulos: "Satoshi", Arial, Helvetica, sans-serif;
  --uc-fuente-texto: "Inter", Arial, Helvetica, sans-serif;

  --uc-texto-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --uc-texto-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --uc-texto-h3: 1.125rem;
  --uc-texto-entradilla: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --uc-texto-pequeno: .875rem;
  --uc-texto-antetitulo: .8125rem;

  --uc-radio-s: 6px;
  --uc-radio-m: 12px;
  --uc-radio-l: 20px;
  --uc-sombra-1: 0 1px 2px rgb(var(--uc-grafito-rgb) / .06), 0 1px 3px rgb(var(--uc-grafito-rgb) / .08);
  --uc-sombra-2: 0 4px 8px rgb(var(--uc-grafito-rgb) / .06), 0 12px 32px rgb(var(--uc-grafito-rgb) / .10);

  --uc-ancho-max: 1200px;
  --uc-ancho-texto: 68ch;
  --uc-margen: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --uc-altura-cabecera: 72px;
  --uc-transicion: 160ms cubic-bezier(.2, .7, .3, 1);

  /* Derivados, no colores nuevos */
  --uc-color-texto-suave: color-mix(in srgb, var(--uc-grafito) 78%, var(--uc-blanco)); /* ≈ 7:1 */
  --uc-color-borde: rgb(var(--uc-grafito-rgb) / .14);
  --uc-azul-hover: color-mix(in srgb, var(--uc-azul) 84%, var(--uc-negro));
  --uc-naranja-hover: color-mix(in srgb, var(--uc-naranja) 86%, var(--uc-blanco));
  --uc-foco: 0 0 0 3px var(--uc-blanco), 0 0 0 5px var(--uc-azul);
}

/* 2. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--uc-altura-cabecera) + 1rem); }
body {
  margin: 0;
  font: 400 1rem/1.6 var(--uc-fuente-texto);
  color: var(--uc-color-texto);
  background: var(--uc-color-fondo);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--uc-fuente-titulos); color: var(--uc-negro); line-height: 1.1; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }
a { color: var(--uc-color-enlace); text-underline-offset: .18em; }
a:hover { color: var(--uc-azul-hover); }
:focus-visible { outline: none; box-shadow: var(--uc-foco); border-radius: 4px; }
main:focus { outline: none; }

.contenedor { width: 100%; max-width: var(--uc-ancho-max); margin-inline: auto; padding-inline: var(--uc-margen); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1.25rem; border-radius: var(--uc-radio-s);
  background: var(--uc-negro); color: var(--uc-blanco); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; color: var(--uc-blanco); }

/* 3. Botones y etiquetas ---------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .75rem 1.4rem;
  border: 2px solid transparent; border-radius: 999px;
  font: 600 .9375rem/1.2 var(--uc-fuente-texto); text-decoration: none; text-align: left;
  cursor: pointer; transition: background-color var(--uc-transicion), color var(--uc-transicion), border-color var(--uc-transicion);
}
.boton .icono { width: 1.25rem; height: 1.25rem; flex: none; }
.boton--primario { background: var(--uc-azul); color: var(--uc-color-sobre-primario); }
.boton--primario:hover { background: var(--uc-azul-hover); color: var(--uc-color-sobre-primario); }
.boton--acento { background: var(--uc-naranja); color: var(--uc-color-sobre-acento); }
.boton--acento:hover { background: var(--uc-naranja-hover); color: var(--uc-color-sobre-acento); }
.boton--secundario { background: transparent; color: var(--uc-negro); border-color: var(--uc-negro); }
.boton--secundario:hover { background: var(--uc-negro); color: var(--uc-blanco); }
.boton--bloque { width: 100%; justify-content: flex-start; border-radius: var(--uc-radio-m); }
.boton--bloque.boton--acento { justify-content: space-between; }
.boton--pequeno { min-height: 44px; padding: .5rem 1rem; font-size: var(--uc-texto-pequeno); }
.boton--grande { min-height: 56px; padding: 1rem 1.75rem; font-size: 1rem; }
.boton__texto { flex: 1; }
.boton__formato {
  padding: .15rem .5rem; border-radius: var(--uc-radio-s);
  background: rgb(var(--uc-negro-rgb) / .22); font-size: .75rem; letter-spacing: .04em;
}

.icono { display: inline-flex; width: 1.25rem; height: 1.25rem; }
.icono svg { width: 100%; height: 100%; }

.etiqueta {
  display: inline-flex; align-items: center; min-height: 26px; padding: .2rem .7rem;
  border-radius: 999px; font: 600 .75rem/1.2 var(--uc-fuente-texto); letter-spacing: .04em; text-transform: uppercase;
}
.etiqueta--acento { background: var(--uc-naranja); color: var(--uc-color-sobre-acento); }
.etiqueta--institucional { background: var(--uc-azul-profundo); color: var(--uc-blanco); }

.pendiente {
  padding: .1rem .35rem; border-radius: 4px;
  outline: 2px dashed var(--uc-naranja); outline-offset: 1px;
  background: rgb(var(--uc-naranja-rgb) / .14);
}

/* 4. Cabecera --------------------------------------------------------------- */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--uc-blanco); border-bottom: 1px solid var(--uc-color-borde);
}
.cabecera__interior { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--uc-altura-cabecera); }
.cabecera__logo { flex: none; border-radius: var(--uc-radio-s); }
.cabecera__logo img { width: 139px; height: 40px; }
.cabecera__lista { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.cabecera__lista a {
  display: block; padding: .6rem .8rem; border-radius: var(--uc-radio-s);
  color: var(--uc-grafito); font-weight: 500; font-size: .9375rem; text-decoration: none;
}
.cabecera__lista a:hover { background: var(--uc-niebla); color: var(--uc-negro); }
.cabecera__lista a.activo { color: var(--uc-negro); box-shadow: inset 0 -2px 0 var(--uc-azul); border-radius: 0; }
.cabecera__boton {
  display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem;
  border: 1px solid var(--uc-color-borde); border-radius: 999px; background: none;
  font: 600 .9375rem var(--uc-fuente-texto); color: var(--uc-negro); cursor: pointer;
}

/* Con cinco opciones (una de ellas, el título del espectáculo) el menú no cabe
   en una línea por debajo de 960 px: se pasa al menú desplegable. */
@media (max-width: 959px) {
  .cabecera__boton { display: inline-flex; }
  .cabecera__nav { display: none; position: absolute; inset: 100% 0 auto; background: var(--uc-blanco); border-bottom: 1px solid var(--uc-color-borde); box-shadow: var(--uc-sombra-2); }
  .cabecera.abierta .cabecera__nav { display: block; }
  .cabecera__lista { flex-direction: column; padding: .5rem var(--uc-margen) 1rem; }
  .cabecera__lista a { padding: .9rem .5rem; border-bottom: 1px solid var(--uc-color-borde); border-radius: 0; }
  .cabecera__lista a.activo { box-shadow: inset 3px 0 0 var(--uc-azul); padding-left: 1rem; }
}

/* 5. Pie -------------------------------------------------------------------- */

.pie { background: var(--uc-negro); color: rgb(var(--uc-blanco-rgb) / .82); font-size: var(--uc-texto-pequeno); }
.pie__interior { display: grid; gap: 2rem; padding-block: 3.5rem 2rem; }
.pie__marca img { width: 125px; height: 36px; margin-bottom: 1rem; }
.pie__marca p { max-width: 36ch; }
.pie__titulo { font-size: .8125rem; color: var(--uc-blanco); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
.pie__contacto p + p { margin-top: .35rem; }
.pie a { color: var(--uc-blanco); }
.pie a:hover { color: var(--uc-blanco); text-decoration-thickness: 2px; }
.pie .pendiente { color: var(--uc-blanco); }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.pie__copy { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid rgb(var(--uc-blanco-rgb) / .2); }
@media (min-width: 900px) {
  .pie__interior { grid-template-columns: 2fr 1fr 1fr; }
  .pie__legal ul { flex-direction: column; }
}

/* 6. Estado de carga y avisos ----------------------------------------------- */

.cargando { padding-block: 3rem 6rem; }
.cargando__linea, .cargando__bloque { background: var(--uc-niebla); border-radius: var(--uc-radio-s); animation: latido 1.4s ease-in-out infinite; }
.cargando__linea { height: 1.1rem; width: 60%; margin-bottom: 1rem; }
.cargando__linea--corta { width: 25%; }
.cargando__linea--titulo { height: 3rem; width: 80%; }
.cargando__bloque { height: 18rem; margin-top: 2rem; border-radius: var(--uc-radio-l); }
@keyframes latido { 50% { opacity: .5; } }

.aviso { background: var(--uc-niebla); border-bottom: 1px solid var(--uc-color-borde); }
.aviso p { padding-block: .75rem; font-size: var(--uc-texto-pequeno); font-weight: 500; }
.aviso p::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .6rem; border-radius: 50%; background: var(--uc-naranja); }

.vacio { padding-block: 6rem; max-width: 40rem; }
.vacio h1 { font-size: var(--uc-texto-h2); margin-bottom: 1rem; }
.vacio p { margin-bottom: 2rem; font-size: var(--uc-texto-entradilla); }

/* 7. Ficha · cabecera --------------------------------------------------------- */

.ficha-cabecera { padding-block: 1.5rem 3rem; background: var(--uc-niebla); }
.miga ol { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 2rem; padding: 0; list-style: none; font-size: var(--uc-texto-pequeno); }
.miga li:not(:last-child)::after { content: "/"; margin-left: .35rem; color: var(--uc-color-texto-suave); }
.miga a { color: var(--uc-color-texto-suave); }
.miga a:hover { color: var(--uc-negro); }
.miga [aria-current] { color: var(--uc-negro); font-weight: 500; }

.ficha-cabecera__rejilla { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .ficha-cabecera__rejilla { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } }

.antetitulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-bottom: 1rem; color: var(--uc-azul-profundo); /* azul sobre niebla = 4,4:1, no llega a AA */
  font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase;
}
.ficha-titulo { font-size: var(--uc-texto-display); font-weight: 900; letter-spacing: -.025em; text-wrap: balance; }
.ficha-compania { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 500; color: var(--uc-negro); }
.ficha-compania__etiqueta {
  display: block; margin-bottom: .15rem;
  font-size: var(--uc-texto-antetitulo); font-weight: 500; color: var(--uc-color-texto-suave);
}
.entradilla { margin-top: 1.25rem; max-width: 52ch; font-size: var(--uc-texto-entradilla); line-height: 1.5; }

.ficha-cabecera__media > img, .imagen-vacia {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--uc-radio-l);
}
.imagen-vacia { display: grid; place-items: center; }
.imagen-vacia img { width: 34%; opacity: .95; }
.imagen-vacia--profundo { background: var(--uc-azul-profundo); }
.imagen-vacia--negro { background: var(--uc-negro); }
.imagen-vacia--azul { background: var(--uc-azul); }

/* 8. Ficha · cuerpo ---------------------------------------------------------- */

.ficha-cuerpo { display: grid; gap: 2.5rem; padding-block: 2.5rem 4rem; }
@media (min-width: 900px) {
  .ficha-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; padding-top: 3.5rem; }
  .acciones { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--uc-altura-cabecera) + 1.5rem); align-self: start; }
  .ficha-principal { grid-column: 1; grid-row: 1; }
}

.acciones {
  display: grid; gap: .75rem; padding: 1.5rem;
  background: var(--uc-blanco); border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-l); box-shadow: var(--uc-sombra-2);
}
.acciones__titulo { font-size: 1.25rem; }
.acciones__texto { margin-top: -.25rem; font-size: var(--uc-texto-pequeno); color: var(--uc-color-texto-suave); }
.acciones .boton--acento { margin-top: .75rem; }
.acciones__nota { font-size: var(--uc-texto-pequeno); color: var(--uc-color-texto-suave); text-align: center; }
.documento-pendiente {
  display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .6rem 1rem;
  border: 1px dashed var(--uc-color-borde); border-radius: var(--uc-radio-m);
  font-size: var(--uc-texto-pequeno); color: var(--uc-color-texto-suave);
}

.bloque { padding-block: 2.5rem; border-top: 1px solid var(--uc-color-borde); }
.ficha-principal > .bloque:first-child { padding-top: 0; border-top: 0; }
.bloque__titulo { font-size: var(--uc-texto-h2); font-weight: 700; margin-bottom: 1.5rem; }
.nota { margin-top: 1rem; font-size: var(--uc-texto-pequeno); color: var(--uc-color-texto-suave); }
.nota--antes { margin: 0 0 1rem; }

/* Ficha rápida */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin: 0; }
.dato { padding: 1rem 1.15rem; background: var(--uc-niebla); border-radius: var(--uc-radio-m); }
.dato--ancho { grid-column: 1 / -1; }
.dato dt { font-size: var(--uc-texto-antetitulo); font-weight: 500; color: var(--uc-color-texto-suave); }
.dato dd { margin: .3rem 0 0; }
.dato__valor { display: block; font: 700 1.125rem/1.3 var(--uc-fuente-titulos); color: var(--uc-negro); }
.dato__extra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .35rem; font-size: var(--uc-texto-pequeno); }
.dato__descripcion { flex: 1 1 24ch; }

/* Sinopsis */
.sinopsis__texto { display: grid; gap: 1rem; max-width: var(--uc-ancho-texto); font-size: 1.0625rem; line-height: 1.7; }
.sinopsis__copiar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.5rem; }
.sinopsis__ayuda { font-size: var(--uc-texto-pequeno); color: var(--uc-color-texto-suave); }
.sinopsis__estado { flex-basis: 100%; font-size: var(--uc-texto-pequeno); font-weight: 600; color: var(--uc-azul-profundo); min-height: 1.4em; }

/* Gira */
.bloque--gira { border-top: 0; padding-top: 0; }
.ficha-principal > .bloque--datos + .bloque--gira { padding-top: 2.5rem; }
.bloque--gira { display: grid; gap: 1rem; }
.bloque--gira .bloque__titulo { margin-bottom: 0; }
.gira { padding: 1.75rem; border-radius: var(--uc-radio-l); background: var(--uc-azul-profundo); color: var(--uc-blanco); }
.gira__resumen { font: 700 1.375rem/1.25 var(--uc-fuente-titulos); color: var(--uc-blanco); }
.gira__subtitulo { margin-top: 1.25rem; font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--uc-blanco); }
.fechas { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.fechas li { padding: .35rem .8rem; border: 1px solid rgb(var(--uc-blanco-rgb) / .35); border-radius: 999px; background: rgb(var(--uc-blanco-rgb) / .1); font-size: var(--uc-texto-pequeno); font-weight: 500; }
.gira__datos { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: var(--uc-texto-pequeno); color: rgb(var(--uc-blanco-rgb) / .9); }
.gira__notas { margin-top: .5rem; font-size: var(--uc-texto-pequeno); color: rgb(var(--uc-blanco-rgb) / .9); }
.gira__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.enlace-invertido { color: var(--uc-blanco); font-weight: 600; font-size: .9375rem; }
.enlace-invertido:hover { color: var(--uc-blanco); text-decoration-thickness: 2px; }
.gira :focus-visible { box-shadow: 0 0 0 3px var(--uc-azul-profundo), 0 0 0 5px var(--uc-blanco); }

/* Técnica y disponibilidad */
.tabla-datos { margin: 0; border-top: 1px solid var(--uc-color-borde); }
.tabla-datos > div { display: grid; grid-template-columns: minmax(9rem, 1fr) 2fr; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--uc-color-borde); }
.tabla-datos dt { color: var(--uc-color-texto-suave); font-size: .9375rem; }
.tabla-datos dd { margin: 0; font-weight: 500; color: var(--uc-negro); }
.listados { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 720px) { .listados { grid-template-columns: 1fr 1fr; } }
.listado h3 { font-size: var(--uc-texto-h3); margin-bottom: .75rem; }
.listado ul { margin: 0; padding: 0; list-style: none; }
.listado li { position: relative; padding: .4rem 0 .4rem 1.5rem; }
.listado li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--uc-azul); }

/* Vídeo */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--uc-radio-l); overflow: hidden; background: var(--uc-negro); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__fachada {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%;
  border: 0; background: var(--uc-negro); cursor: pointer; border-radius: inherit;
}
.video__fachada:focus-visible { box-shadow: inset 0 0 0 4px var(--uc-azul); }
.video__play {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--uc-naranja); color: var(--uc-negro); transition: transform var(--uc-transicion);
}
.video__play .icono { width: 2.25rem; height: 2.25rem; margin-left: .2rem; }
.video__fachada:hover .video__play { transform: scale(1.06); }

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--uc-radio-m); }

/* Cierre */
.cierre { background: var(--uc-azul-profundo); color: var(--uc-blanco); }
.cierre__interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 3.5rem; }
.cierre h2 { color: var(--uc-blanco); font-size: var(--uc-texto-h2); margin-bottom: .5rem; }
.cierre p { max-width: 48ch; color: rgb(var(--uc-blanco-rgb) / .88); }
.cierre :focus-visible { box-shadow: 0 0 0 3px var(--uc-azul-profundo), 0 0 0 5px var(--uc-blanco); }

/* 9. Estructura de página ------------------------------------------------------ */

.seccion { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.seccion--niebla { background: var(--uc-niebla); }
.seccion__titulo { font-size: var(--uc-texto-h2); font-weight: 700; margin-bottom: 1.75rem; }
.seccion__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.seccion__cabecera .seccion__titulo { margin-bottom: 0; }
.seccion__texto { margin: -1rem 0 2rem; font-size: 1.0625rem; max-width: var(--uc-ancho-texto); }
.texto-estrecho { max-width: calc(760px + 2 * var(--uc-margen)); }
.texto-largo { font-size: 1.0625rem; line-height: 1.7; }
.texto-largo + .texto-largo { margin-top: 1.25rem; }
.texto-destacado { font: 500 1.25rem/1.5 var(--uc-fuente-titulos); color: var(--uc-negro); }

.cabecera-pagina { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); background: var(--uc-niebla); }
.cabecera-pagina h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); font-weight: 900; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.cabecera-pagina .entradilla { max-width: 60ch; }
.cabecera-pagina--oscura { background: var(--uc-negro); color: var(--uc-blanco); }
.cabecera-pagina--oscura h1 { color: var(--uc-blanco); font-size: var(--uc-texto-display); }
.cabecera-pagina--oscura .entradilla { color: rgb(var(--uc-blanco-rgb) / .88); }

.enlace-flecha { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; }
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha .icono { width: 1.1rem; height: 1.1rem; }

.vacio--caja { max-width: none; padding: 2.5rem; background: var(--uc-niebla); border-radius: var(--uc-radio-l); }
.vacio--caja p { font-size: 1.0625rem; margin-bottom: 1.5rem; max-width: 60ch; }

.banda-institucional { background: var(--uc-azul-profundo); color: var(--uc-blanco); }
.banda-institucional__interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 3.5rem; }
.banda-institucional h2 { color: var(--uc-blanco); font-size: var(--uc-texto-h2); margin-bottom: .5rem; }
.banda-institucional p { max-width: 56ch; color: rgb(var(--uc-blanco-rgb) / .88); }
.banda-institucional :focus-visible { box-shadow: 0 0 0 3px var(--uc-azul-profundo), 0 0 0 5px var(--uc-blanco); }

/* 10. Inicio ------------------------------------------------------------------- */

.portada { background: var(--uc-negro); color: var(--uc-blanco); }
.portada__interior { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.portada__titulo { max-width: 16ch; color: var(--uc-blanco); font-size: var(--uc-texto-display); font-weight: 900; letter-spacing: -.03em; text-wrap: balance; }
.portada__texto { max-width: 56ch; margin-top: 1.5rem; font-size: var(--uc-texto-entradilla); line-height: 1.5; color: rgb(var(--uc-blanco-rgb) / .88); }
.portada :focus-visible { box-shadow: 0 0 0 3px var(--uc-negro), 0 0 0 5px var(--uc-blanco); }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }

.portada__interior { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .portada__interior { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; } }
/* Naranja sobre negro: 6,8:1 */
.portada__antetitulo { margin-bottom: 1.25rem; color: var(--uc-naranja); font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; }

/* Próximos plazos del panel, en la portada */
.plazos { padding: 1.5rem; border: 1px solid rgb(var(--uc-blanco-rgb) / .22); border-radius: var(--uc-radio-l); background: rgb(var(--uc-blanco-rgb) / .06); }
.plazos__titulo { margin-bottom: 1rem; color: var(--uc-blanco); font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; }
.plazos__lista { display: grid; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.plazo { display: grid; gap: .4rem; padding-block: 1rem; border-top: 1px solid rgb(var(--uc-blanco-rgb) / .18); }
.plazo__etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }
.plazo__etiquetas:empty { display: none; }
.plazo__titulo { color: var(--uc-blanco); font: 700 1.0625rem/1.3 var(--uc-fuente-titulos); text-decoration: none; }
.plazo__titulo:hover { color: var(--uc-blanco); text-decoration: underline; }
.plazo__fecha { font-size: var(--uc-texto-pequeno); color: rgb(var(--uc-blanco-rgb) / .85); }

/* Espectáculo destacado */
.destacado { padding-block: clamp(3rem, 2rem + 4vw, 5rem); background: var(--uc-niebla); }
.destacado__interior { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .destacado__interior { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 4rem; } }
.destacado__cartel { display: block; justify-self: center; width: min(100%, 380px); border-radius: var(--uc-radio-m); }
.destacado__titulo { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 900; letter-spacing: -.025em; text-wrap: balance; }
.destacado__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* Cartel vertical, entero */
.cartel { width: 100%; height: auto; border-radius: var(--uc-radio-m); box-shadow: var(--uc-sombra-2); }

/* Servicios */
.servicios { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .servicio--principal { grid-column: 1 / -1; }
}
.servicio { display: grid; gap: .75rem; align-content: start; padding: 1.75rem; border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-l); background: var(--uc-blanco); }
.servicio h3 { font-size: 1.375rem; }
.servicio p { max-width: var(--uc-ancho-texto); }
.servicio__enlace { justify-self: start; margin-top: .25rem; }
.servicio--principal { padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); border: 0; background: var(--uc-azul-profundo); color: var(--uc-blanco); }
.servicio--principal h3 { color: var(--uc-blanco); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.servicio--principal p { font-size: 1.0625rem; color: rgb(var(--uc-blanco-rgb) / .9); }
.servicio--principal :focus-visible { box-shadow: 0 0 0 3px var(--uc-azul-profundo), 0 0 0 5px var(--uc-blanco); }

.banda-institucional__antetitulo { margin-bottom: .5rem; font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; }

/* 11. Tarjetas y rejilla ------------------------------------------------------- */

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; }
.tarjeta {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--uc-blanco); border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-l);
  transition: box-shadow var(--uc-transicion), transform var(--uc-transicion);
}
.tarjeta:hover { box-shadow: var(--uc-sombra-2); transform: translateY(-2px); }
.tarjeta:focus-within { box-shadow: var(--uc-foco); }
.tarjeta__media { position: relative; }
.tarjeta__media > img, .tarjeta__media .imagen-vacia { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.tarjeta__media .imagen-vacia img { width: 30%; }
.tarjeta__etiqueta { position: absolute; top: .9rem; left: .9rem; }
.tarjeta__cuerpo { display: flex; flex: 1; flex-direction: column; gap: .4rem; padding: 1.25rem 1.35rem 1.35rem; }
.tarjeta__antetitulo { font: 600 .75rem/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--uc-azul-profundo); }
.tarjeta__titulo { font-size: 1.3125rem; font-weight: 700; }
.tarjeta__titulo a { color: var(--uc-negro); text-decoration: none; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; }
.tarjeta__titulo a:focus-visible { box-shadow: none; }
.tarjeta__compania { font-size: var(--uc-texto-pequeno); font-weight: 500; color: var(--uc-color-texto-suave); }
.tarjeta__texto { margin-top: .25rem; font-size: .9375rem; }
.tarjeta__datos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.tarjeta__datos li { padding: .2rem .6rem; border-radius: 999px; background: var(--uc-niebla); font-size: .8125rem; font-weight: 500; }
.tarjeta__ver { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .9rem; font-size: .9375rem; font-weight: 600; color: var(--uc-azul); }
.tarjeta__ver .icono { width: 1.1rem; height: 1.1rem; transition: translate var(--uc-transicion); }
.tarjeta:hover .tarjeta__ver .icono { translate: 3px 0; }

/* 12. Catálogo ---------------------------------------------------------------- */

.catalogo { display: grid; gap: 2rem; padding-block: 2.5rem 5rem; }
@media (min-width: 900px) {
  .catalogo { grid-template-columns: 270px minmax(0, 1fr); gap: 3rem; }
  .filtros__panel { position: sticky; top: calc(var(--uc-altura-cabecera) + 1.5rem); align-self: start; }
  .filtros__titulo { pointer-events: none; }
  .filtros__titulo::-webkit-details-marker { display: none; }
}
.filtros__panel { padding: 1.25rem; border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-l); background: var(--uc-blanco); }
.filtros__titulo { display: flex; align-items: center; gap: .5rem; min-height: 44px; font: 700 1.125rem var(--uc-fuente-titulos); color: var(--uc-negro); cursor: pointer; list-style: none; }
.filtros { display: grid; gap: 1rem; margin-top: 1rem; }
.filtros__limpiar { justify-self: start; }
.filtros__limpiar[hidden] { display: none; }
.resultados__recuento { margin-bottom: 1rem; font: 700 1.125rem var(--uc-fuente-titulos); color: var(--uc-negro); }
.resultados__nota { margin: -.5rem 0 1rem; }
.resultados__vacio { padding: 2rem; border-radius: var(--uc-radio-l); background: var(--uc-niebla); }
.resultados__vacio p { margin-bottom: 1.25rem; max-width: 60ch; }

/* 13. Campos de formulario ---------------------------------------------------- */

.campo { display: grid; gap: .4rem; align-content: start; }
.campo label { font-size: .9375rem; font-weight: 600; color: var(--uc-negro); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .65rem .9rem;
  border: 1px solid var(--uc-gris); border-radius: var(--uc-radio-m); /* gris sobre blanco = 3,1:1, contraste de borde suficiente */
  background: var(--uc-blanco); color: var(--uc-grafito); font: 400 1rem/1.4 var(--uc-fuente-texto);
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--uc-azul); box-shadow: 0 0 0 3px rgb(var(--uc-azul-rgb) / .25); border-radius: var(--uc-radio-m); }
.campo [aria-invalid="true"] { border: 2px solid var(--uc-naranja); }
.campo__obligatorio { color: var(--uc-color-texto-suave); }
.campo__error { display: flex; gap: .4rem; align-items: baseline; font-size: var(--uc-texto-pequeno); font-weight: 600; color: var(--uc-grafito); }
.campo__error::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--uc-naranja); translate: 0 -.05rem; }
.campo__error[hidden] { display: none; }

/* 14. Formularios ------------------------------------------------------------- */

.formulario { display: grid; gap: 1.5rem; }
.formulario__campos { display: grid; gap: 1.25rem; }
@media (min-width: 720px) {
  .formulario__campos { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  .campo--ancho { grid-column: 1 / -1; }
}
.formulario__leyenda, .formulario__privacidad { font-size: var(--uc-texto-pequeno); color: var(--uc-color-texto-suave); }
.formulario__sobre { justify-self: start; padding: .5rem 1rem; border-radius: var(--uc-radio-m); background: var(--uc-azul-profundo); color: var(--uc-blanco); font-weight: 600; }
.formulario__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario__turnstile { min-height: 65px; }
.formulario__resumen, .formulario__exito { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--uc-radio-m); }
.formulario__resumen { border-left: 4px solid var(--uc-naranja); background: rgb(var(--uc-naranja-rgb) / .1); font-weight: 600; }
.formulario__resumen[hidden] { display: none; }
.formulario__resumen .icono { color: var(--uc-grafito); flex: none; }
.formulario__exito { flex-wrap: wrap; border-left: 4px solid var(--uc-azul); background: var(--uc-niebla); font-size: 1.0625rem; font-weight: 500; }
.formulario__exito .icono { color: var(--uc-azul-profundo); flex: none; }
.formulario__exito p { flex: 1; }
.formulario__local { flex-basis: 100%; font-size: var(--uc-texto-pequeno); font-weight: 400; }
.formulario button[type="submit"] { justify-self: start; }
.formulario button[disabled] { opacity: .7; cursor: progress; }

/* 15. Giras, costes, trayectoria y contacto ------------------------------------ */

.lista-giras { display: grid; gap: 1.5rem; }
.gira__espectaculo { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgb(var(--uc-blanco-rgb) / .2); }
.gira__antetitulo { font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--uc-blanco-rgb) / .85); }
.gira__titulo { margin-top: .35rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); color: var(--uc-blanco); }
.gira__titulo a { color: var(--uc-blanco); text-decoration: none; }
.gira__titulo a:hover { text-decoration: underline; }
.gira__compania { margin-top: .25rem; color: rgb(var(--uc-blanco-rgb) / .88); }

.pasos { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.paso { counter-increment: paso; padding: 1.75rem; border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-l); }
.paso::before { content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 1rem; font: 900 2rem/1 var(--uc-fuente-titulos); color: var(--uc-azul); }
.paso h3 { font-size: 1.25rem; margin-bottom: .6rem; }

.cifras { background: var(--uc-azul-profundo); color: var(--uc-blanco); }
.cifras__lista { display: grid; gap: 2rem; margin-block: 0; padding-block: 3rem; }
@media (min-width: 720px) { .cifras__lista { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.cifra { display: flex; flex-direction: column-reverse; gap: .35rem; }
.cifra dd { margin: 0; font: 900 clamp(2.25rem, 1.6rem + 2vw, 3.25rem)/1 var(--uc-fuente-titulos); letter-spacing: -.02em; white-space: nowrap; }
.cifra dt { color: rgb(var(--uc-blanco-rgb) / .85); }
.cifras .pendiente { font-size: 1rem; font-weight: 500; letter-spacing: 0; }

.lista-comprobada { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.lista-comprobada li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.0625rem; }
.lista-comprobada .icono { flex: none; width: 1.75rem; height: 1.75rem; padding: .3rem; border-radius: 50%; background: var(--uc-azul-profundo); color: var(--uc-blanco); }

.contacto { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contacto { grid-template-columns: minmax(0, 1fr) 320px; gap: 4rem; } }
.contacto__datos { align-self: start; padding: 1.75rem; border-radius: var(--uc-radio-l); background: var(--uc-niebla); }
.contacto__datos h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.contacto__datos dl { display: grid; gap: 1rem; margin: 0; }
.contacto__datos dt { font-size: var(--uc-texto-antetitulo); color: var(--uc-color-texto-suave); }
.contacto__datos dd { margin: .15rem 0 0; font-weight: 500; overflow-wrap: anywhere; }

/* 15b. Páginas legales (aviso legal y privacidad) ------------------------------ */

.legal { display: grid; gap: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.legal__apartado { display: grid; gap: 1rem; }
.legal__apartado h2 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); font-weight: 700; }
.legal__apartado p, .legal__lista li { font-size: 1.0625rem; line-height: 1.7; }
.legal a { overflow-wrap: anywhere; }

.legal__datos { display: grid; gap: .75rem; margin: 0; padding: 1.25rem 1.5rem; border-radius: var(--uc-radio-m); background: var(--uc-niebla); }
.legal__datos div { display: grid; gap: .1rem 1.5rem; }
@media (min-width: 640px) { .legal__datos div { grid-template-columns: 13rem minmax(0, 1fr); } }
.legal__datos dt { font-weight: 600; color: var(--uc-negro); }
.legal__datos dd { margin: 0; overflow-wrap: anywhere; }
/* Sobre Gris Niebla el Azul Unión no llega a 4,5:1 en texto pequeño: enlaces en Azul Profundo */
.legal__datos a { color: var(--uc-azul-profundo); }

.legal__lista { display: grid; gap: .5rem; margin: 0; padding-left: 1.25rem; }
.legal__lista li::marker { color: var(--uc-azul); }

.legal__tabla { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.55; }
.legal__tabla th, .legal__tabla td { padding: .875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--uc-color-borde); overflow-wrap: break-word; }
.legal__tabla thead th { background: var(--uc-niebla); color: var(--uc-negro); font-size: var(--uc-texto-pequeno); font-weight: 600; }
.legal__tabla tbody th { font-weight: 500; color: var(--uc-negro); }
/* En móvil, cada fila pasa a ser una ficha y cada celda muestra el nombre de su columna */
@media (max-width: 640px) {
  .legal__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal__tabla tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--uc-color-borde); }
  .legal__tabla th, .legal__tabla td { display: block; width: auto; padding: .25rem 0; border: 0; }
  .legal__tabla tbody th { width: auto; }
  .legal__tabla [data-columna]::before {
    content: attr(data-columna); display: block;
    font-size: var(--uc-texto-antetitulo); font-weight: 600; color: var(--uc-color-texto-suave);
  }
}

.legal__fecha { padding-top: 1.5rem; border-top: 1px solid var(--uc-color-borde); font-size: var(--uc-texto-pequeno); color: var(--uc-color-texto-suave); }

/* 17. Ficha: cartel, autoría, intérpretes y ficha técnica ------------------------ */

@media (min-width: 900px) {
  .ficha-cabecera--cartel .ficha-cabecera__rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 420px); }
}
.ficha-cabecera--cartel .ficha-cabecera__media { justify-self: center; width: min(100%, 420px); }
/* El cartel no se recorta: anula el formato 4:3 de las fotos de la cabecera */
.ficha-cabecera__media > .cartel { aspect-ratio: auto; object-fit: contain; height: auto; border-radius: var(--uc-radio-m); }
.ficha-autoria { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 500; color: var(--uc-negro); }
.ficha-interpretes { margin-top: .25rem; font-size: 1.125rem; color: var(--uc-grafito); }
.ficha-cabecera__boton { margin-top: 2rem; }

.acciones .acciones__titulo { margin-top: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--uc-color-borde); }
.acciones > .boton--acento:first-child { margin-top: 0; }

.interpretes { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .interpretes { grid-template-columns: 1fr 1fr; } }
.interprete { padding: 1.5rem; border-radius: var(--uc-radio-l); background: var(--uc-niebla); }
.interprete h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.interprete p { font-size: .9375rem; line-height: 1.65; }

@media (min-width: 900px) { .listados--tres { grid-template-columns: repeat(3, 1fr); } }
.listados--tres { margin-top: 0; }
.tabla-datos + .listados--tres { margin-top: 2rem; }
.listados:empty { display: none; }

/* Tarjeta con cartel vertical: se ve entero sobre Gris Niebla */
.tarjeta__media--cartel { display: grid; place-items: center; padding: 1.25rem; background: var(--uc-niebla); }
.tarjeta__media--cartel > .cartel { width: auto; max-height: 320px; aspect-ratio: auto; object-fit: contain; box-shadow: var(--uc-sombra-1); border-radius: var(--uc-radio-s); }

/* 18. Ayudas y subvenciones ---------------------------------------------------- */

.cabecera-pagina--institucional { background: var(--uc-azul-profundo); color: var(--uc-blanco); }
.cabecera-pagina--institucional h1 { color: var(--uc-blanco); }
.cabecera-pagina--institucional .entradilla { color: rgb(var(--uc-blanco-rgb) / .9); }
.cabecera-pagina--institucional :focus-visible { box-shadow: 0 0 0 3px var(--uc-azul-profundo), 0 0 0 5px var(--uc-blanco); }
.cabecera-pagina__antetitulo { margin-bottom: 1rem; font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; }
.cabecera-pagina:not(.cabecera-pagina--institucional, .cabecera-pagina--oscura) .cabecera-pagina__antetitulo { color: var(--uc-azul-profundo); }
.cabecera-pagina__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

@media (min-width: 640px) { .pasos--cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pasos--cuatro { grid-template-columns: repeat(4, 1fr); } }
.nota--aviso { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.75rem; max-width: var(--uc-ancho-texto); font-size: .9375rem; }
.nota--aviso .icono { flex: none; color: var(--uc-azul-profundo); }

.panel__entradilla { margin-top: .5rem; max-width: var(--uc-ancho-texto); }
.aviso-fijo {
  display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.5rem; padding: 1rem 1.25rem;
  border-left: 4px solid var(--uc-naranja); border-radius: var(--uc-radio-m); background: var(--uc-blanco);
  font-weight: 600; color: var(--uc-negro);
}
.aviso-fijo .icono { flex: none; color: var(--uc-grafito); }
.panel__filtros {
  display: grid; gap: 1rem; align-items: end; margin-bottom: 1.5rem; padding: 1.25rem;
  border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-l); background: var(--uc-blanco);
}
@media (min-width: 760px) { .panel__filtros { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; } }
.campo--casilla { display: flex; align-items: center; gap: .6rem; min-height: 48px; }
.campo--casilla input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--uc-azul-profundo); }
.campo--casilla label { font-weight: 500; }

.convocatorias { display: grid; gap: 1.25rem; }
.convocatoria {
  display: grid; gap: .9rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-l); background: var(--uc-blanco);
  scroll-margin-top: calc(var(--uc-altura-cabecera) + 1rem);
}
.convocatoria--urgente { border-left: 6px solid var(--uc-naranja); }
/* Cerradas: atenuadas sin perder contraste (texto suave ≈ 7:1) */
.convocatoria--cerrada { border-style: dashed; background: transparent; }
.convocatoria--cerrada, .convocatoria--cerrada .convocatoria__titulo, .convocatoria--cerrada dd { color: var(--uc-color-texto-suave); }
.convocatoria__etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; }
.convocatoria__titulo { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 700; text-wrap: balance; }
.convocatoria__organismo { font-size: .9375rem; color: var(--uc-color-texto-suave); }
.convocatoria__datos { display: grid; gap: .75rem 1.5rem; margin: 0; }
@media (min-width: 760px) { .convocatoria__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.convocatoria__datos dt { font-size: var(--uc-texto-antetitulo); font-weight: 600; color: var(--uc-color-texto-suave); }
.convocatoria__datos dd { margin: .15rem 0 0; color: var(--uc-negro); }
.convocatoria__requisitos summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--uc-azul-profundo); cursor: pointer; }
.convocatoria__requisitos ul { margin: .25rem 0 0; padding-left: 1.25rem; }
.convocatoria__requisitos li + li { margin-top: .35rem; }
.convocatoria__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--uc-color-borde); }
.convocatoria__enlaces { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.convocatoria__enlaces:empty { display: none; }
.convocatoria__revision { font-size: .8125rem; color: var(--uc-color-texto-suave); }

.etiqueta--ejemplo { background: var(--uc-negro); color: var(--uc-blanco); }
.etiqueta--abierta { background: var(--uc-azul); color: var(--uc-color-sobre-primario); } /* 4,8:1 */
.etiqueta--proximamente { background: var(--uc-blanco); color: var(--uc-azul-profundo); box-shadow: inset 0 0 0 1.5px var(--uc-azul-profundo); }
.etiqueta--cerrada { background: var(--uc-niebla); color: var(--uc-grafito); box-shadow: inset 0 0 0 1px var(--uc-color-borde); }

/* 19. Trayectoria ------------------------------------------------------------- */

.historia { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
@media (min-width: 1000px) { .historia { grid-template-columns: 250px minmax(0, 1fr); gap: 4rem; } }
.historia__indice { align-self: start; padding: 1.25rem; border-radius: var(--uc-radio-l); background: var(--uc-niebla); }
@media (min-width: 1000px) { .historia__indice { position: sticky; top: calc(var(--uc-altura-cabecera) + 1.5rem); max-height: calc(100vh - var(--uc-altura-cabecera) - 3rem); overflow-y: auto; } }
.historia__indice-titulo { margin-bottom: .75rem; font: 600 var(--uc-texto-antetitulo)/1.3 var(--uc-fuente-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--uc-negro); }
.historia__indice ol { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.historia__indice a { display: grid; padding: .45rem .5rem; border-radius: var(--uc-radio-s); color: var(--uc-grafito); font-size: .9375rem; line-height: 1.35; text-decoration: none; }
.historia__indice a:hover { background: var(--uc-blanco); color: var(--uc-negro); }
.historia__periodo { font-size: .75rem; font-weight: 600; color: var(--uc-azul-profundo); }

/* Línea de tiempo */
.historia__secciones { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-left: 2rem; }
.historia__secciones::before { content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--uc-color-borde); }
.hito-historia { position: relative; display: grid; gap: 1rem; scroll-margin-top: calc(var(--uc-altura-cabecera) + 1rem); }
.hito-historia__marca { position: absolute; left: -2rem; top: .35rem; width: 1rem; height: 1rem; border: 3px solid var(--uc-blanco); border-radius: 50%; background: var(--uc-azul); box-shadow: 0 0 0 1px var(--uc-azul); }
.hito-historia__periodo { font: 900 1.25rem/1 var(--uc-fuente-titulos); color: var(--uc-azul); } /* azul sobre blanco: 4,8:1 */
.hito-historia__titulo { font-size: var(--uc-texto-h2); font-weight: 700; text-wrap: balance; }
.historia__texto { max-width: var(--uc-ancho-texto); font-size: 1.0625rem; line-height: 1.7; }
.historia__subtitulo { margin-top: .75rem; font-size: 1.125rem; }
.historia__destacado {
  max-width: var(--uc-ancho-texto); padding: 1.25rem 1.5rem; border-left: 4px solid var(--uc-azul); border-radius: var(--uc-radio-m);
  background: var(--uc-niebla); font: 500 1.125rem/1.55 var(--uc-fuente-titulos); color: var(--uc-negro);
}
.seccion--niebla .historia__destacado { background: var(--uc-blanco); }

/* Listas largas en columnas, fáciles de recorrer */
.lista-columnas { margin: 0; padding: 0; list-style: none; columns: 1; column-gap: 2rem; }
@media (min-width: 600px) { .lista-columnas { columns: 2; } }
@media (min-width: 1100px) { .lista-columnas { columns: 3; } }
.lista-columnas li { position: relative; padding: .35rem 0 .35rem 1.1rem; break-inside: avoid; }
.lista-columnas li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--uc-azul); }

.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.ficha-mini { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.15rem; border: 1px solid var(--uc-color-borde); border-radius: var(--uc-radio-m); background: var(--uc-blanco); }
.ficha-mini__titulo { font: 700 1rem/1.3 var(--uc-fuente-titulos); color: var(--uc-negro); }
.ficha-mini__detalle { font-size: .875rem; line-height: 1.5; color: var(--uc-color-texto-suave); }

/* Municipios y entidades */
.entidades .historia__destacado { margin-bottom: 2rem; }
.logos { margin-bottom: 2.5rem; }
.logos__titulo { margin-bottom: 1rem; font-size: 1.125rem; }
.logos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.logos__elemento { display: grid; place-items: center; min-height: 96px; padding: 1rem; border-radius: var(--uc-radio-m); background: var(--uc-blanco); }
.logos__elemento img { max-height: 64px; width: auto; object-fit: contain; }
.entidades__grupos { display: grid; gap: 2rem; }
.entidades__grupo h3 { margin-bottom: .75rem; font-size: 1.125rem; }
@media (min-width: 1100px) { .lista-columnas--nombres { columns: 4; } }
.lista-columnas--nombres li { font-size: .9375rem; }
.entidades__gracias { margin-top: 2.5rem; max-width: var(--uc-ancho-texto); font: 500 1.125rem/1.55 var(--uc-fuente-titulos); color: var(--uc-negro); }

/* 16. Preferencias e impresión ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .cabecera, .pie, .saltar, .acciones, .cierre, .bloque--video, .sinopsis__copiar, .gira__acciones, .aviso { display: none !important; }
  .ficha-cabecera { background: none; padding-top: 0; }
  .ficha-cuerpo { display: block; padding: 0; }
  .gira { color: var(--uc-negro); background: none; border: 1px solid var(--uc-negro); }
  .gira__resumen, .gira__subtitulo, .gira__datos, .gira__notas { color: var(--uc-negro); }
  .bloque { break-inside: avoid; }
}