/* Site de vendas da Recife Estofados. Visual aprovado pelo Neto em 05/11/2026 (protótipo showroom). */
/* Layout: showroom — cenas grandes de ambiente, grade de produtos com respiro, página de produto em duas colunas */
:root{
  --bg:#f5f4f0; --surface:#ffffff; --fg:#22261f; --muted:#62675d; --line:#dcdad2;
  --accent:#2f4a3a; --accent-fg:#ffffff; --wood:#a7764a; --soft:#e7e9e1;
  --wall:#e9e4da; --floor:#c9ab86; --shadow:rgba(30,35,28,.10);
  --display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171a16; --surface:#21251f; --fg:#ecebe5; --muted:#a3a89c; --line:#353a32;
  --accent:#9cc3a8; --accent-fg:#14231a; --wood:#c89a6c; --soft:#262b24;
  --wall:#2b2f28; --floor:#5b4a37; --shadow:rgba(0,0,0,.35); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171a16; --surface:#21251f; --fg:#ecebe5; --muted:#a3a89c; --line:#353a32;
  --accent:#9cc3a8; --accent-fg:#14231a; --wood:#c89a6c; --soft:#262b24;
  --wall:#2b2f28; --floor:#5b4a37; --shadow:rgba(0,0,0,.35); color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1}
a{color:inherit}
button,.btn{font:inherit}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:24px;padding-block:14px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:700;font-size:22px;text-decoration:none;letter-spacing:-.01em}
.logo span{color:var(--wood)}
nav.menu{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
nav.menu a{text-decoration:none;color:var(--muted);font-weight:500}
nav.menu a[aria-current="page"],nav.menu a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 20px;text-decoration:none;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--accent-fg)}
.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--fg)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--wood);outline-offset:2px}
section{padding-block:56px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted);font-weight:600}
/* hero */
.hero{padding-block:28px 40px}
.hero-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,62px);letter-spacing:-.02em;margin-block:10px 16px}
.hero p{color:var(--muted);max-width:44ch;font-size:18px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.scene{border-radius:6px;overflow:hidden;background:var(--wall);aspect-ratio:16/11;max-width:100%}
.scene svg{display:block;width:100%;height:100%}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.facts b{display:block;font-family:var(--display);font-size:22px}
.facts span{color:var(--muted);font-size:14px}
/* ambientes */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.4vw,38px)}
.amb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.amb{position:relative;text-decoration:none;display:block;border-radius:6px;overflow:hidden;aspect-ratio:3/4;background:var(--wall)}
.amb svg{width:100%;height:100%;display:block}
.amb .lbl{position:absolute;left:12px;bottom:12px;background:var(--surface);padding:6px 12px;border-radius:999px;font-weight:600;font-size:14px}
/* produtos */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:10px;min-width:0}
.card .ph{background:var(--soft);border-radius:6px;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.card .ph svg{width:84%;height:auto}
.card h3{font-size:19px;font-weight:600}
.card .meta{color:var(--muted);font-size:14px}
.card .price{font-weight:600;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
/* fábrica */
.factory{background:var(--surface);border-block:1px solid var(--line)}
.factory .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.steps{display:grid;gap:18px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:12px;counter-increment:s}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:700;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--soft)}
.steps b{display:block}
.steps span{color:var(--muted);font-size:15px}
/* depoimentos */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{margin:0;padding:22px;border:1px solid var(--line);border-radius:6px;background:var(--surface);display:flex;flex-direction:column;gap:14px}
.quote p{margin:0}
.quote footer{color:var(--muted);font-size:14px}
/* catálogo */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:500}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.flabel{color:var(--muted);font-size:13px;align-self:center;margin-right:4px}
/* produto */
.crumbs{color:var(--muted);font-size:14px;margin-bottom:18px}
.crumbs a{color:var(--muted)}
.pgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
.gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}
.gallery .main{background:var(--soft);border-radius:6px;aspect-ratio:4/3;display:grid;place-items:center}
.gallery .main svg{width:86%;height:auto}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.thumbs button{min-width:0;background:var(--soft);border:2px solid transparent;border-radius:6px;aspect-ratio:1;padding:6px;cursor:pointer}
.thumbs button[aria-pressed="true"]{border-color:var(--accent)}
.thumbs svg{width:100%;height:100%}
.pinfo h1{font-size:clamp(30px,4vw,44px);margin-block:6px 10px}
.pinfo .lead{color:var(--muted)}
.pinfo .bigprice{font-family:var(--display);font-size:28px;margin-block:18px 4px;font-variant-numeric:tabular-nums}
.opt{margin-top:20px}
.opt .t{font-weight:600;font-size:14px;margin-bottom:8px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer}
.sw[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:2px}
.specs{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
.specs td{padding:9px 0;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--muted);width:42%}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.note{font-size:13px;color:var(--muted);margin-top:8px}
form.orc{display:grid;gap:12px;margin-top:28px;padding:20px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
form.orc label{display:grid;gap:4px;font-size:14px;font-weight:500}
form.orc input,form.orc textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
.ok{color:var(--accent);font-weight:600}
/* contato / rodapé */
.contact .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact h3{font-size:16px;margin-bottom:6px}
.contact p{margin:0;color:var(--muted)}
footer.site{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:14px}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wa-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:6;box-shadow:0 8px 24px var(--shadow)}
@media (max-width:860px){
  .hero-grid,.pgrid,.factory .cols{grid-template-columns:1fr}
  .gallery{position:static}
  .hero .scene{order:-1}
  .amb-grid{grid-template-columns:repeat(2,1fr)}
  .grid,.quotes,.contact .cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:540px){
  .grid,.quotes,.contact .cols{grid-template-columns:1fr}
  nav.menu{margin-left:0;width:100%;gap:14px;font-size:15px}
  header.top .wrap{gap:8px;padding-block:10px}
  .facts{gap:10px}
  .facts b{font-size:17px}
  .facts span{font-size:13px}
}
@media (prefers-reduced-motion:no-preference){.card .ph svg,.amb svg{transition:transform .4s ease}.card:hover .ph svg,.amb:hover svg{transform:scale(1.04)}}

/* Fotos reais (vindas do cadastro). Sem foto, aparece o desenho do tipo de produto. */
.foto{width:100%;height:100%;object-fit:cover;display:block}
.card .ph .foto{width:100%}
.gallery .main{overflow:hidden}
.gallery .main .foto,.thumbs .foto{width:100%;height:100%}
.thumbs button{padding:0;overflow:hidden}
.amb .foto,.scene .foto{width:100%;height:100%}
.carregando{color:var(--muted);padding-block:80px;text-align:center}
.mapa{margin-top:10px;display:inline-block}
.sw{position:relative}
.sw-nome{font-size:13px;color:var(--muted);margin-top:8px}
.isca{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}