@font-face {
  font-family: 'Lorestta';
  src: url('fontes/lorestta.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Anna Paula & Jefferson — fundações
   Tokens espelhados do Figma (Id Visual Casamento, Section 151:2).
   Toda cor de texto aqui já passou em contraste AA.
   ========================================================================== */

:root {
  /* --- cores de marca: ornamento, preenchimento, traço --- */
  --creme:        #F5EFE6;
  --areia:        #EEE4D8;
  --areia-forte:  #E6D8C9;
  --marinho:      #243447;
  --dourado:      #B08D57;
  --sage:         #A3AEA0;
  --rosa:         #C69797;
  --branco:       #FFFFFF;
  --papel:        #FAF8F5;

  /* --- cores de TEXTO: nunca use as de marca em texto --- */
  --tinta:            #243447;
  --tinta-apoio:      #5A6674;
  --dourado-texto:    #7D5F33;  /* sobre fundo claro */
  --dourado-claro:    #C9A46B;  /* sobre fundo escuro */
  --dourado-arte:     #63492A;  /* sobre a aquarela */
  --verde-texto:      #5A7354;
  --vermelho-texto:   #9C4A42;
  --placeholder:      #746F68;
  --apagado:          #948F8A;
  /* fundos de estado: selecionado, erro e sucesso, sempre bem lavados */
  --fundo-selecao:    #F7F6F2;
  --fundo-erro:       #FAF4F2;
  --fundo-ok:         #F7F9F5;
  /* cinza dos ícones sem foto, sobre fundo areia */
  --icone-vazio:      #8A7F70;
  /* textos secundários sobre o marinho: sidebar do painel e rodapé */
  --sobre-escuro:     #C7BDAD;
  --sobre-escuro-2:   #B8C2D1;
  /* o link de sair é secundário: um degrau abaixo do menu, ainda em 5:1 */
  --sobre-escuro-3:   #98A4B4;

  /* --- superfícies --- */
  --linha:        #DED9D1;
  --linha-forte:  #E0D8CC;
  --campo:        #FBFAF7;

  /* --- tipografia --- */
  --titulo: 'Lorestta', 'Italiana', Georgia, serif;
  --corpo:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* --- espaçamento: escala de 4 --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px;
  --e9: 48px; --e10: 64px; --e11: 80px; --e12: 110px;

  /* --- medidas --- */
  --margem-mobile: 24px;
  --medida: min(1260px, calc(100vw - 180px));
  --raio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.envoltorio { width: var(--medida); margin-inline: auto; }

/* ==========================================================================
   Tipografia — os 19 estilos do Figma
   ========================================================================== */
.t-display        { font-family: var(--titulo); font-size: 96px; line-height: 1.08; letter-spacing: .01em; font-weight: 400; margin: 0; }
.t-secao          { font-family: var(--titulo); font-size: 50px; line-height: 1.12; letter-spacing: .02em; font-weight: 400; margin: 0; }
.t-pagina         { font-family: var(--titulo); font-size: 44px; line-height: 1.15; letter-spacing: .01em; font-weight: 400; margin: 0; }
.t-card,
.presente__preco,
.ck-status__tempo { font-family: var(--titulo); font-size: 26px; line-height: 1.2;  letter-spacing: .02em; font-weight: 400; margin: 0; }
.t-numero         { font-family: var(--titulo); font-size: 50px; line-height: 1;    font-weight: 400; margin: 0; }

.r-kicker         { font-family: var(--titulo); font-size: 13px; letter-spacing: .54em; text-transform: uppercase; color: var(--dourado-texto); margin: 0; }
.r-kicker-p       { font-family: var(--titulo); font-size: 11px; letter-spacing: .45em; text-transform: uppercase; color: var(--dourado-texto); margin: 0; }
.r-botao          { font-family: var(--titulo); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
/* Quem veste este papel está listado aqui, e não copia os valores no próprio
   arquivo. É o preço de não ter pré-processador: a lista mora junto do papel,
   mas o valor existe uma vez só — mudar aqui muda o site inteiro. */
.r-botao-p,
.cartao-info__link,
.rodape__nav a,
.filtro,
.opcao span,
.pn__add,
.pn__seg button   { font-family: var(--titulo); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.r-campo,
.presente__selo   { font-family: var(--titulo); font-size: 11px; letter-spacing: .20em; text-transform: uppercase; color: var(--tinta-apoio); }
.r-menu           { font-family: var(--titulo); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }

.c-olho           { font-family: var(--corpo); font-style: italic; font-size: 23px; line-height: 1.5; color: var(--tinta-apoio); margin: 0; }
.c-olho-p         { font-family: var(--corpo); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--tinta-apoio); margin: 0; }
.c-padrao         { font-family: var(--corpo); font-size: 19px; line-height: 1.5; margin: 0; }
.c-pequeno,
.rodape__data,
.presente__descricao,
.ligacao          { font-family: var(--corpo); font-size: 17px; line-height: 1.45; margin: 0; }
.c-legenda,
.presente__cotas,
.pn__link         { font-family: var(--corpo); font-size: 15px; line-height: 1.4; color: var(--tinta-apoio); margin: 0; }
.c-painel         { font-family: var(--corpo); font-size: 17px; font-weight: 500; line-height: 1.4; margin: 0; }

@media (max-width: 860px) {
  .t-display { font-size: 52px; }
  .t-secao   { font-size: 38px; }
  .t-pagina  { font-size: 34px; }
  .t-card    { font-size: 23px; }
  .c-olho    { font-size: 17px; }
  :root { --medida: calc(100vw - (var(--margem-mobile) * 2)); }
}

/* ==========================================================================
   Peças
   ========================================================================== */
.filete { width: 120px; height: 1px; background: var(--dourado); border: 0; margin: 0 auto; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--titulo); font-size: 14px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid var(--marinho);
  background: var(--marinho); color: var(--creme);
  text-decoration: none; cursor: pointer;
  border-radius: var(--raio);
  transition: background .2s ease, color .2s ease;
}
.botao:hover { background: transparent; color: var(--marinho); }
.botao--vazado { background: transparent; color: var(--marinho); }
.botao--vazado:hover { background: var(--marinho); color: var(--creme); }
.botao--perigo { background: var(--vermelho-texto); border-color: var(--vermelho-texto); color: var(--branco); }
.botao--perigo:hover { background: transparent; color: var(--vermelho-texto); }
.botao--largo { width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] {
  /* desabilitado ainda é texto e precisa ser legível: o cinza claro dava 2,8:1 */
  background: transparent; border-color: var(--linha); color: var(--placeholder);
  pointer-events: none;
}

.cartao {
  background: var(--creme);
  border: 1px solid var(--linha);
  padding: var(--e7);
}

/* --- campos --- */
.campo { display: block; margin-bottom: var(--e5); }
.campo > span {
  display: block; font-family: var(--titulo); font-size: 11px;
  letter-spacing: .20em; text-transform: uppercase;
  color: var(--tinta-apoio); margin-bottom: 7px;
}
.campo input, .campo textarea, .campo select {
  width: 100%; font-family: var(--corpo); font-size: 19px; color: var(--tinta);
  background: var(--campo); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 13px 14px;
  transition: border-color .2s ease;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--placeholder); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--dourado-texto); outline-offset: 1px; border-color: transparent;
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo--erro input { border-color: var(--vermelho-texto); }
.campos-lado { display: flex; gap: var(--e5); }
.campos-lado > * { flex: 1; }

/* --- avisos --- */
.aviso {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4) 18px; border: 1px solid var(--dourado); border-radius: var(--raio);
  background: var(--fundo-selecao); font-size: 17px;
}
.aviso::before {
  content: ''; flex: none; width: 9px; height: 9px; margin-top: .45em;
  border-radius: 50%; background: var(--dourado-texto);
}
.aviso--erro { border-color: var(--vermelho-texto); background: var(--fundo-erro); }
.aviso--erro::before { background: var(--vermelho-texto); }
.aviso--ok { border-color: var(--verde-texto); background: var(--fundo-ok); }
.aviso--ok::before { background: var(--verde-texto); }
.aviso strong { display: block; font-weight: 500; }
.aviso small { display: block; color: var(--tinta-apoio); font-size: 15px; margin-top: 2px; }

/* --- ícones --- */
.icone { flex: none; display: inline-block; vertical-align: middle; }
.icone svg { width: 100%; height: 100%; display: block; }

/* --- acessibilidade --- */
.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: var(--e4); top: var(--e4); z-index: 99;
  background: var(--marinho); color: var(--creme); padding: var(--e3) var(--e4);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- SVG inline: o container define o tamanho --- */
.cabecalho__mono, .rodape__mono, .chamada__mono, .presente__vazio { display: block; }
.cabecalho__mono svg, .rodape__mono svg, .chamada__mono svg,
.presente__vazio svg, .capa__marca-agua svg, .ramo svg { width: 100%; height: auto; display: block; }
.cabecalho__mono { aspect-ratio: 564 / 839; }
.rodape__mono, .chamada__mono { aspect-ratio: 564 / 839; }

/* hidden tem que vencer qualquer display de grid/flex */
[hidden] { display: none !important; }

/* título que existe para leitor de tela e para a estrutura do documento */
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}