/* ==========================================================================
   SABOREARE — style.css (terceira versão / fusão)
   --------------------------------------------------------------------------
   O QUE ESTE ARQUIVO UNE:
   - Do index.html (vinho): paleta quente de apetite, divisor dourado em
     losango, CTA sólido laranja de alto contraste, urgência concreta.
   - Do index_7.html (oliva/escuro): moldura fina (frame), animação da
     folha + wordmark, tipografia editorial, acessibilidade e ritmo visual.

   ORGANIZAÇÃO:
   1. Tokens (variáveis)  2. Base/reset  3. Moldura  4. Logo
   5. Copy  6. Escassez  7. Form  8. Footer  9. Animações  10. Responsivo
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — paleta única da fusão.
   Vinho como fundo (apetite, do index.html) + oliva/dourado como detalhes
   (sofisticação, do index_7.html + divisor do index.html).
   -------------------------------------------------------------------------- */
:root {
  /* Fundos: gradiente vinho profundo — mesma técnica do radial do index_7,
     mas com a cor do index.html para dar "fome" em vez de "noite". */
  --bg: #7b2d3a;          /* vinho principal (index.html) */
  --bg-top: #8e3650;      /* ponto de luz no topo do gradiente */
  --bg-bottom: #4e1420;   /* sombra profunda na base */
  --bg-soft: #66262f;     /* campo do input em modo escuro-quente */

  /* Tinta/texto */
  --ink: #fdfbf7;         /* creme quase branco (index.html) */
  --muted: #ead9c2;       /* creme escurecido p/ textos secundários */

  /* Detalhes de marca */
  --olive: #8da05a;       /* folha (index_7.html) */
  --olive-dark: #6b8044;  /* metade sombreada da folha */
  --olive-dim: #4e5a34;   /* linhas finas / divisores discretos */
  --gold: #d4a537;        /* divisor losango + filetes (index.html) */
  --peach: #e8a87c;       /* itálico do H1 + foco (index.html) */
  --cta: #c66b3d;         /* botão sólido de alta conversão (index.html) */
  --cta-hover: #d47a4b;

  --line: rgba(255, 255, 255, 0.22); /* bordas sutis sobre vinho */
}

/* --------------------------------------------------------------------------
   2. BASE / RESET — mesmo comportamento nos dois originais, unificado.
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* remove flash azul no mobile */
}

::selection {
  background: var(--olive-dim);
  color: var(--ink);
}

/* Classe utilitária de acessibilidade (vinda do index_7):
   esconde visualmente mas mantém para leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

html {
  background: var(--bg-bottom); /* evita "flash" branco ao rolar */
}

body {
  /* Gradiente radial = truque do index_7, tingido de vinho do index.html */
  background: radial-gradient(110% 80% at 50% 10%, var(--bg-top) 0%, var(--bg) 48%, var(--bg-bottom) 100%);
  color: var(--ink);
  font-family: "Work Sans", system-ui, sans-serif; /* corpo editorial do index_7 */
  font-weight: 300;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* safe-area: herança do index_7 para iPhone com notch */
  padding:
    max(6vh, env(safe-area-inset-top))
    max(7vw, env(safe-area-inset-right))
    max(6vh, env(safe-area-inset-bottom))
    max(7vw, env(safe-area-inset-left));
  overflow-x: hidden;
}

/* Foco visível de teclado — cor pêssego do index.html, espessura do index_7 */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid var(--peach);
  outline-offset: 2px;
}

/* Links sobre vinho: nunca azul padrão. Pêssego no texto, creme discreto
   no rodapé/privacidade — com sublinhado sutil e hover.
   Inclui :link de propósito: sem ele, o User Agent impõe o azul visitado. */
a,
a:link {
  color: var(--peach);
  text-underline-offset: 3px;
}
a:visited {
  color: var(--peach);
}
a:hover {
  filter: brightness(1.1);
}
footer a,
footer a:link,
.privacy-note a,
.privacy-note a:link {
  color: var(--muted);
  text-decoration-color: rgba(234, 217, 194, 0.6);
}
footer a:visited,
.privacy-note a:visited {
  color: var(--muted);
}
footer a:hover,
.privacy-note a:hover {
  color: var(--peach);
  text-decoration-color: var(--peach);
}

/* --------------------------------------------------------------------------
   3. MOLDURA (frame) — trazida do index_7.html.
   Cria a sensação "rótulo premium" sem pesar no layout.
   -------------------------------------------------------------------------- */
.frame {
  position: fixed;
  inset:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  border: 1px solid var(--line);
  pointer-events: none; /* nunca bloqueia clique no form */
}

/* Palco central — coluna estreita (520–560px) como nos dois originais */
.stage {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. LOGO — escrita original do index.html (Great Vibes, sem folha).
   A folha em SVG foi removida: destoava do fundo vinho quente.
   - .wordmark: caligrafia grande, hierarquia máxima da página.
   - .eyebrow: categoria em caixa alta espaçada, herdada do original.
   -------------------------------------------------------------------------- */
.wordmark {
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-weight: 400;
  font-size: clamp(64px, 14vw, 104px);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--ink);
  opacity: 0;
  animation: rise 0.9s ease-out 0.1s forwards;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-top: -4px; /* slogan colado no logo (Great Vibes tem respiro interno) */
  opacity: 0;
  animation: rise 0.9s ease-out 0.25s forwards;
}

/* --------------------------------------------------------------------------
   5. DIVISOR DOURADO — trazido do index.html (era o elemento mais
   "artesanal" dele): dois traços + losango central.
   -------------------------------------------------------------------------- */
.divisor {
  margin: 2rem 0 0.6rem; /* mais respiro ao redor da separação (era 1.4rem/0) */
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: rise 0.8s ease-out 0.4s forwards;
}
.divisor::before,
.divisor::after {
  content: "";
  width: 56px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.divisor span {
  width: 10px;
  height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}

/* --------------------------------------------------------------------------
   6. COPY — H1 do index.html (com itálico pêssego) + lede do index_7
   (storytelling de família). Delays encurtados: no index_7 o H1 só
   aparecia aos 2.3s; aqui tudo está visível até ~1.4s.
   -------------------------------------------------------------------------- */
h1 {
  font-family: "Fraunces", Georgia, serif; /* editorial do index_7 */
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  line-height: 1.15;
  max-width: 18ch;
  text-wrap: balance; /* evita viúvas no título */
  margin-top: 1.1rem;
  opacity: 0;
  animation: rise 0.9s ease-out 0.5s forwards;
}
h1 em {
  color: var(--peach);
  font-style: italic;
}

.lede {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.8;
  color: var(--muted);
  max-width: 44ch;
  margin: 1rem 0 0;
  opacity: 0;
  animation: rise 0.9s ease-out 0.6s forwards;
}

/* --------------------------------------------------------------------------
   7. PÍLULA DE ESCASSEZ — o melhor gatilho do index.html
   ("3 dias no tacho / 200 potes"), vestida como badge com borda dourada
   para não brigar com o lede emocional acima.
   -------------------------------------------------------------------------- */
.pill {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  border: 1px solid rgba(212, 165, 55, 0.55);
  background: rgba(0, 0, 0, 0.18);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  opacity: 0;
  animation: rise 0.9s ease-out 0.7s forwards;
}
.pill strong {
  color: var(--peach);
}

/* --------------------------------------------------------------------------
   8. FORM — corpo do index_7 (honeypot, estados) + "roupa" do index.html
   (input creme sólido + botão CTA sólido). É o ponto de maior conversão.
   -------------------------------------------------------------------------- */
form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-top: 1.5rem;
  opacity: 0;
  animation: rise 0.8s ease-out 0.8s forwards;
}

input[type="email"] {
  flex: 1;
  min-width: 0;
  background: var(--ink); /* creme sólido = contraste máximo (index.html) */
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: #2d2926;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  outline: none;
}
input[type="email"]::placeholder {
  color: #8a7f76;
}
input[type="email"]:focus {
  border-color: var(--gold);
}
/* Corrige o fundo amarelo do autocomplete no Chrome */
input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: #2d2926;
  -webkit-box-shadow: 0 0 0 1000px var(--ink) inset;
}

button {
  background: var(--cta);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.4rem;
  min-height: 52px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s, transform 0.15s;
}
button:hover {
  filter: brightness(1.08);
}
button:active {
  transform: scale(0.98);
}
button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Mensagens de status (validação JS + retorno da api/inscrever.php) */
.note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.9rem;
  min-height: 1.2em;
}
.note.show {
  color: var(--peach);
  font-weight: 500;
}
.privacy-note {
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0;
  margin-top: 0.4rem;
  animation: rise 0.8s ease-out 0.9s forwards;
}

/* Lista local deste aparelho: chips discretos com os e-mails já
   cadastrados aqui. Só memória do próprio navegador (localStorage),
   nunca a lista global — por isso é seguro mostrar. */
.meus-emails {
  max-width: 420px;
  width: 100%;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0;
  animation: rise 0.8s ease-out 0.9s forwards;
}
.meus-emails[hidden] {
  display: none;
}
.meus-emails-titulo {
  opacity: 0.85;
  margin-bottom: 0.35rem;
}
.meus-emails-lista {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.meus-emails-lista li {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink);
}

/* Consentimento LGPD: checkbox + texto lado a lado, abaixo do form.
   Mesma animação rise do form para entrar junto (0.85s). */
.consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 420px;
  margin-top: 0.7rem;
  cursor: pointer;
  opacity: 0;
  animation: rise 0.8s ease-out 0.85s forwards;
}
.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--cta); /* checkbox na cor do botão */
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. FOOTER — © dinâmico via JS (index_7) + cor suave do index.html.
   -------------------------------------------------------------------------- */
footer {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 14px));
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0;
  animation: rise 0.8s ease-out 1s forwards;
}

/* --------------------------------------------------------------------------
   10. ANIMAÇÃO — subida suave (rise) para todos os blocos.
   A folha e o wordmark deslizante foram removidos, então só resta o rise.
   -------------------------------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Acessibilidade: respeita "reduzir movimento" do SO (do index_7) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Mobile estreito: empilha form (solução do index.html, breakpoint do index_7) */
@media (max-width: 400px) {
  form { flex-direction: column; }
  button { width: 100%; }
}