/* ══════════════════════════════════════════════════════════ FABIM · "IPD na Prática: o Caso do Sutter Medical Center Castro Valley" — publicação. Estudo de caso de entrega integrada (IPD) num hospital californiano: contrato, time, aprovação em etapas, BIM, Lean e o incidente das vigas, com a leitura para a obra brasileira. A base comum (hero, ficha, resumo, índice, seções, citação, callout, figura, fecho, autor, relacionados, CTA, revelação no scroll e impressão dos componentes art-) vem de /assets/css/editorial.css, ligada por data-layout="editorial" no . Aqui ficam só os diagramas próprios deste texto, no prefixo ipd-: assinatura do hero, números do caso, tabelas, marcos, restrições, time, duas lógicas de preço, cronograma, princípios, fluxo de valor, temas da revisão, sequência do incidente, laço de reação, protocolo, barras de prazo, ponte caso x obra, síntese e referências. Escopo restrito a [data-page="conteudo-sutter-ipd"]. Sem transição nem animação própria: o reveal é o do editorial.css. ══════════════════════════════════════════════════════════ */ /* Assinatura do hero: o prazo do projeto estrutural, previsto e realizado */ [data-page="conteudo-sutter-ipd"] .ipd-span { margin-top: 22px; display: inline-flex; flex-wrap: wrap; align-items: center; max-width: 100%; } [data-page="conteudo-sutter-ipd"] .ipd-span-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; border-radius: 12px; background: rgba(8, 16, 30, .78); border: 1px solid var(--edge-2); } [data-page="conteudo-sutter-ipd"] .ipd-span-chip b { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(150, 185, 215, .85); } [data-page="conteudo-sutter-ipd"] .ipd-span-chip span { font-family: var(--font-mono); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; color: var(--txt-1); } [data-page="conteudo-sutter-ipd"] .ipd-span-chip--now { border-color: rgba(245, 166, 35, .5); background: rgba(245, 166, 35, .08); } [data-page="conteudo-sutter-ipd"] .ipd-span-chip--now span { color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-span-line { position: relative; width: clamp(44px, 8vw, 96px); height: 2px; flex: none; background: linear-gradient(90deg, var(--sky), var(--amber)); } [data-page="conteudo-sutter-ipd"] .ipd-span-line::after { content: ''; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); transform: rotate(45deg); } [data-page="conteudo-sutter-ipd"] .ipd-span-k { flex-basis: 100%; margin-top: 8px; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(150, 185, 215, .85); } /* ── O CASO EM NÚMEROS ──────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-facts { max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-fact { padding: 16px 18px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); border-top: 3px solid rgba(34, 211, 238, .5); } [data-page="conteudo-sutter-ipd"] .ipd-fact dt { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-fact dd { margin-top: 6px; } [data-page="conteudo-sutter-ipd"] .ipd-fact dd b { display: block; font-family: var(--font-mono); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; color: var(--txt-1); line-height: 1.1; } [data-page="conteudo-sutter-ipd"] .ipd-fact dd span { display: block; margin-top: 6px; font-size: .92rem; line-height: 1.45; color: var(--txt-3); } [data-page="conteudo-sutter-ipd"] .ipd-fact--key { border-color: rgba(245, 166, 35, .45); border-top-color: var(--amber); background: linear-gradient(150deg, rgba(245, 166, 35, .1), rgba(255, 255, 255, .02)); } [data-page="conteudo-sutter-ipd"] .ipd-fact--key dt, [data-page="conteudo-sutter-ipd"] .ipd-fact--key dd b { color: var(--amber); } @media (max-width: 860px) { [data-page="conteudo-sutter-ipd"] .ipd-facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { [data-page="conteudo-sutter-ipd"] .ipd-facts { grid-template-columns: 1fr; } } /* ── TABELAS EDITORIAIS ─────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-table-wrap { max-width: 1140px; margin: 24px auto 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--edge-2); border-radius: var(--radius-l); background: var(--panel); scrollbar-color: rgba(56, 189, 248, .5) transparent; } [data-page="conteudo-sutter-ipd"] .ipd-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .96rem; line-height: 1.5; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-table th, [data-page="conteudo-sutter-ipd"] .ipd-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-table thead th { border-top: 0; background: rgba(56, 189, 248, .08); font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sky); } [data-page="conteudo-sutter-ipd"] .ipd-table tbody th { font-weight: 800; color: var(--txt-1); } [data-page="conteudo-sutter-ipd"] .ipd-table tbody tr:nth-child(even) td, [data-page="conteudo-sutter-ipd"] .ipd-table tbody tr:nth-child(even) th { background: rgba(255, 255, 255, .02); } [data-page="conteudo-sutter-ipd"] .ipd-table--vs { min-width: 680px; } [data-page="conteudo-sutter-ipd"] .ipd-table--vs thead th:last-child { color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-table--vs tbody td:last-child { color: var(--txt-1); } /* ── MARCOS DO PRAZO (1954, 1994, 2013) ─────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-marks { list-style: none; max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-mark { position: relative; padding: 18px 18px 16px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-mark:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -9px; width: 8px; height: 8px; z-index: 1; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: translateY(-50%) rotate(45deg); } [data-page="conteudo-sutter-ipd"] .ipd-mark-y { display: block; font-family: var(--font-mono); font-size: clamp(1.3rem, 2.8vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; color: var(--cyan); line-height: 1.15; } [data-page="conteudo-sutter-ipd"] .ipd-mark span { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.5; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-mark--key { border-color: rgba(245, 166, 35, .45); background: linear-gradient(150deg, rgba(245, 166, 35, .1), rgba(255, 255, 255, .02)); } [data-page="conteudo-sutter-ipd"] .ipd-mark--key .ipd-mark-y { color: var(--amber); } @media (max-width: 700px) { [data-page="conteudo-sutter-ipd"] .ipd-marks { grid-template-columns: 1fr; } [data-page="conteudo-sutter-ipd"] .ipd-mark::after { display: none; } } /* ── AS TRÊS RESTRIÇÕES ─────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-cards { list-style: none; max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-card-k { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(150, 185, 215, .85); } [data-page="conteudo-sutter-ipd"] .ipd-card strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); } [data-page="conteudo-sutter-ipd"] .ipd-card > span:last-child { font-size: .95rem; line-height: 1.5; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-card--key { border-color: rgba(245, 166, 35, .45); background: linear-gradient(150deg, rgba(245, 166, 35, .1), rgba(255, 255, 255, .02)); } [data-page="conteudo-sutter-ipd"] .ipd-card--key .ipd-card-k { color: var(--amber); } @media (max-width: 760px) { [data-page="conteudo-sutter-ipd"] .ipd-cards { grid-template-columns: 1fr; } } /* ── O TIME ─────────────────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-team { max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: 1fr 1.2fr 1.35fr; grid-template-areas: "own proj exec" "int proj exec" "more more more"; gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-team-g { padding: 16px 18px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-team-g--owner { grid-area: own; } [data-page="conteudo-sutter-ipd"] .ipd-team-g--proj { grid-area: proj; } [data-page="conteudo-sutter-ipd"] .ipd-team-g--exec { grid-area: exec; } [data-page="conteudo-sutter-ipd"] .ipd-team-g--lean { grid-area: int; } [data-page="conteudo-sutter-ipd"] .ipd-team-g h3 { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } [data-page="conteudo-sutter-ipd"] .ipd-team-g ul { list-style: none; margin-top: 10px; display: grid; gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-team-g li strong { display: block; font-size: 1rem; font-weight: 800; color: var(--txt-1); line-height: 1.3; } [data-page="conteudo-sutter-ipd"] .ipd-team-g li span { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.45; color: var(--txt-3); } [data-page="conteudo-sutter-ipd"] .ipd-team-g--owner { border-color: rgba(245, 166, 35, .45); background: linear-gradient(150deg, rgba(245, 166, 35, .1), rgba(255, 255, 255, .02)); } [data-page="conteudo-sutter-ipd"] .ipd-team-g--owner h3 { color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-team-g--lean { border-color: rgba(34, 211, 238, .4); background: linear-gradient(160deg, rgba(34, 211, 238, .09), rgba(255, 255, 255, .02)); } [data-page="conteudo-sutter-ipd"] .ipd-team-g--lean h3 { color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-team-more { grid-area: more; padding: 14px 18px; border-radius: var(--radius-m); border: 1px dashed var(--edge-2); font-size: .95rem; line-height: 1.5; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-team-more b { font-family: var(--font-mono); font-size: 1.1rem; color: var(--cyan); margin-right: 6px; } @media (max-width: 900px) { [data-page="conteudo-sutter-ipd"] .ipd-team { grid-template-columns: 1fr 1fr; grid-template-areas: "own int" "proj exec" "more more"; } } @media (max-width: 600px) { [data-page="conteudo-sutter-ipd"] .ipd-team { grid-template-columns: 1fr; grid-template-areas: "own" "proj" "exec" "int" "more"; } } /* ── DUAS LÓGICAS DE PREÇO ──────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-duo { max-width: 1040px; margin: 24px auto 0; padding: clamp(18px, 3vw, 26px); border-radius: var(--radius-l); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-duo-h, [data-page="conteudo-sutter-ipd"] .ipd-vsm-h, [data-page="conteudo-sutter-ipd"] .ipd-bars-h { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } [data-page="conteudo-sutter-ipd"] .ipd-duo-cols { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } [data-page="conteudo-sutter-ipd"] .ipd-duo-col { padding: 16px 18px; border-radius: var(--radius-m); background: rgba(8, 16, 30, .6); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-duo-k { display: block; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(150, 185, 215, .85); } [data-page="conteudo-sutter-ipd"] .ipd-duo-col strong { display: block; margin-top: 6px; font-size: 1.05rem; font-weight: 800; color: var(--txt-1); } [data-page="conteudo-sutter-ipd"] .ipd-duo-col p { margin-top: 8px; font-size: .95rem; line-height: 1.55; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-duo-col--key { border-color: rgba(34, 211, 238, .45); background: linear-gradient(160deg, rgba(34, 211, 238, .09), rgba(255, 255, 255, .02)); } [data-page="conteudo-sutter-ipd"] .ipd-duo-col--key .ipd-duo-k { color: var(--cyan); } @media (max-width: 700px) { [data-page="conteudo-sutter-ipd"] .ipd-duo-cols { grid-template-columns: 1fr; } } /* ── CRONOGRAMA DA APROVAÇÃO EM ETAPAS ──────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-tl { list-style: none; max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; } [data-page="conteudo-sutter-ipd"] .ipd-tl-item { position: relative; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px 16px 14px 18px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-tl-item::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--sky); opacity: .55; } [data-page="conteudo-sutter-ipd"] .ipd-tl-item--done::before { background: var(--cyan); opacity: 1; } [data-page="conteudo-sutter-ipd"] .ipd-tl-item--key { border-color: rgba(245, 166, 35, .5); background: linear-gradient(150deg, rgba(245, 166, 35, .1), rgba(255, 255, 255, .02)); } [data-page="conteudo-sutter-ipd"] .ipd-tl-item--key::before { background: var(--amber); opacity: 1; } [data-page="conteudo-sutter-ipd"] .ipd-tl-y { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--cyan); line-height: 1.2; } [data-page="conteudo-sutter-ipd"] .ipd-tl-item--key .ipd-tl-y { color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-tl-b strong { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); line-height: 1.35; } [data-page="conteudo-sutter-ipd"] .ipd-tl-b span { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.5; color: var(--txt-3); } @media (max-width: 900px) { [data-page="conteudo-sutter-ipd"] .ipd-tl { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { [data-page="conteudo-sutter-ipd"] .ipd-tl { grid-template-columns: 1fr; } } /* ── SEIS PRINCÍPIOS ────────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-princ { list-style: none; counter-reset: princ; max-width: 1140px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-princ-i { counter-increment: princ; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 18px 16px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-princ-i::before { content: counter(princ, decimal-leading-zero); position: absolute; top: 9px; left: 18px; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; color: rgba(150, 185, 215, .8); } [data-page="conteudo-sutter-ipd"] .ipd-princ-i strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); line-height: 1.3; } [data-page="conteudo-sutter-ipd"] .ipd-princ-i span { font-size: .92rem; line-height: 1.5; color: var(--txt-3); } [data-page="conteudo-sutter-ipd"] .ipd-princ-i--key { border-color: rgba(34, 211, 238, .4); background: linear-gradient(160deg, rgba(34, 211, 238, .09), rgba(255, 255, 255, .02)); } @media (max-width: 900px) { [data-page="conteudo-sutter-ipd"] .ipd-princ { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { [data-page="conteudo-sutter-ipd"] .ipd-princ { grid-template-columns: 1fr; } } /* ── FLUXO DE VALOR (EXEMPLO ILUSTRATIVO) ───────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-vsm { max-width: 1180px; margin: 24px auto 0; padding: clamp(18px, 3vw, 26px); border-radius: var(--radius-l); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-steps { list-style: none; margin-top: 14px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px 12px; border-radius: var(--radius-s); background: rgba(8, 16, 30, .6); border: 1px solid var(--edge); border-top: 3px solid var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -8px; width: 7px; height: 7px; z-index: 1; border-top: 2px solid var(--sky); border-right: 2px solid var(--sky); transform: translateY(-50%) rotate(45deg); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s strong { font-size: .92rem; font-weight: 700; color: var(--txt-1); line-height: 1.35; } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s--w { border-top-color: rgba(150, 185, 215, .55); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s--r { border-top-color: var(--amber); background: rgba(245, 166, 35, .06); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-t { align-self: flex-start; padding: 3px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } [data-page="conteudo-sutter-ipd"] .ipd-vsm-t--v { color: var(--cyan); background: rgba(34, 211, 238, .1); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-t--w { color: rgba(185, 205, 225, .9); background: rgba(150, 185, 215, .12); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-t--r { color: var(--amber); background: rgba(245, 166, 35, .12); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-note { margin-top: 14px; font-size: .9rem; line-height: 1.55; color: var(--txt-3); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-note .art-mono { display: block; margin-bottom: 4px; font-size: .62rem; color: var(--sky); } @media (max-width: 1100px) { [data-page="conteudo-sutter-ipd"] .ipd-vsm-steps { grid-template-columns: repeat(4, 1fr); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s::after { display: none; } } @media (max-width: 640px) { [data-page="conteudo-sutter-ipd"] .ipd-vsm-steps { grid-template-columns: 1fr; gap: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s { flex-direction: row; align-items: center; border-top-width: 1px; border-left: 3px solid var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s--w { border-left-color: rgba(150, 185, 215, .55); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s--r { border-left-color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-vsm-t { align-self: center; flex: none; } } /* ── TEMAS DA REVISÃO ───────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-chips { list-style: none; max-width: 1040px; margin: 20px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-chips li { padding: 9px 14px; border-radius: 999px; background: var(--panel); border: 1px solid rgba(34, 211, 238, .35); font-size: .95rem; font-weight: 700; color: var(--txt-1); } /* ── SEQUÊNCIA DO INCIDENTE ─────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-steps { list-style: none; counter-reset: passo; max-width: 1040px; margin: 24px auto 0; display: grid; gap: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-step { counter-increment: passo; position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px 18px 14px 14px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-step::before { content: counter(passo, decimal-leading-zero); grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-step strong { font-size: 1.02rem; font-weight: 800; color: var(--txt-1); line-height: 1.35; } [data-page="conteudo-sutter-ipd"] .ipd-step span { font-size: .95rem; line-height: 1.55; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-step--why { border-color: rgba(245, 166, 35, .4); } [data-page="conteudo-sutter-ipd"] .ipd-step--why::before { border-color: rgba(245, 166, 35, .55); background: rgba(245, 166, 35, .1); color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-step--ok { border-color: rgba(34, 211, 238, .45); background: linear-gradient(160deg, rgba(34, 211, 238, .08), rgba(255, 255, 255, .02)); } /* ── LAÇO DE REAÇÃO ───────────────────────────────────────── O anel e as setas sao so desenho (aria-hidden); a ordem vem da lista numerada e a leitura do laco, da legenda. Abaixo de 700px o anel sai e a lista vira coluna, com o fecho do ciclo escrito pelo ::after. */ [data-page="conteudo-sutter-ipd"] .ipd-loop { max-width: 880px; margin: 28px auto 0; } [data-page="conteudo-sutter-ipd"] .ipd-loop-box { position: relative; padding: 8px 0; } [data-page="conteudo-sutter-ipd"] .ipd-loop-ring { position: absolute; inset: 16% 18%; border-radius: 50%; border: 2px dashed rgba(34, 211, 238, .4); pointer-events: none; } [data-page="conteudo-sutter-ipd"] .ipd-loop-ring::before, [data-page="conteudo-sutter-ipd"] .ipd-loop-ring::after { content: ''; position: absolute; width: 12px; height: 12px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); } /* setas no sentido horario: no alto a direita e embaixo a esquerda */ [data-page="conteudo-sutter-ipd"] .ipd-loop-ring::before { top: 12%; right: 12%; transform: rotate(135deg); } [data-page="conteudo-sutter-ipd"] .ipd-loop-ring::after { bottom: 12%; left: 12%; transform: rotate(-45deg); } [data-page="conteudo-sutter-ipd"] .ipd-loop-list { list-style: none; position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: ". n1 ." "n4 hub n2" ". n3 ."; gap: 14px 10px; align-items: center; } /* Fundo opaco (painel sobre navy): o tracejado do anel passa por tras dos nos */ [data-page="conteudo-sutter-ipd"] .ipd-loop-n { padding: 12px 14px; border-radius: var(--radius-m); border: 1px solid var(--edge-2); background-color: #0A1424; background-image: linear-gradient(var(--panel), var(--panel)); font-size: .95rem; font-weight: 700; line-height: 1.4; color: var(--txt-1); text-align: center; } [data-page="conteudo-sutter-ipd"] .ipd-loop-n b { display: block; margin: 0 auto 4px; font-family: var(--font-mono); font-size: .78rem; color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-loop-n--1 { grid-area: n1; } [data-page="conteudo-sutter-ipd"] .ipd-loop-n--2 { grid-area: n2; } [data-page="conteudo-sutter-ipd"] .ipd-loop-n--3 { grid-area: n3; } [data-page="conteudo-sutter-ipd"] .ipd-loop-n--4 { grid-area: n4; } [data-page="conteudo-sutter-ipd"] .ipd-loop-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; padding: 12px 14px; border-radius: var(--radius-m); text-align: center; border: 1px solid rgba(34, 211, 238, .5); background: rgba(8, 20, 34, .95); font-size: .95rem; font-weight: 800; line-height: 1.35; color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-loop-hub .art-mono { display: block; margin-bottom: 4px; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(150, 185, 215, .85); } [data-page="conteudo-sutter-ipd"] .ipd-loop-cap { margin-top: 14px; text-align: center; font-size: .9rem; line-height: 1.55; color: var(--txt-3); } @media (max-width: 700px) { [data-page="conteudo-sutter-ipd"] .ipd-loop-ring { display: none; } [data-page="conteudo-sutter-ipd"] .ipd-loop-list { grid-template-columns: 1fr; grid-template-areas: none; gap: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-loop-n { grid-area: auto !important; text-align: left; } [data-page="conteudo-sutter-ipd"] .ipd-loop-n b { display: inline; margin: 0 8px 0 0; } [data-page="conteudo-sutter-ipd"] .ipd-loop-n--4::after { content: '↺ e o ciclo recomeça no passo 1'; display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .8125rem; font-weight: 700; color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-loop-hub { position: static; transform: none; width: auto; margin-top: 10px; } } /* ── PROTOCOLO DE MUDANÇAS ──────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-check { list-style: none; margin-top: 14px; display: grid; gap: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-check li { position: relative; padding: 12px 16px 12px 44px; border-radius: var(--radius-m); background: var(--panel); border: 1px solid var(--edge); font-size: 1rem; line-height: 1.55; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-check li::before { content: ''; position: absolute; left: 16px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(-45deg); } /* ── BARRAS DO PRAZO ESTRUTURAL ─────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-bars { max-width: 900px; margin: 24px auto 0; padding: clamp(18px, 3vw, 26px); border-radius: var(--radius-l); background: var(--panel); border: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-bars-rows { list-style: none; margin-top: 14px; display: grid; gap: 10px; } [data-page="conteudo-sutter-ipd"] .ipd-bar { display: grid; grid-template-columns: 150px 1fr 96px; gap: 12px; align-items: center; } [data-page="conteudo-sutter-ipd"] .ipd-bar-l { font-size: .95rem; font-weight: 700; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-bar-t { display: block; height: 26px; border-radius: 8px; background: rgba(56, 189, 248, .08); overflow: hidden; } [data-page="conteudo-sutter-ipd"] .ipd-bar-f { display: block; height: 100%; border-radius: 8px; background: var(--sky); opacity: .85; } [data-page="conteudo-sutter-ipd"] .ipd-bar-f--15 { width: 100%; } [data-page="conteudo-sutter-ipd"] .ipd-bar-f--8 { width: 53.333%; background: var(--amber); opacity: 1; } [data-page="conteudo-sutter-ipd"] .ipd-bar-v { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: var(--txt-1); text-align: right; white-space: nowrap; } [data-page="conteudo-sutter-ipd"] .ipd-bar--key .ipd-bar-v { color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-bars-note { margin-top: 14px; font-size: .95rem; line-height: 1.5; color: var(--txt-2); } [data-page="conteudo-sutter-ipd"] .ipd-bars-note .art-mono { margin-right: 8px; font-size: .64rem; color: var(--sky); } @media (max-width: 560px) { [data-page="conteudo-sutter-ipd"] .ipd-bar { grid-template-columns: 1fr auto; gap: 6px 10px; } [data-page="conteudo-sutter-ipd"] .ipd-bar-l { grid-column: 1 / -1; } } /* ── PONTE CASO × OBRA BRASILEIRA ───────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-bridge { max-width: 1040px; margin: 24px auto 0; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--edge-2); background: var(--panel); } [data-page="conteudo-sutter-ipd"] .ipd-bridge-h { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; padding: 14px 20px; background: rgba(56, 189, 248, .08); border-bottom: 1px solid var(--edge-2); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-a { color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-bridge-b { color: var(--cyan); text-align: right; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-list { display: grid; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; padding: 12px 20px; border-top: 1px solid var(--edge); } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row:first-child { border-top: 0; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row dt { grid-column: 1; grid-row: 1; font-size: .98rem; font-weight: 700; color: var(--txt-1); text-align: left; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row dd { grid-column: 3; grid-row: 1; font-size: .98rem; font-weight: 600; line-height: 1.45; color: var(--txt-2); text-align: right; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row::before { content: ''; grid-column: 2; grid-row: 1; justify-self: center; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--amber), var(--cyan)); } /* Celular: as duas colunas viram par empilhado */ @media (max-width: 640px) { [data-page="conteudo-sutter-ipd"] .ipd-bridge-h { grid-template-columns: 1fr; gap: 4px; padding-inline: 16px; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-mid { display: none; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-b { text-align: left; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row::before { display: none; } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row dt { grid-column: 1; grid-row: 1; color: var(--amber); } [data-page="conteudo-sutter-ipd"] .ipd-bridge-row dd { grid-column: 1; grid-row: 2; text-align: left; } } /* ── SÍNTESE FINAL ──────────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .ipd-sum { max-width: 1140px; margin: 24px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } [data-page="conteudo-sutter-ipd"] .ipd-sum-terms { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-sum-terms li { padding: 9px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--edge-2); font-size: .95rem; font-weight: 700; color: var(--txt-1); } [data-page="conteudo-sutter-ipd"] .ipd-sum-terms--res li { border-color: rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .08); } [data-page="conteudo-sutter-ipd"] .ipd-sum-eq { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .art-final-a { margin-top: 18px; display: inline-block; padding: 12px 22px; border-radius: 16px; font-family: var(--font-mono); font-size: clamp(.86rem, 1.7vw, .98rem); font-weight: 700; letter-spacing: .02em; line-height: 1.5; color: var(--cyan); background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .4); text-wrap: pretty; } /* ── FONTE E REFERÊNCIAS ────────────────────────────────── */ /* p.ipd-fonte dentro de .art-col: sem o .art-col p no seletor, a regra do editorial.css ([data-layout] .art-col p, 0,2,1) vence e anula fonte, cor e margem. */ [data-page="conteudo-sutter-ipd"] .art-col p.ipd-fonte { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-m); background: rgba(34, 211, 238, .06); border: 1px solid rgba(34, 211, 238, .35); font-size: 1rem; line-height: 1.6; color: var(--txt-1); } [data-page="conteudo-sutter-ipd"] .ipd-fonte .art-mono { display: block; margin-bottom: 6px; font-size: .64rem; color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .ipd-refs { margin-top: 12px; padding-left: 22px; } [data-page="conteudo-sutter-ipd"] .ipd-refs li { font-size: 1rem; line-height: 1.6; color: var(--txt-2); margin-top: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-refs li::marker { font-family: var(--font-mono); color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .art-col p.ipd-fonte a, [data-page="conteudo-sutter-ipd"] .ipd-refs a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; } [data-page="conteudo-sutter-ipd"] .art-col p.ipd-fonte a:hover, [data-page="conteudo-sutter-ipd"] .ipd-refs a:hover { color: var(--cyan); } [data-page="conteudo-sutter-ipd"] .art-col p a:not(.art-btn) { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; } /* ── FOCO VISÍVEL ───────────────────────────────────────── */ [data-page="conteudo-sutter-ipd"] .art-btn:focus-visible, [data-page="conteudo-sutter-ipd"] .art-toc-list a:focus-visible, [data-page="conteudo-sutter-ipd"] .art-toc-box > summary:focus-visible, [data-page="conteudo-sutter-ipd"] .art-rel-card h3 a:focus-visible, [data-page="conteudo-sutter-ipd"] .art-author-link:focus-visible, [data-page="conteudo-sutter-ipd"] .ipd-fonte a:focus-visible, [data-page="conteudo-sutter-ipd"] .ipd-refs a:focus-visible, [data-page="conteudo-sutter-ipd"] .art-col p a:focus-visible, [data-page="conteudo-sutter-ipd"] .art-crumb a:focus-visible, [data-page="conteudo-sutter-ipd"] .ipd-table-wrap:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } /* ── PISO DE TEXTO NO CELULAR (item 7.10) ─────────────────── Abaixo de 900px o editorial.css sobe os textos art- para 1rem e os rotulos mono para .8125rem; os diagramas ipd- seguem o mesmo piso. */ @media (max-width: 900px) { [data-page="conteudo-sutter-ipd"] :is(.ipd-fact dd span, .ipd-mark span, .ipd-card > span:last-child, .ipd-team-g li span, .ipd-team-more, .ipd-duo-col p, .ipd-tl-b span, .ipd-princ-i span, .ipd-vsm-s strong, .ipd-vsm-note, .ipd-chips li, .ipd-step span, .ipd-loop-n, .ipd-loop-hub, .ipd-loop-cap, .ipd-bar-l, .ipd-bar-v, .ipd-bars-note, .ipd-bridge-row dt, .ipd-bridge-row dd, .ipd-sum-terms li, .ipd-table) { font-size: 1rem; } [data-page="conteudo-sutter-ipd"] :is(.ipd-span-chip b, .ipd-span-k, .ipd-fact dt, .ipd-card-k, .ipd-team-g h3, .ipd-duo-h, .ipd-duo-k, .ipd-vsm-h, .ipd-vsm-t, .ipd-vsm-note .art-mono, .ipd-bars-h, .ipd-bars-note .art-mono, .ipd-loop-hub .art-mono, .ipd-loop-n b, .ipd-bridge-h, .ipd-table thead th, .ipd-fonte .art-mono) { font-size: .8125rem; } } @media (max-width: 400px) { [data-page="conteudo-sutter-ipd"] .ipd-span { display: grid; grid-template-columns: 1fr; gap: 8px; } [data-page="conteudo-sutter-ipd"] .ipd-span-line { display: none; } [data-page="conteudo-sutter-ipd"] .art-meta { grid-template-columns: 1fr; } } /* ── IMPRESSÃO E SALVAR COMO PDF ────────────────────────── */ @media print { /* Marcas que so existem pelo fundo precisam continuar visiveis no papel */ [data-page="conteudo-sutter-ipd"] .ipd-bar-f, [data-page="conteudo-sutter-ipd"] .ipd-bridge-row::before { background: #555 !important; } [data-page="conteudo-sutter-ipd"] .ipd-bar-f--8 { background: #111 !important; } [data-page="conteudo-sutter-ipd"] .ipd-bar-t { background: #e6e6e6 !important; } [data-page="conteudo-sutter-ipd"] .ipd-check li::before { border-color: #333 !important; } [data-page="conteudo-sutter-ipd"] .ipd-loop-ring { border-color: #999 !important; } [data-page="conteudo-sutter-ipd"] .ipd-loop-ring::before, [data-page="conteudo-sutter-ipd"] .ipd-loop-ring::after { border-color: #333 !important; } [data-page="conteudo-sutter-ipd"] .ipd-loop-hub { background: #fff !important; } [data-page="conteudo-sutter-ipd"] :is(.ipd-fact dt, .ipd-card-k, .ipd-team-g h3, .ipd-duo-k, .ipd-vsm-t, .ipd-span-chip b) { color: #555 !important; } [data-page="conteudo-sutter-ipd"] .ipd-fact dd b { font-size: 18pt !important; } [data-page="conteudo-sutter-ipd"] .ipd-table-wrap { max-width: 100% !important; overflow: visible !important; } [data-page="conteudo-sutter-ipd"] .ipd-table { min-width: 0 !important; } [data-page="conteudo-sutter-ipd"] .ipd-facts, [data-page="conteudo-sutter-ipd"] .ipd-tl, [data-page="conteudo-sutter-ipd"] .ipd-princ { grid-template-columns: repeat(3, 1fr) !important; } [data-page="conteudo-sutter-ipd"] .ipd-vsm-steps { grid-template-columns: repeat(4, 1fr) !important; } [data-page="conteudo-sutter-ipd"] .ipd-vsm-s::after, [data-page="conteudo-sutter-ipd"] .ipd-mark::after { display: none !important; } [data-page="conteudo-sutter-ipd"] .ipd-fact, [data-page="conteudo-sutter-ipd"] .ipd-mark, [data-page="conteudo-sutter-ipd"] .ipd-card, [data-page="conteudo-sutter-ipd"] .ipd-team-g, [data-page="conteudo-sutter-ipd"] .ipd-duo, [data-page="conteudo-sutter-ipd"] .ipd-tl-item, [data-page="conteudo-sutter-ipd"] .ipd-princ-i, [data-page="conteudo-sutter-ipd"] .ipd-vsm, [data-page="conteudo-sutter-ipd"] .ipd-step, [data-page="conteudo-sutter-ipd"] .ipd-loop, [data-page="conteudo-sutter-ipd"] .ipd-bars, [data-page="conteudo-sutter-ipd"] .ipd-bridge, [data-page="conteudo-sutter-ipd"] .ipd-sum { break-inside: avoid; page-break-inside: avoid; } }