/* vopt.com.br — landing do programa Parceiro Fundador.
   Medidas tiradas do Figma (quadro "MacBook Pro 16" - 2", 1728 px de largura)
   e convertidas em tamanhos fluidos: o valor máximo é o do desenho, e o vw é
   esse valor dividido por 17,28. */

:root {
  --tijolo: #C65D53;
  --tijolo-escuro: #A84B43;
  --tijolo-texto: #A74444;
  --rosado: #F6E8E8;
  --rosado-claro: #FFD4D4;
  --carvao: #242424;
  --preto: #000;
  --cinza: #AEAEAE;
  --cinza-borda: #E9E9E9;
  --cinza-linha: #D9D9D9;
  --cinza-campo: #9C9C9C;
  --ciano: #41DADA;
  --verde: #009823;

  --fonte-titulo: 'Space Grotesk', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, sans-serif;

  --t-heroi: clamp(2.6rem, 5.56vw, 6rem);       /* 96 */
  --t-xl: clamp(2rem, 4.4vw, 4.75rem);          /* 76 */
  --t-l: clamp(1.75rem, 3.24vw, 3.5rem);        /* 56 */
  --t-passo: clamp(1.25rem, 2.08vw, 2.25rem);   /* 36 */
  --t-cartao: clamp(1.2rem, 1.62vw, 1.75rem);   /* 28 */
  --t-lead: clamp(1.125rem, 1.85vw, 2rem);      /* 32 */
  --t-corpo: clamp(1.0625rem, 1.39vw, 1.5rem);  /* 24 */
  --t-lista: clamp(1rem, 1.27vw, 1.375rem);     /* 22 */
  --t-etiqueta: clamp(0.95rem, 1.33vw, 1.4375rem); /* 23 */
  --t-nota: clamp(0.875rem, 1.16vw, 1.25rem);   /* 20 */

  --margem: clamp(20px, 6.2vw, 107px);
  --secao: clamp(64px, 7.5vw, 130px);
  --raio: clamp(18px, 1.85vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--preto);
  background: #fff;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tijolo); outline-offset: 3px; border-radius: 6px; }

.pular { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.pular:focus { left: 8px; }

.caixa { width: min(100% - 2 * var(--margem), 1520px); margin-inline: auto; }
.caixa--larga { width: min(100% - 2 * var(--margem), 1560px); }
.caixa--media { width: min(100% - 2 * var(--margem), 1361px); }
.caixa--estreita { width: min(100% - 2 * var(--margem), 1232px); }
/* O topo do desenho tem margem menor (83 px) que as seções (107 px). */
.caixa--topo { width: min(100% - 2 * clamp(20px, 4.8vw, 83px), 1600px); }

.secao { padding-block: var(--secao); }
.titulo-xl { font-size: var(--t-xl); line-height: 1.1; color: var(--carvao); }
.titulo-l { font-size: var(--t-l); line-height: 1.12; color: var(--carvao); }
.lead { font-size: var(--t-lead); font-weight: 500; line-height: 1.25; margin-top: clamp(14px, 1.4vw, 24px); }
.nota { font-size: var(--t-nota); margin-top: clamp(24px, 2.4vw, 40px); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: var(--fonte-texto); font-weight: 700; color: #fff; background: var(--tijolo);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.botao:hover { background: var(--tijolo-escuro); }
.botao:active { transform: translateY(1px); }
.botao--pequeno { font-size: 15px; padding: 12px 18px; }
.botao--grande { font-size: clamp(1.0625rem, 1.5vw, 1.625rem); padding: clamp(18px, 1.6vw, 28px) clamp(26px, 2.3vw, 40px); }
.botao--escuro { background: var(--tijolo-escuro); border-radius: 16px; font-size: clamp(1rem, 1.39vw, 1.5rem); padding: clamp(18px, 1.5vw, 26px) 20px; width: 100%; }
.botao--escuro:hover { background: #8f3d36; }
.botao--preto { background: var(--preto); font-size: clamp(1rem, 1.16vw, 1.25rem); padding: clamp(18px, 1.5vw, 28px) 24px; width: 100%; }
.botao--preto:hover { background: #333; }
.botao[disabled] { opacity: .6; cursor: progress; }

/* ---------- Topo ---------- */
.topo { position: relative; overflow: hidden; background: #fff; }
.topo__manchas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.topo__barra { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: clamp(20px, 2.8vw, 48px); }
.topo__logo img { width: clamp(92px, 10.9vw, 188px); }
.menu { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); font-size: 15px; font-weight: 500; }
.menu a:not(.botao) { text-decoration: none; }
.menu a:not(.botao):hover { color: var(--tijolo); }

.heroi { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: clamp(24px, 3vw, 56px);
  padding-block: clamp(32px, 6vw, 110px) clamp(56px, 6.5vw, 112px); }
.heroi h1 { font-size: var(--t-heroi); line-height: 1.09; color: var(--preto); }
.heroi__apoio { font-size: var(--t-corpo); margin-top: clamp(16px, 2vw, 36px); max-width: 36em; }
.heroi .botao { margin-top: clamp(28px, 4.3vw, 76px); }
.heroi__nota { font-size: var(--t-nota); font-weight: 700; color: var(--cinza); margin-top: clamp(18px, 2.4vw, 40px); }
.heroi__imagem { width: 100%; max-width: 705px; justify-self: end; }

/* ---------- Faixa vermelha ---------- */
.faixa { background: var(--tijolo); color: #fff; padding-block: clamp(40px, 3.9vw, 68px) clamp(44px, 4.2vw, 74px); }
.faixa__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.faixa__lista li { display: flex; flex-direction: column; align-items: center; }
.faixa__lista img { height: clamp(56px, 5.1vw, 88px); width: auto; }
.faixa__lista h2 { font-size: var(--t-cartao); margin-top: clamp(12px, 1.2vw, 20px); }
.faixa__lista p { font-size: clamp(0.875rem, 0.93vw, 1rem); font-weight: 600; color: var(--rosado-claro); max-width: 13em; margin-top: 6px; line-height: 1.2; }

/* ---------- O problema ---------- */
.problema .titulo-xl { max-width: 16.5em; }
.problema .lead { max-width: 40em; }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3.4vw, 59px); margin-top: clamp(40px, 5.6vw, 96px); }
.numero { margin: 0; background: var(--rosado); border-radius: var(--raio); padding: clamp(24px, 3.4vw, 58px) clamp(24px, 2.8vw, 48px) clamp(24px, 2.8vw, 48px); }
.numero strong { display: block; font-family: var(--fonte-titulo); font-weight: 700; color: var(--tijolo-escuro); font-size: clamp(3.4rem, 6.1vw, 6.6rem); line-height: 1; letter-spacing: -0.02em; }
.numero figcaption { font-size: var(--t-lead); margin-top: clamp(8px, 1vw, 16px); line-height: 1.22; }
.numero small { display: block; font-size: var(--t-nota); font-weight: 700; color: var(--tijolo-texto); opacity: .51; margin-top: clamp(20px, 3.5vw, 60px); }

/* ---------- Como funciona ---------- */
.escura { background: var(--carvao); color: #fff; }
.escura .titulo-xl { color: #fff; max-width: 14em; }
.passos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 59px); margin-top: clamp(40px, 5.6vw, 96px); }
.passos li { border-top: 3px solid var(--ciano); padding-top: clamp(20px, 2.1vw, 36px); }
.passos__numero { font-family: var(--fonte-titulo); font-weight: 700; color: var(--ciano); font-size: var(--t-passo); text-transform: uppercase; }
.passos h3 { font-size: var(--t-passo); font-weight: 500; margin-top: clamp(28px, 4vw, 70px); }
.passos p { font-size: var(--t-lead); font-weight: 500; color: rgba(255, 255, 255, .74); margin-top: clamp(14px, 1.9vw, 32px); line-height: 1.22; max-width: 20em; }
.escura__fecho { font-family: var(--fonte-titulo); font-weight: 700; font-size: var(--t-passo); margin-top: clamp(44px, 7.6vw, 130px); }

/* ---------- Benefícios ---------- */
.beneficios .titulo-xl { max-width: 17em; }
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 36px) clamp(16px, 1.6vw, 28px); margin-top: clamp(36px, 4vw, 70px); }
.cartoes li { border: 4px solid var(--cinza-borda); border-radius: var(--raio); padding: clamp(22px, 1.9vw, 33px) clamp(22px, 2.3vw, 40px) clamp(24px, 2.3vw, 40px); min-height: clamp(0px, 14.7vw, 254px); }
.cartoes img { width: clamp(36px, 2.8vw, 48px); height: auto; }
.cartoes h3 { font-size: var(--t-cartao); color: var(--carvao); margin-top: clamp(14px, 1.2vw, 20px); }
.cartoes p { font-size: var(--t-corpo); margin-top: 8px; line-height: 1.25; }

/* ---------- Programa ---------- */
.programa { background: var(--rosado); }
.programa__grade { display: grid; grid-template-columns: 1.55fr 1fr 1fr; gap: clamp(16px, 1.5vw, 26px); align-items: stretch; }
.programa__texto { display: flex; flex-direction: column; justify-content: flex-end; padding-right: clamp(0px, 2vw, 40px); }
.programa__selo { width: clamp(220px, 30vw, 520px); transform: rotate(-8.4deg); margin: 0 0 clamp(8px, 1vw, 16px) clamp(-10px, -0.6vw, 0px); }
.programa__texto .titulo-l { max-width: 11em; }
.programa__texto > p { font-size: clamp(1.0625rem, 1.45vw, 1.5625rem); font-weight: 500; color: var(--carvao); margin-top: clamp(16px, 1.4vw, 24px); line-height: 1.2; }
.programa__aviso { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); background: var(--carvao); color: #fff; border-radius: 16px;
  padding: clamp(16px, 1.4vw, 24px) clamp(18px, 1.6vw, 28px); margin-top: clamp(18px, 1.7vw, 30px); }
.programa__zero { font-family: var(--fonte-texto); font-weight: 500; font-size: clamp(3.2rem, 5.6vw, 6rem); line-height: .8; text-shadow: 0 4px 10px rgba(0, 0, 0, .55); margin-block: -0.2em; }
.programa__aviso p { font-size: var(--t-corpo); font-weight: 500; line-height: 1.2; }
.programa__texto > .programa__rodape { font-size: clamp(0.8rem, 0.98vw, 1.0625rem); color: rgba(0, 0, 0, .32); margin-top: 12px; }

.lista-cartao { background: #fff; border-radius: var(--raio); padding: clamp(24px, 2.3vw, 40px) clamp(22px, 2vw, 34px); display: flex; flex-direction: column; }
.lista-cartao h3 { font-size: var(--t-cartao); color: var(--carvao); }
.lista { margin-top: clamp(18px, 2vw, 34px); display: grid; gap: clamp(14px, 1.4vw, 24px); font-size: var(--t-lista); font-weight: 500; color: var(--carvao); line-height: 1.25; }
.lista li { position: relative; padding-left: clamp(30px, 2.2vw, 38px); }
.lista--check li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 14px; background: url(/img/check.svg) no-repeat center / contain; }
.lista--seta li::before { content: ""; position: absolute; left: 0; top: .05em; width: 24px; height: 24px; background: url(/img/seta.webp) no-repeat center / contain; }
.lista-cartao--troca .botao { margin-top: auto; width: calc(100% + 28px); margin-inline: -14px; white-space: nowrap; font-size: clamp(1rem, 1.3vw, 1.5rem); }
.lista-cartao--troca .lista { margin-bottom: 32px; }

/* ---------- Para quem ---------- */
.para-quem .titulo-l { max-width: 17em; }
.etiquetas { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.1vw, 19px) clamp(10px, 1.3vw, 22px); margin-top: clamp(24px, 1.9vw, 33px); }
.etiquetas li { background: var(--cinza-borda); border-radius: 999px; font-size: var(--t-etiqueta); font-weight: 500; color: var(--carvao); padding: clamp(10px, .9vw, 15px) clamp(16px, 1.9vw, 32px); }

/* ---------- Inscrição ---------- */
.inscricao { background: var(--tijolo); color: #fff; scroll-margin-top: 0; }
.inscricao__grade { display: grid; grid-template-columns: 0.72fr 1fr; gap: clamp(28px, 3.2vw, 56px); align-items: start; }
.inscricao .titulo-xl { color: #fff; max-width: 8em; }
.inscricao__texto p { font-size: clamp(1.0625rem, 1.27vw, 1.375rem); margin-top: clamp(16px, 1.6vw, 28px); line-height: 1.3; }
.formulario-cartao { background: #fff; color: var(--preto); border-radius: var(--raio); padding: clamp(24px, 2.9vw, 50px); }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.9vw, 32px) clamp(16px, 3.4vw, 59px); }
.campo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.campo--inteiro { grid-column: 1 / -1; }
.campo label { font-size: clamp(0.9375rem, 1.1vw, 1.1875rem); font-weight: 500; }
.campo label span { font-weight: 400; }
.campo input, .campo select {
  width: 100%; font: inherit; font-size: clamp(1rem, 1.04vw, 1.125rem); color: var(--preto);
  background: #fff; border: 2px solid var(--cinza-campo); border-radius: 16px;
  padding: 0 18px; height: clamp(52px, 4.2vw, 72px);
}
.campo input::placeholder { color: var(--cinza-campo); }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 48px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 0h16L8 8z' fill='%239C9C9C'/%3E%3C/svg%3E") no-repeat right 20px center; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--tijolo); box-shadow: 0 0 0 3px rgba(198, 93, 83, .25); }
.campo input[aria-invalid="true"] { border-color: #B3261E; }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario .botao--preto { margin-top: clamp(4px, .6vw, 10px); }
.formulario__aviso { font-size: 15px; font-weight: 600; color: #B3261E; min-height: 0; }
.formulario__aviso:empty { display: none; }
.formulario__lgpd { font-size: 13px; color: #6b6b6b; margin-top: -6px; }
.formulario__ok { display: grid; gap: 16px; justify-items: start; }
.formulario__ok:focus { outline: none; }
.formulario__ok h3 { font-size: var(--t-cartao); color: var(--carvao); }
.formulario__ok p { font-size: var(--t-corpo); line-height: 1.3; }

/* ---------- Perguntas frequentes ---------- */
.faq { margin-top: clamp(36px, 4.6vw, 80px); border-top: 4px solid var(--cinza-linha); }
.faq details { border-bottom: 4px solid var(--cinza-linha); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: var(--t-etiqueta); font-weight: 500; color: var(--carvao); padding: clamp(14px, 1.2vw, 20px) 2px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--tijolo), var(--tijolo)) center / 14px 2px no-repeat, linear-gradient(var(--tijolo), var(--tijolo)) center / 2px 14px no-repeat;
  transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--tijolo); }
.faq details p { font-size: clamp(1rem, 1.16vw, 1.25rem); color: #3d3d3d; line-height: 1.45; padding: 0 2px clamp(18px, 1.6vw, 26px); max-width: 52em; }

/* ---------- Portas de entrada ---------- */
.portas { padding-top: 0; padding-bottom: clamp(48px, 5vw, 90px); }
.portas__grade { display: flex; justify-content: center; gap: clamp(32px, 4.6vw, 80px); flex-wrap: wrap; }
.porta { width: min(100%, 330px); display: flex; flex-direction: column; }
.porta__topo { display: flex; align-items: flex-end; gap: 12px; }
.porta__topo img { width: auto; height: clamp(84px, 7.7vw, 133px); }
.porta h2 { font-size: clamp(1.5rem, 1.85vw, 2rem); line-height: 1.12; color: var(--preto); padding-bottom: 6px; }
.porta p { font-size: 15px; font-weight: 700; color: var(--cinza); margin-top: 18px; line-height: 1.3; }
.porta a { font-size: 15px; font-weight: 500; color: var(--tijolo); margin-top: 22px; align-self: center; text-decoration: none; }
.porta a:hover { text-decoration: underline; }

/* ---------- Rodapé ---------- */
.rodape { padding-block: clamp(24px, 2.4vw, 40px) clamp(36px, 3.5vw, 60px); }
.rodape__barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape__barra img { width: clamp(84px, 6.9vw, 119px); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 2.3vw, 40px); font-size: 15px; font-weight: 700; color: var(--cinza); }
.rodape nav a { text-decoration: none; }
.rodape nav a:hover { color: var(--tijolo); }

/* ================= Tablet ================= */
@media (max-width: 1080px) {
  .heroi { grid-template-columns: 1fr; }
  .heroi__imagem { justify-self: center; max-width: 560px; }
  .programa__grade { grid-template-columns: 1fr 1fr; }
  .programa__texto { grid-column: 1 / -1; padding-right: 0; }
  .programa__texto .titulo-l { max-width: 14em; }
  .inscricao__grade { grid-template-columns: 1fr; }
  .inscricao .titulo-xl { max-width: none; }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .faixa__lista { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}

/* ================= Celular ================= */
@media (max-width: 700px) {
  .menu a:not(.botao) { display: none; }
  .botao--pequeno { padding: 10px 14px; font-size: 14px; }
  .heroi { padding-top: 28px; }
  .heroi .botao { width: 100%; }
  .numeros, .passos, .cartoes, .programa__grade, .formulario { grid-template-columns: 1fr; }
  .cartoes li { min-height: 0; }
  .programa__selo { margin-inline: auto; }
  .faixa__lista { gap: 32px 16px; }
  .porta { align-items: flex-start; }
  .porta a { align-self: flex-start; }
  .rodape__barra { flex-direction: column; align-items: flex-start; }
}