/*
 * Estilo das páginas públicas — Imperial Gastronomy System.
 *
 * As cores são as mesmas do aplicativo (`apps/mobile/src/design-system/tokens/cores.ts`),
 * e passam nos mesmos limites de contraste da WCAG 2.2 AA: texto #1E1B18 sobre o
 * creme #FFF8F5 mede 16,3:1, o vinho #610000 mede 13,3:1, e o marrom de apoio
 * #5A403C mede 9,0:1.
 *
 * Um arquivo só, sem framework: estas páginas precisam abrir rápido, funcionar sem
 * JavaScript e continuar legíveis daqui a dois anos, quando ninguém lembrar qual
 * versão de qual biblioteca elas usavam. É requisito de publicação nas lojas — a
 * revisão da Play Store e da App Store abre esta URL sem instalar nada.
 */

:root {
  --marca: #610000;
  --marca-viva: #b52619;
  --dourado: #fed65b;
  --dourado-texto: #735c00;
  --fundo: #fff8f5;
  --superficie: #ffffff;
  --superficie-alt: #f5ece7;
  --texto: #1e1b18;
  --texto-suave: #5a403c;
  --borda: #e3beb8;
  --raio: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 16px 64px;
  background: var(--fundo);
  color: var(--texto);
  font-family:
    'Manrope',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 16px;
  line-height: 1.65;
  /* Impede o Safari do iPhone de inflar o texto ao girar a tela. */
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 720px;
  margin: 0 auto;
}

h1,
h2,
h3 {
  font-family:
    'Be Vietnam Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--marca);
  line-height: 1.25;
}

h1 {
  font-size: 2rem;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.3rem;
  margin: 40px 0 8px;
}

h3 {
  font-size: 1.05rem;
  margin: 24px 0 4px;
  color: var(--texto);
}

p,
li {
  margin: 8px 0;
}

a {
  color: var(--marca);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--marca-viva);
}

/* Cabeçalho -------------------------------------------------------------- */

header {
  border-bottom: 1px solid var(--borda);
  padding: 40px 0 24px;
  margin-bottom: 8px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  color: var(--marca);
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.coroa {
  background: var(--dourado);
  color: var(--dourado-texto);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.subtitulo {
  color: var(--texto-suave);
  font-size: 0.9rem;
  margin: 0;
}

/* Blocos ----------------------------------------------------------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin: 24px 0;
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.06);
}

.destaque {
  background: var(--superficie-alt);
  border-left: 4px solid var(--marca);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
}

/* Passos numerados: o que a pessoa tem de fazer, na ordem. */
ol.passos {
  counter-reset: passo;
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

ol.passos > li {
  counter-increment: passo;
  position: relative;
  padding: 12px 0 12px 48px;
  border-bottom: 1px solid var(--borda);
}

ol.passos > li:last-child {
  border-bottom: 0;
}

ol.passos > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tabela ----------------------------------------------------------------- */

.rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin: 16px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--superficie);
}

th,
td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borda);
}

thead th {
  background: var(--superficie-alt);
  font-family: 'Be Vietnam Pro', sans-serif;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* Botão de contato ------------------------------------------------------- */

.botao {
  display: inline-block;
  background: var(--marca);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 8px;
  margin-top: 8px;
  /* Alvo de toque confortável, igual ao do aplicativo. */
  min-height: 56px;
  line-height: 24px;
}

.botao:hover {
  background: var(--marca-viva);
  color: #fff;
}

/* Rodapé ----------------------------------------------------------------- */

footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 0.85rem;
}

footer a {
  color: var(--texto-suave);
}

/* Impressão: o texto é documento, e documento se imprime. */
@media print {
  body {
    background: #fff;
    padding: 0;
  }

  .cartao,
  .destaque,
  .rolagem {
    box-shadow: none;
    break-inside: avoid;
  }

  .botao {
    border: 1px solid var(--marca);
    color: var(--marca);
    background: transparent;
  }
}