:root {
  --sala-anim: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sala-anim: 0; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.logo-diresa {
  overflow: hidden;
  border-radius: 9999px;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.logo-diresa img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  display: block;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .35;
  animation: sala-float 16s ease-in-out infinite;
}
.hero-blob.b1 { width: 420px; height: 420px; background: #38bdf8; top: -140px; left: -80px; animation-duration: 18s; }
.hero-blob.b2 { width: 360px; height: 360px; background: #0ea5e9; bottom: -160px; right: -60px; animation-duration: 22s; animation-delay: -6s; }
.hero-blob.b3 { width: 260px; height: 260px; background: #7dd3fc; top: 30%; left: 55%; animation-duration: 14s; animation-delay: -3s; }

@keyframes sala-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -18px) scale(1.06); }
  66% { transform: translate(-18px, 14px) scale(.96); }
}

.malla-viva { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size: 22px 22px; animation: sala-malla 40s linear infinite; }
@keyframes sala-malla { from { background-position: 0 0; } to { background-position: 220px 220px; } }

.titulo-brillo {
  background: linear-gradient(100deg, #e0f2fe 0%, #ffffff 22%, #7dd3fc 45%, #ffffff 68%, #e0f2fe 100%);
  background-size: 240% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sala-brillo 7s linear infinite;
}
@keyframes sala-brillo { to { background-position: -240% center; } }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 999;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9 45%, #7dd3fc);
  box-shadow: 0 0 8px rgba(14, 165, 233, .6);
  transition: width .12s linear;
}

.scroll-cue { animation: sala-rebote 2.2s ease-in-out infinite; }
@keyframes sala-rebote {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50% { transform: translateY(7px); opacity: 1; }
}

.contador { font-variant-numeric: tabular-nums; }

.mini-nav a {
  position: relative;
  transition: color .15s ease;
}
.mini-nav a::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px;
  background: currentColor; transition: right .25s cubic-bezier(.16,.8,.3,1);
}
.mini-nav a:hover::after, .mini-nav a.activo::after { right: 0; }
.mini-nav a.activo { color: #0369a1; font-weight: 600; }

.tarjeta-viva {
  transition: transform .22s cubic-bezier(.16,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.tarjeta-viva:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -14px rgba(15, 23, 42, .3);
}
.tarjeta-viva:active { transform: translateY(-1px); }

.chart-info {
  display: none;
  align-items: center;
  gap: .65rem;
  border-left: 4px solid var(--ci-color, #0ea5e9);
  background: linear-gradient(90deg, color-mix(in srgb, var(--ci-color, #0ea5e9) 8%, #fff), #fff 65%);
  border-radius: .6rem;
  padding: .55rem .85rem;
  margin-bottom: .65rem;
  animation: sala-pop .22s cubic-bezier(.16,.8,.3,1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.chart-info.visible { display: flex; }
.chart-info .ci-valor { font-size: 1.15rem; font-weight: 800; color: var(--ci-color, #0f172a); line-height: 1.1; white-space: nowrap; }
.chart-info .ci-texto { min-width: 0; flex: 1; }
.chart-info .ci-etiqueta { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.chart-info .ci-sub { font-size: .74rem; color: #475569; margin-top: .1rem; }
.chart-info .ci-cerrar {
  margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; border-radius: 9999px;
  display: grid; place-items: center; color: #94a3b8; transition: background .15s, color .15s;
}
.chart-info .ci-cerrar:hover { background: #f1f5f9; color: #0f172a; }

@keyframes sala-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chart-hint {
  font-size: .68rem; color: #94a3b8; display: flex; align-items: center; gap: .3rem;
}

.tabs-scroll {
  display: flex; flex-wrap: nowrap; gap: .375rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll > * { flex-shrink: 0; }

.filtros-cuerpo { display: grid; }
@media (max-width: 767px) {
  .filtros-cuerpo {
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s cubic-bezier(.16,.8,.3,1);
    overflow: hidden;
  }
  .filtros-cuerpo > * { min-height: 0; overflow: hidden; }
  .filtros-abierto .filtros-cuerpo { grid-template-rows: 1fr; }
  .btn-filtros-toggle { display: inline-flex !important; }
}
.btn-filtros-toggle {
  display: none;
  align-items: center; gap: .4rem;
}
.btn-filtros-toggle svg { transition: transform .2s ease; }
.filtros-abierto .btn-filtros-toggle svg { transform: rotate(180deg); }

.btn-brillo { position: relative; overflow: hidden; }
.btn-brillo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-brillo:hover::after { transform: translateX(120%); transition: transform .6s ease; }

.text-balance { text-wrap: balance; }