/* Temporadas del sitio (23-oct-2026). Hoja aparte: solo se publica y se enlaza en las páginas donde sale una cinta de temporada, así sitio.css (y su huella ?v=)
   y todas las demás páginas quedan como estaban. Todo va bajo [data-temporada] (atributo de <html>) y usa las variables de sitio.css, de día y de noche.
   El color de acento de cada temporada (--tem-acento, desde temporadas.json) es solo decorativo: los textos usan --tinta y --azul. */

[data-temporada] .temporada-cinta { --tem-acento: #E5579A; position: relative; background: var(--realce); color: var(--tinta); border-top: 3px solid var(--tem-acento); border-bottom: 1px solid var(--linea); font-size: 15px; line-height: 1.4; }
[data-temporada] .tem-fila { width: max(min(100% - 48px, 1200px), min(100% - 2 * var(--margen), var(--ancho))); margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 10px 0; }
[data-temporada] .tem-insignia { flex: none; width: 32px; height: 32px; display: block; }
[data-temporada] .tem-mensaje { margin: 0; min-width: 0; }
[data-temporada] .tem-mensaje strong { font-weight: 700; }
[data-temporada] .tem-enlace { color: var(--azul); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease-out, text-decoration-thickness .15s ease-out; }
[data-temporada] .tem-enlace .ico { width: 1em; height: 1em; margin-left: 4px; vertical-align: -.14em; transition: transform .15s ease-out; }
[data-temporada] .tem-enlace:hover { text-decoration-thickness: 2px; }
[data-temporada] .tem-enlace:hover .ico { transform: translateX(3px); }

/* Portada, computadora: una pastilla sobre la presentación, en la fila de los controles del carrusel (a la derecha); no empuja nada.
   Teléfono y tableta (hasta 900 px): la presentación ocupa la pantalla entera, así que la cinta va justo debajo de ella, en el flujo. */
[data-temporada] .temporada-cinta--portada { position: absolute; left: 0; right: 0; top: 92px; z-index: 3; background: none; border: 0; pointer-events: none; }
[data-temporada] .temporada-cinta--portada .tem-fila { --tem-m: max(24px, (100% - var(--ancho)) / 2, var(--margen)); width: fit-content; max-width: calc(100% - 2 * var(--tem-m) - 312px); margin-right: var(--tem-m); margin-left: auto; padding: 6px 16px 6px 10px; border-radius: 12px; background: rgba(7, 19, 33, .78); color: #F4F8FF; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 3px 0 0 var(--tem-acento); pointer-events: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-temporada] .temporada-cinta--portada .tem-enlace { color: #FFFFFF; }
[data-temporada] .temporada-cinta--tira { display: none; }
@media (max-width: 1100px) { [data-temporada] .temporada-cinta--portada .tem-texto { display: none; } }
@media (max-width: 900px) {
  [data-temporada] .temporada-cinta--portada { display: none; }
  [data-temporada] .temporada-cinta--tira { display: block; }
  /* el botón fijo del asistente (abajo a la derecha, hasta 66 px con su anillo y 22 px de margen) no tapa el final del enlace cuando la cinta pasa por debajo */
  [data-temporada] .temporada-cinta--tira .tem-fila { padding-right: 72px; }
}

@media (max-width: 600px) {
  [data-temporada] .tem-fila { gap: 10px; padding: 9px 0; }
  [data-temporada] .tem-insignia { width: 28px; height: 28px; }
  [data-temporada] .temporada-cinta { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-temporada] .tem-enlace, [data-temporada] .tem-enlace .ico { transition: none; }
  [data-temporada] .tem-enlace:hover .ico { transform: none; }
}