/* =====================================================================
   SABAOTH FQ INSULATION LLC - css/about.css
   Pagina ABOUT (EN /about/  +  ES /es/nosotros/) - la MISMA hoja.
   V3 "THE SILVER STANDARD" - depende de css/base.css (tokens, nav,
   footer, .wrap, .band-head, .h2/.h3, .eyebrow, .copy, .plate, .rv,
   .hl, [data-pop], banner de interior).

   Secciones (cap. 13 Parte II §12-§15):
     banner   - banner-interior + breadcrumb COMPLETO (0720-a #10)
     story    - historia 20 anos + placa cuadrilla + stats
     credo    - seguridad / eficiencia / precision (filas indexadas)
     crew     - cuadrilla en placas "Real work" (fotos con chalecos
                hi-vis naranja -> badge NEUTRO, regla naranja de
                ASSETS-GENERADOS §5)
     process  - 4 pasos + placa de materiales
     anatomy  - etapa PENULTIMA de valor: laminas de catalogo sobre
                tarjeta PAPEL (jamas texto naranja sobre claro)
     ab-cta   - CTA de cierre sobre cta-band (scrim YA horneado)

   Motion: los reveals los conduce js/main.js (.rv / .hl / data-pop).
   Aqui solo transiciones de COLOR (GSAP es el unico dueno del transform).
   ===================================================================== */

/* ---------------------------------------------------------------------
   0 - MASCARA .hl CON AIRE PARA DIACRITICOS
   La tilde de la Enye y los acentos de Anton sobresalen del line-box
   (line-height .96/1.02) y el overflow:hidden del .hl los decapitaba
   ("ANOS" en el H1 de /es/nosotros/). El padding-top abre la ventana
   hacia arriba y el margin negativo devuelve el layout a su sitio; el
   estado oculto del reveal (yPercent:112) sigue quedando fuera de la
   ventana porque 112% > 100% + .12em.
   --------------------------------------------------------------------- */
.banner-h1 .hl, .h2 .hl { padding-top: .14em; margin-top: -.14em; }

/* ---------------------------------------------------------------------
   1 - RITMO COMPARTIDO
   --------------------------------------------------------------------- */
.ab { padding: clamp(76px, 9vw, 132px) 0; background: var(--ink); }
.ab-alt {
  background: var(--ink2);
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
}

/* variantes de placa de esta pagina */
.plate--crew { aspect-ratio: 3 / 2; }
.plate--tall { aspect-ratio: 3 / 4; }
.plate--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.plate--proc { aspect-ratio: 4 / 3; }

/* regla naranja (ASSETS §5): fotos con chalecos hi-vis -> badge neutro */
.plate--neutral b { background: var(--paper); color: var(--ink); }

/* ---------------------------------------------------------------------
   2 - STORY
   --------------------------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.story-side .copy { max-width: 46ch; }
.story-stats {
  margin-top: clamp(30px, 3.6vw, 48px);
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat { padding: 22px 18px 6px 0; }
.stat + .stat { border-left: 1px solid var(--hair-soft); padding-left: 18px; }
.stat b {
  display: block;
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(38px, 4vw, 56px); line-height: 1;
  letter-spacing: .02em; color: var(--paper);
}
.stat b .plus { color: var(--acc); }
.stat span {
  display: block; margin-top: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mut);
}

/* ---------------------------------------------------------------------
   3 - CREDO (filas indexadas, lenguaje FIND: numeral + hairlines)
   --------------------------------------------------------------------- */
.credo { border-top: 1px solid var(--hair); }
.credo-item {
  display: grid;
  grid-template-columns: clamp(56px, 7vw, 110px) minmax(0, .62fr) minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--hair-soft);
}
.credo-num {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1;
  color: var(--dim);
  transition: color .25s var(--ease);
}
.credo-item:hover .credo-num { color: var(--acc); }
.credo-item .copy { max-width: 58ch; }

/* ---------------------------------------------------------------------
   4 - CREW (2 placas verticales + 1 panoramica)
   --------------------------------------------------------------------- */
.crew-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* ---------------------------------------------------------------------
   5 - PROCESS (pasos numerados + placa de materiales)
   --------------------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: start;
}
.steps { border-top: 1px solid var(--hair); }
.step {
  display: grid;
  grid-template-columns: clamp(48px, 5.4vw, 84px) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 28px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--hair-soft);
}
.step-num {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.06;
  color: var(--acc);
}
.step-body .h3 { margin-bottom: 8px; }
.step-body .copy { max-width: 52ch; }
.process-side .cap-note {
  margin-top: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut);
}

/* ---------------------------------------------------------------------
   6 - ANATOMY - laminas de catalogo sobre PAPEL
   (texto tinta / gris sobre claro; el naranja aqui es solo un filete)
   --------------------------------------------------------------------- */
.lam-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.lam-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border-radius: 6px; overflow: hidden;
}
.lam-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--acc);
}
.lam-card img { width: 100%; height: auto; }
.lam-card--cutaway img,
.lam-card--elbow img { flex: 1 1 auto; min-height: 0; height: 100%; object-fit: cover; }
.lam-layers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(10, 10, 11, .14);
}
.lam-layers li { padding: 16px 14px 18px; border-left: 1px solid rgba(10, 10, 11, .08); }
.lam-layers li:first-child { border-left: 0; }
.lam-layers b {
  display: block;
  font-family: var(--disp); font-weight: 400;
  font-size: 20px; line-height: 1; color: var(--ink);
}
.lam-layers span {
  display: block; margin-top: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #585858;
}
.lam-cap {
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 18px 16px;
  border-top: 1px solid rgba(10, 10, 11, .08);
}
.lam-cap span {
  font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: #585858;
}
.lam-cap b {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}

/* ---------------------------------------------------------------------
   7 - CTA DE CIERRE (cta-band: scrim 0.55-0.70 YA horneado en el pixel)
   --------------------------------------------------------------------- */
.ab-cta {
  position: relative; overflow: hidden;
  padding: clamp(96px, 13vw, 168px) 0;
  background: var(--ink3);
}
.ab-cta .cta-media { position: absolute; inset: 0; }
.ab-cta .cta-media img,
.ab-cta .cta-media picture {
  width: 100%; height: 100%;
}
.ab-cta .cta-media img { object-fit: cover; object-position: 50% 42%; }
.ab-cta .cta-inner { position: relative; z-index: 2; }
.ab-cta .h2 { max-width: 14ch; text-shadow: 0 3px 30px rgba(0, 0, 0, .55); }
.ab-cta .copy { margin-top: 18px; color: var(--soft); }
.ab-cta .cta-row { margin-top: 30px; }

/* ---------------------------------------------------------------------
   8 - RESPONSIVE (390 / 768 / 1440 / 1920 / 2560; todo vw con techo px)
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-side .copy { max-width: 58ch; }
  .process-grid { grid-template-columns: 1fr; }
  .credo-item {
    grid-template-columns: clamp(48px, 8vw, 72px) minmax(0, 1fr);
  }
  .credo-item .h3 { grid-column: 2; }
  .credo-item .copy { grid-column: 2; margin-top: 6px; }
  .credo-num { grid-row: 1 / span 2; }
}

@media (max-width: 900px) {
  .lam-grid { grid-template-columns: 1fr; }
  .lam-card--elbow img { height: auto; flex: 0 0 auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .ab { padding: 64px 0 72px; }
  .crew-grid { grid-template-columns: 1fr; }
  .plate--tall { aspect-ratio: 4 / 5; }
  .plate--wide { aspect-ratio: 16 / 10; }
  .story-stats { grid-template-columns: 1fr; border-top: 0; }
  .stat { border-top: 1px solid var(--hair-soft); padding: 16px 0 14px; }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .lam-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lam-layers li:nth-child(3) { border-left: 0; border-top: 1px solid rgba(10, 10, 11, .08); }
  .lam-layers li:nth-child(4) { border-top: 1px solid rgba(10, 10, 11, .08); }
  .ab-cta { padding: 84px 0 96px; }
  .ab-cta .h2 { max-width: none; }
}