/* ============================================================
   Cota — Shared Theme + Chrome
   Tokens canónicos V3 "Walnut & Eléctrico". Masthead + colofón
   compartidos entre todas las páginas del sitio.
   ============================================================ */

:root {
  /* Color */
  --cream-50:#FBF7EE; --cream-100:#F7F1E1; --cream-200:#EFE6CF;
  --capp-300:#E2D2B5; --capp-500:#D8C5A5; --capp-700:#B8A480;
  --walnut-100:#5C4D3C; --walnut-300:#3F2E1F; --walnut-500:#2C1F13; --walnut-700:#1B130B;
  --royal-300:#3A5BB5; --royal-500:#0E2A6A; --royal-700:#061638;
  --electric-300:#7AA9F0; --electric-500:#4181E8; --electric-700:#1E5DC0;
  --stone-200:#C0B19A; --stone-400:#9C8A6F; --stone-600:#7C6B53; --stone-800:#574836;

  /* Excel functional palette (only in product simulator) */
  --excel-green-bg:#C6EFCE; --excel-green-fg:#006100;
  --excel-amber-bg:#FFEB9C; --excel-amber-fg:#9C5700;
  --excel-red-bg:#FFC7CE;   --excel-red-fg:#9C0006;
  --excel-info-bg:#D9E1F2;  --excel-info-fg:#1F4E78;
  --excel-header-bg:#1F4E78; --excel-band:#F2F2F2;

  /* Type */
  --serif: 'Charter','Iowan Old Style','Apple Garamond',Palatino,Georgia,serif;
  --sans: 'Inter','Helvetica Neue',Arial,system-ui,sans-serif;
  --mono: 'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  /* Spacing 8px rhythm */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:64px; --s-7:96px; --s-8:128px;

  /* Grid */
  --container:1280px;
  --gutter:24px;

  /* Voltage — page-overridable */
  --voltage: var(--electric-500);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--cream-100);
  color:var(--walnut-500);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  font-feature-settings:"kern","liga";
}
img,svg,video { max-width:100%; display:block; }
a { color:var(--royal-500); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; transition:color 120ms cubic-bezier(.4,0,.2,1); }
a:hover { color:var(--royal-300); }
a:focus-visible { outline:2px solid var(--voltage); outline-offset:2px; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
hr { border:none; border-top:1px solid rgba(28,19,11,.18); margin:0; }

.wrap { width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
@media (min-width:1024px){ .wrap{ padding:0 40px; } }

.sans { font-family:var(--sans); }
.serif { font-family:var(--serif); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.005em; }
.eyebrow {
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--stone-800);
}
.rule { width:48px; height:2px; background:var(--voltage); }
.rule--full { width:100%; height:1px; background:var(--walnut-500); opacity:.18; }
.rule--electric { width:100%; height:1px; background:var(--voltage); opacity:.5; }

/* ====== MASTHEAD ====== */
.masthead {
  background:var(--cream-100);
  border-bottom:1.5px solid var(--walnut-500);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(2px);
}
.masthead__top {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 0 12px;
  border-bottom:1px solid rgba(28,19,11,.18);
  font-family:var(--mono); font-size:11px; color:var(--stone-600);
  letter-spacing:.04em;
}
.masthead__top-left,.masthead__top-right { display:flex; gap:24px; flex-wrap:wrap; }
.masthead__top-right { color:var(--stone-800); }
.masthead__main {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  gap:24px;
}
.wordmark {
  font-family:var(--serif);
  font-size:32px; font-weight:700;
  letter-spacing:-0.02em;
  color:var(--walnut-500);
  text-decoration:none;
  line-height:1;
}
.nav { display:flex; gap:28px; font-family:var(--sans); font-size:14px; font-weight:500; }
.nav a { color:var(--walnut-500); text-decoration:none; letter-spacing:.01em; padding-bottom:2px; border-bottom:1px solid transparent; }
.nav a:hover { color:var(--royal-500); border-bottom-color:var(--voltage); }
.nav a.is-active { color:var(--walnut-500); border-bottom-color:var(--walnut-500); }
.masthead__cta {
  font-family:var(--sans); font-size:13px; font-weight:600;
  background:var(--royal-500); color:var(--cream-100);
  padding:9px 18px; border-radius:2px; text-decoration:none;
  transition:background 120ms cubic-bezier(.4,0,.2,1);
}
.masthead__cta:hover { background:var(--royal-700); color:var(--cream-100); }

@media (max-width:900px){
  .nav { display:none; }
  .masthead__top { font-size:10px; gap:12px; }
  .masthead__top-left, .masthead__top-right { gap:12px; }
  .wordmark { font-size:26px; }
}

/* ====== COLOFÓN / FOOTER ====== */
.colofon {
  background:var(--walnut-700);
  color:var(--cream-200);
  padding:80px 0 40px;
  font-family:var(--sans); font-size:13px;
}
.colofon__top {
  display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(247,241,225,.15);
}
@media (max-width:820px){ .colofon__top { grid-template-columns: 1fr 1fr; gap:32px; } }
.colofon__brand .wm {
  font-family:var(--serif); font-size:48px; font-weight:700;
  color:var(--cream-100); letter-spacing:-0.02em; line-height:1;
  margin:0 0 16px;
}
.colofon__brand p { font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.5; color:var(--capp-500); margin:0; max-width:30ch; }
.colofon__col-head { font-family:var(--sans); font-size:11px; font-weight:500; color:var(--cream-100); letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; }
.colofon__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.colofon__col a { color:var(--capp-500); text-decoration:none; }
.colofon__col a:hover { color:var(--cream-100); text-decoration:underline; text-underline-offset:.2em; }
.colofon__col li small { display:block; font-family:var(--mono); font-size:10px; color:var(--stone-400); margin-top:2px; letter-spacing:.04em; }
.colofon__bottom {
  padding-top:32px;
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:16px;
  font-family:var(--mono); font-size:11px; color:var(--stone-400); letter-spacing:.04em;
}
.colofon__bottom em { color:var(--capp-500); font-style:normal; }

/* ====== Reusable building blocks ====== */

/* Folio header — sub-masthead per página */
.folio {
  background:var(--cream-100);
  border-bottom:1px solid rgba(28,19,11,.18);
  padding:18px 0;
  font-family:var(--mono); font-size:11px;
  color:var(--stone-600); letter-spacing:.06em;
}
.folio__inner { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.folio strong { color:var(--walnut-500); font-weight:500; }

/* Section spine */
.section { padding:96px 0; position:relative; }
.section--cream { background:var(--cream-100); }
.section--cream-50 { background:var(--cream-50); }
.section--capp { background:var(--capp-500); }
.section--walnut { background:var(--walnut-500); color:var(--cream-100); }
.section--walnut-deep { background:var(--walnut-700); color:var(--cream-200); }
@media (max-width:820px){ .section { padding:64px 0; } }

.section__head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:48px; }
.section__num { font-family:var(--mono); font-size:13px; color:var(--stone-600); letter-spacing:.08em; }
.section__title { font-family:var(--sans); font-size:40px; font-weight:600; letter-spacing:-0.02em; line-height:1.05; color:var(--walnut-500); margin:8px 0 0; max-width:18ch; }
.section--walnut .section__title, .section--walnut-deep .section__title { color:var(--cream-100); }
.section__sub { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--stone-600); max-width:40ch; }
.section--walnut .section__sub, .section--walnut-deep .section__sub { color:var(--capp-500); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:14px; font-weight:600; padding:14px 24px; border-radius:2px; text-decoration:none; transition:background 120ms, color 120ms, border-color 120ms; cursor:pointer; }
.btn--primary { background:var(--royal-500); color:var(--cream-100); }
.btn--primary:hover { background:var(--royal-700); color:var(--cream-100); }
.btn--ghost { background:transparent; color:var(--walnut-500); border:1.5px solid var(--walnut-500); }
.btn--ghost:hover { background:var(--walnut-500); color:var(--cream-100); }
.btn--electric { background:var(--voltage); color:var(--cream-100); }
.btn--electric:hover { background:var(--electric-700); color:var(--cream-100); }

/* Tags */
.tag { display:inline-block; font-family:var(--sans); font-size:11px; font-weight:500; padding:3px 8px; letter-spacing:.04em; border-radius:2px; }
.tag--available { background:var(--voltage); color:var(--cream-100); }
.tag--soon { border:1px solid var(--walnut-500); color:var(--walnut-500); background:transparent; }
.tag--roadmap { color:var(--stone-600); border:1px solid var(--stone-400); background:transparent; }
.tag--draft { background:var(--cream-200); color:var(--stone-800); }

/* Marginalia */
.with-margin { display:grid; grid-template-columns: 1fr 280px; gap:64px; }
@media (max-width:1024px){ .with-margin { grid-template-columns: 1fr; gap:32px; } }
.margin-note {
  font-family:var(--sans); font-size:12px;
  line-height:1.55; color:var(--stone-800);
  border-left:2px solid var(--voltage);
  padding:8px 0 8px 16px;
}
.margin-note__label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--stone-600); text-transform:uppercase; margin-bottom:6px; }

/* Rule labels */
.label-strip {
  display:flex; gap:24px; align-items:center;
  font-family:var(--mono); font-size:11px; color:var(--stone-600);
  letter-spacing:.06em; padding:12px 0;
  border-top:1px solid rgba(28,19,11,.18);
  border-bottom:1px solid rgba(28,19,11,.18);
}
.label-strip strong { color:var(--walnut-500); font-weight:500; }
.section--walnut .label-strip, .section--walnut-deep .label-strip {
  border-color:rgba(247,241,225,.15); color:var(--capp-500);
}
.section--walnut .label-strip strong, .section--walnut-deep .label-strip strong { color:var(--cream-100); }

/* Print overrides */
@media print {
  .masthead, .colofon { background:white; color:black; }
  .section--walnut, .section--walnut-deep { background:white; color:black; }
}

.is-hidden { display:none !important; }