/* ============================================================
   SUBPÁGINA · VIDRIO DE OBRA (B2B) — componentes propios
   Reutiliza ../styles.css (sistema vfinal · vidrio ahumado).
   ============================================================ */

/* la píldora pide más ancho: marca + switcher + nav + WhatsApp */
.top{ max-width:880px; }

/* CTA doble en el hero (primario WA + secundario de línea) */
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---- Servicios · lista editorial numerada ---- */
.svcs{ border-top:1px solid oklch(95% 0.006 200 / 0.3); }
.svc{ display:grid; grid-template-columns:54px 1fr 1.1fr; gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:clamp(18px,2.4vw,26px) 0; border-bottom:1px solid var(--hair);
  transition:background var(--dur) var(--ease); }
.svc:hover{ background:var(--bg-2); }
.svc__n{ font-family:var(--mono); font-size:13px; color:var(--accent); }
.svc__name{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,27px); }
.svc__desc{ color:var(--ink-2); font-size:14.5px; line-height:1.5; }

/* ---- Oficio · fabricación propia ---- */
.oficio{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,80px); align-items:center; }
.oficio__fig{ aspect-ratio:5/4; border-radius:var(--radius); overflow:hidden; background:var(--bg-2); margin:0; }
.oficio__fig img{ width:100%; height:100%; object-fit:cover; }
.oficio h2{ font-size:clamp(28px,3.6vw,48px); }
.oficio__txt > p{ margin-top:18px; color:var(--ink-2); font-size:clamp(15px,1.3vw,17px); line-height:1.55; max-width:46ch; }

/* ---- Clientes ---- */
.clients{ text-align:center; }
.clients > p{ font-family:var(--mono); font-size:12px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px; }
.clients h3{ margin:0 auto; font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.9vw,34px); max-width:26ch; line-height:1.18; }
.clients h3 em{ font-style:normal; color:var(--accent); }

@media (max-width:900px){
  .oficio{ grid-template-columns:1fr; } .oficio__fig{ order:-1; }
  .svc{ grid-template-columns:40px 1fr; } .svc__desc{ grid-column:2; }
}