/* =========================================================
   M&A WORLDWIDE — Catálogo de Cerca WPC
   Print-ready A4 portrait · brand-aligned
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#F6F3EE; --surface:#fff; --surface-2:#FBF9F5;
  --ink:#1C1A17; --ink-soft:#4A453E; --muted:#8A8378;
  --line:#E4DED4; --line-2:#D7CFC2;
  --accent:#E0641F; --accent-deep:#C5520F; --accent-tint:#FBEBDF;
  --paper:#0E0D0C;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:#5a554d;
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }

/* ---------- Page shell ---------- */
.doc{ display:flex; flex-direction:column; align-items:center; gap:26px; padding:34px 16px 70px; }
.page{
  width:210mm; height:297mm;
  background:var(--bg);
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.32);
  color:var(--ink);
  display:flex; flex-direction:column;
}
.page__body{ flex:1; display:flex; flex-direction:column; padding:18mm 16mm 15mm; min-height:0; }
.page--pad-lg .page__body{ padding:20mm 18mm 15mm; }

/* running header */
.rh{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); padding-bottom:9px; border-bottom:1px solid var(--line);
}
.rh .brand-mini{ font-weight:700; letter-spacing:.34em; color:var(--ink); }
.rh .amp{ color:var(--accent-deep); }

/* page footer */
.pf{
  position:absolute; left:16mm; right:16mm; bottom:9mm;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-family:var(--mono); font-size:7.4px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding-top:8px; border-top:1px solid var(--line);
}
.pf b{ color:var(--ink-soft); font-weight:700; }
.pf .pf__pg{ color:var(--accent-deep); font-weight:700; letter-spacing:.16em; }

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700; margin:0;
}
.display{ font-family:var(--serif); font-weight:600; line-height:1.0; letter-spacing:-.01em; margin:0; }
.kicker{ font-family:var(--mono); font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.lead{ font-size:11.5px; line-height:1.62; color:var(--ink-soft); }
.sec-title{ font-family:var(--serif); font-weight:600; font-size:34px; line-height:1; margin:.12em 0 0; letter-spacing:-.01em; }
.body-sm{ font-size:10px; line-height:1.6; color:var(--ink-soft); }
.mono{ font-family:var(--mono); }

.section-intro{ margin:14px 0 18px; }
.section-intro .eyebrow{ margin-bottom:9px; }

/* ---------- Cover ---------- */
.cover{ background:var(--paper); color:#F4EFE7; }
.cover .cover__inner{ position:absolute; inset:0; display:flex; flex-direction:column; }
.cover__photo{ position:absolute; inset:0; }
.cover__photo img{ width:100%; height:100%; object-fit:cover; opacity:.42; filter:saturate(.92) contrast(1.02); }
.cover__photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,13,12,.72) 0%, rgba(14,13,12,.34) 38%, rgba(14,13,12,.78) 100%); }
.cover__grid{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; padding:20mm 18mm; }
.cover__top{ display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--mono); font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:#cdbfa9; }
.cover__brand{ font-weight:700; letter-spacing:.46em; color:#fff; font-size:13px; }
.cover__brand .amp{ color:var(--accent); }
.cover__center{ margin-top:auto; }
.cover__center .display{ color:#fff; font-size:78px; line-height:.92; }
.cover__center .display em{ font-style:italic; font-weight:500; color:#E9B488; }
.cover__rule{ width:62px; height:3px; background:var(--accent); margin:20px 0 16px; }
.cover__sub{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:#e7dccb; }
.cover__meta{ margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18);
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.cover__meta .cm-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#cdbfa9; line-height:1.7; }
.cover__meta .cm-tag b{ color:#fff; font-weight:700; }

/* ---------- Feature badges ---------- */
.badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:auto; }
.badge{ border:1px solid var(--line-2); background:var(--surface); border-radius:6px; padding:12px 12px 13px; }
.badge .bi{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; margin-bottom:9px;
  border:1.4px solid var(--accent); border-radius:50%; }
.badge .bi svg{ width:14px; height:14px; stroke:var(--accent-deep); stroke-width:1.7; fill:none; }
.badge b{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.01em; }
.badge span{ display:block; font-size:8.6px; color:var(--muted); line-height:1.42; margin-top:3px; }

/* ---------- Spec table ---------- */
.spec{ width:100%; border-collapse:collapse; font-size:9.6px; }
.spec td{ padding:6.5px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.spec td:first-child{ font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); width:46%; }
.spec td:last-child{ color:var(--ink); font-weight:600; text-align:right; }

/* ---------- Two-col material ---------- */
.matgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:16mm; flex:1; min-height:0; }
.matgrid p{ font-size:10.4px; line-height:1.62; color:var(--ink-soft); margin:0 0 9px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:7px; padding:14px 15px; }
.panel h4{ font-family:var(--mono); font-size:8.4px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 10px; font-weight:700; }

/* ---------- TOC ---------- */
.toc{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin-top:4px; }
.toc__item{ display:flex; align-items:baseline; gap:9px; padding:6.5px 0; border-bottom:1px dotted var(--line-2); font-size:10px; }
.toc__num{ font-family:var(--mono); font-size:8.5px; color:var(--accent-deep); font-weight:700; min-width:18px; }
.toc__dot{ flex:1; border-bottom:1px dotted var(--line-2); transform:translateY(-3px); }
.toc__t{ color:var(--ink-soft); }

/* how-to-read rows */
.htr{ display:flex; flex-direction:column; gap:0; }
.htr__row{ display:grid; grid-template-columns:96px 1fr; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); }
.htr__row b{ font-family:var(--mono); font-size:8.6px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); }
.htr__row span{ font-size:10px; color:var(--ink-soft); line-height:1.5; }

/* ---------- Product / profile cards ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pcard{ background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.pcard__fig{ position:relative; background:var(--surface-2); aspect-ratio:16/10; overflow:hidden; }
.pcard__fig img{ width:100%; height:100%; object-fit:cover; }
.pcard__code{ position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:8px; font-weight:700;
  letter-spacing:.08em; background:var(--ink); color:#fff; padding:3px 7px; border-radius:3px; }
.pcard__body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:4px; }
.pcard__name{ font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.04; }
.pcard__dim{ font-family:var(--mono); font-size:8.6px; letter-spacing:.04em; color:var(--accent-deep); font-weight:700; }
.pcard__desc{ font-size:9px; color:var(--muted); line-height:1.45; }

/* cross-section diagram (simple, CSS) */
.xsec{ display:flex; align-items:center; justify-content:center; padding:14px; background:repeating-linear-gradient(45deg,#fff,#fff 7px,#FBF8F2 7px,#FBF8F2 14px); }
.xsec svg{ width:88%; height:auto; }
.xsec .stroke{ stroke:var(--ink); stroke-width:2.2; fill:#EDE6DB; }
.xsec .hollow{ fill:var(--bg); stroke:var(--line-2); stroke-width:1.2; }
.xsec .dim{ stroke:var(--accent-deep); stroke-width:1; fill:none; }
.xsec .dimtxt{ font-family:var(--mono); font-size:11px; fill:var(--accent-deep); font-weight:700; }

/* ---------- Colors ---------- */
.swgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.swgrid--6{ grid-template-columns:repeat(3,1fr); }
.sw{ border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--surface); }
.sw__chip{ height:88px; position:relative; background:var(--c,#888); }
.sw__chip::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -10px 18px rgba(0,0,0,.10); }
.sw__chip.wood{ background:
  repeating-linear-gradient(89deg, rgba(255,255,255,.06) 0 2px, rgba(0,0,0,.06) 2px 3px, transparent 3px 10px),
  repeating-linear-gradient(91deg, rgba(0,0,0,.05) 0 14px, transparent 14px 34px),
  linear-gradient(180deg, color-mix(in srgb, var(--c) 84%, white), var(--c) 65%, color-mix(in srgb, var(--c) 88%, black)); }
.sw__chip.grey{ background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.05) 1px 2px, transparent 2px 8px),
  linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, white), var(--c)); }
.sw__body{ padding:9px 11px 11px; }
.sw__name{ font-size:11px; font-weight:700; letter-spacing:.01em; }
.sw__code{ font-family:var(--mono); font-size:7.8px; letter-spacing:.1em; color:var(--muted); margin-top:2px; }
.sw--wood .sw__chip{ background-blend-mode:multiply; }

.compact-sw{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.compact-sw .sw__chip{ height:62px; }
.compact-sw .sw__body{ padding:7px 9px 8px; }
.compact-sw .sw__name{ font-size:9.6px; }

/* ---------- System / anatomy ---------- */
.sys{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sys__col{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 15px; display:flex; flex-direction:column; }
.sys__col h4{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0 0 3px; }
.sys__tag{ font-family:var(--mono); font-size:7.8px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; }
.sys__col p{ font-size:9.4px; color:var(--ink-soft); line-height:1.55; margin:9px 0 11px; }
.partlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.partlist li{ display:flex; gap:9px; align-items:baseline; padding:5px 0; border-top:1px solid var(--line); font-size:9px; }
.partlist li:first-child{ border-top:0; }
.partlist .pn{ font-family:var(--mono); font-size:7.6px; color:var(--accent-deep); font-weight:700; min-width:20px; }
.partlist b{ font-weight:700; color:var(--ink); }
.partlist span{ color:var(--muted); }

/* ---------- Applications ---------- */
.apps{ display:grid; grid-template-columns:1fr 1fr; gap:12px; flex:1; min-height:0; }
.appcard{ position:relative; border-radius:8px; overflow:hidden; background:var(--surface-2); }
.appcard img{ width:100%; height:100%; object-fit:cover; }
.appcard__cap{ position:absolute; left:0; right:0; bottom:0; padding:24px 14px 13px; color:#fff;
  background:linear-gradient(180deg,transparent,rgba(14,13,12,.82)); }
.appcard__cap b{ display:block; font-family:var(--serif); font-size:19px; font-weight:600; line-height:1; }
.appcard__cap span{ display:block; font-size:8.8px; color:#e3d9ca; margin-top:5px; line-height:1.4; }

/* ---------- Install steps ---------- */
.steps{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 15px; position:relative; }
.step__n{ font-family:var(--serif); font-size:30px; font-weight:600; color:var(--accent); line-height:1; }
.step h4{ font-size:12px; font-weight:700; margin:6px 0 6px; }
.step p{ font-size:9px; color:var(--ink-soft); line-height:1.5; margin:0; }
.step__tip{ margin-top:9px; padding-top:8px; border-top:1px dotted var(--line-2); font-size:8.2px; color:var(--muted); line-height:1.45; }
.step__tip b{ font-family:var(--mono); font-size:7px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); display:block; margin-bottom:3px; }

/* ---------- Contact ---------- */
.contact{ background:var(--paper); color:#F4EFE7; }
.contact .page__body{ padding:20mm 18mm 0; }
.contact .rh{ border-color:rgba(255,255,255,.16); color:#bdb1a0; }
.contact .rh .brand-mini{ color:#fff; }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16mm; margin-top:18px; flex:1; }
.contact h2{ font-family:var(--serif); font-size:44px; font-weight:600; line-height:1; color:#fff; margin:0 0 18px; }
.cblock{ margin-bottom:18px; }
.cblock .cl{ font-family:var(--mono); font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:#b09a82; margin-bottom:6px; }
.cblock .cv{ font-size:12px; color:#F4EFE7; line-height:1.5; }
.cblock .cv b{ color:#fff; }
.contact__photo{ border-radius:9px; overflow:hidden; }
.contact__photo img{ width:100%; height:100%; object-fit:cover; }
.contact__cta{ position:absolute; left:18mm; right:18mm; bottom:14mm; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16); display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#bdb1a0; }
.contact__cta b{ color:var(--accent); }

/* small helpers */
.note{ font-size:8.4px; color:var(--muted); font-style:italic; margin-top:10px; }
.flexfill{ flex:1; }
.mt-auto{ margin-top:auto; }

/* ---------- Screen-only toolbar ---------- */
.bar{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; gap:10px; align-items:center;
  padding:9px 16px; background:rgba(20,18,16,.9); backdrop-filter:blur(8px); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.bar a{ color:#fff; text-decoration:none; opacity:.7; }
.bar a:hover{ opacity:1; }
.bar .sp{ flex:1; }
.bar b{ letter-spacing:.2em; text-transform:uppercase; font-size:10px; }
.bar .accent{ color:var(--accent); }
.doc{ padding-top:58px; }

@media print{
  *,*::before,*::after{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  html,body{ background:#fff; }
  .bar{ display:none; }
  .doc{ padding:0; gap:0; }
  .page{ box-shadow:none; width:210mm; height:297mm; page-break-after:always; break-after:page; break-inside:avoid; }
  .page:last-child{ page-break-after:auto; break-after:auto; }
  @page{ size:A4 portrait; margin:0; }
}