/* Onggi Studio · site
   Layout: coluna de leitura de 68ch dentro de faixas largas; fotos reais da Roberta carregam a página */
@font-face{font-family:"Young Serif";src:url("fonts/YoungSerif-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Tenor Sans";src:url("fonts/TenorSans-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-VF.ttf") format("truetype");font-weight:100 900;font-display:swap}

:root{
  --papel:#F4ECDD;      /* fundo: barro claro */
  --papel-2:#EAE0CD;
  --negro:#2E1D14;      /* Rio Negro, preto-chá */
  --barro:#B48A5E;      /* Solimões */
  --celadon:#A9C3B0;    /* esmalte verde-água das peças do Onggi */
  --urucum:#A8321C;     /* acento, só em ação e destaque */
  --tinta:#231A15;
  --suave:#6B5F55;
  --linha:#D8CCB8;
  --display:"Young Serif",Georgia,serif;
  --rotulo:"Tenor Sans","Gill Sans",sans-serif;
  --texto:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.0625rem/1.65 var(--texto)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--urucum);outline-offset:3px}

.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.ler{max-width:62ch}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:.6em}
h3{font-size:1.3rem;margin-bottom:.4em}
p{margin:0 0 1em}
.rotulo{font:400 .78rem/1 var(--rotulo);letter-spacing:.24em;text-transform:uppercase;color:var(--urucum);margin-bottom:1.1rem;display:block}
.suave{color:var(--suave)}

/* topo */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--papel) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.marca{font:400 1.15rem/1 var(--rotulo);letter-spacing:.28em;text-decoration:none;text-transform:uppercase}
.menu{display:flex;gap:22px;flex-wrap:wrap;font:400 .8rem/1 var(--rotulo);letter-spacing:.16em;text-transform:uppercase}
.menu a{text-decoration:none;padding-block:8px}
.menu a:hover{color:var(--urucum)}

/* botões */
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--urucum);color:#fff;text-decoration:none;font:500 1rem/1 var(--texto);padding:15px 24px;border-radius:999px}
.btn:hover{background:#8E2916}
.btn.claro{background:transparent;color:var(--tinta);border:1px solid var(--tinta)}
.btn.claro:hover{background:var(--tinta);color:var(--papel)}

/* faixas */
.faixa{padding-block:clamp(56px,9vw,112px)}
.faixa.escura{background:var(--negro);color:var(--papel)}
.faixa.escura .rotulo{color:#D9A67A}
.faixa.escura .suave{color:#CDBFAF}
.faixa.celadon{background:#DCE6DC}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(40px,7vw,88px)}
.hero p.lede{font-size:1.2rem;max-width:34em;margin-top:1.2rem}
.hero .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8rem}
.hero figure{margin:0}
.hero figure img{aspect-ratio:4/5;object-fit:cover;border-radius:4px;width:100%}
@media (max-width:820px){.hero{grid-template-columns:1fr}}

.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tres article{display:grid;gap:12px;align-content:start}
.tres img{aspect-ratio:4/5;object-fit:cover;border-radius:4px}
@media (max-width:820px){.tres{grid-template-columns:1fr}}

.par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.par img{border-radius:4px;aspect-ratio:4/5;object-fit:cover;width:100%}
@media (max-width:820px){.par{grid-template-columns:1fr}}

.galeria{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.galeria img{aspect-ratio:1;object-fit:cover;border-radius:3px}
@media (max-width:820px){.galeria{grid-template-columns:repeat(2,minmax(0,1fr))}}

.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);margin-top:2rem}
.passos div{background:var(--papel);padding:24px}
.passos b{display:block;font:400 2rem/1 var(--display);color:var(--barro);margin-bottom:10px}
@media (max-width:820px){.passos{grid-template-columns:1fr}}

.rodape{background:var(--negro);color:var(--papel);padding-block:56px}
.rodape .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.rodape a{color:var(--papel)}
.rodape small{color:#CDBFAF}

/* coleção */
.colecao-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(48px,8vw,104px)}
.colecao-hero img.sim{width:min(380px,70vw);justify-self:center}
@media (max-width:820px){.colecao-hero{grid-template-columns:1fr}.colecao-hero img.sim{order:-1;width:min(240px,60vw)}}
.desenho{width:100%;height:auto;max-height:280px;object-fit:cover}
.credito{font-size:.9rem;color:var(--suave);border-left:3px solid var(--barro);padding-left:14px}
@media (max-width:640px){
  .topo .wrap{padding-block:10px;gap:6px}
  .menu{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:18px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap}
}

/* ===== v2: topo, abertura e movimento (08/10) ===== */
.topo{transition:background .3s,box-shadow .3s}
.topo .wrap{min-height:76px;transition:min-height .3s}
.topo .marca img{height:44px;width:auto;transition:height .3s}
.topo.rolou{background:var(--papel);box-shadow:0 1px 0 var(--linha),0 8px 24px -18px rgba(46,29,20,.5)}
.topo.rolou .wrap{min-height:60px}
.topo.rolou .marca img{height:34px}
.menu{margin-left:auto}
.btn-topo{padding:11px 18px;font-size:.9rem}
.topo.escuro:not(.rolou){background:transparent;border-bottom-color:transparent;color:var(--papel)}
.topo.escuro:not(.rolou) .marca img{filter:invert(93%) sepia(9%) saturate(300%) hue-rotate(340deg)}
@media (max-width:640px){
  .topo .wrap{display:grid;grid-template-columns:1fr auto;row-gap:4px}
  .topo .marca img{height:34px}
  .btn-topo{padding:9px 14px;font-size:.82rem}
  .menu{grid-column:1/-1;margin-left:0}
}

/* abertura da página inicial */
.hero-home{position:relative;overflow:hidden}
.hero-home .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:min(78vh,760px)}
.hero h1 .ln{display:block}
.colagem{position:relative;aspect-ratio:1/1.02;width:100%}
.colagem img{position:absolute;object-fit:cover;border-radius:4px;box-shadow:0 30px 60px -30px rgba(46,29,20,.55)}
.colagem .c1{left:14%;top:6%;width:66%;height:74%}
.colagem .c2{right:0;top:0;width:34%;height:38%}
.colagem .c3{left:0;bottom:0;width:40%;height:42%}
.colagem .selo{position:absolute;right:6%;bottom:4%;width:22%;aspect-ratio:1}
@media (max-width:820px){.hero-home .hero{min-height:0}.colagem{max-width:520px;margin-inline:auto}}

/* faixa dos ofícios */
.oficios{background:var(--negro);color:var(--papel);overflow:hidden;white-space:nowrap;padding-block:14px;font:400 .82rem/1 var(--rotulo);letter-spacing:.28em;text-transform:uppercase}
.oficios .trilho{display:inline-flex;gap:48px;padding-right:48px;animation:corre 38s linear infinite}
.oficios span::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--barro);margin-left:48px;vertical-align:middle}
@keyframes corre{to{transform:translateX(-50%)}}

/* abertura da coleção */
.capa-colecao{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;color:var(--papel);background:var(--negro);overflow:hidden;margin-top:-77px}
.capa-colecao .fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.06);animation:respira 18s ease-in-out infinite alternate}
.capa-colecao::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,29,20,.15) 0%,rgba(46,29,20,.25) 45%,rgba(46,29,20,.92) 100%)}
.capa-colecao .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:end;padding-block:140px 64px}
.capa-colecao h1{font-size:clamp(3rem,10vw,7.5rem);letter-spacing:-.01em}
.capa-colecao .lede{color:#E9DCC8;font-size:1.2rem;max-width:30em;margin-top:1rem}
.capa-colecao .rotulo{color:#D9A67A}
.torno{width:min(300px,60vw);justify-self:end;animation:gira 60s linear infinite}
.legenda-ia{position:absolute;right:16px;bottom:12px;z-index:1;font-size:.72rem;color:#CDBFAF;letter-spacing:.04em}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes respira{to{transform:scale(1.14)}}
@media (max-width:820px){.capa-colecao .wrap{grid-template-columns:1fr}.torno{justify-self:start;width:170px;order:-1}}

.galeria-colecao{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.galeria-colecao figure{margin:0;position:relative}
.galeria-colecao img{width:100%;height:100%;object-fit:cover;border-radius:4px;aspect-ratio:4/3}
.galeria-colecao figcaption{font-size:.8rem;color:var(--suave);margin-top:6px}
@media (max-width:820px){.galeria-colecao{grid-template-columns:1fr}}

/* revelar ao rolar (só com JS ligado) */
.js [data-revela]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-revela].visto{opacity:1;transform:none}
.js .entra{opacity:0;transform:translateY(16px);animation:entra .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .entra.d1{animation-delay:.08s}.js .entra.d2{animation-delay:.18s}.js .entra.d3{animation-delay:.3s}.js .entra.d4{animation-delay:.45s}.js .entra.d5{animation-delay:.6s}
@keyframes entra{to{opacity:1;transform:none}}
.tres article img,.galeria img{transition:transform .5s ease}
.tres article:hover img,.galeria img:hover{transform:translateY(-4px)}
.btn{transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .oficios .trilho,.torno,.capa-colecao .fundo{animation:none}
  .js [data-revela],.js .entra{opacity:1;transform:none;animation:none;transition:none}
}
@media (max-width:1000px){
  .topo .wrap{display:grid;grid-template-columns:1fr auto;row-gap:2px;padding-block:8px}
  .menu{grid-column:1/-1;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:22px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap}
  .topo.rolou .menu{display:none}
}
@media (max-width:900px){
  .hero-home .hero{grid-template-columns:1fr;gap:28px}
  .hero-home h1 .ln{display:inline}
  .hero-home h1 .ln::after{content:" "}
}
@media (max-width:1000px){.btn-topo{grid-column:2;grid-row:1;justify-self:end}}
.topo.escuro:not(.rolou) .marca img{filter:none;content:url("img/logo-onggi-horizontal-claro.svg")}
.hero-home h1{font-size:clamp(2.3rem,4.3vw,3.8rem)}
@media (min-width:901px){.hero-home h1 .ln{white-space:nowrap}}

/* destaque da coleção na página inicial */
.destaque-colecao{position:relative;overflow:hidden;background:var(--negro);color:var(--papel)}
.destaque-colecao .fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;animation:respira 18s ease-in-out infinite alternate}
.destaque-colecao::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,29,20,.92) 0%,rgba(46,29,20,.55) 60%,rgba(46,29,20,.35) 100%)}
.destaque-colecao .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,80px);align-items:center;padding-block:clamp(72px,11vw,140px)}
.destaque-colecao .torno{justify-self:center;width:min(340px,62vw)}
.destaque-colecao h2{font-size:clamp(3rem,9vw,6.5rem);margin-bottom:.25em}
.destaque-colecao p{color:#E9DCC8;font-size:1.15rem;max-width:32em}
.destaque-colecao .rotulo{color:#D9A67A}
@media (max-width:820px){.destaque-colecao .wrap{grid-template-columns:1fr}.destaque-colecao .torno{width:180px;justify-self:start}}
.menu a.novo{position:relative;color:var(--urucum)}
.menu a.novo::before{content:"";position:absolute;left:-11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--urucum);animation:pulsa 2.4s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.destaque-colecao .fundo,.menu a.novo::before{animation:none}}

/* ===== página Peças (14/10) ===== */
.pecas-topo{padding-block:clamp(40px,7vw,88px) 24px}
.pecas-topo .lede{max-width:40em;font-size:1.15rem;margin-top:1rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6rem}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--tinta);border-radius:999px;text-decoration:none;font:400 .82rem/1 var(--rotulo);letter-spacing:.16em;text-transform:uppercase}
.chip span{font-family:var(--texto);letter-spacing:0;color:var(--suave)}
.chip:hover{background:var(--tinta);color:var(--papel)}.chip:hover span{color:#CDBFAF}
.serie{padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--linha);scroll-margin-top:90px}
.serie-topo{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px;align-items:baseline;margin-bottom:28px}
.serie-topo h2{margin:0}
.serie-topo p{margin:0;max-width:52ch}
@media (max-width:820px){.serie-topo{grid-template-columns:1fr;gap:8px}}
.mosaico{columns:3 260px;column-gap:14px}
.peca{display:block;break-inside:avoid;margin-bottom:14px;border-radius:4px;overflow:hidden;cursor:zoom-in}
.peca img{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s}
.peca:hover img{transform:scale(1.03)}
.lupa{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;color:var(--papel)}
.lupa::backdrop{background:rgba(26,17,12,.92)}
.lupa figure{margin:0;height:100%;display:grid;place-items:center;align-content:center;gap:12px;padding:56px 64px}
.lupa img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:3px}
.lupa figcaption{font-size:.95rem;color:#E9DCC8;text-align:center;max-width:60ch}
.lupa button{position:fixed;background:none;border:0;color:var(--papel);font:300 2.6rem/1 var(--texto);cursor:pointer;padding:12px 16px}
.lupa .fecha{top:12px;right:12px}.lupa .ant{left:8px;top:50%;transform:translateY(-50%)}.lupa .prox{right:8px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lupa figure{padding:56px 12px}}
.menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}

/* séries na página inicial */
.series-home{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.series-home a{display:grid;gap:10px;text-decoration:none}
.series-home img{aspect-ratio:4/5;object-fit:cover;border-radius:4px;width:100%;transition:transform .5s ease}
.series-home a:hover img{transform:translateY(-4px)}
.series-home b{font:400 1.25rem/1.1 var(--display)}
.series-home span{font-size:.85rem;color:var(--suave)}
@media (max-width:820px){.series-home{grid-template-columns:repeat(2,minmax(0,1fr))}}