/* Escuta Popular — estilos compartilhados (página pública, mural e área da equipe). */
html{box-sizing:border-box}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Identidade Escuta Popular: fundo creme papel, azul escuta nos blocos e textos, vermelho voz nos botões e destaques, amarelo sinal nas etiquetas. Títulos em Bricolage Grotesque 800, texto em Barlow, cartinhas em Caveat. */
:root{
  --cream:#FBF6EC; --panel:#F5EEDF; --white:#FFFFFF; --navy:#1B2A5B; --navy-2:#13204A; --ink:#1F2544; --muted:#5B5F73; --line:#E8DFC9;
  --red:#C8102E; --blue:#1B2A5B; --yellow:#F2B705; --green:#1E8A4C; --ochre:#F2B705;
  --on-navy:#FBF6EC; --on-navy-muted:rgba(251,246,236,.72);
  --focus:#F2B705;
  --f-display:"Bricolage Grotesque","Barlow","Segoe UI",system-ui,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-cond:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-hand:"Caveat","Segoe Print",cursive;
  --r:18px; --r-s:12px;
}
:root[data-theme="dark"]{
  --cream:#10172E; --panel:#182040; --white:#1D2650; --navy:#0B1024; --navy-2:#141C3F; --ink:#FBF6EC; --muted:#B8B3A5; --line:#2E3760;
  --red:#FF4D5E; --blue:#8FA8FF; --yellow:#FFC933; --green:#3FCF6B; --ochre:#FFC933; --focus:#FFC933; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main.wrap{flex:1 0 auto;width:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--navy)}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h1,h2,h3{margin:0;line-height:1;text-wrap:balance}
.disp{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:.96}
.disp .hl{color:var(--red)}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-cond);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow)}

/* ---------- topo ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--navy);color:var(--on-navy)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;line-height:1;color:var(--on-navy);text-decoration:none;display:flex;align-items:center;gap:9px}
/* Símbolo Escuta Popular: ponto e ondas de som chegando (mesmo desenho do favicon). */
.brand-ico{width:28px;height:28px;border-radius:50%;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Ccircle cx='80' cy='80' r='80' fill='%23C8102E'/%3E%3Ccircle cx='52' cy='80' r='11' fill='%23FBF6EC'/%3E%3Cpath d='M72 58A30 30 0 0 1 72 102M90 42A52 52 0 0 1 90 118' fill='none' stroke='%23FBF6EC' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M108 26A74 74 0 0 1 108 134' fill='none' stroke='%23F2B705' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
nav.tabs{display:flex;gap:6px;flex-wrap:wrap}
nav.tabs a{font-family:var(--f-cond);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--on-navy);border:1.5px solid transparent}
nav.tabs a[aria-current="page"]{background:var(--on-navy);color:var(--navy)}
nav.tabs a:hover:not([aria-current]){border-color:var(--on-navy-muted)}
.stripe{height:6px;background:linear-gradient(90deg,var(--red) 0 50%,var(--yellow) 50%)}

main{padding-block:0 72px}
section[data-view]{display:grid;gap:28px}

/* ---------- escrever: página inteira marinho, cartinha branca por cima ----------
   Celular: manchete e, abaixo, a cartinha. Tela larga: manchete fixa à esquerda, cartinha à direita. */
body.escrever{background:var(--navy)}
body.escrever footer{border-top:1px solid rgba(243,236,216,.14)}
.hero-band{color:var(--on-navy);padding-block:40px 8px}
.hero{display:grid;gap:14px;max-width:720px}
.hero .eyebrow{color:var(--on-navy-muted)}
.hero h1{font-size:clamp(2.4rem,8.4vw,4.6rem)}
.hero p{margin:0;font-size:1.1rem;color:var(--on-navy-muted);max-width:52ch}
@media (min-width:960px){
  body.escrever .wrap{max-width:1200px}
  section[data-view="escrever"]{grid-template-columns:minmax(0,1fr) minmax(0,720px);gap:64px;align-items:start;padding-top:56px}
  .hero-band{padding-block:0;position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px)}
  .hero h1{font-size:clamp(2.6rem,4.6vw,4.6rem)}
  .hero p{font-size:1.15rem}
}
.hero .who{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.who span{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;padding:6px 12px;border-radius:999px;border:1.5px solid var(--on-navy-muted)}
.who span.l{background:var(--red);border-color:var(--red);color:#fff}
.who span.g{background:var(--blue);border-color:var(--blue);color:#fff}

.letter{background:var(--white);border-radius:var(--r);box-shadow:0 30px 60px -28px rgba(0,0,0,.6);max-width:720px;position:relative;overflow:hidden}
.letter-body{padding:26px 22px 28px;display:grid;gap:24px}
@media (max-width:560px){.letter-body{padding:20px 16px 24px}}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
legend,.lbl{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;padding:0;margin-bottom:2px;color:var(--navy-2)}
:root[data-theme="dark"] legend,:root[data-theme="dark"] .lbl{color:var(--ink)}
.hint{color:var(--muted);font-size:.9rem;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:.93rem;background:var(--panel);cursor:pointer;color:var(--ink)}
.chip input:checked + span{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.chip.c-red input:checked + span{background:var(--red);border-color:var(--red);color:#fff}
.chip.c-blue input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
textarea,input[type=text],input[type=email],input[type=tel],input[type=password],select{width:100%;font:inherit;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-s);padding:11px 13px}
textarea:focus,input:focus,select:focus{border-color:var(--blue)}
textarea.msg{font-family:var(--f-hand);font-size:1.45rem;line-height:1.5;min-height:180px;resize:vertical;background:var(--panel);
  background-image:repeating-linear-gradient(transparent 0 calc(1.5em - 1px),var(--line) calc(1.5em - 1px) 1.5em);background-attachment:local}
.counter{font-size:.82rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.toggle-id{padding:14px;border-radius:var(--r-s);background:var(--panel);border:1.5px solid var(--line)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.check input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--red)}
.btn{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;background:var(--red);color:#fff;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.navy{background:var(--navy);color:var(--on-navy)}
.btn.green{background:var(--green);color:#fff}
.btn.small{padding:8px 16px;font-size:.82rem}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.actions a:not(.btn){font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.88rem;color:var(--blue)}
.err{color:var(--red);font-size:.9rem;margin:0;font-weight:600}
.sent{padding:36px 22px 32px;display:grid;gap:14px}
.sent h2{font-size:2.4rem}
.sent p{margin:0;color:var(--muted);max-width:48ch}
.sent .share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}

/* ---------- mural ---------- */
.mural-head{display:grid;gap:14px;padding-top:36px}
.mural-head h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.mural-head p{margin:0;color:var(--muted);max-width:60ch}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:3px;background:var(--panel)}
.seg button{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;border:0;background:transparent;color:var(--ink);padding:7px 16px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.controls select{width:auto;padding:8px 12px;font-size:.9rem;border-radius:999px;font-weight:600}
.demo-note{background:var(--yellow);color:#1A1A1A;border-radius:var(--r-s);padding:10px 14px;font-size:.9rem;font-weight:600}

.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;align-items:start}
/* cartão (estilo cards de proposta do Lula) */
.card{border-radius:var(--r);overflow:hidden;display:grid;min-width:0;background:var(--white);box-shadow:0 14px 30px -22px rgba(20,26,52,.5)}
.card-top{padding:18px 18px 16px;display:grid;gap:12px;color:#fff}
.card.k0 .card-top{background:var(--red)} .card.k1 .card-top{background:var(--blue)} .card.k2 .card-top{background:var(--green)} .card.k3 .card-top{background:var(--yellow);color:#1A1A1A}
.meta{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.to{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;opacity:.9}
.tag{display:inline-block;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.22);color:inherit}
.card.k3 .tag{background:rgba(0,0,0,.12)}
.tag.ex{background:var(--ochre);color:#1A1A1A}
.card .quote{font-family:var(--f-hand);font-weight:600;font-size:1.5rem;line-height:1.25;margin:0;overflow-wrap:anywhere}
.from{font-size:.85rem;opacity:.9}
.card-bottom{padding:12px 18px 16px;display:grid;gap:8px}
.open-btn{justify-self:start;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;background:none;border:0;color:var(--red);cursor:pointer;padding:4px 0}
.reply{display:grid;gap:8px;padding-top:6px}
.reply h3{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--navy-2)}
.reply p{margin:0;font-size:.95rem;overflow-wrap:anywhere}
.badge{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;padding:3px 9px;border-radius:999px;color:#fff}
.b-sim{background:var(--green)} .b-parcial{background:var(--ochre);color:#1A1A1A} .b-nao{background:var(--navy-2);color:var(--on-navy)}
.ref{font-size:.82rem;color:var(--muted)}
/* post-its nas cores de campanha */
.board.postits{gap:24px;padding-top:8px}
.postit{padding:20px 18px 16px;border-radius:4px;display:grid;gap:10px;min-width:0;position:relative;color:#fff;box-shadow:0 18px 22px -16px rgba(0,0,0,.5)}
.postit.k0{background:var(--red)} .postit.k1{background:var(--blue)} .postit.k2{background:var(--green)} .postit.k3{background:var(--yellow);color:#1A1A1A}
.postit:nth-child(3n+1){transform:rotate(-1.3deg)} .postit:nth-child(3n+2){transform:rotate(1deg)} .postit:nth-child(3n){transform:rotate(-.5deg)}
.postit::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:20px;margin-left:-42px;background:rgba(255,255,255,.55);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.postit .hand{font-family:var(--f-hand);font-size:1.45rem;line-height:1.3;margin:0;overflow-wrap:anywhere;font-weight:600}
.postit .answer{background:rgba(255,255,255,.95);color:#1A1A1A;border-radius:var(--r-s);padding:12px 14px;display:grid;gap:6px;font-size:.92rem}
.postit .answer h3{color:var(--navy-2)}
.postit .answer .ref{color:#5B5B5B}
@media (prefers-reduced-motion:no-preference){.postit{transition:transform .2s}.postit:hover{transform:rotate(0) translateY(-3px)}}
.empty{border:2px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--muted)}

/* ---------- equipe ---------- */
.team-head{padding-top:36px;display:grid;gap:10px}
.team-head h1{font-size:clamp(2rem,5vw,3rem)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat{border-radius:var(--r-s);padding:14px 16px;color:#fff;display:grid;gap:2px}
.stat.s0{background:var(--navy)} .stat.s1{background:var(--red)} .stat.s2{background:var(--ochre);color:#1A1A1A} .stat.s3{background:var(--green)}
.stat b{font-family:var(--f-display);font-weight:800;font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;opacity:.9}
.temas{display:flex;flex-wrap:wrap;gap:6px}
.temas .tag{background:var(--panel);border:1.5px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
@media (max-width:820px){.team{grid-template-columns:1fr}}
.list{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden}
.list-tools{display:flex;gap:8px;padding:10px;border-bottom:1.5px solid var(--line);flex-wrap:wrap;background:var(--white)}
.list-tools select{width:auto;padding:6px 10px;font-size:.88rem;border-radius:999px}
.row{display:grid;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:4px solid transparent;text-align:left;font:inherit;color:inherit;width:100%}
.row:hover{background:var(--white)}
.row[aria-selected="true"]{background:var(--white);border-left-color:var(--red)}
.row .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.94rem}
.row .m{display:flex;gap:6px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);align-items:center}
.st{font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;padding:2px 8px;border-radius:999px;color:#fff}
.st-novo{background:var(--red)} .st-respondido{background:var(--ochre);color:#1A1A1A} .st-publicado{background:var(--green)} .st-arquivado{background:var(--line);color:var(--muted)}
.editor{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:14px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px)}
.editor .orig{background:var(--navy);color:var(--on-navy);border-radius:var(--r-s);padding:14px 16px;display:grid;gap:6px}
.editor .orig .hand{font-family:var(--f-hand);font-size:1.4rem;line-height:1.3;margin:0;overflow-wrap:anywhere}
.editor .orig .note{color:var(--on-navy-muted)}
.contact{font-size:.9rem;display:grid;gap:2px}
.contact .sel{user-select:all;font-weight:600}
.note{font-size:.86rem;color:var(--muted);margin:0}
.locked{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r);padding:24px;max-width:620px;margin-top:36px}
footer{background:var(--navy);color:var(--on-navy-muted);font-size:.85rem;padding-block:24px 36px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
footer .brand{font-size:1.1rem}

/* ---------- complementos do site ---------- */
.lbl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.btn-voz{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;padding:8px 14px;border-radius:999px;border:1.5px solid var(--red);background:var(--white);color:var(--red);cursor:pointer}
.btn-voz .mic{width:10px;height:14px;border-radius:5px;background:currentColor;position:relative;display:inline-block}
.btn-voz .mic::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-5px;height:7px;border:2px solid currentColor;border-top:0;border-radius:0 0 9px 9px}
.btn-voz.gravando{background:var(--red);color:#fff;animation:pulsar 1.1s ease-in-out infinite}
@keyframes pulsar{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.45)}50%{box-shadow:0 0 0 8px rgba(200,16,46,0)}}
@media (prefers-reduced-motion:reduce){.btn-voz.gravando{animation:none}}
.counter{display:flex;justify-content:space-between;gap:10px}
.voz-status{text-align:left;color:var(--navy-2);font-weight:600}
.voz-aviso{margin-top:8px;padding:10px 12px;border-left:3px solid var(--red);background:rgba(200,16,46,.06);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--ink)}
.editor .orig audio{width:100%;margin-top:6px;border-radius:999px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.login{max-width:460px;margin:48px auto 0}
.login .lbl{display:block;margin-bottom:6px}
.login .letter-body{gap:16px}
.topbar .btn.small{padding:7px 14px}
.toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.status-line{font-size:.86rem;color:var(--muted)}
.site-note{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--r-s);padding:10px 14px;font-size:.9rem}