/* Recados do DF — 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}
/* Layout: mistura das duas campanhas. Topo marinho e manchetes Bebas com palavra em vermelho (Leandro); fundo creme, blocos chapados nas quatro cores e pílulas (Lula). Celular em uma coluna; mural em grade; triagem em lista + editor. */
:root{
  --cream:#F2EFE4; --panel:#FAF8F1; --white:#FFFFFF; --navy:#141A34; --navy-2:#1B2A6A; --ink:#1A1A1A; --muted:#5B5B5B; --line:#DAD5C4;
  --red:#E30B1E; --blue:#0034D2; --yellow:#FFD400; --green:#00A81F; --ochre:#F59300;
  --on-navy:#F3ECD8; --on-navy-muted:rgba(243,236,216,.68);
  --focus:#0034D2;
  --f-display:"Bebas Neue","Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-cond:"Barlow Condensed","Barlow",sans-serif;
  --f-hand:"Caveat","Segoe Print",cursive;
  --r:16px; --r-s:10px;
}
:root[data-theme="dark"]{
  --cream:#0F1327; --panel:#171D38; --white:#1D2446; --navy:#0A0E1F; --navy-2:#141A34; --ink:#F3ECD8; --muted:#B5B0A1; --line:#2E3556;
  --red:#FF4A58; --blue:#6E92FF; --yellow:#FFD84A; --green:#3FD35B; --ochre:#FFAE33; --focus:#8FB0FF; 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:400;letter-spacing:.01em;text-transform:uppercase}
.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(--ochre)}

/* ---------- 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-size:1.5rem;letter-spacing:.03em;line-height:1;color:var(--on-navy);text-decoration:none;display:flex;align-items:center;gap:8px}
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 25%,var(--yellow) 25% 50%,var(--green) 50% 75%,var(--blue) 75%)}

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

/* ---------- escrever: hero marinho ---------- */
.hero-band{background:var(--navy);color:var(--on-navy);margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:40px 120px;position:relative;overflow:hidden}
.hero{display:grid;gap:14px;max-width:720px;position:relative}
.hero .eyebrow{color:var(--on-navy-muted)}
.hero h1{font-size:clamp(3rem,10vw,5.6rem)}
.hero p{margin:0;font-size:1.1rem;color:var(--on-navy-muted);max-width:52ch}
.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 20px 50px -24px rgba(20,26,52,.5);max-width:720px;margin-top:-96px;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:3rem}
.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.6rem,7vw,4.4rem)}
.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-display);font-size:1.6rem;line-height:1.05;margin:0;overflow-wrap:anywhere;text-transform:uppercase;letter-spacing:.01em}
.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(2.4rem,6vw,3.6rem)}
.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-size:2.6rem;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.2rem}

/* ---------- 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(227,11,30,.45)}50%{box-shadow:0 0 0 8px rgba(227,11,30,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(227,11,30,.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}