/* Onça Pintada — site (etapa 1). Tokens: id/cores/tokens.css (copiados aqui para a página funcionar sozinha). */
@font-face{font-family:"Montserrat";src:url(../fonts/Montserrat-VF-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/BodoniModa-Italic-VF-latin.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --vinho:#884D4F;--vinho-escuro:#6A3A3C;--creme:#F6F0EA;--areia:#E8DCCF;--rosa-po:#E9CFC9;--cacau:#3B2A26;--cacau-suave:#6E5B55;
  --f-titulo:"Montserrat",Arial,sans-serif;--f-destaque:"Bodoni Moda",Georgia,serif;--f-texto:"Montserrat",Arial,sans-serif;
  --t-hero:clamp(2.4rem,1rem + 5.4vw,6.6rem);--t-h2:clamp(1.8rem,1rem + 3vw,4rem);--t-h3:clamp(1.05rem,.95rem + .5vw,1.35rem);
  --t-corpo:clamp(1rem,.96rem + .2vw,1.125rem);--t-mini:.8125rem;
  --e1:.5rem;--e2:1rem;--e3:1.5rem;--e4:2rem;--e6:3rem;--e8:4rem;--e12:6rem;--e16:8rem;
  --margem:clamp(1.25rem,4vw,4rem);
  --ease-saida:cubic-bezier(.16,1,.3,1);--ease-padrao:cubic-bezier(.65,0,.35,1);
  --d-rapido:180ms;--d-medio:420ms;--d-longo:1000ms;--escalonar:80ms;--arco:999px 999px 0 0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--creme);color:var(--cacau);font:400 var(--t-corpo)/1.65 var(--f-texto);overflow-x:clip}
/* textura de papel */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%;height:auto}
svg{width:1em;height:1em}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
em{font-family:var(--f-destaque);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px}

.pular{position:absolute;left:var(--margem);top:-4rem;z-index:100;background:var(--cacau);color:var(--creme);padding:.75rem 1rem;font-weight:600}
.pular:focus{top:1rem}

.sobretitulo{font:600 var(--t-mini)/1.2 var(--f-texto);letter-spacing:.24em;text-transform:uppercase;color:var(--vinho);display:flex;align-items:center;gap:.75rem}
.sobretitulo::before{content:"";width:1.6rem;height:1px;background:currentColor}
.h2{font:600 var(--t-h2)/1.08 var(--f-titulo);letter-spacing:-.02em;text-wrap:balance}
.h2 em{color:var(--vinho)}
.mini{font-size:var(--t-mini);color:var(--cacau-suave)}
.arco{border-radius:var(--arco);overflow:hidden}

.botao{display:inline-flex;align-items:center;gap:.75rem;min-height:48px;padding:.85rem 1.5rem;border-radius:999px;background:var(--vinho);color:#fff;
  font-weight:600;letter-spacing:.04em;text-decoration:none;transition:transform var(--d-rapido) var(--ease-saida),background var(--d-rapido),box-shadow var(--d-medio) var(--ease-saida)}
.botao svg{transition:transform var(--d-rapido) var(--ease-saida)}
.botao:hover{background:var(--vinho-escuro);transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(136,77,79,.8)}
.botao:hover svg{transform:translateX(4px)}
.botao:active{transform:translateY(0) scale(.98)}
.botao--pequeno{min-height:44px;padding:.6rem 1.1rem;font-size:.875rem}
.botao--claro{background:var(--creme);color:var(--vinho-escuro)}
.botao--claro:hover{background:#fff}
.link-sublinha{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:600;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - .6rem)/0 1px no-repeat;transition:background-size var(--d-medio) var(--ease-saida)}
.link-sublinha:hover,.link-sublinha:focus-visible{background-size:100% 1px}

/* topo */
.topo{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:var(--e4);padding:.75rem var(--margem);background:rgba(246,240,234,.86);backdrop-filter:blur(8px);border-bottom:1px solid rgba(59,42,38,.08)}
.topo__marca{display:flex;align-items:center;gap:.75rem;text-decoration:none;font:600 .8rem/1 var(--f-titulo);letter-spacing:.24em;text-transform:uppercase}
.topo__marca img{width:44px;height:44px;border-radius:50%}
.topo__nav{display:none;gap:var(--e4);margin-left:auto;font-size:.875rem;font-weight:500}
.topo__nav a{text-decoration:none;padding:.7rem 0;background:linear-gradient(var(--vinho),var(--vinho)) 0 calc(100% - .45rem)/0 1px no-repeat;transition:background-size var(--d-medio) var(--ease-saida)}
.topo__nav a:hover{background-size:100% 1px}
.topo .botao{margin-left:auto}
@media (max-width:520px){.topo__marca span{display:none}}
@media (min-width:900px){.topo__nav{display:flex}.topo .botao{margin-left:0}}

/* 1. hero */
.hero{min-height:100svh;display:grid;gap:var(--e6);padding:7rem var(--margem) var(--e8);align-items:center}
.hero__texto{display:grid;gap:var(--e3);justify-items:start}
.hero__titulo{font:600 var(--t-hero)/1.02 var(--f-titulo);letter-spacing:-.035em}
.hero__titulo em{color:var(--vinho);font-weight:500}
.hero__titulo .linha{display:block;overflow:hidden;padding-bottom:.08em}
.hero__onde{font:600 clamp(.8rem,.75rem + .3vw,1rem)/1.5 var(--f-texto)!important;letter-spacing:.2em!important;text-transform:uppercase;color:var(--cacau-suave);margin-top:var(--e2)}
.hero__apoio{max-width:44ch;color:var(--cacau-suave)}
.hero__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e4)}
.hero__fotos{position:relative;display:grid;justify-items:end;padding-bottom:var(--e6)}
.hero__foto{width:min(100%,30rem);aspect-ratio:3/4.4;box-shadow:0 40px 80px -40px rgba(59,42,38,.5)}
.hero__foto img,.hero__foto2 img{width:100%;height:100%;object-fit:cover}
.hero__foto img{animation:aproxima 2.2s var(--ease-saida) both}
.hero__foto2{position:absolute;left:0;bottom:0;width:42%;aspect-ratio:3/4;border-radius:999px;overflow:hidden;border:6px solid var(--creme);animation:sobe-foto 1.2s .7s var(--ease-saida) both}
.hero__selo{position:absolute;top:-1.5rem;left:12%;width:clamp(88px,10vw,140px);height:auto;aspect-ratio:1;filter:drop-shadow(0 10px 20px rgba(59,42,38,.25))}
.entra{animation:sobe var(--d-longo) calc(.2s + var(--i) * var(--escalonar) * 1.6) var(--ease-saida) both}
.linha .entra{display:inline-block}
@keyframes sobe{from{opacity:0;transform:translateY(105%)}}
@keyframes sobe-foto{from{opacity:0;transform:translateY(20%)}}
@keyframes aproxima{from{transform:scale(1.1)}}
@media (min-width:900px){.hero{grid-template-columns:repeat(12,1fr)}.hero__texto{grid-column:1/8}.hero__fotos{grid-column:8/13}}

/* 2. loja */
.loja{display:grid;gap:var(--e4);padding:var(--e16) var(--margem);background:var(--areia);position:relative;overflow:hidden}
.loja::before{content:"";position:absolute;top:-30%;right:-20%;width:70%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(136,77,79,.25);pointer-events:none}
.loja__texto{display:grid;gap:var(--e3);justify-items:start;align-content:center}
.loja__texto>p:not(.sobretitulo){max-width:50ch}
.loja__falas{display:flex;flex-wrap:wrap;gap:.6rem}
.loja__falas li{padding:.45rem .9rem;border:1px solid rgba(136,77,79,.4);border-radius:999px;font-size:.9rem;color:var(--vinho-escuro)}
.loja__a,.loja__b{overflow:hidden}
.loja__a{aspect-ratio:3/4.2}
.loja__b{aspect-ratio:4/5;border-radius:2px}
.loja__a img,.loja__b img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.loja{grid-template-columns:repeat(12,1fr);align-items:end}.loja__texto{grid-column:1/6;align-self:center}.loja__a{grid-column:7/10;transform:translateY(-12%)}.loja__b{grid-column:10/13}}

/* 3. looks — galeria horizontal */
.looks{padding:var(--e12) 0;overflow:hidden}
.looks__pista{scroll-padding-inline:var(--margem);display:flex;gap:clamp(1rem,2vw,2rem);align-items:flex-end;padding:0 var(--margem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.looks__pista>*{flex:none;scroll-snap-align:start}
.looks__trilho{display:flex;gap:clamp(1rem,2vw,2rem);align-items:flex-end;flex:none}
.looks__abre{width:min(84vw,26rem);display:grid;gap:var(--e3);align-self:center}
.looks__abre>p:last-child{color:var(--cacau-suave)}
.look{width:min(66vw,18rem);display:grid;gap:.75rem}
.look:nth-child(odd) .look__foto{border-radius:var(--arco)}
.look__foto{aspect-ratio:3/4.6;overflow:hidden;border-radius:2px;background:var(--areia)}
.look__foto img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-longo) var(--ease-saida)}
.look:hover .look__foto img{transform:scale(1.03)}
.look figcaption{display:grid;gap:.15rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;border-top:1px solid rgba(59,42,38,.2);padding-top:.6rem}
.look figcaption span:first-child{font-weight:700;color:var(--cacau)}
.look figcaption span:nth-child(2){color:var(--vinho);font-weight:600}
.look figcaption a{color:var(--cacau-suave);text-transform:none;letter-spacing:0;font-size:.8rem;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:859px){.looks__pista{flex-direction:column;align-items:stretch;overflow:visible;scroll-snap-type:none;padding:0}.looks__abre{width:auto;padding:0 var(--margem) var(--e4)}.looks__trilho{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);padding:0 var(--margem) .5rem;scrollbar-width:thin}.looks__trilho>*{flex:none;scroll-snap-align:start}}
.looks.fixo{height:100vh;display:flex;align-items:center;padding:0}
.looks.fixo .looks__pista{overflow:visible;scroll-snap-type:none;width:max-content}
.looks.fixo .look{width:auto}
.looks.fixo .look__foto{height:min(62vh,36rem);width:auto}

/* 4. calçados */
.calcados{display:grid;gap:var(--e6);padding:var(--e16) var(--margem);align-items:center}
.calcados__foto{aspect-ratio:3/4.3;max-height:85vh}
.calcados__foto img{width:100%;height:100%;object-fit:cover}
.calcados__texto{display:grid;gap:var(--e3);justify-items:start}
.calcados__texto>p:not(.sobretitulo){max-width:46ch;color:var(--cacau-suave)}
.marcas{display:grid;gap:.1rem;width:100%;border-top:1px solid rgba(59,42,38,.15)}
.marcas li{font:600 clamp(1.6rem,1rem + 2.6vw,3.4rem)/1.2 var(--f-titulo);letter-spacing:-.02em;padding:.35rem 0;border-bottom:1px solid rgba(59,42,38,.15);transition:color var(--d-medio),padding var(--d-medio) var(--ease-saida)}
.marcas li em{color:var(--vinho)}
.marcas li:hover{padding-left:.6rem;color:var(--vinho)}
@media (min-width:900px){.calcados{grid-template-columns:repeat(12,1fr)}.calcados__foto{grid-column:1/6}.calcados__texto{grid-column:7/13}}

/* 5. envio — bloco vinho */
.envio{display:grid;gap:var(--e6);padding:var(--e16) var(--margem);background:var(--vinho);color:#fff;align-items:center;position:relative;overflow:hidden}
.envio__texto{display:grid;gap:var(--e6)}
.envio__titulo{font:600 var(--t-h2)/1.08 var(--f-titulo);letter-spacing:-.02em;max-width:16ch}
.envio__titulo em{color:var(--rosa-po)}
.envio__frete{display:grid;gap:var(--e2);max-width:34rem}
.envio__valor{font:700 clamp(4rem,2rem + 8vw,9rem)/.9 var(--f-titulo);letter-spacing:-.05em}
.envio__valor span{font-size:.3em;letter-spacing:0;vertical-align:top;margin-right:.3em}
.envio__frete p:last-child{color:#F6E9E6}
.envio__foto{aspect-ratio:3/4;max-height:80vh;border:6px solid rgba(255,255,255,.15)}
.envio__foto img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.envio{grid-template-columns:repeat(12,1fr)}.envio__texto{grid-column:1/8}.envio__foto{grid-column:9/13}}

/* 6. prova */
.prova{display:grid;gap:var(--e8);padding:var(--e16) var(--margem)}
.prova__nota{display:grid;gap:var(--e2);justify-items:start}
.prova__numero{font:500 italic clamp(5rem,3rem + 10vw,12rem)/.85 var(--f-destaque);color:var(--vinho)}
.estrelas{display:flex;gap:.3rem;color:var(--vinho)}
.estrelas svg{width:1.3rem;height:1.3rem}
.prova__titulo{font:600 var(--t-h3)/1.35 var(--f-titulo);max-width:24ch}
.prova__falas{display:grid;gap:var(--e3)}
.fala{padding:var(--e4);background:#fff;border-radius:2px;box-shadow:0 1px 0 rgba(59,42,38,.06);transition:transform var(--d-medio) var(--ease-saida),box-shadow var(--d-medio)}
.fala:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(59,42,38,.4)}
.fala--grande{background:var(--rosa-po)}
.fala--grande p{font:500 clamp(1.2rem,1rem + 1vw,1.75rem)/1.4 var(--f-texto)}
.fala--grande em{color:var(--vinho-escuro)}
.prova__fonte{grid-column:1/-1}
@media (min-width:900px){.prova{grid-template-columns:repeat(12,1fr)}.prova__nota{grid-column:1/5;align-self:start;position:sticky;top:7rem}.prova__falas{grid-column:6/13;grid-template-columns:1fr 1fr}.fala--grande{grid-column:1/-1}}

/* 7. nome gigante com foto atravessando */
.nome{position:relative;display:grid;place-items:center;padding:var(--e12) 0 var(--e16);overflow:hidden;background:var(--areia)}
.nome__grande{display:grid;justify-items:center;font:700 clamp(4rem,1rem + 15vw,17rem)/.85 var(--f-titulo);letter-spacing:-.06em;text-transform:uppercase;color:var(--cacau)}
.nome__grande em{text-transform:none;color:var(--vinho);letter-spacing:-.03em;font-weight:500}
.nome__foto{position:absolute;width:clamp(150px,20vw,280px);aspect-ratio:3/4.4;left:50%;top:50%;translate:-50% -50%;box-shadow:0 30px 60px -30px rgba(59,42,38,.6)}
.nome__foto img{width:100%;height:100%;object-fit:cover}

/* 8. final */
.final{display:grid;justify-items:center;text-align:center;gap:var(--e3);padding:var(--e16) var(--margem);background:var(--cacau);color:var(--creme)}
.final__selo{width:clamp(90px,10vw,130px);height:auto;aspect-ratio:1}
.final__titulo{font:600 clamp(2.2rem,1rem + 4.6vw,5.6rem)/1.02 var(--f-titulo);letter-spacing:-.035em;max-width:14ch}
.final__titulo em{color:var(--rosa-po)}
.final p{max-width:40ch;color:#E6DCD4}
.final__acoes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--e3) var(--e4)}
.final__acoes svg{width:1.1rem;height:1.1rem}

.rodape{display:grid;gap:.5rem;justify-items:center;text-align:center;padding:var(--e6) var(--margem) 7rem;background:var(--cacau);color:#CFC3BA;font-size:var(--t-mini);border-top:1px solid rgba(246,240,234,.12)}
.rodape__nome{font:600 .9rem/1 var(--f-titulo);letter-spacing:.3em;text-transform:uppercase;color:var(--creme)}
.rodape a{display:inline-flex;min-height:44px;align-items:center}
@media (min-width:900px){.rodape{padding-bottom:var(--e6)}}

.flutua{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:45;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:.8rem 1.4rem;border-radius:999px;background:var(--vinho);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 12px 30px -8px rgba(59,42,38,.5);white-space:nowrap}
.flutua svg{width:1.15rem;height:1.15rem}
.flutua:active{transform:translateX(-50%) scale(.97)}
@media (max-width:899px){.hero{padding-bottom:6.5rem}}
@media (min-width:900px){.flutua{display:none}}

/* motion na rolagem — visível por padrão */
@supports (animation-timeline:view()){
  .rv{animation:revela linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .plx img{scale:1.14;animation:paralaxe linear both;animation-timeline:view();animation-range:cover}
  .gira{animation:gira linear both;animation-timeline:scroll(root)}
  .nome__foto{animation:atravessa linear both;animation-timeline:view();animation-range:cover}
}
@keyframes revela{from{opacity:0;transform:translateY(2.5rem)}}
@keyframes paralaxe{from{translate:0 -6%}to{translate:0 6%}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes atravessa{from{transform:translateY(45%)}to{transform:translateY(-45%)}}
.io .rv{transition:opacity var(--d-longo) var(--ease-saida),transform var(--d-longo) var(--ease-saida)}
.io .rv:not(.dentro){opacity:0;transform:translateY(2.5rem)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .plx img{scale:1}
  .io .rv:not(.dentro){opacity:1;transform:none}
}