/* ──────────────────────────────────────────────────────────────
   collateral.css — Shared print collateral (tríptico, carpeta,
   tarjetas). Same editorial system as brochure.css.
   ──────────────────────────────────────────────────────────── */

:root{
  --co-paper:    #f3f1ed;
  --co-paper-2:  #ebe7df;
  --co-ink:      #0a0a0a;
  --co-ink-2:    #1a1a1a;
  --co-mute:     #6a655d;
  --co-line:     #d8d2c4;
  --co-line-2:   #c8c2b3;
  --co-coral:    #C24648;
  --co-coral-d:  #A53A3C;
  --co-sans:     'Inter', system-ui, sans-serif;
  --co-mono:     'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body{
  margin: 0; padding: 0;
  background: #1a1814;
  font-family: var(--co-sans);
  color: var(--co-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Toolbar (screen only) ─────────────────────────────── */
.co-toolbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #0a0a0a; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  font-family: var(--co-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid #2a2a2a;
}
.co-toolbar a, .co-toolbar button{
  font-family: var(--co-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  padding: 8px 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.co-toolbar button.primary{ background: var(--co-coral); border-color: var(--co-coral); }
.co-toolbar button:hover, .co-toolbar a:hover{ border-color: #fff; }
.co-toolbar .tools{ display:flex; gap:10px; }
.co-toolbar .meta{ color: rgba(255,255,255,.55); display:flex; gap: 18px; }
.co-toolbar .meta b{ color: #fff; font-weight: 600; }

.co-stage{
  padding: 84px 0 64px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.co-caption{
  font: 600 10px/1.4 var(--co-mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  text-align: center;
  max-width: 80ch; margin: 0 auto;
}
.co-caption b{ color: rgba(255,255,255,.85); font-weight: 600; }
.co-caption .ln{ display:block; margin-top: 4px; color: rgba(255,255,255,.4); }

/* ────────────────────────────────────────────────
   Type system (matches brochure)
   ──────────────────────────────────────────────── */
.co-mono{ font: 600 9px/1.4 var(--co-mono); letter-spacing: .22em; text-transform: uppercase; }
.co-mono.mute{ color: var(--co-mute); }
.co-mono.coral{ color: var(--co-coral); }

.co-h1{
  font: 900 64px/.9 var(--co-sans);
  letter-spacing: -.045em; text-transform: lowercase;
  margin: 0; color: inherit;
}
.co-h2{
  font: 900 36px/.95 var(--co-sans);
  letter-spacing: -.035em; text-transform: lowercase;
  margin: 0; color: inherit;
}
.co-h3{
  font: 800 18px/1.05 var(--co-sans);
  letter-spacing: -.022em; text-transform: lowercase;
  margin: 0; color: inherit;
}
.co-h4{
  font: 700 12px/1.2 var(--co-sans);
  letter-spacing: -.012em; margin: 0; color: inherit;
}
.co-h1 .dot, .co-h2 .dot, .co-h3 .dot{ color: var(--co-coral); }
.co-h1 .em, .co-h2 .em{ background: var(--co-coral); color:#fff; padding: 0 .12em; }
.co-coral-bg .co-h1 .em, .co-coral-bg .co-h2 .em{ background:#fff; color: var(--co-coral); }

.co-body{ font: 400 10px/1.55 var(--co-sans); color: var(--co-ink-2); }
.co-body.lg{ font-size: 11.5px; line-height: 1.55; }
.co-body.sm{ font-size: 9px; line-height: 1.55; }

.co-tag-block{
  display: inline-flex; align-items: center;
  background: var(--co-coral); color: #fff;
  font: 800 10px/1 var(--co-mono); letter-spacing: .22em; text-transform: uppercase;
  padding: 7px 11px;
}
.co-divider{ height: 1px; background: var(--co-line); margin: 14px 0; }

.co-coral-bg{ background: var(--co-coral); color: #fff; }
.co-coral-bg .co-mono.mute{ color: rgba(255,255,255,.7); }
.co-coral-bg .co-body{ color: rgba(255,255,255,.92); }
.co-coral-bg .co-divider{ background: rgba(255,255,255,.35); }

.co-ink-bg{ background: var(--co-ink); color: #f3f1ed; }
.co-ink-bg .co-mono.mute{ color: rgba(243,241,237,.55); }
.co-ink-bg .co-body{ color: rgba(243,241,237,.85); }
.co-ink-bg .co-divider{ background: rgba(255,255,255,.18); }

/* ────────────────────────────────────────────────
   TRÍPTICO (A4 landscape · 3 paneles · 2 caras)
   ────────────────────────────────────────────────
   297 × 210 mm. Roll fold típico:
   Cara EXTERIOR (la que se ve cuando está cerrado):
     panel 1 (izq) → contraportada
     panel 2 (centro) → trasera plana
     panel 3 (der) → portada
   Cara INTERIOR (al abrir):
     panel 4 (izq) → introducción
     panel 5 (centro) → servicios
     panel 6 (der) → contacto / cta
   ──────────────────────────────────────────────── */
.tr-sheet{
  width: 297mm;
  height: 210mm;
  background: var(--co-paper);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  page-break-after: always;
  break-after: page;
}
.tr-panel{
  position: relative;
  padding: 14mm;
  display: flex; flex-direction: column;
  border-right: 1px dashed rgba(0,0,0,.06);
  overflow: hidden;
}
.tr-panel:last-child{ border-right: none; }
.tr-panel.coral{ background: var(--co-coral); color: #fff; }
.tr-panel.ink{ background: var(--co-ink); color: #f3f1ed; }
.tr-panel.alt{ background: var(--co-paper-2); }

/* Crease guides (screen only — invisibles en print porque son tan tenues) */
.tr-creases{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(0,0,0,.08) calc(33.333% - .5px), rgba(0,0,0,.08) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(0,0,0,.08) calc(66.666% - .5px), rgba(0,0,0,.08) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}

/* Panel: portada exterior */
.tr-cover .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.tr-cover .top .logo{ height: 22px; }
.tr-cover .body{ margin-top: 22mm; flex: 1; display:flex; flex-direction:column; justify-content:flex-end; }
.tr-cover .tag-row{ display:flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tr-cover .br-h{
  font: 900 56px/.88 var(--co-sans);
  letter-spacing: -.045em; text-transform: lowercase;
  margin: 0;
}
.tr-cover .br-h .em{ background: var(--co-coral); color:#fff; padding: 0 .08em; }
.tr-cover .lead{ margin-top: 14px; max-width: 32ch; }
.tr-cover .foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top: 14mm;
  border-top: 1px solid var(--co-line);
  padding-top: 10px;
}

/* Panel: trasera plana (imagen + lema) */
.tr-back{ background: var(--co-ink); color: #f3f1ed; }
.tr-back .photo{
  flex: 1;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.1) brightness(.85);
  margin: -14mm -14mm 14mm;
}
.tr-back .top{ position:absolute; top:14mm; left:14mm; right:14mm; display:flex; justify-content:space-between; z-index:2; }
.tr-back .body{ position: relative; z-index: 2; margin-top: auto; }

/* Panel: contraportada */
.tr-cback .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.tr-cback .body{ margin-top: 18mm; flex: 1; }
.tr-cback .stat-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.tr-cback .stat .n{ font: 800 28px/.9 var(--co-sans); letter-spacing: -.03em; }
.tr-cback .stat .l{ font: 600 8.5px/1.3 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--co-mute); margin-top: 4px; }
.tr-cback .foot{ margin-top: auto; display:flex; flex-direction:column; gap:8px; }
.tr-cback .foot .ln{ font: 600 9px/1.4 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--co-mute); }
.tr-cback .foot .em{ font: 700 11px/1.3 var(--co-sans); }

/* Panel: intro interior */
.tr-intro{}
.tr-intro .top{ display:flex; justify-content:space-between; }
.tr-intro .lead{ margin-top: 18mm; }
.tr-intro .lead h2{ margin:0; font: 900 36px/.95 var(--co-sans); letter-spacing: -.035em; text-transform: lowercase; }
.tr-intro .lead h2 .em{ background: var(--co-coral); color:#fff; padding: 0 .08em; }
.tr-intro .lead p{ margin: 14px 0 0; font: 400 10.5px/1.55 var(--co-sans); color: var(--co-ink-2); }
.tr-intro .pillars{ margin-top: 14mm; display:flex; flex-direction:column; gap: 10px; }
.tr-intro .pillar{ display:flex; gap: 10px; align-items: baseline; }
.tr-intro .pillar .n{ font: 600 9px/1 var(--co-mono); color: var(--co-coral); letter-spacing:.18em; min-width: 22px; }
.tr-intro .pillar .t{ font: 700 11px/1.3 var(--co-sans); color: var(--co-ink); }
.tr-intro .pillar .d{ font: 400 9.5px/1.4 var(--co-sans); color: var(--co-mute); }

/* Panel: servicios (centro interior) */
.tr-svcs{ background: var(--co-paper); }
.tr-svcs .top{ display:flex; justify-content:space-between; }
.tr-svcs .label{ margin-top: 4mm; }
.tr-svcs .grid{ margin-top: 12mm; display: flex; flex-direction: column; gap: 10px; }
.tr-svcs .row{
  display: grid; grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--co-line);
}
.tr-svcs .row:last-child{ border-bottom: 1px solid var(--co-line); }
.tr-svcs .row .tag{ font: 700 9.5px/1 var(--co-mono); color: var(--co-coral); letter-spacing:.18em; }
.tr-svcs .row .t{ font: 700 11.5px/1.2 var(--co-sans); color: var(--co-ink); text-transform: lowercase; letter-spacing: -.015em; }
.tr-svcs .row .d{ font: 400 9px/1.4 var(--co-sans); color: var(--co-mute); margin-top: 3px; max-width: 30ch; }

/* Panel: contacto / cta */
.tr-cta{ background: var(--co-coral); color: #fff; }
.tr-cta .top{ display:flex; justify-content:space-between; }
.tr-cta .top .logo path,
.tr-cta .top .logo text{ fill: #fff; }
.tr-cta .body{ margin-top: 18mm; flex: 1; }
.tr-cta h2{ margin:0; font: 900 32px/.95 var(--co-sans); letter-spacing: -.035em; text-transform: lowercase; color:#fff; }
.tr-cta .web{ font: 700 18px/1 var(--co-sans); margin-top: 12mm; letter-spacing: -.02em; }
.tr-cta .contact-list{ margin-top: 14mm; display:flex; flex-direction:column; gap: 12px; }
.tr-cta .contact{ }
.tr-cta .contact .l{ font: 600 8.5px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.7); }
.tr-cta .contact .v{ font: 700 12px/1.3 var(--co-sans); margin-top: 4px; color: #fff; }
.tr-cta .foot{ margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.35); display:flex; justify-content:space-between; font: 600 8.5px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.75); }

/* ────────────────────────────────────────────────
   CARPETA / dossier (A4 cerrada · cubierta + flap)
   Cubierta: 210 × 297 mm
   Contracubierta: 210 × 297 mm
   Lomo opcional
   ──────────────────────────────────────────────── */
.fd-sheet{
  width: 210mm;
  height: 297mm;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  page-break-after: always;
  break-after: page;
}
.fd-cover{
  background: var(--co-paper);
  padding: 22mm;
  display: flex; flex-direction: column;
  height: 100%;
  position: relative;
}
.fd-cover .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.fd-cover .top .logo{ height: 26px; }
.fd-cover .top .meta{ text-align: right; display:flex; flex-direction:column; gap: 4px; }
.fd-cover .tag-row{ margin-top: 28mm; display:flex; gap: 8px; flex-wrap:wrap; }
.fd-cover .tt{ margin-top: 14px; }
.fd-cover .tt h1{
  margin: 0;
  font: 900 92px/.88 var(--co-sans);
  letter-spacing: -.045em; text-transform: lowercase;
}
.fd-cover .tt h1 .em{ background: var(--co-coral); color:#fff; padding: 0 .08em; }
.fd-cover .lead{ margin-top: 18px; max-width: 50ch; }
.fd-cover .lead p{ font: 400 13px/1.55 var(--co-sans); color: var(--co-ink-2); margin: 0; }
.fd-cover .codes{ margin-top: 26mm; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--co-line); }
.fd-cover .codes .code{
  padding: 14px 0;
  border-bottom: 1px solid var(--co-line);
  font: 600 9px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--co-mute);
  display:flex; align-items:center; gap: 8px;
  border-right: 1px solid var(--co-line);
  padding-left: 10px;
}
.fd-cover .codes .code:nth-child(3n){ border-right: none; }
.fd-cover .codes .code .v{ color: var(--co-ink); font-weight:700; }
.fd-cover .codes .code .dot{ width:4px; height:4px; border-radius:50%; background: var(--co-coral); }
.fd-cover .foot{
  margin-top: auto; display:flex; justify-content:space-between; align-items:flex-end;
  border-top: 1px solid var(--co-line);
  padding-top: 14px;
  font: 600 9px/1.4 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--co-mute);
}
.fd-cover .foot .em{ color: var(--co-ink); font-weight: 700; }

.fd-back{
  background: var(--co-ink); color: #f3f1ed;
  padding: 22mm;
  display: flex; flex-direction: column;
  height: 100%;
}
.fd-back .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.fd-back .top .logo{ height: 22px; }
.fd-back .top .logo *{ fill: #f3f1ed; }
.fd-back .body{ margin-top: 26mm; }
.fd-back .body .h{
  font: 900 38px/.95 var(--co-sans); letter-spacing: -.035em; text-transform: lowercase;
  margin: 0; color: #f3f1ed;
}
.fd-back .body .h .em{ background: var(--co-coral); color:#fff; padding: 0 .08em; }
.fd-back .body .lead{ margin-top: 16px; max-width: 50ch; font: 400 12px/1.55 var(--co-sans); color: rgba(243,241,237,.78); }
.fd-back .svc-grid{ margin-top: 22mm; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.fd-back .svc-grid .row{
  display: grid; grid-template-columns: 44px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.18);
}
.fd-back .svc-grid .row .tag{ font: 700 9px/1 var(--co-mono); color: #ffb9a8; letter-spacing:.18em; }
.fd-back .svc-grid .row .t{ font: 700 11px/1.2 var(--co-sans); color: #f3f1ed; text-transform: lowercase; letter-spacing: -.012em; }
.fd-back .foot{
  margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
  display:flex; justify-content:space-between;
  font: 600 8.5px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: rgba(243,241,237,.6);
}
.fd-back .foot .em{ color: #fff; font-weight: 700; }

.fd-pocket-line{
  position: absolute; left: 22mm; right: 22mm; bottom: 90mm;
  height: 1px; background: rgba(0,0,0,.06);
}
.fd-pocket-line::after{
  content: 'línea de troquel — bolsillo'; position: absolute;
  right: 0; top: -16px; font: 600 7.5px/1 var(--co-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(0,0,0,.25);
}

/* ────────────────────────────────────────────────
   TARJETAS DE VISITA · 85 × 55 mm (estándar EU)
   ──────────────────────────────────────────────── */
.bc-grid{
  display: grid; grid-template-columns: repeat(2, 85mm); gap: 32px;
  align-items: start;
}
.bc{
  width: 85mm; height: 55mm;
  background: var(--co-paper);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column;
}
.bc.coral{ background: var(--co-coral); color: #fff; }
.bc.ink{ background: var(--co-ink); color: #f3f1ed; }

/* Cara A — datos de contacto */
.bc-a{
  padding: 6mm;
  justify-content: space-between;
}
.bc-a .top{ display:flex; justify-content: space-between; align-items: flex-start; }
.bc-a .top .logo{ height: 14px; }
.bc-a .top .tag{
  font: 700 7.5px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--co-coral);
  display:flex; align-items:center; gap: 6px;
}
.bc-a .top .tag .dot{ width: 5px; height: 5px; border-radius:50%; background: var(--co-coral); }
.bc-a .body{ }
.bc-a .body .name{
  font: 800 14px/1 var(--co-sans); letter-spacing: -.02em; text-transform: lowercase; color: var(--co-ink);
}
.bc-a .body .role{
  margin-top: 4px;
  font: 600 7.5px/1.3 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--co-mute);
  max-width: 38ch;
}
.bc-a .foot{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font: 500 7.5px/1.3 var(--co-sans);
  color: var(--co-ink-2);
}
.bc-a .foot .l{ font: 600 6.5px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: var(--co-mute); }
.bc-a .foot .v{ margin-top: 2px; font-weight: 600; color: var(--co-ink); }

/* Cara B — bloque coral */
.bc-b{
  padding: 6mm;
  display: flex; flex-direction: column; justify-content: space-between;
}
.bc-b.coral{ background: var(--co-coral); color: #fff; }
.bc-b .top{ display: flex; justify-content: space-between; align-items: flex-start; }
.bc-b .top .logo{ height: 14px; }
.bc-b .top .logo *{ fill: #fff; }
.bc-b .top .mono{ font: 700 7.5px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.85); }
.bc-b .body{ }
.bc-b .body h2{
  margin: 0;
  font: 900 22px/.95 var(--co-sans); letter-spacing: -.03em; text-transform: lowercase; color: #fff;
}
.bc-b .body h2 .em{ background: #fff; color: var(--co-coral); padding: 0 .06em; }
.bc-b .body p{ margin: 4px 0 0; font: 500 7.5px/1.3 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.85); }
.bc-b .foot{ display:flex; justify-content: space-between; font: 500 7px/1 var(--co-mono); letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.7); }

/* Cara B variantes — cada disciplina con su propio tag */
.bc-b .body .tag-row{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.bc-b .body .tag-row .t{
  background: rgba(255,255,255,.18);
  padding: 3px 6px;
  font: 700 6.5px/1 var(--co-mono); letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}

/* ── Print rules ─────────────────────────── */
@media print {
  html, body{ background: #fff; }
  .co-toolbar, .co-caption, .tr-creases, .fd-pocket-line{ display: none !important; }
  .co-stage{ padding: 0; gap: 0; }
  .tr-sheet, .fd-sheet{ box-shadow: none; }
  .bc{ box-shadow: none; }
  /* Trifold en A4 landscape */
  @page tr{ size: A4 landscape; margin: 0; }
  .tr-sheet{ page: tr; }
  /* Carpeta y otros en A4 portrait */
  @page co{ size: A4; margin: 0; }
  .fd-sheet{ page: co; }
  /* Tarjetas: 8 por A4 (2 col × 4 fil), 85 × 55 con margen mínimo */
  .bc-grid{
    page: co;
    grid-template-columns: 85mm 85mm;
    gap: 8mm;
    padding: 16mm;
  }
}


/* ────────── Big WHS PNG logo ────────── */
.whs-mark{
  display: inline-block;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  width: 100%;
}
.whs-mark.dark{ filter: invert(0); }
.whs-mark.white{
  /* turn coral PNG into pure white */
  filter: brightness(0) invert(1);
}
.whs-mark.coral{ /* default — coral as-is */ }

/* Inline <img> logo helper for cards/trifold/folder — keeps the brand red consistent */
.whs-logo-img{
  display: block;
  height: auto;
  /* the source PNG is brand red #C24648 — leave alone */
}
.whs-logo-img--white{
  /* convert the coral PNG to pure white when used over coral/dark backgrounds */
  filter: brightness(0) invert(1);
}

.whs-mark--xs{ height: 16px; }
.whs-mark--sm{ height: 24px; }
.whs-mark--md{ height: 36px; }
.whs-mark--lg{ height: 56px; }
.whs-mark--xl{ height: 88px; }
.whs-mark--hero{ height: 140px; }
.whs-mark--giant{ height: 200px; }

/* ────────── Folder — A4 corporate paper folder (real, with pocket) ────────── */
.fd2-sheet{
  width: 210mm; min-height: 297mm;
  background: var(--co-paper);
  margin: 0 auto 24mm;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  position: relative;
  display: flex; flex-direction: column;
  page-break-after: always;
  overflow: hidden;
}
.fd2-sheet.dark{ background: #0d0d0c; color: #f3f1ed; }
.fd2-sheet .bleed-mark{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 5mm, rgba(0,0,0,.04) 5mm, rgba(0,0,0,.04) calc(5mm + 1px), transparent calc(5mm + 1px)) 0 0/100% 100% no-repeat,
    linear-gradient(0deg, transparent 5mm, rgba(0,0,0,.04) 5mm, rgba(0,0,0,.04) calc(5mm + 1px), transparent calc(5mm + 1px)) 0 100%/100% 100% no-repeat,
    linear-gradient(-90deg, transparent 5mm, rgba(0,0,0,.04) 5mm, rgba(0,0,0,.04) calc(5mm + 1px), transparent calc(5mm + 1px)) 100% 0/100% 100% no-repeat,
    linear-gradient(180deg, transparent 5mm, rgba(0,0,0,.04) 5mm, rgba(0,0,0,.04) calc(5mm + 1px), transparent calc(5mm + 1px)) 0 0/100% 100% no-repeat;
}

/* ── Cover (front of folder, closed) ── */
.fd2-cover{ padding: 28mm 22mm 22mm; }
.fd2-cover .top{ display: flex; justify-content: space-between; align-items: flex-start; }
.fd2-cover .top .lab{ font: 700 9px/1 var(--co-mono); letter-spacing:.22em; text-transform:uppercase; color: var(--co-mute); }
.fd2-cover .top .ed{
  background: var(--co-coral); color: #fff;
  font: 800 10px/1 var(--co-mono); letter-spacing:.18em; text-transform: uppercase;
  padding: 6px 10px;
}
.fd2-cover .hero-mark{
  margin: 32mm 0 0; height: 95mm;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: left center;
}
.fd2-cover .ttl{
  margin-top: 18mm;
  font: 900 56px/.92 var(--co-sans);
  letter-spacing: -.04em; text-transform: lowercase;
  color: var(--co-ink);
  max-width: 19ch;
}
.fd2-cover .ttl .em{ background: var(--co-coral); color: #fff; padding: 0 .08em; }
.fd2-cover .sub{
  margin-top: 14px;
  font: 600 11px/1.5 var(--co-mono); letter-spacing:.18em; text-transform: uppercase;
  color: var(--co-mute);
  max-width: 38ch;
}
.fd2-cover .foot{
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end;
  border-top: 1px solid var(--co-line);
  padding-top: 14px;
  font: 700 10px/1.3 var(--co-mono); letter-spacing:.2em; text-transform: uppercase;
}
.fd2-cover .foot .em{ color: var(--co-coral); }

/* ── Back (folded back, dark) ── */
.fd2-back{ padding: 22mm; color: #f3f1ed; }
.fd2-back .top{ display:flex; justify-content: space-between; align-items: flex-start; }
.fd2-back .top .mark{
  height: 40px; background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  width: 90px;
}
.fd2-back .top .lab{ font: 700 9px/1 var(--co-mono); letter-spacing:.22em; text-transform:uppercase; color: rgba(255,255,255,.55); }
.fd2-back .body{ margin-top: 32mm; }
.fd2-back .h{
  margin: 0;
  font: 900 38px/.95 var(--co-sans);
  letter-spacing: -.035em; text-transform: lowercase;
  color: #f3f1ed;
}
.fd2-back .h .em{ background: var(--co-coral); color:#fff; padding: 0 .08em; }
.fd2-back .lead{ margin-top: 14px; font: 400 11px/1.55 var(--co-sans); color: rgba(243,241,237,.78); max-width: 50ch; }
.fd2-back .svc-grid{ margin-top: 22mm; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.fd2-back .svc-grid .row{
  display: grid; grid-template-columns: 50px 1fr; gap: 8px;
  padding: 10px 0; border-top: 1px solid rgba(255,255,255,.18);
}
.fd2-back .svc-grid .row .tag{ font: 700 9px/1 var(--co-mono); color: #ffb9a8; letter-spacing: .18em; text-transform: uppercase; }
.fd2-back .svc-grid .row .t{ font: 700 11px/1.2 var(--co-sans); color: #f3f1ed; text-transform: lowercase; letter-spacing: -.012em; }
.fd2-back .foot{
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  font: 600 9px/1.4 var(--co-mono); letter-spacing:.18em; text-transform: uppercase; color: rgba(243,241,237,.6);
}
.fd2-back .foot .v{ display: block; color: #fff; font-weight: 700; margin-top: 4px; text-transform: lowercase; letter-spacing: -.012em; font-family: var(--co-sans); font-size: 12px; }

/* ── Inside spread (open folder) — left & right pages ── */
.fd2-inside{
  width: 420mm; min-height: 297mm;
  background: var(--co-paper);
  margin: 0 auto 24mm;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative;
  page-break-after: always;
}
.fd2-inside::before{
  content:""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.18) 20%, rgba(0,0,0,.18) 80%, transparent);
}
.fd2-inside .left, .fd2-inside .right{ padding: 22mm; display: flex; flex-direction: column; }
.fd2-inside .left .lab,
.fd2-inside .right .lab{ font: 700 9px/1 var(--co-mono); letter-spacing:.22em; text-transform: uppercase; color: var(--co-coral); }
.fd2-inside .left .h,
.fd2-inside .right .h{
  margin: 14px 0 0;
  font: 900 28px/.95 var(--co-sans); letter-spacing:-.03em; text-transform: lowercase;
  color: var(--co-ink);
}
.fd2-inside .left .h .em,
.fd2-inside .right .h .em{ background: var(--co-coral); color:#fff; padding: 0 .08em; }
.fd2-inside .left p,
.fd2-inside .right p{ font: 400 11px/1.55 var(--co-sans); color: var(--co-ink-2); max-width: 42ch; margin-top: 12px; }

/* Pocket — the inside-right page has a die-cut diagonal pocket flap */
.fd2-pocket{
  margin-top: 30mm;
  position: relative;
  border-top: 1px dashed var(--co-coral);
  padding-top: 18px;
}
.fd2-pocket::before{
  content: ""; position: absolute; top: -8px; left: 0; right: 0;
  border-top: 1px dashed rgba(0,0,0,.22);
}
.fd2-pocket .info{
  font: 700 9px/1.3 var(--co-mono); letter-spacing:.2em; text-transform: uppercase;
  color: var(--co-coral);
}
.fd2-pocket .ttl{
  margin-top: 6px;
  font: 800 18px/.95 var(--co-sans); letter-spacing:-.025em; text-transform: lowercase;
  color: var(--co-ink);
}
.fd2-pocket .pocket-shape{
  margin-top: 14mm;
  height: 90mm;
  background:
    linear-gradient(170deg, transparent 0%, transparent 18%, rgba(204,71,51,.06) 18%, rgba(204,71,51,.06) 100%);
  border: 1px dashed rgba(204,71,51,.4);
  border-top: none;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 12%);
}
.fd2-pocket .pocket-shape::before{
  content:""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 70%; height: 70%;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .12;
}
.fd2-pocket .pocket-shape .lab{
  position: absolute; top: 12px; left: 14px;
  font: 600 9px/1 var(--co-mono); letter-spacing:.22em; text-transform: uppercase; color: var(--co-coral);
}
.fd2-pocket .pocket-shape .codes{
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between;
  font: 700 9px/1 var(--co-mono); letter-spacing:.22em; text-transform: uppercase; color: var(--co-mute);
}
.fd2-pocket .pocket-shape .codes b{ color: var(--co-coral); font-weight: 700; }

/* Inside-left content list */
.fd2-inside .left .contents{ margin-top: 22mm; display: flex; flex-direction: column; }
.fd2-inside .left .contents .row{
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--co-line);
  align-items: center;
}
.fd2-inside .left .contents .row:last-child{ border-bottom: 1px solid var(--co-line); }
.fd2-inside .left .contents .row .n{ font: 700 10px/1 var(--co-mono); letter-spacing:.2em; color: var(--co-mute); }
.fd2-inside .left .contents .row .t{ font: 700 12px/1.2 var(--co-sans); color: var(--co-ink); text-transform: lowercase; letter-spacing:-.012em; }
.fd2-inside .left .contents .row .pp{ font: 600 9px/1 var(--co-mono); letter-spacing:.18em; text-transform: uppercase; color: var(--co-mute); }

.fd2-inside .left .foot,
.fd2-inside .right .foot{
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--co-line);
  display: flex; justify-content: space-between;
  font: 700 9px/1.3 var(--co-mono); letter-spacing:.2em; text-transform: uppercase; color: var(--co-mute);
}
.fd2-inside .left .foot .em,
.fd2-inside .right .foot .em{ color: var(--co-coral); }

/* ────────── Trifold + cards: BIG mark overrides ────────── */
.tr-cover .hero-mark{
  height: 50mm;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: left center;
  margin: 4mm 0 14mm;
}
.tr-cta .corner-mark{
  position: absolute; bottom: 8mm; right: 8mm;
  height: 32mm; width: 60mm;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: right bottom;
  filter: brightness(0) invert(1);
  opacity: .9;
  pointer-events: none;
}
.tr-cback .mini-mark{
  height: 28mm;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: left center;
  margin-bottom: 6mm;
}

.bc-a .mark-a{
  height: 11mm;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: left center;
  width: 30mm;
}
.bc-b .mark-b{
  height: 11mm;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: left center;
  filter: brightness(0) invert(1);
  width: 30mm;
}
.bc-b .ghost-mark{
  position: absolute; bottom: -4mm; right: -6mm;
  height: 36mm; width: 60mm;
  background-image: url("assets/whs-mark-coral.png");
  background-size: contain; background-repeat: no-repeat; background-position: right bottom;
  filter: brightness(0) invert(1);
  opacity: .14;
  pointer-events: none;
}
.bc-a, .bc-b{ position: relative; overflow: hidden; }

@media print{
  .fd2-inside{ width: 297mm; }
}