/* ============================================================
   saber sobre café — design system
   Direction: Field Notebook (cuaderno de campo).

   Paper, ink and one warm accent, like a lab notebook:
   - --red is the accent for LARGE text, stamps and marks.
     It is under AA below ~24px on paper, so small text uses
     --red-ink (same hue, darker).
   - Verdict stamps add green / amber / red, always with glyph +
     word, so colour is never the only signal.
   - Neutrals are alpha of --ink, never new hues.
   - The hand face (--hand) is for short notes and labels only.
     Body text, numbers and verdict text never use it.
   Fonts are self-hosted (OFL). The hand face currently ships as
   "Nothing You Could Do" under the family name Kalam; swap the src
   below when kalam.woff2 is added. Body falls back to Public Sans
   until Atkinson Hyperlegible is added.
   ============================================================ */

@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-1dcfa7a0028e4dd2e9e19914d7cc6ee1.woff?vsn=d") format("woff");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-45ac3f4b61c187a0e3d9e6ba1198df6a.woff2?vsn=d") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/fonts/public-sans-italic-c63ef70f797b0c45b7668600c927aa54.woff2?vsn=d") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-70e74b5ca2b13ee5d14d3015eec09fe3.woff?vsn=d") format("woff");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-700-d5b7777214278abff30be05cfa00a079.woff?vsn=d") format("woff");
  font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: Kalam; src: url("/fonts/nothing-you-could-do-b1172702ced6e047c0b4ea5388e1fdb2.woff?vsn=d") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --paper: #eef0e9;
  --card: #fbfbf7;
  --panel: #e6e9df;
  --ink: #1f2430;
  --red: #c4521b;
  --red-ink: #9a3c12;

  --ok: #2f7a4b;
  --warn: #8a5f00;
  --bad: #b0352a;
  --grid: rgba(47, 99, 201, 0.09);

  --wash: rgba(31, 36, 48, 0.05);
  --muted: rgba(31, 36, 48, 0.74);
  /* 0.70 keeps 11px mono text at AA on paper. */
  --faint: rgba(31, 36, 48, 0.70);
  --rule: rgba(31, 36, 48, 0.18);

  --rule-hair: 1px solid var(--rule);
  --rule-mid: 1.5px solid var(--ink);
  --rule-heavy: 1.5px solid var(--ink);
  --rule-dash: 1px dashed rgba(31, 36, 48, 0.3);

  --radius: 14px;
  --shadow: 3px 3px 0 var(--ink);

  --control-h: 48px;
  --control-radius: 10px;
  --control-border: var(--rule-mid);
  --focus-ring: 0 0 0 3px var(--red);

  --measure: 68ch;
  --shell: 1180px;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand: Kalam, "Bradley Hand", "Comic Sans MS", cursive;

  /* Light only for now, whatever the OS asks for. */
  color-scheme: light;
}

/* Dark mode, ready but OFF. Nothing sets data-theme yet; a future toggle
   puts data-theme="dark" on <html>. Do not wire it to
   prefers-color-scheme until Alvaro decides to enable it. */
:root[data-theme="dark"] {
  --paper: #15191f;
  --card: #1f252d;
  --panel: #1a1f26;
  --ink: #ebe8df;
  --red: #ef8a55;
  --red-ink: #f0a072;
  --ok: #5fb27d;
  --warn: #dcaa3e;
  --bad: #e2685a;
  --grid: rgba(108, 156, 240, 0.08);
  --wash: rgba(235, 232, 223, 0.06);
  --muted: rgba(235, 232, 223, 0.76);
  --faint: rgba(235, 232, 223, 0.70);
  --rule: rgba(235, 232, 223, 0.18);
  --rule-dash: 1px dashed rgba(235, 232, 223, 0.3);
  color-scheme: dark;
}

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

/* An author `display` rule outranks the UA stylesheet's [hidden] rule, which
   silently un-hides anything toggled by the attribute. This keeps `hidden`
   authoritative — it is how the consent banner and the no-match block hide. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
strong { font-weight: 700; }

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
}
.hand { font-family: var(--hand); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 14px 20px; z-index: 10; }
.skip:focus { left: 12px; top: 12px; }

/* -- shell ---------------------------------------------------- */

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 40px; }
.measure { max-width: var(--measure); }

.site-header { border-bottom: var(--rule-hair); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 60px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
/* Logo: SVG with the text outlined, so it needs no font. */
.wordmark { display: block; line-height: 0; text-decoration: none; }
.wordmark img { display: block; height: 36px; width: auto; }
.wordmark:hover img { opacity: 0.8; }
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-nav a { font-size: 16px; color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

.site-footer { border-top: var(--rule-hair); margin-top: 72px; padding: 24px 0 48px; }
.site-footer .wrap { display: flex; justify-content: center; }
.site-footer span { font-size: 14px; color: var(--muted); }

/* -- home: hero (rule stamp, MCP hook, ways in) + topic list ---- */

/* One line from tablet up: the size follows the viewport so the question
   always fits the column (its width is ~16.5× the font size). Phones keep
   the large two-line version. */
@media (min-width: 768px) {
  .home-head h1 { white-space: nowrap; font-size: clamp(36px, calc((100vw - 80px) / 16.5), 66px); }
}

/* The rule stamp: a graph-paper card with the three verdict stamps and the
   site's one rule. Real text, so it stays visible on phones (in the flow) and
   floats at the right of the hero on wide screens. */
.home-head { position: relative; }
.hero-note {
  max-width: 460px; margin: 4px 0 0; padding: 12px 14px 12px;
  background: var(--card) linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 22px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hn-stamps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hn-regla { margin: 0; font-size: 16px; line-height: 1.45; }
.hn-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--red-ink); }
@media (min-width: 1100px) {
  /* Two columns: the question on top, the hook and the ways in on the left,
     the rule stamp on the right. In the flow, so nothing overlaps "Temas". */
  .home-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; align-items: start; }
  .home-head h1 { grid-column: 1 / -1; }
  .home-head .hero-note { grid-column: 2; grid-row: 2 / span 2; margin: 0; width: auto; max-width: none; transform: rotate(1.5deg); }
  .home-head .mcp-hint { grid-column: 1; grid-row: 2; margin-top: 0; }
  .home-head .explore { grid-column: 1; grid-row: 3; }
}

.explore {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 18px;
  font-family: var(--mono); font-size: 13px;
}
.explore a { color: var(--red-ink); text-underline-offset: 3px; }
.explore-ai { color: var(--muted); }
.mcp-hint:target { outline: 2px dashed var(--red-ink); outline-offset: 6px; }

.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li { padding: 16px 0; border-bottom: var(--rule-dash); }
.tl-title { font-family: var(--display); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; color: var(--ink); text-decoration: none; }
.tl-title:hover { color: var(--red-ink); }
.tl-q { display: block; margin-top: 4px; color: var(--muted); font-size: 16px; line-height: 1.45; max-width: var(--measure); }

/* /fuentes */
.fuentes-resumen { font-family: var(--mono); font-size: 14px; margin: 0 0 14px; }
.fuentes-indice { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--mono); font-size: 13px; padding-top: 24px; }
.fuentes-indice .n { color: var(--muted); }
.fuente-citada { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.fuente-claims { display: inline-block; margin-left: 6px; font-size: 13px; }
.fuente-claims summary { cursor: pointer; display: inline; }
.fuentes-unver h3 { font-size: 20px; margin: 22px 0 6px; }
.fuentes-pendiente { color: var(--muted); }

/* Topic cards as hooks: label, intriguing headline, one-line tally. */
.topic-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.topic-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 16px;
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.topic-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.topic-card:focus-within { box-shadow: 0 0 0 3px var(--red); }
.tc-title { font-size: clamp(21px, 2vw, 25px); line-height: 1.15; }
.tc-title a { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.tc-title a:focus-visible { outline: none; }
/* The whole card is the link, without nesting the rest inside an <a>. */
.tc-title a::after { content: ""; position: absolute; inset: 0; }
.tc-lead { font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-ink); }
.topic-card:hover .tc-hook { color: var(--red-ink); }
.tc-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12.5px; }
.tc-v { display: inline-flex; gap: 3px; font-weight: 600; }
.tc-confirmada { color: var(--ok); } .tc-matiz { color: var(--warn); } .tc-incorrecta { color: var(--bad); }
.tc-min { margin-left: auto; color: var(--faint); }

/* -- MCP hint under the home search -------------------------------- */

.mcp-hint { margin-top: 16px; max-width: 760px; }
.mcp-hint summary {
  cursor: pointer; list-style: none; display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  font-size: 16px; color: var(--ink);
}
.mcp-hint summary::-webkit-details-marker { display: none; }
.mcp-cta { color: var(--red-ink); text-decoration: underline; text-underline-offset: 3px; }
.mcp-cta::after { content: " +"; font-family: var(--mono); }
.mcp-hint[open] .mcp-cta::after { content: " –"; }
/* Same hand-stamp language as the verdict badges. */
.mcp-tag {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--red); border: 1.5px solid currentColor; border-radius: 6px; padding: 1px 7px; transform: rotate(-3deg);
}
.mcp-hint summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red); border-radius: 4px; }
.mcp-steps { margin-top: 12px; padding: 16px 18px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); }
.mcp-steps p { font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.mcp-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; }
.mcp-steps code { font-family: var(--mono); font-size: 12.5px; background: var(--wash); padding: 1px 6px; border-radius: 5px; word-break: break-all; }

.no-match {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius);
  padding: 18px 20px; margin-top: 28px; transform: rotate(-0.6deg);
}
.no-match p { font-family: var(--hand); font-size: 22px; line-height: 1.35; max-width: 46ch; }



.ask-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 640px; }
.ask-form label { font-size: 16px; color: var(--muted); }
.ask-row { display: flex; gap: 8px; }
.ask-row input {
  flex: 1; min-width: 0; min-height: var(--control-h); padding: 0 14px;
  font-family: var(--sans); font-size: 17px; color: var(--ink);
  background: var(--paper); border: var(--rule-mid); border-radius: var(--control-radius);
}
.ask-row button, .queue-plus {
  min-height: var(--control-h); padding: 0 20px; cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: var(--paper); background: var(--ink); border: var(--rule-mid); border-radius: 999px;
}
.ask-row button:hover { background: var(--red-ink); }
.ask-row input:focus-visible, .ask-row button:focus-visible, .queue-plus:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red); }
/* Off-screen, not display:none: some bots skip fields they can tell are hidden. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sent-note {
  margin-top: 24px; padding: 14px 18px; font-family: var(--hand); font-size: 22px;
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius); transform: rotate(-0.4deg);
}

.nm-queue { list-style: none; padding: 0; margin: 0; width: 100%; }
.nm-queue li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 4px 0 6px; }
.nm-queue li[hidden] { display: none; }
.nm-queue form { margin: 0; }

/* -- research queue (home) ---------------------------------------- */

.queue { margin-top: 48px; }
.queue h2 { font-size: clamp(26px, 3.4vw, 34px); padding-bottom: 8px; border-bottom: var(--rule-heavy); }
.queue-lead { color: var(--muted); margin: 12px 0 8px; }
.queue-list { list-style: none; padding: 0; margin: 0; }
.queue-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 14px 0; border-bottom: var(--rule-dash);
}
.queue-title { font-family: var(--display); font-size: 19px; line-height: 1.3; flex: 1 1 280px; }
.queue-next {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); border: 1.5px solid currentColor; border-radius: 6px; padding: 1px 7px; transform: rotate(-2deg);
}
.queue-list form { margin: 0; }
.queue-plus { min-height: 38px; padding: 0 14px; font-size: 13px; background: transparent; color: var(--ink); border: var(--rule-hair); }
.queue-plus:hover { border-color: var(--ink); color: var(--red-ink); }
.queue-done { font-family: var(--mono); font-size: 13px; color: var(--ok); }

/* -- topic header --------------------------------------------- */

.topic-head { padding: 44px 0 32px; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red-ink); margin-bottom: 18px;
}

/* The h1 keeps the full topic title — the display treatment is a span
   inside it, never a replacement for it. */
.topic-head h1 {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  margin-bottom: 26px;
}
.title-lead { display: block; font-size: 0.5em; line-height: 1.15; margin-bottom: 0.15em; color: var(--muted); }
.title-display { display: block; color: var(--red); }

/* The topic's watercolor: its edges already fade into the paper. */
.topic-hero { display: block; width: 100%; max-width: 680px; height: auto; margin: -6px auto 14px; }

.head-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px; border-top: var(--rule-hair); padding-top: 20px;
}
.lede { font-size: 21px; line-height: 1.45; color: var(--muted); }
.byline { font-family: var(--mono); font-size: 12px; line-height: 1.9; letter-spacing: 0.03em; color: var(--muted); }
.byline strong { color: var(--ink); font-weight: 700; }

/* -- figures strip (key numbers on graph paper) ----------------- */

.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.figure-cell {
  padding: 20px 20px 22px; background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
a.figure-cell { color: var(--ink); text-decoration: none; display: block; }
a.figure-cell:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
a.figure-cell:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red); }
.figure-note { display: block; }
.figure-cell.hot .figure-num { color: var(--red); }
.figure-num { font-family: var(--display); font-size: 52px; line-height: 1; display: block; }
.figure-note { font-size: 15px; line-height: 1.5; margin-top: 10px; color: var(--ink); }

/* -- band (the slot a tool drops into later) ------------------- */

.band { border-top: var(--rule-hair); border-bottom: var(--rule-hair); padding: 32px 0 36px; background: var(--card); }
.band .eyebrow { margin-bottom: 14px; }
.one-line { font-family: var(--display); font-size: clamp(21px, 2.6vw, 30px); line-height: 1.3; max-width: 42ch; }

/* -- sections -------------------------------------------------- */

.section { padding: 48px 0 0; }
.section > h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; margin-bottom: 10px; padding-bottom: 8px; border-bottom: var(--rule-heavy); }
.section-lead { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: var(--measure); margin-bottom: 24px; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; margin: 40px 0 10px; }
.prose h3 { font-family: var(--display); font-size: 22px; line-height: 1.25; margin: 30px 0 10px; }
.prose p { font-size: 18px; line-height: 1.7; margin-bottom: 20px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { font-size: 18px; line-height: 1.7; margin-bottom: 10px; }
.prose em { font-style: italic; }

/* -- verdict cards ------------------------------------------- */

/* Claims are cards that scan in a second: stamp + sentence. The
   explanation and the source sit one tap away in a native <details>. */
.verdict-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.verdict-filter[hidden] { display: none; }
.verdict-filter button {
  min-height: 40px; padding: 0 14px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--card); border: var(--rule-hair); border-radius: 999px;
}
.verdict-filter button .n { color: var(--faint); margin-left: 4px; }
.verdict-filter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.verdict-filter button[aria-pressed="true"] .n { color: inherit; opacity: 0.75; }
.verdict-filter button:focus-visible, .why summary:focus-visible, .fold summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red); }

.verdicts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.verdict {
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius);
  padding: 18px 20px 14px; scroll-margin-top: 24px;
}
.verdict[hidden] { display: none; }
.verdict:target { box-shadow: var(--shadow); }
/* The myth being corrected is the thing most worth seeing at a glance. */
.verdict-incorrecta { background: #f6e8e3; }
.verdict-head { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; align-items: start; }
.verdict-head .badge { justify-self: start; margin-top: 2px; }

.why { margin: 10px 0 0 148px; }
.why summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; color: var(--red-ink); padding: 4px 0;
}
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: "+"; font-weight: 700; }
.why[open] summary::before { content: "–"; }
.why[open] summary { margin-bottom: 6px; }
.src-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; padding-top: 10px; border-top: var(--rule-dash); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.src-line .src { color: var(--ink); }
.src-line .detail { color: var(--faint); }

/* -- question cards (long prose, folded) ------------------------ */

/* Each subsection is a question with its first paragraph as the hook;
   "leer más" opens the rest. Cards sit two-up so the eye can pick. */
.prose.intro { margin-bottom: 22px; }
.q-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.q-card {
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius);
  padding: 20px 22px 16px;
}
.q-card h3 { font-family: var(--display); font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
.q-card p, .q-card li { font-size: 16.5px; line-height: 1.65; }
.q-card p { margin-bottom: 12px; }
.q-card ul, .q-card ol { margin: 0 0 12px; padding-left: 20px; }
.q-card li { margin-bottom: 6px; }
.q-card em { font-style: italic; }
.more summary {
  display: inline-flex; gap: 6px; cursor: pointer; list-style: none; padding: 4px 0;
  font-family: var(--mono); font-size: 12px; color: var(--red-ink);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; font-weight: 700; }
.more[open] summary { margin-bottom: 8px; }
.more[open] summary::before { content: "–"; }
.more summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red); }

/* -- table of contents ------------------------------------------ */

.toc { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 32px; padding: 14px 0; border-top: var(--rule-hair); border-bottom: var(--rule-hair); }
.toc a { font-family: var(--mono); font-size: 13px; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--red-ink); text-decoration: underline; }

/* -- practice: the checklist ------------------------------------ */

.practice-card ul { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; gap: 12px; }
.practice-card li {
  counter-increment: paso; position: relative; padding: 16px 20px 16px 64px;
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius);
  font-size: 17px; line-height: 1.6; max-width: 80ch;
}
.practice-card li::before {
  content: counter(paso); position: absolute; left: 18px; top: 14px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--paper); background: var(--red-ink); border-radius: 50%;
}
.practice-card strong { color: var(--red-ink); }

/* -- verification: folds ----------------------------------------- */

.sub { margin-bottom: 18px; }
.sub h3 { font-family: var(--display); font-size: 22px; margin-bottom: 12px; }
.fold { border-top: var(--rule-hair); }
.fold:last-of-type { border-bottom: var(--rule-hair); }
.fold summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-family: var(--display); font-size: 21px; display: flex; align-items: center; gap: 10px;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 18px; color: var(--red-ink); }
.fold[open] summary::after { content: "–"; }
.fold-count { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.fold > :not(summary) { margin-bottom: 20px; }
.fold-note { font-size: 15px; color: var(--muted); margin-top: 12px; }
.agent-note { margin-top: 24px; font-family: var(--mono); font-size: 13px; color: var(--muted); }

.claim-text { font-family: var(--sans); font-size: 18px; line-height: 1.4; font-weight: 700; }
.claim-note { font-size: 16px; line-height: 1.6; color: var(--muted); }
.claim-anchor { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--faint); text-decoration: none; }
.claim-anchor:hover { color: var(--red-ink); text-decoration: underline; }

/* Verdicts are hand stamps: outlined, slightly rotated, coloured by verdict.
   Icon and word are always present, so colour is never the only signal. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 2px 9px; white-space: nowrap;
  border: 1.5px solid currentColor; border-radius: 6px; background: transparent;
  transform: rotate(-2deg);
}
.badge-glyph { font-weight: 700; }
.badge-confirmada { color: var(--ok); }
.badge-matiz      { color: var(--warn); transform: rotate(1.5deg); }
.badge-incorrecta { color: var(--bad); transform: rotate(-3deg); }


/* -- facts (graph-paper cards) ---------------------------------- */

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fact {
  padding: 20px 20px 22px; background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: var(--rule-mid); border-radius: var(--radius);
}
.fact-figure { font-family: var(--display); font-size: 40px; line-height: 1; display: block; margin-bottom: 12px; }
.fact-statement { font-size: 15.5px; line-height: 1.55; margin-bottom: 10px; }
.fact-not { font-size: 14px; line-height: 1.5; color: var(--muted); }
.fact-src { font-family: var(--mono); font-size: 11px; color: var(--faint); display: block; margin-top: 12px; }

/* -- infografías: «En una imagen» on topic pages ------------------
   Shared frame here; each topic's drawing styles live in its own block
   below, prefixed .ig-<slug>. Graph paper, ink, stamps: same notebook. */

.ig-figure {
  margin: 0; padding: 22px 22px 18px; background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ig-figure svg { display: block; width: 100%; height: auto; }
.ig-sources { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; padding-top: 10px; border-top: var(--rule-dash); font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--faint); }
.ig-sources a { color: var(--ink); }

/* infografia: refractometro */
.ig-refractometro { max-width: 600px; margin: 0 auto; }
.ig-refractometro text { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; fill: var(--muted); }
.ig-r-label { font-family: var(--mono); font-size: 12.5px; }
.ig-r-small { font-family: var(--mono); font-size: 12px; }
.ig-r-strong { font-weight: 700; }
.ig-refractometro .ig-r-ink { fill: var(--ink); }
.ig-r-note { font-size: 16px; }
.ig-refractometro .ig-r-note { fill: var(--red-ink); }
.ig-r-axis { stroke: var(--ink); stroke-width: 1.5; }
.ig-r-real { stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 4; }
.ig-r-mark { stroke: var(--ink); stroke-width: 1.5; }
.ig-r-band { stroke-width: 2; fill-opacity: 0.2; }
.ig-r-generic .ig-r-band { fill: var(--warn); stroke: var(--warn); }
.ig-r-coffee .ig-r-band { fill: var(--ok); stroke: var(--ok); }
.ig-refractometro .ig-r-generic .ig-r-strong { fill: var(--warn); }
.ig-refractometro .ig-r-coffee .ig-r-strong { fill: var(--ok); }

/* infografia: tds-y-extraccion */
.ig-tds-y-extraccion .ig-tds-lead { font-size: 22px; line-height: 1.2; margin: 0 0 14px; color: var(--red-ink); }
.ig-tds-y-extraccion .ig-tds-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 28px; }
.ig-tds-y-extraccion h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 10px; }
.ig-tds-y-extraccion svg { max-width: 440px; }
.ig-tds-y-extraccion .ig-tds-a, .ig-tds-y-extraccion .ig-tds-sca { fill: var(--ink); }
.ig-tds-y-extraccion .ig-tds-b { fill: var(--red); }
.ig-tds-y-extraccion .ig-tds-nor { fill: var(--wash); stroke: var(--red); stroke-width: 2; }
.ig-tds-y-extraccion .ig-tds-axis { stroke: var(--ink); stroke-width: 1.5; }
.ig-tds-y-extraccion .ig-tds-big { font-family: var(--display); font-size: 22px; fill: var(--ink); }
.ig-tds-y-extraccion .ig-tds-small, .ig-tds-y-extraccion .ig-tds-in { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
.ig-tds-y-extraccion .ig-tds-in { fill: var(--card); }
.ig-tds-y-extraccion .ig-tds-red { fill: var(--red-ink); }
.ig-tds-y-extraccion .ig-tds-note { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; max-width: 440px; }
.ig-tds-y-extraccion .ig-tds-note .hand { font-size: 17px; color: var(--ink); }

/* infografia: campeonatos-aeropress */
.ig-campeonatos-aeropress { display: grid; gap: 22px; }
.ig-campeonatos-aeropress .ig-ca-kicker { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ig-campeonatos-aeropress .ig-ca-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.ig-campeonatos-aeropress .ig-ca-rule { position: relative; display: grid; align-content: start; gap: 6px; padding: 16px 16px 18px; background: var(--card); border: var(--rule-mid); border-radius: 10px; min-width: 0; }
.ig-campeonatos-aeropress .ig-ca-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; display: grid; place-items: center; border: 1.5px solid var(--ok); border-radius: 4px; color: var(--ok); font-weight: 700; transform: rotate(-4deg); }
.ig-campeonatos-aeropress .ig-ca-icon { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig-campeonatos-aeropress .ig-ca-num { font-family: var(--display); font-size: 40px; line-height: 1.05; color: var(--red); overflow-wrap: anywhere; }
.ig-campeonatos-aeropress .ig-ca-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.ig-campeonatos-aeropress .ig-ca-note { font-size: 15px; line-height: 1.5; color: var(--muted); }
.ig-campeonatos-aeropress .ig-ca-models { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ig-campeonatos-aeropress .ig-ca-stamp { display: inline-flex; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 6px; }
.ig-campeonatos-aeropress .ig-ca-yes { color: var(--ok); transform: rotate(-1.5deg); }
.ig-campeonatos-aeropress .ig-ca-no { color: var(--bad); transform: rotate(1.5deg); }
.ig-campeonatos-aeropress .ig-ca-growth { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px 28px; align-items: end; padding-top: 18px; border-top: var(--rule-dash); }
.ig-campeonatos-aeropress .ig-ca-squares { max-width: 260px; }
.ig-campeonatos-aeropress .ig-ca-sq-season { fill: var(--wash); stroke: var(--ink); stroke-width: 1.5; }
.ig-campeonatos-aeropress .ig-ca-sq-final { fill: var(--red); }
.ig-campeonatos-aeropress .ig-ca-sq-oslo { fill: var(--ink); }
.ig-campeonatos-aeropress .ig-ca-arrow { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.ig-campeonatos-aeropress .ig-ca-svg-note { font-family: var(--hand); font-size: 24px; fill: var(--ink); }
.ig-campeonatos-aeropress .ig-ca-tag { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.ig-campeonatos-aeropress .ig-ca-legend { margin: 0; display: grid; gap: 12px; }
.ig-campeonatos-aeropress .ig-ca-legend dt { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ig-campeonatos-aeropress .ig-ca-legend dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; }
.ig-campeonatos-aeropress .ig-ca-legend b { font-family: var(--display); font-weight: 400; font-size: 24px; }
.ig-campeonatos-aeropress .ig-ca-key { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--ink); }
.ig-campeonatos-aeropress .ig-ca-key-oslo { background: var(--ink); width: 6px; height: 6px; }
.ig-campeonatos-aeropress .ig-ca-key-season { background: var(--wash); }
.ig-campeonatos-aeropress .ig-ca-key-final { background: var(--red); border-color: var(--red); }
.ig-campeonatos-aeropress .ig-ca-derived { grid-column: 1 / -1; margin: 0; font-size: 18px; color: var(--red-ink); transform: rotate(-1deg); }
@media (max-width: 600px) {
  .ig-campeonatos-aeropress .ig-ca-growth { grid-template-columns: minmax(0, 1fr); }
  .ig-campeonatos-aeropress .ig-ca-num { font-size: 34px; }
}

/* -- contradictions -------------------------------------------- */

.contras { width: 100%; border-collapse: collapse; text-align: left; }
.contras caption { text-align: left; font-family: var(--mono); font-size: 12px; color: var(--muted); padding-bottom: 14px; }
.contras thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 400; padding: 0 24px 10px 0; border-bottom: var(--rule-mid); }
.contras td { padding: 18px 24px 18px 0; vertical-align: top; border-bottom: var(--rule-dash); font-size: 16px; line-height: 1.6; }
.contras tr:last-child td { border-bottom: var(--rule-heavy); }
.contras .point { font-weight: 700; font-size: 17px; line-height: 1.35; }
.side { margin-bottom: 14px; }
.side:last-child { margin-bottom: 0; }
.side-who { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }

/* -- unverified: a note pinned to the page ------------------------ */

.unverified {
  list-style: none; padding: 20px 22px; margin: 0;
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius);
  transform: rotate(-0.4deg);
}
.unverified li { border-left: 3px solid var(--red); padding: 2px 0 2px 16px; margin-bottom: 16px; }
.unverified li:last-child { margin-bottom: 0; }
.unverified p { font-size: 16.5px; line-height: 1.6; }
.unverified .pending { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

/* -- sources --------------------------------------------------- */

.sources { list-style: none; padding: 0; margin: 0; border-top: var(--rule-mid); }
.sources li { padding: 16px 0; border-bottom: var(--rule-dash); }
.source-id { display: block; font-family: var(--mono); font-size: 12px; color: var(--red-ink); margin-bottom: 5px; }
.source-cite { display: block; font-size: 16px; line-height: 1.55; }
.source-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; align-items: baseline; }
.tag { font-family: var(--mono); font-size: 11px; border: var(--rule-hair); border-radius: 6px; padding: 1px 7px; color: var(--muted); }

/* -- series ---------------------------------------------------- */

.episodes { list-style: none; padding: 0; margin: 0; border-top: var(--rule-mid); }
.episode { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: var(--rule-dash); }
.episode-n { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--red-ink); }
.episode-title { font-family: var(--display); font-size: 19px; line-height: 1.3; }
.episode-state { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }

/* -- cite ------------------------------------------------------ */

.cite { border: var(--rule-mid); border-radius: var(--radius); background: var(--card); padding: 20px 22px; }
.cite-string { font-family: var(--mono); font-size: 13.5px; line-height: 1.8; word-break: break-word; }

/* -- cómo funciona showcase (home) ---------------------------------- */

/* Thumbnails come verbatim from the catalog page; these are the palette
   variables its SVGs expect, scoped to the showcase. */
.showcase {
  --steel: #c3c9ce; --water: #5b9bd5; --coffee: #3b1f12; --leaf: #4f7d4a;
  --cherry: #b8382c; --enamel: #2f5d76; --panel: #e6e9df; --accent: var(--red); --ink-2: #555c69;
  margin-top: 56px; padding: 28px; border: var(--rule-mid); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
}
.showcase .eyebrow { color: #f0a77f; margin-bottom: 8px; }
.showcase-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.showcase-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08; }
.showcase-lead { margin-top: 8px; max-width: 52ch; color: rgba(238, 240, 233, 0.78); }
.showcase-all {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h); padding: 0 22px;
  border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.showcase-all:hover { background: var(--red); color: var(--paper); }
.showcase-all:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red); }
.fig-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fig-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 16px;
  background: var(--card); color: var(--ink); border-radius: 12px; transition: transform 0.12s ease;
}
.fig-card:hover { transform: translateY(-3px) rotate(-0.4deg); }
.fig-card:focus-within { box-shadow: 0 0 0 3px var(--red); }
.fig-thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--panel);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px;
}
.fig-thumb svg { width: 56%; height: auto; max-height: 86%; }
.fig-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.fig-thumb .ink { stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fig-card:hover .fig-thumb svg, .fig-card:hover .fig-thumb img { transform: scale(1.04); transition: transform 0.2s ease; }
.fig-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-ink); }
.fig-card h3 { font-family: var(--display); font-size: 20px; line-height: 1.2; }
.fig-card h3 a { color: var(--ink); text-decoration: none; }
.fig-card h3 a::after { content: ""; position: absolute; inset: 0; }
.fig-card h3 a:focus-visible { outline: none; }
.fig-card p { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.fig-cta { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--red-ink); }

/* -- consent --------------------------------------------------- */

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--ink); color: var(--paper);
}
.consent-inner {
  width: 100%; max-width: var(--shell); margin: 0 auto; padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.consent-copy { font-size: 14.5px; line-height: 1.55; max-width: 68ch; }
.consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent-btn {
  min-height: var(--control-h); padding: 0 18px;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--paper); border-radius: 999px;
  background: transparent; color: var(--paper);
}
.consent-btn:hover { background: var(--paper); color: var(--ink); }
.consent-accept { background: var(--paper); color: var(--ink); }
.consent-accept:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.consent-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red); }

@media (max-width: 767px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 20px; }
  .consent-actions { justify-content: stretch; }
  .consent-btn { flex: 1; }
}

/* -- responsive ------------------------------------------------ */

@media (max-width: 1023px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }

  .wordmark img { height: 30px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .verdict-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .q-cards { grid-template-columns: minmax(0, 1fr); }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .fig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase { padding: 20px 16px; }
  .why { margin-left: 0; }
  .practice-card li { padding-left: 56px; }

  
  .contras, .contras tbody, .contras tr, .contras td { display: block; width: 100%; }
  .contras thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .contras tbody tr { border: var(--rule-mid); border-radius: var(--radius); background: var(--card); padding: 16px; margin-bottom: 12px; }
  .contras td { padding: 0 0 14px; border-bottom: none; }
  .contras tr:last-child td { border-bottom: none; }

  .episode { flex-wrap: wrap; gap: 8px 14px; }
  .episode-state { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ro-vanes, .ro-beans, .ro-bean, .ro-smoke, .ro-glow { animation: none; }
  .topic-card:hover, .fig-card:hover { transform: none; }
  .fig-card:hover .fig-thumb svg, .fig-card:hover .fig-thumb img { transform: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 480px) {
  .fig-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -- collections and tools: recetas, campeones, reglas ----------- */

.filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--mono); font-size: 13px; }
.filtros a { border: var(--rule-hair); border-radius: 999px; padding: 6px 12px; text-decoration: none; color: var(--ink); }
.filtros a[aria-current="page"] { border: var(--rule-mid); background: var(--card); }
.section h2.filtros-count { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); border: 0; padding: 0; margin: 0 0 10px; }
.rule-link { font-family: var(--mono); font-size: 12px; margin-left: 8px; }
.breadcrumbs { font-family: var(--mono); font-size: 13px; }
.ficha { margin: 0; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); padding: 6px 20px; }
.ficha-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: var(--rule-dash); }
.ficha-row:last-child { border-bottom: 0; }
.ficha dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.ficha dd { margin: 0; font-size: 16px; line-height: 1.5; }
.pasos { padding-left: 1.4em; font-size: 17px; line-height: 1.6; }
.pasos li { margin-bottom: 10px; }
.nota { font-size: 15px; line-height: 1.55; color: var(--muted); }
.campeones td { font-size: 15.5px; }
.reglas-form p, .reglas-form fieldset { margin: 0 0 14px; }
.reglas-form label { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.reglas-form input:not([type="radio"]), .reglas-form select { width: 100%; max-width: 20rem; min-height: var(--control-h); padding: 0 12px; border: var(--rule-mid); border-radius: 10px; background: var(--card); font: inherit; }
.reglas-form input:focus-visible, .reglas-form select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.reglas-form fieldset { border: var(--rule-hair); border-radius: 10px; padding: 12px 16px; }
.reglas-form fieldset label { font-family: inherit; font-size: 16px; color: var(--ink); margin: 6px 0; }
.reglas { list-style: none; padding: 0; margin: 0; border-top: var(--rule-mid); }
.regla { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: var(--rule-dash); align-items: baseline; }
.regla-estado { font-family: var(--mono); font-size: 13px; }
.regla-ok .regla-estado { color: var(--ok); }
.regla-falla .regla-estado { color: var(--bad); }
.regla-sin_dato .regla-estado { color: var(--faint); }
@media (max-width: 600px) {
  .ficha-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .regla { grid-template-columns: minmax(0, 1fr) auto; }
  .regla-label { grid-column: 1 / -1; grid-row: 1; }
}

/* -- Descargas: SCA forms served unmodified ------------------------- */

.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }
.dl-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); }
.dl-card h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.15; }
.dl-card p { margin: 0; font-size: 16px; line-height: 1.55; }
.dl-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-ink); }
.dl-btn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; font-weight: 600; color: var(--paper); background: var(--ink); border: var(--rule-mid); border-radius: 999px; text-decoration: none; }
.dl-btn:hover { box-shadow: var(--shadow); transform: translate(-2px, -2px); }
.dl-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.dl-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--ink); }
.dl-more summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.dl-versiones { margin: 4px 0 10px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.dl-hash-label { font-size: 14px !important; color: var(--muted); }
.dl-hash { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.dl-unver { margin: 0; padding: 14px 18px 14px 34px; border: 1.5px dashed var(--warn); border-radius: var(--radius); background: var(--card); line-height: 1.6; }
.dl-unver li { margin: 6px 0; }

/* -- 404 ------------------------------------------------------ */

.nf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px 40px; align-items: center; padding: 44px 0 0; }
.nf h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.03; margin-bottom: 20px; }
.nf .lede { max-width: 34em; }
.nf-hand { font-family: var(--hand); font-size: 26px; line-height: 1.2; color: var(--red-ink); margin: 14px 0 0; transform: rotate(-1.5deg); transform-origin: left center; }
.nf-exits { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.nf-btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 999px; font-weight: 700; text-decoration: none;
}
.nf-btn:hover { background: var(--red-ink); border-color: var(--red-ink); }
.nf-btn:focus-visible, .nf-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nf-link { font-family: var(--mono); font-size: 14px; color: var(--red-ink); }
.nf-art { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 760px) {
  .nf { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
}

/* -- /recetas: the list (filters, dose chart, cards) ------------- */

/* recetas: lista */
.rl-head { padding-bottom: 8px; }
.rl-head .lede { margin-bottom: 12px; }

/* Filters: one row of chip links per group, on a graph-paper card. */
.rl-filtros {
  display: grid; gap: 14px; margin-top: 8px; padding: 18px 20px 14px; scroll-margin-top: 12px;
  background: var(--card) linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 22px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.rl-grupo { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 8px 20px; align-items: center; padding-bottom: 14px; border-bottom: var(--rule-dash); }
.rl-grupo-head { margin: 0; }
.rl-grupo-label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-ink); }
.rl-hint { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.rl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rl-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  font-family: var(--mono); font-size: 13px; color: var(--ink); text-decoration: none;
  background: var(--paper); border: var(--rule-mid); border-radius: 999px;
}
a.rl-chip:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow); color: var(--ink); }
.rl-chip[aria-current="true"] { background: var(--ink); color: var(--paper); }
a.rl-chip[aria-current="true"]:hover { color: var(--paper); }
.rl-chip-glyph { font-weight: 700; }
.rl-n { font-size: 11px; line-height: 1; padding: 3px 6px; border: 1px solid currentColor; border-radius: 999px; }
.rl-chip-off { color: var(--faint); background: transparent; border: var(--rule-dash); text-decoration: line-through; cursor: not-allowed; }
.rl-chip-off .rl-n { text-decoration: none; }
.rl-nota { margin: 0; font-size: 19px; line-height: 1.2; color: var(--red-ink); transform: rotate(-1deg); transform-origin: left center; }

.rl-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 14px; }
.rl-count h2 { margin: 0; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.rl-count a, .rl-vacio a { font-family: var(--mono); font-size: 13px; color: var(--red-ink); }
.rl-vacio { font-size: 17px; }

/* Cards: who and when, a spec strip, extra gear, the 2026 stamp. */
.rl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.rl-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 16px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); }
.rl-meta { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-ink); }
.rl-title { margin: 0; font-size: clamp(21px, 2vw, 25px); line-height: 1.15; }
.rl-title a { color: var(--ink); text-decoration: none; }
.rl-title a:hover { color: var(--red-ink); text-decoration: underline; }
.rl-spec { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.rl-equipo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rl-equipo li { font-family: var(--mono); font-size: 12px; padding: 2px 8px; background: var(--wash); border: var(--rule-dash); border-radius: 6px; }
.rl-legal { margin: auto 0 0; padding-top: 6px; }

/* Dose chart: a phone-width viewBox, capped so labels stay readable. */
.rl-chart { max-width: 560px; }
.rl-svg text { font-family: var(--mono); font-size: 13px; fill: var(--ink); }
.rl-axis { stroke: var(--ink); stroke-width: 1.5; }
.rl-tope { stroke: var(--red-ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rl-svg .rl-tope-label { fill: var(--red-ink); font-size: 12px; }
.rl-svg a { text-decoration: none; }
.rl-hit { fill: transparent; }
.rl-row:hover .rl-hit { fill: var(--wash); }
.rl-row:focus { outline: none; }
.rl-row:focus-visible .rl-hit { stroke: var(--red); stroke-width: 3; }
.rl-ok .rl-bar { fill: var(--ok); }
.rl-over .rl-bar { fill: var(--card); stroke: var(--bad); stroke-width: 2; }
.rl-svg .rl-val, .rl-svg .rl-gap { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.rl-svg .rl-over .rl-val { fill: var(--bad); }
.rl-svg .rl-ok .rl-val { fill: var(--ok); }
.rl-svg .rl-gap { fill: var(--faint); font-style: italic; }
.rl-chart-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; font-family: var(--mono); font-size: 12px; }
.rl-key { display: inline-flex; align-items: center; gap: 6px; }
.rl-sw { display: inline-block; width: 14px; height: 10px; }
.rl-sw-ok { background: var(--ok); }
.rl-sw-over { background: var(--card); border: 2px solid var(--bad); }
.rl-chart-cap .rule-link { margin-left: 0; color: var(--red-ink); }
.rl-chart-cap .ig-sources { flex-basis: 100%; margin-top: 4px; }
@media (max-width: 760px) {
  .rl-grupo { grid-template-columns: minmax(0, 1fr); }
  .rl-filtros { padding: 14px 14px 12px; }
  .rl-chart { padding: 14px 10px 12px; }
}

/* -- /recetas/:id: brew clock, and the bitácora ------------------ */

/* recetas: preparar */
.rp-spec {
  margin-top: 22px; padding: 14px 18px 14px;
  background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.rp-spec-list { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.rp-spec-item dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rp-spec-item dd { margin: 0; font-family: var(--display); font-size: 22px; line-height: 1.25; }
.rp-spec-foot { margin-top: 12px; }
.rp-equipo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-family: var(--mono); font-size: 12px; }
.rp-equipo-label { letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.rp-chip-equipo { border: var(--rule-hair); border-radius: 999px; padding: 3px 10px; background: var(--paper); }
.rp-ficha { margin-top: 16px; }
.rp-ficha summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--mono); font-size: 14px; color: var(--red-ink); }
.rp-ficha[open] summary { margin-bottom: 8px; }

.rp-total { display: inline-block; margin: 0 0 14px; padding: 2px 10px; font-family: var(--mono); font-size: 14px; border: var(--rule-mid); border-radius: 6px; background: var(--card); }

.rp-reloj {
  position: sticky; top: 0; z-index: 3; margin: 0 0 18px; padding: 12px 16px 14px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: center;
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.rp-reloj-label { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--red-ink); }
.rp-tiempo { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 58px; line-height: 1; font-weight: 600; }
.rp-reloj.is-running .rp-tiempo { color: var(--red-ink); }
.rp-estado { font-family: var(--mono); font-size: 14px; line-height: 1.5; }
.rp-cuenta { display: inline-block; margin-left: 8px; padding: 0 8px; border: var(--rule-hair); border-radius: 999px; white-space: nowrap; }
.rp-cuenta.is-zero { color: var(--bad); border: 1.5px solid currentColor; font-weight: 700; animation: rp-pulso 1s ease-in-out 3; }
@keyframes rp-pulso { 50% { transform: scale(1.08); } }
.rp-botones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rp-reloj-nota { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  font: 700 17px/1 var(--sans); color: var(--ink); background: var(--card);
  border: var(--rule-mid); border-radius: 999px; cursor: pointer;
}
.rp-btn:hover { background: var(--panel); }
.rp-btn-main { color: var(--paper); background: var(--ink); }
.rp-btn-main:hover { background: var(--red-ink); border-color: var(--red-ink); }
.rp-btn-quiet { background: transparent; border: var(--rule-hair); font-weight: 600; }
.rp-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rp-pasos { list-style: none; padding: 0; margin: 0 0 18px; border-top: var(--rule-mid); }
.rp-paso {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 14px;
  padding: 12px 10px; border-bottom: var(--rule-dash); scroll-margin-top: 230px;
}
.rp-cuando { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rp-n { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.rp-en { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; padding: 1px 7px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--card); white-space: nowrap; }
.rp-texto { font-size: 17px; line-height: 1.6; }
.rp-dura { display: inline-block; margin-left: 6px; padding: 0 8px; font-family: var(--mono); font-size: 13px; color: var(--red-ink); border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.rp-paso[aria-current="step"] { background: var(--card); box-shadow: inset 4px 0 0 var(--red); }
.rp-paso[aria-current="step"] .rp-n { color: var(--red-ink); font-weight: 700; }
.rp-paso.is-done .rp-texto { color: var(--muted); }

.rp-form { padding: 16px 18px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); margin-top: 14px; }
.rp-form > p { margin: 0 0 14px; }
.rp-form label { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rp-form input[type="text"], .rp-form textarea { box-sizing: border-box; width: 100%; min-height: var(--control-h); padding: 10px 12px; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); border: var(--rule-mid); border-radius: var(--control-radius); }
.rp-form input:focus-visible, .rp-form textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rp-calif { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-calif legend { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.rp-form .rp-calif label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; margin: 0;
  font-family: var(--sans); font-size: 16px; color: var(--ink); border: var(--rule-hair); border-radius: 999px; cursor: pointer;
}
.rp-calif label:has(input:checked) { border: var(--rule-mid); background: var(--panel); font-weight: 700; }
.rp-calif label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.rp-form-tiempo { font-size: 15px; color: var(--muted); }
.rp-form-estado { margin-top: 12px; font-size: 16px; }
.rp-ver { font-family: var(--mono); font-size: 14px; }
@media (max-width: 600px) {
  .rp-reloj { padding: 10px 12px 12px; gap: 2px 14px; }
  .rp-tiempo { font-size: 46px; }
  .rp-btn { flex: 1 1 auto; padding: 0 14px; }
  .rp-paso { grid-template-columns: 3.9rem minmax(0, 1fr); gap: 10px; padding: 12px 6px; }
  .rp-spec-item dd { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-cuenta.is-zero { animation: none; }
}

/* bitacora */
.bt-privacidad { margin-top: 16px; padding: 12px 14px; font-size: 16px; line-height: 1.5; border: 1.5px dashed var(--ink); border-radius: var(--radius); background: var(--card); }
.bt-aviso { margin: 0 0 20px; padding: 12px 14px; font-size: 16px; border: 1.5px solid var(--bad); border-radius: var(--radius); background: var(--card); }
.bt-vacio { font-size: 17px; }
.bt-lista { list-style: none; padding: 0; margin: 0; }
.bt-item {
  margin-bottom: 14px; padding: 14px 18px 16px; background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.bt-meta { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--muted); }
.bt-meta a { font-family: var(--display); font-size: 19px; }
.bt-calif { display: inline-block; margin: 8px 0 10px; padding: 2px 9px; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--red-ink); border: 1.5px solid currentColor; border-radius: 6px; transform: rotate(-2deg); }
.bt-campos { margin: 0; }
.bt-campo { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 10px; padding: 4px 0; }
.bt-campo dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.bt-campo dd { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.bt-borrar { margin-top: 10px; min-height: 44px; font-size: 15px; }
.bt-borrar[data-armed] { color: var(--bad); border: 1.5px solid currentColor; }
.bt-herramientas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bt-import { position: relative; }
.bt-import:focus-within { box-shadow: var(--focus-ring); }
.bt-estado { margin-top: 12px; font-size: 16px; }
@media (max-width: 600px) {
  .bt-campo { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* -- /repaso: one training round from the MCP ------------------- */

.repaso-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.repaso-score, .repaso-verdicts {
  padding: 20px 20px 22px; background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.repaso-score h2, .repaso-verdicts h3 { margin: 0 0 10px; }
.repaso-num { font-family: var(--display); font-size: 30px; line-height: 1; margin: 0; }
.repaso-num strong { font-size: 72px; font-weight: 400; color: var(--red); }
.repaso-line { font-size: 22px; line-height: 1.3; margin: 12px 0 0; transform: rotate(-1.5deg); }
.repaso-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.repaso-bars li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.repaso-bars .badge { justify-self: start; }
.repaso-bar { display: block; height: 12px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--card); overflow: hidden; }
.repaso-bar span { display: block; height: 100%; background: var(--ink); }
.repaso-n { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }

.repaso-list { list-style: none; margin: 0; padding: 0; }
.repaso-item { padding: 22px 0; border-bottom: var(--rule-dash); }
.repaso-item:last-child { border-bottom: var(--rule-heavy); }
.repaso-result { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.repaso-item.is-hit .repaso-result { color: var(--ok); }
.repaso-item.is-miss .repaso-result { color: var(--bad); }
.repaso-pair { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0 0; }
.repaso-pair div { display: flex; align-items: center; gap: 10px; }
.repaso-pair dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.repaso-pair dd { margin: 0; }
.repaso-item .why { margin-left: 0; }
.repaso-topics { padding-left: 20px; margin: 0 0 24px; line-height: 1.9; }

@media (max-width: 767px) {
  .repaso-board { grid-template-columns: minmax(0, 1fr); }
  .repaso-bars li { grid-template-columns: 108px minmax(0, 1fr) auto; gap: 8px; }
}

/* -- /herramientas/tueste: the roasting simulator ---------------
   Same notebook: graph-paper cards, ink rules, stamps with glyph + word.
   Line styles differ (solid / dotted / dashed) so the chart never relies
   on colour alone. */

.tu-sim { margin-top: 8px; }
.tu-modos { margin-bottom: 16px; }
.tu-toggle { display: inline-flex; padding: 3px; border: var(--rule-mid); border-radius: 999px; background: var(--card); }
.tu-toggle button { min-height: 44px; padding: 0 18px; font: 700 16px/1 var(--sans); color: var(--ink); background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.tu-toggle button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.tu-toggle button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tu-hint { margin-top: 8px; font-size: 16px; color: var(--muted); }

.tu-mesa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "escena panel" "escena curva" "extras curva"; gap: 14px; align-items: start; }
.tu-mesa:has(.tu-curva[hidden]) { grid-template-areas: "escena panel" "extras panel"; }
.tu-maquina { grid-area: escena; min-width: 0; }
.tu-extras-box { grid-area: extras; min-width: 0; }
.tu-panel { grid-area: panel; }
.tu-curva { grid-area: curva; }
.tu-panel, .tu-curva {
  margin: 0; padding: 16px 18px; background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
/* The panel is the cabinet's: brushed steel with four rivets. */
.tu-panel {
  background-color: #e4e8ea;
  background-image:
    radial-gradient(circle, #8d949b 0 3px, transparent 3.5px), radial-gradient(circle, #8d949b 0 3px, transparent 3.5px),
    radial-gradient(circle, #8d949b 0 3px, transparent 3.5px), radial-gradient(circle, #8d949b 0 3px, transparent 3.5px),
    linear-gradient(100deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.4) 65%, rgba(255, 255, 255, 0));
  background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, auto;
  background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), 0 0;
  background-repeat: no-repeat;
}
.tu-curva { border: 6px solid var(--ink); border-radius: 12px; }

/* The machine: plate + live layer (TuesteHTML.maquina/1). */
.tu-maquina { margin: 0; }
.tu-maquina svg { display: block; width: 100%; height: auto; max-height: 70vh; }
/* The plate's paper is normalised to white, so multiply melts it into the page. */
.tu-maquina image { mix-blend-mode: multiply; }
.tu-bean { stroke: var(--ink); stroke-width: 0.9; }
.tu-surco { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.tu-spark { stroke: #f2a541; stroke-width: 3.6; stroke-linecap: round; }
.tu-vapor { fill: #fbfbf7; stroke: rgba(31, 36, 48, 0.3); stroke-width: 1; }
.tu-humo { fill: #8a8f96; }
.tu-boca { fill: var(--ink); }
.tu-arm { stroke: #6f7781; stroke-width: 4; stroke-linecap: round; }
.tu-lcd-bg { fill: #1d2a26; }
.tu-lcd { font-family: var(--mono); font-size: 17px; font-weight: 600; fill: #cfe9c0; }
.tu-extras { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.tu-sonido::before { content: "♪\00a0"; }
.tu-sonido[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.tu-muestra { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; background: var(--card); border: 1.5px dashed var(--ink); border-radius: var(--radius); }
.tu-muestra svg { flex: none; width: 150px; height: auto; }
.tu-muestra p { font-size: 15px; line-height: 1.5; }

/* Básico's heat knob: the radios stay real; the dial turns with the checked one. */
.tu-fuego { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". medio ." "suave dial fuerte"; align-items: center; justify-items: center; gap: 6px 10px; max-width: 340px; }
.tu-fuego input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tu-fuego label { position: relative; }
.tu-pos-suave { grid-area: suave; justify-self: end; }
.tu-pos-medio { grid-area: medio; }
.tu-pos-fuerte { grid-area: fuerte; justify-self: start; }
.tu-dial, .tu-knob { position: relative; border-radius: 50%; border: var(--rule-mid); background: radial-gradient(circle at 35% 30%, #fff, #c3c9ce 60%, #8d949b); box-shadow: var(--shadow); }
.tu-dial { grid-area: dial; width: 92px; height: 92px; transition: transform 0.3s; }
.tu-dial::after, .tu-knob::after { content: ""; position: absolute; left: 50%; border-radius: 2px; background: var(--red-ink); }
.tu-dial::after { top: 8px; width: 4px; height: 30px; margin-left: -2px; }
.tu-fuego:has([value="suave"]:checked) .tu-dial { transform: rotate(-60deg); }
.tu-fuego:has([value="fuerte"]:checked) .tu-dial { transform: rotate(60deg); }
.tu-knob-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.tu-knob-row > div { flex: 1; min-width: 0; }
.tu-knob { flex: none; width: 52px; height: 52px; transform: rotate(calc(var(--v) * 2.7deg - 135deg)); }
.tu-knob::after { top: 5px; width: 3px; height: 17px; margin-left: -1.5px; }
.tu-palanca::before { content: ""; display: inline-block; width: 14px; height: 26px; margin-right: 8px; vertical-align: middle; transform: rotate(-20deg); background: radial-gradient(circle at 50% 5px, currentColor 0 5px, transparent 5.5px), linear-gradient(currentColor, currentColor) 50% 100% / 3px 20px no-repeat; }

.tu-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tu-fuego { border: 0; padding: 0; margin: 0 0 14px; }
.tu-fuego legend { padding: 0; margin-bottom: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tu-fuego label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-size: 16px; border: var(--rule-hair); border-radius: 999px; background: var(--card); cursor: pointer; }
.tu-fuego label:has(input:checked) { border: var(--rule-mid); background: var(--panel); font-weight: 700; }
.tu-fuego label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.tu-sliders { margin-bottom: 14px; }
.tu-sliders label { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; }
.tu-sliders output { font-family: var(--mono); font-weight: 400; }
.tu-sliders input[type="range"] { width: 100%; height: 36px; accent-color: var(--red-ink); }
.tu-nota { font-size: 14px; line-height: 1.5; color: var(--muted); }
.tu-speed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tu-speed .label { margin-right: 4px; }
.tu-speed button { min-height: 44px; min-width: 52px; font: 600 14px/1 var(--mono); color: var(--ink); background: var(--card); border: var(--rule-hair); border-radius: 999px; cursor: pointer; }
.tu-speed button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.tu-speed button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The readouts are the roaster's display: light digits on a dark screen. */
.tu-lecturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 10px; background: #1d2a26; border: 2px solid var(--ink); border-radius: 10px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.tu-lecturas > div { padding: 8px 10px; border: 1px solid rgba(207, 233, 192, 0.25); border-radius: 6px; }
.tu-lecturas dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(207, 233, 192, 0.8); }
.tu-lecturas dd { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600; color: #cfe9c0; }
.tu-color { flex: none; width: 18px; height: 18px; border: 1.5px solid #cfe9c0; border-radius: 50%; }

.tu-curva svg { display: block; width: 100%; height: auto; overflow: visible; }
.tu-g { stroke: var(--rule); stroke-width: 1; }
.tu-tick { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.tu-curva polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tu-l-bt { stroke: var(--red-ink); stroke-width: 2.6; }
.tu-l-ror { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 1 5; }
.tu-l-ref { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 6 5; opacity: 0.7; }
.tu-ev { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.tu-ev-l { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--ink); }
.tu-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tu-leyenda span::before { content: ""; display: inline-block; width: 22px; margin-right: 6px; vertical-align: middle; border-top: 2.6px solid var(--red-ink); }
.tu-leyenda .tu-k-ror::before { border-top: 2px dotted var(--ink); }
.tu-leyenda .tu-k-ref::before { border-top: 1.5px dashed var(--muted); }

.tu-reporte { scroll-margin-top: 16px; }
.tu-ficha {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sello franja" "sello mini"; gap: 10px 22px; align-items: center;
  margin: 0 0 18px; padding: 16px 18px; background-color: var(--card);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px; border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tu-sello.tu-sello-grande { grid-area: sello; padding: 6px 12px; font-size: 18px; border-width: 2.5px; transform: rotate(-6deg); }
.tu-franja { grid-area: franja; margin: 0; }
.tu-franja svg { display: block; width: 100%; height: 28px; border: var(--rule-mid); border-radius: 6px; }
.tu-franja figcaption { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tu-mini { grid-area: mini; display: block; width: 100%; height: 110px; }
.tu-mini polyline { fill: none; stroke: var(--red-ink); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.tu-modelo { display: inline-block; padding: 0 6px; font-family: var(--mono); font-size: 12px; color: var(--warn); border: 1.5px solid currentColor; border-radius: 6px; }
.tu-consecuencias { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.tu-cons { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px dashed var(--ink); border-radius: var(--radius); background: var(--card); }
.tu-cons p { font-size: 16px; line-height: 1.55; }
.tu-sello { flex: none; padding: 1px 8px; font-family: var(--mono); font-size: 13px; font-weight: 600; border: 1.5px solid currentColor; border-radius: 6px; transform: rotate(-2deg); white-space: nowrap; }
.tu-good { color: var(--ok); }
.tu-warn { color: var(--warn); }
.tu-bad { color: var(--bad); }
.tu-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0 0 16px; border-top: var(--rule-mid); }
.tu-datos > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: var(--rule-dash); }
.tu-datos dt { font-size: 15px; color: var(--muted); }
.tu-datos dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; text-align: right; }
.tu-merma-ref { font-size: 15px; line-height: 1.55; max-width: var(--measure); margin-bottom: 14px; }

.tu-etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tu-etapa { padding: 14px 18px 16px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); scroll-margin-top: 16px; }
.tu-etapa[aria-current="step"] { box-shadow: inset 5px 0 0 var(--red), var(--shadow); }
.tu-etapa h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin-bottom: 6px; }
.tu-n { display: inline-grid; place-items: center; width: 28px; height: 28px; font-family: var(--mono); font-size: 13px; border: 1.5px solid var(--ink); border-radius: 50%; }
.tu-etapa[aria-current="step"] .tu-n { color: var(--paper); background: var(--ink); }
.tu-etapa > p { font-size: 17px; line-height: 1.6; max-width: var(--measure); }
.tu-sentidos { margin: 8px 0 0; }
.tu-sentidos > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.tu-sentidos dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.tu-sentidos dd { margin: 0; font-size: 16px; line-height: 1.55; }
.tu-etapa-nota { margin-top: 8px; font-size: 15px; color: var(--muted); }

.tu-palabras { margin: 0; max-width: var(--measure); }
.tu-palabras > div { padding: 10px 0; border-bottom: var(--rule-dash); }
.tu-palabras dt { font-family: var(--display); font-size: 20px; }
.tu-palabras dd { margin: 4px 0 0; font-size: 16px; line-height: 1.55; }
.tu-palabras .fact-src { display: block; margin-top: 6px; }

.tu-tabla { overflow-x: auto; }
.tu-tabla table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.tu-tabla th, .tu-tabla td { padding: 8px 10px; text-align: left; border-bottom: var(--rule-dash); white-space: nowrap; }
.tu-tabla th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); border-bottom: var(--rule-mid); }

.tu-merma { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tu-merma label { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tu-merma input { box-sizing: border-box; width: 10rem; min-height: var(--control-h); padding: 10px 12px; font: inherit; font-family: var(--sans); font-size: 18px; color: var(--ink); background: var(--card); border: var(--rule-mid); border-radius: var(--control-radius); }
.tu-merma input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tu-merma-res { margin-top: 14px; font-family: var(--display); font-size: 24px; }
.tu-merma ~ .fact-src { margin-top: 12px; }

.tu-fuentes { padding-bottom: 48px; }
.tu-fuentes h3 { font-size: 22px; margin: 22px 0 8px; }
.tu-modelo-nota, .tu-refs, .tu-unver { font-size: 15px; line-height: 1.6; max-width: var(--measure); }
.tu-refs, .tu-unver { padding-left: 20px; margin: 12px 0 0; }
.tu-refs li, .tu-unver li { margin-bottom: 6px; }
.tu-figura { margin-top: 18px; font-size: 16px; }
.tu-fuentes .tu-nota { margin-top: 8px; }

@media (max-width: 860px) {
  /* Phone: the machine, then the controls under the thumb, then the rest. */
  .tu-mesa, .tu-mesa:has(.tu-curva[hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "escena" "panel" "extras" "curva"; }
  .tu-maquina svg { max-height: 48vh; margin: 0 auto; }
}
@media (max-width: 600px) {
  .tu-panel, .tu-curva { padding: 12px; }
  /* The chart scales down about half on a phone: draw its text twice as big. */
  .tu-tick, .tu-ev-l { font-size: 20px; }
  .tu-botones .rp-btn { flex: 1 1 auto; }
  .tu-lecturas dd { font-size: 18px; }
  .tu-datos { grid-template-columns: minmax(0, 1fr); }
  .tu-cons { flex-direction: column; gap: 8px; }
  .tu-sentidos > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tu-ficha { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sello" "franja" "mini"; justify-items: start; }
  .tu-muestra svg { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .tu-sello { transform: none; }
  .tu-dial { transition: none; }
}
@media print {
  body:has(.tu-page) .site-header, body:has(.tu-page) .site-footer, body:has(.tu-page) .skip,
  .tu-page > :not(.tu-head):not(.tu-reporte):not(.tu-fuentes), .tu-head .section-lead, .tu-imprimir, .tu-figura { display: none !important; }
  .tu-page .section { padding-top: 16px; }
  .tu-cons, .tu-datos > div, .tu-ficha { break-inside: avoid; }
  .tu-ficha, .tu-franja svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tu-sello { transform: none; }
}

/* ── Cursos (/cursos, /cursos/:id). Chips, cards and stamps reuse .rl-* and
      .badge; only what those don't cover lives here. ── */
.cu-vacio { padding: 20px; background: var(--card); border: var(--rule-dash); border-radius: var(--radius); }
.cu-vacio h2 { margin-bottom: 8px; }
.cu-vacio p { font-size: 17px; line-height: 1.55; color: var(--muted); }
.cu-das { margin-top: 18px; font-size: 16px; }
.cu-das a { font-family: var(--mono); font-size: 14px; color: var(--red-ink); }
.cu-cert ul { display: grid; gap: 12px; margin: 14px 0 22px; padding-left: 20px; font-size: 16px; line-height: 1.6; }
.cu-ref { font-family: var(--mono); font-size: 11px; margin-left: 2px; }
.cu-ref a { color: var(--red-ink); padding: 0 1px; }
.cu-fuentes-titulo { font-size: 19px; margin-bottom: 8px; }
.cu-fuentes { padding-left: 0; counter-reset: cu; }
.cu-fuentes li { counter-increment: cu; }
.cu-fuentes li::before { content: "[" counter(cu) "]"; display: block; font-family: var(--mono); font-size: 12px; color: var(--red-ink); margin-bottom: 4px; }
.cu-fuente { font-family: var(--mono); font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.cu-fuente a { color: var(--ink); }
.cu-nombre { font-family: var(--display); font-size: 21px; line-height: 1.25; margin-bottom: 6px; }
.cu-sesiones { list-style: none; margin: 0; padding: 0; }
.cu-sesiones li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 14px 0; border-bottom: var(--rule-dash); font-size: 16px; }
.cu-cuando { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.cu-cupo { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cu-paso { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); border: var(--rule-dash); border-radius: 6px; padding: 1px 6px; }
.cu-cta { display: inline-block; padding: 12px 18px; min-height: 44px; background: var(--ink); color: var(--paper); border-radius: var(--radius); font-family: var(--mono); font-size: 14px; text-decoration: none; }
.cu-cta:hover { background: var(--red-ink); }
/* Issuer names run long: let the stamp wrap inside the card on a phone. */
.cu-sello { color: var(--ink); white-space: normal; max-width: calc(100% - 8px); }
.cu-sello-p { margin: 14px 0 22px; }
.cu-h3 { font-size: 19px; margin: 22px 0 8px; }

/* -- sample course platform (/cursos/muestra, future cursos.sabersobrecafe.com) --
   The banner sticks to the top on every screen: these courses don't exist. */

.cm-banner {
  position: sticky; top: 0; z-index: 5;
  background: repeating-linear-gradient(-45deg, #f6e3d6 0 10px, #fbefe6 10px 20px);
  border-bottom: 1.5px solid var(--red-ink); color: var(--ink);
}
.cm-banner p { padding-block: 9px; font-size: 14px; line-height: 1.45; }
.cm-banner strong { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-ink); margin-right: 4px; }
.cm-banner a { font-family: var(--mono); font-size: 13px; color: var(--red-ink); white-space: nowrap; }

.cm-bar { border-bottom: var(--rule-hair); background: var(--card); }
.cm-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-block: 10px; }
.cm-marca { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--red-ink); }
.cm-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.cm-nav a { font-size: 15px; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.cm-nav a:hover { color: var(--ink); background: var(--wash); }
.cm-nav a[aria-current="page"] { color: var(--paper); background: var(--ink); }
.cm-page { padding-bottom: 64px; }

.cm-ej { font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* Type stamp: glyph + word, one tint per type. */
.cm-tipo {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 6px; transform: rotate(-1.5deg);
}
.cm-tipo-gratis { color: var(--ok); }
.cm-tipo-ia { color: #3d5aa8; }
.cm-tipo-pago { color: var(--ink); }
.cm-tipo-certificacion { color: var(--red-ink); transform: rotate(1.5deg); }

/* Hero: the pitch, and three covers fanned like cards on a desk. */
.cm-hero { display: grid; gap: 24px; padding: 40px 0 8px; }
.cm-hero h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; margin-bottom: 22px; }
.cm-ctas { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 24px; }
.cm-cta-2 { font-family: var(--mono); font-size: 14px; color: var(--red-ink); }
.cm-hero-pila { position: relative; height: 260px; max-width: 420px; }
.cm-hero-pila img {
  position: absolute; width: 58%; height: auto; aspect-ratio: 1; object-fit: cover;
  background: var(--card); border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow);
}
.cm-hero-pila img:nth-child(1) { left: 0; top: 30px; transform: rotate(-6deg); }
.cm-hero-pila img:nth-child(2) { left: 21%; top: 0; transform: rotate(2deg); z-index: 1; }
.cm-hero-pila img:nth-child(3) { left: 42%; top: 40px; transform: rotate(7deg); }
@media (min-width: 900px) {
  .cm-hero { grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 40px; }
  .cm-hero-pila { height: 340px; }
}

/* The four types. */
.cm-tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.cm-tipo-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); font-size: 16px; line-height: 1.5; }
.cm-tipo-card a { margin-top: auto; font-family: var(--mono); font-size: 14px; color: var(--red-ink); }
.cm-tc-ia { background: var(--card) linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 22px; }

/* Course cards: cover on top, like a shelf. */
.cm-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.cm-card { display: flex; flex-direction: column; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.cm-card:hover, .cm-card:focus-within { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.cm-portada { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #f6f7f2; border-bottom: var(--rule-hair); }
.cm-card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.cm-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cm-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.cm-card-title { font-size: 21px; line-height: 1.2; }
.cm-card-title a { color: var(--ink); text-decoration: none; }
.cm-card-title a::after { content: ""; position: absolute; inset: 0; }
.cm-card { position: relative; }
.cm-card-title a:hover { color: var(--red-ink); }
.cm-quien { font-size: 15px; color: var(--muted); }
.cm-card-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; border-top: var(--rule-dash); }
.cm-dur { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cm-precio { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cm-precio strong { font-family: var(--mono); font-size: 16px; }
.cm-mas { margin-top: 16px; }
.cm-mas a { font-family: var(--mono); font-size: 14px; color: var(--red-ink); }

/* How it works: three numbered steps. */
.cm-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; counter-reset: paso; }
.cm-pasos li { counter-increment: paso; padding: 16px 18px; border-top: var(--rule-heavy); font-size: 16px; line-height: 1.55; }
.cm-pasos li::before { content: counter(paso); font-family: var(--display); font-size: 40px; line-height: 1; color: var(--red); display: block; margin-bottom: 6px; }
.cm-pasos h3 { font-size: 22px; margin-bottom: 6px; }
.cm-instructores { margin-top: 48px; padding: 28px 24px; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.cm-instructores > h2 { border-color: var(--paper); }
.cm-instructores .lede { color: var(--paper); opacity: .85; margin-bottom: 18px; }
.cm-instructores a { color: var(--paper); }
.cm-instructores .cu-cta { background: var(--paper); color: var(--ink); }

/* Course page: header and buy box, then the syllabus. */
.cm-curso { display: grid; gap: 24px; }
.cm-curso-head h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; margin: 14px 0 14px; }
.cm-curso-portada { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 18px; border: var(--rule-mid); border-radius: var(--radius); background: #f6f7f2; }
.cm-caja { padding: 18px 20px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); box-shadow: var(--shadow); align-self: start; }
.cm-caja-precio .cm-precio strong { font-size: 26px; }
.cm-cta { display: block; text-align: center; margin: 14px 0 10px; }
.cm-preview { display: block; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--red-ink); margin-bottom: 16px; }
.cm-caja-h { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 8px 0; }
.cm-incluye { margin: 0 0 12px; padding-left: 18px; font-size: 15px; line-height: 1.6; }
@media (min-width: 900px) {
  .cm-curso { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; }
  .cm-curso-head { grid-column: 1; }
  .cm-caja { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 64px; }
  .cm-curso-main { grid-column: 1; }
}

.cm-temario { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cm-modulo { padding: 14px 16px; background: var(--card); border: var(--rule-hair); border-radius: var(--radius); }
.cm-modulo h3 { font-size: 20px; margin-bottom: 8px; }
.cm-lecciones { list-style: none; margin: 0; padding: 0; }
.cm-l { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 8px; padding: 9px 0; border-top: var(--rule-dash); font-size: 16px; }
.cm-l a { color: var(--ink); }
.cm-l a:hover { color: var(--red-ink); }
.cm-l-meta { grid-column: 2; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cm-l-n { font-size: 13px; color: var(--faint); padding-top: 2px; }
/* AI course: the modules read as one path with stops. */
.cm-ruta .cm-modulo { position: relative; margin-left: 18px; }
.cm-ruta .cm-modulo::before { content: ""; position: absolute; left: -18px; top: -14px; bottom: -14px; border-left: 2px dashed #3d5aa8; }
.cm-ruta .cm-l-laboratorio .cm-l-meta, .cm-ruta .cm-l-reto .cm-l-meta { color: #3d5aa8; font-weight: 600; }

/* Tutor: a sample chat, answers as cited material. */
.cm-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 720px; }
.cm-chat li { padding: 12px 16px; border-radius: var(--radius); font-size: 16px; line-height: 1.5; }
.cm-chat-alumno { justify-self: end; max-width: 85%; background: var(--ink); color: var(--paper); }
.cm-chat-tutor { max-width: 95%; background: var(--card) linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 22px; border: 1.5px solid #3d5aa8; }
.cm-chat-quien { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; opacity: .8; }
.cm-chat-tutor .cm-chat-quien { color: #3d5aa8; opacity: 1; }

/* Cited material: a claim with its stamp, or a fact with its number. */
.cm-mats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cm-mat { display: grid; gap: 6px; padding: 14px 16px; background: var(--card); border: var(--rule-hair); border-left: 4px solid var(--ink); border-radius: 8px; }
.cm-chat .cm-mat { background: transparent; border: 0; padding: 0; }
.cm-cifra { font-size: 26px; font-weight: 700; color: var(--red); }
.cm-mat-texto { font-family: var(--display); font-size: 19px; line-height: 1.35; }
.cm-mat-nota { font-size: 15px; line-height: 1.55; color: var(--muted); }
.cm-cita { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--faint); overflow-wrap: anywhere; }
.cm-cita a { color: var(--red-ink); white-space: nowrap; }

/* Lesson player. */
.cm-leccion { display: grid; gap: 28px; padding-top: 18px; }
.cm-leccion-main h1 { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.08; margin-bottom: 20px; }
.cm-video { position: relative; margin: 0 0 20px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: var(--ink); border-radius: var(--radius); }
.cm-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.cm-play { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 28px; padding-left: 5px; }
.cm-video figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; color: var(--paper); font-size: 14px; background: linear-gradient(transparent, rgba(31, 36, 48, .85)); }
.cm-video figcaption .cm-ej { color: var(--paper); opacity: .8; display: block; }
.cm-recurso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; margin-bottom: 8px; background: var(--card) linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 22px; border: var(--rule-mid); border-radius: var(--radius); }
.cm-prueba { padding-top: 24px; }
.cm-prueba > h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 10px; padding-bottom: 8px; border-bottom: var(--rule-heavy); }
.cm-preguntas { margin: 0; padding-left: 22px; display: grid; gap: 18px; }
.cm-preguntas details { margin-top: 8px; }
.cm-preguntas summary { cursor: pointer; font-family: var(--mono); font-size: 13px; color: var(--red-ink); min-height: 32px; }
.cm-preguntas details .cm-mats { margin-top: 8px; }
.cm-pasar { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 16px; border-top: var(--rule-mid); font-family: var(--mono); font-size: 14px; }
.cm-pasar a { color: var(--red-ink); }
.cm-pasar a:only-child { margin-left: auto; }
.cm-indice { padding: 16px 18px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); align-self: start; }
.cm-indice a[aria-current="page"] { font-weight: 700; color: var(--red-ink); }
.cm-l-hecha .cm-l-n { color: var(--ok); font-weight: 700; }
@media (min-width: 900px) {
  .cm-leccion { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }
  .cm-indice { position: sticky; top: 64px; }
}

.cm-avance { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 12px; }
.cm-avance progress { width: min(100%, 240px); height: 10px; accent-color: var(--ok); }
.cm-avance .num { font-size: 13px; color: var(--muted); }

/* My learning. */
.cm-mios { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cm-mio { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); }
.cm-mio img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: var(--rule-hair); background: #f6f7f2; }
.cm-mio h3 { font-size: 20px; line-height: 1.2; margin: 6px 0 2px; }
.cm-mio h3 a { color: var(--ink); }

/* The sample certificate. */
.cm-constancia {
  position: relative; overflow: hidden; display: grid; justify-items: center; gap: 8px; text-align: center;
  margin: 24px auto 0; max-width: 760px; padding: 40px 24px 32px;
  background: var(--card); border: 6px double var(--ink); border-radius: 4px; font-size: 17px;
}
.cm-constancia img { height: 30px; width: auto; margin-bottom: 10px; }
.cm-marca-agua { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-family: var(--mono); font-weight: 700; font-size: clamp(64px, 16vw, 150px); letter-spacing: 0.1em; color: rgba(196, 82, 27, 0.13); pointer-events: none; }
.cm-const-titulo { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-ink); }
.cm-const-nombre { font-family: var(--hand); font-size: clamp(30px, 6vw, 44px); line-height: 1.2; }
.cm-const-curso { font-family: var(--display); font-size: clamp(22px, 3.5vw, 30px); line-height: 1.2; max-width: 30ch; }
.cm-oficial { margin-top: 12px; padding: 12px 14px; border: 1.5px solid var(--red-ink); border-radius: 8px; }

/* Checkout and builder notices. */
.cm-aviso { margin: 0 0 18px; padding: 12px 16px; font-size: 16px; line-height: 1.5; border: 1.5px dashed var(--red-ink); border-radius: 10px; background: #fbefe6; }
.cm-aviso strong { color: var(--red-ink); }
.cm-checkout .ficha { margin-bottom: 14px; }

/* Teach here: the counts of real material. */
.cm-cuenta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.cm-cuenta li { padding: 14px 16px; font-size: 15px; background: var(--card) linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 22px; border: var(--rule-mid); border-radius: var(--radius); }
.cm-cuenta .num { display: block; font-size: 34px; font-weight: 700; color: var(--red); line-height: 1.1; }
.cm-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 14px; }
.cm-links a { color: var(--red-ink); }

/* Instructor panel. */
.cm-tabla { overflow-x: auto; border: var(--rule-mid); border-radius: var(--radius); background: var(--card); margin-bottom: 12px; }
.cm-tabla table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.cm-tabla caption { text-align: left; padding: 12px 16px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.cm-tabla th, .cm-tabla td { text-align: left; padding: 12px 16px; border-top: var(--rule-dash); vertical-align: top; }
.cm-tabla thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.cm-tabla tbody th { font-weight: 400; }
.cm-tabla tbody th a { color: var(--ink); }

/* Course builder: a real form, disabled. */
.cm-form { display: grid; gap: 18px; max-width: 860px; }
.cm-form fieldset { margin: 0; padding: 16px 18px 18px; background: var(--card); border: var(--rule-mid); border-radius: var(--radius); display: grid; gap: 12px; }
.cm-form legend { padding: 0 6px; font-family: var(--display); font-size: 21px; }
.cm-form fieldset[disabled] { opacity: 1; }
.cm-form input[disabled], .cm-form button[disabled] { cursor: not-allowed; }
.cm-opcion { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15px; line-height: 1.5; }
.cm-opcion input { margin-top: 4px; accent-color: var(--ink); }
.cm-campo { display: grid; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.cm-campo input { min-height: var(--control-h); padding: 0 12px; font: inherit; font-family: var(--body, inherit); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--paper); border: var(--rule-hair); border-radius: var(--control-radius); }
.cm-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.cm-grupo { background: var(--paper) !important; border: var(--rule-dash) !important; gap: 6px !important; align-content: start; }
.cm-grupo legend { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.cm-check { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.cm-check input { accent-color: var(--ink); }

@media (max-width: 767px) {
  .cm-banner p { font-size: 13px; }
  .cm-instructores { padding: 22px 18px; }
}