/* Sintonea · site (30/out/2026). Padrão de marca: Design System "Sintonea" (caminho A).
   Uma ousadia só: a caixa única do topo, onde as mensagens chegam. O resto é sóbrio. */
/* Fontes servidas pelo próprio site (licença OFL, arquivos em fontes/): nada sai para terceiros. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fontes/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/source-sans-3-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/source-sans-3-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/source-sans-3-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
:root{
  --tinta:#10212A; --tinta2:#3E5560; --tinta3:#5D717B;
  --sinal:#0B6E70; --sinal-forte:#06595B; --sinal-claro:#3CC2C4; --sinal-fraco:#E0F0F0;
  --nevoa:#EEF2F3; --papel:#FFFFFF; --linha:#D8E0E3;
  --entrada:#FFFFFF; --saida:#E4F2F1; --critico:#AD2A20; --ok:#1B7A46;
  --display:'Archivo',system-ui,sans-serif; --texto:'Source Sans 3',system-ui,sans-serif;
  --dado:'JetBrains Mono',ui-monospace,monospace;
  --larg:1160px; --g:max(20px, env(safe-area-inset-left, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--sinal)} a:hover{color:var(--sinal-forte)}
:focus-visible{outline:3px solid var(--sinal-claro);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--tinta)}
h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.04;font-weight:800}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08}
h3{font-size:1.2rem;line-height:1.25}
p{margin:0}
.miolo{max-width:var(--larg);margin:0 auto;padding-left:var(--g);padding-right:max(20px, env(safe-area-inset-right, 0px))}
.pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.pular:focus{left:12px}

/* botões */
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;
  font-family:var(--display);font-weight:600;font-size:1rem;text-decoration:none;border:1.5px solid var(--sinal);
  background:var(--sinal);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.botao:hover{background:var(--sinal-forte);border-color:var(--sinal-forte);color:#fff}
.botao.vazio{background:transparent;color:var(--sinal)}
.botao.vazio:hover{background:var(--sinal-fraco);color:var(--sinal-forte)}
.botao[disabled]{opacity:.55;cursor:progress}

/* topo */
.topo{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--linha)}
.topo .miolo{display:flex;align-items:center;gap:24px;min-height:68px}
.topo .marca img{height:30px;width:auto}
.topo nav{display:flex;gap:22px;margin-left:auto}
.topo nav a{color:var(--tinta2);text-decoration:none;font-weight:600;font-size:.98rem}
.topo nav a:hover{color:var(--sinal)}
.topo .acoes{display:flex;gap:10px}
.topo .botao{min-height:42px;padding:0 18px;font-size:.95rem}
@media (max-width:900px){ .topo nav{display:none} .topo .acoes{margin-left:auto} }
@media (max-width:420px){ .topo .acoes .botao.vazio{display:none} }

/* abertura */
.abertura{background:var(--nevoa);border-bottom:1px solid var(--linha)}
.abertura .miolo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.abertura .texto{display:flex;flex-direction:column;gap:22px;max-width:36rem}
.abertura .linha-fina{font-size:1.2rem;color:var(--tinta2)}
.abertura .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.abertura .nota{font-size:.95rem;color:var(--tinta3)}
@media (max-width:900px){ .abertura .miolo{grid-template-columns:1fr;gap:40px;padding-top:44px;padding-bottom:52px} }

/* a caixa única: o momento da página */
.caixa{position:relative;background:var(--papel);border:1px solid var(--linha);border-radius:20px;padding:18px;display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;min-height:360px}
.caixa .canais{display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--linha);padding-right:14px}
.caixa .canal{font-size:.82rem;font-weight:600;color:var(--tinta2);padding:7px 10px;border-radius:9px;display:flex;justify-content:space-between;gap:6px}
.caixa .canal b{font-family:var(--dado);font-weight:500;color:var(--tinta3)}
.caixa .canal.tudo{background:var(--sinal-fraco);color:var(--sinal-forte)}
.caixa .canal.tudo b{color:var(--sinal-forte)}
.caixa .lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.caixa .item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--linha);border-radius:12px;background:var(--papel)}
.caixa .item.nova{background:var(--sinal-fraco);border-color:transparent}
.caixa .sigla{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--nevoa);font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--tinta2)}
.caixa .quem{font-weight:700;font-size:.95rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caixa .onde{font-size:.82rem;color:var(--tinta3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caixa .hora{font-family:var(--dado);font-size:.75rem;color:var(--tinta3)}
.caixa .dono{font-size:.75rem;font-weight:700;color:var(--sinal)}
.caixa .prazo{font-size:.75rem;font-weight:700;color:var(--critico)}
.caixa .legenda{position:absolute;left:18px;right:18px;bottom:-34px;font-size:.85rem;color:var(--tinta3)}
@media (max-width:520px){ .caixa{grid-template-columns:1fr} .caixa .canais{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--linha);padding:0 0 12px} }
@keyframes chega{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.caixa .item.anima{animation:chega .55s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){ .caixa .item.anima{animation:none} }

/* blocos */
.bloco{padding-top:96px;padding-bottom:96px}
.bloco.colado{padding-top:0}
.bloco .cabeca{display:flex;flex-direction:column;gap:14px;max-width:44rem;margin-bottom:44px}
.bloco .cabeca p{font-size:1.12rem;color:var(--tinta2)}
.escuro{background:var(--tinta);color:#E8F0F2}
.escuro h2,.escuro h3{color:#fff}
.escuro .cabeca p,.escuro p{color:#B9CBD1}
.escuro a{color:var(--sinal-claro)}
.cinza{background:var(--nevoa)}

/* os três problemas */
.dores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.dores div{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--sinal-claro);padding-top:18px}
@media (max-width:820px){ .dores{grid-template-columns:1fr;gap:28px} }

/* módulos */
.modulos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--linha)}
.modulo{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:24px;padding:26px 0;border-bottom:1px solid var(--linha)}
.modulo:nth-child(odd){padding-right:32px}
.modulo:nth-child(even){padding-left:32px;border-left:1px solid var(--linha)}
.modulo p{color:var(--tinta2)}
@media (max-width:900px){ .modulos{grid-template-columns:1fr} .modulo,.modulo:nth-child(odd),.modulo:nth-child(even){padding-left:0;padding-right:0;border-left:0;grid-template-columns:1fr;gap:8px} }

/* garantias */
.garantias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 48px}
.garantias li{list-style:none;display:flex;flex-direction:column;gap:6px}
.garantias{padding:0;margin:0}
@media (max-width:820px){ .garantias{grid-template-columns:1fr} }

/* segmentos */
.segmentos{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0}
.segmentos li{list-style:none;padding:12px 18px;border:1px solid var(--linha);border-radius:999px;background:var(--papel);font-weight:600}
.segmentos-nota{margin-top:24px;color:var(--tinta2);max-width:44rem}

/* planos */
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plano{display:flex;flex-direction:column;gap:18px;padding:30px 26px;border:1px solid var(--linha);border-radius:18px;background:var(--papel)}
.plano.destaque{background:var(--sinal);border-color:var(--sinal);color:#E9F7F7}
.plano.destaque h3,.plano.destaque .preco{color:#fff}
.plano.destaque .botao{background:#fff;color:var(--sinal-forte);border-color:#fff}
.plano.destaque .botao:hover{background:var(--sinal-fraco)}
.plano .para{color:var(--tinta2)}
.plano.destaque .para{color:#CDEDED}
.plano .preco{font-family:var(--display);font-weight:800;font-size:2.6rem;letter-spacing:-.03em;line-height:1;color:var(--tinta)}
.plano .preco small{font-family:var(--texto);font-weight:600;font-size:1rem;letter-spacing:0;color:inherit;opacity:.8}
.plano ul{margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.plano li{list-style:none;padding-left:22px;position:relative}
.plano li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:2px;background:currentColor;opacity:.55}
.plano .botao{margin-top:auto}
.extras{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;color:var(--tinta2)}
.extras b{color:var(--tinta)}
@media (max-width:900px){ .planos,.extras{grid-template-columns:1fr} }

/* como começa (é uma sequência de verdade) */
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;counter-reset:p;padding:0;margin:0}
.passos li{list-style:none;display:flex;flex-direction:column;gap:8px;counter-increment:p}
.passos li::before{content:counter(p);font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--sinal-claro);line-height:1}
@media (max-width:820px){ .passos{grid-template-columns:1fr;gap:26px} }

/* perguntas */
.perguntas{max-width:50rem;border-top:1px solid var(--linha)}
.perguntas details{border-bottom:1px solid var(--linha);padding:4px 0}
.perguntas summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-family:var(--display);font-weight:600;font-size:1.1rem;position:relative}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:1.5rem;color:var(--sinal)}
.perguntas details[open] summary::after{content:"−"}
.perguntas details p{padding:0 0 18px;color:var(--tinta2);max-width:44rem}

/* contato */
.contato .miolo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.contato .canais-diretos{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.contato .canais-diretos span{display:block;font-size:.9rem;color:#B9CBD1}
.contato .canais-diretos b{font-family:var(--display);font-size:1.15rem;color:#fff;user-select:all}
form.ficha{background:var(--papel);color:var(--tinta);border-radius:18px;padding:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ficha label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}
.ficha .largo{grid-column:1/-1}
.ficha input,.ficha select,.ficha textarea{font:inherit;font-weight:400;font-size:1rem;padding:11px 12px;border:1px solid var(--linha);border-radius:10px;background:#fff;color:var(--tinta);min-height:46px;width:100%}
.ficha textarea{min-height:110px;resize:vertical}
.ficha input:focus,.ficha select:focus,.ficha textarea:focus{outline:2px solid var(--sinal-claro);outline-offset:1px;border-color:var(--sinal)}
.ficha .aceite{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:.92rem;color:var(--tinta2)}
.ficha .aceite input{width:20px;min-height:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--sinal)}
.ficha .isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ficha .resposta{grid-column:1/-1;font-weight:600;min-height:1.5em}
.ficha .resposta.bom{color:var(--ok)} .ficha .resposta.ruim{color:var(--critico)}
@media (max-width:900px){ .contato .miolo{grid-template-columns:1fr;gap:36px} }
@media (max-width:560px){ form.ficha{grid-template-columns:1fr;padding:22px} }

/* rodapé */
.rodape{background:var(--tinta);color:#93A8B1;border-top:1px solid #24343B}
.rodape .miolo{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;padding-top:36px;padding-bottom:max(36px, env(safe-area-inset-bottom, 0px))}
.rodape img{height:26px;width:auto}
.rodape nav{display:flex;flex-wrap:wrap;gap:18px}
.rodape a{color:#C9D7DC;text-decoration:none} .rodape a:hover{color:#fff}
.rodape .quem{font-size:.9rem;margin-left:auto}

/* páginas de texto (privacidade, exclusão, termos) */
.texto-longo{max-width:46rem;padding-top:56px;padding-bottom:88px}
.texto-longo h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:10px}
.texto-longo .data{color:var(--tinta3);margin-bottom:34px}
.texto-longo h2{font-size:1.4rem;margin:38px 0 12px}
.texto-longo p,.texto-longo li{color:var(--tinta2);margin-bottom:12px}
.texto-longo ul,.texto-longo ol{padding-left:22px}
.texto-longo .lacuna{background:#FCF0D9;color:#8A5A00;padding:0 4px;border-radius:4px;font-weight:600}
.texto-longo table{border-collapse:collapse;width:100%;margin:8px 0 18px;font-size:.95rem}
.texto-longo th,.texto-longo td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela-rola{overflow-x:auto}