/* Ferreiro Rooftop — LP soda italiana. Mobile-first (base 390px). */

:root{
  --preto:#0B0B0C;
  --carvao:#141416;
  --linha:rgba(255,255,255,.12);
  --texto:#F4F1EC;
  --texto-fraco:#A8A49D;
  --dourado:#C9A227;
  --dourado-claro:#E8D07A;
  --frutado:#E4405F;
  --erro:#FF8A8A;
  --ok:#7BD88F;
  --raio:16px;
}

*{box-sizing:border-box}
/* display:flex de .btn-block e .result vence o atributo [hidden]: sem isto
   o botão de WhatsApp aparece mesmo sem número configurado. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--preto);
  color:var(--texto);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(201,162,39,.16) 0%, rgba(11,11,12,0) 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(228,64,95,.10) 0%, rgba(11,11,12,0) 60%);
  background-attachment:fixed;
}

.wrap{
  max-width:520px;
  margin:0 auto;
  padding:0 16px 40px;
}

h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:.01em;margin:0}
em{font-style:italic;color:var(--dourado-claro)}
p{margin:0}

/* ── HERO ─────────────────────────────────────────────── */
.hero{padding:28px 0 8px;text-align:center}

.logo{
  display:block;margin:0 auto;
  width:240px;height:70px;
  object-fit:cover;object-position:center;
  /* O PNG tem fundo preto sólido. Sobre o fundo com gradiente da página isso
     desenha um retângulo visível; screen apaga o preto e deixa só a marca. */
  mix-blend-mode:screen;
}

.kicker{
  margin-top:18px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dourado);
}

.hero h1{
  margin-top:10px;
  font-size:38px;line-height:1.08;
}

.sub{
  margin-top:14px;
  color:var(--texto-fraco);
  font-size:15px;
}

.micro{margin-top:12px;font-size:12px;color:var(--texto-fraco)}

/* ── BOTÕES ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;
  border:0;border-radius:999px;
  font-family:inherit;font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(.985)}
.btn-primary{
  margin-top:22px;
  background:linear-gradient(180deg,var(--dourado-claro),var(--dourado));
  color:#171203;
  box-shadow:0 10px 26px rgba(201,162,39,.24);
}
.btn-ghost{
  background:transparent;color:var(--texto);
  border:1px solid var(--linha);
}
.btn-block{display:flex;width:100%;margin-top:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ── COMO FUNCIONA ────────────────────────────────────── */
.steps{margin-top:40px}
.steps h2{font-size:26px;text-align:center}
.steps ol{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.steps li{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--carvao);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:16px;
}
.num{
  flex:0 0 32px;height:32px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(201,162,39,.14);
  color:var(--dourado-claro);
  font-weight:700;font-size:14px;
}
.steps strong{display:block;font-size:15px}
.steps p{color:var(--texto-fraco);font-size:14px;margin-top:2px}

/* ── FORMULÁRIO ───────────────────────────────────────── */
.form-card{
  margin-top:40px;
  background:var(--carvao);
  border:1px solid var(--linha);
  border-radius:20px;
  padding:22px 18px 24px;
  scroll-margin-top:16px;
}
.form-card h2{font-size:28px;text-align:center}

.field{margin-top:16px;display:flex;flex-direction:column;gap:6px}
label{font-size:13px;color:var(--texto-fraco);font-weight:500}

input[type=text],input[type=tel]{
  width:100%;min-height:52px;
  padding:0 14px;
  background:#0E0E10;
  border:1px solid var(--linha);
  border-radius:12px;
  color:var(--texto);
  font-family:inherit;font-size:16px; /* 16px evita zoom no iOS */
}
input::placeholder{color:#5E5B57}
input:focus{outline:2px solid var(--dourado);outline-offset:1px;border-color:transparent}
input[aria-invalid=true]{border-color:var(--erro)}

.err{font-size:12.5px;color:var(--erro);min-height:0}
.err:empty{display:none}

.check{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:18px;font-size:13px;line-height:1.45;color:var(--texto-fraco);
}
.check input{
  flex:0 0 22px;width:22px;height:22px;margin:0;
  accent-color:var(--dourado);
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-status{margin-top:12px;font-size:13.5px;color:var(--texto-fraco);text-align:center}
.form-status.is-erro{color:var(--erro)}

/* ── RESULTADO ────────────────────────────────────────── */
.result{
  margin-top:40px;
  background:var(--carvao);
  border:1px solid rgba(201,162,39,.35);
  border-radius:20px;
  padding:24px 18px;
  text-align:center;
  scroll-margin-top:16px;
}
.result-tag{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ok);
}
.result.is-dup .result-tag{color:var(--dourado-claro)}
.result h2{margin-top:8px;font-size:28px;line-height:1.15}

.ticket{
  margin-top:18px;padding:20px 14px;
  border-radius:14px;
  border:1px dashed rgba(201,162,39,.5);
  background:
    linear-gradient(180deg, rgba(201,162,39,.10), rgba(228,64,95,.08));
  display:flex;flex-direction:column;gap:6px;align-items:center;
}
.ticket-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-fraco)}
.ticket-code{
  font-size:40px;line-height:1;font-weight:700;letter-spacing:.06em;
  color:var(--dourado-claro);
  font-variant-numeric:tabular-nums;
}
.ticket-name{font-size:13px;color:var(--texto-fraco)}

.result-help{margin-top:16px;font-size:14px;color:var(--texto-fraco)}

/* ── REGRAS ───────────────────────────────────────────── */
.rules{margin-top:40px}
.rules h2{font-size:24px;text-align:center}
.rules ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.rules li{
  position:relative;padding-left:20px;
  font-size:14px;color:var(--texto-fraco);
}
.rules li::before{
  content:"";position:absolute;left:4px;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--dourado);
}

/* ── RODAPÉ ───────────────────────────────────────────── */
.foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--linha);text-align:center}
.foot-logo{width:180px;height:54px;opacity:.8}
.foot-sig{margin-top:14px;font-size:12.5px;color:var(--texto-fraco)}
.foot-sig a{color:var(--dourado);text-decoration:none;font-weight:600}

/* ── TELAS MAIORES ────────────────────────────────────── */
@media (min-width:560px){
  .wrap{padding:0 24px 56px}
  .hero h1{font-size:46px}
  .hero{padding-top:40px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}