/* =========================================================
   BASE — identidade visual da marca (extraída da logo)
   creme · dourado-milho · marrom · crosta · verde-folha
   ========================================================= */

:root {
  --creme: #F8F1E1;        /* fundo geral, como o da logo */
  --nata: #FFFBF0;         /* cartões */
  --papel: #FFFDF6;        /* campos e notas */
  --milho: #E9B94E;        /* dourado do círculo da logo */
  --milho-claro: #F5D584;
  --crosta: #C4701F;       /* laranja da crosta assada */
  --crosta-escura: #8A4B12;
  --marrom: #5B3A1E;       /* marrom das letras da logo */
  --marrom-suave: #7C572F;
  --linha: #E4D5B8;        /* bordas e costuras */
  --verde-folha: #6E8B3D;  /* palha do milho */
  --zap: #12833F;          /* verde do botão de WhatsApp */
  --zap-escuro: #0B5B2B;
  --vermelho: #A8321F;

  --fonte-titulo: "Caprasimo", "Georgia", serif;
  --fonte-texto: "Bitter", "Georgia", serif;
  --fonte-manuscrita: "Caveat", cursive;

  --raio: 16px;
  --raio-campo: 10px;
  --sombra-carta: 0 10px 30px -12px rgba(91, 58, 30, 0.25);
}

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

/* garante que [hidden] esconda mesmo quando a classe define display */
[hidden] { display: none !important; }

html { color-scheme: light; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--marrom);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip; /* pontas decorativas (faixas, recados) não criam rolagem lateral */
}

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

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; }

p { margin: 0 0 1em; }

a { color: var(--crosta); }

:focus-visible {
  outline: 3px dashed var(--crosta);
  outline-offset: 3px;
  border-radius: 4px;
}

.manuscrito {
  font-family: var(--fonte-manuscrita);
  font-weight: 600;
  color: var(--crosta);
}

.container { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

.oculto-acessivel {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- botões (aperto de "carimbo": sobem/afundam) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--fonte-texto); font-weight: 700; font-size: 1rem;
  padding: .8rem 1.5rem; border-radius: 14px; border: none; cursor: pointer;
  text-decoration: none; line-height: 1.2;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:active { transform: translateY(3px); }

.btn-primario {
  background: var(--crosta); color: #fff;
  box-shadow: 0 4px 0 var(--crosta-escura);
}
.btn-primario:hover { background: #B4661B; }
.btn-primario:active { box-shadow: 0 1px 0 var(--crosta-escura); }

.btn-zap {
  background: var(--zap); color: #fff;
  box-shadow: 0 4px 0 var(--zap-escuro);
}
.btn-zap:hover { background: #0F7437; }
.btn-zap:active { box-shadow: 0 1px 0 var(--zap-escuro); }

.btn-contorno {
  background: transparent; color: var(--marrom);
  border: 2px solid var(--marrom); box-shadow: none;
}
.btn-contorno:hover { background: rgba(91, 58, 30, 0.08); }

.btn-mini { font-size: .85rem; padding: .45rem .8rem; border-radius: 10px; }

.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- formulários ---------- */

.campo { display: grid; gap: .35rem; }

.campo > label { font-weight: 600; font-size: .95rem; }

.campo input, .campo select, .campo textarea {
  font: inherit; color: var(--marrom);
  background: var(--papel);
  border: 2px solid var(--linha);
  border-radius: var(--raio-campo);
  padding: .65rem .85rem;
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 84px; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--crosta);
  box-shadow: 0 0 0 3px rgba(196, 112, 31, 0.18);
}

.campo .dica { font-size: .82rem; color: var(--marrom-suave); margin: 0; }

/* seletor segmentado (retirada / entrega) */
.segmentos {
  position: relative;
  display: flex; border: 2px solid var(--linha);
  border-radius: 12px; overflow: hidden; background: var(--papel);
}
.segmentos label { flex: 1; cursor: pointer; }
.segmentos input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.segmentos span {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem .5rem; font-weight: 600; font-size: .95rem;
  transition: background-color .15s ease;
}
.segmentos input:checked + span {
  background: var(--milho-claro);
  box-shadow: inset 0 -3px 0 var(--crosta);
}
.segmentos input:focus-visible + span { outline: 3px dashed var(--crosta); outline-offset: -4px; }

/* ---------- selos de status ---------- */

.selo {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.selo-pendente { background: #FBF0D2; color: #7A5A0B; border-color: #E9CF8B; }
.selo-pago     { background: #E1F2E1; color: #1E6B2E; border-color: #A9D6AF; }
.selo-entregue { background: #E7EEF7; color: #2B4E7E; border-color: #B3C7E0; }
.selo-cancelado{ background: #F9E3E0; color: #9C2B1F; border-color: #E5B0A8; }

/* ---------- cartas / diálogos ---------- */

.carta {
  background: var(--nata);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-carta);
}

dialog {
  border: none; border-radius: var(--raio); padding: 0;
  background: var(--papel); color: var(--marrom);
  width: min(560px, calc(100% - 2rem));
  max-height: calc(100dvh - 3rem);
  box-shadow: 0 24px 60px -20px rgba(60, 35, 10, 0.5);
}
dialog::backdrop { background: rgba(60, 35, 10, 0.45); backdrop-filter: blur(2px); }

.dialogo-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 2px dashed var(--linha);
}
.dialogo-topo h3 { margin: 0; font-size: 1.3rem; }
.dialogo-corpo { padding: 1.25rem; display: grid; gap: .9rem; }
.dialogo-acoes { display: flex; gap: .6rem; justify-content: flex-end; padding-top: .25rem; }

.btn-fechar {
  background: none; border: none; cursor: pointer; color: var(--marrom-suave);
  font-size: 1.5rem; line-height: 1; padding: .2rem .5rem; border-radius: 8px;
}
.btn-fechar:hover { color: var(--marrom); background: rgba(91, 58, 30, 0.08); }

/* ---------- movimento reduzido ---------- */

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