/* Cacao Hedge — shared site styles, v1 (2026-09 relaunch, "Classical" direction).
   public/* is served with a one-year immutable cache: never edit this file in place after it ships —
   copy it to cacao.v2.css and update the <link> tags instead.
   Brand: Manual de identidad 2023 — black #000000, navy #12122B, coral #EC624A, white #FFFFFF; Averta. */

@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta Extrathin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta Thin.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta Thin Italic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta Light Italic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta Regular Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Averta"; src: url("../fonts/averta/Averta Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --white: #ffffff;
  --navy: #12122b;
  --coral: #ec624a;
  --black: #000000;
  /* navy alphas on white — ink-2 ≈ 9:1, ink-3 ≈ 5.3:1 (AA for small text), faint is decorative only */
  --ink-2: rgba(18, 18, 43, 0.74);
  --ink-3: rgba(18, 18, 43, 0.62);
  --faint: rgba(18, 18, 43, 0.4);
  --rule: rgba(18, 18, 43, 0.13);
  --white-2: rgba(255, 255, 255, 0.78);
  --white-3: rgba(255, 255, 255, 0.6);
  --sans: "Averta", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  --measure: 680px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--white); overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink-2); font: 300 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* paper grain: a tiled, navy-tinted noise behind the ink */
body { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.0706  0 0 0 0 0.0706  0 0 0 0 0.1686  0 0 0 0.075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--coral); color: var(--navy); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--navy); color: var(--white); padding: 8px 12px; font-size: 13px; }
.skip:focus { left: 8px; }

/* labels: tiny tracked caps with fixed-width digits */
.lab { font: 600 10px/1.55 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lab b { font-weight: 600; color: var(--navy); }
.lab.faint { color: var(--faint); }
/* the emphasis word: Averta Thin Italic in coral */
em.e { font-style: italic; font-weight: 200; color: var(--coral); }

/* buttons: coral with navy text (as in the manual), navy on hover */
.cta { display: inline-flex; align-items: center; gap: 12px; font: 600 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); background: var(--coral); padding: 15px 22px; border: 0; border-radius: 2px; cursor: pointer; transition: background 180ms, color 180ms; }
.cta:hover { background: var(--navy); color: var(--white); }
.link-u { border-bottom: 1px solid var(--faint); padding-bottom: 2px; }
.link-u:hover { color: var(--coral); border-color: var(--coral); }

/* ── nav ── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); transition: background 300ms, padding 300ms, box-shadow 300ms; }
.nav.solid { background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 var(--rule); }
.nav .logo { padding: 6px 0; flex: none; }            /* clear zone around the lockup */
.nav .logo img { height: 24px; width: auto; }
.nav ul { display: flex; gap: 28px; list-style: none; align-items: center; }
.nav ul a { font: 600 10px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--coral); }
.nav .locale { display: flex; gap: 8px; }
.nav .locale a { color: var(--ink-3); }
.nav .locale a[aria-current="true"] { color: var(--navy); }
.nav .cta { padding: 11px 16px; }
.nav .menu { display: none; }

/* ── footer ── */
.footer { position: relative; padding: 64px var(--gutter) 64px; border-top: 1px solid var(--navy); display: grid; grid-template-columns: 1fr 2.2fr; gap: 48px; background: var(--white); }
.footer .logo img { width: 112px; height: auto; margin: 4px 0 28px; }   /* ≥72px digital minimum */
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 14px 0 10px; }
.footer nav a:hover { color: var(--coral); }
.footer p { font-size: 11.5px; line-height: 1.75; color: var(--ink-3); }
.footer p strong { color: var(--navy); font-weight: 600; }

/* ── section scaffolding ── */
.label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 64px; }
.rule-top { border-top: 1px solid var(--rule); }

/* ── article (Perspectives) ── */
.article-header { max-width: var(--measure); margin: 0 auto; padding: 150px var(--gutter) 0; box-sizing: content-box; }
.article-breadcrumb { margin-bottom: 26px; }
.article-breadcrumb a:hover { color: var(--coral); }
.article-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.article-cat { color: var(--navy); }   /* coral at 10px is ~3.4:1 on white — below AA for small text */
.article-title { font: 100 clamp(40px, 5.6vw, 76px)/1.02 var(--sans); letter-spacing: -0.035em; color: var(--navy); margin-bottom: 28px; text-wrap: balance; }
.article-intro { font: 300 19px/1.6 var(--sans); color: var(--ink-2); }
.article-divider { height: 1px; background: var(--rule); margin: 44px 0 0; }
.article-body { max-width: var(--measure); margin: 0 auto; padding: 44px var(--gutter) 96px; box-sizing: content-box; }
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 200 30px/1.15 var(--sans); letter-spacing: -0.02em; color: var(--navy); margin-top: 2.2em; }
.prose h3 { font: 600 11px/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); margin-top: 2em; }
.prose strong { font-weight: 600; color: var(--navy); }
.prose em { font-style: italic; }
.prose a { color: var(--navy); border-bottom: 1px solid var(--coral); }
.prose a:hover { color: var(--coral); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--coral); }
.prose blockquote { border-left: 2px solid var(--coral); padding: 4px 0 4px 22px; font: italic 200 22px/1.5 var(--sans); color: var(--navy); }
.prose blockquote cite { display: block; margin-top: 10px; font: 600 10px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; font-style: normal; color: var(--ink-3); }
.prose hr { border: 0; height: 1px; background: var(--rule); margin: 2.4em 0; }
.prose .callout { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: baseline; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--rule); padding: 22px 0; }
.prose .callout-num { font: 100 44px/1 var(--sans); letter-spacing: -0.03em; color: var(--coral); }
.prose .callout-body { font-size: 15.5px; }
.prose .indicator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--navy); }
.prose .indicator-item { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.prose .indicator-name { font: 600 10.5px/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.prose .indicator-desc { font-size: 14.5px; margin-top: 4px; }
.prose .fig-caption { font: 600 10px/1.55 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.article-footer-nav { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) 96px; box-sizing: content-box; }
.afn-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--rule); padding-top: 24px; flex-wrap: wrap; }
.afn-back:hover { color: var(--coral); }

/* ── reveal ── */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 800ms cubic-bezier(0, 0, 0.2, 1), transform 800ms cubic-bezier(0, 0, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .nav ul .hide-m { display: none; }
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { padding: 16px var(--gutter); }
  .nav .logo img { height: 20px; }
  .nav ul { gap: 16px; }
  .nav ul .hide-s { display: none; }
  .prose .indicator-grid { grid-template-columns: 1fr; }
  .article-intro { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}