/* OBRIFY · styles.css (GERADO por build.mjs; não edite: edite tokens.css, base.css ou sections/.css) */ /* ---- tokens.css ---- */ /* ========================================================================== OBRIFY · tokens.css (AUTORITATIVO) Gerado por design-system (fallback da etapa 3, sem Figma) em 2026-10-13. Fonte: Marca/Obrify - Manual da Marca.pdf + design-system/direcao-arte.md. Nao edite a mao: regenere com o script e mantenha tokens.json igual. Fontes: self-host em Site/assets/css/fonts.css (sem CDN), font-display: swap. Barlow 500/600 = titulos, botoes, numeros. Barlow Semi Condensed 600 = eyebrow e rotulos. Nunito 400/600 = so texto corrido. Nenhuma fonte mono (R7). Primitivos (cor crua, NAO usar direto em componente; ver tokens.json.primitives): obrify-green #5bbb5b obrify-gray #53575b obrify-black #2a2929 obrify-light #ecf0e8 white #ffffff green-ink #2d6e31 green-outline #3f8f43 green-hover #6cc66c green-cell #4fae4f plate #dfe5d9 graphite-2 #343333 graphite-3 #1f1e1e bezel #1d1c1c mist #b9bdb5 window-bar #f4f6f2 ui-red #e5484d ui-red-300 #ff9a9d ui-red-700 #b4232a ui-gray #6b6f76 ui-gray-light #b0b0b0 ========================================================================== */ :root{ /* cores por funcao */ --background: #ecf0e8; --foreground: #2a2929; --card: #ffffff; --card-foreground: #2a2929; --surface-paper: #ecf0e8; --surface-white: #ffffff; --surface-plate: #dfe5d9; --surface-dark: #2a2929; --surface-dark-2: #343333; --surface-dark-3: #1f1e1e; --surface-window-bar: #f4f6f2; --surface-bezel: #1d1c1c; --primary: #5bbb5b; --primary-foreground: #2a2929; --primary-hover: #6cc66c; --primary-cell: #4fae4f; --action: #5bbb5b; --action-foreground: #2a2929; --text-secondary: #53575b; --text-accent: #2d6e31; --text-accent-on-dark: #5bbb5b; --muted: #dfe5d9; --muted-foreground: #53575b; --on-dark: #ecf0e8; --on-dark-secondary: #b9bdb5; --on-dark-muted: rgba(236,240,232,.60); --on-dark-axis: rgba(236,240,232,.70); --border: rgba(83,87,91,.22); --border-dark: rgba(236,240,232,.14); --border-strong: rgba(42,41,41,.25); --border-on-photo: rgba(255,255,255,.40); --ring: #2d6e31; --ring-dark: #5bbb5b; --outline-hollow: #3f8f43; --destructive: #e5484d; --status-late: #e5484d; --status-late-text-dark: #ff9a9d; --status-late-bg-dark: rgba(229,72,77,.18); --status-late-text-light: #b4232a; --status-late-bg-light: rgba(229,72,77,.12); --status-done: #5bbb5b; --status-neutral: #6b6f76; --status-neutral-light: #b0b0b0; --chart-planned-dark: rgba(236,240,232,.45); --chart-actual: #5bbb5b; --chart-deviation: rgba(229,72,77,.16); --chart-today: rgba(236,240,232,.35); --token-highlight: rgba(91,187,91,.18); --overlay-lightbox: rgba(31,30,30,.96); --header-solid: rgba(255,255,255,.96); --header-link-on-photo: rgba(255,255,255,.86); /* espaco (escala 4px; iso = vetor de registro 2:1) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-24: 96px; --space-28: 112px; --space-page-x: 24px; --space-gutter: 24px; --space-card: 24px; --space-card-sm: 16px; --space-stack-2xs: 4px; --space-stack-xs: 8px; --space-stack-sm: 12px; --space-stack-md: 16px; --space-stack-lg: 24px; --space-stack-xl: 32px; --space-stack-2xl: 48px; --space-cluster-xs: 8px; --space-cluster-sm: 12px; --space-cluster-md: 16px; --space-cluster-lg: 24px; --space-cluster-xl: 40px; --space-eyebrow-gap: 16px; --space-h1-sub: 20px; --space-sub-btn: 32px; --space-list-item-y: 18px; --space-tile-gap: 16px; --space-section: clamp(56px, 9svh, 112px); --space-iso-x: 32px; --space-iso-y: 16px; /* raios (hierarquicos, da geometria arredondada do simbolo) */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-screen: 8px; --radius-device-screen: 28px; --radius-device: 36px; --radius-pill: 999px; /* tipografia */ --font-display: "Barlow", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-label: "Barlow Semi Condensed", "Barlow", system-ui, "Segoe UI", Arial, sans-serif; --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --text-display: calc(clamp(2.5rem, 1.55rem + 3.1vw, 4.25rem) * var(--type-h-scale)); --lh-display: 1.02; --tracking-display: -0.02em; --weight-display: 600; --family-display: var(--font-display); --measure-display: 14ch; --text-cta: calc(clamp(2.75rem, 1.4rem + 4.4vw, 5.5rem) * var(--type-h-scale)); --lh-cta: 1.0; --tracking-cta: -0.025em; --weight-cta: 600; --family-cta: var(--font-display); --measure-cta: 12ch; --text-h2: calc(clamp(1.875rem, 1.4rem + 1.6vw, 3rem) * var(--type-h-scale)); --lh-h2: 1.06; --tracking-h2: -0.015em; --weight-h2: 600; --family-h2: var(--font-display); --measure-h2: 20ch; --text-manifesto: clamp(1.625rem, 1.05rem + 2vw, 2.75rem); --lh-manifesto: 1.12; --tracking-manifesto: -0.01em; --weight-manifesto: 500; --family-manifesto: var(--font-display); --measure-manifesto: 24ch; --text-h3: clamp(1.25rem, 1.12rem + .45vw, 1.5rem); --lh-h3: 1.2; --tracking-h3: -0.005em; --weight-h3: 600; --family-h3: var(--font-display); --measure-h3: 28ch; --text-h4: clamp(1.125rem, 1rem + .5vw, 1.5rem); --lh-h4: 1.25; --tracking-h4: 0em; --weight-h4: 500; --family-h4: var(--font-display); --measure-h4: 46ch; --text-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem); --lh-lead: 1.55; --tracking-lead: 0em; --weight-lead: 400; --family-lead: var(--font-sans); --measure-lead: 52ch; --text-body: clamp(1rem, .97rem + .12vw, 1.0625rem); --lh-body: 1.6; --tracking-body: 0em; --weight-body: 400; --family-body: var(--font-sans); --measure-body: 62ch; --text-small: .875rem; --lh-small: 1.5; --tracking-small: 0em; --weight-small: 400; --family-small: var(--font-sans); --measure-small: 62ch; --text-note: .8125rem; --lh-note: 1.5; --tracking-note: 0em; --weight-note: 400; --family-note: var(--font-sans); --measure-note: 62ch; --text-label: clamp(.75rem, .72rem + .1vw, .8125rem); --lh-label: 1.2; --tracking-label: .14em; --weight-label: 600; --family-label: var(--font-label); --measure-label: none; --text-eyebrow: clamp(.75rem, .72rem + .1vw, .8125rem); --lh-eyebrow: 1.2; --tracking-eyebrow: .14em; --weight-eyebrow: 600; --family-eyebrow: var(--font-label); --measure-eyebrow: none; --text-btn: 1rem; --lh-btn: 1.0; --tracking-btn: .01em; --weight-btn: 600; --family-btn: var(--font-display); --measure-btn: none; --text-nav: .9375rem; --lh-nav: 1.2; --tracking-nav: 0em; --weight-nav: 500; --family-nav: var(--font-display); --measure-nav: none; --measure-list: 46ch; /* sombras (so produto; tintadas pelo grafite da marca) */ --shadow-product: 0 30px 60px -30px rgba(42,41,41,.45), 0 2px 6px rgba(42,41,41,.08); --shadow-product-dark: 0 30px 60px -30px rgba(0,0,0,.55), 0 2px 6px rgba(42,41,41,.08); --shadow-data: 0 18px 40px -18px rgba(42,41,41,.35); --shadow-header: 0 1px 0 rgba(42,41,41,.08); /* movimento (sistema da casa: curto + easing longo, sem bounce) */ --duration-instant: 120ms; --duration-xs: 240ms; --duration-sm: 300ms; --duration-step: 420ms; --duration-md: 450ms; --duration-open: 500ms; --duration-lg: 700ms; --duration-xl: 900ms; --duration-soft: 1000ms; --duration-mask: 1150ms; --duration-draw: 1400ms; --duration-demo: 2600ms; --ease-out: cubic-bezier(.16,.84,.28,1); --ease-ui: cubic-bezier(.4,0,.2,1); --stagger: 80ms; --stagger-word: 42ms; --stagger-layer: 120ms; --distance: 24px; --distance-x: 26px; --distance-hover: 8px; --scale-from: .96; --parallax-max: .1; /* layout */ --container: 1200px; --header-h: 72px; --header-h-solid: 60px; --header-h-mobile: 56px; --window-bar-h: 32px; --btn-h: 48px; --btn-h-header: 44px; --btn-h-cta: 52px; --touch-min: 44px; --type-h-scale: 1; --lamina-1: 10px; --lamina-2: 10px; /* foto, veus e recortes */ --photo-filter: saturate(.65) contrast(1.05); --photo-multiply: rgba(91,187,91,.20); --veil-hero: linear-gradient(90deg, rgba(42,41,41,.90) 0%, rgba(42,41,41,.78) 44%, rgba(42,41,41,.50) 100%), linear-gradient(0deg, rgba(42,41,41,.55) 0%, rgba(42,41,41,0) 40%); --veil-hero-mobile: linear-gradient(rgba(42,41,41,.80), rgba(42,41,41,.80)); --veil-header-scrim: linear-gradient(180deg, rgba(42,41,41,.72) 0px, rgba(42,41,41,0) 140px); --veil-canteiro: linear-gradient(0deg, rgba(42,41,41,.86) 0%, rgba(42,41,41,.55) 50%, rgba(42,41,41,0) 80%); --veil-tile-hover: linear-gradient(0deg, rgba(42,41,41,.86) 0%, rgba(42,41,41,.80) 30%, rgba(42,41,41,0) 62%); --lamina-clip: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); /* aliases (nomes da direcao de arte e do contrato) -> token semantico */ --ink: var(--foreground); --ink-2: var(--text-secondary); --paper: var(--background); --white: var(--surface-white); --plate: var(--surface-plate); --dark-2: var(--surface-dark-2); --dark-3: var(--surface-dark-3); --green: var(--primary); --green-hover: var(--primary-hover); --green-cell: var(--primary-cell); --green-ink: var(--text-accent); --on-dark-2: var(--on-dark-secondary); --line-light: var(--border); --line-dark: var(--border-dark); --ui-red: var(--destructive); --ui-red-text-dark: var(--status-late-text-dark); --ui-red-text-light: var(--status-late-text-light); --ui-gray: var(--status-neutral); --text-h1: var(--text-display); --lh-h1: var(--lh-display); --tracking-h1: var(--tracking-display); --t-display: var(--text-display); --t-cta: var(--text-cta); --t-h2: var(--text-h2); --t-manifesto: var(--text-manifesto); --t-h3: var(--text-h3); --t-item: var(--text-h4); --t-lead: var(--text-lead); --t-body: var(--text-body); --t-small: var(--text-small); --t-label: var(--text-label); --t-btn: var(--text-btn); --sec-y: var(--space-section); --shadow-card: var(--shadow-data); --shadow-overlay: var(--shadow-product); } @media (max-width: 900px){ :root{ --space-iso-x: 16px; --space-iso-y: 8px; --space-gutter: 16px; --space-tile-gap: 16px; } } @media (max-height: 800px){ :root{ --type-h-scale: .88; --space-section: clamp(40px, 6svh, 72px); } } @media (max-height: 700px){ :root{ --type-h-scale: .80; } } @media (max-width: 560px){ :root{ --space-page-x: 16px; --space-section: 32px; --space-tile-gap: 12px; --text-btn: .9375rem; --header-h: 56px; } } @media (prefers-reduced-motion: reduce){ :root{ --duration-instant: 0ms; --duration-xs: 0ms; --duration-sm: 0ms; --duration-step: 0ms; --duration-md: 0ms; --duration-open: 0ms; --duration-lg: 0ms; --duration-xl: 0ms; --duration-soft: 0ms; --duration-mask: 0ms; --duration-draw: 0ms; --duration-demo: 0ms; --stagger: 0ms; --stagger-word: 0ms; --stagger-layer: 0ms; --distance: 0px; --distance-x: 0px; --distance-hover: 0px; --parallax-max: 0; } } /* ---- base.css ---- */ /* ===================================================================== OBRIFY v3 · base.css (dono: esqueleto) Kit visual do conceito C generalizado para o site inteiro. Ordem no styles.css: tokens.css, base.css, sections/.css; depois vem motion.css. Contrato de uso para as seções: design-system/CONVENCOES-v3.md ===================================================================== */ /* --------------------------------------------------------------------- 1. Variáveis --------------------------------------------------------------------- */ :root{ /* superfícies e texto */ --g0:#151515; --g1:#1f1e1e; --g2:#252424; --g3:#2a2929; --paper:#ecf0e8; --white:#fff; --ink:#2a2929; --ink-2:#53575b; --on:#ecf0e8; --on-2:#b9bdb5; --on-3:rgba(236,240,232,.64); --green:#5bbb5b; --green-hi:#6cc66c; --green-ink:#2d6e31; --green-soft:#8fd68f; --red:#e5484d; --red-ink:#b4232a; --red-soft:#ff9a9d; --hair-1:rgba(236,240,232,.06); --hair-2:rgba(236,240,232,.10); --hair-3:rgba(236,240,232,.16); --hair-1l:rgba(42,41,41,.06); --hair-2l:rgba(42,41,41,.10); --hair-3l:rgba(42,41,41,.18); --ui-bg:#f3f5f1; --ui-sub:#eef1ec; --corte-bg:rgba(25,25,24,.95); /* placa do corte, flags e diário */ /* famílias (nunca Nunito em título ou número) */ --f-d:"Barlow",system-ui,"Segoe UI",Arial,sans-serif; --f-l:"Barlow Semi Condensed","Barlow",system-ui,"Segoe UI",Arial,sans-serif; --f-t:"Nunito",system-ui,"Segoe UI",Arial,sans-serif; /* movimento: curto + easing longo, sem bounce */ --ease:cubic-bezier(.16,.84,.28,1); --ease-ui:cubic-bezier(.4,0,.2,1); /* layout: o container alinha com a logo do header */ --pad:clamp(16px,5.6vw,80px); --max:clamp(1280px,75vw,1440px); --corte-w:56px; /* largura do corte recolhido (desktop) */ --corte-reserva:0px; /* faixa que o corte ocupa à direita; vira 80px no desktop */ --gutter:max(var(--pad),var(--corte-reserva)); --corte-right:max(12px,calc((100vw - min(100vw - 2 * var(--gutter),var(--max))) / 2 - var(--corte-w) - 20px)); --hdr:72px; --pill-reserva:0px; /* faixa inferior ocupada pela pílula do corte (celular e tablet) */ --secao-gap:clamp(16px,4svh,48px); --secao-pt:calc(var(--hdr) + var(--secao-gap)); --secao-pb:max(var(--secao-gap),var(--pill-reserva)); --secao-util:calc(100svh - var(--secao-pt) - var(--secao-pb)); /* escala tipográfica (--type-h-scale vem do tokens.css: .88 até 800px de altura, .80 até 700px) */ --h1:calc(clamp(3rem,1.2rem + 5.4vw,6.5rem) * var(--type-h-scale,1)); --h2:calc(clamp(2.25rem,1.1rem + 3vw,4rem) * var(--type-h-scale,1)); --h3:calc(clamp(1.375rem,1.1rem + .8vw,1.875rem) * var(--type-h-scale,1)); --lead:clamp(1.0625rem,.98rem + .3vw,1.25rem); /* sombras */ --sh-frame: inset 0 0 0 1px rgba(236,240,232,.08), 0 0 0 1px rgba(0,0,0,.38), 0 1px 2px rgba(10,10,10,.30), 0 6px 12px -2px rgba(10,10,10,.28), 0 22px 40px -12px rgba(10,10,10,.50), 0 60px 100px -40px rgba(10,10,10,.65); --sh-ui-escuro: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.35), 0 1px 2px rgba(10,10,10,.30), 0 10px 20px -6px rgba(10,10,10,.40), 0 30px 60px -24px rgba(10,10,10,.60); --sh-ui-claro: 0 0 0 1px rgba(42,41,41,.08), 0 1px 2px rgba(42,41,41,.05), 0 3px 6px rgba(42,41,41,.04), 0 8px 14px rgba(42,41,41,.05), 0 16px 28px rgba(42,41,41,.06); --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* contexto escuro (padrão) */ --bg:var(--g1); --fg:var(--on); --fg-forte:#fff; --fg-2:var(--on-2); --fg-3:var(--on-3); --linha:var(--hair-2); --linha-forte:var(--hair-3); --contorno:rgba(236,240,232,.42); --acento:var(--green); --anel:var(--green); --canto:rgba(236,240,232,.34); --sh-ui:var(--sh-ui-escuro); --m-loader-bg:var(--g1); } @media (max-width:760px){ :root{ --hdr:56px; } } /* corte fixo à direita: desktop largo e alto o bastante */ @media (min-width:1100px) and (min-height:600px){ :root{ --corte-reserva:calc(var(--corte-w) + 32px); } } /* abaixo disso o corte vira pílula no canto inferior direito */ @media (max-width:1099.98px), (max-height:599.98px){ :root{ --pill-reserva:64px; } } /* contextos de seção: data-bg="dark" (padrão) ou "light" (papel) */ [data-bg]{background-color:var(--bg);color:var(--fg)} [data-bg="dark"]{ --bg:var(--g1); --fg:var(--on); --fg-forte:#fff; --fg-2:var(--on-2); --fg-3:var(--on-3); --linha:var(--hair-2); --linha-forte:var(--hair-3); --contorno:rgba(236,240,232,.42); --acento:var(--green); --anel:var(--green); --canto:rgba(236,240,232,.34); --sh-ui:var(--sh-ui-escuro); } [data-bg="light"]{ --bg:var(--paper); --fg:var(--ink); --fg-forte:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-2); --linha:var(--hair-2l); --linha-forte:var(--hair-3l); --contorno:rgba(42,41,41,.55); --acento:var(--green-ink); --anel:var(--green-ink); --canto:rgba(42,41,41,.34); --sh-ui:var(--sh-ui-claro); } /* --------------------------------------------------------------------- 2. Reset e base --------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:calc(var(--hdr) + 8px);background:var(--g1)} body{margin:0;min-height:100vh;background:var(--g1);color:var(--on);font:400 1rem/1.6 var(--f-t); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility} img,svg,video,canvas,picture{display:block;max-width:100%} img{height:auto} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} p,h1,h2,h3,h4,figure,blockquote,dl,dd{margin:0} ul,ol{margin:0;padding:0} strong,b{font-weight:600} [hidden]{display:none!important} ::selection{background:rgba(91,187,91,.35);color:#fff} [data-bg="light"] ::selection{color:var(--ink)} /* foco visível em todo controle */ :focus-visible{outline:2px solid var(--anel);outline-offset:3px;border-radius:4px} :focus:not(:focus-visible){outline:none} /* --------------------------------------------------------------------- 3. Utilitários --------------------------------------------------------------------- */ .container{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0} .num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1} .nowrap{white-space:nowrap} .skip{position:fixed;left:16px;top:-64px;z-index:300;background:var(--green);color:var(--ink);padding:12px 16px;border-radius:8px; font:600 .9375rem/1 var(--f-d);text-decoration:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);transition:top .25s var(--ease)} .skip:focus{top:12px} /* seção-pavimento: padding que protege do header e (no celular) da pílula do corte */ .secao{position:relative;isolation:isolate;padding-block:var(--secao-pt) var(--secao-pb)} .secao--tela{min-height:100svh;display:flex;flex-direction:column;justify-content:center} /* --------------------------------------------------------------------- 4. Tipografia --------------------------------------------------------------------- */ .h1{margin:0;font:500 var(--h1)/.98 var(--f-d);letter-spacing:-.03em;color:var(--fg-forte);font-kerning:normal;text-wrap:balance} .h2{margin:0;font:500 var(--h2)/1 var(--f-d);letter-spacing:-.03em;color:var(--fg-forte);text-wrap:balance} .h3{margin:0;font:500 var(--h3)/1.1 var(--f-d);letter-spacing:-.02em;color:var(--fg-forte)} .h1 .h-cont,.h2 .h-cont{color:var(--fg-2)} .h-cont{display:block} .lead{max-width:40ch;font:400 var(--lead)/1.5 var(--f-t);color:var(--fg-2)} .lead strong,.lead b{color:var(--fg)} .texto{font:400 1rem/1.6 var(--f-t);color:var(--fg-2);max-width:62ch} .texto strong,.texto b{color:var(--fg)} .apoio{font:500 clamp(1.0625rem,.95rem + .4vw,1.375rem)/1.3 var(--f-d);letter-spacing:-.01em;color:var(--fg-forte)} /* eyebrow: SÓ texto. Nada de traço, linha, borda, sublinhado ou pseudo-elemento. */ .eyebrow{margin:0;font:600 .8125rem/1.2 var(--f-l);letter-spacing:.14em;text-transform:uppercase;color:var(--acento)} .eyebrow-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 clamp(14px,2.4svh,22px)} .tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;font:600 .6875rem/1 var(--f-l);letter-spacing:.1em; text-transform:uppercase;color:var(--fg);background:rgba(236,240,232,.06);box-shadow:inset 0 0 0 1px var(--linha-forte)} [data-bg="light"] .tag{background:rgba(42,41,41,.04)} .tag--verde{color:var(--green);box-shadow:inset 0 0 0 1px rgba(91,187,91,.5);background:rgba(91,187,91,.08)} [data-bg="light"] .tag--verde{color:var(--green-ink);box-shadow:inset 0 0 0 1px rgba(45,110,49,.45)} /* linha de rótulos com pontos médios (ex.: PLANEJAMENTO · RDO DIGITAL) */ .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)} .meta i{font-style:normal;color:var(--acento)} /* legenda técnica de figura */ .fig{display:block;font:600 .75rem/1.35 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)} .fig__n{color:var(--fg);margin-right:.7em;letter-spacing:.08em} @media (max-width:760px){ .fig{font-size:.6875rem;letter-spacing:.1em} } /* nota de simulação (obrigatória em toda réplica interativa) */ .nota-sim{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 .6875rem/1.3 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)} .nota-sim::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor} /* --------------------------------------------------------------------- 5. Botões (seta à direita, sem caixinha de ícone) --------------------------------------------------------------------- */ .btn{--h:48px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 18px 0 20px; border:0;border-radius:8px;background:var(--green);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer; font:600 1rem/1 var(--f-d);letter-spacing:.005em; box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.16),0 0 0 1px rgba(20,22,20,.30),0 1px 2px rgba(10,10,10,.30),0 6px 14px -6px rgba(10,10,10,.45); transition:background-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)} .btn:hover{background:var(--green-hi)} .btn:active{transform:translateY(.5px);box-shadow:inset 0 1px 2px rgba(0,0,0,.20),0 0 0 1px rgba(20,22,20,.30)} .btn:focus-visible{outline-offset:3px} .btn__arr{width:16px;height:16px;flex:none;transition:transform .32s var(--ease)} .btn:hover .btn__arr{transform:translateX(3px)} .btn--sm{--h:40px;padding:0 14px 0 16px;font-size:.9375rem;gap:8px} .btn--lg{--h:52px;padding:0 20px 0 24px;font-size:1.0625rem} .btn--sec{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--contorno)} .btn--sec:hover{background:rgba(236,240,232,.07)} [data-bg="light"] .btn--sec:hover{background:rgba(42,41,41,.05)} .btn--sec:active{box-shadow:inset 0 0 0 1px var(--contorno)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed} .btn__short{display:none} [data-bg="light"] .btn:not(.btn--sec){box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.16),0 0 0 1px rgba(45,110,49,.35),0 1px 2px rgba(42,41,41,.18),0 6px 14px -6px rgba(42,41,41,.35)} /* CTA de texto (ex.: "Arraste a linha do Hoje") */ .link-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 1rem/1.2 var(--f-d);color:var(--acento);text-decoration:underline; text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .2s var(--ease);background:none;border:0;padding:0;cursor:pointer} .link-cta:hover{text-decoration-color:currentColor} .link-cta .btn__arr{width:15px;height:15px} .link-cta:hover .btn__arr{transform:translateX(3px)} .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px} /* --------------------------------------------------------------------- 6. Figuras: marcas de canto, régua de coluna, grão --------------------------------------------------------------------- */ .cantos{position:relative} .cantos::before{content:"";position:absolute;inset:calc(var(--cantos-off,12px) * -1);pointer-events:none;z-index:1;--c:var(--canto); background: linear-gradient(var(--c),var(--c)) top left/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px 8px no-repeat, linear-gradient(var(--c),var(--c)) top right/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) top right/1px 8px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1px 8px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px 8px no-repeat} .figura{margin:0;position:relative} .figura > .fig{margin-top:clamp(12px,2svh,18px)} /* régua de coluna: filete no topo de um BLOCO DE FIGURA numerado (nunca junto do eyebrow) */ .regua{position:relative;display:flex;align-items:center;gap:10px;padding-top:12px;font:600 .75rem/1 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);transition:color .4s var(--ease)} .regua::before,.regua::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--linha)} .regua::after{background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)} .regua .num{color:var(--fg-2);letter-spacing:.06em} .regua.is-on{color:var(--fg)} .regua.is-on .num{color:var(--acento)} .regua.is-on::after{transform:none} .grao{position:absolute;inset:0;pointer-events:none;background-image:var(--noise);background-size:180px;opacity:.06;mix-blend-mode:overlay} /* --------------------------------------------------------------------- 7. Fotografia de obra com grading único Uso:
O container precisa de tamanho (inset:0 num pai posicionado, ou aspect-ratio). --------------------------------------------------------------------- */ .foto-obra{position:relative;overflow:hidden;isolation:isolate;background:var(--g0)} .foto-obra > img,.foto-obra > picture,.foto-obra > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .foto-obra img{object-position:var(--foto-pos,50% 50%);filter:var(--foto-filtro,saturate(.7) contrast(1.06) sepia(.05))} .foto-obra::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--green);mix-blend-mode:multiply;opacity:var(--foto-verde,.18)} .foto-obra::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background-image:var(--noise);background-size:180px;mix-blend-mode:overlay;opacity:var(--grao,.07)} .foto-obra__veu{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--veu,linear-gradient(180deg,rgba(14,15,14,.10) 30%,rgba(14,15,14,.78) 100%))} .foto-obra--pronta{--foto-filtro:none;--foto-verde:0} /* --------------------------------------------------------------------- 8. Painéis de UI do produto (réplicas brancas com dados reais) --------------------------------------------------------------------- */ .ui-frame{position:relative;padding:6px;border-radius:16px;background:#121312;box-shadow:var(--sh-frame)} .ui-panel{ --fg:var(--ink); --fg-forte:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-2); --linha:var(--hair-2l); --linha-forte:var(--hair-3l); --acento:var(--green-ink); --anel:var(--green-ink); --contorno:rgba(42,41,41,.55); position:relative;border-radius:12px;overflow:hidden;background:var(--ui-bg);color:var(--ink);font:400 .8125rem/1.35 var(--f-t); box-shadow:var(--sh-ui)} .ui-frame > .ui-panel{border-radius:11px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)} .ui-panel :focus-visible{outline-offset:2px} /* cabeçalho do painel: símbolo + contexto da obra + status */ .ui-head{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;box-shadow:0 1px 0 var(--hair-2l)} .ui-sym{width:22px;height:20px;flex:none} .ui-ctx{display:grid;gap:1px;min-width:0} .ui-ctx small{font:600 .625rem/1.2 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} .ui-ctx b{font:600 .875rem/1.2 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ui-fim{margin-left:auto;flex:none} /* bloco interno */ .ui-sec{padding:12px 14px;background:#fff;box-shadow:0 0 0 1px var(--hair-1l)} .ui-sec + .ui-sec{margin-top:8px} .ui-sec__h{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-height:22px} .ui-sec__t{font:600 .875rem/1.1 var(--f-d);letter-spacing:-.005em;color:var(--ink)} .ui-sec__d{font:500 .75rem/1 var(--f-d);color:var(--ink-2)} /* linhas rótulo / valor */ .ui-rows{list-style:none;margin:0;padding:0;display:grid} .ui-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:32px;box-shadow:0 1px 0 var(--hair-1l)} .ui-row:last-child{box-shadow:none} .ui-k{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} .ui-v{font:600 .875rem/1.2 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums lining-nums} .ui-v .u,.ui-kpi__v .u{font:500 .75rem/1 var(--f-d);letter-spacing:0;margin-left:3px;color:var(--ink-2)} .ui-t{font:400 .75rem/1.3 var(--f-t);color:#3d4043} /* KPIs */ .ui-kpis{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));background:#fff;box-shadow:0 1px 0 var(--hair-2l)} .ui-kpi{display:grid;align-content:start;gap:6px;padding:12px 14px 13px;min-width:0;transition:background-color .6s var(--ease)} .ui-kpi + .ui-kpi{box-shadow:inset 1px 0 0 var(--hair-1l)} .ui-kpi__v{display:flex;align-items:baseline;font:600 1.5rem/1 var(--f-d);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums} .ui-kpi.is-hot{background:rgba(91,187,91,.08)} /* barra de progresso (anima por transform) */ .ui-bar{display:block;height:4px;border-radius:2px;background:rgba(42,41,41,.08);overflow:hidden} .ui-bar > i{display:block;height:100%;border-radius:inherit;background:var(--green);transform-origin:left;transform:scaleX(var(--v,0));transition:transform .8s var(--ease)} .ui-bar--atraso > i{background:var(--red)} /* chips de status */ .chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:5px;white-space:nowrap; font:600 .6875rem/1 var(--f-d);letter-spacing:.01em;background:var(--ui-sub);color:var(--ink-2)} .chip--ok{background:rgba(91,187,91,.16);color:var(--green-ink)} .chip--atraso{background:rgba(229,72,77,.12);color:var(--red-ink)} .chip--neutro{background:var(--ui-sub);color:var(--ink-2)} .chip__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} /* chip fora do painel, sobre fundo escuro */ .chip--escuro{background:rgba(236,240,232,.08);color:var(--on-2)} .chip--escuro.chip--ok{background:rgba(91,187,91,.16);color:var(--green-soft)} .chip--escuro.chip--atraso{background:rgba(229,72,77,.18);color:var(--red-soft)} /* controle segmentado (Semana | Mês | Geral, R$ | %) */ .ui-seg{display:inline-flex;padding:2px;border-radius:7px;background:var(--ui-sub);box-shadow:inset 0 0 0 1px var(--hair-1l)} .ui-seg > button,.ui-seg > [role="tab"],.ui-seg > [role="radio"]{appearance:none;border:0;background:none;min-height:26px;padding:0 10px;border-radius:5px; font:600 .6875rem/1 var(--f-d);color:var(--ink-2);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)} .ui-seg > :hover{color:var(--ink)} .ui-seg > [aria-selected="true"],.ui-seg > [aria-pressed="true"],.ui-seg > [aria-checked="true"],.ui-seg > .is-on{background:var(--green);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} /* abas do painel (role=tablist / role=tab) */ .ui-tabs{display:flex;gap:2px;padding:0 6px;background:#fff;box-shadow:0 1px 0 var(--hair-2l);overflow-x:auto;scrollbar-width:none} .ui-tabs::-webkit-scrollbar{display:none} .ui-tab{position:relative;flex:none;appearance:none;border:0;background:none;min-height:40px;padding:0 10px;cursor:pointer; font:600 .8125rem/1 var(--f-d);color:var(--ink-2);transition:color .2s var(--ease)} .ui-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--green);transform:scaleX(0);transition:transform .35s var(--ease)} .ui-tab:hover,.ui-tab[aria-selected="true"]{color:var(--ink)} .ui-tab[aria-selected="true"]::after{transform:none} .ui-tab:focus-visible{outline-offset:-3px} .ui-tabpanel:focus-visible{outline-offset:-2px} /* botão dentro da réplica (Enviar RDO, Aprovar...) */ .ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:0 14px;border:0;border-radius:7px; background:var(--green);color:var(--ink);font:600 .8125rem/1 var(--f-d);cursor:pointer;white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12);transition:background-color .18s var(--ease),transform .18s var(--ease)} .ui-btn:hover{background:var(--green-hi)} .ui-btn:active{transform:translateY(.5px)} .ui-btn--ghost{background:var(--ui-sub);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2l)} .ui-btn--ghost:hover{background:#e4e9e1} .ui-btn--texto{background:none;box-shadow:none;color:var(--ink-2);padding:0 8px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(83,87,91,.4)} .ui-btn--texto:hover{background:none;color:var(--ink)} .ui-btn[disabled],.ui-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed} /* rodapé do painel (nota de simulação dentro da réplica) */ .ui-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px;background:var(--ui-bg);box-shadow:0 -1px 0 var(--hair-1l)} .ui-check{width:12px;height:12px;flex:none;color:var(--green-ink)} /* --------------------------------------------------------------------- 9. Dígitos rolando (Obrify.rollDigits) --------------------------------------------------------------------- */ .odo{white-space:nowrap} .odo__vis{--oh:1.2em;display:inline-flex;height:var(--oh);line-height:var(--oh);overflow:hidden;margin:-.1em 0;vertical-align:baseline} .odo__c{display:block;height:var(--oh)} .odo__d{display:block;height:var(--oh);overflow:hidden} .odo__s{display:flex;flex-direction:column;transition:transform .8s var(--ease)} .odo__s > span{display:block;height:var(--oh);line-height:var(--oh)} /* --------------------------------------------------------------------- 10. Header (transparente no Térreo, grafite sólido ao rolar) --------------------------------------------------------------------- */ .hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr); transition:translate .5s var(--ease-ui),background-color .4s var(--ease),box-shadow .4s var(--ease)} .hdr::before{content:"";position:absolute;inset:0 0 -40px;background:linear-gradient(rgba(14,15,14,.55),rgba(14,15,14,0));pointer-events:none;transition:opacity .4s var(--ease)} .hdr[data-solid="true"],.hdr[data-open]{background:rgba(31,30,30,.97);box-shadow:0 1px 0 var(--hair-2)} .hdr[data-solid="true"]::before,.hdr[data-open]::before{opacity:0} .hdr__in{position:relative;height:100%;display:flex;align-items:center;gap:clamp(28px,3.9vw,56px)} .hdr__logo{display:block;flex:none;border-radius:4px} .hdr__logo img{width:112px;height:auto} .hdr__nav{display:flex;gap:clamp(20px,2.2vw,32px)} .hdr__nav a,.hdr__login{position:relative;font:500 .9375rem/1 var(--f-d);color:rgba(236,240,232,.82);text-decoration:none;padding:10px 0;transition:color .18s var(--ease)} .hdr__nav a:hover,.hdr__login:hover,.hdr__nav a[aria-current]{color:#fff} .hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} .hdr__nav a[aria-current]::after{transform:none} .hdr__act{margin-left:auto;display:flex;align-items:center;gap:24px} .hdr__menu{display:none} /* menu do celular */ .menu{position:fixed;inset:var(--hdr) 0 0;z-index:49;background:rgba(21,21,21,.985);overflow-y:auto;overscroll-behavior:contain} .menu__in{display:flex;flex-direction:column;padding:16px 0 calc(32px + env(safe-area-inset-bottom))} .menu__in > a{display:flex;align-items:baseline;gap:16px;padding:18px 0;box-shadow:0 1px 0 var(--hair-2);font:500 1.75rem/1.1 var(--f-d);letter-spacing:-.02em;text-decoration:none;color:var(--on)} .menu__n{flex:none;min-width:4.4em;font:600 .75rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--green)} .menu__act{display:flex;flex-direction:column;gap:12px;margin-top:32px} .menu__act .btn{width:100%} @media (prefers-reduced-motion:no-preference){ .menu:not([hidden]) .menu__in > *{animation:menu-in .5s var(--ease) both} .menu:not([hidden]) .menu__in > :nth-child(2){animation-delay:.04s} .menu:not([hidden]) .menu__in > :nth-child(3){animation-delay:.08s} .menu:not([hidden]) .menu__in > :nth-child(4){animation-delay:.12s} .menu:not([hidden]) .menu__in > :nth-child(5){animation-delay:.16s} } @keyframes menu-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (max-width:960px){ .hdr__nav,.hdr__login{display:none} .hdr__menu{display:inline-grid;place-content:center;gap:6px;width:44px;height:44px;margin-right:-10px;background:none;border:0;border-radius:8px} .hdr__menu span{display:block;width:20px;height:1.5px;background:var(--on);transition:transform .3s var(--ease)} .hdr__menu[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)} .hdr__menu[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)} .hdr__act{gap:12px} } @media (min-width:961px){ .menu{display:none!important} } @media (max-width:760px){ .hdr__logo img{width:94px} .hdr .btn--sm{--h:36px;padding:0 12px 0 14px;font-size:.875rem} .hdr .btn__full{display:none} .hdr .btn__short{display:inline} } /* --------------------------------------------------------------------- 11. Corte da obra (navegação + avanço da visita) e Diário da visita Padrão: folha inferior (celular e tablet). Desktop: corte fixo à direita. --------------------------------------------------------------------- */ .corte{color:var(--on)} .corte__titulo{font:600 1rem/1.2 var(--f-d);letter-spacing:-.005em;color:#fff} .corte__k{font:600 .75rem/1.15 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--on-2)} .corte__pct{font:600 1.5rem/1 var(--f-d);letter-spacing:-.01em;color:#fff} .corte__flag{display:none} .corte__barra{display:block;height:4px;border-radius:2px;background:rgba(236,240,232,.10);overflow:hidden} .corte__barra > i{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(var(--p,0))} .corte__pavs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse} .pav{position:relative;display:grid;align-items:center;text-decoration:none;color:var(--on-2)} /* cada pavimento: paredes + laje no topo. Planejado = linha tracejada (projeção, como na prancha); executado = cheio em grafite claro; em execução = verde com hachura */ .pav__laje{position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden; font:600 .5625rem/1 var(--f-l);letter-spacing:.06em;color:rgba(236,240,232,.64); border:1px dashed rgba(236,240,232,.36);border-bottom:0; transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)} .pav__laje::before{content:"";position:absolute;z-index:-1;inset:0 -12px 0 0;opacity:0; background:linear-gradient(135deg,transparent 0 25%,rgba(42,41,41,.16) 25% 37.5%,transparent 37.5% 75%,rgba(42,41,41,.16) 75% 87.5%,transparent 87.5%) 0 0/6px 6px} .corte__pavs > li:last-child .pav__laje{margin-inline:5px} .pav[data-estado="feito"] .pav__laje{background:rgba(236,240,232,.18);border-style:solid;border-color:rgba(236,240,232,.40);border-top:2px solid rgba(236,240,232,.62);color:rgba(236,240,232,.94)} .pav[data-estado="atual"] .pav__laje{background:var(--green);border-style:solid;border-color:var(--green);border-top:2px solid var(--green);color:var(--ink)} .pav[data-estado="atual"] .pav__laje::before{opacity:1} .pav[data-estado="atual"].is-exec .pav__laje::before{animation:hachura 1.2s linear 3} @keyframes hachura{to{transform:translateX(-12px)}} .pav:hover .pav__laje{background-color:rgba(236,240,232,.08);border-color:rgba(236,240,232,.72)} .pav[data-estado="feito"]:hover .pav__laje{background-color:rgba(236,240,232,.28)} .pav[data-estado="atual"]:hover .pav__laje{background-color:var(--green-hi);border-color:var(--green-hi)} .pav__nome{font:500 .9375rem/1.2 var(--f-d);color:var(--on)} .pav__st{font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-3)} .pav[data-estado="atual"] .pav__st{color:var(--green)} .corte__simbolo{display:grid;place-items:end center} .corte__simbolo svg{width:24px;height:auto;overflow:visible} .corte__simbolo path{fill:var(--green);opacity:0;transform:translateY(-7px);transition:opacity .5s var(--ease),transform .7s var(--ease)} .corte[data-concluida] .corte__simbolo path{opacity:1;transform:none} .corte[data-concluida] .corte__simbolo .sb-2{transition-delay:.1s} .corte[data-concluida] .corte__simbolo .sb-1{transition-delay:.2s} .corte__terreno{display:block;height:7px;border-top:1px solid rgba(236,240,232,.45); background:repeating-linear-gradient(-45deg,rgba(236,240,232,.28) 0 1px,transparent 1px 4px)} /* diário da visita */ .diario__btn{appearance:none;border:0;background:none;color:var(--on)} .diario__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px} .diario__h > span:first-child{font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--on-2)} .diario__total{font:600 .8125rem/1.2 var(--f-d);color:#fff} .diario__lista{list-style:none;margin:0;padding:0;display:grid} .diario__lista li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:2px 8px;padding:8px 0;box-shadow:0 -1px 0 var(--hair-2)} .diario__lista li:first-child{box-shadow:none} .diario__lista time{grid-row:span 2;font:600 .8125rem/1.35 var(--f-d);color:var(--on-2);font-variant-numeric:tabular-nums} .diario__sec{font:600 .6875rem/1.3 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--green)} .diario__txt{font:400 .8125rem/1.4 var(--f-t);color:var(--on)} .diario__lista li.is-novo{animation:diario-novo 1.6s var(--ease) both} @keyframes diario-novo{from{background:rgba(91,187,91,.14)}to{background:transparent}} .diario__vazio{font:400 .8125rem/1.45 var(--f-t);color:var(--on-2)} .diario__nota{margin-top:12px;font:400 .75rem/1.4 var(--f-t);color:var(--on-3)} /* aviso do último registro: no desktop é o "canhoto" do diário (seção 11, desktop); no celular e tablet, a pílula troca o texto (.corte-pill.is-reg). Nunca cobre conteúdo. */ .diario-flash{display:none} /* ---- celular e tablet: pílula + folha inferior ---- */ .corte-pill{position:fixed;z-index:45;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom)); display:inline-flex;align-items:center;gap:10px;height:44px;max-width:calc(100vw - 24px);padding:0 16px 0 12px;border:0;border-radius:999px; background:rgba(25,25,24,.95);color:var(--on);cursor:pointer; box-shadow:inset 0 0 0 1px rgba(236,240,232,.14),0 0 0 1px rgba(0,0,0,.35),0 10px 24px -8px rgba(0,0,0,.55); transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear 0s} .corte-pill.is-oculta{opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none; transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .45s} html:not(.js) .corte-pill{display:none!important} .corte-pill__mini{display:flex;flex-direction:column-reverse;gap:1px;flex:none;width:12px} .corte-pill__mini i{display:block;height:2px;border-radius:1px;box-shadow:inset 0 0 0 1px rgba(236,240,232,.30)} .corte-pill__mini i.feito{background:rgba(236,240,232,.55);box-shadow:none} .corte-pill__mini i.atual{background:var(--green);box-shadow:none} /* texto da pílula: estado normal e "Registrado · " empilhados na mesma célula (sem pulo de largura) */ .corte-pill__vis{display:grid;min-width:0} .corte-pill__vis > *{grid-area:1/1;transition:opacity .3s var(--ease),translate .45s var(--ease)} .corte-pill__txt,.corte-pill__reg{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap;font:500 .875rem/1 var(--f-d)} .corte-pill__reg{align-items:center;opacity:0;translate:0 6px;color:var(--green)} .corte-pill__reg > span:first-of-type{font:600 .75rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase} .corte-pill__reg .corte-pill__nome{color:var(--on)} .corte-pill__ok{width:12px;height:12px;flex:none;align-self:center} .corte-pill.is-reg .corte-pill__txt{opacity:0;translate:0 -6px} .corte-pill.is-reg .corte-pill__reg{opacity:1;translate:none} .corte-pill.is-reg .corte-pill__mini i.atual{background:var(--green-soft)} .corte-pill__cod{font:600 .75rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--green)} .corte-pill__nome{min-width:0;overflow:hidden;text-overflow:ellipsis} .corte-pill__sep{color:var(--on-3)} .corte-pill__pct{color:var(--on-2)} .corte-scrim{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.6);opacity:0;transition:opacity .35s var(--ease)} .corte-scrim.is-open{opacity:1} @media (max-width:1099.98px), (max-height:599.98px){ .corte{position:fixed;z-index:61;left:0;right:0;bottom:0;max-height:min(90svh,720px);overflow-y:auto;overscroll-behavior:contain; padding:6px 20px calc(20px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:#1b1b1a; box-shadow:inset 0 1px 0 rgba(236,240,232,.12),0 -20px 60px -20px rgba(0,0,0,.7); transform:translateY(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s} .corte.is-open{transform:none;visibility:visible;transition:transform .45s var(--ease)} .corte__head{position:sticky;top:-6px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -20px;padding:12px 20px 10px;background:#1b1b1a} .corte__fechar{display:inline-flex;align-items:center;gap:8px;height:44px;margin-right:-8px;padding:0 8px 0 12px;border:0;border-radius:8px;background:none; font:600 .875rem/1 var(--f-d);color:var(--on)} .corte__fechar svg{width:16px;height:16px} .corte__avanco{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:4px} .corte__barra{margin:10px 0 18px} .corte__nav{display:grid;grid-template-columns:56px minmax(0,1fr)} .corte__simbolo{grid-column:1;height:26px;padding-bottom:3px} .corte__pavs{grid-column:1 / -1} .pav{grid-template-columns:56px minmax(0,1fr) auto;column-gap:14px;min-height:40px} .pav::after{content:"";position:absolute;left:56px;right:0;top:0;height:1px;background:rgba(236,240,232,.06)} .pav__laje{align-self:stretch;min-height:40px;font-size:.6875rem} .pav:focus-visible{outline-offset:-2px;border-radius:4px} .corte__terreno{grid-column:1;margin:0 -6px} .diario{margin-top:22px;padding-top:16px;box-shadow:0 -1px 0 var(--hair-2)} .diario__btn{display:none} .corte-pill{display:inline-flex} } @media (min-width:600px) and (max-width:1099.98px), (min-width:600px) and (max-height:599.98px){ .corte{left:auto;right:16px;bottom:16px;width:400px;border-radius:16px;max-height:min(86svh,720px)} } /* ---- desktop: corte fixo à direita, 56px recolhido ---- */ @media (min-width:1100px) and (min-height:600px){ .corte-pill,.corte-scrim,.corte__head,.corte__barra,.pav__st{display:none!important} .corte{position:fixed;z-index:40;top:50%;right:var(--corte-right);width:var(--corte-w);translate:0 -50%;padding:10px 0 0;border-radius:10px;background:var(--corte-bg); box-shadow:inset 0 0 0 1px rgba(236,240,232,.10),0 0 0 1px rgba(0,0,0,.35),0 12px 32px -14px rgba(0,0,0,.6)} .corte__avanco{position:relative;display:grid;justify-items:center;gap:4px;padding:0 4px 10px;text-align:center} .corte__k{font-size:.5625rem;line-height:1.15;letter-spacing:.08em} .corte__k2{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} .corte__pct{font-size:.9375rem} .corte__nav{padding:0 8px} .corte__simbolo{height:24px;padding-bottom:3px} .pav{height:24px} .pav__laje{height:24px} .pav__nome,.corte__flag{position:absolute;top:50%;right:calc(100% + 26px);z-index:3;display:block;padding:7px 10px;border-radius:6px;white-space:nowrap; background:var(--corte-bg);box-shadow:inset 0 0 0 1px rgba(236,240,232,.12),0 0 0 1px rgba(0,0,0,.35),0 8px 20px -10px rgba(0,0,0,.6); font:500 .8125rem/1 var(--f-d);color:#fff;opacity:0;transform:translate(6px,-50%);pointer-events:none;transition:opacity .2s var(--ease),transform .35s var(--ease)} /* linha de chamada até o pavimento, como numa prancha */ .pav__nome::after,.corte__flag::after{content:"";position:absolute;left:100%;top:50%;width:18px;height:1px;background:rgba(236,240,232,.45)} .pav:hover .pav__nome,.pav:focus-visible .pav__nome,.corte__avanco:hover .corte__flag{opacity:1;transform:translate(0,-50%)} .pav:focus-visible{outline-offset:2px;border-radius:2px} .corte__flag{right:calc(100% + 18px)} .corte__flag b{font-weight:600;color:var(--green);margin-left:6px} .corte__terreno{margin:0 -4px} .diario{position:relative;margin-top:10px;box-shadow:0 -1px 0 var(--hair-2)} .diario__btn{display:grid;justify-items:center;align-content:center;gap:4px;width:100%;height:48px;padding:0;border-radius:0 0 10px 10px;transition:background-color .2s var(--ease)} .diario__btn:hover,.diario__btn[aria-expanded="true"]{background:rgba(236,240,232,.06)} .diario__btn:focus-visible{outline-offset:-2px;border-radius:0 0 10px 10px} .diario__k{font:600 .5625rem/1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--on-2)} .diario__n{font:600 .9375rem/1 var(--f-d);color:#fff;transition:color .3s var(--ease)} .diario__btn.is-pulso .diario__n{color:var(--green)} .diario__pop{position:absolute;right:calc(100% + 12px);bottom:0;width:330px;max-height:min(520px,calc(50vh + 80px));overflow-y:auto;padding:14px 16px 14px;border-radius:10px; background:var(--corte-bg);box-shadow:inset 0 0 0 1px rgba(236,240,232,.12),0 0 0 1px rgba(0,0,0,.35),0 18px 40px -16px rgba(0,0,0,.7)} /* marca no pavimento onde a ação aconteceu (2,5s) */ .pav__laje::after{content:"";position:absolute;top:50%;right:4px;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--green); box-shadow:0 0 0 2px var(--corte-bg);opacity:0;scale:.4;transition:opacity .3s var(--ease),scale .45s var(--ease)} .pav[data-estado="atual"] .pav__laje::after{background:var(--ink);box-shadow:0 0 0 2px var(--green)} .pav.is-reg .pav__laje::after{opacity:1;scale:1} /* canhoto do diário: tira estreita destacada logo abaixo do corte, na coluna dele (fora do container). Mesma placa do corte; picote no topo; hora, pavimento e o registro. Não recebe ponteiro. */ .diario-flash{position:fixed;z-index:39;top:var(--flash-y,72%);right:calc(var(--corte-right) - 10px);width:calc(var(--corte-w) + 20px); display:grid;gap:4px;margin:0;padding:10px 7px 9px;border-radius:3px 3px 8px 8px;pointer-events:none;background:var(--corte-bg);color:var(--on); box-shadow:inset 0 0 0 1px rgba(236,240,232,.10),0 0 0 1px rgba(0,0,0,.35),0 12px 28px -14px rgba(0,0,0,.6); opacity:0;visibility:hidden;translate:0 -8px;clip-path:inset(0 0 100% 0); transition:opacity .3s var(--ease),translate .5s var(--ease),clip-path .5s var(--ease),visibility 0s linear .5s} .diario-flash.is-acima{translate:0 8px;clip-path:inset(100% 0 0 0);border-radius:8px 8px 3px 3px} .diario-flash.is-on{opacity:1;visibility:visible;translate:none;clip-path:inset(0);transition:opacity .3s var(--ease),translate .5s var(--ease),clip-path .5s var(--ease),visibility 0s} .diario-flash::before{content:"";position:absolute;left:6px;right:6px;top:3px;height:1px; background:repeating-linear-gradient(90deg,rgba(236,240,232,.34) 0 3px,transparent 3px 6px)} .diario-flash.is-acima::before{top:auto;bottom:3px} .diario-flash time{font:600 .8125rem/1 var(--f-d);color:#fff} .diario-flash b{font:600 .625rem/1.15 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--green)} .diario-flash span{font:600 .6875rem/1.25 var(--f-l);letter-spacing:.01em;color:var(--on-2);overflow-wrap:break-word; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} } /* --------------------------------------------------------------------- 12. Footer --------------------------------------------------------------------- */ .rodape{position:relative;background:var(--g0);color:var(--on-2);padding:clamp(40px,7svh,64px) 0 calc(24px + var(--pill-reserva));font:400 .875rem/1.5 var(--f-t)} .rodape::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-top:1px solid var(--hair-3); background:repeating-linear-gradient(-45deg,rgba(236,240,232,.07) 0 1px,transparent 1px 5px)} .rodape__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.7fr);gap:32px clamp(32px,5vw,72px);align-items:start} .rodape__marca img{width:112px;height:auto} .rodape__assin{margin-top:18px;max-width:40ch;font:500 1.0625rem/1.35 var(--f-d);letter-spacing:-.005em;color:#fff} .rodape__assin span{display:block;color:var(--on-2)} .rodape__k{margin-bottom:14px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--on-3)} .rodape__pavs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:0 24px} .rodape__pavs a,.rodape__links a{display:inline-flex;align-items:baseline;gap:10px;min-height:32px;padding:5px 0;color:var(--on);text-decoration:none;transition:color .18s var(--ease)} .rodape__pavs a:hover,.rodape__links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .rodape__pavs .num{min-width:2.4em;font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--green)} .rodape__links{list-style:none;display:grid} .rodape__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(32px,6svh,56px);padding-top:18px;box-shadow:0 -1px 0 var(--hair-2);font:400 .8125rem/1.5 var(--f-t);color:var(--on-3)} @media (max-width:900px){ .rodape__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .rodape__marca{grid-column:1 / -1} } @media (max-width:560px){ .rodape__in{grid-template-columns:minmax(0,1fr)} .rodape__pavs{gap:0 16px} } /* --------------------------------------------------------------------- 13. Loader (motor: some no load, no máximo 1,2s) --------------------------------------------------------------------- */ .loader-simbolo{width:52px;height:auto} .loader-simbolo path{fill:var(--green)} @media (prefers-reduced-motion:no-preference){ .loader-simbolo path{animation:assenta .6s var(--ease) both} .loader-simbolo .sb-2{animation-delay:.12s} .loader-simbolo .sb-1{animation-delay:.24s} } @keyframes assenta{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} /* --------------------------------------------------------------------- 14. Entrada dos pavimentos: data-reveal="mask" vira "laje concretada" (sobe 24px, clip-path inset(100% 0 0 0) para inset(0) e fade, 0,9s) Mais específico que o motion.css, que vem depois. --------------------------------------------------------------------- */ @media (prefers-reduced-motion:no-preference){ html[data-motion] body [data-reveal="mask"]:not([data-in]){opacity:0;translate:0 24px;filter:none;clip-path:inset(100% 0 0 0)} html[data-motion] body [data-reveal="mask"][data-in="run"]{clip-path:inset(0 0 0 0); transition:clip-path .9s var(--ease) var(--rv-d,0ms),translate .9s var(--ease) var(--rv-d,0ms),opacity .9s var(--ease) var(--rv-d,0ms)} } /* --------------------------------------------------------------------- 15. Seção ainda sem arquivo (placeholder do build): ocupa uma tela --------------------------------------------------------------------- */ main > section:empty{min-height:100svh;display:grid;place-items:center;box-shadow:inset 0 -1px 0 var(--hair-2)} main > section:empty::before{content:"#" attr(id) " · pavimento em obra";font:600 .75rem/1 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--on-3)} /* --------------------------------------------------------------------- 16. Movimento reduzido: estados finais, interações seguem funcionando --------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important; transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important} } /* ---------- Aviso de cookies (informativo; sempre à esquerda) ---------- */ .cookie{position:fixed;z-index:55;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom)); width:min(380px,calc(100vw - 24px - 64px));display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;border-radius:10px; background:var(--g2);color:var(--on);box-shadow:0 0 0 1px rgba(236,240,232,.10),0 12px 32px -12px rgba(0,0,0,.6)} .cookie[hidden]{display:none} .cookie__txt{margin:0;font:400 .8125rem/1.45 var(--f-t);color:var(--fg-2)} .cookie__txt a{color:inherit;text-decoration:underline;text-underline-offset:2px} .cookie__ok{flex:none} @media (max-width:420px){.cookie{flex-direction:column;align-items:stretch;gap:10px}} /* ---------- Ritmo vertical padronizado (grid padrão BuildV), institucional e LPs ---------- O v3 nasceu com "cada pavimento ocupa uma tela e centraliza o conteúdo", o que deixava o respiro entre seções variando de ~70px a ~600px conforme a quantidade de conteúdo. Com [data-ritmo] no body, a seção mede o próprio conteúdo e todas têm o mesmo respiro em cima e embaixo. Ficam em tela cheia só o hero (Térreo) e a cena travada (#fragmentos, que não é .secao). --secao-util é recalculado porque as telas internas dimensionam a figura por ele. */ [data-ritmo]{--secao-ritmo:clamp(56px,9vw,120px)} [data-ritmo] main > .secao:not([data-pav="T"]){ --secao-pt:var(--secao-ritmo);--secao-pb:var(--secao-ritmo); --secao-util:calc(100svh - var(--hdr) - 2 * var(--secao-ritmo)); min-height:0;justify-content:flex-start} /* cena travada: mesmo respiro; travada (desktop) ela segue presa em 100vh, sem trava vira seção comum */ [data-ritmo] #fragmentos,[data-ritmo] #inv-painel{ --secao-pt:var(--secao-ritmo);--secao-pb:var(--secao-ritmo); --secao-util:calc(100svh - 2 * var(--secao-ritmo))} /* presa em 100vh: o respiro de 120px já livra o header */ [data-ritmo] #fragmentos > .secao,[data-ritmo] #inv-painel > .secao{min-height:0;justify-content:flex-start} @media (min-width:900px) and (min-height:560px) and (prefers-reduced-motion:no-preference){ html.js[data-motion] [data-ritmo] #fragmentos > .secao,html.js [data-ritmo] #fragmentos > .secao{justify-content:center} } /* widget do CRM BuildV: o launcher (64px) fica no canto inferior direito; a pílula do corte vai para a esquerda dele */ html[data-widget-crm] .corte-pill{right:calc(max(12px,env(safe-area-inset-right)) + 76px)} /* ---- sections/canteiro.css ---- */ /* ===================================================================== OBRIFY v3 · Térreo · #canteiro (hero) Foto graduada da equipe na laje, varredura que acende 3 marcadores rastreados presos a pontos reais da foto, e o painel vivo da obra. Tudo escopado em #canteiro. Kit compartilhado: base.css. ===================================================================== */ #canteiro{ --bg:var(--g0); --painel-w:clamp(400px,32vw,468px); --col-gap:clamp(40px,4.4vw,72px); --leg-h:34px; /* espaço da legenda FIG. 01 sob o painel */ /* foto: caixa com a proporção da imagem ("cover" fixo), mesma caixa para foto e marcadores */ --fw:max(112%,172svh); --fx:.6; --fy:-90%; --fr:1600 / 1067; overflow:clip; } /* ---------- camadas (ordem: foto 0, véu 1, varredura 1, texto/painel 2, marcadores 3, fio 4) ---------- */ #canteiro .canteiro__quadro{position:absolute;z-index:0;width:var(--fw);aspect-ratio:var(--fr); left:calc((100% - var(--fw)) * var(--fx));top:100%;transform:translateY(var(--fy))} #canteiro .canteiro__foto{background:var(--g0)} #canteiro .canteiro__foto{--grao:.06} #canteiro .canteiro__alvos{z-index:3;background:none;pointer-events:none} #canteiro .canteiro__veu{position:absolute;inset:0;z-index:1;pointer-events:none;background: linear-gradient(180deg,rgba(14,15,14,.62) 0,rgba(14,15,14,0) 190px), linear-gradient(0deg,rgba(14,15,14,.66) 0,rgba(14,15,14,0) 26%), linear-gradient(90deg,rgba(14,15,14,.42) 0%,rgba(14,15,14,.20) 46%,rgba(14,15,14,0) 60%,rgba(14,15,14,.16) 100%)} /* ---------- varredura (1,2s na carga) ---------- */ #canteiro .canteiro__varredura{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .45s var(--ease)} #canteiro.is-varrendo .canteiro__varredura{opacity:1;transition:none} #canteiro .canteiro__varredura i{position:absolute;top:0;bottom:0;left:0;width:180px;will-change:transform;transform:translate3d(-200px,0,0); background:linear-gradient(90deg,rgba(91,187,91,0) 0,rgba(91,187,91,.07) 100%);box-shadow:inset -1px 0 0 rgba(143,214,143,.9)} #canteiro .canteiro__varredura i::after{content:"";position:absolute;top:0;bottom:0;right:1px;width:7px; background:repeating-linear-gradient(180deg,rgba(143,214,143,.55) 0 1px,transparent 1px 24px)} /* ---------- grade: texto à esquerda, painel à direita, mesmo eixo horizontal ---------- */ #canteiro .canteiro__grade{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--painel-w);grid-template-rows:minmax(0,1fr) auto; column-gap:var(--col-gap);align-items:center} #canteiro .canteiro__faixa{display:contents} #canteiro .canteiro__texto{position:relative;z-index:2;grid-column:1;grid-row:1;container-type:inline-size;padding-bottom:var(--leg-h)} #canteiro .canteiro__fig{position:relative;z-index:2;grid-column:2;grid-row:1;margin-bottom:var(--leg-h)} #canteiro .canteiro__fig00{position:relative;z-index:2;grid-column:1 / -1;grid-row:2;margin:0;padding-top:12px;box-shadow:0 -1px 0 var(--hair-2)} /* véu local, só onde há texto (no mínimo .70 sob o texto), com a forma do texto: largo atrás do rótulo e do h1, estreito atrás do apoio e do botão; a equipe fica clara */ #canteiro .canteiro__topo,#canteiro .canteiro__base{position:relative;z-index:0} #canteiro .canteiro__base{width:fit-content;max-width:100%} #canteiro .canteiro__topo::before,#canteiro .canteiro__base::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-100vw} #canteiro .canteiro__topo::before{right:-190px;top:-48%;bottom:-16%; background:linear-gradient(90deg,rgba(14,15,14,.78) 0,rgba(14,15,14,.74) calc(100% - 170px),rgba(14,15,14,.36) calc(100% - 90px),rgba(14,15,14,0) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 84%,transparent 100%)} #canteiro .canteiro__base::before{right:-240px;top:-22px;bottom:-34%; background:linear-gradient(90deg,rgba(14,15,14,.78) 0,rgba(14,15,14,.74) calc(100% - 220px),rgba(14,15,14,.42) calc(100% - 150px),rgba(14,15,14,.14) calc(100% - 70px),rgba(14,15,14,0) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 72%,transparent 100%)} /* ---------- texto ---------- */ #canteiro .canteiro__meta{margin-bottom:clamp(16px,3svh,30px)} #canteiro .canteiro__h1{font-size:min(var(--h1),14.2cqi);line-height:.98;letter-spacing:-.032em;color:#fff;margin-bottom:clamp(18px,3.1svh,34px)} #canteiro .canteiro__apoio{max-width:31ch;font:500 calc(clamp(1.125rem,.9rem + .6vw,1.5rem) * (.5 + var(--type-h-scale,1) / 2))/1.32 var(--f-d);letter-spacing:-.012em;color:var(--on-2);text-wrap:pretty} #canteiro .canteiro__apoio-a{display:block;color:#fff} #canteiro .canteiro__cta{margin-top:clamp(22px,3.8svh,40px)} /* ---------- painel (FIG. 01) ---------- */ #canteiro .canteiro__moldura{--cantos-off:12px} #canteiro .canteiro__fig01{position:absolute;left:0;top:calc(100% + 16px);margin:0;isolation:isolate;white-space:nowrap} /* fundo local da legenda sobre a laje clara (contraste AA) */ #canteiro .canteiro__fig01::before{content:"";position:absolute;z-index:-1;inset:-10px -28px;pointer-events:none; background:linear-gradient(90deg,rgba(14,15,14,0) 0,rgba(14,15,14,.8) 28px,rgba(14,15,14,.8) calc(100% - 28px),rgba(14,15,14,0) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%)} #canteiro .canteiro__fig00 .fig__n,#canteiro .canteiro__fig01 .fig__n{color:#fff} #canteiro .canteiro-app .ui-head{padding:11px 14px} #canteiro .canteiro-app .ui-head .chip{gap:6px} #canteiro .canteiro-app .ui-tabs{padding:0 8px} #canteiro .canteiro-tab__novo{display:none;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--green);vertical-align:2px} #canteiro .ui-tab.tem-novo .canteiro-tab__novo{display:inline-block} /* painéis empilhados na mesma célula: a altura do painel não muda ao trocar de aba */ #canteiro .canteiro-pnls{display:grid} #canteiro .canteiro-pnls > .canteiro-pn{grid-area:1 / 1;display:flex;flex-direction:column;gap:8px;min-width:0;padding-bottom:8px} #canteiro .canteiro-pnls > [role="tabpanel"][hidden]{display:flex!important;visibility:hidden} #canteiro .canteiro-pn > :last-child{flex:1 1 auto} #canteiro .canteiro-pn:not([hidden]){animation:canteiro-pn .4s var(--ease) both} @keyframes canteiro-pn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* aba Painel */ #canteiro .canteiro-app .ui-kpi{gap:7px;padding:13px 14px 14px} #canteiro .canteiro-app .ui-kpi__v{font-size:1.625rem} #canteiro .canteiro-app .ui-kpi[data-liga="avanco"] .ui-kpi__v{font-size:1.75rem} #canteiro .canteiro-bar--prazo > i{background:#6c717f} #canteiro .canteiro-kpi__nota{font:500 .6875rem/1 var(--f-d);color:var(--ink-2);margin-top:-1px} #canteiro .canteiro-app .ui-row{min-height:31px;padding-inline:2px;margin-inline:-2px;transition:background-color .5s var(--ease),box-shadow .3s var(--ease)} #canteiro .canteiro-sep{margin:0 6px;color:var(--ink-2)} /* destaque do alvo ligado ao marcador e dos valores que acabaram de mudar */ #canteiro [data-liga]{transition:background-color .4s var(--ease),box-shadow .4s var(--ease)} #canteiro [data-liga].is-ligado{background-color:rgba(91,187,91,.11);box-shadow:inset 2px 0 0 var(--green)} #canteiro .ui-row.is-ligado{box-shadow:inset 2px 0 0 var(--green),0 1px 0 var(--hair-1l)} #canteiro .ui-tab.is-ligado{color:var(--ink);background:rgba(91,187,91,.11)} #canteiro .is-quente{background-color:rgba(91,187,91,.14)!important} /* aba Cronograma */ #canteiro .canteiro-gantt .ui-sec__h{margin-bottom:6px} #canteiro .g-row{display:grid;grid-template-columns:28px minmax(0,1fr) 47%;align-items:center;column-gap:6px;height:28px;box-shadow:0 1px 0 var(--hair-1l)} #canteiro .canteiro-gantt__lista{list-style:none;margin:0;padding:0;display:grid} #canteiro .canteiro-gantt__lista .g-row:last-child{box-shadow:none} #canteiro .canteiro-gantt__eixo{height:20px;box-shadow:0 1px 0 var(--hair-2l)} #canteiro .canteiro-gantt__eixo .g-trilho{background:none} #canteiro .canteiro-gantt__eixo .g-trilho > span{position:absolute;top:50%;left:calc(var(--d) / 28 * 100%);transform:translateY(-50%);padding-left:3px; font:600 .625rem/1 var(--f-d);color:var(--ink-2);white-space:nowrap} #canteiro .g-n{font:600 .6875rem/1 var(--f-d);color:var(--ink-2)} #canteiro .g-t{font:400 .75rem/1.2 var(--f-t);color:#3d4043;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #canteiro .canteiro-gantt__eixo .g-t{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #canteiro .g-row--etapa .g-n,#canteiro .g-row--etapa .g-t{font-weight:700;color:var(--ink)} #canteiro .g-row--atraso .g-n,#canteiro .g-row--atraso .g-t{color:var(--red-ink)} #canteiro .g-trilho{position:relative;align-self:stretch; background: linear-gradient(var(--hair-2l),var(--hair-2l)) calc(2 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(var(--hair-2l),var(--hair-2l)) calc(9 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(var(--hair-2l),var(--hair-2l)) calc(16 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(rgba(42,41,41,.2),rgba(42,41,41,.2)) calc(22 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(var(--hair-2l),var(--hair-2l)) calc(23 / 28 * 100%) 0/1px 100% no-repeat} #canteiro .g-b{position:absolute;top:50%;height:10px;margin-top:-5px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);border-radius:3px; transform-origin:left center;transition:transform .9s var(--ease)} #canteiro .g-b.is-antes{border-top-left-radius:0;border-bottom-left-radius:0} #canteiro .g-b.is-depois{border-top-right-radius:0;border-bottom-right-radius:0} #canteiro .g-b--etapa{background:#6c717f;height:8px;margin-top:-4px} #canteiro .g-b--ok{background:var(--green)} #canteiro .g-b--atraso{background:var(--red)} #canteiro .g-b--ativ{background:#c6c0c2} #canteiro .canteiro-gantt.is-crescer .g-b{transform:scaleX(0);transition:none} #canteiro .canteiro-gantt__leg,#canteiro .canteiro-pilha__leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font:500 .6875rem/1.2 var(--f-d);color:var(--ink-2)} #canteiro .lg{display:inline-flex;align-items:center;gap:6px} #canteiro .lg::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor} #canteiro .lg--etapa::before{background:#6c717f} #canteiro .lg--ok::before{background:var(--green)} #canteiro .lg--atraso::before{background:var(--red)} #canteiro .lg--ativ::before{background:#c6c0c2} #canteiro .lg--ni::before{background:#797f8a} #canteiro .lg b{font-weight:600;color:var(--ink)} #canteiro .canteiro-pilha{display:flex;gap:2px;height:8px;margin:2px 0 0;border-radius:4px;overflow:hidden} #canteiro .canteiro-pilha i{flex:var(--n) 1 0;background:#797f8a} #canteiro .canteiro-pilha .p-atraso{background:var(--red)} #canteiro .canteiro-pilha .p-ok{background:var(--green)} /* aba RDO do dia */ #canteiro .canteiro-rdo .ui-sec__h{margin-bottom:4px} #canteiro .canteiro-rdo__st{transition:background-color .4s var(--ease),color .4s var(--ease)} #canteiro .canteiro-rdo__conta{margin:0 0 4px;font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #canteiro .canteiro-rdo__conta b{font:600 .75rem/1.3 var(--f-d);color:var(--ink)} #canteiro .canteiro-rdo__lista{list-style:none;margin:0;padding:0;display:grid} #canteiro .canteiro-chk{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:30px; box-shadow:0 1px 0 var(--hair-1l);cursor:pointer} #canteiro .canteiro-rdo__lista li:last-child .canteiro-chk{box-shadow:none} #canteiro .canteiro-chk input{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:inherit} #canteiro .canteiro-chk__box{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#fff; box-shadow:inset 0 0 0 1.5px rgba(42,41,41,.34);color:var(--ink);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)} #canteiro .canteiro-chk__box svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .3s var(--ease)} #canteiro .canteiro-chk input:checked + .canteiro-chk__box{background:var(--green);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} #canteiro .canteiro-chk input:checked + .canteiro-chk__box svg{opacity:1;transform:none} #canteiro .canteiro-chk input:focus-visible + .canteiro-chk__box{outline:2px solid var(--green-ink);outline-offset:2px} #canteiro .canteiro-chk:hover .canteiro-chk__box{box-shadow:inset 0 0 0 1.5px rgba(42,41,41,.6)} #canteiro .canteiro-chk:hover input:checked + .canteiro-chk__box{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} #canteiro .canteiro-chk__t{font:600 .8125rem/1.2 var(--f-d);color:var(--ink)} #canteiro .canteiro-chk__st{font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #canteiro .canteiro-chk__st::after{content:"A conferir"} #canteiro .canteiro-chk input:checked ~ .canteiro-chk__st{color:var(--green-ink)} #canteiro .canteiro-chk input:checked ~ .canteiro-chk__st::after{content:"Conferido"} #canteiro .canteiro-chk input:disabled ~ *{opacity:.72} #canteiro .canteiro-chk:has(input:disabled){cursor:default} #canteiro .canteiro-rdo__acao{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:10px} #canteiro .canteiro-rdo__enviar{min-height:34px;padding:0 16px;gap:7px} #canteiro .canteiro-rdo__ok{display:none;width:12px;height:12px} #canteiro .canteiro-rdo__ok svg{width:12px;height:12px} #canteiro .canteiro-rdo__enviar[aria-disabled="true"]{opacity:.55;cursor:not-allowed} #canteiro .canteiro-rdo.is-enviado .canteiro-rdo__enviar{opacity:1;cursor:default;background:rgba(91,187,91,.16);color:var(--green-ink);box-shadow:inset 0 0 0 1px rgba(45,110,49,.28)} #canteiro .canteiro-rdo.is-enviado .canteiro-rdo__ok{display:block} #canteiro .canteiro-rdo__desfazer{min-height:34px} #canteiro .canteiro-rdo__dica{font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #canteiro .canteiro-efeito{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:11px 14px;background:#fff;box-shadow:0 0 0 1px var(--hair-1l)} #canteiro .canteiro-efeito__k{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);margin-right:auto} #canteiro .canteiro-efeito__i{display:inline-flex;align-items:baseline;gap:8px} #canteiro .canteiro-efeito__i b{font:600 .9375rem/1 var(--f-d);color:var(--ink)} #canteiro .canteiro-pn > .canteiro-efeito{flex:0 0 auto} #canteiro #canteiro-pn-3 > .canteiro-rdo{flex:1 1 auto} /* ---------- marcadores rastreados ---------- */ #canteiro .alvo{position:absolute;left:var(--x);top:var(--y);width:0;height:0} #canteiro .alvo.is-aberto{z-index:2} #canteiro .alvo__btn{position:absolute;left:-22px;top:-22px;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px 0 0;border:0;border-radius:22px;background:none;color:var(--on); cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent} @media (min-width:961px){ #canteiro .alvo--rot-esq .alvo__btn{left:auto;right:-22px;flex-direction:row-reverse;padding:0 0 0 4px} } #canteiro .alvo__btn:focus-visible{outline:2px solid var(--green);outline-offset:0} #canteiro .alvo__mira{position:relative;flex:none;width:44px;height:44px} #canteiro .alvo__mira::before{content:"";position:absolute;inset:8px; --c:var(--green); background: linear-gradient(var(--c),var(--c)) 0 50%/8px 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 50%/8px 1px no-repeat, linear-gradient(var(--c),var(--c)) 50% 0/1px 8px no-repeat, linear-gradient(var(--c),var(--c)) 50% 100%/1px 8px no-repeat; transition:transform .5s var(--ease)} #canteiro .alvo__mira::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; box-shadow:inset 0 0 0 1px var(--green),0 0 0 3px rgba(14,15,14,.35);background:rgba(14,15,14,.25);transition:background-color .3s var(--ease),transform .4s var(--ease)} #canteiro .alvo__rot{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:5px;white-space:nowrap; background:rgba(21,21,21,.88);box-shadow:inset 0 0 0 1px rgba(91,187,91,.34),0 6px 16px -8px rgba(0,0,0,.7); font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on);transition:box-shadow .3s var(--ease),background-color .3s var(--ease)} #canteiro .alvo__rot .num{color:var(--green);letter-spacing:.06em} #canteiro .alvo__btn:hover .alvo__rot,#canteiro .alvo.is-aberto .alvo__rot{box-shadow:inset 0 0 0 1px var(--green),0 6px 16px -8px rgba(0,0,0,.7);background:rgba(21,21,21,.96)} #canteiro .alvo__btn:hover .alvo__mira::after,#canteiro .alvo.is-aberto .alvo__mira::after{background:rgba(91,187,91,.42)} #canteiro .alvo.is-aberto .alvo__mira::before{transform:rotate(45deg) scale(.92)} /* pulso depois de acender: 2 ciclos (menos de 5s), só transform e opacity */ #canteiro .alvo__pulso{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; box-shadow:inset 0 0 0 1px var(--green);opacity:0;pointer-events:none} #canteiro .alvo.is-aceso .alvo__pulso{animation:canteiro-pulso 1.6s var(--ease) .2s 2} @keyframes canteiro-pulso{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}} /* antes da varredura: marcadores apagados (só com o JS ativo) */ #canteiro.is-armado .alvo:not(.is-aceso) .alvo__btn{opacity:0;pointer-events:none} #canteiro.is-armado .alvo:not(.is-aceso) .alvo__mira::before{transform:scale(.3)} #canteiro.is-armado .alvo:not(.is-aceso) .alvo__rot{opacity:0;transform:translateX(-8px)} @media (min-width:961px){ #canteiro.is-armado .alvo--rot-esq:not(.is-aceso) .alvo__rot{transform:translateX(8px)} } /* lado do rótulo decidido pelo desvio de colisão (canteiro.js) */ #canteiro .alvo[data-lado="d"] .alvo__btn{left:-22px;right:auto;flex-direction:row;padding:0 4px 0 0} #canteiro .alvo[data-lado="e"] .alvo__btn{left:auto;right:-22px;flex-direction:row-reverse;padding:0 0 0 4px} #canteiro.is-armado .alvo[data-lado="d"]:not(.is-aceso) .alvo__rot{transform:translateX(-8px)} #canteiro.is-armado .alvo[data-lado="e"]:not(.is-aceso) .alvo__rot{transform:translateX(8px)} #canteiro .alvo__btn{transition:opacity .35s var(--ease)} #canteiro .alvo__rot{transition:opacity .4s var(--ease) .12s,transform .6s var(--ease) .12s,box-shadow .3s var(--ease),background-color .3s var(--ease)} /* cartão de dado do marcador */ #canteiro .alvo__cartao{position:absolute;left:4px;top:30px;z-index:2;display:grid;justify-items:start;gap:7px;width:max-content;max-width:232px;padding:12px 14px 13px;border-radius:8px; background:var(--corte-bg);box-shadow:inset 0 0 0 1px rgba(236,240,232,.14),0 0 0 1px rgba(0,0,0,.35),0 18px 40px -16px rgba(0,0,0,.75); pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s linear .35s} #canteiro .alvo.is-aberto .alvo__cartao{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s} #canteiro .alvo__k{font:600 .6875rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2)} #canteiro .alvo__v{font:600 1rem/1.25 var(--f-d);letter-spacing:-.005em;color:#fff} #canteiro [data-alvo="avanco"] .alvo__v{font-size:1.5rem;line-height:1} #canteiro .alvo__chip{height:22px} #canteiro .alvo__barra{display:block;width:180px;height:4px;border-radius:2px;background:rgba(236,240,232,.14);overflow:hidden} #canteiro .alvo__barra i{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(var(--v,.268))} /* ---------- fio do cartão até o painel ---------- */ #canteiro .canteiro__fio{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;opacity:0;transition:opacity .25s var(--ease)} #canteiro .canteiro__fio.is-on{opacity:1} #canteiro .canteiro__fio path{fill:none;stroke:var(--green);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke} #canteiro .canteiro__fio circle{fill:var(--green)} #canteiro .canteiro__fio [data-fio-b]{fill:var(--g0);stroke:var(--green);stroke-width:1.5} /* ---------- alturas menores ---------- */ @media (min-width:961px) and (max-height:820px){ #canteiro{--leg-h:30px} #canteiro .canteiro-app .ui-head{padding:9px 14px} #canteiro .canteiro-app .ui-tab{min-height:36px} #canteiro .canteiro-app .ui-kpi{padding:10px 14px 11px;gap:6px} #canteiro .canteiro-app .ui-kpi__v{font-size:1.4375rem} #canteiro .canteiro-app .ui-kpi[data-liga="avanco"] .ui-kpi__v{font-size:1.5625rem} #canteiro .canteiro-app .ui-sec{padding:10px 14px} #canteiro .canteiro-app .ui-sec__h{margin-bottom:6px} #canteiro .canteiro-app .ui-row{min-height:27px} #canteiro .g-row{height:24px} #canteiro .canteiro-chk{min-height:26px} #canteiro .canteiro-rdo__acao{margin-top:8px} #canteiro .canteiro-efeito{padding:9px 14px} #canteiro .canteiro-app .ui-foot{padding:8px 14px} #canteiro .canteiro__fig01{top:calc(100% + 13px)} } /* ---------- tablet e celular: texto, faixa da foto com os marcadores, painel ---------- */ @media (max-width:960px){ #canteiro .canteiro__grade{display:flex;flex-direction:column;align-items:stretch} #canteiro .canteiro__texto{padding-bottom:0} #canteiro .canteiro__topo::before,#canteiro .canteiro__base::before{display:none} #canteiro .canteiro__faixa{display:block;position:relative;flex:1 1 auto;min-height:72px;margin:12px 0} #canteiro .canteiro__fig{margin:0 auto 0 0;width:min(100%,520px)} #canteiro .canteiro__fig01{position:static;margin-top:10px} #canteiro .canteiro__fig00{position:absolute;left:0;bottom:4px;z-index:2;padding:0;box-shadow:none} #canteiro .alvo.is-aberto .alvo__rot{opacity:0} /* a caixa da foto se ancora na faixa: o centro da faixa mostra a frente da laje e a equipe */ #canteiro{--fw:max(150vw,1180px);--fx:.56;--fy:-58%} #canteiro .canteiro__quadro{top:50%;left:calc((100% - var(--fw)) * var(--fx))} #canteiro .canteiro__foto{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 74%,transparent 96%)} #canteiro .canteiro__veu{background: linear-gradient(180deg,rgba(14,15,14,.62) 0,rgba(14,15,14,.30) 34%,rgba(14,15,14,0) 50%)} } @media (max-width:760px){ #canteiro{padding-top:calc(var(--hdr) + clamp(14px,2.6svh,24px));padding-bottom:clamp(14px,2.4svh,22px); --fw:126vw;--fx:.55;--fy:-31%;--fr:820 / 647} #canteiro .alvo{left:var(--xm);top:var(--ym)} #canteiro .alvo--so-largo{display:none} #canteiro .canteiro__meta{font-size:clamp(.625rem,2.85vw,.6875rem);letter-spacing:.08em;gap:4px 8px;margin-bottom:clamp(10px,1.8svh,16px)} #canteiro .canteiro__h1{margin-bottom:clamp(10px,1.8svh,16px)} #canteiro .canteiro__apoio{font-size:clamp(1rem,4.4vw,1.0625rem);line-height:1.36} #canteiro .canteiro__cta{margin-top:clamp(14px,2.4svh,20px)} #canteiro .canteiro__cta .btn{--h:48px;font-size:1rem} #canteiro .canteiro__faixa{min-height:64px;margin:8px 0} #canteiro .canteiro__fig00{left:auto;right:0;top:0;bottom:auto;display:inline-flex;align-items:center;height:22px;max-width:100%;padding:0 8px;border-radius:4px;white-space:nowrap; background:rgba(21,21,21,.84);font-size:.625rem;letter-spacing:.1em} #canteiro .canteiro__fig00 .fig__n{margin-right:.6em} #canteiro .canteiro__fig01{display:none} #canteiro .canteiro__moldura{--cantos-off:8px} #canteiro .canteiro-app .ui-head{padding:9px 12px;gap:10px} #canteiro .canteiro-app .ui-ctx small{display:none} #canteiro #canteiro-pn-1 .ui-sec__h{display:none} #canteiro .canteiro-app .ui-head .chip{display:none} #canteiro .canteiro-app .ui-tabs{padding:0 4px} #canteiro .canteiro-app .ui-tab{min-height:38px;padding:0 9px} #canteiro .canteiro-so-largo{display:none!important} #canteiro .canteiro-app .ui-kpi{padding:9px 10px 10px;gap:5px} #canteiro .canteiro-app .ui-kpi__v{font-size:1.25rem} #canteiro .canteiro-app .ui-kpi[data-liga="avanco"] .ui-kpi__v{font-size:1.375rem} #canteiro .canteiro-app .ui-sec{padding:9px 12px} #canteiro .canteiro-app .ui-sec__h{margin-bottom:4px;min-height:20px} #canteiro .canteiro-app .ui-row{min-height:27px} #canteiro .canteiro-pnls > .canteiro-pn{gap:6px;padding-bottom:6px} #canteiro .g-row{height:25px;grid-template-columns:24px minmax(0,1fr) 42%} #canteiro .canteiro-gantt__leg{display:none} #canteiro .canteiro-situ .ui-sec__h{display:none} #canteiro .canteiro-pilha__leg{margin-top:6px} #canteiro .canteiro-rdo__conta{display:none} #canteiro .canteiro-rdo__lista{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px} #canteiro .canteiro-chk{min-height:27px;gap:8px} #canteiro .canteiro-chk__st{display:none} #canteiro .canteiro-rdo__lista li:nth-last-child(2) .canteiro-chk{box-shadow:none} #canteiro .canteiro-rdo__acao{margin-top:6px} #canteiro .canteiro-rdo__dica{display:none} #canteiro .canteiro-efeito{padding:6px 12px;gap:4px 14px} #canteiro .canteiro-efeito__i b{font-size:.875rem} #canteiro .canteiro-rdo__enviar,#canteiro .canteiro-rdo__desfazer{min-height:32px} #canteiro .canteiro-efeito__k{display:none} #canteiro .canteiro-app .ui-foot{padding:7px 12px} #canteiro .alvo__cartao{max-width:min(210px,calc(100vw - 48px));padding:10px 12px 11px;gap:6px} #canteiro .alvo__v{font-size:.9375rem} } /* celular estreito: a faixa da foto não tem canto livre para a legenda; ela fica só para leitor de tela */ @media (max-width:380px){ #canteiro .canteiro__fig00{position:absolute!important;left:0;right:auto;top:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0} } @media (max-width:760px) and (max-height:760px){ #canteiro .canteiro-so-medio{display:none!important} #canteiro .canteiro-app .ui-kpi{padding:8px 10px 9px} #canteiro .canteiro-app .ui-row{min-height:25px} #canteiro .canteiro-gantt__lista .g-row[data-g="1.2"]{display:none} #canteiro .canteiro-chk{min-height:25px} #canteiro .canteiro-app .ui-tab{min-height:36px} } /* ---------- movimento reduzido: estados finais, sem varredura ---------- */ @media (prefers-reduced-motion:reduce){ #canteiro .canteiro__varredura{display:none} #canteiro .alvo.is-aceso .alvo__pulso{animation:none} #canteiro .canteiro-pn:not([hidden]){animation:none} } /* ---- sections/fragmentos.css ---- */ /* ===================================================================== PAV. 01 · #fragmentos (dono: agente da seção) Do espalhado ao registro: fragmentos reais de obra sobre o plano escuro voam (FLIP no JS) e viram os campos de um registro do Obrify (.ui-panel). Tudo escopado por #fragmentos. Medidas dos fragmentos em em (escala pelo --fu). ===================================================================== */ #fragmentos{ --fu:clamp(13px,min(1.3vw,2.1svh),20px); /* unidade dos fragmentos */ --reg-w:clamp(380px,35vw,520px); /* largura do registro */ --palco-h:min(var(--secao-util),820px); --tinta:#1f3c8f; /* caneta esferográfica azul */ --f-print:Arial,"Helvetica Neue",Helvetica,sans-serif; --f-xls:Aptos,Calibri,"Segoe UI",Arial,sans-serif; --f-chat:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; /* sombras curtas (desfoque até 24px): baratas de compor enquanto os fragmentos voam */ --sombra-papel: 0 0 0 .5px rgba(0,0,0,.30), 1px 2px 2px rgba(0,0,0,.28), 5px 14px 24px -8px rgba(0,0,0,.62); --sombra-tela: 0 0 0 .5px rgba(0,0,0,.40), 1px 2px 3px rgba(0,0,0,.26), 6px 16px 24px -10px rgba(0,0,0,.62); background: radial-gradient(64% 58% at 70% 52%,rgba(236,240,232,.05),transparent 72%), var(--bg); } /* ---------- layout ---------- */ #fragmentos .fragmentos__sticky{overflow:clip} /* cena travada (a única do site): só desktop alto o bastante, com JS e sem movimento reduzido. A seção ganha 175vh e o conteúdo fica preso; aos 55% da cena o JS organiza uma vez. */ @media (min-width:900px) and (min-height:560px) and (prefers-reduced-motion:no-preference){ html.js #fragmentos{height:175vh} html.js #fragmentos .fragmentos__sticky{position:sticky;top:0;height:100vh} } #fragmentos .fragmentos__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:1fr auto auto 1fr;grid-template-areas:". palco" "cab palco" "acao palco" ". palco"; column-gap:clamp(32px,4.4vw,72px);align-items:start} #fragmentos .fragmentos__cab{grid-area:cab;max-width:34rem} #fragmentos .fragmentos__lead{margin-top:clamp(14px,2.4svh,24px);max-width:36ch} #fragmentos .fragmentos__acao{grid-area:acao;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(22px,4svh,40px)} #fragmentos .fragmentos__fig{flex-basis:100%} #fragmentos .fragmentos__btn[data-org="sim"] .btn__arr{display:none} html:not(.js) #fragmentos .fragmentos__btn{display:none} /* ---------- palco: o plano escuro onde os fragmentos caem ---------- */ #fragmentos .fragmentos__palco{grid-area:palco;position:relative;height:var(--palco-h);display:grid;place-items:center; font-size:var(--fu);container-type:inline-size;container-name:palco} #fragmentos .frag-camada{position:absolute;inset:0;z-index:2} #fragmentos [data-estado="organizado"] .frag-camada, #fragmentos [data-estado="desfazendo"] .frag-camada{pointer-events:none} #fragmentos .frag-pos{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,1)} #fragmentos .frag{position:relative;transform:translate(0px,0px) rotate(var(--r,0deg)) scale(1,1);transform-origin:50% 50%;will-change:transform} #fragmentos .frag__obj{position:relative;transition:translate .5s var(--ease)} #fragmentos .frag__placa{position:absolute;inset:0;z-index:3;border-radius:.4em;background:#fff; box-shadow:inset 0 0 0 2px rgba(91,187,91,.75);opacity:0;pointer-events:none} @media (hover:hover) and (pointer:fine){ #fragmentos [data-estado="espalhado"] .frag-pos:hover .frag__obj{translate:0 -4px} #fragmentos [data-estado="espalhado"] .frag-pos:hover .frag-tag{color:var(--on);box-shadow:inset 0 0 0 1px rgba(91,187,91,.45),0 8px 20px -8px rgba(0,0,0,.6)} } /* materiais */ #fragmentos .papel{position:relative;border-radius:2px;box-shadow:var(--sombra-papel);isolation:isolate} /* luz rasante + fibra do papel, sem blend (barato de compor durante o voo) */ #fragmentos .papel::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit; background:linear-gradient(158deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 36%,rgba(0,0,0,0) 62%,rgba(0,0,0,.05) 100%),var(--noise); background-size:auto,180px;opacity:.32} #fragmentos .tela{position:relative;box-shadow:var(--sombra-tela)} /* escrita à mão (SVG estático, traço único) */ #fragmentos .mao{display:block;width:auto;overflow:visible} #fragmentos .mao path{fill:none;stroke:var(--tinta);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.92} /* ---------- 1. cronograma impresso ---------- */ #fragmentos .crono{width:100%;padding:.85em .9em 1.1em;background:#f7f7f2;color:#26282b} #fragmentos .crono__cab{display:flex;justify-content:space-between;align-items:baseline;gap:.8em;padding-bottom:.5em;box-shadow:0 1px 0 #34363a; font:700 .56em/1.2 var(--f-print);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} #fragmentos .crono__cab span{font-weight:400;letter-spacing:.02em;text-transform:none;color:#55585c} #fragmentos .crono__grade{display:grid;grid-template-columns:2.7em 15.4em minmax(0,1fr);margin-top:.35em;font:400 .5em/1 var(--f-print);color:#2a2c2f} #fragmentos .crono__grade > *{display:flex;align-items:center;height:2.25em;box-shadow:0 1px 0 rgba(40,42,45,.16)} #fragmentos .crono__h{font-weight:700;font-size:.92em;text-transform:uppercase;letter-spacing:.06em;color:#55585c} #fragmentos .crono__meses{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch} #fragmentos .crono__meses i{display:flex;align-items:center;padding-left:.4em;font-style:normal;font-weight:700;font-size:.92em;text-transform:uppercase;letter-spacing:.06em;color:#55585c;box-shadow:inset 1px 0 0 rgba(40,42,45,.22)} #fragmentos .crono__c{color:#55585c} #fragmentos .crono__c--etapa,#fragmentos .crono__t--etapa{font-weight:700;color:#202225} #fragmentos .crono__t{padding-right:.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9em} #fragmentos .crono__tl{position:relative;background:repeating-linear-gradient(90deg,rgba(40,42,45,.20) 0 1px,transparent 1px 25%)} #fragmentos .crono__b{position:absolute;left:calc(var(--a) * 100%);right:0;top:50%;height:.8em;margin-top:-.4em;background:#8d9095; background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px)} #fragmentos .crono__b--etapa{height:.55em;margin-top:-.275em;background:#3b3d41} #fragmentos .crono__dobra{position:absolute;inset:0 auto 0 52%;width:1px;pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.07),rgba(255,255,255,.55));box-shadow:1px 0 3px rgba(0,0,0,.05)} #fragmentos .mao--circulo{position:absolute;left:.12em;top:4.86em;width:10em;height:2.08em} #fragmentos .mao--interroga{position:absolute;left:10.3em;top:4.45em;height:1.45em} #fragmentos .mao--circulo path,#fragmentos .mao--interroga path{stroke-width:1.05} /* ---------- 2. planilha de medição ---------- */ #fragmentos .planilha{width:100%;overflow:hidden;border-radius:3px;background:#fff;color:#222;font:400 .56em/1 var(--f-xls)} #fragmentos .planilha__fx{display:flex;align-items:center;gap:.8em;height:2.2em;padding-right:.6em;background:#fff;box-shadow:0 1px 0 #d6d6d6} #fragmentos .planilha__ref{display:flex;align-items:center;height:100%;padding:0 .7em;min-width:4.6em;box-shadow:1px 0 0 #d6d6d6;color:#333} #fragmentos .planilha__f{font-style:italic;color:#8a8a8a;font-family:Georgia,"Times New Roman",serif} #fragmentos .planilha__g{display:grid;grid-template-columns:2.4em 2.6em minmax(0,1fr) 2.6em 4.6em} #fragmentos .planilha__g > span{display:flex;align-items:center;height:1.9em;padding:0 .4em;white-space:nowrap;overflow:hidden;box-shadow:inset -1px -1px 0 #e2e2e2} #fragmentos .pl-h,#fragmentos .pl-n{justify-content:center;background:#f3f3f3;color:#666;font-size:.94em;box-shadow:inset -1px -1px 0 #d4d4d4!important} #fragmentos .pl-c--th{font-weight:700;color:#333;background:#f7f7f7} #fragmentos .pl-c--mt{background:#fff1a6} #fragmentos .pl-c--num{justify-content:flex-end} #fragmentos .pl-c--txt{position:relative} #fragmentos .pl-c--txt::before{content:"";position:absolute;left:0;top:0;width:.55em;height:.55em;background:linear-gradient(135deg,#2f8a4c 50%,transparent 50%)} #fragmentos .pl-c--sel{box-shadow:inset 0 0 0 2px #1e7145!important} #fragmentos .pl-c--sel::after{content:"";position:absolute;right:-.2em;bottom:-.2em;width:.45em;height:.45em;background:#1e7145;box-shadow:0 0 0 1px #fff} #fragmentos .planilha__abas{display:flex;height:2em;background:#f3f3f3;box-shadow:inset 0 1px 0 #d4d4d4;padding-left:.6em} #fragmentos .planilha__abas span{display:flex;align-items:center;padding:0 .9em;color:#666;font-size:.94em;box-shadow:inset -1px 0 0 #dcdcdc} #fragmentos .planilha__abas .is-on{background:#fff;color:#1e7145;font-weight:700;box-shadow:inset 0 -2px 0 #1e7145,inset -1px 0 0 #dcdcdc} /* ---------- 3. RDO em papel (2ª via, canário) ---------- */ #fragmentos .rdo-papel{padding:1.15em .95em .85em;background:#efe6c6;color:#2d3035;font:400 .5em/1.2 var(--f-print)} #fragmentos .rdo-papel::before{content:"";position:absolute;left:.5em;right:.5em;top:.55em;height:.5em; background:radial-gradient(circle,rgba(60,50,30,.32) 0 .14em,transparent .17em) 0 50%/.62em .5em repeat-x} #fragmentos .rdo-papel__cab{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;margin-top:.6em;padding-bottom:.55em;box-shadow:0 1px 0 #3a3c40; font-size:1.18em;white-space:nowrap} #fragmentos .rdo-papel__cab b{font-weight:700;text-transform:uppercase;letter-spacing:.05em} #fragmentos .rdo-papel__cab span{font-size:.82em;color:#55585c} #fragmentos .rdo-papel__rot{font-weight:700;font-size:.86em;text-transform:uppercase;letter-spacing:.06em;color:#4a4d52} #fragmentos .rdo-papel__lin{display:flex;align-items:flex-end;gap:.7em;height:2.9em;padding-bottom:.35em;box-shadow:0 1px 0 rgba(45,48,53,.35)} #fragmentos .rdo-papel__campo{flex:1;display:flex;align-items:flex-end;height:100%} #fragmentos .mao--data-rdo{height:1.75em;margin-bottom:-.05em} #fragmentos .rdo-papel__clima{gap:.45em;align-items:center;padding:0} #fragmentos .rdo-papel__clima .rdo-papel__rot{margin-right:.3em} #fragmentos .rdo-papel__cx{position:relative;display:inline-block;width:1.05em;height:1.05em;margin-left:.35em;box-shadow:inset 0 0 0 1px #3a3c40} #fragmentos .mao--x{position:absolute;left:-.15em;top:-.25em;height:1.4em} #fragmentos .rdo-papel__blk{display:grid;padding-top:.75em} #fragmentos .rdo-papel__pauta{display:flex;align-items:flex-end;height:2.25em;padding-bottom:.3em;box-shadow:0 1px 0 rgba(45,48,53,.35)} #fragmentos .mao--servico{height:1.95em;margin-left:.2em} #fragmentos .rdo-papel__ass{display:grid;justify-items:start;margin-top:1.1em;padding-top:.3em} #fragmentos .mao--rubrica{height:2.1em;margin:0 0 -.25em 1.4em} #fragmentos .mao--rubrica path{stroke-width:.85} #fragmentos .rdo-papel__ass .rdo-papel__rot{width:62%;padding-top:.35em;box-shadow:0 -1px 0 #3a3c40} /* ---------- 4. chat do grupo da obra (áudio e mensagem) ---------- */ #fragmentos .chat{display:grid;gap:.42em;padding:.6em .62em;border-radius:.62em;background:#e7e1d6;font:400 .64em/1.3 var(--f-chat);color:#111b21} #fragmentos .bolha{position:relative;max-width:94%;padding:.42em .62em .38em;border-radius:.6em;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.13)} #fragmentos .bolha--in{justify-self:start;border-top-left-radius:0} #fragmentos .bolha--out{justify-self:end;background:#d8f3cd;border-top-right-radius:0} #fragmentos .bolha__nome{display:block;margin-bottom:.12em;font-weight:600;font-size:.9em;color:#a4511b} #fragmentos .bolha__nome--b{color:#1d6fa5} #fragmentos .bolha__txt{font-size:1.06em} #fragmentos .bolha__hora{display:inline-flex;align-items:center;gap:.25em;float:right;margin:.5em 0 -.15em .9em;font-size:.76em;color:#667781} #fragmentos .bolha__ck{width:1.25em;height:.9em;color:#3b9fdc} #fragmentos .bolha--audio{justify-self:stretch;max-width:none;padding:.5em .6em .4em .5em} #fragmentos .audio{display:grid;grid-template-columns:1.6em minmax(0,1fr) 2.7em;align-items:center;gap:.55em} #fragmentos .audio__play{width:1.5em;height:1.5em;color:#54656f} #fragmentos .audio__corpo{display:grid;gap:.15em;min-width:0} #fragmentos .audio__onda{width:100%;height:1.55em;color:#9aa6ad} #fragmentos .audio__pe{display:flex;justify-content:space-between;align-items:center} #fragmentos .audio__dur{font-size:.8em;color:#667781} #fragmentos .audio__pe .bolha__hora{float:none;margin:0} #fragmentos .audio__av{position:relative;display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;background:#c3ccd1} #fragmentos .audio__av > svg{width:2.1em;height:2.1em;margin-top:.3em;border-radius:0 0 1em 1em} #fragmentos .audio__mic{position:absolute;left:-.3em;bottom:-.1em;display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:#fff;color:#2aa864} #fragmentos .audio__mic svg{width:.95em;height:.95em} /* ---------- 5. foto da vala com carimbo GPS ---------- */ #fragmentos .foto{padding:.42em;background:#fbfbf8} #fragmentos .foto__img{display:block;position:relative;aspect-ratio:377/298;overflow:hidden;background:#6b4a33} #fragmentos .foto__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.03)} #fragmentos .foto__gps{position:absolute;right:.75em;bottom:.75em;display:flex;align-items:center;gap:.45em;padding:.38em .55em .4em .45em;border-radius:.3em; background:rgba(18,18,18,.62);color:#fff;font:600 .56em/1.25 var(--f-l);letter-spacing:.04em} #fragmentos .foto__gps svg{width:1.1em;height:1.3em;color:#f2c14e;flex:none} #fragmentos .foto__gps b{display:block;font-weight:600;letter-spacing:.06em} #fragmentos .foto__gps span span{display:block;color:rgba(255,255,255,.82)} /* ---------- 6. caderneta do encarregado ---------- */ #fragmentos .caderneta{padding:1.3em .95em 1em;background:#f6f3ea;border-radius:.2em .2em .35em .35em} #fragmentos .caderneta__espiral{position:absolute;left:.45em;right:.45em;top:-.62em;height:1.5em;z-index:5; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 30'%3E%3Cellipse cx='10.5' cy='22' rx='2.6' ry='3.2' fill='%23232527' fill-opacity='.85'/%3E%3Crect x='8.6' y='2' width='3.8' height='21' rx='1.9' fill='none' stroke='%237d8287' stroke-width='1.7'/%3E%3Cpath d='M9.4 4.6v14' stroke='%23d9dcdf' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/1.05em 100% repeat-x} #fragmentos .caderneta__folha{position:relative;display:grid;justify-items:start;min-height:9.4em;padding-top:.15em; background:repeating-linear-gradient(180deg,transparent 0 2.05em,rgba(70,110,170,.30) 2.05em calc(2.05em + 1px));background-position:0 .55em} #fragmentos .mao--data-cad{justify-self:end;height:1.1em;margin:.15em .2em .45em 0} #fragmentos .mao--turma{height:1.75em;margin:.1em 0 .3em .1em} #fragmentos .mao--operarios{height:2.15em;margin:.15em 0 0 .05em} #fragmentos .mao--operarios path{stroke-width:1.3} /* ---------- etiquetas de sintoma (camada técnica, sem rotação) ---------- --tx/--ty: canto de ancoragem relativo ao fragmento, em múltiplos de --fu (--dir ancora pela borda direita). A mira (::before) e o fio (::after) apontam para o fragmento. */ #fragmentos .frag-tag{position:absolute;left:calc(var(--tx) * var(--fu));top:calc(var(--ty) * var(--fu));z-index:6;display:flex;align-items:flex-start;gap:7px;width:max-content;max-width:20em; padding:6px 9px 6px 8px;border-radius:6px;background:var(--corte-bg); box-shadow:inset 0 0 0 1px rgba(236,240,232,.12),0 8px 20px -8px rgba(0,0,0,.6); font:600 11px/1.3 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2); --fl-x:-12px;--fl-y:10px;--fl-w:12px;--fl-h:1px;--mr-x:-21px;--mr-y:5.5px; transition:opacity .3s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)} #fragmentos .frag-tag b{flex:none;font-weight:600;color:var(--green);letter-spacing:.06em} #fragmentos .frag-tag::before,#fragmentos .frag-tag::after{content:"";position:absolute} #fragmentos .frag-tag::after{left:var(--fl-x);top:var(--fl-y);width:var(--fl-w);height:var(--fl-h);background:rgba(91,187,91,.75)} #fragmentos .frag-tag::before{left:var(--mr-x);top:var(--mr-y);width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--green),0 0 0 2px rgba(20,20,20,.55)} #fragmentos .frag-tag--dir{left:auto;right:calc(100% - var(--tx) * var(--fu));--fl-x:100%;--mr-x:calc(100% + 12px)} #fragmentos .frag-tag--cima{--fl-x:14px;--fl-y:-10px;--fl-w:1px;--fl-h:10px;--mr-x:10px;--mr-y:-19px} #fragmentos .frag-tag--n{padding:6px 8px} #fragmentos [data-estado="organizado"] .frag-tag, #fragmentos [data-estado="desfazendo"] .frag-tag{opacity:0} #fragmentos [data-estado="espalhado"] .frag-tag{transition:opacity .45s var(--ease) .75s,color .2s var(--ease),box-shadow .2s var(--ease)} /* ---------- posições (desktop: 7 fragmentos empilhados como numa mesa) ---------- */ #fragmentos [data-frag="crono"]{--x:0%;--y:4%;--w:19.5em;--r:-3deg;--z:3} #fragmentos [data-frag="planilha"]{--x:53.4%;--y:1%;--w:17em;--r:2.5deg;--z:4} #fragmentos [data-frag="rdo"]{--x:34.5%;--y:26%;--w:12.6em;--r:4deg;--z:1} #fragmentos [data-frag="audio"]{--x:0%;--y:47%;--w:15.6em;--r:-2.5deg;--z:5} #fragmentos [data-frag="foto"]{--x:63.1%;--y:34.7%;--w:13.6em;--r:5deg;--z:3} #fragmentos [data-frag="caderneta"]{--x:8.6%;--y:64.4%;--w:10em;--r:-6deg;--z:2} #fragmentos [data-frag="msg"]{--x:52.1%;--y:71.8%;--w:14em;--r:-3deg;--z:4} #fragmentos [data-frag="crono"] .frag-tag{--tx:.8;--ty:9.8} #fragmentos [data-frag="planilha"] .frag-tag{--tx:4.4;--ty:10.2} #fragmentos [data-frag="rdo"] .frag-tag{--tx:5.1;--ty:12.4} #fragmentos [data-frag="audio"] .frag-tag{--tx:1;--ty:4.78} #fragmentos [data-frag="foto"] .frag-tag{--tx:10;--ty:11.9} #fragmentos [data-frag="caderneta"] .frag-tag{--tx:10.6;--ty:4.6} #fragmentos [data-frag="msg"] .frag-tag{--tx:1.2;--ty:5.5} /* ---------- o registro (destino) ---------- */ /* o registro fica pintado (opacidade 0) desde o início: o clique não paga a primeira pintura. Para leitor de tela, o JS alterna aria-hidden; sem JS ele nunca aparece. */ #fragmentos .frag-reg{position:relative;z-index:1;width:min(100%,var(--reg-w));font-size:.875rem;transition:opacity .3s var(--ease)} #fragmentos [data-estado="espalhado"] .frag-reg{opacity:0} #fragmentos [data-estado="organizado"] .frag-reg, #fragmentos [data-estado="desfazendo"] .frag-reg{opacity:1;transition:opacity .35s var(--ease)} html:not(.js) #fragmentos .frag-reg{visibility:hidden} #fragmentos .frag-reg .ui-head{padding:14px 18px;gap:14px} #fragmentos .frag-reg .ui-sym{width:26px;height:23px} #fragmentos .frag-slot--cab{position:relative;display:grid;gap:3px;margin:-4px -6px;padding:4px 6px;border-radius:6px} #fragmentos .frag-slot__pilha{display:grid;align-items:center;min-height:1.35rem} #fragmentos .frag-slot__pilha > *{grid-area:1/1} #fragmentos .frag-slot--cab b{font:600 1.0625rem/1.2 var(--f-d);letter-spacing:-.008em;color:var(--ink);white-space:normal} #fragmentos .frag-reg__data{white-space:nowrap} #fragmentos .frag-campos{list-style:none;margin:0;padding:2px 18px;background:#fff} #fragmentos .frag-campo{display:grid;grid-template-columns:9.4rem minmax(0,1fr);gap:16px;align-items:center;min-height:68px;padding:10px 0;box-shadow:0 1px 0 var(--hair-1l)} #fragmentos .frag-campo:last-child{box-shadow:none} #fragmentos .frag-campo__k{display:flex;align-items:flex-start;gap:9px;font:600 .75rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #fragmentos .frag-campo__n{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:-2px;border-radius:4px;background:rgba(91,187,91,.16);color:var(--green-ink); font:600 .75rem/1 var(--f-l);letter-spacing:0;transition:background-color .4s var(--ease),color .4s var(--ease)} #fragmentos .frag-campo__r{min-width:0} #fragmentos .frag-campo__k .ui-check{margin-top:1px;opacity:0;transform:scale(.5);transition:opacity .3s var(--ease),transform .45s var(--ease)} #fragmentos .frag-campo.is-ok .frag-campo__n{background:var(--green);color:var(--ink)} #fragmentos .frag-campo.is-ok .frag-campo__k{color:var(--green-ink)} #fragmentos .frag-campo.is-ok .ui-check{opacity:1;transform:none} #fragmentos .frag-campo__v{display:flex;gap:16px;min-width:0} #fragmentos .frag-campo__v--2 > .frag-slot{flex:1 1 0;min-width:0} /* alvo de encaixe: placeholder hachurado até o fragmento chegar */ #fragmentos .frag-slot{position:relative;display:grid;align-items:center;min-height:40px;margin:-4px -6px;padding:4px 6px;border-radius:6px} /* realce de encaixe por opacidade (composto), não por cor de fundo (que repintaria o painel a cada quadro) */ #fragmentos .frag-slot::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(91,187,91,.14);opacity:0;pointer-events:none;transition:opacity 1s var(--ease)} #fragmentos .frag-slot > .frag-ph,#fragmentos .frag-slot > .frag-val{grid-area:1/1} #fragmentos .frag-ph{justify-self:start;width:64px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(42,41,41,.16) 0 3px,transparent 3px 6px);transition:opacity .3s var(--ease)} #fragmentos .frag-val{min-width:0;transition:opacity .45s var(--ease),translate .45s var(--ease)} #fragmentos .frag-slot:not(.is-cheio) .frag-val{opacity:0;translate:0 4px} #fragmentos .frag-slot.is-cheio .frag-ph{opacity:0} #fragmentos .frag-slot.is-quente::before{opacity:1;transition:opacity .2s var(--ease)} #fragmentos .frag-ev .frag-val{display:flex;align-items:center;gap:9px} #fragmentos .frag-ev__mini{flex:none;width:40px;height:28px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px var(--hair-2l)} #fragmentos .frag-ev__play{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ui-sub);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2l)} #fragmentos .frag-ev__play svg{width:14px;height:14px;margin-left:1px} #fragmentos .frag-ev__t,#fragmentos .frag-par{display:grid;gap:4px;min-width:0} #fragmentos .frag-reg .ui-v{font-size:1rem} #fragmentos .frag-ev__t .ui-v,#fragmentos .frag-par .ui-v{white-space:nowrap} #fragmentos .frag-pxr .frag-val{display:grid;gap:8px} #fragmentos .frag-pxr__bar{height:6px;border-radius:3px} #fragmentos .frag-slot:not(.is-cheio) .frag-pxr__bar > i{transform:scaleX(0)} #fragmentos .frag-pxr__l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;white-space:nowrap} #fragmentos .frag-pxr__l .ui-k{margin-right:3px} #fragmentos .frag-pxr__de{display:none} #fragmentos .frag-st .frag-val{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} #fragmentos .frag-st__t{font-size:.8125rem} #fragmentos .frag-st__t b{font:600 .875rem/1 var(--f-d);color:var(--ink)} #fragmentos .frag-reg .ui-foot{padding:11px 18px} /* ---------- desktop com pouca altura ---------- */ @media (min-width:1100px) and (max-height:800px){ #fragmentos .frag-campo{min-height:58px;padding:8px 0} #fragmentos .frag-reg .ui-head{padding:11px 16px} } /* ---------- tablet e celular: 4 fragmentos, um por sintoma ---------- */ @media (max-width:1099.98px){ #fragmentos{--fu:clamp(9.6px,1.45vw,13px)} #fragmentos [data-frag="rdo"],#fragmentos [data-frag="foto"],#fragmentos [data-frag="caderneta"]{display:none} #fragmentos [data-frag="crono"]{--x:0%;--y:6.5%;--w:19.5em;--r:-2.5deg} #fragmentos [data-frag="planilha"]{--x:42%;--y:35%;--w:17em;--r:2.5deg} #fragmentos [data-frag="audio"]{--x:0%;--y:46%;--w:15.6em;--r:-2deg} #fragmentos [data-frag="msg"]{--x:47%;--y:72%;--w:14em;--r:3deg} #fragmentos .frag-tag{font-size:10px;letter-spacing:.08em;padding:5px 7px;gap:5px;max-width:12.4em} #fragmentos .frag-tag[data-m="esq"]{left:calc(var(--tx) * var(--fu));right:auto;--fl-x:-12px;--fl-y:9px;--fl-w:12px;--fl-h:1px;--mr-x:-21px;--mr-y:4.5px} #fragmentos .frag-tag[data-m="dir"]{left:auto;right:calc(100% - var(--tx) * var(--fu));--fl-x:100%;--fl-y:9px;--fl-w:12px;--fl-h:1px;--mr-x:calc(100% + 12px);--mr-y:4.5px} #fragmentos .frag-tag[data-m="cima"]{left:calc(var(--tx) * var(--fu));right:auto;--fl-x:14px;--fl-y:-10px;--fl-w:1px;--fl-h:10px;--mr-x:10px;--mr-y:-19px} #fragmentos [data-frag="crono"] .frag-tag{--tx:18.8;--ty:-1.57;max-width:min(12.4em,calc(100cqw - var(--tx) * var(--fu) - 2px))} #fragmentos [data-frag="planilha"] .frag-tag{--tx:-1.4;--ty:-.87} #fragmentos [data-frag="audio"] .frag-tag{--tx:.52;--ty:4.87;max-width:16em} #fragmentos [data-frag="msg"] .frag-tag{--tx:-1.57;--ty:1.91} } @media (max-width:899.98px){ #fragmentos .fragmentos__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"cab" "palco" "acao";column-gap:0} #fragmentos .fragmentos__cab{max-width:none} #fragmentos{--palco-h:clamp(300px,calc(var(--secao-util) - 300px),460px);--reg-w:440px} #fragmentos .fragmentos__palco{margin-top:clamp(14px,2.6svh,28px)} #fragmentos .fragmentos__acao{margin-top:clamp(12px,2.2svh,24px)} } @media (max-width:760px){ #fragmentos{--fu:clamp(9.6px,2.95vw,12px)} #fragmentos .fragmentos__lead{display:none} #fragmentos .fragmentos__acao{gap:10px 16px} #fragmentos .fragmentos__btn{--h:48px;padding:0 18px 0 20px;font-size:1rem} } /* ---------- registro em palco estreito ---------- */ @container palco (max-width:460px){ #fragmentos .frag-reg{font-size:.8125rem} #fragmentos .frag-reg .ui-head{padding:9px 12px;gap:10px} #fragmentos .frag-reg .ui-sym{width:22px;height:20px} #fragmentos .frag-reg__data{display:none} #fragmentos .frag-slot--cab b{font-size:.875rem} #fragmentos .frag-campos{padding:0 12px} #fragmentos .frag-campo{grid-template-columns:6.4rem minmax(0,1fr);gap:10px;min-height:0;padding:7px 0} #fragmentos .frag-campo__k{gap:6px;font-size:.625rem;letter-spacing:.06em} #fragmentos .frag-campo__k .ui-check{display:none} #fragmentos .frag-campo__n{width:16px;height:16px;font-size:.625rem} #fragmentos .frag-campo__v{gap:10px} #fragmentos .frag-slot{min-height:32px} #fragmentos .frag-ev__mini{width:28px;height:20px} #fragmentos .frag-ev__play{width:22px;height:22px} #fragmentos .frag-ev__play svg{width:11px;height:11px} #fragmentos .frag-reg .ui-v{font-size:.875rem} #fragmentos .frag-pxr .frag-val{gap:5px} #fragmentos .frag-pxr__l{justify-content:flex-start;gap:5px} #fragmentos .frag-pxr__l .ui-k{display:none} #fragmentos .frag-pxr__de{display:inline;font:400 .75rem/1 var(--f-t);color:var(--ink-2)} #fragmentos .frag-st .frag-val{gap:4px 8px} #fragmentos .frag-st__t{font-size:.75rem} #fragmentos .frag-st__t b{font-size:.8125rem} #fragmentos .frag-reg .ui-foot{padding:8px 12px} } @container palco (max-width:330px){ #fragmentos .frag-campo{grid-template-columns:5.3rem minmax(0,1fr);gap:8px} #fragmentos .frag-ev__mini{display:none} #fragmentos .frag-campo__v{gap:8px} } /* ---- sections/planejamento.css ---- */ /* ===================================================================== PAV. 02 · #planejamento (dono: agente da seção) Cronograma (Gantt) replicado do app com a linha do Hoje arrastável. Posições das barras em CSS: --a/--b (dia inicial/final, 0 = 01/01/26), janela da escala em --t0/--w e linha em --h, tudo no .pl-gantt. ===================================================================== */ #planejamento{ --pl-rh:30px; /* altura de linha do Gantt */ --pl-c1:clamp(250px,21.5vw,330px); /* coluna EAP */ --pl-c2:188px; /* coluna Previsto */ --pl-pr:14px; /* respiro à direita do tempo */ --pl-gh:36px; /* cabeçalho do Gantt (eixo) */ --pl-etapa:#6c717f; --pl-etapa-pv:#3b3f47; --pl-ativ:#d2cdcf; --pl-ativ-pv:#5f646e; --pl-hach:repeating-linear-gradient(-45deg,#5f646e 0 1.6px,#b7bac0 1.6px 4px); --pl-hach-etapa:repeating-linear-gradient(-45deg,#2f3238 0 1.6px,#6c717f 1.6px 4px); --pl-prog:var(--green); --pl-atr:#d43a40; /* vermelho do app escurecido: rótulo branco na barra com 4,7:1 */ --pl-hoje:var(--green); --pl-cinza:#797f8a; } @media (max-height:800px){ #planejamento{ --pl-rh:25px; --pl-gh:30px; } } @media (max-height:700px){ #planejamento{ --pl-rh:24px; } } @media (min-height:1000px) and (min-width:1100px){ #planejamento{ --pl-rh:34px; --pl-gh:40px; } } /* desktop baixo entre 701 e 760px de altura (1280x720 e afins): linhas acompanham a altura útil (mínimo 22px) */ @media (max-height:760px) and (min-width:761px){ #planejamento{ --pl-rh:clamp(22px,calc((var(--secao-util) - 372px) / 10),25px); --pl-gh:28px; } } #planejamento .pl{display:grid;gap:clamp(14px,2.2svh,24px)} /* ---------- cabeçalho do pavimento ---------- */ #planejamento .pl-cab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px clamp(24px,4vw,72px);align-items:end} #planejamento .pl-cab__a .eyebrow{margin-bottom:clamp(10px,1.6svh,16px)} #planejamento .pl-cab__b{display:grid;justify-items:start;gap:2px} #planejamento .pl-lead{max-width:46ch} #planejamento .pl-dica{margin-left:-1px} /* ---------- moldura e painel ---------- */ #planejamento .pl-fig{min-width:0} #planejamento .pl-app{font-size:.75rem} /* cabeçalho do painel */ #planejamento .pl-head{gap:10px 12px;padding:8px 10px 8px 14px;min-height:48px} #planejamento .pl-ctx{flex:none} #planejamento .pl-selo{gap:5px;transition:background-color .3s var(--ease),color .3s var(--ease)} #planejamento .pl-selo__i{width:11px;height:11px;flex:none} #planejamento .pl-selo.chip--neutro .pl-selo__i{display:none} #planejamento .pl-ctl{display:flex;align-items:center;gap:8px} #planejamento .pl-ir{min-height:30px;padding:0 11px 0 9px;gap:6px;font-size:.75rem} #planejamento .pl-ir__i{width:12px;height:12px;color:var(--green-ink)} #planejamento .pl-ir.is-on{background:rgba(91,187,91,.14);box-shadow:inset 0 0 0 1px rgba(45,110,49,.35)} #planejamento .pl-esc > button{min-height:26px;padding:0 11px} /* KPIs + situação */ #planejamento .pl-kpis{display:grid;grid-template-columns:repeat(3,minmax(104px,auto)) minmax(0,1fr);background:#fff;box-shadow:0 1px 0 var(--hair-2l)} #planejamento .pl-kpi{display:grid;align-content:center;gap:5px;margin:0;padding:9px 14px 10px;min-width:0} #planejamento .pl-kpi + .pl-kpi,#planejamento .pl-sit{box-shadow:inset 1px 0 0 var(--hair-1l)} #planejamento .pl-kpi dt{white-space:nowrap} #planejamento .pl-kpi__v{display:flex;align-items:baseline;gap:3px;margin:0;min-height:22px;font:600 1.25rem/1 var(--f-d);letter-spacing:-.015em;color:var(--ink);white-space:nowrap} #planejamento .pl-kpi__v .u{font:500 .75rem/1 var(--f-d);color:var(--ink-2);margin-left:1px} #planejamento .pl-kpi__p{margin-left:7px;padding:3px 5px;border-radius:4px;background:var(--ui-sub);font:600 .6875rem/1 var(--f-d);color:var(--ink-2);align-self:center} #planejamento .pl-kpi__nd{display:none;font:600 .6875rem/1.2 var(--f-l);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);align-self:center} #planejamento [data-pl]:not([data-marco]) [data-pl-av]{display:none} #planejamento [data-pl]:not([data-marco]) .pl-kpi__nd{display:inline} #planejamento .pl-sit{display:grid;align-content:center;gap:6px;padding:9px 14px 10px;min-width:0} #planejamento .pl-sit__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0} #planejamento .pl-sit__tot{font:500 .6875rem/1 var(--f-d);color:var(--ink-2);white-space:nowrap} #planejamento .pl-sit__barra{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;background:var(--ui-sub)} #planejamento .pl-sit__barra > i{display:block;flex:0 0 0;min-width:0;transition:flex-grow .5s var(--ease)} #planejamento .pl-sit__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 14px;font:500 .6875rem/1.25 var(--f-d);color:var(--ink-2)} #planejamento .pl-sit__l li{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap} #planejamento .pl-sit__l li::before{content:"";width:7px;height:7px;border-radius:2px;align-self:center;background:currentColor} #planejamento .pl-sit__l b{font:600 .8125rem/1 var(--f-d);color:var(--ink)} /* cores da situação: realizado (app) e previsto (cinzas) */ #planejamento .pl-sit .s-atr{color:var(--red-ink)} #planejamento .pl-sit__barra .s-atr{background:var(--pl-atr)} #planejamento .pl-sit .s-nao{color:var(--ink-2)} #planejamento .pl-sit__barra .s-nao{background:var(--pl-cinza)} #planejamento .pl-sit .s-and{color:var(--ink-2)} #planejamento .pl-sit__barra .s-and{background:#4b5563} #planejamento .pl-sit .s-conc{color:var(--green-ink)} #planejamento .pl-sit__barra .s-conc{background:var(--pl-prog)} #planejamento .pl-sit__l .s-atr::before{background:var(--pl-atr)} #planejamento .pl-sit__l .s-nao::before{background:var(--pl-cinza)} #planejamento .pl-sit__l .s-and::before{background:#4b5563} #planejamento .pl-sit__l .s-conc::before{background:var(--pl-prog)} #planejamento .pl-sit .p-conc::before,#planejamento .pl-sit__barra .p-conc{background:var(--pl-etapa-pv)} #planejamento .pl-sit .p-and::before,#planejamento .pl-sit__barra .p-and{background:var(--pl-hach)} #planejamento .pl-sit .p-ini::before,#planejamento .pl-sit__barra .p-ini{background:#a9adb5} #planejamento .pl-sit .p-nao::before,#planejamento .pl-sit__barra .p-nao{background:#dcdee1} #planejamento .pl-sit .p-sd::before{background:radial-gradient(circle,#6f747c .8px,transparent 1.1px) 0 0/3px 3px,#f1f2f0;box-shadow:inset 0 0 0 1px #b9bdc3} #planejamento .pl-sit__barra .p-sd{background:radial-gradient(circle,#8f949c .8px,transparent 1.1px) 0 0/4px 4px,#f1f2f0} #planejamento .pl-sit [class^="p-"]{color:var(--ink-2)} /* etapas no celular (escondido no desktop) */ #planejamento .pl-etm{display:none} /* ---------- Gantt ---------- */ #planejamento .pl-gantt{--h:257;--t0:0;--w:334;position:relative;background:#fff;padding-right:var(--pl-pr); -webkit-user-select:none;user-select:none} #planejamento .pl-gh,#planejamento .pl-row{display:grid;grid-template-columns:var(--pl-c1) var(--pl-c2) minmax(0,1fr);grid-template-areas:"eap prev tl"} #planejamento .pl-gh{height:var(--pl-gh);align-items:center;box-shadow:0 1px 0 var(--hair-2l); font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #planejamento .pl-gh__c1{grid-area:eap;padding-left:14px} #planejamento .pl-gh__c2{grid-area:prev;padding-left:10px;white-space:nowrap} #planejamento .pl-gh__tl{grid-area:tl;position:relative;align-self:stretch;overflow:clip} #planejamento .pl-gh__c1,#planejamento .pl-gh__c2{align-self:stretch;display:flex;align-items:center;box-shadow:inset -1px 0 0 var(--hair-1l)} /* eixo do tempo: rótulos de mês (linha de cima) e de dia/marco (linha de baixo) */ #planejamento .pl-eixo{position:absolute;inset:0} #planejamento .pl-ex{position:absolute;left:calc((var(--a) - var(--t0)) / var(--w) * 100%);padding-left:5px;white-space:nowrap; font:600 .625rem/1 var(--f-l);letter-spacing:.06em;color:var(--ink-2)} #planejamento .pl-ex.is-sob{visibility:hidden} #planejamento .pl-ex--m{top:7px;text-transform:none;letter-spacing:.02em;font:600 .6875rem/1 var(--f-d);color:var(--ink)} #planejamento .pl-ex--d{bottom:6px;letter-spacing:.02em;font:500 .625rem/1 var(--f-d)} #planejamento .pl-ex--marco{color:var(--green-ink);font-weight:600;padding-left:0;translate:-50% 0} #planejamento .pl-ex--fim{translate:-100% 0} #planejamento .pl-ex--d::before{content:"";position:absolute;left:0;top:-5px;width:1px;height:4px;background:var(--hair-3l)} #planejamento .pl-ex--marco::before{left:50%;background:var(--green-ink)} #planejamento .pl-ex--fim::before{left:100%} /* linhas */ #planejamento .pl-rows{list-style:none;margin:0;padding:0} #planejamento .pl-row{height:var(--pl-rh);align-items:center;box-shadow:0 1px 0 var(--hair-1l)} #planejamento .pl-row.is-recolhida{display:none} #planejamento .pl-row--etapa{background:#f4f5f3} #planejamento .pl-eap{grid-area:eap;display:flex;align-items:center;gap:8px;min-width:0;height:100%;padding:0 10px 0 14px;box-shadow:inset -1px 0 0 var(--hair-1l)} #planejamento .pl-row:not(.pl-row--etapa) .pl-eap{padding-left:34px} #planejamento .pl-cod{flex:none;min-width:2.1em;font:600 .75rem/1 var(--f-d);color:var(--ink)} #planejamento .pl-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 .75rem/1.2 var(--f-t);color:#3d4043} #planejamento .pl-row--etapa .pl-nome{font:600 .75rem/1.2 var(--f-d);color:var(--ink)} #planejamento .pl-tog{display:flex;align-items:center;gap:6px;min-width:0;height:100%;min-height:24px;margin-left:-6px;padding:0 6px;border:0;border-radius:5px;background:none;cursor:pointer;text-align:left} #planejamento .pl-tog:hover{background:rgba(42,41,41,.05)} #planejamento .pl-tog:focus-visible{outline-offset:-2px} #planejamento .pl-tog__i{width:12px;height:12px;flex:none;color:var(--ink-2);transition:transform .3s var(--ease)} #planejamento .pl-tog[aria-expanded="false"] .pl-tog__i{transform:rotate(-90deg)} /* realizado no marco: código em vermelho e triângulo, como no app */ #planejamento [data-real] .pl-row.is-atr .pl-cod{color:var(--red-ink)} #planejamento [data-real] .pl-row.is-atr .pl-eap::after{content:"";flex:none;width:11px;height:11px;margin-left:auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.6 11 10.4H1z' fill='none' stroke='%23b4232a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M6 5v2.4M6 8.9v.1' stroke='%23b4232a' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat} /* coluna Previsto */ #planejamento .pl-prev{grid-area:prev;display:flex;align-items:center;gap:6px;min-width:0;height:100%;padding:0 10px;box-shadow:inset -1px 0 0 var(--hair-1l)} #planejamento .pl-st{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px 0 7px;border-radius:5px;white-space:nowrap; font:600 .6875rem/1 var(--f-d);color:var(--ink-2);background:var(--ui-sub);transition:background-color .25s var(--ease),color .25s var(--ease)} #planejamento .pl-st__i{width:8px;height:8px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor} #planejamento .pl-st[data-st="conc"]{color:var(--ink);background:#e7eae5} #planejamento .pl-st[data-st="conc"] .pl-st__i{background:currentColor} #planejamento .pl-st[data-st="and"]{color:var(--ink);background:#eceff0} #planejamento .pl-st[data-st="and"] .pl-st__i{background:linear-gradient(90deg,currentColor 50%,transparent 50%)} #planejamento .pl-st[data-st="ini"] .pl-st__i{background:linear-gradient(90deg,currentColor 50%,transparent 50%);opacity:.7} #planejamento .pl-st[data-st="nao"]{background:#fff;box-shadow:inset 0 0 0 1px var(--hair-2l)} #planejamento .pl-st[data-st="sd"]{background:none;box-shadow:inset 0 0 0 1px var(--hair-2l);color:#6b6f73} #planejamento .pl-st[data-st="sd"] .pl-st__i{box-shadow:inset 0 0 0 1px currentColor;background:radial-gradient(circle,currentColor .7px,transparent 1px) 0 0/3px 3px} #planejamento .pl-pct{font:600 .6875rem/1 var(--f-d);color:var(--ink-2)} #planejamento .pl-pct:empty{display:none} /* coluna do tempo */ #planejamento .pl-tl{grid-area:tl;position:relative;height:100%;overflow:clip} #planejamento .pl-b,#planejamento .pl-rs,#planejamento .pl-cauda{position:absolute;top:50%;height:12px;margin-top:-6px;border-radius:3px; left:calc((var(--a) - var(--t0)) / var(--w) * 100%);width:calc((var(--b) - var(--a) + 1) / var(--w) * 100%);min-width:3px} #planejamento .pl-row--etapa .pl-b,#planejamento .pl-row--etapa .pl-rs{height:14px;margin-top:-7px} #planejamento .pl-b{overflow:hidden;background:var(--pl-ativ);transition:opacity .3s var(--ease)} #planejamento .pl-b--etapa{background:var(--pl-etapa)} /* previsto até a linha do Hoje: cresce por transform, calculado do --h */ /* hachura recortada (não estica): a fração prevista vem do --h */ #planejamento .pl-pv{position:absolute;inset:0;background:var(--pl-hach); clip-path:inset(0 calc((1 - clamp(0,(var(--h) + 1 - var(--a)) / (var(--b) - var(--a) + 1),1)) * 100%) 0 0)} #planejamento .pl-b--etapa .pl-pv{background:var(--pl-hach-etapa)} #planejamento .pl-b__n{position:absolute;left:6px;top:50%;translate:0 -50%;font:600 .625rem/1 var(--f-d);color:#fff;white-space:nowrap} #planejamento .pl-b .pl-b__n{display:none} /* término fora da tela real: continuação tracejada */ #planejamento .pl-cauda{border:1.5px dashed var(--pl-ativ-pv);border-left:0;border-radius:0 3px 3px 0;background:none;opacity:.8;transition:opacity .3s var(--ease)} #planejamento .pl-row--etapa .pl-cauda{border-color:var(--pl-etapa)} /* realizado no marco (cores da tela real) */ #planejamento .pl-rs{opacity:0;overflow:hidden;transition:opacity .35s var(--ease)} #planejamento .pl-rs--prog{background:var(--pl-prog)} #planejamento .pl-rs--atr{background:var(--pl-atr)} #planejamento .pl-rs--ativ{background:#c6c0c2} #planejamento .pl-rs--etapa{background:var(--pl-etapa)} #planejamento [data-real] .pl-rs{opacity:1} #planejamento [data-real] .pl-b{opacity:0} #planejamento [data-real] .pl-cauda{border-color:var(--pl-atr);opacity:.7} #planejamento [data-real] .pl-row:not(.is-atr) .pl-cauda{border-color:var(--pl-etapa)} /* chip do realizado preso à linha do Hoje (só nos marcos) */ #planejamento .pl-rc{position:absolute;top:50%;left:clamp(0%,calc((var(--h) + 1 - var(--t0)) / var(--w) * 100%),100%); display:none;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:4px;white-space:nowrap; translate:calc(-100% - 7px) -50%;font:600 .625rem/1 var(--f-d);letter-spacing:.01em;opacity:0;transition:opacity .3s var(--ease)} #planejamento .pl-rc svg{width:10px;height:10px;flex:none} #planejamento [data-real] .pl-row.is-atr .pl-rc,#planejamento [data-real] .pl-row.is-conc .pl-rc{display:inline-flex;opacity:1} #planejamento .pl-row.is-atr .pl-rc{background:#fbe3e3;color:var(--red-ink);box-shadow:0 0 0 2px #fff} #planejamento .pl-row.is-conc .pl-rc{background:#e0f1df;color:var(--green-ink);box-shadow:0 0 0 2px #fff} #planejamento .pl-row--etapa.is-atr .pl-rc{box-shadow:0 0 0 2px #f4f5f3} #planejamento .pl-row--etapa.is-conc .pl-rc{box-shadow:0 0 0 2px #f4f5f3} #planejamento .pl-gantt[data-rc="dir"] .pl-rc{translate:7px -50%} /* ---------- sobreposição: grade + linha do Hoje ---------- */ #planejamento .pl-ov{position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--pl-c1) + var(--pl-c2));right:var(--pl-pr); cursor:ew-resize;touch-action:pan-y} #planejamento .pl-grade{position:absolute;inset:var(--pl-gh) 0 0;overflow:clip;pointer-events:none} /* período sem datas na demonstração (o dataset só tem o Gantt até 06/02/26): hachura de prancha + rótulo; segue a escala */ #planejamento .pl-sd{position:absolute;top:var(--pl-gh);bottom:0;right:0;left:min(100%,calc((var(--a) - var(--t0)) / var(--w) * 100%));overflow:clip;pointer-events:none;container-type:inline-size; background:repeating-linear-gradient(-45deg,rgba(42,41,41,.05) 0 1px,transparent 1px 7px);mix-blend-mode:multiply; box-shadow:inset 1px 0 0 rgba(42,41,41,.22)} #planejamento .pl-sd__t{position:absolute;left:10px;top:9px;display:inline-flex;align-items:baseline;gap:5px;height:20px;padding:0 8px;border-radius:4px;white-space:nowrap; background:#fff;box-shadow:inset 0 0 0 1px var(--hair-2l);font:600 .625rem/20px var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #planejamento .pl-sd__d{font:500 .6875rem/20px var(--f-d);letter-spacing:0;text-transform:none} #planejamento .pl-gantt:not([data-escala="geral"]) .pl-sd__t{display:none} /* o rótulo nunca encosta nos chips do marco (ficam à esquerda da linha do Hoje, a 77% da escala Geral) */ @container (max-width:440px){ #planejamento .pl-sd__d{display:none} } @container (max-width:345px){ #planejamento .pl-sd__t{display:none} } #planejamento .pl-grade > i{position:absolute;top:0;bottom:0;left:calc((var(--a) - var(--t0)) / var(--w) * 100%);width:1px;background:rgba(42,41,41,.07)} #planejamento .pl-grade > i.g-forte{background:rgba(42,41,41,.14)} #planejamento .pl-grade > i.g-fds{width:calc(1 / var(--w) * 100%);background:rgba(42,41,41,.025)} #planejamento .pl-hoje{position:absolute;top:0;bottom:0;left:clamp(0%,calc((var(--h) + 1 - var(--t0)) / var(--w) * 100%),100%);width:0;pointer-events:none} #planejamento .pl-hoje__l{position:absolute;top:calc(var(--pl-gh) - 12px);bottom:0;left:-1px;width:2px;background:var(--pl-hoje); box-shadow:0 0 0 1px rgba(255,255,255,.75)} #planejamento .pl-hoje::before{content:"";position:absolute;top:0;bottom:0;left:-14px;width:28px;pointer-events:auto;cursor:ew-resize} #planejamento .pl-hoje__f{position:absolute;top:3px;left:0;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:6px; background:var(--pl-hoje);color:var(--ink);white-space:nowrap;pointer-events:auto;cursor:grab;touch-action:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(45,110,49,.35),0 2px 6px -2px rgba(20,30,20,.45); font:600 .6875rem/1 var(--f-d);transition:box-shadow .2s var(--ease)} #planejamento .pl-hoje__f::after{content:"";position:absolute;inset:-11px -6px;border-radius:10px} #planejamento .pl-hoje__f:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px} #planejamento .pl-hoje__k{font:600 .5625rem/1 var(--f-l);letter-spacing:.12em;text-transform:uppercase} #planejamento .pl-hoje__g{width:5px;height:9px;fill:currentColor;opacity:.7} #planejamento [data-flag="esq"] .pl-hoje__f{translate:calc(-100% + 1px) 0} #planejamento [data-flag="dir"] .pl-hoje__f{translate:-1px 0} #planejamento .pl-gantt.is-arraste .pl-hoje__f{cursor:grabbing;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px rgba(91,187,91,.28),0 4px 10px -2px rgba(20,30,20,.45)} #planejamento .pl-gantt.is-arraste{cursor:grabbing} /* fora da janela da escala: estacionada na borda, tracejada */ #planejamento [data-fora] .pl-hoje__l{background:repeating-linear-gradient(180deg,var(--pl-hoje) 0 5px,transparent 5px 9px);box-shadow:none} #planejamento .pl-hoje__seta{display:none} #planejamento .pl-gantt[data-fora] .pl-hoje__f{padding-right:7px} /* pulso de dica (botão "Arraste a linha do Hoje") */ #planejamento .pl-hoje.is-pulso .pl-hoje__f{animation:pl-pulso 1s var(--ease) 2} @keyframes pl-pulso{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 0 rgba(91,187,91,.55)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 12px rgba(91,187,91,0)}} /* ---------- rodapé do painel: nota + legenda ---------- */ #planejamento .pl-foot{justify-content:space-between;gap:6px 18px;padding:8px 14px} #planejamento .pl-leg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font:500 .6875rem/1.2 var(--f-d);color:var(--ink-2)} #planejamento .pl-leg li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #planejamento .pl-leg i{display:block;width:14px;height:8px;border-radius:2px} #planejamento .lg-etapa{background:var(--pl-etapa)} #planejamento .lg-ativ{background:var(--pl-ativ)} #planejamento .lg-prev{background:var(--pl-hach)} #planejamento .lg-prog{background:var(--pl-prog)} #planejamento .lg-atr{background:var(--pl-atr)} #planejamento .pl-leg .lg-hoje{width:2px;height:12px;border-radius:1px;background:var(--pl-hoje)} #planejamento .lg-cauda{border:1.5px dashed var(--pl-ativ-pv);border-left:0;background:none} /* ---------- pé: legenda da figura + CTA ---------- */ #planejamento .pl-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px} #planejamento .pl-cap{margin:0} /* ===================================================================== Desempenho do arraste: o que muda a cada dia fica contido (o texto novo não propaga layout para o painel inteiro) ===================================================================== */ #planejamento .pl-kpi__v,#planejamento .pl-gh__c2,#planejamento .pl-prev,#planejamento .pl-sit__barra{contain:strict} #planejamento .pl-kpi__v{height:22px} #planejamento .pl-sit__h{contain:strict;height:14px} @media (min-width:1100px){ #planejamento .pl-kpis{grid-template-columns:118px 132px 112px minmax(0,1fr)} } @media (max-height:800px) and (min-width:761px){ #planejamento .pl-kpi__v{height:20px} } @media (max-width:760px){ #planejamento .pl-kpi__v{height:18px} #planejamento .pl-sit__h{height:18px} } /* ===================================================================== Desktop baixo (1366x768 e afins) ===================================================================== */ @media (max-height:800px) and (min-width:761px){ #planejamento .pl{gap:14px} #planejamento .pl-head{min-height:42px;padding-block:5px} #planejamento .pl-kpi,#planejamento .pl-sit{padding-block:6px 7px} #planejamento .pl-kpi__v{font-size:1.125rem;min-height:20px} #planejamento .pl-foot{padding-block:6px} #planejamento .pl-pe .btn{--h:44px} } @media (max-height:760px) and (min-width:761px){ #planejamento .pl{gap:10px} } /* selo e seletor de etapa do celular ficam fora no desktop */ #planejamento .pl-selo--m{display:none} /* ===================================================================== Tablet: coluna Previsto curta, sem o sufixo "prevista" ===================================================================== */ @media (max-width:1099.98px){ #planejamento{--pl-c1:clamp(200px,27vw,260px);--pl-c2:148px} #planejamento .pl-st__pv{display:none} #planejamento .pl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} #planejamento .pl-sit{grid-column:1 / -1;box-shadow:inset 0 1px 0 var(--hair-1l)} } @media (max-width:900px){ #planejamento .pl-cab{grid-template-columns:minmax(0,1fr)} #planejamento .pl-head{flex-wrap:wrap} #planejamento .pl-ctl{margin-left:0;width:100%;justify-content:space-between} } /* ===================================================================== Celular: Gantt compacto (uma etapa por vez, linha em duas faixas) ===================================================================== */ @media (max-width:760px){ #planejamento{--pl-c2:100px;--pl-rh:40px;--pl-gh:26px;--pl-pr:10px} #planejamento .pl{gap:14px} #planejamento .pl-cab{gap:6px} #planejamento .pl-cab__a .eyebrow{margin-bottom:8px} #planejamento .pl-lead{font-size:1rem;line-height:1.45} #planejamento .pl-dica{min-height:36px} #planejamento .ui-frame{padding:4px;border-radius:14px} /* cabeçalho em grade: obra + Ir para; escala + etapa */ #planejamento .pl-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"sym ctx ctx ir" "esc esc etm etm"; align-items:center;padding:6px 8px 7px 10px;gap:6px 8px;min-height:0} #planejamento .pl-head .ui-sym{grid-area:sym} #planejamento .pl-ctx{grid-area:ctx;min-width:0} #planejamento .pl-ctx b{font-size:.8125rem;overflow:hidden;text-overflow:ellipsis} #planejamento .pl-ctx small{font-size:.5625rem} #planejamento .pl-selo--d{display:none} #planejamento .pl-ctl{display:contents} #planejamento .pl-ir{grid-area:ir;justify-self:end;min-height:30px;padding:0 9px 0 8px;font-size:.6875rem} #planejamento .pl-esc{grid-area:esc;justify-self:start} #planejamento .pl-esc > [data-escala="semana"]{display:none} #planejamento .pl-esc > button{min-height:28px;padding:0 13px;font-size:.6875rem} #planejamento .pl-etm{grid-area:etm;justify-self:end;display:flex;align-items:center;gap:3px} #planejamento .pl-etm__k{margin-right:3px;font:600 .5625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #planejamento .pl-etm button{width:26px;height:28px;padding:0;border:0;border-radius:6px;background:var(--ui-sub);font:600 .75rem/1 var(--f-d);color:var(--ink-2);cursor:pointer; box-shadow:inset 0 0 0 1px var(--hair-1l)} #planejamento .pl-etm button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none} /* KPIs e situação (com o selo do prazo no cabeçalho da situação) */ #planejamento .pl-kpi{padding:6px 10px 7px;gap:4px} #planejamento .pl-kpi .ui-k{font-size:.5625rem;letter-spacing:.08em} #planejamento .pl-kpi__v{font-size:1rem;min-height:16px} #planejamento .pl-kpi__p{display:none} #planejamento .pl-kpi__nd{font-size:.5625rem} #planejamento .pl-sit{padding:6px 10px 7px;gap:5px} #planejamento .pl-sit__h{align-items:center;min-height:18px} #planejamento .pl-sit__tot{display:none} #planejamento .pl-selo--m{display:inline-flex;height:18px;padding:0 6px;gap:4px;font-size:.625rem;margin-left:auto} #planejamento .pl-sit__l{gap:2px 10px;font-size:.625rem} #planejamento .pl-sit__l b{font-size:.75rem} /* Gantt em duas faixas: nome em cima, tempo + previsto embaixo */ #planejamento .pl-gh,#planejamento .pl-row{grid-template-columns:minmax(0,1fr) var(--pl-c2);grid-template-areas:"tl prev"} #planejamento .pl-row{grid-template-rows:18px 16px;grid-template-areas:"eap eap" "tl prev";align-content:center;row-gap:2px} #planejamento .pl-gh__c1{display:none} #planejamento .pl-gh__c2{padding:0 4px 0 6px;font-size:.5625rem;line-height:1.1;letter-spacing:.05em;white-space:normal;box-shadow:none} #planejamento .pl-row--etapa{display:none} #planejamento .pl-row.is-recolhida{display:grid} #planejamento [data-em="1"] .pl-row:not([data-etapa="1"]), #planejamento [data-em="2"] .pl-row:not([data-etapa="2"]), #planejamento [data-em="3"] .pl-row:not([data-etapa="3"]), #planejamento [data-em="4"] .pl-row:not([data-etapa="4"]){display:none} #planejamento .pl-row:not(.pl-row--etapa) .pl-eap{position:relative;z-index:3;padding:0 10px;background:#fff;box-shadow:none} #planejamento .pl-prev{padding:0 4px 0 6px;box-shadow:none} #planejamento .pl-st{height:16px;padding:0 6px 0 5px;gap:4px;font-size:.625rem} #planejamento .pl-st__i{width:7px;height:7px} /* no celular o percentual previsto fica só para leitor de tela (a hachura mostra a fração) */ #planejamento .pl-pct{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #planejamento .pl-tl{margin-left:10px} #planejamento .pl-b,#planejamento .pl-rs,#planejamento .pl-cauda{height:8px;margin-top:-4px;border-radius:2px} #planejamento .pl-rc{height:16px;padding:0 5px;font-size:.5625rem} #planejamento .pl-ov{left:10px;right:var(--pl-c2)} #planejamento .pl-sd__t{display:none} #planejamento .pl-hoje__f{height:20px;padding:0 7px 0 6px;gap:5px;top:3px} #planejamento .pl-hoje__l{top:calc(var(--pl-gh) - 6px)} #planejamento .pl-ex--m{top:5px;font-size:.625rem} #planejamento .pl-ex--d{display:none} #planejamento .pl-gantt[data-escala="geral"] .pl-ex--m.is-par{visibility:hidden} #planejamento .pl-foot{padding:5px 10px} #planejamento .pl-leg{display:none} #planejamento .pl-pe{gap:8px} #planejamento .pl-pe .btn{--h:44px;order:-1} } /* celular baixo (360x740): linhas e texto mais justos, legenda da figura só para leitor de tela */ @media (max-width:760px) and (max-height:760px){ #planejamento{--pl-rh:36px;--pl-gh:24px} #planejamento .pl{gap:10px} #planejamento .pl-lead{font-size:.875rem;line-height:1.35} #planejamento .pl-dica{min-height:28px} #planejamento .pl-head{padding-block:5px} #planejamento .pl-foot{padding-block:4px} #planejamento .pl-hoje__f{top:2px} #planejamento .pl-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #planejamento .pl-kpi{padding-block:5px 6px;gap:3px} #planejamento .pl-sit{padding-block:5px 6px;gap:4px} #planejamento .pl-kpi__v{height:17px} } @media (max-width:380px){ #planejamento .pl-ir{padding:0 7px} #planejamento .pl-sit__l li.s-and{display:none} /* "sem data" fica na barra e no selo de cada linha; na lista, só para leitor de tela (mantém uma linha) */ #planejamento .pl-sit__l li.p-sd{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } @media (max-width:340px){ #planejamento .pl-ir__i{display:none} #planejamento .pl-etm__k{display:none} #planejamento .pl-kpi{padding-inline:8px} #planejamento .pl-kpi__v{font-size:.9375rem} } /* ---- sections/rdo.css ---- */ /* ===================================================================== PAV. 03 · #rdo (RDO digital + add-on de voz) Base: seção "IA no RDO" do conceito C, agora operável. 01 Fala (foto + waveform em canvas + transcrição + controles) 02 Interpreta (apontamento estruturado) · 03 Registra (RDO no celular) Tudo escopado por #rdo. Estados em .rdo-palco[data-estado]: repouso | falando | lendo | interpretando | registrado | erro ===================================================================== */ #rdo{--rdo-gap:clamp(16px,1.9vw,28px);--rdo-ptt-h:52px} /* bloco inteiro ocupa a altura útil: cabeçalho, palco (cresce) e rodapé */ #rdo .rdo{display:flex;flex-direction:column;justify-content:center;min-height:var(--secao-util)} #rdo .rdo-head{flex:none} #rdo .rdo-head .h2{max-width:15.5em} /* --------------------------------------------------------------------- Palco: 3 colunas no desktop --------------------------------------------------------------------- */ #rdo .rdo-palco{ --fone-w:clamp(128px,(100svh - 470px) * .463,250px); position:relative;flex:1 1 0;min-height:300px;max-height:540px; display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr); column-gap:var(--rdo-gap);margin-top:clamp(18px,3.4svh,40px)} #rdo .rdo-col{display:flex;flex-direction:column;min-width:0;min-height:0} #rdo .regua{flex:none;margin-bottom:clamp(10px,1.6svh,14px)} /* --------------------------------------------------------------------- 01 FALA: foto do canteiro com áudio --------------------------------------------------------------------- */ #rdo .rdo-voz-moldura{--cantos-off:8px;flex:1 1 0;min-height:0} #rdo .rdo-voz{ --veu:linear-gradient(180deg,rgba(14,15,14,.82) 0%,rgba(14,15,14,.72) 10%,rgba(14,15,14,.22) 26%,rgba(14,15,14,.30) 36%,rgba(14,15,14,.84) 60%,rgba(14,15,14,.94) 100%); --foto-pos:52% 40%; height:100%;display:flex;flex-direction:column;justify-content:space-between; border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair-2),0 0 0 1px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.6)} #rdo .rdo-voz::after{border-radius:inherit} #rdo .rdo-voz__top{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0} #rdo .rdo-voz__fig{text-align:right} #rdo .rdo-voz__corpo{position:relative;z-index:4;padding:0 clamp(18px,2.2vw,32px) clamp(16px,2.8svh,28px)} /* pílula de estado (sem vidro: fundo opaco) */ #rdo .rdo-pill{display:inline-flex;align-items:center;gap:8px;height:30px;max-width:100%;padding:0 12px 0 10px;border-radius:999px; background:rgba(20,21,20,.84);box-shadow:inset 0 0 0 1px var(--hair-3); font:600 .75rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on);white-space:nowrap} #rdo .rdo-pill__t{min-width:0;overflow:hidden;text-overflow:ellipsis} #rdo .rdo-pill__dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-2);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)} #rdo .rdo-pill__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px var(--green);opacity:0} #rdo [data-estado="falando"] .rdo-pill__dot{background:var(--green);box-shadow:none} #rdo [data-estado="falando"] .rdo-pill__dot::after{animation:rdo-anel 1s var(--ease) infinite} #rdo [data-estado="lendo"] .rdo-pill__dot,#rdo [data-estado="interpretando"] .rdo-pill__dot{background:#fff;box-shadow:none} #rdo [data-estado="registrado"] .rdo-pill__dot{background:var(--green);box-shadow:0 0 0 3px rgba(91,187,91,.22)} @keyframes rdo-anel{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}} #rdo .rdo-so-mob{display:none} /* waveform (canvas) */ #rdo .rdo-onda{display:block;width:100%;height:clamp(30px,5svh,48px);margin-bottom:clamp(8px,1.6svh,16px)} /* transcrição palavra por palavra, com os tokens numerados */ #rdo .rdo-dica{margin:0 0 6px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--on-2)} #rdo .rdo-frase{--fs:clamp(1.5rem,.85rem + 1.55vw,2.5rem);margin:0;padding-bottom:12px;font:500 calc(var(--fs) * var(--type-h-scale,1))/1.42 var(--f-d);letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere;text-wrap:balance} #rdo .rdo-frase[data-len="m"]{--fs:clamp(1.25rem,.8rem + 1.1vw,1.875rem)} #rdo .rdo-frase[data-len="g"]{--fs:clamp(1.0625rem,.75rem + .8vw,1.5rem)} #rdo .rdo-frase .q{color:var(--on-3)} #rdo .rdo-frase .w{position:relative;display:inline-block;transition:opacity .28s var(--ease),color .4s var(--ease)} #rdo .rdo-frase .w.is-off,#rdo .rdo-frase .q.is-off{opacity:0} #rdo .rdo-frase .w[data-n]{margin-right:.04em} /* sublinhado verde e selo numerado (1 atividade, 2 quantidade, 3 unidade, 4 data) */ #rdo .rdo-frase .w[data-n]::before{content:"";position:absolute;left:0;right:0;bottom:.04em;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} #rdo .rdo-frase .w[data-n]::after{content:attr(data-n);position:absolute;left:0;top:calc(100% - 3px);display:grid;place-items:center;width:15px;height:15px;border-radius:3px; background:var(--green);color:var(--ink);font:600 .625rem/1 var(--f-l);letter-spacing:0;opacity:0;transform:translateY(-3px);transition:opacity .4s var(--ease),transform .4s var(--ease)} #rdo .rdo-frase .w.is-tag::after{opacity:1;transform:none} #rdo .rdo-frase .w.is-tag::before{transform:none} #rdo .rdo-frase.is-tagged .w:not([data-n]){color:rgba(255,255,255,.62)} /* repouso: o exemplo aparece como molde (fantasma) */ #rdo .rdo-frase.is-fantasma{color:var(--on-3)} #rdo .rdo-frase.is-fantasma .w[data-n]::before{transform:none;background:repeating-linear-gradient(90deg,rgba(91,187,91,.75) 0 4px,transparent 4px 7px)} #rdo .rdo-frase.is-fantasma .w[data-n]::after{opacity:1;transform:none;background:rgba(20,21,20,.6);box-shadow:inset 0 0 0 1px rgba(91,187,91,.75);color:var(--green-soft)} #rdo .rdo-caret{display:inline-block;width:2px;height:.8em;margin:0 2px 0 3px;background:var(--green);vertical-align:-.06em;animation:rdo-pisca 1s steps(1) infinite} @keyframes rdo-pisca{50%{opacity:0}} /* mensagem educada quando o texto não é entendido */ #rdo .rdo-aviso{display:flex;gap:10px;max-width:46ch;margin:0 0 4px;font:400 .9375rem/1.45 var(--f-t);color:var(--on)} #rdo .rdo-aviso::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-2); background:linear-gradient(var(--on),var(--on)) 50% 4px/1.5px 1.5px no-repeat,linear-gradient(var(--on),var(--on)) 50% 7px/1.5px 5px no-repeat} /* console: segurar para falar + digitar */ #rdo .rdo-console{flex:none;display:flex;align-items:stretch;gap:10px;margin-top:12px} #rdo .rdo-ptt{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--rdo-ptt-h);padding:0 20px 0 16px; border:0;border-radius:999px;background:var(--green);color:var(--ink);font:600 .9375rem/1 var(--f-d);white-space:nowrap;cursor:pointer; touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.16),0 0 0 1px rgba(20,22,20,.30),0 1px 2px rgba(10,10,10,.30),0 6px 14px -6px rgba(10,10,10,.45); transition:background-color .18s var(--ease),transform .18s var(--ease)} #rdo .rdo-ptt:hover{background:var(--green-hi)} #rdo .rdo-ptt[aria-pressed="true"]{background:var(--green-hi);transform:scale(.98)} #rdo .rdo-ptt::after{content:"";position:absolute;inset:-6px;border-radius:inherit;box-shadow:0 0 0 2px rgba(91,187,91,.6);opacity:0;pointer-events:none} #rdo .rdo-ptt[aria-pressed="true"]::after{animation:rdo-onda-btn 1.1s var(--ease) infinite} @keyframes rdo-onda-btn{from{opacity:.9;transform:scale(.97)}to{opacity:0;transform:scale(1.07)}} #rdo .rdo-ptt__ico{width:20px;height:20px;flex:none} #rdo .rdo-ptt__t{display:inline-block;min-width:9.3em;text-align:left} #rdo .rdo-campo{position:relative;flex:1 1 auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;column-gap:6px; height:var(--rdo-ptt-h);padding:0 6px 0 16px;border-radius:12px;background:rgba(236,240,232,.05);box-shadow:inset 0 0 0 1px var(--hair-3); transition:box-shadow .2s var(--ease),background-color .2s var(--ease)} #rdo .rdo-campo:hover{box-shadow:inset 0 0 0 1px rgba(236,240,232,.28)} #rdo .rdo-campo:focus-within{background:rgba(236,240,232,.07);box-shadow:inset 0 0 0 2px var(--green)} #rdo .rdo-campo.is-erro{box-shadow:inset 0 0 0 1px rgba(236,240,232,.55)} #rdo .rdo-campo.is-erro:focus-within{box-shadow:inset 0 0 0 2px var(--green)} #rdo .rdo-campo__k{grid-column:1;grid-row:1;align-self:end;padding-bottom:3px;font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2);cursor:text} #rdo .rdo-campo__in{grid-column:1;grid-row:2;align-self:start;width:100%;min-width:0;height:24px;margin:0;padding:0;border:0;border-radius:0;background:none; font:400 .9375rem/24px var(--f-t);color:var(--on);outline:none;-webkit-appearance:none;appearance:none} #rdo .rdo-campo__in::placeholder{color:var(--on-3);opacity:1} #rdo .rdo-campo__in:focus-visible{outline:none} #rdo .rdo-campo__ok{grid-column:2;grid-row:1 / 3;align-self:center;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:8px; background:rgba(236,240,232,.08);color:var(--on);cursor:pointer;transition:background-color .18s var(--ease),color .18s var(--ease)} #rdo .rdo-campo__ok:hover{background:var(--green);color:var(--ink)} #rdo .rdo-campo__ok svg{width:16px;height:16px} #rdo .rdo-campo__ok:focus-visible{outline-offset:1px} /* --------------------------------------------------------------------- 02 INTERPRETA: apontamento estruturado (painel branco) --------------------------------------------------------------------- */ #rdo .rdo-card{flex:1 1 0;min-height:0;display:flex;flex-direction:column} #rdo .rdo-card .ui-ctx b{color:var(--green-ink)} #rdo .rdo-chip{gap:0;transition:background-color .3s var(--ease),color .3s var(--ease)} #rdo .rdo-chip .rdo-so-desk{white-space:pre} #rdo .rdo-campos{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0;padding:0 16px;background:#fff} #rdo .rdo-f{flex:1 1 0;min-height:36px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-inline:-16px;padding:6px 16px; box-shadow:0 1px 0 var(--hair-1l);transition:background-color .6s var(--ease)} #rdo .rdo-f:last-child{box-shadow:none} #rdo .rdo-f.is-quente{background:rgba(91,187,91,.10)} #rdo .rdo-f dt{display:flex;align-items:center;gap:10px;font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #rdo .rdo-n{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:4px;background:rgba(91,187,91,.16);color:var(--green-ink); font:600 .6875rem/1 var(--f-l);letter-spacing:0;transition:background-color .4s var(--ease),color .4s var(--ease)} #rdo .rdo-f.is-on .rdo-n{background:var(--green);color:var(--ink)} #rdo .rdo-f dd{margin:0;display:grid;justify-items:end;align-items:center;min-width:0;text-align:right} #rdo .rdo-f dd > *{grid-area:1 / 1} #rdo .rdo-ph{width:64px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(42,41,41,.2) 0 3px,transparent 3px 6px);transition:opacity .3s var(--ease)} #rdo .rdo-v{max-width:100%;font:600 1.1875rem/1.15 var(--f-d);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere; opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease),transform .5s var(--ease)} #rdo .rdo-v small{display:block;margin-top:3px;font:500 .75rem/1 var(--f-d);letter-spacing:0;color:var(--ink-2)} #rdo .rdo-f.is-on .rdo-ph{opacity:0} #rdo .rdo-f.is-on .rdo-v{opacity:1;transform:none} #rdo .rdo-ctx{flex:none;margin:0;padding:12px 16px 14px;background:var(--ui-bg);box-shadow:0 -1px 0 var(--hair-1l);display:grid;gap:8px} #rdo .rdo-ctx div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:baseline} #rdo .rdo-ctx dt{font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #rdo .rdo-ctx dd{margin:0;font:400 .8125rem/1.3 var(--f-t);color:var(--ink)} /* --------------------------------------------------------------------- 03 REGISTRA: réplica do RDO no celular (HTML, escala por cqw) --------------------------------------------------------------------- */ #rdo .rdo-fone-fig{flex:1 1 0;min-height:0;margin:0;display:flex;align-items:flex-end;gap:16px} #rdo .rdo-fone{container-type:inline-size;position:relative;flex:none;height:100%;width:var(--fone-w);padding:5px;border-radius:calc(var(--fone-w) * .15);background:#151615; box-shadow:inset 0 0 0 1px rgba(236,240,232,.10),0 0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3),0 20px 40px -12px rgba(0,0,0,.55),0 50px 90px -40px rgba(0,0,0,.6)} #rdo .rdo-fone__cap{width:8.6em;padding-bottom:2px} #rdo .rdo-fone__cap .fig__n{display:block;margin:0 0 6px} #rdo .rdo-fone__tela{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--fone-w) * .15 - 5px);background:#f4f6f8;color:var(--ink); display:flex;flex-direction:column;font:400 3.4cqw/1.3 var(--f-t)} #rdo .rdo-fone__tela::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9cqw;background:linear-gradient(rgba(244,246,248,0),#f4f6f8 70%);pointer-events:none} #rdo .rf-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:10cqw;padding:0 6.4cqw;background:#1f372f;color:#fff;font:600 4.4cqw/1 var(--f-d)} #rdo .rf-ico{width:15cqw;height:auto} #rdo .rf-app{flex:none;display:flex;align-items:center;gap:2.6cqw;margin:2.6cqw 2.6cqw 0;padding:2.4cqw 3cqw;border-radius:2.6cqw;background:#fff;box-shadow:0 .5cqw 2cqw rgba(42,41,41,.10)} #rdo .rf-menu{display:grid;gap:.9cqw;width:4.6cqw} #rdo .rf-menu i{display:block;height:.6cqw;border-radius:.4cqw;background:var(--ink)} #rdo .rf-ctx{flex:1;min-width:0;display:grid;text-align:center} #rdo .rf-ctx small{font:400 2.5cqw/1.2 var(--f-t);color:var(--ink-2)} #rdo .rf-ctx b{font:600 3.6cqw/1.2 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #rdo .rf-sino{width:4.8cqw;height:4.8cqw;color:var(--ink)} #rdo .rf-avatar{position:relative;width:6.6cqw;height:6.6cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,#b9bcbf 0 20%,transparent 21%),radial-gradient(ellipse at 50% 100%,#b9bcbf 0 42%,transparent 43%),#dfe1e3} #rdo .rf-avatar::after{content:"";position:absolute;right:-.3cqw;bottom:-.3cqw;width:2cqw;height:2cqw;border-radius:50%;background:var(--green);box-shadow:0 0 0 .5cqw #fff} #rdo .rf-rdo{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;margin:3.4cqw 4.4cqw 2cqw;font:600 3.2cqw/1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #rdo .rf-rdo b{color:var(--ink);letter-spacing:.1em} #rdo .rf-sec{flex:none;margin:0 2.6cqw 2.6cqw;padding:3cqw 3.2cqw 3.2cqw;border-radius:2.6cqw;background:#fff;box-shadow:0 .5cqw 2cqw rgba(42,41,41,.08)} #rdo .rf-sec__h{display:flex;align-items:center;justify-content:space-between;gap:2cqw} #rdo .rf-sec__h b{font:600 4.4cqw/1 var(--f-l);letter-spacing:.01em;color:var(--green-ink)} #rdo .rf-add{display:inline-flex;align-items:center;gap:1.2cqw;height:6.2cqw;padding:0 2.4cqw 0 2cqw;border-radius:1.6cqw;background:var(--green);color:var(--ink);font:600 2.7cqw/1 var(--f-d);white-space:nowrap} #rdo .rf-add::before{content:"";width:2.4cqw;height:2.4cqw;background:linear-gradient(currentColor,currentColor) 50% 50%/100% .5cqw no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/.5cqw 100% no-repeat} #rdo .rf-tab{display:grid;grid-auto-flow:column;grid-auto-columns:auto;margin-top:2.6cqw;border:1px solid #ced0d1;border-radius:.6cqw;overflow:hidden;font:600 2.6cqw/1 var(--f-l);color:#5f626b} #rdo .rf-tab span{padding:1.8cqw 1.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #rdo .rf-tab span + span{border-left:1px solid #ced0d1} #rdo .rf-lista{list-style:none;margin:2.4cqw 0 0;padding:0} #rdo .rf-vazio{padding:2.6cqw 1cqw;border-top:1px dashed #cfd3cd;font:400 3.1cqw/1.3 var(--f-t);font-style:italic;color:#5f626b} #rdo .rf-item{display:grid;grid-template-columns:6.2cqw minmax(0,1fr);column-gap:2.4cqw;align-items:center;padding:1.8cqw 1.2cqw;border-top:1px solid #e3e6e1;transition:background-color 1.2s var(--ease)} #rdo .rf-item.is-quente{background:rgba(91,187,91,.16)} #rdo .rf-item.is-novo{animation:rdo-entra .6s var(--ease) both} @keyframes rdo-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} #rdo .rf-item__ck{grid-row:1 / 3;display:grid;place-items:center;width:6.2cqw;height:6.2cqw;border-radius:50%;background:var(--green);color:var(--ink)} #rdo .rf-item__ck svg{width:4cqw;height:4cqw} #rdo .rf-item__ck path{stroke-dasharray:12;stroke-dashoffset:0} #rdo .rf-item.is-novo .rf-item__ck path{animation:rdo-ck .5s var(--ease) .25s both} @keyframes rdo-ck{from{stroke-dashoffset:12}to{stroke-dashoffset:0}} #rdo .rf-item__t{min-width:0;font:600 4.3cqw/1.15 var(--f-d);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #rdo .rf-item__s{min-width:0;font:500 3.4cqw/1.25 var(--f-d);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #rdo .rf-home{position:absolute;z-index:2;left:50%;bottom:2cqw;width:34cqw;height:1.2cqw;border-radius:1cqw;background:#151615;transform:translateX(-50%)} /* --------------------------------------------------------------------- Rodapé da seção --------------------------------------------------------------------- */ #rdo .rdo-pe{flex:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 24px;margin-top:clamp(16px,3svh,32px);padding-top:clamp(12px,2.2svh,20px);box-shadow:0 -1px 0 var(--hair-2)} #rdo .rdo-pe .nota-sim{margin-left:auto} /* --------------------------------------------------------------------- Desktop baixo (1366x768 e afins) --------------------------------------------------------------------- */ @media (min-width:900px) and (max-height:800px){ #rdo .rdo-ctx div:nth-child(2){display:none} #rdo .rdo-ctx{padding:10px 16px 11px} #rdo .rdo-voz__top{padding:12px 14px 0} #rdo{--rdo-ptt-h:48px} } @media (min-width:900px) and (max-height:700px){ #rdo .rdo-ctx{display:none} } /* tablet largo: colunas mais justas */ @media (min-width:900px) and (max-width:1180px){ #rdo .rdo-palco{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto} #rdo .rdo-fone__cap{display:none} #rdo .rdo-ptt{padding:0 16px 0 14px} #rdo .rdo-ptt__t{min-width:0} } /* --------------------------------------------------------------------- Celular e tablet estreito: fluxo empilhado compacto réguas (3) / foto com o microfone / campo / apontamento + celular --------------------------------------------------------------------- */ @media (max-width:899.98px){ #rdo{--rdo-ptt-h:48px} #rdo .rdo-head .h2{--h2:calc(clamp(1.75rem,.9rem + 3.6vw,2.375rem) * var(--type-h-scale,1));max-width:none} #rdo .rdo-palco{ --fone-w:clamp(84px,(100svh - 560px) * .463,150px); flex:1 1 auto;max-height:620px;min-height:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--fone-w);grid-template-rows:auto auto auto minmax(150px,1fr); column-gap:10px;margin-top:clamp(14px,2.4svh,24px)} #rdo .rdo-col,#rdo .rdo-console{display:contents} #rdo .regua{grid-row:1;margin-bottom:10px;padding-top:9px;gap:6px;font-size:.6875rem;letter-spacing:.08em;white-space:nowrap} #rdo .rdo-col--fala .regua{grid-column:1} #rdo .rdo-col--interpreta .regua{grid-column:2} #rdo .rdo-col--registra .regua{grid-column:3} #rdo .rdo-voz-moldura{grid-column:1 / -1;grid-row:2;min-height:auto;--cantos-off:6px} #rdo .rdo-voz{--veu:linear-gradient(180deg,rgba(14,15,14,.78) 0%,rgba(14,15,14,.80) 40%,rgba(14,15,14,.9) 100%);height:auto;min-height:clamp(118px,17svh,160px)} #rdo .rdo-voz__top{padding:10px 64px 0 10px} #rdo .rdo-voz__fig,#rdo .rdo-dica,#rdo .rdo-so-desk{display:none} #rdo .rdo-so-mob{display:inline} #rdo .rdo-voz__corpo{padding:6px 14px 10px} #rdo .rdo-onda{height:22px;margin-bottom:4px} #rdo .rdo-frase,#rdo .rdo-frase[data-len]{--fs:clamp(1.125rem,.7rem + 2.2vw,1.375rem);line-height:1.5;padding-bottom:8px} #rdo .rdo-frase[data-len="g"]{--fs:1rem} #rdo .rdo-frase .w[data-n]::after{width:13px;height:13px;font-size:.5625rem;top:calc(100% - 4px)} #rdo .rdo-aviso{font-size:.875rem;line-height:1.4;margin-bottom:2px} /* microfone no canto superior direito da foto (mesma célula do grid) */ #rdo .rdo-ptt{grid-column:1 / -1;grid-row:2;align-self:start;justify-self:end;z-index:5;width:48px;height:48px;margin:8px 8px 0 0;padding:0;border-radius:50%} #rdo .rdo-ptt__ico{width:22px;height:22px} #rdo .rdo-ptt__t{position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} #rdo .rdo-campo{grid-column:1 / -1;grid-row:3;margin:10px 0 10px;padding:0 4px 0 14px} #rdo .rdo-campo__in{font-size:1rem} #rdo .rdo-campo__ok{width:40px;height:40px} #rdo .rdo-card{grid-column:1 / 3;grid-row:4;min-height:0} #rdo .rdo-card .ui-sym,#rdo .rdo-card .ui-ctx small,#rdo .rdo-ctx{display:none} #rdo .rdo-card .ui-head{padding:8px 10px;gap:8px} #rdo .rdo-card .ui-ctx b{font-size:.8125rem} #rdo .rdo-chip{height:20px;padding:0 6px;font-size:.625rem} #rdo .rdo-campos{padding:0 10px} #rdo .rdo-f{min-height:30px;gap:8px;margin-inline:-10px;padding:4px 10px} #rdo .rdo-f dt{gap:7px;font-size:.625rem;letter-spacing:.08em} #rdo .rdo-n{width:16px;height:16px;font-size:.625rem} #rdo .rdo-v{font-size:1rem} #rdo .rdo-v small{display:none} #rdo .rdo-ph{width:40px} #rdo .rdo-fone-fig{grid-column:3;grid-row:4;min-height:0;justify-content:flex-end} #rdo .rdo-fone{padding:3px} #rdo .rdo-fone__tela{border-radius:calc(var(--fone-w) * .15 - 3px)} #rdo .rdo-fone__cap{display:none} #rdo .rdo-pe{display:grid;gap:4px;margin-top:clamp(12px,2svh,18px);padding-top:10px} #rdo .rdo-pe .apoio{font-size:.9375rem} #rdo .rdo-pe .nota-sim{margin-left:0;font-size:.625rem} } @media (max-width:899.98px) and (max-height:760px){ #rdo .eyebrow-row{margin-bottom:10px} #rdo .rdo-palco{margin-top:12px} #rdo .rdo-voz{min-height:0} #rdo .rdo-f{min-height:28px} } /* celular baixo (320x640 e afins): tudo mais justo, alvos de toque ainda com 44px */ @media (max-width:899.98px) and (max-height:680px){ #rdo{--rdo-ptt-h:44px} #rdo .eyebrow-row{margin-bottom:8px} #rdo .rdo-palco{margin-top:10px;grid-template-rows:auto auto auto minmax(124px,1fr)} #rdo .regua{padding-top:7px;margin-bottom:6px} #rdo .rdo-voz__top{padding:7px 58px 0 8px} #rdo .rdo-pill{height:26px;padding:0 10px 0 8px;gap:6px;font-size:.6875rem} #rdo .rdo-ptt{width:44px;height:44px;margin:6px 6px 0 0} #rdo .rdo-onda{height:16px;margin-bottom:2px} #rdo .rdo-voz__corpo{padding:2px 12px 6px} #rdo .rdo-frase,#rdo .rdo-frase[data-len]{--fs:1rem;padding-bottom:7px} #rdo .rdo-campo{margin:8px 0} #rdo .rdo-card .ui-head{padding:6px 10px} #rdo .rdo-f{min-height:22px;padding:2px 10px} #rdo .rdo-v{font-size:.9375rem} #rdo .rdo-pe{margin-top:10px;padding-top:8px;gap:2px} #rdo .rdo-pe .apoio{font-size:.875rem} } /* celular deitado (altura baixa): volta a 3 colunas lado a lado */ @media (min-width:600px) and (max-width:899.98px) and (max-height:500px){ #rdo .rdo-palco{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) var(--fone-w);grid-template-rows:auto minmax(96px,1fr) auto;column-gap:14px} #rdo .rdo-voz-moldura,#rdo .rdo-ptt{grid-column:1;grid-row:2} #rdo .rdo-campo{grid-column:1;grid-row:3;margin:8px 0 0} #rdo .rdo-card{grid-column:2;grid-row:2 / 4} #rdo .rdo-fone-fig{grid-column:3;grid-row:2 / 4} #rdo .rdo-voz{min-height:0;height:100%} #rdo .rdo-pe{display:flex;align-items:baseline;gap:4px 16px} #rdo .rdo-pe .nota-sim{margin-left:auto} } @media (max-width:359.98px){ #rdo .regua .num{display:none} #rdo .rdo-chip{display:none} #rdo .rdo-pe .nota-sim{letter-spacing:.05em} } /* ---- sections/medicoes.css ---- */ /* ===================================================================== PAV. 04 · #medicoes (claro, papel #ecf0e8, prancha) Tabela de medição com as linhas do dataset; o visitante marca o que entra no período, envia para aprovação e aprova como contratante. Tudo escopado por #medicoes. ===================================================================== */ #medicoes{ --med-row:34px; /* altura da linha de tarefa */ --med-etapa:26px; /* faixa de etapa */ --med-th:34px; /* cabeçalho da tabela */ --med-tinta:#2a2929; --med-cinza:#53575b; --med-faixa:#e7eae4; /* faixa de etapa (cinza do app, no tom do papel) */ --med-hover:#f6f8f3; overflow-x:clip; } /* grão fino de papel (prancha) */ #medicoes::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--noise);background-size:180px;opacity:.05;mix-blend-mode:multiply} /* ---------- layout: texto | prancha ---------- */ #medicoes .med{display:grid;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr); grid-template-areas:"txt fig" "cta fig";grid-template-rows:auto 1fr;column-gap:clamp(36px,4.2vw,72px);align-items:start} #medicoes .med__txt{grid-area:txt;min-width:0} #medicoes .med__fig{grid-area:fig;min-width:0} #medicoes .med__cta{grid-area:cta;align-self:end;margin-top:clamp(18px,3svh,28px)} #medicoes .eyebrow{margin-bottom:clamp(14px,2.2svh,20px)} #medicoes .med__lead{margin-top:clamp(14px,2.2svh,20px);max-width:32ch} /* ---------- fluxo da medição (carimbo de prancha) ---------- */ #medicoes .med__fluxo{margin-top:clamp(22px,4svh,40px);max-width:360px} #medicoes .med__fluxo .regua{color:var(--ink)} #medicoes .med__passos{list-style:none;margin:12px 0 0;padding:0;display:grid;box-shadow:inset 0 1px 0 var(--hair-3l),inset 0 -1px 0 var(--hair-3l)} #medicoes .med__passo{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:start;gap:0 10px;padding:11px 0; box-shadow:inset 0 -1px 0 var(--hair-2l);transition:color .4s var(--ease)} #medicoes .med__passo:last-child{box-shadow:none} #medicoes .med__pn{font:600 .75rem/1.35 var(--f-l);letter-spacing:.08em;color:var(--med-cinza);padding-top:1px} #medicoes .med__pt{display:grid;gap:2px;font:600 .9375rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--med-cinza)} #medicoes .med__pq{font:400 .8125rem/1.35 var(--f-t);letter-spacing:0;color:var(--med-cinza)} #medicoes .med__ph{display:inline-flex;align-items:center;gap:6px;font:600 .75rem/1.35 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--med-cinza);font-variant-numeric:tabular-nums;padding-top:1px;white-space:nowrap} /* marcador do passo: barra fina à esquerda, verde só no atual */ #medicoes .med__passo::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:2px;border-radius:1px;background:transparent;transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease),background-color .3s var(--ease)} #medicoes .med__passo[data-est="atual"]::before{background:var(--green-ink);transform:none} #medicoes .med__passo[data-est="atual"] .med__pn, #medicoes .med__passo[data-est="atual"] .med__pt, #medicoes .med__passo[data-est="atual"] .med__ph{color:var(--green-ink)} #medicoes .med__passo[data-est="feito"] .med__pt, #medicoes .med__passo[data-est="feito"] .med__pn, #medicoes .med__passo[data-est="feito"] .med__ph{color:var(--med-tinta)} /* passo cumprido: check fino antes da hora */ #medicoes .med__passo[data-est="feito"] .med__ph::before{content:"";width:12px;height:12px;flex:none;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6 6.4 11.8 13 4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6 6.4 11.8 13 4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} /* ---------- painel ---------- */ #medicoes .med__panel{--cantos-off:10px;overflow:visible;background:#fff} #medicoes .med__panel > .ui-head{border-radius:12px 12px 0 0} #medicoes .med__panel > .ui-foot{border-radius:0 0 12px 12px} #medicoes .med__chip{transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)} #medicoes .med__chip.is-aguarda{background:#fff;color:var(--med-tinta);box-shadow:inset 0 0 0 1px rgba(42,41,41,.42)} #medicoes .med__chip.is-ok{background:rgba(91,187,91,.16);color:var(--green-ink)} #medicoes .med__chip--m{display:none} #medicoes .med__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:40px;padding:8px 14px;background:#fff;box-shadow:0 1px 0 var(--hair-1l)} #medicoes .med__conta{font:400 .75rem/1.3 var(--f-t);color:var(--med-cinza)} #medicoes .med__conta b{font:600 .8125rem/1 var(--f-d);color:var(--med-tinta)} #medicoes .med__trava{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--med-cinza)} #medicoes .med__trava svg{width:13px;height:13px} /* ---------- tabela ---------- */ #medicoes .med__tab{background:#fff} #medicoes .med-t{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;font:400 .8125rem/1.25 var(--f-t);color:var(--med-tinta)} #medicoes .k-chk{width:42px} #medicoes .k-cod{width:52px} #medicoes .k-und{width:44px} #medicoes .k-qtd{width:86px} #medicoes .k-pu{width:110px} #medicoes .k-med{width:94px} #medicoes .k-val{width:128px} #medicoes .med-t th{height:var(--med-th);padding:0 10px;background:var(--ui-bg);text-align:left;vertical-align:middle;white-space:nowrap; font:600 .6875rem/1.15 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--med-cinza);box-shadow:inset 0 -1px 0 var(--hair-2l)} #medicoes .med-t td{height:var(--med-row);padding:4px 10px;vertical-align:middle;box-shadow:inset 0 -1px 0 var(--hair-1l);transition:background-color .25s var(--ease),color .25s var(--ease)} #medicoes .med-t th.c-n,#medicoes .med-t td.c-n{text-align:right} #medicoes .med-t th.c-chk,#medicoes .med-t td.c-chk{padding:0 0 0 14px} #medicoes .med-t th:last-child,#medicoes .med-t td:last-child{padding-right:14px} #medicoes .med-t td.c-cod{font:600 .8125rem/1.2 var(--f-d);color:var(--med-tinta);white-space:nowrap} #medicoes .med-t td.c-und{font:500 .8125rem/1.2 var(--f-d);color:var(--med-cinza)} #medicoes .med-t td.c-n{font:500 .8125rem/1.2 var(--f-d);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} #medicoes .med-t td.c-val{font-weight:600} #medicoes .med-t td.c-qtd,#medicoes .med-t td.c-pu{color:#3d4043} /* linha de tarefa marcável */ #medicoes .med-r[data-cod]:not(.med-r--zero){cursor:pointer} #medicoes .med-r[data-cod]:not(.med-r--zero):hover td{background:var(--med-hover)} #medicoes .med-r.is-fora td{color:var(--med-cinza)} #medicoes .med-r.is-fora td.c-val,#medicoes .med-r.is-fora td.c-med{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(42,41,41,.55)} /* linha sem quantidade medida neste período */ #medicoes .med-r--zero td,#medicoes .med-r--zero td.c-cod,#medicoes .med-r--zero td.c-qtd,#medicoes .med-r--zero td.c-pu{color:var(--med-cinza)} /* faixa de etapa (como no app) */ #medicoes .med-r--etapa td{height:var(--med-etapa);padding-block:0;background:var(--med-faixa);font:600 .8125rem/1.2 var(--f-d);color:var(--med-tinta);box-shadow:none} /* transporte: soma dos itens acima do trecho da tela */ #medicoes .med-r--transp td{background:#fafbf9;color:var(--med-cinza)} #medicoes .med-r--transp td.c-tar{font-style:italic} #medicoes .med-r--transp td.c-tar .num{font:600 .8125rem/1 var(--f-d);font-style:normal;color:var(--med-tinta)} #medicoes .med-r--transp td.c-val{color:var(--med-tinta)} #medicoes .med-lock{width:14px;height:14px;margin-left:3px;color:var(--med-cinza)} /* varredura de consolidação (entrada) */ #medicoes .med-r.is-soma td{animation:med-soma .9s var(--ease) both;animation-delay:var(--sd,0ms)} @keyframes med-soma{0%{background-color:rgba(91,187,91,0)}30%{background-color:rgba(91,187,91,.14)}100%{background-color:rgba(91,187,91,0)}} /* checkbox real (área de toque: célula inteira + linha) */ #medicoes .med-hit{display:grid;place-items:center start;min-height:min(32px,var(--med-row));cursor:pointer} #medicoes .med-chk{appearance:none;-webkit-appearance:none;display:block;flex:none;width:20px;height:20px;margin:0;border-radius:5px;cursor:pointer; background:#fff center/14px 14px no-repeat;box-shadow:inset 0 0 0 1.5px #6b6f73; transition:background-color .18s var(--ease),box-shadow .18s var(--ease)} #medicoes .med-chk:hover{box-shadow:inset 0 0 0 1.5px var(--med-tinta)} #medicoes .med-chk:checked{background-color:var(--green-ink);box-shadow:inset 0 0 0 1.5px var(--green-ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.3 12.6 4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} #medicoes .med-chk:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px} #medicoes .med-chk:disabled{cursor:not-allowed;opacity:.55} #medicoes .med__panel:not([data-estado="edicao"]) .med-r[data-cod]{cursor:default} #medicoes .med__panel:not([data-estado="edicao"]) .med-r[data-cod]:hover td{background:transparent} #medicoes .med__panel:not([data-estado="edicao"]) .med-hit{cursor:not-allowed} #medicoes .med__zeros,#medicoes .med-x,#medicoes .med-fig-m{display:none} /* ---------- total + ações ---------- */ #medicoes .med__fim{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"acoes soma";align-items:center;gap:10px 16px; padding:12px 14px;background:#fff;box-shadow:inset 0 1px 0 var(--hair-3l)} #medicoes .med__soma{grid-area:soma;display:flex;align-items:baseline;gap:12px;margin:0} #medicoes .med__soma-k{font:600 .75rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--med-cinza)} #medicoes .med__soma-v{font:600 1.5rem/1 var(--f-d);letter-spacing:-.015em;color:var(--med-tinta);font-variant-numeric:tabular-nums lining-nums;min-width:8.6em;text-align:right} #medicoes .med__acoes{grid-area:acoes;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:44px} #medicoes .med__btn{min-height:40px;padding:0 14px 0 16px;font-size:.875rem} #medicoes .med__btn .btn__arr{width:15px;height:15px;transition:transform .32s var(--ease)} #medicoes .med__btn:hover .btn__arr{transform:translateX(3px)} #medicoes .med__como{margin-left:2px;padding:3px 6px;border-radius:4px;background:rgba(42,41,41,.12);font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase} #medicoes .med__reini{min-height:40px;font-size:.8125rem} /* carimbo de aprovação: régua dupla, como carimbo de prancha */ #medicoes .med__carimbo{display:grid;gap:3px;margin:0;padding:6px 12px;border-radius:4px;color:var(--green-ink); box-shadow:inset 0 0 0 1.5px var(--green-ink),inset 0 0 0 3.5px #fff,inset 0 0 0 4.5px rgba(45,110,49,.7)} #medicoes .med__carimbo b{font:600 .875rem/1 var(--f-l);letter-spacing:.14em;text-transform:uppercase} #medicoes .med__carimbo span{font:600 .625rem/1.1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums} #medicoes .med__carimbo.is-in{animation:med-carimbo .55s var(--ease) both} @keyframes med-carimbo{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}} #medicoes .med__panel .ui-foot{justify-content:space-between} #medicoes .med__dica{font:400 .75rem/1.3 var(--f-t);color:var(--med-cinza)} /* ---------- telas grandes e altas: a prancha ganha escala ---------- */ @media (min-width:1600px) and (min-height:1000px){ #medicoes{--med-row:40px;--med-etapa:30px;--med-th:38px} #medicoes .med-t,#medicoes .med-t td.c-n,#medicoes .med-t td.c-cod,#medicoes .med-t td.c-und,#medicoes .med-r--etapa td{font-size:.875rem} #medicoes .med-t th{font-size:.75rem} #medicoes .med__panel .ui-head{padding:14px 16px} #medicoes .med__bar{min-height:46px;padding-inline:16px} #medicoes .med__fim{padding:14px 16px} #medicoes .med__soma-v{font-size:1.75rem} #medicoes .med__btn,#medicoes .med__reini{min-height:44px} #medicoes .med__btn{font-size:.9375rem;padding:0 16px 0 18px} #medicoes .ui-foot{padding:12px 16px} #medicoes .k-chk{width:48px} #medicoes .k-cod{width:58px} #medicoes .k-und{width:50px} #medicoes .k-qtd{width:100px} #medicoes .k-pu{width:126px} #medicoes .k-med{width:110px} #medicoes .k-val{width:146px} #medicoes .med-t th.c-chk,#medicoes .med-t td.c-chk{padding-left:16px} #medicoes .med-t th:last-child,#medicoes .med-t td:last-child{padding-right:16px} } /* ---------- desktop baixo ---------- */ @media (max-height:800px){ #medicoes{--med-row:30px;--med-etapa:23px;--med-th:30px} #medicoes .med__bar{min-height:36px;padding-block:6px} #medicoes .med__fim{padding-block:8px} #medicoes .med__soma-v{font-size:1.375rem} #medicoes .med__panel .ui-head{padding-block:9px} #medicoes .med__passo{padding-block:8px} #medicoes .ui-foot{padding-block:8px} } @media (max-height:740px) and (min-width:761px){ #medicoes{--med-row:28px;--med-etapa:22px;--med-th:28px} #medicoes .med__pq{display:none} } @media (max-height:700px) and (min-width:761px){ #medicoes{--med-row:27px;--med-etapa:21px;--med-th:27px} #medicoes .med__pq{display:none} } /* ---------- desktop estreito: colunas mais justas ---------- */ @media (max-width:1399.98px){ #medicoes .k-chk{width:38px} #medicoes .k-cod{width:44px} #medicoes .k-und{width:38px} #medicoes .k-qtd{width:78px} #medicoes .k-pu{width:100px} #medicoes .k-med{width:86px} #medicoes .k-val{width:116px} #medicoes .med-t td,#medicoes .med-t th{padding-inline:8px} } /* ---------- desktop estreito e tablet: colunas compactas ---------- */ @media (min-width:761px) and (max-width:1259.98px){ #medicoes .med-t,#medicoes .med-t td.c-n,#medicoes .med-t td.c-cod,#medicoes .med-t td.c-und,#medicoes .med-r--etapa td{font-size:.78125rem} #medicoes .k-chk{width:36px} #medicoes .k-cod{width:38px} #medicoes .k-und{width:32px} #medicoes .k-qtd{width:74px} #medicoes .k-pu{width:94px} #medicoes .k-med{width:80px} #medicoes .k-val{width:110px} #medicoes .med-t td,#medicoes .med-t th{padding-inline:6px} #medicoes .med-t td{padding-block:3px;line-height:1.16} #medicoes .med-t th.c-chk,#medicoes .med-t td.c-chk{padding-left:12px} #medicoes .med-t th{font-size:.625rem;letter-spacing:.06em} } @media (min-width:1000px) and (max-width:1259.98px){ #medicoes .med{grid-template-columns:clamp(216px,22vw,260px) minmax(0,1fr);column-gap:clamp(24px,2.6vw,32px)} #medicoes .h2{font-size:min(var(--h2),2.75rem)} #medicoes .med__lead{font-size:1.0625rem} } /* ---------- tablet: empilhado ---------- */ @media (max-width:999.98px){ #medicoes .med{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "fig" "cta";grid-template-rows:auto;row-gap:clamp(16px,2.6svh,26px)} #medicoes .med__txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:end} #medicoes .med__txt .eyebrow{grid-column:1 / -1} #medicoes .med__lead{margin-top:0;max-width:40ch} #medicoes .med__fluxo{display:none} #medicoes .med__cta{margin-top:0;padding-bottom:0} } /* ---------- celular: a tabela vira lista de cartões ---------- */ @media (max-width:760px){ #medicoes .med{row-gap:10px} #medicoes .med__txt{display:block} #medicoes .eyebrow{margin-bottom:10px} #medicoes .med__lead{margin-top:6px;font-size:1rem;line-height:1.45} #medicoes .med__panel{--cantos-off:7px} /* contexto da obra vai para a legenda; status desce para o total */ #medicoes .med__panel > .ui-head,#medicoes .med__bar,#medicoes .med__panel > .ui-foot{display:none} #medicoes .med__panel .med__tab{border-radius:12px 12px 0 0} #medicoes .med-t,#medicoes .med-t tbody{display:block} #medicoes .med-t thead,#medicoes .med-t colgroup{display:none} #medicoes .med-r{display:grid;grid-template-columns:26px auto minmax(0,1fr) auto;grid-template-areas:"chk cod tar tar" "chk . med val";align-items:baseline;column-gap:6px;row-gap:1px; padding:3px 12px 3px 10px;box-shadow:inset 0 -1px 0 var(--hair-1l)} #medicoes .med-r td{display:block;height:auto;padding:0!important;box-shadow:none;background:none!important} #medicoes .med-r td.c-chk{grid-area:chk;align-self:center} #medicoes .med-r td.c-cod{grid-area:cod;font:600 .8125rem/1.3 var(--f-d)} #medicoes .med-r td.c-tar{grid-area:tar;font:400 .8125rem/1.3 var(--f-t)} #medicoes .med-r td.c-und,#medicoes .med-r td.c-qtd,#medicoes .med-r td.c-pu{display:none} #medicoes .med-r td.c-med{grid-area:med;justify-self:start;min-width:0;text-align:left;white-space:normal;font:500 .75rem/1.3 var(--f-d);color:var(--med-cinza)} #medicoes .med-x{white-space:nowrap} #medicoes .med-r td.c-med .med-x{display:inline} #medicoes .med-r td.c-val{grid-area:val;font:600 .875rem/1.3 var(--f-d)} #medicoes .med-r[data-cod]:not(.med-r--zero):hover{background:var(--med-hover)} #medicoes .med-r.is-soma{animation:med-soma .9s var(--ease) both;animation-delay:var(--sd,0ms)} #medicoes .med-r.is-soma td{animation:none} #medicoes .med-r--zero,#medicoes .med-r--etapa{display:none} #medicoes .med-r--transp{grid-template-areas:"chk tar tar val";background:#fafbf9;border-radius:12px 12px 0 0;padding-block:6px} #medicoes .med-r--transp td.c-cod,#medicoes .med-r--transp td.c-med,#medicoes .med-xl{display:none} #medicoes .med-hit{min-height:34px;width:36px;margin-left:-8px;padding-left:8px} #medicoes .med-chk{width:19px;height:19px} #medicoes .med-lock{margin-left:2px} #medicoes .med__zeros{display:block;margin:0;padding:6px 12px 6px 42px;font:400 .75rem/1.3 var(--f-t);color:var(--med-cinza);box-shadow:inset 0 -1px 0 var(--hair-1l)} #medicoes .med__fim{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chip soma" "acoes acoes";align-items:center;gap:6px 12px;padding:9px 12px 8px;border-radius:0 0 12px 12px} #medicoes .med__chip--m{display:inline-flex;grid-area:chip;align-self:center;justify-self:start;max-width:100%} #medicoes .med__soma{align-items:baseline;gap:8px;justify-self:end;min-width:0;flex-wrap:wrap;justify-content:flex-end} #medicoes .med__soma-k{font-size:.6875rem} #medicoes .med__soma-v{font-size:1.25rem;min-width:0} #medicoes .med__acoes{justify-content:space-between;min-height:40px} #medicoes .med__fig .fig{margin-top:8px} #medicoes .med-fig-d{display:none} #medicoes .med-fig-m{display:inline} #medicoes .med__cta .btn{--h:46px;width:100%} } @media (max-width:359.98px){ #medicoes .med-xp{display:none} } /* ---- sections/analise.css ---- */ /* ===================================================================== PAV. 05 · #analise (dono: agente da seção) Linha do tempo da obra: scrubber de meses no eixo da Curva S controla KPIs, alerta de prazo e Curva S. Rosca de status no marco 15/09/26. Geometria do gráfico em % (x: 4 a 96; y: 6 = topo da escala, 100 = zero), igual ao analise.js e ao HTML gerado do obra-demo.json. ===================================================================== */ #analise{ --an-plan:#868b92; /* planejado: cinza, 3,4:1 no branco */ --an-real:#3e9b42; /* realizado: verde da marca escurecido para 3,5:1 no branco */ --an-real-pt:#5bbb5b; --an-prazo:#6c717f; /* "Hoje"/prazo no app */ --an-nao:#797f8a; /* não iniciadas no app */ --an-yw:56px; /* coluna dos rótulos do eixo Y */ --an-eixo-h:38px; /* faixa do eixo X (trilho + meses) */ --an-graf-min:150px; } /* ---------- composição: título + figura que ocupa o resto da janela ---------- */ #analise .an{display:flex;flex-direction:column;gap:clamp(14px,2.6svh,28px);min-height:min(var(--secao-util),940px)} #analise .an-topo .eyebrow{margin-bottom:clamp(10px,1.8svh,18px)} #analise .an-fig{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;max-height:700px} #analise .an-fig > .ui-frame{flex:1 1 auto;display:flex;min-height:0} #analise .an-fig > .fig{margin-top:clamp(10px,1.6svh,16px)} #analise .an-painel{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0} /* ---------- cabeçalho do painel ---------- */ #analise .an-head{flex:none} #analise .an-ref{text-align:right} #analise .an-ref b{display:flex;align-items:baseline;justify-content:flex-end;gap:6px} #analise .an-ref__k{font:500 .75rem/1.2 var(--f-d);color:var(--ink-2)} /* ---------- corpo: KPIs | Curva S | Status ---------- */ #analise .an-corpo{flex:1 1 auto;min-height:0;display:grid;gap:8px;padding:8px; grid-template-columns:minmax(196px,232px) minmax(0,1fr) minmax(212px,264px);grid-template-rows:repeat(3,minmax(0,1fr))} #analise .an-k,#analise .an-curva,#analise .an-ativ{position:relative;min-width:0;background:#fff;border-radius:8px;box-shadow:0 0 0 1px var(--hair-1l),0 1px 2px rgba(42,41,41,.04)} #analise .an-k--status{grid-column:1;grid-row:1} #analise .an-k--avanco{grid-column:1;grid-row:2} #analise .an-k--prazo{grid-column:1;grid-row:3} #analise .an-curva{grid-column:2;grid-row:1 / span 3} #analise .an-ativ{grid-column:3;grid-row:1 / span 3} /* KPI */ #analise .an-k{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:12px 14px;overflow:hidden} #analise .an-k > .ui-bar{align-self:stretch} #analise .an-k__v{font-size:1.75rem} #analise .an-aprox{margin-right:4px;font:500 1.125rem/1 var(--f-d);color:var(--ink-2);align-self:center} #analise .an-k__sub{font:400 .75rem/1.35 var(--f-t);color:var(--ink-2)} #analise .an-k__sub b{font:600 .8125rem/1 var(--f-d);color:var(--ink)} #analise .an-bar--prazo > i{background:var(--an-prazo)} /* alerta "Tendência de atraso" (regra da tela: Prazo > Avanço físico) */ #analise .an-k--status{transition:background-color .5s var(--ease)} #analise .an-k--status.is-aceso{background:#fcf0f0;box-shadow:inset 3px 0 0 var(--red),0 0 0 1px rgba(229,72,77,.18)} #analise .an-k--status::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(229,72,77,.16);opacity:0} #analise .an-k--status.is-pulso::after{animation:an-pulso 1.1s var(--ease) both} @keyframes an-pulso{0%{opacity:0}18%{opacity:1}100%{opacity:0}} #analise .an-alerta{height:24px;gap:6px;padding:0 9px 0 7px;font-size:.75rem} #analise .an-tri{width:13px;height:13px;flex:none} #analise .an-k--status.is-aceso .an-k__regra b{color:var(--red-ink)} /* ---------- Curva S ---------- */ #analise .an-curva{display:flex;flex-direction:column;min-height:0;padding:12px 14px 4px} #analise .an-curva__h{display:flex;align-items:center;gap:10px;min-height:28px;flex:none} #analise .an-mes{height:22px;padding:0 8px;font-size:.75rem;color:var(--ink)} #analise .an-dica{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #analise .an-dica svg{width:14px;height:14px;flex:none} #analise .an-modo > button{min-width:34px;min-height:28px} /* leitura do mês: cartões com filete de cor, como os totais do app */ #analise .an-read{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0} #analise .an-read__c{min-width:0;padding:6px 10px 7px 12px;border-radius:6px;background:var(--ui-bg);box-shadow:inset 3px 0 0 var(--c,var(--an-plan))} #analise .an-read__c--plan{--c:var(--an-plan)} #analise .an-read__c--real{--c:var(--an-real)} #analise .an-read__c--dif{--c:var(--red)} #analise .an-read__c--dif[data-tipo="rdo"]{--c:var(--an-prazo)} #analise .an-read dt{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap} #analise .an-read dd{margin:3px 0 0;min-height:1.2em;font:600 .9375rem/1.2 var(--f-d);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #analise .an-read__c--dif:not([data-tipo="rdo"]) dd{color:var(--red-ink)} #analise .an-read__sem{font:500 .8125rem/1.2 var(--f-d);color:var(--ink-2)} /* gráfico */ #analise .an-graf{position:relative;flex:1 1 auto;min-height:var(--an-graf-min);margin-top:14px;padding-left:var(--an-yw)} #analise .an-y{position:absolute;left:0;top:0;bottom:var(--an-eixo-h);width:var(--an-yw)} #analise .an-y > span{position:absolute;right:10px;transform:translateY(-50%);font:500 .6875rem/1 var(--f-d);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums} #analise .an-area{position:relative;height:100%;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} #analise .an-area.is-arrasto{cursor:grabbing} #analise .an-plot{position:absolute;left:0;right:0;top:0;bottom:var(--an-eixo-h);will-change:transform;contain:layout style} #analise .an-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #analise .an-grade line{stroke:rgba(42,41,41,.09);stroke-width:1;vector-effect:non-scaling-stroke} #analise .an-l{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} #analise .an-l--plan{stroke:var(--an-plan);stroke-width:2} #analise .an-l--real{stroke:var(--an-real);stroke-width:2.75} #analise .an-gap{fill:rgba(229,72,77,.075);stroke:none} #analise .an-dif{stroke:var(--red);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s var(--ease)} #analise .an-dif.is-on{opacity:1} #analise .an-cur{position:absolute;inset:0;pointer-events:none;will-change:transform} #analise .an-cur > i{position:absolute;left:0;top:-4px;bottom:0;width:1px;margin-left:-.5px;background:rgba(42,41,41,.42)} #analise .an-pts{position:absolute;inset:0;pointer-events:none} #analise .an-pt{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--an-plan); transition:transform .35s var(--ease),opacity .25s var(--ease)} #analise .an-pt--real{background:var(--an-real-pt);box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--an-real)} #analise .an-pt.is-sel{transform:scale(1.45)} #analise .an-pt--plan.is-sel{background:var(--an-plan);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--an-plan)} #analise .an-pt.is-off{opacity:0;transform:scale(.4)} /* eixo X = trilho do scrubber */ #analise .an-eixo{position:absolute;left:0;right:0;bottom:0;height:var(--an-eixo-h);touch-action:none} #analise .an-rail{position:absolute;left:0;right:0;top:0;height:4px;margin-top:-2px;border-radius:2px;background:#e2e6df} #analise .an-rail > i{position:absolute;top:0;bottom:0;left:4%;width:92%;border-radius:inherit;background:var(--an-prazo);transform-origin:left center;will-change:transform} #analise .an-meses{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:14px;height:14px} #analise .an-meses > li{position:absolute;top:0;transform:translateX(-50%);font:600 .6875rem/1 var(--f-l);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;transition:color .2s var(--ease)} #analise .an-meses > li::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:6px;margin-left:-.5px;background:rgba(42,41,41,.28)} #analise .an-meses > li.is-sel{color:var(--ink)} #analise .an-meses > li.is-sel::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-5px;height:2px;border-radius:1px;background:var(--green)} #analise .an-thumb-l{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;will-change:transform} /* com JS: camadas de largura zero movidas em px (sem a camada larga passando da borda) */ #analise.an-on .an-cur,#analise.an-on .an-thumb-l{right:auto;width:0} #analise .an-thumb{position:absolute;left:0;top:0;width:28px;height:18px;margin:-9px 0 0 -14px;border-radius:9px;background:var(--green);pointer-events:auto;cursor:grab;touch-action:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 2px #fff,0 0 0 3px rgba(45,110,49,.55),0 3px 8px -2px rgba(42,41,41,.45);transition:transform .2s var(--ease)} #analise .an-thumb::before{content:"";position:absolute;inset:-13px -8px} #analise .an-thumb > i,#analise .an-thumb > i::before{position:absolute;top:5px;bottom:5px;width:1.5px;border-radius:1px;background:rgba(31,30,30,.55)} #analise .an-thumb > i{left:calc(50% - 3px)} #analise .an-thumb > i::before{content:"";top:0;bottom:0;left:4.5px} #analise .an-thumb:hover{transform:scale(1.06)} #analise .an-area.is-arrasto .an-thumb{cursor:grabbing;transform:scale(1.1)} #analise .an-thumb:focus-visible{outline:2px solid var(--green-ink);outline-offset:4px;border-radius:10px} /* ---------- Status das atividades (rosca no marco 15/09/26) ---------- */ #analise .an-ativ{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8svh,16px);padding:12px 14px 14px} #analise .an-ativ__h{align-self:stretch;display:flex;align-items:center;gap:8px;min-height:28px} #analise .an-ativ__tc{display:none} #analise .an-ativ__d{margin-left:auto;font:500 .75rem/1 var(--f-d);color:var(--ink-2)} #analise .an-ativ:not(.an-ativ--compacta) .an-ativ__h{position:absolute;left:14px;right:14px;top:12px} #analise .an-rosca{position:relative;width:clamp(104px,17svh,156px);aspect-ratio:1;flex:none;margin-top:28px} #analise .an-rosca svg{width:100%;height:100%;transition:transform 1.1s var(--ease),opacity .7s var(--ease)} #analise .an-rosca__trilho{fill:none;stroke:var(--ui-sub);stroke-width:14} #analise .an-rosca__s{fill:none;stroke-width:14} #analise .an-rosca__s--atraso{stroke:var(--red)} #analise .an-rosca__s--nao{stroke:var(--an-nao)} #analise .an-rosca__s--ok{stroke:var(--an-real)} #analise .an-rosca__c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:3px} #analise .an-rosca__c b{font:600 1.875rem/1 var(--f-d);letter-spacing:-.02em;color:var(--ink)} #analise .an-rosca__c small{font:600 .625rem/1 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} #analise .an-ativ__alerta{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 10px;border-radius:6px;background:rgba(229,72,77,.09);box-shadow:inset 3px 0 0 var(--red); font:500 .8125rem/1.2 var(--f-d);color:var(--ink);white-space:nowrap} #analise .an-ativ__alerta .an-tri{color:var(--red-ink)} #analise .an-ativ__alerta b{color:var(--red-ink)} #analise .an-leg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:7px 14px} #analise .an-leg > li{display:flex;align-items:center;gap:6px;font:500 .75rem/1.2 var(--f-d);color:var(--ink-2);white-space:nowrap} #analise .an-leg__n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ui-sub);font:600 .6875rem/1 var(--f-d);color:var(--ink)} #analise .an-leg__n--atraso{background:rgba(229,72,77,.14);color:var(--red-ink)} #analise .an-leg__n--nao{background:rgba(121,127,138,.18)} #analise .an-leg__n--ok{background:rgba(91,187,91,.2);color:var(--green-ink)} /* rodapé do painel */ #analise .an-foot{flex:none;justify-content:space-between} #analise .an-foot__k{font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #analise .an-fig__obra{display:none} /* ---------- entrada (só com movimento): rosca gira e assenta ---------- */ #analise[data-an-pre] .an-rosca svg{opacity:0;transform:rotate(-70deg) scale(.9)} /* ---------- altura curta (desktop baixo) ---------- */ @media (max-height:800px){ #analise{--an-graf-min:130px;--an-eixo-h:34px} #analise .an-k{gap:5px;padding:10px 12px} #analise .an-k__v{font-size:1.5rem} #analise .an-head{padding-block:9px} #analise .an-read{margin-top:8px} #analise .an-read__c{padding-block:5px 6px} #analise .an-graf{margin-top:10px} #analise .an-foot{padding-block:8px} } /* ---------- tablet e celular: alerta em faixa, KPIs em linha, Curva S inteira ---------- */ #analise .an-rosca__m{display:none} @media (max-width:1023.98px){ #analise .an-corpo{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr)} #analise .an-k--status{grid-column:1 / -1;grid-row:1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px} #analise .an-k--status > .ui-k{display:none} #analise .an-k--avanco{grid-column:1;grid-row:2} #analise .an-k--prazo{grid-column:2;grid-row:2} #analise .an-ativ{grid-column:3;grid-row:2} #analise .an-curva{grid-column:1 / -1;grid-row:3} #analise .an-k{justify-content:flex-start} /* rosca compacta, como mais um KPI: ATRASADAS / (8) de 12 / 15/09 */ #analise .an-ativ{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"lb lb" "rs tx" "rs dt"; align-content:start;align-items:center;justify-items:start;gap:3px 8px;padding:12px 14px} #analise .an-ativ .an-ativ__h{display:contents} #analise .an-ativ__t,#analise .an-leg,#analise .an-ativ__alerta .an-tri,#analise .an-ativ__lg,#analise .an-ativ__alerta b,#analise .an-rosca__c{display:none} #analise .an-ativ__tc{display:inline;grid-area:lb;margin-bottom:4px} #analise .an-rosca{grid-area:rs;width:40px;margin:0} #analise .an-rosca svg{overflow:visible} #analise .an-rosca__m{position:absolute;inset:0;display:grid;place-items:center;font:600 1rem/1 var(--f-d);color:var(--red-ink)} #analise .an-ativ__alerta{grid-area:tx;align-self:end;padding:0;background:none;box-shadow:none;font:600 .875rem/1.1 var(--f-d);color:var(--ink)} #analise .an-ativ__d{grid-area:dt;align-self:start;margin:0;font:500 .6875rem/1.1 var(--f-d)} } @media (max-width:760px){ #analise{--an-yw:44px;--an-graf-min:116px;--an-eixo-h:32px} #analise .an-head{display:none} #analise .an-lg,#analise .an-ativ__a{display:none} #analise .an-corpo{gap:6px;padding:6px} #analise .an-k{padding:8px 10px;gap:5px} #analise .an-k .ui-k{letter-spacing:.07em} #analise .an-k__v{font-size:1.375rem} #analise .an-aprox{font-size:.9375rem;margin-right:3px} #analise .an-k--avanco .an-k__sub,#analise .an-k--prazo .an-k__sub{display:none} #analise .an-k--status{padding:6px 10px;gap:3px 10px;flex-wrap:nowrap} #analise .an-k--status .an-alerta{flex:none} #analise .an-k__regra{min-width:0;font-size:.71875rem;line-height:1.25} #analise .an-ativ{padding:8px 10px;column-gap:7px} #analise .an-rosca{width:34px} #analise .an-rosca__m{font-size:.875rem} #analise .an-ativ__alerta{font-size:.8125rem} #analise .an-curva{padding:8px 10px 0} #analise .an-curva__h{gap:8px} #analise .an-modo > button{min-height:28px;min-width:36px} #analise .an-read{gap:5px;margin-top:6px} #analise .an-read__c{padding:4px 5px 5px 9px} #analise .an-read dt{font-size:.5625rem;letter-spacing:.07em} #analise .an-read dd{margin-top:2px;font-size:.75rem;letter-spacing:-.005em} #analise .an-read__sem{font-size:.75rem} #analise .an-graf{margin-top:9px} #analise .an-y > span{right:6px;font-size:.625rem} #analise .an-meses__a{display:none} #analise .an-meses > li{top:12px;font-size:.65625rem;letter-spacing:.02em} #analise .an-foot{padding:6px 10px} #analise .an-foot__k{display:none} } @media (max-width:420px){ #analise .an-dica{display:none} #analise .an-k .ui-k{font-size:.59375rem;letter-spacing:.06em} /* regra literal do app ("Prazo > Avanço físico"); os números estão nos KPIs logo abaixo */ #analise .an-k__regra b{display:none} } @media (max-width:760px) and (max-height:800px){ #analise .an{gap:8px} #analise .an-fig > .fig{margin-top:8px} /* legenda: a frase extra fica só para o leitor de tela no celular baixo */ #analise .an-fig__x{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} #analise .an-k{gap:4px;padding-block:7px} #analise .an-k__v{font-size:1.25rem} #analise .an-rosca{width:32px} #analise .an-read{margin-top:5px} #analise .an-graf{margin-top:8px} } @media (max-width:340px){ /* 320: meses alternados; o escolhido sempre aparece */ #analise .an-meses > li.is-par:not(.is-sel){color:transparent} #analise .an-meses > li{font-size:.625rem} } /* ---- sections/estrutura.css ---- */ /* ===================================================================== Pav. 06 · #estrutura (segurança e integração) Ficha técnica em selo de prancha + Fig. 08 (trocar a visão, multiempresa) + Fig. 09 (registro do Obrify chegando ao ERP pela API aberta). Tudo escopado por #estrutura. Kit em base.css (ui-panel, ui-seg, chips, nota-sim). ===================================================================== */ #estrutura{ --est-gap:clamp(14px,2.4svh,26px); --est-meio:clamp(58px,6.6vw,104px); --est-op-h:58px; /* altura de cada opção do alternador (a faixa da Fig. 09 acompanha) */ } /* ---------- grade da seção ---------- */ #estrutura .estrutura__grade{ display:grid;grid-template-columns:minmax(0,1fr); grid-template-areas:"cab" "selo" "abas" "visoes" "integ"; row-gap:var(--est-gap);align-items:start; } #estrutura .estrutura__cab{grid-area:cab} #estrutura .estrutura__cab .eyebrow{margin-bottom:clamp(10px,1.8svh,18px)} #estrutura .estrutura__selo{grid-area:selo} #estrutura .estrutura__abas{grid-area:abas} #estrutura .estrutura__fig{min-width:0} #estrutura .estrutura__fig--visoes{grid-area:visoes} #estrutura .estrutura__fig--integ{grid-area:integ} /* celular e tablet com JS: as duas figuras dividem a mesma célula (abas) */ @media (max-width:1099.98px){ .js #estrutura .estrutura__grade{grid-template-areas:"cab" "selo" "abas" "visoes"} .js #estrutura .estrutura__fig--integ{grid-area:visoes} } /* ---------- ficha técnica: selo de prancha ---------- */ #estrutura .estrutura__selo{position:relative;border-radius:3px;box-shadow:inset 0 0 0 1px var(--linha-forte)} #estrutura .estrutura__selo-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0;padding:9px 14px 8px; font:600 .6875rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);box-shadow:inset 0 -1px 0 var(--linha-forte)} #estrutura .estrutura__selo-d{color:var(--fg-2);letter-spacing:.1em} #estrutura .estrutura__ficha{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} #estrutura .estrutura__ficha li{position:relative;display:grid;align-content:start;gap:6px;min-width:0;padding:10px 14px 12px; box-shadow:inset -1px 0 0 var(--linha),inset 0 -1px 0 var(--linha)} #estrutura .estrutura__ficha li:nth-child(3n){box-shadow:inset 0 -1px 0 var(--linha)} #estrutura .estrutura__ficha li:nth-child(n+4){box-shadow:inset -1px 0 0 var(--linha)} #estrutura .estrutura__ficha li:nth-child(6){box-shadow:none} #estrutura .estrutura__fn{font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--green)} #estrutura .estrutura__ft{font:500 1rem/1.2 var(--f-d);letter-spacing:-.005em;color:var(--fg-forte);text-wrap:balance} #estrutura .estrutura__fr{position:absolute;top:10px;right:12px;font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)} /* ---------- abas (só celular e tablet; o JS tira o hidden) ---------- */ #estrutura .estrutura__abas{display:flex;gap:4px;padding:3px;border-radius:10px;background:rgba(236,240,232,.035);box-shadow:inset 0 0 0 1px var(--linha)} #estrutura .estrutura__aba{position:relative;flex:1 1 0;min-width:0;min-height:40px;padding:0 10px;border:0;border-radius:7px;background:none;cursor:pointer; font:600 .875rem/1.1 var(--f-d);color:var(--fg-2);transition:background-color .25s var(--ease),color .25s var(--ease)} #estrutura .estrutura__aba::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);transition:transform .4s var(--ease)} #estrutura .estrutura__aba:hover{color:var(--fg)} #estrutura .estrutura__aba[aria-selected="true"]{background:rgba(236,240,232,.08);color:#fff} #estrutura .estrutura__aba[aria-selected="true"]::after{transform:none} #estrutura .estrutura__aba:focus-visible{outline-offset:-2px} /* a figura inativa some sem mudar a altura da seção */ #estrutura .estrutura__fig.is-fora{visibility:hidden;pointer-events:none} /* rótulo curto acima de cada figura */ #estrutura .estrutura__rot{margin:0 0 10px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)} /* ===================================================================== FIG. 08 · alternador Contratante | Contratado ===================================================================== */ #estrutura .estrutura__troca{margin-bottom:clamp(12px,1.8svh,18px)} #estrutura .estrutura__alt{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:12px; background:rgba(236,240,232,.035);box-shadow:inset 0 0 0 1px var(--linha-forte)} #estrutura .estrutura__alt-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:9px;background:var(--paper); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(0,0,0,.25),0 6px 16px -8px rgba(0,0,0,.6); transition:transform .55s var(--ease)} #estrutura .estrutura__alt[data-sel="1"] .estrutura__alt-thumb{transform:translateX(100%)} #estrutura .estrutura__alt[data-sel="2"] .estrutura__alt-thumb{transform:translateX(200%)} #estrutura .estrutura__apoio{margin-top:clamp(8px,1.4svh,14px);font-size:clamp(.9375rem,1.4svh,1.0625rem)} #estrutura .estrutura__op{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center; column-gap:12px;row-gap:2px;min-height:var(--est-op-h);padding:6px 16px;border:0;border-radius:9px;background:none;color:var(--fg);text-align:left;cursor:pointer; transition:color .35s var(--ease)} #estrutura .estrutura__op-i{grid-row:1 / span 2;width:22px;height:22px;color:var(--fg-2);transition:color .35s var(--ease)} #estrutura .estrutura__op-n{font:600 1.0625rem/1.1 var(--f-d);letter-spacing:-.005em} #estrutura .estrutura__op-d{font:600 .6875rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:color .35s var(--ease)} #estrutura .estrutura__op:hover .estrutura__op-i{color:var(--fg)} #estrutura .estrutura__op[aria-checked="true"]{color:var(--ink);cursor:default} #estrutura .estrutura__op[aria-checked="true"] .estrutura__op-i{color:var(--green-ink)} #estrutura .estrutura__op[aria-checked="true"] .estrutura__op-d{color:var(--ink-2)} #estrutura .estrutura__op:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* ===================================================================== FIG. 08 · painel (réplica) ===================================================================== */ #estrutura .estrutura__head{gap:12px;min-height:56px;padding:8px 10px 8px 14px} #estrutura .estrutura__ctx{flex:1 1 auto} #estrutura .estrutura__emp{display:flex;align-items:center;gap:10px} #estrutura .estrutura__emp-k{display:grid;gap:2px;font:600 .625rem/1.15 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right;white-space:nowrap} #estrutura .estrutura__demo{font:600 .5625rem/1.15 var(--f-l);letter-spacing:.08em;color:var(--green-ink)} #estrutura .estrutura__emp .ui-seg > button{min-height:30px;padding:0 11px;font-size:.75rem;white-space:nowrap} #estrutura .estrutura__corpos{display:grid} #estrutura .estrutura__corpos > *{grid-area:1 / 1;min-width:0} #estrutura .estrutura__corpos > .is-fora{visibility:hidden} #estrutura .estrutura__corpo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px;padding:8px} #estrutura .estrutura__corpo > .ui-sec{margin:0;border-radius:8px} /* card da obra (o mesmo nas duas visões) */ #estrutura .estrutura__foto{position:relative;margin:-12px -14px 10px;height:clamp(64px,10svh,104px);overflow:hidden;border-radius:8px 8px 0 0;background:#d9dcd5} #estrutura .estrutura__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 78%} #estrutura .estrutura__foto-st{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px; background:#fff;color:var(--ink);font:600 .6875rem/1 var(--f-d);box-shadow:0 1px 2px rgba(0,0,0,.18)} #estrutura .estrutura__obra-t{margin:0 0 4px;font:600 .9375rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--ink)} #estrutura .estrutura__kpis .ui-row{min-height:31px} #estrutura .estrutura__kpis .chip{transition:background-color .5s var(--ease),color .5s var(--ease)} /* permissões do perfil */ #estrutura .estrutura__perm{display:flex;flex-direction:column} #estrutura .estrutura__perm-h{margin-bottom:8px} #estrutura .estrutura__perfil{display:inline-block;margin-left:4px;padding:2px 6px;border-radius:4px;background:rgba(91,187,91,.16);color:var(--green-ink);font-weight:600} #estrutura .estrutura__med{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 8px 0 10px;border-radius:7px;background:var(--ui-sub);box-shadow:inset 0 0 0 1px var(--hair-1l)} #estrutura .estrutura__med .chip{transition:background-color .5s var(--ease),color .5s var(--ease)} #estrutura .estrutura__med .ui-v{white-space:nowrap} @media (max-width:1499.98px){ #estrutura .estrutura__xm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} } #estrutura .estrutura__acoes{list-style:none;margin:6px 0 0;padding:0;display:grid} #estrutura .estrutura__acao{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:42px;box-shadow:0 1px 0 var(--hair-1l)} #estrutura .estrutura__acao:last-child{box-shadow:none} #estrutura .estrutura__acao-n{font:500 .8125rem/1.25 var(--f-d);color:var(--ink)} #estrutura .estrutura__cel{display:flex;justify-content:flex-end} #estrutura .estrutura__cel .ui-btn{min-width:84px} #estrutura .estrutura__cel .ui-btn svg{width:12px;height:12px;flex:none} #estrutura .estrutura__cel .ui-btn.is-feito{background:rgba(91,187,91,.16);color:var(--green-ink);box-shadow:none;cursor:default} #estrutura .estrutura__cel .ui-btn[aria-disabled="true"]:not(.is-feito){opacity:1;background:var(--ui-sub);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair-2l);cursor:not-allowed} #estrutura .estrutura__sem{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 4px;font:500 .75rem/1 var(--f-d);color:var(--ink-2)} #estrutura .estrutura__sem svg{width:14px;height:14px;flex:none} /* altura fixa: trocar de estado não mexe na altura do painel (2 linhas no desktop, 1 no celular) */ #estrutura .estrutura__dica{margin:auto 0 0;padding-top:8px;font:400 .75rem/24px var(--f-t);color:#3d4043;min-height:56px} @media (min-width:1300px){ #estrutura .estrutura__dica{min-height:32px;white-space:nowrap} } #estrutura .estrutura__dica .ui-btn--texto{min-height:24px;padding:0 2px;font-size:.75rem;vertical-align:top;color:var(--green-ink);text-decoration-color:rgba(45,110,49,.45)} /* troca de visão: as linhas do perfil entram de novo, curtas e em sequência */ @keyframes est-troca{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} #estrutura .is-troca .estrutura__acao, #estrutura .is-troca .estrutura__dica, #estrutura .is-troca .estrutura__perfil{animation:est-troca .42s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)} #estrutura .is-troca .estrutura__dica{--i:3} @keyframes est-pisca{from{background-color:rgba(91,187,91,.22)}to{background-color:transparent}} #estrutura .is-novo{animation:est-pisca 1.2s var(--ease) both} /* Empresa B: ambiente separado */ #estrutura .estrutura__vazio{display:grid;padding:8px} #estrutura .estrutura__vazio-in{display:grid;place-content:center;justify-items:center;gap:8px;padding:12px 16px;border-radius:8px;text-align:center; background:#fff;box-shadow:inset 0 0 0 1px var(--hair-1l)} #estrutura .estrutura__vazio-card{display:grid;gap:5px;width:116px;padding:9px;border-radius:7px;border:1px dashed rgba(42,41,41,.32)} #estrutura .estrutura__vazio-card i{display:block;height:6px;border-radius:3px;background:rgba(42,41,41,.08)} #estrutura .estrutura__vazio-card i:first-child{height:18px;border-radius:3px} #estrutura .estrutura__vazio-card i:last-child{width:60%} #estrutura .estrutura__vazio-t{font:600 .9375rem/1.2 var(--f-d);color:var(--ink)} #estrutura .estrutura__vazio-x{max-width:46ch;font:400 .8125rem/1.45 var(--f-t);color:#3d4043} #estrutura .is-entra .estrutura__vazio-in > *{animation:est-troca .42s var(--ease) both} #estrutura .is-entra .estrutura__vazio-in > :nth-child(2){animation-delay:.05s} #estrutura .is-entra .estrutura__vazio-in > :nth-child(3){animation-delay:.1s} #estrutura .is-entra .estrutura__vazio-in > :nth-child(4){animation-delay:.15s} /* ===================================================================== FIG. 09 · registro do Obrify chegando ao ERP ===================================================================== */ #estrutura .estrutura__fig--integ{display:flex;flex-direction:column} /* faixa de controle: mesma altura e acabamento do alternador da Fig. 08 */ #estrutura .estrutura__ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:calc(var(--est-op-h) + 8px);margin-bottom:clamp(12px,1.8svh,18px); padding:4px 4px 4px 16px;border-radius:12px;background:rgba(236,240,232,.035);box-shadow:inset 0 0 0 1px var(--linha-forte)} #estrutura .estrutura__st{display:inline-flex;align-items:center;gap:9px;min-width:0;margin:0;font:600 .9375rem/1.2 var(--f-d);color:var(--fg)} #estrutura .estrutura__st-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fg-3);transition:background-color .4s var(--ease)} #estrutura .estrutura__st[data-estado="ok"] .estrutura__st-dot{background:var(--green)} #estrutura .estrutura__st[data-estado="run"] .estrutura__st-dot{background:var(--green);animation:est-sinal .7s var(--ease) 3 alternate} @keyframes est-sinal{to{opacity:.25}} #estrutura .estrutura__repetir{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 16px 0 14px;border:0;border-radius:9px;cursor:pointer; background:rgba(236,240,232,.06);color:var(--fg);box-shadow:inset 0 0 0 1px var(--contorno);font:600 .9375rem/1 var(--f-d); transition:background-color .2s var(--ease),color .2s var(--ease)} #estrutura .estrutura__repetir svg{width:16px;height:16px;color:var(--green);transition:transform .5s var(--ease)} #estrutura .estrutura__repetir:hover{background:rgba(236,240,232,.11);color:#fff} #estrutura .estrutura__repetir:hover svg{transform:rotate(-40deg)} #estrutura .estrutura__repetir:active{transform:translateY(.5px)} #estrutura .estrutura__mapa{position:relative;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--est-meio) minmax(0,1fr);align-items:center} #estrutura .estrutura__fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} #estrutura .estrutura__fio{fill:none;stroke:rgba(236,240,232,.24);stroke-width:1} #estrutura .estrutura__fio--luz{stroke:var(--green);stroke-width:1.5;opacity:0;transition:opacity .7s var(--ease)} #estrutura .estrutura__fio--luz.is-on{opacity:1} #estrutura .estrutura__pacote{fill:var(--green);stroke:#1f1e1e;stroke-width:1.5;opacity:0;transition:opacity .2s var(--ease)} #estrutura .estrutura__pacote.is-on{opacity:1} #estrutura .estrutura__no{position:relative;z-index:1;min-width:0;border-radius:10px;padding:12px 13px 4px} #estrutura .estrutura__no--obrify{grid-column:1;background:#fff;color:var(--ink);box-shadow:var(--sh-ui-escuro)} #estrutura .estrutura__no--erp{grid-column:3;background:#262525;color:var(--on); box-shadow:inset 0 0 0 1px rgba(236,240,232,.18),0 0 0 1px rgba(0,0,0,.35),0 18px 40px -20px rgba(0,0,0,.65)} #estrutura .estrutura__no-h{display:flex;align-items:center;gap:8px;margin:0;font:600 .9375rem/1.1 var(--f-d)} #estrutura .estrutura__no-h span{font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2)} #estrutura .estrutura__no-i{width:18px;height:16px;flex:none} #estrutura .estrutura__no--erp .estrutura__no-i{color:var(--on-2)} #estrutura .estrutura__no-s{margin:8px 0 4px;font:600 .625rem/1.3 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #estrutura .estrutura__no-s span{display:block;font:500 .75rem/1.3 var(--f-d);letter-spacing:0;text-transform:none;color:var(--ink)} #estrutura .estrutura__no--erp .estrutura__no-s{color:var(--on-2)} #estrutura .estrutura__no--erp .estrutura__no-s span{color:var(--on-3);font-weight:500} #estrutura .estrutura__campos{list-style:none;margin:0;padding:0;display:grid} #estrutura .estrutura__campos li{position:relative;display:grid;gap:3px;padding:8px 0 9px;box-shadow:0 -1px 0 var(--hair-2l);transition:background-color .5s var(--ease)} #estrutura .estrutura__no--erp .estrutura__campos li{padding-right:16px;box-shadow:0 -1px 0 rgba(236,240,232,.10)} #estrutura .estrutura__k{font:600 .625rem/1.1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #estrutura .estrutura__no--erp .estrutura__k{color:var(--on-2)} #estrutura .estrutura__v{font:600 .8125rem/1.25 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums lining-nums; transition:opacity .45s var(--ease),transform .55s var(--ease)} #estrutura .estrutura__no--erp .estrutura__v{color:#fff} /* linha de origem acende quando o campo sai */ #estrutura .estrutura__no--obrify li.is-on{background:linear-gradient(90deg,rgba(91,187,91,0),rgba(91,187,91,.16))} /* check do campo recebido (traço em L desenhado, não é texto) */ #estrutura .estrutura__no--erp .estrutura__campos li::after{content:"";position:absolute;right:2px;top:50%;width:8px;height:4px;margin-top:-4px; border-left:1.6px solid var(--green);border-bottom:1.6px solid var(--green);transform:rotate(-45deg);opacity:1;transition:opacity .3s var(--ease)} /* antes de chegar: o valor some e fica a marca tracejada do campo vazio */ #estrutura .estrutura__mapa[data-fase="pre"] .estrutura__no--erp .estrutura__v, #estrutura .estrutura__mapa[data-fase="run"] .estrutura__no--erp li:not(.is-on) .estrutura__v{opacity:0;transform:translateX(-6px)} #estrutura .estrutura__mapa[data-fase="pre"] .estrutura__no--erp li::after, #estrutura .estrutura__mapa[data-fase="run"] .estrutura__no--erp li:not(.is-on)::after{opacity:0} #estrutura .estrutura__no--erp li::before{content:"";position:absolute;left:0;bottom:11px;width:56%;height:1px; background:repeating-linear-gradient(90deg,rgba(236,240,232,.30) 0 3px,transparent 3px 6px);opacity:0;transition:opacity .3s var(--ease)} #estrutura .estrutura__mapa[data-fase="pre"] .estrutura__no--erp li::before, #estrutura .estrutura__mapa[data-fase="run"] .estrutura__no--erp li:not(.is-on)::before{opacity:1} #estrutura .estrutura__api{position:relative;z-index:2;grid-column:2;justify-self:center;display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:13px; background:var(--g1);box-shadow:inset 0 0 0 1px rgba(236,240,232,.32);white-space:nowrap; font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on);transition:color .4s var(--ease),box-shadow .4s var(--ease)} #estrutura .estrutura__mapa[data-fase="run"] .estrutura__api{color:var(--green);box-shadow:inset 0 0 0 1px var(--green)} #estrutura .estrutura__integ-pe{display:flex;justify-content:flex-end;margin-top:clamp(10px,1.6svh,16px)} /* ===================================================================== Desktop: ficha ao lado do título; as duas figuras lado a lado ===================================================================== */ @media (min-width:1100px){ #estrutura .estrutura__grade{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"cab selo" "visoes integ"; column-gap:clamp(36px,4.2vw,72px);align-items:end; } #estrutura .estrutura__fig--visoes{grid-area:visoes;align-self:start} #estrutura .estrutura__fig--integ{grid-area:integ;align-self:stretch} #estrutura .estrutura__abas{display:none!important} /* o nó do ERP termina na mesma linha do painel; a nota acompanha o rodapé do painel */ #estrutura .estrutura__integ-pe{min-height:38px;align-items:center;margin-top:0} } @media (min-width:1100px) and (min-height:861px){ #estrutura .estrutura__no{padding:14px 15px 5px} #estrutura .estrutura__campos li{padding:10px 0 11px} #estrutura .estrutura__v{font-size:.875rem} } /* desktop mais baixo: sem foto e respiros menores */ @media (min-width:1100px) and (max-height:860px){ #estrutura{--est-op-h:52px} #estrutura .estrutura__foto{display:none} #estrutura .estrutura__ficha li{padding:8px 12px 10px;gap:4px} #estrutura .estrutura__ft{font-size:.9375rem} #estrutura .estrutura__acao{min-height:38px} } @media (min-width:1100px) and (max-height:800px){ #estrutura{--est-op-h:44px;--est-gap:14px} #estrutura .estrutura__op-d{display:none} #estrutura .estrutura__apoio{margin-top:6px;font-size:.9375rem;line-height:1.35} #estrutura .estrutura__cab .eyebrow{margin-bottom:8px} #estrutura .estrutura__selo-h{padding:7px 12px 6px} #estrutura .estrutura__ficha li{padding:7px 12px 8px;gap:3px} #estrutura .estrutura__ft{font-size:.875rem;line-height:1.15} #estrutura .estrutura__fr{top:7px} #estrutura .estrutura__rot{margin-bottom:8px} #estrutura .estrutura__head{min-height:48px;padding-block:5px} #estrutura .estrutura__corpo{padding:6px;gap:6px} #estrutura .estrutura__corpo > .ui-sec{padding:10px 12px} #estrutura .estrutura__perm-h{margin-bottom:6px} #estrutura .estrutura__med{min-height:30px} #estrutura .estrutura__acao{min-height:34px} #estrutura .estrutura__kpis .ui-row{min-height:28px} #estrutura .estrutura__dica{padding-top:6px} #estrutura .ui-foot{padding:8px 14px} #estrutura .estrutura__integ-pe{min-height:34px} #estrutura .estrutura__troca,#estrutura .estrutura__ctl{margin-bottom:12px} #estrutura .figura > .fig{margin-top:12px} #estrutura .estrutura__campos li{padding:7px 0 8px} } /* desktop baixo até 760px de altura (1280x720 e afins): rótulos das figuras só para leitor de tela, rodapé e linhas mais justos */ @media (min-width:1100px) and (max-height:760px){ #estrutura{--est-op-h:44px} #estrutura{--est-gap:8px} #estrutura .estrutura__apoio{margin-top:4px;font-size:.875rem} #estrutura .estrutura__cab .eyebrow{margin-bottom:6px} #estrutura .estrutura__rot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;margin:0} #estrutura .ui-foot{padding-block:4px} #estrutura .estrutura__kpis .ui-row{min-height:25px} #estrutura .figura > .fig{margin-top:8px} #estrutura .estrutura__troca,#estrutura .estrutura__ctl{margin-bottom:8px} } @media (min-width:1100px) and (max-height:700px){ #estrutura{--est-op-h:44px} #estrutura .estrutura__op-d{display:none} #estrutura .estrutura__kpis .ui-row{min-height:27px} #estrutura .estrutura__no-s span{display:none} } /* tablet */ @media (min-width:760px) and (max-width:1099.98px){ #estrutura .estrutura__fig--integ .estrutura__mapa{min-height:300px} } /* ===================================================================== Celular: obra no cabeçalho do painel, ficha corrida, sem foto ===================================================================== */ @media (max-width:759.98px){ #estrutura{--est-gap:10px;--est-meio:clamp(40px,12vw,64px);--est-op-h:42px} #estrutura .estrutura__cab .eyebrow{margin-bottom:8px} #estrutura .estrutura__apoio{margin-top:6px;font-size:.8125rem;line-height:1.35} #estrutura .estrutura__fig-x{display:none} /* a etiqueta da ficha vira só texto para leitor de tela: o apoio novo ocupa o lugar dela */ #estrutura .estrutura__selo-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;padding:0} /* ficha: itens corridos, numerados */ #estrutura .estrutura__selo-h{padding:6px 10px 5px;font-size:.625rem} #estrutura .estrutura__selo-d{display:none} #estrutura .estrutura__ficha{display:flex;flex-wrap:wrap;gap:4px 10px;padding:7px 10px 8px} #estrutura .estrutura__ficha li, #estrutura .estrutura__ficha li:nth-child(n){display:inline-flex;align-items:baseline;gap:5px;padding:0;box-shadow:none} #estrutura .estrutura__fn{font-size:.625rem} #estrutura .estrutura__ft{font-size:.78rem;line-height:1.3;white-space:nowrap} #estrutura .estrutura__fr{display:none} #estrutura .estrutura__aba{min-height:36px} #estrutura .estrutura__rot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;margin:0} #estrutura .estrutura__troca{margin-bottom:8px} #estrutura .estrutura__op{padding:4px 12px;column-gap:10px} #estrutura .estrutura__op{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center} #estrutura .estrutura__op-i{display:none} #estrutura .estrutura__op-n{font-size:.9375rem} #estrutura .estrutura__op-d{display:none} #estrutura .estrutura__head{gap:10px;min-height:44px;padding:5px 6px 5px 12px} #estrutura .estrutura__head .ui-sym{width:20px;height:18px} #estrutura .estrutura__ctx b{font-size:.8125rem} #estrutura .estrutura__ctx-t{display:none} #estrutura .estrutura__emp{gap:8px} #estrutura .estrutura__emp-k{gap:1px;font-size:.5625rem} #estrutura .estrutura__demo{font-size:.5rem} #estrutura .estrutura__emp .ui-seg > button{min-width:30px;min-height:30px;padding:0 9px} #estrutura .estrutura__emp-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} #estrutura .estrutura__corpo{grid-template-columns:minmax(0,1fr);gap:6px;padding:6px} #estrutura .estrutura__obra{display:none} #estrutura .estrutura__corpo > .ui-sec{padding:8px 12px 9px} #estrutura .estrutura__perm-h{margin-bottom:4px;min-height:20px} #estrutura .estrutura__med{min-height:30px;flex-wrap:wrap;column-gap:8px} #estrutura .estrutura__med .ui-v{font-size:.8125rem} #estrutura .estrutura__acoes{margin-top:2px} #estrutura .estrutura__acao{min-height:33px} #estrutura .estrutura__dica{padding-top:4px;min-height:28px;white-space:nowrap} #estrutura .figura > .fig{margin-top:10px} #estrutura .estrutura__vazio{padding:6px} #estrutura .estrutura__vazio-in{gap:6px;padding:10px 12px} #estrutura .estrutura__vazio-card{display:none} #estrutura .estrutura__vazio-t{font-size:.875rem} #estrutura .estrutura__vazio-x{font-size:.75rem;line-height:1.4} #estrutura .ui-foot{flex-wrap:nowrap;gap:8px;padding:5px 10px 5px 12px} #estrutura .ui-foot .nota-sim{font-size:.625rem;letter-spacing:.06em;white-space:nowrap} #estrutura .ui-foot .ui-btn--texto{padding:0 2px;min-height:24px} #estrutura .estrutura__ctl{padding:4px 4px 4px 12px;margin-bottom:10px} #estrutura .estrutura__st{font-size:.8125rem} #estrutura .estrutura__repetir{min-height:36px;padding:0 12px 0 10px;font-size:.8125rem} #estrutura .estrutura__no{padding:9px 9px 2px} #estrutura .estrutura__no-h{font-size:.875rem;gap:6px} #estrutura .estrutura__no-h span{display:none} #estrutura .estrutura__no-s{margin:5px 0 2px} #estrutura .estrutura__no-s span{display:none} #estrutura .estrutura__campos li{padding:6px 0 7px} #estrutura .estrutura__v{font-size:.75rem} #estrutura .estrutura__api{height:22px;padding:0 6px;font-size:.5625rem;letter-spacing:.06em} #estrutura .estrutura__integ-pe{margin-top:10px} #estrutura .estrutura__integ-pe .nota-sim{font-size:.625rem;letter-spacing:.06em} } /* celular baixo: legendas e linhas mais perto */ @media (max-width:759.98px) and (max-height:860px){ #estrutura{--est-op-h:38px;--est-gap:8px} #estrutura .estrutura__troca{margin-bottom:8px} #estrutura .estrutura__ficha{row-gap:3px;padding:6px 10px 7px} #estrutura .estrutura__acao{min-height:32px} #estrutura .estrutura__cel .ui-btn{min-height:28px} #estrutura .estrutura__aba{min-height:32px} #estrutura .estrutura__head{min-height:40px;padding-block:4px} #estrutura .figura > .fig{margin-top:8px} #estrutura .estrutura__dica{display:none} } /* celular mais baixo: respiros menores */ @media (max-width:759.98px) and (max-height:760px){ #estrutura{--est-gap:4px} #estrutura .estrutura__cab .eyebrow{margin-bottom:6px} #estrutura .estrutura__apoio{margin-top:4px} #estrutura .estrutura__ficha{row-gap:2px;padding:5px 10px 5px} #estrutura .estrutura__troca{margin-bottom:6px} #estrutura .estrutura__acao{min-height:30px} #estrutura .estrutura__aba{min-height:30px} #estrutura .estrutura__op{min-height:36px} #estrutura .figura > .fig{margin-top:6px} } /* celular estreito: complementos de rótulo saem da tela, mas ficam para o leitor de tela */ @media (max-width:419.98px){ #estrutura .estrutura__x{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} } @media (max-width:359.98px){ #estrutura .estrutura__aba{padding:0 6px;font-size:.8125rem} #estrutura .ui-foot{flex-wrap:wrap;row-gap:0} #estrutura .estrutura__emp-k{display:none} #estrutura .estrutura__acao-n{font-size:.75rem} #estrutura .estrutura__cel .ui-btn{min-width:0;padding:0 10px} #estrutura .estrutura__ft{white-space:normal} } /* ---- sections/contato.css ---- */ /* ===================================================================== #contato · Cobertura (CTA final) O prédio concluído (o corte da navegação em escala de prancha, com o símbolo de 3 placas assentando no topo) + o RDO desta visita, ligado a cada pavimento por linhas de chamada. Dono: agente da seção contato. ===================================================================== */ #contato{ --bg:var(--g1); --cob-cod:28px; /* coluna do código do pavimento (T, 01 ... COB) */ --cob-predio:clamp(150px,13.2vw,214px); --cob-fios:clamp(40px,3.6vw,60px); --cob-sb:clamp(46px,6.4svh,64px); overflow:clip; } /* ---------- foto de obra (conceito C, já graduada): só atmosfera, atrás da figura ---------- */ #contato .contato-fundo{position:absolute;inset:0;z-index:-1; --foto-pos:60% 74%; --grao:.06; --veu: linear-gradient(180deg,var(--g1) 0%,rgba(31,30,30,0) 24%,rgba(31,30,30,0) 70%,var(--g1) 100%), linear-gradient(90deg,var(--g1) 0%,rgba(31,30,30,.94) 34%,rgba(24,24,23,.78) 58%,rgba(24,24,23,.70) 100%); -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 64%); mask-image:linear-gradient(90deg,transparent 30%,#000 64%)} /* ---------- grade ---------- */ #contato .contato-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,4.6vw,80px)} /* ---------- texto ---------- */ #contato .contato-texto{min-width:0;max-width:40rem;container-type:inline-size} /* h2 na mesma escala dos outros pavimentos, travado pela largura da coluna para "Vamos construir juntos." caber em uma linha no desktop (no máximo 3 a 4 linhas com a continuação) */ @media (min-width:900px){ #contato .contato-texto .h2{font-size:min(var(--h2),10.2cqi)} } #contato .contato-texto .eyebrow{margin-bottom:clamp(14px,2.4svh,24px)} #contato .contato-reforco{margin-top:clamp(16px,2.8svh,30px);max-width:34ch;font:400 var(--lead)/1.5 var(--f-t);color:var(--fg-2)} #contato .contato-cta{margin-top:clamp(22px,4svh,44px)} /* ---------- figura: prédio + linhas de chamada + RDO ---------- */ #contato .contato-fig{min-width:0} #contato .contato-quadro{--cantos-off:14px;position:relative;display:grid;grid-template-columns:var(--cob-predio) minmax(0,1fr);column-gap:var(--cob-fios);align-items:stretch} #contato .contato-fig > .fig{margin-top:clamp(14px,2.2svh,22px)} @media (min-width:900px){ #contato .contato-quadro{min-height:clamp(340px,56svh,580px)} } /* prédio concluído: mesma gramática do corte (planejado tracejado, executado cheio, cobertura em verde) */ #contato .contato-predio{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;min-height:0} #contato .contato-predio__sb{display:grid;place-items:end center;flex:none;height:var(--cob-sb);padding:0 0 3px var(--cob-cod)} #contato .contato-predio__sb svg{width:clamp(34px,40%,72px);height:auto;overflow:visible} #contato .contato-predio__sb path{fill:var(--green)} #contato .contato-pavs{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;min-height:0} #contato .contato-pav{flex:1 1 0;min-height:20px;display:grid;grid-template-columns:var(--cob-cod) minmax(0,1fr);align-items:stretch} #contato .contato-pav__cod{align-self:center;font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--on-2);transition:color .3s var(--ease)} #contato .contato-pav__laje{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;min-width:0;padding:0 8px 0 10px;overflow:hidden; background-color:#3f3f3e;border:1px solid rgba(236,240,232,.40);border-bottom:0;border-top:2px solid rgba(236,240,232,.62); transition:background-color .5s var(--ease),border-color .5s var(--ease)} #contato .contato-pav.is-cob .contato-pav__laje{margin-inline:9%;background-color:var(--green);border-color:var(--green)} #contato .contato-pav.is-cob .contato-pav__laje::before{content:"";position:absolute;z-index:-1;inset:0; background:linear-gradient(135deg,transparent 0 25%,rgba(42,41,41,.16) 25% 37.5%,transparent 37.5% 75%,rgba(42,41,41,.16) 75% 87.5%,transparent 87.5%) 0 0/6px 6px} #contato .contato-pav__nome{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-top:1px;font:600 .625rem/1.4 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:rgba(236,240,232,.90)} #contato .contato-pav.is-cob .contato-pav__nome{color:var(--ink)} #contato .contato-pav__n{margin-left:auto;flex:none;display:grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:4px; background:var(--green);color:var(--ink);font:600 .6875rem/1 var(--f-d)} #contato .contato-pav__n:empty{display:none} #contato .contato-pav.is-cob .contato-pav__n{background:var(--ink);color:var(--green-soft)} /* pavimento com registros desta visita */ #contato .contato-pav.tem-reg .contato-pav__laje{background-color:#293727;border-color:rgba(143,214,143,.55);border-top-color:var(--green-soft)} #contato .contato-pav.tem-reg .contato-pav__cod{color:var(--green-soft)} /* pavimento em foco (linha do RDO sob o ponteiro ou o foco) */ #contato .contato-pav.is-foco .contato-pav__laje{background-color:#314d30;border-color:var(--green-soft)} #contato .contato-pav.is-foco .contato-pav__cod{color:#fff} #contato .contato-pav.is-cob.is-foco .contato-pav__laje{background-color:var(--green-hi)} #contato .contato-predio__terreno{display:block;flex:none;height:8px;margin:0 -6px 0 calc(var(--cob-cod) - 6px);border-top:1px solid rgba(236,240,232,.45); background:repeating-linear-gradient(-45deg,rgba(236,240,232,.28) 0 1px,transparent 1px 4px)} /* linhas de chamada (desenhadas pelo JS): executado = cheia, sugestão = tracejada */ #contato .contato-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} #contato .contato-fios path{fill:none;stroke:rgba(236,240,232,.46);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .25s var(--ease)} #contato .contato-fios .is-plan{stroke:rgba(236,240,232,.5);stroke-dasharray:3 4} #contato .contato-fios circle{fill:rgba(236,240,232,.70);transition:fill .25s var(--ease)} #contato .contato-fios .is-on{stroke:var(--green)} #contato .contato-fios circle.is-on{fill:var(--green)} /* ---------- RDO desta visita (réplica branca) ---------- */ #contato .contato-rdo{position:relative;z-index:1;align-self:end;display:flex;flex-direction:column;min-width:0} #contato .contato-rdo .ui-ctx b{font-size:.9375rem} #contato .contato-rdo__resumo{padding:clamp(12px,1.8svh,18px) 16px clamp(12px,1.8svh,16px);background:#fff;box-shadow:0 1px 0 var(--hair-2l)} #contato .contato-rdo__frase{font:500 clamp(1.0625rem,.9rem + .45vw,1.3125rem)/1.25 var(--f-d);letter-spacing:-.012em;color:var(--ink);text-wrap:balance} #contato .contato-rdo__frase b{font-weight:600;color:var(--green-ink)} #contato .contato-rdo__sub{margin-top:6px;font:400 .8125rem/1.45 var(--f-t);color:var(--ink-2);text-wrap:pretty} #contato .contato-rdo__corpo{background:#fff;padding:2px 0 4px} #contato .contato-rdo__cab, #contato .contato-reg{display:grid;grid-template-columns:44px minmax(0,8.6em) minmax(0,1fr) 14px;column-gap:12px;align-items:center;padding:0 14px 0 16px} #contato .contato-rdo__cab{min-height:30px;margin:0;box-shadow:0 1px 0 var(--hair-1l)} #contato .contato-rdo__cab span{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #contato .contato-rdo__lista{list-style:none;margin:0;padding:0} #contato .contato-rdo__lista > li{box-shadow:0 1px 0 var(--hair-1l)} #contato .contato-rdo__lista > li:last-child{box-shadow:none} #contato .contato-reg{position:relative;min-height:clamp(44px,5.6svh,52px);padding-block:6px;text-decoration:none;color:var(--ink);transition:background-color .2s var(--ease)} #contato a.contato-reg:hover,#contato .contato-reg.is-foco{background:rgba(91,187,91,.07)} #contato .contato-reg:focus-visible{outline-offset:-2px;border-radius:2px} #contato .contato-reg__h{font:600 .875rem/1.2 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums lining-nums} #contato .contato-reg__p{min-width:0;font:600 .6875rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)} #contato .contato-reg__t{min-width:0;font:400 .8125rem/1.35 var(--f-t);color:#3d4043;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #contato .contato-reg__ir{width:14px;height:14px;color:var(--ink-2);opacity:.5;transition:opacity .2s var(--ease),transform .32s var(--ease)} #contato a.contato-reg:hover .contato-reg__ir,#contato a.contato-reg:focus-visible .contato-reg__ir{opacity:1;transform:translateX(2px);color:var(--green-ink)} /* sugestão (pavimento ainda sem registro): linha planejada, tracejada como projeção */ #contato .contato-reg--plan .contato-reg__h{display:block;width:36px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(42,41,41,.22) 0 3px,transparent 3px 6px)} #contato .contato-reg--plan .contato-reg__p{color:var(--ink-2)} #contato .contato-reg--plan .contato-reg__t{font-family:var(--f-d);font-weight:600;color:var(--green-ink)} #contato .contato-reg.is-novo{animation:contato-novo 1.6s var(--ease) both} @keyframes contato-novo{from{background-color:rgba(91,187,91,.20)}to{background-color:rgba(91,187,91,0)}} #contato .contato-rdo__pe{justify-content:space-between;min-height:40px;padding-block:6px} #contato .contato-rdo__todos{min-height:28px;padding:0 4px;font-size:.75rem} /* ---------- prédio subindo e símbolo assentando (só com movimento) ---------- */ @media (prefers-reduced-motion:no-preference){ html.js #contato .contato-predio:not(.is-erguido) .contato-pav__laje{background-color:var(--g1);border-style:dashed;border-color:rgba(236,240,232,.34)} html.js #contato .contato-predio:not(.is-erguido) .contato-pav__nome{opacity:.5} #contato .contato-pav__nome{transition:opacity .4s var(--ease) calc(var(--i,0) * 70ms)} html.js #contato .contato-predio:not(.is-erguido) .contato-pav__n{opacity:0} #contato .contato-pav__n{transition:opacity .4s var(--ease) calc(var(--i,0) * 70ms + 200ms)} #contato .contato-predio.is-erguido .contato-pav__laje{transition-delay:calc(var(--i,0) * 70ms)} html.js #contato .contato-predio:not(.is-assentado) .contato-predio__sb path{opacity:0;transform:translateY(-52px)} #contato .contato-predio__sb path{transition:opacity .5s var(--ease),transform .7s var(--ease)} #contato .contato-predio.is-assentado .sb-2{transition-delay:.12s} #contato .contato-predio.is-assentado .sb-1{transition-delay:.24s} } /* ---------- desktop estreito (corte à direita, pouca largura): prédio sem nomes ---------- */ @media (min-width:900px) and (max-width:1279.98px){ #contato{--cob-predio:clamp(84px,9vw,110px);--cob-fios:clamp(28px,3vw,40px)} #contato .contato-pav__nome{display:none} #contato .contato-pav__laje{justify-content:flex-end;padding:0 5px} } /* ---------- alturas baixas (1366x768, 1280x720) ---------- */ @media (min-width:900px) and (max-height:800px){ #contato .contato-reg{min-height:42px;padding-block:4px} #contato .contato-rdo__cab{min-height:26px} #contato .contato-rdo .ui-head{padding-block:10px} } /* ---------- tablet e celular: texto em cima, figura embaixo ---------- */ @media (max-width:899.98px){ #contato{--cob-predio:clamp(60px,17vw,96px);--cob-fios:clamp(16px,5vw,28px);--cob-cod:22px;--cob-sb:clamp(30px,4.4svh,44px)} #contato .contato-fundo{--foto-pos:56% 70%; --veu: linear-gradient(180deg,var(--g1) 0%,rgba(31,30,30,.80) 18%,rgba(24,24,23,.80) 46%,var(--g1) 72%); -webkit-mask-image:none;mask-image:none} #contato .contato-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(16px,2.4svh,32px)} #contato .contato-texto{max-width:40rem} #contato .contato-pav__nome{display:none} #contato .contato-pav__laje{justify-content:center;padding:0 4px} #contato .contato-pav__n{margin-left:0} #contato .contato-pav.is-cob .contato-pav__laje{margin-inline:12%} } @media (max-width:760px){ #contato .contato-texto .eyebrow{margin-bottom:12px} #contato .contato-reforco{margin-top:12px;font-size:1rem} #contato .contato-cta{margin-top:18px;gap:10px} #contato .contato-cta .btn{--h:48px;font-size:1rem} #contato .contato-fig > .fig{display:none} #contato .contato-rdo .ui-head{padding:9px 12px;gap:10px} #contato .contato-rdo .ui-ctx b{font-size:.875rem} #contato .contato-rdo__resumo{padding:10px 12px} #contato .contato-rdo__frase{font-size:1rem} #contato .contato-rdo__sub{margin-top:4px;font-size:.75rem} #contato .contato-rdo__cab{display:none} /* linha do RDO em duas faixas: hora + pavimento em cima, registro embaixo */ #contato .contato-reg{grid-template-columns:auto minmax(0,1fr) 14px;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;min-height:48px;padding:6px 10px 6px 12px} #contato .contato-reg__h{grid-row:1;font-size:.8125rem} #contato .contato-reg__p{grid-row:1;grid-column:2} #contato .contato-reg__t{grid-row:2;grid-column:1 / 3;-webkit-line-clamp:1;font-size:.8125rem} #contato .contato-reg__ir{grid-row:1 / 3;grid-column:3} #contato .contato-reg--plan .contato-reg__h{width:30px;height:6px} #contato .contato-rdo__pe{padding:4px 10px 4px 12px;min-height:32px} #contato .contato-rdo__pe .nota-sim{font-size:.625rem;letter-spacing:.06em;gap:6px} #contato .contato-rdo__todos{display:none} #contato .contato-reg__p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #contato .contato-rdo__resumo{padding:9px 12px 10px} } /* celular baixo (360x740, 320x640) */ @media (max-width:760px) and (max-height:760px){ #contato .contato-reforco{display:none} #contato .contato-cta{margin-top:16px} #contato .contato-reg{min-height:44px;padding-block:4px} } @media (max-width:760px) and (max-height:700px){ #contato .contato-rdo__sub{display:none} } @media (max-width:400px){ #contato .contato-rdo .ui-fim{display:none} } @media (max-width:374px){ #contato .contato-cta{gap:8px} #contato .contato-cta .btn{--h:44px;padding:0 10px 0 12px;gap:8px;font-size:.875rem} #contato .contato-cta .btn--sec{padding:0 12px} #contato .contato-rdo .ui-head{padding:8px 10px} #contato .contato-rdo .ui-ctx small{display:none} #contato .contato-rdo__frase{font-size:.9375rem;line-height:1.22} #contato .contato-reg{min-height:42px;padding:4px 8px 4px 10px} } /* ---- sections/go-canteiro.css ---- */ /* go-canteiro: cópia reescopada de sections/canteiro.css (v3) para as LPs gestao-de-obras; hex trocado por tokens */ /* ===================================================================== OBRIFY v3 · Térreo · #go-canteiro (hero) Foto graduada da equipe na laje, varredura que acende 3 marcadores rastreados presos a pontos reais da foto, e o painel vivo da obra. Tudo escopado em #go-canteiro. Kit compartilhado: base.css. ===================================================================== */ #go-canteiro{ --bg:var(--g0); --painel-w:clamp(400px,32vw,468px); --col-gap:clamp(40px,4.4vw,72px); --leg-h:34px; /* espaço da legenda FIG. 01 sob o painel */ /* foto: caixa com a proporção da imagem ("cover" fixo), mesma caixa para foto e marcadores */ --fw:max(112%,172svh); --fx:.6; --fy:-90%; --fr:1600 / 1067; overflow:clip; } /* ---------- camadas (ordem: foto 0, véu 1, varredura 1, texto/painel 2, marcadores 3, fio 4) ---------- */ #go-canteiro .canteiro__quadro{position:absolute;z-index:0;width:var(--fw);aspect-ratio:var(--fr); left:calc((100% - var(--fw)) * var(--fx));top:100%;transform:translateY(var(--fy))} #go-canteiro .canteiro__foto{background:var(--g0)} #go-canteiro .canteiro__foto{--grao:.06} #go-canteiro .canteiro__alvos{z-index:3;background:none;pointer-events:none} #go-canteiro .canteiro__veu{position:absolute;inset:0;z-index:1;pointer-events:none;background: linear-gradient(180deg,rgba(14,15,14,.62) 0,rgba(14,15,14,0) 190px), linear-gradient(0deg,rgba(14,15,14,.66) 0,rgba(14,15,14,0) 26%), linear-gradient(90deg,rgba(14,15,14,.42) 0%,rgba(14,15,14,.20) 46%,rgba(14,15,14,0) 60%,rgba(14,15,14,.16) 100%)} /* ---------- varredura (1,2s na carga) ---------- */ #go-canteiro .canteiro__varredura{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .45s var(--ease)} #go-canteiro.is-varrendo .canteiro__varredura{opacity:1;transition:none} #go-canteiro .canteiro__varredura i{position:absolute;top:0;bottom:0;left:0;width:180px;will-change:transform;transform:translate3d(-200px,0,0); background:linear-gradient(90deg,rgba(91,187,91,0) 0,rgba(91,187,91,.07) 100%);box-shadow:inset -1px 0 0 rgba(143,214,143,.9)} #go-canteiro .canteiro__varredura i::after{content:"";position:absolute;top:0;bottom:0;right:1px;width:7px; background:repeating-linear-gradient(180deg,rgba(143,214,143,.55) 0 1px,transparent 1px 24px)} /* ---------- grade: texto à esquerda, painel à direita, mesmo eixo horizontal ---------- */ #go-canteiro .canteiro__grade{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--painel-w);grid-template-rows:minmax(0,1fr) auto; column-gap:var(--col-gap);align-items:center} #go-canteiro .canteiro__faixa{display:contents} #go-canteiro .canteiro__texto{position:relative;z-index:2;grid-column:1;grid-row:1;container-type:inline-size;padding-bottom:var(--leg-h)} #go-canteiro .canteiro__fig{position:relative;z-index:2;grid-column:2;grid-row:1;margin-bottom:var(--leg-h)} #go-canteiro .canteiro__fig00{position:relative;z-index:2;grid-column:1 / -1;grid-row:2;margin:0;padding-top:12px;box-shadow:0 -1px 0 var(--hair-2)} /* véu local, só onde há texto (no mínimo .70 sob o texto), com a forma do texto: largo atrás do rótulo e do h1, estreito atrás do apoio e do botão; a equipe fica clara */ #go-canteiro .canteiro__topo,#go-canteiro .canteiro__base{position:relative;z-index:0} #go-canteiro .canteiro__base{width:fit-content;max-width:100%} #go-canteiro .canteiro__topo::before,#go-canteiro .canteiro__base::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-100vw} #go-canteiro .canteiro__topo::before{right:-190px;top:-48%;bottom:-16%; background:linear-gradient(90deg,rgba(14,15,14,.78) 0,rgba(14,15,14,.74) calc(100% - 170px),rgba(14,15,14,.36) calc(100% - 90px),rgba(14,15,14,0) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 30%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 30%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 84%,transparent 100%)} #go-canteiro .canteiro__base::before{right:-240px;top:-22px;bottom:-34%; background:linear-gradient(90deg,rgba(14,15,14,.78) 0,rgba(14,15,14,.74) calc(100% - 220px),rgba(14,15,14,.42) calc(100% - 150px),rgba(14,15,14,.14) calc(100% - 70px),rgba(14,15,14,0) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 16%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 16%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 72%,transparent 100%)} /* ---------- texto ---------- */ #go-canteiro .canteiro__meta{margin-bottom:clamp(16px,3svh,30px)} #go-canteiro .canteiro__h1{font-size:min(var(--h1),14.2cqi);line-height:.98;letter-spacing:-.032em;color:var(--white);margin-bottom:clamp(18px,3.1svh,34px)} #go-canteiro .canteiro__apoio{max-width:31ch;font:500 calc(clamp(1.125rem,.9rem + .6vw,1.5rem) * (.5 + var(--type-h-scale,1) / 2))/1.32 var(--f-d);letter-spacing:-.012em;color:var(--on-2);text-wrap:pretty} #go-canteiro .canteiro__apoio-a{display:block;color:var(--white)} #go-canteiro .canteiro__cta{margin-top:clamp(22px,3.8svh,40px)} /* ---------- painel (FIG. 01) ---------- */ #go-canteiro .canteiro__moldura{--cantos-off:12px} #go-canteiro .canteiro__fig01{position:absolute;left:0;top:calc(100% + 16px);margin:0;isolation:isolate;white-space:nowrap} /* fundo local da legenda sobre a laje clara (contraste AA) */ #go-canteiro .canteiro__fig01::before{content:"";position:absolute;z-index:-1;inset:-10px -28px;pointer-events:none; background:linear-gradient(90deg,rgba(14,15,14,0) 0,rgba(14,15,14,.8) 28px,rgba(14,15,14,.8) calc(100% - 28px),rgba(14,15,14,0) 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 34%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 34%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 66%,transparent 100%)} #go-canteiro .canteiro__fig00 .fig__n,#go-canteiro .canteiro__fig01 .fig__n{color:var(--white)} #go-canteiro .canteiro-app .ui-head{padding:11px 14px} #go-canteiro .canteiro-app .ui-head .chip{gap:6px} #go-canteiro .canteiro-app .ui-tabs{padding:0 8px} #go-canteiro .canteiro-tab__novo{display:none;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--green);vertical-align:2px} #go-canteiro .ui-tab.tem-novo .canteiro-tab__novo{display:inline-block} /* painéis empilhados na mesma célula: a altura do painel não muda ao trocar de aba */ #go-canteiro .canteiro-pnls{display:grid} #go-canteiro .canteiro-pnls > .canteiro-pn{grid-area:1 / 1;display:flex;flex-direction:column;gap:8px;min-width:0;padding-bottom:8px} #go-canteiro .canteiro-pnls > [role="tabpanel"][hidden]{display:flex!important;visibility:hidden} #go-canteiro .canteiro-pn > :last-child{flex:1 1 auto} #go-canteiro .canteiro-pn:not([hidden]){animation:canteiro-pn .4s var(--ease) both} @keyframes canteiro-pn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* aba Painel */ #go-canteiro .canteiro-app .ui-kpi{gap:7px;padding:13px 14px 14px} #go-canteiro .canteiro-app .ui-kpi__v{font-size:1.625rem} #go-canteiro .canteiro-app .ui-kpi[data-liga="avanco"] .ui-kpi__v{font-size:1.75rem} #go-canteiro .canteiro-bar--prazo > i{background:color-mix(in srgb,var(--white) 17%,var(--ink-2))} #go-canteiro .canteiro-kpi__nota{font:500 .6875rem/1 var(--f-d);color:var(--ink-2);margin-top:-1px} #go-canteiro .canteiro-app .ui-row{min-height:31px;padding-inline:2px;margin-inline:-2px;transition:background-color .5s var(--ease),box-shadow .3s var(--ease)} #go-canteiro .canteiro-sep{margin:0 6px;color:var(--ink-2)} /* destaque do alvo ligado ao marcador e dos valores que acabaram de mudar */ #go-canteiro [data-liga]{transition:background-color .4s var(--ease),box-shadow .4s var(--ease)} #go-canteiro [data-liga].is-ligado{background-color:rgba(91,187,91,.11);box-shadow:inset 2px 0 0 var(--green)} #go-canteiro .ui-row.is-ligado{box-shadow:inset 2px 0 0 var(--green),0 1px 0 var(--hair-1l)} #go-canteiro .ui-tab.is-ligado{color:var(--ink);background:rgba(91,187,91,.11)} #go-canteiro .is-quente{background-color:rgba(91,187,91,.14)!important} /* aba Cronograma */ #go-canteiro .canteiro-gantt .ui-sec__h{margin-bottom:6px} #go-canteiro .g-row{display:grid;grid-template-columns:28px minmax(0,1fr) 47%;align-items:center;column-gap:6px;height:28px;box-shadow:0 1px 0 var(--hair-1l)} #go-canteiro .canteiro-gantt__lista{list-style:none;margin:0;padding:0;display:grid} #go-canteiro .canteiro-gantt__lista .g-row:last-child{box-shadow:none} #go-canteiro .canteiro-gantt__eixo{height:20px;box-shadow:0 1px 0 var(--hair-2l)} #go-canteiro .canteiro-gantt__eixo .g-trilho{background:none} #go-canteiro .canteiro-gantt__eixo .g-trilho > span{position:absolute;top:50%;left:calc(var(--d) / 28 * 100%);transform:translateY(-50%);padding-left:3px; font:600 .625rem/1 var(--f-d);color:var(--ink-2);white-space:nowrap} #go-canteiro .g-n{font:600 .6875rem/1 var(--f-d);color:var(--ink-2)} #go-canteiro .g-t{font:400 .75rem/1.2 var(--f-t);color:color-mix(in srgb,var(--g0) 35%,var(--ink-2));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #go-canteiro .canteiro-gantt__eixo .g-t{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-canteiro .g-row--etapa .g-n,#go-canteiro .g-row--etapa .g-t{font-weight:700;color:var(--ink)} #go-canteiro .g-row--atraso .g-n,#go-canteiro .g-row--atraso .g-t{color:var(--red-ink)} #go-canteiro .g-trilho{position:relative;align-self:stretch; background: linear-gradient(var(--hair-2l),var(--hair-2l)) calc(2 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(var(--hair-2l),var(--hair-2l)) calc(9 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(var(--hair-2l),var(--hair-2l)) calc(16 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(rgba(42,41,41,.2),rgba(42,41,41,.2)) calc(22 / 28 * 100%) 0/1px 100% no-repeat, linear-gradient(var(--hair-2l),var(--hair-2l)) calc(23 / 28 * 100%) 0/1px 100% no-repeat} #go-canteiro .g-b{position:absolute;top:50%;height:10px;margin-top:-5px;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);border-radius:3px; transform-origin:left center;transition:transform .9s var(--ease)} #go-canteiro .g-b.is-antes{border-top-left-radius:0;border-bottom-left-radius:0} #go-canteiro .g-b.is-depois{border-top-right-radius:0;border-bottom-right-radius:0} #go-canteiro .g-b--etapa{background:color-mix(in srgb,var(--white) 17%,var(--ink-2));height:8px;margin-top:-4px} #go-canteiro .g-b--ok{background:var(--green)} #go-canteiro .g-b--atraso{background:var(--red)} #go-canteiro .g-b--ativ{background:color-mix(in srgb,var(--white) 73%,var(--g1))} #go-canteiro .canteiro-gantt.is-crescer .g-b{transform:scaleX(0);transition:none} #go-canteiro .canteiro-gantt__leg,#go-canteiro .canteiro-pilha__leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font:500 .6875rem/1.2 var(--f-d);color:var(--ink-2)} #go-canteiro .lg{display:inline-flex;align-items:center;gap:6px} #go-canteiro .lg::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor} #go-canteiro .lg--etapa::before{background:color-mix(in srgb,var(--white) 17%,var(--ink-2))} #go-canteiro .lg--ok::before{background:var(--green)} #go-canteiro .lg--atraso::before{background:var(--red)} #go-canteiro .lg--ativ::before{background:color-mix(in srgb,var(--white) 73%,var(--g1))} #go-canteiro .lg--ni::before{background:color-mix(in srgb,var(--white) 25%,var(--ink-2))} #go-canteiro .lg b{font-weight:600;color:var(--ink)} #go-canteiro .canteiro-pilha{display:flex;gap:2px;height:8px;margin:2px 0 0;border-radius:4px;overflow:hidden} #go-canteiro .canteiro-pilha i{flex:var(--n) 1 0;background:color-mix(in srgb,var(--white) 25%,var(--ink-2))} #go-canteiro .canteiro-pilha .p-atraso{background:var(--red)} #go-canteiro .canteiro-pilha .p-ok{background:var(--green)} /* aba RDO do dia */ #go-canteiro .canteiro-rdo .ui-sec__h{margin-bottom:4px} #go-canteiro .canteiro-rdo__st{transition:background-color .4s var(--ease),color .4s var(--ease)} #go-canteiro .canteiro-rdo__conta{margin:0 0 4px;font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #go-canteiro .canteiro-rdo__conta b{font:600 .75rem/1.3 var(--f-d);color:var(--ink)} #go-canteiro .canteiro-rdo__lista{list-style:none;margin:0;padding:0;display:grid} #go-canteiro .canteiro-chk{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:30px; box-shadow:0 1px 0 var(--hair-1l);cursor:pointer} #go-canteiro .canteiro-rdo__lista li:last-child .canteiro-chk{box-shadow:none} #go-canteiro .canteiro-chk input{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:inherit} #go-canteiro .canteiro-chk__box{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--white); box-shadow:inset 0 0 0 1.5px rgba(42,41,41,.34);color:var(--ink);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)} #go-canteiro .canteiro-chk__box svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .3s var(--ease)} #go-canteiro .canteiro-chk input:checked + .canteiro-chk__box{background:var(--green);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} #go-canteiro .canteiro-chk input:checked + .canteiro-chk__box svg{opacity:1;transform:none} #go-canteiro .canteiro-chk input:focus-visible + .canteiro-chk__box{outline:2px solid var(--green-ink);outline-offset:2px} #go-canteiro .canteiro-chk:hover .canteiro-chk__box{box-shadow:inset 0 0 0 1.5px rgba(42,41,41,.6)} #go-canteiro .canteiro-chk:hover input:checked + .canteiro-chk__box{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} #go-canteiro .canteiro-chk__t{font:600 .8125rem/1.2 var(--f-d);color:var(--ink)} #go-canteiro .canteiro-chk__st{font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-canteiro .canteiro-chk__st::after{content:"A conferir"} #go-canteiro .canteiro-chk input:checked ~ .canteiro-chk__st{color:var(--green-ink)} #go-canteiro .canteiro-chk input:checked ~ .canteiro-chk__st::after{content:"Conferido"} #go-canteiro .canteiro-chk input:disabled ~ *{opacity:.72} #go-canteiro .canteiro-chk:has(input:disabled){cursor:default} #go-canteiro .canteiro-rdo__acao{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:10px} #go-canteiro .canteiro-rdo__enviar{min-height:34px;padding:0 16px;gap:7px} #go-canteiro .canteiro-rdo__ok{display:none;width:12px;height:12px} #go-canteiro .canteiro-rdo__ok svg{width:12px;height:12px} #go-canteiro .canteiro-rdo__enviar[aria-disabled="true"]{opacity:.55;cursor:not-allowed} #go-canteiro .canteiro-rdo.is-enviado .canteiro-rdo__enviar{opacity:1;cursor:default;background:rgba(91,187,91,.16);color:var(--green-ink);box-shadow:inset 0 0 0 1px rgba(45,110,49,.28)} #go-canteiro .canteiro-rdo.is-enviado .canteiro-rdo__ok{display:block} #go-canteiro .canteiro-rdo__desfazer{min-height:34px} #go-canteiro .canteiro-rdo__dica{font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #go-canteiro .canteiro-efeito{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:11px 14px;background:var(--white);box-shadow:0 0 0 1px var(--hair-1l)} #go-canteiro .canteiro-efeito__k{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);margin-right:auto} #go-canteiro .canteiro-efeito__i{display:inline-flex;align-items:baseline;gap:8px} #go-canteiro .canteiro-efeito__i b{font:600 .9375rem/1 var(--f-d);color:var(--ink)} #go-canteiro .canteiro-pn > .canteiro-efeito{flex:0 0 auto} #go-canteiro #go-canteiro-pn-3 > .canteiro-rdo{flex:1 1 auto} /* ---------- marcadores rastreados ---------- */ #go-canteiro .alvo{position:absolute;left:var(--x);top:var(--y);width:0;height:0} #go-canteiro .alvo.is-aberto{z-index:2} #go-canteiro .alvo__btn{position:absolute;left:-22px;top:-22px;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px 0 0;border:0;border-radius:22px;background:none;color:var(--on); cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent} @media (min-width:961px){ #go-canteiro .alvo--rot-esq .alvo__btn{left:auto;right:-22px;flex-direction:row-reverse;padding:0 0 0 4px} } #go-canteiro .alvo__btn:focus-visible{outline:2px solid var(--green);outline-offset:0} #go-canteiro .alvo__mira{position:relative;flex:none;width:44px;height:44px} #go-canteiro .alvo__mira::before{content:"";position:absolute;inset:8px; --c:var(--green); background: linear-gradient(var(--c),var(--c)) 0 50%/8px 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 50%/8px 1px no-repeat, linear-gradient(var(--c),var(--c)) 50% 0/1px 8px no-repeat, linear-gradient(var(--c),var(--c)) 50% 100%/1px 8px no-repeat; transition:transform .5s var(--ease)} #go-canteiro .alvo__mira::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; box-shadow:inset 0 0 0 1px var(--green),0 0 0 3px rgba(14,15,14,.35);background:rgba(14,15,14,.25);transition:background-color .3s var(--ease),transform .4s var(--ease)} #go-canteiro .alvo__rot{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:5px;white-space:nowrap; background:rgba(21,21,21,.88);box-shadow:inset 0 0 0 1px rgba(91,187,91,.34),0 6px 16px -8px rgba(0,0,0,.7); font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on);transition:box-shadow .3s var(--ease),background-color .3s var(--ease)} #go-canteiro .alvo__rot .num{color:var(--green);letter-spacing:.06em} #go-canteiro .alvo__btn:hover .alvo__rot,#go-canteiro .alvo.is-aberto .alvo__rot{box-shadow:inset 0 0 0 1px var(--green),0 6px 16px -8px rgba(0,0,0,.7);background:rgba(21,21,21,.96)} #go-canteiro .alvo__btn:hover .alvo__mira::after,#go-canteiro .alvo.is-aberto .alvo__mira::after{background:rgba(91,187,91,.42)} #go-canteiro .alvo.is-aberto .alvo__mira::before{transform:rotate(45deg) scale(.92)} /* pulso depois de acender: 2 ciclos (menos de 5s), só transform e opacity */ #go-canteiro .alvo__pulso{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; box-shadow:inset 0 0 0 1px var(--green);opacity:0;pointer-events:none} #go-canteiro .alvo.is-aceso .alvo__pulso{animation:canteiro-pulso 1.6s var(--ease) .2s 2} @keyframes canteiro-pulso{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}} /* antes da varredura: marcadores apagados (só com o JS ativo) */ #go-canteiro.is-armado .alvo:not(.is-aceso) .alvo__btn{opacity:0;pointer-events:none} #go-canteiro.is-armado .alvo:not(.is-aceso) .alvo__mira::before{transform:scale(.3)} #go-canteiro.is-armado .alvo:not(.is-aceso) .alvo__rot{opacity:0;transform:translateX(-8px)} @media (min-width:961px){ #go-canteiro.is-armado .alvo--rot-esq:not(.is-aceso) .alvo__rot{transform:translateX(8px)} } /* lado do rótulo decidido pelo desvio de colisão (canteiro.js) */ #go-canteiro .alvo[data-lado="d"] .alvo__btn{left:-22px;right:auto;flex-direction:row;padding:0 4px 0 0} #go-canteiro .alvo[data-lado="e"] .alvo__btn{left:auto;right:-22px;flex-direction:row-reverse;padding:0 0 0 4px} #go-canteiro.is-armado .alvo[data-lado="d"]:not(.is-aceso) .alvo__rot{transform:translateX(-8px)} #go-canteiro.is-armado .alvo[data-lado="e"]:not(.is-aceso) .alvo__rot{transform:translateX(8px)} #go-canteiro .alvo__btn{transition:opacity .35s var(--ease)} #go-canteiro .alvo__rot{transition:opacity .4s var(--ease) .12s,transform .6s var(--ease) .12s,box-shadow .3s var(--ease),background-color .3s var(--ease)} /* cartão de dado do marcador */ #go-canteiro .alvo__cartao{position:absolute;left:4px;top:30px;z-index:2;display:grid;justify-items:start;gap:7px;width:max-content;max-width:232px;padding:12px 14px 13px;border-radius:8px; background:var(--corte-bg);box-shadow:inset 0 0 0 1px rgba(236,240,232,.14),0 0 0 1px rgba(0,0,0,.35),0 18px 40px -16px rgba(0,0,0,.75); pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s linear .35s} #go-canteiro .alvo.is-aberto .alvo__cartao{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s} #go-canteiro .alvo__k{font:600 .6875rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2)} #go-canteiro .alvo__v{font:600 1rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--white)} #go-canteiro [data-alvo="avanco"] .alvo__v{font-size:1.5rem;line-height:1} #go-canteiro .alvo__chip{height:22px} #go-canteiro .alvo__barra{display:block;width:180px;height:4px;border-radius:2px;background:rgba(236,240,232,.14);overflow:hidden} #go-canteiro .alvo__barra i{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(var(--v,.268))} /* ---------- fio do cartão até o painel ---------- */ #go-canteiro .canteiro__fio{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;opacity:0;transition:opacity .25s var(--ease)} #go-canteiro .canteiro__fio.is-on{opacity:1} #go-canteiro .canteiro__fio path{fill:none;stroke:var(--green);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke} #go-canteiro .canteiro__fio circle{fill:var(--green)} #go-canteiro .canteiro__fio [data-fio-b]{fill:var(--g0);stroke:var(--green);stroke-width:1.5} /* ---------- alturas menores ---------- */ @media (min-width:961px) and (max-height:820px){ #go-canteiro{--leg-h:30px} #go-canteiro .canteiro-app .ui-head{padding:9px 14px} #go-canteiro .canteiro-app .ui-tab{min-height:36px} #go-canteiro .canteiro-app .ui-kpi{padding:10px 14px 11px;gap:6px} #go-canteiro .canteiro-app .ui-kpi__v{font-size:1.4375rem} #go-canteiro .canteiro-app .ui-kpi[data-liga="avanco"] .ui-kpi__v{font-size:1.5625rem} #go-canteiro .canteiro-app .ui-sec{padding:10px 14px} #go-canteiro .canteiro-app .ui-sec__h{margin-bottom:6px} #go-canteiro .canteiro-app .ui-row{min-height:27px} #go-canteiro .g-row{height:24px} #go-canteiro .canteiro-chk{min-height:26px} #go-canteiro .canteiro-rdo__acao{margin-top:8px} #go-canteiro .canteiro-efeito{padding:9px 14px} #go-canteiro .canteiro-app .ui-foot{padding:8px 14px} #go-canteiro .canteiro__fig01{top:calc(100% + 13px)} } /* ---------- tablet e celular: texto, faixa da foto com os marcadores, painel ---------- */ @media (max-width:960px){ #go-canteiro .canteiro__grade{display:flex;flex-direction:column;align-items:stretch} #go-canteiro .canteiro__texto{padding-bottom:0} #go-canteiro .canteiro__topo::before,#go-canteiro .canteiro__base::before{display:none} #go-canteiro .canteiro__faixa{display:block;position:relative;flex:1 1 auto;min-height:72px;margin:12px 0} #go-canteiro .canteiro__fig{margin:0 auto 0 0;width:min(100%,520px)} #go-canteiro .canteiro__fig01{position:static;margin-top:10px} #go-canteiro .canteiro__fig00{position:absolute;left:0;bottom:4px;z-index:2;padding:0;box-shadow:none} #go-canteiro .alvo.is-aberto .alvo__rot{opacity:0} /* a caixa da foto se ancora na faixa: o centro da faixa mostra a frente da laje e a equipe */ #go-canteiro{--fw:max(150vw,1180px);--fx:.56;--fy:-58%} #go-canteiro .canteiro__quadro{top:50%;left:calc((100% - var(--fw)) * var(--fx))} #go-canteiro .canteiro__foto{-webkit-mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 24%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 74%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--g0) 99%,var(--g1)) 24%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 74%,transparent 96%)} #go-canteiro .canteiro__veu{background: linear-gradient(180deg,rgba(14,15,14,.62) 0,rgba(14,15,14,.30) 34%,rgba(14,15,14,0) 50%)} } @media (max-width:760px){ #go-canteiro{padding-top:calc(var(--hdr) + clamp(14px,2.6svh,24px));padding-bottom:clamp(14px,2.4svh,22px); --fw:126vw;--fx:.55;--fy:-31%;--fr:820 / 647} #go-canteiro .alvo{left:var(--xm);top:var(--ym)} #go-canteiro .alvo--so-largo{display:none} #go-canteiro .canteiro__meta{font-size:clamp(.625rem,2.85vw,.6875rem);letter-spacing:.08em;gap:4px 8px;margin-bottom:clamp(10px,1.8svh,16px)} #go-canteiro .canteiro__h1{margin-bottom:clamp(10px,1.8svh,16px)} #go-canteiro .canteiro__apoio{font-size:clamp(1rem,4.4vw,1.0625rem);line-height:1.36} #go-canteiro .canteiro__cta{margin-top:clamp(14px,2.4svh,20px)} #go-canteiro .canteiro__cta .btn{--h:48px;font-size:1rem} #go-canteiro .canteiro__faixa{min-height:64px;margin:8px 0} #go-canteiro .canteiro__fig00{left:auto;right:0;top:0;bottom:auto;display:inline-flex;align-items:center;height:22px;max-width:100%;padding:0 8px;border-radius:4px;white-space:nowrap; background:rgba(21,21,21,.84);font-size:.625rem;letter-spacing:.1em} #go-canteiro .canteiro__fig00 .fig__n{margin-right:.6em} #go-canteiro .canteiro__fig01{display:none} #go-canteiro .canteiro__moldura{--cantos-off:8px} #go-canteiro .canteiro-app .ui-head{padding:9px 12px;gap:10px} #go-canteiro .canteiro-app .ui-ctx small{display:none} #go-canteiro #go-canteiro-pn-1 .ui-sec__h{display:none} #go-canteiro .canteiro-app .ui-head .chip{display:none} #go-canteiro .canteiro-app .ui-tabs{padding:0 4px} #go-canteiro .canteiro-app .ui-tab{min-height:38px;padding:0 9px} #go-canteiro .canteiro-so-largo{display:none!important} #go-canteiro .canteiro-app .ui-kpi{padding:9px 10px 10px;gap:5px} #go-canteiro .canteiro-app .ui-kpi__v{font-size:1.25rem} #go-canteiro .canteiro-app .ui-kpi[data-liga="avanco"] .ui-kpi__v{font-size:1.375rem} #go-canteiro .canteiro-app .ui-sec{padding:9px 12px} #go-canteiro .canteiro-app .ui-sec__h{margin-bottom:4px;min-height:20px} #go-canteiro .canteiro-app .ui-row{min-height:27px} #go-canteiro .canteiro-pnls > .canteiro-pn{gap:6px;padding-bottom:6px} #go-canteiro .g-row{height:25px;grid-template-columns:24px minmax(0,1fr) 42%} #go-canteiro .canteiro-gantt__leg{display:none} #go-canteiro .canteiro-situ .ui-sec__h{display:none} #go-canteiro .canteiro-pilha__leg{margin-top:6px} #go-canteiro .canteiro-rdo__conta{display:none} #go-canteiro .canteiro-rdo__lista{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px} #go-canteiro .canteiro-chk{min-height:27px;gap:8px} #go-canteiro .canteiro-chk__st{display:none} #go-canteiro .canteiro-rdo__lista li:nth-last-child(2) .canteiro-chk{box-shadow:none} #go-canteiro .canteiro-rdo__acao{margin-top:6px} #go-canteiro .canteiro-rdo__dica{display:none} #go-canteiro .canteiro-efeito{padding:6px 12px;gap:4px 14px} #go-canteiro .canteiro-efeito__i b{font-size:.875rem} #go-canteiro .canteiro-rdo__enviar,#go-canteiro .canteiro-rdo__desfazer{min-height:32px} #go-canteiro .canteiro-efeito__k{display:none} #go-canteiro .canteiro-app .ui-foot{padding:7px 12px} #go-canteiro .alvo__cartao{max-width:min(210px,calc(100vw - 48px));padding:10px 12px 11px;gap:6px} #go-canteiro .alvo__v{font-size:.9375rem} } /* celular estreito: a faixa da foto não tem canto livre para a legenda; ela fica só para leitor de tela */ @media (max-width:380px){ #go-canteiro .canteiro__fig00{position:absolute!important;left:0;right:auto;top:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0} } @media (max-width:760px) and (max-height:760px){ #go-canteiro .canteiro-so-medio{display:none!important} #go-canteiro .canteiro-app .ui-kpi{padding:8px 10px 9px} #go-canteiro .canteiro-app .ui-row{min-height:25px} #go-canteiro .canteiro-gantt__lista .g-row[data-g="1.2"]{display:none} #go-canteiro .canteiro-chk{min-height:25px} #go-canteiro .canteiro-app .ui-tab{min-height:36px} } /* ---------- movimento reduzido: estados finais, sem varredura ---------- */ @media (prefers-reduced-motion:reduce){ #go-canteiro .canteiro__varredura{display:none} #go-canteiro .alvo.is-aceso .alvo__pulso{animation:none} #go-canteiro .canteiro-pn:not([hidden]){animation:none} } /* ===================================================================== LPs gestao-de-obras: o h1 da LP é mais longo que o do v3 (corpo menor pela largura do bloco de texto, para o Térreo caber na janela). ===================================================================== */ #go-canteiro .canteiro__h1{font-size:min(var(--h1),11.4cqi)} @media (max-width:899px){ #go-canteiro .canteiro__h1{font-size:min(var(--h1),10.6cqi);line-height:1} } @media (max-width:420px){ #go-canteiro .canteiro__h1{font-size:min(var(--h1),9.8cqi)} } @media (max-width:420px) and (max-height:760px){ #go-canteiro .canteiro__h1{font-size:min(var(--h1),9cqi)} #go-canteiro .canteiro__apoio{font-size:.875rem;line-height:1.3} #go-canteiro .canteiro-gantt__leg{display:none} #go-canteiro .canteiro__h1{margin-bottom:6px} #go-canteiro .canteiro__cta{margin-top:10px} } /* ---- sections/go-planilhas.css ---- */ /* ===================================================================== LP gestao-de-obras A · PAV. 01 · #go-planilhas (variante do #fragmentos do v3) Uma planilha para cada obra sobre o plano escuro; "Organizar no Obrify" faz cada planilha voar (FLIP no JS) para a sua linha do painel único de obras. Tudo escopado por #go-planilhas. Planilhas medidas em em (escala pelo --fu). ===================================================================== */ #go-planilhas{ --fu:clamp(12px,min(1.18vw,1.9svh),18px); --palco-h:min(var(--secao-util),640px); --f-xls:Aptos,Calibri,"Segoe UI",Arial,sans-serif; --sombra-tela:0 0 0 .5px rgba(0,0,0,.40),1px 2px 3px rgba(0,0,0,.26),6px 16px 24px -10px rgba(0,0,0,.62); background:radial-gradient(64% 58% at 70% 52%,rgba(236,240,232,.05),transparent 72%),var(--bg); } /* ---------- layout (mesmo do #fragmentos) ---------- */ #go-planilhas .gp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:1fr auto auto 1fr;grid-template-areas:". palco" "cab palco" "acao palco" ". palco"; column-gap:clamp(32px,4.4vw,72px);align-items:start} #go-planilhas .gp-cab{grid-area:cab;max-width:34rem} #go-planilhas .gp-lead{margin-top:clamp(14px,2.4svh,24px);max-width:38ch} #go-planilhas .gp-acao{grid-area:acao;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(22px,4svh,40px)} #go-planilhas .gp-fig{flex-basis:100%} #go-planilhas .gp-btn[data-org="sim"] .btn__arr{display:none} html:not(.js) #go-planilhas .gp-btn{display:none} /* ---------- palco ---------- */ #go-planilhas .gp-palco{grid-area:palco;position:relative;height:var(--palco-h);display:grid;place-items:center;font-size:var(--fu);container-type:inline-size} #go-planilhas .gp-camada{position:absolute;inset:0;z-index:2} #go-planilhas [data-estado="organizado"] .gp-camada{pointer-events:none} #go-planilhas .gp-pos{position:absolute;left:var(--x);top:var(--y);width:min(26em,51%);z-index:var(--z,1)} #go-planilhas .gp-xls{position:relative;transform:rotate(var(--r,0deg));transform-origin:50% 50%;will-change:transform; overflow:hidden;border-radius:3px;background:var(--white);color:color-mix(in srgb,var(--g0) 94%,var(--ui-sub));font:400 .7em/1 var(--f-xls);box-shadow:var(--sombra-tela);transition:translate .5s var(--ease)} @media (hover:hover) and (pointer:fine){ #go-planilhas [data-estado="espalhado"] .gp-pos:hover .gp-xls{translate:0 -4px} } #go-planilhas [data-estado="organizado"] .gp-pos{visibility:hidden} /* ---------- planilha (réplica do Excel, como no #fragmentos) ---------- */ #go-planilhas .gp-xls__fx{display:flex;align-items:center;gap:.8em;height:2.2em;padding-right:.6em;background:var(--white);box-shadow:0 1px 0 color-mix(in srgb,var(--white) 81%,var(--ink));white-space:nowrap;overflow:hidden} #go-planilhas .gp-xls__ref{display:flex;align-items:center;height:100%;padding:0 .7em;min-width:4.6em;box-shadow:1px 0 0 color-mix(in srgb,var(--white) 81%,var(--ink));color:color-mix(in srgb,var(--ink) 79%,var(--ink-2))} #go-planilhas .gp-xls__f{font-style:italic;color:color-mix(in srgb,var(--white) 50%,var(--g0));font-family:Georgia,"Times New Roman",serif} #go-planilhas .gp-xls__fv{overflow:hidden;text-overflow:ellipsis} #go-planilhas .gp-xls__g{display:grid} #go-planilhas .gp-xls__g--4{grid-template-columns:2.4em 2.6em minmax(0,1fr) 2.6em 4.6em} #go-planilhas .gp-xls__g--3{grid-template-columns:2.4em minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1fr)} #go-planilhas .gp-xls__g--2{grid-template-columns:2.4em minmax(0,1fr) minmax(0,1fr)} #go-planilhas .gp-xls__g--1{grid-template-columns:2.4em minmax(0,1fr)} #go-planilhas .gp-xls__g > span{display:flex;align-items:center;height:1.9em;padding:0 .4em;white-space:nowrap;overflow:hidden;box-shadow:inset -1px -1px 0 color-mix(in srgb,var(--white) 87%,var(--g1))} #go-planilhas .gp-h,#go-planilhas .gp-n{justify-content:center;background:color-mix(in srgb,var(--white) 95%,var(--g0));color:color-mix(in srgb,var(--white) 30%,var(--g2));font-size:.94em;box-shadow:inset -1px -1px 0 color-mix(in srgb,var(--white) 80%,var(--ink))!important} #go-planilhas .gp-c--th{font-weight:700;color:color-mix(in srgb,var(--ink) 79%,var(--ink-2));background:color-mix(in srgb,var(--white) 95%,var(--ink-2))} #go-planilhas .gp-c--num{justify-content:flex-end} #go-planilhas .gp-c--alerta{background:color-mix(in srgb,var(--red) 16%,var(--white));font-weight:700} #go-planilhas .gp-c--txt{position:relative} #go-planilhas .gp-c--txt::before{content:"";position:absolute;left:0;top:0;width:.55em;height:.55em;background:linear-gradient(135deg,var(--green-ink) 50%,transparent 50%)} #go-planilhas .gp-c--sel{position:relative;box-shadow:inset 0 0 0 2px var(--green-ink)!important} #go-planilhas .gp-xls__abas{display:flex;height:2em;background:color-mix(in srgb,var(--white) 95%,var(--g0));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 80%,var(--ink));padding-left:.6em;overflow:hidden} #go-planilhas .gp-xls__abas span{display:flex;align-items:center;padding:0 .9em;color:color-mix(in srgb,var(--white) 30%,var(--g2));font-size:.94em;white-space:nowrap;box-shadow:inset -1px 0 0 color-mix(in srgb,var(--white) 84%,var(--g2))} #go-planilhas .gp-xls__abas .is-on{background:var(--white);color:var(--green-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--green-ink),inset -1px 0 0 color-mix(in srgb,var(--white) 84%,var(--g2))} /* ---------- destino: painel único de obras ---------- */ #go-planilhas .gp-reg{position:relative;z-index:1;width:min(100%,560px);font-size:.875rem;transition:opacity .35s var(--ease)} #go-planilhas [data-estado="espalhado"] .gp-reg{opacity:0;visibility:hidden} #go-planilhas [data-estado="organizado"] .gp-reg, #go-planilhas [data-estado="desfazendo"] .gp-reg{opacity:1;visibility:visible} html:not(.js) #go-planilhas .gp-reg{visibility:hidden} #go-planilhas .gp-tab{padding:4px 16px 8px} #go-planilhas .gp-tab__h,#go-planilhas .gp-linha{display:grid;grid-template-columns:minmax(0,1fr) 4.8em 5.6em 5.4em 6.2em;align-items:center;column-gap:10px} #go-planilhas .gp-tab__h{margin:0;padding:8px 0;font:600 .6875rem/1.2 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);box-shadow:inset 0 -1px 0 var(--hair-2l)} #go-planilhas .gp-tab__h span:not(:first-child),#go-planilhas .gp-linha > :not(.gp-obra){justify-self:end;text-align:right} #go-planilhas .gp-linhas{list-style:none;margin:0;padding:0} #go-planilhas .gp-linha{min-height:52px;padding:8px 0;box-shadow:inset 0 -1px 0 var(--hair-1l)} #go-planilhas .gp-linha:last-child{box-shadow:none} #go-planilhas .gp-obra{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} #go-planilhas .gp-obra b{font:600 .875rem/1.2 var(--f-d);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #go-planilhas .gp-obra .chip{height:20px;font-size:.6875rem} #go-planilhas .gp-sem{color:var(--ink-2);font-size:.8125rem} #go-planilhas .gp-linha.is-chegou{animation:gp-chega .7s var(--ease) both} @keyframes gp-chega{from{background:rgba(91,187,91,.22)}to{background:transparent}} /* ---------- celular e tablet: texto, palco e botão empilhados ---------- */ @media (max-width:899px){ #go-planilhas{--fu:clamp(10px,2.9vw,15px);--palco-h:clamp(250px,calc(var(--secao-util) - 360px),400px)} #go-planilhas .gp-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"cab" "palco" "acao";column-gap:0} #go-planilhas .gp-cab{max-width:none} #go-planilhas .gp-palco{margin-top:clamp(14px,2.6svh,28px)} #go-planilhas .gp-acao{margin-top:clamp(12px,2.2svh,24px);gap:10px 16px} #go-planilhas .gp-so-largo{display:none} #go-planilhas .gp-tab__h,#go-planilhas .gp-linha{grid-template-columns:minmax(0,1fr) 4.4em 5em} #go-planilhas .gp-tab{padding:2px 12px 4px} #go-planilhas .gp-linha{min-height:46px;padding:6px 0} } @media (max-width:899px) and (max-height:760px){ #go-planilhas .gp-lead{font-size:1rem;line-height:1.42} } @media (max-width:420px){ #go-planilhas .gp-obra .chip{display:none} #go-planilhas .gp-reg .ui-head{padding-block:10px} } @media (max-width:899px){ #go-planilhas .gp-pos{width:48%} #go-planilhas [data-obra="adutora"]{--x:0%!important;--y:2%!important} #go-planilhas [data-obra="barragem"]{--x:50%!important;--y:0%!important} #go-planilhas [data-obra="horizonte"]{--x:2%!important;--y:50%!important} #go-planilhas [data-obra="aurora"]{--x:50%!important;--y:48%!important} #go-planilhas .gp-reg > .ui-head{display:none} #go-planilhas .gp-linha{min-height:40px;padding:4px 0} #go-planilhas .gp-tab__h{padding:6px 0} #go-planilhas .gp-cab .h2{font-size:calc(var(--h2) * .9)} } @media (max-width:899px) and (max-height:800px){ #go-planilhas .gp-cab .h2{font-size:calc(var(--h2) * .84)} #go-planilhas .gp-lead{font-size:.9375rem} } /* ---- sections/go-visao-dono.css ---- */ /* ===================================================================== LP gestao-de-obras A · PAV. 02 · #go-visao-dono Mesma linguagem do Pav. 06 (#estrutura) do institucional: cabeçalho com ficha em selo de prancha, alternador de obras com ícone e subtítulo (pastilha clara deslizando) e o painel emoldurado com o card da obra e o que precisa do dono. Tudo escopado por #go-visao-dono, só tokens. ===================================================================== */ #go-visao-dono{ --vd-gap:clamp(14px,2.4svh,26px); --vd-op-h:58px; } /* ---------- grade da seção ---------- */ #go-visao-dono .vd-grade{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "selo" "fig";row-gap:var(--vd-gap);align-items:start} #go-visao-dono .vd-cab{grid-area:cab} #go-visao-dono .vd-cab .eyebrow{margin-bottom:clamp(10px,1.8svh,18px)} #go-visao-dono .vd-apoio{margin-top:clamp(10px,1.6svh,16px);max-width:46ch} #go-visao-dono .vd-cta{margin-top:clamp(18px,3svh,28px)} #go-visao-dono .vd-selo{grid-area:selo} #go-visao-dono .vd-fig{grid-area:fig;min-width:0;margin-top:clamp(4px,1svh,10px)} /* ---------- ficha: selo de prancha ---------- */ #go-visao-dono .vd-selo{position:relative;border-radius:3px;box-shadow:inset 0 0 0 1px var(--linha-forte)} #go-visao-dono .vd-selo-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0;padding:9px 14px 8px; font:600 .6875rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);box-shadow:inset 0 -1px 0 var(--linha-forte)} #go-visao-dono .vd-selo-d{color:var(--fg-2);letter-spacing:.1em} #go-visao-dono .vd-ficha{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} #go-visao-dono .vd-ficha li{position:relative;display:grid;align-content:start;gap:6px;min-width:0;padding:10px 14px 12px; box-shadow:inset -1px 0 0 var(--linha),inset 0 -1px 0 var(--linha)} #go-visao-dono .vd-ficha li:nth-child(2n){box-shadow:inset 0 -1px 0 var(--linha)} #go-visao-dono .vd-ficha li:nth-child(3){box-shadow:inset -1px 0 0 var(--linha)} #go-visao-dono .vd-ficha li:nth-child(4){box-shadow:none} #go-visao-dono .vd-fn{font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--green)} #go-visao-dono .vd-ft{font:500 1rem/1.2 var(--f-d);letter-spacing:-.005em;color:var(--fg-forte);text-wrap:balance} #go-visao-dono .vd-fr{position:absolute;top:10px;right:12px;font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)} /* ---------- alternador de obras (pastilha clara deslizando) ---------- */ #go-visao-dono .vd-troca{margin-bottom:clamp(12px,1.8svh,18px)} #go-visao-dono .vd-rot{margin:0 0 10px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)} #go-visao-dono .vd-alt{--cols:4;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));padding:4px;border-radius:12px; background:color-mix(in srgb,var(--paper) 3.5%,transparent);box-shadow:inset 0 0 0 1px var(--linha-forte)} #go-visao-dono .vd-alt-thumb{position:absolute;top:4px;left:4px;width:calc((100% - 8px) / var(--cols));height:calc(100% - 8px);border-radius:9px;background:var(--paper); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--g0) 25%,transparent),0 6px 16px -8px color-mix(in srgb,var(--g0) 60%,transparent); transition:transform .55s var(--ease)} #go-visao-dono .vd-alt[data-sel="1"] .vd-alt-thumb{transform:translateX(100%)} #go-visao-dono .vd-alt[data-sel="2"] .vd-alt-thumb{transform:translateX(200%)} #go-visao-dono .vd-alt[data-sel="3"] .vd-alt-thumb{transform:translateX(300%)} #go-visao-dono .vd-op{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center; column-gap:12px;row-gap:2px;min-width:0;min-height:var(--vd-op-h);padding:6px 16px;border:0;border-radius:9px;background:none;color:var(--fg);text-align:left;cursor:pointer; transition:color .35s var(--ease)} #go-visao-dono .vd-op-i{grid-row:1 / span 2;width:22px;height:22px;color:var(--fg-2);transition:color .35s var(--ease)} #go-visao-dono .vd-op-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 1.0625rem/1.1 var(--f-d);letter-spacing:-.005em} #go-visao-dono .vd-op-d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 .6875rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:color .35s var(--ease)} #go-visao-dono .vd-op:first-of-type .vd-op-d{color:var(--red-soft)} #go-visao-dono .vd-op:hover .vd-op-i{color:var(--fg)} #go-visao-dono .vd-op[aria-checked="true"]{color:var(--ink);cursor:default} #go-visao-dono .vd-op[aria-checked="true"] .vd-op-i{color:var(--green-ink)} #go-visao-dono .vd-op[aria-checked="true"] .vd-op-d{color:var(--ink-2)} #go-visao-dono .vd-op[aria-checked="true"]:first-of-type .vd-op-d{color:var(--red-ink)} #go-visao-dono .vd-op:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* ---------- painel emoldurado ---------- */ #go-visao-dono .vd-head{gap:12px;min-height:56px;padding:8px 14px} #go-visao-dono .vd-ctx{flex:1 1 auto} #go-visao-dono .vd-ordem{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} #go-visao-dono .vd-ordem-k{font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-visao-dono .vd-data{margin-left:6px} #go-visao-dono .vd-corpos{display:grid} #go-visao-dono .vd-corpos > *{grid-area:1 / 1;min-width:0} #go-visao-dono .vd-corpo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px;padding:8px} #go-visao-dono .vd-corpo.is-fora{visibility:hidden;pointer-events:none} #go-visao-dono .vd-corpo > .ui-sec{margin:0;border-radius:8px} #go-visao-dono .vd-corpo.is-entra > .ui-sec{animation:vd-entra .45s var(--ease) both} #go-visao-dono .vd-corpo.is-entra > .ui-sec + .ui-sec{animation-delay:60ms} @keyframes vd-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* card da obra (mesmo desenho do card do #estrutura) */ #go-visao-dono .vd-foto{position:relative;margin:-12px -14px 10px;height:clamp(64px,10svh,104px);overflow:hidden;border-radius:8px 8px 0 0;background:var(--ui-sub)} #go-visao-dono .vd-foto img{display:block;width:100%;height:100%;object-fit:cover} #go-visao-dono .vd-foto-st{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px; background:var(--white);color:var(--ink);font:600 .6875rem/1 var(--f-d);box-shadow:0 1px 2px color-mix(in srgb,var(--g0) 18%,transparent)} #go-visao-dono .vd-obra-t{margin:0 0 4px;font:600 .9375rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--ink)} #go-visao-dono .vd-kpis-obra .ui-row{min-height:31px} /* o que precisa do dono */ #go-visao-dono .vd-alertas{display:flex;flex-direction:column} #go-visao-dono .vd-alertas-h{margin-bottom:8px} #go-visao-dono .vd-alerta{gap:6px} #go-visao-dono .vd-tri{width:13px;height:13px;flex:none} #go-visao-dono .vd-regra{margin:0 0 10px;font:400 .875rem/1.4 var(--f-t);color:var(--ink-2)} #go-visao-dono .vd-regra b{font-weight:700;color:var(--ink)} #go-visao-dono .vd-kpis{margin-bottom:6px} #go-visao-dono .vd-rows .ui-row{min-height:31px} #go-visao-dono .vd-nd{margin:8px 0 0;font:400 .75rem/1.4 var(--f-t);color:var(--ink-2)} #go-visao-dono .vd-dica{margin:auto 0 0;padding-top:10px;font:400 .75rem/1.45 var(--f-t);color:var(--ink-2)} /* ===================================================================== Desktop: ficha ao lado do título; a figura ocupa a largura toda ===================================================================== */ @media (min-width:1100px){ #go-visao-dono .vd-grade{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"cab selo" "fig fig";column-gap:clamp(36px,4.2vw,72px);align-items:end} } /* desktop estreito: 4 obras lado a lado sem cortar o nome (ícone sai, fonte menor) */ @media (min-width:1100px) and (max-width:1439.98px){ #go-visao-dono .vd-op{grid-template-columns:minmax(0,1fr);column-gap:0;padding:6px 12px} #go-visao-dono .vd-op-i{display:none} #go-visao-dono .vd-op-n{font-size:.9375rem} } /* desktop mais baixo: sem foto e respiros menores */ @media (min-width:1100px) and (max-height:860px){ #go-visao-dono{--vd-op-h:52px} #go-visao-dono .vd-ficha li{padding:8px 12px 10px;gap:4px} #go-visao-dono .vd-ft{font-size:.9375rem} } /* ===================================================================== Tablet e celular: alternador 2x2, pastilha anda nas duas direções ===================================================================== */ @media (max-width:1099.98px){ #go-visao-dono .vd-alt{--cols:2} #go-visao-dono .vd-alt-thumb{height:calc((100% - 8px) / 2)} #go-visao-dono .vd-alt[data-sel="1"] .vd-alt-thumb{transform:translate(100%,0)} #go-visao-dono .vd-alt[data-sel="2"] .vd-alt-thumb{transform:translate(0,100%)} #go-visao-dono .vd-alt[data-sel="3"] .vd-alt-thumb{transform:translate(100%,100%)} } @media (max-width:899.98px){ #go-visao-dono .vd-corpo{grid-template-columns:minmax(0,1fr)} #go-visao-dono .vd-ordem-k,#go-visao-dono .vd-ordem .chip{display:none} } @media (max-width:560px){ #go-visao-dono{--vd-op-h:48px} #go-visao-dono .vd-op{grid-template-columns:minmax(0,1fr);padding:6px 10px;column-gap:0} #go-visao-dono .vd-op-i{display:none} #go-visao-dono .vd-op-n{font-size:.875rem;white-space:normal;line-height:1.15} #go-visao-dono .vd-op-d{font-size:.5625rem;letter-spacing:.06em} #go-visao-dono .vd-ficha li{padding:8px 12px 10px;gap:4px} #go-visao-dono .vd-ft{font-size:.9375rem} #go-visao-dono .vd-fr{display:none} #go-visao-dono .vd-foto{height:84px} #go-visao-dono .vd-kpi-med{display:none} #go-visao-dono .vd-fig-x{display:none} } @media (prefers-reduced-motion:reduce){ #go-visao-dono .vd-alt-thumb{transition:none} #go-visao-dono .vd-corpo.is-entra > .ui-sec{animation:none} } /* ---- sections/go-rdo.css ---- */ /* ===================================================================== LPs gestao-de-obras · RDO digital · #go-rdo No formato do Pav. 03 (#rdo) do institucional: título largo em cima e um palco de três colunas com réguas que acendem com o fluxo: 01 o RDO no celular · 02 o registro estruturado (campos que se preenchem, como o "Interpreta") · 03 a foto da obra com o resultado (como o "Fala"). Estados em .gr-palco[data-estado]: repouso | enviando | enviado. ===================================================================== */ #go-rdo{ --gr-gap:clamp(16px,1.9vw,28px); --fone-h:clamp(420px,calc(var(--secao-util) - 150px),560px); --fone-w:calc(var(--fone-h) * .47); } /* ---------- cabeçalho: título largo + apoio e CTA ao lado ---------- */ #go-rdo .gr-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,4.4vw,72px);align-items:end} #go-rdo .gr-head .h2{max-width:15.5em} #go-rdo .gr-lead{margin:0;max-width:44ch} #go-rdo .gr-cta{margin-top:clamp(16px,2.6svh,24px)} /* ---------- palco: 3 colunas ---------- */ #go-rdo .gr-palco{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);column-gap:var(--gr-gap);align-items:stretch;margin-top:clamp(28px,4.4svh,48px)} #go-rdo .gr-col{display:flex;flex-direction:column;min-width:0} #go-rdo .regua{flex:none;margin-bottom:clamp(10px,1.6svh,14px)} #go-rdo .gr-fone-fig{flex:1 1 auto;display:flex;align-items:flex-start;margin:0} #go-rdo .rdo-fone{height:var(--fone-h)} /* 02: registro estruturado (painel branco) */ #go-rdo .gr-card{flex:1 1 auto;display:flex;flex-direction:column} #go-rdo .gr-card .ui-ctx b{color:var(--green-ink)} #go-rdo .gr-chip{transition:background-color .3s var(--ease),color .3s var(--ease)} #go-rdo .gr-chip.is-ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-ink)} #go-rdo .gr-campos{flex:1 1 auto;display:flex;flex-direction:column;margin:0;padding:0 16px;background:var(--white)} #go-rdo .gr-f{flex:1 0 auto;min-height:52px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-inline:-16px;padding:8px 16px; box-shadow:0 1px 0 var(--hair-1l);transition:background-color .6s var(--ease)} #go-rdo .gr-f:last-child{box-shadow:none} #go-rdo .gr-f.is-quente{background:color-mix(in srgb,var(--green) 10%,transparent)} #go-rdo .gr-f dt{display:flex;align-items:center;gap:10px;font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap} #go-rdo .gr-n{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:4px;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-ink); font:600 .6875rem/1 var(--f-l);letter-spacing:0;transition:background-color .4s var(--ease),color .4s var(--ease)} #go-rdo .gr-f.is-on .gr-n{background:var(--green);color:var(--ink)} #go-rdo .gr-f dd{margin:0;display:grid;justify-items:end;align-items:center;min-width:0;text-align:right} #go-rdo .gr-f dd > *{grid-area:1 / 1} #go-rdo .gr-ph{width:72px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 20%,transparent) 0 3px,transparent 3px 6px);transition:opacity .3s var(--ease)} #go-rdo .gr-v{max-width:100%;font:600 1rem/1.2 var(--f-d);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere; opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease),transform .5s var(--ease)} #go-rdo .gr-v small{display:block;margin-top:3px;font:500 .75rem/1.2 var(--f-d);letter-spacing:0;color:var(--ink-2)} #go-rdo .gr-f.is-on .gr-ph{opacity:0} #go-rdo .gr-f.is-on .gr-v{opacity:1;transform:none} /* 03: foto da obra com o resultado (moldura com cantos, como o 01 Fala do institucional) */ #go-rdo .gr-obra-moldura{--cantos-off:8px;flex:1 1 auto;min-height:0;display:flex} #go-rdo .gr-obra{ --veu:linear-gradient(180deg,color-mix(in srgb,var(--g0) 82%,transparent) 0%,color-mix(in srgb,var(--g0) 40%,transparent) 22%,color-mix(in srgb,var(--g0) 30%,transparent) 40%,color-mix(in srgb,var(--g0) 86%,transparent) 66%,color-mix(in srgb,var(--g0) 95%,transparent) 100%); --foto-pos:50% 50%; flex:1 1 auto;min-height:300px;display:flex;flex-direction:column;justify-content:space-between; border-radius:12px;box-shadow:inset 0 0 0 1px var(--hair-2),0 0 0 1px color-mix(in srgb,var(--g0) 35%,transparent),0 24px 48px -24px color-mix(in srgb,var(--g0) 60%,transparent)} #go-rdo .gr-obra::after{border-radius:inherit} #go-rdo .gr-obra img{object-position:var(--foto-pos)} #go-rdo .gr-obra__top{position:relative;z-index:4;padding:14px 16px 0} #go-rdo .gr-pill{display:inline-flex;align-items:center;gap:8px;height:30px;max-width:100%;padding:0 12px 0 10px;border-radius:999px; background:color-mix(in srgb,var(--g0) 84%,transparent);box-shadow:inset 0 0 0 1px var(--hair-3); font:600 .75rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on);white-space:nowrap} #go-rdo .gr-pill__dot{flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-2);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)} #go-rdo [data-estado="enviado"] .gr-pill__dot{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)} #go-rdo .gr-obra__corpo{position:relative;z-index:4;padding:0 clamp(18px,2.2vw,28px) clamp(16px,2.8svh,24px)} #go-rdo .gr-obra__k{margin:0 0 10px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--on-2)} #go-rdo .gr-obra__rows{list-style:none;margin:0;padding:0} #go-rdo .gr-obra__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;box-shadow:inset 0 1px 0 var(--hair-2);transition:background-color 1.2s var(--ease)} #go-rdo .gr-obra__v.is-novo{animation:gr-novo .6s var(--ease) both} @keyframes gr-novo{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} #go-rdo .gr-obra__row.is-quente{background:color-mix(in srgb,var(--green) 14%,transparent)} #go-rdo .gr-obra__l{font:600 .6875rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2)} #go-rdo .gr-obra__big{font:500 clamp(2.25rem,1.6rem + 1.6vw,3.25rem)/1 var(--f-d);letter-spacing:-.02em;color:var(--white)} #go-rdo .gr-obra__v{font:500 1.125rem/1.2 var(--f-d);color:var(--white);text-align:right} #go-rdo [data-estado="enviado"] .gr-obra__big{color:var(--green-soft)} /* rodapé do palco */ #go-rdo .gr-pe{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;min-height:24px;margin-top:clamp(10px,1.6svh,16px)} #go-rdo .gr-dica{margin:0;font:500 .875rem/1.3 var(--f-d);color:var(--on-2)} #go-rdo .gr-dica.is-ok{color:var(--green-soft)} /* barra de envio no pé da tela do celular */ #go-rdo .rf-envio{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:2cqw; padding:3cqw 3.4cqw 6.4cqw;background:var(--white);box-shadow:0 -1px 0 rgba(42,41,41,.08),0 -2cqw 5cqw rgba(42,41,41,.06)} #go-rdo .rf-envio__st{font:600 3.2cqw/1.2 var(--f-l);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} #go-rdo .rf-envio__st.is-ok{color:var(--green-ink)} #go-rdo .rf-enviar{display:inline-flex;align-items:center;justify-content:center;gap:1.6cqw;min-height:max(32px,10cqw);padding:0 4.2cqw;border:0;border-radius:2cqw; background:var(--green);color:var(--ink);font:600 max(12px,4cqw)/1 var(--f-d);cursor:pointer;transition:background-color .25s var(--ease-ui)} #go-rdo .rf-enviar:hover{background:var(--green-hi)} #go-rdo .rf-enviar:focus-visible{outline:2px solid var(--ink);outline-offset:2px} #go-rdo .rf-enviar__ok{display:none;width:max(12px,4cqw);height:max(12px,4cqw)} #go-rdo .rf-enviar__ok svg{width:100%;height:100%} #go-rdo .rf-enviar.is-enviado{background:var(--ui-sub);color:var(--green-ink);cursor:default} #go-rdo .rf-enviar.is-enviado .rf-enviar__ok{display:block} #go-rdo .rdo-fone__tela::after{display:none} /* ---------- da cópia do #rdo (celular), reescopada ---------- */ #go-rdo .rdo-fone{container-type:inline-size;position:relative;flex:none;height:100%;width:var(--fone-w);padding:5px;border-radius:calc(var(--fone-w) * .15);background:color-mix(in srgb,var(--g0) 99%,var(--green-ink)); box-shadow:inset 0 0 0 1px rgba(236,240,232,.10),0 0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3),0 20px 40px -12px rgba(0,0,0,.55),0 50px 90px -40px rgba(0,0,0,.6)} #go-rdo .rdo-fone__cap{width:8.6em;padding-bottom:2px} #go-rdo .rdo-fone__cap .fig__n{display:block;margin:0 0 6px} #go-rdo .rdo-fone__tela{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--fone-w) * .15 - 5px);background:color-mix(in srgb,var(--white) 95%,var(--ink-2));color:var(--ink); display:flex;flex-direction:column;font:400 3.4cqw/1.3 var(--f-t)} #go-rdo .rdo-fone__tela::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9cqw;background:linear-gradient(rgba(244,246,248,0),color-mix(in srgb,var(--white) 95%,var(--ink-2)) 70%);pointer-events:none} #go-rdo .rf-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:10cqw;padding:0 6.4cqw;background:color-mix(in srgb,var(--g2) 74%,var(--green-ink));color:var(--white);font:600 4.4cqw/1 var(--f-d)} #go-rdo .rf-ico{width:15cqw;height:auto} #go-rdo .rf-app{flex:none;display:flex;align-items:center;gap:2.6cqw;margin:2.6cqw 2.6cqw 0;padding:2.4cqw 3cqw;border-radius:2.6cqw;background:var(--white);box-shadow:0 .5cqw 2cqw rgba(42,41,41,.10)} #go-rdo .rf-menu{display:grid;gap:.9cqw;width:4.6cqw} #go-rdo .rf-menu i{display:block;height:.6cqw;border-radius:.4cqw;background:var(--ink)} #go-rdo .rf-ctx{flex:1;min-width:0;display:grid;text-align:center} #go-rdo .rf-ctx small{font:400 2.5cqw/1.2 var(--f-t);color:var(--ink-2)} #go-rdo .rf-ctx b{font:600 3.6cqw/1.2 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #go-rdo .rf-sino{width:4.8cqw;height:4.8cqw;color:var(--ink)} #go-rdo .rf-avatar{position:relative;width:6.6cqw;height:6.6cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--white) 60%,var(--ink-2)) 0 20%,transparent 21%),radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--white) 60%,var(--ink-2)) 0 42%,transparent 43%),color-mix(in srgb,var(--white) 82%,var(--ink-2))} #go-rdo .rf-avatar::after{content:"";position:absolute;right:-.3cqw;bottom:-.3cqw;width:2cqw;height:2cqw;border-radius:50%;background:var(--green);box-shadow:0 0 0 .5cqw var(--white)} #go-rdo .rf-rdo{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;margin:3.4cqw 4.4cqw 2cqw;font:600 3.2cqw/1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #go-rdo .rf-rdo b{color:var(--ink);letter-spacing:.1em} #go-rdo .rf-sec{flex:none;margin:0 2.6cqw 2.6cqw;padding:3cqw 3.2cqw 3.2cqw;border-radius:2.6cqw;background:var(--white);box-shadow:0 .5cqw 2cqw rgba(42,41,41,.08)} #go-rdo .rf-sec__h{display:flex;align-items:center;justify-content:space-between;gap:2cqw} #go-rdo .rf-sec__h b{font:600 4.4cqw/1 var(--f-l);letter-spacing:.01em;color:var(--green-ink)} #go-rdo .rf-add{display:inline-flex;align-items:center;gap:1.2cqw;height:6.2cqw;padding:0 2.4cqw 0 2cqw;border-radius:1.6cqw;background:var(--green);color:var(--ink);font:600 2.7cqw/1 var(--f-d);white-space:nowrap} #go-rdo .rf-add::before{content:"";width:2.4cqw;height:2.4cqw;background:linear-gradient(currentColor,currentColor) 50% 50%/100% .5cqw no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/.5cqw 100% no-repeat} #go-rdo .rf-tab{display:grid;grid-auto-flow:column;grid-auto-columns:auto;margin-top:2.6cqw;border:1px solid color-mix(in srgb,var(--white) 72%,var(--ink-2));border-radius:.6cqw;overflow:hidden;font:600 2.6cqw/1 var(--f-l);color:color-mix(in srgb,var(--white) 8%,var(--ink-2))} #go-rdo .rf-tab span{padding:1.8cqw 1.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #go-rdo .rf-tab span + span{border-left:1px solid color-mix(in srgb,var(--white) 72%,var(--ink-2))} #go-rdo .rf-lista{list-style:none;margin:2.4cqw 0 0;padding:0} #go-rdo .rf-vazio{padding:2.6cqw 1cqw;border-top:1px dashed color-mix(in srgb,var(--ink-2) 19%,var(--on));font:400 3.1cqw/1.3 var(--f-t);font-style:italic;color:color-mix(in srgb,var(--white) 8%,var(--ink-2))} #go-rdo .rf-item{display:grid;grid-template-columns:6.2cqw minmax(0,1fr);column-gap:2.4cqw;align-items:center;padding:1.8cqw 1.2cqw;border-top:1px solid color-mix(in srgb,var(--g0) 5%,var(--ui-sub));transition:background-color 1.2s var(--ease)} #go-rdo .rf-item.is-quente{background:rgba(91,187,91,.16)} #go-rdo .rf-item.is-novo{animation:rdo-entra .6s var(--ease) both} @keyframes rdo-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} #go-rdo .rf-item__ck{grid-row:1 / 3;display:grid;place-items:center;width:6.2cqw;height:6.2cqw;border-radius:50%;background:var(--green);color:var(--ink)} #go-rdo .rf-item__ck svg{width:4cqw;height:4cqw} #go-rdo .rf-item__ck path{stroke-dasharray:12;stroke-dashoffset:0} #go-rdo .rf-item.is-novo .rf-item__ck path{animation:rdo-ck .5s var(--ease) .25s both} @keyframes rdo-ck{from{stroke-dashoffset:12}to{stroke-dashoffset:0}} #go-rdo .rf-item__t{min-width:0;font:600 4.3cqw/1.15 var(--f-d);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #go-rdo .rf-item__s{min-width:0;font:500 3.4cqw/1.25 var(--f-d);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #go-rdo .rf-home{position:absolute;z-index:2;left:50%;bottom:2cqw;width:34cqw;height:1.2cqw;border-radius:1cqw;background:color-mix(in srgb,var(--g0) 99%,var(--green-ink));transform:translateX(-50%)} /* ---------- tablet: celular e registro lado a lado, foto embaixo ---------- */ @media (max-width:1099.98px){ #go-rdo{--fone-h:clamp(380px,52svh,500px)} #go-rdo .gr-head{grid-template-columns:minmax(0,1fr);row-gap:14px} #go-rdo .gr-palco{grid-template-columns:auto minmax(0,1fr);row-gap:clamp(20px,3svh,28px)} #go-rdo .gr-col--obra{grid-column:1 / -1} #go-rdo .gr-obra{min-height:240px} } /* ---------- celular: uma coluna ---------- */ @media (max-width:640px){ #go-rdo{--fone-h:min(440px,calc(100svh - 260px))} #go-rdo .gr-palco{grid-template-columns:minmax(0,1fr)} #go-rdo .gr-fone-fig{justify-content:center} #go-rdo .rdo-fone{padding:3px} #go-rdo .rdo-fone__tela{border-radius:calc(var(--fone-w) * .15 - 3px)} #go-rdo .gr-f{min-height:0;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 16px} #go-rdo .gr-f dd{justify-items:start;text-align:left} #go-rdo .gr-ph{width:120px} #go-rdo .gr-obra{min-height:220px} } @media (prefers-reduced-motion:reduce){ #go-rdo .gr-v,#go-rdo .gr-ph,#go-rdo .gr-f{transition:none} } /* ---- sections/go-analise.css ---- */ /* go-analise: cópia reescopada de sections/analise.css (v3) para as LPs gestao-de-obras; hex trocado por tokens */ /* ===================================================================== PAV. 05 · #go-analise (dono: agente da seção) Linha do tempo da obra: scrubber de meses no eixo da Curva S controla KPIs, alerta de prazo e Curva S. Rosca de status no marco 15/09/26. Geometria do gráfico em % (x: 4 a 96; y: 6 = topo da escala, 100 = zero), igual ao analise.js e ao HTML gerado do obra-demo.json. ===================================================================== */ #go-analise{ --an-plan:color-mix(in srgb,var(--white) 31%,var(--ink-2)); /* planejado: cinza, 3,4:1 no branco */ --an-real:color-mix(in srgb,var(--green) 51%,var(--green-ink)); /* realizado: verde da marca escurecido para 3,5:1 no branco */ --an-real-pt:var(--green); --an-prazo:color-mix(in srgb,var(--white) 17%,var(--ink-2)); /* "Hoje"/prazo no app */ --an-nao:color-mix(in srgb,var(--white) 25%,var(--ink-2)); /* não iniciadas no app */ --an-yw:56px; /* coluna dos rótulos do eixo Y */ --an-eixo-h:38px; /* faixa do eixo X (trilho + meses) */ --an-graf-min:150px; } /* ---------- composição: título + figura que ocupa o resto da janela ---------- */ #go-analise .an{display:flex;flex-direction:column;gap:clamp(14px,2.6svh,28px);min-height:min(var(--secao-util),940px)} #go-analise .an-topo .eyebrow{margin-bottom:clamp(10px,1.8svh,18px)} #go-analise .an-fig{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;max-height:700px} #go-analise .an-fig > .ui-frame{flex:1 1 auto;display:flex;min-height:0} #go-analise .an-fig > .fig{margin-top:clamp(10px,1.6svh,16px)} #go-analise .an-painel{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0} /* ---------- cabeçalho do painel ---------- */ #go-analise .an-head{flex:none} #go-analise .an-ref{text-align:right} #go-analise .an-ref b{display:flex;align-items:baseline;justify-content:flex-end;gap:6px} #go-analise .an-ref__k{font:500 .75rem/1.2 var(--f-d);color:var(--ink-2)} /* ---------- corpo: KPIs | Curva S | Status ---------- */ #go-analise .an-corpo{flex:1 1 auto;min-height:0;display:grid;gap:8px;padding:8px; grid-template-columns:minmax(196px,232px) minmax(0,1fr) minmax(212px,264px);grid-template-rows:repeat(3,minmax(0,1fr))} #go-analise .an-k,#go-analise .an-curva,#go-analise .an-ativ{position:relative;min-width:0;background:var(--white);border-radius:8px;box-shadow:0 0 0 1px var(--hair-1l),0 1px 2px rgba(42,41,41,.04)} #go-analise .an-k--status{grid-column:1;grid-row:1} #go-analise .an-k--avanco{grid-column:1;grid-row:2} #go-analise .an-k--prazo{grid-column:1;grid-row:3} #go-analise .an-curva{grid-column:2;grid-row:1 / span 3} #go-analise .an-ativ{grid-column:3;grid-row:1 / span 3} /* KPI */ #go-analise .an-k{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:12px 14px;overflow:hidden} #go-analise .an-k > .ui-bar{align-self:stretch} #go-analise .an-k__v{font-size:1.75rem} #go-analise .an-aprox{margin-right:4px;font:500 1.125rem/1 var(--f-d);color:var(--ink-2);align-self:center} #go-analise .an-k__sub{font:400 .75rem/1.35 var(--f-t);color:var(--ink-2)} #go-analise .an-k__sub b{font:600 .8125rem/1 var(--f-d);color:var(--ink)} #go-analise .an-bar--prazo > i{background:var(--an-prazo)} /* alerta "Tendência de atraso" (regra da tela: Prazo > Avanço físico) */ #go-analise .an-k--status{transition:background-color .5s var(--ease)} #go-analise .an-k--status.is-aceso{background:color-mix(in srgb,var(--white) 92%,var(--red));box-shadow:inset 3px 0 0 var(--red),0 0 0 1px rgba(229,72,77,.18)} #go-analise .an-k--status::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(229,72,77,.16);opacity:0} #go-analise .an-k--status.is-pulso::after{animation:an-pulso 1.1s var(--ease) both} @keyframes an-pulso{0%{opacity:0}18%{opacity:1}100%{opacity:0}} #go-analise .an-alerta{height:24px;gap:6px;padding:0 9px 0 7px;font-size:.75rem} #go-analise .an-tri{width:13px;height:13px;flex:none} #go-analise .an-k--status.is-aceso .an-k__regra b{color:var(--red-ink)} /* ---------- Curva S ---------- */ #go-analise .an-curva{display:flex;flex-direction:column;min-height:0;padding:12px 14px 4px} #go-analise .an-curva__h{display:flex;align-items:center;gap:10px;min-height:28px;flex:none} #go-analise .an-mes{height:22px;padding:0 8px;font-size:.75rem;color:var(--ink)} #go-analise .an-dica{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-analise .an-dica svg{width:14px;height:14px;flex:none} #go-analise .an-modo > button{min-width:34px;min-height:28px} /* leitura do mês: cartões com filete de cor, como os totais do app */ #go-analise .an-read{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0} #go-analise .an-read__c{min-width:0;padding:6px 10px 7px 12px;border-radius:6px;background:var(--ui-bg);box-shadow:inset 3px 0 0 var(--c,var(--an-plan))} #go-analise .an-read__c--plan{--c:var(--an-plan)} #go-analise .an-read__c--real{--c:var(--an-real)} #go-analise .an-read__c--dif{--c:var(--red)} #go-analise .an-read__c--dif[data-tipo="rdo"]{--c:var(--an-prazo)} #go-analise .an-read dt{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap} #go-analise .an-read dd{margin:3px 0 0;min-height:1.2em;font:600 .9375rem/1.2 var(--f-d);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #go-analise .an-read__c--dif:not([data-tipo="rdo"]) dd{color:var(--red-ink)} #go-analise .an-read__sem{font:500 .8125rem/1.2 var(--f-d);color:var(--ink-2)} /* gráfico */ #go-analise .an-graf{position:relative;flex:1 1 auto;min-height:var(--an-graf-min);margin-top:14px;padding-left:var(--an-yw)} #go-analise .an-y{position:absolute;left:0;top:0;bottom:var(--an-eixo-h);width:var(--an-yw)} #go-analise .an-y > span{position:absolute;right:10px;transform:translateY(-50%);font:500 .6875rem/1 var(--f-d);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums} #go-analise .an-area{position:relative;height:100%;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} #go-analise .an-area.is-arrasto{cursor:grabbing} #go-analise .an-plot{position:absolute;left:0;right:0;top:0;bottom:var(--an-eixo-h);will-change:transform;contain:layout style} #go-analise .an-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #go-analise .an-grade line{stroke:rgba(42,41,41,.09);stroke-width:1;vector-effect:non-scaling-stroke} #go-analise .an-l{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} #go-analise .an-l--plan{stroke:var(--an-plan);stroke-width:2} #go-analise .an-l--real{stroke:var(--an-real);stroke-width:2.75} #go-analise .an-gap{fill:rgba(229,72,77,.075);stroke:none} #go-analise .an-dif{stroke:var(--red);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s var(--ease)} #go-analise .an-dif.is-on{opacity:1} #go-analise .an-cur{position:absolute;inset:0;pointer-events:none;will-change:transform} #go-analise .an-cur > i{position:absolute;left:0;top:-4px;bottom:0;width:1px;margin-left:-.5px;background:rgba(42,41,41,.42)} #go-analise .an-pts{position:absolute;inset:0;pointer-events:none} #go-analise .an-pt{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:5px;background:var(--white);box-shadow:inset 0 0 0 2px var(--an-plan); transition:transform .35s var(--ease),opacity .25s var(--ease)} #go-analise .an-pt--real{background:var(--an-real-pt);box-shadow:0 0 0 1.5px var(--white),0 0 0 2.5px var(--an-real)} #go-analise .an-pt.is-sel{transform:scale(1.45)} #go-analise .an-pt--plan.is-sel{background:var(--an-plan);box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--an-plan)} #go-analise .an-pt.is-off{opacity:0;transform:scale(.4)} /* eixo X = trilho do scrubber */ #go-analise .an-eixo{position:absolute;left:0;right:0;bottom:0;height:var(--an-eixo-h);touch-action:none} #go-analise .an-rail{position:absolute;left:0;right:0;top:0;height:4px;margin-top:-2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 5%,var(--on))} #go-analise .an-rail > i{position:absolute;top:0;bottom:0;left:4%;width:92%;border-radius:inherit;background:var(--an-prazo);transform-origin:left center;will-change:transform} #go-analise .an-meses{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:14px;height:14px} #go-analise .an-meses > li{position:absolute;top:0;transform:translateX(-50%);font:600 .6875rem/1 var(--f-l);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;transition:color .2s var(--ease)} #go-analise .an-meses > li::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:6px;margin-left:-.5px;background:rgba(42,41,41,.28)} #go-analise .an-meses > li.is-sel{color:var(--ink)} #go-analise .an-meses > li.is-sel::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-5px;height:2px;border-radius:1px;background:var(--green)} #go-analise .an-thumb-l{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;will-change:transform} /* com JS: camadas de largura zero movidas em px (sem a camada larga passando da borda) */ #go-analise.an-on .an-cur,#go-analise.an-on .an-thumb-l{right:auto;width:0} #go-analise .an-thumb{position:absolute;left:0;top:0;width:28px;height:18px;margin:-9px 0 0 -14px;border-radius:9px;background:var(--green);pointer-events:auto;cursor:grab;touch-action:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 2px var(--white),0 0 0 3px rgba(45,110,49,.55),0 3px 8px -2px rgba(42,41,41,.45);transition:transform .2s var(--ease)} #go-analise .an-thumb::before{content:"";position:absolute;inset:-13px -8px} #go-analise .an-thumb > i,#go-analise .an-thumb > i::before{position:absolute;top:5px;bottom:5px;width:1.5px;border-radius:1px;background:rgba(31,30,30,.55)} #go-analise .an-thumb > i{left:calc(50% - 3px)} #go-analise .an-thumb > i::before{content:"";top:0;bottom:0;left:4.5px} #go-analise .an-thumb:hover{transform:scale(1.06)} #go-analise .an-area.is-arrasto .an-thumb{cursor:grabbing;transform:scale(1.1)} #go-analise .an-thumb:focus-visible{outline:2px solid var(--green-ink);outline-offset:4px;border-radius:10px} /* ---------- Status das atividades (rosca no marco 15/09/26) ---------- */ #go-analise .an-ativ{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8svh,16px);padding:12px 14px 14px} #go-analise .an-ativ__h{align-self:stretch;display:flex;align-items:center;gap:8px;min-height:28px} #go-analise .an-ativ__tc{display:none} #go-analise .an-ativ__d{margin-left:auto;font:500 .75rem/1 var(--f-d);color:var(--ink-2)} #go-analise .an-ativ:not(.an-ativ--compacta) .an-ativ__h{position:absolute;left:14px;right:14px;top:12px} #go-analise .an-rosca{position:relative;width:clamp(104px,17svh,156px);aspect-ratio:1;flex:none;margin-top:28px} #go-analise .an-rosca svg{width:100%;height:100%;transition:transform 1.1s var(--ease),opacity .7s var(--ease)} #go-analise .an-rosca__trilho{fill:none;stroke:var(--ui-sub);stroke-width:14} #go-analise .an-rosca__s{fill:none;stroke-width:14} #go-analise .an-rosca__s--atraso{stroke:var(--red)} #go-analise .an-rosca__s--nao{stroke:var(--an-nao)} #go-analise .an-rosca__s--ok{stroke:var(--an-real)} #go-analise .an-rosca__c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:3px} #go-analise .an-rosca__c b{font:600 1.875rem/1 var(--f-d);letter-spacing:-.02em;color:var(--ink)} #go-analise .an-rosca__c small{font:600 .625rem/1 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} #go-analise .an-ativ__alerta{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 10px;border-radius:6px;background:rgba(229,72,77,.09);box-shadow:inset 3px 0 0 var(--red); font:500 .8125rem/1.2 var(--f-d);color:var(--ink);white-space:nowrap} #go-analise .an-ativ__alerta .an-tri{color:var(--red-ink)} #go-analise .an-ativ__alerta b{color:var(--red-ink)} #go-analise .an-leg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:7px 14px} #go-analise .an-leg > li{display:flex;align-items:center;gap:6px;font:500 .75rem/1.2 var(--f-d);color:var(--ink-2);white-space:nowrap} #go-analise .an-leg__n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ui-sub);font:600 .6875rem/1 var(--f-d);color:var(--ink)} #go-analise .an-leg__n--atraso{background:rgba(229,72,77,.14);color:var(--red-ink)} #go-analise .an-leg__n--nao{background:rgba(121,127,138,.18)} #go-analise .an-leg__n--ok{background:rgba(91,187,91,.2);color:var(--green-ink)} /* rodapé do painel */ #go-analise .an-foot{flex:none;justify-content:space-between} #go-analise .an-foot__k{font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #go-analise .an-fig__obra{display:none} /* ---------- entrada (só com movimento): rosca gira e assenta ---------- */ #go-analise[data-an-pre] .an-rosca svg{opacity:0;transform:rotate(-70deg) scale(.9)} /* ---------- altura curta (desktop baixo) ---------- */ @media (max-height:800px){ #go-analise{--an-graf-min:130px;--an-eixo-h:34px} #go-analise .an-k{gap:5px;padding:10px 12px} #go-analise .an-k__v{font-size:1.5rem} #go-analise .an-head{padding-block:9px} #go-analise .an-read{margin-top:8px} #go-analise .an-read__c{padding-block:5px 6px} #go-analise .an-graf{margin-top:10px} #go-analise .an-foot{padding-block:8px} } /* ---------- tablet e celular: alerta em faixa, KPIs em linha, Curva S inteira ---------- */ #go-analise .an-rosca__m{display:none} @media (max-width:1023.98px){ #go-analise .an-corpo{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr)} #go-analise .an-k--status{grid-column:1 / -1;grid-row:1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px} #go-analise .an-k--status > .ui-k{display:none} #go-analise .an-k--avanco{grid-column:1;grid-row:2} #go-analise .an-k--prazo{grid-column:2;grid-row:2} #go-analise .an-ativ{grid-column:3;grid-row:2} #go-analise .an-curva{grid-column:1 / -1;grid-row:3} #go-analise .an-k{justify-content:flex-start} /* rosca compacta, como mais um KPI: ATRASADAS / (8) de 12 / 15/09 */ #go-analise .an-ativ{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"lb lb" "rs tx" "rs dt"; align-content:start;align-items:center;justify-items:start;gap:3px 8px;padding:12px 14px} #go-analise .an-ativ .an-ativ__h{display:contents} #go-analise .an-ativ__t,#go-analise .an-leg,#go-analise .an-ativ__alerta .an-tri,#go-analise .an-ativ__lg,#go-analise .an-ativ__alerta b,#go-analise .an-rosca__c{display:none} #go-analise .an-ativ__tc{display:inline;grid-area:lb;margin-bottom:4px} #go-analise .an-rosca{grid-area:rs;width:40px;margin:0} #go-analise .an-rosca svg{overflow:visible} #go-analise .an-rosca__m{position:absolute;inset:0;display:grid;place-items:center;font:600 1rem/1 var(--f-d);color:var(--red-ink)} #go-analise .an-ativ__alerta{grid-area:tx;align-self:end;padding:0;background:none;box-shadow:none;font:600 .875rem/1.1 var(--f-d);color:var(--ink)} #go-analise .an-ativ__d{grid-area:dt;align-self:start;margin:0;font:500 .6875rem/1.1 var(--f-d)} } @media (max-width:760px){ #go-analise{--an-yw:44px;--an-graf-min:116px;--an-eixo-h:32px} #go-analise .an-head{display:none} #go-analise .an-lg,#go-analise .an-ativ__a{display:none} #go-analise .an-corpo{gap:6px;padding:6px} #go-analise .an-k{padding:8px 10px;gap:5px} #go-analise .an-k .ui-k{letter-spacing:.07em} #go-analise .an-k__v{font-size:1.375rem} #go-analise .an-aprox{font-size:.9375rem;margin-right:3px} #go-analise .an-k--avanco .an-k__sub,#go-analise .an-k--prazo .an-k__sub{display:none} #go-analise .an-k--status{padding:6px 10px;gap:3px 10px;flex-wrap:nowrap} #go-analise .an-k--status .an-alerta{flex:none} #go-analise .an-k__regra{min-width:0;font-size:.71875rem;line-height:1.25} #go-analise .an-ativ{padding:8px 10px;column-gap:7px} #go-analise .an-rosca{width:34px} #go-analise .an-rosca__m{font-size:.875rem} #go-analise .an-ativ__alerta{font-size:.8125rem} #go-analise .an-curva{padding:8px 10px 0} #go-analise .an-curva__h{gap:8px} #go-analise .an-modo > button{min-height:28px;min-width:36px} #go-analise .an-read{gap:5px;margin-top:6px} #go-analise .an-read__c{padding:4px 5px 5px 9px} #go-analise .an-read dt{font-size:.5625rem;letter-spacing:.07em} #go-analise .an-read dd{margin-top:2px;font-size:.75rem;letter-spacing:-.005em} #go-analise .an-read__sem{font-size:.75rem} #go-analise .an-graf{margin-top:9px} #go-analise .an-y > span{right:6px;font-size:.625rem} #go-analise .an-meses__a{display:none} #go-analise .an-meses > li{top:12px;font-size:.65625rem;letter-spacing:.02em} #go-analise .an-foot{padding:6px 10px} #go-analise .an-foot__k{display:none} } @media (max-width:420px){ #go-analise .an-dica{display:none} #go-analise .an-k .ui-k{font-size:.59375rem;letter-spacing:.06em} /* regra literal do app ("Prazo > Avanço físico"); os números estão nos KPIs logo abaixo */ #go-analise .an-k__regra b{display:none} } @media (max-width:760px) and (max-height:800px){ #go-analise .an{gap:12px} #go-analise .an-k{gap:4px;padding-block:7px} #go-analise .an-k__v{font-size:1.25rem} #go-analise .an-rosca{width:32px} #go-analise .an-read{margin-top:5px} #go-analise .an-graf{margin-top:8px} } @media (max-width:340px){ /* 320: meses alternados; o escolhido sempre aparece */ #go-analise .an-meses > li.is-par:not(.is-sel){color:transparent} #go-analise .an-meses > li{font-size:.625rem} } /* ===================================================================== LPs gestao-de-obras: título à esquerda, texto e CTA à direita (copy da LP) ===================================================================== */ #go-analise .an-topo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(32px,4.4vw,72px);align-items:end} #go-analise .an-topo__a .eyebrow{margin-bottom:clamp(10px,1.8svh,18px)} #go-analise .an-topo__b{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2svh,18px)} #go-analise .an-lead{max-width:44ch} @media (max-height:800px){ #go-analise .an-lead{font-size:1rem;line-height:1.45} } @media (max-width:899px){ #go-analise .an-topo{grid-template-columns:minmax(0,1fr);row-gap:10px} #go-analise .an-topo__b{gap:10px} } @media (max-width:760px){ #go-analise .an-topo .h2{font-size:calc(var(--h2) * .84)} #go-analise .an-lead{font-size:.9375rem;line-height:1.42} #go-analise .an-cta{--h:44px} #go-analise{--an-graf-min:92px} } @media (max-width:760px) and (max-height:800px){ #go-analise .an-topo__a .eyebrow{margin-bottom:8px} #go-analise .an-lead{font-size:.875rem} } @media (max-width:760px) and (max-height:800px){ #go-analise .an-fig > .fig{display:none} } /* ---- sections/go-medicoes.css ---- */ /* go-medicoes: cópia reescopada de sections/medicoes.css (v3) para as LPs gestao-de-obras; hex trocado por tokens */ /* ===================================================================== PAV. 04 · #go-medicoes (claro, papel #ecf0e8, prancha) Tabela de medição com as linhas do dataset; o visitante marca o que entra no período, envia para aprovação e aprova como contratante. Tudo escopado por #go-medicoes. ===================================================================== */ #go-medicoes{ --med-row:34px; /* altura da linha de tarefa */ --med-etapa:26px; /* faixa de etapa */ --med-th:34px; /* cabeçalho da tabela */ --med-tinta:var(--ink); --med-cinza:var(--ink-2); --med-faixa:color-mix(in srgb,var(--on-2) 14%,var(--ui-sub)); /* faixa de etapa (cinza do app, no tom do papel) */ --med-hover:color-mix(in srgb,var(--white) 50%,var(--on)); overflow-x:clip; } /* grão fino de papel (prancha) */ #go-medicoes::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--noise);background-size:180px;opacity:.05;mix-blend-mode:multiply} /* ---------- layout: texto | prancha ---------- */ #go-medicoes .med{display:grid;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr); grid-template-areas:"txt fig" "cta fig";grid-template-rows:auto 1fr;column-gap:clamp(36px,4.2vw,72px);align-items:start} #go-medicoes .med__txt{grid-area:txt;min-width:0} #go-medicoes .med__fig{grid-area:fig;min-width:0} #go-medicoes .med__cta{grid-area:cta;align-self:end;margin-top:clamp(18px,3svh,28px)} #go-medicoes .eyebrow{margin-bottom:clamp(14px,2.2svh,20px)} #go-medicoes .med__lead{margin-top:clamp(14px,2.2svh,20px);max-width:32ch} /* ---------- fluxo da medição (carimbo de prancha) ---------- */ #go-medicoes .med__fluxo{margin-top:clamp(22px,4svh,40px);max-width:360px} #go-medicoes .med__fluxo .regua{color:var(--ink)} #go-medicoes .med__passos{list-style:none;margin:12px 0 0;padding:0;display:grid;box-shadow:inset 0 1px 0 var(--hair-3l),inset 0 -1px 0 var(--hair-3l)} #go-medicoes .med__passo{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:start;gap:0 10px;padding:11px 0; box-shadow:inset 0 -1px 0 var(--hair-2l);transition:color .4s var(--ease)} #go-medicoes .med__passo:last-child{box-shadow:none} #go-medicoes .med__ix{font:600 .75rem/1.35 var(--f-l);letter-spacing:.08em;color:var(--med-cinza);padding-top:1px} #go-medicoes .med__tx{display:grid;gap:2px;font:600 .9375rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--med-cinza)} #go-medicoes .med__sb{font:400 .8125rem/1.35 var(--f-t);letter-spacing:0;color:var(--med-cinza)} #go-medicoes .med__hr{display:inline-flex;align-items:center;gap:6px;font:600 .75rem/1.35 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--med-cinza);font-variant-numeric:tabular-nums;padding-top:1px;white-space:nowrap} /* marcador do passo: barra fina à esquerda, verde só no atual */ #go-medicoes .med__passo::before{content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:2px;border-radius:1px;background:transparent;transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease),background-color .3s var(--ease)} #go-medicoes .med__passo[data-est="atual"]::before{background:var(--green-ink);transform:none} #go-medicoes .med__passo[data-est="atual"] .med__ix, #go-medicoes .med__passo[data-est="atual"] .med__tx, #go-medicoes .med__passo[data-est="atual"] .med__hr{color:var(--green-ink)} #go-medicoes .med__passo[data-est="feito"] .med__tx, #go-medicoes .med__passo[data-est="feito"] .med__ix, #go-medicoes .med__passo[data-est="feito"] .med__hr{color:var(--med-tinta)} /* passo cumprido: check fino antes da hora */ #go-medicoes .med__passo[data-est="feito"] .med__hr::before{content:"";width:12px;height:12px;flex:none;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6 6.4 11.8 13 4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6 6.4 11.8 13 4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} /* ---------- painel ---------- */ #go-medicoes .med__panel{--cantos-off:10px;overflow:visible;background:var(--white)} #go-medicoes .med__panel > .ui-head{border-radius:12px 12px 0 0} #go-medicoes .med__panel > .ui-foot{border-radius:0 0 12px 12px} #go-medicoes .med__chip{transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)} #go-medicoes .med__chip.is-aguarda{background:var(--white);color:var(--med-tinta);box-shadow:inset 0 0 0 1px rgba(42,41,41,.42)} #go-medicoes .med__chip.is-ok{background:rgba(91,187,91,.16);color:var(--green-ink)} #go-medicoes .med__chip--m{display:none} #go-medicoes .med__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:40px;padding:8px 14px;background:var(--white);box-shadow:0 1px 0 var(--hair-1l)} #go-medicoes .med__conta{font:400 .75rem/1.3 var(--f-t);color:var(--med-cinza)} #go-medicoes .med__conta b{font:600 .8125rem/1 var(--f-d);color:var(--med-tinta)} #go-medicoes .med__trava{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--med-cinza)} #go-medicoes .med__trava svg{width:13px;height:13px} /* ---------- tabela ---------- */ #go-medicoes .med__tab{background:var(--white)} #go-medicoes .med-t{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;font:400 .8125rem/1.25 var(--f-t);color:var(--med-tinta)} #go-medicoes .k-chk{width:42px} #go-medicoes .k-cod{width:52px} #go-medicoes .k-und{width:44px} #go-medicoes .k-qtd{width:86px} #go-medicoes .k-pu{width:110px} #go-medicoes .k-med{width:94px} #go-medicoes .k-val{width:128px} #go-medicoes .med-t th{height:var(--med-th);padding:0 10px;background:var(--ui-bg);text-align:left;vertical-align:middle;white-space:nowrap; font:600 .6875rem/1.15 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--med-cinza);box-shadow:inset 0 -1px 0 var(--hair-2l)} #go-medicoes .med-t td{height:var(--med-row);padding:4px 10px;vertical-align:middle;box-shadow:inset 0 -1px 0 var(--hair-1l);transition:background-color .25s var(--ease),color .25s var(--ease)} #go-medicoes .med-t th.c-n,#go-medicoes .med-t td.c-n{text-align:right} #go-medicoes .med-t th.c-chk,#go-medicoes .med-t td.c-chk{padding:0 0 0 14px} #go-medicoes .med-t th:last-child,#go-medicoes .med-t td:last-child{padding-right:14px} #go-medicoes .med-t td.c-cod{font:600 .8125rem/1.2 var(--f-d);color:var(--med-tinta);white-space:nowrap} #go-medicoes .med-t td.c-und{font:500 .8125rem/1.2 var(--f-d);color:var(--med-cinza)} #go-medicoes .med-t td.c-n{font:500 .8125rem/1.2 var(--f-d);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} #go-medicoes .med-t td.c-val{font-weight:600} #go-medicoes .med-t td.c-qtd,#go-medicoes .med-t td.c-pu{color:color-mix(in srgb,var(--g0) 35%,var(--ink-2))} /* linha de tarefa marcável */ #go-medicoes .med-r[data-cod]:not(.med-r--zero){cursor:pointer} #go-medicoes .med-r[data-cod]:not(.med-r--zero):hover td{background:var(--med-hover)} #go-medicoes .med-r.is-fora td{color:var(--med-cinza)} #go-medicoes .med-r.is-fora td.c-val,#go-medicoes .med-r.is-fora td.c-med{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(42,41,41,.55)} /* linha sem quantidade medida neste período */ #go-medicoes .med-r--zero td,#go-medicoes .med-r--zero td.c-cod,#go-medicoes .med-r--zero td.c-qtd,#go-medicoes .med-r--zero td.c-pu{color:var(--med-cinza)} /* faixa de etapa (como no app) */ #go-medicoes .med-r--etapa td{height:var(--med-etapa);padding-block:0;background:var(--med-faixa);font:600 .8125rem/1.2 var(--f-d);color:var(--med-tinta);box-shadow:none} /* transporte: soma dos itens acima do trecho da tela */ #go-medicoes .med-r--transp td{background:color-mix(in srgb,var(--white) 74%,var(--on));color:var(--med-cinza)} #go-medicoes .med-r--transp td.c-tar{font-style:italic} #go-medicoes .med-r--transp td.c-tar .num{font:600 .8125rem/1 var(--f-d);font-style:normal;color:var(--med-tinta)} #go-medicoes .med-r--transp td.c-val{color:var(--med-tinta)} #go-medicoes .med-lock{width:14px;height:14px;margin-left:3px;color:var(--med-cinza)} /* varredura de consolidação (entrada) */ #go-medicoes .med-r.is-soma td{animation:med-soma .9s var(--ease) both;animation-delay:var(--sd,0ms)} @keyframes med-soma{0%{background-color:rgba(91,187,91,0)}30%{background-color:rgba(91,187,91,.14)}100%{background-color:rgba(91,187,91,0)}} /* checkbox real (área de toque: célula inteira + linha) */ #go-medicoes .med-hit{display:grid;place-items:center start;min-height:min(32px,var(--med-row));cursor:pointer} #go-medicoes .med-chk{appearance:none;-webkit-appearance:none;display:block;flex:none;width:20px;height:20px;margin:0;border-radius:5px;cursor:pointer; background:var(--white) center/14px 14px no-repeat;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--white) 14%,var(--ink-2)); transition:background-color .18s var(--ease),box-shadow .18s var(--ease)} #go-medicoes .med-chk:hover{box-shadow:inset 0 0 0 1.5px var(--med-tinta)} #go-medicoes .med-chk:checked{background-color:var(--green-ink);box-shadow:inset 0 0 0 1.5px var(--green-ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.3 12.6 4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} #go-medicoes .med-chk:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px} #go-medicoes .med-chk:disabled{cursor:not-allowed;opacity:.55} #go-medicoes .med__panel:not([data-estado="edicao"]) .med-r[data-cod]{cursor:default} #go-medicoes .med__panel:not([data-estado="edicao"]) .med-r[data-cod]:hover td{background:transparent} #go-medicoes .med__panel:not([data-estado="edicao"]) .med-hit{cursor:not-allowed} #go-medicoes .med__zeros,#go-medicoes .med-x,#go-medicoes .med-fig-m{display:none} /* ---------- total + ações ---------- */ #go-medicoes .med__fim{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"acoes soma";align-items:center;gap:10px 16px; padding:12px 14px;background:var(--white);box-shadow:inset 0 1px 0 var(--hair-3l)} #go-medicoes .med__soma{grid-area:soma;display:flex;align-items:baseline;gap:12px;margin:0} #go-medicoes .med__soma-k{font:600 .75rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--med-cinza)} #go-medicoes .med__soma-v{font:600 1.5rem/1 var(--f-d);letter-spacing:-.015em;color:var(--med-tinta);font-variant-numeric:tabular-nums lining-nums;min-width:8.6em;text-align:right} #go-medicoes .med__acoes{grid-area:acoes;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:44px} #go-medicoes .med__btn{min-height:40px;padding:0 14px 0 16px;font-size:.875rem} #go-medicoes .med__btn .btn__arr{width:15px;height:15px;transition:transform .32s var(--ease)} #go-medicoes .med__btn:hover .btn__arr{transform:translateX(3px)} #go-medicoes .med__como{margin-left:2px;padding:3px 6px;border-radius:4px;background:rgba(42,41,41,.12);font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase} #go-medicoes .med__reini{min-height:40px;font-size:.8125rem} /* carimbo de aprovação: régua dupla, como carimbo de prancha */ #go-medicoes .med__carimbo{display:grid;gap:3px;margin:0;padding:6px 12px;border-radius:4px;color:var(--green-ink); box-shadow:inset 0 0 0 1.5px var(--green-ink),inset 0 0 0 3.5px var(--white),inset 0 0 0 4.5px rgba(45,110,49,.7)} #go-medicoes .med__carimbo b{font:600 .875rem/1 var(--f-l);letter-spacing:.14em;text-transform:uppercase} #go-medicoes .med__carimbo span{font:600 .625rem/1.1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums} #go-medicoes .med__carimbo.is-in{animation:med-carimbo .55s var(--ease) both} @keyframes med-carimbo{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}} #go-medicoes .med__panel .ui-foot{justify-content:space-between} #go-medicoes .med__dica{font:400 .75rem/1.3 var(--f-t);color:var(--med-cinza)} /* ---------- telas grandes e altas: a prancha ganha escala ---------- */ @media (min-width:1600px) and (min-height:1000px){ #go-medicoes{--med-row:40px;--med-etapa:30px;--med-th:38px} #go-medicoes .med-t,#go-medicoes .med-t td.c-n,#go-medicoes .med-t td.c-cod,#go-medicoes .med-t td.c-und,#go-medicoes .med-r--etapa td{font-size:.875rem} #go-medicoes .med-t th{font-size:.75rem} #go-medicoes .med__panel .ui-head{padding:14px 16px} #go-medicoes .med__bar{min-height:46px;padding-inline:16px} #go-medicoes .med__fim{padding:14px 16px} #go-medicoes .med__soma-v{font-size:1.75rem} #go-medicoes .med__btn,#go-medicoes .med__reini{min-height:44px} #go-medicoes .med__btn{font-size:.9375rem;padding:0 16px 0 18px} #go-medicoes .ui-foot{padding:12px 16px} #go-medicoes .k-chk{width:48px} #go-medicoes .k-cod{width:58px} #go-medicoes .k-und{width:50px} #go-medicoes .k-qtd{width:100px} #go-medicoes .k-pu{width:126px} #go-medicoes .k-med{width:110px} #go-medicoes .k-val{width:146px} #go-medicoes .med-t th.c-chk,#go-medicoes .med-t td.c-chk{padding-left:16px} #go-medicoes .med-t th:last-child,#go-medicoes .med-t td:last-child{padding-right:16px} } /* ---------- desktop baixo ---------- */ @media (max-height:800px){ #go-medicoes{--med-row:30px;--med-etapa:23px;--med-th:30px} #go-medicoes .med__bar{min-height:36px;padding-block:6px} #go-medicoes .med__fim{padding-block:8px} #go-medicoes .med__soma-v{font-size:1.375rem} #go-medicoes .med__panel .ui-head{padding-block:9px} #go-medicoes .med__passo{padding-block:8px} #go-medicoes .ui-foot{padding-block:8px} } @media (max-height:740px) and (min-width:761px){ #go-medicoes{--med-row:28px;--med-etapa:22px;--med-th:28px} #go-medicoes .med__sb{display:none} } @media (max-height:700px) and (min-width:761px){ #go-medicoes{--med-row:27px;--med-etapa:21px;--med-th:27px} #go-medicoes .med__sb{display:none} } /* ---------- desktop estreito: colunas mais justas ---------- */ @media (max-width:1399.98px){ #go-medicoes .k-chk{width:38px} #go-medicoes .k-cod{width:44px} #go-medicoes .k-und{width:38px} #go-medicoes .k-qtd{width:78px} #go-medicoes .k-pu{width:100px} #go-medicoes .k-med{width:86px} #go-medicoes .k-val{width:116px} #go-medicoes .med-t td,#go-medicoes .med-t th{padding-inline:8px} } /* ---------- desktop estreito e tablet: colunas compactas ---------- */ @media (min-width:761px) and (max-width:1259.98px){ #go-medicoes .med-t,#go-medicoes .med-t td.c-n,#go-medicoes .med-t td.c-cod,#go-medicoes .med-t td.c-und,#go-medicoes .med-r--etapa td{font-size:.78125rem} #go-medicoes .k-chk{width:36px} #go-medicoes .k-cod{width:38px} #go-medicoes .k-und{width:32px} #go-medicoes .k-qtd{width:74px} #go-medicoes .k-pu{width:94px} #go-medicoes .k-med{width:80px} #go-medicoes .k-val{width:110px} #go-medicoes .med-t td,#go-medicoes .med-t th{padding-inline:6px} #go-medicoes .med-t td{padding-block:3px;line-height:1.16} #go-medicoes .med-t th.c-chk,#go-medicoes .med-t td.c-chk{padding-left:12px} #go-medicoes .med-t th{font-size:.625rem;letter-spacing:.06em} } @media (min-width:1000px) and (max-width:1259.98px){ #go-medicoes .med{grid-template-columns:clamp(216px,22vw,260px) minmax(0,1fr);column-gap:clamp(24px,2.6vw,32px)} #go-medicoes .h2{font-size:min(var(--h2),2.75rem)} #go-medicoes .med__lead{font-size:1.0625rem} } /* ---------- tablet: empilhado ---------- */ @media (max-width:999.98px){ #go-medicoes .med{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "fig" "cta";grid-template-rows:auto;row-gap:clamp(16px,2.6svh,26px)} #go-medicoes .med__txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:end} #go-medicoes .med__txt .eyebrow{grid-column:1 / -1} #go-medicoes .med__lead{margin-top:0;max-width:40ch} #go-medicoes .med__fluxo{display:none} #go-medicoes .med__cta{margin-top:0;padding-bottom:0} } /* ---------- celular: a tabela vira lista de cartões ---------- */ @media (max-width:760px){ #go-medicoes .med{row-gap:10px} #go-medicoes .med__txt{display:block} #go-medicoes .eyebrow{margin-bottom:10px} #go-medicoes .med__lead{margin-top:6px;font-size:1rem;line-height:1.45} #go-medicoes .med__panel{--cantos-off:7px} /* contexto da obra vai para a legenda; status desce para o total */ #go-medicoes .med__panel > .ui-head,#go-medicoes .med__bar,#go-medicoes .med__panel > .ui-foot{display:none} #go-medicoes .med__panel .med__tab{border-radius:12px 12px 0 0} #go-medicoes .med-t,#go-medicoes .med-t tbody{display:block} #go-medicoes .med-t thead,#go-medicoes .med-t colgroup{display:none} #go-medicoes .med-r{display:grid;grid-template-columns:26px auto minmax(0,1fr) auto;grid-template-areas:"chk cod tar tar" "chk . med val";align-items:baseline;column-gap:6px;row-gap:1px; padding:3px 12px 3px 10px;box-shadow:inset 0 -1px 0 var(--hair-1l)} #go-medicoes .med-r td{display:block;height:auto;padding:0!important;box-shadow:none;background:none!important} #go-medicoes .med-r td.c-chk{grid-area:chk;align-self:center} #go-medicoes .med-r td.c-cod{grid-area:cod;font:600 .8125rem/1.3 var(--f-d)} #go-medicoes .med-r td.c-tar{grid-area:tar;font:400 .8125rem/1.3 var(--f-t)} #go-medicoes .med-r td.c-und,#go-medicoes .med-r td.c-qtd,#go-medicoes .med-r td.c-pu{display:none} #go-medicoes .med-r td.c-med{grid-area:med;justify-self:start;min-width:0;text-align:left;white-space:normal;font:500 .75rem/1.3 var(--f-d);color:var(--med-cinza)} #go-medicoes .med-x{white-space:nowrap} #go-medicoes .med-r td.c-med .med-x{display:inline} #go-medicoes .med-r td.c-val{grid-area:val;font:600 .875rem/1.3 var(--f-d)} #go-medicoes .med-r[data-cod]:not(.med-r--zero):hover{background:var(--med-hover)} #go-medicoes .med-r.is-soma{animation:med-soma .9s var(--ease) both;animation-delay:var(--sd,0ms)} #go-medicoes .med-r.is-soma td{animation:none} #go-medicoes .med-r--zero,#go-medicoes .med-r--etapa{display:none} #go-medicoes .med-r--transp{grid-template-areas:"chk tar tar val";background:color-mix(in srgb,var(--white) 74%,var(--on));border-radius:12px 12px 0 0;padding-block:6px} #go-medicoes .med-r--transp td.c-cod,#go-medicoes .med-r--transp td.c-med,#go-medicoes .med-xl{display:none} #go-medicoes .med-hit{min-height:34px;width:36px;margin-left:-8px;padding-left:8px} #go-medicoes .med-chk{width:19px;height:19px} #go-medicoes .med-lock{margin-left:2px} #go-medicoes .med__zeros{display:block;margin:0;padding:6px 12px 6px 42px;font:400 .75rem/1.3 var(--f-t);color:var(--med-cinza);box-shadow:inset 0 -1px 0 var(--hair-1l)} #go-medicoes .med__fim{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chip soma" "acoes acoes";align-items:center;gap:6px 12px;padding:9px 12px 8px;border-radius:0 0 12px 12px} #go-medicoes .med__chip--m{display:inline-flex;grid-area:chip;align-self:center;justify-self:start;max-width:100%} #go-medicoes .med__soma{align-items:baseline;gap:8px;justify-self:end;min-width:0;flex-wrap:wrap;justify-content:flex-end} #go-medicoes .med__soma-k{font-size:.6875rem} #go-medicoes .med__soma-v{font-size:1.25rem;min-width:0} #go-medicoes .med__acoes{justify-content:space-between;min-height:40px} #go-medicoes .med__fig .fig{margin-top:8px} #go-medicoes .med-fig-d{display:none} #go-medicoes .med-fig-m{display:inline} #go-medicoes .med__cta .btn{--h:46px;width:100%} } @media (max-width:359.98px){ #go-medicoes .med-xp{display:none} } /* ===================================================================== LPs gestao-de-obras: títulos da LP são mais longos que o do v3; coluna de texto um pouco mais larga e h2 menor para a prancha caber na janela. ===================================================================== */ #go-medicoes .med__txt .h2{font-size:calc(var(--h2) * .74);line-height:1.02} @media (min-width:900px){ #go-medicoes .med{grid-template-columns:minmax(280px,.4fr) minmax(0,1fr)} } @media (max-width:760px){ #go-medicoes .med__txt .h2{font-size:calc(var(--h2) * .68)} #go-medicoes .eyebrow{margin-bottom:10px} #go-medicoes .med__lead{margin-top:8px;font-size:.9375rem;line-height:1.42} } /* ---- sections/go-quem-fez.css ---- */ /* ===================================================================== LPs gestao-de-obras · PAV. 06 · #go-quem-fez Pausa de imagem: faixa larga de foto de obra com grading único do v3 (laje armada, sem pessoas) e a autoridade do fundador em duas colunas. ===================================================================== */ #go-quem-fez .qf{display:flex;flex-direction:column;gap:clamp(20px,4svh,44px)} #go-quem-fez .qf-fig{min-width:0} #go-quem-fez .qf-foto{--cantos-off:10px} #go-quem-fez .qf-foto__in{position:relative;height:clamp(180px,calc(var(--secao-util) - 330px),440px);overflow:hidden;border-radius:2px; --veu:linear-gradient(180deg,rgba(14,15,14,.05) 0%,rgba(14,15,14,.10) 55%,rgba(14,15,14,.45) 100%);--foto-pos:50% 46%} #go-quem-fez .qf-foto__in picture,#go-quem-fez .qf-foto__in img{display:block;width:100%;height:100%} #go-quem-fez .qf-foto__in img{object-fit:cover;object-position:var(--foto-pos)} #go-quem-fez .qf-txt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,4.4vw,72px);align-items:end} #go-quem-fez .qf-lead{max-width:44ch} #go-quem-fez .qf-lead strong{font-weight:700} #go-quem-fez .qf-cta{margin-top:clamp(16px,2.8svh,28px)} @media (max-width:899px){ #go-quem-fez .qf{gap:clamp(14px,2.6svh,24px)} #go-quem-fez .qf-foto__in{height:clamp(140px,calc(var(--secao-util) - 440px),300px)} #go-quem-fez .qf-txt{grid-template-columns:minmax(0,1fr);row-gap:12px} } @media (max-width:899px) and (max-height:760px){ #go-quem-fez .qf-lead{font-size:1rem;line-height:1.42} } /* ---- sections/go-duvidas.css ---- */ /* ===================================================================== LPs gestao-de-obras · PAV. 07 · #go-duvidas Acordeão escuro simples (details nativo, um aberto por vez), com as réguas finas do v3 entre as perguntas. ===================================================================== */ #go-duvidas .dv{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);column-gap:clamp(32px,4.4vw,72px);align-items:start} #go-duvidas .dv-cab{max-width:30rem} #go-duvidas .dv-lista{min-width:0;box-shadow:inset 0 1px 0 var(--linha-forte)} #go-duvidas .dv-item{box-shadow:inset 0 -1px 0 var(--linha-forte)} #go-duvidas .dv-q{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;column-gap:12px;min-height:64px;padding:14px 4px;cursor:pointer;list-style:none; font:500 calc(clamp(1.0625rem,.95rem + .45vw,1.375rem) * (.5 + var(--type-h-scale,1) / 2))/1.25 var(--f-d);letter-spacing:-.01em;color:var(--fg-forte); transition:color .2s var(--ease-ui)} #go-duvidas .dv-q::-webkit-details-marker{display:none} #go-duvidas .dv-q::marker{content:""} #go-duvidas .dv-q:hover{color:var(--white)} #go-duvidas .dv-q:focus-visible{outline:2px solid var(--anel);outline-offset:2px;border-radius:4px} #go-duvidas .dv-n{align-self:start;padding-top:.35em;font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--green)} #go-duvidas .dv-i{width:18px;height:18px;color:var(--fg-2);transition:transform .35s var(--ease),color .2s var(--ease-ui)} #go-duvidas .dv-item[open] .dv-i{transform:rotate(45deg);color:var(--green)} #go-duvidas .dv-r{padding:0 calc(20px + 12px) 18px 4px} #go-duvidas .dv-r p{margin:0;max-width:56ch;font:400 1rem/1.55 var(--f-t);color:var(--fg-2)} #go-duvidas .dv-r strong{color:var(--fg-forte);font-weight:700} #go-duvidas .dv-item[open] .dv-r{animation:dv-abre .45s var(--ease) both} @keyframes dv-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} #go-duvidas .dv-breve{vertical-align:.1em;margin-right:4px} @media (max-height:800px){ #go-duvidas .dv-q{min-height:54px;padding-block:10px} #go-duvidas .dv-r{padding-bottom:14px} } @media (max-width:899px){ #go-duvidas .dv{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,3svh,28px)} #go-duvidas .dv-cab{max-width:none} #go-duvidas .dv-q{grid-template-columns:minmax(0,1fr) 18px;column-gap:8px;min-height:52px;padding:10px 2px;font-size:1rem} #go-duvidas .dv-r{padding:0 4px 14px 2px} #go-duvidas .dv-r p{font-size:.9375rem;line-height:1.5} } /* ---- sections/go-contato.css ---- */ /* go-contato: cópia reescopada de sections/contato.css (v3) para as LPs gestao-de-obras; hex trocado por tokens */ /* ===================================================================== #go-contato · Cobertura (CTA final) O prédio concluído (o corte da navegação em escala de prancha, com o símbolo de 3 placas assentando no topo) + o RDO desta visita, ligado a cada pavimento por linhas de chamada. Dono: agente da seção contato. ===================================================================== */ #go-contato{ --bg:var(--g1); --cob-cod:28px; /* coluna do código do pavimento (T, 01 ... COB) */ --cob-predio:clamp(150px,13.2vw,214px); --cob-fios:clamp(40px,3.6vw,60px); --cob-sb:clamp(46px,6.4svh,64px); overflow:clip; } /* ---------- foto de obra (conceito C, já graduada): só atmosfera, atrás da figura ---------- */ #go-contato .contato-fundo{position:absolute;inset:0;z-index:-1; --foto-pos:60% 74%; --grao:.06; --veu: linear-gradient(180deg,var(--g1) 0%,rgba(31,30,30,0) 24%,rgba(31,30,30,0) 70%,var(--g1) 100%), linear-gradient(90deg,var(--g1) 0%,rgba(31,30,30,.94) 34%,rgba(24,24,23,.78) 58%,rgba(24,24,23,.70) 100%); -webkit-mask-image:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 64%); mask-image:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--g0) 99%,var(--g1)) 64%)} /* ---------- grade ---------- */ #go-contato .contato-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,4.6vw,80px)} /* ---------- texto ---------- */ #go-contato .contato-texto{min-width:0;max-width:40rem;container-type:inline-size} /* h2 na mesma escala dos outros pavimentos, travado pela largura da coluna para "Vamos construir juntos." caber em uma linha no desktop (no máximo 3 a 4 linhas com a continuação) */ @media (min-width:900px){ #go-contato .contato-texto .h2{font-size:min(var(--h2),10.2cqi)} } #go-contato .contato-texto .eyebrow{margin-bottom:clamp(14px,2.4svh,24px)} #go-contato .contato-reforco{margin-top:clamp(16px,2.8svh,30px);max-width:34ch;font:400 var(--lead)/1.5 var(--f-t);color:var(--fg-2)} #go-contato .contato-cta{margin-top:clamp(22px,4svh,44px)} /* ---------- figura: prédio + linhas de chamada + RDO ---------- */ #go-contato .contato-fig{min-width:0} #go-contato .contato-quadro{--cantos-off:14px;position:relative;display:grid;grid-template-columns:var(--cob-predio) minmax(0,1fr);column-gap:var(--cob-fios);align-items:stretch} #go-contato .contato-fig > .fig{margin-top:clamp(14px,2.2svh,22px)} @media (min-width:900px){ #go-contato .contato-quadro{min-height:clamp(340px,56svh,580px)} } /* prédio concluído: mesma gramática do corte (planejado tracejado, executado cheio, cobertura em verde) */ #go-contato .contato-predio{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;min-height:0} #go-contato .contato-predio__sb{display:grid;place-items:end center;flex:none;height:var(--cob-sb);padding:0 0 3px var(--cob-cod)} #go-contato .contato-predio__sb svg{width:clamp(34px,40%,72px);height:auto;overflow:visible} #go-contato .contato-predio__sb path{fill:var(--green)} #go-contato .contato-pavs{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;min-height:0} #go-contato .contato-pav{flex:1 1 0;min-height:20px;display:grid;grid-template-columns:var(--cob-cod) minmax(0,1fr);align-items:stretch} #go-contato .contato-pav__cod{align-self:center;font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--on-2);transition:color .3s var(--ease)} #go-contato .contato-pav__laje{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;min-width:0;padding:0 8px 0 10px;overflow:hidden; background-color:color-mix(in srgb,var(--ink) 89%,var(--on));border:1px solid rgba(236,240,232,.40);border-bottom:0;border-top:2px solid rgba(236,240,232,.62); transition:background-color .5s var(--ease),border-color .5s var(--ease)} #go-contato .contato-pav.is-cob .contato-pav__laje{margin-inline:9%;background-color:var(--green);border-color:var(--green)} #go-contato .contato-pav.is-cob .contato-pav__laje::before{content:"";position:absolute;z-index:-1;inset:0; background:linear-gradient(135deg,transparent 0 25%,rgba(42,41,41,.16) 25% 37.5%,transparent 37.5% 75%,rgba(42,41,41,.16) 75% 87.5%,transparent 87.5%) 0 0/6px 6px} #go-contato .contato-pav__nome{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-top:1px;font:600 .625rem/1.4 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:rgba(236,240,232,.90)} #go-contato .contato-pav.is-cob .contato-pav__nome{color:var(--ink)} #go-contato .contato-pav__n{margin-left:auto;flex:none;display:grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:4px; background:var(--green);color:var(--ink);font:600 .6875rem/1 var(--f-d)} #go-contato .contato-pav__n:empty{display:none} #go-contato .contato-pav.is-cob .contato-pav__n{background:var(--ink);color:var(--green-soft)} /* pavimento com registros desta visita */ #go-contato .contato-pav.tem-reg .contato-pav__laje{background-color:color-mix(in srgb,var(--g1) 84%,var(--green));border-color:rgba(143,214,143,.55);border-top-color:var(--green-soft)} #go-contato .contato-pav.tem-reg .contato-pav__cod{color:var(--green-soft)} /* pavimento em foco (linha do RDO sob o ponteiro ou o foco) */ #go-contato .contato-pav.is-foco .contato-pav__laje{background-color:color-mix(in srgb,var(--g1) 70%,var(--green));border-color:var(--green-soft)} #go-contato .contato-pav.is-foco .contato-pav__cod{color:var(--white)} #go-contato .contato-pav.is-cob.is-foco .contato-pav__laje{background-color:var(--green-hi)} #go-contato .contato-predio__terreno{display:block;flex:none;height:8px;margin:0 -6px 0 calc(var(--cob-cod) - 6px);border-top:1px solid rgba(236,240,232,.45); background:repeating-linear-gradient(-45deg,rgba(236,240,232,.28) 0 1px,transparent 1px 4px)} /* linhas de chamada (desenhadas pelo JS): executado = cheia, sugestão = tracejada */ #go-contato .contato-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} #go-contato .contato-fios path{fill:none;stroke:rgba(236,240,232,.46);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .25s var(--ease)} #go-contato .contato-fios .is-plan{stroke:rgba(236,240,232,.5);stroke-dasharray:3 4} #go-contato .contato-fios circle{fill:rgba(236,240,232,.70);transition:fill .25s var(--ease)} #go-contato .contato-fios .is-on{stroke:var(--green)} #go-contato .contato-fios circle.is-on{fill:var(--green)} /* ---------- RDO desta visita (réplica branca) ---------- */ #go-contato .contato-rdo{position:relative;z-index:1;align-self:end;display:flex;flex-direction:column;min-width:0} #go-contato .contato-rdo .ui-ctx b{font-size:.9375rem} #go-contato .contato-rdo__resumo{padding:clamp(12px,1.8svh,18px) 16px clamp(12px,1.8svh,16px);background:var(--white);box-shadow:0 1px 0 var(--hair-2l)} #go-contato .contato-rdo__frase{font:500 clamp(1.0625rem,.9rem + .45vw,1.3125rem)/1.25 var(--f-d);letter-spacing:-.012em;color:var(--ink);text-wrap:balance} #go-contato .contato-rdo__frase b{font-weight:600;color:var(--green-ink)} #go-contato .contato-rdo__sub{margin-top:6px;font:400 .8125rem/1.45 var(--f-t);color:var(--ink-2);text-wrap:pretty} #go-contato .contato-rdo__corpo{background:var(--white);padding:2px 0 4px} #go-contato .contato-rdo__cab, #go-contato .contato-reg{display:grid;grid-template-columns:44px minmax(0,8.6em) minmax(0,1fr) 14px;column-gap:12px;align-items:center;padding:0 14px 0 16px} #go-contato .contato-rdo__cab{min-height:30px;margin:0;box-shadow:0 1px 0 var(--hair-1l)} #go-contato .contato-rdo__cab span{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-contato .contato-rdo__lista{list-style:none;margin:0;padding:0} #go-contato .contato-rdo__lista > li{box-shadow:0 1px 0 var(--hair-1l)} #go-contato .contato-rdo__lista > li:last-child{box-shadow:none} #go-contato .contato-reg{position:relative;min-height:clamp(44px,5.6svh,52px);padding-block:6px;text-decoration:none;color:var(--ink);transition:background-color .2s var(--ease)} #go-contato a.contato-reg:hover,#go-contato .contato-reg.is-foco{background:rgba(91,187,91,.07)} #go-contato .contato-reg:focus-visible{outline-offset:-2px;border-radius:2px} #go-contato .contato-reg__h{font:600 .875rem/1.2 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums lining-nums} #go-contato .contato-reg__p{min-width:0;font:600 .6875rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)} #go-contato .contato-reg__t{min-width:0;font:400 .8125rem/1.35 var(--f-t);color:color-mix(in srgb,var(--g0) 35%,var(--ink-2));text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #go-contato .contato-reg__ir{width:14px;height:14px;color:var(--ink-2);opacity:.5;transition:opacity .2s var(--ease),transform .32s var(--ease)} #go-contato a.contato-reg:hover .contato-reg__ir,#go-contato a.contato-reg:focus-visible .contato-reg__ir{opacity:1;transform:translateX(2px);color:var(--green-ink)} /* sugestão (pavimento ainda sem registro): linha planejada, tracejada como projeção */ #go-contato .contato-reg--plan .contato-reg__h{display:block;width:36px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(42,41,41,.22) 0 3px,transparent 3px 6px)} #go-contato .contato-reg--plan .contato-reg__p{color:var(--ink-2)} #go-contato .contato-reg--plan .contato-reg__t{font-family:var(--f-d);font-weight:600;color:var(--green-ink)} #go-contato .contato-reg.is-novo{animation:contato-novo 1.6s var(--ease) both} @keyframes contato-novo{from{background-color:rgba(91,187,91,.20)}to{background-color:rgba(91,187,91,0)}} #go-contato .contato-rdo__pe{justify-content:space-between;min-height:40px;padding-block:6px} #go-contato .contato-rdo__todos{min-height:28px;padding:0 4px;font-size:.75rem} /* ---------- prédio subindo e símbolo assentando (só com movimento) ---------- */ @media (prefers-reduced-motion:no-preference){ html.js #go-contato .contato-predio:not(.is-erguido) .contato-pav__laje{background-color:var(--g1);border-style:dashed;border-color:rgba(236,240,232,.34)} html.js #go-contato .contato-predio:not(.is-erguido) .contato-pav__nome{opacity:.5} #go-contato .contato-pav__nome{transition:opacity .4s var(--ease) calc(var(--i,0) * 70ms)} html.js #go-contato .contato-predio:not(.is-erguido) .contato-pav__n{opacity:0} #go-contato .contato-pav__n{transition:opacity .4s var(--ease) calc(var(--i,0) * 70ms + 200ms)} #go-contato .contato-predio.is-erguido .contato-pav__laje{transition-delay:calc(var(--i,0) * 70ms)} html.js #go-contato .contato-predio:not(.is-assentado) .contato-predio__sb path{opacity:0;transform:translateY(-52px)} #go-contato .contato-predio__sb path{transition:opacity .5s var(--ease),transform .7s var(--ease)} #go-contato .contato-predio.is-assentado .sb-2{transition-delay:.12s} #go-contato .contato-predio.is-assentado .sb-1{transition-delay:.24s} } /* ---------- desktop estreito (corte à direita, pouca largura): prédio sem nomes ---------- */ @media (min-width:900px) and (max-width:1279.98px){ #go-contato{--cob-predio:clamp(84px,9vw,110px);--cob-fios:clamp(28px,3vw,40px)} #go-contato .contato-pav__nome{display:none} #go-contato .contato-pav__laje{justify-content:flex-end;padding:0 5px} } /* ---------- alturas baixas (1366x768, 1280x720) ---------- */ @media (min-width:900px) and (max-height:800px){ #go-contato .contato-reg{min-height:42px;padding-block:4px} #go-contato .contato-rdo__cab{min-height:26px} #go-contato .contato-rdo .ui-head{padding-block:10px} } /* ---------- tablet e celular: texto em cima, figura embaixo ---------- */ @media (max-width:899.98px){ #go-contato{--cob-predio:clamp(60px,17vw,96px);--cob-fios:clamp(16px,5vw,28px);--cob-cod:22px;--cob-sb:clamp(30px,4.4svh,44px)} #go-contato .contato-fundo{--foto-pos:56% 70%; --veu: linear-gradient(180deg,var(--g1) 0%,rgba(31,30,30,.80) 18%,rgba(24,24,23,.80) 46%,var(--g1) 72%); -webkit-mask-image:none;mask-image:none} #go-contato .contato-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(16px,2.4svh,32px)} #go-contato .contato-texto{max-width:40rem} #go-contato .contato-pav__nome{display:none} #go-contato .contato-pav__laje{justify-content:center;padding:0 4px} #go-contato .contato-pav__n{margin-left:0} #go-contato .contato-pav.is-cob .contato-pav__laje{margin-inline:12%} } @media (max-width:760px){ #go-contato .contato-texto .eyebrow{margin-bottom:12px} #go-contato .contato-reforco{margin-top:12px;font-size:1rem} #go-contato .contato-cta{margin-top:18px;gap:10px} #go-contato .contato-cta .btn{--h:48px;font-size:1rem} #go-contato .contato-fig > .fig{display:none} #go-contato .contato-rdo .ui-head{padding:9px 12px;gap:10px} #go-contato .contato-rdo .ui-ctx b{font-size:.875rem} #go-contato .contato-rdo__resumo{padding:10px 12px} #go-contato .contato-rdo__frase{font-size:1rem} #go-contato .contato-rdo__sub{margin-top:4px;font-size:.75rem} #go-contato .contato-rdo__cab{display:none} /* linha do RDO em duas faixas: hora + pavimento em cima, registro embaixo */ #go-contato .contato-reg{grid-template-columns:auto minmax(0,1fr) 14px;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;min-height:48px;padding:6px 10px 6px 12px} #go-contato .contato-reg__h{grid-row:1;font-size:.8125rem} #go-contato .contato-reg__p{grid-row:1;grid-column:2} #go-contato .contato-reg__t{grid-row:2;grid-column:1 / 3;-webkit-line-clamp:1;font-size:.8125rem} #go-contato .contato-reg__ir{grid-row:1 / 3;grid-column:3} #go-contato .contato-reg--plan .contato-reg__h{width:30px;height:6px} #go-contato .contato-rdo__pe{padding:4px 10px 4px 12px;min-height:32px} #go-contato .contato-rdo__pe .nota-sim{font-size:.625rem;letter-spacing:.06em;gap:6px} #go-contato .contato-rdo__todos{display:none} #go-contato .contato-reg__p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #go-contato .contato-rdo__resumo{padding:9px 12px 10px} } /* celular baixo (360x740, 320x640) */ @media (max-width:760px) and (max-height:760px){ #go-contato .contato-reforco{display:none} #go-contato .contato-cta{margin-top:16px} #go-contato .contato-reg{min-height:44px;padding-block:4px} } @media (max-width:760px) and (max-height:700px){ #go-contato .contato-rdo__sub{display:none} } @media (max-width:400px){ #go-contato .contato-rdo .ui-fim{display:none} } @media (max-width:374px){ #go-contato .contato-cta{gap:8px} #go-contato .contato-cta .btn{--h:44px;padding:0 10px 0 12px;gap:8px;font-size:.875rem} #go-contato .contato-cta .btn--sec{padding:0 12px} #go-contato .contato-rdo .ui-head{padding:8px 10px} #go-contato .contato-rdo .ui-ctx small{display:none} #go-contato .contato-rdo__frase{font-size:.9375rem;line-height:1.22} #go-contato .contato-reg{min-height:42px;padding:4px 8px 4px 10px} } /* ---- sections/go-planejamento.css ---- */ /* go-planejamento: cópia reescopada de sections/planejamento.css (v3) para as LPs gestao-de-obras; hex trocado por tokens */ /* ===================================================================== PAV. 02 · #go-planejamento (dono: agente da seção) Cronograma (Gantt) replicado do app com a linha do Hoje arrastável. Posições das barras em CSS: --a/--b (dia inicial/final, 0 = 01/01/26), janela da escala em --t0/--w e linha em --h, tudo no .pl-gantt. ===================================================================== */ #go-planejamento{ --pl-rh:30px; /* altura de linha do Gantt */ --pl-c1:clamp(250px,21.5vw,330px); /* coluna EAP */ --pl-c2:188px; /* coluna Previsto */ --pl-pr:14px; /* respiro à direita do tempo */ --pl-gh:36px; /* cabeçalho do Gantt (eixo) */ --pl-etapa:color-mix(in srgb,var(--white) 17%,var(--ink-2)); --pl-etapa-pv:color-mix(in srgb,var(--g0) 34%,var(--ink-2)); --pl-ativ:color-mix(in srgb,var(--white) 78%,var(--g2)); --pl-ativ-pv:color-mix(in srgb,var(--white) 9%,var(--ink-2)); --pl-hach:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--white) 9%,var(--ink-2)) 0 1.6px,color-mix(in srgb,var(--white) 59%,var(--ink-2)) 1.6px 4px); --pl-hach-etapa:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--g0) 54%,var(--ink-2)) 0 1.6px,color-mix(in srgb,var(--white) 17%,var(--ink-2)) 1.6px 4px); --pl-prog:var(--green); --pl-atr:color-mix(in srgb,var(--red) 64%,var(--red-ink)); /* vermelho do app escurecido: rótulo branco na barra com 4,7:1 */ --pl-hoje:var(--green); --pl-cinza:color-mix(in srgb,var(--white) 25%,var(--ink-2)); } @media (max-height:800px){ #go-planejamento{ --pl-rh:25px; --pl-gh:30px; } } @media (max-height:700px){ #go-planejamento{ --pl-rh:24px; } } @media (min-height:1000px) and (min-width:1100px){ #go-planejamento{ --pl-rh:34px; --pl-gh:40px; } } /* desktop baixo entre 701 e 760px de altura (1280x720 e afins): linhas acompanham a altura útil (mínimo 22px) */ @media (max-height:760px) and (min-width:761px){ #go-planejamento{ --pl-rh:clamp(22px,calc((var(--secao-util) - 372px) / 10),25px); --pl-gh:28px; } } #go-planejamento .pl{display:grid;gap:clamp(14px,2.2svh,24px)} /* ---------- cabeçalho do pavimento ---------- */ #go-planejamento .pl-cab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px clamp(24px,4vw,72px);align-items:end} #go-planejamento .pl-cab__a .eyebrow{margin-bottom:clamp(10px,1.6svh,16px)} #go-planejamento .pl-cab__b{display:grid;justify-items:start;gap:2px} #go-planejamento .pl-lead{max-width:46ch} #go-planejamento .pl-dica{margin-left:-1px} /* ---------- moldura e painel ---------- */ #go-planejamento .pl-fig{min-width:0} #go-planejamento .pl-app{font-size:.75rem} /* cabeçalho do painel */ #go-planejamento .pl-head{gap:10px 12px;padding:8px 10px 8px 14px;min-height:48px} #go-planejamento .pl-ctx{flex:none} #go-planejamento .pl-selo{gap:5px;transition:background-color .3s var(--ease),color .3s var(--ease)} #go-planejamento .pl-selo__i{width:11px;height:11px;flex:none} #go-planejamento .pl-selo.chip--neutro .pl-selo__i{display:none} #go-planejamento .pl-ctl{display:flex;align-items:center;gap:8px} #go-planejamento .pl-ir{min-height:30px;padding:0 11px 0 9px;gap:6px;font-size:.75rem} #go-planejamento .pl-ir__i{width:12px;height:12px;color:var(--green-ink)} #go-planejamento .pl-ir.is-on{background:rgba(91,187,91,.14);box-shadow:inset 0 0 0 1px rgba(45,110,49,.35)} #go-planejamento .pl-esc > button{min-height:26px;padding:0 11px} /* KPIs + situação */ #go-planejamento .pl-kpis{display:grid;grid-template-columns:repeat(3,minmax(104px,auto)) minmax(0,1fr);background:var(--white);box-shadow:0 1px 0 var(--hair-2l)} #go-planejamento .pl-kpi{display:grid;align-content:center;gap:5px;margin:0;padding:9px 14px 10px;min-width:0} #go-planejamento .pl-kpi + .pl-kpi,#go-planejamento .pl-sit{box-shadow:inset 1px 0 0 var(--hair-1l)} #go-planejamento .pl-kpi dt{white-space:nowrap} #go-planejamento .pl-kpi__v{display:flex;align-items:baseline;gap:3px;margin:0;min-height:22px;font:600 1.25rem/1 var(--f-d);letter-spacing:-.015em;color:var(--ink);white-space:nowrap} #go-planejamento .pl-kpi__v .u{font:500 .75rem/1 var(--f-d);color:var(--ink-2);margin-left:1px} #go-planejamento .pl-kpi__p{margin-left:7px;padding:3px 5px;border-radius:4px;background:var(--ui-sub);font:600 .6875rem/1 var(--f-d);color:var(--ink-2);align-self:center} #go-planejamento .pl-kpi__nd{display:none;font:600 .6875rem/1.2 var(--f-l);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);align-self:center} #go-planejamento [data-pl]:not([data-marco]) [data-pl-av]{display:none} #go-planejamento [data-pl]:not([data-marco]) .pl-kpi__nd{display:inline} #go-planejamento .pl-sit{display:grid;align-content:center;gap:6px;padding:9px 14px 10px;min-width:0} #go-planejamento .pl-sit__h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0} #go-planejamento .pl-sit__tot{font:500 .6875rem/1 var(--f-d);color:var(--ink-2);white-space:nowrap} #go-planejamento .pl-sit__barra{display:flex;gap:2px;height:6px;border-radius:3px;overflow:hidden;background:var(--ui-sub)} #go-planejamento .pl-sit__barra > i{display:block;flex:0 0 0;min-width:0;transition:flex-grow .5s var(--ease)} #go-planejamento .pl-sit__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 14px;font:500 .6875rem/1.25 var(--f-d);color:var(--ink-2)} #go-planejamento .pl-sit__l li{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap} #go-planejamento .pl-sit__l li::before{content:"";width:7px;height:7px;border-radius:2px;align-self:center;background:currentColor} #go-planejamento .pl-sit__l b{font:600 .8125rem/1 var(--f-d);color:var(--ink)} /* cores da situação: realizado (app) e previsto (cinzas) */ #go-planejamento .pl-sit .s-atr{color:var(--red-ink)} #go-planejamento .pl-sit__barra .s-atr{background:var(--pl-atr)} #go-planejamento .pl-sit .s-nao{color:var(--ink-2)} #go-planejamento .pl-sit__barra .s-nao{background:var(--pl-cinza)} #go-planejamento .pl-sit .s-and{color:var(--ink-2)} #go-planejamento .pl-sit__barra .s-and{background:color-mix(in srgb,var(--g0) 1%,var(--ink-2))} #go-planejamento .pl-sit .s-conc{color:var(--green-ink)} #go-planejamento .pl-sit__barra .s-conc{background:var(--pl-prog)} #go-planejamento .pl-sit__l .s-atr::before{background:var(--pl-atr)} #go-planejamento .pl-sit__l .s-nao::before{background:var(--pl-cinza)} #go-planejamento .pl-sit__l .s-and::before{background:color-mix(in srgb,var(--g0) 1%,var(--ink-2))} #go-planejamento .pl-sit__l .s-conc::before{background:var(--pl-prog)} #go-planejamento .pl-sit .p-conc::before,#go-planejamento .pl-sit__barra .p-conc{background:var(--pl-etapa-pv)} #go-planejamento .pl-sit .p-and::before,#go-planejamento .pl-sit__barra .p-and{background:var(--pl-hach)} #go-planejamento .pl-sit .p-ini::before,#go-planejamento .pl-sit__barra .p-ini{background:color-mix(in srgb,var(--white) 52%,var(--ink-2))} #go-planejamento .pl-sit .p-nao::before,#go-planejamento .pl-sit__barra .p-nao{background:color-mix(in srgb,var(--white) 81%,var(--ink-2))} #go-planejamento .pl-sit .p-sd::before{background:radial-gradient(circle,color-mix(in srgb,var(--white) 18%,var(--ink-2)) .8px,transparent 1.1px) 0 0/3px 3px,color-mix(in srgb,var(--white) 80%,var(--on-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--white) 61%,var(--ink-2))} #go-planejamento .pl-sit__barra .p-sd{background:radial-gradient(circle,color-mix(in srgb,var(--white) 37%,var(--ink-2)) .8px,transparent 1.1px) 0 0/4px 4px,color-mix(in srgb,var(--white) 80%,var(--on-2))} #go-planejamento .pl-sit [class^="p-"]{color:var(--ink-2)} /* etapas no celular (escondido no desktop) */ #go-planejamento .pl-etm{display:none} /* ---------- Gantt ---------- */ #go-planejamento .pl-gantt{--h:257;--t0:0;--w:334;position:relative;background:var(--white);padding-right:var(--pl-pr); -webkit-user-select:none;user-select:none} #go-planejamento .pl-gh,#go-planejamento .pl-row{display:grid;grid-template-columns:var(--pl-c1) var(--pl-c2) minmax(0,1fr);grid-template-areas:"eap prev tl"} #go-planejamento .pl-gh{height:var(--pl-gh);align-items:center;box-shadow:0 1px 0 var(--hair-2l); font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-planejamento .pl-gh__c1{grid-area:eap;padding-left:14px} #go-planejamento .pl-gh__c2{grid-area:prev;padding-left:10px;white-space:nowrap} #go-planejamento .pl-gh__tl{grid-area:tl;position:relative;align-self:stretch;overflow:clip} #go-planejamento .pl-gh__c1,#go-planejamento .pl-gh__c2{align-self:stretch;display:flex;align-items:center;box-shadow:inset -1px 0 0 var(--hair-1l)} /* eixo do tempo: rótulos de mês (linha de cima) e de dia/marco (linha de baixo) */ #go-planejamento .pl-eixo{position:absolute;inset:0} #go-planejamento .pl-ex{position:absolute;left:calc((var(--a) - var(--t0)) / var(--w) * 100%);padding-left:5px;white-space:nowrap; font:600 .625rem/1 var(--f-l);letter-spacing:.06em;color:var(--ink-2)} #go-planejamento .pl-ex.is-sob{visibility:hidden} #go-planejamento .pl-ex--m{top:7px;text-transform:none;letter-spacing:.02em;font:600 .6875rem/1 var(--f-d);color:var(--ink)} #go-planejamento .pl-ex--d{bottom:6px;letter-spacing:.02em;font:500 .625rem/1 var(--f-d)} #go-planejamento .pl-ex--marco{color:var(--green-ink);font-weight:600;padding-left:0;translate:-50% 0} #go-planejamento .pl-ex--fim{translate:-100% 0} #go-planejamento .pl-ex--d::before{content:"";position:absolute;left:0;top:-5px;width:1px;height:4px;background:var(--hair-3l)} #go-planejamento .pl-ex--marco::before{left:50%;background:var(--green-ink)} #go-planejamento .pl-ex--fim::before{left:100%} /* linhas */ #go-planejamento .pl-rows{list-style:none;margin:0;padding:0} #go-planejamento .pl-row{height:var(--pl-rh);align-items:center;box-shadow:0 1px 0 var(--hair-1l)} #go-planejamento .pl-row.is-recolhida{display:none} #go-planejamento .pl-row--etapa{background:color-mix(in srgb,var(--white) 84%,var(--on-2))} #go-planejamento .pl-eap{grid-area:eap;display:flex;align-items:center;gap:8px;min-width:0;height:100%;padding:0 10px 0 14px;box-shadow:inset -1px 0 0 var(--hair-1l)} #go-planejamento .pl-row:not(.pl-row--etapa) .pl-eap{padding-left:34px} #go-planejamento .pl-cod{flex:none;min-width:2.1em;font:600 .75rem/1 var(--f-d);color:var(--ink)} #go-planejamento .pl-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 .75rem/1.2 var(--f-t);color:color-mix(in srgb,var(--g0) 35%,var(--ink-2))} #go-planejamento .pl-row--etapa .pl-nome{font:600 .75rem/1.2 var(--f-d);color:var(--ink)} #go-planejamento .pl-tog{display:flex;align-items:center;gap:6px;min-width:0;height:100%;min-height:24px;margin-left:-6px;padding:0 6px;border:0;border-radius:5px;background:none;cursor:pointer;text-align:left} #go-planejamento .pl-tog:hover{background:rgba(42,41,41,.05)} #go-planejamento .pl-tog:focus-visible{outline-offset:-2px} #go-planejamento .pl-tog__i{width:12px;height:12px;flex:none;color:var(--ink-2);transition:transform .3s var(--ease)} #go-planejamento .pl-tog[aria-expanded="false"] .pl-tog__i{transform:rotate(-90deg)} /* realizado no marco: código em vermelho e triângulo, como no app */ #go-planejamento [data-real] .pl-row.is-atr .pl-cod{color:var(--red-ink)} #go-planejamento [data-real] .pl-row.is-atr .pl-eap::after{content:"";flex:none;width:11px;height:11px;margin-left:auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.6 11 10.4H1z' fill='none' stroke='%23b4232a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M6 5v2.4M6 8.9v.1' stroke='%23b4232a' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat} /* coluna Previsto */ #go-planejamento .pl-prev{grid-area:prev;display:flex;align-items:center;gap:6px;min-width:0;height:100%;padding:0 10px;box-shadow:inset -1px 0 0 var(--hair-1l)} #go-planejamento .pl-st{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px 0 7px;border-radius:5px;white-space:nowrap; font:600 .6875rem/1 var(--f-d);color:var(--ink-2);background:var(--ui-sub);transition:background-color .25s var(--ease),color .25s var(--ease)} #go-planejamento .pl-st__i{width:8px;height:8px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor} #go-planejamento .pl-st[data-st="conc"]{color:var(--ink);background:color-mix(in srgb,var(--on-2) 13%,var(--ui-sub))} #go-planejamento .pl-st[data-st="conc"] .pl-st__i{background:currentColor} #go-planejamento .pl-st[data-st="and"]{color:var(--ink);background:color-mix(in srgb,var(--white) 90%,var(--ink-2))} #go-planejamento .pl-st[data-st="and"] .pl-st__i{background:linear-gradient(90deg,currentColor 50%,transparent 50%)} #go-planejamento .pl-st[data-st="ini"] .pl-st__i{background:linear-gradient(90deg,currentColor 50%,transparent 50%);opacity:.7} #go-planejamento .pl-st[data-st="nao"]{background:var(--white);box-shadow:inset 0 0 0 1px var(--hair-2l)} #go-planejamento .pl-st[data-st="sd"]{background:none;box-shadow:inset 0 0 0 1px var(--hair-2l);color:color-mix(in srgb,var(--white) 14%,var(--ink-2))} #go-planejamento .pl-st[data-st="sd"] .pl-st__i{box-shadow:inset 0 0 0 1px currentColor;background:radial-gradient(circle,currentColor .7px,transparent 1px) 0 0/3px 3px} #go-planejamento .pl-pct{font:600 .6875rem/1 var(--f-d);color:var(--ink-2)} #go-planejamento .pl-pct:empty{display:none} /* coluna do tempo */ #go-planejamento .pl-tl{grid-area:tl;position:relative;height:100%;overflow:clip} #go-planejamento .pl-b,#go-planejamento .pl-rs,#go-planejamento .pl-cauda{position:absolute;top:50%;height:12px;margin-top:-6px;border-radius:3px; left:calc((var(--a) - var(--t0)) / var(--w) * 100%);width:calc((var(--b) - var(--a) + 1) / var(--w) * 100%);min-width:3px} #go-planejamento .pl-row--etapa .pl-b,#go-planejamento .pl-row--etapa .pl-rs{height:14px;margin-top:-7px} #go-planejamento .pl-b{overflow:hidden;background:var(--pl-ativ);transition:opacity .3s var(--ease)} #go-planejamento .pl-b--etapa{background:var(--pl-etapa)} /* previsto até a linha do Hoje: cresce por transform, calculado do --h */ /* hachura recortada (não estica): a fração prevista vem do --h */ #go-planejamento .pl-pv{position:absolute;inset:0;background:var(--pl-hach); clip-path:inset(0 calc((1 - clamp(0,(var(--h) + 1 - var(--a)) / (var(--b) - var(--a) + 1),1)) * 100%) 0 0)} #go-planejamento .pl-b--etapa .pl-pv{background:var(--pl-hach-etapa)} #go-planejamento .pl-b__n{position:absolute;left:6px;top:50%;translate:0 -50%;font:600 .625rem/1 var(--f-d);color:var(--white);white-space:nowrap} #go-planejamento .pl-b .pl-b__n{display:none} /* término fora da tela real: continuação tracejada */ #go-planejamento .pl-cauda{border:1.5px dashed var(--pl-ativ-pv);border-left:0;border-radius:0 3px 3px 0;background:none;opacity:.8;transition:opacity .3s var(--ease)} #go-planejamento .pl-row--etapa .pl-cauda{border-color:var(--pl-etapa)} /* realizado no marco (cores da tela real) */ #go-planejamento .pl-rs{opacity:0;overflow:hidden;transition:opacity .35s var(--ease)} #go-planejamento .pl-rs--prog{background:var(--pl-prog)} #go-planejamento .pl-rs--atr{background:var(--pl-atr)} #go-planejamento .pl-rs--ativ{background:color-mix(in srgb,var(--white) 73%,var(--g1))} #go-planejamento .pl-rs--etapa{background:var(--pl-etapa)} #go-planejamento [data-real] .pl-rs{opacity:1} #go-planejamento [data-real] .pl-b{opacity:0} #go-planejamento [data-real] .pl-cauda{border-color:var(--pl-atr);opacity:.7} #go-planejamento [data-real] .pl-row:not(.is-atr) .pl-cauda{border-color:var(--pl-etapa)} /* chip do realizado preso à linha do Hoje (só nos marcos) */ #go-planejamento .pl-rc{position:absolute;top:50%;left:clamp(0%,calc((var(--h) + 1 - var(--t0)) / var(--w) * 100%),100%); display:none;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:4px;white-space:nowrap; translate:calc(-100% - 7px) -50%;font:600 .625rem/1 var(--f-d);letter-spacing:.01em;opacity:0;transition:opacity .3s var(--ease)} #go-planejamento .pl-rc svg{width:10px;height:10px;flex:none} #go-planejamento [data-real] .pl-row.is-atr .pl-rc,#go-planejamento [data-real] .pl-row.is-conc .pl-rc{display:inline-flex;opacity:1} #go-planejamento .pl-row.is-atr .pl-rc{background:color-mix(in srgb,var(--white) 84%,var(--red));color:var(--red-ink);box-shadow:0 0 0 2px var(--white)} #go-planejamento .pl-row.is-conc .pl-rc{background:color-mix(in srgb,var(--white) 81%,var(--green));color:var(--green-ink);box-shadow:0 0 0 2px var(--white)} #go-planejamento .pl-row--etapa.is-atr .pl-rc{box-shadow:0 0 0 2px color-mix(in srgb,var(--white) 84%,var(--on-2))} #go-planejamento .pl-row--etapa.is-conc .pl-rc{box-shadow:0 0 0 2px color-mix(in srgb,var(--white) 84%,var(--on-2))} #go-planejamento .pl-gantt[data-rc="dir"] .pl-rc{translate:7px -50%} /* ---------- sobreposição: grade + linha do Hoje ---------- */ #go-planejamento .pl-ov{position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--pl-c1) + var(--pl-c2));right:var(--pl-pr); cursor:ew-resize;touch-action:pan-y} #go-planejamento .pl-grade{position:absolute;inset:var(--pl-gh) 0 0;overflow:clip;pointer-events:none} /* período sem datas na demonstração (o dataset só tem o Gantt até 06/02/26): hachura de prancha + rótulo; segue a escala */ #go-planejamento .pl-sd{position:absolute;top:var(--pl-gh);bottom:0;right:0;left:min(100%,calc((var(--a) - var(--t0)) / var(--w) * 100%));overflow:clip;pointer-events:none;container-type:inline-size; background:repeating-linear-gradient(-45deg,rgba(42,41,41,.05) 0 1px,transparent 1px 7px);mix-blend-mode:multiply; box-shadow:inset 1px 0 0 rgba(42,41,41,.22)} #go-planejamento .pl-sd__t{position:absolute;left:10px;top:9px;display:inline-flex;align-items:baseline;gap:5px;height:20px;padding:0 8px;border-radius:4px;white-space:nowrap; background:var(--white);box-shadow:inset 0 0 0 1px var(--hair-2l);font:600 .625rem/20px var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #go-planejamento .pl-sd__d{font:500 .6875rem/20px var(--f-d);letter-spacing:0;text-transform:none} #go-planejamento .pl-gantt:not([data-escala="geral"]) .pl-sd__t{display:none} /* o rótulo nunca encosta nos chips do marco (ficam à esquerda da linha do Hoje, a 77% da escala Geral) */ @container (max-width:440px){ #go-planejamento .pl-sd__d{display:none} } @container (max-width:345px){ #go-planejamento .pl-sd__t{display:none} } #go-planejamento .pl-grade > i{position:absolute;top:0;bottom:0;left:calc((var(--a) - var(--t0)) / var(--w) * 100%);width:1px;background:rgba(42,41,41,.07)} #go-planejamento .pl-grade > i.g-forte{background:rgba(42,41,41,.14)} #go-planejamento .pl-grade > i.g-fds{width:calc(1 / var(--w) * 100%);background:rgba(42,41,41,.025)} #go-planejamento .pl-hoje{position:absolute;top:0;bottom:0;left:clamp(0%,calc((var(--h) + 1 - var(--t0)) / var(--w) * 100%),100%);width:0;pointer-events:none} #go-planejamento .pl-hoje__l{position:absolute;top:calc(var(--pl-gh) - 12px);bottom:0;left:-1px;width:2px;background:var(--pl-hoje); box-shadow:0 0 0 1px rgba(255,255,255,.75)} #go-planejamento .pl-hoje::before{content:"";position:absolute;top:0;bottom:0;left:-14px;width:28px;pointer-events:auto;cursor:ew-resize} #go-planejamento .pl-hoje__f{position:absolute;top:3px;left:0;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:6px; background:var(--pl-hoje);color:var(--ink);white-space:nowrap;pointer-events:auto;cursor:grab;touch-action:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(45,110,49,.35),0 2px 6px -2px rgba(20,30,20,.45); font:600 .6875rem/1 var(--f-d);transition:box-shadow .2s var(--ease)} #go-planejamento .pl-hoje__f::after{content:"";position:absolute;inset:-11px -6px;border-radius:10px} #go-planejamento .pl-hoje__f:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px} #go-planejamento .pl-hoje__k{font:600 .5625rem/1 var(--f-l);letter-spacing:.12em;text-transform:uppercase} #go-planejamento .pl-hoje__g{width:5px;height:9px;fill:currentColor;opacity:.7} #go-planejamento [data-flag="esq"] .pl-hoje__f{translate:calc(-100% + 1px) 0} #go-planejamento [data-flag="dir"] .pl-hoje__f{translate:-1px 0} #go-planejamento .pl-gantt.is-arraste .pl-hoje__f{cursor:grabbing;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px rgba(91,187,91,.28),0 4px 10px -2px rgba(20,30,20,.45)} #go-planejamento .pl-gantt.is-arraste{cursor:grabbing} /* fora da janela da escala: estacionada na borda, tracejada */ #go-planejamento [data-fora] .pl-hoje__l{background:repeating-linear-gradient(180deg,var(--pl-hoje) 0 5px,transparent 5px 9px);box-shadow:none} #go-planejamento .pl-hoje__seta{display:none} #go-planejamento .pl-gantt[data-fora] .pl-hoje__f{padding-right:7px} /* pulso de dica (botão "Arraste a linha do Hoje") */ #go-planejamento .pl-hoje.is-pulso .pl-hoje__f{animation:pl-pulso 1s var(--ease) 2} @keyframes pl-pulso{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 0 rgba(91,187,91,.55)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 12px rgba(91,187,91,0)}} /* ---------- rodapé do painel: nota + legenda ---------- */ #go-planejamento .pl-foot{justify-content:space-between;gap:6px 18px;padding:8px 14px} #go-planejamento .pl-leg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font:500 .6875rem/1.2 var(--f-d);color:var(--ink-2)} #go-planejamento .pl-leg li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} #go-planejamento .pl-leg i{display:block;width:14px;height:8px;border-radius:2px} #go-planejamento .lg-etapa{background:var(--pl-etapa)} #go-planejamento .lg-ativ{background:var(--pl-ativ)} #go-planejamento .lg-prev{background:var(--pl-hach)} #go-planejamento .lg-prog{background:var(--pl-prog)} #go-planejamento .lg-atr{background:var(--pl-atr)} #go-planejamento .pl-leg .lg-hoje{width:2px;height:12px;border-radius:1px;background:var(--pl-hoje)} #go-planejamento .lg-cauda{border:1.5px dashed var(--pl-ativ-pv);border-left:0;background:none} /* ---------- pé: legenda da figura + CTA ---------- */ #go-planejamento .pl-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px} #go-planejamento .pl-cap{margin:0} /* ===================================================================== Desempenho do arraste: o que muda a cada dia fica contido (o texto novo não propaga layout para o painel inteiro) ===================================================================== */ #go-planejamento .pl-kpi__v,#go-planejamento .pl-gh__c2,#go-planejamento .pl-prev,#go-planejamento .pl-sit__barra{contain:strict} #go-planejamento .pl-kpi__v{height:22px} #go-planejamento .pl-sit__h{contain:strict;height:14px} @media (min-width:1100px){ #go-planejamento .pl-kpis{grid-template-columns:118px 132px 112px minmax(0,1fr)} } @media (max-height:800px) and (min-width:761px){ #go-planejamento .pl-kpi__v{height:20px} } @media (max-width:760px){ #go-planejamento .pl-kpi__v{height:18px} #go-planejamento .pl-sit__h{height:18px} } /* ===================================================================== Desktop baixo (1366x768 e afins) ===================================================================== */ @media (max-height:800px) and (min-width:761px){ #go-planejamento .pl{gap:14px} #go-planejamento .pl-head{min-height:42px;padding-block:5px} #go-planejamento .pl-kpi,#go-planejamento .pl-sit{padding-block:6px 7px} #go-planejamento .pl-kpi__v{font-size:1.125rem;min-height:20px} #go-planejamento .pl-foot{padding-block:6px} #go-planejamento .pl-pe .btn{--h:44px} } @media (max-height:760px) and (min-width:761px){ #go-planejamento .pl{gap:10px} } /* selo e seletor de etapa do celular ficam fora no desktop */ #go-planejamento .pl-selo--m{display:none} /* ===================================================================== Tablet: coluna Previsto curta, sem o sufixo "prevista" ===================================================================== */ @media (max-width:1099.98px){ #go-planejamento{--pl-c1:clamp(200px,27vw,260px);--pl-c2:148px} #go-planejamento .pl-st__pv{display:none} #go-planejamento .pl-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} #go-planejamento .pl-sit{grid-column:1 / -1;box-shadow:inset 0 1px 0 var(--hair-1l)} } @media (max-width:900px){ #go-planejamento .pl-cab{grid-template-columns:minmax(0,1fr)} #go-planejamento .pl-head{flex-wrap:wrap} #go-planejamento .pl-ctl{margin-left:0;width:100%;justify-content:space-between} } /* ===================================================================== Celular: Gantt compacto (uma etapa por vez, linha em duas faixas) ===================================================================== */ @media (max-width:760px){ #go-planejamento{--pl-c2:100px;--pl-rh:40px;--pl-gh:26px;--pl-pr:10px} #go-planejamento .pl{gap:14px} #go-planejamento .pl-cab{gap:6px} #go-planejamento .pl-cab__a .eyebrow{margin-bottom:8px} #go-planejamento .pl-lead{font-size:1rem;line-height:1.45} #go-planejamento .pl-dica{min-height:36px} #go-planejamento .ui-frame{padding:4px;border-radius:14px} /* cabeçalho em grade: obra + Ir para; escala + etapa */ #go-planejamento .pl-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"sym ctx ctx ir" "esc esc etm etm"; align-items:center;padding:6px 8px 7px 10px;gap:6px 8px;min-height:0} #go-planejamento .pl-head .ui-sym{grid-area:sym} #go-planejamento .pl-ctx{grid-area:ctx;min-width:0} #go-planejamento .pl-ctx b{font-size:.8125rem;overflow:hidden;text-overflow:ellipsis} #go-planejamento .pl-ctx small{font-size:.5625rem} #go-planejamento .pl-selo--d{display:none} #go-planejamento .pl-ctl{display:contents} #go-planejamento .pl-ir{grid-area:ir;justify-self:end;min-height:30px;padding:0 9px 0 8px;font-size:.6875rem} #go-planejamento .pl-esc{grid-area:esc;justify-self:start} #go-planejamento .pl-esc > [data-escala="semana"]{display:none} #go-planejamento .pl-esc > button{min-height:28px;padding:0 13px;font-size:.6875rem} #go-planejamento .pl-etm{grid-area:etm;justify-self:end;display:flex;align-items:center;gap:3px} #go-planejamento .pl-etm__k{margin-right:3px;font:600 .5625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-planejamento .pl-etm button{width:26px;height:28px;padding:0;border:0;border-radius:6px;background:var(--ui-sub);font:600 .75rem/1 var(--f-d);color:var(--ink-2);cursor:pointer; box-shadow:inset 0 0 0 1px var(--hair-1l)} #go-planejamento .pl-etm button[aria-pressed="true"]{background:var(--ink);color:var(--white);box-shadow:none} /* KPIs e situação (com o selo do prazo no cabeçalho da situação) */ #go-planejamento .pl-kpi{padding:6px 10px 7px;gap:4px} #go-planejamento .pl-kpi .ui-k{font-size:.5625rem;letter-spacing:.08em} #go-planejamento .pl-kpi__v{font-size:1rem;min-height:16px} #go-planejamento .pl-kpi__p{display:none} #go-planejamento .pl-kpi__nd{font-size:.5625rem} #go-planejamento .pl-sit{padding:6px 10px 7px;gap:5px} #go-planejamento .pl-sit__h{align-items:center;min-height:18px} #go-planejamento .pl-sit__tot{display:none} #go-planejamento .pl-selo--m{display:inline-flex;height:18px;padding:0 6px;gap:4px;font-size:.625rem;margin-left:auto} #go-planejamento .pl-sit__l{gap:2px 10px;font-size:.625rem} #go-planejamento .pl-sit__l b{font-size:.75rem} /* Gantt em duas faixas: nome em cima, tempo + previsto embaixo */ #go-planejamento .pl-gh,#go-planejamento .pl-row{grid-template-columns:minmax(0,1fr) var(--pl-c2);grid-template-areas:"tl prev"} #go-planejamento .pl-row{grid-template-rows:18px 16px;grid-template-areas:"eap eap" "tl prev";align-content:center;row-gap:2px} #go-planejamento .pl-gh__c1{display:none} #go-planejamento .pl-gh__c2{padding:0 4px 0 6px;font-size:.5625rem;line-height:1.1;letter-spacing:.05em;white-space:normal;box-shadow:none} #go-planejamento .pl-row--etapa{display:none} #go-planejamento .pl-row.is-recolhida{display:grid} #go-planejamento [data-em="1"] .pl-row:not([data-etapa="1"]), #go-planejamento [data-em="2"] .pl-row:not([data-etapa="2"]), #go-planejamento [data-em="3"] .pl-row:not([data-etapa="3"]), #go-planejamento [data-em="4"] .pl-row:not([data-etapa="4"]){display:none} #go-planejamento .pl-row:not(.pl-row--etapa) .pl-eap{position:relative;z-index:3;padding:0 10px;background:var(--white);box-shadow:none} #go-planejamento .pl-prev{padding:0 4px 0 6px;box-shadow:none} #go-planejamento .pl-st{height:16px;padding:0 6px 0 5px;gap:4px;font-size:.625rem} #go-planejamento .pl-st__i{width:7px;height:7px} /* no celular o percentual previsto fica só para leitor de tela (a hachura mostra a fração) */ #go-planejamento .pl-pct{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #go-planejamento .pl-tl{margin-left:10px} #go-planejamento .pl-b,#go-planejamento .pl-rs,#go-planejamento .pl-cauda{height:8px;margin-top:-4px;border-radius:2px} #go-planejamento .pl-rc{height:16px;padding:0 5px;font-size:.5625rem} #go-planejamento .pl-ov{left:10px;right:var(--pl-c2)} #go-planejamento .pl-sd__t{display:none} #go-planejamento .pl-hoje__f{height:20px;padding:0 7px 0 6px;gap:5px;top:3px} #go-planejamento .pl-hoje__l{top:calc(var(--pl-gh) - 6px)} #go-planejamento .pl-ex--m{top:5px;font-size:.625rem} #go-planejamento .pl-ex--d{display:none} #go-planejamento .pl-gantt[data-escala="geral"] .pl-ex--m.is-par{visibility:hidden} #go-planejamento .pl-foot{padding:5px 10px} #go-planejamento .pl-leg{display:none} #go-planejamento .pl-pe{gap:8px} #go-planejamento .pl-pe .btn{--h:44px;order:-1} } /* celular baixo (360x740): linhas e texto mais justos, legenda da figura só para leitor de tela */ @media (max-width:760px) and (max-height:760px){ #go-planejamento{--pl-rh:36px;--pl-gh:24px} #go-planejamento .pl{gap:10px} #go-planejamento .pl-lead{font-size:.9375rem;line-height:1.4} #go-planejamento .pl-dica{min-height:28px} #go-planejamento .pl-head{padding-block:5px} #go-planejamento .pl-foot{padding-block:4px} #go-planejamento .pl-hoje__f{top:2px} #go-planejamento .pl-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #go-planejamento .pl-kpi{padding-block:5px 6px;gap:3px} #go-planejamento .pl-sit{padding-block:5px 6px;gap:4px} #go-planejamento .pl-kpi__v{height:17px} } @media (max-width:380px){ #go-planejamento .pl-ir{padding:0 7px} #go-planejamento .pl-sit__l li.s-and{display:none} /* "sem data" fica na barra e no selo de cada linha; na lista, só para leitor de tela (mantém uma linha) */ #go-planejamento .pl-sit__l li.p-sd{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } @media (max-width:340px){ #go-planejamento .pl-ir__i{display:none} #go-planejamento .pl-etm__k{display:none} #go-planejamento .pl-kpi{padding-inline:8px} #go-planejamento .pl-kpi__v{font-size:.9375rem} } /* ===================================================================== LP gestao-de-obras B: a planilha Excel de origem cobre o cronograma e, ao importar, as linhas voam para a EAP do Gantt (FLIP no JS). ===================================================================== */ #go-planejamento .pl-frame{position:relative} #go-planejamento .gp-xls{--f-xls:Aptos,Calibri,"Segoe UI",Arial,sans-serif;position:absolute;inset:6px;z-index:6;display:flex;flex-direction:column;overflow:hidden; border-radius:10px;background:var(--white);color:color-mix(in srgb,var(--g0) 94%,var(--ui-sub));font:400 .8125rem/1 var(--f-xls);transition:opacity .45s var(--ease),visibility 0s linear .45s} #go-planejamento .gp-xls.is-oculta{opacity:0;visibility:hidden;pointer-events:none} #go-planejamento .gp-xls.is-voltando{transition:opacity .35s var(--ease)} html:not(.js) #go-planejamento .gp-xls{display:none} #go-planejamento .gp-x__bar{flex:none;display:flex;flex-direction:column;background:color-mix(in srgb,var(--white) 95%,var(--g0));box-shadow:0 1px 0 color-mix(in srgb,var(--white) 80%,var(--ink))} #go-planejamento .gp-x__arq{display:flex;align-items:center;height:32px;padding:0 14px;background:color-mix(in srgb,var(--white) 1%,var(--green-ink));color:var(--white);font:600 .8125rem/1 var(--f-xls);letter-spacing:.01em} #go-planejamento .gp-x__fx{display:flex;align-items:center;gap:.8em;height:28px;padding-right:.6em;background:var(--white);box-shadow:0 1px 0 color-mix(in srgb,var(--white) 81%,var(--ink));white-space:nowrap;overflow:hidden} #go-planejamento .gp-x__ref{display:flex;align-items:center;height:100%;padding:0 .8em;min-width:4.4em;box-shadow:1px 0 0 color-mix(in srgb,var(--white) 81%,var(--ink));color:color-mix(in srgb,var(--ink) 79%,var(--ink-2))} #go-planejamento .gp-x__f{font-style:italic;color:color-mix(in srgb,var(--white) 50%,var(--g0));font-family:Georgia,"Times New Roman",serif} #go-planejamento .gp-x__fv{overflow:hidden;text-overflow:ellipsis} #go-planejamento .gp-x__g{flex:1 1 auto;min-height:0;overflow:hidden;display:grid;grid-template-columns:2.6em 4em minmax(0,1fr) 3.2em 6.4em;align-content:start} #go-planejamento .gp-x__g > span{display:flex;align-items:center;height:var(--gp-rh,26px);padding:0 .5em;white-space:nowrap;overflow:hidden;box-shadow:inset -1px -1px 0 color-mix(in srgb,var(--white) 87%,var(--g1))} #go-planejamento .gp-x__h,#go-planejamento .gp-x__n{justify-content:center;background:color-mix(in srgb,var(--white) 95%,var(--g0));color:color-mix(in srgb,var(--white) 30%,var(--g2));font-size:.92em;box-shadow:inset -1px -1px 0 color-mix(in srgb,var(--white) 80%,var(--ink))!important} #go-planejamento .gp-x__th{font-weight:700;color:color-mix(in srgb,var(--ink) 79%,var(--ink-2));background:color-mix(in srgb,var(--white) 95%,var(--ink-2))} #go-planejamento .gp-x__num{justify-content:flex-end} #go-planejamento .gp-x__l--etapa{font-weight:700;background:color-mix(in srgb,var(--white) 95%,var(--ink-2))} #go-planejamento .gp-x__cod.is-sel{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--white) 1%,var(--green-ink))!important} #go-planejamento .gp-x__abas{flex:none;display:flex;height:28px;background:color-mix(in srgb,var(--white) 95%,var(--g0));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 80%,var(--ink));padding-left:.6em} #go-planejamento .gp-x__abas span{display:flex;align-items:center;padding:0 1em;color:color-mix(in srgb,var(--white) 30%,var(--g2));font-size:.92em;white-space:nowrap;box-shadow:inset -1px 0 0 color-mix(in srgb,var(--white) 84%,var(--g2))} #go-planejamento .gp-x__abas .is-on{background:var(--white);color:color-mix(in srgb,var(--white) 1%,var(--green-ink));font-weight:700;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--white) 1%,var(--green-ink)),inset -1px 0 0 color-mix(in srgb,var(--white) 84%,var(--g2))} #go-planejamento .gp-x__acao{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 14px;background:var(--ui-bg);box-shadow:inset 0 1px 0 var(--hair-2l)} #go-planejamento .gp-x__btn{--h:44px} #go-planejamento .gp-x__nota{color:var(--ink-2)} #go-planejamento .gp-voa{position:relative;z-index:7} #go-planejamento .gp-ver{min-height:44px} #go-planejamento [data-gp-app].is-importando .pl-tl, #go-planejamento [data-gp-app].is-importando .pl-prev{opacity:0} #go-planejamento [data-gp-app].is-chegando .pl-tl, #go-planejamento [data-gp-app].is-chegando .pl-prev{opacity:1;transition:opacity .5s var(--ease) var(--gp-d,0ms)} @media (max-height:800px){ #go-planejamento .gp-xls{--gp-rh:23px} } @media (max-width:760px){ #go-planejamento .gp-xls{font-size:.75rem;--gp-rh:24px} #go-planejamento .gp-x__g{grid-template-columns:2.2em 3.2em minmax(0,1fr) 2.4em 5.2em} #go-planejamento .gp-x__acao{padding:8px 10px} #go-planejamento .gp-x__fx{display:none} } @media (max-width:760px){ #go-planejamento .pl-cab .h2{font-size:calc(var(--h2) * .84)} #go-planejamento .pl-lead{font-size:.9375rem;line-height:1.42} } @media (max-width:760px) and (max-height:800px){ #go-planejamento .pl-lead{font-size:.875rem} } @media (max-width:760px) and (max-height:800px){ #go-planejamento .pl-lead{line-height:1.36} #go-planejamento .pl-cab{gap:4px} } @media (max-width:760px){ #go-planejamento .gp-ver{display:none} } /* ---- sections/go-erp.css ---- */ /* ===================================================================== LP gestao-de-obras B · PAV. 03 · #go-erp (transparência de escopo) Ficha tipográfica no selo de prancha do #estrutura do v3 + a Fig. 09 do v3 (registro chegando ao ERP pela API aberta), reescopadas. ===================================================================== */ #go-erp{ --est-meio:clamp(58px,6.6vw,104px); --est-op-h:50px; } #go-erp .ge{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);column-gap:clamp(32px,4.4vw,72px);align-items:center} #go-erp .ge-txt{min-width:0} /* ficha (selo de prancha) */ #go-erp .ge-selo{position:relative;margin-top:clamp(18px,3.2svh,32px);border-radius:3px;box-shadow:inset 0 0 0 1px var(--linha-forte)} #go-erp .ge-selo__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0;padding:9px 14px 8px; box-shadow:inset 0 -1px 0 var(--linha-forte);font:600 .6875rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)} #go-erp .ge-selo__d{color:var(--fg-2);letter-spacing:.1em} #go-erp .ge-ficha{list-style:none;margin:0;padding:0} #go-erp .ge-ficha li{position:relative;display:grid;grid-template-columns:2.2em minmax(0,1fr);column-gap:10px;align-items:baseline;padding:12px 56px 13px 14px;box-shadow:inset 0 -1px 0 var(--linha)} #go-erp .ge-ficha li:last-child{box-shadow:none} #go-erp .ge-fn{font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--green)} #go-erp .ge-ft{display:block;margin:0;font:400 1rem/1.45 var(--f-t);color:var(--fg-2);text-wrap:pretty} #go-erp .ge-ft b{display:block;margin-bottom:2px;font:500 1.125rem/1.2 var(--f-d);letter-spacing:-.005em;color:var(--fg-forte)} #go-erp .ge-dest{font-weight:700;color:var(--fg-forte)} #go-erp .ge-fr{position:absolute;top:13px;right:12px;font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)} #go-erp .ge-cta{margin-top:clamp(18px,3.2svh,32px)} /* figura */ #go-erp .ge-fig{min-width:0;display:flex;flex-direction:column} #go-erp .ge-rot{margin:0 0 10px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)} #go-erp .ge-mapa{min-height:300px} #go-erp .ge-no--erp li::before{border-top:1px dashed rgba(236,240,232,.30)} #go-erp .ge-fig-x{text-transform:none} /* ---------- da Fig. 09 do #estrutura, reescopada ---------- */ /* faixa de controle: mesma altura e acabamento do alternador da Fig. 08 */ #go-erp .ge-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:calc(var(--est-op-h) + 8px);margin-bottom:clamp(12px,1.8svh,18px); padding:4px 4px 4px 16px;border-radius:12px;background:rgba(236,240,232,.035);box-shadow:inset 0 0 0 1px var(--linha-forte)} #go-erp .ge-st{display:inline-flex;align-items:center;gap:9px;min-width:0;margin:0;font:600 .9375rem/1.2 var(--f-d);color:var(--fg)} #go-erp .ge-st__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--fg-3);transition:background-color .4s var(--ease)} #go-erp .ge-st[data-estado="ok"] .ge-st__dot{background:var(--green)} #go-erp .ge-st[data-estado="run"] .ge-st__dot{background:var(--green);animation:ge-sinal .7s var(--ease) 3 alternate} @keyframes ge-sinal{to{opacity:.25}} #go-erp .ge-repetir{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 16px 0 14px;border:0;border-radius:9px;cursor:pointer; background:rgba(236,240,232,.06);color:var(--fg);box-shadow:inset 0 0 0 1px var(--contorno);font:600 .9375rem/1 var(--f-d); transition:background-color .2s var(--ease),color .2s var(--ease)} #go-erp .ge-repetir svg{width:16px;height:16px;color:var(--green);transition:transform .5s var(--ease)} #go-erp .ge-repetir:hover{background:rgba(236,240,232,.11);color:var(--white)} #go-erp .ge-repetir:hover svg{transform:rotate(-40deg)} #go-erp .ge-repetir:active{transform:translateY(.5px)} #go-erp .ge-mapa{position:relative;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--est-meio) minmax(0,1fr);align-items:center} #go-erp .ge-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} #go-erp .ge-fio{fill:none;stroke:rgba(236,240,232,.24);stroke-width:1} #go-erp .ge-fio--luz{stroke:var(--green);stroke-width:1.5;opacity:0;transition:opacity .7s var(--ease)} #go-erp .ge-fio--luz.is-on{opacity:1} #go-erp .ge-pacote{fill:var(--green);stroke:var(--g1);stroke-width:1.5;opacity:0;transition:opacity .2s var(--ease)} #go-erp .ge-pacote.is-on{opacity:1} #go-erp .ge-no{position:relative;z-index:1;min-width:0;border-radius:10px;padding:12px 13px 4px} #go-erp .ge-no--obrify{grid-column:1;background:var(--white);color:var(--ink);box-shadow:var(--sh-ui-escuro)} #go-erp .ge-no--erp{grid-column:3;background:color-mix(in srgb,var(--g2) 80%,var(--ink));color:var(--on); box-shadow:inset 0 0 0 1px rgba(236,240,232,.18),0 0 0 1px rgba(0,0,0,.35),0 18px 40px -20px rgba(0,0,0,.65)} #go-erp .ge-no__h{display:flex;align-items:center;gap:8px;margin:0;font:600 .9375rem/1.1 var(--f-d)} #go-erp .ge-no__h span{font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2)} #go-erp .ge-no__i{width:18px;height:16px;flex:none} #go-erp .ge-no--erp .ge-no__i{color:var(--on-2)} #go-erp .ge-no__s{margin:8px 0 4px;font:600 .625rem/1.3 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #go-erp .ge-no__s span{display:block;font:500 .75rem/1.3 var(--f-d);letter-spacing:0;text-transform:none;color:var(--ink)} #go-erp .ge-no--erp .ge-no__s{color:var(--on-2)} #go-erp .ge-no--erp .ge-no__s span{color:var(--on-3);font-weight:500} #go-erp .ge-campos{list-style:none;margin:0;padding:0;display:grid} #go-erp .ge-campos li{position:relative;display:grid;gap:3px;padding:8px 0 9px;box-shadow:0 -1px 0 var(--hair-2l);transition:background-color .5s var(--ease)} #go-erp .ge-no--erp .ge-campos li{padding-right:16px;box-shadow:0 -1px 0 rgba(236,240,232,.10)} #go-erp .ge-k{font:600 .625rem/1.1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #go-erp .ge-no--erp .ge-k{color:var(--on-2)} #go-erp .ge-v{font:600 .8125rem/1.25 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums lining-nums; transition:opacity .45s var(--ease),transform .55s var(--ease)} #go-erp .ge-no--erp .ge-v{color:var(--white)} /* linha de origem acende quando o campo sai */ #go-erp .ge-no--obrify li.is-on{background:linear-gradient(90deg,rgba(91,187,91,0),rgba(91,187,91,.16))} /* check do campo recebido (traço em L desenhado, não é texto) */ #go-erp .ge-no--erp .ge-campos li::after{content:"";position:absolute;right:2px;top:50%;width:8px;height:4px;margin-top:-4px; border-left:1.6px solid var(--green);border-bottom:1.6px solid var(--green);transform:rotate(-45deg);opacity:1;transition:opacity .3s var(--ease)} /* antes de chegar: o valor some e fica a marca tracejada do campo vazio */ #go-erp .ge-mapa[data-fase="pre"] .ge-no--erp .ge-v, #go-erp .ge-mapa[data-fase="run"] .ge-no--erp li:not(.is-on) .ge-v{opacity:0;transform:translateX(-6px)} #go-erp .ge-mapa[data-fase="pre"] .ge-no--erp li::after, #go-erp .ge-mapa[data-fase="run"] .ge-no--erp li:not(.is-on)::after{opacity:0} #go-erp .ge-no--erp li::before{content:"";position:absolute;left:0;bottom:11px;width:56%;height:1px; border-top:1px dashed rgba(236,240,232,.30);height:0;opacity:0;transition:opacity .3s var(--ease)} #go-erp .ge-mapa[data-fase="pre"] .ge-no--erp li::before, #go-erp .ge-mapa[data-fase="run"] .ge-no--erp li:not(.is-on)::before{opacity:1} #go-erp .ge-api{position:relative;z-index:2;grid-column:2;justify-self:center;display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:13px; background:var(--g1);box-shadow:inset 0 0 0 1px rgba(236,240,232,.32);white-space:nowrap; font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on);transition:color .4s var(--ease),box-shadow .4s var(--ease)} #go-erp .ge-mapa[data-fase="run"] .ge-api{color:var(--green);box-shadow:inset 0 0 0 1px var(--green)} #go-erp .ge-pe{display:flex;justify-content:flex-end;margin-top:clamp(10px,1.6svh,16px)} #go-erp .ge-no--erp li::before{background:none} @media (max-height:800px){ #go-erp .ge-ficha li{padding-block:9px 10px} #go-erp .ge-ft{font-size:.9375rem;line-height:1.4} #go-erp .ge-ft b{font-size:1.0625rem} #go-erp .ge-campos li{padding:6px 0 7px} } /* ---------- celular e tablet ---------- */ @media (max-width:899px){ #go-erp .ge{grid-template-columns:minmax(0,1fr);row-gap:clamp(14px,2.6svh,24px);align-items:start} #go-erp .ge-selo{margin-top:12px} #go-erp .ge-selo__h{display:none} #go-erp .ge-ficha li{padding:8px 10px 9px;grid-template-columns:1.8em minmax(0,1fr)} #go-erp .ge-ft{font-size:.875rem;line-height:1.38} #go-erp .ge-ft b{font-size:.9375rem;margin-bottom:0} #go-erp .ge-fr{display:none} #go-erp .ge-cta{margin-top:12px} #go-erp .ge-rot{display:none} #go-erp .ge-ctl{min-height:0;padding:3px 3px 3px 12px;margin-bottom:8px} #go-erp .ge-st{font-size:.8125rem} #go-erp .ge-repetir{min-height:40px;padding:0 12px;font-size:.8125rem} #go-erp .ge-mapa{min-height:0} #go-erp .ge-no{padding:8px 9px 2px} #go-erp .ge-no__h{font-size:.8125rem;gap:6px} #go-erp .ge-no__h span{display:none} #go-erp .ge-no__s{display:none} #go-erp .ge-campos li{padding:5px 0 6px;gap:1px} #go-erp .ge-v{font-size:.75rem} #go-erp .ge-fig > .fig .ge-fig-x{display:none} #go-erp .ge-fig > .fig{margin-top:6px} } @media (max-width:899px){ #go-erp .ge-campos [data-de="1"],#go-erp .ge-campos [data-de="2"],#go-erp .ge-campos [data-para="1"],#go-erp .ge-campos [data-para="2"]{display:none} #go-erp .ge-txt .h2{font-size:calc(var(--h2) * .9)} } @media (max-width:899px) and (max-height:800px){ #go-erp .ge-ft b{display:inline} #go-erp .ge-cta .btn{--h:44px} } /* ---- sections/inv-hero.css ---- */ /* ===================================================================== LP Painel do Investidor · Térreo · #inv-hero (Variações A e B) Foto de obra inteira de fundo (a do #canteiro, já graduada), marcadores presos à foto e, à direita, o celular do investidor (A) ou o painel vivo na aba Cronograma com a chave "Visível ao investidor" (B). Este arquivo também guarda o CELULAR DO INVESTIDOR (.ifone / .if-*), usado por #inv-hero, #inv-painel, #inv-relatorio, #inv-visibilidade e #inv-aprovacao: réplica em HTML, escala por cqw (padrão do celular do #rdo). Só tokens var(--...); transparências com color-mix. ===================================================================== */ /* --------------------------------------------------------------------- CELULAR DO INVESTIDOR (compartilhado) --------------------------------------------------------------------- */ :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .ifone{ --fone-w:calc(var(--fone-h,560px) * .47); container-type:inline-size;position:relative;flex:none;width:var(--fone-w);height:var(--fone-h,560px);padding:5px; border-radius:calc(var(--fone-w) * .15);background:var(--g0);--cantos-off:10px; box-shadow:inset 0 0 0 1px var(--hair-2),0 0 0 1px color-mix(in srgb,var(--g0) 60%,transparent), 0 1px 2px color-mix(in srgb,var(--g0) 40%,transparent),0 20px 40px -12px color-mix(in srgb,var(--g0) 80%,transparent), 0 50px 90px -40px color-mix(in srgb,var(--g0) 85%,transparent)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .ifone__tela{position:relative;height:100%;overflow:hidden; border-radius:calc(var(--fone-w) * .15 - 5px);background:var(--ui-bg);color:var(--ink);display:flex;flex-direction:column;font:400 3.4cqw/1.3 var(--f-t)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:10cqw;padding:0 6.4cqw; background:color-mix(in srgb,var(--green-ink) 32%,var(--g1));color:var(--white);font:600 4.2cqw/1 var(--f-d)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-ico{width:15cqw;height:auto} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-app{flex:none;display:flex;align-items:center;gap:2.6cqw;margin:2.6cqw 2.6cqw 0;padding:2.4cqw 3cqw; border-radius:2.6cqw;background:var(--white);box-shadow:0 .5cqw 2cqw color-mix(in srgb,var(--ink) 10%,transparent)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-menu{display:grid;gap:.9cqw;width:4.6cqw} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-menu i{display:block;height:.6cqw;border-radius:.4cqw;background:var(--ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-ctx{flex:1;min-width:0;display:grid;text-align:center} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-ctx small{font:600 2.5cqw/1.2 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-ctx b{font:600 3.6cqw/1.2 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-avatar{position:relative;width:6.6cqw;height:6.6cqw;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,var(--white))} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-avatar::after{content:"";position:absolute;right:-.3cqw;bottom:-.3cqw;width:2cqw;height:2cqw;border-radius:50%; background:var(--green);box-shadow:0 0 0 .5cqw var(--white)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-corpo{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2.6cqw;padding:2.6cqw 2.6cqw 8cqw} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-card{flex:none;padding:3.2cqw 3.4cqw;border-radius:2.6cqw;background:var(--white); box-shadow:0 .5cqw 2cqw color-mix(in srgb,var(--ink) 8%,transparent)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-k{margin:0;font:600 2.8cqw/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-big{display:flex;align-items:baseline;margin:1.4cqw 0 2cqw;font:600 11cqw/1 var(--f-d);letter-spacing:-.02em;color:var(--ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-big small{margin-left:.8cqw;font:500 5cqw/1 var(--f-d);color:var(--ink-2)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-bar{height:1.4cqw;border-radius:1cqw} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-bar--prazo > i{background:var(--status-neutral)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-linha{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;margin:2.4cqw 0 0; font:500 3cqw/1.2 var(--f-d);color:var(--ink-2)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-linha b{font-weight:600;color:var(--ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-chip{height:5.6cqw;margin-top:2.6cqw;padding:0 2cqw;gap:1.4cqw;border-radius:1.4cqw;font-size:2.8cqw} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-chip .chip__dot{width:1.6cqw;height:1.6cqw} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-h{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;margin:0 0 1.6cqw} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-h b{font:600 3.8cqw/1.15 var(--f-d);color:var(--green-ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-h span{font:600 2.5cqw/1.2 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-ativ{list-style:none;margin:0;padding:0} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-ativ li{display:grid;grid-template-columns:6.6cqw minmax(0,1fr) auto;align-items:center;gap:1.8cqw; padding:1.9cqw 0;box-shadow:inset 0 1px 0 var(--hair-2l)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-cod{font:600 3cqw/1 var(--f-d);color:var(--ink-2)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .is-atr .if-cod{color:var(--red-ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-nome{min-width:0;font:500 3.2cqw/1.2 var(--f-d);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-st{padding:1.2cqw 1.6cqw;border-radius:1.2cqw;font:600 2.4cqw/1 var(--f-l);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-st--ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-st--atr{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red-ink)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-st--neutro{background:var(--ui-sub);color:var(--ink-2)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-fotos img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:1.6cqw;background:var(--ui-sub)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-vazio{margin:0;padding:2.4cqw 0 .6cqw;box-shadow:inset 0 1px 0 var(--hair-2l);font:400 3cqw/1.3 var(--f-t);font-style:italic;color:var(--ink-2)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .if-home{position:absolute;z-index:2;left:50%;bottom:2cqw;width:34cqw;height:1.2cqw;border-radius:1cqw;background:var(--ink);transform:translateX(-50%)} :is(#inv-hero,#inv-painel,#inv-relatorio,#inv-visibilidade,#inv-aprovacao) .ifone__tela::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9cqw;pointer-events:none; background:linear-gradient(color-mix(in srgb,var(--ui-bg) 0%,transparent),var(--ui-bg) 70%)} /* --------------------------------------------------------------------- TÉRREO --------------------------------------------------------------------- */ #inv-hero{--bg:var(--g0);--fone-h:min(640px,var(--secao-util) - 40px);--col-gap:clamp(36px,5vw,96px);overflow:clip} /* foto inteira de fundo (cobre a seção), véu escuro só onde há texto */ #inv-hero .inv-hero__foto{position:absolute;inset:0;z-index:0;--grao:.06;--foto-pos:50% 50%; --veu: linear-gradient(180deg,color-mix(in srgb,var(--g0) 66%,transparent) 0,color-mix(in srgb,var(--g0) 0%,transparent) 200px), linear-gradient(0deg,color-mix(in srgb,var(--g0) 60%,transparent) 0,color-mix(in srgb,var(--g0) 0%,transparent) 30%), linear-gradient(90deg,color-mix(in srgb,var(--g0) 86%,transparent) 0%,color-mix(in srgb,var(--g0) 76%,transparent) 40%,color-mix(in srgb,var(--g0) 30%,transparent) 62%,color-mix(in srgb,var(--g0) 18%,transparent) 74%,color-mix(in srgb,var(--g0) 46%,transparent) 100%)} #inv-hero .inv-hero__grade{position:relative;z-index:1;flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--col-gap);align-items:center} #inv-hero .inv-hero__texto{min-width:0;max-width:46rem;container-type:inline-size} #inv-hero .inv-hero__meta{margin-bottom:clamp(14px,2.6svh,26px)} #inv-hero .inv-hero__h1{font-size:min(calc(clamp(2.5rem,1.2rem + 3.2vw,4.5rem) * var(--type-h-scale,1)),10.4cqi);line-height:1.02;letter-spacing:-.03em;color:var(--white); margin:0 0 clamp(16px,2.8svh,30px);text-wrap:balance} #inv-hero .inv-hero__apoio{max-width:36ch;margin:0;font:500 calc(clamp(1.0625rem,.9rem + .5vw,1.375rem) * (.5 + var(--type-h-scale,1) / 2))/1.34 var(--f-d); letter-spacing:-.01em;color:var(--on-2);text-wrap:pretty} #inv-hero .inv-hero__cta{margin-top:clamp(20px,3.6svh,40px)} #inv-hero .inv-hero__fig{position:relative;min-width:0;margin:0} #inv-hero .inv-hero__fone-area{display:flex;justify-content:center} #inv-hero .inv-hero__fig01{position:absolute;left:0;right:0;top:calc(100% + 14px);margin:0} #inv-hero .inv-hero__l0{margin:0} #inv-hero .inv-hero__fig01 .fig__n{color:var(--white)} #inv-hero.inv-hero--fone .inv-hero__fig{margin-bottom:30px} /* ---------- B: painel vivo (aba Cronograma) ---------- */ #inv-hero{--painel-w:clamp(400px,34vw,500px)} #inv-hero.inv-hero--painel .inv-hero__fig{width:var(--painel-w);margin-bottom:34px} #inv-hero .inv-hero__moldura{--cantos-off:12px} #inv-hero .ui-sym{color:var(--green)} #inv-hero .inv-hero__app .ui-head{padding:11px 14px} #inv-hero .inv-hero__app .ui-tabs{padding:0 8px} #inv-hero .inv-hero__pnls{display:grid} #inv-hero .inv-hero__pnls > .inv-hero__pn{grid-area:1 / 1;min-width:0;padding:8px 0} #inv-hero .inv-hero__pnls > [role="tabpanel"][hidden]{display:block!important;visibility:hidden} #inv-hero .inv-hero__pn:not([hidden]){animation:inv-hero-pn .4s var(--ease) both} @keyframes inv-hero-pn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} #inv-hero .inv-hero__colk{white-space:nowrap} #inv-hero .inv-hero__linhas{list-style:none;margin:0;padding:0;display:grid} #inv-hero .inv-hero__linha{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:34px;box-shadow:0 1px 0 var(--hair-1l)} #inv-hero .inv-hero__linha:last-child{box-shadow:none} #inv-hero .inv-hero__cod{font:600 .75rem/1 var(--f-d);color:var(--ink-2)} #inv-hero .inv-hero__linha.is-atr .inv-hero__cod,#inv-hero .inv-hero__linha.is-atr .inv-hero__nome{color:var(--red-ink)} #inv-hero .inv-hero__nome{min-width:0;font:400 .8125rem/1.2 var(--f-t);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #inv-hero .inv-hero__vis{gap:5px} #inv-hero .inv-hero__vis svg{width:13px;height:13px;flex:none} #inv-hero #inv-hero-pn-2 .ui-row .ui-k{text-transform:none;letter-spacing:0;font:500 .8125rem/1.2 var(--f-d);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #inv-hero #inv-hero-pn-2 .ui-row{min-height:34px} /* ---------- marcadores (padrão do #canteiro) ---------- */ #inv-hero .inv-hero__alvos{display:none} @media (min-width:1100px) and (min-aspect-ratio:3/2){ /* com a janela mais larga que a foto (3:2), o "cover" ocupa a largura inteira e centra na altura: a camada repete essa caixa */ #inv-hero .inv-hero__alvos{display:block;position:absolute;z-index:2;left:0;top:50%;width:100%;aspect-ratio:1600 / 1067;transform:translateY(-50%);pointer-events:none} } #inv-hero .alvo{position:absolute;left:var(--x);top:var(--y);width:0;height:0} #inv-hero .alvo.is-aberto{z-index:2} #inv-hero .alvo__btn{position:absolute;left:-22px;top:-22px;display:flex;align-items:center;gap:2px;height:44px;padding:0 4px 0 0;border:0;border-radius:22px;background:none;color:var(--on); cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .35s var(--ease)} #inv-hero .alvo__btn:focus-visible{outline:2px solid var(--green);outline-offset:0} #inv-hero .alvo__mira{position:relative;flex:none;width:44px;height:44px} #inv-hero .alvo__mira::before{content:"";position:absolute;inset:8px;--c:var(--green); background: linear-gradient(var(--c),var(--c)) 0 50%/8px 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 50%/8px 1px no-repeat, linear-gradient(var(--c),var(--c)) 50% 0/1px 8px no-repeat, linear-gradient(var(--c),var(--c)) 50% 100%/1px 8px no-repeat; transition:transform .5s var(--ease)} #inv-hero .alvo__mira::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%; box-shadow:inset 0 0 0 1px var(--green),0 0 0 3px color-mix(in srgb,var(--g0) 35%,transparent);background:color-mix(in srgb,var(--g0) 25%,transparent); transition:background-color .3s var(--ease)} #inv-hero .alvo__rot{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:5px;white-space:nowrap; background:color-mix(in srgb,var(--g0) 88%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 34%,transparent),0 6px 16px -8px color-mix(in srgb,var(--g0) 70%,transparent); font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on); transition:opacity .4s var(--ease) .12s,transform .6s var(--ease) .12s,box-shadow .3s var(--ease)} #inv-hero .alvo__rot .num{color:var(--green);letter-spacing:.06em} #inv-hero .alvo__btn:hover .alvo__rot,#inv-hero .alvo.is-aberto .alvo__rot{box-shadow:inset 0 0 0 1px var(--green),0 6px 16px -8px color-mix(in srgb,var(--g0) 70%,transparent)} #inv-hero .alvo__btn:hover .alvo__mira::after,#inv-hero .alvo.is-aberto .alvo__mira::after{background:color-mix(in srgb,var(--green) 42%,transparent)} #inv-hero .alvo.is-aberto .alvo__mira::before{transform:rotate(45deg) scale(.92)} #inv-hero .alvo__pulso{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--green);opacity:0;pointer-events:none} #inv-hero .alvo.is-aceso .alvo__pulso{animation:inv-hero-pulso 1.6s var(--ease) .2s 2} @keyframes inv-hero-pulso{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}} #inv-hero.is-armado .alvo:not(.is-aceso) .alvo__btn{opacity:0;pointer-events:none} #inv-hero.is-armado .alvo:not(.is-aceso) .alvo__rot{opacity:0;transform:translateX(-8px)} #inv-hero .alvo__cartao{position:absolute;left:-110px;top:30px;z-index:2;display:grid;justify-items:start;gap:7px;width:220px;padding:12px 14px 13px;border-radius:8px; background:var(--corte-bg);box-shadow:inset 0 0 0 1px var(--hair-3),0 0 0 1px color-mix(in srgb,var(--g0) 50%,transparent),0 18px 40px -16px color-mix(in srgb,var(--g0) 90%,transparent); pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s linear .35s} #inv-hero .alvo--cima .alvo__cartao{top:auto;bottom:30px;transform:translateY(-4px)} #inv-hero .alvo.is-aberto .alvo__cartao{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s} #inv-hero .alvo__k{font:600 .6875rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on-2)} #inv-hero .alvo__v{font:600 1rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--white)} #inv-hero .alvo__chip{height:22px} /* ---------- alturas menores (desktop) ---------- */ @media (min-width:761px) and (max-height:820px){ #inv-hero .inv-hero__app .ui-head{padding:9px 14px} #inv-hero .inv-hero__app .ui-tab{min-height:36px} #inv-hero .inv-hero__app .ui-sec{padding:10px 14px} #inv-hero .inv-hero__linha,#inv-hero #inv-hero-pn-2 .ui-row{min-height:30px} #inv-hero .inv-hero__app .ui-foot{padding:8px 14px} } @media (min-width:761px) and (max-height:700px){ #inv-hero .inv-hero__linha--so-largo{display:none} } /* ---------- tablet: colunas mais justas ---------- */ @media (min-width:761px) and (max-width:1099.98px){ #inv-hero{--fone-h:min(560px,var(--secao-util) - 40px);--painel-w:min(46vw,420px);--col-gap:28px} #inv-hero .inv-hero__x{display:none} } /* ---------- celular: texto em cima, o celular (ou o painel) aparece por baixo e sai pela borda ---------- */ @media (max-width:760px){ #inv-hero{padding-top:calc(var(--hdr) + clamp(14px,2.6svh,24px));padding-bottom:0;--fone-h:520px} #inv-hero .inv-hero__foto{--foto-pos:56% 50%; --veu: linear-gradient(180deg,color-mix(in srgb,var(--g0) 84%,transparent) 0%,color-mix(in srgb,var(--g0) 78%,transparent) 52%,color-mix(in srgb,var(--g0) 30%,transparent) 74%,color-mix(in srgb,var(--g0) 50%,transparent) 100%)} #inv-hero .inv-hero__grade{display:flex;flex-direction:column;align-items:stretch} #inv-hero .inv-hero__meta{font-size:clamp(.625rem,2.85vw,.6875rem);letter-spacing:.08em;gap:4px 8px;margin-bottom:clamp(10px,1.8svh,16px)} #inv-hero .inv-hero__h1{font-size:min(calc(clamp(2rem,9vw,2.6rem) * var(--type-h-scale,1)),11.4cqi);margin-bottom:clamp(10px,1.8svh,16px)} #inv-hero .inv-hero__apoio{font-size:clamp(1rem,4.3vw,1.0625rem);line-height:1.36} #inv-hero .inv-hero__cta{margin-top:clamp(14px,2.4svh,20px)} #inv-hero .inv-hero__cta .btn{--h:48px;font-size:1rem} #inv-hero .inv-hero__fig,#inv-hero.inv-hero--fone .inv-hero__fig,#inv-hero.inv-hero--painel .inv-hero__fig{flex:1 1 auto;min-height:90px;width:auto;margin:clamp(18px,3svh,28px) 0 0;position:relative} #inv-hero .inv-hero__fone-area{position:absolute;left:0;right:0;top:0;justify-content:center} #inv-hero .inv-hero__moldura{position:absolute;left:0;right:0;top:0;--cantos-off:8px} #inv-hero .inv-hero__fig01{display:none} #inv-hero .inv-hero__x,#inv-hero .inv-hero__colk{display:none} #inv-hero .inv-hero__app .ui-head{padding:9px 12px;gap:10px} #inv-hero .inv-hero__app .ui-ctx small{display:none} #inv-hero .inv-hero__selo{display:none} #inv-hero .inv-hero__app .ui-tab{min-height:38px;padding:0 9px} #inv-hero .inv-hero__app .ui-sec{padding:9px 12px} #inv-hero .inv-hero__linha{grid-template-columns:26px minmax(0,1fr) auto;min-height:30px} } @media (prefers-reduced-motion:reduce){ #inv-hero .alvo.is-aceso .alvo__pulso{animation:none} #inv-hero .inv-hero__pn:not([hidden]){animation:none} } /* ---- sections/inv-painel.css ---- */ /* ===================================================================== LP Painel do Investidor (A) · Pav. 01 · #inv-painel Texto | celular do investidor (CSS do .ifone em inv-hero.css) | guia que troca a tela do celular. Tudo escopado por #inv-painel. ===================================================================== */ #inv-painel{--ph:min(620px,calc(var(--secao-util) - 64px))} #inv-painel .ip{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(220px,.78fr); grid-template-areas:"txt fig guia" "cta fig guia";grid-template-rows:auto auto;column-gap:clamp(32px,4.4vw,80px);align-items:center;align-content:center} #inv-painel .ip__txt{grid-area:txt;align-self:end;min-width:0;container-type:inline-size} #inv-painel .ip__txt .h2{font-size:min(var(--h2),12cqi)} #inv-painel .ip__txt .eyebrow{margin-bottom:clamp(12px,2svh,20px)} #inv-painel .ip__lead{margin:clamp(14px,2.4svh,22px) 0 0;max-width:34ch} #inv-painel .ip__cta{grid-area:cta;align-self:start;margin-top:clamp(20px,3.6svh,36px)} #inv-painel .ip__fig{grid-area:fig;margin:0;min-width:0} #inv-painel .ip__palco{height:var(--ph);width:calc(var(--ph) * .47);display:flex;justify-content:center} #inv-painel .ifone{--fone-h:var(--ph)} #inv-painel .ip__cap{margin-top:clamp(12px,2svh,18px);max-width:calc(var(--ph) * .47 + 40px)} #inv-painel .ifone__tela::after{display:none} /* telas do celular */ #inv-painel .ip__telas{flex:1 1 auto;min-height:0;display:grid} #inv-painel .ip__tela{grid-area:1 / 1;min-height:0} #inv-painel .ip__tela:not([hidden]){animation:inv-painel-tela .45s var(--ease) both} @keyframes inv-painel-tela{from{opacity:0;transform:translateY(1.4cqw)}to{opacity:1;transform:none}} #inv-painel .ip__tela:focus-visible{outline:2px solid var(--green-ink);outline-offset:-3px} #inv-painel .ip__linha0{margin:0} #inv-painel .ip__pilha{display:flex;gap:.6cqw;height:2.2cqw;margin:1.2cqw 0 0;border-radius:1cqw;overflow:hidden} #inv-painel .ip__pilha i{flex:var(--n) 1 0;background:var(--status-neutral)} #inv-painel .ip__pilha .p-atr{background:var(--red)} #inv-painel .ip__pilha .p-ok{background:var(--green)} #inv-painel .ip__pilha-leg{display:flex;flex-wrap:wrap;gap:1cqw 3cqw;margin:2.2cqw 0 0;font:500 2.7cqw/1.2 var(--f-d);color:var(--ink-2)} #inv-painel .lg{display:inline-flex;align-items:center;gap:1.2cqw} #inv-painel .lg::before{content:"";width:1.8cqw;height:1.8cqw;border-radius:.4cqw;background:var(--status-neutral)} #inv-painel .lg--atr::before{background:var(--red)} #inv-painel .lg--ok::before{background:var(--green)} #inv-painel .lg b{font-weight:600;color:var(--ink)} #inv-painel .ip__fotos{grid-template-columns:repeat(2,minmax(0,1fr));gap:2cqw} #inv-painel .ip__nav{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 3cqw 6.4cqw;background:var(--white);box-shadow:0 -1px 0 var(--hair-2l)} #inv-painel .ip__nav span{position:relative;padding:3cqw 0 0;text-align:center;font:600 2.6cqw/1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:color .3s var(--ease)} #inv-painel .ip__nav span::before{content:"";position:absolute;left:22%;right:22%;top:0;height:.8cqw;border-radius:0 0 .6cqw .6cqw;background:var(--green);transform:scaleX(0);transition:transform .35s var(--ease)} #inv-painel .ip__nav span.is-on{color:var(--green-ink)} #inv-painel .ip__nav span.is-on::before{transform:none} /* guia: troca a tela do celular */ #inv-painel .ip__guia{grid-area:guia;min-width:0;align-self:center} #inv-painel .ip__regua{margin:0 0 6px} #inv-painel .ip__ops{display:grid} #inv-painel .ip__op{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:0 10px;min-height:56px;padding:10px 4px 10px 0; border:0;background:none;color:var(--fg-2);text-align:left;cursor:pointer;box-shadow:inset 0 -1px 0 var(--linha);transition:color .3s var(--ease)} #inv-painel .ip__op::before{content:"";position:absolute;left:-14px;top:14px;bottom:14px;width:2px;border-radius:1px;background:var(--green);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)} #inv-painel .ip__op-n{font:600 .75rem/1 var(--f-l);letter-spacing:.08em;color:var(--fg-3)} #inv-painel .ip__op-t{font:500 1.0625rem/1.25 var(--f-d);letter-spacing:-.005em;text-wrap:balance} #inv-painel .ip__op-v{font:600 1.0625rem/1 var(--f-d);color:var(--fg)} #inv-painel .ip__op:hover{color:var(--fg)} #inv-painel .ip__op[aria-selected="true"]{color:var(--fg-forte);cursor:default} #inv-painel .ip__op[aria-selected="true"]::before{transform:none} #inv-painel .ip__op[aria-selected="true"] .ip__op-n{color:var(--green)} #inv-painel .ip__op:focus-visible{outline:2px solid var(--green);outline-offset:2px} #inv-painel .ip__nota{margin-top:clamp(12px,2svh,18px)} /* ---------- tablet e celular: texto, [celular | guia], botão (a fileira do meio pega a altura que sobra) ---------- */ @media (max-width:1099.98px){ #inv-painel .ip{height:var(--secao-util);grid-template-columns:minmax(0,52%) minmax(0,1fr);grid-template-areas:"txt txt" "fig guia" "cta cta"; grid-template-rows:auto minmax(0,1fr) auto;column-gap:clamp(16px,3vw,32px);align-content:stretch} #inv-painel .ip__txt{align-self:start} #inv-painel .ip__lead{max-width:44ch} #inv-painel .ip__fig{height:100%;min-height:0;margin-top:clamp(14px,2.4svh,24px)} #inv-painel .ip__palco{container-type:size;height:100%;width:100%;align-items:center} #inv-painel .ifone{--fone-h:min(100cqh,100cqw / .47)} #inv-painel .ip__cap{display:none} #inv-painel .ip__guia{align-self:center;margin-top:clamp(14px,2.4svh,24px)} #inv-painel .ip__cta{margin-top:clamp(14px,2.4svh,22px)} } @media (min-width:761px) and (max-width:1099.98px){ #inv-painel .ip{grid-template-columns:minmax(0,40%) minmax(0,1fr)} } @media (max-width:760px){ #inv-painel .ip__op{min-height:46px;padding:6px 0;grid-template-columns:22px minmax(0,1fr) auto;gap:0 6px} #inv-painel .ip__op::before{left:-8px;top:10px;bottom:10px} #inv-painel .ip__op-t{font-size:.875rem;line-height:1.2} #inv-painel .ip__op-v{font-size:.875rem} #inv-painel .ip__regua{font-size:.6875rem;letter-spacing:.1em} #inv-painel .ip__nota{font-size:.625rem;letter-spacing:.08em} } @media (max-width:760px) and (max-height:760px){ #inv-painel .ip__regua{display:none} } @media (prefers-reduced-motion:reduce){ #inv-painel .ip__tela:not([hidden]){animation:none} } /* ---------- cena travada (desktop): 3 telas de rolagem, uma por opção ---------- A seção fica alta e a .ip-trava presa no topo; o JS lê o progresso da rolagem e troca a opção e a tela do celular. Sem JS, abaixo de 1100px ou com movimento reduzido, volta a ser uma seção comum com as abas de clique. */ #inv-painel .ip-trava{overflow:clip} @media (min-width:1100px) and (min-height:600px) and (prefers-reduced-motion:no-preference){ html.js #inv-painel{height:300vh;--ph:min(760px,var(--secao-util))} /* o celular ocupa a altura útil: respiro de 120px como as outras seções */ html.js #inv-painel .ip-trava{position:sticky;top:0;height:100vh;justify-content:center} /* a barra verde da opção ativa enche conforme a rolagem avança dentro dela */ html.js #inv-painel .ip__op[aria-selected="true"]::before{transform:scaleY(var(--ip-p,1))} } /* ---- sections/inv-relatorio.css ---- */ /* ===================================================================== LP Painel do Investidor (A) · Pav. 02 · #inv-relatorio Variante do #fragmentos sem cena pinada: 4 fragmentos do que o investidor recebe hoje; o botão troca tudo pelo celular do investidor (CSS do .ifone em inv-hero.css). Tudo escopado por #inv-relatorio. ===================================================================== */ #inv-relatorio{--palco-h:min(620px,var(--secao-util))} #inv-relatorio .ir{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"cab palco" "acao palco"; grid-template-rows:auto auto;column-gap:clamp(32px,4.6vw,80px);align-content:center} #inv-relatorio .ir__cab{grid-area:cab;align-self:end;min-width:0;container-type:inline-size} #inv-relatorio .ir__cab .h2{font-size:min(var(--h2),11.4cqi)} #inv-relatorio .ir__cab .eyebrow{margin-bottom:clamp(12px,2svh,20px)} #inv-relatorio .ir__lead{margin:clamp(14px,2.4svh,22px) 0 0;max-width:38ch} #inv-relatorio .ir__acao{grid-area:acao;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.8svh,16px);margin-top:clamp(20px,3.6svh,36px)} #inv-relatorio .ir__btn .btn__arr{transition:transform .32s var(--ease)} #inv-relatorio [data-estado="painel"] .ir__btn{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--contorno)} #inv-relatorio [data-estado="painel"] .ir__btn .btn__arr{transform:rotate(180deg)} #inv-relatorio .ir__fig{margin:0} /* ---------- palco ---------- */ #inv-relatorio .ir__palco{grid-area:palco;position:relative;container-type:size;height:var(--palco-h);min-width:0;overflow:clip} #inv-relatorio .ir__frags{position:absolute;inset:0} #inv-relatorio .ir-frag{position:absolute;transform:rotate(var(--r));transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 50ms)} #inv-relatorio .ir-frag--pdf{left:3%;top:7%;width:43cqw;--r:-3deg;--dx:-14cqw;--dy:-8cqh;z-index:1} #inv-relatorio .ir-frag--planilha{right:2%;top:12%;width:50cqw;--r:2.4deg;--dx:14cqw;--dy:-10cqh;z-index:2} #inv-relatorio .ir-frag--foto{left:9%;bottom:5%;width:36cqw;--r:2deg;--dx:-14cqw;--dy:10cqh;z-index:3} #inv-relatorio .ir-frag--msg{right:6%;bottom:12%;width:40cqw;--r:-2deg;--dx:14cqw;--dy:10cqh;z-index:4} #inv-relatorio [data-estado="painel"] .ir-frag{opacity:.1;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.9);transition-delay:0s} /* etiqueta de cada fragmento (padrão das etiquetas do #fragmentos) */ #inv-relatorio .ir-tag{position:absolute;left:0;bottom:calc(100% + 1.2cqw);display:inline-flex;align-items:center;gap:.8em;padding:.5em .8em;border-radius:5px;white-space:nowrap; background:var(--corte-bg);box-shadow:inset 0 0 0 1px var(--hair-3);font:600 max(.5625rem,1.55cqw)/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--on)} #inv-relatorio .ir-tag b{color:var(--green);font-weight:600;letter-spacing:.06em} #inv-relatorio .ir-tag--atr b{color:var(--red-soft)} #inv-relatorio .ir-frag--foto .ir-tag,#inv-relatorio .ir-frag--msg .ir-tag{bottom:auto;top:calc(100% + 1.2cqw)} /* PDF */ #inv-relatorio .ir-pdf{padding:3cqw 3cqw 2.4cqw;border-radius:.6cqw;background:var(--white);color:var(--ink);box-shadow:var(--sh-ui-escuro)} #inv-relatorio .ir-pdf__cab{display:flex;align-items:center;justify-content:space-between;gap:2cqw} #inv-relatorio .ir-pdf__cab b{font:600 2.6cqw/1.1 var(--f-d)} #inv-relatorio .ir-pdf__tipo{padding:.5cqw 1cqw;border-radius:.4cqw;background:var(--red-ink);color:var(--white);font:600 1.7cqw/1 var(--f-l);letter-spacing:.08em} #inv-relatorio .ir-pdf__obra{margin:.8cqw 0 1.8cqw;font:400 1.9cqw/1.2 var(--f-t);color:var(--ink-2)} #inv-relatorio .ir-pdf__l{display:block;height:1cqw;margin:0 0 1.1cqw;border-radius:.5cqw;background:color-mix(in srgb,var(--ink) 12%,transparent)} #inv-relatorio .ir-pdf__l--c{width:62%} #inv-relatorio .ir-pdf__tab{display:grid;grid-template-columns:5cqw minmax(0,1fr) 4.6cqw;margin:1.6cqw 0 1.8cqw;font:400 1.75cqw/1.2 var(--f-t);color:var(--ink);box-shadow:inset 0 1px 0 var(--hair-3l)} #inv-relatorio .ir-pdf__tab span{padding:.7cqw .6cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 -1px 0 var(--hair-2l)} #inv-relatorio .ir-pdf__tab span:nth-child(-n+3){font:600 1.5cqw/1.2 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} /* planilha */ #inv-relatorio .ir-pl{overflow:hidden;border-radius:.5cqw;background:var(--white);color:var(--ink);font:400 1.9cqw/1.2 var(--f-t);box-shadow:var(--sh-ui-escuro)} #inv-relatorio .ir-pl__fx{display:flex;align-items:center;gap:1.6cqw;padding:.9cqw 1.2cqw;box-shadow:inset 0 -1px 0 var(--hair-2l)} #inv-relatorio .ir-pl__ref{font-weight:600;color:var(--ink-2)} #inv-relatorio .ir-pl__f{font-style:italic;color:var(--ink-2)} #inv-relatorio .ir-pl__g{display:grid;grid-template-columns:4cqw 5.6cqw minmax(0,1fr) 9cqw} #inv-relatorio .ir-pl__g span{padding:.8cqw .9cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset -1px -1px 0 var(--hair-2l)} #inv-relatorio .ir-pl__g .h,#inv-relatorio .ir-pl__g .n{background:var(--ui-sub);color:var(--ink-2);text-align:center;font-weight:600} #inv-relatorio .ir-pl__g .th{font-weight:700} #inv-relatorio .ir-pl__g .sel{box-shadow:inset 0 0 0 2px var(--green-ink)} #inv-relatorio .ir-pl__abas{display:flex;background:var(--ui-sub);font-size:1.7cqw} #inv-relatorio .ir-pl__abas span{padding:.9cqw 1.6cqw;color:var(--ink-2)} #inv-relatorio .ir-pl__abas .is-on{background:var(--white);color:var(--green-ink);font-weight:600} /* conversa do grupo */ #inv-relatorio .ir-chat{padding:1.8cqw;border-radius:1.2cqw;background:var(--surface-plate);box-shadow:var(--sh-ui-escuro)} #inv-relatorio .ir-bolha{position:relative;display:grid;gap:.8cqw;border-radius:1.2cqw;color:var(--ink)} #inv-relatorio .ir-bolha--in{padding:1cqw;background:var(--white)} #inv-relatorio .ir-bolha--in img{display:block;width:100%;height:auto;border-radius:.8cqw} #inv-relatorio .ir-bolha__nome{font:600 1.9cqw/1 var(--f-d);color:var(--green-ink);padding:.4cqw .4cqw 0} #inv-relatorio .ir-bolha__hora{justify-self:end;display:inline-flex;align-items:center;gap:.6cqw;font:500 1.6cqw/1 var(--f-d);color:var(--ink-2)} #inv-relatorio .ir-bolha--out{width:max-content;max-width:100%;margin-left:auto;padding:1.4cqw 1.8cqw;background:color-mix(in srgb,var(--green) 26%,var(--white))} #inv-relatorio .ir-bolha__txt{font:500 3cqw/1.2 var(--f-d)} #inv-relatorio .ir-bolha__ck{width:2cqw;height:auto;color:var(--ink-2)} #inv-relatorio .ir-chat__sem{display:block;margin-top:1.2cqw;text-align:right;font:600 1.7cqw/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink)} /* o celular do investidor (aparece no lugar dos fragmentos) */ #inv-relatorio .ir__fone{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqh; opacity:0;visibility:hidden;transform:translateY(4cqh);transition:opacity .5s var(--ease),transform .8s var(--ease),visibility 0s linear .8s} #inv-relatorio [data-estado="painel"] .ir__fone{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .15s,transform .8s var(--ease) .15s,visibility 0s} #inv-relatorio .ifone{--fone-h:min(86cqh,150cqw)} #inv-relatorio .ir__nota{margin:0} /* ---------- tablet e celular: texto, palco (altura que sobra), botão ---------- */ @media (max-width:1099.98px){ #inv-relatorio .ir{height:var(--secao-util);grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "palco" "acao";grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch} #inv-relatorio .ir__cab{align-self:start} #inv-relatorio .ir__palco{height:auto;min-height:0;margin-top:clamp(16px,3svh,28px)} #inv-relatorio .ir__acao{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:clamp(12px,2svh,20px)} #inv-relatorio .ifone{--fone-h:min(84cqh,170cqw)} #inv-relatorio .ir-frag--pdf{width:40cqw;top:9%} #inv-relatorio .ir-frag--planilha{width:48cqw} } @media (max-width:760px){ #inv-relatorio .ir__fig{display:none} #inv-relatorio .ir__btn{--h:48px;font-size:1rem} #inv-relatorio .ir-frag--pdf{left:1%;top:12%;width:46cqw} #inv-relatorio .ir-frag--planilha{right:0;top:16%;width:52cqw} #inv-relatorio .ir-frag--foto{left:4%;bottom:4%;width:36cqw} #inv-relatorio .ir-frag--msg{right:2%;bottom:12%;width:46cqw} #inv-relatorio .ir-tag{padding:.4em .6em;letter-spacing:.08em} } @media (prefers-reduced-motion:reduce){ #inv-relatorio .ir-frag,#inv-relatorio .ir__fone{transition:none} } /* ---- sections/inv-financeiro.css ---- */ /* ===================================================================== LP Painel do Investidor (A e B) · Pav. 03 · #inv-financeiro PENDENTE DE CONFIRMAÇÃO (parte financeira, reunião de 20/10): seção isolada, sai inteira tirando o id do page.json. Prancha clara no padrão do #medicoes: texto + alternador Investidor | Dono, painel branco com a tabela. Valores fictícios de demonstração. ===================================================================== */ #inv-financeiro{overflow-x:clip} #inv-financeiro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--noise);background-size:180px;opacity:.05;mix-blend-mode:multiply} #inv-financeiro .fin{display:grid;grid-template-columns:minmax(320px,.5fr) minmax(0,1fr);grid-template-areas:"txt fig" "cta fig";grid-template-rows:auto 1fr; column-gap:clamp(36px,4.2vw,72px);align-items:start} #inv-financeiro .fin__txt{grid-area:txt;min-width:0;container-type:inline-size} #inv-financeiro .fin__txt .h2{font-size:min(var(--h2),11.4cqi)} #inv-financeiro .fin__fig{grid-area:fig;min-width:0;margin:0} #inv-financeiro .fin__cta{grid-area:cta;align-self:end;margin-top:clamp(18px,3svh,28px)} #inv-financeiro .eyebrow{margin-bottom:clamp(14px,2.2svh,20px)} #inv-financeiro .fin__lead{margin-top:clamp(14px,2.2svh,20px);max-width:34ch} /* ---------- alternador Investidor | Dono (padrão do #estrutura, no papel) ---------- */ #inv-financeiro .fin__troca{margin-top:clamp(18px,3.4svh,34px);max-width:400px} #inv-financeiro .fin__rot{margin:0 0 10px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)} #inv-financeiro .fin__alt{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border-radius:12px; background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 0 0 1px var(--hair-3l)} #inv-financeiro .fin__alt-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 2);border-radius:9px;background:var(--ink); box-shadow:0 0 0 1px color-mix(in srgb,var(--g0) 25%,transparent),0 6px 16px -8px color-mix(in srgb,var(--g0) 60%,transparent);transition:transform .55s var(--ease)} #inv-financeiro .fin__alt[data-sel="1"] .fin__alt-thumb{transform:translateX(100%)} #inv-financeiro .fin__op{position:relative;z-index:1;display:grid;gap:3px;align-content:center;min-height:58px;padding:6px 16px;border:0;border-radius:9px;background:none; color:var(--ink);text-align:left;cursor:pointer;transition:color .35s var(--ease)} #inv-financeiro .fin__op-n{font:600 1.0625rem/1.1 var(--f-d);letter-spacing:-.005em} #inv-financeiro .fin__op-d{font:600 .6875rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:color .35s var(--ease)} #inv-financeiro .fin__op[aria-checked="true"]{color:var(--white);cursor:default} #inv-financeiro .fin__op[aria-checked="true"] .fin__op-d{color:var(--green-soft)} #inv-financeiro .fin__op:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px} /* ---------- painel ---------- */ #inv-financeiro .fin__panel{--cantos-off:10px;overflow:visible;background:var(--white)} #inv-financeiro .fin__panel > .ui-head{border-radius:12px 12px 0 0} #inv-financeiro .fin__panel > .ui-foot{border-radius:0 0 12px 12px} #inv-financeiro .ui-sym{color:var(--green)} #inv-financeiro .fin__perfil{transition:background-color .35s var(--ease),color .35s var(--ease)} #inv-financeiro [data-visao="dono"] .fin__perfil{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-ink)} #inv-financeiro .fin__corpos{display:grid} #inv-financeiro .fin__corpo{grid-area:1 / 1;min-width:0} #inv-financeiro .fin__corpos > [hidden]{display:block!important;visibility:hidden} #inv-financeiro .fin__corpo:not([hidden]){animation:inv-fin-troca .45s var(--ease) both} @keyframes inv-fin-troca{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} #inv-financeiro .fin__kpis .ui-kpi__v{font-size:1.5rem} #inv-financeiro .fin__kpi-n{font:500 .75rem/1 var(--f-d);color:var(--ink-2)} #inv-financeiro .fin__resumo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-height:56px;padding:10px 14px;background:var(--white);box-shadow:0 1px 0 var(--hair-2l)} #inv-financeiro .fin__resumo .ui-sec__t{margin-right:4px} #inv-financeiro .fin__total{display:inline-flex;align-items:baseline;gap:8px} #inv-financeiro .fin__total .ui-v{font-size:1rem} /* tabela (padrão da tabela de medição) */ #inv-financeiro .fin__tab{background:var(--white)} #inv-financeiro .fin-t{width:100%;border-collapse:collapse;border-spacing:0;font:400 .875rem/1.25 var(--f-t);color:var(--ink)} #inv-financeiro .fin-t th,#inv-financeiro .fin-t td{height:40px;padding:0 14px;text-align:left;vertical-align:middle;white-space:nowrap;box-shadow:inset 0 -1px 0 var(--hair-1l)} #inv-financeiro .fin-t thead th{height:34px;background:var(--ui-bg);font:600 .6875rem/1.15 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);box-shadow:inset 0 -1px 0 var(--hair-2l)} #inv-financeiro .fin-t tbody th{font:600 .875rem/1.2 var(--f-d);color:var(--ink)} #inv-financeiro .fin-t td.num,#inv-financeiro .fin-t .c-n{font-family:var(--f-d);font-weight:500;font-variant-numeric:tabular-nums lining-nums} #inv-financeiro .fin-t .c-n{text-align:right} #inv-financeiro .fin-t .c-st{width:1%;text-align:right} #inv-financeiro .fin-t tbody tr:last-child > *{box-shadow:none} #inv-financeiro .fin-t tr.is-atr th,#inv-financeiro .fin-t tr.is-atr td:not(.c-st){color:var(--red-ink)} #inv-financeiro .fin-t tr.is-atr > *{background:color-mix(in srgb,var(--red) 5%,transparent)} #inv-financeiro .fin__cap{margin-top:clamp(12px,2svh,18px)} /* ---------- alturas menores ---------- */ @media (min-width:1100px) and (max-height:800px){ #inv-financeiro .fin-t th,#inv-financeiro .fin-t td{height:36px} #inv-financeiro .fin__op{min-height:52px} } /* ---------- tablet e celular: texto, painel, botão ---------- */ @media (max-width:1099.98px){ #inv-financeiro .fin{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "fig" "cta";grid-template-rows:auto auto auto} #inv-financeiro .fin__lead{max-width:52ch} #inv-financeiro .fin__fig{margin-top:clamp(16px,2.6svh,24px)} #inv-financeiro .fin__cta{padding-bottom:0;margin-top:clamp(14px,2.4svh,22px)} #inv-financeiro .fin__troca{display:flex;align-items:center;gap:14px;max-width:none} #inv-financeiro .fin__rot{margin:0;flex:none} #inv-financeiro .fin__alt{flex:1 1 auto;max-width:360px} #inv-financeiro .fin__op{min-height:42px} #inv-financeiro .fin__op-d{display:none} } @media (max-width:760px){ #inv-financeiro .fin__corpos > [hidden]{display:none!important} #inv-financeiro .fin__lead{font-size:.9375rem;line-height:1.45} #inv-financeiro .fin__troca{margin-top:clamp(12px,2svh,18px)} #inv-financeiro .fin__rot{display:none} #inv-financeiro .fin__alt{max-width:none} #inv-financeiro .fin__op{min-height:38px;padding:4px 14px;text-align:center} #inv-financeiro .fin__op-n{font-size:.9375rem} #inv-financeiro .fin__fig{margin-top:clamp(12px,2svh,18px)} #inv-financeiro .fin__panel .ui-head{padding:8px 12px;gap:10px} #inv-financeiro .fin__panel .ui-ctx small{display:none} #inv-financeiro .fin__perfil{display:none} #inv-financeiro .fin__kpis .ui-kpi{padding:8px 10px 9px;gap:4px} #inv-financeiro .fin__kpis .ui-kpi__v{font-size:1.0625rem} #inv-financeiro .fin__kpis .ui-k{font-size:.5625rem;letter-spacing:.06em} #inv-financeiro .fin__kpi-n{display:none} #inv-financeiro .fin-r--xl{display:none} #inv-financeiro .fin-t{font-size:.75rem} #inv-financeiro .fin-t th,#inv-financeiro .fin-t td{height:28px;padding:0 8px} #inv-financeiro .fin-t thead th{height:26px;font-size:.5625rem;letter-spacing:.06em} #inv-financeiro .fin-t tbody th{font-size:.75rem} #inv-financeiro .fin-t .chip{height:20px;padding:0 6px;font-size:.625rem} #inv-financeiro .fin__resumo{min-height:0;padding:7px 10px;gap:6px} #inv-financeiro .fin__resumo .ui-sec__t{font-size:.75rem} #inv-financeiro .fin__total{display:none} #inv-financeiro .fin__resumo .chip{height:20px;font-size:.625rem} #inv-financeiro .fin__panel .ui-foot{padding:7px 12px} #inv-financeiro .fin__panel .ui-foot .nota-sim{font-size:.5625rem;letter-spacing:.06em} #inv-financeiro .fin__cap{display:none} #inv-financeiro .fin__cta .btn{--h:48px} } @media (max-width:760px) and (max-height:760px){ #inv-financeiro .fin__kpis .ui-kpi{padding:6px 10px 7px} #inv-financeiro .fin__kpis .ui-bar{display:none} #inv-financeiro .fin__panel .ui-head{padding:6px 12px} } @media (max-width:380px){ #inv-financeiro .fin-t--dono thead th:nth-child(2),#inv-financeiro .fin-t--dono tbody td:nth-child(2){display:none} } @media (prefers-reduced-motion:reduce){ #inv-financeiro .fin__corpo:not([hidden]){animation:none} } /* ---- sections/inv-norte.css ---- */ /* ===================================================================== PAV. 05 · #inv-norte (dono: agente da seção) Linha do tempo da obra: scrubber de meses no eixo da Curva S controla KPIs, alerta de prazo e Curva S. Rosca de status no marco 15/09/26. Geometria do gráfico em % (x: 4 a 96; y: 6 = topo da escala, 100 = zero), igual ao analise.js e ao HTML gerado do obra-demo.json. ===================================================================== */ #inv-norte{ --an-plan:color-mix(in srgb,var(--status-neutral) 88%,var(--white)); /* planejado: cinza, 3,4:1 no branco */ --an-real:var(--green-ink); /* realizado: verde da marca escurecido para 3,5:1 no branco */ --an-real-pt:var(--green); --an-prazo:var(--status-neutral); /* "Hoje"/prazo no app */ --an-nao:var(--status-neutral); /* não iniciadas no app */ --an-yw:56px; /* coluna dos rótulos do eixo Y */ --an-eixo-h:38px; /* faixa do eixo X (trilho + meses) */ --an-graf-min:150px; } /* ---------- composição: título + figura que ocupa o resto da janela ---------- */ #inv-norte .an{display:flex;flex-direction:column;gap:clamp(14px,2.6svh,28px);min-height:min(var(--secao-util),940px)} #inv-norte .an-topo .eyebrow{margin-bottom:clamp(10px,1.8svh,18px)} #inv-norte .an-fig{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;max-height:700px} #inv-norte .an-fig > .ui-frame{flex:1 1 auto;display:flex;min-height:0} #inv-norte .an-fig > .fig{margin-top:clamp(10px,1.6svh,16px)} #inv-norte .an-painel{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0} /* ---------- cabeçalho do painel ---------- */ #inv-norte .an-head{flex:none} #inv-norte .an-ref{text-align:right} #inv-norte .an-ref b{display:flex;align-items:baseline;justify-content:flex-end;gap:6px} #inv-norte .an-ref__k{font:500 .75rem/1.2 var(--f-d);color:var(--ink-2)} /* ---------- corpo: KPIs | Curva S | Status ---------- */ #inv-norte .an-corpo{flex:1 1 auto;min-height:0;display:grid;gap:8px;padding:8px; grid-template-columns:minmax(196px,232px) minmax(0,1fr) minmax(212px,264px);grid-template-rows:repeat(3,minmax(0,1fr))} #inv-norte .an-k,#inv-norte .an-curva,#inv-norte .an-ativ{position:relative;min-width:0;background:var(--white);border-radius:8px;box-shadow:0 0 0 1px var(--hair-1l),0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent)} #inv-norte .an-k--status{grid-column:1;grid-row:1} #inv-norte .an-k--avanco{grid-column:1;grid-row:2} #inv-norte .an-k--prazo{grid-column:1;grid-row:3} #inv-norte .an-curva{grid-column:2;grid-row:1 / span 3} #inv-norte .an-ativ{grid-column:3;grid-row:1 / span 3} /* KPI */ #inv-norte .an-k{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:12px 14px;overflow:hidden} #inv-norte .an-k > .ui-bar{align-self:stretch} #inv-norte .an-k__v{font-size:1.75rem} #inv-norte .an-aprox{margin-right:4px;font:500 1.125rem/1 var(--f-d);color:var(--ink-2);align-self:center} #inv-norte .an-k__sub{font:400 .75rem/1.35 var(--f-t);color:var(--ink-2)} #inv-norte .an-k__sub b{font:600 .8125rem/1 var(--f-d);color:var(--ink)} #inv-norte .an-bar--prazo > i{background:var(--an-prazo)} /* alerta "Tendência de atraso" (regra da tela: Prazo > Avanço físico) */ #inv-norte .an-k--status{transition:background-color .5s var(--ease)} #inv-norte .an-k--status.is-aceso{background:color-mix(in srgb,var(--red) 7%,var(--white));box-shadow:inset 3px 0 0 var(--red),0 0 0 1px color-mix(in srgb,var(--red) 18%,transparent)} #inv-norte .an-k--status::after{content:"";position:absolute;inset:0;pointer-events:none;background:color-mix(in srgb,var(--red) 16%,transparent);opacity:0} #inv-norte .an-k--status.is-pulso::after{animation:an-pulso 1.1s var(--ease) both} @keyframes an-pulso{0%{opacity:0}18%{opacity:1}100%{opacity:0}} #inv-norte .an-alerta{height:24px;gap:6px;padding:0 9px 0 7px;font-size:.75rem} #inv-norte .an-tri{width:13px;height:13px;flex:none} #inv-norte .an-k--status.is-aceso .an-k__regra b{color:var(--red-ink)} /* ---------- Curva S ---------- */ #inv-norte .an-curva{display:flex;flex-direction:column;min-height:0;padding:12px 14px 4px} #inv-norte .an-curva__h{display:flex;align-items:center;gap:10px;min-height:28px;flex:none} #inv-norte .an-mes{height:22px;padding:0 8px;font-size:.75rem;color:var(--ink)} #inv-norte .an-dica{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font:600 .625rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #inv-norte .an-dica svg{width:14px;height:14px;flex:none} #inv-norte .an-modo > button{min-width:34px;min-height:28px} /* leitura do mês: cartões com filete de cor, como os totais do app */ #inv-norte .an-read{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0} #inv-norte .an-read__c{min-width:0;padding:6px 10px 7px 12px;border-radius:6px;background:var(--ui-bg);box-shadow:inset 3px 0 0 var(--c,var(--an-plan))} #inv-norte .an-read__c--plan{--c:var(--an-plan)} #inv-norte .an-read__c--real{--c:var(--an-real)} #inv-norte .an-read__c--dif{--c:var(--red)} #inv-norte .an-read__c--dif[data-tipo="rdo"]{--c:var(--an-prazo)} #inv-norte .an-read dt{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap} #inv-norte .an-read dd{margin:3px 0 0;min-height:1.2em;font:600 .9375rem/1.2 var(--f-d);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #inv-norte .an-read__c--dif:not([data-tipo="rdo"]) dd{color:var(--red-ink)} #inv-norte .an-read__sem{font:500 .8125rem/1.2 var(--f-d);color:var(--ink-2)} /* gráfico */ #inv-norte .an-graf{position:relative;flex:1 1 auto;min-height:var(--an-graf-min);margin-top:14px;padding-left:var(--an-yw)} #inv-norte .an-y{position:absolute;left:0;top:0;bottom:var(--an-eixo-h);width:var(--an-yw)} #inv-norte .an-y > span{position:absolute;right:10px;transform:translateY(-50%);font:500 .6875rem/1 var(--f-d);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums} #inv-norte .an-area{position:relative;height:100%;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} #inv-norte .an-area.is-arrasto{cursor:grabbing} #inv-norte .an-plot{position:absolute;left:0;right:0;top:0;bottom:var(--an-eixo-h);will-change:transform;contain:layout style} #inv-norte .an-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #inv-norte .an-grade line{stroke:color-mix(in srgb,var(--ink) 9%,transparent);stroke-width:1;vector-effect:non-scaling-stroke} #inv-norte .an-l{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} #inv-norte .an-l--plan{stroke:var(--an-plan);stroke-width:2} #inv-norte .an-l--real{stroke:var(--an-real);stroke-width:2.75} #inv-norte .an-gap{fill:color-mix(in srgb,var(--red) 7.5%,transparent);stroke:none} #inv-norte .an-dif{stroke:var(--red);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .3s var(--ease)} #inv-norte .an-dif.is-on{opacity:1} #inv-norte .an-cur{position:absolute;inset:0;pointer-events:none;will-change:transform} #inv-norte .an-cur > i{position:absolute;left:0;top:-4px;bottom:0;width:1px;margin-left:-.5px;background:color-mix(in srgb,var(--ink) 42%,transparent)} #inv-norte .an-pts{position:absolute;inset:0;pointer-events:none} #inv-norte .an-pt{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:4.5px;background:var(--white);box-shadow:inset 0 0 0 2px var(--an-plan); transition:transform .35s var(--ease),opacity .25s var(--ease)} #inv-norte .an-pt--real{background:var(--an-real-pt);box-shadow:0 0 0 1.5px var(--white),0 0 0 2.5px var(--an-real)} #inv-norte .an-pt.is-sel{transform:scale(1.45)} #inv-norte .an-pt--plan.is-sel{background:var(--an-plan);box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--an-plan)} #inv-norte .an-pt.is-off{opacity:0;transform:scale(.4)} /* eixo X = trilho do scrubber */ #inv-norte .an-eixo{position:absolute;left:0;right:0;bottom:0;height:var(--an-eixo-h);touch-action:none} #inv-norte .an-rail{position:absolute;left:0;right:0;top:0;height:4px;margin-top:-2px;border-radius:2px;background:var(--ui-sub)} #inv-norte .an-rail > i{position:absolute;top:0;bottom:0;left:4%;width:92%;border-radius:inherit;background:var(--an-prazo);transform-origin:left center;will-change:transform} #inv-norte .an-meses{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:14px;height:14px} #inv-norte .an-meses > li{position:absolute;top:0;transform:translateX(-50%);font:600 .6875rem/1 var(--f-l);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;transition:color .2s var(--ease)} #inv-norte .an-meses > li::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:6px;margin-left:-.5px;background:color-mix(in srgb,var(--ink) 28%,transparent)} #inv-norte .an-meses > li.is-sel{color:var(--ink)} #inv-norte .an-meses > li.is-sel::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-5px;height:2px;border-radius:1px;background:var(--green)} #inv-norte .an-thumb-l{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;will-change:transform} /* com JS: camadas de largura zero movidas em px (sem a camada larga passando da borda) */ #inv-norte.an-on .an-cur,#inv-norte.an-on .an-thumb-l{right:auto;width:0} #inv-norte .an-thumb{position:absolute;left:0;top:0;width:28px;height:18px;margin:-9px 0 0 -14px;border-radius:9px;background:var(--green);pointer-events:auto;cursor:grab;touch-action:none; box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 40%,transparent),0 0 0 2px var(--white),0 0 0 3px color-mix(in srgb,var(--green-ink) 55%,transparent),0 3px 8px -2px color-mix(in srgb,var(--ink) 45%,transparent);transition:transform .2s var(--ease)} #inv-norte .an-thumb::before{content:"";position:absolute;inset:-13px -8px} #inv-norte .an-thumb > i,#inv-norte .an-thumb > i::before{position:absolute;top:5px;bottom:5px;width:1.5px;border-radius:1px;background:color-mix(in srgb,var(--g1) 55%,transparent)} #inv-norte .an-thumb > i{left:calc(50% - 3px)} #inv-norte .an-thumb > i::before{content:"";top:0;bottom:0;left:4.5px} #inv-norte .an-thumb:hover{transform:scale(1.06)} #inv-norte .an-area.is-arrasto .an-thumb{cursor:grabbing;transform:scale(1.1)} #inv-norte .an-thumb:focus-visible{outline:2px solid var(--green-ink);outline-offset:4px;border-radius:10px} /* ---------- Status das atividades (rosca no marco 15/09/26) ---------- */ #inv-norte .an-ativ{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,1.8svh,16px);padding:12px 14px 14px} #inv-norte .an-ativ__h{align-self:stretch;display:flex;align-items:center;gap:8px;min-height:28px} #inv-norte .an-ativ__tc{display:none} #inv-norte .an-ativ__d{margin-left:auto;font:500 .75rem/1 var(--f-d);color:var(--ink-2)} #inv-norte .an-ativ:not(.an-ativ--compacta) .an-ativ__h{position:absolute;left:14px;right:14px;top:12px} #inv-norte .an-rosca{position:relative;width:clamp(104px,17svh,156px);aspect-ratio:1;flex:none;margin-top:28px} #inv-norte .an-rosca svg{width:100%;height:100%;transition:transform 1.1s var(--ease),opacity .7s var(--ease)} #inv-norte .an-rosca__trilho{fill:none;stroke:var(--ui-sub);stroke-width:14} #inv-norte .an-rosca__s{fill:none;stroke-width:14} #inv-norte .an-rosca__s--atraso{stroke:var(--red)} #inv-norte .an-rosca__s--nao{stroke:var(--an-nao)} #inv-norte .an-rosca__s--ok{stroke:var(--an-real)} #inv-norte .an-rosca__c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:3px} #inv-norte .an-rosca__c b{font:600 1.875rem/1 var(--f-d);letter-spacing:-.02em;color:var(--ink)} #inv-norte .an-rosca__c small{font:600 .625rem/1 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} #inv-norte .an-ativ__alerta{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 10px;border-radius:6px;background:color-mix(in srgb,var(--red) 9%,transparent);box-shadow:inset 3px 0 0 var(--red); font:500 .8125rem/1.2 var(--f-d);color:var(--ink);white-space:nowrap} #inv-norte .an-ativ__alerta .an-tri{color:var(--red-ink)} #inv-norte .an-ativ__alerta b{color:var(--red-ink)} #inv-norte .an-leg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:7px 14px} #inv-norte .an-leg > li{display:flex;align-items:center;gap:6px;font:500 .75rem/1.2 var(--f-d);color:var(--ink-2);white-space:nowrap} #inv-norte .an-leg__n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ui-sub);font:600 .6875rem/1 var(--f-d);color:var(--ink)} #inv-norte .an-leg__n--atraso{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red-ink)} #inv-norte .an-leg__n--nao{background:color-mix(in srgb,var(--status-neutral) 18%,transparent)} #inv-norte .an-leg__n--ok{background:color-mix(in srgb,var(--green) 20%,transparent);color:var(--green-ink)} /* rodapé do painel */ #inv-norte .an-foot{flex:none;justify-content:space-between} #inv-norte .an-foot__k{font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #inv-norte .an-fig__obra{display:none} /* ---------- entrada (só com movimento): rosca gira e assenta ---------- */ #inv-norte[data-an-pre] .an-rosca svg{opacity:0;transform:rotate(-70deg) scale(.9)} /* ---------- altura curta (desktop baixo) ---------- */ @media (max-height:800px){ #inv-norte{--an-graf-min:130px;--an-eixo-h:34px} #inv-norte .an-k{gap:5px;padding:10px 12px} #inv-norte .an-k__v{font-size:1.5rem} #inv-norte .an-head{padding-block:9px} #inv-norte .an-read{margin-top:8px} #inv-norte .an-read__c{padding-block:5px 6px} #inv-norte .an-graf{margin-top:10px} #inv-norte .an-foot{padding-block:8px} } /* ---------- tablet e celular: alerta em faixa, KPIs em linha, Curva S inteira ---------- */ #inv-norte .an-rosca__m{display:none} @media (max-width:1023.98px){ #inv-norte .an-corpo{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr)} #inv-norte .an-k--status{grid-column:1 / -1;grid-row:1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px} #inv-norte .an-k--status > .ui-k{display:none} #inv-norte .an-k--avanco{grid-column:1;grid-row:2} #inv-norte .an-k--prazo{grid-column:2;grid-row:2} #inv-norte .an-ativ{grid-column:3;grid-row:2} #inv-norte .an-curva{grid-column:1 / -1;grid-row:3} #inv-norte .an-k{justify-content:flex-start} /* rosca compacta, como mais um KPI: ATRASADAS / (8) de 12 / 15/09 */ #inv-norte .an-ativ{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"lb lb" "rs tx" "rs dt"; align-content:start;align-items:center;justify-items:start;gap:3px 8px;padding:12px 14px} #inv-norte .an-ativ .an-ativ__h{display:contents} #inv-norte .an-ativ__t,#inv-norte .an-leg,#inv-norte .an-ativ__alerta .an-tri,#inv-norte .an-ativ__lg,#inv-norte .an-ativ__alerta b,#inv-norte .an-rosca__c{display:none} #inv-norte .an-ativ__tc{display:inline;grid-area:lb;margin-bottom:4px} #inv-norte .an-rosca{grid-area:rs;width:40px;margin:0} #inv-norte .an-rosca svg{overflow:visible} #inv-norte .an-rosca__m{position:absolute;inset:0;display:grid;place-items:center;font:600 1rem/1 var(--f-d);color:var(--red-ink)} #inv-norte .an-ativ__alerta{grid-area:tx;align-self:end;padding:0;background:none;box-shadow:none;font:600 .875rem/1.1 var(--f-d);color:var(--ink)} #inv-norte .an-ativ__d{grid-area:dt;align-self:start;margin:0;font:500 .6875rem/1.1 var(--f-d)} } @media (max-width:760px){ #inv-norte{--an-yw:44px;--an-graf-min:116px;--an-eixo-h:32px} #inv-norte .an-head{display:none} #inv-norte .an-lg,#inv-norte .an-ativ__a{display:none} #inv-norte .an-corpo{gap:6px;padding:6px} #inv-norte .an-k{padding:8px 10px;gap:5px} #inv-norte .an-k .ui-k{letter-spacing:.07em} #inv-norte .an-k__v{font-size:1.375rem} #inv-norte .an-aprox{font-size:.9375rem;margin-right:3px} #inv-norte .an-k--avanco .an-k__sub,#inv-norte .an-k--prazo .an-k__sub{display:none} #inv-norte .an-k--status{padding:6px 10px;gap:3px 10px;flex-wrap:nowrap} #inv-norte .an-k--status .an-alerta{flex:none} #inv-norte .an-k__regra{min-width:0;font-size:.71875rem;line-height:1.25} #inv-norte .an-ativ{padding:8px 10px;column-gap:7px} #inv-norte .an-rosca{width:34px} #inv-norte .an-rosca__m{font-size:.875rem} #inv-norte .an-ativ__alerta{font-size:.8125rem} #inv-norte .an-curva{padding:8px 10px 0} #inv-norte .an-curva__h{gap:8px} #inv-norte .an-modo > button{min-height:28px;min-width:36px} #inv-norte .an-read{gap:5px;margin-top:6px} #inv-norte .an-read__c{padding:4px 5px 5px 9px} #inv-norte .an-read dt{font-size:.5625rem;letter-spacing:.07em} #inv-norte .an-read dd{margin-top:2px;font-size:.75rem;letter-spacing:-.005em} #inv-norte .an-read__sem{font-size:.75rem} #inv-norte .an-graf{margin-top:9px} #inv-norte .an-y > span{right:6px;font-size:.625rem} #inv-norte .an-meses__a{display:none} #inv-norte .an-meses > li{top:12px;font-size:.65625rem;letter-spacing:.02em} #inv-norte .an-foot{padding:6px 10px} #inv-norte .an-foot__k{display:none} } @media (max-width:420px){ #inv-norte .an-dica{display:none} #inv-norte .an-k .ui-k{font-size:.59375rem;letter-spacing:.06em} /* regra literal do app ("Prazo > Avanço físico"); os números estão nos KPIs logo abaixo */ #inv-norte .an-k__regra b{display:none} } @media (max-width:760px) and (max-height:800px){ #inv-norte .an{gap:8px} #inv-norte .an-fig > .fig{margin-top:8px} /* legenda: a frase extra fica só para o leitor de tela no celular baixo */ #inv-norte .an-fig__x{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap} #inv-norte .an-k{gap:4px;padding-block:7px} #inv-norte .an-k__v{font-size:1.25rem} #inv-norte .an-rosca{width:32px} #inv-norte .an-read{margin-top:5px} #inv-norte .an-graf{margin-top:8px} } @media (max-width:340px){ /* 320: meses alternados; o escolhido sempre aparece */ #inv-norte .an-meses > li.is-par:not(.is-sel){color:transparent} #inv-norte .an-meses > li{font-size:.625rem} } /* ---------- LP: cabeçalho em duas colunas (título | texto e botão) ---------- */ #inv-norte .ui-sym{color:var(--green)} #inv-norte .an-topo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,5vw,96px);align-items:end} #inv-norte .an-topo .h2{max-width:20ch} #inv-norte .an-lead{margin:0;max-width:42ch} #inv-norte .an-cta{margin-top:clamp(12px,2svh,20px)} @media (max-width:1023.98px){ #inv-norte .an-topo{grid-template-columns:minmax(0,1fr);row-gap:clamp(10px,1.8svh,16px)} #inv-norte .an-topo .h2{max-width:none} } @media (max-width:760px){ #inv-norte .an-lead{font-size:.9375rem;line-height:1.45} #inv-norte .an-cta .btn{--h:44px;font-size:.9375rem} } /* LP no celular: o texto e o botão ocupam mais altura que no institucional; a faixa do alerta já traz prazo e avanço, então a fileira de KPIs sai e a Curva S fica inteira */ @media (max-width:1023.98px){ #inv-norte .an-k--avanco,#inv-norte .an-k--prazo,#inv-norte .an-ativ{display:none} #inv-norte .an-corpo{grid-template-rows:auto minmax(0,1fr)} #inv-norte .an-curva{grid-row:2} #inv-norte .an-k__regra b{display:inline} #inv-norte .an-fig > .fig{display:none} } /* ---- sections/inv-origem.css ---- */ /* ===================================================================== LP Painel do Investidor (A e B) · Pav. 05 · #inv-origem (Quem fez) Pausa de imagem: foto de obra inteira com véu à esquerda, texto de autoridade embaixo e selo de prancha (padrão do #estrutura). ===================================================================== */ #inv-origem{--bg:var(--g0);justify-content:flex-end;overflow:clip} #inv-origem .inv-origem__foto{position:absolute;inset:0;z-index:0;--foto-pos:62% 40%;--grao:.07; --veu: linear-gradient(180deg,color-mix(in srgb,var(--g0) 60%,transparent) 0,color-mix(in srgb,var(--g0) 0%,transparent) 180px), linear-gradient(0deg,color-mix(in srgb,var(--g0) 82%,transparent) 0,color-mix(in srgb,var(--g0) 30%,transparent) 46%,color-mix(in srgb,var(--g0) 0%,transparent) 70%), linear-gradient(90deg,color-mix(in srgb,var(--g0) 86%,transparent) 0%,color-mix(in srgb,var(--g0) 74%,transparent) 42%,color-mix(in srgb,var(--g0) 20%,transparent) 66%,color-mix(in srgb,var(--g0) 10%,transparent) 100%)} #inv-origem .inv-origem__grade{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);column-gap:clamp(32px,6vw,120px);align-items:end} #inv-origem .inv-origem__txt{min-width:0;max-width:42rem} #inv-origem .eyebrow{margin-bottom:clamp(12px,2svh,20px)} #inv-origem .h2{color:var(--white)} #inv-origem .inv-origem__lead{margin:clamp(14px,2.4svh,22px) 0 0;max-width:40ch;color:var(--on-2)} #inv-origem .inv-origem__cta{margin-top:clamp(20px,3.6svh,36px)} /* selo de prancha */ #inv-origem .inv-origem__selo{border-radius:3px;background:var(--corte-bg);box-shadow:inset 0 0 0 1px var(--hair-3)} #inv-origem .io-selo__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0;padding:9px 14px 8px; font:600 .6875rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--on);box-shadow:inset 0 -1px 0 var(--hair-3)} #inv-origem .io-selo__d{color:var(--on-2);letter-spacing:.1em} #inv-origem .io-selo__dl{margin:0;display:grid} #inv-origem .io-selo__l{display:grid;gap:4px;padding:11px 14px 12px;box-shadow:inset 0 -1px 0 var(--hair-2)} #inv-origem .io-selo__l:last-child{box-shadow:none} #inv-origem .io-selo__l dt{font:600 .6875rem/1 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--green)} #inv-origem .io-selo__l dd{margin:0;font:500 1rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--white);text-wrap:balance} #inv-origem .inv-origem__fig{position:absolute;z-index:1;right:var(--gutter);top:calc(var(--hdr) + 18px);margin:0} #inv-origem .inv-origem__fig .fig__n{color:var(--white)} @media (max-width:900px){ #inv-origem .inv-origem__foto{--foto-pos:58% 30%; --veu: linear-gradient(180deg,color-mix(in srgb,var(--g0) 55%,transparent) 0,color-mix(in srgb,var(--g0) 10%,transparent) 26%,color-mix(in srgb,var(--g0) 72%,transparent) 48%,color-mix(in srgb,var(--g0) 90%,transparent) 100%)} #inv-origem .inv-origem__grade{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,3svh,26px)} #inv-origem .inv-origem__selo{max-width:420px} #inv-origem .inv-origem__fig{display:none} } @media (max-width:760px){ #inv-origem .inv-origem__lead{font-size:1rem} #inv-origem .io-selo__l{padding:8px 12px 9px;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:10px} #inv-origem .io-selo__l dd{font-size:.875rem} #inv-origem .io-selo__h{padding:7px 12px 6px} } /* ---- sections/inv-duvidas.css ---- */ /* ===================================================================== LP Painel do Investidor (A e B) · Pav. 06 · #inv-duvidas Acordeão escuro simples: details nativo, um aberto por vez (name). ===================================================================== */ #inv-duvidas .du{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(32px,6vw,120px);align-items:start} #inv-duvidas .du__cab{min-width:0} #inv-duvidas .du__cab .eyebrow{margin-bottom:clamp(12px,2svh,20px)} #inv-duvidas .du__cab .h2{max-width:14ch} #inv-duvidas .du__lista{min-width:0;box-shadow:inset 0 1px 0 var(--linha-forte)} #inv-duvidas .du-item{box-shadow:inset 0 -1px 0 var(--linha-forte)} #inv-duvidas .du-q{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:center;gap:0 12px;min-height:72px;padding:14px 0; list-style:none;cursor:pointer;color:var(--fg);transition:color .3s var(--ease)} #inv-duvidas .du-q::-webkit-details-marker{display:none} #inv-duvidas .du-q::before{content:"";position:absolute;left:-14px;top:18px;bottom:18px;width:2px;border-radius:1px;background:var(--green);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)} #inv-duvidas .du-item[open] .du-q::before{transform:none} #inv-duvidas .du-q:hover,#inv-duvidas .du-item[open] .du-q{color:var(--fg-forte)} #inv-duvidas .du-q:focus-visible{outline:2px solid var(--green);outline-offset:2px} #inv-duvidas .du-q__n{font:600 .75rem/1 var(--f-l);letter-spacing:.08em;color:var(--fg-3)} #inv-duvidas .du-item[open] .du-q__n{color:var(--green)} #inv-duvidas .du-q__t{font:500 clamp(1.125rem,1rem + .45vw,1.5rem)/1.25 var(--f-d);letter-spacing:-.01em;text-wrap:balance} #inv-duvidas .du-q__i{width:16px;height:16px;color:var(--fg-2);transition:transform .4s var(--ease),color .3s var(--ease)} #inv-duvidas .du-item[open] .du-q__i{transform:rotate(45deg);color:var(--green)} #inv-duvidas .du-r{padding:0 32px 20px 48px} #inv-duvidas .du-r p{margin:0;max-width:52ch;font:400 var(--lead)/1.5 var(--f-t);color:var(--fg-2)} #inv-duvidas .du-item[open] .du-r{animation:inv-du-abre .45s var(--ease) both} @keyframes inv-du-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (max-height:800px){ #inv-duvidas .du-q{min-height:62px;padding:10px 0} #inv-duvidas .du-r{padding-bottom:14px} } @media (max-width:900px){ #inv-duvidas .du{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3svh,30px)} #inv-duvidas .du__cab .h2{max-width:none} } @media (max-width:760px){ #inv-duvidas .du-q{grid-template-columns:26px minmax(0,1fr) 18px;gap:0 8px;min-height:54px;padding:8px 0} #inv-duvidas .du-q::before{left:-8px;top:12px;bottom:12px} #inv-duvidas .du-q__t{font-size:1.0625rem} #inv-duvidas .du-r{padding:0 8px 14px 34px} #inv-duvidas .du-r p{font-size:1rem} } @media (prefers-reduced-motion:reduce){ #inv-duvidas .du-item[open] .du-r{animation:none} } /* ---- sections/inv-contato.css ---- */ /* ===================================================================== LP Painel do Investidor (A e B) · Cobertura · #inv-contato Cópia de contato.css (prédio concluído + RDO da visita); cores em tokens. ===================================================================== */ #inv-contato{ --bg:var(--g1); --cob-cod:28px; /* coluna do código do pavimento (T, 01 ... COB) */ --cob-predio:clamp(150px,13.2vw,214px); --cob-fios:clamp(40px,3.6vw,60px); --cob-sb:clamp(46px,6.4svh,64px); overflow:clip; } /* ---------- foto de obra (conceito C, já graduada): só atmosfera, atrás da figura ---------- */ #inv-contato .contato-fundo{position:absolute;inset:0;z-index:-1; --foto-pos:60% 74%; --grao:.06; --veu: linear-gradient(180deg,var(--g1) 0%,color-mix(in srgb,var(--g1) 0%,transparent) 24%,color-mix(in srgb,var(--g1) 0%,transparent) 70%,var(--g1) 100%), linear-gradient(90deg,var(--g1) 0%,color-mix(in srgb,var(--g1) 94%,transparent) 34%,color-mix(in srgb,var(--g1) 78%,transparent) 58%,color-mix(in srgb,var(--g1) 70%,transparent) 100%); -webkit-mask-image:linear-gradient(90deg,transparent 30%,var(--g0) 64%); mask-image:linear-gradient(90deg,transparent 30%,var(--g0) 64%)} /* ---------- grade ---------- */ #inv-contato .contato-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,4.6vw,80px)} /* ---------- texto ---------- */ #inv-contato .contato-texto{min-width:0;max-width:40rem;container-type:inline-size} /* h2 na mesma escala dos outros pavimentos, travado pela largura da coluna para "Vamos construir juntos." caber em uma linha no desktop (no máximo 3 a 4 linhas com a continuação) */ @media (min-width:900px){ #inv-contato .contato-texto .h2{font-size:min(var(--h2),10.2cqi)} } #inv-contato .contato-texto .eyebrow{margin-bottom:clamp(14px,2.4svh,24px)} #inv-contato .contato-reforco{margin-top:clamp(16px,2.8svh,30px);max-width:34ch;font:400 var(--lead)/1.5 var(--f-t);color:var(--fg-2)} #inv-contato .contato-cta{margin-top:clamp(22px,4svh,44px)} /* ---------- figura: prédio + linhas de chamada + RDO ---------- */ #inv-contato .contato-fig{min-width:0} #inv-contato .contato-quadro{--cantos-off:14px;position:relative;display:grid;grid-template-columns:var(--cob-predio) minmax(0,1fr);column-gap:var(--cob-fios);align-items:stretch} #inv-contato .contato-fig > .fig{margin-top:clamp(14px,2.2svh,22px)} @media (min-width:900px){ #inv-contato .contato-quadro{min-height:clamp(340px,56svh,580px)} } /* prédio concluído: mesma gramática do corte (planejado tracejado, executado cheio, cobertura em verde) */ #inv-contato .contato-predio{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;min-height:0} #inv-contato .contato-predio__sb{display:grid;place-items:end center;flex:none;height:var(--cob-sb);padding:0 0 3px var(--cob-cod)} #inv-contato .contato-predio__sb svg{width:clamp(34px,40%,72px);height:auto;overflow:visible} #inv-contato .contato-predio__sb path{fill:var(--green)} #inv-contato .contato-pavs{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;min-height:0} #inv-contato .contato-pav{flex:1 1 0;min-height:20px;display:grid;grid-template-columns:var(--cob-cod) minmax(0,1fr);align-items:stretch} #inv-contato .contato-pav__cod{align-self:center;font:600 .6875rem/1 var(--f-l);letter-spacing:.08em;color:var(--on-2);transition:color .3s var(--ease)} #inv-contato .contato-pav__laje{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;min-width:0;padding:0 8px 0 10px;overflow:hidden; background-color:color-mix(in srgb,var(--on) 18%,var(--g1));border:1px solid color-mix(in srgb,var(--on) 40%,transparent);border-bottom:0;border-top:2px solid color-mix(in srgb,var(--on) 62%,transparent); transition:background-color .5s var(--ease),border-color .5s var(--ease)} #inv-contato .contato-pav.is-cob .contato-pav__laje{margin-inline:9%;background-color:var(--green);border-color:var(--green)} #inv-contato .contato-pav.is-cob .contato-pav__laje::before{content:"";position:absolute;z-index:-1;inset:0; background:linear-gradient(135deg,transparent 0 25%,color-mix(in srgb,var(--ink) 16%,transparent) 25% 37.5%,transparent 37.5% 75%,color-mix(in srgb,var(--ink) 16%,transparent) 75% 87.5%,transparent 87.5%) 0 0/6px 6px} #inv-contato .contato-pav__nome{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-top:1px;font:600 .625rem/1.4 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--on) 90%,transparent)} #inv-contato .contato-pav.is-cob .contato-pav__nome{color:var(--ink)} #inv-contato .contato-pav__n{margin-left:auto;flex:none;display:grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:4px; background:var(--green);color:var(--ink);font:600 .6875rem/1 var(--f-d)} #inv-contato .contato-pav__n:empty{display:none} #inv-contato .contato-pav.is-cob .contato-pav__n{background:var(--ink);color:var(--green-soft)} /* pavimento com registros desta visita */ #inv-contato .contato-pav.tem-reg .contato-pav__laje{background-color:color-mix(in srgb,var(--green) 16%,var(--g1));border-color:color-mix(in srgb,var(--green-soft) 55%,transparent);border-top-color:var(--green-soft)} #inv-contato .contato-pav.tem-reg .contato-pav__cod{color:var(--green-soft)} /* pavimento em foco (linha do RDO sob o ponteiro ou o foco) */ #inv-contato .contato-pav.is-foco .contato-pav__laje{background-color:color-mix(in srgb,var(--green) 26%,var(--g1));border-color:var(--green-soft)} #inv-contato .contato-pav.is-foco .contato-pav__cod{color:var(--white)} #inv-contato .contato-pav.is-cob.is-foco .contato-pav__laje{background-color:var(--green-hi)} #inv-contato .contato-predio__terreno{display:block;flex:none;height:8px;margin:0 -6px 0 calc(var(--cob-cod) - 6px);border-top:1px solid color-mix(in srgb,var(--on) 45%,transparent); background:color-mix(in srgb,var(--on) 14%,transparent)} /* linhas de chamada (desenhadas pelo JS): executado = cheia, sugestão = tracejada */ #inv-contato .contato-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} #inv-contato .contato-fios path{fill:none;stroke:color-mix(in srgb,var(--on) 46%,transparent);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .25s var(--ease)} #inv-contato .contato-fios .is-plan{stroke:color-mix(in srgb,var(--on) 50%,transparent);stroke-dasharray:3 4} #inv-contato .contato-fios circle{fill:color-mix(in srgb,var(--on) 70%,transparent);transition:fill .25s var(--ease)} #inv-contato .contato-fios .is-on{stroke:var(--green)} #inv-contato .contato-fios circle.is-on{fill:var(--green)} /* ---------- RDO desta visita (réplica branca) ---------- */ #inv-contato .contato-rdo{position:relative;z-index:1;align-self:end;display:flex;flex-direction:column;min-width:0} #inv-contato .contato-rdo .ui-ctx b{font-size:.9375rem} #inv-contato .contato-rdo__resumo{padding:clamp(12px,1.8svh,18px) 16px clamp(12px,1.8svh,16px);background:var(--white);box-shadow:0 1px 0 var(--hair-2l)} #inv-contato .contato-rdo__frase{font:500 clamp(1.0625rem,.9rem + .45vw,1.3125rem)/1.25 var(--f-d);letter-spacing:-.012em;color:var(--ink);text-wrap:balance} #inv-contato .contato-rdo__frase b{font-weight:600;color:var(--green-ink)} #inv-contato .contato-rdo__sub{margin-top:6px;font:400 .8125rem/1.45 var(--f-t);color:var(--ink-2);text-wrap:pretty} #inv-contato .contato-rdo__corpo{background:var(--white);padding:2px 0 4px} #inv-contato .contato-rdo__cab, #inv-contato .contato-reg{display:grid;grid-template-columns:44px minmax(0,8.6em) minmax(0,1fr) 14px;column-gap:12px;align-items:center;padding:0 14px 0 16px} #inv-contato .contato-rdo__cab{min-height:30px;margin:0;box-shadow:0 1px 0 var(--hair-1l)} #inv-contato .contato-rdo__cab span{font:600 .625rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #inv-contato .contato-rdo__lista{list-style:none;margin:0;padding:0} #inv-contato .contato-rdo__lista > li{box-shadow:0 1px 0 var(--hair-1l)} #inv-contato .contato-rdo__lista > li:last-child{box-shadow:none} #inv-contato .contato-reg{position:relative;min-height:clamp(44px,5.6svh,52px);padding-block:6px;text-decoration:none;color:var(--ink);transition:background-color .2s var(--ease)} #inv-contato a.contato-reg:hover,#inv-contato .contato-reg.is-foco{background:color-mix(in srgb,var(--green) 7%,transparent)} #inv-contato .contato-reg:focus-visible{outline-offset:-2px;border-radius:2px} #inv-contato .contato-reg__h{font:600 .875rem/1.2 var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums lining-nums} #inv-contato .contato-reg__p{min-width:0;font:600 .6875rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink)} #inv-contato .contato-reg__t{min-width:0;font:400 .8125rem/1.35 var(--f-t);color:var(--ink-2);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #inv-contato .contato-reg__ir{width:14px;height:14px;color:var(--ink-2);opacity:.5;transition:opacity .2s var(--ease),transform .32s var(--ease)} #inv-contato a.contato-reg:hover .contato-reg__ir,#inv-contato a.contato-reg:focus-visible .contato-reg__ir{opacity:1;transform:translateX(2px);color:var(--green-ink)} /* sugestão (pavimento ainda sem registro): linha planejada, tracejada como projeção */ #inv-contato .contato-reg--plan .contato-reg__h{display:block;width:36px;height:8px;border-radius:2px;background:none;height:0;border-top:2px dashed color-mix(in srgb,var(--ink) 26%,transparent)} #inv-contato .contato-reg--plan .contato-reg__p{color:var(--ink-2)} #inv-contato .contato-reg--plan .contato-reg__t{font-family:var(--f-d);font-weight:600;color:var(--green-ink)} #inv-contato .contato-reg.is-novo{animation:contato-novo 1.6s var(--ease) both} @keyframes contato-novo{from{background-color:color-mix(in srgb,var(--green) 20%,transparent)}to{background-color:color-mix(in srgb,var(--green) 0%,transparent)}} #inv-contato .contato-rdo__pe{justify-content:space-between;min-height:40px;padding-block:6px} #inv-contato .contato-rdo__todos{min-height:28px;padding:0 4px;font-size:.75rem} /* ---------- prédio subindo e símbolo assentando (só com movimento) ---------- */ @media (prefers-reduced-motion:no-preference){ html.js #inv-contato .contato-predio:not(.is-erguido) .contato-pav__laje{background-color:var(--g1);border-style:dashed;border-color:color-mix(in srgb,var(--on) 34%,transparent)} html.js #inv-contato .contato-predio:not(.is-erguido) .contato-pav__nome{opacity:.5} #inv-contato .contato-pav__nome{transition:opacity .4s var(--ease) calc(var(--i,0) * 70ms)} html.js #inv-contato .contato-predio:not(.is-erguido) .contato-pav__n{opacity:0} #inv-contato .contato-pav__n{transition:opacity .4s var(--ease) calc(var(--i,0) * 70ms + 200ms)} #inv-contato .contato-predio.is-erguido .contato-pav__laje{transition-delay:calc(var(--i,0) * 70ms)} html.js #inv-contato .contato-predio:not(.is-assentado) .contato-predio__sb path{opacity:0;transform:translateY(-52px)} #inv-contato .contato-predio__sb path{transition:opacity .5s var(--ease),transform .7s var(--ease)} #inv-contato .contato-predio.is-assentado .sb-2{transition-delay:.12s} #inv-contato .contato-predio.is-assentado .sb-1{transition-delay:.24s} } /* ---------- desktop estreito (corte à direita, pouca largura): prédio sem nomes ---------- */ @media (min-width:900px) and (max-width:1279.98px){ #inv-contato{--cob-predio:clamp(84px,9vw,110px);--cob-fios:clamp(28px,3vw,40px)} #inv-contato .contato-pav__nome{display:none} #inv-contato .contato-pav__laje{justify-content:flex-end;padding:0 5px} } /* ---------- alturas baixas (1366x768, 1280x720) ---------- */ @media (min-width:900px) and (max-height:800px){ #inv-contato .contato-reg{min-height:42px;padding-block:4px} #inv-contato .contato-rdo__cab{min-height:26px} #inv-contato .contato-rdo .ui-head{padding-block:10px} } /* ---------- tablet e celular: texto em cima, figura embaixo ---------- */ @media (max-width:899.98px){ #inv-contato{--cob-predio:clamp(60px,17vw,96px);--cob-fios:clamp(16px,5vw,28px);--cob-cod:22px;--cob-sb:clamp(30px,4.4svh,44px)} #inv-contato .contato-fundo{--foto-pos:56% 70%; --veu: linear-gradient(180deg,var(--g1) 0%,color-mix(in srgb,var(--g1) 80%,transparent) 18%,color-mix(in srgb,var(--g1) 80%,transparent) 46%,var(--g1) 72%); -webkit-mask-image:none;mask-image:none} #inv-contato .contato-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(16px,2.4svh,32px)} #inv-contato .contato-texto{max-width:40rem} #inv-contato .contato-pav__nome{display:none} #inv-contato .contato-pav__laje{justify-content:center;padding:0 4px} #inv-contato .contato-pav__n{margin-left:0} #inv-contato .contato-pav.is-cob .contato-pav__laje{margin-inline:12%} } @media (max-width:760px){ #inv-contato .contato-texto .eyebrow{margin-bottom:12px} #inv-contato .contato-reforco{margin-top:12px;font-size:1rem} #inv-contato .contato-cta{margin-top:18px;gap:10px} #inv-contato .contato-cta .btn{--h:48px;font-size:1rem} #inv-contato .contato-fig > .fig{display:none} #inv-contato .contato-rdo .ui-head{padding:9px 12px;gap:10px} #inv-contato .contato-rdo .ui-ctx b{font-size:.875rem} #inv-contato .contato-rdo__resumo{padding:10px 12px} #inv-contato .contato-rdo__frase{font-size:1rem} #inv-contato .contato-rdo__sub{margin-top:4px;font-size:.75rem} #inv-contato .contato-rdo__cab{display:none} /* linha do RDO em duas faixas: hora + pavimento em cima, registro embaixo */ #inv-contato .contato-reg{grid-template-columns:auto minmax(0,1fr) 14px;grid-template-rows:auto auto;column-gap:8px;row-gap:2px;min-height:48px;padding:6px 10px 6px 12px} #inv-contato .contato-reg__h{grid-row:1;font-size:.8125rem} #inv-contato .contato-reg__p{grid-row:1;grid-column:2} #inv-contato .contato-reg__t{grid-row:2;grid-column:1 / 3;-webkit-line-clamp:1;font-size:.8125rem} #inv-contato .contato-reg__ir{grid-row:1 / 3;grid-column:3} #inv-contato .contato-reg--plan .contato-reg__h{width:30px;height:6px} #inv-contato .contato-rdo__pe{padding:4px 10px 4px 12px;min-height:32px} #inv-contato .contato-rdo__pe .nota-sim{font-size:.625rem;letter-spacing:.06em;gap:6px} #inv-contato .contato-rdo__todos{display:none} #inv-contato .contato-reg__p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #inv-contato .contato-rdo__resumo{padding:9px 12px 10px} } /* celular baixo (360x740, 320x640) */ @media (max-width:760px) and (max-height:760px){ #inv-contato .contato-reforco{display:none} #inv-contato .contato-cta{margin-top:16px} #inv-contato .contato-reg{min-height:44px;padding-block:4px} } @media (max-width:760px) and (max-height:700px){ #inv-contato .contato-rdo__sub{display:none} } @media (max-width:400px){ #inv-contato .contato-rdo .ui-fim{display:none} } @media (max-width:374px){ #inv-contato .contato-cta{gap:8px} #inv-contato .contato-cta .btn{--h:44px;padding:0 10px 0 12px;gap:8px;font-size:.875rem} #inv-contato .contato-cta .btn--sec{padding:0 12px} #inv-contato .contato-rdo .ui-head{padding:8px 10px} #inv-contato .contato-rdo .ui-ctx small{display:none} #inv-contato .contato-rdo__frase{font-size:.9375rem;line-height:1.22} #inv-contato .contato-reg{min-height:42px;padding:4px 8px 4px 10px} } #inv-contato .ui-sym{color:var(--green)} /* ---- sections/inv-visibilidade.css ---- */ /* ===================================================================== LP Painel do Investidor (B) · Pav. 01 · #inv-visibilidade Cronograma (padrão do #planejamento) com uma chave de visibilidade por linha + o celular do investidor (CSS do .ifone em inv-hero.css). ===================================================================== */ #inv-visibilidade{--ph:min(560px,calc(var(--secao-util) - 120px))} #inv-visibilidade .vis{display:grid;grid-template-columns:minmax(290px,.42fr) minmax(0,1fr);grid-template-areas:"txt fig" "cta fig";grid-template-rows:auto 1fr; column-gap:clamp(32px,4vw,72px);align-items:start} #inv-visibilidade .vis__txt{grid-area:txt;min-width:0;container-type:inline-size} #inv-visibilidade .vis__txt .h2{font-size:min(var(--h2),11.4cqi)} #inv-visibilidade .vis__txt .eyebrow{margin-bottom:clamp(12px,2svh,20px)} #inv-visibilidade .vis__lead{margin:clamp(14px,2.4svh,22px) 0 0;max-width:30ch} #inv-visibilidade .vis__cta{grid-area:cta;align-self:end;margin-top:clamp(18px,3svh,28px)} #inv-visibilidade .vis__fig{grid-area:fig;min-width:0;margin:0} #inv-visibilidade .vis__grupo{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(20px,2.4vw,36px);align-items:center} #inv-visibilidade .vis__palco{height:var(--ph);width:calc(var(--ph) * .47)} #inv-visibilidade .ifone{--fone-h:var(--ph)} #inv-visibilidade .vis__cap{margin-top:clamp(12px,2svh,18px)} /* ---------- painel do cronograma ---------- */ #inv-visibilidade .vis__frame{--cantos-off:12px;min-width:0} #inv-visibilidade .ui-sym{color:var(--green)} #inv-visibilidade .vis__head{padding:10px 14px} #inv-visibilidade .vis__cols{display:grid;grid-template-columns:34px minmax(0,1fr) 112px 132px;align-items:center;gap:0 10px;height:30px;padding:0 14px;background:var(--ui-bg); box-shadow:0 1px 0 var(--hair-2l);font:600 .625rem/1.1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #inv-visibilidade .vis__cols > span:first-child{grid-column:1 / 3} #inv-visibilidade .vis__rows{list-style:none;margin:0;padding:0 14px;background:var(--white)} #inv-visibilidade .vis-row{display:grid;grid-template-columns:34px minmax(0,1fr) 112px 132px;align-items:center;gap:0 10px;min-height:36px;box-shadow:0 1px 0 var(--hair-1l); transition:background-color .35s var(--ease)} #inv-visibilidade .vis-row:last-child{box-shadow:none} #inv-visibilidade .vis-row--etapa{background:color-mix(in srgb,var(--ui-sub) 70%,transparent);margin:0 -14px;padding:0 14px} #inv-visibilidade .vis-cod{font:600 .75rem/1 var(--f-d);color:var(--ink-2)} #inv-visibilidade .vis-nome{min-width:0;font:400 .8125rem/1.2 var(--f-t);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s var(--ease),opacity .3s var(--ease)} #inv-visibilidade .vis-row--etapa .vis-nome,#inv-visibilidade .vis-row--etapa .vis-cod{font-weight:700;color:var(--ink)} #inv-visibilidade .vis-row:not(.vis-row--etapa) .vis-nome{padding-left:10px} #inv-visibilidade .vis-row.is-atr .vis-cod,#inv-visibilidade .vis-row.is-atr .vis-nome{color:var(--red-ink)} #inv-visibilidade .vis-row.is-off .vis-nome,#inv-visibilidade .vis-row.is-off .vis-cod{opacity:.55} #inv-visibilidade .vis-st .chip{height:20px;font-size:.6875rem} /* chave de visibilidade */ #inv-visibilidade .vis-chave{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 4px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--ink-2); font:600 .6875rem/1 var(--f-l);letter-spacing:.06em;text-transform:uppercase;text-align:left;-webkit-tap-highlight-color:transparent} #inv-visibilidade .vis-chave__trilho{position:relative;flex:none;width:30px;height:18px;border-radius:9px;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:background-color .3s var(--ease)} #inv-visibilidade .vis-chave__trilho i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--white); box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 35%,transparent);transition:transform .35s var(--ease)} #inv-visibilidade .vis-chave[aria-checked="true"]{color:var(--green-ink)} #inv-visibilidade .vis-chave[aria-checked="true"] .vis-chave__trilho{background:var(--green)} #inv-visibilidade .vis-chave[aria-checked="true"] .vis-chave__trilho i{transform:translateX(12px)} #inv-visibilidade .vis-chave:hover .vis-chave__trilho{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent)} #inv-visibilidade .vis-chave:focus-visible{outline:2px solid var(--green-ink);outline-offset:1px} #inv-visibilidade .vis-row.is-quente{background-color:color-mix(in srgb,var(--green) 10%,transparent)} #inv-visibilidade .vis__foot{justify-content:space-between} #inv-visibilidade .vis__conta{font:400 .75rem/1.3 var(--f-t);color:var(--ink-2)} #inv-visibilidade .vis__conta b{font:600 .8125rem/1 var(--f-d);color:var(--ink)} /* celular: lista das linhas liberadas */ #inv-visibilidade .vf-lista li{animation:inv-vis-entra .45s var(--ease) both} #inv-visibilidade .vf-lista li.vf-etapa .if-nome,#inv-visibilidade .vf-lista li.vf-etapa .if-cod{font-weight:700;color:var(--ink)} #inv-visibilidade .vf-lista li.vf-etapa.is-atr .if-cod{color:var(--red-ink)} #inv-visibilidade .vf-lista li:not(.vf-etapa) .if-nome{padding-left:1.6cqw} @keyframes inv-vis-entra{from{opacity:0;transform:translateX(-1.6cqw)}to{opacity:1;transform:none}} /* ---------- alturas menores ---------- */ @media (min-width:1100px) and (max-height:820px){ #inv-visibilidade .vis-row{min-height:31px} #inv-visibilidade .vis-chave{min-height:28px} #inv-visibilidade .vis__head{padding:8px 14px} #inv-visibilidade .vis__foot{padding:8px 14px} } @media (min-width:1100px) and (max-width:1399.98px){ #inv-visibilidade .vis-row,#inv-visibilidade .vis__cols{grid-template-columns:30px minmax(0,1fr) 96px 118px} #inv-visibilidade .vis__selo{display:none} } /* ---------- tablet e celular: texto, [cronograma | celular], botão ---------- */ @media (max-width:1099.98px){ #inv-visibilidade .vis{height:var(--secao-util);grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "fig" "cta";grid-template-rows:auto minmax(0,1fr) auto} #inv-visibilidade .vis__lead{max-width:48ch} #inv-visibilidade .vis__fig{min-height:0;margin-top:clamp(14px,2.4svh,24px);display:flex;flex-direction:column} #inv-visibilidade .vis__grupo{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,32%);column-gap:12px;align-items:stretch} #inv-visibilidade .vis__palco{container-type:size;height:100%;width:100%;display:flex;align-items:center;justify-content:center} #inv-visibilidade .ifone{--fone-h:min(100cqh,100cqw / .47)} #inv-visibilidade .vis__frame{align-self:center} #inv-visibilidade .vis__cap{display:none} #inv-visibilidade .vis__cta{padding-bottom:0;margin-top:clamp(12px,2svh,20px)} #inv-visibilidade .vis__selo,#inv-visibilidade .vis-st,#inv-visibilidade .vis__cols-st{display:none} #inv-visibilidade .vis-row,#inv-visibilidade .vis__cols{grid-template-columns:28px minmax(0,1fr) auto} } @media (max-width:760px){ #inv-visibilidade .vis__lead{font-size:.9375rem;line-height:1.45} #inv-visibilidade .vis__frame{--cantos-off:8px;padding:4px;border-radius:12px} #inv-visibilidade .vis__head{padding:7px 10px;gap:8px} #inv-visibilidade .vis__head .ui-ctx small{display:none} #inv-visibilidade .vis__head .ui-ctx b{font-size:.75rem} #inv-visibilidade .vis__head .ui-sym{width:18px;height:16px} #inv-visibilidade .vis__cols{height:24px;padding:0 8px;font-size:.5625rem;letter-spacing:.05em;gap:0 6px} #inv-visibilidade .vis__rows{padding:0 8px} #inv-visibilidade .vis-row--etapa{margin:0 -8px;padding:0 8px} #inv-visibilidade .vis-row,#inv-visibilidade .vis__cols{grid-template-columns:22px minmax(0,1fr) auto;gap:0 6px} #inv-visibilidade .vis-row{min-height:29px} #inv-visibilidade .vis-cod{font-size:.6875rem} #inv-visibilidade .vis-nome{font-size:.75rem} #inv-visibilidade .vis-row:not(.vis-row--etapa) .vis-nome{padding-left:4px} #inv-visibilidade .vis-chave{min-height:28px;padding:0 2px} #inv-visibilidade .vis-chave__t{display:none} #inv-visibilidade .vis-row--largo{display:none} #inv-visibilidade .vis__foot{padding:6px 10px} #inv-visibilidade .vis__foot .nota-sim{font-size:.5625rem;letter-spacing:.06em} #inv-visibilidade .vis__conta{display:none} #inv-visibilidade .vis__cta .btn{--h:48px} } @media (max-width:760px) and (max-height:760px){ #inv-visibilidade .vis-row{min-height:26px} #inv-visibilidade .vis-chave{min-height:26px} } @media (prefers-reduced-motion:reduce){ #inv-visibilidade .vf-lista li{animation:none} } /* ---- sections/inv-aprovacao.css ---- */ /* ===================================================================== LP Painel do Investidor (B) · Pav. 02 · #inv-aprovacao Fluxo de status do #medicoes aplicado ao RDO + versão do cliente configurável + celular do investidor (CSS do .ifone em inv-hero.css). ===================================================================== */ #inv-aprovacao{--ph:min(500px,calc(var(--secao-util) - 140px))} #inv-aprovacao .apr{display:grid;grid-template-columns:minmax(300px,.44fr) minmax(0,1fr);grid-template-areas:"txt fig" "cta fig";grid-template-rows:auto 1fr; column-gap:clamp(32px,4vw,72px);align-items:start} #inv-aprovacao .apr__txt{grid-area:txt;min-width:0;container-type:inline-size} #inv-aprovacao .apr__txt .h2{font-size:min(var(--h2),10.6cqi)} #inv-aprovacao .apr__txt .eyebrow{margin-bottom:clamp(12px,2svh,20px)} #inv-aprovacao .apr__lead{margin:clamp(14px,2.4svh,22px) 0 0;max-width:32ch} #inv-aprovacao .apr__cta{grid-area:cta;align-self:end;margin-top:clamp(18px,3svh,28px)} #inv-aprovacao .apr__fig{grid-area:fig;min-width:0;margin:0} #inv-aprovacao .apr__grupo{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(20px,2.4vw,40px);align-items:center} #inv-aprovacao .apr__palco{height:var(--ph);width:calc(var(--ph) * .47)} #inv-aprovacao .ifone{--fone-h:var(--ph)} #inv-aprovacao .apr__cap{margin-top:clamp(12px,2svh,18px)} /* ---------- fluxo (carimbo de prancha do #medicoes, no escuro) ---------- */ #inv-aprovacao .apr__fluxo{margin-top:clamp(20px,3.6svh,36px);max-width:360px} #inv-aprovacao .apr__passos{list-style:none;margin:12px 0 0;padding:0;display:grid;box-shadow:inset 0 1px 0 var(--linha-forte),inset 0 -1px 0 var(--linha-forte)} #inv-aprovacao .apr__passo{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:start;gap:0 10px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--linha);color:var(--fg-3);transition:color .4s var(--ease)} #inv-aprovacao .apr__passo:last-child{box-shadow:none} #inv-aprovacao .apr__pn{font:600 .75rem/1.35 var(--f-l);letter-spacing:.08em;padding-top:1px} #inv-aprovacao .apr__pt{display:grid;gap:2px;font:600 .9375rem/1.25 var(--f-d);letter-spacing:-.005em} #inv-aprovacao .apr__pq{font:400 .8125rem/1.35 var(--f-t);letter-spacing:0;color:var(--fg-2)} #inv-aprovacao .apr__ph{font:600 .75rem/1.35 var(--f-l);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding-top:1px} #inv-aprovacao .apr__passo::before{content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:2px;border-radius:1px;background:var(--green);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)} #inv-aprovacao .apr__passo[data-est="atual"]{color:var(--green)} #inv-aprovacao .apr__passo[data-est="atual"]::before{transform:none} #inv-aprovacao .apr__passo[data-est="atual"] .apr__pt{color:var(--fg-forte)} #inv-aprovacao .apr__passo[data-est="feito"]{color:var(--fg-2)} #inv-aprovacao .apr__passo[data-est="feito"] .apr__pt{color:var(--fg)} /* ---------- painel do RDO (lado do dono) ---------- */ #inv-aprovacao .apr__panel{--cantos-off:10px;min-width:0;align-self:center} #inv-aprovacao .ui-sym{color:var(--green)} #inv-aprovacao .apr__chip{transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)} #inv-aprovacao .apr__chip.is-aguarda{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 42%,transparent)} #inv-aprovacao .apr__chip.is-ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-ink)} #inv-aprovacao .apr__versao .ui-sec__h{margin-bottom:6px} #inv-aprovacao .apr__vd{margin-left:auto} #inv-aprovacao .apr__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px} #inv-aprovacao .apr-chk{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:10px;min-height:34px;box-shadow:0 1px 0 var(--hair-1l);cursor:pointer} #inv-aprovacao .apr-chk input{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:inherit} #inv-aprovacao .apr-chk__box{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--white); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 34%,transparent);color:var(--ink);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)} #inv-aprovacao .apr-chk__box svg{width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .3s var(--ease)} #inv-aprovacao .apr-chk input:checked + .apr-chk__box{background:var(--green);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 35%,transparent)} #inv-aprovacao .apr-chk input:checked + .apr-chk__box svg{opacity:1;transform:none} #inv-aprovacao .apr-chk input:focus-visible + .apr-chk__box{outline:2px solid var(--green-ink);outline-offset:2px} #inv-aprovacao .apr-chk__t{font:500 .8125rem/1.2 var(--f-d);color:var(--ink)} #inv-aprovacao .apr-chk input:disabled ~ *{opacity:.6} #inv-aprovacao .apr-chk:has(input:disabled){cursor:default} #inv-aprovacao .apr__ass{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0;padding:10px 12px;border-radius:7px; background:var(--ui-bg);box-shadow:inset 0 0 0 1px var(--hair-2l)} #inv-aprovacao .apr__ass-k{font:600 .6875rem/1.2 var(--f-l);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} #inv-aprovacao .apr__ass-v{font:500 .75rem/1.2 var(--f-d);color:var(--ink);padding-bottom:2px;box-shadow:inset 0 -1px 0 var(--ink-2)} #inv-aprovacao .apr__fim{padding:10px 14px;background:var(--white);box-shadow:0 -1px 0 var(--hair-1l)} #inv-aprovacao .apr__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:36px} #inv-aprovacao .apr__btn{min-height:34px} #inv-aprovacao .apr__btn .btn__arr{width:14px;height:14px} #inv-aprovacao .apr__como{font-weight:500;opacity:.8} #inv-aprovacao .apr__carimbo{display:inline-grid;gap:1px;margin:0;padding:5px 10px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--green-ink);transform:rotate(-2deg);color:var(--green-ink)} #inv-aprovacao .apr__carimbo b{font:700 .8125rem/1 var(--f-l);letter-spacing:.14em;text-transform:uppercase} #inv-aprovacao .apr__carimbo span{font:500 .6875rem/1.2 var(--f-d)} #inv-aprovacao .apr__carimbo:not([hidden]){animation:inv-apr-carimbo .5s var(--ease) both} @keyframes inv-apr-carimbo{from{opacity:0;transform:rotate(-2deg) scale(1.25)}to{opacity:1;transform:rotate(-2deg)}} #inv-aprovacao .apr__reini{margin-left:auto} /* ---------- celular do investidor ---------- */ #inv-aprovacao .apr-f .if-h span{transition:color .3s var(--ease)} #inv-aprovacao [data-estado="aprovada"] .apr-f .if-h span{color:var(--green-ink)} #inv-aprovacao .apr-f__vazio{box-shadow:none;padding-top:.6cqw} #inv-aprovacao .apr-f__corpo:not([hidden]){animation:inv-apr-entra .55s var(--ease) both} @keyframes inv-apr-entra{from{opacity:0;transform:translateY(1.6cqw)}to{opacity:1;transform:none}} #inv-aprovacao .apr-f__secs li{grid-template-columns:5cqw minmax(0,1fr)} #inv-aprovacao .apr-f__ck{display:grid;place-items:center;width:4.6cqw;height:4.6cqw;border-radius:50%;background:var(--green);color:var(--ink)} #inv-aprovacao .apr-f__ck svg{width:3cqw;height:3cqw} #inv-aprovacao .apr-f__ass{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1.6cqw 2.4cqw;margin-top:2.4cqw;padding-top:2.4cqw;box-shadow:inset 0 1px 0 var(--hair-2l)} #inv-aprovacao .apr-f__ass .if-k{grid-column:1 / -1} #inv-aprovacao .apr-f__linha{height:6cqw;box-shadow:inset 0 -1px 0 var(--ink-2)} #inv-aprovacao .apr-f__btn{padding:1.4cqw 2.6cqw;border-radius:1.4cqw;background:var(--green);color:var(--ink);font:600 2.8cqw/1 var(--f-d)} #inv-aprovacao .apr-f__l0{margin:0} /* ---------- alturas menores ---------- */ @media (min-width:1100px) and (max-height:800px){ #inv-aprovacao .apr-chk{min-height:30px} #inv-aprovacao .apr__passo{padding:8px 0} #inv-aprovacao .apr__fluxo{margin-top:clamp(16px,2.6svh,24px)} } @media (min-width:1100px) and (max-width:1399.98px){ #inv-aprovacao .apr__vd{display:none} } /* ---------- tablet e celular: texto, [painel | celular], botão ---------- */ @media (max-width:1099.98px){ #inv-aprovacao .apr{height:var(--secao-util);grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "fig" "cta";grid-template-rows:auto minmax(0,1fr) auto} #inv-aprovacao .apr__lead{max-width:48ch} #inv-aprovacao .apr__fluxo{display:none} #inv-aprovacao .apr__fig{min-height:0;margin-top:clamp(14px,2.4svh,24px);display:flex;flex-direction:column} #inv-aprovacao .apr__grupo{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,32%);column-gap:12px;align-items:stretch} #inv-aprovacao .apr__palco{container-type:size;height:100%;width:100%;display:flex;align-items:center;justify-content:center} #inv-aprovacao .ifone{--fone-h:min(100cqh,100cqw / .47)} #inv-aprovacao .apr__cap{display:none} #inv-aprovacao .apr__cta{padding-bottom:0;margin-top:clamp(12px,2svh,20px)} #inv-aprovacao .apr__vd{display:none} } @media (max-width:760px){ #inv-aprovacao .apr__lead{font-size:.9375rem;line-height:1.45} #inv-aprovacao .apr__panel{--cantos-off:8px} #inv-aprovacao .apr__panel .ui-head{padding:7px 10px;gap:8px;flex-wrap:wrap} #inv-aprovacao .apr__panel .ui-head .ui-sym{display:none} #inv-aprovacao .apr__panel .ui-ctx small{display:none} #inv-aprovacao .apr__panel .ui-ctx b{font-size:.8125rem} #inv-aprovacao .apr__chip{height:20px;font-size:.625rem;margin-left:0} #inv-aprovacao .apr__versao{padding:8px 10px} #inv-aprovacao .apr__versao .ui-sec__h{min-height:0;margin-bottom:2px} #inv-aprovacao .apr__versao .ui-sec__t{font-size:.75rem} #inv-aprovacao .apr__lista{grid-template-columns:minmax(0,1fr)} #inv-aprovacao .apr-chk{min-height:26px;gap:8px} #inv-aprovacao .apr-chk__t{font-size:.75rem} #inv-aprovacao .apr__so-largo{display:none} #inv-aprovacao .apr__ass{margin-top:6px;padding:6px 8px;flex-wrap:wrap;gap:2px 8px} #inv-aprovacao .apr__ass-k{font-size:.5625rem;letter-spacing:.06em} #inv-aprovacao .apr__ass-v{font-size:.6875rem} #inv-aprovacao .apr__fim{padding:7px 10px} #inv-aprovacao .apr__btn{min-height:32px;padding:0 10px;font-size:.75rem} #inv-aprovacao .apr__btn .btn__arr,#inv-aprovacao .apr__como{display:none} #inv-aprovacao .apr__reini{min-height:28px;padding:0 4px;font-size:.6875rem} #inv-aprovacao .apr__carimbo{padding:3px 7px} #inv-aprovacao .apr__carimbo span{display:none} #inv-aprovacao .apr__panel .ui-foot{padding:6px 10px} #inv-aprovacao .apr__panel .ui-foot .nota-sim{font-size:.5625rem;letter-spacing:.06em} #inv-aprovacao .apr__cta .btn{--h:48px} } @media (prefers-reduced-motion:reduce){ #inv-aprovacao .apr__carimbo:not([hidden]),#inv-aprovacao .apr-f__corpo:not([hidden]){animation:none} } /* ---- sections/inv-acessos.css ---- */ /* ===================================================================== LP Painel do Investidor (B) · Pav. 04 · #inv-acessos Variante do alternador de visão do #estrutura (Dono | Investidor) com o card da obra e as permissões de cada perfil. ===================================================================== */ #inv-acessos{--ac-op-h:58px} #inv-acessos .ac{display:grid;grid-template-columns:minmax(280px,.4fr) minmax(0,1fr);column-gap:clamp(32px,4.6vw,80px);align-items:center} #inv-acessos .ac__txt{min-width:0;container-type:inline-size} #inv-acessos .ac__txt .h2{font-size:min(var(--h2),12cqi)} #inv-acessos .ac__txt .eyebrow{margin-bottom:clamp(12px,2svh,20px)} #inv-acessos .ac__lead{margin:clamp(14px,2.4svh,22px) 0 0;max-width:36ch} #inv-acessos .ac__fig{min-width:0;margin:0} #inv-acessos .ac__cap{margin-top:clamp(12px,2svh,18px)} /* alternador (padrão do #estrutura) */ #inv-acessos .ac__troca{margin-top:clamp(20px,3.6svh,36px);max-width:420px} #inv-acessos .ac__rot{margin:0 0 10px;font:600 .75rem/1.2 var(--f-l);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)} #inv-acessos .ac__alt{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border-radius:12px; background:color-mix(in srgb,var(--on) 4%,transparent);box-shadow:inset 0 0 0 1px var(--linha-forte)} #inv-acessos .ac__alt-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 2);border-radius:9px;background:var(--paper); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--white) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--g0) 25%,transparent),0 6px 16px -8px color-mix(in srgb,var(--g0) 60%,transparent); transition:transform .55s var(--ease)} #inv-acessos .ac__alt[data-sel="1"] .ac__alt-thumb{transform:translateX(100%)} #inv-acessos .ac__op{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center; column-gap:12px;row-gap:2px;min-height:var(--ac-op-h);padding:6px 14px;border:0;border-radius:9px;background:none;color:var(--fg);text-align:left;cursor:pointer;transition:color .35s var(--ease)} #inv-acessos .ac__op-i{grid-row:1 / span 2;width:22px;height:22px;color:var(--fg-2);transition:color .35s var(--ease)} #inv-acessos .ac__op-n{font:600 1.0625rem/1.1 var(--f-d);letter-spacing:-.005em} #inv-acessos .ac__op-d{font:600 .6875rem/1.25 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:color .35s var(--ease)} #inv-acessos .ac__op:hover .ac__op-i{color:var(--fg)} #inv-acessos .ac__op[aria-checked="true"]{color:var(--ink);cursor:default} #inv-acessos .ac__op[aria-checked="true"] .ac__op-i{color:var(--green-ink)} #inv-acessos .ac__op[aria-checked="true"] .ac__op-d{color:var(--ink-2)} #inv-acessos .ac__op:focus-visible{outline:2px solid var(--green);outline-offset:2px} /* painel (réplica) */ #inv-acessos .ac__frame{--cantos-off:12px} #inv-acessos .ui-sym{color:var(--green)} #inv-acessos .ac__head{min-height:56px} #inv-acessos .ac__perfil-k{display:inline-flex;align-items:center;gap:8px;font:600 .625rem/1 var(--f-l);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} #inv-acessos .ac__perfil{display:inline-block;padding:4px 8px;border-radius:5px;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-ink);font:600 .8125rem/1 var(--f-d);letter-spacing:0;text-transform:none} #inv-acessos .ac__corpo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px;padding:8px} #inv-acessos .ac__corpo > .ui-sec{margin:0;border-radius:8px} #inv-acessos .ac__foto{position:relative;margin:-12px -14px 10px;height:clamp(64px,11svh,112px);overflow:hidden;border-radius:8px 8px 0 0;background:var(--ui-sub)} #inv-acessos .ac__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 78%} #inv-acessos .ac__foto-st{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;background:var(--white);color:var(--ink); font:600 .6875rem/1 var(--f-d);box-shadow:0 1px 2px color-mix(in srgb,var(--g0) 18%,transparent)} #inv-acessos .ac__obra-t{margin:0 0 4px;font:600 .9375rem/1.25 var(--f-d);letter-spacing:-.005em;color:var(--ink)} #inv-acessos .ac__kpis .ui-row{min-height:32px} #inv-acessos .ac__kpis:not([hidden]),#inv-acessos .ac__acao{animation:inv-ac-troca .45s var(--ease) both} #inv-acessos .ac__acao:nth-child(2){animation-delay:40ms} #inv-acessos .ac__acao:nth-child(3){animation-delay:80ms} #inv-acessos .ac__acao:nth-child(4){animation-delay:120ms} #inv-acessos .ac__acao:nth-child(5){animation-delay:160ms} @keyframes inv-ac-troca{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} #inv-acessos .ac__perm .ui-sec__h{margin-bottom:6px} #inv-acessos .ac__acoes{list-style:none;margin:0;padding:0;display:grid} #inv-acessos .ac__acao{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;box-shadow:0 1px 0 var(--hair-1l)} #inv-acessos .ac__acao:last-child{box-shadow:none} #inv-acessos .ac__acao-n{font:500 .8125rem/1.25 var(--f-d);color:var(--ink)} #inv-acessos .ac__sim,#inv-acessos .ac__nao{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 8px;border-radius:5px;white-space:nowrap;font:600 .6875rem/1 var(--f-d)} #inv-acessos .ac__sim{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-ink)} #inv-acessos .ac__nao{background:var(--ui-sub);color:var(--ink-2)} #inv-acessos .ac__sim svg,#inv-acessos .ac__nao svg{width:12px;height:12px;flex:none} #inv-acessos .ac__acao.is-nao .ac__acao-n{color:var(--ink-2)} @media (min-width:1100px) and (max-height:800px){ #inv-acessos{--ac-op-h:52px} #inv-acessos .ac__acao{min-height:36px} } @media (max-width:1099.98px){ #inv-acessos .ac{grid-template-columns:minmax(0,1fr);row-gap:clamp(14px,2.4svh,24px)} #inv-acessos .ac__lead{max-width:52ch} #inv-acessos .ac__troca{max-width:none;display:flex;align-items:center;gap:14px;margin-top:clamp(14px,2.4svh,22px)} #inv-acessos .ac__rot{margin:0;flex:none} #inv-acessos .ac__alt{flex:1 1 auto;max-width:420px} #inv-acessos{--ac-op-h:46px} #inv-acessos .ac__op-d{display:none} #inv-acessos .ac__cap{display:none} } @media (max-width:760px){ #inv-acessos .ac__lead{font-size:.9375rem;line-height:1.45} #inv-acessos .ac__rot{display:none} #inv-acessos .ac__alt{max-width:none} #inv-acessos{--ac-op-h:42px} #inv-acessos .ac__op{padding:4px 12px;column-gap:8px} #inv-acessos .ac__op-i{width:18px;height:18px} #inv-acessos .ac__op-n{font-size:.9375rem} #inv-acessos .ac__frame{--cantos-off:8px;padding:4px;border-radius:12px} #inv-acessos .ac__head{min-height:0;padding:7px 10px;gap:8px} #inv-acessos .ac__head .ui-ctx small{display:none} #inv-acessos .ac__head .ui-ctx b{font-size:.75rem} #inv-acessos .ac__perfil-k{font-size:0;gap:0} #inv-acessos .ac__perfil{font-size:.6875rem} #inv-acessos .ac__corpo{grid-template-columns:minmax(0,1fr);gap:6px;padding:6px} #inv-acessos .ac__foto,#inv-acessos .ac__obra-t{display:none} #inv-acessos .ac__obra{padding:6px 10px} #inv-acessos .ac__kpis .ui-row{min-height:26px} #inv-acessos .ac__kpis .ui-row:nth-child(3){display:none} #inv-acessos .ac__perm{padding:8px 10px} #inv-acessos .ac__perm .ui-sec__h{min-height:0;margin-bottom:2px} #inv-acessos .ac__acao{min-height:28px;gap:6px} #inv-acessos .ac__acao-n{font-size:.75rem} #inv-acessos .ac__sim,#inv-acessos .ac__nao{min-height:22px;padding:0 6px;font-size:.625rem} #inv-acessos .ac__app .ui-foot{padding:6px 10px} } @media (prefers-reduced-motion:reduce){ #inv-acessos .ac__kpis:not([hidden]),#inv-acessos .ac__acao{animation:none} }