/* ==========================================================================
   Appen Seguros — Design System "proteção em movimento"
   v0.1 · 21/08/2026 · F3
   Paleta extraída do logo oficial (ops/payload/appen/logo-appen.png)
   ========================================================================== */

:root{
  /* Marca — valores medidos no logo */
  --azul:        #0e2f81;
  --azul-escuro: #0a2364;
  --azul-tinta:  #071a4d;
  --verde:       #007239;
  --laranja:     #f18e20;
  --vermelho:    #e6442d;

  /* Neutros */
  --tinta:       #0b1220;
  --tinta-2:     #34405a;
  --tinta-3:     #5a6478;
  --linha:       #e4e7ef;
  --linha-forte: #cfd5e4;
  --papel:       #ffffff;
  --papel-2:     #f7f8fb;
  --papel-3:     #eef1f8;
  --azul-nevoa:  #eef2fb;

  /* Tipografia */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-ed: "Instrument Serif", Georgia, "Times New Roman", serif;

  --t-mono:  clamp(.8125rem, .79rem + .2vw, .85rem);
  --t-peq:   clamp(.9375rem, .9rem + .2vw, .97rem);
  --t-base:  clamp(1rem, .96rem + .25vw, 1.075rem);
  --t-lead:  clamp(1.125rem, 1.02rem + .55vw, 1.375rem);
  --t-h3:    clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --t-h2:    clamp(1.75rem, 1.35rem + 1.9vw, 2.9rem);
  --t-h1:    clamp(2.35rem, 1.6rem + 3.6vw, 4.5rem);
  --t-num:   clamp(2.5rem, 1.6rem + 4.2vw, 5rem);

  /* Espaço */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem;
  --e6:2rem;   --e7:3rem;  --e8:4rem;   --e9:6rem; --e10:8rem;

  --raio:14px; --raio-p:8px; --raio-g:22px;
  --largura:1200px;
  --sombra:0 1px 2px rgba(11,18,32,.04), 0 8px 28px rgba(11,18,32,.06);
  --sombra-alta:0 2px 6px rgba(11,18,32,.06), 0 24px 60px rgba(11,18,32,.12);

  --mov: 420ms cubic-bezier(.22,.61,.36,1);
  --mov-r: 180ms cubic-bezier(.22,.61,.36,1);

  --header-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Em telas de trabalho (>=1200px) toda a tipografia desce 20% de uma vez:
   os tamanhos são todos em rem, então reduzir a raiz reduz tudo proporcionalmente.
   O celular continua com a escala cheia (mínimos de acessibilidade preservados). */
@media (min-width:1200px){ html{font-size:80%} }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--fonte); font-size:var(--t-base); line-height:1.6;
  font-feature-settings:"cv05" 1,"ss01" 1; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.08; letter-spacing:-.028em; font-weight:600}
h1{font-size:var(--t-h1); letter-spacing:-.035em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3); letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--azul); outline-offset:3px; border-radius:4px}

.container{width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem)}
.secao{padding-block:clamp(3.5rem,8vw,7rem)}
.secao--nevoa{background:var(--papel-2)}
.secao--tinta{background:var(--azul-tinta); color:#fff}
.pilha>*+*{margin-top:var(--e4)}

.rotulo{
  font-size:var(--t-mono); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3); display:flex; align-items:center; gap:.6rem;
}
.rotulo::before{content:""; width:26px; height:2px; background:var(--laranja); border-radius:2px; flex:none}
.secao--tinta .rotulo{color:#9fb0dd}
.lead{font-size:var(--t-lead); line-height:1.45; color:var(--tinta-2); letter-spacing:-.012em}
.secao--tinta .lead{color:#c7d2ee}
.ed{font-family:var(--fonte-ed); font-weight:400; font-style:italic; letter-spacing:-.01em}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:0 1.35rem; border-radius:999px; border:1px solid transparent;
  font-size:var(--t-peq); font-weight:600; letter-spacing:-.005em; text-decoration:none;
  cursor:pointer; transition:transform var(--mov-r), background var(--mov-r), border-color var(--mov-r), color var(--mov-r);
  font-family:inherit;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primario{background:var(--azul); color:#fff}
.btn--primario:hover{background:var(--azul-escuro)}
.btn--fantasma{background:transparent; color:var(--azul); border-color:var(--linha-forte)}
.btn--fantasma:hover{border-color:var(--azul); background:var(--azul-nevoa)}
.btn--claro{background:#fff; color:var(--azul-tinta)}
.btn--claro:hover{background:#eef2fb}
.btn--vazio-claro{background:transparent; color:#fff; border-color:rgba(255,255,255,.34)}
.btn--vazio-claro:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn--g{min-height:54px; padding:0 1.75rem; font-size:var(--t-base)}
.acoes{display:flex; flex-wrap:wrap; gap:var(--e3)}

.link-seta{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:var(--t-peq);
  color:var(--azul); text-decoration:none; min-height:44px;
}
@media (min-width:1000px){ .link-seta{min-height:0} }
.link-seta svg{transition:transform var(--mov-r)}
.link-seta:hover svg{transform:translateX(3px)}

/* ---------- Header ---------- */
.pular{position:absolute; left:-9999px; top:0; z-index:200; background:#fff; padding:.75rem 1rem; border-radius:0 0 8px 0}
.pular:focus{left:0}

.cabecalho{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent; transition:border-color var(--mov-r), background var(--mov-r);
}
.cabecalho[data-fixado="sim"], .cabecalho[data-menu="aberto"]{border-bottom-color:var(--linha)}
.cabecalho__barra{display:flex; align-items:center; gap:var(--e5); height:var(--header-h)}
.marca{display:flex; align-items:center; flex:none; text-decoration:none; min-height:46px}
.marca img{height:26px; width:auto}
.nav{display:none; align-items:center; gap:var(--e1); margin-inline-start:var(--e3)}
.nav__item{position:relative}
.nav__gatilho{
  background:none; border:0; font-family:inherit; font-size:var(--t-peq); font-weight:500;
  color:var(--tinta-2); padding:.55rem .7rem; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.3rem; text-decoration:none;
  transition:color var(--mov-r), background var(--mov-r);
}
.nav__gatilho:hover{color:var(--tinta); background:var(--papel-3)}
.nav__gatilho[aria-expanded="true"]{color:var(--azul); background:var(--azul-nevoa)}
.nav__gatilho svg{transition:transform var(--mov-r)}
.nav__gatilho[aria-expanded="true"] svg{transform:rotate(180deg)}
.cabecalho__fim{margin-inline-start:auto; display:flex; align-items:center; gap:var(--e3)}
/* No celular o CTA do topo é redundante: a barra fixa de baixo já carrega a ação,
   e sem ele o cabeçalho cabe folgado em 320px. */
.cabecalho__fim .btn{display:none}
.hamburguer{margin-inline-end:-9px}
@media (min-width:1000px){
  .cabecalho__fim .btn{display:inline-flex; min-height:40px; padding:0 1.05rem}
}

/* Mega menu */
.mega{
  display:none; /* QA-01: só existe no desktop — ver @media abaixo */
  position:absolute; inset-inline:0; top:100%; background:var(--papel);
  border-bottom:1px solid var(--linha); box-shadow:var(--sombra-alta);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--mov-r), transform var(--mov-r), visibility var(--mov-r);
}
.mega[data-aberto="sim"]{opacity:1; visibility:visible; transform:translateY(0)}
.mega__grade{display:grid; grid-template-columns:repeat(3,max-content); justify-content:start; column-gap:var(--e7); row-gap:var(--e5); padding-block:var(--e6) var(--e5); max-width:900px; margin-inline:auto}
.mega__rodape{border-top:1px solid var(--linha); padding-block:var(--e4) var(--e5);
  display:grid; grid-template-columns:1fr auto; gap:var(--e4); align-items:stretch}
.mega__blog{
  display:grid; align-content:center; gap:.2rem; padding:var(--e4) var(--e5);
  border:1px solid var(--linha); border-radius:var(--raio); text-decoration:none; color:inherit;
  transition:border-color var(--mov-r), background var(--mov-r);
}
.mega__blog:hover{border-color:var(--azul); background:var(--azul-nevoa)}
.mega__blog strong{font-size:1.02rem; letter-spacing:-.015em}
.mega__blog span{font-size:var(--t-mono); color:var(--tinta-3)}
.mega__blog .link-seta{min-height:0; margin-top:.35rem}
.mega__col h3{font-size:var(--t-peq); letter-spacing:.02em; color:var(--tinta); margin-bottom:var(--e3)}
.mega__col ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.mega__col a{
  display:block; padding:.45rem .6rem; margin-inline:-.6rem; border-radius:8px;
  font-size:var(--t-peq); color:var(--tinta-3); text-decoration:none;
  transition:color var(--mov-r), background var(--mov-r);
}
.mega__col a:hover{color:var(--azul); background:var(--azul-nevoa)}
.mega__destaque{
  background:var(--azul-nevoa); border-radius:var(--raio); padding:var(--e4) var(--e5);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--e3) var(--e5);
  text-decoration:none; color:inherit;
  border:1px solid rgba(14,47,129,.1); transition:border-color var(--mov-r), background var(--mov-r);
}
.mega__destaque .rotulo{grid-column:1; grid-row:1/3; align-self:center; white-space:nowrap}
.mega__destaque:hover{border-color:rgba(14,47,129,.32); background:#e6ecfa}
.mega__destaque .rotulo::before{background:var(--verde)}
.mega__destaque strong{grid-column:2; grid-row:1; font-size:1.06rem; font-weight:600; letter-spacing:-.018em; line-height:1.2}
.mega__destaque>span:not(.rotulo):not(.link-seta){grid-column:2; grid-row:2; font-size:var(--t-peq); color:var(--tinta-3)}
.mega__destaque .link-seta{grid-column:3; grid-row:1/3; align-self:center; white-space:nowrap}

/* Menu mobile */
.hamburguer{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px;
  background:none; border:0; cursor:pointer; padding:0 9px; border-radius:8px;
}
.hamburguer span{display:block; height:2px; background:var(--tinta); border-radius:2px; transition:transform var(--mov-r), opacity var(--mov-r)}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.painel-mobile{
  position:fixed; inset:var(--header-h) 0 0; background:var(--papel); z-index:99;
  overflow-y:auto; padding:var(--e5) 0 var(--e8);
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--mov-r), transform var(--mov-r), visibility var(--mov-r);
}
.painel-mobile[data-aberto="sim"]{opacity:1; visibility:visible; transform:translateY(0)}
.acordeao{border-top:1px solid var(--linha)}
.acordeao__gatilho{
  width:100%; background:none; border:0; font-family:inherit; font-size:1.05rem; font-weight:600;
  color:var(--tinta); padding:1.05rem 0; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; text-align:start; letter-spacing:-.015em;
}
.acordeao__gatilho svg{transition:transform var(--mov-r); flex:none}
.acordeao__gatilho[aria-expanded="true"] svg{transform:rotate(45deg)}
.acordeao__corpo{display:none; padding-bottom:var(--e4)}
.acordeao__corpo[data-aberto="sim"]{display:block}
.acordeao__corpo ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.acordeao__corpo a{display:flex; align-items:center; min-height:46px; padding:.35rem 0; color:var(--tinta-3); text-decoration:none; font-size:var(--t-peq)}
.painel-mobile .acoes{margin-top:var(--e6); flex-direction:column}
.painel-mobile .btn{width:100%}

@media (min-width:1000px){
  .mega{display:block}
  .nav{display:flex}
  .hamburguer{display:none}
  .painel-mobile{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(3.5rem,9vw,7.5rem) clamp(3rem,7vw,6rem)}
.hero__fita{position:absolute; inset-block:0; inset-inline-end:-8%; width:min(760px,72vw); pointer-events:none; opacity:.95}
.hero__grade{position:relative; display:grid; gap:var(--e6); max-width:56ch}
.hero h1{margin-bottom:var(--e2)}
.hero h1 em{font-family:var(--fonte-ed); font-style:italic; font-weight:400; color:var(--azul)}
.hero .acoes{margin-top:var(--e2)}
.hero__nota{font-size:var(--t-peq); color:var(--tinta-3); display:flex; align-items:center; gap:.5rem}
.ponto{width:7px; height:7px; border-radius:50%; background:var(--verde); flex:none}

/* ---------- Prova / números ---------- */
.prova{display:grid; gap:var(--e5); grid-template-columns:1fr}
@media (min-width:820px){.prova{grid-template-columns:1.15fr .85fr; align-items:center; gap:var(--e8)}}
.numerao{font-size:var(--t-num); font-weight:600; letter-spacing:-.05em; line-height:.92; color:var(--azul); font-variant-numeric:tabular-nums}
.numerao small{font-size:.42em; letter-spacing:-.02em; color:var(--tinta-3); font-weight:500}
.barra-comp{display:grid; gap:var(--e4); margin-top:var(--e5)}
.barra{display:grid; gap:.4rem}
.barra__topo{display:flex; justify-content:space-between; align-items:baseline; font-size:var(--t-peq); color:var(--tinta-2)}
.barra__topo b{font-size:1.05rem; font-variant-numeric:tabular-nums; color:var(--tinta)}
.barra__trilho{height:10px; background:var(--papel-3); border-radius:999px; overflow:hidden}
.barra__fita{height:100%; border-radius:999px; transform-origin:left; animation:cresce 1.1s cubic-bezier(.22,.61,.36,1) both}
.barra--alta .barra__fita{background:linear-gradient(90deg,var(--vermelho),var(--laranja))}
.barra--media .barra__fita{background:var(--azul)}
.barra--baixa .barra__fita{background:var(--verde)}
@keyframes cresce{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.fonte-nota{font-size:var(--t-mono); color:var(--tinta-3); margin-top:var(--e4); line-height:1.5}
.fonte-nota a{color:var(--tinta-2)}

/* ---------- Prioridades ---------- */
.prioridades{display:grid; gap:var(--e4)}
@media (min-width:900px){.prioridades{grid-template-columns:1.35fr 1fr 1fr; align-items:stretch}}
.card{
  position:relative; background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:var(--e6); display:flex; flex-direction:column; gap:var(--e3); text-decoration:none; color:inherit;
  overflow:hidden; transition:border-color var(--mov), transform var(--mov), box-shadow var(--mov);
}
.card:hover{border-color:var(--linha-forte); transform:translateY(-3px); box-shadow:var(--sombra)}
.card__fita{position:absolute; inset-block-start:0; inset-inline:0; height:4px}
.card--saude{background:var(--azul-tinta); color:#fff; border-color:transparent; padding-block:var(--e7)}
.card--saude:hover{border-color:transparent}
.card--saude p{color:#c7d2ee}
.card h3{margin-block:var(--e1)}
.card--saude h3{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem)}
.card p{color:var(--tinta-3); font-size:var(--t-peq)}
.card .link-seta{margin-top:auto; padding-top:var(--e3)}
.card--saude .link-seta{color:#fff}

/* ---------- Método (fita) ---------- */
.metodo{display:grid; gap:var(--e5); counter-reset:passo}
@media (min-width:860px){.metodo{grid-template-columns:repeat(4,1fr); gap:var(--e4)}}
.passo{position:relative; padding-top:var(--e5)}
.passo::before{
  counter-increment:passo; content:"0" counter(passo);
  font-size:var(--t-mono); font-weight:600; letter-spacing:.1em; color:var(--tinta-3);
}
.passo__linha{height:3px; border-radius:2px; margin-block:var(--e3); background:var(--linha-forte)}
.passo:nth-child(1) .passo__linha{background:var(--azul)}
.passo:nth-child(2) .passo__linha{background:var(--verde)}
.passo:nth-child(3) .passo__linha{background:var(--laranja)}
.passo:nth-child(4) .passo__linha{background:var(--vermelho)}
.passo h3{font-size:1.1rem; margin-bottom:var(--e2)}
.passo p{font-size:var(--t-peq); color:var(--tinta-3)}

/* ---------- Listas de portfólio ---------- */
.pilares{display:grid; gap:var(--e4)}
@media (min-width:760px){.pilares{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.pilares{grid-template-columns:repeat(3,1fr)}}
.pilar{border-top:2px solid var(--linha); padding-top:var(--e4)}
.pilar[data-cor="azul"]{border-color:var(--azul)}
.pilar[data-cor="verde"]{border-color:var(--verde)}
.pilar[data-cor="laranja"]{border-color:var(--laranja)}
.pilar[data-cor="vermelho"]{border-color:var(--vermelho)}
.pilar[data-cor="tinta"]{border-color:var(--tinta-2)}
.pilar h3{font-size:1.05rem; margin-bottom:var(--e2)}
.pilar p{font-size:var(--t-peq); color:var(--tinta-3)}

/* ---------- Jornada ---------- */
.jornada{display:grid; gap:var(--e5)}
@media (min-width:880px){.jornada{grid-template-columns:repeat(2,1fr); gap:var(--e6) var(--e8)}}
.jornada__item{display:flex; gap:var(--e4)}
.jornada__marca{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1)}
.jornada__item h3{font-size:1.05rem; margin-bottom:var(--e2); color:#fff}
.jornada__item p{font-size:var(--t-peq); color:#c7d2ee}

/* ---------- CTA final ---------- */
.cta-final{text-align:center; display:grid; gap:var(--e5); justify-items:center; max-width:62ch; margin-inline:auto}

/* ---------- Formulário ---------- */
.form{display:grid; gap:var(--e4)}
.campo{display:grid; gap:.4rem}
.campo label{font-size:var(--t-peq); font-weight:600; color:var(--tinta-2)}
.campo input[type="checkbox"]{
  width:24px; height:24px; min-width:24px; accent-color:var(--azul); margin:0; padding:0;
}
.campo label.aceite{
  display:flex; gap:.75rem; align-items:flex-start; font-weight:400; font-size:var(--t-peq);
  padding:.85rem 0; cursor:pointer; min-height:48px;
}
.campo input,.campo select,.campo textarea{
  font-family:inherit; font-size:var(--t-base); color:var(--tinta);
  padding:.85rem 1rem; border:1px solid var(--linha-forte); border-radius:var(--raio-p);
  background:var(--papel); transition:border-color var(--mov-r), box-shadow var(--mov-r); width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(14,47,129,.15);
}
.campo textarea{min-height:130px; resize:vertical}
.campo .ajuda{font-size:var(--t-mono); color:var(--tinta-3)}
.campo .erro{font-size:var(--t-mono); color:var(--vermelho); font-weight:600}
.campo[data-invalido="sim"] input,.campo[data-invalido="sim"] select,.campo[data-invalido="sim"] textarea{border-color:var(--vermelho)}
.duo{display:grid; gap:var(--e4)}
@media (min-width:640px){.duo{grid-template-columns:1fr 1fr}}
.mel{position:absolute; left:-9999px}

/* ---------- Rodapé ---------- */
.rodape{background:var(--azul-tinta); color:#c7d2ee; padding-block:var(--e8) var(--e6); font-size:var(--t-peq)}
.rodape a{color:#e6ecfa; text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape__grade{display:grid; gap:var(--e6); padding-bottom:var(--e7)}
@media (min-width:820px){.rodape__grade{grid-template-columns:1.4fr 1fr 1fr}}
.rodape h3{color:#fff; font-size:var(--t-peq); letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--e3)}
.rodape ul{list-style:none; margin:0; padding:0; display:grid}
.rodape ul a{display:flex; align-items:center; min-height:46px}
@media (min-width:820px){.rodape ul{gap:.4rem} .rodape ul a{min-height:32px}}
.rodape__legal{border-top:1px solid rgba(255,255,255,.14); padding-top:var(--e5); display:grid; gap:var(--e3); font-size:var(--t-mono); line-height:1.6}
.rodape__aviso{color:#9fb0dd; max-width:78ch}

.barra-acao{
  position:fixed; inset-inline:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
  padding:.7rem clamp(.9rem,4vw,1.2rem) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93); backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px); border-top:1px solid var(--linha);
}
.barra-acao .btn{min-height:50px; padding:0 .9rem; font-size:var(--t-peq)}
.barra-acao .btn--zap{background:var(--verde); color:#fff}
.barra-acao .btn--zap:hover{background:#005c2e}
body{padding-bottom:88px}
@media (min-width:1000px){ .barra-acao{display:none} body{padding-bottom:0} }

/* ---------- Revelação no scroll ---------- */
.js [data-revela]{opacity:0; transform:translateY(18px); transition:opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1)}
.js [data-revela][data-visivel="sim"]{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js [data-revela]{opacity:1; transform:none}
}

/* ==========================================================================
   Blog — listagem, filtros e artigo
   ========================================================================== */
.filtros{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--e4)}
.filtro{
  font-family:inherit; font-size:var(--t-peq); font-weight:500; color:var(--tinta-2);
  background:var(--papel-2); border:1px solid var(--linha); border-radius:999px;
  padding:.6rem 1rem; min-height:44px; cursor:pointer;
  transition:background var(--mov-r), color var(--mov-r), border-color var(--mov-r);
}
.filtro:hover{border-color:var(--linha-forte); background:var(--papel-3)}
.filtro[aria-pressed="true"]{background:var(--azul); border-color:var(--azul); color:#fff}

.posts-grade{display:grid; gap:var(--e4)}
@media (min-width:700px){.posts-grade{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){
  .posts-grade{grid-template-columns:repeat(3,1fr)}
  .posts-grade--3{grid-template-columns:repeat(3,1fr)}
}
.post-cartao{
  display:flex; flex-direction:column; gap:var(--e3); text-decoration:none; color:inherit;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:var(--e5); transition:border-color var(--mov), transform var(--mov), box-shadow var(--mov);
}
.post-cartao:hover{border-color:var(--linha-forte); transform:translateY(-3px); box-shadow:var(--sombra)}
.post-cartao h3{font-size:1.15rem; letter-spacing:-.02em; line-height:1.22}
.post-cartao p{font-size:var(--t-peq); color:var(--tinta-3); margin:0}
.post-cartao .link-seta{margin-top:auto; padding-top:var(--e2)}
.post-cartao[hidden]{display:none}
@media (min-width:1040px){
  .post-cartao--destaque{grid-column:span 3; display:grid; grid-template-columns:1.25fr 1fr;
    gap:var(--e3) var(--e8); align-items:center; padding:var(--e7)}
  .post-cartao--destaque .post-meta{grid-column:1}
  .post-cartao--destaque h3{grid-column:1; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.15rem)}
  .post-cartao--destaque p{grid-column:2; grid-row:1/4; font-size:var(--t-base)}
  .post-cartao--destaque .link-seta{grid-column:1; padding-top:0}
}
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.65rem;
  font-size:var(--t-mono); color:var(--tinta-3)}
.post-cartao .post-meta{flex-wrap:nowrap; justify-content:space-between}
@media (max-width:479px){.post-cartao .post-meta{flex-wrap:wrap; justify-content:flex-start}}
.post-cartao .post-meta time{white-space:nowrap}
.post-cartao .chip{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip{background:var(--azul-nevoa); color:var(--azul); border-radius:999px;
  padding:.28rem .7rem; font-weight:600; letter-spacing:.01em}

/* Artigo */
.artigo{padding-block:clamp(2rem,5vw,3.5rem) 0}
.artigo__cabeca{max-width:74ch; display:grid; gap:var(--e4)}
.artigo__cabeca h1{font-size:clamp(1.9rem,1.35rem + 2.6vw,3.1rem)}
.migalhas{display:flex; flex-wrap:wrap; gap:.5rem; font-size:var(--t-mono); color:var(--tinta-3)}
.migalhas a{color:var(--tinta-3); text-decoration:none}
.migalhas a:hover{color:var(--azul)}
.artigo__corpo{max-width:70ch; padding-block:var(--e6) var(--e8)}
.artigo__corpo h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem); margin-top:var(--e7); margin-bottom:var(--e3)}
.artigo__corpo p{margin-bottom:var(--e4); line-height:1.72}
.artigo__corpo ul{margin:0 0 var(--e5); padding-left:0; list-style:none; display:grid; gap:var(--e3)}
.artigo__corpo li{position:relative; padding-left:1.65rem; line-height:1.62}
.artigo__corpo li::before{content:""; position:absolute; left:0; top:.62em; width:9px; height:2px;
  border-radius:2px; background:var(--laranja)}
.artigo__corpo strong{color:var(--tinta)}
.aviso-legal{
  margin-top:var(--e7); padding:var(--e5); background:var(--papel-2);
  border-left:3px solid var(--linha-forte); border-radius:0 var(--raio-p) var(--raio-p) 0;
  font-size:var(--t-mono); color:var(--tinta-3); line-height:1.6;
}

/* ==========================================================================
   Squad SEO/UX — sumário, CTA inline, verificador, rótulos de navegação
   ========================================================================== */
.nav-titulo{font-size:var(--t-peq); font-weight:600; letter-spacing:.02em;
  color:var(--tinta); margin:0 0 var(--e3)}
.rodape .nav-titulo{color:#fff; font-size:var(--t-peq); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:var(--e3)}
.doc-h2{font-size:1.35rem; letter-spacing:-.02em; margin-top:var(--e6)}

.sumario{border:1px solid var(--linha); border-radius:var(--raio-p);
  padding:.9rem 1.1rem; margin-bottom:var(--e5); background:var(--papel-2)}
.sumario summary{font-weight:600; font-size:var(--t-peq); cursor:pointer;
  color:var(--tinta-2); min-height:32px; display:flex; align-items:center}
.sumario ul{list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:2px}
.sumario li{padding:0}
.sumario li::before{content:none}
.sumario a{display:flex; align-items:center; min-height:42px; padding:.2rem 0;
  color:var(--azul); text-decoration:none; font-size:var(--t-peq)}
.sumario a:hover{text-decoration:underline}

.cta-inline{display:grid; gap:var(--e3); justify-items:start;
  background:var(--azul-nevoa); border:1px solid rgba(14,47,129,.14);
  border-radius:var(--raio); padding:var(--e5); margin-block:var(--e6)}
.cta-inline p{margin:0; font-size:var(--t-peq); color:var(--tinta-2)}
.cta-inline strong{color:var(--tinta)}

.verificador{background:var(--papel-2); border:1px solid var(--linha);
  border-radius:var(--raio-g); padding:var(--e6); display:grid; gap:var(--e4)}
.verificador__saida{display:grid; gap:var(--e3); justify-items:start;
  border-top:2px solid var(--laranja); padding-top:var(--e4)}
.verificador__faixa{font-weight:600; font-size:var(--t-lead); letter-spacing:-.015em}

.post-min{white-space:nowrap}
.chip[href]{text-decoration:none}
.chip[href]:hover{background:var(--azul); color:#fff}
.migalhas a[href^="blog"]{text-decoration:none}

/* destaque do blog também no celular */
.post-cartao--destaque{border-top:4px solid var(--laranja); background:var(--azul-nevoa)}
@media (min-width:1040px){.post-cartao--destaque{background:var(--papel)}}

/* leitura longa no celular: corpo do artigo um degrau acima */
.artigo__corpo p,.artigo__corpo li{font-size:clamp(1.0625rem,1rem + .3vw,1.125rem)}
.aviso-legal{font-size:var(--t-peq)}

/* ---------- Widget de chat (SVChat): acima da barra fixa no celular ------- */
@media (max-width:999px){
  iframe[src*="svchat"], [id*="svchat" i], [class*="svchat" i]{
    bottom:96px !important;
  }
}

/* ---------- Página de contato por canais ---------- */
.canais{display:grid; gap:var(--e4)}
@media (min-width:860px){.canais{grid-template-columns:repeat(2,1fr); max-width:760px}}
.canal{border:1px solid var(--linha); border-radius:var(--raio-g); padding:var(--e6);
  display:flex; flex-direction:column; gap:var(--e3); align-items:flex-start}
.canal h2{font-size:1.2rem; letter-spacing:-.02em}
.canal p{font-size:var(--t-peq); color:var(--tinta-3); flex:1}
.canal .btn{width:100%; max-width:100%; white-space:normal; word-break:break-all; line-height:1.3; padding-block:.6rem}
.canal--chat{background:var(--azul-nevoa); border-color:rgba(14,47,129,.18)}

/* ---------- Capacidades da Sophy (2x2) ---------- */
.capacidades{display:grid; gap:var(--e4)}
@media (min-width:820px){.capacidades{grid-template-columns:repeat(2,1fr)}}
.capacidades .card--saude{padding-block:var(--e6)}

/* ---------- Faixa Sophy na abertura da home ---------- */
.faixa-sophy{display:block; background:var(--azul-tinta); color:#fff; text-decoration:none;
  transition:background var(--mov-r)}
.faixa-sophy:hover{background:#0c2a75}
.faixa-sophy__grade{display:grid; gap:var(--e4); padding-block:var(--e5);
  align-items:center}
.faixa-sophy__marca{display:grid; gap:.15rem}
.faixa-sophy__marca strong{font-size:1.35rem; letter-spacing:-.02em}
.faixa-sophy__lista{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.faixa-sophy__lista li{position:relative; padding-left:1.15rem; font-size:var(--t-peq);
  color:#c7d2ee; line-height:1.4}
.faixa-sophy__lista li::before{content:""; position:absolute; left:0; top:.52em;
  width:8px; height:3px; border-radius:2px; background:var(--laranja)}
.faixa-sophy__lista li:nth-child(2)::before{background:var(--verde)}
.faixa-sophy__lista li:nth-child(3)::before{background:#5292e4}
.faixa-sophy__lista li:nth-child(4)::before{background:var(--vermelho)}
.faixa-sophy .link-seta{min-height:0}
@media (min-width:980px){
  .faixa-sophy__grade{grid-template-columns:auto 1fr auto; gap:var(--e7)}
  .faixa-sophy__lista{grid-template-columns:repeat(2,auto); column-gap:var(--e6)}
}

/* ---------- Painéis compactos do mega menu (Soluções / Serviços) ---------- */
.mega__grade--painel{grid-template-columns:1.2fr 1fr; max-width:760px; gap:var(--e6); margin-inline:auto}
.mega__intro p:not(.nav-titulo){font-size:var(--t-peq); color:var(--tinta-3); margin:.3rem 0 .9rem}
@media (max-width:999px){.mega__grade--painel{grid-template-columns:1fr}}

/* ---------- Painel Soluções: dois cartões com bullets ---------- */
.sol-grade{display:grid; gap:var(--e4); padding-block:var(--e5) var(--e6);
  max-width:820px; margin-inline:auto}
@media (min-width:800px){.sol-grade{grid-template-columns:1fr 1fr}}
.sol-card{display:grid; gap:.65rem; align-content:start; padding:var(--e5);
  background:var(--azul-nevoa); border:1px solid rgba(14,47,129,.12); border-radius:var(--raio);
  text-decoration:none; color:inherit; transition:border-color var(--mov-r), background var(--mov-r)}
.sol-card:hover{border-color:rgba(14,47,129,.32); background:#e6ecfa}
.sol-card strong{font-size:1.12rem; letter-spacing:-.018em; line-height:1.2}
.sol-card ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.sol-card li{position:relative; padding-left:1.1rem; font-size:var(--t-peq);
  color:var(--tinta-2); line-height:1.35}
.sol-card li::before{content:""; position:absolute; left:0; top:.5em; width:7px; height:3px;
  border-radius:2px; background:var(--laranja)}
.sol-card li:nth-child(2)::before{background:var(--verde)}
.sol-card li:nth-child(3)::before{background:#2563d4}
.sol-card li:nth-child(4)::before{background:var(--vermelho)}
.sol-card li:nth-child(5)::before{background:var(--azul)}
.sol-card .link-seta{min-height:0; margin-top:.3rem}

/* ---------- Marco do vídeo demonstrativo (Sophy) ---------- */
.video-marco{
  aspect-ratio:16/9; border-radius:var(--raio-g); background:var(--azul-tinta);
  display:grid; place-content:center; justify-items:center; gap:var(--e3);
  position:relative; overflow:hidden; border:1px solid rgba(14,47,129,.2);
}
.video-marco::before{content:""; position:absolute; inset:0; opacity:.35;
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(241,142,32,.35), transparent 60%),
    radial-gradient(70% 90% at 10% 90%, rgba(0,114,57,.3), transparent 60%),
    radial-gradient(50% 70% at 50% 50%, rgba(37,99,212,.4), transparent 70%)}
.video-marco__play{
  width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.14);
  display:grid; place-items:center; color:#fff; position:relative;
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px)}
.video-marco p{position:relative; text-align:center; color:#c7d2ee;
  font-size:var(--t-peq); font-weight:600; line-height:1.4}
.video-marco p span{font-weight:400; color:#9fb0dd}

/* ---------- Área do cliente: destaque sutil no header ---------- */
.nav__gatilho--area{color:var(--azul); font-weight:600;
  border:1px solid var(--linha-forte); border-radius:999px; padding:.45rem .95rem}
.nav__gatilho--area:hover{border-color:var(--azul); background:var(--azul-nevoa); color:var(--azul)}

/* ---------- Antes / Com a Sophy ---------- */
.antes-depois{display:grid; gap:var(--e4)}
@media (min-width:860px){.antes-depois{grid-template-columns:1fr 1fr}}
.ad-col{border-radius:var(--raio-g); padding:var(--e6)}
.ad-col ul{list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.8rem}
.ad-col li{position:relative; padding-left:1.7rem; line-height:1.5; font-size:var(--t-peq)}
.ad-col--antes{background:var(--papel-2); border:1px dashed var(--linha-forte)}
.ad-col--antes .nav-titulo{color:var(--tinta-3)}
.ad-col--antes li{color:var(--tinta-3)}
.ad-col--antes li::before{content:"✕"; position:absolute; left:0; top:.05em;
  color:var(--vermelho); font-weight:700; font-size:.9em}
.ad-col--depois{background:var(--azul-tinta); color:#fff}
.ad-col--depois .nav-titulo{color:#9fb0dd}
.ad-col--depois li{color:#e6ecfa}
.ad-col--depois li::before{content:"✓"; position:absolute; left:0; top:.05em;
  color:#4ade80; font-weight:700; font-size:.95em}