/* Plantilla de concierto. El único color que parametriza el sitio es el
   acento; todo lo demás se deriva de él o es neutro, para que una web de
   rock y una de clásica no necesiten dos plantillas. */
/* Manrope, variable 200-800 en un solo fichero de 24 KB, subconjunto latino.
   Servida desde el propio sitio, nunca desde Google: además de ser más
   rápido —un dominio menos— cargarla de allí envía la IP del visitante a un
   tercero, que es lo que ya se ha sancionado en la UE.

   `swap`: el texto se lee con la tipografía del sistema desde el primer
   pintado y cambia cuando llega. Con `block` la portada saldría en blanco
   mientras tanto. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.e310b55a.woff2") format("woff2");
}

:root {
  /* El color del sitio NO se usa a pelo: si el sitio no tiene puesto el
     param, la variable llega vacía, `background: var(--acento)` se vuelve
     inválida y el botón de comprar sale TRANSPARENTE — con la venta abierta y
     apuntando al sell, pareciendo desactivado. Pasó en la primera web
     publicada, el 23-oct.

     El valor de abajo es el mismo `default` que declara el descriptor; el del
     sitio lo pisa solo si es un color de verdad, y de eso se encarga
     `@supports`, que descarta la regla entera si la declaración no es
     válida. Sin JavaScript y sin depender de que el sitio esté bien
     configurado. */
  --acento: #e0115f;
  /* Marino de GoPass.In. Es de la plataforma, no del evento: por eso es un
     número fijo y no un param del sitio. El acento sí es del evento, y por eso el
     botón de comprar no lo toca.

     `--cuenta-marca` existe aparte para que el modo oscuro y la portada con
     foto puedan apartarlo sin tocar el marino: sobre negro, un azul casi negro
     no se ve. */
  --gopass-navy: #0A1727;
  --cuenta-marca: var(--gopass-navy);
  --ancho: 68rem;

  /* Persona de línea para enmascarar. El color lo pone `currentColor`, que es
     lo que hace que el mismo icono sirva sobre la foto de la portada —donde el
     texto es claro— y sobre el fondo de la página. Una imagen con su color
     dentro necesitaría dos. */
  --icono-cuenta: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.4"><circle cx="8" cy="5.5" r="2.6"/><path d="M2.9 14c.5-2.8 2.6-4.3 5.1-4.3S12.6 11.2 13.1 14"/></svg>');
  --tipo: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* La PORTADA no cambia con el tema. Lleva una foto que puede ser cualquier
     cosa, y texto oscuro sobre una foto oscura no se lee: su velo oscurece
     siempre y su texto es siempre claro. Lo que cambia es el resto. */
  --portada-tinta: #f6f3f1;
  --portada-tinta-suave: #b9b2ad;
  --portada-borde: #3a3335;
  --portada-base: 13, 11, 12;

  /* Claro por defecto: si alguien llega sin preferencia, mejor la paleta que
     se lee en cualquier pantalla y a plena luz. */
  --tinta: #17131a;
  --tinta-suave: #6b6169;
  --fondo: #fbf9fa;
  --fondo-alto: #f3eef1;
  --borde: #e4dbe0;
  --sombra: 0 .5rem 1.75rem -.75rem rgba(23, 19, 26, .25);
  color-scheme: light;
}

@supports (color: #e0115f) {
  :root { --acento: #e0115f; }
}

/* Oscuro cuando lo pide el sistema... */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #f4f1ee;
    --tinta-suave: #a9a29c;
    --fondo: #0d0b0c;
    --fondo-alto: #171416;
    --borde: #2b2628;
    --sombra: 0 .5rem 1.75rem -.5rem rgba(0, 0, 0, .6);
    --cuenta-marca: var(--tinta);
    color-scheme: dark;
  }
}

/* ...y cuando lo pide el botón, gane lo que gane el sistema. */
:root[data-tema="oscuro"] {
  --tinta: #f4f1ee;
  --tinta-suave: #a9a29c;
  --fondo: #0d0b0c;
  --fondo-alto: #171416;
  --borde: #2b2628;
  --sombra: 0 .5rem 1.75rem -.5rem rgba(0, 0, 0, .6);
  --cuenta-marca: var(--tinta);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-weight: 400;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--acento); color: #fff; padding: .75rem 1rem;
}
.saltar:focus { left: 0; }

/* Cabecera */
.cabecera {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  max-width: var(--ancho); margin: 0 auto; padding: 1.25rem 1.5rem;
}
.cabecera__sitio { margin: 0; font-weight: 700; letter-spacing: .01em; }
.cabecera__sitio a { text-decoration: none; }
.cabecera__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9375rem; margin-left: auto; margin-right: 1.25rem; }

/* La cuenta y el tema van juntos en un grupo. Sueltos, cuando la cabecera no
   daba de sí, el que sobraba caía solo a la segunda fila y pegado a la
   izquierda, debajo del nombre del sitio. Agrupados, o caben los dos arriba o
   bajan los dos a la derecha, que es lo que se entiende. */
.cabecera__acciones { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.cabecera__nav a { color: var(--tinta-suave); text-decoration: none; }
.cabecera__nav a:hover { color: var(--tinta); }

/* SIN FOTO, la portada sigue al tema. El velo oscuro existe para que el texto
   se lea encima de una imagen cualquiera; sin imagen, en modo claro, sería un
   bloque oscuro suelto en una página clara. Se detecta de dos formas para que
   funcione también sin JavaScript: `:has()` mira el src vacío, y el script
   marca el atributo cuando retira el <img>. */
.portada:has(.portada__foto[src=""]),
.portada[data-sin-foto] {
  --portada-tinta: var(--tinta);
  --portada-tinta-suave: var(--tinta-suave);
  --portada-borde: var(--borde);
}
.portada:has(.portada__foto[src=""]) .portada__velo,
.portada[data-sin-foto] .portada__velo {
  background:
    radial-gradient(90% 70% at 15% 10%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 68%),
    linear-gradient(180deg, var(--fondo-alto) 0%, var(--fondo) 92%);
}
.portada:has(.portada__foto[src=""]) .tarjeta,
.portada[data-sin-foto] .tarjeta {
  background: color-mix(in srgb, var(--fondo-alto) 85%, transparent);
}

/* Pastilla: el botón de tema y el de cuenta son el mismo objeto, y están uno
   al lado del otro. Compartir la regla es lo que hace que sigan pareciéndose
   cuando alguien toque una de las dos. */
.pastilla {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--borde); border-radius: 999px;
  background: color-mix(in srgb, var(--fondo-alto) 85%, transparent);
  color: var(--tinta);
  font: inherit; font-size: .8125rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.pastilla:hover { border-color: var(--tinta-suave); }

/* Cuenta, en la cabecera y a la derecha, donde la gente la busca. Estuvo en el
   pie hasta el 27-oct, en letra pequeña y subrayada, y allí no la veía nadie.

   Lleva el borde neutro de la pastilla y NO el acento: el acento es del botón
   de comprar, y dos pastillas del mismo color en la misma pantalla se pelean
   por la mirada que tiene que ir a la venta. */
.cuenta { display: flex; align-items: center; gap: .75rem; }
.cuenta__boton { border-color: var(--cuenta-marca); }
.cuenta__boton::before {
  content: ""; flex: none;
  width: .875em; height: .875em;
  background: var(--cuenta-marca);
  -webkit-mask: var(--icono-cuenta) center / contain no-repeat;
  mask: var(--icono-cuenta) center / contain no-repeat;
}
.cuenta__alta {
  color: var(--tinta-suave); font-size: .8125rem; white-space: nowrap;
}
.cuenta__alta:hover { color: var(--tinta); }

/* Un destino vacío se retira AQUÍ y no con JavaScript. `href=""` no es un
   enlace muerto: recarga la página. Y el estado de reposo —«Entrar», «Crear
   una cuenta»— tiene que funcionar sin JavaScript, así que va escrito en el
   HTML y es el CSS el que esconde el que no lleva a ninguna parte. Antes se
   construían los dos con JS, y sin JS no había ninguno. */
.cuenta a[href=""] { display: none; }
.cuenta:not(:has(a:not([href=""]))) { display: none; }

/* El saludo solo se pinta donde cabe ENTERO. Debajo de este ancho la cabecera
   ya se apila y el grupo no tiene sitio: a 320 px un nombre largo sacaba
   «Salir» fuera de la pantalla y dejaba la página con scroll horizontal.
   Cortarlo con puntos suspensivos sería peor —un nombre recortado es peor que
   ningún saludo—, así que no se pinta.
   Encima de este ancho el límite ya no es el ancho de la pantalla sino los
   píxeles del nombre, y de eso se encarga el JavaScript midiendo. */
.cuenta__saludo {
  display: none;
  color: var(--tinta-suave);
  font-size: .8125rem;
  white-space: nowrap;
}
@media (min-width: 52rem) { .cuenta__saludo { display: inline; } }

/* Botón de tema. El icono dice a qué se va; el texto sigue ahí para quien
   navega escuchando, pero no se pinta: «Cambiar a modo oscuro» medía casi 200
   píxeles de cabecera, más que el botón de la cuenta, y echaba al grupo entero
   a una segunda fila. */
.tema__texto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Sin texto a la vista, la pastilla se queda cuadrada. */
.tema { padding: .5rem; }
.tema__icono {
  width: .875rem; height: .875rem; border-radius: 50%;
  background: var(--tinta);
  box-shadow: inset -.28rem -.28rem 0 0 var(--fondo);
}
/* En claro la luna se llena: el icono dice a qué se va, no dónde se está. */
.tema[aria-pressed="true"] .tema__icono {
  box-shadow: none;
  background: var(--acento);
}

/* Portada */
.portada { position: relative; isolation: isolate; overflow: hidden; }
.portada__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* El velo existe aunque no haya foto: con ella garantiza que el texto se lee
   encima de cualquier imagen; sin ella, es el fondo. */
.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 15% 10%, color-mix(in srgb, var(--acento) 38%, transparent), transparent 70%),
    linear-gradient(180deg,
      rgba(var(--portada-base), .55) 0%,
      rgba(var(--portada-base), .92) 62%,
      var(--fondo) 100%);
}
.portada__texto {
  color: var(--portada-tinta);
  max-width: var(--ancho); margin: 0 auto;
  padding: 10rem 1.5rem 4rem;
}

/* Cartel: ocupa la pantalla y el texto se apoya abajo, como un póster de
   gira. `svh` y no `vh` porque en el móvil la barra del navegador se come
   el `vh` y el botón acaba fuera de la primera pantalla. */
.portada--cartel { display: flex; min-height: 100svh; }
.portada--cartel .portada__texto {
  width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 8rem; padding-bottom: 3.5rem;
}
.portada--cartel h1 {
  font-size: clamp(3.25rem, 13vw, 9rem);
  font-weight: 800;
  line-height: .84; letter-spacing: -.05em;
  text-transform: uppercase;
}
.portada--cartel .portada__sesion { font-size: .875rem; letter-spacing: .32em; }
.portada__sesion {
  margin: 0 0 .75rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento);
}
.portada h1 {
  margin: 0;
  font-size: clamp(2.75rem, 10vw, 6.5rem);
  line-height: .95; letter-spacing: -.035em; text-wrap: balance;
}
.portada__claim {
  margin: 1.25rem 0 0; max-width: 36rem;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  color: var(--portada-tinta-suave); text-wrap: pretty;
}

/* Tarjeta de datos */
.tarjeta {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 2.5rem 0 0; padding: 0;
  border: 1px solid var(--portada-borde); border-radius: 4px;
  background: rgba(var(--portada-base), .55);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.tarjeta__dato { flex: 1 1 11rem; padding: 1rem 1.25rem; border-left: 1px solid var(--portada-borde); }
.tarjeta__dato:first-child { border-left: 0; }
.tarjeta dt {
  margin: 0 0 .25rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--portada-tinta-suave);
}
.tarjeta dd { margin: 0; font-size: 1.0625rem; font-weight: 600; }

.portada__accion { margin: 2rem 0 0; }
.portada__apertura { margin: .875rem 0 0; font-size: .9375rem; color: var(--portada-tinta-suave); }
/* La cuenta ATRÁS. Se llamaba `.cuenta` y choca con la cuenta de la
   persona, que es otra cosa y vive en la cabecera: en español las dos se
   llaman cuenta, y la del encabezado heredaba este blanco de portada. */
.portada__cuenta {
  display: block; margin-top: .375rem;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--portada-tinta);
}

/* Botón: apagado por defecto, encendido solo en venta */
.boton {
  display: inline-block; padding: 1rem 2.25rem;
  border: 2px solid var(--borde); border-radius: 999px;
  background: transparent; color: var(--tinta-suave);
  font-size: 1.0625rem; font-weight: 700; text-decoration: none;
  cursor: not-allowed;
}
.boton--grande { padding: 1.125rem 3rem; font-size: 1.1875rem; }
.boton--comprar:hover { background: transparent; }
.portada .boton--comprar:not(.on_sale):not(.queue_open) { border-color: var(--portada-borde); color: var(--portada-tinta-suave); }
/* `queue_open` se pinta como la venta abierta porque se pulsa igual: lleva a
   la cola, que es por donde se compra. Lo que cambia es el texto, y ese lo
   escribe quien configura la sesión. */
.boton--comprar.on_sale,
.boton--comprar.queue_open {
  background: var(--acento); border-color: var(--acento); color: #fff;
  cursor: pointer;
  box-shadow: 0 .5rem 1.75rem -.5rem color-mix(in srgb, var(--acento) 60%, transparent);
}
.boton--comprar.on_sale:hover,
.boton--comprar.queue_open:hover { background: color-mix(in srgb, var(--acento) 85%, #fff); }
.boton--comprar.cancelled { text-decoration: line-through; }

/* Bloques */
.bloque { max-width: var(--ancho); margin: 0 auto; padding: 4rem 1.5rem; }
/* Los bloques con fondo ocupan todo el ancho, pero su CONTENIDO va donde el
   de los demás. Se centra con una rejilla y no con `margin: auto`: el auto lo
   pisaba cualquier regla posterior que tocara el margen —`.bloque h2` y
   `.linea` lo hacen— y el título se iba al borde izquierdo mientras la
   sección de al lado seguía centrada. Con la rejilla no hay nada que pisar. */
.bloque--oscuro, .bloque--entradas {
  max-width: none;
  padding-left: 0; padding-right: 0;
  display: grid;
  grid-template-columns:
    minmax(1.5rem, 1fr)
    minmax(0, var(--ancho))
    minmax(1.5rem, 1fr);
  background: var(--fondo-alto);
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.bloque--oscuro > *, .bloque--entradas > * { grid-column: 2; }
.bloque h2 {
  margin: 0 0 1.75rem;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800; letter-spacing: -.03em;
}
.bloque__entradilla { margin: 0; max-width: 44rem; font-size: 1.125rem; text-wrap: pretty; }
.bloque__nota { margin: 1.25rem 0 0; max-width: 44rem; font-size: .875rem; color: var(--tinta-suave); }
.bloque__accion { margin: 1.75rem 0 0; }

/* Horarios */
.linea { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.linea__hito {
  display: flex; flex-wrap: wrap; gap: .25rem 2rem; align-items: baseline;
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-left: 2px solid var(--borde); position: relative;
}
.linea__hito::before {
  content: ""; position: absolute; left: -.4375rem; top: 1.6rem;
  width: .75rem; height: .75rem; border-radius: 50%;
  background: var(--borde);
}
.linea__hito--fuerte::before { background: var(--acento); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--acento) 25%, transparent); }
.linea__hora { flex: 0 0 14rem; margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.linea__que { margin: 0; color: var(--tinta-suave); }
.linea__hito--fuerte .linea__que { color: var(--tinta); }

/* Galería: cuatro huecos NUMERADOS. El generador no recoloca —si falta la
   foto 2, la 3 sigue siendo la 3— y hace bien: compactar dejaría el pie de
   una foto debajo de otra. Aquí el hueco vacío se esconde, no se rellena. */
.galeria {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.galeria img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 3px; background: var(--fondo-alto);
}
/* Un src vacío no pide nada, pero ocupa su hueco. */
.galeria img[src=""] { display: none; }

/* Programa */
.bloque__lineup {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  white-space: pre-line;
}

/* Recinto */
.recinto { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.recinto__nombre { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; }
.recinto__direccion { font-style: normal; color: var(--tinta-suave); line-height: 1.8; }
.recinto__apartado { margin-top: 2rem; }
.recinto__apartado h3 {
  margin: 0 0 .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento);
}
.recinto__apartado p { margin: 0; color: var(--tinta-suave); white-space: pre-line; }

/* El mapa lo compone el generador con teselas de OpenStreetMap, en el
   servidor: el visitante no pide nada a terceros. Y la atribución va QUEMADA
   en la imagen, abajo, porque la licencia la exige. De ahí tres cosas que no
   se pueden hacer: recortarlo (nada de `cover`, se perdería la atribución),
   taparlo con nada encima, ni dibujarle una chincheta — el punto ya está en
   la coordenada de verdad, no en el centro, así que una chincheta centrada
   señalaría otro sitio. */
.recinto__mapa { margin: 0; }
.recinto__mapa img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 768 / 512;
  border-radius: 3px; border: 1px solid var(--borde);
  background: var(--fondo-alto);
}
.recinto__mapa img[src=""] { display: none; }

/* Entradas */
.entradas__precio {
  margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--acento);
}

/* Preguntas, en acordeón: <details> es nativo, va con teclado y no necesita
   una línea de JavaScript. El texto sigue en el DOM aunque esté plegado, así
   que el FAQPage del JSON-LD le sigue correspondiendo. */
.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta:first-of-type { border-top: 1px solid var(--borde); }
.pregunta > summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem .25rem; cursor: pointer; list-style: none;
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: .6rem; height: .6rem;
  border-right: 2px solid var(--tinta-suave); border-bottom: 2px solid var(--tinta-suave);
  transform: rotate(45deg) translate(-.15rem, -.15rem);
  transition: transform .2s ease;
}
.pregunta[open] > summary::after { transform: rotate(225deg) translate(-.1rem, -.1rem); }
.pregunta > summary:hover::after { border-color: var(--acento); }
.pregunta h3 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.pregunta p { margin: 0; padding: 0 .25rem 1.5rem; max-width: 44rem; color: var(--tinta-suave); }

/* Barra fija: aparece al dejar atrás la portada */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: .875rem 1.5rem;
  background: color-mix(in srgb, var(--fondo-alto) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.barra[data-visible] { transform: translateY(0); }
.barra__que { margin: 0; font-size: .9375rem; }
.barra__que span { color: var(--tinta-suave); margin-left: .5rem; }
.barra .boton { padding: .75rem 1.5rem; font-size: .9375rem; }

/* Pie */
.pie {
  max-width: var(--ancho); margin: 0 auto;
  padding: 3rem 1.5rem 7rem;
  font-size: .875rem; color: var(--tinta-suave);
}
.pie__aviso { margin: 0; }

@media (min-width: 52rem) {
  /* Dos columnas solo cuando haya algo que poner en la segunda: hoy el
     recinto es una ficha de texto, y reservarle la mitad derecha dejaba media
     sección en blanco. El mapa irá ahí cuando llegue `venue_map_image`. */
  .recinto:has(> * + *) { grid-template-columns: 1fr 1fr; align-items: start; }

  /* La cabecera se superpone a la portada solo donde cabe en una línea, y
     solo entonces lleva sus colores: en móvil no se solapa, y con el color
     claro quedaba texto claro sobre fondo claro. Tampoco se aplican si no hay
     foto, porque entonces la portada sigue al tema. */
  .portada { margin-top: -4.5rem; }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .cabecera { color: var(--portada-tinta); }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .cabecera__nav a { color: var(--portada-tinta-suave); }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .cabecera__nav a:hover { color: var(--portada-tinta); }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .pastilla {
    color: var(--portada-tinta);
    border-color: var(--portada-borde);
    background: rgba(var(--portada-base), .45);
  }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .cuenta__boton::before { background: var(--portada-tinta); }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .cuenta__alta { color: var(--portada-tinta-suave); }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .cuenta__saludo { color: var(--portada-tinta-suave); }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .cuenta__alta:hover { color: var(--portada-tinta); }
  body:not(:has(.portada__foto[src=""])):not(:has(.portada[data-sin-foto])) .tema__icono {
    background: var(--portada-tinta);
    box-shadow: inset -.28rem -.28rem 0 0 rgba(var(--portada-base), .9);
  }
}

/* Hasta que la cabecera cabe en una línea: nav deslizable y todo compacto.
   Con el nav partido en tres filas, la cabecera medía el doble y se comía el
   titular de la portada. */
@media (max-width: 51.99rem) {
  .cabecera { gap: .75rem 1rem; padding: 1rem 1.25rem; align-items: center; }
  .cabecera__nav {
    order: 3; width: 100%; margin: 0; flex-wrap: nowrap;
    gap: 1.25rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .125rem;
  }
  .cabecera__nav::-webkit-scrollbar { display: none; }
  .cabecera__nav a { white-space: nowrap; }
  .pastilla { padding: .4375rem .75rem; font-size: .75rem; }
  .cuenta { gap: .625rem; }
  .cuenta__alta { font-size: .75rem; }
}

@media (max-width: 40rem) {
  .portada__texto { padding: 7rem 1.25rem 3rem; }
  .portada--cartel .portada__texto { padding-top: 2rem; padding-bottom: 2.5rem; }
  .bloque { padding: 3rem 1.25rem; }
  .tarjeta__dato { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--borde); }
  .tarjeta__dato:first-child { border-top: 0; }
  .linea__hora { flex-basis: 100%; }
  .boton { display: block; text-align: center; }
  .barra { flex-direction: column; align-items: stretch; gap: .625rem; }
  .barra__que { text-align: center; }
}

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