/* ── Tipografía: Familjen Grotesk (Google Fonts) para titulares y
   Open Sans para el texto. Touvlo quedó descartada al no licenciarse. ── */
/* ═══════════════════════════════════════════════════════════════
   BERNARDETTE M. — NURTURING MEANINGFUL CONNECTIONS
   The network is not decoration. It is how she thinks, drawn.
   A line is a relationship. A node is potential. Nothing on this
   page exists unless it carries that meaning.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Night ─────────────────────────────────────────────────── */
  --midnight:#1E0C32;
  --navy:#2E144C;
  --navy-raised:#3A1B60;
  --violet:#8248C9;
  --violet-kit:#4B2E6D;   /* Brand Kit, exact */
  --indigo:#7A52C4;
  --turquoise:#66BFCB;
  --cyan:#9AD9E2;
  --white:#F8F5FB;

  /* Day — editorial paper ─────────────────────────────────── */
  --paper:#F8F5FB;
  --paper-alt:#FCFBFE;
  --ink:#1E0C32;
  --ink-soft:rgba(30,12,50,.72);
  --ink-faint:rgba(30,12,50,.64);
  --line:rgba(30,12,50,.10);
  --indigo-ink:#66349E;

  /* Rhythm ────────────────────────────────────────────────── */
  --gutter:clamp(1.5rem,5vw,6.5rem);
  --chapter:clamp(6.5rem,15vh,11rem);
  --measure:38rem;

  --ease:cubic-bezier(.16,1,.3,1);
  --slower:1.9s;

  /* Touvlo no se licenció: Familjen Grotesk pasa de suplente a titular.
     Se quitan también sus @font-face, que daban cuatro 404 por página. */
  --display-face:"Familjen Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --text-face:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--midnight);
  color:var(--ink);
  font-family:var(--text-face);
  font-weight:400;
  font-size:clamp(.95rem,.92rem + .16vw,1.02rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
::selection{background:rgba(102,52,158,.16)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}

/* ── Type ─────────────────────────────────────────────────────
   Touvlo is a grotesque, not a serif: the editorial weight has to
   come from scale, tight tracking and air — never from contrast.
   Open Sans carries everything that has to be read, not admired. */
em{font-style:italic}
.display{font-family:var(--display-face);font-weight:500;font-size:clamp(2.3rem,6.9vw,6.05rem);line-height:1.02;letter-spacing:-.042em}
.h2{font-family:var(--display-face);font-weight:500;font-size:clamp(2rem,4.9vw,4.1rem);line-height:1.06;letter-spacing:-.038em}
.h3{font-family:var(--display-face);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.16;letter-spacing:-.026em}
.label{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.lede{font-size:clamp(1.04rem,.98rem + .42vw,1.3rem);line-height:1.58;color:var(--ink-soft);max-width:var(--measure);font-weight:400;letter-spacing:-.003em}
p{max-width:var(--measure)}
p+p{margin-top:1.15em}

/* ── Layers ─────────────────────────────────────────────────── */
#field{position:fixed;inset:0;z-index:0;pointer-events:none}       /* nodes — night only */
#thread{position:fixed;inset:0;z-index:5;pointer-events:none}      /* the orbit — everywhere */
#atmosphere{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 78% at 50% -14%, rgba(122,82,196,.13), transparent 60%),
    radial-gradient(70% 48% at 96% 34%, rgba(130,72,201,.075), transparent 58%),
    radial-gradient(60% 44% at 4% 82%, rgba(102,191,203,.045), transparent 60%);
}
.page{position:relative;z-index:3}

/* ── Tones ──────────────────────────────────────────────────── */
.tone-light{background:var(--paper);color:var(--ink)}
.tone-light--alt{background:var(--paper-alt)}
.tone-dark{
  background:transparent;color:var(--white);
  --ink:var(--white);
  --ink-soft:rgba(248,245,251,.74);
  --ink-faint:rgba(248,245,251,.52);
  --line:rgba(130,72,201,.18);
}

/* ── Cursor ─────────────────────────────────────────────────── */
#cursor{position:fixed;top:0;left:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .7s var(--ease)}
#cursor.on{opacity:1}
#cursor i{position:absolute;left:0;top:0;display:block;border-radius:50%;transform:translate(-50%,-50%)}
.cur-dot{width:5px;height:5px;background:var(--cur,#F8F5FB);transition:transform .6s var(--ease),opacity .6s,background-color .8s}
.cur-halo{width:40px;height:40px;background:var(--halo,radial-gradient(circle,rgba(102,191,203,.28),transparent 70%));filter:blur(3px);transition:transform .9s var(--ease),opacity .8s}
#cursor.hot .cur-halo{transform:translate(-50%,-50%) scale(1.8)}
#cursor.hot .cur-dot{transform:translate(-50%,-50%) scale(.4);opacity:.5}
@media (hover:hover) and (pointer:fine){body,a,button,select{cursor:none}input,textarea{cursor:text}}

/* ── Overture ───────────────────────────────────────────────── */
#overture{position:fixed;inset:0;z-index:100;background:var(--midnight);display:grid;place-items:center;transition:opacity .9s var(--ease),visibility .9s}
#overture.gone{opacity:0;visibility:hidden}
.overture__inner{display:grid;justify-items:center;gap:clamp(1.8rem,4.5vh,3rem)}
/* ── The mark ─────────────────────────────────────────────────
   The real logotype, used as a mask so a single asset inks itself
   in whatever colour the chapter needs — white at night, navy on
   paper — with no second file and no recolouring.
   Node sits at 90.18% / 45.92% of the artwork (measured, not eyeballed). */
.mark{
  position:relative;display:block;
  aspect-ratio:326/306;                 /* the artwork's true ink box */
  color:currentColor;
}
.mark__ink{
  display:block;width:100%;height:100%;
  background:currentColor;
  -webkit-mask:url("logo.png") center/contain no-repeat;
          mask:url("logo.png") center/contain no-repeat;
}
/* The living node that lands on the printed one. */
.mark__spark{
  position:absolute;left:90.18%;top:45.92%;
  width:26%;height:26%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(102,191,203,.85) 0%,rgba(102,191,203,.35) 26%,transparent 62%);
}

.mark--ov{width:clamp(150px,29vw,208px);color:var(--white)}
/* Darkness → the node ignites → the mark is swept into being along the
   orbit's own direction → it settles and the spark dissolves into it. */
.mark--ov .mark__ink{
  clip-path:polygon(-30% -30%, -30% -30%, -60% 130%, -60% 130%);
  animation:sweep 1.65s var(--ease) .5s forwards;
}
.mark--ov .mark__spark{animation:spark 2.1s var(--ease) .12s forwards}
@keyframes sweep{
  to{clip-path:polygon(-30% -30%, 190% -30%, 160% 130%, -60% 130%)}
}
@keyframes spark{
  0%{opacity:0;scale:.2}
  22%{opacity:1;scale:1}
  62%{opacity:1;scale:1}
  100%{opacity:0;scale:1.5}
}
@keyframes bloom{to{opacity:1}}
.mark--nav{width:clamp(32px,2.6vw,39px);flex:none}
.ov-word{font-family:var(--display-face);font-weight:500;font-size:clamp(.95rem,2.2vw,1.3rem);letter-spacing:.3em;padding-left:.3em;color:var(--white);display:flex}
.ov-word span{opacity:0;filter:blur(8px);animation:letter 1.3s var(--ease) forwards}
@keyframes letter{to{opacity:1;filter:blur(0)}}
.ov-skip{position:absolute;bottom:clamp(1.5rem,5vh,2.4rem);opacity:0;animation:bloom .9s 1.9s forwards;color:rgba(248,245,251,.4)}

/* ── Navigation — practical, always legible ─────────────────── */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--indigo),var(--violet),var(--turquoise))}
#nav{
  position:fixed;top:0;left:0;right:0;z-index:61;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(.85rem,1.8vh,1.15rem) var(--gutter);
  opacity:0;transform:translateY(-10px);
  transition:opacity 1.2s var(--ease) .2s,transform 1.2s var(--ease) .2s,
             background-color .5s ease,backdrop-filter .5s ease,box-shadow .5s ease,color .5s ease;
  color:var(--white);
}
.ready #nav{opacity:1;transform:none}
#nav.on-light{color:var(--ink)}
#nav.stuck{background:rgba(248,245,251,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(30,12,50,.08)}
#nav.stuck.on-dark{background:rgba(30,12,50,.74);box-shadow:0 1px 0 rgba(130,72,201,.14)}
.brand{display:flex;align-items:center;gap:.65rem}
.brand svg{overflow:visible}
.brand__name{font-family:var(--display-face);font-weight:500;font-size:clamp(.95rem,.72rem + .55vw,1.15rem);letter-spacing:.11em;padding-left:.13em;white-space:nowrap}
.nav__links{display:flex;gap:clamp(1rem,2.2vw,2rem);align-items:center}
.nav__links a{font-size:.82rem;font-weight:500;letter-spacing:.02em;opacity:.8;position:relative;padding:.4rem 0;transition:opacity .4s ease}
.nav__links a:hover,.nav__links a.here{opacity:1}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--ease)}
.nav__links a.here::after,.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-cta{
  opacity:1!important;padding:.5rem 1.05rem!important;border-radius:980px;
  background:var(--indigo);color:#fff;font-weight:500;
  transition:background-color .4s ease,transform .5s var(--ease);
}
.nav-cta::after{display:none}
.nav-cta:hover{background:#542b86;transform:translateY(-1px)}
@media (max-width:880px){.nav__links a:not(.nav-cta){display:none}}

/* ── Mobile menu ────────────────────────────────────────────
   Below 880px five of the six links were display:none with no
   alternative, so a phone visitor could not reach any section.
   The word "Menu" rather than a hamburger: this brand writes. */
.menu-btn{
  display:none;font-size:.78rem;font-weight:500;letter-spacing:.04em;
  color:inherit;cursor:pointer;padding:.5rem .2rem;background:none;
}
.menu{
  position:fixed;inset:0;z-index:59;background:var(--midnight);
  display:flex;flex-direction:column;justify-content:center;
  gap:.2rem;padding:clamp(5rem,14vh,8rem) var(--gutter) var(--gutter);
  opacity:0;transition:opacity .6s var(--ease);
}
.menu[hidden]{display:none}
.menu.on{opacity:1}
.menu>a{
  display:flex;align-items:baseline;gap:1.1rem;
  font-family:var(--display-face);font-weight:500;
  font-size:clamp(1.9rem,9vw,2.6rem);letter-spacing:-.034em;line-height:1.5;
  color:var(--white);opacity:0;transform:translateY(10px);
}
.menu.on>a{animation:menuIn .7s var(--ease) forwards}
.menu.on>a:nth-child(1){animation-delay:.05s}
.menu.on>a:nth-child(2){animation-delay:.10s}
.menu.on>a:nth-child(3){animation-delay:.15s}
.menu.on>a:nth-child(4){animation-delay:.20s}
.menu.on>a:nth-child(5){animation-delay:.25s}
.menu.on>a:nth-child(6){animation-delay:.30s}
@keyframes menuIn{to{opacity:1;transform:none}}
.menu>a span{
  font-family:var(--text-face);font-size:.7rem;font-weight:600;
  letter-spacing:.12em;color:var(--turquoise);opacity:.7;flex:none;
}
.menu__foot{
  display:flex;gap:1.6rem;margin-top:2.2rem;padding-top:1.6rem;
  border-top:1px solid rgba(130,72,201,.2);
}
.menu__foot a{font-size:.82rem;font-weight:500;color:rgba(248,245,251,.6)}
body.menu-open{overflow:hidden}
body.menu-open #nav{color:var(--white);background:transparent;box-shadow:none}
@media (max-width:880px){
  .menu-btn{display:block}
  .nav-cta{display:none}
}
@media (min-width:881px){.menu{display:none!important}}

/* ── Scaffolding ────────────────────────────────────────────── */
section{position:relative;padding:var(--chapter) var(--gutter)}
/* The page heads are <header> and the Journal entries <article>, so they
   need the same side gutter the bands get from the rule above. */
.page-head,article.tone-light,article.tone-dark{padding-inline:var(--gutter)}
.wrap{max-width:78rem;margin:0 auto;position:relative}
.wrap--narrow{max-width:60rem}
.chapter-head{margin-bottom:clamp(2.4rem,6vh,4.5rem)}
.chapter-num{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:clamp(1rem,2.4vh,1.6rem)}
.chapter-num i{width:6px;height:6px;border-radius:50%;background:var(--indigo);display:block}
.tone-dark .chapter-num i{background:var(--turquoise);box-shadow:0 0 12px var(--turquoise)}
.hr{height:1px;background:var(--line);border:0}

html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--slower) var(--ease),transform var(--slower) var(--ease);transition-delay:var(--d,0s)}
html.js [data-reveal].in{opacity:1;transform:none}

/* Media frames used to live here. Until there is real photography,
   empty space is the more confident answer — a grey rectangle is a
   promise the page cannot keep. */

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 1.9rem;border-radius:980px;font-size:.95rem;font-weight:500;
  background:var(--indigo);color:#fff;
  transition:background-color .4s ease,transform .5s var(--ease);
}
.btn:hover{background:#542b86;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--indigo);padding-left:0;padding-right:0}
.tone-dark .btn--ghost{color:var(--turquoise)}
.btn--ghost:hover{background:transparent;transform:none;text-decoration:underline;text-underline-offset:4px}
.btn svg{transition:transform .5s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* ── 01 Hero — the one cinematic room ───────────────────────── */
/* A column: the content centres in the room above the scroll cue, and
   the cue follows it in the flow, so the two can never run together. */
#hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(6.5rem,14vh,9rem);padding-bottom:clamp(1.3rem,3.2vh,2.2rem)}
#hero .wrap{width:100%;max-width:none;margin:auto}
.hero__grid{display:grid;max-width:min(100%,56rem)}
/* Full-bleed, and scrimmed from the left so the type always wins.
   She is on the right of frame; object-position keeps her there as the
   viewport narrows instead of centring her behind the headline. */
/* The photograph keeps its own colour: instead of washing it in violet,
   it sits on the right and dissolves into the dark panel that carries
   the type. The lilac is the ground, not a filter over her. */
/* The whole photograph spans the hero; the violet is a long, soft ramp
   over it rather than a panel with an edge. Many stops so the eye never
   finds the seam. */
.hero__bg{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,
      var(--midnight) 0%, rgba(30,12,50,.95) 14%, rgba(30,12,50,.86) 26%,
      rgba(30,12,50,.70) 38%, rgba(30,12,50,.50) 50%, rgba(30,12,50,.30) 62%,
      rgba(30,12,50,.14) 74%, rgba(30,12,50,.04) 87%, rgba(30,12,50,0) 100%),
    linear-gradient(to bottom, rgba(30,12,50,.34) 0%, rgba(30,12,50,0) 26%, rgba(30,12,50,.52) 100%);
}
@media (max-width:940px){
  .hero__bg{inset:0;width:100%;height:100%}
  .hero__bg img{object-position:45% 30%}
  .hero__bg::after{background:linear-gradient(to bottom,
    rgba(30,12,50,.26) 0%, rgba(30,12,50,.34) 30%, rgba(30,12,50,.62) 58%,
    rgba(30,12,50,.88) 80%, var(--midnight) 100%)}
  #hero{padding-top:clamp(6.5rem,14vh,9rem)}
  #hero .hero__grid{max-width:100%}
  .hero__bg::after{
    background:linear-gradient(to bottom, rgba(30,12,50,.62) 0%, rgba(30,12,50,.80) 46%, var(--midnight) 92%);
  }
}
.hero__eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:clamp(1.4rem,3.5vh,2.2rem)}
.hero__eyebrow i{width:30px;height:1px;background:linear-gradient(90deg,var(--turquoise),transparent);display:block}
.display .ln{display:block;overflow:hidden}
.display .ln>span{display:block;transform:translateY(102%);transition:transform 1.7s var(--ease);transition-delay:var(--d,0s)}
.ready .display .ln>span{transform:none}
.hero__body{margin-top:clamp(2.8rem,6.5vh,4.4rem);opacity:0;transform:translateY(16px);transition:opacity 1.8s var(--ease) 1s,transform 1.8s var(--ease) 1s}
.ready .hero__body{opacity:1;transform:none}
.hero__body .btn{margin-top:clamp(2.5rem,5.5vh,3.6rem)}
.scroll-cue{display:flex;align-items:center;gap:.7rem;width:100%;max-width:78rem;margin:clamp(1.6rem,4.5vh,2.8rem) auto 0;opacity:0;transition:opacity 1.4s var(--ease) 1.8s}
.ready .scroll-cue{opacity:.55}
/* it stands down under the cookie bar, and when the hero runs past the fold */
body.has-cookie .scroll-cue,.scroll-cue.is-below{opacity:0!important;transition-delay:0s}
.scroll-cue svg{animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.scroll-cue span{font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}

/* ── 02 Approach — editorial white ──────────────────────────── */
.statement{font-family:var(--display-face);font-weight:400;font-size:clamp(1.55rem,3.2vw,2.5rem);line-height:1.22;letter-spacing:-.03em;max-width:24em}
.approach__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2.4rem,6vh,4rem)}
@media (max-width:820px){.approach__cols{grid-template-columns:1fr}}
.approach__cols p{color:var(--ink-soft)}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,8vh,5.5rem);padding-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--line)}
@media (max-width:820px){.principles{grid-template-columns:1fr;gap:2.4rem}}
.principle__node{width:7px;height:7px;border-radius:50%;background:var(--indigo);margin-bottom:1.1rem}
.principle h4{font-family:var(--display-face);font-weight:500;font-size:clamp(1.2rem,1.85vw,1.45rem);letter-spacing:-.026em;margin-bottom:.55rem}
.principle p{color:var(--ink-soft);font-size:.98rem}

/* ── The plain facts ────────────────────────────────────────
   The site said what she believes six different ways and never
   once said who she works with or what you actually get. This
   is the answer to both, kept quiet enough not to break voice. */
.facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(2.4rem,6vh,3.6rem);
  padding-top:clamp(1.8rem,4vh,2.4rem);
  border-top:1px solid var(--line);
}
@media (max-width:820px){.facts{grid-template-columns:1fr;gap:1.8rem}}
.fact h4{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--indigo-ink);margin-bottom:.7rem;
}
.fact p{color:var(--ink-soft);font-size:.95rem;max-width:26rem}

/* ── Editorial plate ────────────────────────────────────────
   One wide photograph where the argument needs air. Full-bleed
   of the text column, never of the viewport — this is a page
   that reads, not a slideshow. */
.plate{position:relative;margin:clamp(2.6rem,6vh,4rem) 0 clamp(2rem,5vh,3rem);overflow:hidden;border-radius:14px}
.plate img{width:100%;height:auto;display:block;filter:saturate(.86) contrast(1.02)}
.plate figcaption{
  position:absolute;left:1.2rem;bottom:1rem;
  font-size:.72rem;font-weight:500;letter-spacing:.04em;
  color:rgba(248,245,251,.82);text-shadow:0 1px 12px rgba(30,12,50,.9);
}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:linear-gradient(to top,rgba(30,12,50,.55),transparent 42%);
}

/* ── 03 Perspective — the one portrait ──────────────────────── */
.portrait__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5.5vw,5rem);align-items:center}
@media (max-width:900px){.portrait__grid{grid-template-columns:1fr;gap:2.4rem}}
@media (max-width:900px){.portrait__grid{grid-template-columns:1fr;gap:2.4rem}}
.portrait{position:relative;margin:0}
.portrait img{
  width:100%;height:auto;display:block;border-radius:3px;
  /* a high-key photograph needs to be seated into the dark, not pasted on it */
  filter:saturate(.92) contrast(1.02);
  box-shadow:0 40px 80px -40px rgba(30,12,50,.9);
}
.portrait::after{
  content:"";position:absolute;inset:auto -8% -6% -8%;height:42%;z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%,rgba(102,191,203,.16),transparent 70%);
  filter:blur(20px);pointer-events:none;
}
.portrait__slot{display:none}
.portrait.is-empty img{display:none}
.portrait.is-empty{
  aspect-ratio:4/5;border:1px dashed rgba(130,72,201,.28);border-radius:3px;
  display:grid;place-items:center;padding:1.5rem;
}
.portrait.is-empty .portrait__slot{
  display:block;text-align:center;font-size:.72rem;letter-spacing:.06em;
  color:rgba(248,245,251,.45);line-height:1.7;
}
.portrait__slot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--turquoise)}
.portrait__text .chapter-num{margin-bottom:clamp(1rem,2.2vh,1.4rem)}
.portrait__text .h2{margin-bottom:clamp(1.4rem,3vh,2rem)}
.portrait__note{color:var(--ink-soft);margin-top:1.3rem;font-size:.98rem}

/* ── The M — found, not announced ───────────────────────────
   Four meanings behind one letter: a network of four nodes, which
   is the whole brand in miniature. Explaining a logo out loud reads
   as insecurity, so this stays closed until someone is curious. */
.m-secret{margin-top:clamp(1.8rem,4vh,2.4rem);border-top:1px solid rgba(130,72,201,.18);padding-top:1.2rem}
.m-secret summary{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
  font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(248,245,251,.5);transition:color .5s ease;
}
.m-secret summary::-webkit-details-marker{display:none}
.m-secret summary:hover,.m-secret[open] summary{color:var(--white)}
.m-secret__cue{
  width:7px;height:7px;border-radius:50%;background:var(--turquoise);flex:none;
  box-shadow:0 0 0 0 rgba(102,191,203,.5);transition:box-shadow .6s var(--ease),transform .6s var(--ease);
}
.m-secret summary:hover .m-secret__cue{box-shadow:0 0 0 6px rgba(102,191,203,.14)}
.m-secret[open] .m-secret__cue{transform:scale(.62);background:var(--violet)}
.m-secret__list{list-style:none;margin-top:1.3rem;display:grid;gap:.85rem}
.m-secret__list li{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-items:baseline;
  font-size:.92rem;opacity:0;transform:translateY(6px);
  animation:mIn .9s var(--ease) forwards;
}
.m-secret__list li:nth-child(1){animation-delay:.04s}
.m-secret__list li:nth-child(2){animation-delay:.12s}
.m-secret__list li:nth-child(3){animation-delay:.2s}
.m-secret__list li:nth-child(4){animation-delay:.28s}
@keyframes mIn{to{opacity:1;transform:none}}
.m-secret__list b{font-weight:600;color:var(--white);letter-spacing:.01em}
.m-secret__list span{color:rgba(248,245,251,.58)}
@media (max-width:520px){.m-secret__list li{grid-template-columns:1fr;gap:.15rem}}

/* ── Direct lines — LinkedIn, WhatsApp ──────────────────────── */
.direct{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:clamp(1.6rem,3.5vh,2.2rem)}
.direct a{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem 1.15rem;border-radius:980px;
  border:1px solid var(--line);font-size:.86rem;font-weight:500;
  transition:border-color .5s ease,background-color .5s ease,transform .5s var(--ease);
}
.direct a:hover{border-color:var(--indigo-ink);background:rgba(102,52,158,.05);transform:translateY(-1px)}
.direct svg{flex:none;opacity:.75}
.contact__or{margin-top:clamp(1.8rem,4vh,2.4rem);font-size:.78rem;color:var(--ink-faint);letter-spacing:.06em}

/* ── 03 Alignment — the web that untangles ──────────────────
   Fourteen people, too many strands, resolving into one direction
   and then into a ring where everyone is connected to everyone.
   Phases are driven by scroll; hovering a card holds one. */
.chain{position:relative;width:100%;aspect-ratio:16/7.4;margin:clamp(1rem,3vh,2rem) 0 clamp(2.5rem,6vh,4rem)}
@media (max-width:700px){.chain{aspect-ratio:1/1}}
.chain__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.strand{
  stroke:var(--indigo-ink);stroke-width:1;vector-effect:non-scaling-stroke;
  transition:opacity .9s var(--ease);
}
.person{
  position:absolute;display:block;
  width:calc(15px * var(--s,1));height:calc(19px * var(--s,1));
  opacity:var(--lit,.6);
  transform:translate(-50%,-50%);
  transition:left 1.4s var(--ease),top 1.4s var(--ease),opacity 1.1s var(--ease);
}
.person svg{width:100%;height:100%;display:block;fill:var(--indigo-ink)}
/* by the last phase they are lit and gathered: a community, not a diagram */
.chain[data-phase="3"] .person svg{filter:drop-shadow(0 0 6px rgba(102,52,158,.45))}
.chain[data-phase="3"] .strand{stroke:var(--indigo-ink)}
.chain__hint{margin-top:.6rem;text-align:center}

/* the step, written while it happens */
.webstep{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(.9rem,2vw,1.4rem);
  align-items:start;min-height:5.4rem;max-width:38rem;
  margin:clamp(1.6rem,4vh,2.4rem) 0 clamp(.6rem,1.5vh,1rem);
}
.webstep__n{
  font-family:var(--display-face);font-weight:500;
  font-size:clamp(1.6rem,3vw,2.2rem);line-height:1;letter-spacing:-.03em;
  color:var(--indigo-ink);opacity:.35;
}
.webstep__t{
  display:block;font-family:var(--display-face);font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.028em;line-height:1.15;
  margin-bottom:.4rem;
}
.webstep__d{color:var(--ink-soft);font-size:.96rem;max-width:32rem}
.webstep__n,.webstep__t,.webstep__d{
  opacity:0;transform:translateY(6px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.webstep.on .webstep__n{opacity:.35;transform:none}
.webstep.on .webstep__t,.webstep.on .webstep__d{opacity:1;transform:none}
.webstep.on .webstep__t{transition-delay:.05s}
.webstep.on .webstep__d{transition-delay:.1s}
@media (max-width:620px){.webstep{min-height:7rem}}

/* the card for the step currently playing */
.junction{transition:opacity .6s var(--ease)}
.junctions:not(:hover) .junction{opacity:.45}
.junctions:not(:hover) .junction.is-active{opacity:1}
.junctions:hover .junction{opacity:.45}
.junctions:hover .junction:hover,.junction:focus-visible{opacity:1}
.junctions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.6rem);border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vh,2.6rem)}
@media (max-width:900px){.junctions{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media (max-width:560px){.junctions{grid-template-columns:1fr}}
.junction{cursor:default;outline-offset:6px}
.junction__pair{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.9rem;transition:color .7s ease}
.junction__pair b{color:var(--indigo-ink);font-weight:600;margin-right:.5rem}
.junction:hover .junction__pair,.junction:focus-visible .junction__pair{color:var(--indigo-ink)}
.junction h4{font-family:var(--display-face);font-weight:500;font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.026em;margin-bottom:.5rem}
.junction p{color:var(--ink-soft);font-size:.94rem;max-width:24rem}

/* ── Glyphs — the logotype's geometry, at small scale ───────── */
.glyph{display:block;width:74px;height:54px;margin-bottom:1.1rem;color:var(--indigo-ink)}
.glyph svg{width:100%;height:100%;overflow:visible}
.glyph circle{fill:currentColor}
.glyph path{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.glyph .g-faint{opacity:.22}
.glyph .g-beyond{opacity:.4;stroke-dasharray:2.5 3.5}
.glyph .g-far{opacity:.45}
.glyph .g-gate{opacity:.5;stroke-width:1.3}
.glyph .g-ring{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.45}
.tone-dark .glyph{color:var(--turquoise)}
.principle__node{display:none}

/* ── Journal: a mark per kind of entry ──────────────────────── */
.entry__kind{display:block;width:34px;height:24px;color:var(--indigo-ink);opacity:.5;transition:opacity .7s var(--ease)}
.entry:hover .entry__kind{opacity:1}
.entry__kind svg{width:100%;height:100%;overflow:visible}
.entry__kind circle{fill:currentColor}
.entry__kind path{fill:none;stroke:currentColor;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linecap:round}

/* ── 04 The Network — spheres, not stars ────────────────────
   Each is a part of one person, tethered to her centre. The unlit
   ones carry no label on purpose: naming them would be inventing
   her future. They read as present but undisclosed. */
/* the house colours live on the section, not on the diagram: the card
   is a sibling of .constel and could not see them there. */
#ventures{padding-top:clamp(5.5rem,12vh,9rem);padding-bottom:clamp(5.5rem,12vh,9rem);
  --c-invest:#4A78C9;--c-advise:#B9A6E8;--c-collab:#66BFCB}
.constel{position:relative;width:100%;aspect-ratio:16/8.6;margin-top:clamp(1rem,3vh,2.4rem)}
@media (max-width:820px){.constel{aspect-ratio:3/4}}
.constel__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tether{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;transition:opacity 1.2s var(--ease)}
.constel[data-focus] .tether{opacity:.14!important}
.constel[data-focus="invest"] .tether:nth-of-type(5),
.constel[data-focus="advise"] .tether:nth-of-type(6),
.constel[data-focus="collab"] .tether:nth-of-type(7){opacity:.75!important}

.orb{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;
  gap:.55rem;text-align:center;transition:opacity 1.3s var(--ease)}
.orb__body{
  position:relative;display:block;border-radius:50%;
  width:var(--size,40px);height:var(--size,40px);
  /* the logotype's own device, enlarged: a luminous orbit with a node
     riding it. Filled glowing spheres read as planets, which is the
     one metaphor this brand does not want. */
  border:2px solid var(--tone,#fff);
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--tone,#fff) 14%, transparent) 0%,
    transparent 68%);
  box-shadow:
    0 0 calc(var(--size,40px) * .7) color-mix(in srgb, var(--tone,#fff) 42%, transparent),
    inset 0 0 calc(var(--size,40px) * .30) color-mix(in srgb, var(--tone,#fff) 16%, transparent);
  transition:transform 1.2s var(--ease),box-shadow 1.2s var(--ease),border-color 1s ease;
}
.orb__body::after{                       /* the node on the orbit */
  content:"";position:absolute;top:50%;left:50%;
  width:calc(var(--size,40px) * .17);height:calc(var(--size,40px) * .17);
  min-width:5px;min-height:5px;border-radius:50%;
  background:var(--tone,#fff);
  box-shadow:0 0 10px var(--tone,#fff);
  transform:translate(-50%,-50%) rotate(var(--a,-38deg)) translateX(calc(var(--size,40px) / 2));
}
.orb--house{cursor:pointer}
.orb--house:hover .orb__body,.orb--house:focus-visible .orb__body{
  transform:scale(1.1);
  box-shadow:0 0 calc(var(--size,40px) * .95) color-mix(in srgb, var(--tone,#fff) 48%, transparent),
             inset 0 0 calc(var(--size,40px) * .3) color-mix(in srgb, var(--tone,#fff) 22%, transparent);
}
.orb__label{font-size:.92rem;font-weight:500;white-space:nowrap;color:rgba(248,245,251,.86);transition:color 1s ease}
.orb--house:hover .orb__label{color:var(--white)}
.orb__meta{font-size:.76rem;color:rgba(248,245,251,.56);margin-top:-.3rem;white-space:nowrap}
.orb--core .orb__label{font-family:var(--display-face);font-weight:500;
  font-size:clamp(1rem,1.6vw,1.28rem);color:var(--white)}
.constel[data-focus] .eco{opacity:.5}
.constel[data-focus="invest"] .eco--invest,
.constel[data-focus="advise"] .eco--advise,
.constel[data-focus="collab"] .eco--collab{opacity:1}
.drift{animation:drift var(--dur,26s) ease-in-out var(--del,0s) infinite alternate}
@keyframes drift{to{translate:var(--dx,4px) var(--dy,-5px)}}
/* the card a sphere opens */
.hcard{
  position:relative;max-width:34rem;margin:clamp(1.4rem,3vh,2rem) auto 0;
  /* the card takes the colour of the orbit that opened it, so you never
     lose track of which one you are reading — and so it lifts off the
     dark instead of dissolving into it. */
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--tone,#fff) 26%, #2E144C) 0%,
      color-mix(in srgb, var(--tone,#fff) 12%, #1E0C32) 100%);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid color-mix(in srgb, var(--tone,#fff) 52%, transparent);
  border-radius:14px;padding:1.5rem 1.6rem 1.4rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.75),
             0 0 40px -12px color-mix(in srgb, var(--tone,#fff) 34%, transparent);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.hcard::before{                      /* a lit edge on the side of its orbit */
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:var(--tone,#fff);
  box-shadow:0 0 14px color-mix(in srgb, var(--tone,#fff) 70%, transparent);
}
.hcard.on{opacity:1;transform:none}
.hcard[hidden]{display:none}
.hcard__territory{
  display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tone,#fff);margin-bottom:.5rem;
}
.hcard h3{font-family:var(--display-face);font-weight:500;font-size:1.5rem;
  letter-spacing:-.03em;color:var(--white);margin-bottom:.7rem}
.hcard p{font-size:.94rem;color:rgba(248,245,251,.82);max-width:none}
.hcard__desc{margin-top:.9rem;padding-top:.8rem;font-size:.8rem!important;
  color:color-mix(in srgb, var(--tone,#fff) 72%, white)!important;border-top:1px solid rgba(248,245,251,.14);font-style:italic}
.hcard__close{
  position:absolute;top:.7rem;right:.7rem;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:rgba(248,245,251,.5);cursor:pointer;
  transition:color .4s,background-color .4s;
}
.hcard__close:hover{color:var(--white);background:rgba(248,245,251,.08)}
.constel__hint{margin-top:clamp(1.2rem,3vh,2rem);text-align:center}
@media (max-width:820px){.orb__meta{display:none}.orb__label{font-size:.78rem}}
@media (max-width:620px){.orb--house .orb__body{transform:scale(.82)}.orb--core .orb__body{transform:scale(.8)}}

/* ── 05 Journal — three cards abreast ───────────────────────── */
.entries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
@media (max-width:900px){.entries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.entries{grid-template-columns:1fr;gap:2.4rem}}
.entry>a{display:block}
.entry__shot{
  position:relative;overflow:hidden;border-radius:12px;
  aspect-ratio:3/2;margin-bottom:1.1rem;background:var(--midnight);
}
.entry__shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 2.4s var(--ease),filter 1.2s var(--ease);
}
.entry:hover .entry__shot img{transform:scale(1.04)}
.entry__shot::after{            /* seat the image into the page */
  content:"";position:absolute;inset:0;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(30,12,50,.08);pointer-events:none;
}
.entry__meta{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;font-size:.72rem;font-weight:500;color:var(--ink-faint);margin-bottom:.5rem}
.entry__meta .tag{color:var(--indigo-ink)}
.entry__title{font-family:var(--display-face);font-weight:500;font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.032em;line-height:1.14}
.entry__excerpt{color:var(--ink-soft);margin-top:.5rem;font-size:.92rem}
.journal__foot{margin-top:clamp(2rem,5vh,3rem);display:flex;justify-content:flex-end}

/* ── 06 Contact — the network converges to one point ────────── */
.contact__grid{max-width:44rem;margin:0 auto;text-align:center}
.contact__grid .chapter-num{justify-content:center}
.quote{font-family:var(--display-face);font-weight:400;font-size:clamp(1.45rem,2.9vw,2.3rem);line-height:1.26;letter-spacing:-.03em;max-width:20em;margin:clamp(1rem,2.5vh,1.6rem) auto clamp(2.4rem,5vh,3.4rem)}
.form{display:grid;gap:1.1rem;max-width:34rem;margin:0 auto;text-align:left}
.field label{display:block;font-size:.8rem;font-weight:500;color:var(--ink-soft);margin-bottom:.4rem}
.field input,.field textarea{
  width:100%;padding:.8rem .95rem;border:1px solid var(--line);border-radius:10px;
  font-size:.98rem;background:var(--paper);transition:border-color .3s ease,box-shadow .3s ease;
}
.field textarea{resize:vertical;min-height:6.5rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(102,52,158,.12)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:.4rem;justify-content:space-between}
.form__note{font-size:.82rem;color:var(--ink-faint)}
.form__done{font-size:.9rem;font-weight:500;color:var(--indigo);opacity:0;transition:opacity 1s var(--ease)}
.form__done.on{opacity:1}

/* ── 06 Contact — the room, not a form ──────────────────────
   This was the flattest stretch of the page: a centred form on
   flat paper. A single photograph of an actual room closes the
   argument the whole site has been making. If sala.jpg is absent
   the figure removes itself and the section simply stays dark. */
.contact--room{position:relative;isolation:isolate;overflow:hidden}
.contact__bg{position:absolute;inset:0;z-index:-1;margin:0}
.contact__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block;filter:saturate(.85) contrast(1.02)}
.contact__bg::after{                 /* scrim: the type must always win */
  content:"";position:absolute;inset:0;
  /* El velo se invierte: claro arriba, donde está ella, y denso abajo,
     que es donde ahora baja el texto. Así no se le tapa la cara. */
  background:
    linear-gradient(to bottom, rgba(30,12,50,.58) 0%, rgba(30,12,50,.40) 26%, rgba(30,12,50,.74) 68%, var(--midnight) 100%),
    radial-gradient(70% 50% at 34% 38%, rgba(30,12,50,.10), transparent 72%);
}
/* form controls have to survive on the dark */
.contact--room .field input,.contact--room .field textarea{
  background:rgba(248,245,251,.06);border-color:rgba(248,245,251,.16);color:var(--white);
}
.contact--room .field input::placeholder,.contact--room .field textarea::placeholder{color:rgba(248,245,251,.36)}
.contact--room .field input:focus,.contact--room .field textarea:focus{
  border-color:var(--turquoise);box-shadow:0 0 0 3px rgba(102,191,203,.14);
}
.contact--room .direct a{border-color:rgba(248,245,251,.2)}
.contact--room .direct a:hover{border-color:var(--turquoise);background:rgba(102,191,203,.08)}
.contact--room .form__done{color:var(--turquoise)}

/* ── The claim runs three sentences now, so the display drops a
      size and the column widens to keep each on one line. ────── */
.display--claim{font-size:clamp(1.7rem,4.9vw,4.3rem);line-height:1.06;letter-spacing:-.036em}
#hero .hero__grid{max-width:min(100%,44rem)}

/* ── Craft — creed and method label ─────────────────────────── */
.craft__creed{
  font-family:var(--display-face);font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.6rem);letter-spacing:-.026em;
  color:var(--indigo-ink);margin-top:clamp(1.6rem,4vh,2.4rem);max-width:none;
}
.principles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.principles{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media (max-width:600px){.principles{grid-template-columns:1fr}}
.method{margin-top:clamp(2.6rem,6vh,4rem);padding-top:clamp(1.8rem,4vh,2.4rem);border-top:1px solid var(--line)}
.method__label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.webstep__time{
  display:inline-block;margin-top:.6rem;font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--indigo-ink);opacity:.75;
}
.junction__time{display:block;margin-top:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.09em;color:var(--indigo-ink);opacity:.6}

.craft__foot{margin-top:clamp(2.4rem,6vh,3.4rem);display:flex;justify-content:flex-start}

/* ── Proof — a CV without being one ─────────────────────────── */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem);
  border-top:1px solid var(--line);padding-top:clamp(1.8rem,4vh,2.6rem)}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.proof{grid-template-columns:1fr;gap:1.4rem}}
.proof dt{
  font-family:var(--display-face);font-weight:500;
  font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.04em;color:var(--ink);
}
.proof dt span{font-size:.55em;vertical-align:.35em;margin-left:.04em;color:var(--indigo-ink)}
.proof dd{margin-top:.55rem;font-size:.86rem;color:var(--ink-soft);line-height:1.5;max-width:15rem}
.proof__note{margin-top:clamp(1.6rem,4vh,2.2rem);font-size:.82rem;color:var(--ink-faint);font-style:italic}
/* anything still waiting on her numbers */
.tbd{
  background:rgba(102,52,158,.09);border-bottom:1px dashed rgba(102,52,158,.5);
  padding:.02em .28em;border-radius:3px;color:var(--indigo-ink);font-weight:600;
}
.tone-dark .tbd{background:rgba(102,191,203,.1);border-bottom-color:rgba(102,191,203,.45);color:var(--turquoise)}

/* ── About — languages line ─────────────────────────────────── */
.langs{margin-top:1.2rem;font-size:.9rem;color:var(--ink-soft)}
.langs b{color:var(--white);font-weight:600}

/* ── The Quiet List, now a chapter ──────────────────────────── */
.quiet__form{display:flex;gap:.7rem;max-width:32rem;margin-top:clamp(1.6rem,4vh,2.4rem)}
@media (max-width:520px){.quiet__form{flex-direction:column}}
.quiet__form input{
  flex:1;min-width:0;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;
  font-size:.98rem;background:var(--paper);transition:border-color .3s,box-shadow .3s;
}
.quiet__form input:focus{outline:none;border-color:var(--indigo-ink);box-shadow:0 0 0 3px rgba(102,52,158,.1)}
.quiet__form.sent{display:none}
.quiet__done{display:none;margin-top:clamp(1.6rem,4vh,2.4rem);font-size:1rem;font-weight:500;color:var(--indigo-ink)}
.quiet__done.on{display:block}

/* ── Ventures — the outbound link on a card ─────────────────── */
.hcard__link{
  display:inline-block;margin-top:1rem;font-size:.86rem;font-weight:600;
  color:var(--tone,#fff);border-bottom:1px solid color-mix(in srgb, var(--tone,#fff) 45%, transparent);
  transition:border-color .4s;
}
.hcard__link:hover{border-bottom-color:var(--tone,#fff)}

/* ── Cookie notice ──────────────────────────────────────────── */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem clamp(1rem,3vw,2.4rem);
  padding:clamp(.9rem,2vh,1.15rem) var(--gutter);
  background:rgba(30,12,50,.94);backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid rgba(130,72,201,.32);
  color:var(--white);
  transform:translateY(110%);transition:transform .8s var(--ease);
}
.cookie.on{transform:none}
.cookie[hidden]{display:none}
.cookie__text p{font-size:.86rem;color:rgba(248,245,251,.72);max-width:52rem;line-height:1.55}
.cookie__text b{color:var(--white);font-weight:600}
.cookie__acts{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.cookie .btn{padding:.6rem 1.15rem;font-size:.86rem}
.btn--quiet{
  background:transparent;color:var(--white);
  border:1px solid rgba(248,245,251,.28);
}
.btn--quiet:hover{background:rgba(248,245,251,.08);border-color:rgba(248,245,251,.5)}
.cookie__more{font-size:.8rem;color:rgba(248,245,251,.5);text-decoration:underline;text-underline-offset:3px}
.cookie__more:hover{color:var(--white)}
@media (max-width:720px){
  .cookie{flex-direction:column;align-items:stretch;text-align:left}
  .cookie__acts{justify-content:flex-start}
}

/* ── The invitation, as a corner panel ──────────────────────── */
#invite{
  position:fixed;left:var(--gutter);bottom:clamp(1.2rem,3vh,2rem);z-index:70;
  width:min(24rem,calc(100vw - var(--gutter)*2));
  background:rgba(46,20,76,.9);backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(130,72,201,.32);border-radius:14px;
  padding:1.5rem 1.5rem 1.35rem;color:var(--white);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),bottom .6s var(--ease);
}
#invite.on{opacity:1;transform:none;pointer-events:auto}
#invite[hidden]{display:none}
/* never let the two overlap */
body.has-cookie #invite{bottom:calc(clamp(1.2rem,3vh,2rem) + 6.5rem)}
.invite__eyebrow{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.invite__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--turquoise);box-shadow:0 0 10px var(--turquoise);flex:none}
.invite__eyebrow span{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,245,251,.5)}
#invite h3{font-family:var(--display-face);font-weight:500;font-size:1.25rem;letter-spacing:-.028em;line-height:1.2;margin-bottom:.5rem}
#invite p{font-size:.88rem;color:rgba(248,245,251,.62);margin-bottom:1.1rem;max-width:none}
.invite__form{display:flex;gap:.5rem}
.invite__form input{
  flex:1;min-width:0;padding:.62rem .8rem;border-radius:9px;font-size:.86rem;
  background:rgba(248,245,251,.06);border:1px solid rgba(248,245,251,.14);color:var(--white);
}
.invite__form input::placeholder{color:rgba(248,245,251,.38)}
.invite__form input:focus{outline:none;border-color:var(--turquoise)}
.invite__form button{
  flex:none;padding:.62rem 1rem;border-radius:9px;font-size:.86rem;font-weight:500;
  background:var(--indigo);color:#fff;cursor:pointer;transition:background-color .4s;
}
.invite__form button:hover{background:#8f6ad6}
.invite__close{
  position:absolute;top:.65rem;right:.65rem;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:rgba(248,245,251,.45);cursor:pointer;
  transition:color .4s,background-color .4s;
}
.invite__close:hover{color:var(--white);background:rgba(248,245,251,.08)}
.invite__done{font-size:.86rem;color:var(--turquoise);display:none}
#invite.sent .invite__form,#invite.sent p:not(.invite__done){display:none}
#invite.sent .invite__done{display:block}
@media (max-width:620px){#invite{left:1rem;right:1rem;width:auto}}

/* ── Drive — two rings, and what happens between them ───────
   The old version was a beam and a slider: a diagram, not a piece
   of this brand. These are the logotype's own rings. At either
   extreme they stand apart and only one is lit; in the middle they
   overlap and the shared area is the only thing that glows. The
   argument is made by the geometry, not by the caption. */
.drive__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  margin-top:clamp(2.2rem,5vh,3.4rem);
}
@media (max-width:900px){.drive__grid{grid-template-columns:1fr;gap:2.6rem}}
.drive__text p{color:var(--ink-soft)}
.drive__text p+p{margin-top:1.15em}

.rings__stage{position:relative}
.rings__stage svg{width:100%;height:auto;overflow:visible;display:block}
.rings__half{transform-origin:150px 95px;transition:transform .6s var(--ease)}
.rings__arc{
  fill:none;stroke:var(--indigo-ink);stroke-width:1.5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;transition:opacity .55s var(--ease);
}
.rings__join{fill:var(--indigo-ink);transition:opacity .55s var(--ease)}
.rings__side{
  position:absolute;bottom:-.2rem;font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);transition:opacity .5s ease;
}
.rings__side--l{left:0}
.rings__side--r{right:0}

/* a hairline with a node on it, not a browser slider */
.rings input[type=range]{
  -webkit-appearance:none;appearance:none;display:block;
  width:100%;margin:1.4rem 0 0;height:1px;background:var(--line);cursor:ew-resize;
}
.rings input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--indigo-ink);border:0;cursor:grab;
  box-shadow:0 0 0 5px rgba(102,52,158,.12);
}
.rings input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--indigo-ink);border:0;
  box-shadow:0 0 0 5px rgba(102,52,158,.12);cursor:grab;
}
.rings input[type=range]:focus-visible{outline:2px solid var(--indigo);outline-offset:8px}
.rings__verdict{
  margin-top:1.1rem;font-size:.92rem;color:var(--ink-soft);
  min-height:4.2rem;transition:opacity .35s var(--ease);
}
@media (max-width:900px){.rings__verdict{min-height:3.4rem}}

/* ── Exit — back into the dark ──────────────────────────────── */
#exit{position:relative;padding:clamp(5rem,13vh,9rem) var(--gutter) clamp(3rem,7vh,4.5rem);text-align:center;background:linear-gradient(to bottom,var(--midnight) 0%,var(--midnight) 100%)}
.exit__line{position:relative;z-index:2;font-family:var(--display-face);font-weight:400;font-size:clamp(1.1rem,2vw,1.55rem);color:rgba(248,245,251,.72);letter-spacing:-.026em}
footer{position:relative;z-index:2;background:var(--midnight);padding:clamp(1.8rem,4vh,2.6rem) var(--gutter);display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center}
footer,footer a{font-size:.78rem;color:rgba(248,245,251,.4)}
.foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
footer a{transition:color .4s ease}
footer a:hover{color:var(--white)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}
/* ═══ September review — the home as she wrote it ═══════════════ */

/* A statement, then its quieter second half — her own rhythm. */
.h2--pair span,.drive__lead span{display:block;color:var(--ink-soft)}

/* Hero: the audience first, the how second. */
.lede--lead{color:rgba(248,245,251,.95);font-size:clamp(1.42rem,1.2rem + .95vw,2rem);line-height:1.5;max-width:31rem;margin-top:.2rem}

/* ── Drive — one screen, a photograph, air ─────────────────── */
#drive{padding-top:clamp(5.5rem,13vh,9rem);padding-bottom:clamp(5.5rem,13vh,9rem)}
.drive{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.2rem,6vw,6rem);align-items:center}
@media (max-width:900px){.drive{grid-template-columns:1fr}}
.drive__photo{margin:0;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;max-width:36rem}
.drive__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.9) contrast(1.02)}
.drive__lead{font-family:var(--display-face);font-weight:500;color:var(--ink);font-size:clamp(1.58rem,2.7vw,2.3rem);line-height:1.16;letter-spacing:-.03em;max-width:22em;margin-bottom:clamp(1.2rem,3vh,1.8rem)}
.drive__text p{color:var(--ink-soft)}

/* The signature: a steady core — what makes the business worth growing —
   the logotype's node riding its orbit, and growth rippling outward.
   Alive from the moment it is on screen, and never an open ring. */
.sig{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.8rem);margin-top:clamp(2.2rem,5vh,3.2rem);padding-top:clamp(1.8rem,4vh,2.4rem);border-top:1px solid var(--line)}
.sig__mark{flex:none;width:clamp(88px,9.5vw,128px);height:auto;overflow:visible}
.sig__orbit{fill:none;stroke:var(--indigo-ink);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100}
.sig__core{fill:var(--indigo-ink);transform-origin:80px 80px;transform:scale(0)}
.sig__halo{fill:url(#sigGlow);transform-origin:80px 80px;opacity:0}
.sig__wave{fill:none;stroke:var(--indigo-ink);stroke-width:1.2;vector-effect:non-scaling-stroke;transform-origin:80px 80px;opacity:0}
.sig__rider{fill:var(--indigo-ink);transform-origin:80px 80px;opacity:0}
.sig.is-on .sig__orbit{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease)}
.sig.is-on .sig__core{transform:scale(1);transition:transform .9s var(--ease) .5s}
.sig.is-on .sig__halo{animation:sigBreathe 3.4s ease-in-out 1s infinite}
.sig.is-on .sig__rider{opacity:1;transition:opacity .6s ease 1.1s;animation:sigRide 7s linear 1.1s infinite}
.sig.is-on .sig__wave{animation:sigWave 3.9s cubic-bezier(.22,.61,.36,1) infinite}
.sig.is-on .sig__wave:nth-of-type(1){animation-delay:1.3s}
.sig.is-on .sig__wave:nth-of-type(2){animation-delay:2.6s}
.sig.is-on .sig__wave:nth-of-type(3){animation-delay:3.9s}
@keyframes sigRide{to{transform:rotate(360deg)}}
@keyframes sigWave{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.05);opacity:0}}
@keyframes sigBreathe{0%,100%{transform:scale(.9);opacity:.45}50%{transform:scale(1.25);opacity:.9}}
.sig__line{font-family:var(--display-face);font-weight:500;font-size:clamp(1.6rem,3.3vw,2.85rem);line-height:1.08;letter-spacing:-.036em;max-width:none}
.sig__line span{display:block;cursor:default;transition:color .5s var(--ease)}
.sig__b{color:var(--indigo-ink)}
/* the two lines steer it: Grow quickens the ripples, Preserve calms them and lights the core */
.sig.is-growing .sig__b,.sig.is-keeping .sig__a{color:var(--ink-soft)}
.sig.is-ready .sig__core{transition:transform .5s var(--ease)}
.sig.is-keeping .sig__core{transform:scale(1.45)}

/* ── Craft — three moves abreast, the creed as caption ─────── */
.craft__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3.4vw,3.4rem)}
@media (max-width:980px){.craft__cols{grid-template-columns:1fr;max-width:40rem}}
.craft__cols p{color:var(--ink-soft);font-size:.98rem;margin:0}
#craft .chain{margin:clamp(2.6rem,6vh,4rem) 0 clamp(1rem,3vh,1.8rem)}
.creed{display:flex;flex-wrap:wrap;justify-content:center;gap:.55em .6em;max-width:none;margin:0 auto;
  font-family:var(--display-face);font-weight:500;font-size:clamp(1.3rem,3vw,2.5rem);line-height:1.15;letter-spacing:-.03em;text-align:center}
.creed span{position:relative;padding-bottom:.38em;color:var(--ink-faint);cursor:default;transition:color .6s var(--ease)}
.creed span.on{color:var(--ink)}
.creed span.now{color:var(--indigo-ink)}
/* each verb carries its own bar: full once played, filling while it plays */
.creed span::before,.creed span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:max(2px,.07em);border-radius:2px}
.creed span::before{background:var(--line)}
.creed span::after{background:var(--indigo-ink);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:opacity .45s var(--ease)}
.creed.is-out span::after{opacity:0}
/* the loop point: the drawing fades, snaps back to the tangle unseen, and returns */
#craft .chain.in{transition:opacity .55s var(--ease)}
#craft .chain.in.is-out{opacity:0}
.chain.is-snap .person{transition:none}

/* ── Ventures — two blocks side by side: the intro and her map held
      in view, and the three ways in beside them ────────────── */
.vgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4.5vw,5rem);align-items:start}
@media (max-width:980px){.vgrid{grid-template-columns:1fr;gap:clamp(2.2rem,5vh,3rem)}}
.vgrid__side{top:clamp(5.2rem,11vh,7rem)}
.vgrid__side.is-sticky{position:sticky}
#ventures .vgrid__side .h2{font-size:clamp(1.9rem,3.5vw,3.1rem);margin-bottom:clamp(1rem,2.4vh,1.4rem)}
#ventures .vgrid__side .lede{font-size:clamp(.98rem,.9rem + .25vw,1.08rem)}
.vgrid__side .constel{aspect-ratio:1/1;width:min(100%,30rem,54vh);margin:clamp(1.4rem,3.5vh,2.2rem) 0 0}
.vent__coda{margin-top:clamp(1rem,2.6vh,1.6rem);max-width:22rem;
  font-family:var(--display-face);font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.4;letter-spacing:-.015em;color:rgba(248,245,251,.62)}
@media (max-width:980px){.vgrid__side .constel{width:min(100%,26rem);margin-inline:auto}}
.vgrid__list{display:grid;gap:clamp(.7rem,1.2vw,.95rem)}
.vent{
  --tone-ink:color-mix(in srgb,var(--tone) 70%,white);
  position:relative;border-radius:14px;padding:clamp(1.05rem,1.7vw,1.4rem) clamp(1.15rem,1.9vw,1.6rem) clamp(1rem,1.6vw,1.3rem) clamp(1.35rem,2.2vw,1.8rem);
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone) 13%,rgba(46,20,76,.78)) 0%,rgba(30,12,50,.55) 100%);
  border:1px solid color-mix(in srgb,var(--tone) 30%,transparent);
  transition:border-color .6s ease,box-shadow .8s var(--ease),opacity var(--slower) var(--ease),transform var(--slower) var(--ease)}
.vent::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--tone);box-shadow:0 0 14px color-mix(in srgb,var(--tone) 60%,transparent)}
.vent:hover,.vent.is-lit{border-color:color-mix(in srgb,var(--tone) 62%,transparent);box-shadow:0 0 54px -18px color-mix(in srgb,var(--tone) 55%,transparent)}
.vent__kind{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tone-ink);margin-bottom:.45rem}
.vent__title{font-family:var(--display-face);font-weight:500;font-size:clamp(1.1rem,1.45vw,1.34rem);line-height:1.15;letter-spacing:-.025em;color:var(--white);margin-bottom:.5rem}
.vent p{color:rgba(248,245,251,.74);font-size:.87rem;line-height:1.55}
.vent p+p{margin-top:.7em}
.vent .vent__pull{margin-top:.75rem;padding-left:1rem;border-left:1px solid color-mix(in srgb,var(--tone) 60%,transparent);
  font-family:var(--display-face);font-size:clamp(.96rem,1.15vw,1.08rem);line-height:1.3;letter-spacing:-.02em;color:var(--white)}
.vent__link{display:inline-flex;gap:.45rem;margin-top:.75rem;font-size:.84rem;font-weight:600;color:var(--tone-ink);
  border-bottom:1px solid color-mix(in srgb,var(--tone) 40%,transparent);padding-bottom:.15rem;transition:border-color .4s}
.vent__link:hover{border-bottom-color:var(--tone-ink)}
/* Collaborate, the open door: the same shape with a lighter hand */
.vent--open{background:transparent;border-style:dashed}

/* ── The ask — her question, and room around it ────────────── */
#building{padding-top:clamp(6rem,16vh,11rem);padding-bottom:clamp(6rem,16vh,11rem)}
.ask{display:grid;justify-items:center;text-align:center}
.ask__q{font-family:var(--display-face);font-weight:500;font-size:clamp(2.6rem,7vw,6rem);line-height:1;letter-spacing:-.045em;margin-bottom:clamp(1.4rem,3.5vh,2.2rem)}
.ask .lede{margin:0 auto clamp(2rem,4.5vh,2.8rem)}

/* ── Quiet List ────────────────────────────────────────────── */
.quiet__wry{margin-top:1rem;color:var(--ink-soft)}
.quiet__small{margin-top:.9rem;font-size:.8rem;color:var(--ink-faint)}
.quiet__form .btn{white-space:nowrap}
.quiet__form.sent~.quiet__small{display:none}
/* A photograph behind the ask: it sits on the right and dissolves into
   the paper, so the words keep their light. */
.quiet--photo{position:relative;isolation:isolate;overflow:hidden}
.quiet__bg{position:absolute;top:0;bottom:0;right:0;left:34%;z-index:-1;margin:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 44%);mask-image:linear-gradient(90deg,transparent 0%,#000 44%)}
.quiet__bg img{width:100%;height:100%;object-fit:cover;object-position:46% 42%;filter:saturate(.82) contrast(1.02)}
.quiet__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(252,251,254,.5),rgba(252,251,254,.06) 62%),linear-gradient(rgba(102,52,158,.07),rgba(102,52,158,.07))}
.quiet__body{max-width:37rem}
@media (max-width:900px){
  .quiet__bg{position:relative;left:auto;top:auto;bottom:auto;height:min(58vw,22rem);
    margin:calc(var(--chapter) * -1) calc(var(--gutter) * -1) clamp(1.4rem,4vh,2rem);
    -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .quiet__bg::after{background:linear-gradient(rgba(102,52,158,.06),rgba(102,52,158,.06))}
}

/* ── Let's talk — the copy on one side, the form on the other ─ */
.talk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.4rem,6vw,6rem);align-items:start}
/* El texto se va al pie de la columna: su cara queda despejada arriba. */
@media (min-width:981px){.talk__intro{align-self:end}}
@media (max-width:980px){.talk{grid-template-columns:1fr}}
.talk__sub{font-family:var(--display-face);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.45rem);letter-spacing:-.024em;margin-top:clamp(1.6rem,4vh,2.2rem);color:var(--white)}
.talk__p{color:var(--ink-soft);margin-top:.5rem}
.talk__notes{margin-top:clamp(1.6rem,4vh,2.2rem);padding-top:1.2rem;border-top:1px solid rgba(248,245,251,.12);display:grid;gap:.9rem}
.talk__notes p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.talk__notes b{color:var(--white);font-weight:600}
.talk .direct{justify-content:flex-start}
.talk .form{max-width:none;margin:0;padding:clamp(1.4rem,3vw,2.2rem);border-radius:16px;
  background:rgba(30,12,50,.58);border:1px solid rgba(248,245,251,.1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* The topic, as one dropdown. Optional, like everything but name and email. */
.select{position:relative}
.select::after{content:"";position:absolute;right:1.1rem;top:50%;width:7px;height:7px;margin-top:-6px;
  border-right:1.5px solid var(--turquoise);border-bottom:1.5px solid var(--turquoise);transform:rotate(45deg);pointer-events:none}
.field select{
  width:100%;padding:.8rem 2.7rem .8rem .95rem;border:1px solid var(--line);border-radius:10px;
  font-size:.98rem;line-height:1.35;background:var(--paper);-webkit-appearance:none;appearance:none;
  text-overflow:ellipsis;transition:border-color .3s ease,box-shadow .3s ease,color .3s ease}
.contact--room .field select{background:rgba(248,245,251,.06);border-color:rgba(248,245,251,.16);color:var(--white)}
.contact--room .field select.is-empty{color:rgba(248,245,251,.42)}
.contact--room .field select:hover{border-color:rgba(248,245,251,.3)}
.contact--room .field select:focus{outline:none;border-color:var(--turquoise);box-shadow:0 0 0 3px rgba(102,191,203,.14)}
.field select option{color:#1E0C32;background:#F8F5FB}
.field__hint{margin-top:.55rem;font-size:.82rem;color:var(--ink-faint);font-style:italic}
.field label i{font-style:normal;color:var(--turquoise)}
.field.is-bad input{border-color:#E08A9B}
.form__legal{font-size:.78rem;line-height:1.5;color:var(--ink-faint)}
.form__legal a{text-decoration:underline;text-underline-offset:3px}
.form button[disabled]{opacity:.5;pointer-events:none}

/* About */
.langs span{color:var(--ink-faint)}

/* ── Footer — brand, columns, legal strip ──────────────────── */
.foot{display:block;padding:clamp(3.4rem,9vh,5.5rem) var(--gutter) clamp(1.6rem,4vh,2.2rem);border-top:1px solid rgba(130,72,201,.16)}
.foot__top{max-width:78rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);gap:clamp(2rem,5vw,5rem)}
@media (max-width:860px){.foot__top{grid-template-columns:1fr}}
.foot__name{font-family:var(--display-face);font-weight:500;font-size:1.2rem;letter-spacing:.13em;padding-left:.13em;color:var(--white)}
.foot__roles{margin-top:.7rem;font-size:.8rem;letter-spacing:.05em;color:var(--turquoise)}
.foot__line{margin-top:.9rem;font-size:.92rem;color:rgba(248,245,251,.55);max-width:24rem}
/* Cuatro columnas desde que el pie recoge también las secciones de
   la Home, no sólo las del menú. */
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
@media (max-width:520px){.foot__cols{grid-template-columns:1fr 1fr}}
.foot__cols h4{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,245,251,.36);margin-bottom:.9rem}
.foot__cols a{display:block;padding:.22rem 0;font-size:.88rem;color:rgba(248,245,251,.72)}
.foot__cols a:hover{color:var(--white)}
.foot__legal{max-width:78rem;margin:clamp(2.6rem,7vh,4rem) auto 0;padding-top:1.3rem;border-top:1px solid rgba(248,245,251,.08);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.foot__legal,.foot__legal a,.foot__legal button{font-size:.76rem;color:rgba(248,245,251,.42)}
.foot__legal button{cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.foot__legal a:hover,.foot__legal button:hover{color:var(--white)}

/* the long two-part headings in the two-column chapters sit a size down */
#about .h2,#talk .h2{font-size:clamp(1.9rem,3.5vw,3.1rem)}
.talk__intro .h2{margin-bottom:clamp(1.2rem,3vh,1.8rem)}

/* ═══ Section pages ═══════════════════════════════════════════════
   The home is a single narrative; the section pages are documents.
   They open on a dark band — so the nav keeps its footing — and then
   run on paper. ═════════════════════════════════════════════════ */
.page-head{padding-top:clamp(7.5rem,17vh,11rem);padding-bottom:clamp(3.5rem,9vh,6rem);position:relative}
.page-head__eyebrow{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:clamp(1rem,2.4vh,1.6rem)}
.page-head__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--turquoise);box-shadow:0 0 12px var(--turquoise);display:block}
.h1-page{font-family:var(--display-face);font-weight:500;font-size:clamp(2.1rem,5vw,4.1rem);line-height:1.05;letter-spacing:-.04em;max-width:20em}
.h1-page em{font-style:italic}
.page-head__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.6rem,4vw,4rem);margin-top:clamp(1.6rem,4vh,2.6rem);align-items:start}
@media (max-width:900px){.page-head__body{grid-template-columns:1fr}}
/* Los dos subcopies de apertura son el mismo nivel jerárquico, así
   que van iguales en tamaño, peso, interlineado y contraste. El de
   la derecha no es una nota al margen. Vale para About, Craft,
   Ventures, Journal y Let’s Talk, que comparten esta estructura. */
.page-head__more{color:var(--ink-soft);font-size:clamp(1.04rem,.98rem + .42vw,1.3rem);line-height:1.58;font-weight:400;letter-spacing:-.003em}
.page-head__more+.page-head__more{margin-top:1rem}

/* the six verbs, as a band across the page */
.band{padding-top:clamp(2rem,5vh,3rem);padding-bottom:clamp(2rem,5vh,3rem)}
.band__verbs{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.2rem;max-width:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(.9rem,2.5vh,1.4rem) 0}
.band__verbs span{font-family:var(--display-face);font-weight:500;font-size:clamp(.92rem,1.9vw,1.45rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.band__verbs span:first-child,.band__verbs span:last-child{color:var(--indigo-ink)}

/* ── The two doors ────────────────────────────────────────────── */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2rem);align-items:start}
@media (max-width:900px){.doors{grid-template-columns:1fr}}
.door{border:1px solid var(--line);border-radius:18px;background:var(--paper);
  transition:border-color .5s ease,box-shadow .6s var(--ease)}
.door:hover{border-color:rgba(102,52,158,.3)}
.door[open]{grid-column:1/-1;border-color:rgba(102,52,158,.28);box-shadow:0 30px 70px -50px rgba(30,12,50,.5)}
.door>summary{display:grid;gap:.55rem;padding:clamp(1.5rem,3vw,2.4rem);cursor:pointer;list-style:none}
.door>summary::-webkit-details-marker{display:none}
.door>summary:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:18px}
.door__kind{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-ink)}
.door__title{font-family:var(--display-face);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.95rem);
  line-height:1.14;letter-spacing:-.03em;max-width:20em}
.door__tags{font-size:.84rem;color:var(--ink-faint)}
.door__cue{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.9rem;font-weight:600;color:var(--indigo-ink)}
.door__cue i{transition:transform .5s var(--ease)}
.door[open] .door__cue i{transform:rotate(180deg)}
.door[open] .door__cue{opacity:.55}
.door__body{padding:0 clamp(1.5rem,3vw,2.4rem) clamp(1.8rem,4vw,2.8rem);max-width:64rem}
.door__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.6rem);margin-top:.6rem}
@media (max-width:820px){.door__cols{grid-template-columns:1fr}}
.door__cols p{color:var(--ink-soft);margin:0}
.door__note{margin-top:1.2rem;color:var(--ink-soft);font-style:italic}
.door__h{font-family:var(--display-face);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.4rem);
  letter-spacing:.02em;margin:clamp(1.8rem,4vh,2.6rem) 0 .6rem;color:var(--ink)}
.door__out{display:inline-flex;align-items:center;gap:.5rem;margin-top:clamp(1.6rem,4vh,2.2rem);
  font-size:.92rem;font-weight:600;color:var(--indigo-ink);border-bottom:1px solid rgba(102,52,158,.3);padding-bottom:.15rem}
.door__out:hover{border-bottom-color:var(--indigo-ink)}

/* the line that has to carry weight on each door */
.keyline{font-family:var(--display-face);font-weight:500;font-size:clamp(1.45rem,2.8vw,2.3rem);
  line-height:1.14;letter-spacing:-.03em;color:var(--indigo-ink);max-width:18em;margin:clamp(1.4rem,3.5vh,2rem) 0}
.criteria{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0 0 1.4rem;
  padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:620px){.criteria{grid-template-columns:repeat(2,minmax(0,1fr))}}
.criteria b{display:block;font-family:var(--display-face);font-weight:500;font-size:clamp(1.1rem,1.9vw,1.45rem);letter-spacing:-.02em}
.criteria span{display:block;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:.2rem}

/* a process as a line, not as boxes */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .2rem;margin-top:clamp(1.6rem,4vh,2.2rem)}
.flow span{display:inline-flex;align-items:center;font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.flow span+span::before{content:"";width:clamp(14px,3vw,34px);height:1px;background:var(--line);margin:0 .6rem;display:inline-block}
.flow__time{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;font-size:.8rem;color:var(--ink-faint)}
.flow__time i{width:26px;height:1px;background:var(--indigo-ink);opacity:.5;display:block}
.fade{display:flex;flex-wrap:wrap;gap:.2rem;margin-top:1.2rem}
.fade span{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.fade span:nth-child(2){opacity:.7}
.fade span:nth-child(3){opacity:.45}
.fade span:nth-child(4){opacity:.25}
.fade span+span::before{content:"→";margin:0 .55rem;color:var(--ink-faint)}
.stamp{margin-top:clamp(1.4rem,3.5vh,2rem);font-size:.8rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo-ink);max-width:none}

/* ── Accordions ───────────────────────────────────────────────── */
.accs{margin-top:clamp(1.4rem,3.5vh,2rem);border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc>summary{display:flex;align-items:baseline;gap:.9rem;padding:1.05rem 0;cursor:pointer;list-style:none;
  font-family:var(--display-face);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.3rem);letter-spacing:-.02em;
  transition:color .4s ease}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:"+";flex:none;width:1.1em;color:var(--indigo-ink);font-family:var(--text-face);font-weight:400;transition:transform .4s var(--ease)}
.acc[open]>summary::before{content:"–"}
.acc>summary:hover{color:var(--indigo-ink)}
.acc>summary:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
.acc__body{padding:0 0 1.4rem 2rem;max-width:44rem}
.acc__body p{color:var(--ink-soft);font-size:.97rem}
.acc__body p+p{margin-top:.9em}
.acc__close{color:var(--ink)!important;font-family:var(--display-face);font-size:1.08rem;line-height:1.4;letter-spacing:-.02em;margin-top:1.2em!important}
@media (max-width:620px){.acc__body{padding-left:0}}

/* ── The closing call, on every page ──────────────────────────── */
.closing{padding-top:clamp(4.5rem,11vh,7rem);padding-bottom:clamp(4.5rem,11vh,7rem)}
.closing__inner{display:grid;justify-items:center;text-align:center;gap:clamp(1.4rem,3.5vh,2.2rem)}
.closing__q{max-width:16em}

/* ═══ Ventures page ═══════════════════════════════════════════════
   Two large blocks for the business routes, two facing cards for the
   open ones, and then a photograph that breaks the rhythm: business,
   opportunities, person. ════════════════════════════════════════ */
.vpage{--c-invest:#4A78C9;--c-advise:#8248C9;--c-collab:#66BFCB;--c-engage:#B9A6E8}
.vblock{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.4rem,4vw,4rem);
  padding:clamp(1.8rem,4vh,2.8rem) 0;border-top:1px solid var(--line);align-items:start}
.vblock:last-child{border-bottom:1px solid var(--line)}
@media (max-width:860px){.vblock{grid-template-columns:1fr;gap:1rem}}
.vblock__kind{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tone,var(--indigo-ink))}
.vblock__kind::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor}
.vblock__title{font-family:var(--display-face);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.9rem);
  line-height:1.06;letter-spacing:-.035em;margin-top:.7rem;max-width:12em}
.vblock__body p{color:var(--ink-soft)}
.vblock__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.2rem;margin-top:1.4rem}
.vlink{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:600;color:var(--indigo-ink);
  border-bottom:1px solid rgba(102,52,158,.3);padding-bottom:.15rem;transition:border-color .4s}
.vlink:hover{border-bottom-color:var(--indigo-ink)}
.vlink--light{color:var(--turquoise);border-bottom-color:rgba(102,191,203,.35)}
.vlink--light:hover{border-bottom-color:var(--turquoise)}
/* Medelion keeps its own identity: its mark sits on its own dark chip */
.vlink--out{display:inline-flex;align-items:center;gap:.8rem;border:0;padding:0}
.vlink--out img{width:150px;height:auto;display:block;filter:brightness(0);opacity:.82;transition:opacity .5s ease}
.vlink--out:hover img{opacity:1}
.vlink--out span{font-size:.82rem;color:var(--ink-faint)}
.vlink--out:hover span{color:var(--indigo-ink)}

.vpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
@media (max-width:860px){.vpair{grid-template-columns:1fr}}
.vcard{border:1px solid var(--line);border-radius:18px;padding:clamp(1.8rem,3.2vw,2.6rem);background:var(--paper)}
.vcard__shot{margin:-.4rem 0 1.2rem;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.vcard__shot img{width:100%;height:100%;object-fit:cover;object-position:74% 42%;filter:saturate(.9)}
.vcard__title{font-family:var(--display-face);font-weight:500;font-size:clamp(1.3rem,2.1vw,1.75rem);
  line-height:1.12;letter-spacing:-.03em;margin:.6rem 0 .8rem}
.vcard p{color:var(--ink-soft);font-size:.95rem}
.vcard p+p{margin-top:.8em}
.vcard__note{color:var(--ink)!important;font-family:var(--display-face);font-size:1.08rem;line-height:1.35;
  letter-spacing:-.02em;margin-top:1.1em!important}
.vcard .vlink{margin-top:1.2rem}

.explore__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.explore__grid{grid-template-columns:1fr}}
.explore__shot{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:1/1}
.explore__shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.explore__title{font-family:var(--display-face);font-weight:500;font-size:clamp(1.8rem,3.6vw,3rem);
  line-height:1.05;letter-spacing:-.035em;margin:.8rem 0 1.2rem}
.explore__title em{font-style:italic;color:var(--turquoise)}
.explore__text p{color:var(--ink-soft)}
.explore__coda{color:var(--white)!important;font-family:var(--display-face);font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.35;letter-spacing:-.02em;margin-top:1.4rem!important}
.explore .vblock__kind{color:var(--turquoise)}

.vclose{text-align:center}
.vclose .lede,.vclose p{margin-left:auto;margin-right:auto}
.vclose__title{margin-bottom:1.2rem}
/* the reserved signature: used once, where she asks for it */
.signature{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em .7em;max-width:none;
  margin:clamp(2.4rem,6vh,3.6rem) auto 0;padding-top:clamp(1.6rem,4vh,2.4rem);border-top:1px solid var(--line);
  font-family:var(--display-face);font-weight:500;font-size:clamp(1.3rem,3vw,2.4rem);letter-spacing:-.02em}
.signature span:nth-child(1){color:var(--ink)}
.signature span:nth-child(2){color:var(--indigo-ink)}
.signature span:nth-child(3){color:var(--ink-faint)}

/* ═══ Journal ═════════════════════════════════════════════════════
   The landing is a short list, not a magazine grid: two entries, each
   given room to be read. The entries themselves are one narrow
   column, closer to a letter than to a blog post. ═══════════════ */
.entries{list-style:none;display:grid;margin:0;padding:0;max-width:74rem}
.entry{border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry>a{display:grid;gap:.5rem;padding:clamp(1.6rem,4vh,2.6rem) 0}
.entry__kind{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-ink)}
.entry__title{font-family:var(--display-face);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.7rem);
  line-height:1.06;letter-spacing:-.035em;max-width:16em;transition:color .5s ease}
.entry__stand{color:var(--ink-soft);max-width:34rem}
.entry__more{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.88rem;font-weight:600;color:var(--indigo-ink)}
.entry__more svg{transition:transform .5s var(--ease)}
.entry>a:hover .entry__title{color:var(--indigo-ink)}
.entry>a:hover .entry__more svg{transform:translateX(3px)}

.entry-head .h1-page{max-width:14em}
.entry-head__back{display:inline-block;margin-bottom:clamp(1rem,2.5vh,1.6rem);font-size:.82rem;
  font-weight:600;letter-spacing:.04em;color:var(--turquoise)}
.entry-head__back:hover{color:var(--paper)}
.standfirst{margin-top:clamp(1rem,2.5vh,1.6rem);font-family:var(--display-face);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.35;letter-spacing:-.02em;color:rgba(248,245,251,.72);max-width:32rem}

/* The reading column: one measure, generous leading, nothing else
   competing for attention. */
.prose{max-width:40rem}
.prose p{color:var(--ink-soft);font-size:clamp(1rem,.97rem + .15vw,1.08rem);line-height:1.75}
.prose p+p{margin-top:1.15em}
.prose p em{font-style:normal;font-weight:600;color:var(--ink)}
.prose__open{font-size:clamp(1.22rem,1.02rem + .95vw,1.62rem)!important;color:var(--ink)!important;line-height:1.42!important;letter-spacing:-.015em}
.prose h2{font-family:var(--display-face);font-weight:500;font-size:clamp(1.3rem,2.2vw,1.8rem);
  letter-spacing:-.03em;line-height:1.15;margin:clamp(2.4rem,6vh,3.4rem) 0 .9rem;color:var(--ink)}
.prose__line,.prose__close{font-family:var(--display-face);font-size:clamp(1.15rem,1.9vw,1.45rem)!important;
  line-height:1.4!important;letter-spacing:-.025em;color:var(--ink)!important;margin-top:1.6em!important}
.prose__close{color:var(--indigo-ink)!important}
.prose__asks,.prose__keeps{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.5rem}
.prose__asks li,.prose__keeps li{font-family:var(--display-face);font-size:clamp(1.02rem,1.5vw,1.2rem);
  letter-spacing:-.02em;line-height:1.35;color:var(--ink);padding-left:1.1rem;position:relative}
.prose__asks li::before,.prose__keeps li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--indigo-ink);opacity:.5}
.prose__next{margin-top:clamp(2.6rem,7vh,4rem);padding-top:clamp(1.4rem,3.5vh,2rem);border-top:1px solid var(--line)}
.prose__next a{display:grid;gap:.35rem}
.prose__next .entry__title{font-size:clamp(1.25rem,2.2vw,1.7rem)}
.prose__next a:hover .entry__title{color:var(--indigo-ink)}
.quietblock{padding-top:clamp(3.5rem,9vh,6rem);padding-bottom:clamp(3.5rem,9vh,6rem)}

/* ═══ About ═══════════════════════════════════════════════════════
   Credentials as a typographic band rather than a logo wall, and a
   long read broken by two photographic pauses. ═══════════════════ */
.creds__intro{font-family:var(--display-face);font-size:clamp(1.15rem,2.2vw,1.65rem);line-height:1.3;
  letter-spacing:-.03em;color:var(--ink);max-width:34rem;margin-bottom:clamp(2rem,5vh,3rem)}
.creds__intro span{color:var(--ink-faint)}
.creds{display:grid;gap:clamp(1.6rem,4vh,2.4rem);max-width:58rem}
.cred__label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--indigo-ink)}
.cred__list{margin-top:.6rem;font-family:var(--display-face);font-size:clamp(1.05rem,1.9vw,1.4rem);
  line-height:1.35;letter-spacing:-.02em;color:var(--ink)}
.cred__sub{margin-top:.45rem;font-size:.9rem;color:var(--ink-soft)}
.cred__sub b{font-weight:600;color:var(--ink)}
.arc{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin-top:clamp(1.8rem,4.5vh,2.6rem);
  padding-top:clamp(1.2rem,3vh,1.8rem);border-top:1px solid var(--line)}
.arc span{font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.arc i{font-style:normal;color:var(--indigo-ink);opacity:.55}

.quotefig{position:relative;margin:0 0 clamp(2rem,5vh,3rem);border-radius:14px;overflow:hidden}
.quotefig img{width:100%;height:clamp(17rem,46vh,30rem);object-fit:cover;object-position:42% 28%;display:block}
.quotefig figcaption{position:absolute;inset:auto 0 0 0;padding:clamp(1.2rem,4vw,2.6rem);
  background:linear-gradient(to top,rgba(30,12,50,.94) 25%,rgba(30,12,50,0));
  font-family:var(--display-face);font-size:clamp(1.05rem,2.1vw,1.55rem);line-height:1.3;
  letter-spacing:-.025em;color:var(--paper);max-width:36rem}
.prose--after-figure{margin-top:0}
.pullq{margin:clamp(2rem,5vh,3rem) 0;padding-left:clamp(1rem,3vw,1.6rem);border-left:2px solid var(--indigo-ink);
  font-family:var(--display-face);font-size:clamp(1.2rem,2.5vw,1.8rem);line-height:1.2;
  letter-spacing:-.035em;color:var(--ink);text-transform:none}

.today{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.4rem,3vw,2.4rem);
  margin-top:clamp(2rem,5vh,3rem)}
.today__k{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--turquoise)}
.today__p{margin:.7rem 0 .9rem;color:rgba(248,245,251,.72);font-size:.98rem;line-height:1.6}
.aboutclose{margin-top:clamp(2.6rem,6vh,4rem);padding-top:clamp(1.4rem,3.5vh,2.2rem);
  border-top:1px solid rgba(248,245,251,.14);max-width:40rem}
.aboutclose__a{font-family:var(--display-face);font-size:clamp(1.2rem,2.4vw,1.75rem);letter-spacing:-.03em;color:var(--paper)}
.aboutclose__b{margin-top:.5rem;color:rgba(248,245,251,.7);line-height:1.6}

.epilogue{max-width:40rem}
.epilogue p{color:var(--ink-soft);line-height:1.7;margin-top:1rem}
.epilogue__links{list-style:none;margin:clamp(1.6rem,4vh,2.4rem) 0 0;padding:0;display:grid;gap:.9rem}
.epilogue__links li{color:var(--ink-soft);line-height:1.6}

/* ═══ Impact ══════════════════════════════════════════════════════
   Her note: eight identical boxes would turn a personal section into
   a dashboard. Four figures carry the scale of the career; the other
   four say what was done with that responsibility. ═══════════════ */
.bigfig{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:clamp(1.4rem,3vw,2.6rem);
  margin:0 0 clamp(2.4rem,6vh,4rem);max-width:72rem}
.bigfig dt{font-family:var(--display-face);font-weight:500;font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:.92;letter-spacing:-.05em;color:var(--ink)}
.bigfig dt span{color:var(--indigo-ink)}
.bigfig__k{margin-top:.6rem;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo-ink)}
.bigfig__t{margin-top:.45rem;font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.6;color:var(--ink-soft);max-width:24rem}
.evidence{list-style:none;margin:0;padding:clamp(1.6rem,4vh,2.4rem) 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:clamp(1.2rem,3vw,2.2rem);max-width:72rem}
.evidence__k{display:block;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.evidence strong{display:block;margin:.3rem 0 .45rem;font-family:var(--display-face);font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.evidence p{font-size:.92rem;line-height:1.55;color:var(--ink-soft)}

/* ═══ Photographic bands ══════════════════════════════════════════
   A wide, quiet pause between blocks of text. ═══════════════════ */
.shotband{margin:0;border-radius:14px;overflow:hidden}
.shotband img{width:100%;height:clamp(20rem,58vh,34rem);object-fit:cover;object-position:42% 26%;display:block}

.craft__lede{max-width:46rem;margin-bottom:clamp(1.4rem,3.5vh,2.2rem)}

/* ═══ The six steps ═══════════════════════════════════════════════
   The Home animates these verbs over the web of people; here they
   simply say what each one means, so the row reads on its own. ══ */
.steps{list-style:none;margin:0;padding:0;counter-reset:paso;max-width:none}
.steps li{display:grid;grid-template-columns:auto minmax(0,.85fr) minmax(0,1.5fr);
  gap:clamp(.9rem,2.6vw,3rem);align-items:baseline;
  padding:clamp(1.1rem,3.2vh,2.1rem) 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font-size:.74rem;font-weight:600;letter-spacing:.14em;color:var(--ink-faint)}
.steps__k{display:block;font-family:var(--display-face);font-weight:500;
  font-size:clamp(1.9rem,1.15rem + 2.6vw,3.4rem);line-height:1;letter-spacing:-.035em;
  text-transform:none;color:var(--ink)}
.steps__t{display:block;font-size:clamp(1rem,.96rem + .22vw,1.14rem);line-height:1.55;color:var(--ink-soft)}
@media (max-width:760px){
  .steps li{grid-template-columns:auto 1fr;gap:.4rem .9rem}
  .steps__t{grid-column:2}
}

/* ═══ Craft: photograph and text in one band ══════════════════════ */
.howgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.howgrid .shotband{aspect-ratio:4/5}
.howgrid .shotband img{height:100%;object-position:50% 40%}
.howgrid .prose{max-width:38rem}
.howgrid .prose .h2{margin-bottom:1rem}
@media (max-width:880px){ .howgrid{grid-template-columns:1fr} }

/* ═══ Rhythm between bands ════════════════════════════════════════
   Two consecutive bands of the same tone were each paying the full
   chapter padding: 115px bottom plus 115px top left 230px of dead
   space between them, five times over on About. When the ground
   colour does not change, one breath is enough. The closing call
   and the Quiet List keep their own spacing. ══════════════════ */
[data-tone="light"] + [data-tone="light"]:not(.closing):not(.quietblock),
[data-tone="dark"] + [data-tone="dark"]:not(.closing):not(.quietblock){
  padding-top:calc(var(--chapter) * .42)
}

/* ═══ About, across the width ═════════════════════════════════════
   Four long chapters in one 40rem column read as an endless ribbon
   down the middle, leaving a third of the band empty. The heading
   takes the left column and stays with you while its own text
   scrolls past on the right. ══════════════════════════════════ */
.lifegrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(1.4rem,5vw,4.5rem);align-items:start}
.lifegrid .prose{max-width:42rem}
.lifegrid__side{position:static}
.lifegrid__side .h2{margin:0}
@media (max-width:880px){
  .lifegrid{grid-template-columns:1fr;gap:1rem}
  .lifegrid__side{position:static}
}

/* ═══ The closing call, set apart ═════════════════════════════════
   Sharing tone and ground with the band above it, this one melted
   into the page. A photograph at a whisper of opacity and a hairline
   above give it its own air without shouting. ═══════════════════ */
/* La noche cierra la página. Sobre este fondo el canvas enciende sus
   nodos y sus hilos, que en las secciones claras están apagados: el
   fondo es el del sitio, y además se mueve. */
.closing{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid rgba(248,245,251,.09);
  background:
    radial-gradient(115% 135% at 86% 2%, rgba(122,82,196,.40) 0%, rgba(122,82,196,0) 56%),
    radial-gradient(95% 130% at 6% 98%, rgba(102,191,203,.10) 0%, rgba(102,191,203,0) 58%),
    linear-gradient(180deg, #1B0A2E 0%, var(--midnight) 52%, #180A29 100%)}
.closing .closing__q{color:var(--paper)}
.closing .h2--pair span{color:rgba(248,245,251,.60)}
.closing__inner{position:relative}

/* ═══ Collaborate and Engage as equal blocks ══════════════════════
   One card carried a photograph and the other did not, and their
   text runs to different lengths: 678px against 846px. Stretching
   both and pushing each call to the foot makes them read as a pair
   rather than as one unfinished card. ══════════════════════════ */
.vpair{align-items:stretch}
.vpair .vcard{display:flex;flex-direction:column}
.vpair .vcard > .vlink{margin-top:auto;align-self:flex-start}

/* ═══ About across the width ══════════════════════════════════════
   Measured at 1800px the band was 1248px starting at x=276, with the
   text a 672px ribbon and 95px of dead column at its right: a third
   of the screen was doing nothing. Her text stays word for word; on
   wide screens the body simply flows in two columns, so a seven
   paragraph chapter reads in half the height. The opening line and
   the closing line still cross the full measure. ═══════════════ */
.wrap--wide{max-width:104rem}
.lifegrid{max-width:104rem;grid-template-columns:minmax(0,.58fr) minmax(0,2.1fr)}

@media (min-width:1200px){
  .lifegrid .prose{max-width:none;columns:2;column-gap:clamp(2.2rem,3.2vw,4rem)}
  .lifegrid .prose > p{break-inside:avoid-column}
  .lifegrid .prose > .prose__open,
  .lifegrid .prose > .prose__close,
  /* Nada de column-span aquí: al atravesar el texto a dos columnas
     el navegador repintaba el párrafo anterior a ambos lados y se
     veía duplicado. Las citas van ahora fuera del flujo de columnas. */
  .lifegrid .prose > .prose__open{margin-bottom:.4em}
}

/* The wide-screen grid above is declared later in this file than the
   880px collapse, so with equal specificity it was still winning on a
   phone: a .58fr/2.1fr split inside 342px left the text at 255px.
   This restores the single column, and it must stay last. */
@media (max-width:880px){
  .lifegrid{grid-template-columns:1fr;gap:1rem}
  .lifegrid .prose{max-width:none;columns:auto}
  .lifegrid__side{position:static}
}

/* ═══ Hero: the photograph beside the words ═══════════════════════
   Aligned to the logo, the headline still ran across her: 351px of
   overlap with her figure at 1440, 254 at 1800. On a wide screen the
   photo already fills the width, so object-position cannot move her.
   On desktop the photograph starts at 25% of the width over the dark
   ground, she is anchored to its left side, and a short ramp melts
   the edge so no seam shows. Phones keep the full-bleed version. */
@media (min-width:941px){
  #hero{background:var(--midnight)}
  #hero .hero__bg{left:25%}
  #hero .hero__bg img{object-position:0% 50%}
  #hero .hero__bg::after{
    background:
      linear-gradient(to right,
        var(--midnight) 0%, rgba(30,12,50,.92) 10%, rgba(30,12,50,.78) 22%,
        rgba(30,12,50,.58) 36%, rgba(30,12,50,.30) 50%, rgba(30,12,50,.10) 64%,
        rgba(30,12,50,0) 78%),
      linear-gradient(to bottom, rgba(30,12,50,.30) 0%, rgba(30,12,50,0) 24%, rgba(30,12,50,.45) 100%);
  }
}

/* ═══ Hero between 941 and 1279px ═════════════════════════════════
   At 1024 the headline block is most of the width: with the photo at
   25% it still ran 132px into her figure and the end of the paragraph
   sat on an almost bare photo (veil .09). In this range the photo
   starts at 40% and the veil runs longer so the words keep a dark
   ground. Must stay after the block above. */
@media (min-width:941px) and (max-width:1279px){
  #hero .hero__bg{left:40%}
  #hero .hero__bg::after{
    background:
      linear-gradient(to right,
        var(--midnight) 0%, rgba(30,12,50,.92) 18%, rgba(30,12,50,.78) 36%,
        rgba(30,12,50,.52) 52%, rgba(30,12,50,.22) 68%, rgba(30,12,50,0) 84%),
      linear-gradient(to bottom, rgba(30,12,50,.30) 0%, rgba(30,12,50,0) 24%, rgba(30,12,50,.45) 100%);
  }
}

/* ═══ Ventures on the Home, rebalanced ═══════════════════════════
   Once the three cards lost their paragraphs the list measured 472px
   against a 926px left column (heading, lede and the diagram), leaving
   ~450px empty under the cards. The heading now spans the top and the
   constellation sits level with the cards. */
#ventures .vhead{margin-bottom:clamp(1.8rem,4.5vh,3rem)}
#ventures .vhead .lede{max-width:48rem}
#ventures .vgrid{align-items:center}

/* ═══ Craft: the closing line as a pull quote ═════════════════════
   Four levels were competing in one column (big lede, bold inside it,
   bold in the body, and a violet last line that read as a link). The
   line now sits apart, in the display face and in ink. */
.howgrid .prose__close{
  margin-top:clamp(1.6rem,4vh,2.4rem);padding-top:clamp(1rem,2.6vh,1.6rem);
  border-top:1px solid var(--line);
  font-family:var(--display-face);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.2vw,1.8rem)!important;line-height:1.25!important;
  color:var(--ink)!important;
}

/* ═══ About: the credentials as a real band ══════════════════════
   Her note calls this "el principal elemento de credenciales de toda
   la página… una banda visual". It was left-aligned text adrift in
   white, with the right half empty. Now it is a band: a violet wash
   over paper, hairlines top and bottom, and two columns of equal
   weight divided by a rule. The roles line moved to its own band
   between the two chapters, where her note puts it. ═════════════ */
.credsband{position:relative;isolation:isolate;
  background:linear-gradient(180deg, rgba(122,82,196,.05) 0%, rgba(122,82,196,.11) 100%), var(--paper);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.credsband .creds__intro{max-width:44rem}
.credsband .creds{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  gap:clamp(1.8rem,4vw,4rem);max-width:none;align-items:start}
.credsband .cred + .cred{border-left:1px solid var(--line);padding-left:clamp(1.8rem,4vw,4rem)}
.credsband .cred__label{font-size:.82rem;letter-spacing:.16em}
.credsband .cred__list{font-size:clamp(1.15rem,1rem + .75vw,1.7rem);line-height:1.3;margin-top:.7rem}
.credsband .cred__sub{font-size:clamp(.95rem,.92rem + .18vw,1.06rem);margin-top:.6rem}

.arcband{padding-top:clamp(1.6rem,4vh,2.6rem);padding-bottom:clamp(1.6rem,4vh,2.6rem)}
.arcband .arc{margin-top:0;padding-top:0;border-top:0;justify-content:flex-start}
.arcband .arc span{font-size:clamp(.8rem,.74rem + .22vw,.95rem)}
@media (max-width:760px){
  .credsband .cred + .cred{border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:clamp(1.4rem,3vh,2rem)}
}

/* ═══ About — el hilo de la historia ═════════════════════════
   Her note: something that tells the reader where in her story they
   are. Two pieces — a number opening each chapter, and a rail fixed to
   the left edge that names the chapter being read. ══════════════ */
[data-story],.door,section[id]{scroll-margin-top:clamp(4.5rem,10vh,6.5rem)}

.chapstep{display:flex;align-items:center;gap:.8rem;margin-bottom:clamp(.7rem,1.8vh,1.1rem)}
.chapstep b{font-family:var(--display-face);font-weight:400;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2.4vw,2rem);color:var(--indigo-ink)}
.chapstep i{display:block;flex:none;width:clamp(1.6rem,4vw,3.4rem);height:1px;background:var(--line)}
.chapstep span{font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft)}
.tone-dark .chapstep b{color:var(--turquoise)}
.tone-dark .chapstep i{background:rgba(248,245,251,.24)}
.tone-dark .chapstep span{color:rgba(248,245,251,.64)}

.storyrail{display:none}
@media (min-width:1180px){
  .storyrail{display:block;position:fixed;left:clamp(.9rem,2vw,2rem);top:50%;transform:translateY(-50%);
    z-index:58;color:var(--ink);opacity:0;visibility:hidden;
    transition:opacity .6s var(--ease),visibility .6s var(--ease),color .6s var(--ease)}
  .storyrail.is-on,html:not(.js) .storyrail{opacity:1;visibility:visible}
  .storyrail.on-dark{color:var(--paper)}
  .storyrail ol{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:.72rem}

  /* El raíl: una línea finísima, y encima la parte ya recorrida. */
  .storyrail ol::before,.storyrail ol::after{content:"";position:absolute;left:2px;width:1px}
  .storyrail ol::before{top:2px;bottom:2px;background:currentColor;opacity:.13}
  /* La altura llega en píxeles desde el JS: un porcentaje dentro de
     calc() no resuelve en un pseudoelemento absoluto, y además así la
     línea termina exactamente en el punto que toca. */
  .storyrail ol::after{top:2px;height:var(--avance,0px);
    background:currentColor;opacity:.42;transition:height .6s var(--ease)}

  .storyrail a{position:relative;display:block;padding:.18rem 0;text-decoration:none;color:inherit}
  .storyrail a::after{display:none}

  /* Puntos pequeños. El activo no crece: se enciende y respira un halo. */
  .storyrail i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.2;
    box-shadow:0 0 0 0 rgba(122,82,196,0);
    transition:opacity .45s var(--ease),box-shadow .5s var(--ease)}
  .storyrail li.is-done i{opacity:.38}
  .storyrail li.is-here i{opacity:1;box-shadow:0 0 0 3.5px rgba(122,82,196,.16)}
  .storyrail.on-dark li.is-here i{box-shadow:0 0 0 3.5px rgba(102,191,203,.20)}
  .storyrail a:hover i{opacity:.75}

  .storyrail span{position:absolute;left:1.05rem;top:50%;writing-mode:vertical-rl;white-space:nowrap;
    font-size:.56rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
    opacity:0;transform:translateY(-50%) translateX(-4px);pointer-events:none;
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .storyrail li.is-here span{opacity:.62;transform:translateY(-50%)}
  .storyrail a:hover span{opacity:.85;transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce){.storyrail *{transition:none!important}}

/* Credentials: el retrato de estudio acompaña a la banda. */
.credsgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;max-width:104rem}
.credsgrid .creds{max-width:none}
.credsgrid__shot{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5}
.credsgrid__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block}
@media (max-width:1020px){
  .credsgrid{grid-template-columns:1fr;gap:clamp(1.6rem,4vh,2.4rem)}
  .credsgrid__shot{aspect-ratio:16/10;max-width:34rem}
}

/* Una sola fotografía de lado a lado, en horizontal. */
.lifewide{margin:clamp(2rem,4.5vh,3rem) 0 clamp(1.7rem,3.8vh,2.4rem);
  border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.lifewide img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}

/* La cita ocupa la columna del título, con su mismo peso. */
.pullq--side{margin:0;padding-left:clamp(1rem,2.2vw,1.5rem);border-left-width:3px;
  font-size:clamp(1.45rem,1.05rem + 1.5vw,2.3rem)!important;line-height:1.14;letter-spacing:-.04em}
.lifeclose{margin-top:clamp(1.6rem,3.5vh,2.4rem);display:grid;gap:.9rem;justify-items:start;
  break-inside:avoid-column;page-break-inside:avoid}

/* Credentials: las cifras en dos por fila, que las listas necesitan aire. */
.credsgrid .bigfig{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;
  margin-bottom:clamp(1.8rem,4.5vh,2.8rem)}
.credsgrid .bigfig dt{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.credsgrid .bigfig__t{max-width:26rem}
.credsgrid .evidence{max-width:none}
.lifeclose .prose__close{max-width:46rem}
@media (max-width:880px){
  .credsgrid .bigfig{grid-template-columns:1fr}
  .lifewide{aspect-ratio:4/3}
}

@media (max-width:1100px){
}

/* ── Consent ──────────────────────────────────────────────────────
   La nota legal deja de ser un pie de página que nadie lee y pasa a
   ser una decisión: sin marcarla no se envía nada. Usa los tokens de
   la página, así que se adapta sola al fondo claro y al violeta.
   El texto va en --ink-soft y no en --ink-faint: a .40 de opacidad
   era prácticamente ilegible. */
.consent{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;margin-top:1.15rem}
.consent--inline{margin-top:.9rem}
.consent input[type=checkbox]{
  /* padding:0 no es decorativo: .quiet__form input y .field input
     están pensadas para campos de texto y le metían 13,6×16 px de
     relleno. Con border-box eso forzaba la casilla a 35×30 y dejaba
     de ser cuadrada. */
  appearance:none;-webkit-appearance:none;padding:0;border-radius:.3rem;
  margin:.12rem 0 0;
  width:1.15rem;height:1.15rem;flex:none;display:grid;place-content:center;
  border:1.5px solid var(--ink-soft);border-radius:.3rem;background:transparent;
  cursor:pointer;transition:border-color .22s var(--ease),background .22s var(--ease);
}
.consent input[type=checkbox]:hover{border-color:var(--violet)}
.consent input[type=checkbox]:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.consent input[type=checkbox]:checked{background:var(--violet);border-color:var(--violet)}
.consent input[type=checkbox]:checked::after{
  content:"";width:.26rem;height:.55rem;border:solid #fff;border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg);
}
.consent label{font-size:.85rem;line-height:1.6;color:var(--ink-soft);cursor:pointer}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.055em}
.consent a:hover{color:var(--violet)}
.consent.is-bad input[type=checkbox]{border-color:#d9534f}
.consent.is-bad label{color:#d9534f}

/* ── El Hero en pantallas bajas ────────────────────────────────────
   Bernardette pide más aire en el Hero, y con razón: estaba apelmazado
   en la mitad izquierda. Pero el aire tiene un límite, y es el pliegue.
   Medido a 1366×768 —una de las resoluciones que pide comprobar— el
   Hero se iba a 940px y el botón "Start a conversation" quedaba fuera
   de pantalla al llegar.
   Así que el aire se reparte según la altura disponible: generoso en
   pantallas altas, contenido cuando no caben las dos cosas. Antes que
   el espaciado, manda que se vea el CTA. */
@media (min-width:881px) and (max-height:960px){
  #hero{padding-top:clamp(3.8rem,7vh,5rem)}
  .hero__eyebrow{margin-bottom:clamp(.9rem,2vh,1.4rem)}
  .hero__body{margin-top:clamp(1.2rem,2.4vh,1.8rem)}
  .hero .btn{margin-top:clamp(1.3rem,2.6vh,1.9rem)}
  .display{font-size:clamp(2.3rem,5vw,4rem)}
  .lede--lead{font-size:clamp(1.22rem,1.02rem + .7vw,1.55rem);line-height:1.44}
}
/* ── Encuadre de la foto de Collaborate ────────────────────────────
   La foto de la charla es vertical (1024×1536) y la tarjeta es 16:9,
   así que el recorte se come casi todo el alto. El encuadre general
   de las tarjetas (74% 42%) está pensado para fotos apaisadas y aquí
   dejaba la cara fuera. Se sube el punto de interés. */
#collaborate .vcard__shot img{object-position:50% 24%}

/* ── Encuadre de la foto de Let's Talk ─────────────────────────────
   En escritorio la foto no recorta a los lados: al cubrir un
   contenedor apaisado, una imagen vertical encaja exacta en ancho y
   sólo sobra alto. Por eso object-position horizontal no hacía nada,
   y ella —que está en el centro-derecha del encuadre— quedaba justo
   detrás del formulario: se le veía el pelo y el pendiente, no la
   cara.
   Se refleja horizontalmente para que quede en el lado libre. No hay
   texto ni logotipo en la foto, así que el espejo no delata nada, y
   es un cambio de una línea que se revierte quitándola.
   El 32% vertical centra la mirada dentro de la banda visible. */
.contact--room .contact__bg img{transform:scaleX(-1);object-position:40% 32%}

/* ══ Revisión de Bernardette · ajustes finos ══════════════════════
   Los puntos de su documento que son de milímetros. Van al final y
   agrupados a propósito: así se ven de un vistazo y se revierten uno
   a uno si alguno no convence. */

/* Drive · "acercaría la foto y el bloque porque hay mucho espacio en
   el medio". A 1440 la separación llegaba a 96px. */
.drive{gap:clamp(1.8rem,3.6vw,3.6rem)}

/* The Quiet List · dos cosas.
   Una es mía: al meter la casilla legal dentro del formulario, que es
   un flex horizontal, el campo de email se quedó sin sitio y colapsó
   a un cuadrado. Sólo lo comprobé en móvil, donde ese contenedor se
   apila en columna, así que no se vio. La casilla pasa a ocupar su
   propia línea.
   La otra es suya: "evitar que el campo quede tan tenue que parezca
   un elemento decorativo". El borde estaba al 10% de opacidad y el
   fondo del campo era el mismo que el de la sección — literalmente no
   se veía dónde escribir. */
/* OJO: por debajo de 520 px este formulario pasa a flex-direction:
   column, y ahí "flex: 1 1 16rem" deja de significar 16 rem de ANCHO
   para significar 16 rem de ALTO — y creciendo. El campo de email se
   convertía en una caja de 400 px de alto en el móvil.
   Estas tres reglas son sólo para la disposición en fila. */
@media (min-width:521px){
  .quiet__form{flex-wrap:wrap;align-items:center}
  .quiet__form input{flex:1 1 16rem}
  .quiet__form .consent{flex:1 1 100%;margin-top:.2rem}
}
@media (max-width:520px){
  /* En columna, cada uno con su alto natural. */
  .quiet__form>*{flex:0 0 auto;width:100%}
  .quiet__form .consent{margin-top:.2rem}
}
.quiet__form input{
  border-color:rgba(30,12,50,.28);
  background:#fff;
  box-shadow:0 1px 2px rgba(30,12,50,.04);
}
.quiet__form input::placeholder{color:rgba(30,12,50,.52)}

/* "What are you building" · "no es preciso que esta sección ocupe una
   pantalla completa". */
#building{padding-top:clamp(4rem,10vh,7rem);padding-bottom:clamp(4rem,10vh,7rem)}

/* Footer · "dar ligeramente más presencia visual a Bernardette M.
   como firma final de la página". */
.foot__name{font-size:1.45rem}

/* Journal · que rótulo, título, texto, CTA y foto caigan a la misma
   altura en las dos entradas, aunque un título ocupe una línea y el
   otro dos.
   Con flex no se consigue: cada tarjeta reparte su propio alto sin
   saber nada de la vecina. Se hace con subgrid, que es exactamente
   para esto — las filas las define .entries y cada entrada se cuelga
   de ellas. Hay tres niveles de anidamiento, así que los tres las
   heredan.
   Mientras sólo haya dos entradas ocupan todo el ancho en vez de
   dejar una columna vacía a la derecha; cuando haya tres o cuatro la
   rejilla se reparte sola. */
.entries{grid-template-columns:repeat(auto-fit,minmax(min(22rem,100%),1fr));align-items:stretch}
@supports (grid-template-rows: subgrid){
  .entries{grid-template-rows:auto auto auto auto auto}
  .entry{grid-row:span 5;display:grid;grid-template-rows:subgrid;gap:0}
  .entry>a{grid-row:span 5;display:grid;grid-template-rows:subgrid;gap:0}
  .entry__txt{grid-row:span 4;display:grid;grid-template-rows:subgrid;gap:0}
  .entry__shot{grid-row:span 1;align-self:start}
}
/* Reserva para navegadores sin subgrid: al menos el CTA queda abajo. */
@supports not (grid-template-rows: subgrid){
  .entry,.entry>a{display:flex;flex-direction:column;height:100%}
  .entry__more{margin-top:auto}
}
.entry__more{padding-top:1.1rem;align-self:start}

/* Ventures · "reforzar claramente la jerarquía entre categoría,
   headline, explicación y CTA", y que los CTA de las dos tarjetas
   queden a la misma altura. */
.vpair .vcard{display:flex;flex-direction:column}
.vpair .vcard .vlink{margin-top:auto;padding-top:1.4rem}
.vcard .vblock__kind{margin-bottom:.7rem}
.vcard__title{margin-bottom:.9rem}

/* ── Crédito de diseño ─────────────────────────────────────────────
   Va en la franja legal, al mismo nivel que el resto. Enlace normal
   —sin nofollow— que abre en pestaña nueva; rel="noopener" es por
   seguridad de la pestaña, no afecta al SEO. */
/* Ojo: el pie lleva data-tone="dark" pero NO la clase .tone-dark, que
   es la que redefine los tokens. Usar var(--ink-faint) aquí devolvía
   el valor del tema claro —texto oscuro sobre fondo oscuro— y el
   crédito quedaba invisible. Sus vecinos de la franja legal usan un
   color explícito; se iguala a ellos. */
.foot__by{font-size:.76rem;color:rgba(248,245,251,.52)}
.foot__by a{color:rgba(248,245,251,.72);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.05em}
.foot__by a:hover{color:var(--white)}
@media (min-width:881px){.foot__by{margin-left:auto}}

/* ── Cabecera de las páginas interiores ────────────────────────────
   Dos cosas de su revisión del 25 de septiembre.

   Los dos párrafos de apertura no arrancaban a la misma altura: el de
   la derecha heredaba un margen superior de 24 px que el de la
   izquierda no tenía. Se quita sólo cuando van lado a lado; apilados
   en móvil ese margen es justo lo que los separa.

   Y el título quedaba pegado al cuerpo —36 px—, así que respira más. */
@media (min-width:901px){
  /* Por posición en la rejilla, no por clase: .lede también es un <p>,
     así que :first-of-type apuntaba a ella y no al de la derecha. */
  .page-head__body>*:nth-child(2){margin-top:0}
}
.page-head__body{margin-top:clamp(2.4rem,6vh,4rem)}

/* The Quiet List · "separaría el texto debajo del título un poco".
   Sólo aquí: .chapter-head la comparten todas las secciones y ahí el
   espacio actual funciona. */
#quiet .chapter-head{margin-bottom:clamp(3.2rem,8vh,5.8rem)}

/* ── Ventures en la Home ───────────────────────────────────────────
   Dos cosas de su revisión.

   El dibujo iba pegado al borde izquierdo de su columna, con 141 px
   vacíos a la derecha; y la coda de debajo mide 352 px frente a los
   480 del dibujo, también a la izquierda. Como los círculos de la
   constelación van metidos hacia dentro de su caja, el texto parecía
   arrancar por fuera del dibujo. Centrados los dos en la columna
   comparten eje y el desajuste desaparece.

   De paso se cierra la distancia con las tarjetas: el hueco entre
   bloques baja de 206 px a unos 136. */
@media (min-width:881px){
  .vgrid__side .constel{margin-inline:auto}
  .vgrid__side .vent__coda{margin-inline:auto}
}

/* ── "Typical journey / Typical initial engagement" ────────────────
   Tenía razón: era la raya. Ocupa 26 px más su separación, así que el
   texto arrancaba 36 px a la derecha de los pasos de arriba y no
   alineaba con nada de su bloque.
   La raya se cuelga en el margen izquierdo y el texto queda a plomo
   con el resto. Sólo donde hay sitio de sobra; apilado en pantallas
   estrechas se deja como estaba. */
@media (min-width:881px){
  .flow__time{margin-left:-2.2rem}
}
@media (max-width:880px){
  /* Menos margen disponible: se cuelga sólo hasta el borde del bloque. */
  .flow__time{margin-left:-1.5rem}
}

/* ── El CTA de Craft en la Home ────────────────────────────────────
   "¿El CTA está desubicado?" — sí. El creed («Ask. Listen. Challenge…»)
   va centrado y ocupa de 303 a 1137, con su eje en 720; el enlace de
   debajo quedaba alineado a la izquierda, con el eje en 187. Colgaba
   a 533 px del centro de lo que cuelga.
   Se centra bajo el creed, que es de donde depende. */
.craft__more{display:block;width:fit-content;margin-inline:auto}

/* ── Las cajas de Craft cuando una se abre ─────────────────────────
   Llegando desde un CTA del pie, el ancla abre una de las dos. La
   abierta pasa a ocupar las dos columnas (1248 px) y la otra se queda
   debajo a media anchura (608), que es la asimetría que señala.
   Con una abierta, las dos van a ancho completo. :has() lo resuelve
   sin tocar el guion; donde no exista, se queda como está. */
.doors:has(.door[open]) .door{grid-column:1 / -1}

/* ── Palabras huérfanas al final de párrafo ────────────────────────
   Pedía estirar el texto para que «like» y «call» no se quedasen
   solos en su línea. Midiendo, no eran dos casos: son ocho párrafos
   sólo en Craft los que acaban con una palabra suelta.
   Fijar un ancho lo arreglaría en su portátil y lo rompería en otra
   pantalla. text-wrap:pretty es la regla que existe justo para esto:
   el navegador reparte las últimas líneas para no dejar huérfanas, y
   se adapta a cualquier ancho. Donde no esté soportado, el texto
   vuelve al reparto de siempre. */
p, li, dd, blockquote, figcaption, .lede, .stamp, .creed{text-wrap:pretty}

/* ══ Legibilidad del texto pequeño ════════════════════════════════
   De sus capturas en el móvil de verdad, que enseñan lo que la
   emulación no. */

/* 1 · La frase de cierre de las tarjetas de Ventures ("I therefore
   leave deliberate room…", "What interests me is not speaking at an
   audience…"). Medía lo mismo que el cuerpo —15,2 px— pero va en la
   tipografía de titulares, que a igual tamaño tiene la letra más
   pequeña, y con el interlineado más apretado: 20,5 frente a 24,6.
   Por eso parece menor de lo que es. */
/* .vcard p es más específica (clase + tipo) y ganaba, así que la
   regla se iguala en especificidad. */
.vcard p.vcard__note,.vblock p.vcard__note,p.vcard__note{font-size:1.02rem;line-height:1.5;color:var(--ink)}

/* 2 · Los rótulos en versalitas iban entre 10,6 y 11,5 px. En
   mayúsculas y muy espaciados, a ese tamaño cuesta leerlos en un
   teléfono. Doce píxeles es el suelo razonable, y se afloja un punto
   el espaciado entre letras. */
.vent__kind,.evidence__k,.foot__cols h4,.scroll-cue span{font-size:.75rem;letter-spacing:.12em}
.door__kind,.entry__kind,.today__k,.vblock__kind{font-size:.76rem;letter-spacing:.13em}
.foot__cols h4{color:rgba(248,245,251,.62)}

/* 3 · "Or reach me directly" iba a 12,5 px con opacidad .52 sobre una
   fotografía. Encima de una foto ese contraste no se sostiene. */
.contact__or{font-size:.86rem;color:rgba(248,245,251,.78)}

/* 4 · El "Explore further" quedaba a 1 px de la coda de arriba. */
.explore__coda + .vlink{margin-top:clamp(1.1rem,3vh,1.6rem)}

/* 5 · El turquesa de marca sobre fondo claro.
   #66BFCB da 1,97:1 sobre el papel del sitio, muy por debajo del
   mínimo legible. Sobre el violeta oscuro va perfecto —8,56:1— y por
   eso el problema sólo aparece en unas secciones. Se añade una
   variante oscurecida para fondos claros; el color de marca no cambia
   donde hoy funciona. */
:root{--turquoise-ink:#2E7280}
.tone-light .vblock__kind,.tone-light .today__k,
.tone-light .chapter-num .label,.vcard .vblock__kind{color:var(--turquoise-ink)}

/* 6 · La franja legal del pie iba al 42 % de opacidad: 3,81:1. */
.foot__legal,.foot__legal a,.foot__legal button{color:rgba(248,245,251,.58)}

/* 7 · El "Skip" de la animación de entrada. */
.ov-skip{color:rgba(248,245,251,.72)}

/* ══ Retirados tras el soft launch ════════════════════════════════
   El puntero personalizado y la línea flotante. El feedback los
   señaló varias veces: llaman la atención sobre la web en lugar de
   sobre Bernardette, y no aportan nada estratégico.

   El puntero se oculta pero su seguimiento sigue vivo: la animación
   de nodos del fondo reacciona a la posición del ratón y se quedaría
   muerta si se arrancase. Y vuelve el cursor del sistema, que es lo
   que la gente espera. */
#cursor{display:none !important}
@media (hover:hover) and (pointer:fine){
  body,a,button,select{cursor:auto}
  a,button,select,summary,[role=button]{cursor:pointer}
  input,textarea{cursor:text}
}
#thread{display:none !important}

/* ══ Cabecera compacta al hacer scroll ════════════════════════════
   "Estado inicial: header actual completo. Después de hacer scroll:
   versión compacta." El fijo es necesario, pero en un móvil roba
   altura justo cuando se está leyendo texto largo.

   Se aprovecha la clase .stuck, que el guion ya pone al despegarse
   de arriba: al llegar, la cabecera encoge el relleno y la marca. El
   estado inicial queda intacto, que es lo que pedía.

   Las medidas se animan con la misma transición que ya tenía el nav
   para color y fondo, así que el cambio se ve como un asentamiento,
   no como un salto. */
#nav{transition:opacity 1.2s var(--ease) .2s,transform 1.2s var(--ease) .2s,
     background-color .5s ease,backdrop-filter .5s ease,box-shadow .5s ease,color .5s ease,
     padding .45s var(--ease)}
#nav .mark--nav,#nav .brand__name{transition:width .45s var(--ease),font-size .45s var(--ease)}

#nav.stuck{padding-block:clamp(.5rem,1.05vh,.7rem)}
#nav.stuck .mark--nav{width:clamp(26px,2.05vw,31px)}
#nav.stuck .brand__name{font-size:clamp(.86rem,.66rem + .42vw,1rem)}

/* ══ Experience across ════════════════════════════════════════════
   La franja de credibilidad, entre Drive y Craft.

   Dos decisiones que se ven poco pero importan:

   · La altura va logotipo a logotipo, en la variable --h de cada uno.
     Con una altura uniforme el resultado es un desastre óptico: PwC
     se ve a la mitad que Accenture porque su marca es cuadrada y la
     otra es una línea de texto. Se calibró uno a uno mirándolos
     juntos.

   · Monocromo por filtro, no por archivo. Así los logotipos siguen
     siendo los originales —descargados de Wikimedia Commons, donde
     constan como dominio público por ser tipográficos— y se pueden
     sustituir por los oficiales de cada marca sin tocar el CSS. */
.exp{padding-block:clamp(2.6rem,6vh,4.2rem)}
.exp__lede{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 clamp(1.4rem,3.5vh,2rem);
}
.exp__row{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.4rem,2.3vw,2.4rem);
}
/* A 1440 los ocho logotipos más "Start-ups" no entraban en una línea
   y la palabra caía sola debajo, que parecía un descuido. Con esta
   separación entran los nueve. */
.exp__row li{display:flex;align-items:center}
.exp__row img{
  height:var(--h,30px);width:auto;max-width:100%;display:block;
  filter:grayscale(1) brightness(0) opacity(.62);
  transition:filter .5s var(--ease);
}
.exp__row li:hover img{filter:grayscale(1) brightness(0) opacity(.9)}
.exp__word{
  font-family:var(--display-face);font-weight:500;font-size:1.05rem;
  letter-spacing:.01em;color:var(--ink-soft);
}
@media (max-width:640px){
  .exp__row{gap:1.5rem 1.8rem;justify-content:flex-start}
  .exp__row img{height:calc(var(--h,30px) * .82)}
}

/* ══════════════════════════════════════════════════════════════
   REVISIÓN DE DENSIDAD — punto 8 del soft launch v2 · HOME
   ─────────────────────────────────────────────────────────────
   El diagnóstico del documento es literal: «el problema no es el
   tamaño del texto, sino padding + interlineado + separación».
   Así que aquí no se toca ni una letra de tamaño: se recorta aire.

   La palanca de lejos más grande es --chapter. Vale 15vh, o sea
   127px arriba Y 127px abajo en un móvil de 844: 253px por
   sección, ocho secciones, más de dos pantallas y media sólo de
   padding. Bajarla a 8vh devuelve una pantalla entera sin tocar
   contenido.

   El punto 9 pide NO trasladar a escritorio toda la compactación
   del móvil: allí el recorte es la mitad.
   ══════════════════════════════════════════════════════════ */

/* ── El aire entre secciones ───────────────────────────────── */
@media (max-width:880px){
  :root{--chapter:clamp(3.4rem,8vh,5.2rem)}          /* 127px → 68px */
  .chapter-head{margin-bottom:clamp(1.4rem,3.4vh,2.2rem)}  /* 51px → 29px */
  #quiet .chapter-head{margin-bottom:clamp(1.6rem,4vh,2.6rem)}
}
@media (min-width:881px){
  :root{--chapter:clamp(5.5rem,11vh,8.5rem)}         /* recorte a la mitad */
  .chapter-head{margin-bottom:clamp(2rem,4.6vh,3.4rem)}
}

/* ── Drive — manifiesto y transición, no una sección entera ───
   El bloque del símbolo mide 123px y ya estaba dentro del
   120–160px que pide el documento: lo que sobraba era la sección
   a su alrededor, no él. Así que el símbolo se queda como está y
   se recorta el aire: padding propio, separación sobre la firma y
   el retrato cuadrado, que en vertical se come media pantalla. */
@media (max-width:880px){
  #drive{padding-top:clamp(2.8rem,6.5vh,4.2rem);padding-bottom:clamp(2.8rem,6.5vh,4.2rem)}
  .drive__photo{aspect-ratio:4/3}
  .drive__lead{margin-bottom:clamp(.8rem,2vh,1.2rem)}
  .sig{margin-top:clamp(1.4rem,3vh,2rem);padding-top:clamp(1rem,2.4vh,1.5rem)}
}
@media (min-width:881px){
  #drive{padding-top:clamp(4rem,9vh,6.5rem);padding-bottom:clamp(4rem,9vh,6.5rem)}
  .sig{margin-top:clamp(1.8rem,3.6vh,2.4rem);padding-top:clamp(1.4rem,3vh,1.9rem)}
}

/* ── Craft — en móvil cede el gráfico, no el mensaje ──────────
   Petición explícita: «En mobile sacrificaría el gráfico para
   preservar mensaje y ritmo. Y pondría directamente debajo del
   párrafo: Ask. Listen. Challenge. / Connect. Align. Execute.»
   Tres y tres se consiguen con grid; en flex las seis palabras
   rompían donde les cabía. Las barras de cada verbo son
   ::before/::after absolutos dentro del span y siguen igual. */
@media (max-width:880px){
  #craft .chain{display:none}
  .creed{
    display:grid;grid-template-columns:repeat(3,auto);justify-content:center;
    gap:.5em .55em;margin-top:clamp(1.4rem,3.4vh,2.2rem);
  }
  .craft__more{margin-top:clamp(1.2rem,3vh,1.8rem)}
}

/* ── Ventures — tres bandas, no tres módulos ──────────────────
   «Para mobile querría algo más parecido a tres bandas
   consecutivas compactas, quizá de unos 150–180 px cada una.» El
   grafico ya mide 342px, dentro del 300–350 pedido, así que sólo
   se aprieta la tarjeta. En escritorio NO: el punto 9 dice
   expresamente que allí conserven presencia visual. */
@media (max-width:880px){
  .vgrid__list{gap:.6rem}
  .vent{padding:.85rem 1rem .8rem 1.15rem}
  .vent__kind{margin-bottom:.3rem}
  .vent__title{margin-bottom:.35rem}
  .vent .vent__pull{margin-top:.5rem;padding-left:.8rem}
  .vent__link{margin-top:.5rem}
  .vgrid__side .constel{margin-top:clamp(1rem,2.4vh,1.5rem)}
  .vent__coda{margin-top:clamp(.8rem,2vh,1.2rem)}
}

/* ── Impact — un data wall, con los números intactos ──────────
   «No reduciría mucho el tamaño de los números; reduciría
   márgenes verticales entre métricas.» En móvil la rejilla ya cae
   a una columna sola: lo que sobra es el hueco entre filas. */
@media (max-width:880px){
  .bigfig{gap:clamp(.9rem,2.2vh,1.4rem)}
  .bigfig__k{margin-top:.35rem}
  .bigfig__t{margin-top:.3rem}
  .evidence{padding-top:clamp(1rem,2.6vh,1.6rem);gap:clamp(1.1rem,2.8vh,1.7rem)}
  .evidence strong{margin:.22rem 0 .3rem}
}
@media (min-width:881px){
  .bigfig{gap:clamp(1.1rem,2.2vw,1.9rem)}
  .evidence{padding-top:clamp(1.3rem,3vh,1.9rem)}
}

/* ── About — el retrato pierde alto, no ancho ─────────────────
   «Reducir en mobile su altura aproximadamente 25–30%,
   manteniendo el ancho actual y ajustando el crop. No necesitamos
   ver tanta parte inferior de la imagen.» De ahí el encuadre alto:
   se recorta por abajo, que es lo que sobra. */
@media (max-width:880px){
  .portrait img{aspect-ratio:4/3.7;object-fit:cover;object-position:50% 22%}
  .portrait__grid{gap:1.8rem}
}

/* ── Let's Talk y la foto que lo cierra ───────────────────────
   «Mantendría la foto pero recortada, reducirla a una banda de
   unos 180–220 px de alto.» Y el bloque de la pregunta llevaba
   135px de padding por lado, más que ninguna otra sección. */
@media (max-width:880px){
  #building{padding-top:clamp(3rem,7vh,4.5rem);padding-bottom:clamp(3rem,7vh,4.5rem)}
  .ask__q{margin-bottom:clamp(.9rem,2.4vh,1.4rem)}
  .ask .lede{margin-bottom:clamp(1.3rem,3.2vh,1.9rem)}
}
@media (min-width:881px){
  #building{padding-top:clamp(4.5rem,11vh,7.5rem);padding-bottom:clamp(4.5rem,11vh,7.5rem)}
}
@media (max-width:900px){
  .quiet__bg{height:min(48vw,13.5rem)}               /* 226px → 187px */
}

/* ══════════════════════════════════════════════════════════════
   REVISIÓN DE DENSIDAD — punto 8 · PÁGINAS INTERIORES
   ══════════════════════════════════════════════════════════ */

/* ── La cabecera de todas las páginas interiores ──────────────
   17vh arriba son 143px en un móvil, y con ellos la primera
   sección no llega nunca a asomar. Craft lo pide explícitamente:
   «el usuario debería alcanzar a intuir el comienzo de Ask /
   Listen / Challenge al llegar al final de la primera pantalla». */
@media (max-width:880px){
  .page-head{padding-top:clamp(5.5rem,12vh,7.5rem);padding-bottom:clamp(2rem,5vh,3rem)}
  .page-head__body{margin-top:clamp(1rem,2.6vh,1.6rem)}
  .page-head__body{gap:.9rem}
  .page-head__more+.page-head__more{margin-top:0}
}
@media (min-width:881px){
  .page-head{padding-top:clamp(6.5rem,14.5vh,9.5rem);padding-bottom:clamp(2.8rem,7vh,4.5rem)}
}

/* ── Craft · la secuencia del método ──────────────────────────
   «Reduciría aproximadamente 30–35 % el espacio vertical de cada
   fila. Creo que el problema no es el tamaño del texto, sino
   padding + interlineado + separación entre elementos.» Se toca
   el padding de la fila, no la tipografía. En escritorio el
   punto 9 rebaja el recorte al 15–20 %. */
@media (max-width:880px){
  .steps li{padding:clamp(.75rem,2.1vh,1.35rem) 0}   /* −35 % */
  .steps li{gap:.3rem .9rem}
}
@media (min-width:881px){
  .steps li{padding:clamp(.95rem,2.7vh,1.75rem) 0}   /* −17 % */
}

/* ── Craft · la pausa entre Execute y Private Equity ──────────
   «Después de Execute aparece prácticamente media pantalla vacía
   antes de Private Equity. Eso en móvil parece accidental, no una
   pausa editorial. Una pausa de unos 80–120 px sería suficiente.»
   Son dos <section> seguidas con el mismo tono, así que el hueco
   era la suma de los dos paddings. Se reparte: 50 + 50. */
@media (max-width:880px){
  .page--craft .steps-band{padding-bottom:clamp(2.6rem,6.5vh,3.8rem)}
  .page--craft .doors-band{padding-top:clamp(2.6rem,6.5vh,3.8rem)}
  /* y el aire antes de la fotografía del relato, que se acumula */
  .page--craft .story-band{padding-top:clamp(2.6rem,6vh,3.8rem)}
}
@media (min-width:881px){
  .page--craft .steps-band{padding-bottom:clamp(3.2rem,7vh,5rem)}
  .page--craft .doors-band{padding-top:clamp(3.2rem,7vh,5rem)}
  .page--craft .story-band{padding-top:clamp(3.6rem,8vh,5.5rem)}
}

/* ── Craft · las dos puertas ──────────────────────────────────
   «Reducir ligeramente el padding vertical interno; reducir el
   espacio entre ambas tarjetas; mantener ambas con exactamente la
   misma lógica visual.» La lógica visual ya era idéntica: las dos
   son el mismo <details>. */
@media (max-width:880px){
  .doors{gap:.8rem}
  .door>summary{padding:clamp(1.1rem,2.4vw,1.7rem);gap:.45rem}
  .door__body{padding:0 clamp(1.1rem,2.4vw,1.7rem) clamp(1.3rem,3vw,2rem)}
  .door__out{margin-top:clamp(1.1rem,2.8vh,1.6rem)}
}
@media (min-width:881px){
  .doors{gap:clamp(1rem,2.2vw,1.7rem)}
  .door>summary{padding:clamp(1.3rem,2.6vw,2rem)}
}

/* ── Ventures · los huecos que el documento señala uno a uno ──
   «Reduciría mucho el espacio blanco entre el final del hero e
   INVEST», «hay otro espacio blanco enorme antes de Collaborate»,
   «otro exceso de espacio antes de Explore». Los tres son lo
   mismo: el padding superior de cada sección sumado al inferior
   de la anterior. El punto 9 pide reducirlos también en
   escritorio, así que aquí el recorte no es sólo de móvil. */
.page--ventures .vpage{padding-top:clamp(2.4rem,6vh,4rem)}
.page--ventures .explore{padding-top:clamp(2.6rem,6.5vh,4.2rem)}
.page--ventures .vclose{padding-top:clamp(2.8rem,7vh,4.5rem)}
@media (max-width:880px){
  .vblock{padding:clamp(1.2rem,3vh,1.9rem) 0}
  .vblock__acts{margin-top:1rem;gap:1rem 1.6rem}
  .vpair{gap:1rem}
  .vcard{padding:clamp(1.2rem,2.6vw,1.8rem)}
  .vcard__shot{margin:-.2rem 0 .9rem}
  .vcard .vlink{margin-top:.9rem}
}
/* «Le daría aproximadamente la mitad de la altura actual»:
   Potential. People. Possibility. La frase se queda; el aire que
   la rodeaba era el doble de lo que necesitaba. */
.signature{margin-top:clamp(1.3rem,3vh,1.9rem);padding-top:clamp(.9rem,2vh,1.3rem)}

/* ── About · «Explore my story» ───────────────────────────────
   Siete capítulos, cada línea con anchor scroll. El punto 8 lo
   pide plegado en móvil («EXPLORE THIS PAGE +», abriendo las
   siete de golpe) y el punto 9 desplegado en escritorio. Un
   <details open> por defecto: escritorio lo deja como está y el
   móvil lo cierra. Sin JS queda abierto, que es el fallo bueno. */
.tocx{
  padding:clamp(1.4rem,3.5vh,2.2rem) var(--gutter) clamp(1.6rem,4vh,2.6rem);
  border-bottom:1px solid var(--line);background:var(--paper);
}
/* .wrap no puede envolver al <summary>, que tiene que ser hijo
   directo del <details>. Así que el ancho lo llevan los dos hijos. */
.tocx>summary,.tocx>nav{max-width:78rem;margin-inline:auto}
.tocx>summary{
  display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--indigo-ink);
}
.tocx>summary::-webkit-details-marker{display:none}
.tocx>summary:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:4px}
.tocx>summary i{
  width:11px;height:11px;flex:none;position:relative;transition:transform .45s var(--ease);
}
.tocx>summary i::before,.tocx>summary i::after{
  content:"";position:absolute;background:currentColor;border-radius:1px;
}
.tocx>summary i::before{left:0;right:0;top:5px;height:1.5px}
.tocx>summary i::after{top:0;bottom:0;left:5px;width:1.5px;transition:opacity .45s var(--ease)}
.tocx[open]>summary i::after{opacity:0}
.tocx__list{
  list-style:none;margin:clamp(1rem,2.6vh,1.5rem) 0 0;padding:0;
  display:grid;gap:.1rem;
}
.tocx__list a{
  display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;gap:.6rem;
  padding:.62rem 0;border-top:1px solid var(--line);
  text-decoration:none;color:var(--ink-soft);transition:color .35s var(--ease);
}
.tocx__list li:last-child a{border-bottom:1px solid var(--line)}
.tocx__list a::after{display:none}
.tocx__list a:hover,.tocx__list a:focus-visible{color:var(--indigo-ink)}
.tocx__list b{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--ink-faint);
  transition:color .35s var(--ease);
}
.tocx__list a:hover b{color:var(--indigo-ink)}
.tocx__list span{
  font-family:var(--display-face);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.25;
}
@media (min-width:881px){
  /* Por filas el índice se leía 01,03,05,07 en la columna izquierda.
     Es una secuencia: tiene que bajar 01-04 y seguir en 05-07. */
  .tocx__list{
    grid-auto-flow:column;grid-template-rows:repeat(4,auto);
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1.6rem,4vw,3.5rem);
  }
  .tocx__list li:last-child a{border-bottom:0}
  .tocx__list li:nth-child(4) a,.tocx__list li:nth-child(7) a{border-bottom:1px solid var(--line)}
  .tocx>summary{pointer-events:none}          /* en escritorio no se pliega */
  .tocx>summary i{display:none}
}

/* ── About · las dos frases que funcionan como hitos ──────────
   «Reservaría bastante aire para las dos frases que funcionan
   como hitos», y sólo alrededor de ellas: los párrafos siguen
   con su interlineado normal. */
.pullq--mile{
  margin:clamp(2rem,5vh,3.4rem) 0;padding:0;border:0;
  font-family:var(--display-face);font-weight:500;
  font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.18;letter-spacing:-.03em;
  color:var(--indigo-ink);max-width:24em;
}
.pullq--mile::before{
  content:"";display:block;width:2.4rem;height:1px;background:var(--line);
  margin-bottom:clamp(.9rem,2.2vh,1.3rem);
}

/* El cierre del capítulo 05 va a una sola columna: .lifegrid .prose
   monta dos columnas y con una sola pieza dentro la mitad derecha
   quedaba en blanco. */
.prose--single{max-width:46rem;columns:auto}
.lifewide+.wrap .lifeclose,.lifewide~.wrap .prose--single .lifeclose{margin-top:clamp(1rem,2.4vh,1.6rem)}

/* ── Journal · ritmo de las entradas ──────────────────────────
   «Reducir aproximadamente 40–50 % el espacio superior antes de
   cada entrada; reducir el espacio entre imagen y siguiente
   separador; mantener el separador horizontal; hacer que la
   siguiente entrada empiece a insinuarse poco después de
   terminar la anterior.» El separador se queda: es lo único que
   el documento pide conservar tal cual. El punto 9 traslada esto
   a escritorio «aunque con menor intensidad». */
@media (max-width:880px){
  .entry>a{padding:clamp(.9rem,2.2vh,1.5rem) 0}     /* −45 % */
  .entry__more{padding-top:.7rem}
  .entries{gap:0}
  .quietblock{padding-top:clamp(2.2rem,5.5vh,3.4rem);padding-bottom:clamp(2.6rem,6.5vh,4rem)}
}
@media (min-width:881px){
  .entry>a{padding:clamp(1.2rem,3.2vh,2rem) 0}      /* −25 % */
  .quietblock{padding-top:clamp(2.8rem,7vh,4.5rem);padding-bottom:clamp(3rem,7.5vh,5rem)}
}

/* ── El resplandor del retrato se salía por la derecha ────────
   `.portrait::after` sangra un −8% a cada lado. En la Home, a
   390px de ancho la foto mide 342, así que el −8% son 27px y el
   canalillo sólo 24: 3px de scroll horizontal en móvil, y otro
   tanto en tableta. No lo ha traído la revisión de densidad —
   estaba antes— pero se ve aquí, así que se arregla aquí.
   El −4% cabe en el canalillo en los dos anchos y el desenfoque
   de 20px deja el degradado igual de suave. */
@media (max-width:980px){
  .portrait::after{inset:auto -4% -6% -4%}
}

/* ══════════════════════════════════════════════════════════════
   PUNTO 9 — lo que el móvil enseñó, llevado al escritorio
   ─────────────────────────────────────────────────────────────
   «No se trata de trasladar a Desktop todas las compactaciones
   realizadas para Mobile. Desktop puede —y debe— conservar más
   aire.» Así que aquí sólo está lo que el punto 9 nombra una por
   una; el resto del recorte de escritorio ya iba en cada sección.
   ══════════════════════════════════════════════════════════ */

/* ── Impact · «menos distancia entre métricas y agrupación
      visual más evidente» ─────────────────────────────────────
   Las dos tiras tenían rejillas distintas: la de arriba era
   auto-fit y la de abajo cuatro columnas fijas, así que las
   columnas no caían en el mismo sitio y las ocho cifras se leían
   como un campo suelto. Con la misma rejilla son dos filas de una
   tabla, que es la agrupación que se pide. Dentro de cada grupo,
   menos distancia; entre grupos, más. */
@media (min-width:1100px){
  /* Acotado a #impact a propósito: `.evidence` sin acotar llevaba
     a cuatro columnas también la tira de About, donde sólo hay una
     entrada, y «Working across borders» se quedaba en un cuarto de
     ancho partiéndose en más líneas. */
  #impact .bigfig,#impact .evidence{
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:clamp(1.4rem,2.6vw,2.4rem);
  }
  #impact .evidence{margin-top:clamp(1.6rem,3.6vh,2.6rem)}
}
@media (min-width:881px){
  /* el titular estaba a 147px de su primera cifra */
  #impact .chapter-head{margin-bottom:clamp(1.6rem,3.4vh,2.6rem)}
}

/* ── Craft · «reduciría espacios muertos alrededor de la foto,
      el relato y el CTA» ─────────────────────────────────────── */
@media (min-width:881px){
  .page--craft .story-band{padding-bottom:clamp(2.6rem,6vh,4rem)}
}

/* ── Journal · la raya de abajo sólo cubría una columna ───────
   `.entry:last-child` pone el borde inferior, y en escritorio las
   entradas van en rejilla: la raya aparecía bajo la segunda
   columna y no bajo la primera, que parece un fallo. La lleva el
   contenedor, que abarca las dos. Y se recorta el hueco entre las
   fotos y el final de la sección, una de esas «zonas que parecen
   contenido ausente» contra las que avisa el documento. */
.entries{border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
@media (min-width:881px){
  .journal-band{padding-bottom:clamp(2.6rem,6vh,4rem)}
}

/* ══════════════════════════════════════════════════════════════
   JOURNAL — archivo y entradas de plantilla (Priority 2)
   Las entradas dejaron de escribirse a mano, así que estas piezas
   las pone la plantilla y no existían todavía en la hoja.
   ══════════════════════════════════════════════════════════ */

/* El «leer más» al pie del índice, cuando hay más de las que caben. */
.entries__more{margin-top:clamp(1.4rem,3.4vh,2.2rem)}

/* El archivo, agrupado por año. El año es una señal, no un titular:
   va pequeño y en versales, para que los que manden sean los
   títulos de las entradas. */
.archyear+.archyear{margin-top:clamp(2.2rem,5.5vh,3.6rem)}
.archyear__n{
  font-size:.74rem;font-weight:600;letter-spacing:.18em;
  color:var(--ink-faint);margin:0 0 .6rem;
}

/* Categoría y fecha bajo el titular de una entrada. */
.entry-head__meta{
  margin-top:clamp(1rem,2.6vh,1.5rem);
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(248,245,251,.58);
}
.entry-head__meta span{color:var(--turquoise)}

/* El separador que se escribe con --- en el editor. */
.prose__rule{
  border:0;border-top:1px solid var(--line);
  margin:clamp(2rem,5vh,3rem) 0;
}

/* El retrato del relato de Craft pasó de un fichero en blanco y negro
   vertical (853×1066) a la toma en color, que es apaisada (1280×853).
   El hueco es 4:5, así que una apaisada se recorta por los lados hasta
   dejar sólo el 53% del ancho. Bajándolo a 4:4,3 cabe la escena —el
   libro, los cojines, la pared de brezo— sin dejar de ser vertical,
   que es lo que pide la columna. */
@media (min-width:881px){
  .howgrid .shotband{aspect-ratio:4/4.3}
}