/* ============================================================
   NBJJ FRAMING INC · home.css — loader + los 6 bloques del Home
   ============================================================ */

/* ============================================================
   LOADER "ESCUADRA DE PRECISION" (V3 adaptada, CONCEPT §4)
   ============================================================ */
.loader{
  /* bottom:2px = rendija anti occlusion-culling (0714-c): con el overlay cubriendo
     100% Chrome difiere el upload de texturas del hero al reveal y lo paga en vuelo;
     2px de hero "visible" fuerzan decode+upload durante el loader. Invisible al ojo. */
  position:fixed;inset:0 0 2px 0;z-index:200;contain:strict;
  display:block;overflow:hidden;
}
html.langswap .loader{display:none;} /* p5: venimos del toggle, ni un frame */
/* el lienzo son 2 paneles partidos por el ANGULO de la linea de tiza (24% @1440) */
/* opacity .998 (anti occlusion-culling): con el overlay 100% opaco Chrome difiere la
   subida de texturas del hero a GPU hasta el reveal y la paga EN VUELO (trace 0714-c);
   al 99.8% el hero "es visible" debajo y sus texturas suben durante el loader */
.lp{position:absolute;inset:0;background-color:var(--paper);will-change:transform;opacity:.998;}
.lp-a{clip-path:polygon(0 0,100% 0,100% 100%,24% 100%);}
.lp-b{clip-path:polygon(0 0,24% 100%,0 100%);}
.loader-square{
  position:absolute;top:9%;left:6%;width:clamp(90px,10vw,140px);height:auto;z-index:5;
  stroke:var(--steel-1);stroke-width:1.5;fill:none;
}
.loader-chalk{
  position:absolute;top:0;left:0;width:260vmax;height:2px;background:var(--accent);
  transform-origin:0 0;z-index:4;clip-path:inset(0 100% 0 0);
}
.loader-deg{
  position:absolute;top:8%;right:7%;z-index:5;
  font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.2rem);
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
.loader-lockup{
  position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
}
.loader-lockup img{
  width:clamp(180px,22vw,300px);height:auto;
  clip-path:inset(100% 0 0 0);will-change:transform,clip-path;
}
.loader-tag{
  font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--steel-2);opacity:0;
}

/* ============================================================
   NAV PILL ZILLOW (orden 0714 — SOLO Home: home.css no se carga en interiores;
   base.css intacto = la Regla de Acero sigue viva en las otras 9 paginas)
   ============================================================ */
.nav-rail{display:none;}
.nav-links{
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(22,23,23,.08);border-radius:999px;padding:5px;gap:2px;
  box-shadow:0 10px 30px rgba(30,58,92,.16);
}
.nav-links a{
  flex-direction:row;padding:9px 18px;border-radius:999px;font-weight:600;font-size:13px;
  color:var(--steel-1);letter-spacing:.09em;transition:background .2s,color .2s;
}
.nav-links a:hover{background:rgba(22,23,23,.06);color:var(--ink);}
.nav-links a[aria-current="page"]{background:var(--ink);color:var(--paper);}
/* 0714-c FLUIDEZ: sin backdrop-blur mientras la entrada esta en vuelo (los pills
   son casi opacos: el ojo no lo nota; el compositor lo agradece a 120Hz) */
body.is-booting .nav-links,
body.is-booting .hchip,
body.is-booting .hero-caption{backdrop-filter:none;-webkit-backdrop-filter:none;}
body.nav-scrolled .nav-links{box-shadow:0 6px 18px rgba(30,58,92,.10);border-color:var(--hairline);}

/* ============================================================
   ① HERO "PORTADA ZILLOW" (orden 0714 + cirugia 0714-b: mundo de OBRA, cero playa)
   z0 cielo-de-obra · z1 wordmark · z3 estructura-framing (foto real) · z4 UI (chips/caption/minis)
   sandwich: la estructura muerde la mitad inferior de las letras (40-60% deseado)
   ============================================================ */
.hero{
  --houseW:min(130vw,212vh,3200px);
  position:relative;height:100vh;min-height:640px;overflow:visible;z-index:2;
}
.hero-sky{position:absolute;inset:-36px 0 -10px;z-index:0;overflow:hidden;will-change:transform;}
.hero-sky img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.hero-word{
  position:absolute;top:10.5vh;left:0;right:0;z-index:1;text-align:center;
  font-family:var(--display);font-weight:800;font-size:min(32vw,50vh);line-height:.78;
  letter-spacing:.01em;color:#fff;white-space:nowrap;pointer-events:none;user-select:none;
  text-shadow:0 2px 7px rgba(22,23,23,.30),0 4px 34px rgba(30,58,92,.16);
  will-change:transform;
}
/* capa fantasma (orden 0714-d): SOLO contorno, z4 = delante de la casa. Comparte la
   clase hero-word (misma tipografia/posicion Y los mismos tweens GSAP — sincronia
   perfecta gratis). El borde vive UNICAMENTE aqui: sobre el cielo envuelve al relleno
   blanco (el bordecito), sobre la madera dibuja la figura completa de la letra. */
.hero-word--ghost{
  /* trazo BLANQUITO (orden 0714-e): sobre la madera la silueta se entiende al instante;
     sobre el cielo se funde con el relleno blanco = cero ruido */
  z-index:4;color:transparent;text-shadow:none;
  -webkit-text-stroke:clamp(2px,.22vw,4px) rgba(255,255,255,.82);
}
.hero-word--ghost .hero-year{visibility:hidden;}
.hero-year{
  display:inline-block;vertical-align:top;margin:.1em 0 0 .05em;
  font-family:var(--body);font-weight:600;font-size:clamp(12px,1vw,15px);
  letter-spacing:.14em;line-height:1;color:#fff;text-shadow:0 1px 10px rgba(30,58,92,.4);
}
.hero-minis{
  /* 21vh (era 23vh): el esqueleto Higgsfield 0714 sube mas a la derecha y su cuerda
     superior rozaba TRUSSES// en el pico del float (+6px) @1440 — 18px de aire extra */
  position:absolute;right:clamp(20px,3.4vw,56px);top:21vh;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.hero-minis a{
  font-family:var(--body);font-weight:600;font-size:clamp(12.5px,1vw,15.5px);
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 12px rgba(30,58,92,.45);transition:color .2s;
}
.hero-minis a span{color:rgba(255,255,255,.62);margin-left:2px;}
.hero-minis a:hover{color:#F4E3C2;}
.hero-house{
  /* centrado sin transform (GSAP es dueño unico del transform): left 50% + margen negativo,
     aguanta --houseW > 100vw en movil (margin:auto ahi anclaria a la izquierda) */
  position:absolute;left:50%;margin-left:calc(var(--houseW)/-2);bottom:-2%;width:var(--houseW);
  aspect-ratio:2400/858;z-index:3;will-change:transform;pointer-events:none;
}
.house-frame{position:absolute;left:0;right:0;margin:0 auto;bottom:6px;width:100%;height:auto;}
.house-shadow{
  position:absolute;left:1%;right:1%;bottom:-6px;height:30px;
  background:radial-gradient(ellipse at center,rgba(22,23,23,.28) 0%,rgba(22,23,23,0) 70%);
}
.hero-chips{
  position:absolute;left:clamp(20px,3vw,48px);bottom:38px;z-index:4;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.hchip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  border:1px solid rgba(22,23,23,.08);border-radius:999px;padding:10px 16px;
  font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--ink);
  box-shadow:0 12px 30px rgba(30,58,92,.14);
}
.hchip svg{width:15px;height:15px;flex:none;}
.hchip--yrs b{font-family:var(--display);font-weight:800;font-size:19px;line-height:1;color:var(--accent);}
.hero-caption{
  position:absolute;right:clamp(20px,3.4vw,56px);bottom:38px;z-index:4;max-width:380px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  border:1px solid rgba(22,23,23,.08);border-radius:14px;padding:16px 20px;
  box-shadow:0 18px 44px rgba(30,58,92,.16);
  font-family:var(--body);font-weight:500;font-size:14.5px;line-height:1.55;
  color:var(--ink);text-transform:none;letter-spacing:0;
}

/* ============================================================
   ② MANIFIESTO + DOCK (C5 — destino del journey, CONCEPT §4-M3)
   ============================================================ */
.manifest{
  position:relative;background:var(--paper);z-index:1;
  padding:clamp(4rem,7vw,7.5rem) clamp(20px,4.4vw,64px) clamp(3.5rem,5vw,6rem);
  overflow:clip;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
}
.manifest-grid{width:100%;}
.manifest-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:55fr 45fr;
  gap:clamp(28px,4vw,72px);max-width:1360px;margin:0 auto;align-items:center;
}
.manifest-copy .eyebrow{margin-bottom:20px;}
.manifest-h{font-size:clamp(2.4rem,4.8vw,4.8rem);max-width:14ch;color:var(--ink);}
.manifest-body{margin:24px 0 30px;max-width:52ch;font-size:16.5px;color:var(--steel-1);}
.manifest-ghost{
  position:absolute;left:-1.5%;bottom:-6%;z-index:1;
  font-family:var(--display);font-weight:800;font-size:min(20vw,300px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(116,119,123,.16);
  pointer-events:none;user-select:none;will-change:transform;
}
.dock-wrap{position:relative;}
.truss-dock{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  aspect-ratio:1356/1436;
}
.dock-shadow{
  position:absolute;left:6%;right:2%;bottom:-3.5%;height:9%;z-index:1;
  background:radial-gradient(ellipse at center,rgba(22,23,23,.30) 0%,rgba(22,23,23,0) 68%);
}
.truss-dock>img{ /* la cercha del dock entra con pop back.out al llegar el scroll (orden 0714) */
  position:relative;z-index:2;width:100%;height:auto;will-change:transform;
}
.dock-cards{
  position:absolute;left:16%;right:10%;top:46%;z-index:3;
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.dock-card{
  background:rgba(255,255,255,.9);border:1px solid rgba(22,23,23,.12);
  border-radius:12px;padding:10px 18px;box-shadow:0 12px 28px rgba(22,23,23,.14);
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-align:center;
  will-change:transform;
}
.dock-card b{color:var(--accent);font-weight:800;}
.dock-tag{
  position:absolute;top:12%;left:-4%;z-index:4;
}
.manifest .grid-patch{
  position:absolute;right:0;top:0;width:34%;height:52%;z-index:0;opacity:.5;pointer-events:none;
}

/* ============================================================
   ③ BANDA DIVISORIA (C2 manifiesto + pildoras sobre ink, CONCEPT §5)
   ============================================================ */
.band{
  position:relative;background:var(--ink-band);color:var(--paper);overflow:clip;
  min-height:68vh;display:flex;align-items:center;justify-content:center;
  padding:clamp(4.5rem,7vw,7rem) clamp(20px,4.4vw,64px);
}
.band-ghost{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--display);font-weight:800;font-size:min(26vw,380px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(164,167,170,.10);
  white-space:nowrap;pointer-events:none;user-select:none;will-change:transform;
}
.band-inner{position:relative;z-index:2;text-align:center;max-width:1100px;}
.band-phrase{
  font-size:clamp(2.4rem,5.4vw,5.4rem);color:var(--paper);line-height:1.04;
}
.band-pill{ /* photo-pill DENTRO del flujo del h2 (em-units, 05 §9) */
  display:inline-block;width:2.2em;height:.78em;border-radius:999px;overflow:hidden;
  vertical-align:-.12em;margin:0 .08em;border:1px solid rgba(249,249,249,.25);
}
.band-pill img{width:100%;height:100%;object-fit:cover;}
.band-sub{margin-top:22px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-3);}
.band-polaroid{
  position:absolute;right:clamp(8px,4vw,72px);bottom:6%;z-index:3;width:min(19vw,240px);
  background:var(--paper);padding:10px 10px 30px;border-radius:4px;
  box-shadow:0 24px 50px rgba(0,0,0,.4);transform:rotate(-5deg);will-change:transform;
}
.band-polaroid img{width:100%;height:auto;border-radius:2px;}
.band-polaroid figcaption{
  margin-top:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-2);text-align:center;
}

/* ============================================================
   ④ PROCESO — paginacion horizontal numeral-textura (0711-s §3; EL pin del Home)
   ============================================================ */
.process{position:relative;background:var(--paper);z-index:1;}
.process-stage{
  position:relative;height:100vh;min-height:620px;overflow:hidden;
}
.process-head{
  position:absolute;top:clamp(72px,10vh,104px);left:clamp(20px,4.4vw,64px);z-index:6;
}
.process-head .eyebrow{margin-bottom:10px;}
.process-head h2{font-size:clamp(1.9rem,3.2vw,3rem);color:var(--ink);}
.ppanel{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0 clamp(20px,4.4vw,64px);background:var(--paper);will-change:transform;
}
.ppanel-inner{
  position:relative;display:grid;grid-template-columns:54fr 46fr;align-items:center;
  gap:clamp(20px,3vw,56px);max-width:1360px;margin:0 auto;width:100%;
}
.pnum{ /* numeral hueco DENTRO de la silueta de cercha (>40% del ancho del panel) */
  position:relative;width:100%;
}
.pnum svg{width:100%;height:auto;stroke:var(--hairline);stroke-width:1.5;fill:none;}
.pnum b{
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  font-family:var(--display);font-weight:800;font-size:clamp(10rem,19vw,19rem);line-height:.8;
  color:transparent;-webkit-text-stroke:2px var(--steel-3);
}
.pcopy .pico{width:52px;height:52px;stroke:var(--accent);stroke-width:1.8;fill:none;margin-bottom:18px;}
.pcopy h3{font-size:clamp(1.7rem,2.6vw,2.6rem);color:var(--ink);max-width:14ch;}
.pcopy p{margin-top:14px;max-width:38ch;font-size:16px;color:var(--steel-1);}
.pdots{
  position:absolute;bottom:clamp(22px,5vh,48px);left:50%;transform:translateX(-50%);z-index:6;
  display:flex;gap:10px;
}
.pdots i{width:8px;height:8px;border-radius:50%;background:var(--hairline);transition:background .3s;}
.pdots i.on{background:var(--accent);}

/* ============================================================
   ④.5 ESCAPARATE BENTO (0705-p3 — superficie clara acero, != paper)
   ============================================================ */
.showcase{
  position:relative;background:var(--surface-2);
  padding:clamp(4rem,6vw,6.5rem) clamp(20px,4.4vw,64px);overflow:clip;
}
.showcase-head{max-width:1360px;margin:0 auto 36px;position:relative;z-index:2;}
.showcase-head .eyebrow{margin-bottom:12px;}
.showcase-head h2{font-size:clamp(2rem,3.6vw,3.4rem);color:var(--ink);max-width:20ch;}
.showcase-ghost{
  position:absolute;right:-1%;top:-2%;z-index:1;
  font-family:var(--display);font-weight:800;font-size:min(16vw,230px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(116,119,123,.14);
  pointer-events:none;user-select:none;will-change:transform;
}
.bento{
  position:relative;z-index:2;display:grid;max-width:1360px;margin:0 auto;
  grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:14px;
}
.sc-tile{
  position:relative;border-radius:16px;overflow:hidden;display:block;
  background:var(--steel-1);will-change:transform;
}
.sc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;}
.sc-tile::after{ /* scrim inferior para el rotulo (legibilidad AA) */
  content:'';position:absolute;inset:auto 0 0 0;height:62%;
  background:linear-gradient(180deg,rgba(22,23,23,0),rgba(22,23,23,.78));
}
.sc-label{
  position:absolute;left:18px;right:18px;bottom:14px;z-index:2;color:var(--paper);
}
.sc-label b{
  display:block;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,22px);
  letter-spacing:.03em;text-transform:uppercase;line-height:1.05;
}
.sc-label span{display:block;margin-top:4px;font-size:12.5px;color:rgba(249,249,249,.8);}
.sc-arrow{
  position:absolute;right:14px;top:14px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:rgba(249,249,249,.16);border:1px solid rgba(249,249,249,.35);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--paper);
}
.sc-feat{grid-column:1/7;grid-row:1/3;}
.sc-t2{grid-column:7/10;grid-row:1;}
.sc-t3{grid-column:10/13;grid-row:1;}
.sc-t4{grid-column:7/10;grid-row:2;}
.sc-t5{grid-column:10/13;grid-row:2;}
.sc-t6{grid-column:1/7;grid-row:3;}
.sc-cta{
  grid-column:7/13;grid-row:3;background:var(--ink);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px 30px;
  position:relative;
}
.sc-cta::after{content:none;}
.sc-cta b{
  font-family:var(--display);font-weight:800;font-size:clamp(20px,2vw,27px);
  text-transform:uppercase;color:var(--paper);max-width:18ch;line-height:1.05;
}
.sc-cta .btn{align-self:flex-start;}
.sc-cta svg{
  position:absolute;right:-4%;bottom:-14%;width:44%;stroke:rgba(164,167,170,.22);
  stroke-width:1.5;fill:none;pointer-events:none;
}

/* ============================================================
   RESPONSIVE HOME (ley l: MQ sin tocar desktop)
   ============================================================ */
@media (max-width:900px){
  .hero{--houseW:min(104vw,78vh);}
  .hero-word{top:10vh;font-size:min(30vw,34vh);}
  .hero-house{aspect-ratio:1000/777;bottom:-4px;}
  .house-frame{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin:0 auto;display:block;}
  .house-shadow{bottom:-4px;}
  .hero-caption{max-width:340px;font-size:13.5px;}
  .manifest-grid{grid-template-columns:1fr;}
  .manifest-ghost{display:none;}
  .truss-dock{max-width:420px;}
  .ppanel-inner{grid-template-columns:1fr;gap:12px;}
  .pnum{width:74%;max-width:420px;margin:0 auto;}
  .pnum b{font-size:clamp(6rem,26vw,9rem);}
  .process-stage{height:auto;min-height:0;overflow:visible;padding:24px 0 40px;}
  .ppanel{position:relative;inset:auto;padding:28px clamp(20px,4.4vw,64px);}
  .process-head{position:relative;top:auto;left:auto;padding:32px clamp(20px,4.4vw,64px) 0;}
  .pdots{display:none;}
  .bento{grid-auto-rows:170px;}
  .sc-feat{grid-column:1/13;grid-row:auto/span 2;}
  .sc-t2,.sc-t3,.sc-t4,.sc-t5{grid-column:auto/span 6;grid-row:auto;}
  .sc-t6{grid-column:1/13;grid-row:auto;}
  .sc-cta{grid-column:1/13;grid-row:auto;min-height:170px;}
}
@media (max-width:760px){
  .hero{--houseW:min(184vw,90vh);height:100svh;min-height:640px;}
  .hero-word{top:13vh;font-size:min(38vw,24vh);}
  .hero-minis{display:none;}
  .hero-caption{left:16px;right:16px;bottom:16px;max-width:none;padding:14px 16px;}
  .hero-chips{left:16px;right:16px;bottom:132px;flex-direction:row;flex-wrap:wrap;gap:8px;}
  .hchip{padding:8px 13px;font-size:12px;}
  .band-polaroid{position:relative;right:auto;bottom:auto;margin:34px auto 0;transform:rotate(-3deg);}
  .band{padding-bottom:5.5rem;}
  .cta-eco{display:none;}
}
@media (max-width:560px){
  .dock-cards{left:8%;right:4%;}
}
@media (prefers-reduced-motion:reduce){
  .loader{display:none;}
}