@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out both;
}

.animate-fade-in-up {
  animation: fade-in-up 0.7s ease-out both;
}

.service-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.trust-badge {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.trust-badge.visible {
  opacity: 1;
  transform: scale(1);
}

#mobile-nav {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}
#mobile-nav.open {
  max-height: 400px;
  opacity: 1;
  display: block;
}

input.input-error,
select.input-error,
textarea.input-error {
  border-color: #ba1a1a !important;
  box-shadow: 0 0 0 1px #ba1a1a;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #131b2e;
  outline-offset: 2px;
  border-radius: 4px;
}

.service-card .material-symbols-outlined {
  transition: transform 0.3s ease;
}
.service-card:hover .material-symbols-outlined {
  transform: scale(1.1);
}

.learn-more-link .material-symbols-outlined {
  transition: transform 0.25s ease;
}
.learn-more-link:hover .material-symbols-outlined {
  transform: translateX(4px);
}

#fab-whatsapp {
  animation: fab-pulse 2.5s ease-in-out infinite;
}
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35); }
  50%      { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.6); }
}

.nav-link.active {
  color: #131b2e;
  border-bottom: 2px solid #131b2e;
  padding-bottom: 4px;
}
.nav-link:not(.active) {
  border-bottom: 2px solid transparent;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
}

@media (max-width: 374px) {
  body { font-size: 14px; }
}

/* Hero SVG Hover Effects */
.hero-svg-container .hero-doc,
.hero-svg-container .hero-shield,
.hero-svg-container .hero-calc {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.hero-svg-container:hover .hero-doc {
  transform: translate(80px, 110px) scale(1.02);
}

.hero-svg-container:hover .hero-shield {
  transform: translate(55px, 70px) scale(1.06) rotate(-5deg);
}

.hero-svg-container:hover .hero-calc {
  transform: translate(285px, 230px) scale(1.04) rotate(3deg);
}