* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
::selection {
  background: var(--accent, #1d2bff);
  color: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent, #1d2bff);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scroll-triggered entrance animations.
   Gated behind .js-reveal (set by site.js) so the content stays visible if
   JavaScript never runs, and skipped entirely when "reducir movimiento" is on. */
.js-reveal .reveal,
.js-reveal .reveal-fade {
  opacity: 0;
}
.js-reveal .reveal {
  transform: translateY(30px);
}
.js-reveal .reveal,
.js-reveal .reveal-fade {
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-reveal .reveal.is-visible,
.js-reveal .reveal-fade.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hover transitions live here rather than inline so they can be combined with the
   reveal transition above — an inline `transition` would override it wholesale. */
.pillar-card {
  transition: background 0.35s;
}
.js-reveal .pillar-card.reveal {
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s;
}
.service-row {
  transition: padding 0.35s ease, background 0.35s ease;
}
.js-reveal .service-row.reveal-fade {
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.35s ease,
    background 0.35s ease;
}
.timeline-row {
  transition: padding-left 0.3s;
}
.js-reveal .timeline-row.reveal-fade {
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), padding-left 0.3s;
}
.case-card {
  transition: opacity 0.4s;
}
.js-reveal .case-card.reveal {
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Once revealed, hand opacity back to the shorter filter transition. */
.js-reveal .case-card.reveal.is-visible {
  transition: opacity 0.4s, transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover states that inline styles can't express */
.pillar-card:hover {
  background: #e2dfd6;
}
.case-card:hover {
  background: var(--accent, #1d2bff);
}
/* The image sits on its own layer so it can zoom inside the (overflow-hidden)
   frame without scaling the caption. It carries the background-image inline, on
   the element itself, so relative upload paths resolve against the page rather
   than against this stylesheet's directory. */
.team-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.team-photo:hover .team-photo-img,
.team-photo-placeholder:hover .team-photo-img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .team-photo-img {
    transition: none;
  }
  .team-photo:hover .team-photo-img,
  .team-photo-placeholder:hover .team-photo-img {
    transform: none;
  }
}
.timeline-row:hover {
  padding-left: 16px;
}
/* Kept in CSS (not inline) so the reveal can animate opacity from 0 up to 0.7. */
.contact-label {
  opacity: 0.7;
}
.js-reveal .contact-label.reveal-fade.is-visible {
  opacity: 0.7;
}
.contact-headline {
  transition: opacity 0.3s;
}
.js-reveal .contact-headline.reveal {
  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-reveal .contact-headline.reveal.is-visible {
  transition: opacity 0.3s, transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-headline:hover {
  color: #fff;
  opacity: 0.2;
}
.service-row:hover {
  padding-left: 28px;
  background: #e2dfd6;
}
.service-row:hover .service-title {
  color: var(--accent, #1d2bff);
}
.service-row:hover .service-stat {
  opacity: 1;
}
.service-row:hover .service-meta {
  color: #4a4841;
}
.filter-btn.active {
  background: var(--accent, #1d2bff) !important;
  color: #fff !important;
  border-color: var(--accent, #1d2bff) !important;
}
/* The second selector has to out-specify `.js-reveal .reveal.is-visible`, which
   pins opacity to 1 once a card has been revealed. */
.case-card.dim,
.js-reveal .case-card.reveal.is-visible.dim {
  opacity: 0.18;
}