/* ============================================================
   MARÍLIA ARRAES — Landing Page de captação
   Tokens extraídos da identidade visual da campanha (PSD oficial)
   ============================================================ */

/* ------------------------------------------------------------
   TIPOGRAFIA DA CAMPANHA — Neulis Cursive
   Solte os arquivos em assets/fonts/ com estes nomes e a página
   passa a usar a fonte oficial automaticamente. Enquanto não
   existirem, o navegador cai em Montserrat (ver README §5).
   ------------------------------------------------------------ */
@font-face{
  font-family:'Neulis Cursive';
  src:url('assets/fonts/neuliscursive-semibold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Neulis Cursive';
  src:url('assets/fonts/neuliscursive-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Neulis Cursive';
  src:url('assets/fonts/neuliscursive-extrabold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Neulis Cursive';
  src:url('assets/fonts/neuliscursive-black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  /* Paleta — amostrada dos assets novos da campanha */
  --vermelho:        #BD191F;  /* vermelho médio do fundo pincelado */
  --vermelho-escuro: #8E0F14;  /* áreas escuras da textura */
  --vinho:           #9A1F1F;  /* texto do selo, textos sobre claro */
  --vinho-escuro:    #6E1414;
  --ambar:           #F7A600;  /* acento "SENADORA" / selo / CTA */
  --ambar-escuro:    #D98F00;
  --ambar-claro:     #FFD27A;  /* variação para texto pequeno sobre o vermelho */
  --branco:          #FFFFFF;
  --areia:           #F6F1EC;  /* fundo dos campos */
  --areia-borda:     #E2D8CE;
  --tinta:           #2B0E0B;  /* texto principal sobre claro */
  --tinta-suave:     #7A5F58;

  /* Tipografia */
  --display: 'Neulis Cursive', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Forma — o lettering da marca tem cantos levemente arredondados */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  --sombra: 0 22px 60px rgba(52, 4, 6, .42);
}

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

/* [hidden] precisa vencer regras de display definidas por classe (.form usa grid) */
[hidden]{ display:none !important; }

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

body{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  color:var(--branco);
  /* fundo pincelado da campanha — cobre a página inteira, sem emenda no rodapé.
     A 1ª declaração é o fallback (JPEG); navegadores com image-set() pegam o WebP. */
  background:var(--vermelho) url('assets/bg-mobile.jpg') center top / cover no-repeat;
  background-image:image-set(
    url('assets/bg-mobile.webp') type('image/webp'),
    url('assets/bg-mobile.jpg')  type('image/jpeg'));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:1000px){
  body{
    background-position:center center;
    background-image:url('assets/bg.jpg');
    background-image:image-set(
      url('assets/bg.webp') type('image/webp'),
      url('assets/bg.jpg')  type('image/jpeg'));
  }
}

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

a{ color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--branco); color:var(--vinho);
  padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
  font-weight:700; z-index:50;
}
.skip-link:focus{ left:0; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:stretch;
}

.hero__inner{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:clamp(28px, 7vh, 56px) 20px 0;
  display:flex;
  flex-direction:column;
}

/* ---------- Bloco de marca ---------- */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Até 999px a foto sai de cena: qualquer recorte dela em tela estreita vira
   um busto flutuante. A marca assume o papel visual e o formulário sobe. */
.brand__photo{ display:none; margin:0; }

.brand__lockup{
  width:min(74vw, 268px);
  height:auto;
  margin:0 auto;
  animation:sobe .7s cubic-bezier(.2,.7,.3,1) both;
}

.badge{
  display:inline-block;
  margin:12px 0 0;
  padding:8px 18px 7px;
  border-radius:999px;
  background:var(--ambar);
  color:var(--vinho);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1;
}

.headline{
  margin:14px 0 0;
  font-weight:800;
  font-size:clamp(1.75rem, 8.2vw, 2.2rem);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
}

.support{
  margin:12px auto 0;
  max-width:34ch;
  font-size:.92rem;
  line-height:1.5;
  font-weight:600;
  color:rgba(255,255,255,.94);
  text-wrap:pretty;
}

/* ============================================================
   CARD DO FORMULÁRIO
   ============================================================ */
.card{
  background:var(--branco);
  color:var(--tinta);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:24px 20px calc(28px + env(safe-area-inset-bottom));
  margin:16px -20px 0;
  box-shadow:var(--sombra);
  animation:sobe .7s .12s cubic-bezier(.2,.7,.3,1) both;
}

.card__head{ text-align:center; }

.card__title{
  margin:0;
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--vinho);
}
.card__sub{
  margin:6px 0 0;
  font-size:.9rem;
  font-weight:600;
  color:var(--tinta-suave);
}

.form{ margin-top:20px; display:grid; gap:14px; }

.field{ display:grid; gap:6px; }

.field__label{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--vinho);
}

.field__input{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  font-family:inherit;
  font-size:16px;              /* evita zoom automático no iOS */
  font-weight:600;
  color:var(--tinta);
  background:var(--areia);
  border:2px solid var(--areia-borda);
  border-radius:var(--r-sm);
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  appearance:none;
}
.field__input::placeholder{ color:#8E7A72; font-weight:500; opacity:1; }
.field__input:hover{ border-color:#D2C4B9; }
.field__input:focus{
  outline:none;
  background:var(--branco);
  border-color:var(--ambar);
  box-shadow:0 0 0 4px rgba(236,171,61,.28);
}
.field__input:focus-visible{ outline:none; }

.field--erro .field__input{
  border-color:#C0392B;
  background:#FFF6F5;
}
.field__error{
  margin:0;
  font-size:.78rem;
  font-weight:700;
  color:#C0392B;
}

/* Honeypot */
.hp{
  position:absolute!important;
  left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- Botão ---------- */
.btn{
  margin-top:6px;
  width:100%;
  min-height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 20px;
  font-family:inherit;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--vinho);
  background:var(--ambar);
  border:none;
  border-radius:var(--r-md);
  cursor:pointer;
  box-shadow:0 6px 0 var(--ambar-escuro);
  transition:transform .12s ease, box-shadow .12s ease, background-color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ background:#F2B54B; }
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--ambar-escuro); }
.btn:focus-visible{ outline:3px solid var(--branco); outline-offset:3px; }
.btn[disabled], .btn.is-loading{
  cursor:progress;
  opacity:.78;
  transform:translateY(4px);
  box-shadow:0 2px 0 var(--ambar-escuro);
}
.btn__icon{ width:22px; height:22px; fill:currentColor; flex:none; }
.btn.is-loading .btn__icon{ display:none; }

.btn--ghost{
  background:transparent;
  color:var(--vinho);
  border:2px solid var(--vinho);
  box-shadow:none;
  margin-top:18px;
}
.btn--ghost:hover{ background:var(--vinho); color:var(--branco); }
.btn--ghost:active{ transform:none; box-shadow:none; }

/* Spinner */
.btn.is-loading .btn__label::before{
  content:"";
  display:inline-block;
  width:16px;height:16px;
  margin-right:10px;
  vertical-align:-2px;
  border:2.5px solid rgba(114,23,33,.3);
  border-top-color:var(--vinho);
  border-radius:50%;
  animation:girar .7s linear infinite;
}

.consent{
  margin:14px 0 0;
  font-size:.75rem;
  line-height:1.5;
  font-weight:500;
  color:var(--tinta-suave);
  text-align:center;
}
.consent a{ color:var(--vinho); font-weight:700; text-underline-offset:2px; }

.form__alert{
  margin:0;
  padding:12px 14px;
  border-radius:var(--r-sm);
  background:#FDECEA;
  border:1px solid #F2C3BD;
  color:#A32B1D;
  font-size:.85rem;
  font-weight:700;
  line-height:1.45;
}

/* ---------- Sucesso ---------- */
.success{ text-align:center; padding:14px 0 6px; }
.success__mark{
  width:64px;height:64px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--ambar);
  display:grid;place-items:center;
  animation:pop .45s cubic-bezier(.2,1.3,.4,1) both;
}
.success__mark svg{
  width:32px;height:32px;
  fill:none;stroke:var(--vinho);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.success__title{
  margin:0;font-size:1.35rem;font-weight:900;color:var(--vinho);
}
.success__text{
  margin:8px 0 0;font-size:.95rem;font-weight:600;color:var(--tinta-suave);
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{
  background:transparent;
  padding:22px 20px calc(26px + env(safe-area-inset-bottom));
  text-align:center;
  font-size:.75rem;
  line-height:1.6;
}
.footer p{ margin:0; }
.footer p:first-child{
  font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem;
}
/* Identificação legal da campanha */
.footer__cnpj{
  margin-top:8px!important;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.66rem;
  line-height:1.55;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.86);
  text-wrap:pretty;
}
.footer__cnpj a{ color:var(--ambar-claro); font-weight:700; text-underline-offset:2px; }

/* ============================================================
   ANIMAÇÕES (sutis)
   ============================================================ */
@keyframes sobe{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
@keyframes girar{ to{ transform:rotate(360deg); } }
@keyframes pop{
  from{ transform:scale(.6); opacity:0; }
  to  { transform:none; opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ============================================================
   TABLET — a partir de 700px
   ============================================================ */
@media (min-width:700px){
  .hero__inner{ padding:clamp(36px, 6vh, 64px) 32px 0; }
  .brand__lockup{ width:340px; }
  .badge{ font-size:.78rem; padding:10px 22px 9px; margin-top:18px; }
  .headline{ font-size:2.6rem; margin-top:22px; }
  .support{ font-size:1.04rem; max-width:44ch; margin-top:16px; }
  .card{
    max-width:520px;
    margin:26px auto 0;
    padding:30px 34px 28px;
    border-radius:var(--r-lg);
  }
  .form{ gap:15px; }
}

/* ============================================================
   DESKTOP — composição em duas áreas
   FOTO + MENSAGEM  |  FORMULÁRIO
   ============================================================ */
@media (min-width:1000px){
  .hero{
    --foto-w:clamp(280px, 33vw, 480px);
    --inner-max:1320px;
    --inner-pad:40px;
    align-items:center;
    padding:0;
    /* sem overflow:hidden — ele cortaria o rodapé. A foto é ancorada em
       bottom:0 do próprio hero, então nunca ultrapassa a base da página. */
  }

  .hero__inner{
    max-width:var(--inner-max);
    padding:40px 40px 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(400px, 430px);
    grid-template-rows:auto auto;
    gap:0 40px;
    align-items:start;          /* mensagem e formulário começam na mesma linha */
  }
  .brand{ grid-column:1; grid-row:1 / span 2; }
  .card { grid-column:2; grid-row:1; }
  /* rodapé encaixa sob o card: a página passa a caber em uma tela cheia */
  .footer{
    grid-column:2; grid-row:2;
    align-self:start;
    text-align:left;
    padding:18px 4px 0;
  }

  /* Composição da arte: foto ancorada na base, marca sobreposta à direita dela.
     A foto sai do fluxo para que o alinhamento do topo dependa só do texto. */
  .brand{
    display:block;
    text-align:left;
    padding-bottom:0;
  }

  .brand__photo{
    display:block;
    position:absolute;
    bottom:0;
    left:max(var(--inner-pad), calc(50% - (var(--inner-max) / 2) + var(--inner-pad)));
    width:var(--foto-w);
    height:auto;
    z-index:1;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .brand__photo picture{ height:auto; }
  .brand__photo img{ width:100%; height:auto; object-fit:contain; }

  .brand__copy{
    /* recuo que libera a foto, com a sobreposição da arte */
    margin-left:calc(var(--foto-w) - clamp(32px, 3.2vw, 64px));
    padding-bottom:0;
    min-width:0;
    position:relative;
    z-index:2;
  }

  .brand__lockup{
    width:clamp(260px, 24vw, 355px);
    margin:0;
  }
  .badge{
    margin-top:16px;
    margin-left:2px;
    font-size:clamp(.72rem, .85vw, .82rem);
    padding:10px 22px 9px;
  }
  /* degrau de alinhamento do bloco de mensagem, como na arte */
  .headline{
    margin-top:34px;
    margin-left:clamp(24px, 2.6vw, 40px);
    font-size:clamp(2.1rem, 2.9vw, 2.9rem);
    line-height:1;
  }
  .support{
    margin:14px 0 0 clamp(24px, 2.6vw, 40px);
    max-width:28ch;
    font-size:clamp(.9rem, 1vw, 1rem);
  }

  .card{
    align-self:start;           /* topo do card na mesma linha do lockup */
    max-width:none;
    margin:0;
    padding:32px 32px 28px;
    border-radius:var(--r-lg);
  }
  .card__head{ text-align:left; }
  .card__title{ font-size:1.55rem; }
  .consent{ text-align:left; }
}

@media (min-width:1240px){
  .hero__inner{ gap:56px; }
}

/* Telas baixas em desktop: comprime para o CTA caber na primeira dobra */
@media (min-width:1000px) and (max-height:800px){
  .hero{ --foto-w:clamp(240px, 28vw, 400px); }
  .hero__inner{ padding-top:22px; }
  .footer{ padding-top:12px; }
  .footer__cnpj{ margin-top:8px!important; padding-top:8px; }
  .headline{ margin-top:26px; font-size:clamp(1.95rem, 2.6vw, 2.6rem); }
  .support{ font-size:.94rem; margin-top:12px; }
  .card{ padding:26px 30px 24px; }
  .form{ gap:12px; margin-top:16px; }
  .field__input{ min-height:48px; padding:11px 14px; }
  .btn{ min-height:54px; }
}