/* THE AMBER ECONOMY — layout: a dark, cinematic world on top; editorial stone-and-ember pages beneath.
   Single committed dark look (brand moodboard); a "stone" light band is used for books and creators. */
:root {
  --bg: #0B0B0B;
  --bg-2: #120D08;
  --earth: #2B1B0F;
  --surface: #17110B;
  --surface-2: #201710;
  --fg: #F5F1EA;
  --fg-dim: #CDBFA9;
  --fg-mute: #9A8B74;
  --amber: #D4A574;
  --wheat: #EBC087;
  --green: #556B2F;
  --sky: #87A9C7;
  --line: rgba(235, 192, 135, .22);
  --line-strong: rgba(235, 192, 135, .5);
  --stone: #F5F1EA;
  --stone-ink: #2B1B0F;
  --stone-dim: #6B5638;
  --stone-line: rgba(43, 27, 15, .2);
  --glass: rgba(11, 19, 32, .72);
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-quote: "Bodoni Moda", "Didot", Georgia, serif;
  --pink: #FF6FA8;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.immersive { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--wheat); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--fg); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--wheat); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
p { margin: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--wheat); color: var(--bg); padding: 10px 16px; border-radius: 6px; transition: top .2s; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }
.eyebrow { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); font-weight: 500; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gut) var(--gut-r); }
.wrap.narrow { max-width: 860px; }

/* ---------- top bar ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 90; background: rgba(11, 19, 32, .86); }
#nav {
  position: fixed; z-index: 80; inset: env(safe-area-inset-top, 0px) 0 auto 0; height: var(--nav-h);
  display: flex; align-items: center; gap: 20px; padding-inline: var(--gut) var(--gut-r);
  background: linear-gradient(180deg, rgba(11, 19, 32, .88), rgba(11, 19, 32, .55) 70%, rgba(11, 19, 32, 0)); backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; flex: none; }
.brand img { width: 38px; height: 38px; flex: none; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,170,60,.35)); }
.brand b { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; }
.brand b i { display: block; font-style: normal; }
.navlinks { display: flex; gap: clamp(10px, 1.7vw, 26px); margin-left: auto; align-items: center; }
.navlinks a { color: var(--fg-dim); text-decoration: none; font-size: 13px; letter-spacing: .04em; padding: 8px 2px; position: relative; white-space: nowrap; }
.navlinks a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--wheat); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--fg); }
.navlinks a:hover::after, .navlinks a[aria-current="page"]::after { transform: scaleX(1); }
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; flex: none; }
.lang button { background: none; border: 0; padding: 6px 12px; font-size: 12px; letter-spacing: .1em; color: var(--fg-dim); }
.lang button[aria-pressed="true"] { background: var(--wheat); color: var(--bg); font-weight: 600; }
.menu-btn { display: none; background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
#drawer {
  position: fixed; inset: 0; z-index: 120; background: rgba(8, 6, 4, .96); backdrop-filter: blur(10px);
  padding: calc(env(safe-area-inset-top, 0px) + 22px) var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 22px) var(--gut);
  display: flex; flex-direction: column; gap: 6px; overflow: auto;
}
#drawer[hidden] { display: none; }
#drawer .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
#drawer a.dl { font-family: var(--font-display); font-size: clamp(26px, 6vw, 40px); color: var(--fg); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
#drawer a.dl small { font-family: var(--font-ui); font-size: 12px; color: var(--fg-mute); align-self: center; letter-spacing: .1em; }
#drawer a.dl:hover { color: var(--wheat); }
.x-btn { background: none; border: 1px solid var(--line-strong); border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.x-btn:hover { background: var(--wheat); color: var(--bg); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); background: rgba(11, 19, 32, .35); color: var(--fg); text-decoration: none; padding: 13px 22px; border-radius: 999px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); backdrop-filter: blur(4px); }
.btn:hover { background: var(--wheat); color: var(--bg); border-color: var(--wheat); transform: translateY(-1px); }
.btn.solid { background: var(--wheat); color: var(--bg); border-color: var(--wheat); }
.btn.solid:hover { background: var(--fg); border-color: var(--fg); }
.btn.sm { padding: 9px 16px; font-size: 11px; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn.ink { color: var(--stone-ink); border-color: var(--stone-ink); background: transparent; }
.btn.ink:hover { background: var(--stone-ink); color: var(--stone); border-color: var(--stone-ink); }

/* ---------- hero / world ---------- */
#hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; background: #0B1320; overflow: hidden; isolation: isolate; }
body.immersive #hero { position: fixed; inset: 0; z-index: 70; height: auto; min-height: 0; }
#hero[hidden] { display: none; }
.world-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.world-canvas.drag { cursor: grabbing; }
.hero-fallback { position: absolute; inset: 0; background: url(img/map.jpg) center / cover; filter: saturate(1.05) brightness(.8); }
.hero-veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 70% 40%, transparent 35%, rgba(11, 19, 32, .55) 100%), linear-gradient(90deg, rgba(11, 19, 32, .72), rgba(11, 19, 32, 0) 52%), linear-gradient(0deg, rgba(11, 19, 32, .65), rgba(11, 19, 32, 0) 30%); transition: opacity .8s; }
body.immersive .hero-veil, #hero.journey .hero-veil { opacity: 0; }
.hero-copy { position: absolute; left: var(--gut); right: var(--gut-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); max-width: 640px; pointer-events: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero-copy > * { pointer-events: auto; }
body.immersive .hero-copy, #hero.journey .hero-copy { opacity: 0; transform: translateY(14px); pointer-events: none; }
body.immersive .hero-copy > *, #hero.journey .hero-copy > * { pointer-events: none; }
.hero-copy h1 { font-size: clamp(2.7rem, 8vw, 5.6rem); text-transform: uppercase; letter-spacing: .02em; line-height: .98; margin: 14px 0 18px; text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.hero-copy h1 span { display: block; color: var(--wheat); }
.hero-line { font-family: var(--font-quote); font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.2; font-style: italic; color: var(--fg); max-width: 22ch; }
.hero-sub { color: var(--fg-dim); margin-top: 12px; max-width: 46ch; font-size: 15px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-utils { position: absolute; right: var(--gut-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; z-index: 3; }
.hero-utils .btn { padding: 8px 14px; font-size: 10.5px; }
body.immersive .hero-utils .land-only, #hero.journey .hero-utils .land-only { display: none; }
.hero-scroll { position: absolute; left: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--fg-mute); display: flex; align-items: center; gap: 10px; }
.hero-scroll i { width: 1px; height: 28px; background: linear-gradient(var(--wheat), transparent); animation: drip 2.4s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 900px) { .hero-scroll { display: none; } }
.loading { position: absolute; inset: 0; display: grid; place-items: center; background: #0B1320; color: var(--wheat); letter-spacing: .24em; font-size: 12px; text-transform: uppercase; z-index: 5; transition: opacity .8s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading i { display: block; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); border-top-color: var(--wheat); margin: 0 auto 16px; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* point-of-interest labels */
.poi-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; visibility: hidden; }
body.immersive .poi-layer { visibility: visible; }
.poi-label { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-strong); color: var(--fg); font-size: 12px; letter-spacing: .06em; white-space: nowrap; backdrop-filter: blur(6px); transition: opacity .4s, background .3s, border-color .3s; will-change: transform; }
.poi-label .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--wheat); color: #0B1320; font: 700 11px/20px var(--font-ui); font-style: normal; text-align: center; box-shadow: 0 0 10px rgba(235,192,135,.7); flex: none; }
.poi-label.mini .txt { display: none; }
.poi-label.mini { padding: 3px; }
.poi-label[data-state="visited"] .dot { background: var(--fg); box-shadow: 0 0 0 2px rgba(245, 241, 234, .25); }
.poi-label[data-state="available"] .dot { background: var(--amber); }
.poi-label:hover, .poi-label.near { background: var(--wheat); color: var(--bg); border-color: var(--wheat); }
.poi-label:hover .dot, .poi-label.near .dot { background: var(--bg); color: var(--wheat); box-shadow: none; }
@media (max-width: 640px) { .poi-label { font-size: 11px; padding: 5px 10px 5px 7px; } }

/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; display: none; }
body.immersive .hud { display: block; }
.hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 6px); left: var(--gut); right: var(--gut-r); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-strong); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); backdrop-filter: blur(8px); }
button.chip:hover { background: var(--wheat); color: var(--bg); }
button.chip[aria-pressed="true"] { background: rgba(235, 192, 135, .2); border-color: var(--wheat); }
.chip.prog b { color: var(--wheat); font-weight: 600; }
.hud-hint { position: absolute; left: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); max-width: min(520px, 62vw); font-size: 12px; color: var(--fg-dim); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; backdrop-filter: blur(6px); pointer-events: none !important; }
.stick { position: absolute; right: var(--gut-r); bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); width: 132px; height: 132px; border-radius: 50%; background: rgba(11, 19, 32, .45); border: 1px solid var(--line-strong); touch-action: none; display: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--wheat), var(--amber)); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
body.immersive.walking .stick { display: block; }
@media (pointer: coarse) { .hud-hint { display: none; } }

/* avatar chooser */
#chooser { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 8px) var(--gut-r) 16px var(--gut); background: radial-gradient(80% 80% at 50% 50%, rgba(11, 19, 32, .55), rgba(11, 19, 32, .9)); overflow: auto; }
#chooser[hidden] { display: none; }
.choose-box { width: min(920px, 100%); text-align: center; }
.choose-box h2 { font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: .06em; }
.choose-box p.sub { color: var(--fg-dim); margin: 8px 0 22px; font-family: var(--font-quote); font-style: italic; font-size: 1.3rem; }
.avatars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 22px); }
.av-card { background: linear-gradient(180deg, rgba(32, 23, 16, .85), rgba(11, 19, 32, .85)); border: 1px solid var(--line); border-radius: 16px; padding: 10px 8px 14px; transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.av-card img { width: 100%; max-height: 38svh; object-fit: contain; margin: 0 auto; aspect-ratio: 300 / 420; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); }
.av-card span { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); margin-top: 6px; }
.av-card:hover { transform: translateY(-4px); }
.av-card[aria-pressed="true"] { border-color: var(--wheat); box-shadow: 0 0 0 1px var(--wheat), 0 18px 40px rgba(235, 192, 135, .18); }
.av-card[aria-pressed="true"] span { color: var(--wheat); }
.choose-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.choose-note { margin-top: 14px; color: var(--fg-mute); font-size: 12.5px; }

/* lite map */
#lite { position: absolute; inset: 0; z-index: 6; background: #0B1320; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 8px) var(--gut-r) 16px var(--gut); }
#lite[hidden] { display: none; }
.lite-stage { position: relative; width: min(1180px, 100%); aspect-ratio: 1672 / 941; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lite-stage img { width: 100%; height: 100%; object-fit: cover; }
.hot { position: absolute; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--wheat); background: rgba(235, 192, 135, .18); box-shadow: 0 0 0 0 rgba(235, 192, 135, .6); animation: ping 2.6s infinite; display: grid; place-items: center; }
.hot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wheat); }
.hot span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; background: var(--glass); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.hot:hover span, .hot:focus-visible span { opacity: 1; }
@keyframes ping { 70% { box-shadow: 0 0 0 16px rgba(235, 192, 135, 0); } 100% { box-shadow: 0 0 0 0 rgba(235, 192, 135, 0); } }
.lite-list { width: min(1180px, 100%); margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lite-note { text-align: center; color: var(--fg-dim); font-size: 13px; margin-top: 10px; max-width: 70ch; }
#lite .lite-wrap { display: flex; flex-direction: column; align-items: center; max-height: 100%; overflow: auto; width: 100%; }

/* panel */
#panel {
  position: fixed; z-index: 110; top: env(safe-area-inset-top, 0px); right: 0; bottom: 0; width: min(440px, 100vw);
  background: linear-gradient(180deg, rgba(24, 17, 11, .95), rgba(12, 8, 5, .96)); backdrop-filter: blur(16px);
  border-left: 1px solid var(--line-strong); box-shadow: -30px 0 80px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; transform: translateX(104%); transition: transform .6s var(--ease); visibility: hidden;
}
#panel.open { transform: none; visibility: visible; }
.panel-img { height: 190px; flex: none; background-size: cover; background-position: center; position: relative; }
.panel-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 19, 32, 1), rgba(11, 19, 32, 0) 70%); }
#panel .x-btn { position: absolute; top: 14px; right: max(14px, env(safe-area-inset-right, 0px)); z-index: 2; background: rgba(11, 19, 32, .6); backdrop-filter: blur(6px); }
.panel-body { padding: 4px 26px 8px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.panel-body h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
.panel-body p { color: var(--fg-dim); font-size: 15.5px; }
.panel-q { font-family: var(--font-quote); font-style: italic; font-size: 1.35rem; line-height: 1.25; color: var(--wheat); border-left: 2px solid var(--amber); padding-left: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; letter-spacing: .12em; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--wheat); }
.lens-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lens-list li { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.lens-list li i { width: 10px; height: 10px; border-radius: 50%; flex: none; transform: translateY(1px); }
.lens-list li b { font-family: var(--font-display); font-weight: 500; }
.lens-list li span { color: var(--fg-mute); font-size: 14px; }
.panel-foot { padding: 14px 26px calc(env(safe-area-inset-bottom, 0px) + 18px); display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.panel-foot .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 820px) {
  #panel { top: auto; left: 0; width: 100%; height: min(78svh, 640px); border-left: 0; border-top: 1px solid var(--line-strong); border-radius: 22px 22px 0 0; transform: translateY(104%); box-shadow: 0 -30px 80px rgba(0, 0, 0, .55); }
  .panel-img { height: 120px; border-radius: 22px 22px 0 0; }
  .panel-body, .panel-foot { padding-inline: 20px; }
}

/* ---------- sections ---------- */
section.band { padding-block: clamp(64px, 10vw, 128px); position: relative; }
.stone { background: var(--stone); color: var(--stone-ink); }
.stone .eyebrow { color: var(--stone-dim); }
.stone p { color: var(--stone-dim); }
.stone a:not(.btn) { color: var(--stone-ink); }
.earth { background: var(--bg-2); }
.sec-head { max-width: 760px; display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--fg-dim); max-width: 62ch; }
.quote { font-family: var(--font-quote); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.2; color: var(--wheat); }

/* story strip */
.story { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; margin-inline: calc(var(--gut) * -1) calc(var(--gut-r) * -1); padding-inline: var(--gut) var(--gut-r); scrollbar-width: thin; scrollbar-color: var(--amber) transparent; }
.frame { flex: 0 0 min(300px, 74vw); aspect-ratio: 3 / 4.4; position: relative; border-radius: 14px; overflow: hidden; scroll-snap-align: start; background: #000; border: 1px solid var(--line); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.frame:hover img { transform: scale(1.06); }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 19, 32, .92), rgba(11, 19, 32, 0) 55%); }
.frame figcaption { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; }
.frame figcaption small { display: block; color: var(--amber); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 6px; }
.frame figcaption p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }

/* paradox */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.photo { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 4.4; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.wide { aspect-ratio: 16 / 10; }
.note { font-size: 13px; color: var(--fg-mute); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 22px; max-width: 60ch; }
.stone .note { color: var(--stone-dim); border-color: var(--stone-line); }
.stack { display: flex; flex-direction: column; gap: 18px; }

/* five accordions */
.fan { display: flex; gap: 10px; height: clamp(440px, 60vw, 560px); }
.fan a { position: relative; flex: 1 1 0; min-width: 0; border-radius: 14px; overflow: hidden; color: var(--fg); text-decoration: none; border: 1px solid var(--line); transition: flex .8s var(--ease); display: block; }
.fan a img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fan a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 19, 32, .94) 8%, rgba(11, 19, 32, .1) 62%); }
.fan a .in { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.fan a .ic { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--wheat); display: grid; place-items: center; color: var(--wheat); background: rgba(11, 19, 32, .4); }
.fan a .ic svg { width: 20px; height: 20px; }
.fan a h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .08em; }
.fan a p { font-size: 14px; color: var(--fg-dim); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s; }
.fan a:hover, .fan a:focus-visible, .fan a.on { flex: 3.2 1 0; }
.fan a:hover img, .fan a.on img { transform: scale(1.05); }
.fan a:hover p, .fan a:focus-visible p, .fan a.on p { max-height: 120px; opacity: 1; }
@media (max-width: 760px) {
  .fan { flex-direction: column; height: auto; }
  .fan a { flex: none; height: 118px; transition: height .6s var(--ease); }
  .fan a:hover, .fan a.on, .fan a:focus-visible { flex: none; height: 250px; }
}

/* lenses */
.lens-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
@media (max-width: 900px) { .lens-row { grid-template-columns: minmax(0, 1fr); } }
.lens { border-top: 2px solid var(--c, var(--amber)); padding: 14px 4px 4px; }
.lens b { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; display: block; }
.lens span { color: var(--fg-dim); font-size: 14px; }
.stone .lens span { color: var(--stone-dim); }

/* books */
.books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 900px) { .books { grid-template-columns: minmax(0, 1fr); } }
.book { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 520px) { .book { grid-template-columns: minmax(0, 1fr); } .book .cover { max-width: 190px; } }
.cover { aspect-ratio: 2 / 3; border-radius: 3px 8px 8px 3px; padding: 16px 14px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: -3px 0 0 rgba(0, 0, 0, .25) inset, 14px 18px 36px rgba(0, 0, 0, .45); position: relative; overflow: hidden; transition: transform .6s var(--ease); }
.cover:hover { transform: perspective(900px) rotateY(-9deg) translateY(-4px); }
.cover h4 { font-size: clamp(1.1rem, 2.2vw, 1.55rem); text-transform: uppercase; letter-spacing: .06em; line-height: 1.05; }
.cover small { font-family: var(--font-quote); font-style: italic; font-size: 13px; opacity: .85; line-height: 1.2; }
.cover.c1 { background: linear-gradient(180deg, #2b1b0f, #4a2f17 60%, #9a6a30); color: var(--wheat); }
.cover.c2 { background: linear-gradient(180deg, #f2ead9, #e0cfa8); color: #2b1b0f; }
.cover.c2::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(43, 27, 15, .4); background: repeating-radial-gradient(circle, rgba(43, 27, 15, .28) 0 1px, transparent 1px 9px); opacity: .6; }
.cover.c1::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -4%; height: 42%; background: radial-gradient(60% 100% at 50% 100%, rgba(235, 192, 135, .5), transparent 70%); }
.badge { display: inline-block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; }
.badge.ok { color: #9fb87a; } .badge.wait { color: var(--amber); }
.stone .badge.ok { color: #4a6428; } .stone .badge.wait { color: #8a5a2e; }
.book h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 10px 0 6px; }
.book .by { font-size: 13px; letter-spacing: .06em; opacity: .85; margin-bottom: 10px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.seq { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seq span { font-family: var(--font-display); font-size: 1.15rem; padding: 6px 16px; border: 1px solid var(--line-strong); border-radius: 999px; }
.seq i { color: var(--amber); font-style: normal; }
.stone .seq span { border-color: var(--stone-line); }
ol.plain, ul.plain { list-style: none; margin: 0; padding: 0; }
.struct li { padding: 10px 0; border-bottom: 1px solid var(--stone-line); font-family: var(--font-display); font-size: 1.1rem; }

/* page header */
.page-head { position: relative; padding: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + clamp(48px, 9vw, 110px)) 0 clamp(40px, 6vw, 72px); overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-head .bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .55; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 0%, rgba(11, 19, 32, .55) 55%, rgba(11, 19, 32, .75)); }
.page-head h1 { font-size: clamp(2.4rem, 7vw, 5rem); margin: 14px 0 18px; max-width: 18ch; }
.crumbs { display: flex; gap: 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mute); }
.crumbs a { color: var(--amber); text-decoration: none; }

/* principles + cards */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
@media (max-width: 900px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
.pr { border-top: 1px solid var(--line-strong); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pr h3 { font-size: 1.45rem; }
.pr p { color: var(--fg-dim); }
.rel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rel { grid-template-columns: minmax(0, 1fr); } }
.rel div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.rel b { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; display: block; margin-bottom: 6px; color: var(--wheat); }
.rel span { font-size: 13.5px; color: var(--fg-dim); }
.vgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vcard { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 3 / 4.4; display: block; color: var(--fg); text-decoration: none; }
.vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vcard:hover img { transform: scale(1.07); }
.vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 19, 32, .95), rgba(11, 19, 32, 0) 60%); }
.vcard .in { position: absolute; z-index: 2; inset: auto 16px 16px; }
.vcard h3 { text-transform: uppercase; letter-spacing: .08em; font-size: 1.1rem; }
.vcard p { font-size: 13px; color: var(--fg-dim); margin-top: 6px; }

/* indicators */
.avi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 5vw, 64px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 4vw, 44px); }
@media (max-width: 820px) { .avi { grid-template-columns: minmax(0, 1fr); } }
.avi svg { width: 100%; height: auto; }
.avi svg text { fill: var(--fg-dim); font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table.ind { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14.5px; }
table.ind th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); padding: 14px 16px; border-bottom: 1px solid var(--line-strong); background: var(--surface); }
table.ind td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ind tr.grp td { background: var(--bg-2); font-family: var(--font-display); font-size: 1.1rem; color: var(--wheat); padding-block: 16px 10px; }
table.ind td.code { font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--wheat); font-weight: 600; width: 90px; }
.st { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 3px 10px; display: inline-block; }

/* steps */
.steps { display: grid; gap: 0; counter-reset: s; }
.step { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step .n { font-family: var(--font-display); font-size: 2.6rem; color: var(--amber); line-height: 1; font-variant-numeric: tabular-nums; }
.step h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 6px; }
.step p { color: var(--fg-dim); max-width: 60ch; }
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
@media (max-width: 900px) { .apps { grid-template-columns: minmax(0, 1fr); } }
.app { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.app h3 { font-size: 1.4rem; color: var(--wheat); }
.app p { color: var(--fg-dim); font-size: 15px; }

/* people */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
@media (max-width: 900px) { .people { grid-template-columns: minmax(0, 1fr); } }
.person { display: flex; flex-direction: column; gap: 12px; }
.person .mono { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; color: var(--wheat); background: var(--stone-ink); border: 2px solid var(--amber); }
.person h3 { font-size: 1.5rem; }
.person .role { color: var(--stone-dim); }
.person .pend { font-size: 12.5px; color: var(--stone-dim); border-top: 1px dashed var(--stone-line); padding-top: 10px; }

/* coalition + misc */
.whochips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.whochips span { border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 20px; font-family: var(--font-display); font-size: 1.15rem; }
.cta-band { position: relative; text-align: center; padding-block: clamp(80px, 12vw, 160px); isolation: isolate; overflow: hidden; }
.cta-band .bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg), rgba(11, 19, 32, .35) 40%, rgba(11, 19, 32, .6)); }
.cta-band h2 { font-size: clamp(1.8rem, 4.2vw, 3.2rem); max-width: 20ch; margin: 14px auto 18px; }
.cta-band p { max-width: 56ch; margin: 0 auto 28px; color: var(--fg-dim); }
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .feat { grid-template-columns: minmax(0, 1fr); } }
.feat div { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--surface); }
.feat b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; display: block; margin-bottom: 4px; }
.feat span { color: var(--fg-dim); font-size: 14.5px; }
.five-list { display: grid; gap: 0; }
.five-list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font-quote); font-size: 1.5rem; font-style: italic; }
.pn { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

.toast { position: fixed; z-index: 140; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 20px; font-size: 13px; transition: opacity .4s, transform .4s var(--ease); max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1060px) { .navlinks { display: none; } .menu-btn { display: inline-flex; margin-left: auto; } }
@media (max-width: 460px) { .brand b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (max-width: 640px) {
  .hero-copy { bottom: calc(env(safe-area-inset-bottom, 0px) + 118px); }
  .hero-scroll { display: none; }
  .hero-utils { left: var(--gut); justify-content: flex-start; }
}

/* type: Bodoni Moda wants less tracking, more size contrast */
h1, h2, h3, h4 { font-optical-sizing: auto; letter-spacing: -.01em; }
.hero-copy h1 { letter-spacing: .005em; font-weight: 500; }
.brand b { letter-spacing: .08em; font-weight: 500; }
.quote, .hero-line, .panel-q { font-style: italic; font-weight: 400; }

/* portals (home) */
.portals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 14px; }
@media (max-width: 1100px) { .portals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .portals { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; } }
@media (max-width: 480px) { .portals { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 190px; } }
.portal { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); color: var(--fg); text-decoration: none; display: block; }
.portal.big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 480px) { .portal.big { grid-column: auto; grid-row: auto; } }
.portal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.95); }
.portal:hover img { transform: scale(1.07); filter: saturate(1.15); }
.portal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11, 19, 32,.94) 6%, rgba(11, 19, 32,.15) 62%); }
.portal .in { position: absolute; z-index: 2; inset: auto 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.portal h3 { font-size: 1.35rem; }
.portal.big h3 { font-size: 2.1rem; }
.portal p { font-size: 13.5px; color: var(--fg-dim); max-width: 34ch; }
.portal .go, .bookcard .go { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--wheat); }
.portal .go { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.portal:hover .go, .portal:focus-visible .go { opacity: 1; transform: none; }

/* books sub-pages */
.bookcard { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: 22px; align-items: center; text-decoration: none; color: var(--stone-ink); padding: 18px; border-radius: 16px; transition: background .3s; }
.bookcard:hover { background: rgba(43,27,15,.06); }
.bookcard h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 10px 0 4px; }
.bookcard .by { font-size: 13px; color: var(--stone-dim); margin-bottom: 12px; }
.bookcard .go { color: var(--stone-ink); }
.book.big { grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); }
@media (max-width: 640px) { .book.big, .bookcard { grid-template-columns: minmax(0, 1fr); } .book.big .cover, .bookcard .cover { max-width: 200px; } }
.book.big p { max-width: 62ch; margin-top: 12px; }

/* people */
.person .ph { aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--stone-ink); max-width: 340px; width: 100%; }
.person .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.person p { font-size: 15px; }
.miy-logo { width: 96px; height: auto; margin: 6px 0 -4px; }
.panel-logo { position: absolute; z-index: 2; left: 22px; bottom: 14px; width: 62px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }

/* footer */
footer { background: #0B1320; border-top: 1px solid var(--line); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); }
.foot-top { background: radial-gradient(80% 140% at 15% 0%, rgba(212,165,116,.16), transparent 60%), linear-gradient(180deg, #120c07, #0B1320); border-bottom: 1px solid var(--line); padding-block: clamp(40px, 6vw, 72px); }
.foot-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 4vw, 44px); align-items: center; }
@media (max-width: 800px) { .foot-hero { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.foot-logo { width: clamp(64px, 9vw, 96px); height: auto; filter: drop-shadow(0 0 22px rgba(255,160,50,.4)); }
.foot-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.18; max-width: 26ch; text-wrap: balance; color: var(--fg); }
.foot-sub { color: var(--fg-mute); margin-top: 10px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 44px 36px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.fcol h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); font-weight: 600; margin-bottom: 14px; }
.fcol a { display: block; color: var(--fg-dim); text-decoration: none; padding: 5px 0; font-size: 14px; transition: color .25s, transform .25s var(--ease); }
.fcol a:hover { color: var(--wheat); transform: translateX(3px); }
.foot-bar { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; font-size: 13px; color: var(--fg-mute); }
.foot-bar small { flex-basis: 100%; font-size: 12px; color: var(--fg-mute); opacity: .8; }
.built a { color: var(--wheat); font-weight: 600; text-decoration-thickness: 1px; }
.built a:hover { color: var(--pink); }
.pink { color: var(--pink); display: inline-flex; vertical-align: -3px; }
.heart { width: 16px; height: 16px; animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.22); } 80% { transform: scale(1); } 90% { transform: scale(1.14); } }

/* contact dialog */
#contact { position: fixed; inset: 0; z-index: 150; background: rgba(11, 19, 32, .78); backdrop-filter: blur(8px); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 16px) var(--gut-r) calc(env(safe-area-inset-bottom, 0px) + 16px) var(--gut); overflow: auto; }
#contact[hidden] { display: none; }
.c-box { position: relative; width: min(560px, 100%); background: linear-gradient(180deg, #1c140d, #100b07); border: 1px solid var(--line-strong); border-radius: 20px; padding: clamp(22px, 4vw, 36px); box-shadow: 0 40px 100px rgba(0,0,0,.6); }
.c-box h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 8px 0 8px; }
.c-box .eyebrow .heart { color: var(--pink); width: 13px; height: 13px; vertical-align: -1px; }
.c-x { position: absolute; top: 14px; right: 14px; }
.c-box label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: 16px 0 6px; }
.c-box input, .c-box textarea { width: 100%; background: rgba(245, 241, 234, .06); color: var(--fg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 15px; resize: vertical; }
.c-box input:focus, .c-box textarea:focus { outline: 2px solid var(--wheat); outline-offset: 1px; }
.c-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.c-err { color: #ffb4a0; font-size: 13.5px; margin-top: 12px; }
.c-err[hidden] { display: none; }

/* map of clues */
#lite { place-items: start center; overflow: auto; }
#lite .lite-wrap { align-items: stretch; max-width: 1200px; margin: 0 auto; gap: 14px; padding-bottom: 24px; max-height: none; overflow: visible; }
.map-head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.map-head p { color: var(--fg-dim); font-size: 14.5px; margin-top: 4px; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .map-grid { grid-template-columns: minmax(0, 1fr); } }
.map-stage { background: radial-gradient(90% 90% at 50% 40%, #2a190d, #0B1320); border: 1px solid var(--line); border-radius: 16px; padding: 10px; }
.map-svg { width: 100%; height: auto; max-height: 68vh; display: block; }
.map-svg .pin { cursor: pointer; outline: none; }
.map-svg .pin .nm { fill: #f5f1ea; paint-order: stroke; stroke: #0B1320; stroke-width: .9; stroke-linejoin: round; font-family: var(--font-ui); font-weight: 600; }
.map-svg .pin .num { fill: #0B1320; font-family: var(--font-ui); font-weight: 700; }
.map-svg .pin .halo { transition: r .3s; }
.map-svg .pin:hover .halo, .map-svg .pin:focus-visible .halo, .map-svg .pin.on .halo { r: 6.4; opacity: .5; }
.map-svg .pin:focus-visible .disc { stroke: #fff; stroke-width: .9; }
.map-svg .you circle:first-child { animation: ping 2s infinite; }
@media (max-width: 640px) { .map-svg .pin .nm { display: none; } .map-svg .pin.on .nm { display: block; } }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 6px 2px; font-size: 12px; color: var(--fg-dim); }
.map-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; }
.map-card { position: sticky; top: calc(var(--nav-h) + 12px); background: linear-gradient(180deg, #1c140d, #100b07); border: 1px solid var(--line-strong); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.map-card h3 { font-size: 1.5rem; padding-right: 30px; }
.map-card p { font-size: 14.5px; color: var(--fg-dim); }
.map-card .x-btn { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 20px; }
.mc-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #0B1320; font: 700 15px var(--font-ui); }
.mc-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 900px) { .map-card { position: static; } }
.map-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 0; }
.map-list button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 12px; border-radius: 999px; background: rgba(245,241,234,.05); border: 1px solid var(--line); color: var(--fg); font-size: 13.5px; }
.map-list button b { width: 22px; height: 22px; border-radius: 50%; background: var(--wheat); color: #0B1320; display: grid; place-items: center; font-size: 11px; flex: none; }
.map-list button:hover, .map-list button.on { border-color: var(--wheat); background: rgba(235,192,135,.14); }

/* real covers */
.cover.real { padding: 0; background: none; aspect-ratio: auto; }
.cover.real img { width: 100%; height: auto; display: block; border-radius: 3px 8px 8px 3px; }
/* compact footer */
footer { background: #0B1320; border-top: 1px solid var(--line); }
.foot2 { padding-block: 28px calc(env(safe-area-inset-bottom, 0px) + 20px); display: flex; flex-direction: column; gap: 22px; }
.f-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.f-brand img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255,160,50,.35)); }
.f-brand div { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.f-brand b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; }
.f-brand span { color: var(--fg-mute); font-size: 13px; }
.f-links { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px 32px; padding-block: 20px; border-block: 1px solid var(--line); }
@media (max-width: 760px) { .f-links { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.fcol h4 { margin-bottom: 8px; }
.fl { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.fl a, .fcol a { display: inline-block; padding: 4px 0; font-size: 13.5px; }
.fcol a:hover { transform: none; }
.f-bar { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--fg-mute); }
.f-mid { display: inline-flex; align-items: center; gap: 16px; }
.f-mid a { color: var(--fg-dim); text-decoration: none; }
.f-mid a:hover { color: var(--wheat); }
.f-note { font-size: 12px; color: var(--fg-mute); opacity: .75; margin: -8px 0 0; }
@media (max-width: 640px) { .f-bar { flex-direction: column; align-items: flex-start; } .f-brand .btn { width: 100%; justify-content: center; } }
/* alignment + emphasis */
.sec-head { text-align: center; margin-inline: auto; align-items: center; max-width: 60ch; }
.sec-head h2 { text-wrap: balance; }
.page-head h1 { text-wrap: balance; }
strong, b { font-weight: 650; }
.panel-body p strong, .lead strong { color: var(--wheat); }
.band.stone .lead strong, .band.stone p strong { color: var(--stone-ink); }
.panel-body h2 { font-weight: 600; }
.portal p { text-align: left; }
@media (max-width: 640px) { .person { text-align: center; justify-items: center; } .person .ph { margin-inline: auto; } .bookcard, .book.big { justify-items: center; text-align: center; } .bookcard .cover, .book.big .cover { margin-inline: auto; } }
.f-credit { font-size: 14px; color: var(--fg-dim); max-width: 70ch; margin: -6px 0 0; }
.f-credit strong { color: var(--wheat); }

@media (max-width: 640px) {
  body.immersive #navBtn2, body.immersive #heroUtils { display: none; }
  .hud-top { gap: 6px; }
  .hud-top .chip { padding: 7px 12px; font-size: 11px; }
  .hud-hint { display: none; }
  .map-svg .pin .nm { display: block; font-size: 2.5px; }
}
@media (max-width: 640px) { .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); max-width: 78vw; } }

.allies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); }
@media (max-width: 820px) { .allies { grid-template-columns: minmax(0, 1fr); } }
.ally { border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px; background: rgba(245, 241, 234, .03); }
.ally h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.quote-sm { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--fg); border-left: 2px solid var(--amber); padding-left: 14px; }

/* ===== v4 design system: type scale, buttons, motion, return-to-point ===== */
:root {
  --fs-eyebrow: .75rem; --fs-small: .875rem; --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lead: clamp(1.08rem, 1rem + .5vw, 1.3rem); --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem); --fs-h1: clamp(2.4rem, 1.6rem + 4vw, 5rem);
  --lh-body: 1.72; --measure: 64ch;
}
body { line-height: var(--lh-body); font-size: var(--fs-body); }
p + p { margin-top: .9em; }
.lead { font-size: var(--fs-lead); line-height: 1.6; max-width: var(--measure); }
.panel-body { gap: 18px; padding-block: 8px 20px; }
.panel-body p { font-size: 1rem; line-height: 1.75; max-width: 58ch; }
.panel-body h2 { font-size: var(--fs-h2); line-height: 1.08; }
.panel-body .eyebrow { margin-top: 6px; }
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .16em; }
.band p { max-width: var(--measure); }
.band .sec-head p, .quote { max-width: 40ch; }
.page-head .lead { max-width: 58ch; }

/* hero veil: brown/amber contrast layer behind copy */
.hero-veil { background:
  linear-gradient(90deg, rgba(11, 19, 32, .9) 0%, rgba(11, 19, 32, .68) 34%, rgba(11, 19, 32, .18) 62%, transparent 82%),
  linear-gradient(0deg, rgba(11, 19, 32, .82) 0%, rgba(11, 19, 32, .35) 32%, transparent 55%),
  radial-gradient(120% 90% at 72% 40%, transparent 40%, rgba(11, 19, 32, .5) 100%); }
@media (max-width: 820px) { .hero-veil { background:
  linear-gradient(0deg, rgba(11, 19, 32, .94) 0%, rgba(11, 19, 32, .82) 40%, rgba(11, 19, 32, .5) 72%, rgba(11, 19, 32, .3) 100%); } }

/* buttons: leaf-cut shape, three tiers */
.btn { border-radius: 16px 4px 16px 4px; text-transform: none; letter-spacing: .01em; font-size: .94rem; font-weight: 600; min-height: 46px; padding: 12px 22px; border: 1px solid rgba(235, 192, 135, .5); background: linear-gradient(90deg, rgba(235, 192, 135, .16), rgba(235, 192, 135, .16)) no-repeat left / 0 100%, rgba(11, 19, 32, .4); color: var(--wheat); transition: background-size .45s var(--ease), color .3s, border-color .3s, transform .25s var(--ease), box-shadow .3s; }
.btn:hover { background-size: 100% 100%; color: var(--stone); border-color: var(--wheat); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.solid { background: linear-gradient(180deg, #F3D3A0, #D9A869); color: #1b0f06; border-color: #F3D3A0; box-shadow: 0 8px 24px rgba(212, 165, 116, .25), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.solid:hover { background: linear-gradient(180deg, #FBE3B9, #E4B676); color: #1b0f06; border-color: #FBE3B9; box-shadow: 0 12px 30px rgba(212, 165, 116, .38), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.sm { min-height: 40px; padding: 8px 16px; font-size: .84rem; border-radius: 12px 3px 12px 3px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--wheat); outline-offset: 3px; }
.btn.ink { color: var(--stone-ink); border-color: var(--stone-ink); background: transparent; }
.btn.ink:hover { background: var(--stone-ink); color: var(--stone); }
.go { text-transform: none; letter-spacing: .02em; font-size: .9rem; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 1px; align-self: flex-start; }
.chip { text-transform: none; letter-spacing: .02em; font-size: .84rem; font-weight: 500; min-height: 40px; border-radius: 12px 3px 12px 3px; transition: background .3s, border-color .3s, transform .25s var(--ease); }
.chip:hover { border-color: var(--wheat); background: rgba(235, 192, 135, .14); }
.chip:active { transform: scale(.98); }
.chip[aria-pressed="true"] { border-color: var(--wheat); background: rgba(235, 192, 135, .2); }
.x-btn { border-radius: 14px 3px 14px 3px; }
.map-list button, .map-card .btn { min-height: 44px; }
.lang button { min-height: 36px; }

/* return to point */
.pback { position: absolute; z-index: 2; top: 14px; left: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 16px; border-radius: 14px 3px 14px 3px; background: rgba(11, 19, 32, .72); backdrop-filter: blur(8px); border: 1px solid var(--wheat); color: var(--wheat); font-size: .88rem; font-weight: 600; transition: background .3s, color .3s, transform .25s var(--ease); }
.pback:hover { background: var(--wheat); color: #1b0f06; }
.pback span { transition: transform .3s var(--ease); }
.pback:hover span { transform: translateX(-3px); }
.backpt { position: fixed; z-index: 90; left: var(--gut); top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 12px); display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px 8px 14px; max-width: calc(100vw - 2 * var(--gut)); border-radius: 16px 4px 16px 4px; background: rgba(14, 9, 5, .88); backdrop-filter: blur(10px); border: 1px solid var(--wheat); color: var(--wheat); text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: background .3s, color .3s, transform .25s var(--ease); animation: rise .6s var(--ease) both; }
.backpt:hover { background: var(--wheat); color: #1b0f06; }
.backpt b { display: block; font-size: .9rem; }
.backpt small { display: block; font-size: .75rem; opacity: .8; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }

/* editorial note layout (replaces long centered blocks) */
.ed-note { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: clamp(16px, 4vw, 56px); align-items: start; border-top: 1px solid var(--line); padding-top: 24px; }
@media (max-width: 700px) { .ed-note { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.ed-note .lead { text-align: left; }

/* motion: subtle, progressive */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#panel.open .panel-body > * { animation: rise .55s var(--ease) both; }
#panel.open .panel-body > *:nth-child(2) { animation-delay: .06s; }
#panel.open .panel-body > *:nth-child(3) { animation-delay: .12s; }
#panel.open .panel-body > *:nth-child(n+4) { animation-delay: .18s; }
.map-card.open { animation: rise .4s var(--ease) both; }
#view > * { animation: rise .6s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { #panel.open .panel-body > *, .map-card.open, #view > *, .backpt { animation: none !important; } .btn, .chip, .pback { transition: none !important; } }

.av-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.av-face { width: clamp(64px, 14vw, 104px); aspect-ratio: 1; object-fit: cover; object-position: 50% 20%; border-radius: 50%; border: 2px solid rgba(235, 192, 135, .6); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.av-card[aria-pressed="true"] .av-face { border-color: var(--wheat); box-shadow: 0 0 0 4px rgba(235, 192, 135, .25), 0 6px 18px rgba(0, 0, 0, .45); }
.av-card small { font-size: .72rem; color: var(--fg-mute); line-height: 1.3; text-align: center; max-width: 18ch; }
@media (max-width: 520px) {  .av-card > img:not(.av-face) { max-height: 24svh; width: auto; } }
.av-card img.av-face { width: clamp(64px, 14vw, 104px); max-height: none; aspect-ratio: 1; filter: none; margin: 2px auto 0; }
.av-card span { text-transform: none; letter-spacing: .02em; font-size: .95rem; font-weight: 600; }
.av-card img.av-face { height: auto; }
body.has-back .page-head { padding-top: calc(var(--nav-h) + 76px); }

/* =====================================================================
   v5 · PALETA Y TIPOGRAFÍA DEL MOCKUP
   Ámbar #DAA017 · Tierra #8B5E2B · Naturaleza #567A3B · Arena #E4E8F0 · Crema #FFF7E8
   Cacao #4E342E · Oliva #7C8F3D · Terracota #C65D3A · Lago #4A7F9D · Cielo #D9E7F1
   Canela (títulos) · Satoshi (texto) · Allura (acentos)
   ===================================================================== */
:root {
  --c-amber: #DAA017; --c-tierra: #8B5E2B; --c-nat: #567A3B; --c-arena: #E4E8F0; --c-crema: #FFF7E8;
  --c-cacao: #4E342E; --c-oliva: #7C8F3D; --c-terra: #C65D3A; --c-lago: #4A7F9D; --c-cielo: #D9E7F1; --c-deep: #0B1320;
  --font-display: "Canela", "Cormorant Garamond", "Cormorant", "Didot", Georgia, serif;
  --font-quote: var(--font-display);
  --font-ui: "Satoshi", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Allura", "Snell Roundhand", "Segoe Script", cursive;
  /* light context (pages) */
  --bg: var(--c-crema); --bg-2: #EFE8D6; --earth: var(--c-cacao); --surface: #FFFFFF; --surface-2: var(--c-arena);
  --fg: var(--c-cacao); --fg-dim: #3F4C6B; --fg-mute: #5E6B87; --head: var(--c-deep);
  --amber: var(--c-tierra); --wheat: var(--c-tierra); --green: var(--c-nat); --sky: var(--c-lago);
  --line: rgba(11, 19, 32, .16); --line-strong: rgba(194, 65, 12, .5);
  --stone: var(--c-arena); --stone-ink: var(--c-cacao); --stone-dim: #3F4C6B; --stone-line: rgba(11, 19, 32, .22);
  --glass: rgba(11, 19, 32, .78);
  --b-ink: var(--c-cacao); --b-line: var(--c-tierra); --b-fill: var(--c-cacao); --b-fill-ink: var(--c-crema); --b-chip: var(--c-amber); --b-chip-ink: var(--c-deep);
  --pink: #E0527F;
  color-scheme: light;
}
/* dark context: image bands, hero, nav, panels, footer */
#hero, #nav, #drawer, #panel, #chooser, #lite, #contact, footer, .earth, .page-head, .cta-band, .frame, .fan a, .vcard, .portal, .hud, .toast, .backpt, .pback, .poi-layer, .dark {
  --bg: var(--c-deep); --bg-2: #111C30; --surface: rgba(255, 247, 232, .06); --surface-2: rgba(255, 247, 232, .1);
  --fg: var(--c-crema); --fg-dim: #E4E8F0; --fg-mute: #9AA5BD; --head: var(--c-crema);
  --amber: var(--c-amber); --wheat: #FFB703; --green: #9DB874; --sky: #A9CBE0;
  --line: rgba(234, 217, 198, .2); --line-strong: rgba(255, 183, 3, .55);
  --b-ink: var(--c-crema); --b-line: rgba(255, 183, 3, .7); --b-fill: var(--c-amber); --b-fill-ink: var(--c-deep); --b-chip: var(--c-amber); --b-chip-ink: var(--c-deep);
  --pink: #FF86AE;
  color-scheme: dark;
}
body { background: var(--c-crema); color: var(--fg); font-family: var(--font-ui); }
body::before { background: rgba(11, 19, 32, .94); }
h1, h2, h3, h4 { color: var(--head); font-family: var(--font-display); font-weight: 600; letter-spacing: -.012em; }
h1 { font-weight: 500; }
.eyebrow { color: var(--amber); font-weight: 700; letter-spacing: .2em; }
a { color: var(--c-tierra); text-decoration-color: rgba(194, 65, 12, .45); }
a:hover { color: var(--c-terra); }
.btn, .go, .tag, .chip, .map-list button, .fcol a, .navlinks a, .lang button, .portal, .vcard, .fan a, .frame, .pback, .backpt, .poi-label { --lnk: currentColor; }
footer a, #nav a, #drawer a, .hero-copy a, .portal, .vcard, .fan a, .frame, .page-head a, .cta-band a, #panel a, .earth a:not(.btn), #chooser a, #contact a { color: var(--wheat); }
.earth a:not(.btn):hover, footer a:hover, #panel a:hover { color: var(--c-crema); }
::selection { background: var(--c-amber); color: var(--c-deep); }

/* surfaces / bands */
section.band { background: var(--c-crema); }
.band.earth { background: var(--c-cacao); color: var(--fg); }
.band.stone { background: var(--c-arena); color: var(--c-cacao); }
.earth p, .earth .lead { color: var(--fg-dim); }
.earth .quote, .earth .five-list li { color: var(--c-crema); }
.quote { color: var(--c-tierra); font-weight: 500; }
.lead { color: var(--fg-dim); }
.panel-body p strong, .lead strong, .stone strong { color: var(--head); }
.earth strong { color: #FFC93C; }
.stone .eyebrow, .stone p { color: var(--stone-dim); }
.stone a:not(.btn) { color: var(--c-cacao); }
.note { border-top-color: var(--line); }
.rel div, .app, .feat div, .avi, .ally { background: var(--surface); border: 1px solid var(--line); border-radius: 20px 6px 20px 6px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 34px -22px rgba(11, 19, 32, .35); }
.earth .rel div, .earth .app, .earth .feat div, .earth .avi, .earth .ally { background: rgba(255, 247, 232, .06); box-shadow: none; }
.rel b, .app h3 { color: var(--c-tierra); }
.rel div:nth-child(5n+1) { border-top: 3px solid var(--c-amber); }
.rel div:nth-child(5n+2) { border-top: 3px solid var(--c-nat); }
.rel div:nth-child(5n+3) { border-top: 3px solid var(--c-terra); }
.rel div:nth-child(5n+4) { border-top: 3px solid var(--c-lago); }
.rel div:nth-child(5n) { border-top: 3px solid var(--c-oliva); }
.pr { border-top-color: var(--line-strong); }
.pr:nth-child(3n+1) { border-top: 3px solid var(--c-amber); } .pr:nth-child(3n+2) { border-top: 3px solid var(--c-nat); } .pr:nth-child(3n) { border-top: 3px solid var(--c-terra); }
.step .n { color: var(--c-terra); font-weight: 600; }
.tag { color: var(--c-tierra); border-color: rgba(194, 65, 12, .45); }
.earth .tag { color: var(--wheat); }
.st { color: var(--fg-mute); }
.badge.ok { color: var(--c-nat); } .badge.wait { color: var(--c-terra); }
.stone .badge.ok { color: var(--c-nat); } .stone .badge.wait { color: #A24B2C; }
.seq span { border-color: var(--line-strong); background: rgba(255, 255, 255, .35); }
.earth .seq span { background: rgba(255, 247, 232, .06); }
.seq i { color: var(--c-terra); }
.struct li { border-color: var(--line); }
table.ind th { color: var(--c-tierra); background: var(--c-arena); border-bottom-color: var(--line-strong); }
table.ind tr.grp td { background: rgba(124, 143, 61, .16); color: var(--c-cacao); }
table.ind td.code { color: var(--c-terra); }
.earth table.ind th { background: rgba(255, 247, 232, .08); color: var(--wheat); }
.earth table.ind tr.grp td { background: rgba(255, 247, 232, .05); color: var(--wheat); }
.earth table.ind td.code { color: var(--wheat); }
.table-wrap { background: var(--surface); }
.earth .table-wrap { background: rgba(255, 247, 232, .03); }
.avi svg text { fill: var(--fg-dim); }
.avi svg polygon:not([fill="none"]) { fill: rgba(74, 127, 157, .22); stroke: var(--c-lago); }
.avi svg polygon[fill="none"], .avi svg line { stroke: rgba(11, 19, 32, .22); }

/* nav (dark cacao bar) */
#nav { background: rgba(11, 19, 32, .94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 183, 3, .28); }
.brand b { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: .01em; text-transform: none; line-height: 1; white-space: nowrap; color: var(--c-crema); }
.brand b em { font-style: normal; color: var(--c-amber); }
.brand { gap: 10px; }
.navlinks a { color: #E4E8F0; font-weight: 500; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: #fff; }
.navlinks a::after { background: var(--c-amber); height: 2px; }
.lang { border-color: rgba(255, 183, 3, .55); }
.lang button { color: #E4E8F0; }
.lang button[aria-pressed="true"] { background: var(--c-amber); color: var(--c-deep); }
.menu-btn { color: var(--c-crema); border-color: rgba(255, 183, 3, .55); border-radius: 14px 3px 14px 3px; }
#drawer { background: rgba(11, 19, 32, .985); }
#drawer a.dl { color: var(--c-crema); font-weight: 500; }
#drawer a.dl:hover { color: var(--c-amber); }

/* hero: mockup lockup */
#hero { background: var(--c-deep); }
.hero-veil { background:
  linear-gradient(90deg, rgba(11, 19, 32, .9) 0%, rgba(11, 19, 32, .66) 36%, rgba(11, 19, 32, .12) 64%, transparent 84%),
  linear-gradient(0deg, rgba(11, 19, 32, .82) 0%, rgba(11, 19, 32, .3) 32%, transparent 55%); }
@media (max-width: 820px) { .hero-veil { background: linear-gradient(0deg, rgba(11, 19, 32, .95) 0%, rgba(11, 19, 32, .82) 42%, rgba(11, 19, 32, .5) 74%, rgba(11, 19, 32, .3) 100%); } }
.hero-copy { left: max(var(--gut), clamp(20px, 6vw, 88px)); right: var(--gut-r); max-width: min(640px, calc(100% - 2 * var(--gut))); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(78px, 11vh, 120px)); }
.hero-copy .eyebrow { color: #FFC93C; letter-spacing: .22em; }
.hero-copy h1 { font-size: clamp(1.15rem, 2.8vw, 1.7rem); letter-spacing: .38em; font-weight: 500; text-transform: uppercase; line-height: 1; margin: 16px 0 6px; color: var(--c-crema); text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.hero-copy h1 span { display: block; font-size: clamp(3.4rem, 12.5vw, 7.4rem); letter-spacing: .01em; font-weight: 600; line-height: .92; margin-top: 6px; color: var(--c-amber); background: linear-gradient(180deg, #F6D675, #DAA017 55%, #A8740F); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); }
.hero-line { font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.12; color: #FFE08A; max-width: 18ch; margin-top: 18px; }
.hero-sub { color: #E4E8F0; font-size: 1.02rem; max-width: 44ch; line-height: 1.6; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 183, 3, .55); width: fit-content; }
.hero-cta { margin-top: 26px; }
.hero-scroll { left: max(var(--gut), clamp(20px, 6vw, 88px)); }
@media (max-width: 640px) { .hero-copy { left: var(--gut); bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); } .hero-copy h1 { letter-spacing: .3em; } .hero-sub { font-size: .98rem; } }

/* page headers: photo, cacao veil, organic crema curve */
.page-head { border-bottom: 0; }
.page-head .bg { opacity: .85; }
.page-head::after { background: linear-gradient(0deg, rgba(11, 19, 32, .86) 0%, rgba(11, 19, 32, .55) 55%, rgba(11, 19, 32, .62)); z-index: -1; }
.page-head > .wrap { position: relative; z-index: 2; }
.page-head::before { content: ""; position: absolute; left: -6%; right: -6%; bottom: -1px; height: clamp(26px, 5vw, 64px); background: var(--c-crema); border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 1; }
.page-head h1 { color: var(--c-crema); }
.page-head .lead { color: #E4E8F0; }
.crumbs { color: #9AA5BD; } .crumbs a { color: #FFC93C; }
.page-head + section.band.earth { margin-top: -1px; }
.cta-band::after { background: linear-gradient(180deg, rgba(11, 19, 32, .88), rgba(11, 19, 32, .5) 45%, rgba(11, 19, 32, .78)); }
.cta-band h2 { color: var(--c-crema); } .cta-band p { color: #E4E8F0; }
.frame, .fan a, .vcard, .portal { border-color: rgba(255, 183, 3, .28); border-radius: 22px 6px 22px 6px; }
.frame figcaption small, .fan a .ic { color: #FFC93C; } .fan a .ic { border-color: #FFC93C; }
.frame figcaption p, .fan a h3, .vcard h3, .portal h3 { color: var(--c-crema); }
.portal .go { color: #FFC93C; }
.photo { border-radius: 26px 6px 26px 6px; border-color: var(--line); box-shadow: 0 24px 50px -28px rgba(11, 19, 32, .55); }

/* buttons: leaf-cut + arrow seed, gold foil primary */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 11px 24px; border-radius: 26px 6px 26px 6px; border: 1.5px solid var(--b-line); color: var(--b-ink); background: linear-gradient(var(--b-fill), var(--b-fill)) no-repeat left center / 0% 100%, transparent; backdrop-filter: none; font-family: var(--font-ui); font-size: .95rem; font-weight: 700; letter-spacing: .01em; text-transform: none; box-shadow: none; transition: background-size .5s var(--ease), color .35s, border-color .35s, transform .3s var(--ease), box-shadow .35s; }
.btn:hover { background-size: 100% 100%; color: var(--b-fill-ink); border-color: var(--b-fill); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(11, 19, 32, .6); }
.btn:active { transform: translateY(0) scale(.985); }
.btn .arr { flex: none; width: 28px; height: 28px; margin-right: -12px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; line-height: 1; background: var(--b-chip); color: var(--b-chip-ink); transition: transform .4s var(--ease), background .3s; }
.btn:hover .arr { transform: rotate(-45deg); background: var(--b-fill-ink); color: var(--b-fill); }
.btn.solid { border: 0; color: var(--c-deep); background: linear-gradient(135deg, #F7D87F 0%, #E3AD26 38%, #DAA017 55%, #B97F0E 100%); box-shadow: 0 10px 26px -10px rgba(185, 127, 14, .75), inset 0 1px 0 rgba(255, 255, 255, .55); padding: 12px 26px; }
.btn.solid::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn.solid:hover { background: linear-gradient(135deg, #FBE39A 0%, #FFB703 40%, #DAA017 60%, #C58A12 100%); color: var(--c-deep); border: 0; box-shadow: 0 16px 32px -12px rgba(185, 127, 14, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.solid:hover::after { transform: translateX(120%); }
.btn.solid .arr { background: var(--c-deep); color: #FFC93C; }
.btn.solid:hover .arr { background: var(--c-deep); color: #FFC93C; }
.btn.ink { --b-ink: var(--c-cacao); --b-line: var(--c-cacao); --b-fill: var(--c-cacao); --b-fill-ink: var(--c-crema); background: linear-gradient(var(--b-fill), var(--b-fill)) no-repeat left center / 0% 100%, transparent; }
.btn.sm { min-height: 42px; padding: 8px 18px; font-size: .86rem; border-radius: 20px 5px 20px 5px; } .btn.sm .arr { width: 24px; height: 24px; margin-right: -8px; }
.btn:not(:has(.arr)) { padding-inline: 24px; }
.btn:focus-visible, .chip:focus-visible, .go:focus-visible { outline: 3px solid var(--c-terra); outline-offset: 3px; }
.go { color: var(--c-tierra); border-bottom: 0; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat; padding-bottom: 3px; transition: background-size .4s var(--ease), color .3s; }
.go:hover { background-size: 40% 1.5px; color: var(--c-terra); }
.chip { background: rgba(11, 19, 32, .82); color: var(--c-crema); border: 1px solid rgba(255, 183, 3, .55); border-radius: 18px 4px 18px 4px; font-weight: 600; }
button.chip:hover, .chip:hover { background: var(--c-amber); color: var(--c-deep); border-color: var(--c-amber); }
button.chip[aria-pressed="true"] { background: rgba(255, 183, 3, .25); border-color: var(--c-amber); }
.chip.prog b { color: #FFC93C; }
.x-btn { border-color: rgba(255, 183, 3, .6); color: var(--c-crema); } .x-btn:hover { background: var(--c-amber); color: var(--c-deep); }
.pback, .backpt { background: rgba(11, 19, 32, .9); border-color: var(--c-amber); color: #FFC93C; border-radius: 18px 4px 18px 4px; }
.pback:hover, .backpt:hover { background: var(--c-amber); color: var(--c-deep); }

/* world UI */
.poi-label { background: rgba(11, 19, 32, .86); border-color: rgba(255, 183, 3, .6); color: var(--c-crema); font-weight: 600; }
.poi-label .dot { background: var(--c-amber); color: var(--c-deep); box-shadow: 0 0 12px rgba(255, 183, 3, .75); }
.poi-label[data-state="visited"] .dot { background: var(--c-crema); }
.poi-label[data-state="available"] .dot { background: #FFB703; }
.poi-label:hover, .poi-label.near { background: var(--c-amber); color: var(--c-deep); border-color: var(--c-amber); }
.poi-label:hover .dot, .poi-label.near .dot { background: var(--c-deep); color: var(--c-amber); }
#panel { background: linear-gradient(180deg, rgba(17, 28, 48, .97), rgba(11, 19, 32, .985)); border-left-color: rgba(255, 183, 3, .5); }
.panel-q { color: #FFC93C; border-left-color: var(--c-amber); }
.panel-body h2 { color: var(--c-crema); } .panel-body p { color: #E4E8F0; } .panel-body p strong { color: #FFC93C; }
.map-stage, .map-card, .c-box { background: linear-gradient(180deg, #111C30, #0B1320); }
.mc-num { color: var(--c-deep); } .map-list button { color: var(--c-crema); background: rgba(255, 247, 232, .06); } .map-list button b { background: var(--c-amber); color: var(--c-deep); }
.map-list button:hover, .map-list button.on { border-color: var(--c-amber); background: rgba(255, 183, 3, .16); }
.stick i { background: radial-gradient(circle at 35% 30%, #F7D87F, var(--c-amber)); }
.c-box label { color: #FFC93C; } .c-box input, .c-box textarea { color: var(--c-crema); background: rgba(255, 247, 232, .07); }
.c-err { color: #FFB59C; }
.av-card { background: linear-gradient(180deg, rgba(17, 28, 48, .9), rgba(11, 19, 32, .92)); border-color: rgba(255, 183, 3, .28); border-radius: 22px 6px 22px 6px; }
.av-card[aria-pressed="true"] { border-color: var(--c-amber); box-shadow: 0 0 0 1px var(--c-amber), 0 18px 40px rgba(255, 183, 3, .22); }
.av-card[aria-pressed="true"] span { color: #FFC93C; }
.av-face { border-color: rgba(255, 183, 3, .7); }
.choose-box p.sub { font-family: var(--font-script); font-style: normal; font-size: clamp(1.7rem, 4vw, 2.3rem); color: #FFE08A; line-height: 1.1; }
.choose-box h2 { color: var(--c-crema); }
.toast { background: rgba(11, 19, 32, .94); color: var(--c-crema); border-color: var(--c-amber); }

/* script accents */
.five-list li { font-family: var(--font-script); font-style: normal; font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.2; color: #FFE08A; border-color: rgba(255, 183, 3, .3); text-align: center; }
.quote-sm { color: var(--c-cacao); border-left-color: var(--c-terra); font-size: 1.25rem; }
.whochips span { border-color: var(--line-strong); }
.lens { border-top-width: 3px; }

/* ---- long-text dynamics ---- */
.rich .lede { font-family: var(--font-display); font-weight: 600; font-size: 1.22em; line-height: 1.3; color: var(--head); display: block; margin-bottom: .45em; text-wrap: balance; }
.earth .rich .lede { color: var(--c-crema); }
.stone .rich .lede { color: var(--c-deep); }
.lead.rich::first-letter, .band .stack > p.rich:first-of-type::first-letter { }
.rich .lede::first-letter { color: var(--c-terra); font-size: 1.5em; font-weight: 700; padding-right: .02em; }
.earth .rich .lede::first-letter { color: var(--c-amber); }
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
@media (min-width: 861px) { #view .band:nth-of-type(even) .split > .photo { order: -1; } }
.band .stack > .quote { text-align: left; }
@media (min-width: 861px) { .split .stack .lead:first-of-type { font-size: calc(var(--fs-lead) * 1.08); } }

/* ---- footer ---- */
footer { background: var(--c-deep); border-top: 3px solid var(--c-amber); }
.foot3 { padding-block: clamp(32px, 5vw, 56px) calc(env(safe-area-inset-bottom, 0px) + 22px); display: grid; gap: clamp(22px, 3vw, 34px); }
.f-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.f-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--c-crema); min-width: 0; }
.f-brand img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.f-brand span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f-brand b { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--c-crema); text-transform: none; letter-spacing: .005em; }
.f-brand em { font-style: normal; font-size: .9rem; color: var(--fg-mute); max-width: 44ch; line-height: 1.4; }
.f-credit { margin: 0; padding: 18px 22px; border-left: 3px solid var(--c-amber); background: rgba(255, 247, 232, .05); border-radius: 0 18px 4px 0; font-size: 1rem; line-height: 1.6; color: #E4E8F0; max-width: none; }
.f-credit strong { color: #FFC93C; }
.f-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(22px, 4vw, 56px); padding-block: 6px; border-top: 1px solid var(--line); padding-top: clamp(22px, 3vw, 34px); }
.fcol h4 { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: #FFC93C; font-weight: 700; margin: 0 0 12px; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fcol.wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.fcol li a { display: inline-block; padding: 6px 0; font-size: .95rem; color: #E4E8F0; text-decoration: none; background: linear-gradient(var(--c-amber), var(--c-amber)) left bottom / 0 1.5px no-repeat; transition: background-size .35s var(--ease), color .25s; }
.fcol li a:hover { color: #fff; background-size: 100% 1.5px; transform: none; }
.f-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--fg-mute); }
.f-legal { display: grid; gap: 4px; max-width: 62ch; } .f-legal span { font-size: .88rem; color: #E4E8F0; } .f-legal small { font-size: .78rem; line-height: 1.45; color: var(--fg-mute); }
.f-end { display: inline-flex; align-items: center; gap: 14px; }
.built { font-size: .9rem; color: #E4E8F0; } .built a { color: #FFC93C; }
.f-top-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid rgba(255, 183, 3, .7); border-radius: 16px 4px 16px 4px; color: #FFC93C; text-decoration: none; font-size: 1.1rem; transition: background .3s, color .3s, transform .3s var(--ease); }
.f-top-btn:hover { background: var(--c-amber); color: var(--c-deep); transform: translateY(-3px); }
@media (max-width: 860px) { .f-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fcol.wide { grid-column: 1 / -1; } }
@media (max-width: 520px) { .f-cols { grid-template-columns: minmax(0, 1fr); } .f-top .btn { width: 100%; justify-content: center; } .f-bar { align-items: flex-start; } .f-brand b { font-size: 1.45rem; } .fcol.wide ul { column-gap: 12px; } }

/* ---- Diploma ---- */
.dip-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dip-facts > div { background: var(--c-cacao); color: var(--c-crema); border-radius: 22px 6px 22px 6px; padding: 22px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.dip-facts > div:nth-child(2) { background: var(--c-nat); } .dip-facts > div:nth-child(3) { background: var(--c-terra); }
.dip-facts b { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: .9; color: #F6D675; }
.dip-facts span { font-size: .9rem; line-height: 1.35; color: #FFF7E8; }
@media (max-width: 860px) { .dip-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dip-facts { grid-template-columns: minmax(0, 1fr); } .dip-facts > div { flex-direction: row; align-items: center; gap: 16px; } .dip-facts b { min-width: 3ch; } }
.gains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gains li { display: grid; gap: 10px; align-content: start; padding: 22px 20px; border: 1px solid var(--line); border-radius: 22px 6px 22px 6px; background: rgba(255, 247, 232, .05); }
.gains li:nth-child(even) { margin-top: 18px; }
.gains i { font-style: normal; font-family: var(--font-script); font-size: 2.6rem; line-height: 1; color: var(--c-amber); }
.gains p { margin: 0; color: #FFF7E8; font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) { .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gains li:nth-child(even) { margin-top: 0; } }
@media (max-width: 560px) { .gains { grid-template-columns: minmax(0, 1fr); } .gains li { grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 16px; } }
.mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); counter-reset: m; }
.mods li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line-strong); align-items: start; }
.mods .mn { font-family: var(--font-display); font-weight: 600; font-size: 2.3rem; line-height: 1; color: var(--c-terra); }
.mods li:nth-child(3n+2) .mn { color: var(--c-nat); } .mods li:nth-child(3n) .mn { color: var(--c-lago); }
.mods h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); margin-bottom: 4px; } .mods p { margin: 0; font-size: .96rem; color: var(--fg-dim); }
@media (max-width: 760px) { .mods { grid-template-columns: minmax(0, 1fr); } }
.dip-for, .dip-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(20px, 5vw, 72px); align-items: start; }
@media (max-width: 800px) { .dip-for, .dip-info { grid-template-columns: minmax(0, 1fr); } }
.dip-for h2, .dip-info h2 { margin-top: 10px; font-size: var(--fs-h2); }
.stone .whochips span { background: var(--c-crema); border-color: rgba(11, 19, 32, .3); font-size: 1.05rem; }
.flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 10px; }
.flow span { font-family: var(--font-script); font-size: clamp(2rem, 5vw, 3rem); color: #FFE08A; line-height: 1.1; }
.flow i { font-style: normal; color: var(--c-amber); font-size: 1.3rem; }
.faculty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); margin-bottom: 26px; }
.faculty article { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
.faculty img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 3px solid var(--c-amber); }
.faculty h3 { font-size: 1.25rem; margin-bottom: 6px; } .faculty p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--fg-dim); }
@media (max-width: 900px) { .faculty { grid-template-columns: minmax(0, 1fr); } }
.dip-info dl { margin: 0; display: grid; gap: 0; }
.dip-info dl > div { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--stone-line); }
.dip-info dt { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--c-tierra); padding-top: 4px; } .dip-info dd { margin: 0; font-size: 1.02rem; }
@media (max-width: 520px) { .dip-info dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.dip-lead { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.2; }

/* ---- avatar cards ---- */
.av-card em.av-role { font-style: normal; font-weight: 700; font-size: .84rem; color: #FFC93C; line-height: 1.25; }
.av-card small.av-trait { font-size: .72rem; letter-spacing: .06em; color: #E4E8F0; max-width: 22ch; }
.av-card small.av-desc { font-size: .8rem; line-height: 1.4; color: var(--fg-mute); max-width: 26ch; }
.av-card span { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--c-crema); letter-spacing: 0; }
@media (max-width: 700px) { .av-card small.av-desc { display: none; } .av-card small.av-trait { display: block; max-width: none; font-size: .68rem; } .av-card span { font-size: 1.2rem; } }
.av-card small { display: block; }
@media (max-width: 520px) { .av-card small.av-trait { display: none; } }
@media (max-width: 560px) { #nav { gap: 8px; } .brand { gap: 8px; min-width: 0; } .brand img { width: 32px; height: 32px; } .brand b { font-size: 1.08rem; } .lang button { padding: 6px 9px; font-size: 11px; } .menu-btn { padding: 7px 11px; font-size: 11px; letter-spacing: .06em; } }
@media (max-width: 370px) { .brand b { font-size: .98rem; } .brand img { display: none; } }
.cta-band p strong { color: #FFC93C; font-weight: 700; }
.rich .lede::first-letter, .earth .rich .lede::first-letter { color: inherit; font-size: inherit; font-weight: inherit; padding: 0; }
#chooser { place-items: safe center; align-content: safe center; }
.av-card > img:not(.av-face) { max-height: 24svh; }
@media (max-height: 760px) and (min-width: 701px) { .av-card small.av-desc { display: none; } .av-card > img:not(.av-face) { max-height: 20svh; } }
@media (min-width: 1101px) { .portals .portal:last-child:nth-child(4n+3) { grid-column: span 2; } }

/* =====================================================================
   v6 · VIBRANTE + EJECUTIVA
   Navy #0B1320 · Sol #FFB703 · Naranja #FB8500 · Fuego #FB5607 · Turquesa #2EC4B6 · Magenta #FF006E · Violeta #6A4C93 · Crema #F7F3E9
   Merriweather (títulos) · Libre Franklin (texto)
   ===================================================================== */
:root {
  --c-amber: #FFB703; --c-tierra: #C2410C; --c-nat: #0F7A70; --c-arena: #FFE8A8; --c-crema: #F7F3E9;
  --c-cacao: #0B1320; --c-oliva: #5A8F1E; --c-terra: #FB5607; --c-lago: #6A4C93; --c-cielo: #A8D8EA; --c-deep: #0B1320;
  --sun: #FFB703; --hot: #FB8500; --fire: #FB5607; --mag: #FF006E; --teal: #2EC4B6; --navy: #0B1320; --navy2: #111C30; --violet: #6A4C93; --leaf: #5A8F1E;
  --font-display: "Merriweather", "Georgia", serif;
  --font-quote: var(--font-display);
  --font-ui: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: var(--font-display);
  --bg: #F7F3E9; --bg-2: #EFE8D6; --surface: #FFFFFF; --surface-2: #FFF1C9;
  --fg: #1B2640; --fg-dim: #3F4C6B; --fg-mute: #5E6B87; --head: #0B1320;
  --amber: #C2410C; --wheat: #C2410C;
  --line: rgba(11, 19, 32, .14); --line-strong: rgba(11, 19, 32, .45);
  --stone: #FFB703; --stone-ink: #0B1320; --stone-dim: #1B2640; --stone-line: rgba(11, 19, 32, .3);
  --b-ink: #0B1320; --b-line: #0B1320; --b-fill: #0B1320; --b-fill-ink: #F7F3E9; --b-chip: #FFB703; --b-chip-ink: #0B1320;
  --pink: #FF006E;
}
#hero, #nav, #drawer, #panel, #chooser, #lite, #contact, footer, .earth, .page-head, .cta-band, .frame, .fan a, .vcard, .portal, .hud, .toast, .backpt, .pback, .poi-layer, .dark {
  --bg: #0B1320; --bg-2: #111C30; --surface: rgba(247, 243, 233, .06); --surface-2: rgba(247, 243, 233, .1);
  --fg: #F7F3E9; --fg-dim: #D6DBE6; --fg-mute: #9AA5BD; --head: #F7F3E9;
  --amber: #FFB703; --wheat: #FFB703; --green: #7BD389; --sky: #8FD3E8;
  --line: rgba(247, 243, 233, .16); --line-strong: rgba(255, 183, 3, .6);
  --b-ink: #F7F3E9; --b-line: #FFB703; --b-fill: #FFB703; --b-fill-ink: #0B1320; --b-chip: #FFB703; --b-chip-ink: #0B1320;
  --pink: #FF4D94;
}
body { background: #F7F3E9; font-weight: 400; letter-spacing: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.015em; line-height: 1.12; }
h1 { font-weight: 900; } h2 { font-weight: 900; } h3, h4 { font-weight: 700; }
strong, b { font-weight: 700; }
.eyebrow { font-family: var(--font-ui); font-weight: 800; letter-spacing: .22em; font-size: .72rem; display: inline-flex; align-items: center; gap: 10px; color: var(--amber); }
.eyebrow::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50% 0 50% 0; background: var(--hot); transform: rotate(0deg); }
.crumbs .eyebrow::before, .c-box .eyebrow::before { display: none; }
.lead { font-weight: 400; }
a { color: #C2410C; }
a:hover { color: var(--mag); }
::selection { background: var(--sun); color: var(--navy); }
.quote { color: #C2410C; font-weight: 700; font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2.3rem); line-height: 1.3; }
.earth .quote { color: #FFC93C; }

/* bands: navy / cream / sun */
section.band { background: #F7F3E9; }
.band.earth { background: var(--navy); background-image: radial-gradient(rgba(255, 183, 3, .1) 1px, transparent 1.4px); background-size: 26px 26px; }
.band.stone { background: var(--sun); color: var(--navy); background-image: radial-gradient(rgba(11, 19, 32, .08) 1px, transparent 1.4px); background-size: 22px 22px; }
.stone .eyebrow { color: var(--navy); } .stone .eyebrow::before { background: var(--navy); }
.stone p, .stone .lead, .stone .role { color: #1B2640; }
.stone h2, .stone h3 { color: var(--navy); }
.stone .note { color: #1B2640; border-color: rgba(11, 19, 32, .3); }
.stone a:not(.btn) { color: var(--navy); text-decoration-color: var(--navy); }
.stone .badge.ok { color: #0B3D2E; } .stone .badge.wait { color: #7A1F00; }
.earth .eyebrow::before { background: var(--sun); }
.earth h2, .earth h3 { color: #F7F3E9; }
.earth strong { color: var(--sun); }

/* nav */
#nav { background: rgba(11, 19, 32, .94); border-bottom: 1px solid rgba(255, 183, 3, .35); }
body::before { background: rgba(11, 19, 32, .96); }
.brand b { font-family: var(--font-display); font-weight: 900; font-size: 1.12rem; letter-spacing: -.01em; }
.navlinks a { font-weight: 600; color: #D6DBE6; font-size: .84rem; }
.navlinks a::after { background: var(--sun); }
.lang button[aria-pressed="true"] { background: var(--sun); color: var(--navy); font-weight: 800; }
#prog { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--sun), var(--hot), var(--mag)); z-index: 160; pointer-events: none; }

/* hero: stronger */
.hero-veil { background:
  linear-gradient(90deg, rgba(11, 19, 32, .92) 0%, rgba(11, 19, 32, .7) 36%, rgba(11, 19, 32, .1) 66%, transparent 86%),
  linear-gradient(0deg, rgba(11, 19, 32, .85) 0%, rgba(11, 19, 32, .25) 34%, transparent 58%),
  radial-gradient(80% 60% at 85% 100%, rgba(251, 86, 7, .28), transparent 70%); }
@media (max-width: 820px) { .hero-veil { background: linear-gradient(0deg, rgba(11, 19, 32, .96) 0%, rgba(11, 19, 32, .84) 44%, rgba(11, 19, 32, .5) 76%, rgba(11, 19, 32, .32) 100%); } }
.hero-copy .eyebrow { color: var(--sun); font-size: .74rem; }
.hero-copy h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: .36em; margin: 18px 0 6px; color: #F7F3E9; }
.hero-copy h1 span { font-weight: 900; font-size: clamp(2.7rem, 10.5vw, 6.2rem); letter-spacing: -.025em; line-height: .98; margin-top: 8px; text-transform: uppercase; background: linear-gradient(100deg, #FFD54A 0%, #FFB703 38%, #FB8500 74%, #FB5607 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); }
.hero-line { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); line-height: 1.4; color: #F7F3E9; max-width: 26ch; margin-top: 20px; padding-left: 16px; border-left: 4px solid var(--hot); }
.hero-sub { color: #D6DBE6; border-top: 0; padding-top: 0; font-size: 1rem; max-width: 46ch; }
@media (max-width: 640px) { .hero-copy h1 { letter-spacing: .26em; } .hero-copy h1 span { font-size: clamp(2.3rem, 12.5vw, 3.4rem); } }

/* page heads: full-bleed, duotone, big */
.page-head { padding-block: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + clamp(56px, 10vw, 128px)) clamp(64px, 9vw, 120px); }
.page-head .bg { opacity: 1; filter: saturate(1.15) contrast(1.05); }
.page-head::after { background: linear-gradient(100deg, rgba(11, 19, 32, .94) 0%, rgba(11, 19, 32, .72) 46%, rgba(11, 19, 32, .25) 100%), linear-gradient(0deg, rgba(251, 86, 7, .3), transparent 45%); }
.page-head::before { background: #F7F3E9; height: clamp(22px, 4vw, 52px); }
.page-head h1 { font-size: clamp(2.2rem, 1.2rem + 4.6vw, 4.6rem); line-height: 1.05; letter-spacing: -.025em; max-width: 17ch; text-wrap: balance; color: #F7F3E9; }
.page-head h1::after { content: ""; display: block; width: clamp(64px, 12vw, 140px); height: 6px; margin-top: 22px; background: linear-gradient(90deg, var(--sun), var(--hot), var(--mag)); border-radius: 6px 0 6px 0; }
.page-head .lead { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); max-width: 54ch; color: #E4E8F0; }
.page-head .eyebrow { color: var(--sun); }

/* seed frame (icons, numbers, chips) */
.seed, .fan a .ic, .pr .ic, .vcard .ic, .gains i, .mods .mn, .step .n, .dip-facts b { }
.ih { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ih h3 { margin: 0; min-width: 0; }
.ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50% 0 50% 0; background: var(--sun); color: var(--navy); border: 0; box-shadow: 4px 4px 0 var(--hot); transform: rotate(-8deg); transition: transform .45s var(--ease), box-shadow .3s; }
.ic svg { width: 26px; height: 26px; transform: rotate(8deg); }
a:hover .ic, .pr:hover .ic { transform: rotate(0deg) scale(1.06); box-shadow: 6px 6px 0 var(--mag); }
.fan a .ic { border: 0; background: var(--sun); color: var(--navy); }
.fan a:nth-child(2) .ic { background: var(--hot); box-shadow: 4px 4px 0 var(--sun); } .fan a:nth-child(3) .ic { background: var(--teal); box-shadow: 4px 4px 0 var(--sun); }
.fan a:nth-child(4) .ic { background: var(--mag); color: #fff; box-shadow: 4px 4px 0 var(--sun); } .fan a:nth-child(5) .ic { background: #8ED081; box-shadow: 4px 4px 0 var(--sun); }
.fan a h3 { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: .02em; text-transform: uppercase; font-weight: 900; line-height: 1.15; }
.fan a .in { gap: 12px; }
.vcard .in { gap: 10px; display: flex; flex-direction: column; }
.vcard h3 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 900; }
.vcard .ic { width: 42px; height: 42px; } .vcard .ic svg { width: 21px; height: 21px; }
.pr .ic { width: 46px; height: 46px; } .pr .ic svg { width: 23px; height: 23px; }
.pr:nth-child(2) .ic { background: var(--teal); } .pr:nth-child(3) .ic { background: var(--mag); color: #fff; }
.pr h3 { font-size: 1.3rem; }
.gains i, .mods .mn, .step .n { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50% 0 50% 0; background: var(--sun); color: var(--navy); font-family: var(--font-display); font-style: normal; font-weight: 900; font-size: 1.15rem; line-height: 1; box-shadow: 4px 4px 0 var(--hot); flex: none; }
.gains i { font-size: 1.1rem; }
.mods li:nth-child(3n+2) .mn { background: var(--teal); box-shadow: 4px 4px 0 var(--sun); color: var(--navy); } .mods li:nth-child(3n) .mn { background: var(--mag); color: #fff; box-shadow: 4px 4px 0 var(--sun); }
.mods li { grid-template-columns: 54px minmax(0, 1fr); align-items: center; }
.step { grid-template-columns: 70px minmax(0, 1fr); }
.step .n { font-size: 1.1rem; width: 52px; height: 52px; }

/* boxes: seed-cut corners + corner seed + colored top */
.rel div, .app, .feat div, .avi, .ally, .faculty article, .gains li, .map-card { position: relative; border-radius: 40px 6px 40px 6px; border: 1.5px solid var(--navy); background: #fff; box-shadow: 6px 6px 0 var(--navy); overflow: visible; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.rel div:hover, .app:hover, .feat div:hover, .ally:hover, .faculty article:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--hot); }
.rel div::before, .app::before, .feat div::before, .ally::before, .faculty article::before { content: ""; position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; border-radius: 50% 0 50% 0; background: var(--hot); }
.rel div:nth-child(5n+2)::before, .app:nth-child(3n+2)::before, .feat div:nth-child(2)::before { background: var(--teal); }
.rel div:nth-child(5n+3)::before, .app:nth-child(3n)::before { background: var(--mag); }
.rel div:nth-child(5n+4)::before { background: var(--violet); } .rel div:nth-child(5n)::before { background: var(--leaf); }
.rel div, .app, .feat div { border-top-width: 1.5px; }
.rel div { padding: 22px 20px 20px; } .rel b { color: var(--navy); font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; padding-right: 26px; }
.rel span, .feat span, .app p { color: #3F4C6B; }
.app h3, .feat b { color: var(--navy); font-weight: 900; }
.earth .rel div, .earth .app, .earth .feat div, .earth .avi, .earth .ally, .earth .faculty article, .earth .gains li { background: var(--navy2); border-color: var(--sun); box-shadow: 6px 6px 0 var(--sun); }
.earth .rel div:hover, .earth .app:hover, .earth .ally:hover { box-shadow: 10px 10px 0 var(--hot); }
.earth .rel b, .earth .app h3, .earth .feat b { color: #fff; } .earth .rel span, .earth .feat span, .earth .app p { color: #D6DBE6; }
.avi { background: #fff; padding: clamp(22px, 4vw, 48px); } .avi::before { display: none; }
.ally { background: #fff; } .ally h2 { color: var(--navy); }
.ally .lead, .ally p { color: #3F4C6B; } .ally .lead strong, .ally p strong { color: var(--navy); }
.gains li { background: var(--navy2); } .gains i { }
.gains p { color: #F7F3E9; }
.gains li:nth-child(3n+2) i { background: var(--teal); box-shadow: 4px 4px 0 var(--sun); } .gains li:nth-child(3n) i { background: var(--mag); color: #fff; box-shadow: 4px 4px 0 var(--sun); }
.faculty article { padding: 20px; background: #fff; border-color: var(--navy); } .faculty h3 { color: var(--navy); } .faculty p { color: #3F4C6B; }
.faculty img { border: 3px solid var(--sun); box-shadow: 3px 3px 0 var(--navy); }
.dip-facts > div { border-radius: 40px 6px 40px 6px; box-shadow: 6px 6px 0 var(--navy); background: var(--navy); }
.dip-facts > div:nth-child(2) { background: var(--teal); color: var(--navy); } .dip-facts > div:nth-child(2) b, .dip-facts > div:nth-child(2) span { color: var(--navy); }
.dip-facts > div:nth-child(3) { background: var(--fire); } .dip-facts b { color: var(--sun); font-weight: 900; } .dip-facts > div:nth-child(3) b { color: #fff; }
.dip-facts b { width: auto; height: auto; background: none; box-shadow: none; display: block; font-size: clamp(2.6rem, 6vw, 4rem); }
.table-wrap { border: 1.5px solid var(--navy); border-radius: 30px 6px 30px 6px; box-shadow: 6px 6px 0 var(--navy); overflow: auto; background: #fff; }
table.ind th { background: var(--navy); color: var(--sun); border: 0; }
table.ind tr.grp td { background: #FFF1C9; color: var(--navy); font-weight: 900; }
table.ind td.code { color: #C2410C; }
.earth .table-wrap { background: var(--navy2); border-color: var(--sun); box-shadow: 6px 6px 0 var(--sun); }
.earth table.ind th { background: var(--sun); color: var(--navy); } .earth table.ind tr.grp td { background: rgba(255, 183, 3, .14); color: var(--sun); } .earth table.ind td.code { color: var(--sun); }
.avi svg polygon:not([fill="none"]) { fill: rgba(46, 196, 182, .3); stroke: var(--teal); stroke-width: 2.5; }
.avi svg polygon[fill="none"], .avi svg line { stroke: rgba(11, 19, 32, .25); }
.photo { border: 1.5px solid var(--navy); border-radius: 60px 8px 60px 8px; box-shadow: 10px 10px 0 var(--hot); }
.frame, .fan a, .vcard, .portal { border: 1.5px solid rgba(255, 183, 3, .55); border-radius: 44px 6px 44px 6px; }
.frame::after, .fan a::after, .vcard::after, .portal::after { background: linear-gradient(0deg, rgba(11, 19, 32, .96) 6%, rgba(11, 19, 32, .5) 42%, rgba(11, 19, 32, .05) 74%); }
.portal h3, .frame figcaption p { font-family: var(--font-display); font-weight: 900; }
.portal .go { opacity: 1; transform: none; color: var(--sun); }
.portal { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.portal:hover { transform: translateY(-5px); box-shadow: 8px 8px 0 var(--sun); }
.portal:nth-child(4n+2):hover { box-shadow: 8px 8px 0 var(--teal); } .portal:nth-child(4n+3):hover { box-shadow: 8px 8px 0 var(--mag); } .portal:nth-child(4n):hover { box-shadow: 8px 8px 0 var(--hot); }
.frame figcaption small { color: var(--sun); font-weight: 800; letter-spacing: .2em; }
.seq span { border: 1.5px solid var(--navy); border-radius: 999px 8px 999px 8px; background: #fff; font-weight: 700; box-shadow: 3px 3px 0 var(--hot); }
.earth .seq span { background: var(--navy2); border-color: var(--sun); color: #fff; box-shadow: 3px 3px 0 var(--sun); }
.seq i { color: var(--hot); }
.whochips span { font-family: var(--font-ui); font-weight: 700; font-size: .95rem; border: 1.5px solid var(--navy); border-radius: 999px 8px 999px 8px; background: #fff; box-shadow: 3px 3px 0 var(--navy); }
.stone .whochips span { background: #fff; color: var(--navy); }
.lens { border-top: 6px solid var(--c, var(--hot)); padding-top: 14px; } .lens b { font-weight: 900; font-size: 1.1rem; color: var(--navy); } .lens span { color: #3F4C6B; }
.earth .lens b { color: #fff; } .earth .lens span { color: #D6DBE6; }
.tag { border: 1.5px solid currentColor; border-radius: 999px 6px 999px 6px; font-weight: 700; color: #C2410C; }
.earth .tag { color: var(--sun); }
.st { border-style: solid; border-radius: 999px 6px 999px 6px; font-weight: 700; }
.badge { border-radius: 999px 6px 999px 6px; font-weight: 800; }
.note { color: #5E6B87; } .earth .note { color: #9AA5BD; }

/* buttons: seed-cut, hard shadow, seed arrow */
.btn { border-radius: 999px 10px 999px 10px; border: 2px solid var(--b-line); font-family: var(--font-ui); font-weight: 800; letter-spacing: .01em; font-size: .95rem; padding: 12px 22px 12px 26px; background: transparent; color: var(--b-ink); box-shadow: 4px 4px 0 var(--b-line); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .3s, color .3s; overflow: visible; isolation: auto; min-height: 50px; }
.btn:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--b-line); background: var(--b-fill); color: var(--b-fill-ink); border-color: var(--b-fill); background-size: auto; }
.btn .arr { width: 30px; height: 30px; margin-right: -10px; border-radius: 50% 0 50% 0; background: var(--b-chip); color: var(--b-chip-ink); font-weight: 900; transform: rotate(0); transition: transform .35s var(--ease); }
.btn:hover .arr { transform: rotate(-45deg) scale(1.06); background: var(--b-chip); color: var(--b-chip-ink); }
.btn.solid { border: 2px solid var(--navy); color: var(--navy); background: linear-gradient(120deg, #FFD54A, #FFB703 55%, #FB8500); box-shadow: 5px 5px 0 var(--navy); }
.btn.solid::after { display: none; }
.btn.solid:hover { background: linear-gradient(120deg, #FFE27A, #FFC21F 55%, #FF9A1F); color: var(--navy); border-color: var(--navy); box-shadow: 1px 1px 0 var(--navy); }
.btn.solid .arr, .btn.solid:hover .arr { background: var(--navy); color: var(--sun); }
.earth .btn.solid, .page-head .btn.solid, .cta-band .btn.solid, footer .btn.solid, .hero-copy .btn.solid, #chooser .btn.solid, #panel .btn.solid { border-color: var(--sun); box-shadow: 5px 5px 0 var(--hot); }
.earth .btn.solid:hover, .page-head .btn.solid:hover, .cta-band .btn.solid:hover, footer .btn.solid:hover, .hero-copy .btn.solid:hover, #chooser .btn.solid:hover, #panel .btn.solid:hover { box-shadow: 1px 1px 0 var(--hot); }
.btn.ink { --b-ink: var(--navy); --b-line: var(--navy); --b-fill: var(--navy); --b-fill-ink: #F7F3E9; color: var(--navy); box-shadow: 4px 4px 0 var(--navy); background: #fff; }
.stone .btn.ink, .stone .btn { background: #fff; --b-chip: var(--navy); --b-chip-ink: var(--sun); }
.stone .btn:hover, .stone .btn.ink:hover { background: var(--navy); color: var(--sun); }
.btn.sm { min-height: 42px; padding: 8px 16px 8px 20px; font-size: .86rem; box-shadow: 3px 3px 0 var(--b-line); } .btn.sm .arr { width: 24px; height: 24px; }
.btn:not(:has(.arr)) { padding-inline: 22px; }
.hero-copy .btn:not(.solid), #chooser .btn:not(.solid), .cta-band .btn:not(.solid) { background: rgba(11, 19, 32, .55); }
.chip { background: rgba(11, 19, 32, .88); border: 1.5px solid var(--sun); border-radius: 999px 8px 999px 8px; font-weight: 700; }
button.chip:hover, .chip:hover { background: var(--sun); color: var(--navy); }
.x-btn { border: 2px solid var(--sun); border-radius: 50% 0 50% 0; width: 42px; height: 42px; }
.x-btn:hover { background: var(--sun); color: var(--navy); }
.pback, .backpt { border: 2px solid var(--sun); border-radius: 999px 8px 999px 8px; background: rgba(11, 19, 32, .94); color: var(--sun); box-shadow: 3px 3px 0 var(--hot); }
.go { font-weight: 800; color: #C2410C; } .earth .go, .portal .go, .cta-band .go { color: var(--sun); }
.lang { border: 1.5px solid var(--sun); }
.menu-btn { border: 1.5px solid var(--sun); border-radius: 999px 8px 999px 8px; color: #F7F3E9; font-weight: 700; }

/* world UI */
.poi-label { background: rgba(11, 19, 32, .9); border: 1.5px solid var(--sun); font-weight: 700; }
.poi-label .dot { background: var(--sun); color: var(--navy); border-radius: 50% 0 50% 0; transform: rotate(-8deg); box-shadow: 0 0 14px rgba(255, 183, 3, .8); }
.poi-label[data-state="visited"] .dot { background: var(--teal); box-shadow: 0 0 12px rgba(46, 196, 182, .7); }
.poi-label[data-state="available"] .dot { background: var(--hot); }
.poi-label:hover, .poi-label.near { background: var(--sun); color: var(--navy); }
.poi-label:hover .dot, .poi-label.near .dot { background: var(--navy); color: var(--sun); }
#panel { background: linear-gradient(180deg, #111C30, #0B1320); border-left: 3px solid var(--sun); }
.panel-img::after { background: linear-gradient(0deg, #111C30, rgba(17, 28, 48, 0) 70%); }
.panel-body h2 { color: #fff; font-weight: 900; } .panel-q { color: var(--sun); border-left-color: var(--hot); font-weight: 400; font-style: italic; }
.map-stage { background: radial-gradient(90% 90% at 50% 40%, #16243d, #0B1320); border: 1.5px solid var(--sun); border-radius: 30px 6px 30px 6px; }
.map-card { background: #111C30; border-color: var(--sun); box-shadow: 6px 6px 0 var(--hot); } .map-card h3 { color: #fff; } .map-card p { color: #D6DBE6; }
.c-box { background: #111C30; border: 2px solid var(--sun); border-radius: 40px 8px 40px 8px; box-shadow: 8px 8px 0 var(--hot); }
.c-box input, .c-box textarea { border: 1.5px solid rgba(255, 183, 3, .6); border-radius: 14px 4px 14px 4px; }
.av-card { background: linear-gradient(180deg, #14203A, #0B1320); border: 1.5px solid rgba(255, 183, 3, .5); border-radius: 44px 6px 44px 6px; }
.av-card[aria-pressed="true"] { border-color: var(--sun); box-shadow: 6px 6px 0 var(--hot); }
.av-card span, .av-card em.av-role { }
.av-card em.av-role { color: var(--sun); }
.choose-box h2 { font-weight: 900; letter-spacing: .02em; }
.choose-box p.sub { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1rem, .9rem + .6vw, 1.3rem); color: #E4E8F0; }
.toast { border: 1.5px solid var(--sun); }
.five-list li { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); color: #fff; border-color: rgba(255, 183, 3, .35); text-align: left; padding-left: 28px; position: relative; }
.five-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50% 0 50% 0; background: var(--sun); }
.flow span { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(1.4rem, 1rem + 2.2vw, 2.4rem); color: var(--sun); }
.flow i { color: var(--hot); }
.dip-lead { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); line-height: 1.25; color: var(--navy); }
.rich .lede { font-family: var(--font-display); font-weight: 700; font-size: 1.14em; line-height: 1.4; color: var(--navy); }
.earth .rich .lede { color: #fff; } .stone .rich .lede { color: var(--navy); }
.cta-band { padding-block: clamp(96px, 14vw, 200px); }
.cta-band::after { background: linear-gradient(180deg, rgba(11, 19, 32, .9), rgba(11, 19, 32, .55) 45%, rgba(11, 19, 32, .85)), linear-gradient(0deg, rgba(251, 86, 7, .3), transparent 50%); }
.cta-band h2 { font-size: clamp(1.8rem, 1rem + 3.4vw, 3.6rem); font-weight: 900; max-width: 22ch; line-height: 1.12; }
.cta-band p strong { color: var(--sun); }
.sec-head h2 { font-size: clamp(1.9rem, 1rem + 3.4vw, 3.4rem); line-height: 1.1; }
.sec-head { position: relative; }
.sec-head::after { content: ""; width: 70px; height: 6px; border-radius: 6px 0 6px 0; background: linear-gradient(90deg, var(--sun), var(--hot), var(--mag)); }
.dip-for h2, .dip-info h2 { font-weight: 900; color: var(--navy); }
.dip-info dt { color: var(--navy); font-weight: 800; } .dip-info dd { color: #1B2640; }
.dip-info dl > div { border-top: 1.5px solid var(--navy); }
.mods li { border-top: 1.5px solid var(--navy); } .mods h3 { color: var(--navy); font-weight: 900; } .mods p { color: #3F4C6B; }
.mods { column-gap: clamp(28px, 5vw, 80px); }

/* footer */
footer { background: var(--navy); border-top: 6px solid; border-image: linear-gradient(90deg, var(--sun), var(--hot), var(--mag), var(--teal)) 1; }
.f-brand b { font-weight: 900; font-size: 1.6rem; }
.f-credit { border-left: 4px solid var(--hot); background: rgba(255, 183, 3, .08); border-radius: 0 30px 6px 0; color: #E4E8F0; }
.f-credit strong { color: var(--sun); }
.fcol h4 { color: var(--sun); font-weight: 800; letter-spacing: .22em; }
.fcol li a { color: #E4E8F0; font-weight: 500; background-image: linear-gradient(var(--hot), var(--hot)); }
.fcol li a:hover { color: #fff; }
.f-top-btn { border: 2px solid var(--sun); border-radius: 50% 0 50% 0; color: var(--sun); box-shadow: 3px 3px 0 var(--hot); }
.f-top-btn:hover { background: var(--sun); color: var(--navy); }
.built a { color: var(--sun); }

/* ---- strip + marquee (home) ---- */
.strip { background: var(--sun); color: var(--navy); border-block: 3px solid var(--navy); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip .st-i { display: flex; align-items: center; gap: 14px; padding: 22px clamp(10px, 2vw, 28px); border-left: 2px solid rgba(11, 19, 32, .25); }
.strip .st-i:first-child { border-left: 0; padding-left: 0; }
.strip b { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1; letter-spacing: -.03em; }
.strip span { font-weight: 800; font-size: .82rem; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip .st-i:nth-child(3) { border-left: 0; padding-left: 0; } .strip .st-i { padding-block: 16px; } .strip .st-i:nth-child(n+3) { border-top: 2px solid rgba(11, 19, 32, .25); } }
.marq { background: var(--navy); color: var(--sun); overflow: hidden; border-bottom: 3px solid var(--navy); white-space: nowrap; }
.marq .track { display: inline-flex; gap: 0; animation: marq 46s linear infinite; padding-block: 16px; }
.marq span { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, .9rem + 1vw, 1.7rem); letter-spacing: .02em; text-transform: uppercase; padding-inline: 22px; display: inline-flex; align-items: center; gap: 44px; }
.marq span::after { content: ""; width: 14px; height: 14px; border-radius: 50% 0 50% 0; background: var(--hot); display: inline-block; }
.marq span:nth-child(4n+2)::after { background: var(--teal); } .marq span:nth-child(4n+3)::after { background: var(--mag); } .marq span:nth-child(4n)::after { background: var(--sun); }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marq .track { animation: none; } }
.dotgrid { background-image: radial-gradient(rgba(11, 19, 32, .12) 1px, transparent 1.4px); background-size: 24px 24px; }
section.band:not(.earth):not(.stone) { background-image: radial-gradient(rgba(11, 19, 32, .07) 1px, transparent 1.4px); background-size: 26px 26px; }
@media (max-width: 560px) { .ic { width: 46px; height: 46px; } .ih { gap: 12px; } .btn { box-shadow: 3px 3px 0 var(--b-line); } .rel div, .app, .feat div, .ally, .faculty article { box-shadow: 4px 4px 0 var(--navy); border-radius: 30px 6px 30px 6px; } .photo { border-radius: 40px 6px 40px 6px; box-shadow: 6px 6px 0 var(--hot); } }
.page-head .rich .lede, .cta-band .rich .lede { color: #fff; }
.page-head .lead.rich { color: #E4E8F0; }

/* ============ v8 · AJUSTES (botones, footer, indicadores, implementación, creadoras, cursor) ============ */
:root { --seedcur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='36' viewBox='0 0 30 36'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFD54A'/%3E%3Cstop offset='.55' stop-color='%23FB8500'/%3E%3Cstop offset='1' stop-color='%23FB5607'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15 2C15 2 4 14 4 23a11 11 0 0 0 22 0C26 14 15 2 15 2Z' fill='url(%23g)' stroke='%230B1320' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M15 13c-3 4-5 7-5 10a5 5 0 0 0 10 0c0-3-2-6-5-10Z' fill='%230B1320' fill-opacity='.85'/%3E%3Cpath d='M11.5 20.5a4 4 0 0 1 1.8-3.4' stroke='%23FFD54A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (pointer: fine) {
  html, body, #hero canvas { cursor: var(--seedcur) 15 3, auto; }
  a, button, [role="button"], .btn, label, summary, select, .av-card, .poi-label { cursor: var(--seedcur) 15 3, pointer; }
  #hero canvas.drag { cursor: var(--seedcur) 15 3, grabbing; }
}

/* ---- botones: texto siempre centrado y legible ---- */
.btn { justify-content: center; text-align: center; line-height: 1.15; }
.btn .arr { margin-right: 0; margin-left: 2px; flex: none; }
.btn:not(:has(.arr)) { padding-inline: 22px; }
/* claro */
.btn:not(.solid) { color: #0B1320 !important; background: #fff; }
.btn:not(.solid):hover { color: #FFD54A !important; background: #0B1320; }
.btn.solid, .btn.solid:hover { color: #0B1320 !important; }
.btn.solid .arr { color: #FFC93C !important; background: #0B1320 !important; }
.btn:not(.solid) .arr { color: #FFC93C; background: #0B1320; }
.btn:not(.solid):hover .arr { color: #0B1320; background: #FFD54A; }
/* oscuro */
:is(#hero, #drawer, #panel, #chooser, #lite, #contact, footer, .earth, .page-head, .cta-band, .hud, .toast, .dark) .btn:not(.solid) { color: #FFD54A !important; background: rgba(11, 19, 32, .88); border-color: #FFB703; }
:is(#hero, #drawer, #panel, #chooser, #lite, #contact, footer, .earth, .page-head, .cta-band, .hud, .toast, .dark) .btn:not(.solid):hover { color: #0B1320 !important; background: #FFB703; }
:is(#hero, #drawer, #panel, #chooser, #lite, #contact, footer, .earth, .page-head, .cta-band, .hud, .toast, .dark) .btn:not(.solid) .arr { background: #FFB703; color: #0B1320; }
:is(#hero, #drawer, #panel, #chooser, #lite, #contact, footer, .earth, .page-head, .cta-band, .hud, .toast, .dark) .btn:not(.solid):hover .arr { background: #0B1320; color: #FFD54A; }
/* banda amarilla */
.stone .btn:not(.solid) { color: #0B1320 !important; background: #fff; border-color: #0B1320; }
.stone .btn.solid { background: #0B1320; border-color: #0B1320; box-shadow: 5px 5px 0 #fff; }
.stone .btn.solid, .stone .btn.solid:hover { color: #FFD54A !important; }
.stone .btn.solid .arr { background: #FFB703 !important; color: #0B1320 !important; }
.go, a.go { color: #0B1320; font-weight: 800; }
:is(#hero, #panel, #chooser, footer, .earth, .page-head, .cta-band) .go { color: #FFD54A; }
.tag, .chip { color: #0B1320; }
:is(#hero, #panel, #chooser, footer, .earth, .page-head, .cta-band) :is(.tag, .chip) { color: #F7F3E9; }

/* ---- celular: botones más compactos ---- */
@media (max-width: 560px) {
  .btn { min-height: 44px; padding: 9px 18px; font-size: .88rem; gap: 8px; }
  .btn .arr { width: 26px; height: 26px; }
  .btn.sm { min-height: 38px; padding: 6px 14px; font-size: .78rem; }
  .btn.sm .arr { width: 22px; height: 22px; }
  .hero-cta { gap: 10px; }
  .hero-copy .hero-cta { display: grid; grid-template-columns: 1fr; }
  .hero-copy .hero-cta .btn { width: 100%; }
  .hero-utils { gap: 6px; }
  .hero-utils .btn, #heroUtils .btn.sm { min-height: 34px; padding: 5px 12px; font-size: .72rem; box-shadow: 2px 2px 0 var(--b-line); }
  .menu-btn { font-size: .68rem; letter-spacing: .08em; padding: 6px 12px; min-height: 34px; }
  #drawer a.dl { font-size: clamp(1.05rem, 5vw, 1.4rem); padding: 9px 0; }
  #drawer a.dl small { font-size: .65rem; }
}
.menu-btn { font-size: .72rem; }

/* ---- 5 dimensiones: título siempre dentro del recuadro ---- */
.vcard .ih { flex-wrap: nowrap; gap: 10px; }
.vcard h3 { font-size: clamp(.8rem, 1.05vw, .95rem); letter-spacing: .01em; overflow-wrap: anywhere; line-height: 1.15; }
.vcard .ic { width: 36px; height: 36px; flex: none; } .vcard .ic svg { width: 18px; height: 18px; }
@media (max-width: 1000px) { .vcard h3 { font-size: .92rem; } }
@media (max-width: 560px) { .vgrid { grid-template-columns: minmax(0, 1fr); } .vcard { min-height: 190px; } .vcard h3 { font-size: 1rem; } }

/* ---- footer compacto en dos columnas ---- */
footer .foot3 { gap: 14px; }
.f-since { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #FFD54A; }
.f-since i { width: 10px; height: 10px; border-radius: 50% 0 50% 0; background: #FB8500; flex: none; }
.f-credit { font-size: .9rem; line-height: 1.45; }
.f-cols, .f-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px clamp(20px, 5vw, 64px) !important; padding-top: 14px !important; }
.fcol.wide ul, .fcol ul { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
.fstack { display: grid; gap: 16px; align-content: start; }
.fcol h4 { margin: 0 0 4px; }
.fcol li a { padding: 3px 0; font-size: .88rem; line-height: 1.25; }
.f-bar { padding-top: 12px; gap: 10px 20px; align-items: center; }
.f-legal span { font-size: .8rem; }
@media (max-width: 520px) { .fcol li a { font-size: .84rem; } .f-top .btn { width: 100%; } }

/* ---- indicadores ---- */
.radar { width: 100%; max-width: 440px; height: auto; justify-self: center; overflow: visible; }
.radar text { font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; fill: #0B1320; letter-spacing: .02em; }
.radar text.cap { font-weight: 600; font-size: 11.5px; fill: #3F4C6B; }
.dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.dim { position: relative; padding: 20px 20px 18px; border-radius: 40px 6px 40px 6px; background: #17233A; border: 2px solid var(--dc); box-shadow: 6px 6px 0 var(--dc); display: flex; flex-direction: column; gap: 14px; }
.dim .ih h3 { font-size: 1.02rem; color: #fff; text-transform: uppercase; letter-spacing: .03em; font-weight: 900; }
.dim .ic { background: var(--dc); }
.dim ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dim li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; font-size: .9rem; color: #E4E8F0; line-height: 1.25; }
.dim li b { display: inline-grid; place-items: center; height: 30px; border-radius: 999px 6px 999px 6px; background: var(--dc); color: #0B1320; font-family: var(--font-ui); font-weight: 900; font-size: .74rem; letter-spacing: .04em; }
.dim:nth-child(3) li b, .dim:nth-child(4) li b { color: #fff; }
.meth { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: m; }
.meth li { position: relative; display: grid; gap: 8px; padding: 22px 20px 20px; background: #fff; border: 1.5px solid #0B1320; border-radius: 40px 6px 40px 6px; box-shadow: 6px 6px 0 #0B1320; align-content: start; }
.meth li i { font-family: var(--font-display); font-style: normal; font-weight: 900; font-size: 2.3rem; line-height: 1; background: linear-gradient(120deg, #FB5607, #FF006E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.meth li:nth-child(3n+2) i { background-image: linear-gradient(120deg, #FFB703, #FB8500); } .meth li:nth-child(3n) i { background-image: linear-gradient(120deg, #2EC4B6, #6A4C93); }
.meth h3 { font-size: 1.05rem; color: #0B1320; margin: 0; } .meth p { margin: 0; color: #3F4C6B; font-size: .93rem; line-height: 1.55; }
@media (max-width: 900px) { .meth { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .meth { grid-template-columns: minmax(0, 1fr); gap: 14px; } .dims { grid-template-columns: minmax(0, 1fr); } .meth li, .dim { box-shadow: 4px 4px 0 #0B1320; } .dim { box-shadow: 4px 4px 0 var(--dc); } }

/* ---- implementación: investigación + diplomado ---- */
.rcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); align-items: stretch; }
.rc { display: flex; flex-direction: column; border: 2px solid #0B1320; border-radius: 56px 8px 56px 8px; background: #fff; box-shadow: 8px 8px 0 #0B1320; overflow: hidden; }
.rc-img { height: clamp(170px, 20vw, 230px); background-size: cover; background-position: center; border-bottom: 2px solid #0B1320; position: relative; }
.rc-img::after { content: ""; position: absolute; right: 16px; bottom: -14px; width: 28px; height: 28px; border-radius: 50% 0 50% 0; background: #FB8500; border: 2px solid #0B1320; }
.rc-body { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rc-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.12; color: #0B1320; margin: 0; }
.rc-body p { color: #3F4C6B; margin: 0; font-size: 1rem; line-height: 1.6; }
.rc-body .hero-cta { margin-top: auto; padding-top: 6px; }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pchips span { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 14px; border-radius: 999px 6px 999px 6px; background: #0B1320; color: #FFD54A; font-family: var(--font-ui); font-weight: 800; font-size: .76rem; letter-spacing: .04em; }
.earth .pchips span, .dark .pchips span { background: #FFB703; color: #0B1320; }
@media (max-width: 760px) { .rcs { grid-template-columns: minmax(0, 1fr); } .rc { border-radius: 40px 6px 40px 6px; box-shadow: 5px 5px 0 #0B1320; } }

/* ---- libro: lectura ampliada ---- */
.bk-more { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.bk-more div { padding: 26px 22px 22px; } .bk-more span { font-size: .98rem; line-height: 1.6; display: block; }
.lensrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.lensrow div { padding: 16px 16px 16px 18px; border-radius: 28px 6px 28px 6px; background: #17233A; border-left: 6px solid var(--lc); display: grid; gap: 4px; }
.lensrow b { font-family: var(--font-display); font-weight: 900; color: #fff; font-size: 1rem; } .lensrow span { color: #D6DBE6; font-size: .9rem; line-height: 1.4; }
.stories { display: grid; gap: 10px; padding: 0; list-style: none; }
.stories li { padding: 12px 18px; border-radius: 999px 8px 999px 8px; background: rgba(255, 183, 3, .12); border: 1.5px solid #FFB703; color: #F7F3E9; font-weight: 600; }

/* ---- alianzas ---- */
.allies { grid-template-columns: minmax(0, 1fr) !important; }
.ally2 { display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 34px); align-items: center; }
.logo-box { width: clamp(120px, 16vw, 170px); aspect-ratio: 1; border-radius: 50% 8px 50% 8px; overflow: hidden; border: 3px solid #0B1320; box-shadow: 6px 6px 0 #FFB703; background: #000; flex: none; }
.logo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ally-body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 640px) { .ally2 { grid-template-columns: minmax(0, 1fr); justify-items: start; } .logo-box { width: 120px; } }

/* ---- creadoras ---- */
.peopleband { background: radial-gradient(900px 480px at 85% 0%, rgba(255, 0, 110, .22), transparent 60%), radial-gradient(800px 460px at 0% 100%, rgba(46, 196, 182, .2), transparent 60%), #0B1320; }
.people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); align-items: start; }
.peopleband .person { background: #111C30; border: 2px solid var(--pc); border-radius: 56px 8px 56px 8px; box-shadow: 8px 8px 0 var(--pc); padding: 0 0 26px; gap: 0; overflow: hidden; position: relative; }
.pframe { position: relative; aspect-ratio: 1 / 1.05; margin: 22px 22px 0; border-radius: 120px 10px 120px 10px; overflow: hidden; border: 3px solid var(--pc); box-shadow: 6px 6px 0 rgba(255, 255, 255, .1); background: #0B1320; }
.pframe img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.pseed { position: absolute; right: 14px; bottom: 14px; width: 26px; height: 26px; border-radius: 50% 0 50% 0; background: var(--pc); border: 2px solid #0B1320; }
.pbody { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px 0; align-items: flex-start; }
.peopleband .person h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; line-height: 1.15; color: #fff; margin: 0; }
.peopleband .person .role { color: var(--pc); font-weight: 700; font-size: .92rem; line-height: 1.4; margin: 0; }
.peopleband .person p { color: #D6DBE6; font-size: .95rem; line-height: 1.6; margin: 0; }
.peopleband .person .btn { margin-top: 6px; }
@media (max-width: 1000px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .people { grid-template-columns: minmax(0, 1fr); } .peopleband .person { box-shadow: 5px 5px 0 var(--pc); border-radius: 44px 6px 44px 6px; } }

/* ---- panel móvil: el botón regresar no tapa el texto ---- */
@media (max-width: 700px) {
  .panel-img { height: 132px; }
  .pback { top: auto; bottom: 10px; left: 12px; min-height: 36px; padding: 6px 14px; font-size: .78rem; }
  #panel .x-btn { top: 10px; right: 12px; }
}
.peopleband .person, .peopleband .person * { text-align: left; }
.logo-box img { object-fit: contain; }
.ally-body, .ally-body * { text-align: left; }
.rc-body, .rc-body * { text-align: left; }
.rc-body .lede { display: inline; }
.avi svg.radar polygon:not([fill="none"]) { fill: url(#rg); fill-opacity: .45; stroke: #FB5607; stroke-width: 2.5; }
.avi svg.radar polygon[fill="none"] { stroke: #0B1320; }
.avi svg.radar text { fill: #0B1320; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.avi svg.radar text.cap { fill: #3F4C6B; font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: .02em; }
.avi svg.radar { max-width: 460px; }
.f-cols { max-width: 820px; }

/* ============ v9 ============ */
html { background: #0B1320; overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
footer { background: #0B1320; }
/* hero nota */
.hero-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; max-width: 44ch; font-size: .8rem; line-height: 1.45; color: #FFD54A; font-weight: 600; }
.hero-note i { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50% 0 50% 0; background: #FB8500; }
@media (max-width: 560px) { .hero-note { font-size: .76rem; } .hero-copy .hero-cta { margin-top: 18px; } }
/* globitos: el texto siempre dentro */
.whochips span, .pchips span { display: inline-flex; align-items: center; justify-content: center; text-align: center; max-width: 100%; white-space: normal; line-height: 1.25; padding: 9px 18px; min-height: 40px; overflow-wrap: anywhere; }
.stone .whochips span { color: #0B1320; }
.whochips { gap: 10px; }
/* cifras del diplomado y de la investigación: centradas */
.dip-facts > div { align-items: center; justify-content: center; text-align: center; padding: 24px 14px; }
.dip-facts b { text-align: center; min-width: 0; }
.dip-facts span { text-align: center; }
@media (max-width: 480px) { .dip-facts > div { flex-direction: column; gap: 6px; } .dip-facts b { min-width: 0; } .dip-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dip-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* método (indicadores): número y título en la misma línea */
.meth li .mh { display: flex; align-items: center; gap: 14px; }
.meth li .mh i { flex: none; font-size: 2rem; }
.meth li .mh h3 { font-size: 1.02rem; line-height: 1.2; }
.meth li { align-content: start; gap: 10px; }
/* metodología (investigación) centrada */
.methc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.methc .pchips { justify-content: center; }
.methc .lead { text-align: center; max-width: 60ch; padding: 26px clamp(18px, 4vw, 38px); border: 2px solid #FFB703; border-radius: 48px 8px 48px 8px; background: rgba(255, 183, 3, .08); color: #F7F3E9; }
.methc .eyebrow { justify-content: center; }
/* docente y equipo */
.advline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; color: #0B1320; }
.advline strong { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.advline .adv { display: inline-flex; align-items: center; padding: 9px 18px; min-height: 40px; border-radius: 999px 8px 999px 8px; background: #0B1320; color: #FFD54A; font-weight: 800; box-shadow: 3px 3px 0 #fff; }
/* menú: pestaña actual iluminada */
#drawer a.dl[aria-current="page"] { color: #0B1320 !important; background: linear-gradient(120deg, #FFD54A, #FFB703 60%, #FB8500); border-radius: 999px 10px 999px 10px; padding-inline: 18px; border-bottom-color: transparent; font-weight: 800; box-shadow: 4px 4px 0 rgba(255, 255, 255, .18); }
#drawer a.dl[aria-current="page"] small { color: #0B1320; }
/* footer: lema */
.f-brand em { font-style: normal; }

/* ============ v10 ============ */
.by span, .bookcard .by span { display: block; }
.isbn { display: inline-block; margin-top: 10px; font-family: var(--font-ui); font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: #0B1320; background: #fff; border: 1.5px solid #0B1320; border-radius: 999px 6px 999px 6px; padding: 5px 14px; }
/* ejemplos dentro de su viñeta */
.stories li { border-radius: 26px 6px 26px 6px; padding: 13px 20px; line-height: 1.4; overflow-wrap: anywhere; }
/* hoja de la caja sin pisar el texto */
.feat b, .app h3, .ally h2, .faculty h3, .rel b, .gains li p { padding-right: 34px; }
.feat div::before, .app::before, .rel div::before, .ally::before { top: 14px; right: 14px; }
/* estructura del libro */
.struct2 { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.struct2 li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 16px 10px 10px; background: #fff; border: 1.5px solid #0B1320; border-radius: 999px 8px 999px 8px; box-shadow: 4px 4px 0 #0B1320; }
.struct2 i { display: grid; place-items: center; height: 44px; border-radius: 50% 0 50% 0; background: #FFB703; color: #0B1320; font-family: var(--font-display); font-style: normal; font-weight: 900; font-size: 1.1rem; border: 1.5px solid #0B1320; }
.struct2 li:nth-child(5n+2) i { background: #2EC4B6; } .struct2 li:nth-child(5n+3) i { background: #FF006E; color: #fff; } .struct2 li:nth-child(5n+4) i { background: #6A4C93; color: #fff; } .struct2 li:nth-child(5n) i { background: #FB8500; }
.struct2 span { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; line-height: 1.3; color: #0B1320; }
.flow2 { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; position: relative; }
.flow2 li { display: flex; align-items: center; gap: 14px; padding: 8px 0; position: relative; }
.flow2 li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: -6px; width: 2px; background: repeating-linear-gradient(#FB8500 0 4px, transparent 4px 8px); }
.flow2 b { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50% 0 50% 0; background: #FB8500; border: 1.5px solid #0B1320; color: #0B1320; font-weight: 900; }
.flow2 span { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; color: #0B1320; }
.earth .struct2 span, .earth .flow2 span { color: #0B1320; }
.earth .flow2 span { color: #fff; }
/* manifiesto */
.mf-start { text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.mf-start p { max-width: 62ch; font-size: 1.08rem; line-height: 1.7; color: #3F4C6B; margin: 0; }
.mf-start .mf-big { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.3; color: #0B1320; }
.mf-start .mf-ref { font-size: .82rem; color: #6B7791; border-top: 1px solid rgba(11, 19, 32, .2); padding-top: 14px; margin-top: 6px; }
.mf-pr .wrap { display: flex; flex-direction: column; gap: 24px; }
.mf-h { display: flex; gap: clamp(14px, 3vw, 28px); align-items: flex-start; }
.mf-h i { flex: none; font-style: normal; font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 9vw, 5.5rem); line-height: .85; background: linear-gradient(140deg, #FFB703, #FB5607 60%, #FF006E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mf-h h2 { font-size: clamp(1.45rem, 3.4vw, 2.3rem); line-height: 1.15; margin-top: 8px; color: #0B1320; }
.earth .mf-h h2 { color: #fff; }
.mf-body { display: grid; gap: 16px; padding-left: clamp(0px, 2vw, 8px); }
.mf-body p { margin: 0; font-size: 1.05rem; line-height: 1.75; color: #3F4C6B; max-width: 64ch; }
.earth .mf-body p { color: #D6DBE6; }
.mf-rule { position: relative; padding: 22px 24px 22px 26px; border: 2px solid #0B1320; border-radius: 40px 6px 40px 6px; background: linear-gradient(120deg, #FFD54A, #FFB703 60%, #FB8500); box-shadow: 6px 6px 0 #0B1320; }
.mf-rule b { display: block; font-family: var(--font-ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #0B1320; margin-bottom: 6px; }
.mf-rule p { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.35; color: #0B1320; }
.earth .mf-rule { box-shadow: 6px 6px 0 #fff; }
.mf-cons { display: flex; flex-direction: column; gap: 16px; }
.mf-cons p { margin: 0; font-size: 1.08rem; line-height: 1.75; color: #3F4C6B; }
.mf-cons p:nth-of-type(2) { font-family: var(--font-display); font-weight: 900; color: #0B1320; font-size: 1.3rem; border-left: 5px solid #FB8500; padding-left: 16px; }
.mf-syn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mf-syn div { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border: 2px solid #FFB703; border-radius: 40px 6px 40px 6px; background: #17233A; box-shadow: 6px 6px 0 #FFB703; text-align: left; }
.mf-syn i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50% 0 50% 0; background: #FFB703; color: #0B1320; font-style: normal; font-weight: 900; }
.mf-syn div:nth-child(2) i { background: #2EC4B6; } .mf-syn div:nth-child(3) i { background: #FF006E; color: #fff; }
.mf-syn b { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: #fff; }
.mf-syn span { color: #D6DBE6; line-height: 1.5; }
.mf-end { text-align: center; max-width: 30ch; margin: 44px auto 0; color: #FFD54A; }
@media (max-width: 800px) { .mf-syn { grid-template-columns: minmax(0, 1fr); } .mf-h { flex-direction: column; gap: 6px; } .mf-h i { font-size: 3.2rem; } .mf-rule { box-shadow: 4px 4px 0 #0B1320; } }
.struct2 li { grid-template-columns: minmax(56px, auto) minmax(0, 1fr); }
.struct2 i { padding-inline: 10px; font-size: .95rem; white-space: nowrap; }
.mf-start p:not(.mf-big):not(.mf-ref) { font-size: 1.08rem; }

/* v11 */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
@media (max-width: 800px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .backpt { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); left: 12px; min-height: 40px; padding: 6px 14px 6px 12px; gap: 8px; box-shadow: 3px 3px 0 #FFB703; }
  .backpt b { font-size: .8rem; } .backpt small { font-size: .68rem; max-width: 52vw; }
  body.has-back .page-head { padding-top: calc(var(--nav-h) + clamp(48px, 9vw, 110px)); }
}

/* v13 · indicadores: 3 arriba, 2 abajo */
.dims { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.dims .dim { flex: 0 0 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); }
@media (max-width: 900px) { .dims .dim { flex-basis: calc((100% - 18px) / 2); max-width: calc((100% - 18px) / 2); } }
@media (max-width: 560px) { .dims .dim { flex-basis: 100%; max-width: 100%; } }

/* v14: logo fallback */
.logo-box { background: #fff; display: grid; place-items: center; font: 700 .8rem 'Libre Franklin', sans-serif; color: #0B1320; text-align: center; }

/* v15: footer escritorio */
@media (min-width: 901px) {
  footer .foot3 { gap: 22px; }
  .f-top { padding-bottom: 4px; }
  .f-since { margin-top: -6px; }
  .f-credit { max-width: none; padding: 14px 22px; font-size: .95rem; }
  .f-cols { max-width: none; grid-template-columns: 1.7fr 1fr 1fr !important; gap: 10px clamp(36px, 5vw, 80px) !important; padding-top: 26px !important; border-top: 2px solid rgba(255,183,3,.35); }
  .fstack { display: contents; }
  .fcol h4 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .78rem; }
  .f-cols > .fcol:first-child ul { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: clamp(20px, 3vw, 48px); }
  .fcol li a { font-size: .95rem; padding: 5px 0; }
  .f-bar { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; }
}
@media (min-width: 901px) { .fstack .fcol ul { display: block !important; grid-template-columns: none !important; } }

/* v16: panel móvil — siempre visible el botón de entrar */
@media (max-width: 820px) {
  #panel { height: auto; max-height: min(70vh, 70dvh, 520px); bottom: var(--panel-bottom, 0px); }
  .panel-img { height: 84px; }
  .panel-body { padding: 4px 18px 10px; gap: 10px; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .panel-body h2 { font-size: 1.45rem !important; line-height: 1.12; }
  .panel-body p { font-size: .95rem !important; line-height: 1.55 !important; }
  .panel-q { font-size: 1.05rem; }
  .panel-foot { flex: none; padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 12px); background: #0B1320; position: relative; z-index: 3; }
  .panel-foot .btn { padding: 10px 16px; font-size: .9rem; }
  .pback { transform: scale(.88); transform-origin: left center; }
}

/* v17: hero ajustado a pantallas bajas (portátiles) */
@media (min-width: 821px) {
  .hero-copy { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(64px, 10vh, 100px)); max-height: calc(100% - 96px); }
  .hero-copy h1 { margin: 0 0 4px; font-size: clamp(.9rem, 2.2vh, 1.4rem); }
  .hero-copy h1 span { font-size: clamp(2.6rem, 11vh, 6.2rem); }
  .hero-line { font-size: clamp(1.05rem, 3.6vh, 1.7rem); margin-top: clamp(8px, 2vh, 20px); }
  .hero-sub { font-size: clamp(.9rem, 2.2vh, 1.05rem); margin: clamp(8px, 1.6vh, 16px) 0 0; }
  .hero-note { margin-top: clamp(8px, 1.6vh, 14px); }
  .hero-copy .hero-cta { margin-top: clamp(14px, 2.6vh, 26px); }
}
@media (min-width: 821px) and (max-height: 640px) { .hero-note { display: none; } }
@media (min-width: 821px) {
  .hero-copy h1 { font-size: clamp(1.2rem, 3.6vh, 2rem); letter-spacing: .3em; margin-bottom: 2px; }
  .hero-copy h1 span { margin-top: 4px; }
}
@media (min-width: 821px) and (max-height: 640px) { .hero-note { display: flex; font-size: .74rem; } }
@media (min-width: 821px) and (max-height: 560px) { .hero-note { display: none; } }

/* v18: margen superior seguro (el menú fijo ocupa ~64px) */
@media (min-width: 821px) {
  .hero-copy { top: 92px; max-height: none; display: flex; flex-direction: column; justify-content: safe flex-end; }
  .hero-copy h1 span { font-size: clamp(2.4rem, 10vh, 6.2rem); }
  .hero-line { font-size: clamp(1rem, 3.2vh, 1.7rem); }
}
@media (min-width: 821px) and (max-height: 700px) { .hero-note { display: none; } }

/* v19: encabezados de página más compactos (menos espacio arriba y abajo) */
.page-head { padding-block: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + clamp(26px, 3.6vw, 52px)) clamp(34px, 4.5vw, 60px); }
body.has-back .page-head { padding-top: calc(var(--nav-h) + 76px); }
@media (max-width: 900px) { body.has-back .page-head { padding-top: calc(var(--nav-h) + clamp(26px, 6vw, 52px)); } }
.logo-box img[src*="logo-prv"] { padding: 10px; background: #fff; }

/* v20: Preserving Recipe Value */
.rcs + .prv-card, .prv-card { margin-top: clamp(16px, 3vw, 32px); flex-direction: row; align-items: stretch; }
.prv-logo { flex: none; width: clamp(150px, 22vw, 260px); display: grid; place-items: center; background: #fff; border-right: 2px solid #0B1320; padding: 18px; }
.prv-logo img { width: 100%; height: auto; max-width: 200px; }
.prv-card .rc-body { justify-content: center; }
@media (max-width: 760px) { .prv-card { flex-direction: column; } .prv-logo { width: 100%; border-right: 0; border-bottom: 2px solid #0B1320; padding: 16px; } .prv-logo img { max-width: 130px; } }
#prv { position: fixed; inset: 0; z-index: 160; background: rgba(11, 19, 32, .82); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
#prv[hidden] { display: none; }
body.prv-open { overflow: hidden; }
.prv-box { position: relative; width: min(900px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #F7F3E9; color: #0B1320; border: 3px solid #FFB703; border-radius: 64px 10px 64px 10px; box-shadow: 10px 10px 0 #FB8500; overscroll-behavior: contain; animation: rise .5s both; }
.prv-x { position: sticky; top: 12px; display: block; margin: 12px 14px -56px auto; z-index: 3; width: 44px; height: 44px; border-radius: 50% 0 50% 0; border: 2px solid #FFB703; background: #0B1320; color: #FFB703; font-size: 1rem; cursor: pointer; }
.prv-head { display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px); background: linear-gradient(120deg, #0B1320 0%, #1A2640 100%); color: #F7F3E9; border-bottom: 4px solid #FB8500; }
.prv-head img { width: clamp(84px, 14vw, 128px); height: auto; background: #fff; border-radius: 50% 8px 50% 8px; padding: 10px; border: 3px solid #FFB703; flex: none; }
.prv-eye { font: 800 .72rem/1 'Libre Franklin', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #FFD54A; }
.prv-head h2 { margin: 8px 0 6px; font-size: clamp(1.7rem, 4.6vw, 3rem); line-height: 1.04; font-weight: 900; color: #fff; padding-right: 36px; }
.prv-tag { margin: 0; color: #FFD54A; font-style: italic; font-size: clamp(.95rem, 1.6vw, 1.1rem); }
.prv-body { padding: clamp(22px, 4vw, 44px) clamp(22px, 4vw, 48px) clamp(26px, 4vw, 44px); display: grid; gap: clamp(18px, 3vw, 28px); }
.prv-lead { margin: 0; font: 700 clamp(1.1rem, 2.2vw, 1.4rem)/1.45 'Merriweather', Georgia, serif; border-left: 5px solid #FB8500; padding-left: 16px; }
.prv-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.prv-stats li { background: #0B1320; color: #F7F3E9; border-radius: 28px 6px 28px 6px; padding: 14px 16px; display: grid; gap: 4px; box-shadow: 4px 4px 0 #FFB703; }
.prv-stats b { color: #FFB703; font: 900 1.5rem/1 'Merriweather', serif; }
.prv-stats span { font-weight: 600; font-size: .86rem; line-height: 1.3; }
.prv-sec { position: relative; background: #fff; border: 2px solid #0B1320; border-radius: 40px 8px 40px 8px; padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 30px); box-shadow: 6px 6px 0 var(--sc); }
.prv-k { display: inline-block; font: 800 .72rem/1 'Libre Franklin', sans-serif; letter-spacing: .16em; text-transform: uppercase; background: var(--sc); color: #0B1320; padding: 6px 12px; border-radius: 999px 6px 999px 6px; }
.prv-sec h3 { margin: 12px 0 8px; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.15; color: #0B1320; }
.prv-sec p { margin: 0; color: #3F4C6B; line-height: 1.7; font-size: 1rem; }
.prv-dims { text-align: center; }
.prv-dims h3 { margin: 0 0 12px; font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
.prv-dims ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.prv-dims li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 2px solid #0B1320; background: #fff; border-radius: 999px 8px 999px 8px; font-weight: 800; font-size: .9rem; box-shadow: 3px 3px 0 var(--dc); }
.prv-dims li i { width: 12px; height: 12px; border-radius: 50% 0 50% 0; background: var(--dc); }
.prv-led { margin: 0; text-align: center; font-weight: 700; color: #6A4C93; }
.prv-cta { display: flex; justify-content: center; }
@media (max-width: 760px) {
  .prv-box { border-radius: 40px 8px 40px 8px; box-shadow: 6px 6px 0 #FB8500; }
  .prv-head { flex-direction: column; align-items: flex-start; }
  .prv-head h2 { padding-right: 0; }
  .prv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prv-cta .btn { width: 100%; justify-content: center; }
}
.prv-stats li { display: flex; align-items: center; gap: 12px; }
.prv-stats b { flex: none; }
.prv-stats span { flex: 1; min-width: 0; }