/* ============================================================
   GEO — /servicios/  (page-servicios.php)
   Figma INICIO · spec: docs/servicios-spec.xml
   Valores EN PX EXACTOS del nodo. Sin tokens globales.
   ============================================================ */

/* ── 1. HERO — Rectangle 520 (267:15) ─────────────────────── */
/* Figma: 1733×1019 · overlay #3e3e3e @ 50%
   Título  "Servicios"  MonteCarlo 128 / lh 217.6 / ls -1.28 #fff (left)
   Lead    Montserrat Regular 36 / lh 43.884 / ls -0.36 #fff CENTER
   Welcome igual a lead                                            */
/* Hero — el contenedor toma el aspect EXACTO de la imagen (Figma 188:65,
   bbox 1729×1017 ≈ 17:10) para que `object-fit: cover` NO recorte nada.
   En desktops 1920+ queda ~1129 tall (≈ full-screen visualmente). En
   viewports más angostos se acomoda; nunca pierde composición. */
.servicios-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1729 / 1017;             /* Figma exact (nodo 188:65) */
  min-height: 480px;                      /* protege en viewports muy angostos */
  overflow: hidden;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 32px;
  box-sizing: border-box;
}

/* COMPOSITE — 2 mitades side-by-side (Figma: DSC_0679 izq + DSC_0817 der).
   Cada mitad cubre 50% del hero. Las fotos son ~867×1017 (aspect 0.85);
   cada mitad del hero a aspect 1729/1017 con 50% width también es 0.85
   ⇒ cover NO recorta. */
.servicios-hero__composite {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.servicios-hero__half {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.servicios-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(62, 62, 62, 0.50);    /* Figma exact: #3e3e3e @ 50% */
  z-index: 1;
}
.servicios-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1310px;                     /* Figma lead box width */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.servicios-hero__title {
  font-family: 'MonteCarlo', cursive;
  font-weight: 400;
  font-size: 128px;
  line-height: 217.6px;
  letter-spacing: -1.28px;
  color: #ffffff;
  margin: 0;
  text-align: left;
}

/* Tres bloques separados con aire (NO un párrafo corrido) */
.servicios-hero__text {
  display: flex;
  flex-direction: column;
  gap: 36px;                              /* aire entre bloques */
  max-width: 1310px;
}
.servicios-hero__para {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 43.884px;
  letter-spacing: -0.36px;
  color: #ffffff;
  margin: 0;
}
.servicios-hero__em {
  font-style: italic;
  font-weight: 600;                       /* SemiBold Italic (Figma) */
  font-family: 'Montserrat', sans-serif;
}
.servicios-hero__strong {
  font-style: normal;
  font-weight: 600;                       /* SemiBold (Figma) */
}

/* Zoom-in de entrada del hero — sutil ~1.08 → 1, coherente con el resto.
   El data-hero-anim="pending" se quita en CSS al disparar la anim. */
@keyframes servicios-hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.servicios-hero[data-hero-anim="pending"] .servicios-hero__composite {
  animation: servicios-hero-zoom 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .servicios-hero[data-hero-anim="pending"] .servicios-hero__composite {
    animation: none;
  }
}

/* ── 2. LABS — Pinned horizontal scroll (Frame 3 / 181:162) ── */
/* Figma: 5 slides · 1762 px ancho cada uno (8812 ÷ 5)
   Tipografía por slide:
     number  MonteCarlo Regular 64 / lh 108.8 / ls -0.64 #fff
     title   Montserrat ExtraBold 96 / lh 117.024 / ls -0.96 #fff
     body    Montserrat 32 / lh 40 / ls -0.32 ó 3.2 #fff CENTER
     aside   Montserrat Bold 24 / lh 29.256 / ls -0.24 #fff CENTER */
.servicios-labs {
  position: relative;
  overflow: hidden;                      /* clipea el track horizontal */
  height: 100svh;                        /* viewport del pin */
  background: #111;                       /* fallback bajo las fotos */
}
.servicios-labs__track {
  position: relative;                    /* anchor para los bridges absolutos */
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  width: max-content;                    /* JS calcula desplazamiento */
  will-change: transform;
}

.servicios-lab {
  position: relative;
  flex: 0 0 100vw;                       /* 1 slide = 100 vw */
  height: 100%;
  /* Sin overflow:hidden a nivel slide para que los asides "bridge" puedan
     extenderse al boundary (el padre .servicios-labs sí clipa). */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  padding: 80px 8vw;
  box-sizing: border-box;
}
.servicios-lab__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.servicios-lab__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);       /* legibilidad sobre las fotos */
  z-index: 1;
}
/* Slide 05 lleva overlay EXTRA (Figma Rectangle 405 @ 50%) */
.servicios-lab--dim .servicios-lab__overlay {
  background: rgba(0, 0, 0, 0.55);
}
/* Contenedor del texto del slide — confinado al 100vw del slide para que
   NUNCA aparezca en el gap entre slides. */
.servicios-lab__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(1200px, 90vw);          /* siempre menor que el slide */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
}
.servicios-lab__number {
  font-family: 'MonteCarlo', cursive;
  font-weight: 400;
  font-size: 64px;
  line-height: 108.8px;                  /* Figma exact */
  letter-spacing: -0.64px;
  color: #ffffff;
  display: block;
}
.servicios-lab__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;                       /* ExtraBold */
  font-size: 96px;
  line-height: 117.024px;
  letter-spacing: -0.96px;
  color: #ffffff;
  margin: 0;
  text-align: center;
  width: 100%;                            /* respeta el max del padre */
  max-width: 100%;
}
.servicios-lab__body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.32px;
  color: #ffffff;
  margin: 24px 0 0;
  max-width: 100%;
  text-align: center;
}
/* BRIDGE — aside que vive EN EL TRACK, no dentro de un slide. Posicionado
   absolute en `left: var(--bridge-left)` (e.g. 200vw para slide 02→03, 300vw
   para 03→04). transform(-50%, -50%) centra el aside sobre la COSTURA exacta.
   Como vive como hijo del track, viaja con el desplazamiento horizontal.
   Figma:
     - slide 02 aside (198:208): seam x abs ≈ 6430 → 40% del track = 200vw
     - slide 03 aside (198:214): seam x abs ≈ 8210 → 60% del track = 300vw
     - Ambos a y local ≈ 83% del slide (top: 75% + translate -50% = ~75% top center)
     - width Figma: 395-468 px de 1762 = 22-27% → min(28vw, 480px)
     - Tipografía Figma: Montserrat Bold 24 / lh 29.256 / ls -0.24 #fff
*/
.servicios-labs__bridge {
  position: absolute;
  left: var(--bridge-left, 50vw);
  top: 75%;
  transform: translate(-50%, -50%);
  z-index: 3;

  width: min(28vw, 480px);
  max-width: 90vw;
  margin: 0;
  padding: 0;
  text-align: center;

  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 29.256px;
  letter-spacing: -0.24px;
  color: #ffffff;
  /* Sombra muy suave para legibilidad sobre fotos claras */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ── 3. RAZONES — Rectangle 389 (196:141) ─────────────────── */
/* 4 columnas iguales sobre fondo negro
   col-title  Montserrat Bold 22 / lh 26.818 / ls -0.44 #fff (uppercase)
   col-body   Montserrat Medium 16 / lh 25 / ls -0.32 #fff CENTER         */
.servicios-reasons {
  background: #000000;
  color: #ffffff;
  padding: 120px 60px;
}
.servicios-reasons__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px;
  max-width: 1765px;                     /* Figma rect w */
  margin: 0 auto;
}
.servicios-reason {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 0 8px;
}
/* Iconos SVG de Figma (línea blanca, sin caja/fondo). Cada uno con su aspect
   propio pero dimensión cap ~72px para uniformidad visual. */
.servicios-reason__icon {
  display: block;
  width: auto;
  height: auto;
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
}

.servicios-reason__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 26.818px;
  letter-spacing: -0.44px;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
  max-width: 316px;                      /* Figma body width matches title row */
}
.servicios-reason__body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.32px;
  color: #ffffff;
  margin: 0;
  max-width: 316px;                      /* Figma exact */
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1280px) {
  .servicios-hero__title { font-size: 96px; line-height: 1.0; }
  .servicios-hero__lead,
  .servicios-hero__welcome { font-size: 28px; line-height: 1.3; }
  .servicios-lab__title { font-size: 64px; line-height: 1.1; }
  .servicios-lab__body  { font-size: 24px; line-height: 1.35; }
  .servicios-reasons    { padding: 80px 32px; }
  .servicios-reasons__grid { gap: 48px; }
}

@media (max-width: 768px) {
  /* Hero más compacto */
  .servicios-hero__title { font-size: 64px; line-height: 1.0; }
  .servicios-hero__para  { font-size: 18px; line-height: 1.4; }

  /* Labs: pin se DESACTIVA en JS, stack vertical */
  .servicios-labs { height: auto; }
  .servicios-labs__track { flex-direction: column; width: 100%; height: auto; }
  .servicios-lab { flex: 0 0 auto; width: 100%; min-height: 100svh; padding: 60px 24px; }
  .servicios-lab__title { font-size: 40px; line-height: 1.1; }
  .servicios-lab__body  { font-size: 18px; line-height: 1.4; }
  .servicios-lab__number { font-size: 40px; line-height: 1.2; }

  /* Bridge vuelve al flujo (sin posicionamiento absoluto) — aparece justo
     después de su slide en el stack vertical mobile. */
  .servicios-labs__bridge {
    position: static;
    transform: none;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 24px auto;
    padding: 0 24px;
    font-size: 16px;
    line-height: 1.4;
    text-shadow: none;
    box-sizing: border-box;
  }

  /* Reasons: 1 columna en mobile, 2 en tablet */
  .servicios-reasons__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .servicios-reasons__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Reduced motion: no pin, stack vertical (igual que mobile) */
@media (prefers-reduced-motion: reduce) {
  .servicios-labs { height: auto; }
  .servicios-labs__track { flex-direction: column; width: 100%; height: auto; }
  .servicios-lab { flex: 0 0 auto; min-height: 100svh; }
}