/* Benchmark — Fechamento Contábil em Escala (case GNB). Componentes portados do case original para o padrão de relatório (report.css) do site: cada slide do deck original vira um .report-section normal (sem a mecânica de "um slide por vez" do deck), e o Modo Apresentação já reaproveita essas seções via assets/js/presentation-mode.js. Escopo: os tokens ficam em `body` (sobrevive ao Modo Apresentação, que move as .report-section para dentro de um overlay anexado ao , fora de qualquer wrapper desta página); os componentes ficam sob `.report-section`/`.bm-cover` — classes que viajam com o próprio elemento movido, em vez de um wrapper ancestral que ficaria pra trás. */ body { --surface-alt: var(--grey-200); --border: var(--grey-300); --border-strong: var(--grey-400); --ink: var(--peers-blue); --ink-2: var(--grey-700); --muted: var(--grey-600); --chip-bg: var(--peers-lime); --chip-ink: #08132a; --series-before: #006c9c; --series-after: var(--peers-blue); --tint-blue: var(--peers-serene-02); --tint-lime: #f5ffcc; --tint-warn: #fff5cc; --accent-rail: var(--peers-blue); --rail-ink: #ffffff; --radius-sm: 4px; --radius-2xl: 24px; --shadow-sm: 0 1px 2px rgba(145, 158, 171, 0.16); --ring: 0 0 0 3px rgba(1, 19, 52, 0.16); } .report-section ::selection { background: var(--tint-lime); } .report-section .eyebrow { display: inline-flex; align-items: center; gap: 6px; background: var(--peers-lime); color: var(--chip-ink); padding: 7px 15px; border-radius: var(--radius-full); font-family: var(--font-secondary); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 800; } .report-section h1, .report-section h2, .report-section h3 { font-family: var(--font-secondary); text-wrap: balance; margin: 0; color: var(--ink); } .report-section .num { font-variant-numeric: tabular-nums; } .report-section .slide-head { display: flex; align-items: center; gap: 24px; flex-shrink: 0; } .report-section .slide-body { display: flex; flex-direction: column; margin-top: var(--space-3); } .report-section .ihead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .report-section .blist { margin: 10px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; } .report-section .blist li { display: flex; gap: 8px; font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; } .report-section .blist li::before { content: '\203A'; color: var(--series-before); font-weight: 800; flex-shrink: 0; } .report-section .legend-note { font-family: var(--font-primary); font-size: 0.78rem; color: var(--muted); margin-top: 10px; } .report-section .stat-tile .info-btn { position: absolute; top: 16px; right: 14px; } .report-section .kicker-title { display: flex; flex-direction: column; gap: 9px; } .report-section .kicker-title h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.15; } .report-section .kicker-title .lede { font-size: clamp(0.92rem, 1.1vw, 1rem); color: var(--ink-2); max-width: 78ch; line-height: 1.55; margin: 0; } .report-section .grid { display: grid; gap: 16px; } .report-section .card { background: var(--peers-white); border: 1.5px solid var(--border); border-left: 6px solid var(--accent-rail); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: var(--shadow-md); } .report-section .card h3 { font-size: 1.06rem; font-weight: 700; } .report-section .stat-tile { position: relative; background: var(--peers-white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-md); overflow: hidden; } .report-section .stat-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--peers-lime); } .report-section .stat-tile.before::before { background: var(--series-before); } .report-section .stat-tile.after::before { background: var(--series-after); } .report-section .stat-tile .figure { font-family: var(--font-secondary); font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--ink); letter-spacing: -0.01em; } .report-section .stat-tile .figure .unit { font-size: 0.42em; color: var(--muted); font-weight: 600; margin-left: 3px; } .report-section .stat-tile .label { font-size: 0.92rem; color: var(--ink-2); line-height: 1.45; } .report-section .stat-tile .tag { font-family: var(--font-secondary); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .report-section .stat-tile.before .figure { color: var(--series-before); } .report-section .stat-tile.after .figure { color: var(--series-after); } .report-section .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--radius-full); background: var(--surface-alt); border: 1px solid var(--border); font-size: 0.82rem; color: var(--ink-2); font-family: var(--font-secondary); font-weight: 600; } .report-section .chip.lime { background: var(--chip-bg); color: var(--chip-ink); border-color: transparent; font-weight: 800; } .report-section .icon { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .report-section .num-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .report-section .num-row:last-child { border-bottom: none; } .report-section .num-row .n { font-family: var(--font-secondary); font-weight: 800; font-size: 1rem; color: var(--rail-ink); background: var(--accent-rail); flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .report-section .num-row .t { font-size: 1rem; color: var(--ink); line-height: 1.52; padding-top: 4px; } .report-section .num-row .t b { color: var(--series-before); font-weight: 700; } /* ---- info / popup system ---- */ .report-section .info-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-alt); border: 1.5px solid var(--border-strong); color: var(--ink-2); font-family: var(--font-secondary); font-weight: 800; font-size: 0.78rem; font-style: italic; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .report-section .info-btn:hover { background: var(--peers-lime); border-color: var(--peers-lime); color: var(--chip-ink); transform: scale(1.08); } .report-section .info-btn:focus-visible { outline: none; box-shadow: var(--ring); } .report-section .info-btn.on-dark { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); color: #fff; } .report-section .info-btn.on-dark:hover { background: var(--peers-lime); color: var(--chip-ink); } .modal-overlay { position: fixed; inset: 0; background: rgba(1, 19, 52, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; padding: 24px; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-box { background: var(--peers-white); color: var(--ink); border-radius: var(--radius-lg); max-width: 560px; width: 100%; box-shadow: var(--shadow-lg); transform: translateY(10px) scale(0.98); transition: transform 0.22s ease; border-top: 6px solid var(--peers-lime); } .modal-overlay.active .modal-box { transform: none; } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px 4px; } .modal-head h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.25; } .modal-close { cursor: pointer; border: none; background: var(--surface-alt); width: 30px; height: 30px; border-radius: 50%; font-size: 16px; line-height: 1; color: var(--ink-2); flex-shrink: 0; } .modal-close:hover { background: var(--peers-lime); color: var(--chip-ink); } .modal-body { padding: 8px 20px 22px; font-size: 0.96rem; color: var(--ink-2); line-height: 1.6; } .modal-body b { color: var(--ink); } /* ---- barras (antes/depois) ---- */ .report-section .barchart { display: flex; flex-direction: column; gap: 20px; } .report-section .bar-group { display: flex; align-items: center; gap: 16px; } .report-section .bg-main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .report-section .bg-head { display: flex; align-items: center; gap: 8px; } .report-section .bg-head .glabel { font-size: 0.94rem; color: var(--ink); font-weight: 700; } .report-section .bar-row { display: flex; align-items: center; gap: 10px; } .report-section .bar-row .blabel { font-family: var(--font-secondary); font-weight: 800; font-size: 0.76rem; color: var(--muted); width: 44px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em; } .report-section .bar-track { flex: 1; height: 22px; background: var(--surface-alt); border-radius: 5px; overflow: hidden; min-width: 40px; } .report-section .bar-fill { height: 100%; border-radius: 5px; width: 0%; transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1); } .report-section .bar-fill.before { background: var(--series-before); } .report-section .bar-fill.after { background: var(--series-after); } .report-section .bar-value { font-family: var(--font-secondary); font-weight: 800; font-size: 0.9rem; width: 58px; flex-shrink: 0; text-align: right; } .report-section .bar-value.before { color: var(--series-before); } .report-section .bar-value.after { color: var(--series-after); } .report-section .delta-badge { flex-shrink: 0; background: var(--peers-blue); border-radius: var(--radius-md); padding: 10px 14px; display: flex; flex-direction: column; align-items: center; min-width: 88px; } .report-section .delta-badge .dv { font-family: var(--font-secondary); font-weight: 900; font-size: 1.55rem; color: var(--peers-lime); line-height: 1; } .report-section .delta-badge .du { font-family: var(--font-secondary); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: #b9c6d6; margin-top: 2px; } .report-section .legend-row { display: flex; gap: 18px; margin-top: 2px; } .report-section .legend-row .li { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-2); font-family: var(--font-secondary); font-weight: 600; } .report-section .legend-row .dot { width: 9px; height: 9px; border-radius: 50%; } .report-section .block-label { font-family: var(--font-secondary); font-weight: 800; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .report-section .block-label .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--series-before); flex-shrink: 0; } .report-section .block-label.mo .sw { background: var(--series-after); } /* ---- gráfico de linha (SVG nativo) ---- */ .report-section .linechart-wrap { position: relative; } .report-section .linechart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; } .report-section .lc-grid line { stroke: var(--border); stroke-width: 1; } .report-section .lc-area { fill: var(--series-before); opacity: 0.14; } .report-section .lc-line { fill: none; stroke: var(--series-before); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .report-section .lc-dot { fill: var(--peers-white); stroke: var(--series-before); stroke-width: 3; } .report-section .lc-dot.hi { fill: var(--series-after); stroke: var(--series-after); } .report-section .lc-label { font-family: var(--font-secondary); font-weight: 600; font-size: 10px; fill: var(--muted); } .report-section .lc-vlabel { font-family: var(--font-secondary); font-size: 13px; font-weight: 700; fill: var(--ink); } .report-section .lc-vlabel.hi { fill: var(--series-after); } .report-section .quote { border-left: 4px solid var(--peers-lime); padding: 8px 0 8px 18px; font-family: var(--font-secondary); font-size: 1.04rem; font-weight: 500; font-style: italic; color: var(--ink-2); line-height: 1.5; } .report-section .two-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; } .report-section .three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } /* Slide "O Desafio (Antes)": os 3 quadros "Fechamento anual - 2023" nao tem contraste antes/depois dentro do proprio slide (e so "antes"), entao usam o azul escuro da marca em vez do azul medio de --series-before. */ #desafio .three-col { --series-before: var(--peers-blue); } /* ---- capa (hero escuro) ---- */ .report-section.bm-cover { background: var(--peers-blue); color: #fff; position: relative; overflow: hidden; } .bm-cover h1, .bm-cover h2, .bm-cover h3 { color: #fff; } .bm-cover .orbit-wrap { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(40vw, 360px); height: min(40vw, 360px); opacity: 0.9; pointer-events: none; z-index: 1; } .bm-cover .brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; position: relative; z-index: 2; } .report-section .brandmark { width: 30px; height: 30px; border-radius: 8px; background: var(--peers-lime); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .report-section .brandmark svg { width: 16px; height: 16px; stroke: var(--chip-ink); fill: none; stroke-width: 2; } .report-section .brandtext { font-family: var(--font-secondary); font-weight: 700; font-size: 0.82rem; color: #b9c6d6; letter-spacing: 0.05em; } .bm-cover h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.15; max-width: 30ch; position: relative; z-index: 2; } .bm-cover h1 em { font-style: normal; color: var(--peers-lime); } .bm-cover .sub { font-size: clamp(0.94rem, 1.2vw, 1.05rem); color: #c7d3e1; max-width: 68ch; margin-top: 16px; line-height: 1.55; position: relative; z-index: 2; } .bm-cover .tags { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; position: relative; z-index: 2; } .bm-cover .tags .chip { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.2); } .bm-cover .tags .chip.lime { background: var(--peers-lime); color: var(--chip-ink); } .bm-cover .foot { margin-top: 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); position: relative; z-index: 2; } .bm-cover .foot .who { font-size: 0.86rem; color: #93a2b6; line-height: 1.5; } .bm-cover .foot .who b { color: #e7ecf2; } .report-section .orbit-node circle { fill: var(--peers-blue); stroke: var(--peers-lime); stroke-width: 1.8; } .report-section .orbit-node.center circle { fill: var(--peers-lime); stroke: none; } .report-section .orbit-line { stroke: #3c4e6b; stroke-width: 1; } /* ---- grandes marcos ---- */ .report-section .marcos-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .report-section .stat-tile.hero { padding: 24px 24px 22px; gap: 8px; } .report-section .stat-tile.hero .figure { font-size: clamp(2rem, 3.6vw, 3rem); } .report-section .hero-icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--tint-lime); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .report-section .hero-icon .icon { width: 19px; height: 19px; stroke: var(--chip-ink); } /* ---- grade de canais ---- */ .report-section .channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .report-section .channel { background: var(--peers-white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 16px 17px 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); } .report-section .channel .ic-wrap { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--tint-blue); display: flex; align-items: center; justify-content: center; } .report-section .channel .ic-wrap .icon { width: 20px; height: 20px; stroke: var(--series-before); } .report-section .channel .name { font-weight: 700; font-size: 0.98rem; font-family: var(--font-secondary); } .report-section .channel .desc { font-size: 0.85rem; color: var(--ink-2); line-height: 1.42; } .report-section .compare-panel { background: var(--surface-alt); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 16px 20px; margin-top: 18px; } .report-section .compare-panel .row { display: flex; align-items: center; gap: 16px; padding: 9px 0; flex-wrap: wrap; } .report-section .compare-panel .row + .row { border-top: 1px solid var(--border); } .report-section .compare-panel .who { width: 190px; flex-shrink: 0; font-family: var(--font-secondary); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .report-section .compare-panel .stmt { font-size: 0.95rem; color: var(--ink); } .report-section .compare-panel .stmt b { color: var(--series-before); } /* ---- próximos passos ---- */ .report-section .cta-row { display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap; } .report-section .step { flex: 1; min-width: 200px; background: var(--peers-white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-md); border-top: 6px solid var(--accent-rail); } .report-section .step .sn { font-family: var(--font-secondary); font-weight: 900; color: var(--series-after); font-size: 1.7rem; } .report-section .step .st { font-weight: 700; font-size: 1.02rem; } .report-section .step .sd { font-size: 0.88rem; color: var(--ink-2); line-height: 1.48; } .report-section .step .sw { font-family: var(--font-secondary); font-weight: 700; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .report-section .flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--border-strong); font-size: 1.8rem; font-weight: 800; flex-shrink: 0; font-family: var(--font-secondary); } .report-section .blueprint-note { background: var(--surface-alt); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 14px 20px; margin-top: 16px; font-size: 0.9rem; color: var(--ink-2); line-height: 1.55; } .report-section .blueprint-note b { color: var(--ink); } /* ---- benefícios ---- */ .report-section .benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .report-section .benefit { background: var(--peers-white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 19px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); } .report-section .benefit .bic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--tint-lime); display: flex; align-items: center; justify-content: center; } .report-section .benefit .bic .icon { width: 21px; height: 21px; stroke: var(--chip-ink); } .report-section .benefit h3 { font-size: 1.02rem; } .report-section .benefit p { font-size: 0.87rem; color: var(--ink-2); line-height: 1.48; margin: 0; } /* ---- causas-raiz (diagnóstico) ---- */ .report-section .causes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .report-section .cause { background: var(--peers-white); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 19px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); position: relative; } .report-section .cause .chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .report-section .cause .cic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--tint-warn); display: flex; align-items: center; justify-content: center; } .report-section .cause .cic .icon { width: 22px; height: 22px; stroke: #b76e00; } .report-section .cause h3 { font-size: 1rem; line-height: 1.3; } .report-section .cause p { font-size: 0.87rem; color: var(--ink-2); line-height: 1.48; margin: 0; } /* ---- destaque em linha (tecnologia) ---- */ .report-section .highlight-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .report-section .hl { display: flex; align-items: baseline; gap: 6px; background: var(--tint-blue); border-radius: var(--radius-full); padding: 8px 16px; font-size: 0.88rem; font-family: var(--font-primary); } .report-section .hl b { font-family: var(--font-secondary); font-weight: 800; color: var(--series-before); font-size: 1.08rem; } /* ---- mockup da ferramenta ---- */ .report-section .mockup { background: var(--peers-blue); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg); position: relative; } .report-section .mockup .mtitle { font-family: var(--font-secondary); font-weight: 700; font-size: 0.72rem; color: #8fa3be; letter-spacing: 0.06em; text-transform: uppercase; } .report-section .mockup .msg { background: #0c2748; border: 1px solid #234367; border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: flex-start; gap: 11px; } .report-section .mockup .msg .bot { width: 26px; height: 26px; border-radius: 50%; background: var(--peers-lime); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; } .report-section .mockup .msg .body { font-size: 0.86rem; color: #dde7f2; line-height: 1.4; } .report-section .mockup .msg .body b { color: #fff; } .report-section .mockup .msg button { font-family: var(--font-secondary); font-size: 0.78rem; font-weight: 700; background: var(--peers-lime); color: var(--chip-ink); border: none; border-radius: var(--radius-full); padding: 6px 14px; margin-top: 8px; cursor: default; } .report-section .mockup .dash { display: flex; gap: 10px; } .report-section .mockup .ring-card { flex: 1; background: #0c2748; border: 1px solid #234367; border-radius: var(--radius-md); padding: 14px; display: flex; align-items: center; gap: 12px; } .report-section .mockup .ring { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-secondary); font-weight: 700; font-size: 0.74rem; color: #fff; } .report-section .mockup .ring-label { font-size: 0.78rem; color: #b9c6d6; line-height: 1.4; } .report-section .mockup .ring-label b { color: #fff; font-size: 0.88rem; } .report-section .mockup .status-list { display: flex; flex-direction: column; gap: 7px; } .report-section .mockup .st-row { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: #dde7f2; } .report-section .mockup .st-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ---- waffle / pictograma ---- */ .report-section .waffle-wrap { display: flex; flex-direction: column; gap: 7px; } .report-section .waffle-head { display: flex; justify-content: space-between; align-items: baseline; } .report-section .waffle-head .wlabel { font-size: 0.92rem; color: var(--ink-2); font-weight: 600; } .report-section .waffle-head .wval { font-family: var(--font-secondary); font-weight: 800; font-size: 1.4rem; } .report-section .waffle-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; } .report-section .waffle-grid span { aspect-ratio: 1; border-radius: 2px; } .report-section .waffle-grid.before span { background: var(--series-before); } .report-section .waffle-grid.after span { background: var(--series-after); } .report-section .waffle-caption { font-family: var(--font-primary); font-size: 0.78rem; color: var(--muted); } /* ---- painel de tradução (De/Para) ---- */ .report-section .translate-panel { display: flex; flex-direction: column; gap: 10px; } .report-section .trow { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 10px; } .report-section .trow.head .tfrom, .report-section .trow.head .tto { background: none; border: none; padding: 0; font-family: var(--font-secondary); font-weight: 800; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); text-align: center; } .report-section .tfrom { background: var(--tint-blue); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; font-size: 0.92rem; color: var(--ink); line-height: 1.4; } .report-section .tto { background: var(--tint-lime); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; font-size: 0.92rem; color: var(--ink); line-height: 1.4; } .report-section .tarrow { text-align: center; color: var(--muted); font-size: 1.2rem; font-weight: 800; } /* ---- linha do tempo (marco DU5) ---- */ .report-section .timeline { display: flex; flex-direction: column; gap: 0; margin-top: 6px; } .report-section .tl-item { display: flex; gap: 14px; position: relative; padding-bottom: 18px; } .report-section .tl-item:last-child { padding-bottom: 0; } .report-section .tl-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--peers-white); border: 3px solid var(--series-before); flex-shrink: 0; margin-top: 1px; z-index: 1; } .report-section .tl-item.hi .tl-dot { background: var(--peers-lime); border-color: var(--peers-lime); } .report-section .tl-date { font-family: var(--font-secondary); font-weight: 700; font-size: 0.82rem; color: var(--muted); } .report-section .tl-text { font-size: 0.92rem; color: var(--ink); line-height: 1.45; } .report-section .tl-text b { color: var(--ink); } .report-section .tl-head { display: flex; align-items: center; gap: 8px; } @media (max-width: 980px) { .report-section .two-col { grid-template-columns: 1fr; } .report-section .three-col { grid-template-columns: 1fr; } .report-section .benefits, .report-section .causes { grid-template-columns: 1fr 1fr; } .report-section .channels { grid-template-columns: repeat(2, 1fr); } .report-section .marcos-hero { grid-template-columns: 1fr; } .bm-cover .orbit-wrap { display: none; } } @media (max-width: 640px) { .report-section .benefits, .report-section .causes, .report-section .channels { grid-template-columns: 1fr; } } /* ---- Slide 12 (Fase 2) no Modo Apresentação ---- */ /* É o slide com mais conteúdo do deck (4 channels + timeline de 5 marcos + 3 stat-tiles + 2 cards + nota) -- sem compactar, ultrapassa a altura do palco (.pmode-stage) e aparece com barra de rolagem, diferente dos demais slides. Aperta só aqui (ativo apenas dentro do modo apresentação, a leitura normal da página continua espaçosa). */ .pmode-stage #fase2 .kicker-title { gap: 4px; } .pmode-stage #fase2 .kicker-title h2 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.15; } .pmode-stage #fase2 .kicker-title .lede { font-size: 0.8rem; line-height: 1.4; } .pmode-stage #fase2 .channels { margin-top: 10px !important; gap: 8px; } .pmode-stage #fase2 .channel { padding: 10px 11px 9px; gap: 6px; } .pmode-stage #fase2 .channel .ic-wrap { width: 30px; height: 30px; } .pmode-stage #fase2 .channel .name { font-size: 0.86rem; } .pmode-stage #fase2 .channel .desc { font-size: 0.74rem; line-height: 1.3; } .pmode-stage #fase2 .two-col { margin-top: 10px !important; gap: 16px; } .pmode-stage #fase2 .block-label { margin-bottom: 4px; font-size: 0.76rem; } .pmode-stage #fase2 .card { padding: 10px 13px; } .pmode-stage #fase2 .card p { font-size: 0.78rem !important; line-height: 1.35 !important; margin-top: 4px !important; } .pmode-stage #fase2 .tl-head h3 { font-size: 0.86rem !important; } .pmode-stage #fase2 .timeline { margin-top: 4px !important; gap: 0; } .pmode-stage #fase2 .tl-item { padding-bottom: 5px; } .pmode-stage #fase2 .tl-dot { width: 14px; height: 14px; } .pmode-stage #fase2 .tl-date { font-size: 0.7rem; } .pmode-stage #fase2 .tl-text { font-size: 0.78rem; line-height: 1.25; } .pmode-stage #fase2 .stat-tile { padding: 10px 12px 8px; gap: 2px; } .pmode-stage #fase2 .stat-tile .figure { font-size: clamp(1.4rem, 2.2vw, 1.8rem); } .pmode-stage #fase2 .stat-tile .label { font-size: 0.72rem; line-height: 1.25; } .pmode-stage #fase2 .blueprint-note { padding: 8px 13px; margin-top: 8px; font-size: 0.76rem; line-height: 1.35; }