/* =====================================================================
   SABAOTH FQ INSULATION LLC - home.css
   V3 "THE SILVER STANDARD" - solo la portada (/ y /es/).
   El hero, el loader, la sala .room, las placas .plate y el footer viven
   en base.css (piel v3). Aqui viven los bloques propios del Home:

     .manifest  (2)  editorial partida "plant room dressed in silver"
     .sysdex    (3)  divisor: credo + indice estatico de 11 sistemas
     .process   (4)  site walk -> scope -> install -> seal + laminas
     .manifest--flip (4b) SECCION ESPEJO 0720-b (invertida, acento plata)
     .close     (5)  CTA de cierre sobre cta-band (scrim horneado)

   Reglas: todo vw con techo px - compositor-only (los transform los pone
   GSAP via .rv / .hl / [data-pop] de main.js) - cero transition:transform
   en nodos GSAP - hairlines del mundo - UN acento #FE7300.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ACENTO ALTERNO DE LA CASA: plata liquida (para la seccion espejo)
   --------------------------------------------------------------------- */
.em-silver, .h2 em.em-silver { font-style:normal; color:var(--soft); }
@supports (-webkit-background-clip:text) or (background-clip:text) {
  .em-silver, .h2 em.em-silver {
    background:linear-gradient(178deg,#EDEDEC 8%,#B9B9B7 52%,#8E8E8C 94%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}

/* ---------------------------------------------------------------------
   BLOQUE 2 / 4b - EDITORIAL PARTIDA (.manifest) + ESPEJO (--flip)
   --------------------------------------------------------------------- */
.manifest {
  position:relative; background:var(--ink); overflow:clip;
  padding:clamp(84px,10vw,148px) var(--gut) clamp(72px,8vw,120px);
}
.mf-grid {
  position:relative; z-index:2;
  width:min(100%,var(--maxw)); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1.08fr;
  gap:clamp(30px,4.6vw,72px); align-items:center;
}
.mf-copy .eyebrow { margin-bottom:22px; }
.mf-copy .h2 { margin-bottom:26px; }
.mf-copy .copy { margin-bottom:16px; }
.mf-act {
  display:flex; align-items:center; gap:clamp(18px,2.4vw,30px);
  flex-wrap:wrap; margin-top:30px;
}

.mf-panel { position:relative; }
.mf-panel .room { height:min(56vh,560px); min-height:360px; }
.mf-sticker {
  position:absolute; top:-16px; right:clamp(14px,2vw,28px); z-index:3;
  background:var(--ink3); border-color:var(--hair);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}

/* placa grande del espejo: la foto real en marco "REAL WORK" */
.mf-plate { aspect-ratio:4/3; }

/* espejo: el sticker se va a la IZQUIERDA para no pisar el badge
   "Real work" (top-right de .plate) - colision cazada con ojos */
.manifest--flip .mf-sticker { right:auto; left:clamp(14px,2vw,28px); }

/* ghost numeral tono-sobre-tono (densidad 0702-d) */
.mf-ghost {
  position:absolute; z-index:1; top:clamp(8px,2vw,28px); right:calc(var(--gut) * .4);
  font-family:var(--disp); font-weight:400; line-height:1;
  font-size:min(17vw,240px); color:#121215;
  pointer-events:none; user-select:none;
}
.manifest--flip .mf-ghost { right:auto; left:calc(var(--gut) * .4); top:auto; bottom:clamp(8px,2vw,28px); }

/* espejo: panel a la IZQUIERDA, copy a la derecha, superficie alterna */
.manifest--flip { background:var(--ink2); border-top:1px solid var(--hair-soft); }
.manifest--flip .mf-grid { grid-template-columns:1.08fr 1fr; }

/* placas REAL WORK dentro del flujo del manifest */
.manifest .plates {
  position:relative; z-index:2;
  width:min(100%,var(--maxw)); margin-inline:auto;
  margin-top:clamp(20px,2.6vw,34px);
}

/* ---------------------------------------------------------------------
   BLOQUE 3 - DIVISOR .sysdex (credo + indice de 11 sistemas, estatico)
   --------------------------------------------------------------------- */
.sysdex {
  position:relative; background:var(--ink2); overflow:clip;
  border-top:1px solid var(--hair-soft);
  padding:clamp(76px,9vw,128px) var(--gut) clamp(84px,9vw,132px);
}
.sd-head {
  width:min(100%,var(--maxw)); margin-inline:auto;
  display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,3.5vw,56px);
  align-items:end; margin-bottom:clamp(34px,4vw,54px);
}
.sd-head .eyebrow { margin-bottom:20px; }
.sd-note {
  font-size:13.5px; line-height:1.7; color:var(--mut);
  max-width:34ch; justify-self:end; text-align:right;
  padding-bottom:8px;
}
.sd-list {
  width:min(100%,var(--maxw)); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,6vw,110px); row-gap:0;
  border-top:1px solid var(--hair);
}
.sd-item {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; gap:clamp(14px,1.6vw,22px);
  padding:clamp(13px,1.5vw,19px) 2px;
  border-bottom:1px solid var(--hair-soft);
}
.sd-item i {
  font-style:normal; font-size:11px; font-weight:600;
  letter-spacing:.22em; color:var(--mut);
}
.sd-item span {
  font-family:var(--disp); font-weight:400;
  font-size:clamp(19px,1.9vw,28px); line-height:1.1;
  text-transform:uppercase; letter-spacing:.012em; color:var(--paper);
  transition:color .25s var(--ease);
}
.sd-item em {
  font-style:normal; font-size:16px; color:var(--acc);
  opacity:0; transition:opacity .25s var(--ease);
}
.sd-item:hover span, .sd-item:focus-visible span { color:var(--acc-hi); }
.sd-item:hover em, .sd-item:focus-visible em { opacity:1; }

/* ---------------------------------------------------------------------
   BLOQUE 4 - PROCESO .process (laminas de catalogo + 4 pasos + riel)
   --------------------------------------------------------------------- */
.process {
  position:relative; background:var(--ink); overflow:clip;
  border-top:1px solid var(--hair-soft);
  padding:clamp(80px,9vw,132px) var(--gut) clamp(88px,10vw,140px);
}
.pr-head {
  width:min(100%,var(--maxw)); margin-inline:auto;
  margin-bottom:clamp(36px,4.4vw,60px);
}
.pr-head .eyebrow { margin-bottom:20px; }
.pr-grid {
  width:min(100%,var(--maxw)); margin-inline:auto;
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(34px,5vw,84px); align-items:start;
}

/* lamina de catalogo: hoja clara con banda de rotulo tinta */
.pr-visual { position:relative; }
.lam {
  border-radius:6px; overflow:hidden; background:#F2F2F0;
  border:1px solid var(--hair-soft);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lam img { width:100%; height:auto; }
.lam figcaption {
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:14px; padding:12px 16px; background:var(--ink3);
}
/* la lamina chica SI reparte sus dos rotulos (no tiene nada encima) */
.lam-sm figcaption { justify-content:space-between; }
.lam figcaption span {
  font-size:9.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mut); white-space:nowrap;
}
.lam figcaption b {
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); text-align:right;
}
.lam-sm {
  position:absolute; z-index:3;
  right:clamp(-38px,-2.4vw,-24px); bottom:clamp(-48px,-3.2vw,-32px);
  width:clamp(160px,15vw,225px);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.lam-sm figcaption { padding:9px 12px; }
.lam-sm figcaption b { font-size:9.5px; }

/* pasos con riel que se llena (el scrub vive en js/home.js) */
.pr-steps { position:relative; padding-left:clamp(22px,2.4vw,34px); }
.pr-rail {
  position:absolute; left:0; top:10px; bottom:10px; width:2px;
  background:var(--hair-soft); display:block;
}
.pr-fill {
  position:absolute; inset:0; display:block;
  background:linear-gradient(180deg,var(--acc) 0%,var(--acc) 55%,#B9B9B7 100%);
  transform-origin:top center;
}
.step {
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(16px,1.8vw,26px); align-items:start;
  padding:clamp(20px,2.3vw,30px) 0;
  border-bottom:1px solid var(--hair-soft);
}
.step:last-child { border-bottom:0; }
.step > b {
  font-family:var(--disp); font-weight:400; line-height:1;
  font-size:clamp(30px,3.2vw,46px); color:var(--soft);
}
@supports (-webkit-background-clip:text) or (background-clip:text) {
  .step > b {
    background:linear-gradient(178deg,#EDEDEC 8%,#B9B9B7 52%,#8E8E8C 94%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.step .h3 { margin-bottom:8px; }
.step p { font-size:14px; line-height:1.65; color:#BDBDBB; max-width:44ch; }

/* ---------------------------------------------------------------------
   BLOQUE 5 - CTA DE CIERRE .close (55-75vh, jamas 100)
   --------------------------------------------------------------------- */
.close {
  position:relative; overflow:hidden; background:var(--ink3);
  min-height:min(70vh,720px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(84px,10vw,128px) var(--gut);
}
.close-media { position:absolute; inset:0; z-index:0; }
.close-media picture, .close-media img {
  width:100%; height:100%; object-fit:cover; object-position:50% 38%;
}
.close-inner {
  position:relative; z-index:2; text-align:center;
  max-width:860px; margin-inline:auto;
}
.close-inner .eyebrow { justify-content:center; margin-bottom:22px; }
.close-sub {
  margin:22px auto 0; max-width:52ch;
  font-size:15px; line-height:1.7; color:var(--soft);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.close .cta-row { justify-content:center; margin-top:32px; }
.close .h2 { text-shadow:0 3px 30px rgba(0,0,0,.55); }

/* ---------------------------------------------------------------------
   RESPONSIVE (390 / 768 / 1440 / 1920 / 2560 - cero overflow)
   --------------------------------------------------------------------- */
@media (max-width:1080px) {
  .mf-grid, .manifest--flip .mf-grid { grid-template-columns:1fr; gap:34px; }
  .manifest--flip .mf-panel { order:2; }   /* en columna el copy manda */
  .manifest--flip .mf-copy { order:1; }
  .mf-panel .room { height:44vh; min-height:320px; }
  .sd-head { grid-template-columns:1fr; align-items:start; }
  .sd-note { justify-self:start; text-align:left; padding-bottom:0; }
  .pr-grid { grid-template-columns:1fr; }
  /* en columna la lamina chica flota SOBRE la foto (no sobre el rotulo)
     y pierde su figcaption: a este ancho no cabe en una linea */
  .lam-sm { right:clamp(10px,3vw,26px); bottom:56px; width:clamp(140px,20vw,180px); }
  .lam-sm figcaption { display:none; }
  .pr-steps { margin-top:48px; }
}
@media (max-width:760px) {
  .sd-list { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .manifest { padding:64px var(--gut) 60px; }
  .sysdex { padding:60px var(--gut) 68px; }
  .process { padding:60px var(--gut) 72px; }
  .mf-ghost { font-size:min(26vw,120px); }
  .mf-sticker { top:auto; bottom:-14px; right:12px; }
  .manifest--flip .mf-sticker { left:auto; right:12px; }
  .mf-act { gap:16px; }
  .mf-panel .room { height:36vh; min-height:260px; }
  .lam-sm { width:clamp(104px,28vw,132px); bottom:52px; right:10px; }
  .step p { max-width:none; }
  .close { min-height:0; padding:78px var(--gut) 84px; }
  .close-sub { font-size:14px; }
  .close .cta-row { flex-direction:column; gap:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .sd-item em { opacity:1; }
}