@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url(assets/fonts/InstrumentSans-variable.woff2) format("woff2")}

/* paleta do logo: oliva e terracota sobre linho; tinta escura para o texto */
:root{
  --linho:#ece7dc; --papel:#f6f2e9; --linho2:#e1d9c6; --tinta:#1d1c12; --tinta2:#43412c; --tinta3:#585538;
  --oliva:#6f6b3c; --terra:#8a4a2a; --terra-claro:#e0a888; --linha:rgba(29,28,18,.2);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:max(22px,env(safe-area-inset-left,0px)); --gutr:max(22px,env(safe-area-inset-right,0px));
  --respiro:clamp(72px,12svh,120px); --e:cubic-bezier(.2,.75,.15,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px;-webkit-text-size-adjust:100%;background:var(--linho)}
body{margin:0;background:var(--linho);color:var(--tinta);font:400 1.0625rem/1.55 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,figure,ul,dl,dd,h1,h2,h3,blockquote,fieldset,legend,pre{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance;letter-spacing:-.02em;line-height:.95}
em{font-style:italic;font-weight:500;color:var(--terra)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinta);color:var(--linho);padding:10px 14px;z-index:30}
.skip:focus{left:12px}
.rotulo{font:600 1rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}

.topo{padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutr) 10px max(var(--gut),calc((100vw - 1280px)/2))}
.marca{display:inline-flex;align-items:center;min-height:48px;text-decoration:none}
.brand-lock{display:block;line-height:0}
.logo{width:auto;height:48px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 30px;background:var(--terra);color:#fff8ef;font:600 1.0625rem/1 var(--sans);text-decoration:none;border-radius:2px;box-shadow:none;border:0;cursor:pointer;transition:background .25s,transform .25s}
.btn:hover{background:#9c5732;transform:translateY(-1px)}
.btn svg{flex:none}
.btn-grande{min-height:64px;padding:0 34px;font-size:1.125rem}

.l{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.l>span{display:block}
.js .linhas .l>span{transform:translateY(108%);transition:transform 1.05s var(--e)}
.js .linhas .l:nth-child(2)>span{transition-delay:.12s}
.js .linhas.on .l>span{transform:none}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.on{opacity:1;transform:none}

/* TELA 1: abertura. Texto, depois o arco com a foto; no celular o arco ocupa o que sobra da primeira tela */
.hero{min-height:calc(100svh - 72px);display:flex;flex-direction:column;padding:6px var(--gutr) 24px var(--gut);max-width:1408px;margin:0 auto}
.hero-txt{padding-top:6px}
.hero h1{font-size:clamp(3.6rem,17.5vw,5.8rem);margin-bottom:14px}
.lede{color:var(--tinta2);font-size:1.1875rem;line-height:1.4;max-width:30ch}
.hero .btn{margin-top:20px;width:100%}
.desce{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:2px;font:500 1.0625rem/1.2 var(--sans);color:var(--tinta);text-decoration:underline;text-decoration-color:var(--terra);text-decoration-thickness:2px;text-underline-offset:6px}
.hero-foto{flex:1 1 auto;min-height:240px;margin-top:10px;border-radius:999px 999px 0 0;overflow:hidden;background:var(--linho2);position:relative}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}

/* TELA 2: a peça */
.peca{background:var(--linho2);padding:var(--respiro) var(--gutr) var(--respiro) var(--gut)}
.peca-in{max-width:1280px;margin:0 auto}
.peca h2{font-size:clamp(3.4rem,15vw,6.6rem);margin:14px 0 22px}
.intro{color:var(--tinta2);font-size:1.1875rem;line-height:1.45;max-width:34ch;margin-bottom:clamp(28px,5vw,44px)}
.ficha{background:var(--papel);border:1px solid var(--linha);padding:22px 20px 24px;max-width:760px;position:relative;scroll-margin-top:12px}
.trilha{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.trilha i{display:block;height:3px;background:rgba(29,28,18,.16);transition:background .4s}
.trilha i.on{background:var(--oliva)}
.onde{font:600 1rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta3);margin-bottom:18px}
.passo[hidden]{display:none}
.passo{animation:entra .45s var(--e)}
@keyframes entra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:18px;display:block;width:100%;outline:0}
.q{display:block;font:500 clamp(2.1rem,9vw,3rem)/1 var(--serif);letter-spacing:-.015em;color:var(--tinta)}
.dica{display:block;font-size:1rem;line-height:1.45;color:var(--tinta2);margin-top:10px}
.grupo{font:600 1rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terra);margin:22px 0 6px}
.ops{display:grid;gap:0;border-top:1px solid var(--linha)}
.op{position:relative;display:block;border-bottom:1px solid var(--linha)}
.op input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.op span{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 4px;font-size:1.0625rem;color:var(--tinta);transition:background .2s}
.op span::before{content:"";flex:none;width:22px;height:22px;border:1.5px solid var(--tinta2);background:var(--papel);transition:background .2s,border-color .2s}
.op input[type=radio]+span::before{border-radius:50%}
.op input:checked+span{background:rgba(111,107,60,.1)}
.op input:checked+span::before{background:var(--oliva) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5l4 4 8-9' fill='none' stroke='%23f6f2e9' stroke-width='2.4'/%3E%3C/svg%3E") center/100% no-repeat;border-color:var(--oliva)}
.op input:focus-visible+span{outline:3px solid var(--terra);outline-offset:-3px}
.medida{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--tinta);margin-bottom:20px}
.medida:focus-within{border-bottom-color:var(--terra)}
.medida input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--tinta);font:500 clamp(3.4rem,17vw,5.4rem)/1.1 var(--serif);letter-spacing:-.02em;padding:4px 0 6px;width:100%}
.medida input::placeholder{color:rgba(29,28,18,.34)}
.un{font:500 clamp(1.8rem,8vw,2.6rem)/1 var(--serif);color:var(--tinta2)}
.livre{display:block;font:600 1rem/1.3 var(--sans);color:var(--tinta);margin:24px 0 8px}
.livre span{font-weight:400;color:var(--tinta2)}
textarea,.campo{width:100%;background:var(--papel);border:1px solid var(--tinta2);border-radius:0;color:var(--tinta);font:400 1.0625rem/1.45 var(--sans);padding:12px 14px;resize:vertical}
.campo{min-height:52px;padding:0 14px}
textarea:focus,.campo:focus{outline:3px solid var(--terra);outline-offset:2px;border-color:var(--terra)}
textarea::placeholder{color:rgba(29,28,18,.5)}
.erro{margin-top:16px;color:#8a2a16;font:600 1rem/1.4 var(--sans)}
.erro[hidden]{display:none}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.nav-fim{flex-wrap:wrap;justify-content:flex-start;gap:6px 22px;margin-top:18px}
.prox{background:var(--tinta);color:var(--linho);font:600 1.0625rem/1 var(--sans);min-height:56px;padding:0 30px;border:0;border-radius:2px;cursor:pointer;transition:background .25s}
.prox:hover{background:var(--oliva)}
.volta{background:none;border:0;color:var(--tinta);font:500 1.0625rem/1 var(--sans);min-height:48px;padding:0;text-decoration:underline;text-decoration-color:var(--terra);text-decoration-thickness:2px;text-underline-offset:6px;cursor:pointer}
.telas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tela{position:relative;display:block;cursor:pointer}
.tela input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.tela img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--linho2);outline:3px solid transparent;outline-offset:-3px;transition:outline-color .2s}
.tela .leg{display:block;padding:8px 2px 4px;font:500 1rem/1.3 var(--sans);color:var(--tinta)}
.tela input:checked~img{outline-color:var(--terra)}
.tela input:checked~.leg{font-weight:700;color:var(--terra)}
.tela input:focus-visible~img,.tela input:focus-visible~.leg{outline:3px solid var(--terra);outline-offset:3px}
.tela::after{content:"";position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5l4 4 8-9' fill='none' stroke='%23fff8ef' stroke-width='2.4'/%3E%3C/svg%3E") center/70% no-repeat;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s;pointer-events:none}
.tela:has(input:checked)::after{opacity:1;transform:none}
.tela-nao{grid-column:1/-1;border:1px solid var(--tinta2)}
.tela-nao .leg{display:flex;align-items:center;min-height:56px;padding:6px 16px}
.tela-nao:has(input:checked){border-color:var(--terra);background:rgba(138,74,42,.08)}
.tela-nao::after{display:none}

.resultado .q{font-size:clamp(2.3rem,10vw,3.4rem);outline:0}
.rot-msg{font:600 1rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta3);margin:24px 0 8px}
.msg{background:var(--linho);border-left:4px solid var(--terra);padding:16px 18px;font:400 1.0625rem/1.55 var(--sans);white-space:pre-wrap;word-break:break-word;margin-bottom:22px;max-height:none}
.resultado .btn{width:100%}
.estado{font-size:1rem;color:var(--tinta2);margin-top:12px;max-width:46ch}

/* TELA 3: a frase */
.frase{background:var(--tinta);color:var(--linho);padding:var(--respiro) var(--gutr) var(--respiro) var(--gut)}
.frase-in{max-width:1280px;margin:0 auto}
.frase blockquote{margin:0}
.frase p:first-child,.frase blockquote p{font:500 clamp(3.2rem,14.5vw,7.6rem)/.98 var(--serif);letter-spacing:-.025em;text-wrap:balance;max-width:14ch}
.frase em{color:var(--terra-claro)}
.assina{margin-top:28px;font-size:1.0625rem;color:rgba(236,231,220,.82)}

/* TELA 4: o que faz */
.faz{padding:var(--respiro) var(--gutr) calc(var(--respiro)*.6) var(--gut)}
.faz-in{max-width:1280px;margin:0 auto}
.faz li{font:500 clamp(3rem,13.5vw,6.6rem)/1.02 var(--serif);letter-spacing:-.02em;border-top:1px solid var(--linha);padding:14px 0 10px}
.faz li:last-child{border-bottom:1px solid var(--linha)}
.faz-txt{margin-top:28px;font-size:1.1875rem;line-height:1.45;color:var(--tinta2);max-width:32ch}

/* TELA 5: fechamento */
.fecho{padding:calc(var(--respiro)*.6) var(--gutr) var(--respiro) var(--gut)}
.fecho-in{max-width:1280px;margin:0 auto}
.fecho h2{font-size:clamp(3.6rem,17vw,7.4rem);margin-bottom:24px}
.fecho .btn{margin-top:26px;width:100%}
.faq{margin-top:var(--respiro);max-width:760px;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:12px 0;font:500 1.55rem/1.15 var(--serif);letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 2rem/1 var(--sans);color:var(--terra);flex:none;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--tinta2);max-width:54ch}
.dados{margin:clamp(48px,8vw,80px) 0 0;display:grid;gap:22px;max-width:760px}
.dados dt{font:600 1rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terra);margin-bottom:4px}
.dados dd{line-height:1.45;color:var(--tinta)}
.dados a{display:inline-flex;align-items:center;min-height:48px;text-decoration-color:var(--terra);text-decoration-thickness:2px;text-underline-offset:5px}

.rodape{padding:44px var(--gutr) calc(110px + env(safe-area-inset-bottom,0px)) var(--gut);max-width:1408px;margin:0 auto;border-top:1px solid var(--linha)}
.rodape-nome{font:500 1.6rem/1 var(--serif);margin-bottom:12px}
.mini{font-size:.875rem;color:var(--tinta2);max-width:70ch;line-height:1.5}

.float-wa{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:10;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:2px;background:var(--terra);color:#fff8ef;font:600 1rem/1 var(--sans);text-decoration:none;transform:translateY(90px);opacity:0;pointer-events:none;visibility:hidden;transition:transform .35s,opacity .35s,visibility 0s .35s}
.float-wa.on{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}

@media (min-width:900px){
  :root{--gut:max(64px,env(safe-area-inset-left,0px));--gutr:max(64px,env(safe-area-inset-right,0px))}
  .logo{height:56px}
  .topo{padding-top:22px}
  .hero{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);column-gap:clamp(48px,6vw,110px);align-items:center;padding-top:6px;padding-bottom:36px}
  .hero-txt{padding-top:0}
  .hero h1{font-size:clamp(6.4rem,10vw,11.5rem);margin-bottom:28px}
  .lede{font-size:1.375rem;max-width:26ch}
  .hero .btn{width:auto;margin-top:30px}
  .hero-foto{flex:none;margin:0;min-height:0;height:min(74svh,660px);width:100%;max-width:520px;justify-self:end}
  .peca-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(48px,7vw,112px);align-items:start}
  .peca-intro{position:sticky;top:28px}
  .peca h2{font-size:clamp(4.4rem,6.2vw,7.2rem)}
  .desce{margin-left:26px}
  .ficha{padding:34px 36px 36px}
  .telas{grid-template-columns:repeat(4,1fr);gap:12px}
  .tela-nao{grid-column:1/-1}
  .ops.cols{grid-template-columns:1fr 1fr;column-gap:28px}
  .resultado .btn{width:auto}
  .frase p:first-child,.frase blockquote p{max-width:16ch}
  .faz-in{display:grid;grid-template-columns:1.3fr .7fr;column-gap:96px;align-items:end}
  .faz-txt{margin:0 0 14px}
  .fecho h2{font-size:clamp(5.6rem,10vw,10rem)}
  .fecho-in{display:grid;grid-template-columns:1.15fr .85fr;column-gap:96px}
  .fecho-in>h2{grid-column:1/-1}
  .fecho-in>.lede,.fecho-in>.btn{grid-column:1}
  .fecho .btn{justify-self:start;width:auto}
  .fecho-in>.faq{grid-column:1;grid-row:4}
  .fecho-in>.dados{grid-column:2;grid-row:2/span 3;align-self:end;margin-top:0}
  .rodape{padding-bottom:60px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .linhas .l>span,.js .reveal{transform:none;opacity:1;transition:none}
  .passo{animation:none}
  .btn,.float-wa,.prox,.tela::after,.trilha i{transition:none}
}