/* =================================================
   TAILWIND BRIDGE – Municipalidad de Brandsen
   Animaciones y micro-interacciones institucionales
================================================= */

/* ---------- Timing & easing ---------- */
:root {
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-in-soft: cubic-bezier(.7, 0, .84, 0);

  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 360ms;
}

/* ---------- Animación base reutilizable ---------- */
.tw-anim {
  transition:
    transform var(--t-base) var(--ease-out-soft),
    opacity var(--t-base) var(--ease-out-soft),
    background-color var(--t-base) ease,
    color var(--t-base) ease;
}

.tw-anim-fast {
  transition:
    transform var(--t-fast) var(--ease-out-soft),
    opacity var(--t-fast) var(--ease-out-soft);
}

.tw-anim-slow {
  transition:
    transform var(--t-slow) var(--ease-out-soft),
    opacity var(--t-slow) var(--ease-out-soft);
}

/* =================================================
   HEADER / NAV
================================================= */

/* ---------- Hover institucional ---------- */
.tw-hover-lift:hover {
  transform: translateY(-2px);
}

/* ---------- Dropdown panel ---------- */
.tw-dropdown-panel {
  opacity: 0;
  transform: translateY(8px) scale(.97);
  pointer-events: none;
}

.tw-group:hover .tw-dropdown-panel,
.tw-dropdown-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---------- Ítems del dropdown ---------- */
.tw-dropdown-item {
  display: flex;
  align-items: center;
  gap: .75rem;

  padding: .75rem 1.25rem;
  font-size: .875rem;
  text-decoration: none;

  transition:
    background-color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-out-soft);
}

.tw-dropdown-item:hover {
  transform: translateX(2px);
}

/* ---------- Iconos del dropdown ---------- */
.tw-dropdown-icon {
  font-size: 1rem;
  opacity: .9;
  transition:
    transform var(--t-fast) var(--ease-out-soft),
    opacity var(--t-fast) ease;
}

.tw-dropdown-item:hover .tw-dropdown-icon {
  transform: scale(1.08);
  opacity: 1;
}

/* ---------- Chevron ---------- */
.tw-chevron {
  transition: transform var(--t-base) var(--ease-out-soft);
}

.tw-group:hover .tw-chevron,
.tw-chevron.is-open {
  transform: rotate(180deg);
}

/* =================================================
   Accesibilidad
================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}