/* Identidade UNA: compartilhada entre a página de vendas e o futuro /downsell */
@font-face{ font-family:'Fraunces'; src:url(../fonts/fraunces.woff2) format('woff2'); font-weight:300 600; font-display:swap; }
@font-face{ font-family:'Instrument Sans'; src:url(../fonts/instrument-sans.woff2) format('woff2'); font-weight:400 600; font-display:swap; }

:root{
  --sand:#A68A6A;
  --sand-dark:#5F4830; /* areia com contraste para texto pequeno sobre fundo claro */
  --red:#B42318;
  --forest:#18361B;
  --moss:#304432;
  --mist:#E8EBE8;
  --paper:#F4F6F4;
  --sand-soft:color-mix(in srgb, var(--sand) 22%, var(--mist));
  --line:color-mix(in srgb, var(--forest) 20%, transparent);
  --line-light:color-mix(in srgb, var(--mist) 24%, transparent);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Instrument Sans', system-ui, sans-serif;
  --gutter:clamp(20px, 5vw, 64px);
  --section:clamp(64px, 10vw, 128px);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--mist); color:var(--forest); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--sand); outline-offset:3px; }

.wrap{ width:min(100%, 1240px); margin-inline:auto; padding-inline:var(--gutter); }
.title{ font-family:var(--serif); font-weight:400; font-size:clamp(34px, 5vw, 60px); line-height:1.05; letter-spacing:-.02em; text-wrap:balance; }
.skip{ position:absolute; left:16px; top:-80px; z-index:10; padding:12px 18px; background:var(--mist); color:var(--forest); }
.skip:focus{ top:12px; }

/* Botão principal: bloco com sombra deslocada, herdado da LP original */
.btn{ position:relative; isolation:isolate; display:inline-flex; justify-content:center; align-items:center; min-height:58px; padding:16px 28px; font-family:var(--sans); font-size:17px; font-weight:600; line-height:1.2; text-align:center; text-decoration:none; color:var(--mist); }
.btn::before,.btn::after{ content:""; position:absolute; inset:0; }
.btn::before{ z-index:-2; background:var(--sand); translate:-5px 5px; transition:translate .4s var(--ease); }
.btn::after{ z-index:-1; background:var(--forest); }
@media (hover:hover){ .btn:hover::before{ translate:-9px 9px; } }
.btn:active::before{ translate:0 0; }

.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

/* Botão secundário: link, sempre menos destacado que o principal */
.link{ display:inline-flex; align-items:center; min-height:48px; font-weight:500; text-underline-offset:4px; text-decoration-thickness:1px; }
@media (hover:hover){ .link:hover{ text-decoration-thickness:2px; } }

/* Sublinhado que recua ao passar o mouse, herdado da LP original */
.ulink{ text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat; transition:background-size .5s var(--ease), color .3s; }
@media (hover:hover){ .ulink:hover{ background-size:0 1px; background-position:100% 100%; } }

/* Dupla de conversão */
.acoes{ display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-left:5px; text-align:center; }
.acoes .link{ justify-content:center; }

/* Entradas: só com a classe .anima (movimento permitido). Ver assets/js/anima.js */
.anima [data-anima]:not(.on){ opacity:0; translate:0 22px; }
.anima [data-anima]{ transition:opacity .7s var(--ease), translate .8s var(--ease); transition-delay:var(--atraso, 0s); }
/* O recorte fica na imagem: a moldura precisa continuar visível para o navegador detectar a entrada */
.anima [data-anima="foto"]:not(.on){ opacity:1; translate:none; }
.anima [data-anima="foto"]{ overflow:hidden; transition:none; }
.anima [data-anima="foto"] img{ clip-path:inset(0); transition:clip-path 1.1s var(--ease), scale 1.4s var(--ease); transition-delay:var(--atraso, 0s); }
.anima [data-anima="foto"]:not(.on) img{ clip-path:inset(0 0 100% 0); scale:1.07; }
.anima [data-anima="letra"]:not(.on){ translate:0 34%; }

/* Títulos: um bloco de cor varre cada linha e revela o texto na passagem */
.anima [data-anima="bloco"]:not(.on){ translate:none; }
.anima [data-anima="bloco"]{ transition:none; }
.bloco{ position:relative; display:block; width:fit-content; white-space:nowrap; }
.bloco span{ animation:bloco-texto .8s linear both; animation-delay:calc(var(--atraso, 0s) + var(--i) * .09s); }
.bloco::after{ content:""; position:absolute; inset:.04em -.04em; background:var(--bloco, var(--sand)); animation:bloco-varre .8s cubic-bezier(.65,0,.35,1) both; animation-delay:calc(var(--atraso, 0s) + var(--i) * .09s); }
@keyframes bloco-texto{ 0%, 49.9%{ opacity:0; } 50%, 100%{ opacity:1; } }
@keyframes bloco-varre{
  0%{ transform:scaleX(0); transform-origin:left; }
  49.9%{ transform:scaleX(1); transform-origin:left; }
  50%{ transform:scaleX(1); transform-origin:right; }
  100%{ transform:scaleX(0); transform-origin:right; }
}