/* Neúmen, segunda exploración. La tipografía y el personaje son parte del sistema, no ornamento. */
:root {
  --font-sans: 'IBM Plex Sans', sans-serif;
  --font-serif: 'Bricolage Grotesque', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
body {font-family:var(--font-sans)}
.wordmark-type {font-family:var(--font-serif);font-size:19px;letter-spacing:.09em;font-weight:800}
.wordmark-type span {font-family:var(--font-mono);font-size:7px;letter-spacing:.1em}
.main-nav,.materia-toggle,.eyebrow,.menu-kicker,.section-rail,.research-topline,
.axis-caption,.axis-definition>span,.portal-index,.memory-index,.geometry-note,
.hero-frame,.hero-bottom,.footer-bottom,.portal-arrow,.preview-bar,
.text-link,.outline-button,.pill-button,.underlined-link,.principles-strip,
.portal-card .portal-index {font-family:var(--font-mono)}
.main-nav {text-transform:none;letter-spacing:-.03em}
.hero {isolation:isolate}
.hero-art {z-index:0;transition:opacity 1s ease;animation:none;transform:none}
.hero-art-cleared {position:absolute;inset:0;z-index:1;background:url('./fondo-sin-esqueleto.webp') center / cover no-repeat;opacity:0;transition:opacity 1.15s cubic-bezier(.3,.1,.1,1)}
.hero.is-transformed .hero-art-cleared {opacity:1}
.hero-wash {z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(7,22,37,.99) 0%,rgba(7,22,37,.92) 19%,rgba(7,22,37,.7) 37%,rgba(7,22,37,.06) 65%),linear-gradient(0deg,rgba(7,22,37,.7) 0%,transparent 21%,transparent 79%,rgba(7,22,37,.28))}
.hero-content {z-index:4;top:53%;transform:translateY(-46%);width:min(850px,74vw)}
.hero-kicker {font:500 clamp(14px,1.25vw,20px)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.095em;white-space:normal;display:block;margin-bottom:21px;max-width:600px}
.hero h1 {line-height:.87;letter-spacing:-.065em;margin:33px 0 35px}
.hero h1 strong {font:800 clamp(76px,8.5vw,150px)/.9 var(--font-serif);letter-spacing:-.051em;text-transform:uppercase;font-style:normal;display:block;margin:0}
.hero-description {font:400 clamp(15px,1.25vw,19px)/1.57 var(--font-sans);max-width:455px}
.period {font-family:var(--font-serif);color:var(--coral)}
.hero-frame,.hero-bottom {z-index:6}
.hero-frame {color:#dfcd9c;letter-spacing:.06em}
.hero-bottom {gap:15px}
.replay-morph {color:var(--cream);background:rgba(7,22,37,.18);border:0;border-bottom:1px solid rgba(227,213,184,.6);padding:7px 2px;font:600 10px var(--font-mono);letter-spacing:.02em;cursor:pointer;transition:color .2s}
.replay-morph:hover {color:#fff}
.replay-morph:first-letter {font-size:19px}
.hero-date {font-weight:600}
.hero-morph {position:absolute;z-index:3;pointer-events:none;right:8.2vw;bottom:3.2%;width:min(32vw,440px);height:73%;display:flex;justify-content:center;align-items:center}
.morph-character {height:100%;width:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 15px rgba(4,18,29,.28));opacity:0;transform-origin:50% 35%;transform:translate3d(20px,-23px,0) scale(1.63) rotate(-8deg);transition:opacity .75s ease .5s,transform 1.45s cubic-bezier(.16,.8,.26,1) .5s}
.hero.is-transformed .morph-character {opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg);animation:char-breathe 4.8s ease-in-out 2.4s infinite}
@keyframes char-breathe {0%,100% {translate:0 0}50% {translate:0 -7px}}
.morph-trace {position:absolute;inset:9% 5%;border:1px dashed rgba(238,223,193,.48);border-radius:50%;transform:scale(.4) rotate(-30deg);opacity:0;transition:transform 1.7s ease .2s,opacity .65s ease .4s}
.morph-trace:before,.morph-trace:after {content:'';position:absolute;border-radius:50%;border:1px solid rgba(238,223,193,.25)}
.morph-trace:before {inset:13% 3%}.morph-trace:after {inset:25% 19%}
.hero.is-transformed .morph-trace {transform:scale(1) rotate(12deg);opacity:1}
.morph-caption {position:absolute;top:3%;right:-2%;writing-mode:vertical-rl;font:500 8px var(--font-mono);letter-spacing:.1em;color:var(--cream);opacity:0;transform:translateY(-15px);transition:opacity .7s ease 1.5s,transform .7s ease 1.5s}
.hero.is-transformed .morph-caption {opacity:.85;transform:none}

/* Imágenes y palabras se tocan: el sistema editorial elimina la numeración decorativa. */
.section-rail {height:92px;text-transform:none;letter-spacing:0}
.section-rail span:first-child {color:var(--paper);background:var(--teal);padding:10px 14px;font-size:9px;font-weight:600;transform:skew(-8deg)}
.section-rail span:nth-child(2) {font-family:var(--font-serif);font-size:21px;letter-spacing:-.055em;font-weight:600;color:var(--ink)}
.manifesto-copy h2,.portal-head h2 {font:700 clamp(56px,5.8vw,102px)/.99 var(--font-serif);letter-spacing:-.046em}
.manifesto-copy h2 em,.portal-head h2 em,.research-heading h2 em,.memory-content h2 em {font-style:normal;font-weight:800;letter-spacing:-.08em}
.manifesto-copy p {max-width:520px;line-height:1.72}
.geometry-note.top {font-size:8px}
.research-heading h2 {font:750 clamp(75px,7.8vw,138px)/.9 var(--font-serif);letter-spacing:-.075em}
.research-heading h2 em {color:#ceb177}
.number-outline {top:-102px;font-size:clamp(210px,22vw,350px);letter-spacing:-.16em;-webkit-text-stroke:1px rgba(234,207,165,.12)}
.axis {grid-template-columns:82px 1fr 40px}
.axis span:first-child {font:400 26px var(--font-mono);color:#ceb177}
.axis strong {font:700 clamp(30px,3.25vw,56px)/1.02 var(--font-serif);letter-spacing:-.045em}
.axis-definition {padding:27px 26px}
.axis-definition p {font:500 22px/1.25 var(--font-serif);letter-spacing:-.03em}
.portal-content h3 {font:750 clamp(42px,4.1vw,73px)/1 var(--font-serif);letter-spacing:-.065em}
.circles-art span {font-family:var(--font-sans);font-size:220px}
.memory-content h2 {font:700 clamp(60px,6.6vw,118px)/.94 var(--font-serif);letter-spacing:-.068em}
.footer-top p {font:650 clamp(20px,2.3vw,39px)/1.15 var(--font-serif);letter-spacing:-.06em}
.footer-emblem {font-family:var(--font-serif)}

/* El personaje aparece después de la transformación y funciona como guía contextual. */
.neumen-guide {position:fixed;z-index:100;right:20px;bottom:13px;display:flex;align-items:flex-end;opacity:0;transform:translateY(190px);pointer-events:none;transition:opacity .5s ease,transform .65s cubic-bezier(.18,.87,.37,1)}
body.guide-visible .neumen-guide {opacity:1;transform:translateY(0);pointer-events:auto}
.guide-toggle {position:relative;display:block;width:138px;height:183px;flex:0 0 auto;background:none;border:0;padding:0;filter:drop-shadow(0 10px 16px rgba(8,20,28,.2))}
.guide-toggle img {height:100%;width:100%;object-fit:contain;animation:guide-sway 5.6s ease-in-out infinite}
@keyframes guide-sway {0%,100% {transform:rotate(-3deg)}50% {transform:rotate(3deg) translateY(-5px)}}
.guide-tab {position:absolute;bottom:7px;right:3px;background:var(--coral);color:white;padding:8px 10px;white-space:nowrap;letter-spacing:.04em;font:600 9px var(--font-mono);transform:rotate(-5deg)}
.guide-toggle:hover .guide-tab {background:var(--navy)}
.guide-panel {position:absolute;right:135px;bottom:38px;width:310px;background:#eae0c9;color:#162d37;box-shadow:0 17px 45px rgba(0,0,0,.28);padding:25px 27px;border:1px solid #ada68f}
.guide-panel:after {content:'';position:absolute;right:-10px;bottom:32px;width:18px;height:18px;background:#eae0c9;transform:rotate(45deg);border-right:1px solid #ada68f;border-top:1px solid #ada68f}
.guide-eyebrow {display:block;font:600 9px var(--font-mono);letter-spacing:.04em;color:#995b3e}
.guide-panel h2 {font:800 31px/.96 var(--font-serif);letter-spacing:-.06em;margin:16px 0 10px}
.guide-panel p {font:400 13px/1.4 var(--font-sans);margin:0 0 18px;color:#586360}
.guide-panel a {display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid #bbb6a2;font:600 12px var(--font-mono)}
.guide-panel a:hover {color:#a54b33}
.guide-panel a span {font-size:17px}

@media(max-width:1100px) {
  .hero h1 strong {font-size:clamp(68px,8.4vw,115px)}
  .hero-morph {width:34vw;right:5vw}
  .hero-content {left:8vw}
}
@media(max-width:760px) {
  .wordmark-type {font-size:14px}
  .hero {min-height:800px}
  .hero-content {top:39%;left:7vw;transform:translateY(-27%);width:90vw}
  .hero h1 {margin:21px 0 25px}
  .hero h1 strong {font-size:clamp(52px,11.1vw,85px);letter-spacing:-.045em}
  .hero-kicker {font-size:12px;margin-bottom:10px}
  .hero-description {max-width:355px;font-size:14px;line-height:1.55}
  .hero-morph {right:-2.5vw;bottom:3%;width:57vw;height:47%;opacity:.95}
  .morph-caption {display:none}
  .hero-wash {background:linear-gradient(90deg,rgba(8,24,39,.96),rgba(8,24,39,.75) 54%,rgba(8,24,39,.32)),linear-gradient(0deg,rgba(7,22,37,.55) 0%,transparent 45%)}
  .hero-bottom {bottom:17px;align-items:flex-end}
  .hero-bottom>span:first-child,.hero-date {display:none}
  .replay-morph {font-size:9px}
  .section-rail {height:75px}
  .section-rail span:first-child {font-size:7px;padding:9px 11px}
  .section-rail span:nth-child(2) {font-size:15px}
  .manifesto-copy h2,.portal-head h2 {font-size:clamp(46px,10vw,75px)}
  .research-heading h2 {font-size:clamp(59px,11.5vw,88px)}
  .number-outline {font-size:180px}
  .axis {grid-template-columns:48px 1fr 30px}
  .axis strong {font-size:36px}
  .axis span:first-child {font-size:18px}
  .memory-content h2 {font-size:clamp(44px,10vw,79px)}
  .guide-toggle {width:91px;height:118px}
  .neumen-guide {right:8px;bottom:7px}
  .guide-panel {right:86px;bottom:28px;width:min(285px,calc(100vw - 115px));padding:22px}
}
@media(max-width:420px) {
  .hero {min-height:700px}
  .hero-content {top:36%}
  .hero h1 strong {font-size:49px}
  .hero-description {max-width:300px}
  .hero-morph {right:-7vw;bottom:4%;width:66vw;height:43%}
  .hero-cta {gap:13px}
  .pill-button {padding:13px 15px}
  .axis strong {font-size:29px}
  .guide-panel {right:81px;width:min(258px,calc(100vw - 105px))}
}
@media(prefers-reduced-motion:reduce) {
  .hero-art-cleared,.morph-character,.morph-trace,.morph-caption,.neumen-guide {transition:none}
  .hero.is-transformed .morph-character,.guide-toggle img {animation:none}
}