/* ===========================================================
   Art Estofados — folha de estilo única do site
   Paleta tirada do couro TC640 do próprio mostruário.
   =========================================================== */

:root{
  --bg:#F5F2EC; --bg2:#EDE7DD; --ink:#26241F; --ink2:#5E5950; --line:#DCD5C8;
  --accent:#A8692F; --accent2:#8A5324; --claro:#F3D9BE; --escuro:#14110C;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.005em}
.wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:500;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;
  border:1px solid var(--ink);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;transition:.3s;background:none;cursor:pointer;font-family:inherit;color:inherit}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.light{border-color:rgba(255,255,255,.75);color:#fff}
.btn.light:hover{background:#fff;color:var(--ink)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent2);border-color:var(--accent2)}
.link{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid currentColor;padding-bottom:4px;white-space:nowrap;display:inline-block}
.sec{padding:110px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:54px}
.sec-head h2{font-size:clamp(34px,4vw,54px);font-weight:400;margin-top:12px}
.sec-head p{max-width:44ch;color:var(--ink2)}
/* nasce visível; o JS só esconde para animar quando há suporte, para a página
   nunca ficar em branco se o script falhar */
body.anima .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
body.anima .rv.in{opacity:1;transform:none}
.pular{position:absolute;left:-9999px}
.pular:focus{left:12px;top:12px;z-index:99;background:#fff;color:var(--ink);padding:10px 16px}

/* ---------- CABEÇALHO ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;padding:22px 0;transition:.4s;color:#fff}
header::before{content:"";position:absolute;inset:0 0 auto 0;height:190px;
  background:linear-gradient(rgba(12,9,6,.55),transparent);pointer-events:none;z-index:-1}
header.claro,header.scrolled{color:var(--ink)}
header.claro::before,header.scrolled::before{display:none}
header.claro{background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
header .logo img{height:58px;width:auto;transition:.4s}
header.claro .logo img,header.scrolled .logo img{filter:invert(1) brightness(.15)}
header nav{display:flex;gap:34px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
header nav a{position:relative;padding:6px 0}
header nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:.3s}
header nav a:hover::after,header nav a[aria-current]::after{width:100%}
header .cta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  border:1px solid rgba(255,255,255,.6);padding:10px 18px}
header.claro .cta,header.scrolled .cta{border-color:var(--ink)}
header.scrolled{background:rgba(245,242,236,.94);backdrop-filter:blur(10px);padding:14px 0;border-bottom:1px solid var(--line)}
header.scrolled .logo img{height:46px}

.burger{display:none;width:30px;height:20px;position:relative;cursor:pointer;background:none;border:0;padding:0;color:inherit}
.burger i,.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:1.6px;background:currentColor;transition:.35s}
.burger::before{top:0}.burger i{top:9px}.burger::after{bottom:0}
body.menu-aberto .burger::before{top:9px;transform:rotate(45deg)}
body.menu-aberto .burger i{opacity:0}
body.menu-aberto .burger::after{bottom:9px;transform:rotate(-45deg)}
.painel{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--bg);display:flex;
  flex-direction:column;justify-content:center;padding:100px 24px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s,transform .35s,visibility .35s}
body.menu-aberto .painel{opacity:1;visibility:visible;transform:none}
body.menu-aberto{overflow:hidden}
.painel>a{font-family:var(--serif);font-size:34px;padding:11px 0;border-bottom:1px solid #3B3832}
.painel>a em{font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#8A8376;display:block;font-family:var(--sans);margin-bottom:2px}
.painel .pe{margin-top:34px;display:grid;gap:12px;font-size:14px;color:#BDB5A6}
.painel .pe a{font-family:var(--sans);font-size:14px;border:0;padding:0;color:#BDB5A6}

/* ---------- CAPA DA HOME ---------- */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;color:#fff;background:var(--escuro)}
.hero .foto{position:absolute;inset:0;display:block}
.hero .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  transform:scale(1.05);animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
/* Capa B: texto à direita. O escurecimento vem da direita e deixa a poltrona limpa à esquerda. */
.hero .foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(255deg,rgba(14,11,8,.88) 0%,rgba(14,11,8,.56) 40%,rgba(14,11,8,.08) 70%)}
.hero .conteudo{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-end;text-align:right}
.hero .eyebrow{color:var(--claro)}
.hero h1{font-size:clamp(40px,6vw,82px);max-width:13ch;margin:16px 0 20px auto;font-weight:400}
.hero h1 em{font-style:italic;color:var(--claro)}
.hero p{max-width:42ch;font-size:16px;opacity:.88;margin:0 0 30px auto}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
/* ficam sobre a parte clara da foto, por isso a sombra */
.hero .selo{position:absolute;left:0;right:0;bottom:64px;z-index:2;text-align:left;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.85;line-height:2;
  text-shadow:0 1px 14px rgba(10,7,4,.9),0 0 3px rgba(10,7,4,.7)}
.hero .scroll{position:absolute;left:0;right:0;bottom:64px;z-index:2;text-align:right;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;opacity:.75;text-shadow:0 1px 14px rgba(10,7,4,.9)}

/* ---------- CAPA DAS PÁGINAS INTERNAS ---------- */
.capa{padding:190px 0 60px;border-bottom:1px solid var(--line);background:var(--bg)}
.capa h1{font-size:clamp(40px,5.4vw,72px);font-weight:400;margin:14px 0 0}
.capa p{max-width:56ch;color:var(--ink2);margin-top:16px}
.trilha{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.trilha a:hover{color:var(--accent)}

/* ---------- FAIXA DE LINHAS ---------- */
.linhas{padding:28px 0;border-bottom:1px solid var(--line);background:var(--bg)}
.linhas ul{display:flex;justify-content:space-between;gap:12px;list-style:none;overflow-x:auto}
.linhas li a{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:120px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink2);transition:.3s}
.linhas li a:hover{color:var(--accent)}
.linhas li img{height:64px;width:auto;object-fit:contain;filter:grayscale(1) contrast(.9);transition:.3s}
.linhas li a:hover img{filter:none;transform:translateY(-3px)}

/* ---------- GRADE DE PRODUTOS ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.grid.tres{grid-template-columns:repeat(3,1fr)}
.card{position:relative;display:block}
/* fundo levemente mais quente que a página: produtos claros (cremes) não somem */
.card .ph{position:relative;aspect-ratio:1/1;background:#EFEAE1;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.card .ph img{width:86%;height:86%;object-fit:contain;transition:opacity .5s,transform .6s}
.card .ph img.amb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06)}
.card:hover .ph img.cut{opacity:0}
.card:hover .ph img.amb{opacity:1;transform:scale(1)}
.card .tag{position:absolute;top:14px;left:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--bg);padding:5px 9px;color:var(--ink2)}
.card .novo{position:absolute;top:14px;right:14px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:5px 9px}
.card h3{font-size:24px;margin:16px 0 2px;font-weight:500}
.card small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}

/* filtros da página de produtos */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filtros button{font-family:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding:11px 18px;border:1px solid var(--line);background:none;color:var(--ink2);cursor:pointer;transition:.25s}
.filtros button:hover{border-color:var(--ink);color:var(--ink)}
.filtros button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.card[hidden]{display:none}
.vazio{padding:60px 0;color:var(--ink2)}

/* ---------- PÁGINA DO PRODUTO ---------- */
.prod{padding:150px 0 0}
.prod .topo{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:start}
.prod .galeria{display:grid;gap:14px}
.prod .principal{background:#EFEAE1;border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.prod .principal img{width:100%;height:100%;object-fit:contain;padding:22px}
.prod .principal img.cheia{object-fit:cover;padding:0}
.prod .miniaturas{display:flex;gap:10px;flex-wrap:wrap}
.prod .miniaturas button{width:84px;aspect-ratio:1/1;border:1px solid var(--line);background:#fff;
  padding:0;cursor:pointer;overflow:hidden;transition:.25s}
.prod .miniaturas button[aria-current="true"]{border-color:var(--ink)}
.prod .miniaturas img{width:100%;height:100%;object-fit:cover}
.prod .info h1{font-size:clamp(38px,4.4vw,60px);font-weight:400;margin:12px 0 8px}
.prod .info .med{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:26px}
.prod .acoes{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 34px}
.ficha{border-top:1px solid var(--line)}
.ficha h2{font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-family:var(--sans);
  font-weight:600;padding:22px 0 12px;color:var(--ink)}
.ficha ul{list-style:none;display:grid;gap:9px;padding-bottom:22px;font-size:15px;color:var(--ink2)}
.ficha li{padding-left:20px;position:relative}
.ficha li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--accent)}
.ficha li b{color:var(--ink);font-weight:500}
.aviso{background:var(--bg2);border-left:2px solid var(--accent);padding:14px 18px;font-size:14px;color:var(--ink2);margin:22px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:22px}
.chips a{font-size:11px;letter-spacing:.15em;border:1px solid var(--line);padding:7px 12px;color:var(--ink2);transition:.25s}
.chips a:hover{border-color:var(--accent);color:var(--accent)}
.desenhos{display:flex;gap:20px;flex-wrap:wrap;padding:0 0 26px}
.desenhos img{max-width:300px;background:#fff;border:1px solid var(--line);padding:12px}

/* ---------- TECIDOS ---------- */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.sw{position:relative;overflow:hidden;background:#fff;aspect-ratio:4/5;display:block}
.sw img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.sw:hover img{transform:scale(1.06)}
.sw span{position:absolute;left:0;right:0;bottom:0;padding:9px 11px;font-size:11px;letter-spacing:.14em;
  background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;display:flex;justify-content:space-between}
.grupo{margin-bottom:56px}
.grupo h2{font-size:26px;font-weight:400;margin-bottom:6px}
.grupo p{color:var(--ink2);margin-bottom:22px;font-size:15px}

/* ---------- BLOCO ESCURO / FÁBRICA ---------- */
.fabrica{background:var(--ink);color:var(--bg);overflow:hidden}
.fabrica .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.fabrica .img{height:100%;min-height:560px}
.fabrica .img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.fabrica .txt{padding:90px 0}
.fabrica h2{font-size:clamp(36px,4.2vw,58px);font-weight:400;margin:14px 0 24px}
.fabrica p{color:#CFC8BB;max-width:52ch;margin-bottom:18px}
.nums{display:flex;gap:48px;margin:40px 0;flex-wrap:wrap}
.nums b{display:block;font-family:var(--serif);font-size:54px;font-weight:400;line-height:1;color:var(--claro)}
.nums span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#A9A193}

/* ---------- BANNER ---------- */
.banner{position:relative;height:70vh;min-height:480px;overflow:hidden;color:#fff;display:grid;place-items:center;text-align:center}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:rgba(20,16,12,.42)}
.banner div{position:relative;z-index:2;padding:0 24px}
.banner h2{font-size:clamp(36px,5vw,70px);font-weight:400;margin:12px 0 26px}
.banner h2 em{font-style:italic;color:var(--claro)}
.banner .eyebrow{color:#fff}

/* ---------- LOJISTA / FORMULÁRIO ---------- */
.lojista{background:var(--bg2)}
.lojista .wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.lojista h2{font-size:clamp(36px,4.2vw,58px);font-weight:400;margin:14px 0 20px}
.lojista p{color:var(--ink2);max-width:46ch;margin-bottom:26px}
.lojista ul{list-style:none;margin:0 0 30px;display:grid;gap:10px}
.lojista li{padding-left:22px;position:relative}
.lojista li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--accent)}
form{background:#fff;padding:40px;border:1px solid var(--line);display:grid;gap:14px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);display:grid;gap:6px}
form input,form textarea,form select{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);
  background:var(--bg);outline:none;width:100%;color:var(--ink)}
form input:focus,form textarea:focus,form select:focus{border-color:var(--accent)}
form textarea{min-height:100px;resize:vertical}
form .obs{color:var(--ink2);font-size:12px}

/* ---------- CONTATO ---------- */
.contato-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:start}
.contato-grid dl{display:grid;gap:26px}
.contato-grid dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.contato-grid dd{font-size:17px}
.mapa{border:1px solid var(--line);aspect-ratio:4/3;width:100%;filter:grayscale(.35)}

/* ---------- RODAPÉ ---------- */
footer{background:var(--ink);color:#BDB5A6;padding:80px 0 30px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px;margin-bottom:60px}
footer h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:500}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:#fff}
footer .logo img{height:64px;margin-bottom:18px}
footer .bottom{border-top:1px solid #3B3832;padding-top:24px;display:flex;justify-content:space-between;
  gap:16px;font-size:12px;color:#7F786C;flex-wrap:wrap}

/* ---------- WHATSAPP ---------- */
.wa{position:fixed;right:24px;bottom:24px;z-index:60;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:.3s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}

/* ===================== TABLET ===================== */
@media (max-width:980px){
  header nav,header .cta{display:none}
  .burger{display:block}
  .grid,.grid.tres{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .fabrica .wrap,.lojista .wrap,.contato-grid,.prod .topo{grid-template-columns:1fr;gap:40px}
  .fabrica .img{min-height:340px}
  .fabrica .txt{padding:60px 0}
  .swatches{grid-template-columns:repeat(4,1fr)}
  footer .cols{grid-template-columns:1fr 1fr;gap:34px}
  .sec{padding:70px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px}
  form{padding:26px}
  form .row{grid-template-columns:1fr}
  .capa{padding:130px 0 44px}
  .prod{padding:120px 0 0}
}

/* ===================== CELULAR ===================== */
@media (max-width:860px){
  .wrap{width:calc(100% - 32px)}

  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;overflow:visible}
  .hero .foto{position:relative;inset:auto;width:100%;aspect-ratio:1/1;overflow:hidden}
  .hero .foto img{object-position:center;animation:none;transform:none}
  .hero .foto::after{background:linear-gradient(transparent 62%,rgba(20,17,12,.55) 86%,var(--escuro) 100%)}
  /* no celular o texto fica no painel escuro, então volta a alinhar à esquerda */
  .hero .conteudo{height:auto;flex:1;background:var(--escuro);padding:26px 0 40px;
    justify-content:flex-start;align-items:stretch;text-align:left}
  .hero h1{font-size:40px;max-width:none;margin:12px 0 14px}
  .hero p{font-size:15px;margin:0 0 24px;opacity:.82}
  .hero .actions{flex-direction:column;gap:10px;justify-content:flex-start}
  .hero .actions .btn{padding:16px 20px}
  .hero .scroll,.hero .selo{display:none}

  header{padding:14px 0}
  header .logo img,header.scrolled .logo img{height:44px}

  .linhas{padding:20px 0}
  .linhas ul{justify-content:flex-start;gap:6px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .linhas ul::-webkit-scrollbar{display:none}
  .linhas li a{min-width:96px;gap:8px;font-size:10px}
  .linhas li img{height:52px}

  .sec{padding:56px 0}
  .sec-head{margin-bottom:30px}
  .sec-head h2,.fabrica h2,.lojista h2,.banner h2,.capa h1{font-size:34px}
  .prod .info h1{font-size:34px}

  .grid,.grid.tres{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .card .ph img.cut{opacity:0}
  .card .ph img.amb{opacity:1;transform:none}
  .card .tag,.card .novo{top:9px;font-size:9px;padding:4px 7px}
  .card .tag{left:9px}.card .novo{right:9px}
  .card h3{font-size:20px;margin:11px 0 1px}
  .card small{font-size:10px}

  .filtros{gap:8px;margin-bottom:30px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:4px}
  .filtros::-webkit-scrollbar{display:none}
  .filtros button{white-space:nowrap;padding:12px 15px;font-size:10px}

  .prod{padding:96px 0 0}
  .prod .principal{aspect-ratio:1/1}
  .prod .miniaturas button{width:64px}
  .desenhos img{max-width:100%}

  .fabrica .img{min-height:260px}
  .fabrica .txt{padding:46px 0}
  .nums{gap:26px;margin:30px 0}
  .nums b{font-size:40px}
  .nums span{font-size:10px}

  .banner{height:auto;min-height:0;padding:80px 0}
  .swatches{grid-template-columns:repeat(3,1fr);gap:10px}
  .sw span{font-size:10px;padding:6px 8px}

  .lojista .wrap{gap:34px}
  form{padding:22px 18px}
  form input,form textarea,form select{font-size:16px} /* 16px evita o zoom do iPhone */

  footer{padding:56px 0 26px}
  footer .cols{grid-template-columns:1fr;gap:30px;margin-bottom:38px}
  footer .bottom{flex-direction:column;gap:10px}
  footer ul{gap:0}
  footer ul li a,footer .bottom a{display:inline-block;padding:11px 0}
  footer ul li{line-height:1.5}

  .wa{right:16px;bottom:16px;width:54px;height:54px}

  /* alvos de toque de pelo menos 44px */
  .burger{width:44px;height:44px;margin-right:-8px}
  .burger i,.burger::before,.burger::after{left:8px;right:8px}
  .burger::before{top:15px}.burger i{top:22px}.burger::after{bottom:15px}
  body.menu-aberto .burger::before{top:22px}
  body.menu-aberto .burger::after{bottom:21px}
  .link{padding:12px 0}
  .painel .pe a{padding:11px 0}
  .chips a{padding:11px 14px}
}

@media (max-width:380px){
  .hero h1{font-size:34px}
  .grid,.grid.tres{gap:20px 12px}
  .card h3{font-size:18px}
  .swatches{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}