/* aviso.css — a página de aviso do endereço antigo (#1162, Ato 2 do Dia D).
   Cores e fontes do book (docs/design/RICODATO_DESIGN_SYSTEM_30OUT26.md), as
   mesmas da landing (apps/ricodato-site). Fontes auto-hospedadas nesta pasta:
   tudo fora de /aviso-endereco/ no host antigo é redirecionado para cá. */

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/outfit-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }

:root {
  --surface: #F4F0EA;      /* linho */
  --card: #FFFFFF;
  --border: #E3DED4;
  --ink: #1B2A4A;          /* marinho */
  --muted: #5F6B80;
  --brand: #E4572E;        /* terracota: formas */
  --brand-hover: #C8471F;  /* fundo do botão (4,80:1 com branco) */
  --brand-ink: #9A3A1E;    /* terracota para texto */
  --brand-soft: #FBE6DF;
  --display: 'Outfit', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--surface); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 2px; }

.aviso { width: 100%; max-width: 520px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 40px 36px 28px; box-shadow: 0 12px 40px rgba(27, 42, 74, .08); }
.marca { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.marca svg { width: 34px; height: 34px; }
.marca span { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.04em; }

h1 { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
p { margin: 0; }
.lead { color: var(--muted); font-size: 17px; margin-bottom: 24px; }

.endereco { display: flex; flex-direction: column; gap: 2px; background: var(--brand-soft); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.favoritos { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.endereco .rotulo { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.endereco strong { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; word-break: break-word; }

.contagem { font-weight: 600; margin-bottom: 10px; }
.contagem span { color: var(--brand-ink); }
.barra { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 24px; }
.barra span { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left center; animation: encher 30s linear forwards; transform: scaleX(0); }
@keyframes encher { to { transform: scaleX(1); } }

.btn { display: flex; align-items: center; justify-content: center; width: 100%; font: 600 16px/1 var(--body); text-decoration: none; border-radius: 10px; padding: 15px 20px; background: var(--brand-hover); color: #FFFFFF; transition: background .15s; }
.btn:hover { background: var(--brand-ink); }

.nota { font-size: 14px; color: var(--muted); margin-top: 20px; }
.rodape { font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 24px; padding-top: 16px; }

@media (max-width: 480px) {
  .aviso { padding: 28px 20px 22px; border-radius: 14px; }
  h1 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .barra span { animation: none; transform: scaleX(1); }
  .btn { transition: none; }
}