*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-main);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* Scrollbar */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-primary-muted); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Skip link */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--color-primary); color: white;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  z-index: 9999; font-size: .85rem; font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* Container */
.container {
  width: 100%; max-width: var(--container-max);
  margin: 0 auto; padding: 0 1.5rem;
}
@media (min-width: 768px) { .container { padding: 0 3rem; } }

/* Typography scale */
h1 { font-size: clamp(2rem, 5vw, 3.4rem);   font-weight: 700; line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem);   font-weight: 700; line-height: 1.3; }

.section-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,13,0,.07); color: var(--color-primary);
  padding: .3rem 1rem; border-radius: var(--radius-full);
  font-size: .75rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; margin-bottom: 1.1rem;
}

.section-title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700; color: var(--color-text);
  margin-bottom: .5rem;
}
.section-title span { color: var(--color-primary); }

.section-subtitle {
  font-size: 1rem; color: var(--color-text-body);
  font-weight: 300; max-width: 58ch; line-height: 1.7;
}

/* ── Reveal animations (IntersectionObserver) ── */
/* Estado inicial: invisible, ligeramente abajo, con blur */
.anim-entry,
.anim-cover,
.anim-up {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  filter: blur(6px);
  transition:
    opacity    0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter     0.65s ease;
  will-change: opacity, transform, filter;
}

/* Estado visible */
.anim-entry.visible,
.anim-cover.visible,
.anim-up.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Stagger para benefit cards */
.benefits-grid .benefit-card:nth-child(2) { transition-delay: 0.09s; }
.benefits-grid .benefit-card:nth-child(3) { transition-delay: 0.18s; }
.benefits-grid .benefit-card:nth-child(4) { transition-delay: 0.06s; }
.benefits-grid .benefit-card:nth-child(5) { transition-delay: 0.13s; }
.benefits-grid .benefit-card:nth-child(6) { transition-delay: 0.20s; }

/* ── Slide-in for text blocks ── */
.anim-left,
.anim-right {
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter    0.7s ease;
  will-change: opacity, transform, filter;
}
.anim-left  { transform: translateX(-40px); }
.anim-right { transform: translateX(40px); }

.anim-left.visible,
.anim-right.visible {
  opacity: 1; transform: translateX(0); filter: blur(0);
}

/* ── First service row — page load entrance ── */
.sr-text--first {
  animation: sr-text-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.sr-media--first {
  animation: sr-img-in 1.2s ease-out 0.4s both;
}
@keyframes sr-img-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sr-text-in {
  from { opacity: 0; transform: translateX(40px); filter: blur(5px); }
  to   { opacity: 1; transform: translateX(0);    filter: blur(0); }
}

/* ── Fade-in-up reveal for service images (scroll-triggered) ── */
.anim-reveal-left,
.anim-reveal-right {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   1.2s ease-out 0.3s,
    transform 1.2s ease-out 0.3s;
  will-change: opacity, transform;
}

.anim-reveal-left.visible,
.anim-reveal-right.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stats grid stagger */
.stats-grid > div:nth-child(2) { transition-delay: 0.1s; }
.stats-grid > div:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .anim-entry, .anim-cover, .anim-up,
  .anim-left, .anim-right {
    opacity: 1; transform: none; filter: none;
    transition: none;
  }
  .anim-reveal-left,
  .anim-reveal-right {
    opacity: 1; transform: none; transition: none;
  }
  .sr-media--first,
  .sr-text--first {
    animation: none;
  }
}