:root{--ink:#102f35;--muted:#637577;--accent:#126e59;--paper:#fffefa}
*{box-sizing:border-box}body{margin:0;background:#94e3f5;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.app-shell{max-width:580px;padding:40px 20px 24px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:750;letter-spacing:1.7px}.brand-mark{display:grid;place-items:center;width:27px;height:29px;background:var(--ink);color:white;border-radius:7px;font-size:19px}.page-header h1{font-size:clamp(36px,8vw,47px);font-weight:750;line-height:1.12;letter-spacing:-1.8px;margin:25px 0 18px}.page-header h1 span{color:var(--accent)}.page-header p{color:var(--muted);font-size:14px;line-height:1.65}.privacy-note{font-size:11px;color:#506965;display:flex;gap:8px;align-items:center;margin:20px 0 27px}.privacy-note span{font-size:8px;color:var(--accent)}.ballot{background:var(--paper);border:1px solid #dce3da;border-radius:18px;box-shadow:0 12px 35px #173e3510;overflow:hidden}.ballot-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #e5e9e1;gap:8px}.ballot-heading h2{font-size:18px;font-weight:750;margin:0}.ballot-heading>span{font-size:10px;color:var(--muted);white-space:nowrap;background:#edf2e9;border-radius:20px;padding:6px 9px}.office{display:block;text-align:left;width:100%;border:0;border-bottom:1px solid #e7eae4;background:transparent;padding:19px 22px;color:var(--ink)}.office:hover{background:#f2f6ef}.office:focus-visible,button:focus-visible{outline:3px solid #b47a15;outline-offset:-3px}.office-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px}.office-label{font-size:14px;font-weight:700}.office-index{color:#80908a;font-size:10px;margin-right:9px;font-weight:500}.edit-label{font-size:11px;color:var(--accent);font-weight:600}.digits{display:flex;gap:7px}.digit{display:grid;place-items:center;width:43px;height:51px;background:#f4f5f0;border:1px solid #d9e0d5;border-radius:7px;font-size:32px;font-weight:750;line-height:1;font-variant-numeric:tabular-nums}.digit.empty:after{content:"";width:10px;height:2px;background:#cad3c7}.office.filled .digit{background:#eaf3e9;border-color:#b5cdb9}.ballot-footer{padding:15px 22px;font-size:10px;color:var(--muted)}.ballot-footer span{color:var(--accent);margin-right:6px}.status{min-height:20px;font-size:12px;color:var(--accent);margin:16px 0 8px}.btn{min-height:46px;border-radius:10px;font-size:14px;font-weight:600}.btn-primary{--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-bg:#0d5948;--bs-btn-hover-border-color:#0d5948;--bs-btn-active-bg:#0d5948;--bs-btn-active-border-color:#0d5948}.btn-outline-primary{--bs-btn-color:var(--ink);--bs-btn-border-color:#b6c6bc;--bs-btn-hover-bg:#dfe9dd;--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:#a6b7ac;--bs-btn-active-bg:#dfe9dd;--bs-btn-active-color:var(--ink)}.btn-link{color:var(--muted);font-size:12px}.page-footer{text-align:center;margin-top:10px}.page-footer p{color:var(--muted);font-size:10px;margin-top:6px}dialog{width:calc(100% - 32px);max-width:430px;border:1px solid #d8e0d7;border-radius:20px;padding:26px;color:var(--ink);background:var(--paper);max-height:90dvh;overflow:auto}dialog::backdrop{background:#092b35a6;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.close-button{width:44px;height:44px;border:0;border-radius:50%;background:#edf2e9;font-size:27px;color:var(--ink)}dialog h2{font-size:24px;font-weight:750;margin:18px 0 24px}.form-label{font-size:13px}.form-control{font-size:30px;letter-spacing:8px;font-variant-numeric:tabular-nums}.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px #126e5925}.form-text{font-size:12px}.error{font-size:13px;color:#b02a37;min-height:20px}.alert{font-size:12px}@media(min-width:900px){.app-shell{padding-top:55px}}@media(max-width:350px){.app-shell{padding:26px 14px}.ballot-heading,.office{padding-left:16px;padding-right:16px}.office-index{margin-right:6px}.digit{width:39px;height:48px}.digits{gap:6px}.ballot-heading>span{font-size:9px}.office-label{font-size:13px}}

/* Paleta da referência: azul royal, cartões translúcidos e verde. */
.page-header,.page-header h1 span{color:#fff}.page-header p,.privacy-note{color:#d0dcf2}.privacy-note span{color:#10b98b}.brand-mark{background:#ffffff18;color:#cedcf7}
.ballot{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}.ballot-heading{border:0;padding:0 2px 16px}.ballot-heading>span{background:#ffffff12;color:#d3dff5}
#offices{display:grid;gap:16px}.office{background:#ffffff1a;border:1px solid #ffffff33;border-radius:18px;color:#fff;box-shadow:0 3px 9px #082a6110}.office:hover{background:#ffffff24}.office-index,.edit-label{color:#d0dcf2}.digit,.office.filled .digit{background:#e9edf5;border:1px solid #e9edf5;color:#123d85;box-shadow:0 3px 5px #061e4926}.digit.empty:after{background:#c2ccde}.ballot-footer{color:#d0dcf2;padding-left:2px}.ballot-footer span{color:#80f0cc}
.status{color:#c2fbe7}.page-footer p,.page-footer .btn-link{color:#d0dcf2}.page-footer .btn-link:hover{color:#fff}
.actions .btn-primary,.actions .btn-outline-primary{--bs-btn-color:#063c36;--bs-btn-bg:#10b98b;--bs-btn-border-color:#10b98b;--bs-btn-hover-bg:#35d3a8;--bs-btn-hover-color:#063c36;--bs-btn-hover-border-color:#35d3a8;--bs-btn-active-bg:#59dfbb;--bs-btn-active-color:#063c36;--bs-btn-active-border-color:#59dfbb}
#download{--bs-btn-bg:transparent;--bs-btn-color:#fff;--bs-btn-border-color:#8faedb;--bs-btn-hover-bg:#ffffff18;--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-active-bg:#ffffff26;--bs-btn-active-color:#fff;--bs-btn-active-border-color:#fff}

/* Composição responsiva: imagem proporcional independente do formulário. */
body{min-height:100vh;background:#074ca8;color:#fff;isolation:isolate}
.scene{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#074ca8 url('assets/fundo-horizontal.png') center right/cover no-repeat}
.scene-wave{position:fixed;inset:auto 0 0;height:100px;z-index:-1;pointer-events:none;background:#153983;clip-path:polygon(0 0,10% 30%,25% 57%,40% 72%,55% 78%,70% 66%,85% 39%,100% 0,100% 100%,0 100%);border-top:0}
.scene-wave:before{content:"";position:absolute;inset:0;background:#00bfae;clip-path:polygon(0 0,10% 30%,25% 57%,40% 72%,55% 78%,70% 66%,85% 39%,100% 0,100% 27%,85% 63%,70% 85%,55% 98%,40% 92%,25% 77%,10% 50%,0 20%)}
.app-shell{position:relative;max-width:none;width:min(48vw,760px);margin-left:clamp(36px,10vw,180px);margin-right:0;padding:32px 20px 70px}
.page-header h1{font-size:clamp(38px,3.9vw,64px);margin-top:25px}.page-header h1 span{color:#1ed5b5}.page-header p{font-size:15px}.office{background:#225ca7d9;backdrop-filter:blur(8px)}.office:hover{background:#2e6bb7e8}
.campaign-logo{position:absolute;top:112px;left:60%;width:clamp(150px,16vw,280px);aspect-ratio:250/90;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.campaign-logo img{position:absolute;width:374%;max-width:none;height:auto;left:-228%;top:-178%;filter:grayscale(1) contrast(8)}
@media(min-width:1500px){.app-shell{width:49vw}.page-header p{font-size:17px}.office{padding:22px}.office-label{font-size:16px}.digit{width:48px;height:58px}}
@media(max-width:1100px){
 .scene{position:absolute;height:330px;background-size:auto 330px;background-position:right top;mask-image:linear-gradient(#000 80%,transparent)}
 .scene-wave{display:none}.campaign-logo{top:30px;left:20px;width:145px}
 .app-shell{width:100%;max-width:580px;margin:0 auto;padding:300px 20px 28px}
 .page-header h1{font-size:38px;margin:20px 0 16px}.page-header p{font-size:14px}.office{backdrop-filter:none;background:#ffffff1a}
}
@media(max-width:350px){.app-shell{padding-left:14px;padding-right:14px}.page-header h1{font-size:35px}.campaign-logo{width:125px;left:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(min-width:1101px){.campaign-logo{left:45%;top:135px;width:clamp(160px,16vw,280px)}}
@media(min-width:1101px){.scene{background-position:right top}}
/* Destaque apenas do número de Deputado Federal. */
.office[data-office="federal"] .digits{font-size:32px}
.office[data-office="federal"] .digit{font-size:1.5em;color:#f28c28;font-weight:700}

/* Logo fornecida em PNG transparente, sem recortes nem filtros. */
.campaign-logo{aspect-ratio:auto;overflow:visible;mix-blend-mode:normal}
.campaign-logo img{position:static;display:block;width:100%;max-width:100%;height:auto;filter:none}
@media(min-width:1101px){.campaign-logo{width:clamp(180px,18vw,310px)}}
@media(max-width:1100px){.campaign-logo{width:clamp(145px,43vw,190px)}}
@media(max-width:350px){.campaign-logo{width:140px}}

/* Card fixo — Deputado Federal 5577 */
.office-fixed {
  cursor: default !important;
  border-color: #193D91 !important;
  background: linear-gradient(135deg, #193D91 0%, #1a4399 100%) !important;
}
.office-fixed .office-label,
.office-fixed .office-index,
.office-fixed .digit {
  color: #fff !important;
}
.office-fixed .digit.empty {
  color: rgba(255,255,255,.4) !important;
  border-color: rgba(255,255,255,.3) !important;
}
.fixed-label {
  color: #f6de1d !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.office-fixed:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Fontes maiores para telas de alta densidade (Galaxy S Ultra, etc.) ── */
@media (min-width: 360px) and (max-width: 1100px) {
  .office-label         { font-size: 16px; }
  .office-index         { font-size: 12px; }
  .edit-label,
  .fixed-label          { font-size: 13px; }
  .digit                { width: 50px; height: 60px; font-size: 36px; }
  .ballot-heading h2    { font-size: 22px; }
  .ballot-heading > span{ font-size: 12px; padding: 7px 12px; }
  .ballot-footer        { font-size: 12px; }
  .page-header h1       { font-size: clamp(40px, 9vw, 56px); }
  .page-header p        { font-size: 16px; }
  .privacy-note         { font-size: 13px; }
  .status               { font-size: 14px; }
  .page-footer p        { font-size: 12px; }
  .eyebrow              { font-size: 13px; letter-spacing: 1.5px; }
}

/* Galaxy S Ultra e similares (largura física ~412px lógicos) */
@media (min-width: 400px) and (max-width: 1100px) {
  .office-label         { font-size: 17px; }
  .digit                { width: 54px; height: 65px; font-size: 40px; }
  .office               { padding: 22px; }
  .ballot-heading       { padding: 22px 24px 18px; }
  .office-index         { margin-right: 11px; }
  .digits               { gap: 9px; }
}

/* Dígitos 5577 do card fixo em laranja */
.office-fixed .digit {
  color: #ff6a00 !important;
  background: #fff !important;
  border-color: #fff !important;
  font-weight: 900 !important;
}

/* Botão Salvar — texto branco negrito garantido */
#install {
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Mobile: foto só até a wave, logo centralizada ── */
@media(max-width:1100px){
  /* Foto: altura reduzida para cortar na wave, sem mostrar o corpo abaixo */
  .scene{
    height: 280px;
    background-size: auto 280px;
    background-position: right top;
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  }

  /* Logo: centralizada horizontalmente no topo */
  .campaign-logo{
    top: 16px;
    left: 50% !important;
    transform: translateX(-50%);
    width: clamp(160px, 48vw, 220px) !important;
  }

  /* Conteúdo começa logo abaixo da foto */
  .app-shell{
    padding-top: 250px;
  }
}

@media(max-width:480px){
  .scene{
    height: 240px;
    background-size: auto 240px;
  }
  .app-shell{
    padding-top: 210px;
  }
  .campaign-logo{
    width: clamp(150px, 50vw, 200px) !important;
    top: 12px;
  }
}

@media(max-width:350px){
  .scene{ height: 210px; background-size: auto 210px; }
  .app-shell{ padding-top: 185px; }
  .campaign-logo{ width: 140px !important; top: 10px; }
}

/* ── Logo centralizada na área da foto (mobile) ── */
@media(max-width:1100px){
  .campaign-logo{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: clamp(160px, 48vw, 220px) !important;
  }
}
@media(max-width:480px){
  .campaign-logo{
    width: clamp(150px, 50vw, 200px) !important;
  }
}
@media(max-width:350px){
  .campaign-logo{ width: 140px !important; }
}

/* ── Logo: posição correta no mobile — canto superior esquerdo da foto ── */
@media(max-width:1100px){
  .campaign-logo{
    top: 18px !important;
    left: 16px !important;
    transform: none !important;
    width: clamp(150px, 44vw, 210px) !important;
  }
}
@media(max-width:480px){
  .campaign-logo{
    top: 14px !important;
    left: 14px !important;
    width: clamp(140px, 46vw, 190px) !important;
  }
}
@media(max-width:350px){
  .campaign-logo{
    top: 10px !important;
    left: 10px !important;
    width: 130px !important;
  }
}