@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-800.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/atkinson-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/atkinson-700.woff2) format("woff2")}

/* Hub de respostas: coluna única de celular (máx. 680px). Busca com autocompletar grudada no topo,
   filtros de quem falou e de tema, séries prontas, tela de resposta em formato de conversa.
   Mesmas cores dos carrosséis do Antes do Dia 25: azul, verde, amarelo e branco da bandeira.
   Tema único de propósito: o card salvo sai igual para todo mundo. */
:root{
  color-scheme: light;
  --noite:#001A52;
  --papel:#F7F8F3;
  --papel-2:#ECEFE6;
  --tinta:#002776;
  --tinta-2:#1F3B80;
  --cinza:#4A5578;
  --cinza-2:#6B7390;
  --cinza-claro:#A9C1F0;
  --caneta:#00843D;
  --verde:#007A3D;
  --marca:#FEDD00;
  --marca-2:#FFF3A6;
  --balao:#E3E7DE;
  --linha:#D3D8CC;
  --zap:#007A3D;
  --branco:#FFFFFF;
  --veu:rgba(0,26,82,.6);
  --sombra:rgba(0,39,118,.14);
  --f-display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-texto:"Atkinson Hyperlegible",Verdana,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-texto);font-size:18px;line-height:1.45}
p,h1,h2,h3,ul,ol{margin:0}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--caneta);outline-offset:2px}
mark{color:inherit;background:linear-gradient(100deg,transparent .1em,var(--marca) .1em,var(--marca) calc(100% - .06em),transparent calc(100% - .06em));background-size:100% 82%;background-position:0 70%;background-repeat:no-repeat;padding:0 .12em;margin:0 -.03em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rotulo{font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.miudo{font-size:14px;color:var(--cinza)}

.faixa{height:6px;background:linear-gradient(90deg,var(--verde) 0 33.4%,var(--marca) 33.4% 66.7%,var(--tinta) 66.7%)}
.app{min-height:100vh;min-height:100dvh;background:var(--papel);display:flex;flex-direction:column}
#home,#ver{width:100%;max-width:680px;margin-inline:auto}

/* topo */
.topo{display:flex;align-items:center;gap:12px;padding:12px max(16px, calc((100% - 648px) / 2));background:var(--tinta);color:var(--papel)}
.avatar{flex:none;width:46px;height:46px;display:block}
.marca-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;border-radius:12px}
.marca-link:hover .topo-nome{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.topo-txt{flex:1;min-width:0}
.topo-nome{font-family:var(--f-display);font-weight:800;font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.topo-sub{font-size:13.5px;color:var(--cinza-claro);margin-top:3px;line-height:1.25}
.btn-enviar{flex:none;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 12px;border-radius:999px;border:0;background:var(--marca);color:var(--tinta);font-weight:700;font-size:15px;cursor:pointer}
.btn-enviar:hover{box-shadow:0 0 0 3px var(--branco)}
.btn-enviar svg{width:20px;height:20px}
@media (max-width:370px){.btn-enviar{font-size:0;gap:0;padding:12px}.btn-enviar svg{width:22px;height:22px}}

/* início */
.hero{padding:22px 16px 4px}
.faltam{display:inline-block;font-family:var(--f-display);font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;background:var(--marca);color:var(--tinta);padding:4px 10px;border-radius:6px;margin-bottom:12px}
.hero h1{font-family:var(--f-display);font-weight:800;font-size:clamp(42px,12vw,60px);line-height:.9;text-transform:uppercase}
.hero-sub{margin-top:10px;font-size:17px;color:var(--cinza);max-width:40ch}

.busca-wrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;background:var(--papel);padding:12px 16px 10px}
.busca{display:flex;align-items:center;gap:8px;min-height:58px;padding:0 6px 0 14px;background:var(--branco);border:2px solid var(--tinta);border-radius:16px}
.busca:focus-within{box-shadow:0 0 0 4px var(--marca)}
.busca .lupa{width:24px;height:24px;flex:none}
.busca input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:18px;font-weight:700;padding:14px 0;-webkit-appearance:none;appearance:none}
.busca input::placeholder{color:var(--cinza);font-weight:400}
.busca input::-webkit-search-cancel-button{display:none}
.limpar{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--balao);cursor:pointer}
.limpar svg{width:18px;height:18px}
.sugs{position:absolute;left:16px;right:16px;top:calc(100% - 6px);max-height:min(62vh,470px);overflow:auto;padding:6px;background:var(--branco);border:2px solid var(--tinta);border-radius:16px;box-shadow:0 16px 32px -12px rgba(12,14,36,.4)}
.sugs-tit{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);padding:8px 10px 4px}
.op{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:52px;padding:9px 12px;border-radius:10px;cursor:pointer}
.op[aria-selected="true"],.op:hover{background:var(--marca-2)}
.op-txt{font-size:16.5px;line-height:1.3}
.op-txt b{background:var(--marca);border-radius:3px;padding:0 2px}
.op-meta{font-size:13px;color:var(--cinza)}
.op-todos{display:block;width:100%;min-height:48px;margin-top:4px;padding:10px 12px;border:0;border-top:1px dashed var(--linha);background:none;text-align:left;color:var(--caneta);font-weight:700;font-size:16px;cursor:pointer}
.sugs-vazio{padding:12px;font-size:15.5px;color:var(--cinza)}

.tente{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:0 16px 6px;scrollbar-width:none}
.tente::-webkit-scrollbar,.temas::-webkit-scrollbar{display:none}
.tente > span{flex:none;font-size:14px;font-weight:700;color:var(--cinza)}
.chip{flex:none;min-height:42px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--linha);background:var(--branco);font-weight:700;font-size:15px;line-height:1.1;white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.chip:disabled{opacity:.4;cursor:default}
.chip .n{margin-left:5px;font-size:13px;opacity:.7}

.filtros{padding:14px 16px 2px;display:grid;gap:8px;transition:opacity .2s}
.filtros.inativo{opacity:.45}
.busca-nota{font-size:14px;color:var(--cinza)}
.seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--papel-2);border:1px solid var(--linha)}
.seg button{min-height:48px;padding:4px;border:0;border-radius:10px;background:transparent;color:var(--cinza);font-weight:700;font-size:16px;line-height:1.05;cursor:pointer}
.seg small{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;opacity:.85;margin-bottom:2px}
.seg button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.temas{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}

.intro{margin:12px 16px 0;padding:16px;border-radius:16px;background:var(--tinta);color:var(--papel)}
.intro h2{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;color:var(--marca);margin-bottom:6px}
.intro p{font-size:16.5px;line-height:1.4}
.intro button{margin-top:6px;min-height:40px;padding:6px 0;border:0;background:none;color:var(--marca);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.dia{margin:14px 16px 0;padding:16px;border-radius:18px;background:var(--tinta);color:var(--papel)}
.dia .rotulo{color:var(--marca)}
.dia-frase{margin:8px 0 4px;font-weight:700;font-size:21px;line-height:1.25}
.dia-teaser{font-size:15px;color:var(--cinza-claro);margin-bottom:12px}
.dia-teaser b{color:var(--marca);font-family:var(--f-display);font-weight:800;font-size:20px;letter-spacing:.02em}

.secao{padding:20px 16px 0}
.secao-tit{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.secao-tit h2{font-family:var(--f-display);font-weight:800;font-size:24px;line-height:1;text-transform:uppercase}
.secao-tit small{font-size:14px;font-weight:700;color:var(--cinza);white-space:nowrap}
.grupo + .grupo{margin-top:18px}
.grupo h3{margin-bottom:8px}
.lista-frases{display:grid;gap:8px}
@media (min-width:600px){.lista-frases.duas{grid-template-columns:1fr 1fr}}
.frase{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:11px 12px 11px 14px;text-align:left;border-radius:14px;border:1.5px solid var(--tinta);background:var(--branco);color:var(--tinta);text-decoration:none;cursor:pointer}
.frase:hover{background:var(--marca-2)}
.frase.top{box-shadow:inset 7px 0 0 var(--marca);padding-left:20px}
.frase-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.frase-txt{font-weight:700;font-size:17px;line-height:1.28}
.frase-meta{font-size:13.5px;color:var(--cinza)}
.frase-meta b{color:var(--caneta)}
.frase-tag{font-family:var(--f-display);font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--caneta)}
.frase > svg{width:20px;height:20px;flex:none;color:var(--caneta)}
.series{display:grid;gap:8px}
@media (min-width:600px){.series{grid-template-columns:1fr 1fr}}
.serie{display:flex;flex-direction:column;gap:4px;width:100%;min-height:92px;padding:13px 14px;text-align:left;border-radius:14px;border:0;background:var(--tinta);color:var(--papel);text-decoration:none;cursor:pointer}
.serie:nth-child(even){background:var(--verde)}
.serie:hover{box-shadow:0 0 0 3px var(--marca)}
.serie-nome{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1;text-transform:uppercase;text-wrap:balance}
.serie-sub{font-size:14.5px;line-height:1.3;opacity:.9}
.serie-n{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--marca)}
.serie-cab{display:grid;gap:8px;margin-bottom:12px}
.serie-cab p{font-size:16px;color:var(--cinza)}
.vazio{padding:16px;border-radius:14px;background:var(--papel-2);border:1.5px dashed var(--linha)}
.vazio p + .chips,.vazio .chips + p{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.dicas{margin:24px 16px 0;border:1.5px solid var(--tinta);border-radius:16px;background:var(--branco)}
.dicas summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:12px 16px;cursor:pointer;font-family:var(--f-display);font-weight:800;font-size:21px;line-height:1;text-transform:uppercase}
.dicas summary::-webkit-details-marker{display:none}
.dicas summary::after{content:"+";font-size:30px;line-height:1;color:var(--caneta)}
.dicas[open] summary::after{content:"–"}
.dicas ol{display:grid;gap:10px;padding:0 16px 16px 38px;font-size:16.5px;line-height:1.4}
.dicas li::marker{font-family:var(--f-display);font-weight:800;color:var(--caneta)}

.cta{margin:18px 16px 0;padding:18px 16px;border-radius:18px;background:var(--marca)}
.cta h2{font-family:var(--f-display);font-weight:800;font-size:28px;line-height:.95;text-transform:uppercase;margin-bottom:8px}
.cta p{font-size:16.5px}

.rodape{margin-top:28px;padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px));font-size:12px;line-height:1.5;color:var(--cinza-2);text-align:center;border-top:1px solid var(--linha)}
.rodape a{color:var(--caneta);font-weight:700}
.rodape{max-width:58ch;margin-inline:auto}
.assina{display:block;margin-bottom:4px;font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta)}

/* botões */
.acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{flex:1 1 auto;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;border-radius:999px;border:1.5px solid var(--tinta);background:var(--papel);color:var(--tinta);font-weight:700;font-size:16px;line-height:1.1;text-decoration:none;text-align:center;cursor:pointer}
.btn svg{width:20px;height:20px;flex:none}
.btn.zap{background:var(--zap);border-color:var(--zap);color:var(--branco)}
.btn.cheio{flex-basis:100%}
.btn.escuro{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.btn.amarelo{background:var(--marca);border-color:var(--marca);color:var(--tinta)}

/* tela da resposta */
.ver-topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 8px 6px;background:var(--papel);border-bottom:1px solid var(--linha)}
.voltar{min-height:44px;display:inline-flex;align-items:center;gap:4px;padding:8px 12px 8px 6px;border:0;background:none;font-weight:700;font-size:16px;cursor:pointer}
.voltar svg{width:22px;height:22px}
.ver-tema{min-width:0;font-size:13px;font-weight:700;color:var(--cinza);background:var(--papel-2);border:1px solid var(--linha);padding:4px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat{padding:16px 16px 8px;display:flex;flex-direction:column;gap:12px;outline:none}
.resp{display:flex;flex-direction:column;gap:12px}
.msg{max-width:92%;border-radius:18px;padding:13px 16px;box-shadow:0 1px 2px var(--sombra)}
.msg.robo{align-self:flex-start;background:var(--branco);border:1px solid var(--linha);border-top-left-radius:6px}
.msg.voce{align-self:flex-end;background:var(--marca);border-top-right-radius:6px}
.msg.voce small{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.msg.voce p,.msg.voce h1{margin:0;font-weight:700;font-size:20px;line-height:1.28}
.msg.robo p + p{margin-top:9px}
.acolhe{font-weight:700}
.num{display:flex;flex-direction:column;gap:3px;margin:-13px -16px 12px;padding:14px 16px 12px;border-bottom:1px dashed var(--linha);background:var(--papel);border-radius:18px 18px 0 0}
.msg.robo .num{border-top-left-radius:6px}
.num b{font-family:var(--f-display);font-weight:800;font-size:46px;line-height:.92;color:var(--caneta);letter-spacing:-.005em;text-wrap:balance}
.num span{font-family:var(--f-display);font-weight:700;font-size:17.5px;line-height:1.15;letter-spacing:.03em;text-transform:uppercase;color:var(--tinta);text-wrap:balance}
.pergunta{color:var(--caneta);font-weight:700}
.fonte-linha{margin-top:12px;padding-top:10px;border-top:1px dashed var(--linha);font-size:14px;color:var(--cinza);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.det-inline{margin-top:4px;width:100%}
.det-inline summary{min-height:40px;display:flex;align-items:center;color:var(--caneta);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.det-inline p{font-size:15.5px;line-height:1.45;color:var(--tinta);margin:6px 0 10px}
.det-inline .lista-fontes{font-size:15px}
.link-btn{min-height:40px;padding:6px 0;border:0;background:none;color:var(--caneta);font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.digitando{align-self:flex-start;display:flex;gap:6px;padding:14px 18px;background:var(--branco);border:1px solid var(--linha);border-radius:18px;border-top-left-radius:6px}
.digitando i{width:9px;height:9px;border-radius:50%;background:var(--cinza-claro);animation:pulo 1s infinite ease-in-out}
.digitando i:nth-child(2){animation-delay:.15s}
.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pulo{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.aparecer{animation:aparecer .35s ease-out both}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dica{font-size:15.5px;line-height:1.4;padding:11px 13px;border-radius:12px;background:var(--papel-2);border:1px solid var(--linha)}
.dica b{font-family:var(--f-display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--caneta);margin-right:4px}
.rel{margin-top:8px;display:grid;gap:8px}

/* folha */
.folha{position:fixed;inset:0;z-index:40}
.folha-veu{position:absolute;inset:0;background:var(--veu)}
.folha-painel{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,680px);max-height:90%;overflow:auto;background:var(--papel);border-radius:18px 18px 0 0;padding:16px 18px calc(20px + env(safe-area-inset-bottom,0px));outline:none}
.folha-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.folha-topo h2{font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase}
.fechar{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--balao);cursor:pointer}
.fechar svg{width:20px;height:20px}
.detalhe p{margin-bottom:12px;font-size:16.5px}
.lista-fontes{display:grid;gap:10px;padding-left:1.1em;font-size:16px;line-height:1.4;margin-top:6px}
.lista-fontes a{color:var(--caneta);overflow-wrap:anywhere}
.nota{margin-top:14px;font-size:14.5px;color:var(--cinza)}
.img-folha{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:16px;align-items:start}
.previa-caixa{aspect-ratio:4/5;border-radius:10px;background:var(--balao);overflow:hidden;display:grid;place-items:center;color:var(--cinza);font-size:13px;text-align:center}
.previa{display:block;width:100%;height:100%;object-fit:cover;-webkit-touch-callout:default}
.status{font-weight:700;font-size:16px;margin-bottom:10px}
.share-lista{display:grid;gap:8px}
.share-op{display:flex;align-items:center;gap:12px;min-height:64px;padding:11px 14px;border-radius:14px;border:1.5px solid var(--tinta);background:var(--branco);color:var(--tinta);text-decoration:none}
.share-op .ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--zap);color:var(--branco)}
.share-op .ico svg{width:20px;height:20px}
.share-op b{display:block;font-size:16.5px;line-height:1.25}
.share-op span span{font-size:14px;color:var(--cinza);line-height:1.3}
.aviso{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;max-width:calc(100% - 32px);padding:10px 16px;border-radius:12px;background:var(--tinta);color:var(--papel);font-size:15px;font-weight:700;text-align:center}

/* celular: as colunas não existem, tudo segue uma coluna só */
.lado,.lado-fixo,.conteudo{display:contents}
/* computador: busca e filtros numa coluna fixa à esquerda, respostas à direita */
@media (min-width:1024px){
  .topo{padding:14px max(32px, calc((100% - 1176px) / 2))}
  #home{max-width:1240px}
  #ver{max-width:none}
  .topo-nome{font-size:28px}
  #home{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);column-gap:48px;padding:0 32px}
  .lado,.lado-fixo,.conteudo{display:block}
  .lado{grid-column:1}
  .lado-fixo{position:sticky;top:env(safe-area-inset-top,0px);padding-bottom:24px}
  .conteudo{grid-column:2;min-width:0;padding-top:28px}
  #home > .rodape{grid-column:1 / -1}
  .hero{padding:32px 0 4px}
  .hero h1{font-size:64px}
  .busca-wrap{position:relative;top:auto;padding:14px 0 10px}
  .sugs{left:0;right:0}
  .tente{flex-wrap:wrap;overflow:visible;padding:0 0 6px}
  .filtros{padding:14px 0 2px}
  .temas{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0 6px}
  .conteudo .intro,.conteudo .dia,.conteudo .dicas,.conteudo .cta{margin-left:0;margin-right:0}
  .conteudo .intro,.conteudo .dia{margin-top:0;margin-bottom:6px}
  .conteudo .secao{padding-left:0;padding-right:0}
  .conteudo .secao:first-of-type{padding-top:0}
  #lista .lista-frases{grid-template-columns:1fr 1fr}
  .ver-topo{padding:10px max(32px, calc((100% - 1176px) / 2))}
  .chat{max-width:780px;margin:0 auto;padding:28px 32px 8px}
  .msg{max-width:86%}
  .rel .frase{max-width:100%}
  .folha-painel{top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(100% - 48px,640px);max-height:86vh;border-radius:18px;padding:20px 24px 24px}
  .rodape{margin-top:40px;padding-top:18px}
}
@media (prefers-reduced-motion:reduce){.digitando i,.aparecer{animation:none}.filtros{transition:none}}

.img-opcoes{display:grid;gap:8px}