/* ==========================================================================
   Páginas institucionais e comerciais: como contratar, implantação, suporte,
   segurança e tabela de integrações (diferencial.php). Carregado com
   $extra_css = ['institucional.css'] antes do header. Usa os tokens de style.css.
   ========================================================================== */

/* ---------- Índice da página (âncoras no topo) ---------- */
.inst-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px auto 0; max-width: 760px; }
.inst-toc a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: background .3s, color .3s, box-shadow .3s; }
.inst-toc a:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); }

.inst-after { text-align: center; margin-top: 44px; }
.inst-attr { max-width: 640px; margin: 18px auto 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.inst-kicker { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }

/* ---------- Composição da proposta ---------- */
.inst-prop { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
.inst-prop__col { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.inst-prop__col--open { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.inst-prop__h { display: flex; align-items: center; gap: 10px; font-size: 19px; letter-spacing: -.015em; }
.inst-prop__sub { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.inst-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px rgba(245,158,11,.15); }
.inst-dot--ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.inst-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.inst-list li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.inst-list li:first-child { border-top: 0; }
.inst-list__ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--blue); background: rgba(47,139,245,.08); box-shadow: inset 0 0 0 1px rgba(47,139,245,.18); }
.inst-list__ico .ico { width: 20px; height: 20px; }
.inst-list strong { display: block; font: 600 16px/1.35 var(--f-display); color: var(--ink); }
.inst-list p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.inst-open { list-style: none; margin: 16px 0 0; padding: 0; }
.inst-open li { display: grid; gap: 3px; padding: 13px 0; border-top: 1px dashed var(--line-2); }
.inst-open li:first-child { border-top: 0; }
.inst-open strong { font: 600 15.5px/1.35 var(--f-display); color: var(--ink); }
.inst-open span { font-size: 14px; color: var(--muted); }

/* links pequenos dentro de listas */
.inst-q__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--blue); }
.inst-q__link .ico { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.inst-q__link:hover .ico { transform: translateX(3px); }

/* ---------- Glossário (termos da proposta) ---------- */
.inst-terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.inst-term { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.inst-term__n { position: absolute; top: 24px; right: 22px; font: 500 12px/1 var(--f-mono); color: var(--faint); }
.inst-term h3 { font-size: 18.5px; letter-spacing: -.015em; }
.inst-term__quem { justify-self: start; display: inline-flex; align-items: center; min-height: 26px; padding: 5px 10px; border-radius: 999px; background: var(--grad-soft); font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-2); }
.inst-term p { font-size: 14.5px; color: var(--muted); }
.inst-note { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 26px auto 0; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; color: var(--ink-2); }
.inst-note .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }

/* ---------- O que cada área avalia ---------- */
.inst-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.inst-area { padding: 28px 26px; border-radius: 26px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.inst-area__head { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.inst-area__head .icon3d { flex: none; width: 50px; height: 50px; }
.inst-area__head h3 { font-size: 20px; letter-spacing: -.02em; }
.inst-area__head small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.inst-q { list-style: none; margin: 8px 0 0; padding: 0; }
.inst-q li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 13px 0; border-top: 1px dashed var(--line-2); }
.inst-q li:first-child { border-top: 0; }
.inst-q__box { width: 16px; height: 16px; margin-top: 3px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.inst-q p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* lista do bloco "Não é você quem decide?" com links */
.decide__list li > a { display: flex; align-items: center; gap: 14px; width: 100%; color: inherit; }
.decide__list li > a > span { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); }

/* ---------- Suporte: públicos e canais ---------- */
.inst-aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inst-aud__card { display: grid; gap: 10px; align-content: start; padding: 26px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
a.inst-aud__card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3); }
.inst-aud__card--main { box-shadow: inset 0 0 0 1.5px rgba(47,139,245,.45), var(--sh-2); }
.inst-aud__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--blue); background: rgba(47,139,245,.08); box-shadow: inset 0 0 0 1px rgba(47,139,245,.18); }
.inst-aud__card--main .inst-aud__ico { background: var(--grad); color: #fff; box-shadow: none; }
.inst-aud__ico .ico { width: 21px; height: 21px; }
.inst-aud__card strong { font: 600 17px/1.3 var(--f-display); color: var(--ink); }
.inst-aud__card p { font-size: 14.5px; color: var(--muted); }
.inst-aud__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--ink); }
.inst-aud__go .ico { width: 15px; height: 15px; }

.sgrupo + .sgrupo { margin-top: clamp(40px, 5vw, 60px); }
.sgrupo .scanais { grid-template-columns: repeat(var(--n, 3), 1fr); }
.sgrupo .scanais .scanal { padding: 26px; }
.sgrupo__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.sgrupo__head h3 { font-size: 22px; letter-spacing: -.02em; }
.sgrupo__head p { font-size: 14.5px; color: var(--muted); }
.scanal__t { font-size: 20px; letter-spacing: -.02em; }
.scanal--main .scanal__t { color: #fff; }
.scanal__acesso { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.scanal__acesso .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--blue); }

/* ---------- Tabela de integrações (diferencial.php) ---------- */
.itab { border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); overflow: hidden; }
.itab__t { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.itab__t thead th { padding: 16px 18px; background: var(--bg); text-align: left; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.itab__t tbody th, .itab__t tbody td { padding: 16px 18px; vertical-align: top; text-align: left; border-top: 1px solid var(--line); color: var(--ink-2); }
.itab__t tbody th { font: 600 15px/1.4 var(--f-display); color: var(--ink); width: 19%; }
.itab__t tbody td:nth-child(3) { width: 30%; color: var(--muted); }
.itab__t tbody tr:hover { background: #FBFCFF; }
.itab__st { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(16,185,129,.1); color: #047857; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.itab__st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.itab__st--proj { background: rgba(245,158,11,.12); color: #92400E; }

/* ---------- Implantação: etapas com os dois lados ---------- */
.impl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: impl; }
.impl__step { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; padding: 24px 26px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.impl__head { display: grid; grid-template-columns: auto auto 1fr; gap: 16px; align-items: start; }
.impl__n { padding-top: 16px; font: 500 13px/1 var(--f-mono); color: var(--blue); }
.impl__head h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 6px; }
.impl__head p { font-size: 15px; color: var(--muted); }
.impl__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.impl__side { padding: 14px 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.impl__side--wb { background: rgba(47,139,245,.06); box-shadow: inset 0 0 0 1px rgba(47,139,245,.2); }
.impl__side small { display: block; margin-bottom: 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.impl__side--wb small { color: var(--blue); }
.impl__side p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.inst-two { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.inst-check { padding: clamp(24px, 3vw, 34px); border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.inst-check .ticks--lg { margin-top: 0; }
.inst-callout { display: grid; gap: 8px; justify-items: start; margin-top: 26px; padding: 20px 22px; border-radius: 20px; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(47,139,245,.15); }
.inst-callout strong { font: 600 16.5px/1.3 var(--f-display); color: var(--ink); }
.inst-callout p { font-size: 14.5px; color: var(--ink-2); }
.inst-callout .link-arrow { font-size: 14.5px; margin-top: 4px; }

.inst-factors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inst-factor { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.inst-factor .gprat__ico { flex: none; }
.inst-factor h3 { font-size: 17.5px; letter-spacing: -.015em; margin-bottom: 4px; }
.inst-factor p { font-size: 14.5px; color: var(--muted); }

/* ---------- Segurança: direitos e documentos ---------- */
.inst-rights { padding: clamp(24px, 3vw, 34px); border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-3); }
.inst-rights .eyebrow { margin-bottom: 16px; }
.inst-rights ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.inst-rights li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.inst-rights li .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--blue); }

.inst-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.inst-doc { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 28px 26px; border-radius: 26px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.inst-doc h3 { font-size: 20px; letter-spacing: -.02em; }
.inst-doc p { font-size: 14.5px; color: var(--muted); }
.inst-doc__meta { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .05em; color: var(--muted); }
.inst-doc .link-arrow { font-size: 15px; margin-top: 4px; }
.inst-doc--dark { background: var(--ink); box-shadow: var(--sh-3); }
.inst-doc--dark h3 { color: #fff; }
.inst-doc--dark p { color: rgba(255,255,255,.72); }
.inst-doc--dark .gprat__ico { background: var(--grad); color: #fff; box-shadow: none; }
.inst-doc__contact { display: inline-flex; align-items: center; gap: 8px; font: 600 15.5px/1.5 var(--f-display); color: #fff; word-break: break-word; }
.inst-doc__contact .ico { flex: none; width: 16px; height: 16px; color: var(--cyan); }
.inst-steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.inst-steps li::marker { font: 600 13px var(--f-mono); color: var(--blue); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .sgrupo .scanais { grid-template-columns: repeat(2, 1fr); }
  .inst-terms { grid-template-columns: repeat(2, 1fr); }
  .inst-factors { grid-template-columns: repeat(2, 1fr); }
  .impl__step { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 980px) {
  .inst-prop, .inst-two, .inst-areas, .inst-aud, .inst-docs { grid-template-columns: 1fr; }
  .itab { background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
  .itab__t, .itab__t tbody, .itab__t tr, .itab__t th, .itab__t td { display: block; width: 100% !important; }
  .itab__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .itab__t tbody tr { margin-bottom: 12px; padding: 6px 0; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
  .itab__t tbody th, .itab__t tbody td { border-top: 0; padding: 10px 18px; }
  .itab__t tbody td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
  .itab__t tbody th { padding-top: 16px; font-size: 16px; }
}
@media (max-width: 640px) {
  .sgrupo .scanais { grid-template-columns: 1fr; }
  .inst-terms, .inst-factors { grid-template-columns: 1fr; }
  .impl__step { padding: 20px 18px; }
  .impl__head { grid-template-columns: auto 1fr; }
  .impl__head .icon3d { display: none; }
  .impl__n { padding-top: 6px; }
  .impl__sides { grid-template-columns: 1fr; }
  .inst-toc a { height: 34px; font-size: 13px; }
  .inst-area { padding: 24px 20px; }
}

/* ===== TIER III explicado (seguranca.php#tier-iii) ===== */
.tier-analogia { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 clamp(36px, 5vw, 56px); padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--line); }
.tier-analogia .icon3d { flex: none; }
.tier-analogia p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 900px; }
.tier-analogia b { display: block; margin-bottom: 8px; font: 600 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.tier-escada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; padding-top: 14px; }
.tier-nivel { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: calc(210px + var(--n, 0) * 34px); padding: 22px 20px; border-radius: var(--r-lg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.tier-nivel small { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); }
.tier-nivel__n { font: 700 44px/1 var(--f-display); letter-spacing: -.04em; color: var(--faint); margin-bottom: auto; padding-bottom: 14px; }
.tier-nivel h3 { margin: 0; font: 600 17px/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.tier-nivel p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.tier-nivel.is-on { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: var(--sh-3); }
.tier-nivel.is-on .tier-nivel__n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier-nivel.is-on p { color: var(--ink-2); }
.tier-nivel__chip { position: absolute; top: -13px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--ink); color: #fff; font: 600 11.5px/1 var(--f-body); white-space: nowrap; }
.tier-nivel__chip .ico { width: 13px; height: 13px; color: var(--cyan); }
.tier-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 32px); margin-top: clamp(36px, 5vw, 56px); }
.tier-box { padding: clamp(24px, 3vw, 34px); border-radius: var(--r-xl); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.tier-box__t { margin: 0 0 22px; font: 600 clamp(19px, 2vw, 22px)/1.25 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.tier-req, .tier-ben { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.tier-req { counter-reset: tr; }
.tier-req li, .tier-ben li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.tier-req li { counter-increment: tr; }
.tier-req li::before { content: counter(tr); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); font: 700 15px/1 var(--f-display); color: var(--blue); }
.tier-ben__ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: var(--sh-glow); }
.tier-ben__ico .ico { width: 18px; height: 18px; }
.tier-req b, .tier-ben b { display: block; margin-bottom: 4px; font: 600 15.5px/1.35 var(--f-display); color: var(--ink); }
.tier-req li > span, .tier-ben li > span:last-child { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.tier-nota { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 18px 22px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.tier-nota__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-soft); color: var(--blue); }
.tier-nota__ico .ico { width: 17px; height: 17px; }
.tier-nota p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tier-fonte { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
@media (max-width: 1000px) {
  .tier-escada { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .tier-nivel { min-height: 0; }
  .tier-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tier-escada { grid-template-columns: 1fr; }
  .tier-analogia { flex-direction: column; gap: 12px; }
}