/* ============================================================
   PRANA — sistema de design do site (pranahq.com)
   papel · laranja (o logo) · cinza · tinta desenhada à mão · energia
   Um mundo visual só, comprometido: laboratório sutil de consciência.
   ============================================================ */
:root{
  --paper:#f6f1e7; --paper-2:#efe8da; --card:#fbf7ef; --card-ink:#fffdf8;
  --ink:#241f22; --ink-soft:#5c545a; --ink-faint:#948b90;
  --line:#e0d7c6; --line-2:#cabfa9;
  --orange:#d97706; --orange-deep:#b45309; --ember:#ea580c; --amber:#f59e0b;
  --glow:#fbbf24; --rose:#e26a8d; --lime:#9cc426; --teal:#3e8f83;
  --shadow:0 1px 0 rgba(36,31,34,.03),0 30px 60px -38px rgba(36,31,34,.4);
  --shadow-sm:0 1px 0 rgba(36,31,34,.03),0 12px 28px -20px rgba(36,31,34,.35);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,monospace;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;border-color:var(--line)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* grão de papel impresso, fixo */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:2}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-deep)}
.mark{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--orange-deep);letter-spacing:.02em}
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-faint)}
.annot{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.serif{font-family:var(--serif)}
h1,h2,h3,h4{font-family:var(--serif);letter-spacing:-.014em;line-height:1.08;font-weight:400}
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14.5px;padding:12px 24px;border:0;border-radius:999px;
  background:var(--ink);color:var(--paper);cursor:pointer;transition:.22s cubic-bezier(.2,.7,.3,1);white-space:nowrap}
.btn:hover{background:var(--orange);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(217,119,6,.6)}
.btn.sm{font-size:12.5px;padding:8px 16px}
.btn.orange{background:var(--orange)}.btn.orange:hover{background:var(--orange-deep)}
.ghost{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14.5px;padding:11px 22px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-soft);cursor:pointer;transition:.18s}
.ghost:hover{border-color:var(--orange);color:var(--orange-deep)}
.ghost.sm{font-size:12.5px;padding:7px 15px}
.link-arrow{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--orange-deep);display:inline-flex;gap:6px;align-items:center;transition:.15s}
.link-arrow:hover{gap:10px}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(246,241,231,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:30px;height:30px}
.brand b{font-family:var(--mono);font-size:13px;letter-spacing:.38em;font-weight:600}
.nav-links{display:flex;gap:4px;margin-left:14px}
.nav-links a{font-size:13.5px;color:var(--ink-soft);padding:7px 12px;border-radius:8px;transition:.15s}
.nav-links a:hover{color:var(--ink);background:rgba(217,119,6,.07)}
.nav-links a.on{color:var(--orange-deep)}
.nav .spacer{flex:1}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--card)}
.langs button{font:inherit;font-family:var(--mono);font-size:11px;padding:4px 10px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer;letter-spacing:.05em}
.langs button.on{background:var(--ink);color:var(--paper)}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--card);cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.mobile-menu{display:none}

/* ---------- energia: esferas e aura ---------- */
.orb{border-radius:50%;background:radial-gradient(circle at 42% 38%,var(--glow) 0%,var(--amber) 24%,var(--orange) 48%,var(--orange-deep) 70%,transparent 100%);filter:blur(.4px)}
.aura{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--ember) 0%,var(--orange) 26%,rgba(245,158,11,.5) 48%,rgba(251,191,36,.18) 70%,transparent 84%);
  filter:blur(2px);animation:breathe 9s ease-in-out infinite}
.aura.rose{background:radial-gradient(circle,rgba(226,106,141,.5),transparent 70%)}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.05);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- seções ---------- */
section{position:relative;padding:96px 0}
.sec-mark{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.sec-num{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--orange-deep)}
.sec-head h2{font-size:clamp(28px,4vw,44px);margin:6px 0 14px;max-width:20ch}
.sec-head p{font-family:var(--serif);font-size:clamp(16px,2vw,19px);color:var(--ink-soft);max-width:56ch;line-height:1.6}
.sec-head{max-width:680px;margin-bottom:52px}
.tint{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- cards genéricos ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:26px;position:relative;overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{font-size:21px;margin:14px 0 9px}
.card p{font-size:14px;color:var(--ink-soft);line-height:1.62}
.chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:3px 11px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-soft)}
.chip.orange{border-color:var(--orange);color:var(--orange-deep);background:rgba(217,119,6,.06)}

/* ---------- agentes (tinta à mão sobre halo de energia) ---------- */
.agent-fig{position:relative;width:104px;height:104px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.agent-fig .halo{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.55),rgba(217,119,6,.16) 55%,transparent 75%);filter:blur(3px);animation:breathe 7s ease-in-out infinite}
.agent-fig img{position:relative;width:78px;height:78px;object-fit:contain;mix-blend-mode:multiply}

/* ---------- fotos (pessoas + energia, no mundo papel/laranja) ---------- */
.photo{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(180,83,9,.14)),radial-gradient(120% 80% at 50% 0%,rgba(245,158,11,.1),transparent 60%);mix-blend-mode:multiply}
.photo .cap{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.photo-band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;align-items:start}
.photo-band .photo:nth-child(1){aspect-ratio:4/5;margin-top:26px}
.photo-band .photo:nth-child(2){aspect-ratio:3/4}
.photo-band .photo:nth-child(3){aspect-ratio:4/5;margin-top:44px}
.photo-wide{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.photo-wide img{width:100%;display:block}
@media(max-width:860px){.photo-band{grid-template-columns:1fr 1fr;gap:12px}.photo-band .photo:nth-child(3){display:none}.photo-band .photo{margin-top:0!important}}

/* ---------- rodapé ---------- */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:56px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
.foot-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-soft);padding:4px 0;transition:.15s}
.foot-col a:hover{color:var(--orange-deep)}
.foot-bottom{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- utilidades ---------- */
.center{text-align:center}.mx{margin-left:auto;margin-right:auto}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.big-quote{font-family:var(--serif);font-size:clamp(24px,3.6vw,40px);line-height:1.3;max-width:22ch}
.big-quote em{font-style:italic;color:var(--orange-deep)}

@media (max-width:860px){
  .nav-links,.langs{display:none}
  .burger{display:flex}
  .g3,.g4,.g2,.foot-grid{grid-template-columns:1fr}
  section{padding:70px 0}
  .mobile-menu.open{display:block;position:fixed;inset:64px 0 0;z-index:55;background:var(--paper);padding:24px 26px;overflow:auto}
  .mobile-menu.open a{display:block;font-family:var(--serif);font-size:24px;padding:16px 0;border-bottom:1px solid var(--line)}
  .mobile-menu .m-langs{display:flex;gap:8px;margin-top:24px}
  .mobile-menu .m-langs button{font-family:var(--mono);font-size:13px;padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;background:transparent;cursor:pointer}
  .mobile-menu .m-langs button.on{background:var(--ink);color:var(--paper)}
}
/* ============================================================
   V1 recuperada + disruptivo: jornada desenhada, ripple, campo de cor,
   manifesto, mix agente×esfera, reveals ricos, 2º portal
   ============================================================ */

/* headings surgem com leve blur+clip (texto que aparece) */
.reveal h1,.reveal h2,.reveal.head{filter:blur(6px)}
.reveal.in h1,.reveal.in h2,.reveal.in.head{filter:blur(0);transition:filter 1s cubic-bezier(.2,.7,.3,1)}

/* jornada A→B — cada linha desenha no scroll ("cada jornada é diferente") */
.journey-svg{width:100%;max-width:900px;height:auto;display:block;margin:0 auto}
.journey-svg path{stroke-dasharray:1600;stroke-dashoffset:1600}
.reveal.in .journey-svg path{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.4,.1,.2,1)}
.reveal.in .journey-svg path:nth-of-type(2){transition-delay:.15s}
.reveal.in .journey-svg path:nth-of-type(3){transition-delay:.3s}
.reveal.in .journey-svg path:nth-of-type(4){transition-delay:.45s}
.reveal.in .journey-svg path:nth-of-type(5){transition-delay:.6s}
.journey-svg .dot-b{opacity:0}.reveal.in .journey-svg .dot-b{opacity:1;transition:opacity .5s ease 1.8s}

/* ripple concêntrico (energia) */
.ripple{position:absolute;pointer-events:none}
.ripple circle{transform-origin:center;animation:ripple-pulse 5s ease-out infinite}
.ripple circle:nth-child(2){animation-delay:.6s}.ripple circle:nth-child(3){animation-delay:1.2s}.ripple circle:nth-child(4){animation-delay:1.8s}
@keyframes ripple-pulse{0%{opacity:.5;transform:scale(.7)}70%{opacity:0}100%{opacity:0;transform:scale(1.15)}}

/* campo de cor difuso (SUBCO / ecossistema) — vem da arte "Curiosity" */
.colorfield{position:absolute;inset:-30%;pointer-events:none;filter:blur(30px);opacity:.5;
  background:
    radial-gradient(34% 30% at 28% 26%,rgba(156,196,38,.55),transparent 70%),
    radial-gradient(30% 26% at 74% 22%,rgba(234,88,12,.4),transparent 70%),
    radial-gradient(30% 28% at 78% 70%,rgba(226,106,141,.4),transparent 72%),
    radial-gradient(40% 36% at 22% 78%,rgba(245,158,11,.4),transparent 74%);
  animation:field 24s ease-in-out infinite alternate}
@keyframes field{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,-2%,0) scale(1.08)}}

/* manifesto — faixa editorial grande */
.manifesto{padding:120px 0;text-align:center;position:relative;overflow:hidden}
.manifesto .q{font-family:var(--serif);font-size:clamp(26px,4.4vw,52px);line-height:1.24;max-width:22ch;margin:0 auto;letter-spacing:-.01em}
.manifesto .q em{font-style:italic;color:var(--orange-deep)}

/* mix agente × esfera — o ícone à mão emerge de um orbe de energia */
.agent-orb{position:relative;width:118px;height:118px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 42% 38%,var(--glow),var(--amber) 32%,var(--orange) 62%,var(--orange-deep) 85%);
  box-shadow:0 0 0 6px rgba(217,119,6,.1),0 18px 40px -18px rgba(217,119,6,.55);animation:breathe 7s ease-in-out infinite}
.agent-orb::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(217,119,6,.35)}
.agent-orb img{width:84px;height:84px;object-fit:contain;filter:brightness(0) invert(0);mix-blend-mode:multiply;opacity:.92}
.agent-orb.neo{background:radial-gradient(circle at 42% 38%,#b9c6e6,#7f8cb0 40%,#4c597e 72%,#33405f 90%)}
.agent-orb.flor{background:radial-gradient(circle at 42% 38%,#f6c9d6,#f2a3bb 38%,#e26a8d 72%,#b64f6f 90%)}
.agent-orb.olly{background:radial-gradient(circle at 42% 38%,var(--glow),#f3c766 36%,var(--amber) 70%,#c98a12 90%)}
.agent-orb.neo::before{border-color:rgba(76,89,126,.4)}.agent-orb.flor::before{border-color:rgba(226,106,141,.4)}.agent-orb.olly::before{border-color:rgba(201,138,18,.4)}

/* portal 2 — emenda por zoom no meio da página */
.portal2{position:relative}
.portal2 .p2-core{will-change:transform,opacity}
.portal2 .p2-veil{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1}

/* ticker de princípios (movimento contínuo, discreto) */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);padding:18px 0}
.ticker-track{display:flex;gap:40px;white-space:nowrap;width:max-content;animation:tick 32s linear infinite}
.ticker span{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-soft)}
.ticker span b{color:var(--orange-deep);font-weight:400;font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none;filter:none}.journey-svg path{stroke-dashoffset:0}}