/* Do João — folha de estilos
   Paleta tirada das próprias obras: parede branca, papel de livro, tinta, vermelho-sangue do vestido/balão. */
@font-face{font-family:"PP Museum";src:url("/assets/fonts/ppmuseum-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"PP Museum";src:url("/assets/fonts/ppmuseum-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PP Museum";src:url("/assets/fonts/ppmuseum-ultrabold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Mona Sans";src:url("/assets/fonts/monasans-var.woff2") format("woff2-variations"),url("/assets/fonts/monasans-var.woff2") format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}
:root{
  --parede:#F8F6F1;
  --pagina:#FFFFFF;
  --tinta:#1E1B17;
  --grafite:#5E5B55;
  --sangue:#7B2621;
  --linha:#E4E1DA;
  --serif:"PP Museum",Georgia,serif;
  --sans:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --max:1320px;
  --pad:clamp(20px,4vw,56px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--parede);color:var(--tinta);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;background:var(--pagina)}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0 0 .55em;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,4.4vw,4rem)}
.hero h1{font-size:clamp(2.3rem,4vw,3.7rem)}
.quebra{display:block}
h2{font-size:clamp(1.75rem,2.9vw,2.6rem)}
h3{font-size:1.25rem;line-height:1.3}
p{margin:0 0 1em;max-width:62ch}
.lead{font-size:1.15rem;color:var(--grafite);max-width:46ch}
:focus-visible{outline:2px solid var(--sangue);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(72px,10vw,140px) 0}
.ph{background:#FFF1B8;color:var(--tinta);padding:0 .2em;border-radius:2px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 1.6em;border-radius:999px;font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid var(--tinta);transition:background .2s,color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-tinta:hover{background:#000}
.btn-linha{background:transparent;color:var(--tinta)}
.btn-linha:hover{background:var(--tinta);color:#fff}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.link{font-weight:600;text-underline-offset:4px}

/* cabeçalho */
.topo{position:sticky;top:0;z-index:40;background:rgba(248,246,241,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.topo.rolou{border-color:var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.marca{font:800 1.55rem/1 var(--serif);text-decoration:none;letter-spacing:-.01em}
.nav{display:flex;gap:28px;font-size:.95rem}
.nav a{text-decoration:none;color:var(--grafite)}
.nav a:hover{color:var(--tinta)}
.topo .btn{min-height:42px;padding:0 1.1em;font-size:.92rem}
@media (max-width:900px){.nav{display:none}}
@media (max-width:520px){.topo .btn span{display:none}.topo .btn{width:44px;padding:0}}

/* abertura */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(82vh,800px)}
.hero-texto{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(28px,4vw,72px) 56px max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
.hero-texto .lead{margin-bottom:28px}
.fatos{list-style:none;padding:22px 0 0;margin:36px 0 0;border-top:1px solid var(--linha);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px;font-size:.85rem;color:var(--grafite)}
.fatos strong{display:block;font:600 1.1rem/1.3 var(--serif);color:var(--tinta)}
.prova{margin:22px 0 0;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--grafite)}
.prova > span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sangue);margin-right:10px;vertical-align:middle}
.hero-foto{position:relative;margin:0;min-height:420px}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-foto{order:-1;min-height:0;aspect-ratio:5/4}
  .hero-texto{padding:28px var(--pad) 36px}
  .fatos{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
  .fatos strong{font-size:.95rem}
}

/* feed de obras */
.cab-sec{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.cab-sec p{margin:0;color:var(--grafite)}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;list-style:none;padding:0;margin:0}
.feed button{all:unset;display:block;position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--pagina)}
.feed button:focus-visible{outline:2px solid var(--sangue);outline-offset:2px}
.feed img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.feed .rotulo{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;color:#fff;font:400 1.1rem/1.2 var(--serif);background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .3s}
.feed button:hover img{transform:scale(1.03)}
.feed button:hover .rotulo,.feed button:focus-visible .rotulo{opacity:1}
@media (max-width:640px){.feed{gap:3px}.feed .rotulo{display:none}}
.feed-rodape{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:28px}
.feed-rodape p{margin:0;color:var(--grafite)}

/* visualizador de obra */
dialog.obra{border:0;padding:0;max-width:min(1100px,94vw);width:100%;background:var(--parede);color:var(--tinta)}
dialog.obra::backdrop{background:rgba(20,18,15,.82)}
.obra-grade{display:grid;grid-template-columns:1.25fr 1fr}
.obra-grade img{width:100%;height:100%;max-height:86vh;object-fit:cover}
.obra-info{padding:40px 36px;display:flex;flex-direction:column;gap:6px}
.obra-info h3{font-size:1.7rem;margin:0}
.obra-info .btn{margin-top:auto}
.fechar{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:var(--parede);font-size:1.6rem;line-height:1;cursor:pointer}
@media (max-width:760px){.obra-grade{grid-template-columns:1fr}.obra-grade img{max-height:58vh}.obra-info{padding:24px}}

/* processo */
.processo{background:var(--pagina)}
.processo .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.processo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.processo p{color:var(--grafite)}
.passos{list-style:none;padding:0;margin:32px 0 0;counter-reset:p}
.passos li{counter-increment:p;display:grid;grid-template-columns:40px 1fr;gap:2px 14px;padding:20px 0;border-top:1px solid var(--linha)}
.passos li::before{content:counter(p);grid-row:span 2;font:400 1.4rem/1.2 var(--serif);color:var(--sangue)}
.passos h3{margin:0;font-size:1.45rem}
.passos p{margin:0;color:var(--grafite)}
@media (max-width:900px){.processo .grid{grid-template-columns:1fr}}

/* tamanhos */
.medidas{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.parede{background:#F3F2EF;border:1px solid var(--linha)}
.parede svg{display:block;width:100%;height:auto}
.opcoes{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid var(--linha)}
.opcoes button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--linha);cursor:pointer;font-size:1.05rem}
.opcoes button span:first-child{font:400 1.15rem/1.3 var(--serif)}
.opcoes small{display:block;font:400 .82rem var(--sans);color:var(--grafite)}
.opcoes button[aria-pressed="true"]{color:var(--sangue)}
.opcoes button[aria-pressed="true"]{background:var(--pagina);box-shadow:inset 3px 0 0 var(--sangue);padding-left:14px}
.opcoes button:focus-visible{outline:2px solid var(--sangue);outline-offset:-2px}
.nota{font-size:.92rem;color:var(--grafite)}
@media (max-width:900px){.medidas{grid-template-columns:1fr}}

/* encomenda e artista */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.dupla img{width:100%;aspect-ratio:4/5;object-fit:cover}
.dupla.inverte figure{order:2}
.dupla figure{margin:0}
.dupla figcaption{font-size:.85rem;color:var(--grafite);margin-top:10px}
@media (max-width:900px){.dupla{grid-template-columns:1fr}.dupla.inverte figure{order:0}}
.artista{background:var(--pagina)}
.assinatura{font-weight:600;margin-top:8px}

/* perguntas */
.perguntas{max-width:880px}
.perguntas details{border-bottom:1px solid var(--linha)}
.perguntas summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font:400 1.2rem/1.4 var(--serif)}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";position:absolute;right:6px;top:20px;font:300 1.8rem/1 var(--sans);transition:transform .2s}
.perguntas details[open] summary::after{transform:rotate(45deg)}
.perguntas details p{color:var(--grafite);padding-bottom:12px}

/* contato */
.contato{background:var(--pagina);border-top:1px solid var(--linha)}
.contato .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px)}
.dados{font-style:normal;color:var(--grafite);line-height:1.8;margin-top:28px}
form .campo{margin-bottom:18px}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
label small{font-weight:400;color:var(--grafite)}
input,select,textarea{width:100%;font:inherit;color:var(--tinta);background:var(--parede);border:1px solid var(--linha);border-radius:10px;padding:14px 14px;min-height:52px}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tinta);outline-offset:0;border-color:var(--tinta)}
[aria-invalid="true"]{border-color:var(--sangue);background:#FBF1EF}
.erro{color:var(--sangue);font-size:.88rem;margin:6px 0 0;display:none}
[aria-invalid="true"]+.erro{display:block}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-aviso{font-size:.85rem;color:var(--grafite);margin-top:12px}
.form-status{margin-top:14px;font-weight:600}
@media (max-width:900px){.contato .grid{grid-template-columns:1fr}}
@media (max-width:480px){.duas{grid-template-columns:1fr}}

/* rodapé */
.rodape{padding:56px 0 120px;font-size:.92rem;color:var(--grafite)}
.rodape .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.rodape a{text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape ul{list-style:none;padding:0;margin:0;line-height:2}
@media (max-width:760px){.rodape .wrap{grid-template-columns:1fr}}

/* WhatsApp fixo */
.wa-barra{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(248,246,241,.96);border-top:1px solid var(--linha);display:none}
.wa-barra .btn{width:100%}
.wa-flutua{position:fixed;right:24px;bottom:24px;z-index:50;width:60px;height:60px;border-radius:50%;background:var(--tinta);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transform:translateY(120px);transition:transform .35s ease}
.wa-flutua.visivel{transform:none}
.wa-flutua svg{width:28px;height:28px}
@media (max-width:900px){.wa-barra{display:block}.wa-flutua{display:none}}

/* cookies */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;background:var(--tinta);color:#EFE9DE;padding:18px 20px;border-radius:14px;font-size:.9rem;display:none;box-shadow:0 20px 40px -12px rgba(0,0,0,.5)}
.cookies.aberto{display:block}
.cookies p{margin:0 0 12px}
.cookies a{color:#fff}
.cookies .btns{display:flex;gap:10px}
.cookies button{font:600 .9rem var(--sans);border-radius:999px;min-height:40px;padding:0 18px;cursor:pointer;border:1px solid #EFE9DE}
.cookies .ok{background:#EFE9DE;color:var(--tinta)}
.cookies .nao{background:transparent;color:#EFE9DE}
@media (min-width:901px){.cookies{left:auto;right:24px;max-width:420px}}
@media (max-width:900px){.cookies{bottom:auto;top:calc(76px + env(safe-area-inset-top,0px));left:10px;right:10px;padding:12px 14px;font-size:.8rem;display:none;gap:10px;align-items:center}.cookies.aberto{display:flex}.cookies p{margin:0;flex:1}.cookies button{min-height:36px;padding:0 12px;font-size:.8rem}.cookies .btns{flex-direction:column;gap:6px}}

/* páginas de texto (privacidade, termos, obrigado, 404) */
.texto{max-width:760px;margin:0 auto;padding:clamp(48px,8vw,110px) var(--pad)}
.texto h2{font-size:1.8rem;margin-top:1.6em}
.centro{text-align:center}
.centro p{margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


.formatos{display:inline-flex;border:1px solid var(--linha);border-radius:999px;padding:4px;margin:0 0 20px;background:var(--pagina)}
.formatos button{all:unset;cursor:pointer;padding:9px 18px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--grafite)}
.formatos button[aria-pressed="true"]{background:var(--tinta);color:#fff}
.formatos button:focus-visible{outline:2px solid var(--sangue)}

/* prova social */
.prova-sec{background:var(--pagina);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:clamp(56px,8vw,96px) 0}
.prova-grade{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.prova-num{display:flex;flex-direction:column;gap:10px}
.prova-num .grande{font:800 clamp(3.5rem,8vw,6.5rem)/1 var(--serif);letter-spacing:-.02em;margin:0}
.prova-num h2{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:400;max-width:18ch;margin:0}
.prova-casacor{border-left:1px solid var(--linha);padding-left:clamp(24px,4vw,56px)}
.prova-casacor img{width:200px;height:auto;background:none;margin-bottom:18px}
.prova-casacor p{font-size:1.1rem;font-weight:500;margin:0;max-width:34ch}
@media (max-width:900px){.prova-grade{grid-template-columns:1fr}.prova-casacor{border-left:0;padding-left:0;border-top:1px solid var(--linha);padding-top:28px}}
.casacor-txt{display:block;font:800 1.9rem/1 var(--serif);letter-spacing:.02em;margin-bottom:18px}
[hidden]{display:none!important}
.marca{display:inline-block;line-height:0}
.marca img{height:46px;width:auto;background:none}
.marca-rodape{margin:0 0 16px}
.marca-rodape img{height:52px}
@media (max-width:520px){.marca img{height:38px}}