/* ============================================================
   IA y Diseño de Juguetes — v3 design system
   - Spec strip header (mono, toy/AI plate motif)
   - 2-col body bullets w/ numeric chips
   - Link cards strip (Canva-style) per content slide
   - Source dot color codes: achiote=case · selva=tool ·
     cielo=research · mostaza=opinion · grafito=official
   ============================================================ */

:root {
  --papel:       #EFE6D2;
  --hueso:       #E2D6B9;
  --tiza:        #F8F2E2;
  --tinta:       #14110D;
  --grafito:     #4A463E;
  --grafito2:    #6B675E;
  --achiote:     #B23A1F;
  --selva:       #2C4A3E;
  --mostaza:     #C58B2A;
  --cielo:       #3F5E76;
  --rule:        rgba(20,17,13,.16);
  --rule-strong: rgba(20,17,13,.32);

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "Courier New", monospace;
}

html, body { margin: 0; padding: 0; background: var(--tinta); }
deck-stage { background: var(--tinta); }

/* ---------- Slide frame ---------- */
deck-stage > section {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  container-type: inline-size;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","kern";
}

/* Paper grain — extremely subtle (omitted in standalone bundle) */
deck-stage > section::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 50;
  opacity: 0;
}

/* ============================================================
   SPEC STRIP — runs top of every content slide
   Like a designer's plate header / data row.
   Pattern:  ▣ ● ▲  · 04 / 80  · §01 IA Y DISEÑO  · TPL BODY  · TINTA + PAPEL
   ============================================================ */
.strip {
  position: absolute; top: 2.6%; left: 3.5%; right: 3.5%;
  display: flex; align-items: center; gap: 1.4cqw;
  font-family: var(--mono);
  font-size: .9cqw; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grafito2);
  z-index: 6;
  white-space: nowrap;
}
.strip > * { flex-shrink: 0; }
.strip .glyph {
  color: var(--achiote);
  font-family: var(--sans);
  font-size: 1.05cqw;
  letter-spacing: .15em;
}
.strip .sep { width: 2cqw; height: 1px; background: var(--rule-strong); }
.strip .id { color: var(--grafito2); font-size: .8cqw; }
.strip .sect {
  font-size: 1.35cqw;
  letter-spacing: .04em;
  color: var(--tinta);
  font-weight: 500;
  margin-left: auto;
  text-align: right;
}
.strip .sect em {
  font-style: normal;
  color: var(--achiote);
  font-family: var(--mono);
  font-weight: 500;
  margin-right: .3em;
  letter-spacing: .04em;
}
.strip .tpl { display: none; }
.strip .pal { display: none; }

/* ============================================================
   LINK CARDS — Canva-style strip at slide bottom
   ============================================================ */
.links {
  position: absolute; left: 3.5%; right: 3.5%; bottom: 6.2%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1cqw;
  z-index: 4;
}
.links.cards-2 { grid-template-columns: repeat(2, minmax(0, 28cqw)); }
.links.cards-3 { grid-template-columns: repeat(3, 1fr); }

.lc {
  display: grid;
  grid-template-columns: 7cqw 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--tiza);
  border: 1px solid var(--rule);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
  min-height: 5cqw;
}
.lc .thumb {
  background: var(--hueso);
  position: relative;
  border-right: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lc .thumb .shot {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lc .thumb .favicon {
  width: 2.4cqw; height: 2.4cqw;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.1));
}
.lc .thumb:not(:has(.shot))::before {
  content: ""; position: absolute; inset: 12% 14%;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--tinta) 10%, transparent) 0 18%, transparent 18%),
    repeating-linear-gradient(180deg,
      transparent 0 3px,
      color-mix(in oklab, var(--tinta) 8%, transparent) 3px 4px);
  border: 1px solid color-mix(in oklab, var(--tinta) 8%, transparent);
  pointer-events: none;
  z-index: 0;
}
.lc .thumb .favicon { position: relative; z-index: 1; }
.lc .thumb .dot {
  position: absolute; left: .35cqw; bottom: .35cqw;
  width: 1.4cqw; height: 1.4cqw;
  border-radius: 50%;
  background: var(--grafito);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .75cqw;
  letter-spacing: 0;
  color: var(--papel);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--hueso);
  z-index: 2;
}
.lc.case  .thumb .dot { background: var(--achiote); }
.lc.tool  .thumb .dot { background: var(--selva); }
.lc.study .thumb .dot { background: var(--cielo); }
.lc.opin  .thumb .dot { background: var(--mostaza); color: var(--tinta); }
.lc.gov   .thumb .dot { background: var(--tinta); }
.lc .meta {
  padding: .8cqw .95cqw .85cqw;
  display: flex; flex-direction: column; gap: .2cqw;
  min-width: 0;
  justify-content: center;
}
.lc .dom {
  font-family: var(--mono);
  font-size: .8cqw; letter-spacing: .04em;
  color: var(--grafito2);
  text-transform: lowercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc .ttl {
  font-family: var(--sans);
  font-size: 1.05cqw; line-height: 1.2;
  color: var(--tinta);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lc::after {
  content: "↗"; position: absolute; top: .55cqw; right: .7cqw;
  font-family: var(--mono); font-size: .9cqw;
  color: var(--grafito2);
}
.tpl-source .group li a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--achiote);
  transition: background-color .15s;
}
.tpl-source .group li a:hover {
  background: color-mix(in oklab, var(--mostaza) 35%, transparent);
}

/* ============================================================
   SLIDE COUNTER FOOTER
   ============================================================ */
.foot {
  position: absolute; left: 3.5%; right: 3.5%; bottom: 2.6%;
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--mono);
  font-size: .9cqw; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grafito2);
  z-index: 5;
}
.foot .lbl em { font-style: normal; color: var(--achiote); }
.foot .pg b { color: var(--tinta); font-weight: 500; }

/* ============================================================
   TPL — TITLE (cover)
   ============================================================ */
.tpl-title { background: var(--papel); }
.tpl-title .content {
  position: absolute; inset: 8% 4% 6% 4%;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 2cqw;
}
.tpl-title .meta-top {
  display: flex; justify-content: space-between; align-items: start;
  font-family: var(--mono);
  font-size: 1.3cqw; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grafito);
}
.tpl-title .meta-top .accent { color: var(--achiote); }
.tpl-title h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 8.4cqw; line-height: .92;
  letter-spacing: -.02em; margin: 0;
  align-self: end;
}
.tpl-title h1 em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-title h1 .sub {
  display: block; font-style: italic;
  font-size: 3cqw; color: var(--grafito);
  margin-top: 1.4cqw; letter-spacing: -.005em;
}
.tpl-title .meta-bot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2cqw;
  border-top: 1px solid var(--rule-strong);
  padding-top: 1.4cqw;
}
.tpl-title .meta-bot .k {
  font-family: var(--mono);
  font-size: 1.25cqw; letter-spacing: .22em;
  text-transform: uppercase; color: var(--grafito2);
  display: block; margin-bottom: .4cqw;
}
.tpl-title .meta-bot .v {
  font-family: var(--serif);
  font-size: 1.7cqw; line-height: 1.1;
}
.tpl-title .meta-bot .v.mono { font-family: var(--mono); font-size: 1.2cqw; letter-spacing: .02em; }

.tpl-title .plate {
  position: absolute; right: 4%; top: 17%;
  width: 26cqw; height: 26cqw;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 1cqw;
  z-index: 1;
}
.tpl-title .plate b {
  background: var(--hueso); border: 1px solid var(--rule-strong);
}
.tpl-title .plate b.x1 { background: var(--achiote); }
.tpl-title .plate b.x2 { background: var(--selva); }
.tpl-title .plate b.x3 { background: var(--cielo); }
.tpl-title .plate b.x4 { background: var(--mostaza); }
.tpl-title .plate b.k  { border-radius: 50%; }

/* ============================================================
   TPL — SECTION DIVIDER
   ============================================================ */
.tpl-section { background: var(--tinta) !important; }
.tpl-section .content {
  position: absolute; inset: 6% 4%;
  color: var(--papel);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2cqw;
}
.tpl-section .top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 1cqw; letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239,230,210,.55);
}
.tpl-section .top .glyph { color: var(--achiote); letter-spacing: .15em; }
.tpl-section .center {
  display: grid; grid-template-columns: 28cqw 1fr;
  gap: 4cqw; align-items: end;
  align-self: center;
}
.tpl-section .num {
  font-family: var(--serif); font-style: italic;
  font-size: 18cqw; line-height: .85;
  color: var(--achiote);
  text-align: center;
}
.tpl-section h2 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 8.5cqw; line-height: .92; margin: 0;
  max-width: 18ch;
  padding-bottom: 1.5cqw;
}
.tpl-section h2 em { color: var(--papel); font-style: normal; }
.tpl-section .bot {
  display: flex; justify-content: space-between; align-items: end;
  border-top: 1px solid rgba(239,230,210,.2);
  padding-top: 1.4cqw;
  font-family: var(--mono);
  font-size: .95cqw; letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239,230,210,.55);
}
.tpl-section .lead-q {
  font-family: var(--serif); font-style: italic;
  font-size: 2.2cqw; line-height: 1.25;
  color: var(--papel); max-width: 38ch;
  text-transform: none; letter-spacing: -.005em;
}

/* ============================================================
   TPL — BODY  (top-spanning title + 2-col bullets)
   ============================================================ */
.tpl-body .content {
  position: absolute;
  top: 9.5%; left: 3.5%; right: 3.5%; bottom: 18%;
  display: flex; flex-direction: column;
  gap: 2cqw;
}
/* When there are no link cards, content can reach further down */
.tpl-body:not(:has(.links)) .content { bottom: 7%; }
.tpl-body .head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 3cqw;
}
.tpl-body h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 4.4cqw; line-height: 1.04;
  margin: 0; letter-spacing: -.005em;
  max-width: 32ch;
  text-wrap: balance;
}
.tpl-body h2 em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-body h2 strong { font-weight: 400; background: var(--mostaza); padding: 0 .2em; font-style: normal;}
.tpl-body .lede {
  font-family: var(--serif); font-style: italic;
  font-size: 1.9cqw; line-height: 1.2;
  color: var(--grafito);
  max-width: 24ch;
  text-align: right;
  padding-bottom: .4cqw;
  flex-shrink: 0;
}
.tpl-body .rule { border-top: 1px solid var(--rule-strong); flex-shrink: 0; }
.tpl-body ul { flex: 1; }

.tpl-body ul {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8cqw 3cqw;
  align-content: start;
}
.tpl-body ul.one-col { grid-template-columns: 1fr; }
.tpl-body li {
  font-size: 2cqw; line-height: 1.35;
  padding-left: 3.6cqw; position: relative;
  break-inside: avoid;
}
.tpl-body li > .n {
  position: absolute; left: 0; top: .35cqw;
  font-family: var(--mono); font-size: 1.15cqw;
  letter-spacing: .04em;
  color: var(--achiote);
  font-weight: 500;
  width: 2.6cqw;
  display: inline-block;
}
.tpl-body li em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-body li strong { font-weight: 500; background: linear-gradient(transparent 62%, color-mix(in oklab, var(--mostaza) 55%, transparent) 62%); }
.tpl-body li b {
  /* used for metric callouts */
  font-family: var(--mono); font-weight: 500; font-style: normal;
  color: var(--tinta);
  background: color-mix(in oklab, var(--mostaza) 30%, transparent);
  padding: 0 .25em; border-radius: 2px;
}

/* Single big-claim slides */
.tpl-body.poster .content { bottom: 14%; }
.tpl-body.poster h2 { font-size: 6.4cqw; max-width: 18ch; }
.tpl-body.poster ul { grid-template-columns: 1fr; gap: 1.6cqw; }
.tpl-body.poster li { font-size: 2.4cqw; padding-left: 4cqw; }

/* For dense info slides (5+ bullets) */
.tpl-body.dense li { font-size: 1.65cqw; line-height: 1.35; }
.tpl-body.dense ul { gap: 1.4cqw 2.6cqw; }

/* ============================================================
   TPL — PROCESS  (stage flow, color-coded by AI's role)
   ============================================================ */
.tpl-process .content {
  position: absolute;
  top: 9.5%; left: 3.5%; right: 3.5%; bottom: 7%;
  display: flex; flex-direction: column;
  gap: 1.6cqw;
}
.tpl-process .head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 3cqw;
}
.tpl-process h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 4.4cqw; line-height: 1.04;
  margin: 0; letter-spacing: -.005em;
  max-width: 32ch;
  text-wrap: balance;
}
.tpl-process h2 em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-process .lede {
  font-family: var(--serif); font-style: italic;
  font-size: 1.9cqw; line-height: 1.2;
  color: var(--grafito);
  max-width: 24ch;
  text-align: right;
  padding-bottom: .4cqw;
  flex-shrink: 0;
}
.tpl-process .rule { border-top: 1px solid var(--rule-strong); flex-shrink: 0; }

.tpl-process .flow {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 1.4cqw;
}
.tpl-process .flow-row {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0.5cqw;
}
.tpl-process .stage {
  display: flex; flex-direction: column;
  flex: 1 1 0; min-width: 0;
  background: var(--hueso);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  padding: 0.85cqw 1cqw;
  position: relative;
}
.tpl-process .stage .num {
  font-family: var(--mono); font-size: 0.85cqw;
  letter-spacing: .15em; color: var(--grafito2);
}
.tpl-process .stage .ttl {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: 1.55cqw; line-height: 1.05;
  color: var(--tinta);
  margin: 0.35cqw 0 0.85cqw;
  text-wrap: balance;
}
.tpl-process .stage .tag {
  display: flex; align-items: center; gap: 0.45cqw;
  font-family: var(--mono); font-size: 0.85cqw;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafito);
  margin-top: auto;
}
.tpl-process .stage .tag i {
  width: 0.7cqw; height: 0.7cqw; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.tpl-process .stage.role-helps { border-left-color: var(--selva); }
.tpl-process .stage.role-mixed { border-left-color: var(--mostaza); }
.tpl-process .stage.role-risk  { border-left-color: var(--achiote); }
.tpl-process .stage.role-helps .tag i { background: var(--selva); }
.tpl-process .stage.role-mixed .tag i { background: var(--mostaza); }
.tpl-process .stage.role-risk  .tag i { background: var(--achiote); }
.tpl-process .stage.role-risk .tag { color: var(--achiote); }

.tpl-process .arr {
  font-family: var(--mono);
  font-size: 1.6cqw;
  color: var(--grafito2);
  display: flex; align-items: center;
  flex-shrink: 0;
}

.tpl-process .closing {
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: 1.7cqw; line-height: 1.35;
  color: var(--tinta);
  text-align: center;
  padding: 1.1cqw 2cqw 0;
  margin-top: 0.6cqw;
  text-wrap: balance;
  border-top: 1px solid var(--rule);
}
.tpl-process .closing em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-process .closing strong {
  font-style: normal; font-weight: 500;
  background: linear-gradient(transparent 62%, color-mix(in oklab, var(--mostaza) 55%, transparent) 62%);
  padding: 0 .15em;
}

/* ============================================================
   TPL — QUOTE
   ============================================================ */
.tpl-quote .content {
  position: absolute; inset: 11% 6% 25% 4%;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 1.5cqw;
}
.tpl-quote .quotemark {
  font-family: var(--serif); font-style: italic;
  font-size: 14cqw; line-height: .6;
  color: var(--achiote);
  margin-bottom: -3cqw;
}
.tpl-quote blockquote {
  margin: 0; align-self: center;
  font-family: var(--serif); font-size: 5.8cqw;
  line-height: 1.05; letter-spacing: -.005em;
  font-weight: 400;
  max-width: 22ch;
}
.tpl-quote blockquote em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-quote .cite {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1.2cqw; align-items: center;
  font-family: var(--mono);
  font-size: 1cqw; letter-spacing: .22em;
  text-transform: uppercase; color: var(--grafito);
  padding-top: 1cqw;
  border-top: 1px solid var(--rule-strong);
}
.tpl-quote .cite .who { color: var(--tinta); }

/* ============================================================
   TPL — FULL-BLEED IMAGE
   ============================================================ */
.tpl-image .frame {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--selva) 50%, var(--tinta)) 0 6px,
      color-mix(in oklab, var(--selva) 70%, var(--tinta)) 6px 12px);
}
.tpl-image .crop {
  position: absolute; inset: 6% 4%;
  border: 1px solid rgba(239,230,210,.4);
  display: grid; grid-template-rows: auto 1fr auto;
  color: var(--papel);
}
.tpl-image .crop .top,
.tpl-image .crop .bot {
  padding: 1cqw 1.4cqw;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: .85cqw;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(239,230,210,.7);
}
.tpl-image .crop .top { border-bottom: 1px solid rgba(239,230,210,.18); }
.tpl-image .crop .bot { border-top: 1px solid rgba(239,230,210,.18); }
.tpl-image .crop .mid {
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 1.2cqw;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239,230,210,.85);
  padding: 2cqw;
  text-align: center; line-height: 1.7;
}
.tpl-image .crop .mid .placeholder {
  border: 1px dashed rgba(239,230,210,.55);
  padding: 2.5cqw 4cqw;
  max-width: 64%;
}
.tpl-image .crop .mid em { font-style: normal; font-weight: 600; font-family: var(--serif); text-transform: none; font-size: 1.8cqw; color: var(--achiote); }
.tpl-image .crop .mid .placeholder strong {
  display: block;
  font-family: var(--mono);
  font-size: 1.4cqw;
  letter-spacing: .3em;
  color: var(--mostaza);
  margin-bottom: 1.2cqw;
  font-weight: 500;
}
.tpl-image .crop .mid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpl-image .crop .mid:has(img) { padding: 0; }
.tpl-imgtext .img .mid {
  position: relative;
}
.tpl-imgtext .img .mid::before {
  content: "FOTO";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -120%);
  font-family: var(--mono);
  font-size: .85cqw;
  letter-spacing: .35em;
  color: rgba(239,230,210,.5);
}
.tpl-imgtext .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-image .caption {
  position: absolute; left: 4%; bottom: 22%;
  background: var(--papel); color: var(--tinta);
  padding: 1.1cqw 1.5cqw;
  font-size: 1.35cqw; max-width: 32cqw; line-height: 1.3;
  z-index: 3;
  box-shadow: 0 .5cqw 2cqw rgba(0,0,0,.25);
}
.tpl-image .caption em { font-family: var(--serif); font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-image .caption .src {
  display: block; margin-top: .4cqw;
  font-family: var(--mono); font-size: .85cqw;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--grafito2);
}
.tpl-image .marker {
  position: absolute; top: 3.5%; left: 4%;
  background: var(--achiote); color: var(--papel);
  padding: .5cqw 1.1cqw;
  font-family: var(--mono); font-size: .9cqw;
  letter-spacing: .22em; text-transform: uppercase;
  z-index: 4;
}
/* image template — links pinned light over the gradient */
.tpl-image .links {
  bottom: 4%;
  background: rgba(239,230,210,.92);
  padding: 1.1cqw 1.2cqw;
  border-radius: 2px;
}

/* ============================================================
   TPL — IMAGE + TEXT (split)
   ============================================================ */
.tpl-imgtext .content {
  position: absolute;
  top: 7%; left: 3.5%; right: 3.5%; bottom: 25%;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 2.6cqw;
}
.tpl-imgtext .img {
  background: var(--tinta);
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  color: var(--papel);
}
.tpl-imgtext .img::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--achiote) 60%, var(--tinta)) 0 6px,
      color-mix(in oklab, var(--achiote) 78%, var(--tinta)) 6px 12px);
}
.tpl-imgtext .img > * { position: relative; z-index: 1; }
.tpl-imgtext .img .top, .tpl-imgtext .img .bot {
  padding: .9cqw 1.2cqw;
  font-family: var(--mono); font-size: .8cqw;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(239,230,210,.75);
  display: flex; justify-content: space-between;
  background: rgba(20,17,13,.32);
}
.tpl-imgtext .img .mid {
  display: grid; place-items: center;
  text-align: center;
  font-family: var(--mono); font-size: 1.05cqw;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239,230,210,.85);
  padding: 2cqw;
  line-height: 1.6;
}
.tpl-imgtext .img .mid em { font-style: normal; font-weight: 600; font-family: var(--serif); text-transform: none; font-size: 1.5cqw; color: var(--achiote); }
.tpl-imgtext .copy {
  display: flex; flex-direction: column; gap: 1.2cqw;
  padding-top: .5cqw;
}
.tpl-imgtext .lede {
  font-family: var(--mono);
  font-size: .9cqw; letter-spacing: .22em; text-transform: uppercase;
  color: var(--achiote);
}
.tpl-imgtext h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 4.6cqw; line-height: .96; margin: 0;
  letter-spacing: -.01em;
}
.tpl-imgtext h2 em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-imgtext ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .9cqw;
}
.tpl-imgtext li {
  font-size: 1.3cqw; line-height: 1.35;
  padding-left: 2.6cqw; position: relative;
}
.tpl-imgtext li > .n {
  position: absolute; left: 0; top: .25cqw;
  font-family: var(--mono); font-size: .85cqw;
  color: var(--achiote); font-weight: 500;
  width: 2cqw;
  display: inline-block;
}
.tpl-imgtext li em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-imgtext li strong { font-weight: 500; background: linear-gradient(transparent 62%, color-mix(in oklab, var(--mostaza) 55%, transparent) 62%); }

/* ============================================================
   TPL — COMPARE (3 cols)
   ============================================================ */
.tpl-compare .content {
  position: absolute;
  top: 7%; left: 3.5%; right: 3.5%; bottom: 25%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2cqw;
  padding-top: 1cqw;
}
.tpl-compare .head { display: grid; grid-template-columns: 1fr auto; gap: 2cqw; align-items: end; }
.tpl-compare h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 4.2cqw; line-height: 1; margin: 0;
  max-width: 26ch;
}
.tpl-compare h2 em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-compare .lede {
  font-family: var(--mono); font-size: .9cqw;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--grafito);
}
.tpl-compare .cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.4cqw;
}
.tpl-compare .col {
  display: flex; flex-direction: column;
  gap: 1cqw;
  padding-top: 1cqw;
  border-top: 3px solid var(--tinta);
}
.tpl-compare .col:nth-child(1) { border-top-color: var(--achiote); }
.tpl-compare .col:nth-child(2) { border-top-color: var(--selva); }
.tpl-compare .col:nth-child(3) { border-top-color: var(--cielo); }
.tpl-compare .col .k { display: none; }
.tpl-compare .col .h {
  font-family: var(--serif); font-size: 2.4cqw; line-height: 1.05;
}
.tpl-compare .col .h em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-compare .col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .55cqw;
}
.tpl-compare .col li {
  font-size: 1.2cqw; line-height: 1.3;
  padding-left: 1.5cqw; position: relative;
}
.tpl-compare .col li::before {
  content: ""; position: absolute;
  left: 0; top: .55em;
  width: .9cqw; height: .14cqw;
  background: var(--achiote);
}
.tpl-compare:has(.links) .content { bottom: 30%; }
.tpl-compare .col li em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-compare .col .p {
  font-family: var(--serif); font-style: italic;
  font-size: 1.3cqw; line-height: 1.3;
  color: var(--grafito); margin-top: auto;
  padding-top: .8cqw;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   TPL — TOOL (case study)
   ============================================================ */
.tpl-tool .content {
  position: absolute;
  top: 7%; left: 3.5%; right: 3.5%; bottom: 25%;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.6cqw;
}
.tpl-tool .shot {
  background: var(--hueso);
  border: 1px solid var(--rule-strong);
  position: relative; overflow: hidden;
}
.tpl-tool .shot.has-image {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: var(--hueso);
}
.tpl-tool .shot::before {
  content: ""; position: absolute; inset: 8%;
  background:
    linear-gradient(180deg, var(--papel) 0 14%, transparent 14%),
    repeating-linear-gradient(180deg,
      transparent 0 24px,
      color-mix(in oklab, var(--tinta) 8%, transparent) 24px 25px);
  border: 1px solid var(--rule);
}
.tpl-tool .shot::after {
  content: attr(data-app);
  position: absolute; top: 9%; left: 10%;
  font-family: var(--mono); font-size: .9cqw;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta);
}
.tpl-tool .shot.has-image::before,
.tpl-tool .shot.has-image::after,
.tpl-tool .shot.has-image .pin { display: none; }
.tpl-tool .shot .pin {
  position: absolute; bottom: 8%; left: 10%; right: 10%;
  display: flex; flex-direction: column; gap: .5cqw;
  font-family: var(--mono); font-size: .85cqw;
  color: var(--grafito);
  text-transform: uppercase; letter-spacing: .15em;
}
.tpl-tool .shot .pin b { color: var(--achiote); }
.tpl-tool .copy {
  display: flex; flex-direction: column; gap: 1cqw;
}
.tpl-tool .kicker {
  font-family: var(--mono); font-size: .9cqw;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--grafito);
}
.tpl-tool .kicker em { color: var(--achiote); font-style: normal; }
.tpl-tool h2 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 5.2cqw; line-height: .96; margin: 0;
  max-width: 18ch;
}
.tpl-tool ul {
  list-style: none; padding: 0; margin: .5cqw 0 0;
  display: flex; flex-direction: column; gap: .8cqw;
}
.tpl-tool li {
  font-size: 1.3cqw; line-height: 1.35;
  padding-left: 6cqw; position: relative;
}
.tpl-tool li > .k {
  position: absolute; left: 0; top: .25cqw;
  font-family: var(--mono); font-size: .8cqw;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--achiote);
  font-weight: 500;
  width: 5cqw;
  display: inline-block;
}
.tpl-tool li em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-tool li strong { font-weight: 500; background: linear-gradient(transparent 62%, color-mix(in oklab, var(--mostaza) 55%, transparent) 62%); }

/* ============================================================
   TPL — PROMPT (audience)
   ============================================================ */
.tpl-prompt { background: var(--achiote) !important; }
.tpl-prompt .strip { color: rgba(239,230,210,.75); }
.tpl-prompt .strip .glyph { color: var(--papel); }
.tpl-prompt .strip .id { color: var(--papel); }
.tpl-prompt .strip .sect em { color: var(--papel); }
.tpl-prompt .strip .sep { background: rgba(239,230,210,.4); }
.tpl-prompt .strip .pal i { border-color: rgba(239,230,210,.45); }
.tpl-prompt .foot { color: rgba(239,230,210,.65); }
.tpl-prompt .foot .lbl em, .tpl-prompt .foot .pg b { color: var(--papel); }

.tpl-prompt .content {
  position: absolute; inset: 8% 6% 8% 4%;
  color: var(--papel);
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 2cqw;
}
.tpl-prompt .kicker {
  font-family: var(--mono);
  font-size: 1cqw; letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239,230,210,.85);
}
.tpl-prompt h2 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 8cqw; line-height: 1; margin: 0;
  letter-spacing: -.005em;
  max-width: 22ch;
  align-self: end;
}
.tpl-prompt h2.small { font-size: 5cqw; line-height: 1.08; max-width: 26ch; }
.tpl-prompt h2 em { font-style: normal; font-weight: 600; text-decoration: underline; text-decoration-thickness: .3cqw; text-underline-offset: .8cqw; }
.tpl-prompt .prompt-lede {
  font-family: var(--serif); font-style: italic;
  font-size: 2.4cqw; line-height: 1.3;
  color: var(--papel);
  max-width: 32ch;
  margin-top: 1.5cqw;
  letter-spacing: -.005em;
}
.tpl-prompt .marca {
  font-family: var(--mono);
  font-size: .9cqw; letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(239,230,210,.7);
  border-top: 1px solid rgba(239,230,210,.3);
  padding-top: 1cqw;
}

/* ============================================================
   TPL — CLOSE
   ============================================================ */
.tpl-close .content {
  position: absolute; inset: 8% 4% 6% 4%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4cqw; align-items: end;
}
.tpl-close h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 10cqw; line-height: .92; margin: 0;
}
.tpl-close h2 em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-close .right {
  display: grid; grid-template-rows: auto auto auto auto;
  gap: 1cqw; padding-bottom: 1cqw;
}
.tpl-close .right .k {
  font-family: var(--mono); font-size: .9cqw;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--grafito2);
}
.tpl-close .right .v {
  font-family: var(--serif);
  font-size: 2.4cqw; line-height: 1.1;
}
.tpl-close .right .v.mono { font-family: var(--mono); font-size: 1.4cqw; letter-spacing: .04em; }
.tpl-close .qr {
  width: 9cqw; height: 9cqw;
  background: var(--tinta);
  background-image:
    linear-gradient(var(--papel) 50%, transparent 50%),
    linear-gradient(90deg, var(--papel) 50%, transparent 50%);
  background-size: 14% 14%;
  margin-top: 1cqw;
}
.tpl-close .qr.has-image {
  background: var(--papel);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.tpl-close .meta-top {
  position: absolute; top: 5%; left: 4%; right: 4%;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 1cqw;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--grafito);
}

/* ============================================================
   TPL — SOURCE APPENDIX
   ============================================================ */
.tpl-source .content {
  position: absolute;
  top: 7%; left: 3.5%; right: 3.5%; bottom: 6%;
  display: grid; grid-template-columns: 1fr 2.2fr;
  gap: 4cqw;
}
.tpl-source h2 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 4cqw; line-height: 1; margin: 0;
}
.tpl-source h2 em { font-style: normal; font-weight: 600; color: var(--achiote); }
.tpl-source .left .lede {
  font-family: var(--serif); font-style: italic;
  font-size: 1.5cqw; line-height: 1.4;
  color: var(--grafito);
  margin-top: 1.5cqw;
  max-width: 28ch;
}
.tpl-source .left .legend {
  margin-top: 2.5cqw;
  display: grid; gap: .6cqw;
  font-family: var(--mono); font-size: .85cqw;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grafito);
}
.tpl-source .left .legend span { display: flex; align-items: center; gap: .8cqw; }
.tpl-source .left .legend i {
  display: inline-block; width: .85cqw; height: .85cqw;
  border-radius: 50%;
}
.tpl-source .scroll-cols { /* container; items flow in .group ol below */ }
.tpl-source .group { margin-bottom: 1.4cqw; }
.tpl-source .group h3 {
  font-family: var(--mono); font-size: .9cqw;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--achiote); font-weight: 500;
  margin: 0 0 .6cqw;
  padding-bottom: .4cqw;
  border-bottom: 1px solid var(--rule);
}
.tpl-source .group ol {
  list-style: none; padding: 0; margin: 0;
  counter-reset: src;
  columns: 2; column-gap: 2.5cqw;
}
.tpl-source .group li {
  font-size: 1cqw; line-height: 1.4;
  padding-left: 1.8cqw; position: relative;
  counter-increment: src;
  margin-bottom: .4cqw;
  break-inside: avoid;
}
.tpl-source .group li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: .8cqw;
  color: var(--achiote); font-weight: 500;
}
/* color-code groups by kind — same palette as link cards */
.tpl-source .group-case  h3,
.tpl-source .group-case  li::before { color: var(--achiote); }
.tpl-source .group-case  li a       { border-bottom-color: var(--achiote); }
.tpl-source .group-study h3,
.tpl-source .group-study li::before { color: var(--cielo); }
.tpl-source .group-study li a       { border-bottom-color: var(--cielo); }
.tpl-source .group-tool  h3,
.tpl-source .group-tool  li::before { color: var(--selva); }
.tpl-source .group-tool  li a       { border-bottom-color: var(--selva); }
.tpl-source .group-opin  h3,
.tpl-source .group-opin  li::before { color: var(--mostaza); }
.tpl-source .group-opin  li a       { border-bottom-color: var(--mostaza); }
.tpl-source .group-gov   h3,
.tpl-source .group-gov   li::before { color: var(--tinta); }
.tpl-source .group-gov   li a       { border-bottom-color: var(--tinta); }