/* =========================================================
   As Oito Paixões que Decidem o Voto — página de captura
   Estilos. Paleta e tipografia da série Emoções no Marketing
   Político Eleitoral (Pedro Vitorino).
   ========================================================= */

:root{
  --ink:#20180F; --body:#2A2118; --paper:#F4ECD6; --paper2:#EDE3CC;
  --card:#EADEC0; --accent:#8C2B16; --accent2:#A8421F; --gold:#B08A4A;
  --gold2:#9C7C3E; --muted:#6B5A43; --line:#CDBB95;
  /* uma cor por emoção */
  --medo:#4F5C5F; --ira:#A8421F; --desejo:#A55E26; --inveja:#5C6536;
  --cuidado:#9A7426; --humor:#8A741D; --luxuria:#6F4458; --esperanca:#326253;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--paper);
  color:var(--body);
  font-family:'Spectral',Georgia,serif;
  font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}

/* textura de papel sutil */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.wrap{position:relative; z-index:1; max-width:780px; margin:0 auto; padding:64px 28px 56px;}

/* animação de entrada */
.rise{opacity:0; transform:translateY(16px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1; transform:translateY(0);}}

/* topo */
.author-top{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(20px,3vw,25px); color:var(--ink); text-align:center; letter-spacing:.01em; margin-bottom:16px;}
.eyebrow{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  text-align:center; margin-bottom:22px;
}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:0 auto 30px; width:min(360px,70%);}

h1{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(40px,8.5vw,68px); line-height:1.02; color:var(--ink);
  text-align:center; letter-spacing:.005em;
}
.epi{
  font-family:'Spectral',serif; font-style:italic; font-size:clamp(17px,2.4vw,21px);
  color:var(--body); text-align:center; margin:18px auto 0; max-width:30ch;
}
.credit{font-family:'Spectral',serif; font-style:italic; font-size:14px; color:var(--muted); text-align:center; margin:11px auto 0; max-width:46ch; line-height:1.5;}
.lede{
  text-align:center; color:var(--body); font-size:clamp(16px,2.3vw,19px);
  max-width:54ch; margin:30px auto 0; line-height:1.62;
}

/* elenco das oito paixões */
.cast-label{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  text-align:center; margin:52px 0 24px;
}
.cast{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 14px;}
.pas{display:flex; flex-direction:column; align-items:center; text-align:center; transition:transform .25s ease;}
.pas:hover{transform:translateY(-4px);}
.seal{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid currentColor; margin-bottom:10px;
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:18px;
}
.pas .nm{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:21px; line-height:1; color:currentColor;}
.pas .fn{font-family:'Spectral',serif; font-style:italic; font-size:13px; color:var(--muted); margin-top:4px;}

/* o que você recebe */
.get{margin:54px auto 0; max-width:60ch;}
.get h2{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:18px;
}
.get ul{list-style:none;}
.get li{
  position:relative; padding-left:30px; margin:13px 0; font-size:17.5px; color:var(--body); line-height:1.5;
}
.get li::before{
  content:""; position:absolute; left:6px; top:.62em; width:9px; height:9px;
  border:1.5px solid var(--accent); transform:rotate(45deg);
}
.note{font-family:'Spectral',serif; font-style:italic; font-size:15px; color:var(--muted); text-align:center; max-width:56ch; margin:24px auto 0; padding-top:16px; border-top:1px solid var(--line); line-height:1.55;}

/* formulário */
.card{
  margin:52px auto 0; max-width:520px; background:var(--card);
  border:1px solid var(--line); border-top:3px solid var(--accent);
  padding:38px 34px 34px; box-shadow:0 18px 40px -28px rgba(40,25,10,.55);
}
.card .ct{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:27px; line-height:1.12;
  color:var(--ink); text-align:center; margin-bottom:6px;
}
.card .cs{font-family:'Spectral',serif; font-style:italic; font-size:15px; color:var(--muted); text-align:center; margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{
  display:block; font-family:'Archivo',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.field input{
  width:100%; font-family:'Spectral',serif; font-size:17px; color:var(--body);
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:13px 14px; transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{color:#A8997C;}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,43,22,.12);}
.field select{
  width:100%; font-family:'Spectral',serif; font-size:17px; color:var(--body);
  background-color:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:13px 14px; cursor:pointer; transition:border-color .2s, box-shadow .2s;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236B5A43' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,43,22,.12);}
.field select:required:invalid{color:#A8997C;}
.field input.invalid, .field select.invalid{border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,43,22,.10);}
#qualWrap{display:none;}

.btn{
  width:100%; margin-top:8px; cursor:pointer; border:none; border-radius:2px;
  background:var(--accent); color:#F4ECD6;
  font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; letter-spacing:.08em;
  text-transform:uppercase; padding:15px 18px; transition:background .2s, transform .15s, box-shadow .2s;
}
.btn:hover{background:#73230f; transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(115,35,15,.7);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.65; cursor:default; transform:none; box-shadow:none;}
.micro{font-family:'Spectral',serif; font-size:13.5px; color:var(--muted); text-align:center; margin-top:14px;}
.err{display:none; font-family:'Archivo',sans-serif; font-size:12.5px; color:var(--accent); margin-top:7px;}
.msg{display:none; font-family:'Spectral',serif; font-size:14.5px; color:var(--accent); text-align:center; margin-top:14px; line-height:1.5;}

/* campo de proteção anti-robô (oculto) */
.honeypot{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

/* estado de confirmação — mesma página */
#estadoObrigado{display:none;}
#estadoObrigado.ativo{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:78vh; text-align:center; animation:obfade .7s cubic-bezier(.2,.7,.2,1);}
@keyframes obfade{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
#estadoObrigado .author-top{margin-bottom:18px;}
#estadoObrigado .seal-ty{width:66px; height:66px; border-radius:50%; border:1.6px solid var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-family:'Cormorant Garamond',serif; font-size:34px; color:var(--accent);}
#estadoObrigado .eyebrow{margin-bottom:14px;}
#estadoObrigado .sub{font-size:clamp(16px,2.3vw,18.5px); color:var(--body); max-width:50ch; margin:20px auto 0; line-height:1.62;}
#estadoObrigado .btn{width:auto; display:inline-block; text-decoration:none; margin-top:30px; padding:15px 36px;}
#estadoObrigado .hint{font-family:'Spectral',serif; font-size:14px; color:var(--muted); margin-top:16px;}
#estadoObrigado .afo{margin:44px auto 0; max-width:46ch; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
#estadoObrigado .afo-line{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:clamp(20px,3vw,25px); color:var(--ink); line-height:1.2;}
#estadoObrigado .afo-credit{font-family:'Spectral',serif; font-style:italic; font-size:13.5px; color:var(--muted); margin-top:9px;}
#estadoObrigado footer{margin-top:38px;}

/* autoridade + rodapé */
.auth{text-align:center; margin:44px auto 0; max-width:52ch; font-size:15.5px; color:var(--muted); font-style:italic; font-family:'Spectral',serif;}
footer{text-align:center; margin-top:40px; padding-top:24px; border-top:1px solid var(--line);}
footer .ttl{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--accent);}
footer .by{font-family:'Archivo',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:6px;}

/* responsivo */
@media (max-width:560px){
  .wrap{padding:46px 20px 44px;}
  .cast{grid-template-columns:repeat(2,1fr); gap:24px 10px;}
  .card{padding:30px 22px 28px;}
}

/* respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce){
  .rise{animation:none; opacity:1; transform:none;}
  .pas{transition:none;}
  #estadoObrigado.ativo{animation:none;}
  html{scroll-behavior:auto;}
}