/* ============================================================
   KEYSTONE · services.css — página SERVICES (EN + /es/servicios/)
   Banner mini-sandwich (eco del ADN Zillow: ghost-word mordido por
   la panorámica real del hero) · S-② credo · S-③ SHOWROOM EDITORIAL
   (R2: bandas full-width alternadas foto 55 / contenido 45, numeral
   hueco, lista de entregables, CTA fantasma — reemplaza al acordeón
   S4 que el dueño rechazó) · S-④ Cómo trabajamos · ⑤ CTA · ⑥ footer.
   GSAP dueño único del transform (fotos .band-photo y numerales).
   ============================================================ */

/* ============ S-① BANNER MINI-SANDWICH (§13 B2 evolucionado, CONCEPT §7) ============ */
.banner{
  position:relative;background:var(--ink);color:var(--on-dark);overflow:clip;
  min-height:clamp(380px,44vh,520px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + clamp(2.4rem,4vh,3.4rem)) var(--gutter) clamp(6.4rem,9.6vw,9rem);
}
.banner-media-wrap{position:absolute;inset:-8% 0;z-index:0;overflow:clip}
.banner-media{
  width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  will-change:transform;
}
/* velo extra de AA (el asset ya trae scrim izq .85→0 + velo sup .38 HORNEADOS) */
.banner-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,22,38,.30) 0%,rgba(11,22,38,.14) 45%,rgba(11,22,38,.52) 100%);
}
/* ghost-word de la página: Montserrat HUECO (ADN del contorno del hero) */
.banner-ghost{
  position:absolute;right:-1vw;bottom:4.9vw;z-index:2;
  font-family:var(--display);font-weight:900;line-height:.8;white-space:nowrap;
  font-size:min(12.6vw,178px);letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:2px rgba(242,247,252,.17);
  pointer-events:none;user-select:none;will-change:transform;
}
/* LA MORDIDA: la panorámica REAL del hero (mismo asset) asoma su silueta
   de copas por el borde inferior y muerde el ghost ≤20% (eco 0714-d/e) */
.banner-fringe{
  position:absolute;left:-4vw;bottom:calc(9vw - 58.6vw);z-index:3;
  width:112vw;max-width:none;height:auto;
  pointer-events:none;will-change:transform;
}
.banner-content{position:relative;z-index:4;max-width:1280px;margin:0 auto;width:100%}
.banner-eyebrow{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
  color:#8FC5F5;font-weight:700;font-size:12px;letter-spacing:.32em;text-transform:uppercase;
}
.banner-h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,5.5vw,5.6rem);line-height:1.04;letter-spacing:-.01em;
  color:#fff;text-shadow:0 2px 10px rgba(4,20,44,.5),0 12px 40px rgba(4,20,44,.42);
  max-width:20ch;width:fit-content;
}
.banner-h1 em{
  font-style:normal;color:transparent;text-shadow:none;
  -webkit-text-stroke:clamp(1.6px,.16vw,3px) #fff;
}
.banner-crumb{
  display:flex;align-items:center;gap:10px;margin-top:20px;
  font-size:13.5px;font-weight:500;letter-spacing:.04em;color:#C9D6E6;
}
.banner-crumb a{position:relative;color:#E4EEF9}
.banner-crumb a::after{
  content:'';position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--sky);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--ease);
}
.banner-crumb a:hover::after{transform:scaleX(1)}
.banner-crumb .crumb-cube{width:13px;height:13px;flex:none;opacity:.9}
.banner-crumb [aria-current]{color:#fff;font-weight:700}
.banner-chip{position:absolute;top:96px;right:3.5vw;z-index:4}
.banner-chip b{color:#8FC5F5}

/* pre-siembra (0714-c p2) — GSAP compone; estáticos sin JS/motion/langswap */
html.js .banner-media,html.js .banner-ghost,html.js .banner-fringe,
html.js .banner-chip,html.js .banner-eyebrow,html.js .banner-crumb{opacity:.001}
html:not(.js) .banner-media,html.motion-off .banner-media,html.langswap .banner-media,
html:not(.js) .banner-ghost,html.motion-off .banner-ghost,html.langswap .banner-ghost,
html:not(.js) .banner-fringe,html.motion-off .banner-fringe,html.langswap .banner-fringe,
html:not(.js) .banner-chip,html.motion-off .banner-chip,html.langswap .banner-chip,
html:not(.js) .banner-eyebrow,html.motion-off .banner-eyebrow,html.langswap .banner-eyebrow,
html:not(.js) .banner-crumb,html.motion-off .banner-crumb,html.langswap .banner-crumb{opacity:1}

/* ============ S-② INTERSTICIAL FINO — el credo del oficio (③ comprimido) ============ */
.credo{
  position:relative;background:var(--surface-2);overflow:clip;
  min-height:clamp(250px,30vh,340px);display:grid;place-items:center;
  padding:clamp(5.5rem,7.6vw,7rem) var(--gutter);
}
.credo::before{
  content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:url('/assets/img/pattern-pavers.svg');
}
.credo-cube{
  position:absolute;right:6%;top:14%;width:52px;opacity:.14;pointer-events:none;
  will-change:transform;
}
.credo-cota{position:absolute;left:4%;bottom:12%;width:150px;opacity:.45;pointer-events:none}
.credo-phrase{
  position:relative;z-index:2;text-align:center;
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.55rem,3vw,2.7rem);line-height:1.14;letter-spacing:-.01em;color:var(--ink);
}
.credo-phrase .tone{color:var(--accent)}

/* ============ S-③ CUERPO — "SHOWROOM EDITORIAL" (R2, la firma nueva) ============
   Cada servicio = BANDA full-width alternada: foto real 55% (crop editorial
   horizontal del lote, re-grade frío documentado) + contenido 45% con numeral
   GIGANTE hueco detrás del título, 2-3 líneas de copy, entregables con
   marcadores CUADRADOS y CTA fantasma. Fondos FRÍOS #FBFDFF / #F3F7FC.
   Separadores finos azules entre bandas. Anclas #slug en el <article>.  */
.show{position:relative;background:#FBFDFF;padding:clamp(5rem,7.5vw,7rem) 0 0}
.show-head{
  max-width:1280px;margin:0 auto clamp(2.6rem,4vw,3.6rem);padding:0 var(--gutter);
  display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.show-head .kicker{display:block;margin-bottom:14px}
.show-head h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.05;
}
.show-hint{color:var(--muted);font-size:clamp(.95rem,1.1vw,1.05rem);max-width:36ch}

.band{
  position:relative;display:grid;grid-template-columns:55fr 45fr;overflow:clip;
  min-height:clamp(480px,62vh,620px);background:#FBFDFF;
}
.band:nth-of-type(even){background:#F3F7FC}
.band--flip{grid-template-columns:45fr 55fr}
.band--flip .band-media{grid-column:2;grid-row:1}
.band--flip .band-body{grid-column:1;grid-row:1}

/* foto: full-bleed por defecto; variante --plate = placa enmarcada flotando
   sobre el fondo frío (crop editorial variado sin repetir tratamiento) */
.band-media{position:relative;overflow:clip;margin:0}
.band-frame{position:absolute;inset:0;overflow:clip}
.band--plate .band-frame{
  inset:clamp(22px,3vw,44px);border-radius:4px;
  box-shadow:0 26px 60px rgba(11,38,74,.18);
}
.band-photo{
  position:absolute;left:0;top:-4%;width:100%;height:108%;object-fit:cover;
  will-change:transform;
}
.band-note{
  position:absolute;left:20px;bottom:18px;z-index:2;pointer-events:none;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-dark);background:rgba(7,28,58,.6);border:1px solid rgba(255,255,255,.22);
  padding:8px 14px;border-radius:999px;white-space:nowrap;
}
.band--plate .band-note{left:calc(clamp(22px,3vw,44px) + 16px);bottom:calc(clamp(22px,3vw,44px) + 14px)}

.band-body{
  position:relative;display:grid;align-content:center;
  padding:clamp(3rem,5vw,4.5rem) var(--gutter);
}
.band-inner{position:relative;max-width:560px;width:100%;margin:0 auto}
.band-inner > *{position:relative;z-index:1}
/* numeral GIGANTE hueco DETRÁS del título (eco del ghost-word de la casa) */
.band-num{
  position:absolute;z-index:0;top:-.36em;left:-.06em;
  font-family:var(--display);font-weight:900;line-height:1;
  font-size:clamp(7rem,11.4vw,10.6rem);letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:2.5px rgba(5,70,164,.17);
  pointer-events:none;user-select:none;will-change:transform;
}
.band-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.06;letter-spacing:-.01em;
  margin-top:14px;
}
.band-copy{
  color:var(--muted);font-size:clamp(.98rem,1.12vw,1.08rem);line-height:1.65;
  margin-top:16px;max-width:52ch;
}
/* entregables: marcadores CUADRADOS (el adoquín de la casa) */
.band-list{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 22px;margin:22px 0 26px;
}
.band-list li{
  position:relative;padding-left:20px;
  font-size:clamp(.9rem,1vw,.98rem);font-weight:500;color:var(--ink);
}
.band-list li::before{
  content:'';position:absolute;left:0;top:.42em;width:8px;height:8px;
  background:var(--sky-mid);
}
/* CTA fantasma → se llena al hover (nodo sin dueño GSAP: transition permitida) */
.band-cta{
  display:inline-flex;align-items:center;gap:.55em;width:fit-content;
  font-weight:700;font-size:15px;line-height:1;color:var(--accent);
  border:1.5px solid rgba(5,70,164,.42);border-radius:999px;padding:14px 24px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.band-cta:hover{background:var(--accent);color:var(--on-dark);border-color:var(--accent)}
.band-cta span{transition:transform .25s var(--ease)}
.band-cta:hover span{transform:translateX(4px)}

/* separador fino azul entre bandas, con el cuadrito-adoquín al centro */
.band-sep{
  position:relative;height:1px;margin:0 auto;
  width:min(1280px,calc(100% - 2*var(--gutter)));
  background:linear-gradient(90deg,rgba(26,114,206,0),rgba(26,114,206,.45) 14%,rgba(26,114,206,.45) 86%,rgba(26,114,206,0));
}
.band-sep::before{
  content:'';position:absolute;left:50%;top:-4px;width:8px;height:8px;
  transform:translateX(-50%);background:#FBFDFF;border:1.5px solid var(--sky-mid);
}

/* ============ S-④ CÓMO TRABAJAMOS — 4 pasos con flechas que se dibujan ============ */
.steps{
  position:relative;background:var(--surface-2);overflow:clip;
  padding:clamp(3.6rem,5vw,4.8rem) var(--gutter) clamp(5rem,7.5vw,7rem);
}
.steps::before{
  content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;
  background:url('/assets/img/pattern-pavers.svg');
}
.steps-ghost{
  position:absolute;left:-1vw;bottom:-.16em;z-index:0;
  font-family:var(--display);font-weight:900;line-height:.8;white-space:nowrap;
  font-size:min(15vw,220px);color:transparent;
  -webkit-text-stroke:2px rgba(5,70,164,.08);
  pointer-events:none;user-select:none;will-change:transform;
}
.steps-cota{position:absolute;top:9%;right:3%;width:170px;opacity:.5;pointer-events:none}
.steps-head{
  position:relative;z-index:2;max-width:1220px;margin:0 auto clamp(2.6rem,4.4vw,3.8rem);
}
.steps-head .kicker{display:block;margin-bottom:14px}
.steps-head h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.05;
}
.steps-row{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.6vw,2.4rem);max-width:1220px;margin:0 auto;
  padding-bottom:24px;
}
/* arco suave de ruta (§6.7): offset por margin, JAMÁS transform (los .rv lo pisarían) */
.step:nth-child(2),.step:nth-child(3){margin-top:26px}
.step{position:relative}
.step-badge{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-family:var(--display);font-weight:900;font-size:1.05rem;margin-bottom:16px;
  background:var(--accent);color:var(--on-dark);
  box-shadow:0 10px 24px rgba(5,70,164,.28);
}
.step:nth-child(even) .step-badge{background:var(--ink)}
.step h3{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.12;margin-bottom:8px;max-width:16ch;
}
.step p{color:var(--muted);font-size:clamp(.9rem,1vw,.98rem);max-width:26ch}
.step-arrow{
  position:absolute;top:8px;right:calc(-1 * clamp(1.2rem,2.6vw,2.4rem) - 14px);
  width:clamp(46px,4.6vw,76px);height:auto;pointer-events:none;z-index:1;
}
.step-arrow path{fill:none;stroke:var(--sky-mid);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* CTA ⑤ — consolidado en base.css (j9a, F5) */

/* ============ MOBILE (ley 0704-l — todo DENTRO de las MQ) ============ */
@media (max-width:900px){
  .band{grid-template-columns:1fr;min-height:0}
  .band--flip{grid-template-columns:1fr}
  /* bandas apiladas: FOTO ARRIBA siempre, cuerpo debajo */
  .band-media,.band--flip .band-media{grid-column:1;grid-row:1;height:clamp(240px,58vw,420px)}
  .band-body,.band--flip .band-body{grid-column:1;grid-row:2;padding:clamp(2.1rem,6.4vw,2.8rem) var(--gutter) clamp(2.6rem,7.4vw,3.4rem)}
  .band--plate .band-frame{inset:14px}
  .band--plate .band-note{left:28px;bottom:26px}
  .band-num{font-size:clamp(3.6rem,13vw,4.6rem);top:-.42em;-webkit-text-stroke-width:1.6px}
  .band-title{margin-top:10px}
  .steps-row{grid-template-columns:1fr;gap:1.6rem;max-width:520px}
  .step:nth-child(2),.step:nth-child(3){margin-top:0}
  .step{padding-left:68px}
  .step-badge{position:absolute;left:0;top:0}
  .step-arrow{display:none}
  .steps-ghost{font-size:26vw}
}
@media (max-width:560px){
  .band-list{grid-template-columns:1fr}
  .band-note{left:14px;bottom:12px;padding:7px 12px;letter-spacing:.16em}
  .band--plate .band-note{left:24px;bottom:22px}
}
@media (max-width:760px){
  .banner{min-height:clamp(340px,52vh,460px);padding-bottom:clamp(5.4rem,15vw,6.6rem)}
  .banner-h1{font-size:clamp(2rem,8.6vw,2.6rem)}
  .banner-ghost{font-size:22vw;bottom:9vw;right:2vw}
  .banner-fringe{left:-8vw;width:126vw;bottom:calc(14vw - 65.9vw)}
  .banner-chip{display:none}
  .banner-crumb{margin-top:14px}
  .credo{min-height:0;padding:clamp(4.2rem,12vw,5rem) var(--gutter)}
  .credo-cota{display:none}
  .credo-cube{top:8%;right:4%;width:38px}
  .show-hint{max-width:none}
  .cta{min-height:0}
  .cta-cube{display:none}
  .steps-cota{display:none}
}

/* ============ SIN JS / REDUCED: la página COMPONE estática (§10.5) ============
   Las bandas son estáticas de nacimiento (cero estados ocultos);
   solo se apagan las transitions decorativas. */
@media (prefers-reduced-motion:reduce){
  .band-cta,.band-cta span,.banner-crumb a::after{transition:none}
}