/* Sumuslevel — light theme, brand red + blue, on top of Tailwind CDN */

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, #ffffff 0%, #eef3fb 55%, #e9f0fa 100%);
  background-attachment: fixed;
}

/* ---------- Eyebrow badge (PASLAUGOS, PROCESAS, ZONA...) ---------- */

.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4874E2;
}
.eyebrow-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------- Service card hover ---------- */

article.service-card {
  border-top-width: 3px;
  border-top-color: #e2e8f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
article.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 35px -15px rgba(15, 23, 42, 0.18);
}

/* ---------- Process step icon circles ---------- */

.step-circle {
  background: linear-gradient(155deg, #eaf1fd 0%, #d7e5fb 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 20px -10px rgba(72,116,226,0.35);
}

.font-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

section, main > * {
  scroll-margin-top: 120px;
}

/* ---------- Marquee ---------- */

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-viewport:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- FAQ accordion ---------- */

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.faq-answer > div {
  overflow: hidden;
}
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-icon {
  transition: transform 0.25s ease;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}

/* ---------- Mobile nav sheet ---------- */

.mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.mobile-nav > div {
  overflow: hidden;
}
body.nav-open .mobile-nav {
  grid-template-rows: 1fr;
}

/* ---------- Form status ---------- */

.form-status.is-success { color: #1a8f4c; }
.form-status.is-error { color: #CF3A2B; }

.was-validated input:invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
  border-color: #CF3A2B;
}