/* ─────────────────────────────────────────────────────
   TAUSEM · MANUAL DE MARCA — STYLES
   ───────────────────────────────────────────────────── */

:root{
  --blue:       #1A56C2;
  --blue-deep:  #0F3D8F;
  --blue-ink:   #06224F;
  --red:        #E5232C;
  --red-deep:   #B81820;
  --paper:      #F2EFE6;
  --paper-2:    #E8E4D8;
  --paper-3:    #DAD5C5;
  --paper-4:    #C8C3B2;
  --ink:        #0A0A0A;
  --ink-2:      #1F1F1F;
  --ink-3:      #4A4A4A;
  --ink-4:      #7A7770;
  --ink-5:      #A8A498;

  --pad-x: 56px;
  --side-w: 280px;
}
@media (max-width:1000px){:root{--pad-x:24px;--side-w:0px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{
  margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"zero"}
.display{font-family:'Archivo',sans-serif;font-style:italic;font-weight:900;
  letter-spacing:-0.025em;line-height:0.9;text-transform:uppercase}
.display-r{font-family:'Archivo',sans-serif;font-weight:800;font-style:normal;
  letter-spacing:-0.02em;line-height:0.98}

/* ─────────────────────────────────────────────────────
   LAYOUT — top bar + side nav + main column
   ───────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--paper-3);
  display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--pad-x);height:60px;
}
.topbar-brand{display:flex;align-items:center;gap:14px}
.topbar-brand img{height:22px}
.topbar-brand .tt{font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-left:14px;border-left:1px solid var(--paper-3)}
.topbar-meta{display:flex;gap:24px;align-items:center;
  font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.topbar-meta a:hover{color:var(--blue)}
.topbar-meta .dot{width:6px;height:6px;background:var(--blue);border-radius:50%;display:inline-block}

.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;
  border-top:0}
@media (max-width:1000px){.shell{grid-template-columns:1fr}}

/* SIDE NAV */
.side{
  position:sticky;top:60px;align-self:start;
  height:calc(100vh - 60px);
  padding:32px 24px 32px var(--pad-x);
  border-right:1px solid var(--paper-3);
  overflow-y:auto;
  display:flex;flex-direction:column;gap:24px;
}
@media (max-width:1000px){.side{display:none}}
.side h4{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);margin:0 0 4px}
.side ol{list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;counter-reset:section}
.side ol li{counter-increment:section}
.side ol li a{
  display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--paper-3);
  font:500 13px/1.25 'DM Sans',sans-serif;color:var(--ink-2);
  transition:color .15s ease, padding .15s ease;
}
.side ol li a::before{
  content:counter(section,decimal-leading-zero);
  font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--ink-4);
}
.side ol li a:hover{color:var(--blue);padding-left:4px}
.side ol li a.active{color:var(--blue);font-weight:600}
.side ol li a.active::before{color:var(--blue)}

.side .foot{margin-top:auto;padding-top:24px;border-top:1px solid var(--paper-3);
  font:500 10.5px/1.5 'JetBrains Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}

/* MAIN COLUMN */
.main{padding:0;min-width:0}
.section{padding:96px var(--pad-x);border-bottom:1px solid var(--paper-3);
  position:relative;max-width:1080px}
.section:last-child{border-bottom:0}

.section-head{display:flex;align-items:baseline;gap:24px;margin-bottom:56px;
  padding-bottom:24px;border-bottom:2px solid var(--ink)}
.section-num{font:italic 900 56px/0.9 'Archivo',sans-serif;letter-spacing:-0.04em;
  color:var(--blue);min-width:90px}
.section-title{font:italic 900 clamp(40px,5vw,72px)/0.92 'Archivo',sans-serif;
  letter-spacing:-0.03em;text-transform:uppercase;color:var(--ink)}
.section-title .red{color:var(--red)}
.section-title .blue{color:var(--blue)}
.section-kicker{margin-left:auto;font:500 11px/1.4 'JetBrains Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:right}

.lede{font-size:21px;line-height:1.45;color:var(--ink-2);max-width:680px;
  margin-bottom:48px;font-weight:400}
.lede strong{font-weight:600;color:var(--ink)}

p{margin:0 0 16px;color:var(--ink-2)}
p:last-child{margin-bottom:0}
.muted{color:var(--ink-3)}

h3.h{font:italic 800 28px/1.05 'Archivo',sans-serif;letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--ink);margin:0 0 18px}
h3.h .red{color:var(--red)}
h3.h .blue{color:var(--blue)}

.eyebrow{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;display:block}

/* GENERIC GRID HELPERS */
.row{display:grid;gap:48px;margin-bottom:64px}
.row.r-1-1{grid-template-columns:1fr 1fr}
.row.r-2-3{grid-template-columns:2fr 3fr}
.row.r-3-2{grid-template-columns:3fr 2fr}
.row.r-1-2{grid-template-columns:1fr 2fr}
.row.r-4{grid-template-columns:repeat(4,1fr);gap:24px}
.row.r-3{grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:760px){.row{grid-template-columns:1fr !important;gap:24px}}

/* SPEC TAGS */
.tag{display:inline-flex;align-items:center;padding:5px 9px;
  font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--paper-3);border-radius:2px}
.tag.blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.tag.red{background:var(--red);color:#fff;border-color:var(--red)}
.tag.ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag.outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}

/* CALLOUT */
.callout{
  padding:24px 28px;background:var(--paper-2);
  border-left:3px solid var(--blue);
  display:flex;gap:18px;align-items:start;
  margin:24px 0
}
.callout.red{border-left-color:var(--red)}
.callout-lbl{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);white-space:nowrap}
.callout.red .callout-lbl{color:var(--red)}
.callout-body{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* CARDS */
.card{padding:28px;background:var(--paper);border:1px solid var(--paper-3);
  display:flex;flex-direction:column;gap:14px}
.card.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.card.dark p,.card.dark .muted{color:rgba(255,255,255,.7)}
.card.blue{background:var(--blue-ink);color:#fff;border-color:var(--blue-ink)}
.card.blue p,.card.blue .muted{color:rgba(255,255,255,.7)}

/* STRIPE MOTIF */
.stripes{display:inline-flex;flex-direction:column;gap:3px;height:18px;justify-content:center}
.stripes i{display:block;height:2px;background:currentColor;border-radius:1px}
.stripes.lg{height:36px;gap:4px}
.stripes.lg i{height:4px}
.stripes.xl{height:60px;gap:6px}
.stripes.xl i{height:6px}
.stripes i:nth-child(1){width:18px}
.stripes i:nth-child(2){width:34px}
.stripes i:nth-child(3){width:50px}
.stripes i:nth-child(4){width:60px}
.stripes i:nth-child(5){width:46px}
.stripes i:nth-child(6){width:28px}

/* PAGE-BOTTOM PAGE NUMBER */
.page-num{position:absolute;bottom:24px;right:var(--pad-x);
  font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4)}

/* ─────────────────────────────────────────────────────
   00 · COVER
   ───────────────────────────────────────────────────── */
.cover{padding:0;border-bottom:1px solid var(--paper-3);position:relative;
  min-height:calc(100vh - 60px);max-width:none;
  display:grid;grid-template-rows:auto 1fr auto;
  overflow:hidden}
.cover-top{display:flex;justify-content:space-between;align-items:center;
  padding:32px var(--pad-x);font:500 11px/1 'JetBrains Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--paper-3)}
.cover-mid{padding:64px var(--pad-x);display:flex;align-items:center;
  position:relative}
.cover-stripes{position:absolute;left:0;right:0;top:50%;height:240px;
  transform:translateY(-50%);
  background-image:repeating-linear-gradient(to bottom,
    var(--blue) 0 8px, transparent 8px 16px);
  opacity:.14;pointer-events:none;
  -webkit-mask:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);}
.cover-title{position:relative;z-index:2}
.cover-title h1{
  font:italic 900 clamp(72px,12vw,200px)/0.86 'Archivo',sans-serif;
  letter-spacing:-0.04em;text-transform:uppercase;color:var(--ink);
  margin:0;
}
.cover-title h1 .blue{color:var(--blue)}
.cover-title h1 .red{color:var(--red)}
.cover-title h1 .stripey{
  background:repeating-linear-gradient(to bottom, var(--blue) 0 6px, transparent 6px 12px) text;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
.cover-sub{margin-top:32px;font:600 14px/1.4 'JetBrains Mono',monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);max-width:520px}
.cover-bot{padding:32px var(--pad-x);border-top:1px solid var(--paper-3);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cover-bot .cb{display:flex;flex-direction:column;gap:6px}
.cover-bot .lbl{font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4)}
.cover-bot .val{font:italic 800 18px/1.1 'Archivo',sans-serif;letter-spacing:-0.015em;
  text-transform:uppercase;color:var(--ink)}
@media (max-width:760px){.cover-bot{grid-template-columns:1fr 1fr}}

/* ─────────────────────────────────────────────────────
   02 · LOGO
   ───────────────────────────────────────────────────── */
.logo-frame{background:var(--paper-2);padding:64px;display:grid;place-items:center;
  border:1px solid var(--paper-3);min-height:280px;position:relative}
.logo-frame.ink{background:var(--ink)}
.logo-frame.blue{background:var(--blue)}
.logo-frame img{max-width:60%;height:auto}
.logo-frame.ink img,.logo-frame.blue img{filter:brightness(0) invert(1)}
.logo-frame .lbl{position:absolute;top:14px;left:14px;
  font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.logo-frame.ink .lbl,.logo-frame.blue .lbl{color:rgba(255,255,255,.6)}

/* clear space diagram */
.logo-clearspace{position:relative;background:var(--paper-2);padding:80px;
  border:1px solid var(--paper-3);
  background-image:
    linear-gradient(to right, rgba(26,86,194,.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,86,194,.2) 1px, transparent 1px);
  background-size:20px 20px}
.logo-clearspace img{margin:0 auto;display:block;max-width:60%}
.cs-bracket{position:absolute;display:flex;align-items:center;justify-content:center;
  font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--blue);
  text-transform:uppercase}
.cs-bracket.top{top:12px;left:80px;right:80px;height:60px}
.cs-bracket.bot{bottom:12px;left:80px;right:80px;height:60px}
.cs-bracket.lft{left:12px;top:80px;bottom:80px;width:60px;writing-mode:vertical-rl}
.cs-bracket.rgt{right:12px;top:80px;bottom:80px;width:60px;writing-mode:vertical-rl}
.cs-bracket span{background:var(--paper);padding:4px 8px}

/* misuse grid */
.misuse{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:760px){.misuse{grid-template-columns:1fr 1fr}}
.misuse .m{position:relative;padding:32px;background:var(--paper-2);
  border:1px solid var(--paper-3);min-height:160px;
  display:grid;place-items:center;overflow:hidden}
.misuse .m .x{position:absolute;top:12px;right:12px;
  width:24px;height:24px;background:var(--red);color:#fff;
  display:grid;place-items:center;font:700 14px/1 'DM Sans',sans-serif}
.misuse .m.ok .x{background:var(--blue)}
.misuse .m.ok .x::before{content:"✓"}
.misuse .m .x::before{content:"✕"}
.misuse .m img{max-width:80%;height:auto}
.misuse .m.stretch img{transform:scaleX(1.4)}
.misuse .m.rotate img{transform:rotate(8deg)}
.misuse .m.shadow img{filter:drop-shadow(2px 4px 0 rgba(229,35,44,.6))}
.misuse .m.recolor img{filter:hue-rotate(120deg)}
.misuse .m.outline img{-webkit-mask:url(assets/tausem-logo.png);mask:url(assets/tausem-logo.png);
  background:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 6px);width:80%;height:30px}
.misuse .m .cap{position:absolute;bottom:10px;left:12px;right:12px;
  font:500 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

/* ─────────────────────────────────────────────────────
   03 · COLOR
   ───────────────────────────────────────────────────── */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--ink)}
@media (max-width:760px){.swatches{grid-template-columns:1fr}}
.sw{padding:0;display:flex;flex-direction:column;border-right:1px solid var(--ink)}
.sw:last-child{border-right:0}
.sw-head{height:200px;display:flex;align-items:end;padding:20px;
  font:italic 800 28px/1 'Archivo',sans-serif;letter-spacing:-0.02em;
  text-transform:uppercase;color:#fff;position:relative}
.sw-head .pct{position:absolute;top:18px;right:18px;
  font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}
.sw-body{padding:18px 20px;display:flex;flex-direction:column;gap:6px;
  background:var(--paper);border-top:1px solid var(--ink)}
.sw-body .k{display:grid;grid-template-columns:60px 1fr;gap:8px;
  font:500 11.5px/1.3 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--ink-3)}
.sw-body .k .v{color:var(--ink);font-weight:600}

.sw-head.azul{background:var(--blue)}
.sw-head.azul-deep{background:var(--blue-deep)}
.sw-head.azul-ink{background:var(--blue-ink)}
.sw-head.rojo{background:var(--red)}
.sw-head.rojo-deep{background:var(--red-deep)}
.sw-head.ink{background:var(--ink)}
.sw-head.paper{background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--paper-3)}
.sw-head.paper .pct{color:var(--ink-3)}
.sw-head.paper-2{background:var(--paper-2);color:var(--ink)}
.sw-head.paper-2 .pct{color:var(--ink-3)}
.sw-head.paper-3{background:var(--paper-3);color:var(--ink)}
.sw-head.paper-3 .pct{color:var(--ink-3)}

/* proportion bar */
.prop-bar{display:flex;height:60px;border:2px solid var(--ink);overflow:hidden}
.prop-bar .seg{display:flex;align-items:end;padding:10px 14px;color:#fff;
  font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.prop-bar .seg.azul{background:var(--blue);flex:60}
.prop-bar .seg.paper{background:var(--paper-2);color:var(--ink);flex:30}
.prop-bar .seg.rojo{background:var(--red);flex:7}
.prop-bar .seg.ink{background:var(--ink);flex:3}
.prop-legend{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap;
  font:500 11.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--ink-3)}
.prop-legend .dt{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px}

/* combo previews */
.combos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:760px){.combos{grid-template-columns:1fr 1fr}}
.combo{aspect-ratio:1/1.1;padding:22px;display:flex;flex-direction:column;
  justify-content:space-between;border:1px solid var(--paper-3);position:relative;
  overflow:hidden}
.combo .ttl{font:italic 800 24px/0.95 'Archivo',sans-serif;letter-spacing:-0.02em;
  text-transform:uppercase}
.combo .sm{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7}
.combo.cb1{background:var(--paper);color:var(--ink)}
.combo.cb1 .ttl strong{color:var(--blue)}
.combo.cb2{background:var(--blue);color:#fff}
.combo.cb2 .ttl strong{color:#fff;text-shadow:1px 1px 0 var(--red)}
.combo.cb3{background:var(--ink);color:var(--paper)}
.combo.cb3 .ttl strong{color:var(--red)}
.combo.cb4{background:var(--blue-ink);color:#fff}
.combo.cb4 .ttl strong{color:#fff}

/* ─────────────────────────────────────────────────────
   04 · TIPOGRAFÍA
   ───────────────────────────────────────────────────── */
.type-spec{border:2px solid var(--ink);background:var(--paper);
  padding:40px;display:grid;grid-template-columns:200px 1fr;gap:32px;
  margin-bottom:32px;align-items:start}
@media (max-width:760px){.type-spec{grid-template-columns:1fr}}
.type-spec-meta{display:flex;flex-direction:column;gap:14px;
  padding-right:32px;border-right:1px solid var(--paper-3)}
@media (max-width:760px){.type-spec-meta{border-right:0;border-bottom:1px solid var(--paper-3);
  padding-right:0;padding-bottom:24px}}
.type-spec-meta .role{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red)}
.type-spec-meta .name{font:italic 900 28px/1 'Archivo',sans-serif;letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--ink)}
.type-spec-meta .src{font:500 11.5px/1.4 'JetBrains Mono',monospace;letter-spacing:.04em;
  color:var(--ink-3)}
.type-spec-meta .pesos{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.type-spec-meta .pesos span{padding:3px 8px;border:1px solid var(--paper-3);
  font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--ink-3)}

.type-spec-demo{display:flex;flex-direction:column;gap:14px}
.demo-display{font:italic 900 72px/0.92 'Archivo',sans-serif;letter-spacing:-0.03em;
  text-transform:uppercase;color:var(--ink)}
.demo-dm{font:400 24px/1.4 'DM Sans',sans-serif;color:var(--ink-2)}
.demo-dm strong{font-weight:600}
.demo-mono{font:500 18px/1.4 'JetBrains Mono',monospace;letter-spacing:.02em;color:var(--ink-2)}
.glyph-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--paper-3);
  font-size:13px;color:var(--ink-3);line-height:1.6;letter-spacing:.02em}
.glyph-row.archivo{font-family:'Archivo',sans-serif;font-weight:800;font-style:italic;
  font-size:18px;letter-spacing:0;line-height:1.4}
.glyph-row.dm{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500}
.glyph-row.mono{font-family:'JetBrains Mono',monospace;font-size:14px}

/* hierarchy ladder */
.ladder{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  display:flex;flex-direction:column}
.ladder .r{display:grid;grid-template-columns:140px 1fr 160px;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--paper-3);align-items:baseline}
.ladder .r:last-child{border-bottom:0}
.ladder .role{font:600 10.5px/1.3 'JetBrains Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.ladder .specs{font:500 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.04em;
  color:var(--ink-4);text-align:right}
.ladder .sample-h1{font:italic 900 56px/0.92 'Archivo',sans-serif;letter-spacing:-0.03em;
  text-transform:uppercase;color:var(--ink)}
.ladder .sample-h2{font:italic 800 36px/0.95 'Archivo',sans-serif;letter-spacing:-0.025em;
  text-transform:uppercase;color:var(--ink)}
.ladder .sample-h3{font:italic 800 24px/1.05 'Archivo',sans-serif;letter-spacing:-0.02em;
  text-transform:uppercase;color:var(--ink)}
.ladder .sample-lede{font:400 21px/1.45 'DM Sans',sans-serif;color:var(--ink-2)}
.ladder .sample-body{font:400 16px/1.55 'DM Sans',sans-serif;color:var(--ink-2)}
.ladder .sample-mono{font:500 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}

/* ─────────────────────────────────────────────────────
   05 · MOTIVO GRÁFICO
   ───────────────────────────────────────────────────── */
.motif-canvas{padding:64px;background:var(--paper-2);border:1px solid var(--paper-3);
  display:grid;place-items:center;min-height:280px;position:relative;overflow:hidden}
.motif-canvas.ink{background:var(--ink)}
.motif-canvas.blue{background:var(--blue)}
.motif-canvas .lbl{position:absolute;top:14px;left:14px;
  font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.motif-canvas.ink .lbl,.motif-canvas.blue .lbl{color:rgba(255,255,255,.7)}

.motif-stripes-h{display:grid;gap:8px;width:100%}
.motif-stripes-h i{height:8px;background:var(--blue);display:block}
.motif-stripes-h.ink i{background:#fff}
.motif-stripes-h.blue i{background:#fff}
.motif-stripes-h i:nth-child(1){width:30%}
.motif-stripes-h i:nth-child(2){width:55%}
.motif-stripes-h i:nth-child(3){width:80%}
.motif-stripes-h i:nth-child(4){width:100%}
.motif-stripes-h i:nth-child(5){width:75%}
.motif-stripes-h i:nth-child(6){width:45%}

.motif-band{height:48px;width:100%;
  background-image:repeating-linear-gradient(to bottom,
    var(--blue) 0 6px, transparent 6px 14px);
  -webkit-mask:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);}
.motif-band.ink{background-image:repeating-linear-gradient(to bottom,
  rgba(255,255,255,.9) 0 6px, transparent 6px 14px)}

.motif-textmask{font:italic 900 clamp(60px,10vw,140px)/0.9 'Archivo',sans-serif;
  letter-spacing:-0.03em;text-transform:uppercase;color:transparent;
  background:repeating-linear-gradient(to bottom, var(--blue) 0 6px, transparent 6px 12px) text;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* ─────────────────────────────────────────────────────
   06 · FOTOGRAFÍA
   ───────────────────────────────────────────────────── */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:32px}
@media (max-width:760px){.photo-grid{grid-template-columns:1fr 1fr}}
.photo-grid .pp{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.photo-grid .pp img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.7) contrast(1.1) brightness(.85)}
/* readability gradient — bottom-up, fades into the photo */
.photo-grid .pp::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:55%;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,34,79,.85) 0%,
    rgba(6,34,79,.55) 35%,
    rgba(6,34,79,.2)  70%,
    rgba(6,34,79,0)   100%);
  z-index:1}
/* readability gradient — top-down for the tag */
.photo-grid .pp::before{content:"";position:absolute;left:0;right:0;top:0;
  height:30%;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,10,10,.55) 0%,
    rgba(10,10,10,0)   100%);
  z-index:1}
.photo-grid .pp .tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);
  color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px);z-index:2}
.photo-grid .pp .cap{position:absolute;bottom:12px;left:12px;right:12px;color:#fff;
  font:500 11px/1.3 'JetBrains Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* ─────────────────────────────────────────────────────
   07 · VOZ Y TONO
   ───────────────────────────────────────────────────── */
.voz-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:2px solid var(--ink)}
@media (max-width:760px){.voz-grid{grid-template-columns:1fr}}
.voz-col{padding:32px;border-right:1px solid var(--ink)}
.voz-col:last-child{border-right:0}
@media (max-width:760px){.voz-col{border-right:0;border-bottom:1px solid var(--ink)}}
.voz-col.do{background:var(--paper)}
.voz-col.dont{background:var(--paper-2)}
.voz-col h4{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.voz-col.do h4{color:var(--blue)}
.voz-col.dont h4{color:var(--red)}
.voz-col h4::before{content:"";width:24px;height:24px;display:grid;place-items:center;
  font:700 14px/1 'DM Sans',sans-serif;color:#fff;border-radius:2px}
.voz-col.do h4::before{content:"✓";background:var(--blue)}
.voz-col.dont h4::before{content:"✕";background:var(--red)}
.voz-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.voz-col li{font-size:15px;line-height:1.5;color:var(--ink-2);
  padding-bottom:14px;border-bottom:1px dashed var(--paper-3)}
.voz-col li:last-child{border-bottom:0;padding-bottom:0}
.voz-col li em{font-style:italic;color:var(--ink-4);display:block;margin-top:4px;font-size:13px}

.vocab{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
@media (max-width:760px){.vocab{grid-template-columns:1fr}}
.vocab h4{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;
  padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.vocab ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.vocab li{padding:5px 10px;background:var(--paper-2);
  font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--ink-2)}

/* ─────────────────────────────────────────────────────
   08 · APLICACIONES
   ───────────────────────────────────────────────────── */
.app-mockup{position:relative;background:var(--paper-2);border:1px solid var(--paper-3);
  overflow:hidden;padding:24px}
.app-mockup .lbl{position:absolute;top:12px;left:12px;z-index:2;
  font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);background:var(--paper);
  padding:6px 10px;border:1px solid var(--paper-3)}

/* business card */
.bc{aspect-ratio:1.75/1;background:var(--paper);padding:24px;
  border:1px solid var(--paper-3);position:relative;display:flex;flex-direction:column;
  justify-content:space-between;margin:40px auto 16px;max-width:380px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.18)}
.bc.back{background:var(--blue);color:#fff}
.bc .bc-logo img{height:18px}
.bc.back .bc-logo img{filter:brightness(0) invert(1)}
.bc .bc-name{font:italic 900 18px/1 'Archivo',sans-serif;letter-spacing:-0.02em;
  text-transform:uppercase}
.bc .bc-role{font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.bc .bc-info{font:500 10px/1.5 'JetBrains Mono',monospace;letter-spacing:.04em;color:var(--ink-3)}
.bc-stripes{position:absolute;right:0;top:0;bottom:0;width:50%;
  background-image:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.18) 0 4px, transparent 4px 9px)}
.bc.back .bc-claim{font:italic 900 28px/0.95 'Archivo',sans-serif;letter-spacing:-0.025em;
  text-transform:uppercase}
.bc.back .bc-claim .red{color:#fff;text-shadow:1px 1px 0 var(--red),
  2px 2px 0 var(--red), 3px 3px 0 var(--red)}

/* letterhead */
.letterhead{aspect-ratio:1/1.41;background:var(--paper);border:1px solid var(--paper-3);
  padding:32px 28px;display:flex;flex-direction:column;gap:14px;
  margin:24px auto;max-width:340px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.18);position:relative}
.letterhead-top{display:flex;justify-content:space-between;align-items:start;
  padding-bottom:14px;border-bottom:2px solid var(--blue)}
.letterhead-top img{height:16px}
.letterhead-top .meta{font:500 8px/1.4 'JetBrains Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:right}
.letterhead-body{font-size:9px;line-height:1.55;color:var(--ink-3)}
.letterhead-body strong{display:block;color:var(--ink);margin-bottom:4px;
  font:italic 700 11px/1 'Archivo',sans-serif;letter-spacing:-0.01em;text-transform:uppercase}
.letterhead-foot{margin-top:auto;display:flex;justify-content:space-between;
  padding-top:10px;border-top:1px solid var(--paper-3);
  font:500 7px/1 'JetBrains Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4)}

/* signage */
.signage{aspect-ratio:16/9;background:linear-gradient(135deg,#2a3340,#0c1018);
  border:1px solid #000;display:grid;place-items:center;position:relative;
  overflow:hidden;margin:24px 0}
.signage::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 40%, rgba(26,86,194,.25), transparent 60%);}
.signage img{height:36%;filter:brightness(0) invert(1);position:relative;z-index:2}
.signage .crd{position:absolute;bottom:18px;left:18px;color:rgba(255,255,255,.55);
  font:500 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}

/* web tile */
.webtile{aspect-ratio:16/10;background:var(--paper);border:1px solid var(--paper-3);
  position:relative;overflow:hidden;margin:24px 0}
.webtile .topbar-mock{height:32px;background:var(--paper-2);border-bottom:1px solid var(--paper-3);
  display:flex;align-items:center;padding:0 14px;gap:8px}
.webtile .topbar-mock i{width:8px;height:8px;border-radius:50%;background:var(--paper-3);display:block}
.webtile .body{padding:24px;display:flex;flex-direction:column;gap:14px}
.webtile .h{font:italic 900 38px/0.92 'Archivo',sans-serif;letter-spacing:-0.025em;
  text-transform:uppercase}
.webtile .h .red{color:var(--red)}
.webtile .h .blue{color:var(--blue)}
.webtile .btn{display:inline-flex;align-items:center;gap:6px;
  background:var(--blue);color:#fff;padding:8px 14px;width:fit-content;
  font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase}

/* ─────────────────────────────────────────────────────
   09 · CONTACTO
   ───────────────────────────────────────────────────── */
.contact-block{padding:48px;background:var(--ink);color:#fff;border:0;
  display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:760px){.contact-block{grid-template-columns:1fr}}
.contact-block h3{font:italic 900 36px/0.95 'Archivo',sans-serif;letter-spacing:-0.025em;
  text-transform:uppercase;color:#fff;margin:0 0 14px}
.contact-block h3 .red{color:var(--red)}
.contact-block p{color:rgba(255,255,255,.7);font-size:15px}
.contact-block .ck{display:flex;flex-direction:column;gap:18px}
.contact-block .ck .item{display:flex;flex-direction:column;gap:4px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.15)}
.contact-block .ck .item:last-child{border-bottom:0}
.contact-block .ck .lbl{font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
.contact-block .ck .val{font:italic 800 18px/1.1 'Archivo',sans-serif;letter-spacing:-0.015em;
  text-transform:uppercase;color:#fff}
.contact-block .ck .sub{font:500 13px/1.4 'JetBrains Mono',monospace;letter-spacing:.04em;
  color:rgba(255,255,255,.6)}

/* print */
@media print{
  .topbar,.side{display:none !important}
  .shell{grid-template-columns:1fr}
  .section{page-break-after:always;padding:48px 24px;min-height:auto}
  .cover{min-height:auto}
  body{background:#fff;color:#000}
}