:root{--surface:#F2EBDD;--raised:#E9E1D0;--ink:#2E2D2B;--muted:#5E5A52;--brand:#23392B;--silver:#CFCFC9;--silver-mid:#B9BAB3;--copper:#9C5A35;--accent:#0B5345}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.6 'IBM Plex Sans',system-ui,sans-serif}
a{color:var(--accent)}
.tela{min-height:100vh;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
/* lado da marca */
.lado-marca{position:relative;overflow:hidden;background:var(--brand);color:var(--surface);padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.lado-marca .marca{font:600 26px Cinzel,Georgia,serif;letter-spacing:.14em;color:var(--surface);text-decoration:none;position:relative}
.frase{position:relative;display:flex;flex-direction:column;gap:18px;max-width:440px}
.frase .tique{width:16px;height:1px;background:var(--copper)}
.frase h2{margin:0;font:600 clamp(34px,3.6vw,50px)/1.1 'Source Serif 4',Georgia,serif;color:var(--surface)}
.frase p{margin:0;font-size:17px;color:var(--silver)}
.origem{position:relative;margin:0;max-width:340px;font-size:13px;color:var(--silver-mid)}
.selo-fundo{position:absolute;width:440px;height:440px;right:-110px;bottom:-110px;pointer-events:none}
/* lado do acesso */
.lado-acesso{display:flex;flex-direction:column;padding:48px 56px}
.acesso{flex:1;display:flex;align-items:center}
.bloco{width:100%;max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.bloco .tique{width:16px;height:1px;background:var(--copper)}
.bloco h1{margin:0;font:600 40px/1.1 'Source Serif 4',Georgia,serif;color:var(--brand)}
.bloco p{margin:0}
.nota{font-size:13px;color:var(--muted)}
.filete{height:0;border-top:2px solid var(--silver);margin:4px 0}
/* botao Google (tema escuro das diretrizes do Google) */
.gsi{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:48px;padding:0 16px;border:1px solid #8E918F;border-radius:4px;background:#131314;color:#E3E3E3;font:500 15px 'IBM Plex Sans',Roboto,Arial,sans-serif;text-decoration:none;letter-spacing:.01em;transition:background .15s}
.gsi:hover{background:#2A2B2C;color:#E3E3E3}
.gsi:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gsi svg{width:20px;height:20px;flex-shrink:0}
.botao{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:4px;background:var(--brand);color:var(--surface);font:600 15px 'IBM Plex Sans',sans-serif;text-decoration:none;align-self:flex-start}
.botao:hover{background:#1A2C21;color:var(--surface)}
.rodape{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.rodape a{color:var(--muted)}
@media (max-width:820px){
  .tela{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lado-marca{padding:28px 20px 32px;gap:28px}
  .frase h2{font-size:30px}
  .frase p{font-size:15px}
  .origem{display:none}
  .selo-fundo{width:220px;height:220px;right:-60px;bottom:-70px}
  .lado-acesso{padding:36px 20px 24px}
  .bloco h1{font-size:32px}
}