/* ==========================================================================
   Hard Consultoria — base.css
   Tokens, tipografia, botões, placeholders, navegação, rodapé e revelação.
   Compartilhado por todas as páginas. Fonte: .agents/skills/hard-brand/SKILL.md
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --ink:#0A2129; --ink-soft:#123642; --ink-deep:#061A21;
  --petrol:#176F83; --teal:#10A2AF; --teal-lit:#1FBACB;
  --paper:#F2F5F5; --paper-2:#FFFFFF; --paper-3:#E9EEEE;
  --muted:#5A757F; --line:rgba(10,33,41,.13); --line-dark:rgba(255,255,255,.15);
  --shell:1240px; --nav-h:76px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Archivo","Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,5vw,52px)}
.dark{background:var(--ink-deep);color:#E4EDEF}
.dark .muted,.dark .lead{color:#9DB7BE}
.white{background:var(--paper-2)}

/* ============ TIPOGRAFIA ============ */
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--petrol);display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:22px;height:9px;border-left:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal)}
.dark .eyebrow{color:var(--teal-lit)}
.display{font-family:var(--serif);font-weight:300;font-size:clamp(31px,4.6vw,58px);line-height:1.07;letter-spacing:-.018em}
.display em{font-style:normal;color:var(--petrol)}
.dark .display em{color:var(--teal-lit)}
.display-lg{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5.6vw,74px);line-height:1.04;letter-spacing:-.024em}
.display-sm{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,32px);line-height:1.16;letter-spacing:-.01em}
.lead{font-size:clamp(16.5px,1.45vw,18.5px);color:var(--muted);max-width:60ch}
p+p{margin-top:.8em}

/* ============ BOTÕES ============ */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;padding:13px 22px;border:1px solid transparent;border-radius:2px;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn i,.link i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-1px) rotate(-45deg);transition:transform .25s}
.btn:hover i,.link:hover i{transform:translate(3px,-1px) rotate(-45deg)}
.btn-solid{background:var(--petrol);color:#fff}
.btn-solid:hover{background:var(--ink);transform:translateY(-1px)}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--petrol);color:var(--petrol)}
.dark .btn-line{border-color:var(--line-dark);color:#E4EDEF}
.dark .btn-line:hover{border-color:var(--teal-lit);color:var(--teal-lit);background:rgba(255,255,255,.04)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--teal);color:#fff;transform:translateY(-1px)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--petrol);padding-bottom:4px;border-bottom:1px solid rgba(23,111,131,.28);transition:border-color .25s,color .25s}
.link:hover{border-color:var(--petrol)}
.dark .link{color:var(--teal-lit);border-color:rgba(31,186,203,.35)}

/* ============ PLACEHOLDERS DE IMAGEM ============ */
.ph{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:
    linear-gradient(140deg,rgba(23,111,131,.09),rgba(16,162,175,.04) 70%),
    repeating-linear-gradient(135deg,rgba(10,33,41,.045) 0 1px,transparent 1px 10px);
  border:1px solid var(--line);
}
.ph::after{content:"";position:absolute;left:16px;top:16px;width:15px;height:15px;border-left:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:rotate(180deg)}
.ph b{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);padding:16px 18px;line-height:1.5}
/* .ph com <img> real dentro: some grafismo/legenda, a foto ocupa o quadro */
.ph:has(img){background:none}
.ph:has(img)::after,.ph:has(img) b{display:none}
.ph img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;display:block}
.ph b span{display:block;font-weight:400;letter-spacing:.02em;text-transform:none;font-size:12.5px;color:var(--muted);margin-top:5px}
.dark .ph{
  border-color:var(--line-dark);
  background:
    linear-gradient(140deg,rgba(16,162,175,.16),rgba(16,162,175,.03) 70%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10px);
}
.dark .ph b{color:var(--teal-lit)}
.dark .ph b span{color:#8FA9B1}
.ph-lg{margin-top:clamp(30px,5vh,50px)}
.ph-16-9{aspect-ratio:16/9}
.ph-16-8{aspect-ratio:16/8}
.ph-4-3{aspect-ratio:4/3}

/* ============ VISUAIS EXPLICATIVOS (SVG AXONOMÉTRICO) ============ */
.hard-visual{
  position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/9;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(23,111,131,.1),rgba(16,162,175,.025) 58%,rgba(255,255,255,.28)),
    var(--paper-2);
}
.hard-visual::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.65;
  background:
    linear-gradient(rgba(10,33,41,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,33,41,.035) 1px,transparent 1px);
  background-size:24px 24px;
  transform:perspective(520px) rotateX(58deg) scale(1.45);transform-origin:50% 74%;
}
.hard-visual::after{content:"";position:absolute;inset:0;width:auto;height:auto;z-index:0;pointer-events:none;border:0;transform:none;background:linear-gradient(125deg,transparent 48%,rgba(16,162,175,.08),transparent 68%)}
.hard-visual--hero{aspect-ratio:4/5}
.hard-visual--strip{aspect-ratio:2/1}
.hard-visual--wide{aspect-ratio:16/9}
.hard-visual--spaced{margin-top:clamp(30px,5vh,50px)}
.hard-visual--integrated{border:0;background:transparent}
.hard-visual--integrated::before{opacity:.42;mask-image:radial-gradient(ellipse at center,#000 14%,transparent 76%);-webkit-mask-image:radial-gradient(ellipse at center,#000 14%,transparent 76%)}
.hard-visual--integrated::after{background:radial-gradient(ellipse at center,rgba(16,162,175,.08),transparent 64%)}
.hard-visual--context-hero{aspect-ratio:1/1;border:0;background:var(--paper)}
.hard-visual--context-hero::before{opacity:.25}
.hard-visual--context-hero::after{background:radial-gradient(circle at 50% 55%,rgba(16,162,175,.1),transparent 52%)}
.hard-visual svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.hard-visual text{font-family:var(--sans);text-rendering:geometricPrecision;stroke:none}
.hard-visual .hv-label[text-anchor="start"]{text-anchor:start}
.hv-floor{fill:rgba(23,111,131,.035);stroke:rgba(23,111,131,.18);stroke-width:1}
.hv-guide{fill:none;stroke:rgba(10,33,41,.12);stroke-width:1;stroke-dasharray:3 8}
.hv-link{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .85s cubic-bezier(.22,1,.36,1)}
.hard-visual.in .hv-link{stroke-dashoffset:0}
.hv-node{opacity:.18;transition:opacity .65s cubic-bezier(.22,1,.36,1)}
.hard-visual.in .hv-node{opacity:1}
.hv-node:nth-of-type(2){transition-delay:.08s}.hv-node:nth-of-type(3){transition-delay:.16s}
.hv-node:nth-of-type(4){transition-delay:.24s}.hv-node:nth-of-type(5){transition-delay:.32s}
.hv-node:nth-of-type(6){transition-delay:.4s}.hv-node:nth-of-type(7){transition-delay:.48s}
.hv-top{fill:rgba(255,255,255,.92);stroke:rgba(23,111,131,.42);stroke-width:1}
.hv-front{fill:rgba(23,111,131,.14);stroke:rgba(23,111,131,.34);stroke-width:1}
.hv-side{fill:rgba(16,162,175,.2);stroke:rgba(23,111,131,.34);stroke-width:1}
.hv-hot .hv-top{fill:rgba(16,162,175,.18);stroke:var(--teal)}
.hv-hot .hv-front{fill:rgba(23,111,131,.3);stroke:var(--teal)}
.hv-hot .hv-side{fill:rgba(16,162,175,.36);stroke:var(--teal)}
.hv-label{font-size:12px;font-weight:600;letter-spacing:.08em;fill:var(--ink);text-anchor:middle}
.hv-label--sm{font-size:10.5px;letter-spacing:.05em}
.hv-label--xs{font-size:9px;letter-spacing:.02em}
.hv-micro{font-size:10px;font-weight:600;letter-spacing:.14em;fill:var(--muted);text-transform:uppercase}
.hv-micro--mid{text-anchor:middle}
.hv-line{fill:none;stroke:rgba(10,33,41,.28);stroke-width:2;stroke-linecap:square;stroke-linejoin:round}
.hv-bar{fill:rgba(23,111,131,.18);stroke:rgba(23,111,131,.45);stroke-width:1}
.hv-bar-hot{fill:rgba(16,162,175,.38);stroke:var(--teal);stroke-width:1}
.hv-card{fill:rgba(255,255,255,.82);stroke:rgba(23,111,131,.32);stroke-width:1}
.hv-card-hot{fill:rgba(16,162,175,.14);stroke:var(--teal);stroke-width:1.5}
.hv-dot{fill:var(--teal);stroke:var(--paper-2);stroke-width:1}
.hv-copy{font-size:14px;font-weight:600;fill:var(--ink)}
.hv-copy-sm{font-size:11px;fill:var(--muted)}
.hv-axis{font-size:10px;font-weight:600;letter-spacing:.14em;fill:var(--muted)}
.hv-lane{fill:rgba(23,111,131,.035);stroke:rgba(23,111,131,.16);stroke-width:1}
.hv-lane-label{font-size:10px;font-weight:600;letter-spacing:.13em;fill:var(--petrol)}
.hv-marker{fill:var(--paper-2);stroke:var(--teal);stroke-width:1.5}
.hv-ghost{fill:none;stroke:rgba(23,111,131,.25);stroke-width:1;stroke-dasharray:4 6}
.chv-spine{fill:none;stroke:rgba(16,162,175,.45);stroke-width:1.5;opacity:1;transition:opacity .85s cubic-bezier(.22,1,.36,1)}
.chv-connector{fill:none;stroke:rgba(16,162,175,.56);stroke-width:1.2;opacity:1;transition:opacity .52s cubic-bezier(.22,1,.36,1)}
.chv-spine-dot{fill:var(--paper);stroke:var(--teal);stroke-width:1.5}
.chv-spine-dot--end{fill:var(--teal);stroke:var(--paper)}
.chv-node{opacity:1;transform:translateY(0);transform-box:fill-box;transform-origin:center;transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1)}
.js .hard-visual--context-hero:not(.in) .chv-spine,.js .hard-visual--context-hero:not(.in) .chv-connector{opacity:0}
.js .hard-visual--context-hero:not(.in) .chv-node{opacity:.12;transform:translateY(8px)}
.chv-step--1{transition-delay:.12s}.chv-step--2{transition-delay:.2s}.chv-step--3{transition-delay:.28s}.chv-step--4{transition-delay:.36s}
.chv-step--5{transition-delay:.44s}.chv-step--6{transition-delay:.52s}.chv-step--7{transition-delay:.6s}
.chv-node rect{fill:var(--paper-2);fill-opacity:.72;stroke:rgba(23,111,131,.26);stroke-width:1}
.chv-node--hot rect{fill:rgba(16,162,175,.14);fill-opacity:1;stroke:var(--teal);stroke-width:1.5}
.chv-number{fill:var(--paper);stroke:var(--teal);stroke-width:1}
.chv-node--hot .chv-number{fill:var(--teal);stroke:var(--paper)}
.chv-number-text{font-size:8px;font-weight:600;fill:var(--petrol)}
.chv-node--hot .chv-number-text{fill:#fff}
.chv-label{font-size:11px;font-weight:600;letter-spacing:.12em;fill:var(--ink)}
.chv-sub{font-size:10px;font-weight:400;fill:var(--muted)}
.chv-kicker,.chv-footer{font-size:9px;font-weight:600;letter-spacing:.16em;fill:var(--muted)}
.chv-core{font-size:10px;font-weight:600;letter-spacing:.14em;fill:var(--petrol)}
.rm-phase--1,.rm-phase--2,.rm-phase--4,.rm-phase--6{opacity:1;transform:none;transform-box:fill-box;transform-origin:center;transition:opacity .56s cubic-bezier(.22,1,.36,1),transform .56s cubic-bezier(.22,1,.36,1)}
.rm-phase--2{transition-delay:.18s}.rm-phase--4{transition-delay:.48s}.rm-phase--6{transition-delay:.78s}
.rm-cell{stroke:rgba(23,111,131,.18);stroke-width:1;opacity:1;transform:scale(1);transform-box:fill-box;transform-origin:center;transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
.rm-cell--low{fill:rgba(23,111,131,.045)}.rm-cell--medium{fill:rgba(23,111,131,.11)}.rm-cell--high{fill:rgba(16,162,175,.22)}.rm-cell--critical{fill:rgba(16,162,175,.42);stroke:var(--teal)}
.rm-delay--1{transition-delay:.08s}.rm-delay--2{transition-delay:.14s}.rm-delay--3{transition-delay:.2s}.rm-delay--4{transition-delay:.26s}.rm-delay--5{transition-delay:.32s}
.rm-kicker,.rm-axis,.rm-end,.rm-formula{font-size:9px;font-weight:600;letter-spacing:.14em;fill:var(--muted)}
.rm-axis{font-size:8px}.rm-end{font-size:7px;letter-spacing:.08em}.rm-formula{fill:var(--petrol)}
.rm-sub{font-size:10px;fill:var(--muted)}.rm-label{font-size:10px;font-weight:600;letter-spacing:.08em;fill:var(--ink)}
.rm-marker{opacity:1;transform:scale(1);transform-box:fill-box;transform-origin:center;transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
.rm-marker circle{fill:var(--paper);stroke:var(--teal);stroke-width:1.5}.rm-marker text{font-size:7px;font-weight:600;fill:var(--petrol)}
.rm-marker--1{transition-delay:.34s}.rm-marker--2{transition-delay:.4s}.rm-marker--3{transition-delay:.46s}.rm-marker--4{transition-delay:.52s}
.rm-scenario{opacity:1;transform:none;transform-box:fill-box;transform-origin:center;transition:opacity .48s cubic-bezier(.22,1,.36,1),transform .48s cubic-bezier(.22,1,.36,1)}
.rm-scenario circle{fill:var(--teal)}.rm-scenario text{font-size:8px;font-weight:600;letter-spacing:.07em;fill:var(--ink)}
.rm-scenario--1{transition-delay:.2s}.rm-scenario--2{transition-delay:.26s}.rm-scenario--3{transition-delay:.32s}.rm-scenario--4{transition-delay:.38s}
.rm-connector{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .75s cubic-bezier(.22,1,.36,1)}
.rm-phase--3{transition-delay:.42s}.rm-phase--5{transition-delay:.72s}
.rm-rule{fill:none;stroke:rgba(23,111,131,.24);stroke-width:1}.rm-control,.rm-priority{opacity:1;transform:none;transform-box:fill-box;transform-origin:center;transition:opacity .48s cubic-bezier(.22,1,.36,1),transform .48s cubic-bezier(.22,1,.36,1)}
.rm-control circle{fill:var(--paper);stroke:var(--teal);stroke-width:1.5}.rm-control--1{transition-delay:.56s}.rm-control--2{transition-delay:.64s}.rm-control--3{transition-delay:.72s}
.rm-priority path{fill:none;stroke:rgba(23,111,131,.24);stroke-width:1}.rm-priority circle{fill:var(--paper);stroke:var(--petrol);stroke-width:1.5}.rm-priority--hot circle{fill:var(--teal);stroke:var(--teal)}.rm-priority--hot .rm-label{fill:var(--petrol)}
.rm-priority--1{transition-delay:.84s}.rm-priority--2{transition-delay:.92s}.rm-priority--3{transition-delay:1s}
.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-phase--1,.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-phase--2,.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-phase--4,.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-phase--6,.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-scenario,.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-control,.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-priority{opacity:0;transform:translateY(9px)}
.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-cell{opacity:0;transform:scale(.68)}
.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-marker{opacity:0;transform:scale(.42)}
.js .hard-visual[data-hard-visual="risk-matrix"]:not(.in) .rm-connector{stroke-dashoffset:1}
/* gestão do risco (ciclo) e matriz P×I: revelação em ordem pelas classes .rx-d* */
.rx-fade,.rx-pop{opacity:1;transform:none;transform-box:fill-box;transform-origin:center;transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.rx-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1)}
.js .hard-visual:not(.in) .rx-fade{opacity:0;transform:translateY(8px)}
.js .hard-visual:not(.in) .rx-pop{opacity:0;transform:scale(.7)}
.js .hard-visual:not(.in) .rx-draw{stroke-dashoffset:1}
.rx-d1{transition-delay:.06s}.rx-d2{transition-delay:.14s}.rx-d3{transition-delay:.22s}.rx-d4{transition-delay:.3s}.rx-d5{transition-delay:.38s}
.rx-d6{transition-delay:.46s}.rx-d7{transition-delay:.54s}.rx-d8{transition-delay:.62s}.rx-d9{transition-delay:.7s}.rx-d10{transition-delay:.8s}
.rx-d11{transition-delay:.9s}.rx-d12{transition-delay:1s}.rx-d13{transition-delay:1.1s}.rx-d14{transition-delay:1.22s}
.rc-num{fill:var(--paper);stroke:var(--teal);stroke-width:1.2}.rc-num--hot{fill:var(--teal)}
.rc-num-text{font-size:8px;font-weight:600;fill:var(--petrol)}.rc-num-text--hot{fill:#fff}
.rc-moment{font-size:11px;font-weight:600;letter-spacing:.14em;fill:var(--ink)}
.rc-msub,.rc-q{font-size:9.5px;fill:var(--muted)}
.rc-rule{fill:none;stroke:rgba(23,111,131,.28);stroke-width:1}.rc-rule--hot{stroke:var(--teal);stroke-width:2}
.rc-card{fill:var(--paper-2);fill-opacity:.72;stroke:rgba(23,111,131,.26);stroke-width:1}
.rc-card--hot{fill:rgba(16,162,175,.14);fill-opacity:1;stroke:var(--teal);stroke-width:1.5}
.rc-label{font-size:9.5px;font-weight:600;letter-spacing:.08em;fill:var(--ink)}.rc-label--sm{font-size:8.5px;letter-spacing:.03em}
.rc-opt-dot{fill:var(--teal)}
.rc-tick{fill:none;stroke:rgba(16,162,175,.5);stroke-width:1}
.rc-flow,.rc-head{fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:square}
.rc-flow.rc-loop,.rc-head.rc-loop{stroke:var(--petrol)}
.rc-loop-label{font-size:9px;font-weight:600;letter-spacing:.14em;fill:var(--petrol)}
.rh-cell{stroke:rgba(23,111,131,.18);stroke-width:1}
.rh-cell--low{fill:rgba(23,111,131,.05)}.rh-cell--medium{fill:rgba(23,111,131,.14)}.rh-cell--high{fill:rgba(16,162,175,.3)}.rh-cell--critical{fill:rgba(16,162,175,.58);stroke:var(--teal)}
.rh-score{font-size:9px;fill:var(--ink)}
.rh-tick,.rh-axis{font-size:8px;font-weight:600;letter-spacing:.1em;fill:var(--muted)}
.rh-limit{fill:none;stroke:var(--petrol);stroke-width:2}
.rh-marker{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}.rh-marker-text{font-size:9px;font-weight:700;fill:var(--ink)}
.rh-link{fill:none;stroke:rgba(10,33,41,.45);stroke-width:1}
.rh-level{font-size:8.5px;font-weight:600;letter-spacing:.12em;fill:var(--petrol)}
.rh-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;fill:var(--ink)}
/* herói de Processos: fluxo aparente → estrutura → descobertas → visão completa */
.rx-s1{transition-delay:.1s}.rx-s2{transition-delay:.3s}.rx-s3{transition-delay:.5s}.rx-s4{transition-delay:.95s}
.rx-s5{transition-delay:1.15s}.rx-s6{transition-delay:1.35s}.rx-s7{transition-delay:1.8s}.rx-s8{transition-delay:2s}
.rx-s9{transition-delay:2.2s}.rx-s10{transition-delay:2.65s}.rx-s11{transition-delay:2.85s}
.pv-stage{fill:var(--paper-2);stroke:rgba(23,111,131,.34);stroke-width:1}
.pv-stage--decision{stroke:var(--teal);stroke-width:1.5}
.pv-stage-label{font-size:9.5px;font-weight:600;letter-spacing:.07em;fill:var(--ink)}
.pv-num{font-size:8px;font-weight:600;letter-spacing:.1em;fill:var(--petrol)}
.pv-flow,.pv-head{fill:none;stroke:var(--teal);stroke-width:1.5}
.pv-gate{fill:var(--paper);stroke:var(--teal);stroke-width:1.5}
.pv-tie{fill:none;stroke:rgba(23,111,131,.4);stroke-width:1}
.pv-tag{fill:var(--paper-2);fill-opacity:.8;stroke:rgba(23,111,131,.22);stroke-width:1}
.pv-tag--alert{stroke:var(--petrol);stroke-width:1.2}
.pv-tag-kind{font-size:8.5px;font-weight:600;letter-spacing:.12em;fill:var(--petrol)}
.pv-tag-sub,.pv-find-sub{font-size:9.5px;fill:var(--muted)}
.pv-loop{fill:none;stroke:var(--petrol);stroke-width:1.2}
.pv-note{font-size:7.5px;font-weight:600;letter-spacing:.12em;fill:var(--petrol)}
.pv-queue{fill:var(--petrol)}
.pv-find{fill:var(--petrol)}.pv-find-text{font-size:8px;font-weight:700;fill:#fff}
.pv-find-title{font-size:9px;font-weight:600;letter-spacing:.1em;fill:var(--ink)}
.pv-rule{fill:none;stroke:rgba(10,33,41,.13);stroke-width:1}
.pv-dim{fill:var(--teal)}.pv-dim-label{font-size:8px;font-weight:600;letter-spacing:.1em;fill:var(--muted)}
.dark .hv-card,.ctx .hv-card{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.26)}
.dark .hv-card-hot,.ctx .hv-card-hot{fill:rgba(16,162,175,.16);stroke:var(--teal-lit)}
.dark .hv-dot,.ctx .hv-dot{stroke:var(--ink-deep)}
.dark .hv-copy,.ctx .hv-copy{fill:#E4EDEF}
.dark .hv-copy-sm,.ctx .hv-copy-sm{fill:#9DB7BE}
.dark .hv-axis,.ctx .hv-axis,.dark .hv-lane-label,.ctx .hv-lane-label{fill:#8FA9B1}
.dark .hv-lane,.ctx .hv-lane{fill:rgba(16,162,175,.04);stroke:rgba(255,255,255,.16)}
.dark .hv-marker,.ctx .hv-marker{fill:var(--ink-deep);stroke:var(--teal-lit)}
.dark .hv-ghost,.ctx .hv-ghost{stroke:rgba(255,255,255,.24)}
.dark .hard-visual,.ctx .hard-visual{border-color:var(--line-dark);background:linear-gradient(145deg,rgba(16,162,175,.13),rgba(6,26,33,.1) 58%),var(--ink-deep)}
.dark .hard-visual::before,.ctx .hard-visual::before{background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px}
.dark .hv-floor,.ctx .hv-floor{fill:rgba(16,162,175,.04);stroke:rgba(255,255,255,.16)}
.dark .hv-guide,.ctx .hv-guide{stroke:rgba(255,255,255,.14)}
.dark .hv-top,.ctx .hv-top{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.3)}
.dark .hv-front,.ctx .hv-front{fill:rgba(16,162,175,.13);stroke:rgba(255,255,255,.22)}
.dark .hv-side,.ctx .hv-side{fill:rgba(16,162,175,.22);stroke:rgba(255,255,255,.22)}
.dark .hv-label,.ctx .hv-label{fill:#E4EDEF}
.dark .hv-micro,.ctx .hv-micro{fill:#8FA9B1}
.dark .hv-line,.ctx .hv-line{stroke:rgba(255,255,255,.35)}
.dark .hv-bar,.ctx .hv-bar{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.3)}
.ctx .ph.hard-visual{background:linear-gradient(155deg,rgba(16,162,175,.2),rgba(6,26,33,.92) 72%)}
.ctx .hard-visual::after{background:linear-gradient(to top,rgba(3,16,22,.72),transparent 58%)}
.dark .hard-visual--integrated,.ctx .hard-visual--integrated{border:0;background:transparent}
.dark .hard-visual--integrated::after,.ctx .hard-visual--integrated::after{background:radial-gradient(ellipse at center,rgba(16,162,175,.12),transparent 64%)}

/* ============ NAV ============ */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--teal);z-index:130}
.nav{position:fixed;top:0;left:0;right:0;z-index:120;background:rgba(242,245,245,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .35s,background .35s}
.nav.stuck{border-bottom-color:var(--line);background:rgba(242,245,245,.96)}
.nav.over{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand svg{width:30px;height:30px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.1em;color:var(--petrol);transition:color .3s}
.brand-txt span{font-size:8px;letter-spacing:.34em;color:var(--muted);margin-top:3px;margin-left:2px;transition:color .3s}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);list-style:none}
.nav-links>li{position:relative}
.nav-links a,.mega-toggle{font-family:var(--sans);font-size:14px;color:var(--ink-soft);text-decoration:none;opacity:.72;background:none;border:0;cursor:pointer;padding:6px 0;transition:opacity .2s,color .2s;display:inline-flex;align-items:center;gap:7px}
.nav-links a:hover,.mega-toggle:hover,.mega-toggle[aria-expanded="true"]{opacity:1;color:var(--petrol)}
.mega-toggle::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.mega-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.nav-right .cliente{font-size:14px;text-decoration:none;color:var(--ink-soft);opacity:.72}
.nav-right .cliente:hover{opacity:1;color:var(--petrol)}
.nav-right .btn{padding:11px 17px;font-size:13.5px}
.nav.over .brand-txt b{color:#fff}
.nav.over .brand-txt span{color:rgba(255,255,255,.55)}
.nav.over .nav-links a,.nav.over .mega-toggle,.nav.over .cliente{color:#fff;opacity:.8}
.nav.over .nav-links a:hover,.nav.over .mega-toggle:hover,.nav.over .cliente:hover{opacity:1;color:#fff}
.nav.over .btn-solid{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);color:#fff;backdrop-filter:blur(8px)}
.nav.over .btn-solid:hover{background:#fff;color:var(--ink);border-color:#fff}
.nav.over .burger{border-color:rgba(255,255,255,.32)}
.nav.over .burger span{background:#fff}

/* mega menu */
.mega{position:fixed;left:0;right:0;top:var(--nav-h);background:var(--paper-2);border-bottom:1px solid var(--line);box-shadow:0 26px 50px -30px rgba(10,33,41,.35);z-index:119}
.mega[hidden]{display:none}
.mega-in{display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:clamp(20px,3vw,44px);padding:clamp(28px,3.4vw,44px) 0}
.mega h4{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mega ul{list-style:none;display:grid;gap:2px}
.mega ul a{font-family:var(--serif);font-size:21px;font-weight:400;opacity:1;color:var(--ink);text-decoration:none;padding:5px 0;display:block;transition:color .2s,transform .25s}
.mega ul a:hover{color:var(--petrol);transform:translateX(4px)}
.mega-feature{background:var(--ink-deep);color:#E4EDEF;padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;border-radius:2px}
.mega-feature h5{font-family:var(--serif);font-size:26px;font-weight:400;color:#fff}
.mega-feature p{font-size:14px;color:#9DB7BE;margin-top:10px;line-height:1.5}
.mega-feature .link{margin-top:18px;align-self:flex-start;color:var(--teal-lit);border-color:rgba(31,186,203,.4)}

/* burger + sheet */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;border-radius:2px;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;width:20px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.sheet{position:fixed;inset:var(--nav-h) 0 0;background:var(--paper);z-index:118;padding:24px clamp(20px,5vw,48px) 44px;overflow-y:auto;display:flex;flex-direction:column}
.sheet[hidden]{display:none}
.sheet a,.sheet button{font-family:var(--serif);font-size:25px;font-weight:400;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%;cursor:pointer}
.sheet .sub{display:grid;padding-left:14px}
.sheet .sub[hidden]{display:none}
.sheet .sub a{font-family:var(--sans);font-size:16px;padding:9px 0}
.sheet .btn{margin-top:22px;justify-content:center;font-family:var(--sans);font-size:15px;border-bottom:0}

/* ============ FOOTER ============ */
footer{background:var(--ink-deep);color:#9DB7BE;padding:clamp(56px,8vh,90px) 0 32px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:36px}
.fgrid h5{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.fgrid ul{list-style:none;display:grid;gap:9px}
.fgrid a{font-size:14.5px;text-decoration:none;color:#9DB7BE;transition:color .2s}
.fgrid a:hover{color:var(--teal-lit)}
.fbrand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.fbrand svg{width:30px;height:30px}
.fbrand b{font-family:var(--serif);font-size:24px;font-weight:400;color:#fff;letter-spacing:.1em}
.fgrid>div:first-child p{font-size:14.5px;max-width:32ch;line-height:1.6}
.fbot{margin-top:52px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7A959D}

/* ============ REVEAL ============
   O estado oculto só existe quando há JavaScript (classe `js` no <html>).
   Sem JS, todo conteúdo nasce visível — a revelação é enfeite, não pré-requisito. */
.rv{transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none}

/* ============ HERO DE PÁGINA INTERNA (sem vídeo, exclusivo da Home) ============ */
.page-hero{padding:calc(var(--nav-h) + clamp(50px,9vh,100px)) 0 clamp(70px,10vh,120px)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,90px);align-items:center}
.page-hero-grid--flow{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(30px,4vw,60px)}
.page-hero h1{max-width:15ch}
.page-hero .lead{margin-top:22px}
.page-hero .ph{aspect-ratio:4/5}
.page-hero .guardian-logo{aspect-ratio:16/9}
.guardian-logo img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero--photo{position:relative;isolation:isolate;min-height:min(760px,88svh);display:flex;align-items:center;background-position:center;background-size:cover;color:#fff}
.page-hero--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,16,22,.9) 0%,rgba(3,16,22,.72) 43%,rgba(3,16,22,.25) 100%),linear-gradient(to top,rgba(3,16,22,.72),transparent 62%)}
.page-hero--public{background-image:url("/assets/img/home-ctx-publico.webp")}
.page-hero--enterprise{background-image:url("/assets/img/home-ctx-empresas.webp")}
.page-hero--guardian{position:relative;isolation:isolate;min-height:min(760px,88svh);display:flex;align-items:center;background:url("/assets/img/fundo_guardian.jpg") center/cover;color:var(--ink)}
.page-hero--guardian::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(242,245,245,.96) 0%,rgba(242,245,245,.86) 44%,rgba(242,245,245,.18) 100%),linear-gradient(to top,rgba(242,245,245,.54),transparent 62%)}
.page-hero--guardian .page-hero-grid{width:100%;position:relative;z-index:1}
.page-hero--guardian .guardian-logo{aspect-ratio:16/9;border:0;background:transparent;align-items:center}
.page-hero--guardian .guardian-logo img{object-fit:contain;padding:24px}
.page-hero--photo .page-hero-grid{width:100%;position:relative;z-index:1}
.page-hero--photo .display-lg,.page-hero--photo .display,.page-hero--photo .display-sm{color:#fff}
.page-hero--photo .lead{color:#D8E6E9}
.page-hero--photo .eyebrow{color:var(--teal-lit)}
.page-hero--photo .btn-line{border-color:var(--line-dark);color:#E4EDEF}
.page-hero--photo .btn-line:hover{border-color:var(--teal-lit);color:var(--teal-lit);background:rgba(255,255,255,.04)}
.page-hero--technology{position:relative;isolation:isolate;min-height:min(760px,88svh);display:flex;align-items:center;overflow:hidden}
.page-hero--technology::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(50,158,171,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(50,158,171,.08) 1px,transparent 1px),radial-gradient(circle at 72% 48%,rgba(18,174,187,.18),transparent 34%);background-size:42px 42px,42px 42px,100% 100%;mask-image:linear-gradient(90deg,#000 0%,#000 50%,transparent 100%)}
.page-hero--technology .page-hero-grid{width:100%;position:relative;z-index:1}
.page-hero--technology .lead{color:#9DB7BE}
.page-hero--technology .eyebrow,.page-hero--technology .display-lg em{color:var(--teal-lit)}
.page-hero--technology .btn-line{border-color:var(--line-dark);color:#E4EDEF}
.page-hero--technology .hard-visual{background:rgba(4,25,34,.45);border-color:rgba(255,255,255,.18)}

/* ============ NARRATIVA STICKY (dor → realidade, sem cards) ============ */
.problem{padding:clamp(90px,15vh,180px) 0 clamp(80px,12vh,150px)}
.problem.tight{padding-top:0}
.problem-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(36px,7vw,110px);align-items:start}
.problem-head{position:sticky;top:calc(var(--nav-h) + 60px)}
.problem-head .display-lg{max-width:13ch}
.problem-list{margin-top:38px}
.problem-list p{color:var(--muted);font-size:17px;padding-left:24px;position:relative}
.problem-list p::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--teal)}
.problem-list .end{padding-left:0;margin-top:1.4em;color:var(--ink-soft);font-weight:500}
.dark .problem-list .end{color:#fff}
.lead-in{font-weight:600;color:var(--ink);margin-top:1.6em}
.dark .lead-in{color:#fff}
.problem-out{margin-top:clamp(46px,8vh,90px);border-top:1px solid var(--line);padding-top:clamp(30px,5vh,52px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:end}
.problem-out .display{max-width:14ch}

/* ============ INDICADORES → DECISÃO ============ */
.measure-claim{margin-top:26px;color:var(--ink);max-width:24ch}
.measure-lead{margin-top:14px}
.block-sep{margin-top:clamp(46px,8vh,90px);border-top:1px solid var(--line);padding-top:clamp(30px,5vh,52px)}
.block-sep .display-sm{max-width:22ch}
.signal-list{list-style:none;border-top:1px solid var(--line)}
.signal-list li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:22px 0;border-bottom:1px solid var(--line)}
.signal-list b{font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--petrol);padding-top:6px}
.signal-list h4{font-family:var(--serif);font-size:clamp(20px,2vw,24px);font-weight:400;line-height:1.2;color:var(--ink)}
.signal-list p{font-size:15px;color:var(--muted);margin-top:7px;max-width:56ch}
.signal-list li.hi{padding-left:20px;background:linear-gradient(90deg,rgba(16,162,175,.08),transparent 70%)}
.signal-list li.hi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal)}
/* sequência horizontal: trilho que acende e etapas em ordem; o exemplo atravessa as quatro */
.signal-path{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,auto);column-gap:clamp(20px,2.6vw,34px);row-gap:0;margin-top:clamp(38px,6vh,64px);padding-top:34px}
.signal-path::before,.signal-path::after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.signal-path::after{background:var(--teal);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,1,.36,1) .1s}
.js .signal-path:not(.in)::after{transform:scaleX(0)}
.signal-step{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 4;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.signal-step::before{content:"";position:absolute;left:0;top:-34px;width:13px;height:13px;border:1px solid var(--teal);background:var(--paper-2);transition:background .5s}
.signal-path.in .signal-step::before{background:var(--teal)}
.js .signal-path:not(.in) .signal-step{opacity:0;transform:translateY(10px)}
.signal-step:nth-child(2),.signal-step:nth-child(2)::before{transition-delay:.3s}
.signal-step:nth-child(3),.signal-step:nth-child(3)::before{transition-delay:.6s}
.signal-step:nth-child(4),.signal-step:nth-child(4)::before{transition-delay:.9s}
.signal-tag{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol)}
.signal-step h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,32px);line-height:1.16;color:var(--ink);margin-top:10px}
.signal-step>p{font-size:15px;color:var(--muted);margin-top:10px}
.signal-step>.signal-ex{align-self:start;margin-top:20px;padding:14px 16px;border-left:2px solid var(--teal);background:rgba(16,162,175,.06);color:var(--ink-soft)}
.signal-ex b{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);margin-bottom:6px}
.signal-path+.g-caption{margin-top:16px}
.trace{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,34px);margin-top:clamp(30px,5vh,44px)}
.trace div{border-top:2px solid var(--teal);padding-top:16px}
.trace dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol)}
.trace dd{font-size:15px;color:var(--muted);margin-top:8px}
.signal-list h3{font-family:var(--serif);font-size:clamp(20px,2vw,24px);font-weight:400;line-height:1.2;color:var(--ink)}
.signal-list .say{color:var(--ink-soft);font-weight:500}
.ask-not{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--teal);margin-top:6px}
.problem-head .lead-in:first-of-type{margin-top:0}
.problem-head .lead-in+.display{margin-top:6px}
.seq--tight .seq-item h3{font-size:clamp(23px,2.6vw,32px);line-height:1.16}
.seq--tight{margin-top:14px}
.problem-out--open{margin-top:0;border-top:0;padding-top:0}
.ai-band{fill:rgba(16,162,175,.06);stroke:rgba(16,162,175,.45);stroke-width:1;stroke-dasharray:4 4}
.ai-divider{fill:none;stroke:var(--petrol);stroke-width:1.2;stroke-dasharray:3 5}
.ai-doc{fill:var(--paper-2);stroke:rgba(23,111,131,.5);stroke-width:1.2}
.ai-doc-line{fill:none;stroke:rgba(23,111,131,.3);stroke-width:1.5}
.pv-stage--hot{fill:rgba(16,162,175,.14);stroke:var(--teal);stroke-width:1.5}
/* variante por fases: rótulo da fase + duas entregas por coluna, alinhadas entre colunas */
.phase-path{grid-template-rows:repeat(3,auto)}
.phase-path .signal-step{grid-row:span 3}
.deliv{padding:22px 0;border-bottom:1px solid var(--line)}
.deliv:first-of-type{margin-top:16px;border-top:1px solid var(--line)}
.deliv h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,24px);line-height:1.2;color:var(--ink)}
.deliv p{font-size:15px;color:var(--muted);margin-top:8px}
.deliv .deliv-q{margin-top:14px;font-family:var(--serif);font-size:clamp(16.5px,1.45vw,18.5px);line-height:1.35;color:var(--ink-soft)}
.deliv-q b{display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);margin-bottom:4px}
.phase-path+.problem-out{margin-top:clamp(46px,8vh,90px)}
.problem-out .chain{grid-column:1/-1;margin-top:0}
.problem-out .chain~div .lead{margin-top:0}

/* ============ JORNADA / CICLO (qualquer nº de etapas numeradas) ============ */
.seq{position:relative;padding-left:38px}
.seq::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:1px;background:var(--line)}
.seq-fill{position:absolute;left:6px;top:12px;width:1px;background:var(--teal);height:0;transition:height 1.1s cubic-bezier(.3,1,.4,1)}
.seq-item{position:relative;padding:clamp(18px,3.4vh,30px) 0}
.seq-item::before{content:"";position:absolute;left:-38px;top:calc(clamp(18px,3.4vh,30px) + 12px);width:13px;height:13px;border:1px solid var(--line);background:var(--paper-2);transform:translateX(0) rotate(0);transition:border-color .5s,background .5s}
.seq-item.on::before{border-color:var(--teal);background:var(--teal)}
.seq-item h3{font-family:var(--serif);font-size:clamp(30px,4.4vw,52px);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--ink);transition:color .6s}
.js .seq-item h3{color:rgba(10,33,41,.22)}
.js .seq-item.on h3{color:var(--ink)}
.seq-item span{display:block;font-size:15px;color:var(--muted);margin-top:8px;transition:opacity .6s .1s,transform .6s .1s;max-width:40ch}
.js .seq-item span{opacity:0;transform:translateY(6px)}
.js .seq-item.on span{opacity:1;transform:none}
.seq--pad{margin-top:clamp(30px,5vh,52px)}

/* ============ CADEIA DE PROCESSO (fluxo curto em etapas de texto) ============ */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 4px;margin-top:28px}
.chain span{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);background:rgba(23,111,131,.08);border:1px solid rgba(23,111,131,.2);padding:9px 14px;border-radius:2px}
.chain i{width:16px;height:1px;background:var(--line);flex-shrink:0;margin:0 2px}
.dark .chain span{color:var(--teal-lit);background:rgba(31,186,203,.08);border-color:rgba(31,186,203,.25)}
.dark .chain i{background:var(--line-dark)}
.js .chain--fallback{display:none}
.chain-out{margin-top:22px;font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,23px);color:var(--ink);max-width:44ch}
.dark .chain-out{color:#fff}

/* ============ SPLIT SCREEN (dois contextos) ============ */
.contexts-head{padding:clamp(76px,11vh,140px) 0 clamp(32px,5vh,56px)}
.contexts-head .display{max-width:16ch}
.contexts{display:grid;grid-template-columns:1fr 1fr;transition:grid-template-columns .7s cubic-bezier(.22,1,.36,1)}
.contexts:has(.ctx:first-child:hover){grid-template-columns:1.18fr .82fr}
.contexts:has(.ctx:last-child:hover){grid-template-columns:.82fr 1.18fr}
.ctx{position:relative;min-height:min(78vh,700px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,4vw,54px);overflow:hidden;color:#fff;isolation:isolate}
.ctx .ph{position:absolute;inset:0;z-index:0;border:0;align-items:flex-start}
.ctx .ph b{color:rgba(255,255,255,.5)}
.ctx .ph b span{color:rgba(255,255,255,.38)}
.ctx-a .ph{background:linear-gradient(160deg,#0F4C5C,#0A2129 72%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 11px)}
.ctx-b .ph{background:linear-gradient(160deg,#14707F,#0B3542 72%),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 11px)}
.ctx::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(3,16,22,.92),rgba(3,16,22,.35) 52%,rgba(3,16,22,.12));transition:opacity .5s}
.ctx:hover::before{opacity:.86}
.ctx-in{position:relative;z-index:2;max-width:46ch}
.ctx-in h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.9vw,38px);line-height:1.12;margin-bottom:14px}
.ctx-in p{color:rgba(226,240,243,.78);font-size:16.5px}
.ctx-in .link{margin-top:22px;color:#fff;border-color:rgba(255,255,255,.35)}
.ctx-in .link:hover{border-color:#fff}
.ctx-tag{position:absolute;top:clamp(24px,3.4vw,44px);left:clamp(28px,4vw,54px);z-index:2;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-lit)}

/* ============ GRUPOS EDITORIAIS (itens relacionados, sem grade uniforme) ============ */
.groups{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px) clamp(30px,6vw,90px);margin-top:clamp(40px,6vh,64px)}
.group h4{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,25px);line-height:1.2;letter-spacing:-.01em}
.group p{color:var(--muted);margin-top:10px;max-width:46ch}
.dark .group h4{color:#fff}
.dark .group p{color:#9DB7BE}

/* ============ CENÁRIOS CONECTADOS (2-3 situações → mesma resposta) ============ */
.scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,40px);margin-top:clamp(40px,6vh,64px)}
.scenario{padding-top:24px;border-top:2px solid var(--teal)}
.scenario b{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);display:block;margin-bottom:10px}
.scenario p{color:var(--muted);max-width:34ch}
.scenarios-out{margin-top:clamp(34px,5vh,54px);padding-top:26px;border-top:1px solid var(--line);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,23px);max-width:52ch}

/* ============ LISTA DE TRAÇOS EM FUNDO ESCURO ============ */
.tech-lines{margin-top:26px}
.tech-lines p{color:#9DB7BE;padding-left:22px;position:relative}
.tech-lines p::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:1px;background:var(--teal)}

/* ============ AFIRMAÇÃO EM DESTAQUE (fundo escuro) ============ */
.g-claim{margin-top:1.5em;font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);line-height:1.3;color:#7FA0A9}
.g-claim span{color:#fff}

/* ============ GALERIA DE FOTOS (irregular) ============ */
.exp-photos{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:clamp(40px,6vh,68px)}
.exp-photos .ph{aspect-ratio:4/5;background-color:var(--paper-2)}
.exp-photos .ph:first-child{aspect-ratio:auto;min-height:100%}
.exp-photos--pair{grid-template-columns:1.4fr 1fr}

/* ============ CLIENTES / PROJETOS CONFIRMADOS ============ */
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:14px}
.client{background:var(--paper-3);padding:24px 22px;display:flex;flex-direction:column;gap:10px;min-height:118px;justify-content:space-between}
.client b{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.22}
.client small{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.g-caption{font-size:11.5px;letter-spacing:.04em;color:#66858E;margin-top:14px;text-align:right}
.g-caption.left{text-align:left}

/* ============ FAIXA DE LIGAÇÃO ENTRE PÁGINAS ============ */
.help-cross{margin-top:clamp(44px,7vh,80px);border-top:1px solid var(--line);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px 46px;align-items:baseline}
.help-cross em{font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.help-cross a{font-family:var(--serif);font-size:24px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.help-cross a:hover{color:var(--petrol);border-color:var(--petrol)}

/* ============ GRADE DE EQUIPE (placeholder até haver fotos reais) ============ */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(20px,3vw,32px);margin-top:clamp(34px,5vh,54px)}
.team .ph{aspect-ratio:3/4}
.team figcaption{margin-top:12px}
.team figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:18px}
.team figcaption span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* ============ FORMULÁRIO ============ */
.form-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,90px);align-items:start}
.field{margin-bottom:22px}
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;transition:border-color .25s}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus{border-color:var(--petrol);outline:0}
.field-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);margin-bottom:26px}
.field-check input{margin-top:3px}
.field-radios{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.field-radios label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);border:1px solid var(--line);padding:10px 16px;border-radius:2px;cursor:pointer;transition:border-color .2s,color .2s}
.field-radios input{accent-color:var(--petrol)}
.field-radios label:has(input:checked){border-color:var(--petrol);color:var(--petrol)}
.contact-direct{margin-top:clamp(34px,5vh,54px);border-top:1px solid var(--line);padding-top:26px}
.contact-direct dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:16px}
.contact-direct dt:first-child{margin-top:0}
.contact-direct dd{font-family:var(--serif);font-size:19px;color:var(--ink);margin-top:4px}

/* ============ CTA FINAL ============ */
.final{position:relative;overflow:hidden;padding:clamp(100px,17vh,210px) 0}
.final-mark{position:absolute;right:-8%;bottom:-32%;width:min(52vw,620px);height:min(52vw,620px);opacity:.06;pointer-events:none}
.final .shell{position:relative;z-index:1}
.final .display-lg{max-width:16ch}
.final .display-sm{color:var(--petrol);margin-top:18px;max-width:20ch}
.final p{margin-top:26px;max-width:52ch;color:var(--muted)}
.final .final-mail{margin-top:22px;font-size:15px}
.final-mail .link{margin-left:6px}

/* ============ RESPONSIVO (base) ============ */
@media (max-width:1140px){
  .nav-links,.nav-right .cliente,.nav-right .btn{display:none}
  .burger{display:block}
  .mega{display:none!important}
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .exp-photos{grid-template-columns:1fr 1fr}
  .exp-photos .ph:first-child{aspect-ratio:16/10;grid-column:1 / -1;min-height:0}
  .exp-photos--pair{grid-template-columns:1.4fr 1fr}
  .exp-photos--pair .ph:first-child{aspect-ratio:auto;grid-column:auto;min-height:100%}
}
@media (max-width:900px){
  body{font-size:16px}
  .fgrid{grid-template-columns:1fr 1fr}
  .btns .btn{flex:1 1 auto;justify-content:center}
  .page-hero-grid,.problem-grid,.problem-out,.contexts,.groups,.form-grid{grid-template-columns:1fr;gap:26px}
  .problem-head{position:static}
  .ctx{min-height:64vh}
  .scenarios{grid-template-columns:1fr;gap:22px}
  .clients{grid-template-columns:1fr}
  .hard-visual--hero{aspect-ratio:16/10}
  .hard-visual--context-hero{aspect-ratio:1/1}
  .signal-path{grid-template-columns:1fr;grid-template-rows:none;row-gap:34px;padding-top:0;padding-left:34px}
  .signal-path::before,.signal-path::after{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .signal-path::after{transform-origin:top}
  .js .signal-path:not(.in)::after{transform:scaleY(0)}
  .signal-step,.phase-path .signal-step{display:block;grid-row:auto}
  .signal-step::before{left:-34px;top:2px}
  .trace{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:1fr}
  .seq{padding-left:30px}
  .seq-item::before{left:-30px}
  .exp-photos{grid-template-columns:1fr}
  .exp-photos--pair .ph:first-child{aspect-ratio:16/10;min-height:0}
  .hard-visual--stack{aspect-ratio:3/4}
  .trace{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .seq-item,.seq-item h3,.seq-item span{opacity:1!important;transform:none!important;transition:none!important;color:var(--ink)}
  .contexts{transition:none}
  .hv-node{opacity:1!important;transition:none!important}
  .hv-link{stroke-dashoffset:0!important;transition:none!important}
  .chv-node{opacity:1!important;transform:none!important;transition:none!important}
  .chv-spine,.chv-connector{opacity:1!important;transition:none!important}
  .rm-phase--1,.rm-phase--2,.rm-phase--4,.rm-phase--6,.rm-cell,.rm-marker,.rm-scenario,.rm-control,.rm-priority{opacity:1!important;transform:none!important;transition:none!important}
  .rm-connector{stroke-dashoffset:0!important;transition:none!important}
  .rx-fade,.rx-pop{opacity:1!important;transform:none!important;transition:none!important}
  .rx-draw{stroke-dashoffset:0!important;transition:none!important}
  .signal-path::after,.signal-step,.signal-step::before{transform:none!important;opacity:1!important;transition:none!important}
}