/* from src/styles/puerta.css — built in, do not edit here: the tokens, the bar, the WhatsApp glyph */
:root{
  --cream:#FFF7F0;
  --paper:#FFF1E4;
  --sand:#FDE7D4;
  --peach:#FFDCBE;
  --honey:#FFC46B;
  --amber:#F2913C;
  --coral:#F07A5F;
  /* THE MARK IS THE ACCENT. The mark used to be the hot brand red, which meant the page
     ran two oranges that never quite agreed: a red mark and a terracotta UI accent. The
     mark is now the accent itself — 6.57:1 on bone where the red managed 3.66:1, 3.91:1
     on the hero's terracotta wall. Nothing on this page is told apart by hue any more:
     the mark is told apart from accent text by being a filled rounded square at 30px. */
  --mark:#A8330F;         /* mark — outer square */
  --mark-core:#FFFDF9;    /* mark — inner square, same bone as the light that floods the page */
  --brand:#C4400F;        /* the same hue one step lighter: travelling and active graphics */
  --terra:#A8330F;        /* the UI accent, now identical to the mark */
  --stage-hi:#D2692A;     /* assembly ground — the "before"; the light replaces it as the mark lands */
  --stage-mid:#C25E23;
  --stage-lo:#B15320;
  --bone:#FFFDF9;
  --hero-sky:#F2D8BE;     /* the hero's own top band — what a bounce past the top reveals */
  --hero-foot:#F0CEAD;    /* the clay the hero's wedge-light lands on; also the top of #hacemos */
  --ink:#3B221A;
  --ink-soft:#6E4B3A;
  --ink-faint:#94705C;
  --line:rgba(59,34,26,.14);
  --glass:rgba(255,252,248,.62);
  --glass-line:rgba(255,255,255,.78);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.25rem,5vw,5rem);
}
.wa{width:1.06em;height:1.06em;flex:none;vertical-align:-.16em;display:inline-block}
/* ---------- header ----------
   ONE SOLID COLOUR, EVERY SECTION, ALWAYS. No gradient, no veil, no ::before fade, no
   per-section adaptation: the bar does not react to what is behind it, because every
   adaptive treatment tried here — the clay veil, the gradient foot, an opaque plate that
   appeared only over the assembly stage — read as an artifact rather than as a bar.
   It is the page's own cream, opaque, from the first pixel to the last.

   That decision and the mark's are the same decision. The mark is terracotta with a bone
   core in every context and never changes: on clay it would measure 1.52:1, so the bar
   under it can never be clay-toned or transparent. A solid light bar is what makes a
   stable mark possible; the mark measures 6.30:1 on it everywhere on the page. */
header{position:fixed;top:0;left:0;right:0;z-index:40;padding:.8rem 0;
  background:var(--cream);
  box-shadow:0 1px 0 var(--line),0 18px 40px -34px rgba(59,34,26,.85);
  transform:translateY(0);opacity:1;will-change:transform;
  transition:transform .7s var(--ease),opacity .45s var(--ease)}
/* the convergence owns the screen: nothing but the mark assembling, the light and the two
   lines. The bar slides out on the section's own scroll progress — the same signal that
   drives the assembly, so the two can never desync — and slides back the instant the
   section releases. It goes inert while it is off-screen so a keyboard user is never
   tabbed into something they cannot see. */
header.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--pad)}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none}
.brand svg{width:30px;height:30px;border-radius:7px}
.brand svg .mo{fill:var(--mark)}
.brand svg .mi{fill:var(--mark-core)}
.wordmark{font-weight:700;font-size:1.05rem;letter-spacing:-.015em}
.nav{display:none;gap:1.9rem;font-size:.87rem;color:var(--ink-soft)}
.nav a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease)}
.nav a:hover{color:inherit;border-color:currentColor}
@media(min-width:920px){.nav{display:flex}}
/* THE PRIMARY CTA. It was a near-white glass pill on a near-white bar, which made the one
   thing on the page that must never disappear disappear; then it was a brick that read as
   a warning. #B85114 is the middle: a warm burnt sienna, more orange and lighter than the
   mark beside it, dark enough that the bone label clears 4.5:1 and that the pill's own
   edge clears 3:1 against the cream bar without needing a ring to draw it. */
.hdr-cta{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.85rem;font-weight:600;padding:.56rem 1.1rem;border-radius:999px;
  color:#FFF9F4;background:#B85114;
  box-shadow:0 12px 26px -16px rgba(140,54,8,.9),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.hdr-cta:hover{transform:translateY(-1px);background:#C75B18;
  box-shadow:0 16px 30px -16px rgba(140,54,8,1),inset 0 1px 0 rgba(255,255,255,.3)}
.hdr-cta .wa{color:currentColor}


/* ============================================================================
   THE BLOG — «Mostrador», the counter.

   This is the winning prototype `gtm/blog/designs/e-final.html` ported to the
   pages `scripts/build-blog.mjs` writes. It is a SEPARATE stylesheet from
   puerta.css on purpose and the blog pages load only this one: they are static
   HTML beside the SPA, they never boot React, and pulling in the hero's
   stylesheet would drag the whole bundle's class vocabulary (`.wrap`, `.nav`,
   `header`) into a page that means different things by those names.

   What it does share with puerta.css is every colour that has a name there:
   --terra, --ink, --ink-soft, --paper, --peach, --honey, --amber, --bone are
   the same hexes, so the blog and the site cannot drift apart. The two
   departures are marked where they happen.

   Never `overflow-x:hidden` on html or body — it creates a scroll container and
   silently breaks `position:sticky`, which the counter depends on. Use `clip`.
   ============================================================================ */

:root{
  /* The shared tokens (--bone, --terra, --ink, --peach, --honey, --paper…) are
     not declared here: the build prepends puerta.css's :root to this file, so
     colour has one home. What follows is what the blog adds or departs from. */

  /* DEPARTURE 1. puerta.css's --ink-faint (#94705C) reads 4.37:1 on bone, which
     is fine at the sizes the site uses it (a 14px note under a heading) and not
     fine here, where it carries figure captions and the reference list at
     11.5–14px. Same hue, nudged to 5.1:1. */
  --ink-faint:#8A6450;

  /* the blog's own paper furniture — a stylesheet of rules and torn edges needs
     two hairline weights the one-page site never had a use for */
  --rule:#E8D5C4;
  --rule-hard:#D3B69F;
  --sheet:#FFFDF9;          /* ground under a pasted sheet */

  --gut:20px;
  --measure:65ch;
  --bar:66px;               /* the site's fixed bar, measured: .8rem padding twice around the CTA pill */
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}


*{box-sizing:border-box}

html{overflow-x:clip;scroll-behavior:smooth;scrollbar-color:var(--rule-hard) var(--bone);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}

::selection{background:var(--honey);color:#3B221A}

a{color:var(--terra);text-underline-offset:.22em;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--terra) 45%,transparent)}
a:hover{text-decoration-color:var(--terra)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bone)}
::-webkit-scrollbar-thumb{background:var(--rule-hard);border:3px solid var(--bone);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--amber)}

/* ---------------- the header is the site's ----------------
   The bar's markup and rules come from puerta.css, prepended at build time
   (the `header`, `.hdr`, `.brand`, `.nav`, `.hdr-cta` and `.wa` rules), so the
   blog's bar is the home page's bar to the pixel. The site's bar is fixed; the
   page starts under it. Scrolling down hides it with the site's own `.gone`. */
body{padding-top:var(--bar)}
.hdr-wrap{max-width:1140px;margin:0 auto;padding:0 var(--pad)}
/* the blog colours every link terracotta; the bar's links are ink, as on the site */
#hdr .brand,#hdr .nav a{color:inherit} /* not the CTA pill: puerta.css paints its label bone on sienna, and an id selector on every link was overriding it */
.wordmark{font-family:"Manrope","Inter",system-ui,sans-serif}

.tape{
  position:fixed;left:0;top:0;height:4px;width:0;
  background:var(--terra);z-index:45;
  transform:translateY(var(--bar));
  transition:transform .7s var(--ease);
}
body.nav-off .tape{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .tape{transition:none}
}

/* ---------------- post ---------------- */

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}

.masthead{padding:22px 0 0}

/* Diario display, with the figure struck in terracotta */
h1{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(2.05rem,8.4vw,4rem);
  line-height:1.02;letter-spacing:-.038em;
  margin:0;max-width:15ch;text-wrap:balance;
}
h1 em,.lead h2 em{font-style:normal;color:var(--terra)}
.byline{
  display:flex;align-items:center;gap:11px;margin-top:20px;
  padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.face{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  box-shadow:0 0 0 2px var(--terra);background:var(--peach);
}
.byline .who{font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.byline .who b{color:var(--ink);font-weight:600}
.byline .who span{display:block;font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:12.5px}

/* the cover sheet: never cropped, at its own 16:9 */
.cover{margin:18px calc(var(--gut)*-1) 0}
.cover img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:contain;
  background:var(--sheet);
}
.cover figcaption{
  padding:8px var(--gut) 0;font-size:11.5px;color:var(--ink-faint);line-height:1.45;
}

/* the ticket: «En 30 segundos», torn off the pad */
.ticket{
  position:relative;margin:24px 0 32px;
  background:var(--paper);color:var(--ink);
  padding:26px 20px 24px;
  -webkit-mask:
    radial-gradient(circle 7px at 7px 0, #0000 97%, #000) 0 0/28px 60% repeat-x,
    radial-gradient(circle 7px at 7px 100%, #0000 97%, #000) 0 100%/28px 60% repeat-x;
  mask:
    radial-gradient(circle 7px at 7px 0, #0000 97%, #000) 0 0/28px 60% repeat-x,
    radial-gradient(circle 7px at 7px 100%, #0000 97%, #000) 0 100%/28px 60% repeat-x;
}
.ticket h2{
  font-family:Manrope,sans-serif;font-weight:800;font-size:15px;letter-spacing:.01em;
  margin:0 0 14px;color:var(--terra);display:flex;align-items:center;gap:10px;
}
.ticket h2::after{content:"";height:1px;flex:1;background:var(--terra);opacity:.35}
.ticket ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.ticket li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.62}
.ticket li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--amber);
}

/* body */
article{max-width:var(--measure)}
article p{margin:0 0 1.35em}
article ul{margin:0 0 1.35em;padding-left:1.2em}
article li{margin-bottom:.5em}
article h2{
  font-family:Manrope,sans-serif;font-weight:700;
  font-size:clamp(1.42rem,5.4vw,1.95rem);line-height:1.16;letter-spacing:-.028em;
  margin:2.3em 0 .85em;scroll-margin-top:90px;
  position:relative;
}
article h2::before{
  content:"";position:absolute;top:-.62em;left:0;width:34px;height:3px;background:var(--terra);
}
article h2:first-of-type{margin-top:1.6em}

/* charts: pasted sheets that break the gutters on the phone */
.chart{
  margin:2.2em calc(var(--gut)*-1);
  background:var(--sheet);
  border-top:1px solid var(--rule-hard);border-bottom:1px solid var(--rule-hard);
}
.chart img{display:block;width:100%;height:auto}
.chart figcaption{
  padding:10px var(--gut) 12px;font-size:12px;line-height:1.5;
  color:var(--ink-faint);background:var(--bone);
  border-top:1px solid var(--rule);
}

ol.steps{counter-reset:s;list-style:none;margin:1.6em 0 1.9em;padding:0;display:grid;gap:20px}
ol.steps li{counter-increment:s;position:relative;padding-left:46px;line-height:1.66;margin:0}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.06em;
  font:700 14px/26px Manrope,sans-serif;font-variant-numeric:tabular-nums;
  width:30px;height:26px;text-align:center;
  color:var(--terra);border-bottom:2px solid var(--honey);
}
ol.steps b,ol.steps strong{font-weight:700;color:var(--ink)}

/* the pull quote: a `>` line in the Markdown. The takeaway of the paragraphs
   around it, set large and full width, so a reader who skims still gets it. On
   the phone it breaks the gutters like a chart; on the desktop it spans the
   article column past the measure. */
article blockquote{
  margin:2.4em calc(var(--gut)*-1);padding:26px var(--gut);
  border-top:3px solid var(--terra);border-bottom:1px solid var(--rule-hard);
  font-family:Manrope,sans-serif;font-weight:700;font-size:clamp(1.25rem,4.6vw,1.7rem);
  line-height:1.3;letter-spacing:-.022em;color:var(--ink);background:var(--paper);
  max-width:none;
}
article blockquote p{margin:0}
article blockquote b,article blockquote strong{color:var(--terra);font-weight:700}
@media (min-width:900px){
  article blockquote{margin-inline:0;padding-inline:28px;max-width:none}
}

/* the stamp: «La pregunta» */
article blockquote.stamp{
  max-width:none;background:transparent;border-bottom:0;font-family:Inter,system-ui,sans-serif;letter-spacing:0;
  margin:2.6em 0 2.2em;padding:20px 22px;
  border:2px solid var(--terra);color:var(--terra);
  transform:rotate(-.9deg);
  font-size:17px;line-height:1.55;font-weight:500;
  background:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--terra) 22%,transparent);
}
.stamp b{
  display:block;font-family:Manrope,sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px;
}

.close{
  margin:2.6em 0 0;padding-top:26px;border-top:1px solid var(--rule);
  font-size:15px;line-height:1.65;color:var(--ink-soft);font-style:italic;
}
.close p{margin:0}
.cta{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--terra);color:var(--sheet);text-decoration:none;
  font:700 15.5px/1 Manrope,sans-serif;letter-spacing:-.01em;font-style:normal;
  padding:8px 22px 8px 8px;border-radius:999px;
  box-shadow:0 1px 2px rgba(59,34,26,.18), 0 12px 22px -14px rgba(168,51,15,.9);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.close .cta{margin-top:20px}
.cta:hover{transform:translateY(-2px);background:#8E2A0B;
  box-shadow:0 2px 4px rgba(59,34,26,.2),0 18px 28px -14px rgba(168,51,15,.95)}
@media (prefers-reduced-motion:reduce){.cta:hover{transform:none}}
.cta svg{flex:0 0 auto}
.cta .face{width:40px;height:40px;box-shadow:0 0 0 2px var(--sheet)}

/* sources as a reference list */
.sources{max-width:var(--measure);margin:3.2em 0 0;padding-top:24px;border-top:2px solid var(--ink)}
.sources ol{list-style:none;margin:0;padding:0;counter-reset:r}
.sources li{
  counter-increment:r;position:relative;padding-left:38px;margin-bottom:16px;
  font-size:14px;line-height:1.6;color:var(--ink-soft);
}
.sources li::before{
  content:"[" counter(r) "]";
  position:absolute;left:0;top:0;
  font:600 13px/1.6 Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--terra);
}

/* ---------------- desktop: the rail, and the title beside the cover ---------------- */

.post-grid{display:block}
.rail{display:none}

@media (min-width:900px){
  :root{--gut:40px}
  body{font-size:18px}
  .post-grid{
    display:grid;grid-template-columns:190px minmax(0,1fr);gap:56px;align-items:start;
  }
  .masthead{grid-column:1/-1;padding-top:30px}

  /* title and the whole cover share the first screen */
  .masthead-top{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
    grid-template-rows:auto auto;
    column-gap:48px;align-items:center;
  }
  h1{font-size:clamp(2.6rem,4.3vw,3.9rem);max-width:13ch;grid-column:1;grid-row:1;align-self:end}
  .byline{max-width:none;grid-column:1;grid-row:2;align-self:start}
  .cover{margin:0;grid-column:2;grid-row:1/span 2;align-self:center}
  .cover figcaption{padding:10px 0 0}

  .ticket{max-width:780px;padding:30px 34px 28px}
  .ticket ul{grid-template-columns:1fr 1fr 1fr;gap:26px;align-items:start}
  .rail{
    display:block;position:sticky;top:90px;
    padding-top:6px;border-top:2px solid var(--ink);
  }
  .rail ol{list-style:none;margin:0;padding:0}
  .rail a{
    display:block;padding:7px 0 7px 14px;margin-left:-1px;
    border-left:1px solid var(--rule-hard);
    font-size:12.5px;line-height:1.35;color:var(--ink-faint);text-decoration:none;
    transition:color .25s var(--ease),border-color .25s var(--ease);
  }
  .rail a:hover{color:var(--ink)}
  .rail a[aria-current="true"]{color:var(--terra);border-left:2px solid var(--terra);font-weight:600}
  .chart{margin-inline:0;border:1px solid var(--rule-hard)}
  .chart figcaption{padding-inline:16px}
  article{max-width:68ch}
}

/* ---------------- index: the front page ---------------- */

.index-head{
  padding:40px 0 16px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);
}
.index-head h1{margin:0;font-size:clamp(2rem,8vw,3.2rem);max-width:none;letter-spacing:-.04em}

/* the lead: the note of the day, with its whole cover */
.lead{
  display:grid;grid-template-columns:1fr;gap:20px;
  padding:26px 0 30px;border-bottom:2px solid var(--ink);
}
.lead .sheet{
  display:block;background:var(--sheet);
  border:1px solid var(--rule-hard);
}
.lead .sheet img{
  display:block;width:100%;height:auto;
}
.lead h2{
  font-family:Manrope,sans-serif;font-weight:800;
  font-size:clamp(1.75rem,6.6vw,2.6rem);line-height:1.05;letter-spacing:-.035em;
  margin:0 0 12px;text-wrap:balance;
}
.lead.empty{grid-template-columns:1fr;border-top:3px solid var(--terra);padding-top:22px}
.lead.empty h2{max-width:22ch}
.lead h2 a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.lead:hover h2 a,.lead h2 a:hover{color:var(--terra)}
.lead p{margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:52ch}
.lead .meta{
  font-size:12.5px;letter-spacing:.01em;
  color:var(--ink-faint);font-variant-numeric:tabular-nums;
}
.lead .meta b{color:var(--terra);font-weight:800;font-family:Manrope,sans-serif;letter-spacing:.02em}

.list-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:26px 0 8px;
}
/* the small uppercase label every list and reference block starts with */
.list-head h2,.sources h2,.faq h2{
  margin:0;font-family:Manrope,sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.sources h2{margin-bottom:18px}
.list-head span{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-variant-numeric:tabular-nums;
}

.list{columns:1;column-gap:56px;border-top:1px solid var(--rule-hard)}
.list a{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;
  align-items:baseline;gap:12px;
  padding:13px 6px 13px 0;margin:0;
  border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);
  break-inside:avoid;
  transition:background .2s var(--ease);
}
.list a:hover{background:var(--paper)}
.list a:hover .t{color:var(--terra)}
.list .n{
  font:800 12px/1.5 Manrope,sans-serif;font-variant-numeric:tabular-nums;
  color:var(--terra);letter-spacing:.06em;
}
.list .t{
  font-family:Manrope,sans-serif;font-weight:600;font-size:15.5px;line-height:1.35;
  letter-spacing:-.015em;transition:color .2s var(--ease);
}
.list .r{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-faint);font-variant-numeric:tabular-nums;
}

.front-foot{
  margin-top:38px;padding-top:22px;border-top:2px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
/* With one post there is no list, so the foot follows the lead directly — and its
   rule would land a hairline under the lead's own, two heavy lines with a band of
   nothing between them. The lead's rule already closes that section. */
.lead + .front-foot{border-top:0;padding-top:0;margin-top:30px}
.front-foot p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:46ch}

@media (min-width:700px){
  .list{columns:2}
  .more .list{columns:1} /* two related posts read as a pair, not as two columns */
  .list .t{font-size:16px}
}
@media (min-width:900px){
  .lead{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;align-items:center;padding:34px 0 38px}
  .lead .sheet{grid-column:2;grid-row:1}
  .lead .words{grid-column:1;grid-row:1}
  .lead h2{font-size:clamp(2.1rem,3.3vw,2.9rem)}
  .index-head{padding-top:52px}
}

.foot{
  margin-top:54px;padding:22px 0 60px;border-top:1px solid var(--rule);
  font-size:12.5px;color:var(--ink-faint);
}
.foot a{color:inherit}
article .foot{margin-top:60px}

/* ---------------- the FAQ ----------------

   Questions a reader asks after the post, answered from the post. It is the
   reference list's furniture — a hairline above, a small uppercase heading —
   because it is the same kind of block: an appendix, not a new argument. */
.faq{max-width:var(--measure);margin:3em 0 0;padding-top:26px;border-top:1px solid var(--rule)}
.faq h2{margin:0 0 20px;scroll-margin-top:90px}
.faq h3{
  font-family:Manrope,sans-serif;font-weight:700;font-size:1.04rem;line-height:1.32;
  letter-spacing:-.02em;margin:1.7em 0 .55em;color:var(--ink);
}
.faq h3:first-of-type{margin-top:0}
.faq p{margin:0 0 1em;font-size:16px;line-height:1.68;color:var(--ink-soft)}

/* ---------------- share ----------------

   Two ways to pass the post on. No email capture (see scripts/build-blog.mjs). */
.share{
  max-width:var(--measure);margin:2.6em 0 0;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.share-label{
  width:100%;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.share-wa,.share-copy{
  display:inline-flex;align-items:center;gap:8px;
  font:600 14px/1 Inter,sans-serif;color:var(--ink);text-decoration:none;
  background:transparent;border:1px solid var(--rule-hard);border-radius:4px;
  padding:11px 15px;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.share-wa:hover,.share-copy:hover{color:var(--terra);border-color:var(--terra)}
.share-wa svg{width:16px;height:16px;flex:0 0 auto}

/* ---------------- seguí leyendo ----------------
   The front page's list, at the end of a post: number, title, minutes. One
   column — there are two entries, and two columns of one line each is a table
   of contents for nothing. */
.more{max-width:var(--measure);margin:2.8em 0 0}


/* ---------------- the author page ---------------- */
.author-head{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:44px 0 24px;border-bottom:2px solid var(--ink);
}
/* The portrait is a rounded square at 22% of its width, as «Nosotros» has it:
   the mark is a rounded square, and a circle here reads as a default. */
.author-head .pp{
  width:110px;height:110px;border-radius:22%;object-fit:cover;
  background:var(--peach);flex:0 0 auto;
}
.author-head h1{font-size:clamp(1.9rem,6vw,2.8rem);max-width:none;letter-spacing:-.035em}
.author-head .role{margin:10px 0 0;font-size:13px;color:var(--ink-faint)}
.author-head .links{margin:6px 0 0;font-size:14px;color:var(--ink-faint)}
.author-bio{
  max-width:var(--measure);margin:28px 0 0;
  font-size:16.5px;line-height:1.7;color:var(--ink-soft);
}
.author-bio p{margin:0 0 1.15em}