.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

.kinetic-bg {
  background-image: radial-gradient(circle at 2px 2px, #E2E8F0 1px, transparent 0);
  background-size: 32px 32px;
}

.dark .kinetic-bg {
  background-image: radial-gradient(circle at 2px 2px, #1E293B 1px, transparent 0);
}

.bento-card,
.service-card-hover,
.portfolio-card {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.bento-card:hover,
.service-card-hover:hover {
  transform: translateY(-4px);
}

.portfolio-card:hover .project-image {
  transform: scale(1.05);
}

.project-image {
  transition: transform 0.7s ease;
}

body.gp-stitch-page {
  transition: background-color 0.3s, color 0.3s;
}

html:not(.dark) body.gp-stitch-page {
  background: #f8f9ff;
  color: #0b1c30;
}

html.dark body.gp-stitch-page {
  background: #0F172A;
  color: #ffffff;
}

html.dark body.gp-stitch-page .bg-background {
  background-color: #0F172A;
}

/* Fallbacks dark para páginas sin dark: explícito (portafolio legacy, etc.) */
html.dark body.gp-stitch-page .bg-surface-light:not(.dark *) {
  background-color: #131b2e;
}

html.dark body.gp-stitch-page .bg-white {
  background-color: #131b2e;
}

html.dark body.gp-stitch-page .bg-surface-container {
  background-color: rgba(255, 255, 255, 0.08);
}

html.dark body.gp-stitch-page .text-text-muted {
  color: #7c839b;
}

html.dark body.gp-stitch-page .text-primary {
  color: #ffffff;
}

html.dark body.gp-stitch-page .border-border-subtle {
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark body.gp-stitch-page .font-headline-xl,
html.dark body.gp-stitch-page .font-headline-lg,
html.dark body.gp-stitch-page .font-headline-md,
html.dark body.gp-stitch-page .font-headline-sm {
  color: inherit;
}

html.dark body.gp-stitch-page input,
html.dark body.gp-stitch-page select,
html.dark body.gp-stitch-page textarea {
  color: #ffffff;
}

html.dark body.gp-stitch-page footer.bg-primary-container {
  background-color: #0a0f1a;
}

body.admin-bar #gp-site-nav {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar #gp-site-nav {
    top: 46px;
  }
}