/* ==========================================
   VARIABLES CSS Y FUENTES
   ========================================== */
:root {
  --navy: #133a56;
  --soft-gray: #eef2f4;
  --accent-yellow: #f6d746;
}

.serif-heading {
  font-family: "Merriweather", serif;
}

.ui-sans {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
}

/* ==========================================
   ANIMACIONES Y TRANSICIONES
   ========================================== */
.smooth-transition {
  transition: all 0.3s ease;
}

@keyframes pulse-soft {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-pulse-soft {
  animation: pulse-soft 2s infinite;
}

/* ==========================================
   PATRÓN DE FONDO CON BALANZAS
   ========================================== */
.pattern-balance-svg {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.08' fill='none' stroke='%23133a56' stroke-width='2'%3E%3Cline x1='40' y1='25' x2='40' y2='40'/%3E%3Cline x1='25' y1='40' x2='55' y2='40'/%3E%3Cpath d='M 28 40 L 22 52 L 34 52 Z'/%3E%3Cpath d='M 52 40 L 46 52 L 58 52 Z'/%3E%3Cline x1='22' y1='52' x2='34' y2='52'/%3E%3Cline x1='46' y1='52' x2='58' y2='52'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 80px 80px;
}

/* ==========================================
   MENÚ OFFCANVAS MÓVIL
   ========================================== */
.menu-overlay {
  transition: opacity 0.3s ease;
}

.menu-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.menu-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.offcanvas-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.offcanvas-menu.show {
  transform: translateX(0);
}

body.menu-open {
  overflow: hidden;
}