/* ==========================================================================
   AGRIFERSER · Página /servicios/
   Dos piezas de movimiento:
   1. Portada: el paisaje se ve a través del símbolo y, al hacer scroll,
      la cámara entra por la hoja hasta llenar la pantalla.
   2. Escenario: los seis servicios se suceden a pantalla completa, fijados,
      con cortinilla e índice lateral.
   Sin JS o con movimiento reducido todo es una página normal: portada con
   foto y seis bloques apilados.
   ========================================================================== */

/* Portada ---------------------------------------------------------------- */
.svc-hero { min-height: clamp(620px, 100svh, 980px); }
.svc-hero .hero__title { display: block; font-size: clamp(3rem, 6.4vw, 6.75rem); }
.svc-hero .hero__lead { max-width: 44ch; font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); }
.svc-hero .hero__inner { padding-bottom: clamp(104px, 14vh, 152px); }

.svc-veil { display: none; }
.svc-hero.is-veiled .svc-veil {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.svc-hero.is-veiled .hero__shade { opacity: 0; }
.svc-veil__fill { fill: var(--c-deep); }
.svc-veil__outline {
  fill: none;
  stroke: var(--c-lime);
  stroke-width: 1;
  opacity: 0.55;
}
/* Móvil con velo: texto más compacto para dejar sitio al símbolo; el botón
   solo baja a los servicios, así que sobra */
@media (max-width: 767px) {
  .svc-hero.is-veiled .hero__title { font-size: clamp(2.375rem, 10.5vw, 3rem); }
  .svc-hero .hero__line { display: inline; }
  .svc-hero.is-veiled .hero__lead { font-size: 1rem; line-height: 1.5; margin-top: 16px; }
  .svc-hero.is-veiled .hero__actions { display: none; }
  .svc-hero.is-veiled .hero__inner { padding-bottom: 72px; }
}
@media (min-width: 1024px) {
  .svc-hero.is-veiled .svc-hero__copy { max-width: min(52vw, 700px); }
  .svc-hero.is-veiled .hero__title { font-size: clamp(3rem, 5vw, 5.5rem); }
}

/* Escenario: modo apilado (base, móvil, sin JS, movimiento reducido) ---- */
.stage { position: relative; background: var(--c-deep); color: var(--c-ivory); }
.stage__panel {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(560px, 100svh, 900px);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-deep);
}
.stage__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.stage__media picture, .stage__media img { width: 100%; height: 100%; }
.stage__media img { object-fit: cover; }
.stage__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(0deg, rgb(6 42 34 / 0.94) 0%, rgb(6 42 34 / 0.55) 36%, rgb(6 42 34 / 0) 64%),
    linear-gradient(90deg, rgb(6 42 34 / 0.62) 0%, rgb(6 42 34 / 0) 58%);
}
.stage__dim { position: absolute; inset: 0; z-index: -1; background: var(--c-deep); opacity: 0; }
.stage__bignum {
  position: absolute;
  z-index: -1;
  top: calc(var(--header-h) + 8px);
  right: var(--gutter);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(9rem, 26vw, 24rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.25px rgb(247 245 236 / 0.4);
  user-select: none;
}
.stage__content { padding-block: clamp(64px, 10vh, 112px); }
.stage__kicker { display: flex; align-items: center; gap: 14px; color: rgb(247 245 236 / 0.8); margin-bottom: 20px; }
.stage__num {
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.stage__title { max-width: 13ch; font-size: clamp(2.75rem, 7vw, 7rem); text-wrap: balance; }
.stage__text {
  max-width: 44ch;
  margin-top: clamp(18px, 2.2vw, 28px);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: rgb(247 245 236 / 0.9);
}
.stage__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: clamp(24px, 3vw, 40px);
}
.stage__links .btn { white-space: normal; text-align: left; min-height: 52px; padding-block: 10px; }
.stage__rail { display: none; }

@media (max-width: 767px) {
  .stage__links .btn { width: 100%; justify-content: space-between; }
}

/* Escenario fijado (JS añade .is-staged a partir de 768 px) ------------- */
.stage.is-staged { height: 100vh; height: 100svh; overflow: hidden; }
.stage.is-staged .stage__panels { position: absolute; inset: 0; }
.stage.is-staged .stage__panel { position: absolute; inset: 0; min-height: 0; will-change: clip-path; }
.stage.is-staged .stage__content { padding-right: calc(var(--gutter) + 300px); }
/* Lectura del índice: sombra a la derecha y número grande abajo, fuera de su camino */
.stage.is-staged .stage__panel::before {
  background:
    linear-gradient(0deg, rgb(6 42 34 / 0.94) 0%, rgb(6 42 34 / 0.55) 36%, rgb(6 42 34 / 0) 64%),
    linear-gradient(90deg, rgb(6 42 34 / 0.72) 0%, rgb(6 42 34 / 0.3) 40%, rgb(6 42 34 / 0) 62%),
    linear-gradient(270deg, rgb(6 42 34 / 0.78) 0%, rgb(6 42 34 / 0.4) 24%, rgb(6 42 34 / 0) 42%);
}
.stage.is-staged .stage__bignum {
  top: auto;
  bottom: clamp(48px, 8vh, 96px);
  font-size: clamp(8rem, 16vw, 15rem);
}
@media (max-width: 1023px) {
  .stage.is-staged .stage__content { padding-right: calc(var(--gutter) + 72px); }
}

.stage.is-staged .stage__rail {
  display: grid;
  gap: 18px;
  position: absolute;
  z-index: 5;
  right: var(--gutter);
  top: 42%;
  transform: translateY(-50%);
  width: 260px;
}
.stage__count {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: rgb(247 245 236 / 0.7);
}
.stage__count span { color: var(--c-lime); }
.stage__rail-body { position: relative; padding-left: 22px; }
.stage__rail-bar {
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: rgb(247 245 236 / 0.24);
}
.stage__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--c-lime);
  transform-origin: top;
  transform: scaleY(0);
}
.stage__rail ol { display: grid; gap: 2px; }
.stage__rail-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 40px;
  padding-block: 8px;
  font-size: 0.9rem;
  line-height: 1.3;
  text-decoration: none;
  color: rgb(247 245 236 / 0.55);
  transition: color var(--t-fast), transform 420ms var(--ease-out);
}
.stage__rail-num { font-size: 0.78rem; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.stage__rail-link:hover { color: var(--c-ivory); }
.stage__rail-link.is-active { color: var(--c-ivory); transform: translateX(6px); }
.stage__rail-link.is-active .stage__rail-num { color: var(--c-lime); }
.stage__rail-link:focus-visible { outline-offset: 2px; border-radius: 4px; }
@media (max-width: 1023px) {
  .stage.is-staged .stage__rail { width: auto; }
  .stage__rail-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Cierre ------------------------------------------------------------------ */
.pending {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: var(--c-ivory);
  color: var(--c-ink);
  isolation: isolate;
}
.pending__emblem {
  position: absolute;
  z-index: -1;
  right: calc(var(--gutter) - 1vw);
  top: 50%;
  width: min(34vw, 500px);
  margin-top: calc(min(34vw, 500px) * -0.46);
  overflow: visible;
}
.pending__emblem path { fill: none; stroke: rgb(0 107 53 / 0.38); stroke-width: 0.55; }
.pending__label { margin-bottom: 20px; color: var(--c-text-2); }
.pending__title { max-width: 14ch; font-size: clamp(2.75rem, 6.4vw, 6rem); }
.pending__text { max-width: 46ch; margin-top: 24px; color: var(--c-text-2); }
.pending__actions { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 1023px) {
  .pending__emblem { width: 64vw; right: -20vw; top: 24px; margin-top: 0; opacity: 0.6; }
}