/* Tramas Home Garden — pagina individual de peca (/catalogo/<slug>).
   Gerado uma vez, compartilhado pelas 96 paginas. Mesmas variaveis do resto do site. */
:root{
  --terracota:#B5552E;--terracota-deep:#8A3F20;--terracota-text:#9B4524;
  --verde:#5A6B53;--linho:#E9E1D4;--areia:#F1EADD;--off-white:#FAF6EF;
  --carvao:#26221E;--text:#322D27;--muted:#6A6157;--line:#DDD2C2;
  --shadow:0 18px 50px -20px rgba(38,34,30,.35);--r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--text);background:var(--off-white);line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(181,85,46,.14)}
h1,h2,h3,.serif{font-family:'Bodoni Moda',Georgia,serif;font-optical-sizing:none;font-weight:700;line-height:1.06;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1240px,92vw);margin-inline:auto}
.eyebrow{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--terracota-text);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--terracota)}
:focus-visible{outline:2px solid var(--terracota);outline-offset:3px;border-radius:4px}

.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer;border:0;font-family:'Manrope',sans-serif;transition:transform .25s ease,box-shadow .25s ease}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--terracota);color:#fff;box-shadow:0 12px 28px -10px rgba(181,85,46,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(181,85,46,.8)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--terracota);color:var(--terracota-text)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1rem}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(250,246,239,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:.8rem 0}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;height:46px}
.brand img{height:46px;width:auto;display:block}
.nav-right{display:flex;align-items:center;gap:1.4rem}
.back-link{font-size:.92rem;font-weight:500;color:var(--text);display:inline-flex;align-items:center;gap:.4rem}
.back-link:hover{color:var(--terracota-text)}
.nav-cta{padding:.6rem 1.15rem;border-radius:999px;border:1.5px solid var(--terracota);color:var(--terracota-text);background:rgba(181,85,46,.06);font-size:.88rem;font-weight:600}

/* BREADCRUMB */
.crumbs{padding:6.6rem 0 0;font-size:.84rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.crumbs li::after{content:"›";margin-left:.45rem;color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a:hover{color:var(--terracota-text)}
.crumbs [aria-current]{color:var(--text);font-weight:600}

/* HERO DA PECA */
.peca{padding:1.4rem 0 3.4rem}
.peca-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.peca-foto{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--linho);aspect-ratio:1/1}
.peca-foto img{width:100%;height:100%;object-fit:cover}
.peca-info h1{font-size:clamp(2.1rem,4.6vw,3.3rem);color:var(--carvao);margin:.65rem 0 .9rem}
.peca-lead{color:var(--muted);font-size:1.05rem;max-width:46ch}
.peca-cta{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.peca-nota{margin-top:.9rem;font-size:.86rem;color:var(--muted);max-width:44ch}
.peca-nota a{color:var(--terracota-text,#9B4524);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ficha-desc{margin-bottom:1rem;color:var(--text);max-width:60ch}
.ficha-dif{margin:1rem 0 0 1.1rem;font-size:.94rem;color:var(--text)}
.peca-lead{margin-top:1.6rem}

/* FICHA */
.ficha{margin-top:2.2rem;border-top:1px solid var(--line);padding-top:1.5rem}
.ficha h2{font-size:1.15rem;color:var(--carvao);margin-bottom:.9rem}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;font-size:.94rem}
.ficha dt{color:var(--muted);font-weight:600}
.ficha dd{color:var(--text)}

/* BLOCOS DE SECAO */
.bloco{padding:3.2rem 0;border-top:1px solid var(--line)}
.bloco h2{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--carvao);margin:.7rem 0 .8rem}
.bloco p{color:var(--muted);max-width:60ch}
.medida-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.8rem}
.medida-item h3{font-family:'Manrope',sans-serif;font-size:.98rem;font-weight:700;color:var(--carvao);margin-bottom:.3rem}
.medida-item p{font-size:.92rem}

/* VIDEO DO PROCESSO */
.proc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
/* O video e 464x832 (vertical, medido com ffprobe). Largura travada pra nao virar
   um paredao de 1000px de altura no desktop. */
.proc video{width:100%;height:auto;max-width:340px;margin-inline:auto;border-radius:var(--r);box-shadow:var(--shadow);display:block;background:var(--linho)}

/* RELACIONADAS */
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:1.8rem}
.rcard{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow);background:var(--linho);display:block}
.rcard img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rcard:hover img{transform:scale(1.07)}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,17,14,.78),rgba(20,17,14,.04) 55%)}
.rcard span{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;color:#fff;font-family:'Bodoni Moda',Georgia,serif;font-weight:700;font-size:1.05rem;line-height:1.15}

/* CTA FINAL */
.fecho{background:var(--areia);text-align:center;padding:3.6rem 0}
.fecho h2{font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--carvao);margin-bottom:.7rem}
.fecho p{margin:0 auto 1.6rem;color:var(--muted)}

/* FOOTER */
footer{background:var(--carvao);color:rgba(255,255,255,.8);padding:3rem 0 2rem;text-align:center}
footer .brand{justify-content:center;margin-bottom:1rem}
footer .brand img{height:50px}
footer .f-links{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0;font-size:.92rem}
/* alvo de toque: 23.55px medido < 24px minimo WCAG 2.5.8 AA (100 paginas de produto usam este CSS) */
footer .f-links a{display:inline-block;padding-block:.4rem}
footer .f-links a:hover{color:#F0C9A8}
footer .f-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;margin-top:1.4rem;font-size:.82rem;color:rgba(255,255,255,.55)}

/* WHATSAPP FLOAT */
.wpp{position:fixed;right:1.3rem;bottom:1.3rem;z-index:60;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(37,211,102,.6)}
.wpp svg{width:30px;height:30px;fill:#fff}

@media(max-width:960px){
  .peca-in{grid-template-columns:1fr}
  /* Empilhado, a foto de largura total joga o CTA principal pra dentro da faixa do
     banner LGPD (medido: 32% coberto em 768x1024). Travar a altura mantem a foto
     grande e o botao acima do banner. object-fit:cover ja corta pelo centro. */
  .peca-foto{aspect-ratio:auto;width:100%;height:min(38vh,420px)}
  .proc{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .medida-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-cta{display:none}
  .brand,.brand img{height:40px}
  .crumbs{padding-top:5.6rem;font-size:.78rem}
  .peca{padding:1.1rem 0 2.6rem}
  .peca-info h1{font-size:clamp(1.9rem,7.5vw,2.6rem)}
  .peca-lead{font-size:.98rem}
  .peca-cta .btn{width:100%;justify-content:center}
  .bloco{padding:2.4rem 0}
  .rel-grid{gap:.85rem}
  .wpp{width:54px;height:54px;right:1rem;bottom:1rem}
}
@media(hover:none){
  .rcard:hover img{transform:none}
  .btn:active{transform:scale(.975)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* Tela baixa (360x640, 320x568 e afins): com a foto antes do bloco de texto, o CTA
   principal caia exatamente na faixa do banner LGPD, que e fixed no rodape (medido:
   94% coberto em 360x640, 98% em 320x568, contra 0% na home). Encolher a foto nao
   resolvia: so com ela abaixo de ~150px o botao escapava, e ai a foto do produto,
   que e o ativo que vende, virava uma tira. Aqui o texto vem primeiro e a foto
   depois. Remedido: 0% em todas as larguras testadas. */
@media(max-width:960px) and (max-height:720px){
  .peca-in{display:flex;flex-direction:column}
  .peca-info{order:1}
  .peca-foto{order:2}
  .peca-lead{margin-bottom:.4rem}
}