/* =====================================================================
   APP314 · site (página principal e produto)
   Depende só de tokens.css. Sem fonte externa, sem imagem de terceiros;
   as únicas imagens são capturas reais do próprio sistema.
   Largura mínima conferida: 360 px. Cores de marca vêm dos tokens
   --app-*; nada da identidade de igreja cliente é usado aqui.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font-family:var(--fonte-texto);font-size:var(--texto-md);line-height:var(--altura-linha);color:var(--app-texto);background:var(--app-fundo);overflow-wrap:break-word}
img,svg{max-width:100%}
h1,h2,h3,h4{line-height:var(--altura-linha-titulo);margin:0 0 .5em;color:var(--app-texto)}
h1{font-size:clamp(1.75rem,1.25rem + 2.2vw,2.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem);letter-spacing:-.005em}
h3{font-size:var(--texto-lg)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
li{margin:.25em 0}
a{color:var(--app-azul);text-underline-offset:.18em}
a:hover{color:var(--app-azul-escuro)}
code{font-family:var(--fonte-mono);font-size:.9em;background:#EFEDE8;padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
hr{border:0;border-top:1px solid var(--app-linha);margin:2em 0}
:focus-visible{outline:var(--foco-largura) solid var(--foco-cor);outline-offset:var(--foco-afastamento);border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:8px;top:-80px;z-index:100;background:var(--app-azul);color:#fff;padding:10px 16px;border-radius:var(--raio-md);font-weight:var(--peso-medio)}
.pular:focus{top:8px;color:#fff}

.ic{width:var(--icone);height:var(--icone);flex:none;fill:none;stroke:currentColor;stroke-width:var(--icone-traco);stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}

/* ---------- estrutura ---------- */
.caixa{max-width:1120px;margin:0 auto;padding:0 var(--margem-celular)}
@media (min-width:768px){.caixa{padding:0 24px}}
.estreita{max-width:var(--largura-leitura)}
.passos li{margin-bottom:10px}

.faixa-previa{background:var(--app-grafite);color:#E6E9EE;font-size:var(--texto-sm);text-align:center;padding:6px var(--margem-celular)}
.faixa-previa b{letter-spacing:.06em;margin-right:6px}
.faixa-previa a{color:var(--app-azul-claro)}

.topo{position:sticky;top:0;z-index:var(--camada-cabecalho);background:var(--app-superficie);border-bottom:1px solid var(--app-linha)}
.topo-in{display:flex;align-items:center;gap:12px;min-height:64px;flex-wrap:wrap}
.marca{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--app-grafite);min-height:var(--alvo-min);align-self:center;padding:8px 0}
.marca:hover{color:var(--app-grafite)}
.marca-palavra{font-family:var(--fonte-marca);font-weight:var(--peso-marca);letter-spacing:var(--espaco-letra-marca);font-size:1.3rem;line-height:1}
.marca-sub{font-weight:var(--peso-medio);color:var(--app-texto-2);font-size:1rem;line-height:1}
.nav-principal{flex:1}
.nav-principal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.nav-principal li{margin:0}
.nav-principal a{display:inline-flex;align-items:center;min-height:var(--alvo-min);padding:0 10px;border-radius:var(--raio-md);color:var(--app-texto);text-decoration:none;font-weight:var(--peso-medio);font-size:.95rem}
.nav-principal a:hover{background:var(--app-azul-suave);color:var(--app-azul-escuro)}
.nav-principal a[aria-current="page"]{color:var(--app-azul);box-shadow:inset 0 -3px 0 var(--app-azul);border-radius:var(--raio-md) var(--raio-md) 0 0}
.menu-botao{display:none;align-items:center;gap:6px;min-height:var(--alvo-min);min-width:var(--alvo-min);padding:0 12px;border:1px solid var(--app-linha-forte);background:var(--app-superficie);border-radius:var(--raio-md);font:inherit;font-weight:var(--peso-medio);color:var(--app-texto);cursor:pointer}
.acoes-topo{display:flex;align-items:center;gap:8px;margin-left:auto}

@media (max-width:980px){
  .js .menu-botao{display:inline-flex}
  .js .nav-principal{display:none;order:10;flex-basis:100%}
  .js .nav-principal.aberto{display:block;padding:4px 0 12px}
  .nav-principal ul{justify-content:flex-start}
  .js .nav-principal ul{flex-direction:column;gap:0}
  .js .nav-principal a{width:100%;padding:0 12px;border-radius:var(--raio-md)}
  .js .nav-principal a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--app-azul);background:var(--app-azul-suave);border-radius:0 var(--raio-md) var(--raio-md) 0}
}

/* ---------- botões ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--alvo-min);padding:10px 18px;border-radius:var(--raio-md);font:inherit;font-weight:var(--peso-forte);text-decoration:none;border:1px solid transparent;cursor:pointer;line-height:1.2;text-align:center}
.botao.primario{background:var(--app-azul);color:var(--app-sobre-azul)}
.botao.primario:hover{background:var(--app-azul-escuro);color:#fff}
.botao.secundario{background:var(--app-superficie);color:var(--app-azul);border-color:var(--app-azul)}
.botao.secundario:hover{background:var(--app-azul-suave)}
.botao.claro{background:#fff;color:var(--app-grafite)}
.botao.claro:hover{background:#E8F1FA;color:var(--app-grafite)}
.botao.contorno-claro{background:transparent;color:#fff;border-color:#9FB3C8}
.botao.contorno-claro:hover{background:rgba(255,255,255,.08);color:#fff}
.botao[disabled],.botao[aria-disabled="true"]{background:#E8E6E1;color:#4D5157;border-color:#D8D6CC;cursor:not-allowed}
.botao.entrar{padding:8px 16px}
.botoes{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* ---------- abertura (herói) ---------- */
.abertura{background:var(--app-grafite);color:#fff;padding:48px 0 56px}
.abertura .caixa{display:grid;gap:32px;align-items:center}
@media (min-width:920px){.abertura .caixa{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr)}}
.abertura h1{color:#fff;margin-bottom:.4em}
.abertura .sobre{font-size:var(--texto-sm);font-weight:var(--peso-medio);letter-spacing:var(--espaco-letra-rotulo);text-transform:uppercase;color:#A9C9E6;margin-bottom:12px}
.abertura .lead{font-size:1.125rem;color:#D9DEE5;max-width:640px}
.abertura a:not(.botao){color:var(--app-azul-claro)}
.abertura .nota{font-size:var(--texto-sm);color:#C4CCD6;margin-top:14px}
.abertura .selo{vertical-align:1px}

.pagina-topo{background:var(--app-superficie);border-bottom:1px solid var(--app-linha);padding:36px 0 28px}
.pagina-topo .lead{font-size:1.0625rem;color:var(--app-texto-2);max-width:760px;margin-bottom:0}
.pagina-topo .lead + .lead{margin-top:.6em}

/* ---------- seções ---------- */
.secao{padding:48px 0}
.secao.alt{background:var(--app-superficie);border-top:1px solid var(--app-linha);border-bottom:1px solid var(--app-linha)}
.secao > .caixa > h2{margin-bottom:.35em}
.intro{max-width:760px;color:var(--app-texto-2);font-size:1.0625rem}
.rotulo{display:block;font-size:var(--texto-sm);font-weight:var(--peso-forte);letter-spacing:var(--espaco-letra-rotulo);text-transform:uppercase;color:var(--app-azul);margin-bottom:6px}
.texto-2{color:var(--app-texto-2)}
.texto-3{color:var(--app-texto-3);font-size:var(--texto-sm)}

/* ---------- cartões e grades ---------- */
.grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));margin-top:20px}
.grade.duas{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.cartao{background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-lg);padding:20px;box-shadow:var(--sombra-1);display:flex;flex-direction:column;gap:8px;min-width:0}
.secao.alt .cartao{background:var(--app-superficie-2)}
.cartao h3{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:1.0625rem}
.cartao h3 .ic{color:var(--app-azul);width:22px;height:22px;margin-top:1px}
.cartao p{margin:0;color:var(--app-texto-2)}
.cartao .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--texto-sm);color:var(--app-texto-3)}
.cartao .rodape{margin-top:auto;padding-top:6px}
.cartao a.mais{display:inline-flex;align-items:center;gap:4px;min-height:var(--alvo-min);font-weight:var(--peso-medio)}

/* ---------- selos de status ---------- */
.selo{display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:var(--raio-pilula);font-size:.8125rem;font-weight:var(--peso-forte);white-space:nowrap;border:1px solid transparent;line-height:1.55;vertical-align:middle}
.selo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.selo.s-disponivel{background:var(--sinal-positivo-fundo);color:#276B39}
.selo.s-em_validacao{background:var(--sinal-alerta-fundo);color:var(--sinal-alerta)}
.selo.s-planejado{background:#EEF0F3;color:var(--app-texto-2)}
.selo.s-roteiro,.selo.s-hipotese{background:var(--app-superficie);color:var(--app-texto-2);border:1px dashed #A8A69E}
.abertura .selo.s-roteiro,.abertura .selo.s-hipotese{background:transparent;color:#D9DEE5;border-color:#8A99AB}

.legenda{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin:16px 0 0;padding:0;list-style:none}
.legenda li{margin:0;background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-md);padding:12px 14px;font-size:var(--texto-sm);color:var(--app-texto-2)}
.legenda li .selo{margin-bottom:6px}
.legenda li span.def{display:block}

/* ---------- listas de itens com selo ---------- */
.itens{list-style:none;margin:0;padding:0}
.itens > li{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;align-items:flex-start;padding:12px 0;border-top:1px solid var(--app-linha);margin:0}
.itens > li:first-child{border-top:0}
.itens .txt{flex:1 1 280px;min-width:0}
.itens .txt b{display:block;color:var(--app-texto)}
.itens .txt span{display:block;color:var(--app-texto-2);font-size:.95rem}
.itens .selo{margin-top:2px}

.modulo{background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-lg);padding:6px 20px 8px;margin-top:18px}
.modulo > h2,.modulo > h3{display:flex;gap:10px;align-items:center;margin:14px 0 6px;font-size:1.125rem}
.modulo > h2 .ic,.modulo > h3 .ic{color:var(--app-azul);width:22px;height:22px}
.modulo .selo-modulo{margin-left:auto}
.ir-para{margin:24px 0 0}
.ir-para p{margin:0 0 6px}
.ir-para .ir-para-links{display:flex;flex-wrap:wrap;gap:0 16px;margin:0}
.ir-para .ir-para-links a{display:inline-flex;align-items:center;min-height:var(--alvo-min)}
.fim-pagina{margin:28px 0 48px}
.figura-celular{margin:0}
.modulo > p{color:var(--app-texto-2);margin:0 0 6px}

/* ---------- filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;margin:22px 0 4px;padding:14px;background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-lg)}
.filtros fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filtros legend{font-size:var(--texto-sm);font-weight:var(--peso-forte);color:var(--app-texto-2);padding:0;margin-bottom:6px;width:100%}
.chip{min-height:var(--alvo-min);padding:0 14px;border-radius:var(--raio-pilula);border:1px solid var(--app-linha-forte);background:var(--app-superficie);font:inherit;font-size:.95rem;color:var(--app-texto);cursor:pointer}
.chip:hover{border-color:var(--app-azul)}
.chip[aria-pressed="true"]{background:var(--app-texto);color:#fff;border-color:var(--app-texto)}
.campo-busca{flex:1 1 240px}
.contagem{font-size:var(--texto-sm);color:var(--app-texto-2);margin:10px 0 0}
[hidden]{display:none!important}

/* ---------- formulários ---------- */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label,.campo .rot{font-weight:var(--peso-medio);font-size:.95rem}
.campo small{color:var(--app-texto-3);font-size:var(--texto-sm)}
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],select,textarea{width:100%;min-height:var(--alvo-min);font:inherit;font-size:var(--campo-fonte);padding:10px 12px;border:1px solid #86847B;border-radius:var(--raio-md);background:var(--app-superficie);color:var(--app-texto)}
textarea{min-height:120px;resize:vertical}
.form-grade{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}

/* ---------- avisos ---------- */
.aviso{display:flex;gap:12px;align-items:flex-start;border-radius:var(--raio-md);padding:14px 16px;margin:16px 0;border:1px solid var(--app-linha-forte);background:var(--app-superficie-2);color:var(--app-texto)}
.aviso .ic{margin-top:1px}
.aviso p:last-child{margin-bottom:0}
.aviso.info{background:var(--sinal-info-fundo);border-color:#B9D8E8}
.aviso.info .ic{color:var(--sinal-info)}
.aviso.alerta{background:var(--sinal-alerta-fundo);border-color:#E6D3A5}
.aviso.alerta .ic{color:var(--sinal-alerta)}
.estagio{border-left:4px solid var(--app-azul);background:var(--app-azul-suave);padding:18px 20px;border-radius:0 var(--raio-md) var(--raio-md) 0}
.estagio p:last-child{margin-bottom:0}

/* ---------- tabela ---------- */
.rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 18px;border:1px solid var(--app-linha);border-radius:var(--raio-md);background:var(--app-superficie)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--app-linha)}
th{background:var(--app-superficie-2);font-weight:var(--peso-forte);color:var(--app-texto)}
tr:last-child td{border-bottom:0}

/* ---------- perguntas (details) ---------- */
.perguntas details{background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-md);margin:0 0 10px}
.perguntas summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--alvo-min);padding:12px 16px;cursor:pointer;font-weight:var(--peso-forte);list-style:none}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--app-azul);flex:none}
.perguntas details[open] summary::after{content:"\2212"}
.perguntas .resposta{padding:0 16px 14px;color:var(--app-texto-2)}
.perguntas .resposta p{margin:0 0 .7em}
.perguntas .resposta .selos{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}


/* ---------- ajuda ---------- */
.busca-ajuda{display:flex;flex-direction:column;gap:6px}
.busca-ajuda label{font-weight:var(--peso-forte)}
.resultados{list-style:none;margin:14px 0 0;padding:0}
.resultados > li{background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-md);padding:14px 16px;margin:0 0 10px}
.resultados h3{font-size:1.0625rem;margin:0 0 4px}
.resultados h3 a{text-decoration:none}
.resultados h3 a:hover{text-decoration:underline}
.resultados p{margin:4px 0 0;color:var(--app-texto-2);font-size:.95rem}
.resultados .meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:var(--texto-sm);color:var(--app-texto-3);margin-top:8px}

.migalhas{font-size:var(--texto-sm);color:var(--app-texto-3);margin-bottom:12px}
.migalhas a{color:var(--app-azul)}
.artigo-grade{display:grid;gap:28px;padding:32px 0 48px}
@media (min-width:980px){.artigo-grade{grid-template-columns:minmax(0,1fr) 280px}}
.artigo{background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-lg);padding:24px clamp(16px,3vw,36px);min-width:0}
.artigo h1{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.artigo h2{font-size:1.25rem;margin-top:1.6em}
.artigo h3{font-size:1.0625rem;margin-top:1.3em}
.artigo li{margin:.35em 0}
.artigo .ficha{background:var(--app-superficie-2);border:1px solid var(--app-linha);border-radius:var(--raio-md);padding:12px 14px;color:var(--app-texto-2);font-size:.95rem;margin:0 0 16px}
.artigo .ficha p{margin:0 0 .4em}
.artigo .ficha p:last-child{margin:0}
.artigo .status-linha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;color:var(--app-texto-2);font-size:var(--texto-sm)}
.lateral{display:flex;flex-direction:column;gap:14px}
.lateral .cartao h2{font-size:1rem;margin:0}
.lateral ul{list-style:none;padding:0;margin:0}
.lateral li{margin:0;border-top:1px solid var(--app-linha)}
.lateral li:first-child{border-top:0}
.lateral li a{display:flex;align-items:center;min-height:var(--alvo-min);padding:6px 0;text-decoration:none;font-size:.95rem}
.lateral li a:hover{text-decoration:underline}

/* ---------- vídeos ---------- */
.video{background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-lg);padding:20px;margin:0 0 16px}
.video h3{font-size:1.125rem;margin:0 0 6px}
.video .meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:var(--texto-sm);color:var(--app-texto-2);margin:0 0 12px}
.quadro-video{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;aspect-ratio:16/9;max-height:280px;width:100%;background:repeating-linear-gradient(135deg,#F1EFEA 0 14px,#EAE7E0 14px 28px);border:1px dashed #A8A69E;border-radius:var(--raio-md);color:var(--app-texto-2);font-weight:var(--peso-medio);padding:16px;margin:0 0 12px}
.video details{border-top:1px solid var(--app-linha);padding:6px 0}
.video summary{cursor:pointer;min-height:var(--alvo-min);display:flex;align-items:center;font-weight:var(--peso-forte);color:var(--app-azul)}
.video .cena{margin:0 0 .6em}
.video .cena b{color:var(--app-texto-2);font-size:var(--texto-sm);margin-right:6px}

/* ---------- documentos ---------- */
.minuta-faixa{display:flex;gap:12px;align-items:flex-start;background:var(--sinal-alerta-fundo);border:2px solid var(--sinal-alerta);color:#4F3B0B;padding:14px 16px;border-radius:var(--raio-md);margin:0 0 20px}
.minuta-faixa strong{display:block;letter-spacing:.04em}
.minuta-faixa .ic{color:var(--sinal-alerta);margin-top:2px}
.documento{background:var(--app-superficie);border:1px solid var(--app-linha);border-radius:var(--raio-lg);padding:24px clamp(16px,3vw,40px);margin:28px 0 48px}
.documento h2{font-size:1.2rem;margin-top:1.6em}
.documento h3{font-size:1.05rem;margin-top:1.2em}
.documento .nota-tecnica{display:block;font-size:var(--texto-sm);color:var(--app-texto-2);background:var(--app-superficie-2);border-left:3px solid var(--app-linha-forte);padding:6px 10px;margin:6px 0 12px}
.a-definir{background:#FFF2C9;color:#4F3B0B;padding:0 4px;border-radius:3px;font-weight:var(--peso-medio)}

/* ---------- rodapé ---------- */
.rodape-site{background:var(--app-grafite);color:#C9D1DB;padding:40px 0 28px;margin-top:0;font-size:.95rem}
.rodape-site a{color:var(--app-azul-claro)}
.rodape-grade{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.rodape-site h2{color:#fff;font-size:1rem;margin:0 0 8px}
.rodape-site ul{list-style:none;padding:0;margin:0}
.rodape-site li{margin:0}
.rodape-site li a{display:inline-flex;align-items:center;min-height:36px}
.rodape-site .marca-palavra{color:#fff}
.rodape-site .fim{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:16px;font-size:var(--texto-sm);color:#AEB8C4}
.rodape-site .fim p{margin:0 0 .4em}

@media print{
  .topo,.faixa-previa,.rodape-site,.filtros,.menu-botao{display:none!important}
  body{background:#fff}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.sem-margem{margin:0}
.cartao h2.h3{display:flex;gap:10px;align-items:center;font-size:1.0625rem;margin:0}
.cartao h2.h3 .ic{color:var(--app-azul);width:22px;height:22px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:420px){
  .topo-in{gap:8px;flex-wrap:nowrap}
  .js .topo-in{flex-wrap:wrap}
  .marca-palavra{font-size:1.2rem}
  .menu-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-botao{padding:0;justify-content:center}
  .botao.entrar{padding:8px 12px}
}
.resultados h3 a{display:inline-block;padding:10px 0;margin:-10px 0}
.video summary{list-style:none;justify-content:space-between;gap:12px}
.video summary::-webkit-details-marker{display:none}
.video summary::after{content:"+";font-size:1.3rem;line-height:1}
.video details[open] summary::after{content:"\2212"}

/* ---------- página principal (institucional) ---------- */
.nav-inst{margin-left:auto}
.nav-inst ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav-inst li{margin:0}
.nav-inst a{display:inline-flex;align-items:center;min-height:var(--alvo-min);padding:0 12px;border-radius:var(--raio-md);color:var(--app-texto);text-decoration:none;font-weight:var(--peso-medio)}
.nav-inst a:hover{background:var(--app-azul-suave);color:var(--app-azul-escuro)}
@media (min-width:920px){.abertura-institucional .caixa{grid-template-columns:minmax(0,1fr)}}
.abertura-institucional h1{max-width:820px}
.abertura-institucional .lead{max-width:720px}
.produto-cartao{max-width:780px;margin-top:20px;padding:24px}
.produto-cartao h3{margin:0 0 4px}
.marca-produto{display:inline-flex;align-items:baseline;gap:8px}
.produto-cartao .marca-palavra{font-size:1.6rem;color:var(--app-grafite)}
.produto-cartao .marca-sub{font-size:1.25rem}
.produto-cartao .produto-linha{font-size:1.0625rem;color:var(--app-texto)}
.estagio-linha{background:var(--app-azul-suave);border-radius:var(--raio-md);padding:8px 12px;color:#084E86!important}
.produto-cartao .botoes{margin-top:8px}

/* ---------- abertura do produto ---------- */
.abertura h1 .linha{display:block}
.abertura .lead-forte{font-size:clamp(1.15rem,1rem + .8vw,1.45rem);font-weight:var(--peso-forte);color:#fff;margin:.1em 0 .5em}
.figura-abertura{margin:0}
.figura-abertura figcaption{font-size:var(--texto-sm);color:#C4CCD6;text-align:center;margin:12px auto 0;max-width:300px}
.abertura .moldura-celular{max-width:280px;border-color:#2B3440}

/* ---------- capturas reais ---------- */
.moldura-celular{display:block;width:100%;max-width:300px;margin:0 auto;border:8px solid #1F2124;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.28)}
.moldura-celular img,.moldura-computador img{display:block;width:100%;height:auto}
.moldura-computador{display:block;border:1px solid var(--app-linha-forte);border-radius:var(--raio-md);overflow:hidden;background:#fff;box-shadow:var(--sombra-1)}
.demo-grade,.demo-vitrine{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;margin:20px 0 8px}
.demo-fig{margin:0;min-width:0}
.demo-fig.computador{flex:2 1 min(var(--larg,460px),460px);max-width:var(--larg,100%)}
.demo-fig.celular{flex:1 1 220px;max-width:min(320px,var(--larg,320px))}
.demo-link{display:block;text-decoration:none;border-radius:var(--raio-md)}
.demo-fig figcaption{font-size:var(--texto-sm);color:var(--app-texto-2);margin-top:10px;max-width:640px}
.nota-atualizacao{display:block;margin-top:6px;background:var(--sinal-alerta-fundo);color:var(--sinal-alerta);padding:4px 8px;border-radius:6px;font-weight:var(--peso-medio)}
.secao-demo{padding:28px 0 12px;border-top:1px solid var(--app-linha);margin-top:20px}
.secao-demo h2{display:flex;gap:10px;align-items:center}
.secao-demo h2 .ic{color:var(--app-azul);width:24px;height:24px}
.aviso-curto{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--sinal-alerta-fundo);border:1px solid #E6D3A5;border-radius:var(--raio-md);padding:10px 14px;max-width:760px}

/* ---------- problemas, limites, listas ---------- */
.problema .dor{font-size:var(--texto-sm);font-weight:var(--peso-medio);color:var(--app-texto-3);border-left:3px solid var(--app-linha-forte);padding-left:8px}
.limites{margin-top:28px;background:var(--app-superficie-2);border:1px solid var(--app-linha);border-radius:var(--raio-lg);padding:18px 20px}
.limites h3{font-size:1.0625rem}
.limites ul{margin:0}
.itens > li.limite{border-left:3px solid #E6D3A5;padding-left:12px}
.itens > li.limite .txt b{color:var(--sinal-alerta)}
.fim-lista{margin-top:14px}
.espaco-acima{margin-top:14px}
.secao-videos{padding:24px 0 8px}
.video h3{margin-bottom:8px}
.referencia{margin-top:1.5em}
.lead-forte{font-weight:var(--peso-forte)}
.quadro-video{aspect-ratio:auto;min-height:88px;max-height:none}

/* ---------- foco nos fundos escuros ----------
   O anel azul padrão fica abaixo de 3:1 sobre o grafite; na abertura e no
   rodapé o anel usa o azul claro. */
.abertura :focus-visible,.rodape-site :focus-visible{outline-color:var(--app-azul-claro)}

/* ---------- celular: texto corrido com pelo menos 16 px ----------
   No computador ficam os tamanhos acima. No celular, todo texto de leitura
   (descrições, resumos, tabelas, notas, legendas) vai a 16 px; ficam menores
   só selos, metadados, migalhas, rótulos e contagens. */
@media (max-width:767px){
  .itens .txt span,.resultados p,.artigo .ficha,.lateral li a,table,
  .nav-principal a,.chip,.campo label,.campo .rot,
  .texto-3,.abertura .nota,.problema .dor,.legenda li,.artigo .status-linha,
  .documento .nota-tecnica,.demo-fig figcaption,.figura-abertura figcaption{font-size:1rem}
  th,td{padding:8px 10px}
}