/* ============================================================
   MENDOZA RODRIGUEZ · home.css — loader "LA PASADA DE LA LLANA"
   + los 6 bloques del esqueleto (cap. 13 §1) · mundo drywall frío
   ============================================================ */

/* ============================================================
   LOADER V6-MENDOZA — la llana ALISA la pantalla (solo Home)
   Rendija 2px anti occlusion-culling (0714-c p1): inset 0 0 2px 0
   ============================================================ */
.loader{
  position:fixed;inset:0 0 2px 0;z-index:120;
  contain:strict;overflow:hidden;
}
html.langswap .loader{display:none} /* toggle EN|ES salta el loader (ley p5) */
.loader-skin{
  position:absolute;inset:0;background:var(--surface);
}
.loader-skin img{ /* textura de juntas encintadas, alpha 12% HORNEADO */
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.loader-lockup{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.15rem;text-align:center;
}
.loader-logo{width:235px;height:auto}
.loader-tag{
  font-family:var(--font-t);font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--steel);
}
.loader-bar{
  display:block;width:160px;height:2px;background:var(--hairline);
  overflow:hidden;border-radius:2px;
}
.loader-bar i{
  display:block;width:100%;height:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;
}
.loader-knife{
  position:absolute;top:50%;left:0;margin-top:-130px;
  width:min(320px,52vw);height:auto;will-change:transform;
  transform:translateX(-140%); /* reposo offscreen; GSAP la posee en la pasada */
}
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
}

/* ============================================================
   ① AZUL · HERO — escena maestra + WORDMARK SANDWICH + llana
   z1 escena · z2 wordmark hueco · z3 llana (journey) · z4 UI
   ============================================================ */
.hero{
  position:relative;height:100svh;min-height:640px;max-height:1080px;
  background:var(--paper);
}
.hero-scene{position:absolute;inset:0;overflow:hidden;z-index:1}
.hero-scene img{
  position:absolute;left:0;top:0;width:100%;height:110%;
  object-fit:cover;object-position:50% 38%;
  will-change:transform;
}
/* z2 · wordmark MENDOZA hueco entre escena y llana (leyes o1/p2) */
.hero-word{
  position:absolute;left:0;right:0;top:calc(43% - .5em);z-index:2;
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:clamp(8.5rem,17vw,15.5rem);
  text-align:center;letter-spacing:-.005em;
  color:transparent;-webkit-text-stroke:2.5px var(--ink);
  opacity:.21; /* 0717-b: dueno pidio el MENDOZA mas presente (.14->.21, trazo 2->2.5) */
  pointer-events:none;user-select:none;will-change:transform;
}
/* z3 · LA LLANA protagonista: bottom sobre la línea de piso (y≈90%) */
.hero-knife{
  position:absolute;left:56%;bottom:10%;z-index:3;
  width:min(42vw,600px);
  will-change:transform;
}
.hero-knife img{width:100%;height:auto;will-change:transform}
/* z4 · copy */
.hero-copy{position:absolute;left:5%;top:41%;width:58%;z-index:4}
.hero-eyebrow{margin-bottom:1.1rem}
.hero-h1{
  font-size:clamp(3.2rem,6.6vw,6.2rem);
  line-height:.93;letter-spacing:-.015em;color:var(--ink);
}
.hero-sub{
  margin-top:1.3rem;max-width:44ch;font-size:1.02rem;color:var(--ink-soft);
}
.hero-ctas{display:flex;align-items:center;gap:.9rem;margin-top:1.7rem;flex-wrap:wrap}
.chip-craft{background:transparent}
/* satélites en gutters (jamás sobre la llana) */
.hero-chip20{position:absolute;top:13%;right:4%;z-index:4}
.hero-pill{
  position:absolute;left:5%;bottom:5%;z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:600;color:var(--ink-soft);
  padding:.55rem 1rem;border-radius:999px;
  background:rgba(247,247,248,.9);border:1px solid var(--hairline);
}
.hero-pill svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:2}
.hero-cue{
  position:absolute;left:50%;bottom:4.5%;margin-left:-14px;z-index:4;
  width:28px;height:46px;border:1.5px solid var(--steel);border-radius:999px;
}
.hero-cue i{
  position:absolute;top:9px;left:50%;margin-left:-2px;
  width:4px;height:8px;border-radius:4px;background:var(--accent);
  animation:cue 2.2s var(--ease-house) infinite;
}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(14px);opacity:.15}}
@media (prefers-reduced-motion:reduce){.hero-cue i{animation:none}}
/* deco: tick-ruler vertical familia D */
.hero-ruler{
  position:absolute;left:2.4%;top:20%;bottom:20%;width:9px;z-index:4;
  border-left:1px solid var(--hairline);
  background:repeating-linear-gradient(to bottom,var(--steel) 0 1px,transparent 1px 26px);
  background-size:6px 100%;background-repeat:no-repeat;
  opacity:.7;pointer-events:none;
}

/* ============================================================
   ② VERDE · INFO/MANIFIESTO + DOCK — el payoff de la metáfora
   ============================================================ */
.info{
  position:relative;background:var(--paper);
  padding-block:clamp(4.5rem,7vw,7.5rem);
  overflow:clip;
}
/* F5: aire hero->info medido 168/170px @1440 (presupuesto k5/r1 96-140) -> pad-top desktop 3.6rem = ~125px; mobile intacto */
@media (min-width:1100px){
  .info{padding-block:3.6rem clamp(4.5rem,7vw,7.5rem)}
}
/* fondo nunca plano (ley q): cotas de stud a susurro */
.info::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(165,165,168,.09) 0 1px,transparent 1px 168px);
}
/* minmax(0,…) OBLIGADO: titulares nowrap dentro de grid (gotcha q5a) */
.info-grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
.info-headrow{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.6rem;align-items:end;
  margin-top:1.2rem;
}
.dock-slot{position:relative;width:200px;min-height:130px}
.dock-slot img{width:190px;height:auto}
/* en desktop con journey, el placeholder cede el sitio al traveler */
body.journey-on .dock-slot img{opacity:0}
.info-headwrap{position:relative;padding:1.4rem 0 1.2rem}
/* la franja-pared del payoff DETRÁS del titular (capa A encintada → B perfecta) */
.payoff{
  position:absolute;inset:-8% -5% -6% -3%;z-index:0;overflow:hidden;
  border-radius:10px;
}
.payoff img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* FPS 0717: el alisado es CORTINA de transform (wrapper overflow + contra-translate),
   no clip-path — el repaint por frame del clip costaba 96-140ms al llegar a la banda */
.payoff-bw{position:absolute;inset:0;overflow:hidden;transform:translateX(-100%)}
.payoff-bw img{transform:translateX(100%)}
.payoff::after{ /* velo AA sobre la foto pálida */
  content:"";position:absolute;inset:0;background:rgba(247,247,248,.34);
}
html.no-journey .payoff-bw{transform:none} /* fallback: pared ya alisada */
html.no-journey .payoff-bw img{transform:none}
html.no-journey .kw-pay{color:var(--accent)}
.info-h{
  position:relative;z-index:1;
  font-size:clamp(2.6rem,5.5vw,5.5rem);color:var(--ink);letter-spacing:-.012em;
}
.kw-pay{color:var(--ink)} /* pinta a --accent en el payoff */
.info-p{max-width:56ch;color:var(--ink-soft);margin-top:1.15rem}
.info-p strong{color:var(--ink);font-weight:600}
.spec-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.spec-chips .chip{background:var(--paper)}
html.no-journey .spec-chips .chip{transform:none}
/* derecha: polaroid tilted + chip del oficio */
.info-right{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.polaroid{
  background:#fff;padding:12px 12px 14px;border:1px solid var(--hairline);
  box-shadow:0 18px 40px rgba(27,28,30,.12);
  transform:rotate(-2deg);max-width:340px;
}
.polaroid.rv{transform:rotate(-2deg) translateY(26px)}
.polaroid.rv.is-in{transform:rotate(-2deg)}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{
  font-size:.78rem;color:var(--steel);padding-top:.6rem;text-align:center;
  letter-spacing:.04em;
}

/* ============================================================
   ③ AMARILLO · BANDA ROOF — C4 foto full-bleed + vidrio
   ============================================================ */
.band{
  position:relative;z-index:5;
  /* 0717-b: clip-path PROBADO y REVERTIDO (195ms, peor que skew: mascara
     no-rectangular en area gigante). El skew se queda. */
  transform:skewY(-1.6deg) scaleX(1.03);
  margin-block:-1.5rem;
  overflow:hidden;background:#141519;
}
.band-un{ /* contra-skew del contenido */
  transform:skewY(1.6deg) scaleX(.9709);
  position:relative;height:max(70vh,520px);max-height:820px;
}
.band-media{position:absolute;inset:0;overflow:hidden}
.band-media img{
  /* 0717-b: sobrescan 112% (el parallax viaja 12%; 128% era raster regalado) */
  position:absolute;left:0;top:-6%;width:100%;height:112%;
  object-fit:cover;object-position:60% 50%;
  /* FPS 0717: SIN will-change — la capa promovida de 1440x1050 subia su textura
     entera en UN frame al entrar (85-165ms medidos); sin promocion los tiles se
     rasterizan por delante del viewport y el scrub sigue compositor (A/B V4: 19.7ms) */
}
.band-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:1.2rem;
}
.band-eyebrow{color:#E9B9B4}
.band-phrase{
  font-size:clamp(2.6rem,5vw,5.6rem);color:var(--paper);
  letter-spacing:-.01em;
  text-shadow:0 1px 2px rgba(20,21,25,.45),0 2px 12px rgba(20,21,25,.3);
}
.band-chip{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);padding:.6rem 1.05rem;border-radius:999px;
  background:rgba(20,21,25,.55);border:1px solid rgba(247,247,248,.3);
  will-change:transform;
}
.band-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* rail de dots blueprint (z3, velocidad propia) */
.band-dots{
  position:absolute;right:5%;top:14%;bottom:14%;width:5px;z-index:2;
  background:repeating-linear-gradient(to bottom,rgba(247,247,248,.5) 0 5px,transparent 5px 30px);
  background-size:5px 100%;background-repeat:no-repeat;border-radius:3px;
  will-change:transform;pointer-events:none;
}

/* ============================================================
   ④ FUCSIA · PROCESO — 4 pasos con numerales-textura (0711-s)
   ============================================================ */
.process{
  position:relative;background:var(--surface);
  padding-block:clamp(4.5rem,7vw,7rem) clamp(4rem,6vw,6rem);
  content-visibility:auto;
  contain-intrinsic-width:auto 1px;contain-intrinsic-height:auto 980px;
  overflow:clip;
}
.process::before{ /* stud-lines del fondo, susurro */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to right,rgba(27,28,30,.045) 0 1px,transparent 1px 120px);
}
.proc-head{position:relative;max-width:720px}
.proc-h{font-size:clamp(2.2rem,4.6vw,4.4rem);color:var(--ink);margin-top:.9rem}
.steps{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.2rem,2.4vw,2.4rem);
  margin-top:clamp(3.2rem,5vw,4.6rem);
}
.step{position:relative;padding-top:clamp(3rem,4.6vw,4.4rem)}
.step-n{ /* numeral hueco DETRÁS de la card: el numeral ES la silueta */
  position:absolute;top:0;left:-.05em;z-index:0;
  font-family:var(--font-d);font-weight:800;font-stretch:75%;line-height:1;
  font-size:min(10vw,128px);
  color:transparent;-webkit-text-stroke:2px rgba(27,28,30,.22);
  pointer-events:none;user-select:none;
}
.step figure{
  position:relative;z-index:1;overflow:hidden;border-radius:8px;
  border:1px solid var(--hairline);background:var(--paper);
  aspect-ratio:4/5;
}
.step figure img{width:100%;height:100%;object-fit:cover}
.step h3{
  position:relative;z-index:1;font-size:1.12rem;letter-spacing:.01em;
  margin-top:1rem;color:var(--ink);
  font-family:var(--font-t);font-weight:600;
}
.step h3 span{color:var(--accent-deep);font-weight:600;margin-right:.4rem}
.step p{position:relative;z-index:1;font-size:.9rem;color:var(--ink-soft);margin-top:.35rem;max-width:26ch}
/* conector hairline entre pasos (scaleX 0→1) */
.step-conn{
  position:absolute;top:clamp(5rem,7.4vw,7rem);right:calc(-1 * clamp(1.2rem,2.4vw,2.4rem));
  width:clamp(1.2rem,2.4vw,2.4rem);height:1px;background:var(--steel);
  transform:scaleX(0);transform-origin:0 50%;z-index:1;
}
.step:last-child .step-conn{display:none}
.proc-close{
  margin-top:clamp(2.6rem,4vw,3.6rem);font-size:1rem;color:var(--ink-soft);
}
.proc-close a{
  color:var(--accent-deep);font-weight:600;border-bottom:1px solid currentColor;
  padding-bottom:2px;transition:color .25s;
}
.proc-close a:hover{color:var(--accent)}

/* ============================================================
   ④.5 · EL ACABADO — espejo INVERTIDO del ② (orden del dueño):
   blanco frío entre la superficie del proceso y el paper del CTA,
   FOTO a la IZQUIERDA (la del ② vive a la derecha)
   ============================================================ */
.finish{
  position:relative;background:#FCFCFD;
  border-top:1px solid var(--hairline);
  padding-block:clamp(4.5rem,7vw,7.5rem);
  content-visibility:auto;
  contain-intrinsic-width:auto 1px;contain-intrinsic-height:auto 780px;
  overflow:clip;
}
.finish::before{ /* luz rasante desde la DERECHA (espejo) + studs a susurro */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 70% at 78% 24%,rgba(255,255,255,.9),transparent 62%),
    repeating-linear-gradient(to right,rgba(27,28,30,.04) 0 1px,transparent 1px 168px);
}
.finish-grid{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr); /* q5a: minmax obligado */
  gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
/* placa-espécimen PLANA y disciplinada (la polaroid del ② va inclinada).
   .plate-w = reveal CSS (.rv) · .plate = scrub GSAP (un solo dueño por nodo) */
.plate-w{justify-self:center;width:min(100%,440px)}
.plate{
  position:relative;width:100%;
  background:#fff;border:1px solid var(--hairline);border-radius:10px;
  box-shadow:0 18px 40px rgba(27,28,30,.10);
  will-change:transform;
}
.plate img{width:100%;height:auto;border-radius:9px 9px 0 0}
.plate figcaption{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.7rem .95rem;border-top:1px solid var(--hairline);
  font-size:.78rem;color:var(--steel);letter-spacing:.04em;
}
.plate figcaption::after{ /* sello del cajetín, familia blueprint */
  content:"";width:8px;height:8px;background:var(--accent);border-radius:2px;flex:0 0 auto;
}
.plate-tab{
  position:absolute;top:14px;left:-9px;z-index:2;
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);background:var(--accent);padding:.34rem .7rem;
  border-radius:3px;box-shadow:0 6px 14px rgba(234,18,29,.28);
}
.finish-h{
  font-size:clamp(2.4rem,4.8vw,4.8rem);color:var(--ink);letter-spacing:-.012em;
  margin-top:1rem;
}
.finish-p{max-width:56ch;color:var(--ink-soft);margin-top:1.15rem}
.finish-p strong{color:var(--ink);font-weight:600}
.finish-list{display:grid;gap:.55rem;margin-top:1.5rem}
.finish-list li{
  position:relative;padding-left:1.4rem;
  font-size:.92rem;font-weight:600;color:var(--ink-soft);letter-spacing:.01em;
}
.finish-list li::before{ /* tick cuadrado del oficio (no chip: el espejo se distingue) */
  content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;
  background:var(--accent);border-radius:2px;
}

/* ============================================================
   ⑤ GRIS · CTA DE CIERRE — paper frío + eco de la llana
   ============================================================ */
.cta{
  position:relative;background:var(--paper);
  padding-block:clamp(5rem,9vw,8.5rem);
  content-visibility:auto;
  contain-intrinsic-width:auto 1px;contain-intrinsic-height:auto 620px;
  overflow:clip;
}
/* atmósfera: charco de luz rasante (estático) + ghost del oficio */
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 24% 30%,rgba(255,255,255,.85),transparent 60%);
}
.cta-ghost{
  position:absolute;left:0;right:0;bottom:-.12em;z-index:0;
  font-family:var(--font-d);font-weight:900;line-height:1;
  font-size:min(11vw,200px);text-align:center;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(165,165,168,.22);
  pointer-events:none;user-select:none;will-change:transform;
}
.cta-inner{position:relative;z-index:2;max-width:860px;text-align:center;margin-inline:auto}
.cta-h{font-size:clamp(2rem,3.6vw,3.4rem);color:var(--ink);margin-top:1rem}
.cta-sub{max-width:56ch;margin:1.1rem auto 0;color:var(--ink-soft)}
.cta-btns{
  display:flex;justify-content:center;align-items:center;gap:.9rem;
  margin-top:2rem;white-space:nowrap;flex-wrap:nowrap;
}
.cta-eco{
  position:absolute;right:6%;bottom:7%;z-index:1;width:min(11vw,150px);
  will-change:transform;pointer-events:none;
}
.cta-ruler{
  position:absolute;right:3%;top:22%;bottom:22%;width:9px;z-index:1;
  border-right:1px solid var(--hairline);
  background:repeating-linear-gradient(to bottom,var(--steel) 0 1px,transparent 1px 26px);
  background-position:right;background-size:6px 100%;background-repeat:no-repeat;
  opacity:.6;pointer-events:none;
}

/* ============================================================
   RESPONSIVE HOME
   ============================================================ */
@media (max-width:1080px){
  .hero-copy{width:64%}
}
@media (max-width:900px){
  .info-grid{grid-template-columns:minmax(0,1fr)}
  .info-headrow{grid-template-columns:120px minmax(0,1fr);gap:1rem}
  .dock-slot{width:120px;min-height:80px}
  .dock-slot img{width:118px}
  body.journey-on .dock-slot img{opacity:1} /* sin journey <901: llana estática */
  .info-right{flex-direction:row;justify-content:center;align-items:flex-end;gap:1.4rem}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
  .step-conn{display:none}
  .finish-grid{grid-template-columns:minmax(0,1fr)}
  .plate-w{order:2;width:min(100%,400px)} /* texto primero en una columna (como el ②) */
}
@media (max-width:760px){
  .hero{min-height:600px}
  .hero-word{font-size:clamp(3.2rem,15vw,8rem);top:calc(31% - .5em)}
  .hero-copy{left:5%;right:5%;width:auto;top:37%}
  .hero-h1{font-size:clamp(2.6rem,11vw,3.4rem)}
  .hero-sub{font-size:.94rem;max-width:38ch}
  .hero-ctas{flex-direction:column;align-items:stretch;max-width:330px;gap:.7rem;margin-top:1.3rem}
  .hero-ctas .chip-craft{align-self:flex-start}
  .hero-knife{left:auto;right:2%;bottom:7%;width:min(58vw,300px)}
  .hero-chip20{top:11%;right:4%;font-size:.66rem;padding:.42rem .7rem}
  .hero-pill{bottom:3.5%;left:4%}
  .hero-cue{display:none}
  .hero-ruler{display:none}
  .band{margin-block:-1rem}
  .band-un{height:max(62vh,480px)}
  .band-phrase{
    text-shadow:0 1px 2px rgba(20,21,25,.5),0 2px 10px rgba(20,21,25,.35);
  }
  .band-dots{right:3.5%}
  .cta-eco{display:none} /* F5: colision real eco<->botones @390-560 medida (97x51px); mismo fix que contact */
  .cta-ruler{display:none}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;row-gap:2.4rem}
  .step p{max-width:none}
  .cta-btns{flex-direction:column;white-space:normal;align-items:stretch;max-width:330px;margin-inline:auto}
  .info-headrow{grid-template-columns:minmax(0,1fr)}
  .dock-slot{display:none}
}