/* ========================================================================= STRATAGO — Design System unificado 3 temas via [data-theme] em : paper (claro) · slate (intermediário) · obsidian (escuro) Persistência: localStorage key 'stratago-theme' ========================================================================= */ /* ---- TEMA: obsidian (escuro) — default ---- */ :root, [data-theme="obsidian"]{ --bg:#0A0908; --surface:#15130F; --surface-2:#131210; --surface-3:#1B1917; --line:rgba(200,169,110,0.14); --line-strong:rgba(200,169,110,0.32); --text:#EDE8DE; --text-dim:#9B958A; --text-faint:#615C53; --amber:#C8A96E; --amber-bright:#E4C489; --amber-dim:#8A733F; --teal:#8FAE7C; --teal-dim:#6E9160; --crit:#B36658; --warn:#C8A96E; --ok:#8FAE7C; --incons:#9C7BB0; --indet:#6E6862; --mesh-1:rgba(200,169,110,0.07); --mesh-2:rgba(156,123,176,0.05); --mesh-3:rgba(143,174,124,0.05); --radius:0px; --btn-text-on-amber:#0A0908; } /* ---- TEMA: slate (intermediário) ---- */ [data-theme="slate"]{ --bg:#1C2226; --surface:#242B30; --surface-2:#20262A; --surface-3:#2B333A; --line:rgba(200,169,110,0.16); --line-strong:rgba(200,169,110,0.34); --text:#EDEFEF; --text-dim:#A7AFB3; --text-faint:#6E777C; --amber:#D1A868; --amber-bright:#E8C68C; --amber-dim:#9C7C4C; --teal:#7FC4D2; --teal-dim:#4E96A4; --crit:#D08573; --warn:#D1A868; --ok:#8FC49A; --incons:#B79AC9; --indet:#8A9298; --mesh-1:rgba(45,154,176,0.08); --mesh-2:rgba(209,168,104,0.06); --mesh-3:rgba(143,174,124,0.05); --radius:6px; --btn-text-on-amber:#1C2226; } /* ---- TEMA: paper (claro) ---- */ [data-theme="paper"]{ --bg:#F6F3EC; --surface:#FFFFFF; --surface-2:#FBF9F4; --surface-3:#F1EDE3; --line:rgba(22,35,43,0.10); --line-strong:rgba(22,35,43,0.22); --text:#16232B; --text-dim:#5B6B72; --text-faint:#8B959A; --amber:#B98A46; --amber-bright:#8F6A34; --amber-dim:#D1A868; --teal:#2D9AB0; --teal-dim:#1E6E7E; --crit:#B5573F; --warn:#B98A46; --ok:#4F8F63; --incons:#7D5C93; --indet:#7A8388; --mesh-1:rgba(45,154,176,0.08); --mesh-2:rgba(185,138,70,0.07); --mesh-3:rgba(79,143,99,0.05); --radius:6px; --btn-text-on-amber:#FFFFFF; } /* ========================================================================= BASE ========================================================================= */ *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family:var(--font-b); line-height:1.55; -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease; } body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 900px 500px at 15% -5%, var(--mesh-1), transparent 60%), radial-gradient(ellipse 700px 500px at 90% 15%, var(--mesh-2), transparent 60%), radial-gradient(ellipse 700px 500px at 10% 70%, var(--mesh-3), transparent 60%); } .wrap{max-width:1100px; margin:0 auto; padding:0 28px; position:relative; z-index:1;} a{color:inherit;} sub, sup{font-size:0.7em;} /* ========================================================================= NAV ========================================================================= */ nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);} nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1100px; gap:16px;} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-m); font-size:13px; letter-spacing:0.06em; color:var(--text-dim); white-space:nowrap;} .brand .gem{width:9px; height:9px; background:var(--amber); flex-shrink:0;} [data-theme="obsidian"] .brand .gem{transform:rotate(45deg);} [data-theme="paper"] .brand .gem, [data-theme="slate"] .brand .gem{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);} .brand strong{color:var(--text); font-weight:500;} .nav-links{display:flex; gap:22px; list-style:none; font-size:13px; color:var(--text-dim);} .nav-links a{text-decoration:none;} .nav-links a:hover{color:var(--amber);} .nav-cta{font-family:var(--font-m); font-size:12px; color:var(--amber); border:1px solid var(--line-strong); padding:8px 16px; text-decoration:none; transition:all .2s; border-radius:var(--radius); white-space:nowrap;} .nav-cta:hover{background:color-mix(in srgb, var(--amber) 10%, transparent); border-color:var(--amber);} .nav-tag{font-family:var(--font-m); font-size:10.5px; color:var(--amber-dim); border:1px solid var(--line-strong); padding:5px 12px; letter-spacing:0.08em; white-space:nowrap;} @media(max-width:760px){.nav-links{display:none;}} /* Theme switcher — 3 pills, injected identically in every page */ .theme-switch{display:flex; gap:2px; border:1px solid var(--line-strong); padding:2px; border-radius:var(--radius); flex-shrink:0;} .theme-switch button{ width:22px; height:22px; border:none; cursor:pointer; border-radius:calc(var(--radius) - 2px); background:transparent; opacity:0.5; transition:opacity .2s; } .theme-switch button.active{opacity:1; box-shadow:0 0 0 1px var(--line-strong) inset;} .theme-switch button[data-t="paper"]{background:#F6F3EC;} .theme-switch button[data-t="slate"]{background:#242B30;} .theme-switch button[data-t="obsidian"]{background:#0A0908;} /* ========================================================================= HERO ========================================================================= */ .hero{padding:88px 0 52px;} .hero.no-border{border-top:none;} .eyebrow{font-family:var(--font-m); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-dim); margin-bottom:22px; display:flex; align-items:center; gap:10px;} .eyebrow::before{content:''; width:26px; height:1px; background:var(--amber-dim);} h1{font-family:var(--font-d); font-weight:400; font-size:clamp(32px,4.8vw,54px); line-height:1.1; letter-spacing:-0.01em; max-width:800px; margin-bottom:22px; color:var(--text);} h1 em{font-style:italic; color:var(--amber-bright);} h1 strong{font-weight:400; color:var(--amber-bright);} .hero-sub{font-size:16.5px; color:var(--text-dim); max-width:620px;} .formula-line{font-family:var(--font-m); font-size:14.5px; color:var(--amber); margin-top:26px; padding:14px 18px; background:var(--surface); border:1px solid var(--line); display:inline-block; border-radius:var(--radius);} .formula-line .exp{color:var(--text-faint); font-size:11.5px;} .thesis-box{margin-top:28px; padding:20px 24px; background:var(--surface); border-left:2px solid var(--amber); font-size:14.5px; color:var(--text-dim); max-width:680px; line-height:1.65; border-radius:0 var(--radius) var(--radius) 0;} .thesis-box b{color:var(--text);} /* ========================================================================= SECTIONS ========================================================================= */ section{padding:52px 0; border-top:1px solid var(--line);} .section-head{margin-bottom:32px;} .section-head.center{text-align:center;} .section-label{font-family:var(--font-m); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px;} h2{font-family:var(--font-d); font-weight:400; font-size:28px; letter-spacing:-0.01em; max-width:640px; color:var(--text);} h2.full{max-width:100%;} .section-desc{color:var(--text-dim); font-size:15px; max-width:600px; margin-top:10px;} /* ========================================================================= FORM CONTROLS (sliders, inputs, selects) ========================================================================= */ input[type=range]{-webkit-appearance:none; width:100%; height:2px; background:var(--line-strong); outline:none; border-radius:2px;} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--amber); cursor:pointer; border:2px solid var(--bg); box-shadow:0 0 0 1px var(--amber);} input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--amber); cursor:pointer; border:2px solid var(--bg);} .field{display:flex; flex-direction:column; gap:6px;} .field label{font-family:var(--font-m); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;} .field input[type=text], .field input[type=email], .field select, .field textarea{ background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text); padding:11px 12px; font-family:var(--font-b); font-size:13.5px; border-radius:var(--radius); resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--amber);} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;} @media(max-width:560px){.form-row{grid-template-columns:1fr;}} /* ========================================================================= CARDS (generic surface block) ========================================================================= */ .card{background:var(--surface); border:1px solid var(--line); padding:20px 22px; border-radius:var(--radius);} .card-strong{background:var(--surface); border:1px solid var(--line-strong); padding:26px; border-radius:var(--radius);} .card-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;} .card-name{font-family:var(--font-b); font-weight:500; font-size:14px; color:var(--text);} .card-tag{font-family:var(--font-m); font-size:11px; color:var(--amber-dim);} .card-hint{font-size:12.5px; color:var(--text-faint); margin-bottom:14px;} .slider-row{display:flex; align-items:center; gap:14px; margin-bottom:10px;} .slider-row:last-child{margin-bottom:0;} .slider-row label{font-size:12.5px; color:var(--text-dim); width:170px; flex-shrink:0;} .slider-val{font-family:var(--font-m); font-size:12.5px; color:var(--amber); width:32px; text-align:right; flex-shrink:0;} .readout{display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--font-m); font-size:12.5px; color:var(--text-faint);} .readout b{color:var(--amber-bright); font-size:14px;} /* ========================================================================= BUTTONS ========================================================================= */ .btn-primary{display:inline-block; padding:13px 26px; background:var(--amber); color:var(--btn-text-on-amber); font-family:var(--font-b); font-weight:700; font-size:13.5px; text-decoration:none; border:none; cursor:pointer; border-radius:var(--radius); transition:all .2s;} .btn-primary:hover{background:var(--amber-bright);} .btn-primary.block{display:block; width:100%; text-align:center;} .btn-secondary{display:inline-block; padding:12px 22px; background:transparent; border:1.5px solid var(--line-strong); color:var(--text-dim); font-family:var(--font-b); font-size:13px; text-decoration:none; cursor:pointer; border-radius:var(--radius); transition:all .2s;} .btn-secondary:hover{border-color:var(--amber); color:var(--amber);} .btn-secondary.block{display:block; width:100%; text-align:center;} /* ========================================================================= EXPANDABLE LAYERS (Como Funciona panels) ========================================================================= */ .layers{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);} .layers.grid-2{display:grid; grid-template-columns:1fr 1fr;} @media(max-width:700px){.layers.grid-2{grid-template-columns:1fr;}} .layer-item{background:var(--surface-2); padding:18px 22px; cursor:pointer; transition:background .2s; display:flex; gap:16px; align-items:flex-start;} .layer-item:hover{background:var(--surface-3);} .layer-item.open{background:var(--surface-3);} .layer-num{font-family:var(--font-m); font-size:11px; color:var(--amber-dim); flex-shrink:0; padding-top:2px;} .layer-content{flex:1;} .layer-title{font-family:var(--font-b); font-weight:500; font-size:14px; color:var(--text);} .layer-body{font-size:13px; color:var(--text-dim); line-height:1.6; margin-top:8px; display:none;} .layer-item.open .layer-body{display:block;} /* ========================================================================= PRICING GRID ========================================================================= */ .pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);} @media(max-width:860px){.pricing-grid{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.pricing-grid{grid-template-columns:1fr;}} .tier{background:var(--surface-2); padding:26px 22px; position:relative;} .tier.featured{background:var(--surface-3);} .tier.featured::before{content:attr(data-featured-label); position:absolute; top:0; left:0; right:0; background:var(--amber); color:var(--btn-text-on-amber); font-family:var(--font-m); font-size:9.5px; letter-spacing:0.1em; text-align:center; padding:4px;} .tier-name{font-family:var(--font-b); font-weight:700; font-size:14px; margin-top:10px; color:var(--text);} .tier-price{font-family:var(--font-d); font-size:26px; color:var(--amber-bright); margin:10px 0 4px;} .tier-price span{font-family:var(--font-m); font-size:11px; color:var(--text-faint);} .tier-desc{font-size:12px; color:var(--text-dim); line-height:1.55; margin-top:8px;} /* ========================================================================= BADGES / CHIPS ========================================================================= */ .badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;} .badge{font-family:var(--font-m); font-size:10.5px; color:var(--text-faint); border:1px solid var(--line); padding:5px 10px; border-radius:var(--radius);} .badge b{color:var(--amber);} .pillar-chip{font-family:var(--font-m); font-size:11px; color:var(--text-dim); border:1px solid var(--line); padding:7px 14px; background:var(--surface); border-radius:var(--radius);} .pillar-chip b{color:var(--amber);} .pillars-row{display:flex; gap:10px; flex-wrap:wrap;} /* ========================================================================= GATE (blurred content behind email capture) ========================================================================= */ .gate-wrap{position:relative; overflow:hidden; border-radius:var(--radius);} .gate-content{filter:blur(6px); user-select:none; pointer-events:none; transition:filter .2s;} .gate-content.unlocked{filter:none; pointer-events:auto;} .gate-overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:color-mix(in srgb, var(--bg) 55%, transparent); padding:20px; text-align:center;} .gate-overlay.hidden{display:none;} .gate-overlay input{padding:11px 14px; background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text); font-family:var(--font-b); font-size:13.5px; width:280px; max-width:80vw; border-radius:var(--radius);} .gate-overlay button{padding:11px 20px; background:var(--amber); color:var(--btn-text-on-amber); border:none; font-family:var(--font-b); font-weight:700; font-size:13px; cursor:pointer; border-radius:var(--radius);} /* ========================================================================= LEAD FORM ========================================================================= */ .form-card{background:var(--surface); border:1px solid var(--line-strong); padding:36px; max-width:640px; margin:0 auto; border-radius:var(--radius);} .form-success{display:none; text-align:center; padding:20px 0;} .form-success.show{display:block;} .form-success h3{font-family:var(--font-d); font-size:22px; color:var(--amber-bright); margin-bottom:8px;} .form-success p{color:var(--text-dim); font-size:13.5px;} .dual-mandate{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--surface-3); border:1px solid var(--line-strong); margin-bottom:18px; font-size:13px; color:var(--text-dim); border-radius:var(--radius);} .dual-mandate input{width:16px; height:16px; accent-color:var(--amber);} /* ========================================================================= RESULT / VERDICT PANEL (dark block regardless of theme — decision moment) ========================================================================= */ .result-panel{background:var(--surface-3); border:1px solid var(--line-strong); border-radius:var(--radius); padding:34px;} .verdict-tag{font-family:var(--font-m); font-size:13px; letter-spacing:0.06em; text-transform:uppercase; padding:7px 16px; border:1px solid; text-align:center; display:inline-block; border-radius:var(--radius);} .refuse-box{margin-top:16px; padding:14px 16px; background:color-mix(in srgb, var(--incons) 12%, transparent); border:1px solid color-mix(in srgb, var(--incons) 45%, transparent); font-size:12.5px; color:var(--incons); display:none; border-radius:var(--radius);} .refuse-box.show{display:block;} /* ========================================================================= GLOSSARY TABS ========================================================================= */ .tabs{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;} .tab-btn{font-family:var(--font-b); font-size:13px; padding:9px 16px; border-radius:20px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text-dim); cursor:pointer;} .tab-btn.active{background:var(--text); color:var(--bg); border-color:var(--text);} .glossary-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;} @media(max-width:700px){.glossary-grid{grid-template-columns:1fr;}} .glossary-item{background:var(--surface); border:1px solid var(--line); padding:16px 18px; display:none; border-radius:var(--radius);} .glossary-item.show{display:block;} .glossary-term{font-family:var(--font-b); font-weight:700; font-size:14px; margin-bottom:4px; color:var(--text);} .glossary-def{font-size:12.5px; color:var(--text-dim); line-height:1.55;} .glossary-module{font-family:var(--font-m); font-size:10px; color:var(--amber-dim); margin-top:8px; display:inline-block;} /* ========================================================================= TABLE (pillar reference) ========================================================================= */ table{width:100%; border-collapse:collapse; margin-top:8px;} th{text-align:left; font-family:var(--font-m); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); padding:12px 16px; border-bottom:1px solid var(--line-strong);} td{padding:14px 16px; border-bottom:1px solid var(--line); font-size:13px; color:var(--text-dim); vertical-align:top;} td.pillar-name{color:var(--amber); font-family:var(--font-m); font-size:12.5px; white-space:nowrap;} tr:last-child td{border-bottom:none;} /* ========================================================================= GRIDS (generic responsive helpers) ========================================================================= */ .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;} .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong);} .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);} @media(max-width:860px){.grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr;}} /* ========================================================================= FOOTER ========================================================================= */ footer{border-top:1px solid var(--line); padding:30px 0;} footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;} .foot-tag{font-family:var(--font-m); font-size:11px; color:var(--text-faint);} /* ========================================================================= UTILITIES (evita estilo inline nas páginas) ========================================================================= */ button{cursor:pointer;} .no-border{border-top:none !important;} .center-text{text-align:center;} .full{max-width:100% !important;} .mt-sm{margin-top:8px;} .mt-md{margin-top:14px;} .mt-lg{margin-top:24px;} .mb-sm{margin-bottom:14px;} .spacer-md{height:26px;} .text-strong{color:var(--text);} .m-value.sm{font-size:24px;} .gate-message{font-family:var(--font-b); font-size:13.5px; color:var(--text-dim); max-width:320px;} .benchmark-text{font-size:14px; color:var(--text-dim); max-width:480px; margin:0 auto 12px;} .inline-flex-gap{display:flex; align-items:center; gap:12px;} /* ========================================================================= PAINEL DE VEREDITO — sempre escuro nos 3 temas (peso do "momento de decisão") ========================================================================= */ .result-panel{background:#12212B; border:1px solid rgba(200,169,110,0.22); color:#EDEFEF;} .result-panel .m-label{color:rgba(237,239,239,0.5);} .result-panel .m-value{color:var(--amber-bright);} .result-panel .result-recommendation{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:rgba(237,239,239,0.88);} .result-panel .result-recommendation b{color:#fff;} .result-panel .module-tag{color:var(--amber-bright); border-color:rgba(209,168,104,0.4);} .result-panel .btn-secondary{color:rgba(237,239,239,0.85); border-color:rgba(255,255,255,0.3);} /* elementos específicos por id (únicos na suite, sem conflito entre páginas) */ #needle{transform-origin:150px 160px; transition:transform .4s;} #radar-poly{transition:points .3s;} /* ========================================================================= METRIC CARD — cards de entrada com valor único (confluência, raio-x) ========================================================================= */ .input-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;} .input-grid.cols-5{grid-template-columns:repeat(5,1fr);} @media(max-width:900px){.input-grid, .input-grid.cols-5{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.input-grid, .input-grid.cols-5{grid-template-columns:1fr;}} .input-card{background:var(--surface); border:1px solid var(--line); padding:16px; border-radius:var(--radius);} .input-card.accent{border-color:var(--line-strong); background:var(--surface-3);} .input-card-head{display:flex; justify-content:space-between; margin-bottom:8px;} .input-card-name{font-family:var(--font-b); font-weight:500; font-size:12.5px; color:var(--text);} .input-card-tag{font-family:var(--font-m); font-size:10.5px; color:var(--amber-dim);} .input-card-val, .input-card-score{font-family:var(--font-m); font-size:13px; color:var(--amber); text-align:right; margin-top:6px;} /* ========================================================================= SLIDER GROUP — cards de entrada com hint + slider único (α_Liquidez, SDD, Bubble Radar) ========================================================================= */ .slider-group, .layer-card, .signal-card{background:var(--surface); border:1px solid var(--line); padding:18px 20px; margin-bottom:14px; border-radius:var(--radius);} .slider-group-head, .layer-card-head, .signal-card-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px;} .slider-group-name, .layer-card-name, .signal-card-name{font-family:var(--font-b); font-weight:500; font-size:13.5px; color:var(--text);} .slider-group-tag, .layer-card-tag{font-family:var(--font-m); font-size:11px; color:var(--amber-dim);} .signal-card-val{font-family:var(--font-m); font-size:13px; color:var(--amber);} .slider-group-hint, .layer-card-hint, .signal-card-hint{font-size:12px; color:var(--text-faint); margin-bottom:14px;} .sliders-panel{display:flex; flex-direction:column; gap:22px;} .signals-panel{display:flex; flex-direction:column;} .layer-slider-row{display:flex; align-items:center; gap:16px;} .layer-slider-row label{font-size:13px; color:var(--text-dim); width:230px; flex-shrink:0;} .layer-val{font-family:var(--font-m); font-size:13px; color:var(--amber-dim); width:32px; text-align:right; flex-shrink:0;} /* readouts (mass/alpha/CR) */ .alpha-readout, .mass-readout{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--font-m); font-size:12px; color:var(--text-faint);} .alpha-readout b, .mass-readout b{color:var(--amber-bright); font-size:14px;} .cr-readout{display:flex; justify-content:space-between; align-items:center; margin-top:6px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--font-m); font-size:13px;} .cr-readout .label{color:var(--text-faint);} .cr-readout .value{color:var(--amber-bright); font-size:16px;} .cr-status{font-size:11.5px; padding:3px 10px; border:1px solid; border-radius:var(--radius);} .cr-status.ok{color:var(--ok); border-color:var(--ok);} .cr-status.bad{color:var(--crit); border-color:var(--crit);} /* ========================================================================= AHP / MACBETH MATRIX (CAPEX ESG) ========================================================================= */ .ahp-card{background:var(--surface); border:1px solid var(--line); padding:26px 28px; margin-bottom:24px; border-radius:var(--radius);} .ahp-card h3{font-family:var(--font-b); font-weight:700; font-size:14px; margin-bottom:4px; color:var(--text);} .ahp-card .sub{font-size:12.5px; color:var(--text-faint); margin-bottom:20px;} .pair-row, .macbeth-row{display:grid; grid-template-columns:1fr 2fr 60px; align-items:center; gap:16px; margin-bottom:18px;} @media(max-width:640px){.pair-row, .macbeth-row{grid-template-columns:1fr; gap:6px;}} .pair-label{font-size:13px; color:var(--text-dim); display:flex; justify-content:space-between;} .pair-label b{color:var(--text); font-weight:500;} .tfn-val{font-family:var(--font-m); font-size:12px; color:var(--amber); text-align:right;} .macbeth-scale{display:flex; justify-content:space-between; font-family:var(--font-m); font-size:9.5px; color:var(--text-faint); margin-top:4px;} .weights-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:24px;} @media(max-width:640px){.weights-grid{grid-template-columns:1fr 1fr;}} .weight-cell{background:var(--surface-2); padding:18px; text-align:center;} .weight-cell .name{font-size:11.5px; color:var(--text-dim); margin-bottom:6px;} .weight-cell .val{font-family:var(--font-d); font-size:28px; color:var(--amber-bright);} .weight-bar{height:3px; background:var(--line-strong); margin-top:10px; position:relative; overflow:hidden; border-radius:2px;} .weight-bar .fill{height:100%; background:var(--amber); transition:width .3s;} /* ========================================================================= RESULT / SCORE / GAUGE PANELS (centrados, um valor de destaque) ========================================================================= */ .score-panel, .gauge-panel, .verdict-panel{background:var(--surface); border:1px solid var(--line-strong); padding:28px; text-align:center; border-radius:var(--radius);} .score-panel{padding:34px;} .gauge-panel, .verdict-panel{position:sticky; top:88px;} .score-label, .gauge-value{font-family:var(--font-m); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint);} .score-value{font-family:var(--font-d); font-size:64px; margin:8px 0; line-height:1; color:var(--text);} .score-class{font-family:var(--font-m); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 18px; border:1px solid; display:inline-block; margin-bottom:16px; border-radius:var(--radius);} .score-explain, .gauge-explain{font-size:13.5px; color:var(--text-dim); max-width:500px; margin:0 auto 20px; line-height:1.6;} .gauge-value{font-family:var(--font-d); font-size:46px; color:var(--amber-bright); margin-top:8px;} .gauge-zone-label{font-family:var(--font-m); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 16px; border:1px solid; display:inline-block; margin:14px 0; border-radius:var(--radius);} .export-btn{width:100%; padding:12px 20px; background:transparent; border:1.5px solid var(--line-strong); color:var(--text-dim); font-family:var(--font-b); font-size:13px; margin-bottom:10px; border-radius:var(--radius); transition:all .2s;} .export-btn:hover{border-color:var(--amber); color:var(--amber);} /* α_Liquidez — reticulado de Belnap */ .alpha-l-result{text-align:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line);} .alpha-l-label{font-family:var(--font-m); font-size:11px; letter-spacing:0.1em; color:var(--text-faint); text-transform:uppercase;} .alpha-l-value{font-family:var(--font-d); font-size:52px; color:var(--amber-bright); line-height:1.1; margin:6px 0;} .lattice-wrap{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:20px;} svg#lattice{width:220px; height:220px;} .verdict-explain{font-size:13px; color:var(--text-dim); text-align:left; margin-top:14px; line-height:1.6;} .verdict-explain b{color:var(--text);} .cta-inline{margin-top:20px; text-align:center;} .cta-inline .btn-primary, .cta-inline .btn-secondary{width:100%;} .cta-inline .btn-secondary{margin-top:8px;} /* diagramas PN-01 / ID-01 */ .diagrams{display:grid; grid-template-columns:1fr 1fr; gap:24px;} @media(max-width:700px){.diagrams{grid-template-columns:1fr;}} .diagram-card{background:var(--surface); border:1px solid var(--line); padding:20px; border-radius:var(--radius);} .diagram-card h3{font-family:var(--font-b); font-weight:500; font-size:13.5px; margin-bottom:4px; color:var(--text);} .diagram-card p{font-size:12px; color:var(--text-faint); margin-bottom:14px;} /* ========================================================================= SCENARIO PICKER + RESULT GRID (SDD) ========================================================================= */ .scenario-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;} @media(max-width:860px){.scenario-grid{grid-template-columns:repeat(2,1fr);}} .scenario-card{background:var(--surface); border:1.5px solid var(--line-strong); padding:16px 14px; cursor:pointer; text-align:center; transition:all .2s; border-radius:var(--radius);} .scenario-card:hover{border-color:var(--teal);} .scenario-card.active{border-color:var(--teal); background:var(--surface-3);} .scenario-card .name{font-family:var(--font-b); font-weight:500; font-size:12.5px; color:var(--text);} .result-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; margin-bottom:26px;} @media(max-width:700px){.result-grid{grid-template-columns:1fr;}} .result-metric .m-label{font-family:var(--font-m); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;} .result-metric .m-value{font-family:var(--font-d); font-size:38px; margin-top:6px;} .cta-row{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap;} .cta-row .btn-primary, .cta-row .btn-secondary{flex:1; min-width:200px; text-align:center;} .checklist-card{background:var(--surface); border:1px solid var(--line); padding:30px; position:relative; overflow:hidden; border-radius:var(--radius);} .checklist-domains{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; filter:blur(5px); pointer-events:none; user-select:none;} @media(max-width:700px){.checklist-domains{grid-template-columns:1fr;}} .checklist-domains.unlocked{filter:none; pointer-events:auto;} .cl-domain h4{font-family:var(--font-b); font-size:13px; color:var(--text); margin-bottom:10px;} .cl-domain ul{list-style:none; display:flex; flex-direction:column; gap:7px;} .cl-domain li{font-size:12.5px; color:var(--text-dim); display:flex; gap:8px; align-items:baseline;} .cl-domain li::before{content:'○'; color:var(--teal); font-size:9px;} .reg-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;} .reg-badge{font-family:var(--font-m); font-size:10.5px; color:var(--text-faint); border:1px solid var(--line); padding:5px 10px; border-radius:4px;} /* ========================================================================= RAIO-X ESG — radar, eixos, benchmark, cta-panel ========================================================================= */ .dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;} @media(max-width:860px){.dash-grid{grid-template-columns:1fr;}} .radar-card{background:var(--surface); border:1px solid var(--line); padding:24px; border-radius:var(--radius);} svg#radar{width:100%; height:auto;} .axis-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);} .axis-item{background:var(--surface-2); padding:18px 20px; cursor:pointer; transition:background .2s;} .axis-item:hover{background:var(--surface-3);} .axis-item.open{background:var(--surface-3);} .axis-item-head{display:flex; justify-content:space-between; align-items:center;} .axis-item-name{font-family:var(--font-b); font-weight:500; font-size:14px; color:var(--text);} .axis-item-tag{font-family:var(--font-m); font-size:12px; padding:3px 10px; border:1px solid; border-radius:var(--radius);} .axis-item-body{font-size:12.5px; color:var(--text-dim); line-height:1.6; margin-top:12px; display:none; padding-top:12px; border-top:1px solid var(--line);} .axis-item.open .axis-item-body{display:block;} .axis-item-body .cite{font-family:var(--font-m); font-size:11px; color:var(--amber-dim); margin-top:6px; display:block;} .method-card{background:var(--surface); border:1px solid var(--line); padding:24px 26px; font-size:13.5px; color:var(--text-dim); line-height:1.65; border-radius:var(--radius);} .method-card b{color:var(--text);} .threshold-row{display:flex; gap:14px; margin-top:16px; flex-wrap:wrap;} .threshold-pill{font-family:var(--font-m); font-size:11.5px; padding:6px 12px; border:1px solid; border-radius:var(--radius);} .benchmark-card{background:var(--surface); border:1px solid var(--line-strong); padding:30px; position:relative; overflow:hidden; text-align:center; border-radius:var(--radius);} .benchmark-preview{filter:blur(6px); user-select:none; pointer-events:none;} .benchmark-preview.unlocked{filter:none; pointer-events:auto;} .cta-panel{background:var(--surface); border:1px solid var(--line-strong); padding:32px; text-align:center; border-radius:var(--radius);} .cta-panel .flag{display:none; font-family:var(--font-m); font-size:12px; color:var(--crit); border:1px solid var(--crit); padding:5px 14px; margin-bottom:14px; border-radius:var(--radius);} .cta-panel .flag.show{display:inline-block;} /* ========================================================================= CONFLUÊNCIA ESG × M&A ========================================================================= */ .compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); margin-top:28px;} @media(max-width:700px){.compare-grid{grid-template-columns:1fr;}} .compare-col{background:var(--surface); padding:30px;} .compare-col.highlight{background:var(--surface-3);} .compare-label{font-family:var(--font-m); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px;} .compare-formula{font-family:var(--font-m); font-size:12px; color:var(--text-dim); margin-bottom:18px; line-height:1.6;} .compare-value{font-family:var(--font-d); font-size:48px; color:var(--amber-bright); line-height:1;} .compare-note{font-size:12.5px; color:var(--text-faint); margin-top:10px;} .gap-panel{margin-top:1px; background:var(--surface-2); border:1px solid var(--line-strong); border-top:none; padding:26px 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;} .gap-label{font-family:var(--font-m); font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.08em;} .gap-value{font-family:var(--font-d); font-size:32px;} .gap-explain{font-size:13px; color:var(--text-dim); max-width:520px;} .enterprise-card{background:var(--surface); border:1px solid var(--amber); padding:38px; max-width:680px; margin:0 auto; border-radius:var(--radius);} .enterprise-tag{font-family:var(--font-m); font-size:11px; color:var(--amber); letter-spacing:0.1em; text-align:center; display:block; margin-bottom:8px;} .enterprise-card h3{font-family:var(--font-d); font-size:24px; text-align:center; margin-bottom:8px; color:var(--text);} .enterprise-card > p{font-size:13.5px; color:var(--text-dim); text-align:center; margin-bottom:26px;} /* ========================================================================= BUBBLE RADAR — setor input, painel metodológico ========================================================================= */ .setor-row{display:flex; gap:14px; margin-bottom:28px; flex-wrap:wrap;} .setor-row input{flex:1; min-width:220px; background:var(--surface); border:1px solid var(--line-strong); color:var(--text); padding:12px 14px; font-family:var(--font-b); font-size:14px; border-radius:var(--radius);} .setor-row input:focus{outline:none; border-color:var(--amber);} .how-card{background:var(--surface); border:1px solid var(--line); padding:22px 24px; font-size:13.5px; color:var(--text-dim); line-height:1.65; border-radius:var(--radius);} .how-card b{color:var(--text);} /* ========================================================================= HUB — funil e cards de simulador ========================================================================= */ .funnel-strip{display:flex; align-items:center; gap:0; margin-bottom:40px; flex-wrap:wrap;} .funnel-stage{font-family:var(--font-m); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-faint); padding:8px 18px; border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--radius);} .funnel-arrow{color:var(--text-faint); padding:0 10px; font-family:var(--font-m);} .sim-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong);} @media(max-width:860px){.sim-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.sim-grid{grid-template-columns:1fr;}} .sim-card{background:var(--surface-2); padding:28px 24px; text-decoration:none; display:flex; flex-direction:column; min-height:260px; transition:background .2s;} .sim-card:hover{background:var(--surface-3);} .sim-card-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;} .sim-domain-tag{font-family:var(--font-m); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border:1px solid; border-radius:var(--radius);} .sim-domain-tag.esg{color:var(--ok); border-color:var(--ok);} .sim-domain-tag.ma{color:var(--incons); border-color:var(--incons);} .sim-domain-tag.both{color:var(--amber); border-color:var(--amber);} .sim-stage-tag{font-family:var(--font-m); font-size:9.5px; color:var(--text-faint);} .sim-card-name{font-family:var(--font-d); font-size:21px; margin-bottom:8px; color:var(--text);} .sim-card-pillar{font-family:var(--font-m); font-size:11px; color:var(--amber-dim); margin-bottom:12px;} .sim-card-desc{font-size:13px; color:var(--text-dim); line-height:1.6; flex:1;} .sim-card-cta{font-family:var(--font-m); font-size:12px; color:var(--amber); margin-top:18px; display:flex; align-items:center; gap:6px;} .sim-card:hover .sim-card-cta{color:var(--amber-bright);} /* layout de 2 colunas do simulador (entrada + resultado) — não confundir com .sim-grid (hub) */ .sim-layout{display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:start;} @media(max-width:860px){.sim-layout{grid-template-columns:1fr;}}