/* ══════════════════════════════════════════════════════════════════════════
   OLIVARES DEL CASTILLO — LEGAL & COMPLIANCE
   Architecture ported from the Northetica system: surface-context bands,
   strictly rectangular geometry, one easing pair, cool neutrals only.
   Type is this firm's own: Spectral (voice) + Archivo (structure).
   No numbering furniture. No gold. No pastel.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · PRIMITIVES — never referenced directly by components ───────────── */
:root{
  /* Sampled from the firm's logo file. */
  --brand-navy:#223F65; --brand-ink:#212121; --brand-blue:#005E8B;

  --oc-navy-950:#0A1018; --oc-navy-900:#101D2F; --oc-navy-800:#18304C;
  --oc-navy-700:#223F65; --oc-navy-600:#2D5384; --oc-navy-500:#3C6BA6;
  --oc-navy-400:#6B8CB8; --oc-navy-300:#A3B8D1; --oc-navy-200:#CBD9E8;
  --oc-navy-100:#E6EDF5;

  --oc-blue-700:#004A6E; --oc-blue-600:#005E8B; --oc-blue-500:#0077AF;
  --oc-blue-400:#2A93C8; --oc-blue-300:#63B5DE; --oc-blue-200:#A6D6EF;
  --oc-blue-100:#DDF0FA;

  /* Cool neutrals only. Never warm, never beige. */
  --oc-grey-0:#FFFFFF; --oc-grey-50:#F7F9FB; --oc-grey-100:#F0F4F8;
  --oc-grey-200:#E2E9F0; --oc-grey-300:#CBD6E1; --oc-grey-400:#9FADBC;
  --oc-grey-500:#5C6B7A; --oc-grey-600:#46545F;
}

/* ── 2 · SEMANTIC TOKENS — light ───────────────────────────────────────── */
:root{
  --bg:var(--oc-grey-0); --bg-sunken:var(--oc-grey-50);
  --fg:var(--oc-navy-800); --fg-strong:var(--oc-navy-900);
  --fg-muted:var(--oc-grey-600); --fg-subtle:var(--oc-grey-500);
  --fg-on-accent:var(--oc-grey-0);

  --line:color-mix(in oklab,var(--oc-navy-800) 13%,transparent);
  --line-soft:color-mix(in oklab,var(--oc-navy-800) 7%,transparent);
  --line-strong:color-mix(in oklab,var(--oc-navy-800) 28%,transparent);

  --accent:var(--oc-blue-600);          /* 7.07:1 on white */
  --accent-hover:var(--oc-blue-700);
  --accent-fg:var(--oc-blue-600);
  --focus:var(--oc-blue-500);

  /* Bands that keep their identity in both themes */
  --plate:var(--oc-navy-700); --plate-fg:var(--oc-grey-0);
  --azure:var(--oc-blue-700); --azure-fg:var(--oc-grey-0);
  --ink:#08090B;
  --paper:var(--oc-grey-0);

  --graticule:color-mix(in oklab,var(--oc-navy-800) 6%,transparent);

  --shadow-sm:0 1px 2px -1px color-mix(in oklab,var(--oc-navy-900) 9%,transparent),
              0 2px 6px -2px color-mix(in oklab,var(--oc-navy-900) 10%,transparent);
  --shadow-md:0 2px 4px -2px color-mix(in oklab,var(--oc-navy-900) 9%,transparent),
              0 8px 20px -8px color-mix(in oklab,var(--oc-navy-900) 15%,transparent);

  --serif:'Spectral',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;

  --ease-authority:cubic-bezier(.16,1,.3,1);
  --ease-precise:cubic-bezier(.65,0,.35,1);

  --container:1280px;
  --rail:clamp(20px,5vw,64px);
  color-scheme:light;
}

/* ── 3 · SEMANTIC TOKENS — dark ────────────────────────────────────────── */
:root[data-theme="dark"]{
  /* Black ground, navy only in the bands. A navy page with navy bands had
     nothing to push against; black gives the plates something to be. */
  --bg:#08090B; --bg-sunken:#030405;
  --fg:#DDE5EE; --fg-strong:#FFFFFF; --fg-muted:#9AA9BA; --fg-subtle:#7C8B9B;
  --fg-on-accent:var(--oc-navy-950);
  --line:color-mix(in oklab,#fff 14%,transparent);
  --line-soft:color-mix(in oklab,#fff 8%,transparent);
  --line-strong:color-mix(in oklab,#fff 28%,transparent);
  --accent:var(--oc-blue-400); --accent-hover:var(--oc-blue-300); --accent-fg:var(--oc-blue-300);
  --focus:var(--oc-blue-300);
  --plate:var(--oc-navy-800); --ink:#000000;
  --graticule:color-mix(in oklab,#fff 5%,transparent);
  --shadow-sm:0 1px 2px -1px rgb(0 0 0/.5),0 2px 6px -2px rgb(0 0 0/.42);
  --shadow-md:0 2px 4px -2px rgb(0 0 0/.5),0 8px 20px -8px rgb(0 0 0/.55);
  color-scheme:dark;
}

/* ── 4 · SURFACE CONTEXT ────────────────────────────────────────────────
   A band that paints its own background MUST re-point every foreground
   token, or headings and hairlines keep resolving the page theme and
   quietly lose contrast. This is the contract.
   ──────────────────────────────────────────────────────────────────────── */
.surface-dark{
  --fg:#DCE7F2; --fg-strong:#FFFFFF; --fg-muted:#A6BACE;
  --fg-subtle:#A9BACB;   /* 5.38:1 on the navy plate; #8698AA measured 3.6:1 */
  --fg-on-accent:var(--oc-navy-950);
  --line:color-mix(in oklab,#fff 16%,transparent);
  --line-soft:color-mix(in oklab,#fff 9%,transparent);
  --line-strong:color-mix(in oklab,#fff 32%,transparent);
  --accent:var(--oc-blue-300); --accent-fg:var(--oc-blue-300); --accent-hover:var(--oc-blue-200);
  --focus:var(--oc-blue-300);
  --graticule:color-mix(in oklab,#fff 7%,transparent);
  color:var(--fg);
}
.surface-azure{
  --fg:#FFFFFF; --fg-strong:#FFFFFF;
  --fg-muted:color-mix(in oklab,#fff 90%,transparent);
  --fg-subtle:color-mix(in oklab,#fff 78%,transparent);
  --fg-on-accent:var(--oc-blue-700);
  --line:color-mix(in oklab,#fff 30%,transparent);
  --line-soft:color-mix(in oklab,#fff 18%,transparent);
  --line-strong:color-mix(in oklab,#fff 58%,transparent);
  --accent:#FFFFFF; --accent-fg:#FFFFFF; --accent-hover:color-mix(in oklab,#fff 88%,transparent);
  --focus:#FFFFFF;
  --graticule:color-mix(in oklab,#fff 12%,transparent);
  color:var(--fg);
}
.surface-light{
  --fg:var(--oc-navy-800); --fg-strong:var(--oc-navy-900);
  --fg-muted:var(--oc-grey-600); --fg-subtle:var(--oc-grey-500);
  --fg-on-accent:var(--oc-grey-0);
  --line:color-mix(in oklab,var(--oc-navy-800) 13%,transparent);
  --line-strong:color-mix(in oklab,var(--oc-navy-800) 28%,transparent);
  --accent:var(--oc-blue-600); --accent-fg:var(--oc-blue-600);
  --graticule:color-mix(in oklab,var(--oc-navy-800) 6%,transparent);
  color:var(--fg);
}

/* ── 5 · BASE ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;border-color:var(--line)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
  transition:background-color .45s var(--ease-authority),color .45s var(--ease-authority)}
h1,h2,h3,h4{margin:0;font-family:var(--serif);color:var(--fg-strong)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
::selection{background:color-mix(in oklab,var(--accent) 26%,transparent);color:var(--fg-strong)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-sunken)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--bg-sunken)}
::-webkit-scrollbar-thumb:hover{background:var(--fg-subtle)}
.tnum{font-variant-numeric:tabular-nums}

/* Strictly rectangular. Nothing on this site is rounded. */
/* min-width:0 is load-bearing, not tidying. The container is a grid item
   inside .band, so its automatic minimum size is its own max-content width.
   The blog rail is 1770px of max-content, which dragged the container out to
   1280px inside a 380px phone viewport — the band's overflow:hidden then hid
   the excess, so the rail simply could not be scrolled to its end and every
   other child of that band was laid out at desktop width off-screen. */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--rail);min-width:0}
.band{position:relative;overflow:hidden}
.band--plate{background:var(--plate)}
.band--azure{background:var(--azure)}
.band--ink{background:var(--ink)}
.band--paper{background:var(--paper)}
.band--sunken{background:var(--bg-sunken)}
/* The brand navy as a full band — the page was carrying two black slabs and
   only one navy one, which read as a black site with a navy accident. */
.band--navy{background:var(--oc-navy-700)}
/* Navy carried all the way down rather than a second slab of pure black —
   the Áreas band keeps black as the page's one hard statement. */
.band--navy-deep{background:var(--oc-navy-900)}
:root[data-theme="dark"] .band--navy-deep{background:var(--oc-navy-950)}
:root[data-theme="dark"] .band--navy{background:var(--oc-navy-800)}
.pad{padding-block:clamp(72px,10vw,152px)}
.pad-sm{padding-block:clamp(52px,7vw,96px)}

.graticule{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--graticule) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--graticule) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 0%,transparent 78%)}

/* ── 6 · TYPE ROLES — no arbitrary sizes ───────────────────────────────── */
.t-display{font-family:var(--serif);font-size:clamp(2.6rem,6.2vw,5.25rem);line-height:1.02;
  letter-spacing:-.032em;font-weight:500}
.t-h1{font-family:var(--serif);font-size:clamp(2rem,4.2vw,3.375rem);line-height:1.08;
  letter-spacing:-.028em;font-weight:500}
.t-h2{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.375rem);line-height:1.16;
  letter-spacing:-.024em;font-weight:500}
.t-h3{font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.3;
  letter-spacing:-.016em;font-weight:600}
.t-lead{font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.62;letter-spacing:-.011em;
  color:var(--fg-muted);font-weight:400;font-family:var(--sans)}
.t-body{font-size:1rem;line-height:1.72;letter-spacing:-.005em}
.t-small{font-size:.875rem;line-height:1.62}
.t-label{font-family:var(--sans);font-size:.6875rem;line-height:1;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600}
.t-figure{font-family:var(--serif);font-size:clamp(3rem,7vw,5.5rem);line-height:.94;
  letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums}
.t-quote{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.34;
  letter-spacing:-.022em;font-weight:400}
.balance{text-wrap:balance} .pretty{text-wrap:pretty}
.muted{color:var(--fg-muted)} .subtle{color:var(--fg-subtle)}
.accent{color:var(--accent-fg)}


/* ── 9 · MOTION SYSTEM ─────────────────────────────────────────────────────
   Two curves only. Reveals fire once. Content fails visible: if the observer
   never runs, everything is still readable.
   ──────────────────────────────────────────────────────────────────────── */
[data-rv]{will-change:transform,opacity}
.js [data-rv="up"]{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease-authority),transform .75s var(--ease-authority)}
.js [data-rv="left"]{opacity:0;transform:translateX(-46px);
  transition:opacity 1s var(--ease-authority),transform 1s var(--ease-authority)}
.js [data-rv="right"]{opacity:0;transform:translateX(46px);
  transition:opacity 1s var(--ease-authority),transform 1s var(--ease-authority)}
.js [data-rv="blur"]{opacity:0;filter:blur(14px);transform:translateY(18px);
  transition:opacity 1s var(--ease-authority),filter 1s var(--ease-authority),
             transform 1s var(--ease-authority)}
[data-rv].in{opacity:1;transform:none;filter:none}

/* line-mask headline */
.lines .ln{display:block;overflow:hidden;padding-bottom:.08em}
.js .lines .ln>span{display:block;transform:translateY(112%);
  transition:transform 1.1s var(--ease-authority)}
.lines.in .ln>span{transform:none}

/* rule that draws itself */
.rule{height:1px;width:100%;background:var(--line-strong);transform:scaleX(1);
  transform-origin:left;transition:transform 1.1s var(--ease-authority)}
.js .rule{transform:scaleX(0)}
.rule.in{transform:scaleX(1)}
.rule--accent{background:var(--accent)}

/* image clip-wipe + scale settle */
.wipe{position:relative;overflow:hidden}
.js .wipe>*{clip-path:inset(100% 0 0 0);transform:scale(1.14);
  transition:clip-path 1.15s var(--ease-authority),transform 1.6s var(--ease-authority)}
.wipe.in>*{clip-path:inset(0% 0 0 0);transform:none}

/* words fade in one by one */
.words span{display:inline-block;white-space:pre;}
.js .words span{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease-authority),transform .5s var(--ease-authority)}
.words.in span{opacity:1;transform:none}

/* vertical cut: two halves slide apart, seam draws down */
.cut{position:relative;display:grid;gap:34px}
@media(min-width:860px){.cut{grid-template-columns:1fr 1fr;gap:64px}}
.cut__seam{display:none}
@media(min-width:860px){.cut__seam{display:block;position:absolute;inset-block:0;left:50%;width:1px;
  background:var(--accent);transform-origin:top;
  transition:transform .9s var(--ease-authority)}
  .js .cut__seam{transform:scaleY(0)}
  .cut.in .cut__seam{transform:scaleY(1)}}

/* sticky stack */
.stack{position:relative}
.stack__item{position:sticky;will-change:transform}
.stack__card{background:var(--bg);border:1px solid var(--line);padding:clamp(26px,4vw,48px);
  box-shadow:var(--shadow-sm);transform-origin:top center;
  display:grid;gap:14px;align-content:start}
:root[data-theme="dark"] .stack__card{background:#101216}

/* parallax */
.plx{will-change:transform}



/* ── LOGOTYPE — the firm's real artwork, re-coloured per surface ───────── */
:root{--logo-arc:#3A3A39;--logo-accent:#223F65;--logo-word:#212121;--logo-sub:#223F65}
:root[data-theme="dark"]{--logo-arc:#9FB0C2;--logo-accent:#63B5DE;--logo-word:#FFFFFF;--logo-sub:#A6BACE}
.surface-dark,.hdr.on-dark{--logo-arc:#A9BACB;--logo-accent:#63B5DE;--logo-word:#FFFFFF;--logo-sub:#BFD2E4}
.surface-azure{--logo-arc:#FFFFFF;--logo-accent:#DDF0FA;--logo-word:#FFFFFF;--logo-sub:#DDF0FA}
/* The official lockup is a large-format asset: its wordmark is only 26 of the
   artwork's 132 vertical units, so at header scale the type renders under 6px.
   This is the compact variant — same paths, same colours, mark and type sized
   independently so the name stays legible in a 80px bar. */
.lk{display:inline-flex;align-items:center;gap:12px;line-height:0}
.lk__mark{height:34px;width:auto;aspect-ratio:129.3/129.3;display:block;flex:none}
.lk__type{display:grid;gap:6px;line-height:0}
.lk__word{height:13px;width:auto;aspect-ratio:493.4/26.1;display:block}
.lk__sub{height:7px;width:auto;aspect-ratio:295.1/13.6;display:block}
.lk .lg-arc{fill:var(--logo-arc)} .lk .lg-accent{fill:var(--logo-accent)}
.lk .lg-word{fill:var(--logo-word)} .lk .lg-sub{fill:var(--logo-sub)}
.lk path{transition:fill .4s var(--ease-authority)}

/* ── HEADER — nav left, logotype centred, actions right ───────────────── */
.hdr{position:fixed;inset-inline:0;top:0;z-index:50;padding:0 var(--rail);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease-authority),border-color .4s var(--ease-authority)}
.hdr.stuck{background:color-mix(in oklab,var(--bg) 86%,transparent);border-bottom-color:var(--line);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%)}
/* Over a black or navy band the header must adopt that band's foregrounds,
   or its navy links sit on near-black and vanish. */
.hdr.on-dark{--fg:#DCE7F2;--fg-strong:#FFFFFF;--fg-muted:#A6BACE;--fg-subtle:#A9BACB;
  --line:color-mix(in oklab,#fff 34%,transparent);--line-strong:color-mix(in oklab,#fff 52%,transparent);
  --accent-fg:#63B5DE;--accent:#63B5DE;color:var(--fg)}
.hdr.on-dark.stuck{background:color-mix(in oklab,#0B1016 80%,transparent);
  border-bottom-color:color-mix(in oklab,#fff 14%,transparent)}
.hdr.on-dark .btn--accent{background:#fff;color:#0B1016}
/* Over a photograph the controls need their own ground, not just a hairline. */
.hdr.on-dark:not(.stuck) .ico{background:rgba(10,16,24,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hdr.on-dark .btn--accent:hover{background:#63B5DE;color:#06121C}
.hdr__in{max-width:1560px;margin-inline:auto;display:flex;align-items:center;height:80px;position:relative}
.hdr__nav{display:none;align-items:center;gap:30px}
@media(min-width:1140px){.hdr__nav{display:flex}}
.hdr__nav a{position:relative;color:var(--fg);font-size:.875rem;font-weight:500;padding-block:8px;
  transition:color .22s var(--ease-authority)}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--ease-precise)}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.hdr__logo .lk__mark{height:34px}
.hdr__logo .lk__word{height:13px}
.hdr__logo .lk__sub{height:6.5px}
.hdr__end{display:flex;align-items:center;gap:10px;margin-left:auto}
.ico{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);
  color:var(--fg-muted);transition:border-color .22s var(--ease-authority),color .22s var(--ease-authority)}
.ico:hover{border-color:var(--accent);color:var(--accent-fg)}
.ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ico--txt{width:auto;padding-inline:11px;font-size:.6875rem;letter-spacing:.1em;font-weight:600}
.sun,.moon{transform-box:fill-box;transform-origin:center;
  transition:transform .5s var(--ease-authority),opacity .26s}
:root[data-theme="light"] .moon{transform:rotate(-80deg) scale(.4);opacity:0}
:root[data-theme="dark"] .sun{transform:rotate(80deg) scale(.4);opacity:0}
.hdr__burger{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:40px;height:40px;border:1px solid var(--line);color:var(--fg);
  transition:border-color .22s var(--ease-authority)}
.hdr__burger:hover{border-color:var(--accent)}
@media(min-width:1140px){.hdr__burger{display:none}}
/* Two rules, not three: the wordmark is already centred between them, and a
   third bar in a 40px box reads as noise at this weight. They rotate into an
   X when the drawer is open, so the control states what it will do. */
.hdr__burger span{display:block;width:18px;height:1.5px;background:currentColor;
  transition:transform .32s var(--ease-authority),opacity .2s var(--ease-authority)}
.hdr__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media(max-width:1139px){
  .hdr__end .ico--txt,.hdr__end .btn{display:none}
  .hdr__in{height:66px}
  /* The strapline is hidden here, so the mark is centred against the wordmark
     alone; at 27px against an 11px word it towered over it. */
  .hdr__logo .lk{gap:9px;align-items:center}
  .hdr__logo .lk__mark{height:21px}
  .hdr__logo .lk__word{height:11px}
  .hdr__logo .lk__sub{display:none}
}
@media(max-width:420px){.hdr__logo{left:16px;transform:translateY(-50%)}
  .hdr__logo .lk__mark{height:18px} .hdr__logo .lk__word{height:9.5px}}

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);
  font-size:.8125rem;font-weight:600;white-space:nowrap;height:46px;padding-inline:22px;
  transition:transform .25s var(--ease-authority),background-color .25s var(--ease-authority),
             color .25s var(--ease-authority),border-color .25s var(--ease-authority)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1;
  transition:transform .3s var(--ease-authority)}
.btn:hover svg{transform:translateX(4px)}
.btn--accent{background:var(--ink);color:#fff}
.btn--accent:hover{background:var(--accent);transform:translateY(-1px)}
.btn--outline{border:1px solid var(--line-strong);color:var(--fg-strong)}
.btn--outline:hover{border-color:var(--fg-strong);background:var(--fg-strong);color:var(--bg)}
.btn--inverse{background:#fff;color:#0B1016}
.btn--inverse:hover{transform:translateY(-1px)}
.btn--sm{height:38px;padding-inline:16px;font-size:.75rem}

/* ── FULL-HEIGHT SECTIONS ─────────────────────────────────────────────────
   svh, not vh: on mobile the browser chrome makes 100vh taller than the
   visible area, so a "full height" section is cropped on first paint.
   min-height, not height: content longer than the viewport still grows. */
.vh{min-height:100svh;display:grid;align-content:center}
@supports not (min-height:100svh){.vh{min-height:100vh}}
.vh > .container{width:100%}
/* On a phone a forced viewport is mostly empty ground: the content is
   narrower, so it is shorter, and the section ends up padding rather than
   composition. Below the breakpoint the content sets the height and the
   padding does the breathing. */
@media(max-width:860px){
  .vh{min-height:0;align-content:start}
  .pad{padding-block:clamp(64px,13vw,92px)}
}

/* ── CINEMATIC VIDEO HERO ─────────────────────────────────────────────── */
.vhero{position:relative;min-height:100svh;display:grid;align-content:end;overflow:hidden;
  background:#08090B;isolation:isolate}
@supports not (min-height:100svh){.vhero{min-height:100vh}}
.vhero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#08090B}

/* ── KEN BURNS SLIDESHOW ──────────────────────────────────────────────────
   Three stills instead of a video: ~256KB of WebP against a multi-megabyte
   clip, nothing to encode, and no autoplay policy to lose to.

   ── WHY THIS IS NOT A CROSSFADE ──────────────────────────────────────────
   The obvious build — fade one out while fading the next in — dips. Two
   images at 50% opacity do not sum to one opaque image: you see the dark
   ground through both, and the seam reads as a flicker exactly where it is
   most visible. Shaping the two curves to compensate is a fiddle that never
   quite lands, because the correction depends on the pixels.

   So nothing ever fades OUT. The outgoing slide holds full opacity and the
   incoming one fades in ON TOP of it, which is what `z-index` is doing in the
   keyframes: a slide claims the top layer for its fade-in, hands it back once
   it is fully opaque, and only then — hidden behind whatever now covers it —
   snaps to zero. At no instant is the stack less than fully opaque, so there
   is no dip to be seen.

   ── AND THE TIMING IS LINEAR ─────────────────────────────────────────────
   `linear`, not an ease: the pan must run at a constant crawl or it visibly
   accelerates and decelerates inside a shot, which is the one thing a slow
   architectural move must never do. The opacity shape comes from where the
   keyframes sit, not from the curve.

   Each slide owns a third of the cycle; the crossfade is the 10% overlap at
   the head of each turn. Delays are negative so all three are already mid-
   cycle at load — the first slide is fully up on the first frame rather than
   fading in from black. ──────────────────────────────────────────────────── */
.kb{position:absolute;inset:0}
.kb picture,.kb img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover}
.kb__s{position:absolute;inset:0;opacity:0;z-index:1;will-change:transform,opacity;
  animation:kb var(--kb-cycle,30s) linear infinite}
.kb__s img{filter:grayscale(1) contrast(1.08) brightness(.92)
    sepia(.32) hue-rotate(178deg) saturate(2.3)}
/* 30s cycle, three slides: each takes the screen 10s after the one before. */
.kb__s:nth-child(1){animation-delay:0s;   --kx:-1.8%; --ky:-1.2%}
.kb__s:nth-child(2){animation-delay:-20s; --kx: 2.0%; --ky: 1.0%}
.kb__s:nth-child(3){animation-delay:-10s; --kx:-1.2%; --ky: 1.6%}
@keyframes kb{
  /* fading in, on top */
  0%     {opacity:0; z-index:3; transform:scale(1.01) translate(0,0)}
  10%    {opacity:1; z-index:3}
  /* fully up, still the top layer, panning */
  33.32% {opacity:1; z-index:3}
  /* the next slide takes the top and fades in over this one, which holds */
  33.33% {opacity:1; z-index:1}
  43.33% {opacity:1; z-index:1; transform:scale(1.09) translate(var(--kx),var(--ky))}
  /* now completely covered — the drop to zero and the transform reset are
     both invisible, which is the only reason they can be instant */
  43.34% {opacity:0; z-index:1; transform:scale(1.01) translate(0,0)}
  100%   {opacity:0; z-index:1; transform:scale(1.01) translate(0,0)}
}
/* Navy duotone over the whole stack, so the three slides share one hue. */
.vhero__media::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--oc-navy-700);mix-blend-mode:color;opacity:.92}
@media (prefers-reduced-motion:reduce){
  .kb__s{animation:none;opacity:0;transform:none}
  .kb__s:nth-child(1){opacity:1;z-index:3}
}
.vhero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,29,47,.32) 0%,rgba(16,29,47,.10) 30%,rgba(16,29,47,.58) 62%,rgba(16,29,47,.92) 100%)}
.vhero__in{position:relative;z-index:2;padding-block:clamp(56px,11vh,120px)}
.vhero__h{color:#fff;max-width:18ch}
.vhero__p{color:rgba(255,255,255,.86);max-width:52ch;margin-top:24px}
.vhero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* ── FOOTER — banner, columns, subscribe ──────────────────────────────── */
.fbanner{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.fbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:grayscale(1) contrast(1.04) brightness(.46)}
.fbanner::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--oc-navy-700);mix-blend-mode:color;opacity:.92}
.fbanner::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(10,16,24,.9),rgba(16,29,47,.52))}
.fbanner__in{position:relative;z-index:3;padding-block:clamp(56px,9vw,110px);display:grid;gap:34px}
@media(min-width:900px){.fbanner__in{grid-template-columns:1.1fr 1fr;align-items:center;gap:60px}}
.sub{display:flex;gap:0;max-width:440px;border-bottom:1px solid rgba(255,255,255,.4)}
.sub input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-family:var(--serif);
  font-size:1.0625rem;padding:13px 2px;outline:none}
.sub input::placeholder{color:rgba(255,255,255,.55);font-family:var(--sans);font-size:.9375rem}
.sub:focus-within{border-bottom-color:#fff}
.sub button{flex:none;color:#fff;display:grid;place-items:center;width:46px}
.sub button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .3s var(--ease-authority)}
.sub button:hover svg{transform:translateX(4px)}
.sub__note{margin-top:12px;font-size:.75rem;color:rgba(255,255,255,.62);max-width:44ch}
.sub__note a{text-decoration:underline;text-underline-offset:3px}
.fcols{display:grid;gap:40px 32px;padding-block:clamp(48px,6vw,76px)}
@media(min-width:640px){.fcols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fcols{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);max-width:1120px;margin-inline:auto;width:100%}}
.fcols .lk{gap:16px}
.fcols .lk__mark{height:48px}
.fcols .lk__word{height:18px}
.fcols .lk__sub{height:9px}
.fcols .lbl{font-size:.9rem;font-weight:600;color:var(--fg-subtle);font-family:var(--sans);
  letter-spacing:.01em}
.fcols ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:.9375rem}
.fcols a{color:var(--fg-muted);transition:color .22s var(--ease-authority)}
.fcols a:hover{color:var(--fg-strong)}
.flegal{padding-block:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:.8125rem;color:var(--fg-subtle)}
/* ── 10 · SECTION FURNITURE ────────────────────────────────────────────── */
.sec-head{display:grid;gap:18px;max-width:62ch}

/* Statistics — the Legora block: hairline above, figure left, note right */
.stats{display:grid;gap:clamp(40px,6vw,80px)}
@media(min-width:1000px){.stats{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.stat{display:grid;grid-template-columns:auto minmax(0,15rem);gap:clamp(20px,4vw,56px);
  align-items:start;padding-top:22px;border-top:1px solid var(--line)}
.stat + .stat{margin-top:clamp(36px,5vw,64px)}
.stat__n{font-family:var(--sans);font-weight:300;font-size:clamp(3.2rem,8vw,7rem);line-height:.86;
  letter-spacing:-.045em;color:var(--fg-strong);font-variant-numeric:tabular-nums;
  line-height:.88;white-space:nowrap}
.stat__d{font-size:.9375rem;line-height:1.5;color:var(--fg-muted);padding-top:8px}
/* The number column is `auto`, so "6" and "+1000" reserve different widths and
   every description started at its own left edge — three ragged beginnings
   down the column. A fixed measure for the numerals (they are tabular, so the
   widest is predictable) puts all three descriptions on one line. */
@media(max-width:860px){
  /* `ch` on the grid resolves against the GRID's font, not the 40px numerals
     inside it, so a column sized that way was a third of what "+1000" needs
     and the number ran straight through its own description. The reservation
     belongs on the numeral, in the numeral's own font: the digits are tabular,
     so one min-width fits the widest value and every row gets the same first
     column — which is what puts the three descriptions on one left edge. It
     also stops the count-up from shoving the text sideways as it climbs from
     0 to 1000. */
  .stat{grid-template-columns:max-content minmax(0,1fr);gap:16px;align-items:start}
  .stat__n{font-size:clamp(2rem,10vw,3.1rem);min-width:5ch;white-space:nowrap;display:block}
  .stat__d{padding-top:4px}
}

/* Black band card grid — the Legora credential row */
.cards{display:grid;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
/* Phones get the six areas as two columns of three, scrolled sideways, with
   the next column deliberately left 20% in frame: the cut-off card is the
   only honest affordance here — a row that ends flush at the edge reads as
   the end of the list, and nobody scrolls a list they think has ended.

   Snapping is `proximity`, not `mandatory`. Two 80% columns are 160% wide, so
   the furthest the track can scroll is 60% — the second column's own start
   position, at 80%, is past that and can never be reached. `mandatory` would
   keep throwing the reader back to the first column; `proximity` declines to
   enforce a stop it cannot honour and simply lets the row rest at its end. */
@media(max-width:679px){
  .cards{grid-auto-flow:column;grid-template-rows:repeat(3,1fr);grid-auto-columns:80%;
    min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .cards > *{scroll-snap-align:start}
}
@media(min-width:680px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{padding:clamp(26px,3vw,38px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;min-height:260px;position:relative;
  overflow:hidden;isolation:isolate;
  transition:background-color .35s var(--ease-authority)}
.card:hover{background:color-mix(in oklab,#fff 4%,transparent)}
/* The card was an <article> whose only link was the "Ver más" line, so on a
   phone the entire card was dead except for a 60px strip of text. The link
   stretches to cover the card instead of the card becoming a link: one entry
   in the accessibility tree, still named "Ver más <area>", and the heading and
   copy stay real elements rather than being swallowed into the link's name. */
.card{cursor:pointer}
.card .acc__more::after{content:"";position:absolute;inset:0;z-index:3}
.card .acc__more:focus-visible::after{outline:2px solid var(--accent-fg);outline-offset:-3px}

/* ── The area's own photograph, on hover ──────────────────────────────────
   The same image the area's page leads with, so the card is a window onto
   that page rather than a generic tile. It sits under two layers that never
   move: a navy `color` blend that ties it to the palette, and a scrim heavy
   enough that the copy's contrast does not depend on which photograph
   happens to be behind it. The picture brightens and settles; the wash
   does not, so the text never flickers. ─────────────────────────────────── */
.card__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  opacity:0;transform:scale(1.08);filter:grayscale(1) contrast(1.12) brightness(.62) sepia(.25) hue-rotate(178deg) saturate(2.2);
  transition:opacity .55s var(--ease-authority),transform 1.3s var(--ease-authority)}
.card__wash{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,rgba(8,12,18,.93) 0%,rgba(8,12,18,.88) 38%,
              rgba(8,12,18,.68) 72%,rgba(8,12,18,.5) 100%);
  transition:opacity .55s var(--ease-authority)}
.card:hover .card__bg,.card:focus-within .card__bg{opacity:1;transform:scale(1)}
.card:hover .card__wash,.card:focus-within .card__wash{opacity:1}
@media(hover:none){
  /* No hover to reveal it with, and a tap should open the page rather than
     paint it. The cards stay clean. */
  .card__bg,.card__wash{display:none}
}
@media (prefers-reduced-motion:reduce){
  .card__bg{transition-duration:.01ms;transform:none}
}
.card__i{width:36px;height:36px;border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;margin-top:auto;flex:none}
.card__i svg{width:15px;height:15px;stroke:var(--accent-fg);fill:none;stroke-width:1.6}
.card p{font-size:.9375rem;color:var(--fg-muted);max-width:34ch}

/* Full-bleed photographic band */
.plate-img.vh{min-height:100svh}
.plate-img{position:relative;min-height:clamp(320px,42vw,540px);overflow:hidden;background:var(--ink)}
.plate-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.02) brightness(.5)}
.plate-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--oc-navy-700);mix-blend-mode:color;opacity:.92}
.plate-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,29,47,.9) 0%,rgba(16,29,47,.62) 46%,rgba(16,29,47,.3) 100%)}
.plate-img__in{position:relative;z-index:3;display:grid;align-content:center;min-height:inherit;
  padding-block:clamp(56px,8vw,110px)}

/* Socios */
.people{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:760px){.people{grid-template-columns:repeat(3,1fr)}}
.person{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding-bottom:26px}
.person__img{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ink);margin-bottom:22px}
.person__img img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;
  filter:grayscale(1) contrast(1.05);transition:transform 1.3s var(--ease-authority),filter .6s}
.person:hover .person__img img{transform:scale(1.04);filter:grayscale(.5) contrast(1.03)}
.person__b{padding-inline:clamp(18px,2vw,28px)}
.person__r{margin-top:6px;font-size:.8125rem;color:var(--fg-muted)}
.person__g{margin-top:12px;font-size:.8125rem;color:var(--fg-subtle);padding-top:10px;
  border-top:1px solid var(--line-soft)}

.field{display:grid;gap:8px}
.field label{font-size:.75rem;font-weight:600;color:var(--fg-muted)}
.field input,.field textarea{width:100%;background:transparent;color:var(--fg-strong);border:0;
  border-bottom:1px solid var(--line-strong);padding:11px 2px;font-family:var(--serif);
  font-size:1.0625rem;outline:none;transition:border-color .3s var(--ease-authority)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-subtle);font-family:var(--sans);
  font-size:.9375rem}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.form{display:grid;gap:24px;max-width:520px}
@media(min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}}



.note{border-left:2px solid var(--accent);padding:4px 0 4px 14px;font-size:.8125rem;
  color:var(--fg-muted);max-width:54ch}
.credit{font-size:.6875rem;color:var(--fg-subtle);margin-top:10px}

@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-rv]{opacity:1!important;transform:none!important;filter:none!important}
  .lines .ln>span{transform:none!important}
  .rule{transform:scaleX(1)!important}
  .wipe>*{clip-path:none!important;transform:none!important}
  .words span{opacity:1!important;transform:none!important}
  .stack__item{position:static!important}
}


/* ── MOBILE DRAWER ────────────────────────────────────────────────────────
   Portalled to <body>, not left inside the header: the header carries
   backdrop-filter once scrolled, and backdrop-filter establishes a
   containing block for fixed descendants — a drawer rendered inside it gets
   trapped in the header's own 66px box the moment the user scrolls, while
   working perfectly at the top of the page. ──────────────────────────────── */
.drawer{position:fixed;inset:0;z-index:90;display:none}
.drawer[data-open]{display:block}
.drawer__veil{position:absolute;inset:0;background:rgba(5,7,10,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease-authority)}
.drawer[data-shown] .drawer__veil{opacity:1}
.drawer__panel{position:absolute;inset-block:0;right:0;width:min(88vw,25rem);
  background:var(--bg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .42s var(--ease-authority);
  overscroll-behavior:contain}
.drawer[data-shown] .drawer__panel{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:66px;padding-inline:20px;border-bottom:1px solid var(--line);flex:none}
.drawer__top .lk__mark{height:24px} .drawer__top .lk__word{height:10px}
.drawer__top .lk__sub{display:none}
.drawer__x{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);
  color:var(--fg);transition:border-color .2s var(--ease-authority)}
.drawer__x:hover{border-color:var(--accent)}
.drawer__x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.drawer__nav{flex:1;overflow-y:auto;padding:14px 20px 20px;display:flex;flex-direction:column}
.drawer__nav a{display:block;padding:17px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--serif);font-size:1.3rem;font-weight:500;letter-spacing:-.02em;
  color:var(--fg-strong);
  opacity:0;transform:translateX(22px);
  transition:opacity .4s var(--ease-authority),transform .45s var(--ease-authority),
             color .2s var(--ease-authority)}
.drawer[data-shown] .drawer__nav a{opacity:1;transform:none}
.drawer__nav a:hover{color:var(--accent-fg)}
.drawer__lang{display:flex;align-items:center;justify-content:space-between;
  padding:15px 0 17px;margin-bottom:16px;border-bottom:1px solid var(--line-soft);
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);
  transition:color .2s var(--ease-authority)}
.drawer__lang::after{content:"\2197";font-size:1.05em;letter-spacing:0}
.drawer__lang:hover{color:var(--accent-fg)}
.drawer__foot{flex:none;padding:18px 20px 22px;border-top:1px solid var(--line);
  display:grid;gap:14px}
.drawer__row{display:flex;gap:8px}
@media(min-width:1140px){.drawer{display:none!important}}

/* ── STAGGER ──────────────────────────────────────────────────────────────
   A container's children arrive in sequence rather than as one block. The
   delay is set per child in JS from the container's own `data-stagger`, so a
   six-card grid and a three-item list can breathe at different rates without
   two more CSS rules.

   Kept short on purpose: past about 90ms a stagger stops reading as one group
   arriving and starts reading as a queue, which is slower to take in, not
   more impressive. ──────────────────────────────────────────────────────── */
.js [data-stagger] > *{opacity:0;transform:translateY(20px);
  transition:opacity .62s var(--ease-authority),transform .62s var(--ease-authority)}
[data-stagger].in > *{opacity:1;transform:none}

/* ── MASK WIPE ────────────────────────────────────────────────────────────
   Section headings uncover from below instead of rising like everything
   else. One more arrival vocabulary, used for one job, so the page does not
   repeat a single entrance down its whole length. ─────────────────────────── */
/* THE CLIP NEVER GOES ON THE OBSERVED ELEMENT.
   An element clipped to zero area does not report as intersecting, so a
   heading that clipped itself was waiting on an observer that could never
   fire — which is how every section title on this page went invisible. The
   script wraps the heading's contents in .mask__in and the clip goes there:
   clip-path paints, it does not lay out, so the h2 keeps its full box, does
   intersect, and drives the uncover from its own `.in`. Both the wrapper and
   the hiding are behind `.js`, so with no script the heading is simply
   visible. The ancestor selector is a belt for headings that also sit inside
   a revealing block. */
.js [data-rv="mask"] > .mask__in{display:block;clip-path:inset(0 0 105% 0);
  transition:clip-path .95s var(--ease-authority) .12s}
.js [data-rv="mask"].in > .mask__in,
.js .in [data-rv="mask"] > .mask__in{clip-path:inset(0 0 -12% 0)}

@media (prefers-reduced-motion:reduce){
  [data-stagger] > *{opacity:1!important;transform:none!important}
  [data-rv="mask"] > .mask__in{clip-path:none!important}
}

/* ── FOOTER CLOSE ─────────────────────────────────────────────────────────
   The wordmark at full width, once, as the last thing on the page. It is the
   only place on the site the name is set this large, which is what makes it
   land — and it is the real artwork, not type set to look like it. Decorative
   here (the name is already in the columns above and in the header), so it is
   aria-hidden rather than read out a third time. ────────────────────────── */
/* ── THE FOOTER'S LAST SCREEN ─────────────────────────────────────────────
   One viewport holding the links, the lockup and the legal bar — not a
   viewport of empty ground with a wordmark in it. The middle row takes the
   slack, so the name centres in whatever space the other two leave. ─────── */
.fbody{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;
  align-content:stretch}
@supports not (min-height:100svh){.fbody{min-height:100vh}}
.fmark{display:grid;place-items:center;padding-block:clamp(32px,5vw,72px)}
.fmark .lk{width:100%;max-width:1120px;gap:clamp(18px,2.4vw,40px);align-items:center}
.fmark .lk__mark{height:auto;width:clamp(56px,7vw,112px);flex:none}
.fmark .lk__type{flex:1;min-width:0;gap:clamp(8px,1vw,16px)}
.fmark .lk__word,.fmark .lk__sub{height:auto;width:100%}
.fmark .lg-word{fill:var(--fg-strong);opacity:.94}
.fmark .lg-sub{fill:var(--fg-subtle)}
.fmark .lg-arc{fill:var(--fg-strong);opacity:.9}
.fmark .lg-accent{fill:var(--oc-blue-300)}
@media(max-width:860px){
  .fbody{min-height:0}
  .fmark{padding-block:44px 32px}
  /* The mark sits beside the wordmark, on its centre line, the same way it
     does in the masthead and at every other width — stacking it above was the
     one place the lockup came apart into two separate marks. It costs the
     wordmark about a fifth of its width, which at this size it can spare. */
  .fmark .lk{flex-direction:row;align-items:center;gap:13px}
  .fmark .lk__mark{width:clamp(38px,11.5vw,54px)}
  .fmark .lk__type{flex:1 1 auto;min-width:0;gap:7px}
}
.fmark svg{width:100%;height:auto;max-width:1180px;display:block}
.fmark .lg-word{fill:var(--fg-strong);opacity:.92}
.flegal{padding-block:24px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap;
  font-size:.8125rem;color:var(--fg-subtle)}
.flegal__links{display:flex;gap:22px;flex-wrap:wrap}
.flegal__links a{transition:color .22s var(--ease-authority)}
.flegal__links a:hover{color:var(--fg-strong)}
@media(max-width:640px){
  .fmark{padding-block:40px 28px}
  .flegal{flex-direction:column;align-items:flex-start;gap:14px}
}