/* ============================================================
   DBFrame — camada sobre o design system compartilhado (preto +
   dourado do grupo DB). Carregue DEPOIS de style.css.
   ============================================================ */

/* ---------- MARCA EM TEXTO (como o letreiro da fachada:
   medalhão DB + a palavra FRAME em cromo) ---------- */
.brand--txt{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.brand__db{
  width:46px;height:46px;flex-shrink:0;border-radius:50%;
  border:2px solid var(--gold-2);
  display:grid;place-items:center;
  font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.22rem;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  box-shadow:0 0 0 4px rgba(212,171,90,.07);
  transition:height .3s var(--ease),width .3s var(--ease);
}
.brand__frame{
  font-weight:800;font-size:1.18rem;letter-spacing:.42em;line-height:1;
  background:linear-gradient(180deg,#eef1f5,#a9b3be 60%,#7d8792);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.site-header.scrolled .brand__db{width:40px;height:40px;font-size:1.05rem}
@media (max-width:520px){
  .brand__db{width:38px;height:38px;font-size:1rem}
  .brand__frame{font-size:1rem;letter-spacing:.3em}
}
.footer-brand .brand--txt{margin-bottom:.9rem}

/* ---------- DESTAQUES DO HERO (frases, não números) ---------- */
.hero__stats{align-items:start}
.hero__stats .stat__num{
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.3;letter-spacing:0;
  min-height:2.6em;display:flex;align-items:flex-end;
}
@media (max-width:720px){
  .hero__stats{grid-template-columns:1fr;gap:1rem}
  .hero__stats .stat__num{min-height:0}
  .hero__stats .stat{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:baseline}
  .hero__stats .stat__label{margin-top:0}
}

/* ---------- CATÁLOGO DE TELHAS (4 linhas com perfil técnico) ---------- */
.lines--catalogo{grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media (max-width:1060px){.lines--catalogo{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.lines--catalogo{grid-template-columns:1fr}}
.line-card__profile{
  margin:.9rem 0 .2rem;color:var(--gold-2);
  border:1px solid var(--hair);border-radius:10px;
  background:rgba(212,171,90,.05);padding:.7rem .8rem .5rem;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.line-card__profile svg{display:block;width:100%;height:auto}
.line-card:hover .line-card__profile{color:var(--gold-1);background:rgba(212,171,90,.1)}
/* cards mais estreitos em 4 colunas: rodapé empilhado, sem quebra feia */
.lines--catalogo .line-card__foot{flex-direction:column;align-items:flex-start;gap:.45rem}

/* ---------- FOTOS DA LOJA (mesma linguagem da galeria da fábrica) ---------- */
.media-grid--duo{
  display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:330px;gap:14px;
  margin-top:2.6rem;
}
.media{
  position:relative;margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--hair);background:var(--panel-2);
}
.media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.media:hover img{transform:scale(1.05)}
.media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,9,11,.62));
}
.media figcaption{position:absolute;left:.75rem;bottom:.65rem;z-index:1}
.media__tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-1);background:rgba(11,13,16,.74);
  border:1px solid var(--hair);border-radius:999px;padding:.32rem .7rem;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
@media (max-width:720px){
  .media-grid--duo{grid-template-columns:1fr;grid-auto-rows:240px;gap:10px}
}

/* ---------- FICHA DE CAPACIDADES (mesma da fábrica) ---------- */
.specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;
}
.spec{background:var(--panel);padding:1.4rem 1.5rem}
.spec dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.spec dd{margin:.5rem 0 0;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.45}

/* ============================================================
   FOTOS DE PRODUTO (2026-09) — a foto ocupa o topo inteiro do
   card; a textura CSS fica só de fundo enquanto a imagem carrega
   ============================================================ */
.cat-card .cat-photo{height:220px;background:#0b0d10}
.cat-card .cat-photo img.real{
  inset:0;right:auto;bottom:auto;width:100%;height:100%;
  border:0;border-radius:0;box-shadow:none;object-fit:cover;
  transition:transform .8s var(--ease);
}
.cat-card:hover .cat-photo img.real{transform:scale(1.06)}
.cat-card .cat-photo .shade{z-index:1}
.cat-card .cat-photo .cat-profile{opacity:.8}
.cat-card .cat-photo .cat-profile svg{width:120px}
.cat-photo .cat-kind{
  position:absolute;right:.7rem;top:.7rem;z-index:2;
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(11,13,16,.72);border:1px solid var(--border);
  border-radius:999px;padding:.25rem .55rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ============================================================
   SIMULADOR DE TELHADO
   ============================================================ */
.simulador-wrap{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:2rem;align-items:start}
.simulador-wrap .section-head{margin-bottom:1.4rem}
@media (max-width:1060px){.simulador-wrap{grid-template-columns:1fr}}
[data-simulador]{display:grid;grid-template-columns:1fr;gap:1rem}
.catalogo-sim [data-simulador]{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);align-items:start}
@media (max-width:900px){.catalogo-sim [data-simulador]{grid-template-columns:1fr}}
.sim{
  display:flex;flex-direction:column;gap:1.1rem;
  background:rgba(20,23,29,.9);border:1px solid var(--hair);border-radius:18px;padding:1.4rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sim__step{border:0;margin:0;padding:0;min-width:0}
.sim__step legend{
  display:flex;align-items:center;gap:.55rem;padding:0;margin-bottom:.7rem;
  font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-1);
}
.sim__n{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3));color:var(--gold-ink);font-size:.75rem;letter-spacing:0;
}
.sim label{display:block;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.sim label small{color:var(--ink-3);font-weight:500}
.sim input:not([type=radio]):not([type=checkbox]),.sim select{
  width:100%;margin-top:.35rem;background:#0b0d10;border:1px solid var(--border);border-radius:10px;
  color:var(--ink);padding:.8rem .9rem;font:inherit;font-size:1rem;
  transition:border-color .2s;
}
.sim input:focus,.sim select:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(212,171,90,.18)}
/* 1 ou 2 águas: cartões grandes com pictograma */
.sim__aguas{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.sim__agua,.sim__chips label{position:relative}
.sim__agua input,.sim__chips input{position:absolute;opacity:0;pointer-events:none}
.sim__agua span{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;cursor:pointer;
  border:1.5px solid var(--border);border-radius:14px;padding:.9rem .6rem .8rem;background:#0f1216;
  color:var(--ink-3);transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease);
}
.sim__agua svg{width:64px;height:40px;margin-bottom:.2rem}
.sim__agua b{font-size:1.05rem;color:var(--ink)}
.sim__agua small{font-size:.74rem}
.sim__agua span:hover{border-color:var(--gold-3);transform:translateY(-2px)}
.sim__agua input:checked + span{border-color:var(--gold-2);background:rgba(212,171,90,.1);color:var(--gold-1);box-shadow:0 0 0 3px rgba(212,171,90,.14)}
.sim__agua input:focus-visible + span,.sim__chips input:focus-visible + span{outline:2px solid var(--gold-2);outline-offset:2px}
/* medidas + planta */
.sim__medidas{display:grid;grid-template-columns:1fr 200px;gap:1rem;align-items:center;transition:opacity .3s}
.sim__medidas.off{opacity:.35;pointer-events:none}
.sim__campos{display:flex;flex-direction:column;gap:.7rem}
.sim__campos label{position:relative}
.sim__campos i{position:absolute;right:.9rem;bottom:.85rem;font-style:normal;color:var(--ink-3);font-size:.9rem}
@media (max-width:520px){.sim__medidas{grid-template-columns:1fr}.sim__planta{max-width:240px;margin:0 auto}}
.sim__planta{width:100%;height:auto;overflow:visible}
.sim__planta .p-area{fill:rgba(28,111,160,.18);stroke:#3a8ec4;stroke-width:1.5}
.sim__planta .p-cum{stroke:var(--gold-2);stroke-width:3;stroke-linecap:round}
.sim__planta .p-seta{stroke:#8fc2e6;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sim__planta .p-cota{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.sim__planta .p-lbl{fill:var(--gold-1);font-size:9px;font-weight:700;text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.sim__planta .p-val{fill:var(--ink-2);font-size:10px;text-anchor:middle}
.sim__check{display:flex!important;align-items:flex-start;gap:.55rem;margin-top:.8rem;cursor:pointer}
.sim__check input{margin-top:.25rem;accent-color:var(--gold-2);width:16px;height:16px;flex-shrink:0}
.sim__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:520px){.sim__row{grid-template-columns:1fr}}
.sim__chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.sim__chips span{
  display:inline-block;cursor:pointer;border:1px solid var(--border);border-radius:999px;
  padding:.5rem 1rem;font-size:.86rem;font-weight:700;color:var(--ink-2);transition:all .2s;
}
.sim__chips input:checked + span{border-color:var(--gold-2);color:var(--gold-1);background:rgba(212,171,90,.1)}
/* resultado */
.sim__res{
  background:rgba(11,13,16,.92);border:1px solid var(--hair);border-radius:18px;padding:1.4rem;
  box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sim__big{display:flex;align-items:baseline;gap:.6rem;margin:.6rem 0 .9rem;flex-wrap:wrap}
.sim__big b{font-size:clamp(2.4rem,5vw,3.2rem);line-height:1;color:var(--gold-1);font-variant-numeric:tabular-nums}
.sim__big span{color:var(--ink-2);font-size:.95rem}
.sim__lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.sim__lista li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.sim__lista span{color:var(--ink-3)}
.sim__lista b{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.sim__aviso{margin:.9rem 0 0;padding:.7rem .85rem;border-radius:10px;background:rgba(212,171,90,.1);border:1px solid var(--hair);color:var(--gold-1);font-size:.85rem}
.sim__go{width:100%;justify-content:center;margin-top:1.1rem}
.sim__nota{margin:.8rem 0 0;color:var(--ink-3);font-size:.78rem;line-height:1.5}
.sim__nota b{color:var(--ink-2)}
.simulador-3dhint{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;color:var(--ink-3);font-size:.82rem}
.simulador-3dhint svg{color:var(--gold-2);flex-shrink:0}
html.no3d .simulador-3dhint{display:none}

/* ============================================================
   MOLDURAS DE ISOPOR (EPS)
   ============================================================ */
.molduras{display:grid;grid-template-columns:1fr minmax(0,560px);gap:2.4rem;align-items:center}
.molduras__stage{min-height:420px}
html.no3d .molduras__stage{
  border-radius:18px;overflow:hidden;border:1px solid var(--hair);
  background:url("../img/fotos/render-molduras.jpg") center/cover no-repeat;
}
.molduras__card{
  background:rgba(17,20,25,.86);border:1px solid var(--hair);border-radius:18px;padding:1.8rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);
}
.molduras__card h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:.6rem 0 .8rem}
.molduras__card > p{color:var(--ink-2)}
.molduras__novo{
  display:inline-block;margin-left:.5rem;vertical-align:middle;
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-radius:6px;padding:.22rem .5rem;
}
.molduras__tipos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1.2rem 0;padding:0}
.molduras__tipos li{
  list-style:none;display:flex;gap:.6rem;align-items:flex-start;
  background:#0f1216;border:1px solid var(--border);border-radius:12px;padding:.75rem .8rem;
}
.molduras__tipos svg{color:var(--gold-2);flex-shrink:0;margin-top:.1rem}
.molduras__tipos b{display:block;font-size:.92rem}
.molduras__tipos small{color:var(--ink-3);font-size:.78rem;line-height:1.4;display:block}
.molduras__pros{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.3rem}
.molduras__pros span{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-1);border:1px solid var(--hair);border-radius:999px;padding:.32rem .7rem;background:rgba(212,171,90,.08);
}
.molduras__acts{display:flex;gap:.6rem;flex-wrap:wrap}
.molduras__foto{display:none;margin:0 0 1.2rem;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.molduras__foto img{width:100%;height:190px;object-fit:cover}
@media (max-width:960px){
  .molduras{grid-template-columns:1fr}
  .molduras__stage{display:none}
  .molduras__foto{display:block}
}
@media (max-width:520px){.molduras__tipos{grid-template-columns:1fr}}

/* faixa de novidade no topo (molduras) */
.news-strip{
  display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;text-align:center;
  padding:.55rem 1rem;font-size:.84rem;color:var(--ink-2);
  background:linear-gradient(90deg,rgba(212,171,90,.04),rgba(212,171,90,.16),rgba(212,171,90,.04)),#111418;
  border-bottom:1px solid var(--hair);position:relative;z-index:1;
}
.news-strip b{color:var(--gold-1)}
.news-strip a{color:var(--gold-1);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   DÚVIDAS FREQUENTES (espelha o FAQPage do JSON-LD)
   ============================================================ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2.4rem;align-items:start}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:1rem}}
.faq{display:flex;flex-direction:column;gap:.6rem}
.faq details{background:rgba(25,29,36,.86);border:1px solid var(--border);border-radius:14px;transition:border-color .25s}
.faq details[open]{border-color:var(--hair)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.2rem;font-weight:700;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;font-size:1.3rem;line-height:1;color:var(--gold-2);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 1.2rem 1.1rem;color:var(--ink-2);font-size:.94rem}