/* Card 1016655 — página de detalhe da solução (template v4).
   Carregado DEPOIS do MudBlazor (App.razor): regra de mesma especificidade aqui ganha.
   Tudo sob .sd-pagina: os tokens não vazam para as outras telas. */
.sd-pagina {
    --ink: #16215b; --ink-soft: #465479; --page: #f4f7fb; --white: #fff;
    --teal-100: #e6f5f3; --teal-300: #7ed0c7; --teal-500: #12968a; --teal-600: #0d7a70;
    --teal-700: #0a5e57; --teal-900: #06352f;
    --blue-100: #e7edfb; --blue-500: #1b4fb8; --blue-700: #143d94;
    --line: #dbe3f0; --alert: #c8102e;
    --r: 14px; --r-sub: 12px; --sombra: 0 10px 30px rgba(22, 33, 91, .08);
    font-family: "Open Sans", system-ui, sans-serif;
    font-size: 15px; line-height: 1.5; color: var(--ink);
    background: var(--page);
    /* sangra até a borda da área de conteúdo: o MainLayout põe pa-6 (24px) em volta do @Body */
    margin: -24px; padding-bottom: 96px; min-height: calc(100% + 48px);
}
.sd-pagina a { color: var(--teal-700); }
.sd-pagina a:hover { color: var(--teal-600); }
.sd-pagina :focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
/* Sobre fundo escuro (hero, KPIs, Materiais) o teal-500 some (~1,6:1 no gradiente): lá o foco é
   teal-300, que passa de 3:1 nos três. */
.sd-hero :focus-visible, .sd-card--escuro :focus-visible, .sd-materiais :focus-visible { outline-color: var(--teal-300); }
.sd-rotulo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }

.sd-card { background: var(--white); border-radius: var(--r); box-shadow: var(--sombra);
    padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 32px); min-width: 0; }
.sd-card--escuro { background: var(--teal-900); color: #fff; box-shadow: none; }
.sd-card__cab { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.sd-card__cab h2 { font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: inherit; }
.sd-traco { height: 5px; width: 48px; background: var(--teal-500); border-radius: 999px; }
.sd-card--escuro .sd-traco { background: var(--teal-300); }

.sd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
    padding: 6px 11px; border-radius: 999px; text-decoration: none; overflow-wrap: anywhere; }
.sd-tag--neutra { background: #eef1f8; color: var(--ink); }
.sd-tag--teal { background: var(--teal-100); color: var(--teal-900); }
.sd-tag--azul { background: var(--blue-100); color: var(--blue-700); }
.sd-tag--escura { background: var(--ink); color: #fff; }
.sd-pagina a.sd-tag { color: var(--ink); }
.sd-pagina a.sd-tag:hover { text-decoration: underline; }

/* ── HERO ── (fonte: Detalhe da Solução v4 - Mensageria Digital.dc.html, linhas 62–93) */
.sd-hero { position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(105deg, #0f3f6b 0%, #0d5a72 58%, #0a5e57 100%); }
/* a foto começa em min(54%, 100% - 220px): nunca cobre o texto (critério de aceite) */
.sd-hero__foto { position: absolute; top: 0; right: 0; bottom: 0; left: min(54%, 100% - 220px); }
.sd-hero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.08); }
.sd-hero__duotone { position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
    background: linear-gradient(100deg, rgba(13,90,114,.92) 0%, rgba(17,131,148,.72) 60%, rgba(18,150,138,.52) 100%); }
.sd-hero__fade { position: absolute; top: 0; bottom: 0; left: 0; width: 200px; pointer-events: none;
    background: linear-gradient(90deg, #0d5a72 0%, rgba(13,90,114,0) 100%); }
.sd-hero__conteudo { position: relative; max-width: 1320px; margin: 0 auto; padding: 40px 20px 60px; }
.sd-migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px;
    color: rgba(255,255,255,.75); margin-bottom: 20px; }
.sd-pagina .sd-migalha a { color: rgba(255,255,255,.75); text-decoration: none; }
.sd-pagina .sd-migalha a:hover { color: #fff; text-decoration: underline; }
.sd-migalha [aria-current] { color: #fff; overflow-wrap: anywhere; }
.sd-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-pill-pilar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; border-radius: 999px;
    padding: 7px 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4);
    font-size: 13px; color: rgba(255,255,255,.92); }
.sd-pill-pilar strong { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.sd-pill-pilar__sep { width: 1px; height: 14px; background: rgba(255,255,255,.45); }
.sd-pill-ia { gap: 6px; }
.sd-hero h1 { font-weight: 800; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.03em;
    color: #fff; margin: 20px 0 0; max-width: 15em; text-wrap: pretty; overflow-wrap: anywhere; }
.sd-hero__sub { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.45; color: rgba(255,255,255,.92);
    max-width: 30em; margin: 16px 0 0; }
.sd-hero__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sd-btn-hero { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
    border-radius: var(--r); border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12);
    color: #fff; font: 700 14px/1.2 "Open Sans", system-ui, sans-serif; cursor: pointer; }
.sd-btn-hero:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.sd-btn-hero:disabled { opacity: .6; cursor: not-allowed; }
.sd-btn-hero[aria-pressed="true"] .mud-icon-root { color: #ffd166; }
/* Vídeo: coluna do grid do conteúdo, DENTRO do fluxo (entra na altura do hero). Abaixo do texto
   no celular; à direita dele a partir de 800px. */
.sd-hero__conteudo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 40px; align-items: center; }
.sd-hero__texto { min-width: 0; }
.sd-hero__video { min-width: 0; }
@media (min-width: 800px) {
    .sd-hero__conteudo:has(.sd-hero__video) { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
}
/* Vídeo por LINK não reconhecido: o VideoProof desenha um botão de texto na cor primária, que
   sobre o gradiente ficava com ~1,5:1. Aqui ele ganha o visual dos botões do hero. */
.sd-pagina .sd-hero__video .mud-button-root { color: #fff; border: 1.5px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.12); border-radius: var(--r); min-height: 44px; padding: 10px 18px; }
.sd-hero__video video, .sd-hero__video iframe { border-radius: var(--r-sub); }


/* ── DESCRIÇÃO / PROBLEMAS-RESULTADOS ── */
.sd-descricao { margin-top: 18px; font-size: 17px; line-height: 1.55; max-width: 46em; overflow-wrap: anywhere; }
.sd-descricao ul, .sd-descricao ol { padding-left: 1.2em; }
.sd-descricao p:last-child { margin-bottom: 0; }
.sd-probres { display: flex; flex-wrap: wrap; gap: 32px; }
.sd-probres__metade { flex: 1 1 260px; min-width: 0; }
.sd-pills-grandes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sd-pill-grande { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600;
    padding: 12px 18px; border-radius: 999px; overflow-wrap: anywhere; }
.sd-pill-grande .mud-icon-root { flex: none; }
.sd-pill-grande--azul { background: var(--blue-100); color: var(--blue-700); }
.sd-pill-grande--teal { background: var(--teal-100); color: var(--teal-900); }

/* ── COMO FUNCIONA / PERSONAS ── (min(…, 100%) evita scroll horizontal em 360px) */
.sd-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin-top: 22px; }
.sd-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-top: 22px; }
.sd-passo { border: 1px solid var(--line); border-radius: var(--r-sub); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.sd-passo__n { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
    border-radius: 50%; background: var(--teal-700); color: #fff; font-weight: 800; font-size: 15px; }
/* hyphens:auto (o <html> é lang="pt-BR"): palavra longa como "Monitoramento" num cartão de ~130px
   quebra com hífen na sílaba, em vez do corte seco do overflow-wrap ("Monitorament/o"). */
.sd-passo__texto { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.sd-passo__t { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.sd-passo__d { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-soft); margin-top: 3px; }
.sd-persona { border: 1px solid var(--line); border-top: 4px solid var(--barra, var(--ink)); border-radius: var(--r-sub); padding: 20px; min-width: 0; overflow-wrap: anywhere; }
.sd-persona h3 { font-weight: 800; font-size: 17px; margin: 0; }
.sd-lista-check { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sd-lista-check li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.sd-lista-check .mud-icon-root { color: var(--teal-600); flex: none; margin-top: 1px; }
.sd-persona__vazio { font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; }
.sd-link { background: none; border: 0; padding: 0; min-height: 44px; color: var(--teal-700);
    font: 700 14px "Open Sans", system-ui, sans-serif; cursor: pointer; text-decoration: underline; }
.sd-link:hover { color: var(--teal-600); }

/* ── KPIs / REQUISITOS ── */
.sd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 22px; }
.sd-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-top: 22px; }
.sd-kpi { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sub);
    padding: 18px; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 800px) { .sd-kpi--largo { grid-column: span 2; } }
.sd-kpi__impacto { font-weight: 600; font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.92); }
.sd-kpi__impacto--numero { font-weight: 800; font-size: 28px; line-height: 1.1; color: var(--teal-300); }
.sd-kpi__nome { font-weight: 800; font-size: 17px; line-height: 1.25; color: #fff; margin-top: 6px; }
.sd-kpi__fonte { display: inline-block; margin-top: 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 800; color: var(--teal-300); }
.sd-req { border-radius: var(--r-sub); padding: 18px; min-width: 0; }
.sd-req--r { background: #fdf0f2; --cor: var(--alert); }
.sd-req--p { background: var(--teal-100); --cor: var(--teal-700); }
.sd-req--t { background: var(--blue-100); --cor: var(--blue-700); }
.sd-req__cab { display: flex; align-items: center; gap: 10px; }
.sd-req__cab h3 { font-weight: 800; font-size: 16px; margin: 0; }
.sd-req__sigla { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
    border-radius: 8px; background: #fff; color: var(--cor); font-weight: 800; font-size: 15px; }
.sd-req ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sd-req li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sd-req li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); flex: none; margin-top: 7px; }

/* ── VALORES / RESPONSÁVEL ── */
.sd-valores__intro { font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 14px 0 0; max-width: 46em; }
.sd-valores { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.sd-valor { border: 1px solid var(--line); border-radius: var(--r-sub); padding: 16px 18px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 10px 20px; }
.sd-valor__desc { flex: 999 1 260px; min-width: 0; font-size: 15px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.sd-valor__tags { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.sd-valor .sd-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding: 5px 10px; }
.sd-valor__preco { flex: 0 0 auto; margin-left: auto; font-weight: 800; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.sd-valor__preco--texto { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
.sd-valores__obs { font-size: 13.5px; color: var(--ink-soft); margin: 12px 0 0; }
.sd-nota { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; }
.sd-resp { display: flex; align-items: center; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.sd-resp__avatar { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; flex: none; background: var(--teal-700);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; }
.sd-resp__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-resp__dados { min-width: 0; flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-start; }
.sd-resp__nome { font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.sd-resp__dados a { font-size: 14px; word-break: break-all; min-height: 28px; display: inline-flex; align-items: center; }
/* Desvio do design (teal-500): branco sobre #12968a dá ~3,9:1, abaixo dos 4,5:1 que a própria
   história exige para texto de 13px. teal-700 (#0a5e57) dá ~7,6:1. */
.sd-btn-primario { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700;
    padding: 12px 18px; border-radius: var(--r); background: var(--teal-700); white-space: nowrap; text-decoration: none; }
.sd-pagina a.sd-btn-primario { color: #fff; }
.sd-pagina a.sd-btn-primario:hover { background: var(--teal-600); color: #fff; text-decoration: none; }

/* ── FICHA ── */
.sd-ficha { background: var(--white); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.sd-ficha__cab { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sd-ficha__corpo { padding: 6px 20px 18px; }
.sd-ficha__grupo { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sd-ficha__grupo:last-child { border-bottom: 0; padding-bottom: 0; }
.sd-ficha__grupo .sd-rotulo { letter-spacing: .1em; }
.sd-ficha__grupo .sd-tags { margin-top: 10px; }

/* ── MATERIAIS ── */
.sd-materiais { background: var(--teal-900); color: #fff; border-radius: var(--r); padding: 20px; }
.sd-materiais h2.sd-rotulo { color: var(--teal-300); margin: 0; }
.sd-pagina a.sd-material { display: block; margin-top: 14px; color: #fff; text-decoration: none; }
.sd-pagina a.sd-material:hover .sd-material__nome { text-decoration: underline; }
.sd-material__mini { height: 150px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.08); margin-bottom: 10px; }
.sd-material__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-material__nome { font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; min-width: 0; }
.sd-material__linha { display: flex; align-items: center; gap: 4px 10px; margin-top: 14px; flex-wrap: wrap; }
.sd-material__linha .mud-icon-root { color: var(--teal-300); flex: none; }
.sd-material__linha .sd-material__nome { flex: 1 1 140px; }
.sd-pagina .sd-material__linha a.sd-material__nome { color: #fff; }
.sd-material__acoes { display: flex; gap: 4px; margin-left: auto; }
.sd-pagina .sd-material__acoes a, .sd-material__acoes button { display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 8px; color: var(--teal-300); background: none; border: 0; cursor: pointer; text-decoration: none;
    font: 700 13px "Open Sans", system-ui, sans-serif; }
.sd-pagina .sd-material__acoes a:hover, .sd-material__acoes button:hover { text-decoration: underline; color: #fff; }

/* ── GRADE ── (fonte: linhas 95–98 e 287 do Mensageria) */
.sd-grade { max-width: 1320px; margin: 32px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap;
    gap: 20px 40px; align-items: flex-start; }
.sd-principal { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sd-lateral { flex: 1 1 290px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* 84px = 64px da MudAppBar fixa + 20px de respiro */
/* Sticky só com teto de altura: ficha cheia + vários materiais passam da altura da tela, e um
   sticky mais alto que a janela esconde o fim (Materiais, Reportar lacuna) até a página acabar.
   104px = os 84px do top + 20px de respiro embaixo. */
@media (min-width: 800px) {
    .sd-lateral { position: sticky; top: 84px; max-width: 330px; max-height: calc(100vh - 104px); overflow-y: auto;
        overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 799.98px) { .sd-lateral { flex-basis: 100%; } }
.sd-lacuna { padding: 0 4px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.sd-lacuna .sd-link { font-size: 12.5px; }

/* ── PROVAS / RELACIONADAS ── */
.sd-subtitulo { font-weight: 800; font-size: 17px; margin: 22px 0 0; }
.sd-subcard { border: 1px solid var(--line); border-radius: var(--r-sub); padding: 16px 18px; margin-top: 12px;
    display: block; min-width: 0; overflow-wrap: anywhere; }
.sd-relacionadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; margin-top: 10px; }
.sd-relacionadas .sd-subcard { margin-top: 0; }
.sd-pagina a.sd-relacionada { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-height: 44px; }
.sd-pagina a.sd-relacionada:hover { border-color: var(--teal-500); }
.sd-relacionada__titulo { font-weight: 700; font-size: 15px; }