/* ============================================================ DOMINAS · Kit Domínio Design System — Signature Premium (manual de marca 10/4) Claro: 60% off-white · 25% marinho · 10% dourado · 5% cinza ============================================================ */ /* Fontes: carregadas via no de cada página (preconnect + css2 mínimo), não por @import — @import serializa o download atrás do próprio CSS. */ :root { /* Paleta Signature Premium */ --navy: #0F2233; --navy-2: #0A1A28; /* marinho mais profundo (rodapé/gradiente) */ --gold: #C18B3D; --gold-dark: #A97229; --ivory: #F7F5EF; /* fundo da página */ --offwhite: #FAFAFA; --branco: #FFFFFF; /* cards */ --cinza: #CFCFCF; --bege: #E5D2AE; --taupe: #B8AE9F; /* Texto */ --texto: #0F2233; /* marinho — texto principal */ --texto-2: #54606B; /* secundário */ --texto-3: #8A94A0; /* terciário / labels neutros */ --texto-claro: #FAFAFA; /* sobre marinho */ /* Linhas / sombras */ --linha: rgba(15, 34, 51, .10); --linha-2: rgba(15, 34, 51, .18); --linha-ouro: rgba(193, 139, 61, .45); --sombra: 0 10px 30px rgba(15, 34, 51, .08); --sombra-hover: 0 18px 44px -12px rgba(15, 34, 51, .18); /* Status (legíveis sobre claro) */ --good: #2F7D57; --warn: #C18B3D; --bad: #C0492F; --vinho: #5A1D25; /* gravidade sem alarme — estado "Atenção" no mapa dos pilares */ /* Tipografia */ --serif: 'Cormorant Garamond', Georgia, serif; /* títulos */ --wordmark: 'Cinzel', 'Cormorant Garamond', serif; /* logo */ --sans: 'Montserrat', system-ui, -apple-system, sans-serif; /* corpo */ /* Layout */ --maxw: 1160px; --radius: 16px; --radius-sm: 10px; --ease: cubic-bezier(.2, .7, .2, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; } body { margin: 0; min-height: 100vh; font-family: var(--sans); font-weight: 400; line-height: 1.62; color: var(--texto); background: var(--ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ---------- Tipografia ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; margin: 0; color: var(--texto); letter-spacing: .2px; } /* dourado de TEXTO pequeno: tom profundo que passa contraste AA sobre ivory (5,35:1); o dourado vivo (--gold) fica pra botao, cursor, icone e linha - nunca texto miudo em fundo claro */ .kicker { font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: #8A5B1E; } .serif-italic { font-family: var(--serif); font-style: italic; } /* ---------- Topbar (marinho) ---------- */ .topbar { position: sticky; top: 0; z-index: 30; background: var(--navy); border-bottom: 1px solid rgba(193, 139, 61, .45); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; } /* logo real (PNG) substitui o SVG+wordmark inline — um só lugar, vale nas 25 páginas */ .brand { display: block; width: 190px; height: 40px; background: url('../brand/logo-horizontal-white.png') left center / contain no-repeat; text-decoration: none; font-size: 0; } .brand svg, .brand .word, .brand .sub { display: none; } .topbar .right { display: flex; align-items: center; gap: 22px; } .greet { font-size: .9rem; color: rgba(250, 250, 250, .8); } .greet b { color: var(--bege); font-weight: 600; } .link-quiet { color: rgba(250, 250, 250, .72); text-decoration: none; font-size: .84rem; letter-spacing: .03em; transition: color .25s var(--ease); } .link-quiet:hover { color: #fff; } .back { display: inline-flex; align-items: center; gap: 8px; color: rgba(250, 250, 250, .72); text-decoration: none; font-size: .84rem; letter-spacing: .03em; transition: color .25s var(--ease); } .back:hover { color: #fff; } /* ---------- Pilar ---------- */ .pilar { padding: 52px 0 8px; scroll-margin-top: 92px; } .pilar-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--linha); } .pilar-idx { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); letter-spacing: .2em; white-space: nowrap; padding-top: 6px; } .pilar-head .t { font-size: clamp(1.7rem, 3.4vw, 2.4rem); } .pilar-head .intent { margin-top: 8px; color: var(--texto-2); font-size: 1rem; max-width: 600px; } /* ---------- Grid de cards ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .card { position: relative; display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius); padding: 26px 24px 22px; text-decoration: none; color: inherit; min-height: 188px; overflow: hidden; box-shadow: var(--sombra); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 160px at 100% 0%, rgba(193,139,61,.08), transparent 70%); opacity: 0; transition: opacity .4s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--linha-ouro); box-shadow: var(--sombra-hover); } .card:hover::before { opacity: 1; } .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .card .num { font-family: var(--serif); font-size: .92rem; color: var(--texto-3); letter-spacing: .12em; } .card h3 { font-size: 1.42rem; margin: 10px 0 0; color: var(--navy); } .card .desc { margin: 11px 0 0; font-size: .9rem; color: var(--texto-2); flex: 1; } .card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; } .badge { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); border: 1px solid var(--linha-ouro); padding: 5px 10px; border-radius: 100px; } .card .go { font-size: 1.2rem; color: var(--gold); transition: transform .35s var(--ease); } .card:hover .go { transform: translateX(5px); } .card[data-status="soon"] { opacity: .72; } .card[data-status="soon"] .badge.status { color: var(--texto-3); border-color: var(--linha-2); } .card[data-status="ready"]::after { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--gold), transparent); } .flag { position: absolute; top: 16px; right: 16px; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 4px 9px; border-radius: 100px; font-weight: 600; } /* ---------- Footer (marinho) ---------- */ .foot-site { margin-top: 80px; background: var(--navy); padding: 40px 0 56px; } .foot-site .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .foot-site .mark { font-family: var(--wordmark); letter-spacing: 4px; font-size: 1.05rem; color: var(--bege); } .foot-site .small { font-size: .76rem; color: rgba(250, 250, 250, .55); } .foot-site a { color: var(--gold); text-decoration: none; } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px); background: var(--navy); border: 1px solid rgba(193,139,61,.4); color: #fff; padding: 15px 22px; border-radius: 100px; font-size: .9rem; box-shadow: var(--sombra-hover); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); z-index: 50; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast b { color: var(--gold); font-weight: 600; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: .02em; padding: 13px 24px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--navy); background: var(--navy); color: #fff; text-decoration: none; transition: filter .25s var(--ease), transform .15s var(--ease); } .btn:hover { filter: brightness(1.12); } .btn:active { transform: translateY(1px); } .btn.ghost { background: transparent; color: var(--navy); border-color: var(--linha-2); } .btn.ghost:hover { border-color: var(--gold); color: var(--gold-dark); } /* ---------- Acessibilidade / motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- Responsivo ---------- */ @media (max-width: 720px) { .wrap { padding: 0 20px; } .hero { padding: 60px 0 40px; } .brand .sub { display: none; } .greet { display: none; } .pilar-head { flex-direction: column; gap: 4px; } } /* ============================================================ COMPONENTES DE FERRAMENTA (reusados por todas) ============================================================ */ .tool-head { padding: 48px 0 26px; } .tool-head .kicker { margin-bottom: 16px; } .tool-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); } .tool-head .intent { margin-top: 14px; color: var(--texto-2); max-width: 640px; font-size: 1.04rem; } .tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; padding-bottom: 30px; } @media (max-width: 920px) { .tool-grid { grid-template-columns: 1fr; } } .panel { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--sombra); } .panel.sticky { position: sticky; top: 92px; } @media (max-width: 920px) { .panel.sticky { position: static; } } .panel h2 { font-size: 1.5rem; color: var(--navy); } .panel .panel-sub { color: var(--texto-3); font-size: .85rem; margin: 4px 0 22px; } .panel h3 { font-family: var(--serif); font-size: 1.25rem; margin: 26px 0 12px; color: var(--gold-dark); } .field { margin-bottom: 16px; } .field > label { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); font-weight: 600; margin-bottom: 7px; } .field .hint { color: var(--texto-3); font-size: .73rem; text-transform: none; letter-spacing: 0; font-weight: 400; } input[type=text], input[type=number], input[type=date], input[type=password], select, textarea { width: 100%; background: var(--offwhite); border: 1px solid var(--linha-2); border-radius: 10px; color: var(--texto); font-family: var(--sans); font-size: 1rem; padding: 12px 14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193,139,61,.12); } input::placeholder { color: var(--texto-3); } textarea { resize: vertical; min-height: 58px; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 520px) { .row3 { grid-template-columns: 1fr; } } .inline-prefix { position: relative; } .inline-prefix input { padding-left: 36px; } .inline-prefix .pfx { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-3); font-size: .95rem; pointer-events: none; } .insumo-row { display: grid; grid-template-columns: 1fr 120px 72px 60px 42px; gap: 8px; margin-bottom: 9px; align-items: center; } .insumo-row .del { background: none; border: 1px solid var(--linha-2); color: var(--texto-3); border-radius: 8px; cursor: pointer; height: 44px; font-size: 1.1rem; line-height: 1; } .insumo-row .del:hover { border-color: var(--bad); color: var(--bad); } @media (max-width: 520px) { .insumo-row { grid-template-columns: 1fr 1fr; } .insumo-row .i-modo { grid-column: 1; } .insumo-row .del { grid-column: 2; } } .add-link { background: none; border: none; color: var(--gold-dark); cursor: pointer; font-size: .86rem; padding: 6px 0; letter-spacing: .03em; font-weight: 600; } .add-link:hover { text-decoration: underline; } /* Insumo — fracionar embalagem (R1: compra o frasco, usa uma fração por procedimento) */ .i-modo { flex: none; background: none; border: 1px solid var(--linha-2); color: var(--texto-3); border-radius: 100px; cursor: pointer; height: 30px; padding: 0 12px; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: border-color .2s var(--ease), color .2s var(--ease); } .i-modo:hover { border-color: var(--gold); color: var(--gold-dark); } .i-modo:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Linha fracionada vira 2 sub-linhas: descrição+modo+del em cima, os 3 campos da conta embaixo — a coluna 1fr da linha .insumo-row original não sobra espaço pra 6 colunas fixas juntas. */ .insumo-row.fr { grid-template-columns: 1fr 120px 72px 60px 42px; grid-template-rows: auto auto; row-gap: 8px; } .insumo-row.fr .i-desc { grid-column: 1; grid-row: 1; } .insumo-row.fr .i-modo { grid-column: 4; grid-row: 1; } .insumo-row.fr .del { grid-column: 5; grid-row: 1; } .insumo-row.fr .i-emb-wrap { grid-column: 1; grid-row: 2; } .insumo-row.fr .i-rende { grid-column: 2; grid-row: 2; } .insumo-row.fr .i-usa { grid-column: 3; grid-row: 2; } .insumo-row.fr .i-calc { grid-column: 4 / -1; grid-row: 2; text-align: right; font-size: .74rem; color: var(--gold-dark); font-variant-numeric: tabular-nums; } @media (max-width: 520px) { .insumo-row.fr { grid-template-columns: 1fr 1fr; } .insumo-row.fr .i-desc { grid-column: 1 / -1; grid-row: 1; } .insumo-row.fr .i-modo { grid-column: 1; grid-row: 2; } .insumo-row.fr .del { grid-column: 2; grid-row: 2; } .insumo-row.fr .i-emb-wrap { grid-column: 1; grid-row: 3; } .insumo-row.fr .i-rende { grid-column: 2; grid-row: 3; } .insumo-row.fr .i-usa { grid-column: 1; grid-row: 4; } .insumo-row.fr .i-calc { grid-column: 2; grid-row: 4; } } .ficha { width: 100%; border-collapse: collapse; margin-top: 4px; } .ficha td { padding: 11px 2px; border-bottom: 1px solid var(--linha); font-size: .94rem; color: var(--texto-2); } .ficha thead td { color: var(--texto-3); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; } .ficha td.val { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 500; white-space: nowrap; } .ficha tr.total td { border-bottom: none; border-top: 1px solid var(--linha-2); font-family: var(--serif); font-size: 1.18rem; padding-top: 14px; color: var(--navy); } .ficha tr.total td.val { color: var(--gold-dark); } .kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 22px 0 4px; } @media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } } .kpi { background: var(--ivory); border: 1px solid var(--linha); border-radius: 12px; padding: 16px; } .kpi .l { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); } .kpi .v { font-family: var(--serif); font-size: 1.7rem; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--navy); } .kpi .v.good { color: var(--good); } .kpi .v.warn { color: var(--gold-dark); } .kpi .v.bad { color: var(--bad); } .prices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 680px) { .prices { grid-template-columns: 1fr; } } .price { border: 1px solid var(--linha); border-radius: 12px; padding: 18px 16px; text-align: center; background: var(--offwhite); } .price.rec { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(193,139,61,.25); background: rgba(193,139,61,.05); } .price .tag { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); } .price.rec .tag { color: var(--gold-dark); } .price .p { font-family: var(--serif); font-size: 1.85rem; color: var(--navy); margin: 9px 0 6px; font-variant-numeric: tabular-nums; } .price .mc { font-size: .78rem; color: var(--texto-2); } .note { margin-top: 20px; font-size: .86rem; color: var(--texto-2); border-left: 2px solid var(--linha-ouro); padding-left: 14px; } .warn-box { background: rgba(192,73,47,.08); border: 1px solid rgba(192,73,47,.35); color: #9c3b27; border-radius: 10px; padding: 12px 14px; font-size: .85rem; margin-top: 14px; } /* ---------- Acervo "Minhas fichas" ---------- */ .acervo { margin-top: 22px; } .acervo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .acervo-row { display: grid; grid-template-columns: 1.3fr auto 1.7fr auto; gap: 14px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--linha); } .acervo-row:last-child { border-bottom: none; } .acervo-row .ac-nome { font-weight: 600; color: var(--navy); } .acervo-row .ac-mc { font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 600; color: var(--texto-3); white-space: nowrap; } .acervo-row .ac-mc.good { color: var(--good); } .acervo-row .ac-mc.warn { color: var(--gold-dark); } .acervo-row .ac-mc.bad { color: var(--bad); } .acervo-row .ac-precos { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: .78rem; color: var(--texto-2); font-variant-numeric: tabular-nums; } .acervo-row .ac-precos b { color: var(--navy); font-weight: 600; } .acervo-row .ac-actions { display: flex; gap: 8px; justify-content: flex-end; } .ac-btn { background: none; border: 1px solid var(--linha-2); color: var(--texto-2); border-radius: 8px; cursor: pointer; min-height: 44px; padding: 0 15px; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .02em; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .ac-btn:hover { border-color: var(--gold); color: var(--gold-dark); } .ac-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .ac-btn.is-current { border-color: var(--gold); background: rgba(193,139,61,.08); color: var(--gold-dark); cursor: default; } .ac-btn.del:hover { border-color: var(--bad); color: var(--bad); } .backup-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } @media (max-width: 680px) { .acervo-row { grid-template-columns: 1fr auto; grid-template-areas: 'nome mc' 'precos precos' 'actions actions'; gap: 8px 12px; } .acervo-row .ac-nome { grid-area: nome; } .acervo-row .ac-mc { grid-area: mc; text-align: right; } .acervo-row .ac-precos { grid-area: precos; } .acervo-row .ac-actions { grid-area: actions; justify-content: flex-start; } } /* ===== Pilar I — Diagnóstico ===== */ .radar-wrap { position: relative; width: 100%; max-width: 440px; margin: 0 auto 8px; } .radar-wrap canvas { max-width: 100%; height: auto; } .range-row { margin-bottom: 15px; } .range-row .rl { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .range-row .rl .name { font-size: .92rem; color: var(--texto); } .range-row .rl .num { font-family: var(--serif); font-size: 1.2rem; color: var(--gold-dark); font-variant-numeric: tabular-nums; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--cinza); outline: none; padding: 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 3px solid var(--branco); box-shadow: 0 1px 4px rgba(15,34,51,.2); } input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); cursor: pointer; border: 3px solid var(--branco); } .quiz-q { margin-bottom: 24px; } .quiz-q .q { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); margin-bottom: 12px; } .opts { display: flex; flex-direction: column; gap: 8px; } .opt { display: block; text-align: left; background: var(--offwhite); border: 1px solid var(--linha-2); border-radius: 10px; padding: 13px 16px; color: var(--texto-2); cursor: pointer; font-family: var(--sans); font-size: .95rem; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); } .opt:hover { border-color: var(--gold); color: var(--navy); } .opt.sel { border-color: var(--gold); color: var(--navy); background: rgba(193,139,61,.08); font-weight: 500; } .check-list { display: flex; flex-direction: column; gap: 10px; } .check-item { display: flex; gap: 13px; align-items: flex-start; background: var(--offwhite); border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); } .check-item:hover { border-color: var(--linha-2); } .check-item.on { border-color: var(--gold); background: rgba(193,139,61,.07); } .check-item .box { flex: none; width: 20px; height: 20px; border: 1px solid var(--linha-2); border-radius: 5px; margin-top: 1px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; } .check-item.on .box { background: var(--gold); border-color: var(--gold); } .check-item .ci-text { font-size: .95rem; color: var(--texto-2); } .check-item.on .ci-text { color: var(--navy); } .result-card { border: 1px solid var(--gold); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; background: rgba(193,139,61,.06); } .result-card .rk { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); } .result-card .rt { font-family: var(--serif); font-size: 2rem; color: var(--navy); margin: 6px 0 10px; } .result-card .rd { color: var(--texto-2); font-size: .98rem; } .big-score { font-family: var(--serif); font-size: 3rem; color: var(--gold); line-height: 1; } .layer { margin-bottom: 16px; } .layer .lh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; } .layer .lh .ln { font-size: .95rem; color: var(--navy); } .layer .lh .ls { font-size: .8rem; color: var(--texto-3); font-variant-numeric: tabular-nums; } .bar { height: 8px; background: var(--cinza); border-radius: 6px; overflow: hidden; } .bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--bege)); border-radius: 6px; transition: width .5s var(--ease); } .layer.weak .bar > span { background: linear-gradient(90deg, #C0492F, #e0a08e); } .reco { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-left: 2px solid var(--gold); margin-bottom: 10px; background: var(--ivory); border-radius: 0 10px 10px 0; } .reco .rtxt { font-size: .9rem; color: var(--texto-2); } .reco a { color: var(--gold-dark); text-decoration: none; font-weight: 600; } .reco a:hover { text-decoration: underline; } /* ===== Pilar III — Ritmo ===== */ .cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .cal-day { border: 1px solid var(--linha); border-radius: 10px; padding: 12px; cursor: pointer; min-height: 96px; background: var(--offwhite); transition: border-color .2s var(--ease), background .2s var(--ease); } .cal-day:hover { border-color: var(--linha-2); } .cal-day.on { border-color: var(--gold); background: rgba(193,139,61,.08); } .cal-day .d { font-family: var(--serif); font-size: 1.05rem; color: var(--gold-dark); } .cal-day .chk { float: right; color: var(--gold); opacity: 0; } .cal-day.on .chk { opacity: 1; } .cal-day .act { font-size: .78rem; color: var(--texto-2); margin-top: 6px; line-height: 1.4; } .cal-day.on .act { color: var(--navy); } .planner { width: 100%; border-collapse: collapse; } .planner th { text-align: left; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); padding: 8px 6px; font-weight: 600; } .planner td { padding: 6px; border-top: 1px solid var(--linha); vertical-align: middle; } .planner .mes { font-family: var(--serif); color: var(--gold-dark); white-space: nowrap; } .planner input { padding: 9px 10px; font-size: .9rem; } .planner .var { font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; } .step { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 10px; align-items: flex-start; background: var(--branco); } .step.done { border-color: var(--gold); background: rgba(193,139,61,.06); } .step .n { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-dark); display: flex; align-items: center; justify-content: center; font-family: var(--serif); } .step.done .n { background: var(--gold); color: #fff; } .step .sc { flex: 1; } .step .st { font-size: 1.1rem; color: var(--navy); font-family: var(--serif); } .step .sd { font-size: .88rem; color: var(--texto-2); margin-top: 4px; } .step .sd a { color: var(--gold-dark); text-decoration: none; font-weight: 500; } .step .sd a:hover { text-decoration: underline; } .step .toggle { flex: none; align-self: center; background: none; border: 1px solid var(--linha-2); color: var(--texto-3); border-radius: 100px; cursor: pointer; padding: 7px 14px; font-size: .78rem; transition: border-color .2s var(--ease), color .2s var(--ease); } .step.done .toggle { border-color: var(--gold); color: var(--gold-dark); } /* nudge de número derivado (MC) */ .derive-hint { margin-top: 8px; font-size: .8rem; color: var(--texto-3); line-height: 1.5; } .derive-hint a { color: var(--gold-dark); text-decoration: none; font-weight: 600; } .derive-hint a:hover { text-decoration: underline; } .derive-hint b { color: var(--gold-dark); font-weight: 600; } .hint-link { background: none; border: none; color: var(--gold-dark); cursor: pointer; font-size: .8rem; padding: 0; text-decoration: underline; font-weight: 600; } .hint-link:hover { filter: brightness(1.1); } .hint-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* chip de campo compartilhado */ .shared-tag { display: inline-block; margin-left: 8px; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); border: 1px solid var(--linha-2); border-radius: 100px; padding: 2px 8px; vertical-align: middle; font-weight: 500; } /* CTA Perfil da Clínica (Hub) */ .profile-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 4px 0 14px; padding: 24px 26px; background: linear-gradient(110deg, rgba(193,139,61,.12), var(--branco)); border: 1px solid var(--linha-ouro); border-radius: var(--radius); text-decoration: none; color: inherit; box-shadow: var(--sombra); transition: border-color .3s var(--ease), transform .3s var(--ease); } .profile-cta:hover { border-color: var(--gold); transform: translateY(-2px); } .profile-cta .cta-kicker { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; } .profile-cta h3 { font-family: var(--serif); font-size: 1.6rem; margin: 6px 0 6px; color: var(--navy); } .profile-cta p { margin: 0; color: var(--texto-2); font-size: .95rem; max-width: 680px; } .profile-cta .go { font-size: 1.6rem; color: var(--gold); } .profile-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .psum { background: var(--ivory); border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; } .psum .l { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); } .psum .v { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-dark); margin-top: 5px; font-variant-numeric: tabular-nums; } .uses { margin-top: 18px; font-size: .85rem; color: var(--texto-2); line-height: 1.7; } .uses b { color: var(--navy); font-weight: 600; } /* abas (Painel 3 em 1) */ .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--linha); margin-bottom: 22px; flex-wrap: wrap; } .tab { background: none; border: none; color: var(--texto-2); font-family: var(--sans); font-size: .95rem; padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: .02em; } .tab:hover { color: var(--navy); } .tab.active { color: var(--gold-dark); border-bottom-color: var(--gold); font-weight: 600; } .tabpanel { display: none; } .tabpanel.active { display: block; } .led-row { display: grid; gap: 8px; margin-bottom: 8px; align-items: center; } .led-row.fluxo { grid-template-columns: 1fr 130px 120px 44px; } .led-row.contas { grid-template-columns: 1fr 120px 130px 120px 44px; } @media (max-width: 640px) { .led-row.fluxo, .led-row.contas { grid-template-columns: 1fr 1fr; } } .led-row .del { background: none; border: 1px solid var(--linha-2); color: var(--texto-3); border-radius: 8px; cursor: pointer; height: 44px; font-size: 1.1rem; line-height: 1; } .led-row .del:hover { border-color: var(--bad); color: var(--bad); } .val.pos, .pos { color: var(--good); } .val.neg, .neg { color: var(--bad); } /* linha de serviço (Dizer Não) */ .svc-row { display: grid; grid-template-columns: 1fr 104px 104px 86px 42px; gap: 8px; align-items: center; margin-bottom: 8px; } .svc-row .del { background: none; border: 1px solid var(--linha-2); color: var(--texto-3); border-radius: 8px; cursor: pointer; height: 44px; font-size: 1.1rem; line-height: 1; } .svc-row .del:hover { border-color: var(--bad); color: var(--bad); } @media (max-width: 640px) { .svc-row { grid-template-columns: 1fr 1fr; } .svc-row .del { grid-column: 2; } } /* ============================================================ IDENTIDADE DOMINAS v2 — hub como painel, trilha e marca ============================================================ */ /* Toolbar do hub: busca + trilha de pilares */ .hub-tools { margin: 4px 0 30px; } .search-wrap { position: relative; max-width: 460px; } .search-wrap input { padding-right: 40px; } .search-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); background: url('../brand/diamante-navy.png') no-repeat center / contain; opacity: .35; pointer-events: none; } .search-count { font-size: .76rem; color: var(--texto-3); margin-top: 7px; min-height: 1em; } .hub-nav { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 6px; scrollbar-width: none; } .hub-nav::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: 9px; background: var(--branco); border: 1px solid var(--linha-2); border-radius: 100px; padding: 9px 16px; font-size: .78rem; letter-spacing: .02em; color: var(--texto-2); text-decoration: none; transition: border-color .25s var(--ease), color .25s var(--ease); } .chip:hover { border-color: var(--gold); color: var(--navy); } .chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .chip .rn { font-family: var(--serif); color: var(--gold-dark); font-size: .84rem; } .chip b { font-weight: 600; color: var(--gold-dark); font-variant-numeric: tabular-nums; } .chip.full { border-color: var(--linha-ouro); background: rgba(193, 139, 61, .05); } /* Estado real nos cards: em uso + micro-resumo */ .card.uso { border-color: var(--linha-ouro); } .card .resumo { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed var(--linha); font-size: .77rem; color: var(--gold-dark); font-weight: 600; letter-spacing: .01em; } .card .resumo img { width: 12px; height: 12px; flex: none; } /* Selo de pilar completo (marco — uso moderado, como o manual pede) */ .pilar-selo { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 10px; } .pilar-selo img { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(15, 34, 51, .25)); } .pilar-selo span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; } @media (max-width: 720px) { .pilar-selo { margin-left: 0; } } /* Perfil em dia (troca o CTA grande quando os números-base já existem) */ .profile-ok { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 14px; padding: 15px 20px; background: rgba(193, 139, 61, .05); border: 1px solid var(--linha-ouro); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: border-color .3s var(--ease); } .profile-ok:hover { border-color: var(--gold); } .profile-ok .txt { font-size: .86rem; color: var(--texto-2); } .profile-ok .txt b { color: var(--navy); font-weight: 600; } .profile-ok .edit { font-size: .78rem; color: var(--gold-dark); font-weight: 600; white-space: nowrap; } /* Régua da metodologia (MC 35–60%) */ .regua-caption { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); margin-top: 16px; } .regua-caption:first-of-type { margin-top: 0; } .regua { margin: 8px 0 2px; } .regua-track { position: relative; height: 10px; border-radius: 100px; background: var(--ivory); border: 1px solid var(--linha-2); } .regua-band { position: absolute; top: 0; bottom: 0; border-radius: 100px; background: linear-gradient(90deg, rgba(193, 139, 61, .30), rgba(193, 139, 61, .55)); } .regua-marker { position: absolute; top: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%) rotate(45deg); background: var(--navy); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(15, 34, 51, .35); } .regua-marker.critico { background: var(--bad); } .regua-marker.atencao { background: var(--gold-dark); } .regua-marker.saudavel { background: var(--good); } .regua-marker.conferir { background: var(--texto-3); } .regua-scale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: .62rem; color: var(--texto-3); letter-spacing: .05em; } .regua-scale .faixa { color: var(--gold-dark); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; } .regua-label { margin: 9px 0 0; font-size: .82rem; font-weight: 600; } .regua-label.critico { color: var(--bad); } .regua-label.atencao { color: var(--gold-dark); } .regua-label.saudavel { color: var(--good); } .regua-label.conferir { color: var(--texto-2); } /* Próximo passo do método (trilha entre ferramentas) */ .next-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 10px 0 26px; padding: 24px 28px; background: var(--branco); border: 1px solid var(--linha); border-left: 2px solid var(--gold); border-radius: var(--radius); box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .next-step:hover { transform: translateY(-2px); border-color: var(--linha-ouro); border-left-color: var(--gold); box-shadow: var(--sombra-hover); } .next-step .ns-kicker { display: block; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; } .next-step .ns-title { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--navy); margin-top: 7px; } .next-step .ns-why { display: block; font-size: .88rem; color: var(--texto-2); margin-top: 5px; max-width: 640px; } .next-step .ns-go { font-size: 1.5rem; color: var(--gold); flex: none; transition: transform .3s var(--ease); } .next-step:hover .ns-go { transform: translateX(5px); } /* ===== FAQ (accordion) ===== */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { border: 1px solid var(--linha); border-radius: 12px; background: var(--offwhite); overflow: hidden; } .faq-item[open] { border-color: var(--linha-ouro); background: var(--branco); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; font-family: var(--serif); font-size: 1.12rem; color: var(--navy); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .faq-ico { flex: none; font-size: 1.3rem; color: var(--gold); transition: transform .3s var(--ease); } .faq-item[open] summary .faq-ico { transform: rotate(45deg); } .faq-item .faq-a { padding: 0 20px 20px; color: var(--texto-2); font-size: .96rem; max-width: 680px; } .faq-item .faq-a p + p { margin-top: 12px; } .faq-item .faq-a a { color: var(--gold-dark); font-weight: 600; text-decoration: none; } .faq-item .faq-a a:hover { text-decoration: underline; } /* ===== Conteúdo legal (Termos / Privacidade) ===== */ .legal { max-width: 720px; } .legal h2 { font-size: 1.35rem; color: var(--navy); margin: 30px 0 12px; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--texto-2); font-size: .96rem; margin: 0 0 14px; } .legal ul { margin: 0 0 14px; padding-left: 20px; color: var(--texto-2); font-size: .96rem; } .legal li { margin-bottom: 7px; } .legal li::marker { color: var(--gold); } .legal .fill { color: var(--gold-dark); font-style: italic; } .legal .vigencia { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: .78rem; color: var(--texto-3); } /* Rodapé de marca: ornamento, frase-guia, suporte e textura */ .foot-site { position: relative; overflow: hidden; } .foot-site::before { content: ""; position: absolute; inset: 0; background: url('../brand/pattern-navy-gold.png') repeat top left / 230px; opacity: .05; pointer-events: none; } .foot-site .wrap { position: relative; } .foot-brand { flex-basis: 100%; text-align: center; margin-bottom: 26px; } .foot-brand .orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; } .foot-brand .orn .l { display: block; width: min(190px, 30vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(193, 139, 61, .6)); } .foot-brand .orn .l:last-child { transform: scaleX(-1); } .foot-brand .orn .dia { flex: none; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); } .foot-brand .frase { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--bege); margin: 0 0 7px; letter-spacing: .02em; } .foot-brand .suporte { font-size: .78rem; color: rgba(250, 250, 250, .55); margin: 0; } .foot-brand .suporte a { color: var(--gold); text-decoration: none; } .foot-brand .suporte a:hover { text-decoration: underline; } .foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 14px 0 0; } .foot-legal a { font-size: .72rem; letter-spacing: .04em; color: rgba(250, 250, 250, .55); text-decoration: none; transition: color .2s var(--ease); } .foot-legal a:hover { color: var(--gold); } /* Impressão / salvar PDF */ .panel { position: relative; } .print-btn { position: absolute; top: 24px; right: 24px; background: none; border: 1px solid var(--linha-2); border-radius: 100px; color: var(--texto-3); font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); } .print-btn:hover { color: var(--gold-dark); border-color: var(--gold); } .print-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } @media (max-width: 600px) { .print-btn { position: static; display: block; margin: 0 0 14px; } } .print-head { display: none; } @media print { body { background: #fff; } .topbar, .foot-site, .next-step, .print-btn, .add-link, .btn, .toast, .derive-hint, .shared-tag, .hub-tools, .comando, .mapa-pilares { display: none !important; } body.has-result main .panel:not(.sticky) { display: none; } body.has-result .tool-grid { display: block; } .panel, .panel.sticky { position: static; box-shadow: none; border-color: #c9c9c9; break-inside: avoid; } .tool-head { padding: 6px 0 14px; } .tool-head h1 { font-size: 1.7rem; } .print-head { display: block; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid #C18B3D; } .print-head .ph-brand { font-family: var(--wordmark); letter-spacing: 3px; font-size: .95rem; color: #0F2233; } .print-head .ph-tool { font-family: var(--serif); font-size: 1.45rem; color: #0F2233; margin-top: 5px; } .print-head .ph-meta { font-size: .84rem; color: #54606B; margin-top: 3px; } } /* ============================================================ KIT DOMÍNIO — jornada e esteira ============================================================ */ /* A Jornada DOMINAS — esteira de 4 degraus */ .jornada { padding: 26px 0 8px; } .jornada h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 8px; } .jornada-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; } @media (max-width: 920px) { .jornada-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .jornada-grid { grid-template-columns: 1fr; } } .degrau { position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 22px; opacity: .82; transition: opacity .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .degrau:hover { opacity: 1; transform: translateY(-2px); } .degrau .dtag { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; margin: 0; } .degrau .dtit { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); margin: 9px 0 0; } .degrau .dtxt { font-size: .88rem; color: var(--texto-2); margin: 8px 0 0; } .degrau.atual { opacity: 1; border-color: var(--linha-ouro); background: rgba(193, 139, 61, .05); } .degrau.atual::before { content: ""; position: absolute; top: 18px; right: 18px; width: 8px; height: 8px; border: 1px solid var(--gold); transform: rotate(45deg); } .jornada-nota { margin-top: 16px; max-width: 680px; font-size: .92rem; color: var(--texto-2); } .jornada-cta { display: inline-block; margin-top: 10px; color: var(--gold-dark); font-weight: 600; text-decoration: none; } .jornada-cta:hover { text-decoration: underline; } /* Etapa do método — âncora nos títulos de pilar */ .etapa-metodo { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; margin: 0 0 6px; } /* O mapa inteiro — painel de fechamento em marinho */ .mapa-metodo { padding: 44px 0 10px; } .mapa-metodo .painel { position: relative; overflow: hidden; background: var(--navy); color: #FAFAFA; border-radius: 16px; padding: 34px 36px; } .mapa-metodo .painel::before { content: ""; position: absolute; inset: 0; background: url('../brand/pattern-navy-gold.png') repeat top left / 230px; opacity: .06; pointer-events: none; } .mapa-metodo .painel > * { position: relative; } .mapa-metodo .painel .kicker { color: var(--gold); } .mapa-metodo .painel h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: #FAFAFA; margin-top: 8px; } .mapa-metodo .painel p { color: rgba(250, 250, 250, .82); max-width: 760px; margin-top: 16px; } .mapa-metodo .painel .jornada-cta { color: var(--bege); } .mapa-metodo .painel .jornada-cta:hover { color: #fff; } /* Convite — bloco de ponte para a Sessão Estratégica dentro das ferramentas */ .convite { border-left: 2px solid var(--gold); background: rgba(193, 139, 61, .06); border-radius: 0 12px 12px 0; padding: 18px 20px; margin-top: 16px; } .convite .ck { text-transform: uppercase; font-size: .62rem; letter-spacing: .2em; color: var(--gold-dark); font-weight: 600; } .convite p { font-size: .88rem; color: var(--texto-2); margin: 6px 0 10px; } .convite a { color: var(--gold-dark); font-weight: 600; text-decoration: none; } .convite a:hover { text-decoration: underline; } /* ============================================================ PAINEL DE COMANDO — substitui o hero + .prio Grid: Régua + Card de Comando (principal) · Retrato de Conquista (lateral) ============================================================ */ .comando { padding: 64px 0 24px; } .comando-grid { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; } @media (max-width: 920px) { .comando-grid { grid-template-columns: 1fr; } } /* Régua de Domínio */ .regua-dominio { margin-bottom: 30px; } .regua-dominio .rd-kicker { margin-bottom: 20px; } .rd-track { position: relative; height: 2px; background: var(--cinza); border-radius: 2px; margin: 0 6px; } .rd-marcos { display: flex; justify-content: space-between; margin-top: 14px; } .rd-marco { font-family: var(--sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--texto-2); } .rd-marco.ativo { color: var(--navy); font-weight: 700; } .rd-cursor { position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%) rotate(45deg); background: var(--gold); box-shadow: 0 1px 5px rgba(15, 34, 51, .3); } .rd-legenda { margin-top: 16px; font-size: .9rem; color: var(--texto-2); } .rd-legenda b { color: var(--navy); font-weight: 600; } .rd-legenda a { color: var(--gold-dark); font-weight: 600; text-decoration: none; } .rd-legenda a:hover { text-decoration: underline; } .rd-tag { display: inline-block; margin-left: 10px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); border: 1px solid var(--linha-2); border-radius: 100px; padding: 2px 9px; vertical-align: middle; font-weight: 500; } .rd-assinatura { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--texto-2); } /* Card de Comando */ .card-comando { background: #FAFAFA; border: 1px solid var(--cinza); border-radius: 16px; box-shadow: var(--sombra); padding: 28px; } .card-comando .cc-kicker { font-family: var(--sans); font-size: .66rem; text-transform: uppercase; letter-spacing: .22em; color: var(--texto-2); } .card-comando .cc-titulo { font-family: var(--wordmark); font-size: 1.5rem; color: var(--navy); margin: 10px 0 0; line-height: 1.25; } .card-comando .cc-corpo { font-family: var(--sans); font-size: .95rem; color: var(--texto-2); margin: 14px 0 0; max-width: 640px; } .card-comando .cc-corpo b { color: var(--navy); font-weight: 600; } .card-comando .cc-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; background: var(--gold); color: #fff; font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: .02em; padding: 13px 24px; border-radius: 10px; text-decoration: none; transition: filter .25s var(--ease), transform .15s var(--ease); } .card-comando .cc-cta:hover { filter: brightness(1.08); } .card-comando .cc-cta:active { transform: translateY(1px); } /* Retrato de Conquista */ .retrato-conquista { background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; padding: 24px; } .retrato-conquista .rc-kicker { font-family: var(--sans); font-size: .66rem; text-transform: uppercase; letter-spacing: .22em; color: var(--texto-2); margin: 0 0 16px; } .rc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .rc-item { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--texto-2); line-height: 1.5; } .rc-item::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border: 1px solid var(--gold); transform: rotate(45deg); } .rc-item b { color: var(--navy); font-weight: 600; } .rc-vazio { font-size: .88rem; color: var(--texto-2); margin: 0; line-height: 1.6; } /* Mapa dos Pilares — faixa horizontal com 6 ícones + estado */ .mapa-pilares { padding: 8px 0 20px; } .mp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 18px; } @media (max-width: 920px) { .mp-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .mp-grid { grid-template-columns: repeat(2, 1fr); } } .mp-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 20px 14px; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .mp-item:hover { border-color: var(--linha-ouro); transform: translateY(-2px); box-shadow: var(--sombra); } .mp-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .mp-item svg { width: 30px; height: 30px; flex: none; } .mp-nome { font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--navy); } .mp-estado { font-size: .68rem; color: var(--texto-2); } .mp-estado.atencao { color: var(--vinho); font-weight: 600; } .mp-bar { width: 100%; height: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; } .mp-bar > span { display: block; height: 100%; background: var(--bege); border-radius: 4px; }