/* ====================================================================
   GUÍA EJECUTIVA — Rentas Vacacionales QRoo
   Editorial deck · Instrument Serif + Geist + JetBrains Mono
   ==================================================================== */

:root{
  /* Ink scale */
  --ink: oklch(0.22 0.02 250);
  --ink-2: oklch(0.36 0.015 250);
  --ink-3: oklch(0.52 0.012 250);
  --ink-4: oklch(0.70 0.010 250);

  /* Paper scale */
  --paper: oklch(0.975 0.008 80);
  --paper-2: oklch(0.955 0.012 78);
  --paper-3: oklch(0.93 0.018 76);
  --sand:  oklch(0.90 0.025 75);
  --line: oklch(0.82 0.015 75);
  --rule: oklch(0.70 0.012 75);

  /* Layer accents — shared chroma ~0.12, varying hue */
  --terracotta: oklch(0.58 0.14 40);
  --terracotta-ink: oklch(0.38 0.11 40);
  --teal: oklch(0.52 0.08 200);
  --teal-ink: oklch(0.34 0.07 205);
  --ochre: oklch(0.70 0.12 75);
  --ochre-ink: oklch(0.46 0.10 75);
  --forest: oklch(0.48 0.07 155);
  --forest-ink: oklch(0.32 0.06 155);

  --federal: var(--terracotta);
  --federal-ink: var(--terracotta-ink);
  --state: var(--teal);
  --state-ink: var(--teal-ink);
  --municipal: var(--ochre);
  --municipal-ink: var(--ochre-ink);
  --contracts: var(--forest);
  --contracts-ink: var(--forest-ink);

  --radius: 2px;
}

html, body { background:#1a1a1a; margin:0; }
body {
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
}

deck-stage > section{
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

/* ───────────────────────── TYPE PRIMITIVES ───────────────────────── */
.serif { font-family:"Instrument Serif","Cormorant Garamond",Georgia,serif; font-weight:400; letter-spacing:-0.005em; }
.mono  { font-family:"JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing:-0.01em; }
.eyebrow { font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.rule { height:1px; background:var(--rule); border:0; }
.rule-ink { height:1px; background:var(--ink); border:0; }

/* ───────────────────────── SLIDE SCAFFOLD ───────────────────────── */
.slide{
  width:100%; height:100%;
  padding: 72px 110px 60px;
  box-sizing:border-box;
  display:flex; flex-direction:column;
  position:relative;
}
.slide.tight { padding: 60px 90px 52px; }
.slide .header{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; border-bottom:1px solid var(--line);
  font-size:14px; color:var(--ink-3);
  flex-shrink:0;
}
.slide .header .brand{
  display:flex; align-items:center; gap:14px;
  letter-spacing:0.14em; text-transform:uppercase; font-size:12px; font-weight:500;
}
.slide .header .brand .mark{
  width:10px; height:10px; background:var(--terracotta);
  transform:rotate(45deg);
}
.slide .footer{
  margin-top:auto;
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:16px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-3);
  flex-shrink:0;
}
.slide .body{ flex:1; display:flex; flex-direction:column; min-height:0; }

.page-num{
  font-family:"JetBrains Mono", monospace; font-size:12px;
  color:var(--ink-3); letter-spacing:0.04em;
}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.kicker .num{
  font-family:"JetBrains Mono", monospace; letter-spacing:0.02em;
  padding:4px 8px; background:var(--ink); color:var(--paper); font-weight:500;
}
.kicker .num.inv{ background:var(--paper); color:var(--ink); border:1px solid var(--ink); }

/* Tag / chip */
.tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500;
  padding:6px 12px; border-radius:999px;
  background: color-mix(in oklab, var(--layer-color, var(--terracotta)) 14%, transparent);
  color: var(--layer-ink, var(--terracotta-ink));
}
.tag .dot{ width:8px; height:8px; border-radius:999px; background:var(--layer-color, var(--terracotta)); }

/* ===================================================================
   SLIDE 01 — COVER
   =================================================================== */
.cover{
  padding:0;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
}
.cover .left{
  padding: 72px 72px 60px 110px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.cover .meta{
  display:flex; gap:24px; align-items:center;
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3);
}
.cover .meta .mark{ width:14px; height:14px; background:var(--terracotta); transform:rotate(45deg); }
.cover h1.display{
  font-family:"Instrument Serif", serif; font-weight:400;
  font-size:148px; line-height:0.94; letter-spacing:-0.022em;
  color:var(--ink);
  margin:32px 0 0;
}
.cover h1.display em{ font-style:italic; color:var(--terracotta-ink); }
.cover .deck-sub{
  margin-top:36px; max-width:620px;
  font-size:26px; line-height:1.35; color:var(--ink-2);
}
.cover .version-strip{
  display:flex; gap:40px; align-items:flex-end; justify-content:space-between;
}
.cover .version-strip .v{ display:flex; flex-direction:column; gap:6px; }
.cover .version-strip .k{
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.cover .version-strip .val{
  font-family:"JetBrains Mono", monospace; font-size:18px; color:var(--ink);
}
.cover .right{
  background: var(--paper-2);
  border-left:1px solid var(--line);
  padding: 72px 110px 60px 72px;
  display:flex; flex-direction:column; gap:28px; justify-content:center;
}
.cover .right .label{
  font-size:13px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--terracotta-ink); font-weight:600;
}
.cover .right h3{
  font-family:"Instrument Serif", serif; font-weight:400;
  font-size:44px; line-height:1.08; margin:0; color:var(--ink);
}
.cover .bullets{ display:flex; flex-direction:column; gap:20px; margin-top:4px; }
.cover .bullet{
  display:grid; grid-template-columns:56px 1fr; gap:16px; align-items:baseline;
}
.cover .bullet .n{
  font-family:"Instrument Serif", serif; font-style:italic;
  font-size:38px; color:var(--terracotta); line-height:1;
}
.cover .bullet .t{ font-size:21px; line-height:1.42; color:var(--ink-2); }
.cover .bullet .t b{ color:var(--ink); font-weight:600; }

/* ===================================================================
   BIG TITLE / SECTION DIVIDER
   =================================================================== */
.section-title h1{
  font-family:"Instrument Serif", serif; font-weight:400;
  font-size:72px; line-height:0.96; letter-spacing:-0.015em;
  margin: 20px 0 0;
  max-width: 1400px;
}
.section-title h1 em{ font-style:italic; color: var(--accent-ink, var(--terracotta-ink)); }
.section-title .lede{
  margin-top:24px; max-width:900px;
  font-size:24px; line-height:1.42; color:var(--ink-2);
}

/* ===================================================================
   SLIDE 02 — 3-LAYER MODEL
   =================================================================== */
.layers-grid{
  margin-top:38px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--ink);
  flex:1;
  min-height:0;
}
.layer{
  --layer-color: var(--federal);
  --layer-ink: var(--federal-ink);
  position:relative;
  padding: 28px 32px 24px 0;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
}
.layer:first-child{ padding-left:0; padding-right:40px; }
.layer:not(:first-child){ padding-left:40px; padding-right:40px; }
.layer:last-child{ border-right:0; padding-right:0; }
.layer.state{ --layer-color: var(--state); --layer-ink: var(--state-ink); }
.layer.municipal{ --layer-color: var(--municipal); --layer-ink: var(--municipal-ink); }

.layer .top{ display:flex; align-items:center; justify-content:space-between; }
.layer .idx{
  font-family:"JetBrains Mono", monospace; font-size:13px; letter-spacing:0.06em;
  color:var(--ink-3);
}
.layer .name{
  font-family:"Instrument Serif", serif; font-size:48px; line-height:1;
  color: var(--layer-ink);
  margin:2px 0 0;
}
.layer .authority{
  font-size:13px; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:0.14em; font-weight:500; margin-top:2px;
}
.layer .desc{ font-size:16px; line-height:1.5; color:var(--ink-2); max-width:42ch; }
.layer .regs{ display:flex; flex-direction:column; gap:10px; }
.layer .reg{
  display:grid; grid-template-columns: 18px 1fr; gap:10px;
  font-size:15px; color:var(--ink); align-items:baseline;
}
.layer .reg::before{
  content:""; width:8px; height:8px; background:var(--layer-color);
  display:block;
}
.layer .penalty{
  margin-top:auto;
  padding:12px 14px;
  border:1px solid var(--line); background:var(--paper-2);
  font-size:13px; color:var(--ink-2);
  display:flex; flex-direction:column; gap:4px;
}
.layer .penalty .k{
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.layer .penalty .v{ color: var(--layer-ink); font-weight:500; }

/* ===================================================================
   COMPARISON TABLE (slide 04)
   =================================================================== */
.comparison{
  margin-top: 32px;
  border-top:1px solid var(--ink);
  flex:1;
  display:grid;
}
.comparison table{
  width:100%; border-collapse:collapse;
  font-size:17px;
}
.comparison th, .comparison td{
  text-align:left; padding:20px 20px;
  border-bottom:1px solid var(--line);
  vertical-align: top;
  line-height:1.45;
}
.comparison th{
  font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
  padding-top:22px; padding-bottom:14px;
}
.comparison th.col{
  font-size:28px; text-transform:none; letter-spacing:-0.01em;
  color:var(--ink); font-weight:500;
  font-family:"Instrument Serif", serif;
}
.comparison th.col .tag-chip{
  display:inline-block; margin-top:8px;
  font-family:"Geist", sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  padding:4px 10px; border-radius:999px;
  background: color-mix(in oklab, var(--col-color, var(--ink)) 14%, transparent);
  color: var(--col-ink, var(--ink-2));
}
.comparison td.row-label{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; width:220px;
}
.comparison td{ color: var(--ink); font-weight:400; }
.comparison td b{ color: var(--ink); font-weight:600; }
.comparison tr.highlight td{ background: color-mix(in oklab, var(--terracotta) 6%, var(--paper)); }

/* ===================================================================
   STEP RAILS (sequential)
   =================================================================== */
.rail{
  margin-top:28px;
  display:flex; flex-direction:column;
  border-top:1px solid var(--ink);
  flex:1;
  min-height:0;
}
.rail-item{
  --accent: var(--federal);
  --accent-ink: var(--federal-ink);
  display:grid;
  grid-template-columns: 88px 1.2fr 1fr;
  gap:32px;
  padding: 22px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.rail-item.state{ --accent: var(--state); --accent-ink: var(--state-ink); }
.rail-item.municipal{ --accent: var(--municipal); --accent-ink: var(--municipal-ink); }
.rail-item .step-no{
  font-family:"Instrument Serif", serif;
  font-size:48px; line-height:1; color: var(--accent-ink);
  font-style: italic;
}
.rail-item .title{
  display:flex; flex-direction:column; gap:6px;
}
.rail-item .title .h{ font-size:24px; font-weight:500; color:var(--ink); line-height:1.25; letter-spacing:-0.01em; }
.rail-item .title .meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-family:"JetBrains Mono", monospace; font-size:12px; color:var(--ink-3);
}
.rail-item .title .meta .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-2);
}
.rail-item .title .meta .chip .d{ width:6px; height:6px; border-radius:999px; background:var(--accent); }
.rail-item .desc{ font-size:16px; line-height:1.5; color:var(--ink-2); }
.rail-item .desc .req{ display:block; margin-top:6px; color:var(--ink-3); font-size:13px; }

/* ===================================================================
   DATA CARDS / NUMERIC TABLES (withholdings, costs, UMA)
   =================================================================== */
.flow{
  position:relative;
  display:flex; flex-direction:column; gap:0;
}
.flow .row{
  display:grid; grid-template-columns: 56px 1fr 200px;
  align-items:center; gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.flow .row:first-child{ border-top:1px solid var(--ink); }
.flow .row.total{ border-bottom:1px solid var(--ink); border-top:1px solid var(--ink); }
.flow .badge{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono", monospace; font-size:12px; font-weight:600;
  background: var(--row-color, var(--paper-2));
  color: var(--row-ink, var(--ink-2));
  border:1px solid var(--row-border, var(--line));
}
.flow .row.isr{
  --row-color: color-mix(in oklab, var(--terracotta) 12%, var(--paper));
  --row-ink: var(--terracotta-ink);
  --row-border: color-mix(in oklab, var(--terracotta) 30%, var(--line));
}
.flow .row.iva{
  --row-color: color-mix(in oklab, var(--ochre) 18%, var(--paper));
  --row-ink: var(--ochre-ink);
  --row-border: color-mix(in oklab, var(--ochre) 40%, var(--line));
}
.flow .row.ish{
  --row-color: color-mix(in oklab, var(--teal) 14%, var(--paper));
  --row-ink: var(--teal-ink);
  --row-border: color-mix(in oklab, var(--teal) 34%, var(--line));
}
.flow .label{ display:flex; flex-direction:column; gap:4px; }
.flow .label .name{ font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-0.01em; }
.flow .label .desc{ font-size:14px; color:var(--ink-3); line-height:1.4; }
.flow .amt{
  text-align:right;
  font-family:"JetBrains Mono", monospace;
  font-size:26px; color:var(--ink); font-weight:500; letter-spacing:-0.02em;
}
.flow .amt .rate{
  display:block; font-size:12px; color:var(--ink-3);
  letter-spacing:0.04em; margin-bottom:2px;
}
.flow .row.total .amt{ font-size:32px; }
.flow .row.total .label .name{ font-size:22px; }

.net-card{
  margin-top:26px;
  padding:24px 28px;
  background: color-mix(in oklab, var(--terracotta) 8%, var(--paper));
  border:1px solid color-mix(in oklab, var(--terracotta) 25%, var(--line));
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:end;
}
.net-card .k{
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--terracotta-ink); font-weight:600;
}
.net-card .big{
  font-family:"Instrument Serif", serif; font-size:68px; line-height:1;
  color:var(--ink); margin-top:4px;
}
.net-card .big .unit{
  font-family:"JetBrains Mono", monospace; font-size:22px;
  color:var(--ink-3); vertical-align:4px; margin-left:6px;
}
.net-card .note{ font-size:14px; color:var(--ink-2); line-height:1.45; max-width:300px; }

/* Warn box */
.warn{
  border:1px solid color-mix(in oklab, var(--terracotta) 30%, var(--line));
  padding:16px 20px;
  display:grid; grid-template-columns: 22px 1fr; gap:14px; align-items:start;
  background: color-mix(in oklab, var(--terracotta) 5%, var(--paper));
}
.warn .ico{
  width:16px; height:16px; margin-top:6px;
  background: var(--terracotta);
  transform: rotate(45deg);
}
.warn .t{ font-size:15px; line-height:1.5; color:var(--ink-2); }
.warn .t b{ color:var(--terracotta-ink); font-weight:600; }

.info{
  border:1px solid var(--line);
  padding:16px 20px;
  display:grid; grid-template-columns: 22px 1fr; gap:14px; align-items:start;
  background: var(--paper-2);
}
.info .ico{
  width:12px; height:12px; margin-top:6px; border-radius:50%;
  background: var(--teal);
}
.info .t{ font-size:15px; line-height:1.5; color:var(--ink-2); }
.info .t b{ color:var(--teal-ink); font-weight:600; }

/* ===================================================================
   MUNICIPAL MATRIX (slide 16)
   =================================================================== */
.matrix{
  margin-top: 28px;
  flex:1;
}
.matrix table{
  width:100%; border-collapse:collapse;
  font-size:15px;
  font-family:"JetBrains Mono", monospace;
}
.matrix th, .matrix td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align: top;
}
.matrix thead tr:first-child th{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:18px 16px;
}
.matrix thead th{
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--ink-3); font-weight:500;
  font-family:"Geist", sans-serif;
}
.matrix thead th.muni{
  font-family:"Instrument Serif", serif;
  font-size:22px; text-transform:none; letter-spacing:-0.01em;
  color:var(--ink); font-weight:400;
}
.matrix thead th.muni .sub{
  display:block; font-family:"Geist", sans-serif;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3); margin-top:4px; font-weight:500;
}
.matrix td.label{
  font-family:"Geist", sans-serif;
  font-size:15px; color:var(--ink); font-weight:500; width:260px;
}
.matrix td.label .sub{
  display:block; font-size:12px; color:var(--ink-3);
  font-weight:400; margin-top:2px; letter-spacing:0.02em;
}
.matrix td .range{ color: var(--ink); }
.matrix td .range .low{ color:var(--ink-3); }
.matrix tfoot td{ border-bottom:0; padding-top:16px; color:var(--ink-3); font-size:12px; }

/* ===================================================================
   CHECKLIST (slide 23)
   =================================================================== */
.check-grid{
  margin-top: 28px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top:1px solid var(--ink);
  flex:1;
}
.check-col{
  padding: 14px 20px;
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.check-col:first-child{ padding-left:0; }
.check-col:last-child{ border-right:0; padding-right:0; }
.check-col .h{
  font-family:"Instrument Serif", serif;
  font-size:26px; line-height:1; color: var(--accent-ink, var(--terracotta-ink));
  margin-bottom:4px;
}
.check-col.state{ --accent-ink: var(--teal-ink); }
.check-col.municipal{ --accent-ink: var(--ochre-ink); }
.check-col .sub{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
  margin-bottom: 6px;
}
.check-item{
  display:grid; grid-template-columns: 16px 1fr 64px;
  gap:10px; align-items:baseline;
  padding: 3.5px 0;
  border-bottom: 1px dashed var(--line);
  font-size:12.5px; line-height:1.3; color:var(--ink);
}
.check-item:last-child{ border-bottom:0; }
.check-item .box{
  width:11px; height:11px; border:1.5px solid var(--ink-3);
  display:block; margin-top:3px;
}
.check-item .per{
  font-family:"JetBrains Mono", monospace; font-size:10px;
  color:var(--ink-3); text-align:right; letter-spacing:0.02em;
}
.check-item .t{ color:var(--ink); font-size:13px; }
.check-item .t .sub{ display:block; font-size:11px; color:var(--ink-3); margin-top:1px; font-weight:400; letter-spacing:0; text-transform:none; }

/* ===================================================================
   FAQ (slide 25)
   =================================================================== */
.faq{
  margin-top:28px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
  flex:1;
  border-top:1px solid var(--ink);
}
.faq .q{
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: baseline;
}
.faq .q .n{
  font-family:"Instrument Serif", serif; font-style:italic;
  font-size:22px; color:var(--terracotta-ink); line-height:1;
}
.faq .q .ask{ font-size:16px; font-weight:500; color:var(--ink); line-height:1.3; margin-bottom:6px; }
.faq .q .ans{ font-size:14px; color:var(--ink-2); line-height:1.5; }
.faq .q .ans b{ color:var(--ink); font-weight:600; }

/* ===================================================================
   CONTRACTS / INSURANCE — 3-col cards
   =================================================================== */
.triples{
  margin-top:28px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--ink);
  flex:1;
}
.triple{
  --accent: var(--forest);
  --accent-ink: var(--forest-ink);
  padding:26px 32px 24px 0;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
}
.triple:first-child{ padding-left:0; padding-right:40px; }
.triple:not(:first-child){ padding-left:40px; padding-right:40px; }
.triple:last-child{ border-right:0; padding-right:0; }
.triple.v2{ --accent: var(--teal); --accent-ink: var(--teal-ink); }
.triple.v3{ --accent: var(--terracotta); --accent-ink: var(--terracotta-ink); }
.triple .idx{
  font-family:"JetBrains Mono", monospace; font-size:12px;
  letter-spacing:0.1em; color:var(--ink-3);
}
.triple .h{
  font-family:"Instrument Serif", serif; font-size:42px; line-height:1;
  color:var(--accent-ink);
}
.triple .sub{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.triple .desc{ font-size:15.5px; line-height:1.5; color:var(--ink-2); }
.triple .list{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.triple .list .li{
  display:grid; grid-template-columns:14px 1fr; gap:10px;
  font-size:14px; color:var(--ink); line-height:1.4;
}
.triple .list .li::before{
  content:""; width:6px; height:6px; background: var(--accent);
  margin-top:7px;
}
.triple .meta{
  margin-top:auto;
  padding-top:14px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); line-height:1.4;
  letter-spacing:0.02em;
}
.triple .meta b{ color:var(--ink); font-weight:600; }

/* ===================================================================
   COST MASTER TABLE — 2-col with totals
   =================================================================== */
.cost-table{
  margin-top:18px;
  flex:1;
  display:grid; grid-template-columns: 1.6fr 1fr; gap: 0 48px;
}
.cost-col{
  display:flex; flex-direction:column;
}
.cost-col h4{
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin:0 0 8px;
}
.cost-col table{
  width:100%; border-collapse:collapse; font-size:13px;
}
.cost-col table tr{ border-bottom:1px solid var(--line); }
.cost-col table tr:first-child{ border-top:1px solid var(--ink); }
.cost-col table td{
  padding:3.5px 0;
  font-family:"JetBrains Mono", monospace;
  color:var(--ink);
  vertical-align: middle;
  white-space: nowrap;
}
.cost-col table td.name{ font-family:"Geist", sans-serif; color:var(--ink); font-weight:500; width:54%; font-size:13.5px; }
.cost-col table td.name .lvl{
  font-family:"JetBrains Mono", monospace; font-size:9.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3);
  margin-left:10px; font-weight:400;
}
.cost-col table td.amt{ text-align:right; font-size:12.5px; color:var(--ink); }
.cost-col table td.amt .u{ color:var(--ink-3); font-size:9.5px; margin-left:6px; letter-spacing:0.02em; }

.totals-card{
  padding: 22px 26px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  display:flex; flex-direction:column; gap:20px;
  height: fit-content;
}
.totals-card .t{
  display:flex; flex-direction:column; gap:6px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.totals-card .t:last-child{ border-bottom:0; padding-bottom:0; }
.totals-card .k{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.totals-card .v{
  font-family:"Instrument Serif", serif; font-size:36px; line-height:1;
  color:var(--ink);
}
.totals-card .v .unit{ font-family:"JetBrains Mono", monospace; font-size:14px; color:var(--ink-3); }
.totals-card .note{ font-size:12.5px; color:var(--ink-2); line-height:1.45; }

/* ===================================================================
   GLOSSARY
   =================================================================== */
.gloss-grid{
  margin-top:28px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px;
  flex:1;
  overflow:hidden;
}
.gloss{ display:flex; flex-direction:column; gap:4px; }
.gloss .term{
  font-family:"Instrument Serif", serif; font-size:22px; color:var(--ink);
  line-height:1;
  display:flex; align-items:baseline; gap:10px;
}
.gloss .term .pill{
  font-family:"JetBrains Mono", monospace; font-size:10px;
  letter-spacing:0.14em; padding:2px 7px; border:1px solid var(--line);
  color:var(--ink-3); text-transform:uppercase; border-radius:2px;
}
.gloss .def{ font-size:13.5px; line-height:1.5; color:var(--ink-2); }

/* ===================================================================
   BIG-NUMBER HERO (for ISH slide, UMA, costs shock)
   =================================================================== */
.number-hero{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:64px;
  margin-top:24px;
  flex:1;
}
.number-hero .stat{
  font-family:"Instrument Serif", serif;
  font-size: 260px; line-height:0.9; letter-spacing:-0.04em;
  color: var(--accent-ink, var(--terracotta-ink));
}
.number-hero .stat sup{
  font-size: 60px; vertical-align:top; color: var(--accent, var(--terracotta));
  font-family:"Instrument Serif", serif;
  margin-left: 6px;
}
.number-hero .stat .bar{
  display:block;
  font-size:16px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; font-family:"Geist", sans-serif;
  margin-top:20px; padding-top:16px; border-top: 1px solid var(--line);
  letter-spacing:0.16em;
}

/* ===================================================================
   SMALL — placeholder image
   =================================================================== */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--ink) 6%, transparent) 0 1px,
      transparent 1px 10px),
    var(--paper-2);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-3);
  font-family:"JetBrains Mono", monospace;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
}
.ph::before{ content: "["; margin-right:4px; color:var(--ink-4); }
.ph::after{ content: "]"; margin-left:4px; color:var(--ink-4); }

/* ===================================================================
   2-COL GENERIC
   =================================================================== */
.two-col{
  margin-top:28px;
  display:grid; grid-template-columns: 1fr 1fr; gap:64px;
  flex:1;
  min-height:0;
}

/* ===================================================================
   LAST SLIDE / CLOSING
   =================================================================== */
.closing{
  padding: 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.closing .l{
  padding: 88px 72px 72px 110px;
  display:flex; flex-direction:column; justify-content:space-between;
  background: var(--paper-2);
  border-right:1px solid var(--line);
}
.closing .r{
  padding: 88px 110px 72px 72px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.closing h1{
  font-family:"Instrument Serif", serif; font-weight:400;
  font-size:96px; line-height:0.96; letter-spacing:-0.02em;
  margin:32px 0 0; color:var(--ink);
}
.closing h1 em{ font-style:italic; color: var(--terracotta-ink); }
.closing .body{ margin-top:32px; font-size:19px; line-height:1.5; color:var(--ink-2); max-width:560px; }

/* ===================================================================
   HOW-AIRBNB-WITHHOLDS — keep sample styling
   =================================================================== */
.money-slide .hero{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:56px;
  margin-top:24px;
  flex:1;
  min-height:0;
}
.money-slide h2{
  font-family:"Instrument Serif", serif; font-weight:400;
  font-size:64px; line-height:1; letter-spacing:-0.015em;
  margin:12px 0 0; max-width:720px;
}
.money-slide h2 em{ font-style:italic; color:var(--terracotta-ink); }
.money-slide .lede{
  margin-top:18px; font-size:17px; line-height:1.5;
  color:var(--ink-2); max-width:560px;
}
.money-slide .scenario{
  margin-top:24px;
  display:flex; flex-direction:column; gap:6px;
  padding:16px 20px;
  background:var(--paper-2);
  border-left:3px solid var(--terracotta);
}
.money-slide .scenario .k{
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600;
}
.money-slide .scenario .v{ font-size:16px; color:var(--ink); line-height:1.4; }
.money-slide .scenario .v b{ font-weight:600; }

/* ===================================================================
   TIMELINE (process flow, e.g. Solidaridad hoja de ruta)
   =================================================================== */
.timeline{
  margin-top:28px;
  flex:1;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--ink);
}
.timeline .tl{
  display:grid; grid-template-columns: 56px 1fr 160px 180px;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  align-items: baseline;
}
.timeline .tl .n{
  font-family:"JetBrains Mono", monospace; font-size:12px;
  color:var(--ink-3); letter-spacing:0.02em;
}
.timeline .tl .t{ font-size:17px; color:var(--ink); font-weight:500; }
.timeline .tl .a{ font-size:13.5px; color:var(--ink-3); }
.timeline .tl .d{
  font-family:"JetBrains Mono", monospace; font-size:13px;
  color:var(--ink-2); text-align:right;
}

/* ===================================================================
   TWEAKS PANEL
   =================================================================== */
.tweaks-panel{
  position:fixed; right:24px; bottom:68px; z-index:2147483100;
  width: 280px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  font-family:"Geist", sans-serif;
  font-size: 13px;
  display:none;
}
.tweaks-panel[data-open]{ display:block; }
.tweaks-panel h4{
  margin:0; padding: 12px 16px; font-size:11px;
  letter-spacing: 0.22em; text-transform:uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-weight:600;
}
.tweaks-row{
  display:flex; flex-direction:column; gap:6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.tweaks-row .lbl{
  display:flex; justify-content:space-between;
  font-size:11px; text-transform:uppercase; letter-spacing:0.14em;
  color:#666; font-weight:600;
}
.tweaks-row .lbl .val{ color:#111; font-weight:500; letter-spacing:0.04em; }
.tweaks-row .opts{ display:flex; gap:6px; flex-wrap:wrap; }
.tweaks-row .opt{
  padding: 6px 10px; border:1px solid rgba(0,0,0,0.12);
  font-size:11px; cursor:pointer; user-select:none;
  background:#fff;
}
.tweaks-row .opt[data-active]{ background:#111; color:#fff; border-color:#111; }
.tweaks-row input[type=range]{ width:100%; }

/* Density tweak */
body[data-density="compact"] .slide{ padding: 56px 88px 44px; }
body[data-density="airy"] .slide{ padding: 96px 140px 80px; }

/* Accent tweak — overrides --terracotta */
body[data-accent="teal"]{ --terracotta: oklch(0.52 0.12 200); --terracotta-ink: oklch(0.34 0.09 205); }
body[data-accent="forest"]{ --terracotta: oklch(0.48 0.10 155); --terracotta-ink: oklch(0.32 0.08 155); }
body[data-accent="plum"]{ --terracotta: oklch(0.45 0.13 340); --terracotta-ink: oklch(0.32 0.10 340); }
body[data-accent="ink"]{ --terracotta: oklch(0.28 0.04 250); --terracotta-ink: oklch(0.22 0.03 250); }

/* Display font tweak */
body[data-display="serif"] { }
body[data-display="sans"] .serif,
body[data-display="sans"] .cover h1.display,
body[data-display="sans"] .section-title h1,
body[data-display="sans"] .money-slide h2,
body[data-display="sans"] .net-card .big,
body[data-display="sans"] .layer .name,
body[data-display="sans"] .closing h1,
body[data-display="sans"] .gloss .term,
body[data-display="sans"] .triple .h,
body[data-display="sans"] .check-col .h,
body[data-display="sans"] .totals-card .v,
body[data-display="sans"] .number-hero .stat,
body[data-display="sans"] .faq .q .n,
body[data-display="sans"] .rail-item .step-no,
body[data-display="sans"] .matrix thead th.muni,
body[data-display="sans"] .comparison th.col{
  font-family:"Geist", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* Dark mode */
body[data-theme="dark"]{
  --paper: oklch(0.18 0.012 250);
  --paper-2: oklch(0.22 0.014 250);
  --paper-3: oklch(0.26 0.016 250);
  --ink: oklch(0.96 0.006 80);
  --ink-2: oklch(0.82 0.008 80);
  --ink-3: oklch(0.66 0.010 80);
  --ink-4: oklch(0.50 0.010 80);
  --line: oklch(0.32 0.014 250);
  --rule: oklch(0.42 0.014 250);
  --sand: oklch(0.30 0.020 75);
}


/* ===================================================================
   THEME PRESETS — each sets palette + type atlas in one go
   =================================================================== */

/* 01 · EDITORIAL (default) — warm terracotta/teal/ochre on cream paper */
/* (the default :root vars already express this) */

/* 02 · CARIBE — deep teal + coral on ivory, hospitality magazine */
body[data-theme-preset="caribe"]{
  --paper:      oklch(0.975 0.012 95);
  --paper-2:    oklch(0.955 0.018 95);
  --paper-3:    oklch(0.93 0.024 95);
  --sand:       oklch(0.90 0.030 90);
  --line:       oklch(0.82 0.018 90);
  --rule:       oklch(0.70 0.014 90);
  --ink:        oklch(0.24 0.04 220);
  --ink-2:      oklch(0.38 0.03 220);
  --ink-3:      oklch(0.54 0.02 220);
  --ink-4:      oklch(0.72 0.015 220);
  --terracotta: oklch(0.62 0.17 25);    /* coral */
  --terracotta-ink: oklch(0.42 0.14 25);
  --teal:       oklch(0.42 0.10 210);
  --teal-ink:   oklch(0.28 0.09 215);
  --ochre:      oklch(0.72 0.13 80);
  --ochre-ink:  oklch(0.48 0.11 80);
  --forest:     oklch(0.50 0.09 170);
  --forest-ink: oklch(0.34 0.08 170);
}
body[data-theme-preset="caribe"] .serif,
body[data-theme-preset="caribe"] .cover h1.display,
body[data-theme-preset="caribe"] .section-title h1,
body[data-theme-preset="caribe"] .closing h1,
body[data-theme-preset="caribe"] .money-slide h2,
body[data-theme-preset="caribe"] .check-col .h,
body[data-theme-preset="caribe"] .totals-card .v,
body[data-theme-preset="caribe"] .number-hero .stat,
body[data-theme-preset="caribe"] .gloss .term,
body[data-theme-preset="caribe"] .triple .h,
body[data-theme-preset="caribe"] .layer .name,
body[data-theme-preset="caribe"] .net-card .big,
body[data-theme-preset="caribe"] .faq .q .n,
body[data-theme-preset="caribe"] .rail-item .step-no{
  font-family:"Playfair Display", "Instrument Serif", serif !important;
}
body[data-theme-preset="caribe"]{ font-family:"Inter", ui-sans-serif, system-ui, sans-serif; }

/* 03 · MECANOGRAFIADO — mono-everything, bureaucratic receipt/filing */
body[data-theme-preset="mecano"]{
  --paper:      oklch(0.97 0.005 95);
  --paper-2:    oklch(0.95 0.006 95);
  --paper-3:    oklch(0.92 0.008 95);
  --sand:       oklch(0.88 0.010 95);
  --line:       oklch(0.80 0.006 95);
  --rule:       oklch(0.62 0.006 95);
  --ink:        oklch(0.18 0.006 95);
  --ink-2:      oklch(0.32 0.006 95);
  --ink-3:      oklch(0.50 0.008 95);
  --ink-4:      oklch(0.68 0.008 95);
  --terracotta: oklch(0.52 0.20 27);   /* single stamp red */
  --terracotta-ink: oklch(0.42 0.18 27);
  --teal:       oklch(0.35 0.008 95);
  --teal-ink:   oklch(0.25 0.008 95);
  --ochre:      oklch(0.45 0.010 95);
  --ochre-ink:  oklch(0.32 0.010 95);
  --forest:     oklch(0.40 0.010 95);
  --forest-ink: oklch(0.28 0.010 95);
}
body[data-theme-preset="mecano"],
body[data-theme-preset="mecano"] .serif,
body[data-theme-preset="mecano"] h1, body[data-theme-preset="mecano"] h2,
body[data-theme-preset="mecano"] h3, body[data-theme-preset="mecano"] h4,
body[data-theme-preset="mecano"] .cover h1.display,
body[data-theme-preset="mecano"] .section-title h1,
body[data-theme-preset="mecano"] .closing h1,
body[data-theme-preset="mecano"] .check-col .h,
body[data-theme-preset="mecano"] .totals-card .v,
body[data-theme-preset="mecano"] .number-hero .stat,
body[data-theme-preset="mecano"] .gloss .term,
body[data-theme-preset="mecano"] .triple .h,
body[data-theme-preset="mecano"] .layer .name,
body[data-theme-preset="mecano"] .money-slide h2,
body[data-theme-preset="mecano"] .net-card .big,
body[data-theme-preset="mecano"] .faq .q .n,
body[data-theme-preset="mecano"] .rail-item .step-no{
  font-family:"JetBrains Mono", ui-monospace, monospace !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
body[data-theme-preset="mecano"] em{ font-style: normal; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* 04 · MODERNISTA — DM Serif Display + Space Grotesk, electric blue, gallery-contemporary */
body[data-theme-preset="modernista"]{
  --paper:      oklch(0.98 0.003 250);
  --paper-2:    oklch(0.96 0.004 250);
  --paper-3:    oklch(0.93 0.005 250);
  --sand:       oklch(0.90 0.008 250);
  --line:       oklch(0.82 0.006 250);
  --rule:       oklch(0.60 0.006 250);
  --ink:        oklch(0.16 0.012 250);
  --ink-2:      oklch(0.32 0.010 250);
  --ink-3:      oklch(0.50 0.010 250);
  --ink-4:      oklch(0.70 0.008 250);
  --terracotta: oklch(0.54 0.22 265);  /* electric blue */
  --terracotta-ink: oklch(0.40 0.19 265);
  --teal:       oklch(0.28 0.04 250);
  --teal-ink:   oklch(0.20 0.04 250);
  --ochre:      oklch(0.60 0.14 80);
  --ochre-ink:  oklch(0.42 0.12 80);
  --forest:     oklch(0.48 0.09 155);
  --forest-ink: oklch(0.32 0.08 155);
}
body[data-theme-preset="modernista"]{ font-family:"Space Grotesk", "Geist", ui-sans-serif, sans-serif; }
body[data-theme-preset="modernista"] .serif,
body[data-theme-preset="modernista"] .cover h1.display,
body[data-theme-preset="modernista"] .section-title h1,
body[data-theme-preset="modernista"] .closing h1,
body[data-theme-preset="modernista"] .money-slide h2,
body[data-theme-preset="modernista"] .check-col .h,
body[data-theme-preset="modernista"] .totals-card .v,
body[data-theme-preset="modernista"] .number-hero .stat,
body[data-theme-preset="modernista"] .gloss .term,
body[data-theme-preset="modernista"] .triple .h,
body[data-theme-preset="modernista"] .layer .name,
body[data-theme-preset="modernista"] .net-card .big,
body[data-theme-preset="modernista"] .faq .q .n,
body[data-theme-preset="modernista"] .rail-item .step-no{
  font-family:"DM Serif Display", "Instrument Serif", serif !important;
  font-weight:400 !important;
  letter-spacing:-0.01em !important;
}

/* 05 · ADOBE & SOL — rust + clay + olive, colonial warmth */
body[data-theme-preset="adobe"]{
  --paper:      oklch(0.96 0.018 75);
  --paper-2:    oklch(0.93 0.024 72);
  --paper-3:    oklch(0.90 0.030 70);
  --sand:       oklch(0.87 0.035 68);
  --line:       oklch(0.78 0.022 70);
  --rule:       oklch(0.62 0.020 65);
  --ink:        oklch(0.26 0.04 45);
  --ink-2:      oklch(0.40 0.035 50);
  --ink-3:      oklch(0.56 0.028 55);
  --ink-4:      oklch(0.72 0.022 60);
  --terracotta: oklch(0.50 0.17 35);   /* rust */
  --terracotta-ink: oklch(0.36 0.14 35);
  --teal:       oklch(0.48 0.08 120);  /* olive */
  --teal-ink:   oklch(0.34 0.07 120);
  --ochre:      oklch(0.66 0.14 65);   /* clay */
  --ochre-ink:  oklch(0.44 0.12 65);
  --forest:     oklch(0.42 0.09 140);
  --forest-ink: oklch(0.30 0.08 140);
}
body[data-theme-preset="adobe"]{ font-family:"Sora", "Geist", ui-sans-serif, sans-serif; }
body[data-theme-preset="adobe"] .serif,
body[data-theme-preset="adobe"] .cover h1.display,
body[data-theme-preset="adobe"] .section-title h1,
body[data-theme-preset="adobe"] .closing h1,
body[data-theme-preset="adobe"] .money-slide h2,
body[data-theme-preset="adobe"] .check-col .h,
body[data-theme-preset="adobe"] .totals-card .v,
body[data-theme-preset="adobe"] .number-hero .stat,
body[data-theme-preset="adobe"] .gloss .term,
body[data-theme-preset="adobe"] .triple .h,
body[data-theme-preset="adobe"] .layer .name,
body[data-theme-preset="adobe"] .net-card .big,
body[data-theme-preset="adobe"] .faq .q .n,
body[data-theme-preset="adobe"] .rail-item .step-no{
  font-family:"Cormorant Garamond", "Instrument Serif", serif !important;
  font-weight:500 !important;
  letter-spacing:-0.015em !important;
}

/* 06 · MONOCROMO — pure B/W, max contrast, brutalist with single pop */
body[data-theme-preset="mono"]{
  --paper:      #ffffff;
  --paper-2:    #f5f5f5;
  --paper-3:    #ebebeb;
  --sand:       #dcdcdc;
  --line:       #c8c8c8;
  --rule:       #000000;
  --ink:        #0a0a0a;
  --ink-2:      #2a2a2a;
  --ink-3:      #5a5a5a;
  --ink-4:      #8a8a8a;
  --terracotta: #ff3b00;   /* single pop */
  --terracotta-ink: #d12f00;
  --teal:       #0a0a0a;
  --teal-ink:   #0a0a0a;
  --ochre:      #5a5a5a;
  --ochre-ink:  #2a2a2a;
  --forest:     #2a2a2a;
  --forest-ink: #0a0a0a;
}
body[data-theme-preset="mono"] .serif,
body[data-theme-preset="mono"] .cover h1.display,
body[data-theme-preset="mono"] .section-title h1,
body[data-theme-preset="mono"] .closing h1{
  font-weight:400 !important;
  letter-spacing:-0.02em !important;
}

/* Caribe dark overlay still works via [data-theme="dark"] cascade;
   theme presets take precedence for colors. If user combines, theme-preset wins. */


/* ===== THEMES PICKER UI ===== */
.tweaks-panel{ width: 340px !important; max-height: 80vh; overflow-y:auto; }
.themes-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.theme-card{
  padding: 10px 12px; cursor:pointer;
  border-right: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display:flex; flex-direction:column; gap:6px;
  background:#fff; user-select:none;
  transition: background 0.12s;
}
.theme-card:nth-child(2n){ border-right:0; }
.theme-card:hover{ background:#fafafa; }
.theme-card[data-active]{ background:#111; color:#fff; }
.theme-card[data-active] .theme-sub{ color: #aaa !important; }
.theme-swatches{ display:flex; gap:3px; height:14px; }
.theme-swatches span{ flex:1; display:block; }
.theme-label{ display:flex; flex-direction:column; gap:1px; }
.theme-name{ font-size:14px; font-weight:500; letter-spacing:-0.005em; line-height:1.1; }
.theme-sub{ font-size:10px; color:#888; letter-spacing:0.02em; line-height:1.2; }