/* Raiz — loja de barro do Minho (MeriForm)
   ---------------------------------------------------------------------------
   O hero é um copo a nascer: o barro gira no torno e o scroll conta a
   história em sete capítulos (centrar, levantar, secar, cozer, vidrar, à
   mesa). A página inteira muda com ele — cor de fundo, lado do texto,
   enquadramento. As peças da loja são renderizadas com a mesma luz de
   estúdio, por isso parecem todas da mesma casa, sem fotografias.
   Cor de barro e creme; Gloock nos títulos, Geist no texto, Geist Mono nos
   números. A mesma folha serve o PT (/) e o EN (/en/). */

:root{
  --papel:#efe7da;
  --papel-2:#e6dccb;
  --branco:#fbf8f2;
  --tinta:#1d1915;
  --suave:#776c5f;
  --linha:rgba(29,25,21,.15);
  --barro:#b4623c;
  --barro-esc:#8c4a2a;
  --verde:#4a7a52;
  --serifa:"Gloock",Georgia,serif;
  --texto:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --margem:clamp(18px,4vw,60px);
  --barra:34px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--papel)}
body{background:var(--papel);color:var(--tinta);font:400 16px/1.6 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--barro);outline-offset:3px}
.k{font:500 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--barro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Topo ─────────────────────────────────────────────────────────────────
   Por cima da história, toma as cores do capítulo (o script escreve-as em
   --h-*); depois da história fica creme e sólido. */
.topo{position:fixed;inset:0 0 auto;z-index:50;--h-tinta:var(--tinta);--h-suave:var(--suave);--h-linha:var(--linha);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.demo-bar{height:var(--barra);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;background:var(--tinta);color:rgba(239,231,218,.7);font-size:12.5px;white-space:nowrap;overflow:hidden}
.demo-bar strong{color:var(--papel)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--margem);color:var(--h-tinta);transition:background .35s}
.topo.rolado{transform:translateY(calc(-1 * var(--barra)))}
.topo.rolado .nav{background:rgba(239,231,218,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linha);color:var(--tinta);--h-suave:var(--suave);--h-linha:var(--linha)}
.marca{font:400 28px/1 var(--serifa);white-space:nowrap}
.menu{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--h-suave)}
.menu a:hover{color:var(--h-tinta)}
.topo.rolado .menu{color:var(--suave)}
.acoes{display:flex;align-items:center;gap:10px}
.lingua{display:flex;border:1px solid var(--h-linha);border-radius:999px;padding:3px;font:500 12px var(--mono)}
.lingua a{padding:5px 9px;border-radius:999px;color:var(--h-suave)}
.lingua a[aria-current=page]{background:var(--h-tinta);color:var(--h-fundo,var(--papel))}
.topo.rolado .lingua a[aria-current=page]{background:var(--tinta);color:var(--papel)}
.btn-cesto{display:inline-flex;align-items:center;gap:8px;font:500 14px var(--texto);padding:9px 16px;border-radius:999px;border:1px solid var(--h-linha);white-space:nowrap}
.btn-cesto b{font:500 12px var(--mono);min-width:20px;height:20px;border-radius:999px;background:var(--barro);color:#fff;display:grid;place-items:center;padding:0 5px}
.abrir-menu{display:none;width:44px;height:44px;position:relative}
.abrir-menu span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .3s}
.abrir-menu span:nth-child(1){top:17px}.abrir-menu span:nth-child(2){top:25px}
.menu-aberto .abrir-menu span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-aberto .abrir-menu span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media(max-width:900px){
  .menu{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:0 var(--margem);background:var(--papel);color:var(--tinta);
    font:400 44px/1.1 var(--serifa);opacity:0;pointer-events:none;transition:opacity .35s}
  .menu-aberto .menu{opacity:1;pointer-events:auto}
  .menu-aberto .nav{color:var(--tinta)}
  .abrir-menu{display:block}
}
@media(max-width:560px){.demo-bar{font-size:11px}.demo-bar .longo{display:none}.btn-cesto .rotulo{display:none}.nav{gap:10px}.acoes{gap:6px}}

/* ── Hero: a história do torno ─────────────────────────────────────────── */
.historia{height:800vh;position:relative}
.fixo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--fundo,#efe7da);color:var(--tinta);
  --fundo:#efe7da;--acento:#b4623c}
.fixo .k{color:var(--acento)}
.brasa{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at var(--bx,60%) 62%,rgba(255,104,36,.42),rgba(255,104,36,.08) 30%,transparent 55%);pointer-events:none}
#cena{position:absolute;inset:0;width:100%;height:100%;display:block}
.cap{position:absolute;z-index:3;opacity:0;will-change:opacity,transform}
.cap.esq{left:var(--margem);top:54%;width:min(470px,38vw);transform:translateY(-50%)}
.cap.dir{right:calc(var(--margem) + 130px);top:54%;width:min(450px,36vw);transform:translateY(-50%)}
.cap.mesa{left:50%;top:calc(var(--barra) + 96px);width:min(640px,90vw);text-align:center;transform:translateX(-50%)}
.cap.intro{left:var(--margem);top:max(150px,19vh);width:min(560px,44vw);opacity:1}
.cap h1{font:400 clamp(3rem,6.6vw,6.8rem)/.92 var(--serifa);letter-spacing:-.02em;margin:14px 0 20px;text-wrap:balance}
.cap h1 em,.cap h2 em{font-style:normal;color:var(--acento)}
.cap h2{font:400 clamp(2.3rem,4.1vw,4.3rem)/.98 var(--serifa);letter-spacing:-.015em;margin:14px 0 16px;text-wrap:balance}
.cap p{color:var(--suave);font-size:17px;line-height:1.6;max-width:420px}
.cap.mesa p{margin:0 auto}
.num{display:flex;align-items:baseline;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--linha);max-width:420px}
.num b{font:400 54px/1 var(--serifa);color:var(--acento);font-variant-numeric:tabular-nums;min-width:2ch;white-space:nowrap}
.num span{font:400 12px/1.4 var(--mono);color:var(--suave)}
.dica{margin-top:30px;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--suave);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.dica i{width:1px;height:28px;background:var(--suave);animation:desce 1.8s ease-in-out infinite;transform-origin:top}
.dica a{border-bottom:1px solid currentColor;pointer-events:auto}
@keyframes desce{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.ver-todas{display:inline-block;margin-top:16px;font:500 13px var(--mono);border-bottom:1px solid currentColor}

.indice{position:absolute;right:var(--margem);top:54%;transform:translateY(-50%);z-index:4;display:grid;gap:4px}
.indice button{display:flex;align-items:center;gap:10px;color:var(--suave);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 0;opacity:.55;transition:opacity .3s,color .3s;text-align:left}
.indice button::before{content:"";width:14px;height:1px;background:currentColor;transition:width .3s}
.indice button.on{opacity:1;color:var(--tinta)}
.indice button.on::before{width:30px;background:var(--acento)}

.cartoes{position:absolute;inset:0;z-index:4;pointer-events:none}
.cartao{position:absolute;width:250px;transform:translateX(-50%);text-align:center;opacity:0}
.cartao .k{color:var(--suave);letter-spacing:.12em}
.cartao h3{font:400 26px/1.05 var(--serifa);margin:6px 0 4px}
.cartao p{font:400 12px var(--mono);color:var(--suave)}
.cartao .compra{display:inline-flex;align-items:center;gap:12px;margin-top:12px}
.cartao .compra b{font:400 24px var(--serifa)}
.cartao button{background:var(--tinta);color:var(--papel);padding:10px 15px;border-radius:999px;font:500 13px var(--texto)}

/* Sem WebGL: a história fica um hero parado, com o primeiro capítulo. */
.sem-3d .historia{height:auto}
.sem-3d .fixo{position:relative;height:auto;min-height:100svh;padding-bottom:60px}
.sem-3d .cap:not(.intro),.sem-3d .indice,.sem-3d .cartoes,.sem-3d .dica i{display:none}

/* Em ecrãs pouco largos o índice fica só com os traços, para não tapar a peça */
@media(max-width:1300px) and (min-width:821px){.indice button{font-size:0;gap:0}}
@media(max-width:820px){
  .cap.esq,.cap.dir,.cap.intro,.cap.mesa{left:var(--margem);right:var(--margem);top:calc(var(--barra) + 84px);width:auto;text-align:left;transform:none}
  .cap h1{font-size:clamp(2.5rem,11.5vw,3.6rem);margin:10px 0 12px}
  .cap h2{font-size:clamp(2rem,9vw,2.7rem);margin:10px 0}
  .cap p{font-size:15px;line-height:1.5}
  .cap.mesa p{margin:0}
  .num{margin-top:14px;padding-top:10px}.num b{font-size:38px}
  .dica{margin-top:16px}.dica i{display:none}
  .indice{top:auto;bottom:18px;right:auto;left:50%;transform:translateX(-50%);grid-auto-flow:column;gap:6px}
  .indice button{font-size:0;padding:8px 0;gap:0}
  .indice button::before{width:18px;height:2px}
  .indice button.on::before{width:30px}
  .cartao{width:31vw}
  .cartao .k,.cartao p{display:none}
  .cartao h3{font-size:17px}
  .cartao .compra{flex-direction:column;gap:6px;margin-top:6px}
  .cartao .compra b{font-size:20px}
  .cartao button{padding:8px 12px;font-size:12px}
}

/* ── Secções ──────────────────────────────────────────────────────────── */
.seccao{padding:clamp(80px,11vw,140px) var(--margem)}
.titulo{font:400 clamp(2.3rem,4.6vw,4.2rem)/1.02 var(--serifa);letter-spacing:-.01em;margin-top:14px;max-width:860px;text-wrap:balance}
.titulo em{font-style:normal;color:var(--barro)}
.texto{margin-top:18px;max-width:540px;color:var(--suave);font-size:17px}
.revela{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.revela.visto{opacity:1;transform:none}

/* As peças */
.cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtros button{border:1px solid var(--linha);border-radius:999px;padding:8px 14px;font:500 13px var(--texto);white-space:nowrap}
.filtros button[aria-pressed=true]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.montra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(32px,4vw,48px)}
.peca{display:flex;flex-direction:column}
.peca[hidden]{display:none}
.foto{position:relative;aspect-ratio:1;border-radius:6px;background:radial-gradient(ellipse at 50% 38%,var(--branco),var(--papel-2) 72%);overflow:hidden}
.foto img{width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .6s,transform .6s}
.foto img.pronta{opacity:1;transform:none}
.foto::after{content:"";position:absolute;left:50%;bottom:22%;width:34%;aspect-ratio:1;border-radius:50% 50% 8px 8px;transform:translateX(-50%);background:var(--v,#c0653e);opacity:.18;transition:opacity .4s}
.foto.com-img::after{opacity:0}
.selo{position:absolute;left:12px;top:12px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--branco);border-radius:999px;padding:5px 9px;color:var(--suave);z-index:1}
.selo.pouco{color:var(--barro-esc)}
.info{padding-top:14px;display:flex;flex-direction:column;gap:3px;flex:1}
.info .k{color:var(--suave);letter-spacing:.12em;font-size:10px}
.info h3{font:400 26px/1.1 var(--serifa)}
.info .det{font:400 13px var(--mono);color:var(--suave)}
.info .fim{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:12px}
.info .preco{font:400 24px var(--serifa)}
.juntar{border:1px solid var(--tinta);border-radius:999px;padding:9px 15px;font:500 13px var(--texto);white-space:nowrap;transition:background .2s,color .2s}
.juntar:hover,.juntar.feito{background:var(--tinta);color:var(--papel)}
.juntar.reserva{border-style:dashed}
.nota-unica{margin-top:28px;font:400 13px var(--mono);color:var(--suave);max-width:640px}

/* Os oleiros */
.oleiros{background:var(--tinta);color:var(--papel)}
.oleiros .k{color:#e09a72}
.oleiros .titulo em{color:#e09a72}
.oleiros .texto{color:#b9ad9e}
.oleiros-grelha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,3vw,44px);margin-top:clamp(36px,5vw,60px);align-items:start}
.oleiro{border-top:1px solid rgba(239,231,218,.18);padding-top:22px;display:grid;gap:10px}
.oleiro .marca-pe{width:74px;height:74px;color:#e09a72}
.oleiro h3{font:400 34px/1.05 var(--serifa)}
.oleiro .onde{font:400 13px var(--mono);color:#b9ad9e}
.oleiro p{color:#cfc4b6;font-size:15px;max-width:420px}
.fornada{margin-top:6px;display:flex;flex-direction:column;gap:2px;background:rgba(239,231,218,.06);border-radius:6px;padding:14px 16px}
.fornada span{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#b9ad9e}
.fornada b{font:400 22px var(--serifa);color:var(--papel)}
.fornada small{color:#b9ad9e;font-size:13px}
.mapa{border-top:1px solid rgba(239,231,218,.18);padding-top:22px}
.mapa svg{width:100%;height:auto;display:block}
.mapa p{font:400 12px var(--mono);color:#b9ad9e;margin-top:8px}

/* Por medida */
.medida{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.palco-3d{position:relative;aspect-ratio:1;border-radius:6px;background:radial-gradient(ellipse at 50% 40%,var(--branco),var(--papel-2) 70%);overflow:hidden}
.palco-3d canvas{width:100%;height:100%;display:block}
.palco-3d .rotulo-3d{position:absolute;left:16px;bottom:14px;font:400 12px var(--mono);color:var(--suave)}
.form-medida{display:grid;gap:4px}
.form-medida label,.form-medida .lbl{display:block;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin:18px 0 8px}
.fichas{display:flex;gap:6px;flex-wrap:wrap}
.fichas button{border:1px solid var(--linha);border-radius:999px;padding:8px 13px;font:500 13px var(--texto);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.fichas button[aria-pressed=true]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.fichas i{width:14px;height:14px;border-radius:50%;background:var(--v);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.qtd{display:flex;align-items:center;gap:14px}
.qtd button{width:38px;height:38px;border-radius:50%;border:1px solid var(--linha);font-size:18px}
.qtd output{font:500 20px var(--mono);min-width:2.4em;text-align:center}
.form-medida input{width:100%;border:0;border-bottom:1px solid var(--linha);background:none;padding:10px 0;font-size:16px}
.form-medida input:focus{outline:none;border-color:var(--tinta)}
.resumo{margin-top:24px;background:var(--branco);border-radius:6px;padding:20px 22px;display:grid;gap:8px}
.resumo .linha{display:flex;justify-content:space-between;gap:16px;font:400 14px var(--mono);color:var(--suave)}
.resumo .linha b{color:var(--tinta);font-weight:500;text-align:right}
.resumo .total b{font:400 26px var(--serifa)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border-radius:999px;padding:14px 22px;font:500 15px var(--texto);background:var(--tinta);color:var(--papel);margin-top:16px;transition:background .2s}
.btn:hover{background:var(--barro-esc)}
.btn-claro{background:var(--papel);color:var(--tinta)}
.btn-claro:hover{background:#fff}

/* Bom saber */
.saber{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,36px);margin-top:clamp(32px,4vw,48px);list-style:none}
.saber li{border-top:1px solid var(--linha);padding-top:14px}
.saber b{display:block;font:400 22px/1.15 var(--serifa);margin-bottom:6px}
.saber span{color:var(--suave);font-size:14px}

/* Visitar */
.visitar-grelha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,56px)}
.visitar-grelha h3{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--barro);margin-bottom:12px}
address{font-style:normal;font-size:18px;line-height:1.5}
.ligacao{display:inline-block;margin-top:12px;border-bottom:1px solid currentColor;color:var(--barro-esc)}
.horario{list-style:none;display:grid;gap:6px}
.horario li{display:flex;justify-content:space-between;gap:20px;color:var(--suave)}
.horario li.hoje{color:var(--tinta);font-weight:500}
.estado{display:inline-flex;align-items:center;gap:10px;font:500 13px var(--mono);margin-top:14px;color:var(--suave)}
.estado i{width:9px;height:9px;border-radius:50%;background:#9a8f80}
.estado.aberto{color:var(--verde)}
.estado.aberto i{background:#5fae6e;box-shadow:0 0 0 4px rgba(95,174,110,.2)}
.contactos{display:flex;flex-direction:column;gap:8px;font-size:18px}
.contactos a{align-self:flex-start;border-bottom:1px solid transparent}
.contactos a:hover{border-color:currentColor}

/* Rodapé */
.rodape{background:var(--tinta);color:var(--papel);padding:clamp(70px,10vw,120px) var(--margem) 26px}
.rodape h2{font:400 clamp(2.4rem,5.6vw,5rem)/1 var(--serifa);max-width:1000px}
.rodape h2 em{font-style:normal;color:#e09a72}
.rodape-linha{margin-top:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rodape-dados{display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;font-size:15px;color:rgba(239,231,218,.75)}
.rodape-dados b{display:block;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,231,218,.45);margin-bottom:6px}
.rodape-pe{margin-top:56px;padding-top:18px;border-top:1px solid rgba(239,231,218,.14);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:rgba(239,231,218,.5)}
.rodape-pe a{color:rgba(239,231,218,.75)}
.rodape-demo a{text-decoration:underline}

/* Cesto */
.painel{position:fixed;inset:0;z-index:60;pointer-events:none}
.painel::before{content:"";position:absolute;inset:0;background:rgba(29,25,21,.35);opacity:0;transition:opacity .35s}
.painel .gaveta{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:var(--branco);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:24px 24px 22px}
.painel.aberto{pointer-events:auto}
.painel.aberto::before{opacity:1}
.painel.aberto .gaveta{transform:none}
.gaveta header{display:flex;justify-content:space-between;align-items:center}
.gaveta h2{font:400 30px var(--serifa)}
.fechar{width:40px;height:40px;border-radius:50%;border:1px solid var(--linha);font-size:18px}
.linhas-cesto{flex:1;overflow:auto;margin-top:16px;border-top:1px solid var(--linha)}
.lc{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linha)}
.lc img,.lc .ph{width:56px;height:56px;border-radius:4px;background:var(--papel-2);object-fit:contain}
.lc b{display:block;font-weight:500}
.lc small{color:var(--suave);font:400 12px var(--mono)}
.lc .q{display:flex;align-items:center;gap:8px;font:500 13px var(--mono)}
.lc .q button{width:26px;height:26px;border-radius:50%;border:1px solid var(--linha)}
.cesto-vazio{color:var(--suave);padding:24px 0}
.entrega{display:grid;gap:6px;margin-top:14px}
.entrega label{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.entrega small{display:block;color:var(--suave);font-size:12px}
.soma{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font:400 14px var(--mono);color:var(--suave)}
.soma b{font:400 28px var(--serifa);color:var(--tinta)}
.gaveta .btn{width:100%}
.gaveta .nota{font-size:12px;color:var(--suave);margin-top:10px;text-align:center}

@media(max-width:960px){
  .oleiros-grelha{grid-template-columns:minmax(0,1fr)}
  .medida{grid-template-columns:minmax(0,1fr)}
  .palco-3d{aspect-ratio:4/3}
  .saber{grid-template-columns:repeat(2,minmax(0,1fr))}
  .visitar-grelha{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .montra{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .info h3{font-size:20px}
  .info .det{font-size:11px}
  .info .fim{flex-direction:column;align-items:flex-start;gap:8px}
  .info .preco{font-size:20px}
  .juntar{padding:8px 12px;font-size:12px}
  .selo{left:8px;top:8px;font-size:9px;padding:4px 7px}
}
@media(max-width:460px){.saber{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .revela{opacity:1;transform:none;transition:none}
  .dica i{animation:none}
}