/* ==========================================================================
   AMANDA & WILLIAM · 14 . 11 . 2026 — fotos no telão
   Mesma paleta do tema "Arco" do site. Para mudar as cores de todas as
   telas, mexa só no bloco PALETA.
   ========================================================================== */

@font-face { font-family: 'Lora'; src: url('/fonts/lora-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/lora-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/lora-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/lora-latin-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('/fonts/lato-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('/fonts/lato-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('/fonts/great-vibes-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- PALETA */
:root {
  --cor-destaque:       #a85c42;   /* terracota da pedra */
  --cor-destaque-forte: #8a4630;
  --cor-apoio:          #2f6b6a;   /* verde-azulado do mar */

  --cor-fundo:          #faf5ef;   /* areia clara */
  --cor-fundo-alt:      #f0e6d9;
  --cor-cartao:         #fffdfa;

  --cor-texto:          #38302a;
  --cor-texto-suave:    #6d5f54;
  --cor-linha:          #e2d5c5;

  /* noite, para o telão */
  --cor-noite:          #1b1411;
  --cor-noite-alt:      #2a1d17;

  --f-titulo: 'Lora', Georgia, 'Times New Roman', serif;
  --f-script: 'Great Vibes', 'Lora', cursive;
  --f-texto:  'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mao:    'Caveat', 'Lora', cursive;

  --raio-arco: 999px 999px 18px 18px;   /* o formato de arco, marca do tema */
  --sombra-1:  0 6px 24px rgba(56, 48, 42, .08);
  --sombra-2:  0 20px 60px rgba(56, 48, 42, .16);
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo) var(--grao);
  color: var(--cor-texto);
  font: 16px/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 3px; }

/* Esconde da tela mas mantém clicável via <label> (display:none falha em alguns iPhones). */
.invisivel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: 0 1.4em;
  border: 1px solid var(--cor-texto);
  border-radius: 999px;
  background: transparent;
  color: var(--cor-texto);
  font: 700 13px/1 var(--f-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .12s;
  user-select: none;
}
.botao:active { transform: scale(.97); }
.botao:disabled { opacity: .45; cursor: default; transform: none; }
.botao svg { width: 20px; height: 20px; flex: none; }

.botao--cheio {
  background: var(--cor-destaque);
  border-color: var(--cor-destaque);
  color: #fff;
}
@media (hover: hover) {
  .botao:hover:not(:disabled) { background: var(--cor-texto); color: var(--cor-fundo); }
  .botao--cheio:hover:not(:disabled) { background: var(--cor-destaque-forte); border-color: var(--cor-destaque-forte); color: #fff; }
}

.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-size: 14px;
  box-shadow: var(--sombra-2);
  transform: translate(-50%, 0);
  animation: aviso-entra .3s ease-out;
}
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 12px); } }