:root{
  --marinho:#0A2350;
  --azul:#123E82;
  --amarelo:#F6BE1A;
  --verde:#1F9D55;
  --claro:#EEF2F8;
  --tinta:#13233F;
  --cinza:#5A6882;
  --linha:#D9E1EE;
  --vermelho:#B3261E;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--claro);color:var(--tinta);font-family:'Montserrat',Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,p{margin:0}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}
.nb{white-space:nowrap}
.sep{opacity:.5;padding:0 2px}

/* ---------- topo ---------- */
.topo{position:relative;overflow:hidden;background:
  radial-gradient(ellipse 55% 85% at 74% 25%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 56px,rgba(255,255,255,0) 56px 132px),
  linear-gradient(180deg,var(--marinho),var(--azul))}
.legal{position:relative;z-index:3;max-width:1100px;margin:0 auto;padding:14px 24px 0;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.topo-dentro{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 24px;height:clamp(290px,38vw,460px);display:flex;align-items:center}
.topo-foto{position:absolute;right:clamp(0px,5vw,80px);bottom:0;height:calc(100% + 6px);width:auto;max-width:54%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}

/* marca (logo em texto) */
.marca{display:flex;flex-direction:column;align-items:flex-start;color:#fff;text-transform:uppercase;line-height:.92;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
.marca-nome1{font-weight:700;font-size:clamp(20px,3.1vw,38px);letter-spacing:.06em}
.marca-nome2{font-weight:900;font-size:clamp(40px,7.4vw,92px);letter-spacing:-.01em}
.marca-faixa{display:block;width:100%;height:clamp(5px,.8vw,9px);margin:clamp(6px,1vw,12px) 0;border-radius:99px;background:linear-gradient(90deg,var(--verde) 0 33%,var(--amarelo) 33% 66%,#3E8BFF 66%)}
.marca-cargo{font-weight:700;font-size:clamp(12px,1.8vw,22px);letter-spacing:.42em;margin-right:-.42em}
.marca-num{font-weight:900;font-size:clamp(66px,12.5vw,158px);letter-spacing:-.02em;line-height:.95;margin-top:clamp(2px,.4vw,6px)}
.marca-num .am{color:var(--amarelo)}

.faixa{position:relative;z-index:3;background:var(--amarelo);color:var(--marinho);text-align:center;padding:clamp(10px,1.6vw,18px) 16px}
.faixa p{font-size:clamp(15px,2.1vw,23px);line-height:1.25;font-weight:700}
.faixa strong{display:inline-block;font-size:clamp(18px,2.9vw,34px);font-weight:900;text-transform:uppercase}

/* ---------- blocos de texto ---------- */
.permitido{background:#fff;border-bottom:1px solid var(--linha)}
.permitido-dentro{max-width:1100px;margin:0 auto;padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.selo{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--verde);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center}
.permitido h2{font-size:18px;font-weight:800;color:var(--azul);line-height:1.3}
.permitido p{font-size:15px;color:var(--cinza);max-width:78ch}
.permitido a{color:var(--azul);font-weight:700}

.intro{max-width:1100px;margin:0 auto;padding:56px 24px 32px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:end}
.intro h1{font-size:clamp(30px,4.2vw,46px);line-height:1.12;font-weight:800;color:var(--marinho);letter-spacing:-.015em;max-width:18ch}
.intro .destaque{background:linear-gradient(transparent 62%,rgba(246,190,26,.55) 62%);padding:0 .08em}
.intro p{font-size:17px;color:var(--cinza);max-width:46ch}

.ferramenta{max-width:1100px;margin:0 auto;padding:8px 24px 64px}

.duvidas{background:#fff}
.duvidas-dentro{max-width:1100px;margin:0 auto;padding:56px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.duvidas h2{font-size:19px;font-weight:800;color:var(--azul);margin-bottom:8px;line-height:1.3}
.duvidas p{font-size:15px;color:var(--cinza)}

.rodape{background:var(--marinho);color:#fff}
.rodape-dentro{max-width:1100px;margin:0 auto;padding:28px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.marca-mini{flex-direction:row;align-items:baseline;gap:12px;filter:none}
.marca-mini .marca-nome2{font-size:22px}
.marca-mini .marca-num{font-size:30px;margin:0}
.rodape small{font-size:12px;opacity:.78;max-width:62ch;text-align:right;line-height:1.7}

/* ---------- gerador ---------- */
#colinha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px;align-items:start}
.form{display:flex;flex-direction:column;gap:12px}
.linha{background:#fff;border-left:6px solid var(--azul);border-radius:0 14px 14px 0;box-shadow:0 1px 3px rgba(20,40,90,.10);padding:14px 16px}
.linha-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.rotulo{font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.03em}
.dig{font-size:12px;font-weight:700;color:#8A97B0}
.entrada{display:flex;gap:10px;align-items:stretch}
.entrada input{flex:1;min-width:0;font:800 26px/1.2 'Montserrat',Arial,sans-serif;letter-spacing:.5em;padding:8px 4px;border:0;border-bottom:3px solid #C5CEDD;border-radius:0;background:#fff;color:var(--tinta)}
.entrada input::placeholder{color:#C5CEDD}
.entrada input:focus{outline:none;border-bottom-color:var(--azul)}
.btn-nulo{flex:0 0 auto;font:800 14px 'Montserrat',Arial,sans-serif;padding:0 18px;border-radius:10px;border:2px solid #C5CEDD;background:#fff;color:var(--cinza);cursor:pointer}
.btn-nulo:hover{border-color:var(--cinza)}
.btn-nulo.ativo{background:var(--cinza);border-color:var(--cinza);color:#fff}
.card{display:flex;align-items:center;gap:12px;margin-top:10px;min-height:22px;font-size:14px}
.card .foto{width:52px;height:52px;border-radius:50%;overflow:hidden;background:#E6EAF1;flex:0 0 auto;box-shadow:0 0 0 3px var(--azul)}
.card .foto img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.card .info{display:flex;flex-direction:column;min-width:0;flex:1}
.card .info strong{font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .info span{font-size:13px;font-weight:700;color:var(--cinza)}
.msg{color:#6B7A99}
.card.nao .msg,.card.erro .msg{color:var(--vermelho);font-weight:700}
.aviso{font-size:13px;color:var(--vermelho);font-weight:700}
.aviso:not(:empty){margin-top:8px}
.situacao{display:inline-block;margin-top:2px;font-size:12px;font-weight:700;color:#8A5A00;background:#FFF4D6;border-radius:6px;padding:1px 8px}

.linha.fixa{background:var(--azul);color:#fff;border-left-color:var(--amarelo);padding:16px 18px}
.card-fixo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px}
.foto-fixa{width:108px;height:108px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 4px var(--amarelo);background:rgba(255,255,255,.1)}
.foto-fixa img{width:100%;height:100%;object-fit:cover;display:block}
.info-fixa{display:flex;flex-direction:column;gap:2px;min-width:0}
.info-fixa .rotulo{color:var(--amarelo);font-size:14px}
.info-fixa strong{font-size:28px;font-weight:900;line-height:1.1}
.info-fixa .sub{font-size:15px;font-weight:700;color:rgba(255,255,255,.82)}
.confirma{background:linear-gradient(180deg,#46D873,#23A94A);color:#0B3B1B;border-radius:10px;padding:14px 22px;font-size:16px;font-weight:900;letter-spacing:.08em;box-shadow:0 5px 0 #15802F,inset 0 1px 0 rgba(255,255,255,.5);margin-bottom:5px;white-space:nowrap}

.btn-limpar{align-self:flex-start;font:700 14px 'Montserrat',Arial,sans-serif;color:var(--cinza);background:transparent;border:2px solid #C5CEDD;border-radius:10px;padding:10px 18px;cursor:pointer}
.btn-limpar:hover{border-color:var(--cinza);color:var(--tinta)}
.fonte{font-size:12px;color:#6B7A99;margin:4px 2px 0}

.lateral{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}
.formato{display:flex;background:#E3E9F2;border-radius:12px;padding:4px}
.formato button{flex:1;font:800 14px 'Montserrat',Arial,sans-serif;border:0;border-radius:9px;padding:10px;background:transparent;color:var(--cinza);cursor:pointer}
.formato button.ativo{background:#fff;color:var(--tinta);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.previa{background:#E3E9F2;border-radius:14px;padding:14px;display:flex;justify-content:center}
.canvas{width:100%;max-width:340px;height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);display:block}
.previa[data-formato="story"] .canvas{max-width:270px}
.btn-baixar{font:900 18px 'Montserrat',Arial,sans-serif;padding:16px;border:0;border-radius:12px;background:var(--marinho);color:var(--amarelo);cursor:pointer;width:100%}
.btn-baixar:hover{background:var(--azul)}
.btn-baixar:active{transform:scale(.99)}
.btn-imprimir{font:800 15px 'Montserrat',Arial,sans-serif;padding:12px;border:2px solid var(--marinho);border-radius:12px;background:#fff;color:var(--marinho);cursor:pointer;width:100%}
.btn-imprimir:hover{background:#F4F7FC}
.baixar-msg{font-size:13px;color:var(--cinza);text-align:center;min-height:1em}

/* ---------- celular ---------- */
@media (max-width:860px){
  .legal{font-size:8.5px;letter-spacing:0;line-height:1.5;padding:8px 14px 0}
  .topo-dentro{padding:0 14px;height:clamp(240px,64vw,340px)}
  .topo-foto{right:-4%;max-width:56%}
  .marca{max-width:58%}
  .marca-nome2{font-size:clamp(30px,9.6vw,64px)}
  .marca-cargo{font-size:clamp(8px,2.3vw,15px);letter-spacing:.3em;margin-right:-.3em}
  .marca-num{font-size:clamp(52px,16vw,108px)}
  .permitido-dentro{padding:18px 20px;gap:12px}
  .intro{grid-template-columns:1fr;gap:12px;padding:36px 20px 24px}
  .ferramenta{padding:4px 16px 48px}
  #colinha{grid-template-columns:minmax(0,1fr)}
  .lateral{position:static}
  .duvidas-dentro{grid-template-columns:1fr;gap:24px;padding:40px 20px}
  .rodape-dentro{padding:24px 20px}
  .rodape small{text-align:left}
}
@media (max-width:520px){
  .card-fixo{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .foto-fixa{width:84px;height:84px}
  .info-fixa strong{font-size:22px}
  .confirma{grid-column:1 / -1;text-align:center;padding:12px}
}

/* ---------- impressão: só a colinha ---------- */
@media print{
  @page{margin:10mm}
  body{background:#fff}
  body > *:not(#impressao){display:none !important}
  #impressao{display:block !important;width:100%;max-width:150mm;margin:0 auto}
}