/* ============================================================
   /tela-tensionada/ — landing completa (2026-09-03)
   Spec: docs/design/tela-tensionada-spec.md
   Hero: classes compartilhadas de hero-page.css (.hero-v1*).
   Mesma régua da página de Serviços: densidade alta, tipografia
   pequena e precisa, ação em texto, um único botão verde no fecho.
   ============================================================ */

.page-tt section[id] { scroll-margin-top: calc(var(--header-height-total, 160px) + 16px); }

/* ─── Faixa de abertura ─── */
.tt-abertura { position: relative; background: var(--cor-cinza-050); }
.tt-abertura img {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 440px);
  object-fit: cover;
  object-position: 50% 45%;
}
.tt-abertura-legenda {
  position: absolute; left: 0; bottom: 0; z-index: 5;
  background: var(--cor-branco);
  padding: 16px 26px 14px;
  max-width: 420px;
  font: 400 11px/1.4 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cor-cinza-500);
}
.tt-abertura-legenda b {
  display: block; margin-top: 6px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
  color: var(--cor-preto);
}

/* ─── Índice de âncoras ─── */
.tt-indice { border-top: 1px solid var(--cor-cinza-100); border-bottom: 1px solid var(--cor-cinza-100); }
.tt-indice ul {
  display: flex; gap: 28px; margin: 0; padding: 14px 0;
  list-style: none; overflow-x: auto; scrollbar-width: none;
}
.tt-indice ul::-webkit-scrollbar { display: none; }
.tt-indice a {
  font: 500 11px/1.4 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cor-cinza-500); text-decoration: none;
  white-space: nowrap; padding: 6px 0;
  transition: color var(--transition-fast);
}
.tt-indice a:hover, .tt-indice a[aria-current="true"] { color: var(--cor-preto); }
.tt-indice a:focus-visible { outline: 2px solid var(--cor-preto); outline-offset: 3px; }

/* ─── Cabeçalho de seção (padrão da página) ─── */
.tt-secao { padding: 52px 0; }
.tt-secao--cinza { background: var(--cor-cinza-050); }
.tt-titulo {
  font: 600 11px/1.4 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cor-preto);
  border-bottom: 1px solid var(--cor-cinza-900);
  padding-bottom: 10px; margin: 0 0 28px;
}
.tt-intro {
  font-size: 13.5px; line-height: 1.75; color: var(--cor-cinza-700);
  max-width: 72ch; margin: 0 0 28px;
}

/* ─── Anatomia (3 camadas) ─── */
.tt-anatomia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tt-camada-num {
  display: block;
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.1em;
  color: var(--cor-vermelho); margin-bottom: 8px;
}
.tt-camada h3 { font: 500 14px/1.35 var(--font-body); color: var(--cor-preto); margin: 0 0 7px; }
.tt-camada p {
  margin: 0; font-size: 13.5px; line-height: 1.7;
  color: var(--cor-cinza-700); text-align: justify; hyphens: auto;
}

/* ─── A obra: trilho de etapas ─── */
.tt-etapas { list-style: none; margin: 0; padding: 0; }
.tt-etapa {
  position: relative; display: grid;
  grid-template-columns: 26px 340px 1fr; gap: 28px;   /* texto mais largo = etapa mais baixa (gestor 2026-09-04) */
  padding: 22px 0; border-bottom: 1px solid var(--cor-cinza-100);
  align-items: start;
}
.tt-etapa:last-child { border-bottom: none; }
.tt-etapa-num {
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.1em;
  color: var(--cor-vermelho); padding-top: 3px;
}
.tt-etapa-texto h3 { font: 500 14px/1.35 var(--font-body); color: var(--cor-preto); margin: 0; }
.tt-etapa-texto p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--cor-cinza-700); }

.tt-strip { display: flex; gap: 2px; background: var(--cor-cinza-100); }
/* PADRÃO DE FOTO (gestor 2026-09-04): todas as imagens da página são geradas em 3:2 (1500×1000 e
   900×600), fotos recortadas pelo ponto de foco e desenhos encaixados em fundo branco. Assim o
   quadro, a ampliação e a foto têm sempre a mesma proporção: nada cortado, esticado ou minúsculo. */
.tt-frame {
  position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 3 / 2;
  overflow: hidden; background: var(--cor-cinza-050); display: block;
}
.tt-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
/* desenhos do projeto: menores, alinhados à esquerda */
/* desenhos do projeto: cada um na proporção real, mesma altura, preenchendo a linha (legíveis) */
.tt-strip--desenhos { margin: 0 0 26px; background: transparent; gap: 12px; }
.tt-strip--desenhos .tt-frame { flex: var(--ar, 1.5) 1 0; aspect-ratio: var(--ar, 1.5); border: 1px solid var(--cor-cinza-100); background: var(--cor-branco); }
.tt-strip--desenhos .tt-frame img { object-fit: contain; }
#instalacao h2.tt-intro { margin-bottom: 10px; }   /* intro uma linha acima (gestor 2026-09-04) */
#instalacao .tt-intro { max-width: none; }   /* intro larga = seção mais baixa (gestor 2026-09-04) */
.tt-frame:hover img { transform: scale(1.04); }
.tt-frame::after {
  content: "+"; position: absolute; right: 8px; bottom: 6px;
  font: 400 14px/1 var(--font-body); color: var(--cor-branco);
  opacity: 0; transition: opacity var(--transition-fast);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.tt-frame:hover::after, .tt-frame:focus-visible::after { opacity: 1; }
.tt-frame:focus-visible { outline: 2px solid var(--cor-preto); outline-offset: 2px; }

/* ─── Ampliação ─── */
.tt-lightbox {
  /* Caixa de tamanho PADRÃO (gestor 2026-09-04): 3:2, limitada à janela; toda foto preenche a
     caixa (cover, com o ponto de enquadramento da foto), sem barra e sem fundo preto. */
  margin: auto;
  border: 0; padding: 0; overflow: hidden;
  width: min(92vw, 1180px, calc((90vh - 46px) * 1.5));
  background: var(--cor-branco); color: var(--cor-preto);
}
.tt-lightbox::backdrop { background: rgba(10,10,10,.9); }
.tt-lightbox img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  object-position: 50% var(--pos, 40%); cursor: pointer;
}
.tt-lightbox-cap {
  background: var(--cor-branco); color: var(--cor-cinza-500);
  font: 400 13px/1.5 var(--font-body); padding: 12px 18px;
}
.tt-lightbox-fechar, .tt-lightbox-nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: var(--cor-branco); font: 400 22px/1 var(--font-body); padding: 10px 14px;
}
.tt-lightbox-fechar { top: 4px; right: 6px; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.tt-lightbox-nav { text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.tt-lightbox-nav { top: 45%; }
.tt-lightbox-nav[data-dir="-1"] { left: 4px; z-index: 2; }
.tt-lightbox-nav[data-dir="1"] { right: 4px; z-index: 2; }
.tt-lightbox-fechar:focus-visible, .tt-lightbox-nav:focus-visible { outline: 2px solid var(--cor-branco); }

/* ─── Detalhamento técnico ─── */
.tt-detalhe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.tt-corte { width: 100%; height: auto; display: block; }
.tt-cotas { margin: 0; }
.tt-cota {
  display: grid; grid-template-columns: 40% 60%;
  border: 1px solid var(--cor-cinza-100); border-bottom: none;
}
.tt-cota:last-of-type { border-bottom: 1px solid var(--cor-cinza-100); }
.tt-cota:nth-child(odd) { background: var(--cor-cinza-050); }
.tt-cota dt {
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cor-cinza-500); padding: 12px 14px;
}
.tt-cota dd { margin: 0; font: 500 13px/1.5 var(--font-body); color: var(--cor-preto); padding: 12px 14px; }
.tt-detalhe-acoes { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
/* 15/10/2026 — seção ligada (mockup v3 aprovado): desenhos numerados, legenda 1–8, "Ampliar" na janela das fotos */
.tt-leia { font-size: 13px; line-height: 1.6; color: var(--cor-cinza-700); margin: 0 0 18px; max-width: 70ch; }
.tt-desenho { margin: 0 0 14px; border: 1px solid var(--cor-cinza-100); background: var(--cor-branco); padding: 14px 14px 8px; }
.tt-desenho svg { width: 100%; height: auto; display: block; }
.tt-desenho-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.tt-desenho figcaption { font: 400 11px/1.4 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cor-cinza-500); }
a.tt-ampliar, a.tt-ampliar:hover { position: static; display: inline-block; width: auto; height: auto; aspect-ratio: auto; overflow: visible; background: none; border: 0; border-radius: 0; padding: 4px 0;
  font: 500 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cor-preto); text-decoration: none; border-bottom: 1px solid var(--cor-preto); white-space: nowrap; }
.tt-legenda { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.tt-legenda li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--cor-cinza-700); padding: 7px 0; border-bottom: 1px solid var(--cor-cinza-100); }
.tt-legenda b { font: 500 11px/1.8 var(--font-body); letter-spacing: 0.1em; color: var(--cor-vermelho); }
.tt-legenda strong { font-weight: 500; color: var(--cor-preto); }

/* ─── Ficha (usada na luz e na fábrica) ─── */
.tt-ficha { margin: 0; border: 1px solid var(--cor-cinza-100); }
.tt-ficha-linha { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--cor-cinza-100); }
.tt-ficha-linha:last-child { border-bottom: none; }
.tt-ficha-linha:nth-child(even) { background: var(--cor-cinza-050); }
.tt-ficha-linha dt {
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cor-cinza-500); padding: 14px 16px;
}
.tt-ficha-linha dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cor-cinza-700); padding: 14px 16px; }
.tt-ficha-linha dd a { color: #0B57D0; text-decoration: underline; text-underline-offset: 2px; }

.tt-luz-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: stretch; }
.tt-luz-foto { overflow: hidden; background: var(--cor-cinza-050); }
.tt-luz-foto img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; object-position: 50% 45%; display: block; }

/* ─── Onde aplicar ─── */
.tt-aplicacoes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
.tt-aplicacao {
  font-size: 13px; line-height: 1.5; color: var(--cor-cinza-700);
  padding: 11px 0; border-bottom: 1px solid var(--cor-cinza-100);
}
.tt-aplicacao a { color: var(--cor-preto); text-decoration: none; border-bottom: 1px solid var(--cor-cinza-300); }
.tt-aplicacao a:hover { border-color: var(--cor-vermelho); }

/* ─── Comparativo ─── */
.tt-comparativo-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tt-comparativo-tabela th {
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cor-cinza-500); text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--cor-cinza-900);
}
.tt-comparativo-tabela td {
  padding: 13px 14px; line-height: 1.6; color: var(--cor-cinza-700);
  border-bottom: 1px solid var(--cor-cinza-100); vertical-align: top;
}
.tt-comparativo-tabela tbody tr:nth-child(even) { background: var(--cor-cinza-050); }
.tt-comparativo-tabela td:first-child { color: var(--cor-preto); font-weight: 500; }

/* ─── Preço ─── */
.tt-fatores { list-style: none; margin: 0; padding: 0; }
.tt-fator {
  display: grid; grid-template-columns: 26px 1fr; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--cor-cinza-100);
}
.tt-fator-num { font: 500 11px/1.6 var(--font-body); letter-spacing: 0.1em; color: var(--cor-vermelho); }
.tt-fator p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--cor-cinza-700); }
.tt-fator b { color: var(--cor-preto); font-weight: 500; }

/* ─── Placas de números (fábrica) ─── */
.tt-placas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; margin-bottom: 24px; }
.tt-placa-rot {
  display: block; font: 500 11px/1.4 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-cinza-500); margin-bottom: 6px;
}
.tt-placa-val { font: 500 20px/1.25 var(--font-body); letter-spacing: -0.01em; color: var(--cor-preto); }

/* ─── Ações em texto (padrão da página) ─── */
.tt-acao {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--cor-preto);
  border-bottom: 1px solid var(--cor-cinza-300);
  padding: 12px 0 4px;
  transition: border-color var(--transition-fast);
}
.tt-acao:hover { border-color: var(--cor-vermelho); }
.tt-acao:focus-visible { outline: 2px solid var(--cor-preto); outline-offset: 3px; }
.tt-acao svg { width: 14px; height: 14px; flex: none; color: var(--bg-cta); }

/* ─── Fecho ─── */
.tt-fecho { padding: 56px 0 64px; border-top: 1px solid var(--cor-cinza-900); }
.tt-fecho .container { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.tt-fecho h2 { font: 500 22px/1.25 var(--font-body); letter-spacing: -0.02em; color: var(--cor-preto); margin: 0 0 6px; }
.tt-fecho p { font-size: 14px; font-weight: 300; color: var(--cor-cinza-500); margin: 0; }
.tt-fecho-links { margin-top: 12px; display: flex; gap: 24px; flex-wrap: wrap; }
.tt-fecho-links a { font: 400 11px/1.5 var(--font-body); letter-spacing: 0.04em; color: var(--cor-cinza-500); text-decoration: none; }
.tt-fecho-links a:hover { color: var(--cor-preto); }
.tt-fecho-cta { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.tt-fecho-cta svg { width: 15px; height: 15px; }

/* ─── Mobile ─── */
@media (max-width: 1000px) {
  .tt-abertura-legenda { padding: 12px 18px 10px; max-width: 280px; }
  .tt-anatomia-grid { grid-template-columns: 1fr; gap: 22px; }
  .tt-etapa { grid-template-columns: 24px 1fr; gap: 14px; row-gap: 12px; }
  .tt-etapa .tt-strip { grid-column: 2; }
  /* faixa rolável com encaixe: nunca 5 fotos espremidas em 360px */
  .tt-strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tt-strip::-webkit-scrollbar { display: none; }
  .tt-frame { flex: 0 0 74%; scroll-snap-align: start; height: 132px; }
  .tt-detalhe-grid { grid-template-columns: 1fr; gap: 28px; }
  /* desenhos do Detalhamento encolhem para ~40%: letras sobem, rótulos internos somem (a legenda e o "Ampliar" cobrem) */
  .tt-legenda { grid-template-columns: 1fr; }
  .tt-corte text { font-size: 18px; }
  .tt-corte text.num { font-size: 16px; }
  .tt-corte text.rot, .tt-corte .rot text { font-size: 14px; }
  .tt-corte text.cap, .tt-corte .so-grande { display: none; }
  .tt-luz-grid { grid-template-columns: 1fr; gap: 24px; }
  .tt-luz-foto img { min-height: 220px; }
  .tt-aplicacoes-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-ficha-linha { grid-template-columns: 1fr; }
  .tt-ficha-linha dt { padding-bottom: 0; }
  .tt-fecho .container { grid-template-columns: 1fr; gap: 24px; }
  /* tabela vira blocos empilhados — sem rolagem horizontal */
  .tt-comparativo-tabela, .tt-comparativo-tabela tbody, .tt-comparativo-tabela tr, .tt-comparativo-tabela td { display: block; width: 100%; }
  .tt-comparativo-tabela thead { display: none; }
  .tt-comparativo-tabela tr { border-bottom: 1px solid var(--cor-cinza-100); padding: 12px 0; }
  .tt-comparativo-tabela td { border: 0; padding: 4px 0; }
  .tt-comparativo-tabela td:first-child { font-weight: 500; color: var(--cor-preto); }
  .tt-comparativo-tabela td[data-col]::before {
    content: attr(data-col) " · "; font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--cor-cinza-500);
  }
  .tt-lightbox-nav { display: none; }
  .tt-strip { flex-wrap: wrap; }
  .tt-frame { flex: 1 1 45%; }
  .tt-strip--desenhos .tt-frame { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-frame img { transition: none; }
  .tt-frame:hover img { transform: none; }
}

/* ─── FAQ: cópia do desenho aprovado em projetos-sob-medida.css (.psm-srv-faq-*) ─── */
.page-tt .psm-srv-faq-list { display: flex; flex-direction: column; max-width: 880px; }
.page-tt .psm-srv-faq-item { border-top: 1px solid var(--cor-cinza-100); padding: 22px 0; }
.page-tt .psm-srv-faq-item:last-child { border-bottom: 1px solid var(--cor-cinza-100); }
.page-tt .psm-srv-faq-q {
  font-family: var(--font-heading); font-size: 17px; font-weight: 500; line-height: 1.4;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding-right: 8px; letter-spacing: -0.01em; list-style: none;
}
.page-tt .psm-srv-faq-q::-webkit-details-marker { display: none; }
.page-tt .psm-srv-faq-q::after {
  content: "+"; color: var(--cor-vermelho); font-family: var(--font-body); font-size: 22px;
  font-weight: 300; transition: transform var(--transition-base); flex-shrink: 0;
}
.page-tt .psm-srv-faq-item[open] .psm-srv-faq-q::after { transform: rotate(45deg); }
.page-tt .psm-srv-faq-a { font-size: 14px; color: var(--cor-cinza-500); font-weight: 300; line-height: 1.9; padding-top: 16px; }

/* ─── Configurador (fatia 3, 16/10/2026 — mockup v4 aprovado; só o que NÃO existe em product.css) ─── */
.tt-configurador { padding-top: 28px; }
.tt-configurador .product-single-grid.perfil-led-grid { margin-top: 18px; }
.tt-configurador .product-badges { flex-wrap: wrap; }
.tt-configurador .config-row[hidden], .tt-medidas .chip-tamanho[hidden], .tt-cep[hidden], .tt-configurador [hidden] { display: none; }
/* grupos: TODOS em grade de colunas iguais (mesma regra do rc844 para cor/temperatura, estendida a todos) */
.tt-configurador .perfil-config-block .chip-group { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
.tt-configurador .perfil-config-block .chip { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; }
.tt-configurador .chip:disabled { color: var(--cor-cinza-300); border-style: dashed; cursor: not-allowed; }
.tt-configurador .chip-group.c2 { --cols: 2; } .tt-configurador .chip-group.c4 { --cols: 4; } .tt-configurador .chip-group.c5 { --cols: 5; } .tt-configurador .chip-group.c6 { --cols: 6; }
/* medidas: caixas do mesmo tamanho dos botões, com o campo dentro (largura · comprimento · profundidade) */
.tt-medidas { display: flex; gap: 6px; }
.tt-medidas .chip-tamanho { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; min-height: 42px; padding: 0 10px; border: 1px solid var(--border-default); background: var(--cor-branco); box-sizing: border-box; }
.tt-medidas .chip-tamanho .lab { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.tt-medidas .chip-tamanho input { border: 0; padding: 0; text-align: right; font-size: 14px; font-weight: 600; min-width: 0; width: 100%; background: transparent; }
.tt-medidas .chip-tamanho input:focus { outline: none; }
.tt-medidas .chip-tamanho.erro { border-color: var(--cor-vermelho); }
/* cartões de comparação: nome · o que vem · valor (gestor 16/10) */
.tt-comp .chip { flex-direction: column; gap: 2px; padding: 8px 8px; }
.tt-comp .chip b { font-size: 12px; font-weight: 600; }
.tt-comp .chip small { font-size: 11px; font-weight: 400; color: var(--text-secondary); line-height: 1.3; }
.tt-comp .chip > span { font-size: 12px; font-weight: 600; color: var(--cor-preto); }
.tt-comp .chip del { font-weight: 400; color: var(--text-secondary); margin-right: 4px; }
/* "· preço promocional até 30 de novembro": vermelho, sem caixa; o valor fica em preto (gestor 16/10 11h30) */
.tt-promo { margin-left: 4px; font: 600 11px/1.3 var(--font-body); color: var(--cor-vermelho); }
/* etiqueta "novidade" dentro do botão (2400K) */
.tt-chip-tag { flex-direction: column; gap: 2px; }
.tt-chip-tag small { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-vermelho); line-height: 1; }
/* CEP da obra + quadro do resultado, centralizado */
.tt-cep { display: grid; grid-template-columns: 150px 1fr; gap: 6px; align-items: stretch; margin-top: 6px; }
.tt-cep input { height: 44px; padding: 8px 12px; border: 1px solid var(--border-default); font-family: inherit; font-size: 14px; border-radius: 0; }
.tt-cep input:focus { outline: none; border-color: var(--cor-preto); }
.tt-cep-res { min-height: 44px; border: 1px solid var(--border-default); background: var(--cor-cinza-050); display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; font-size: 12px; line-height: 1.35; color: var(--text-secondary); gap: 6px; flex-wrap: wrap; }
.tt-cep-res b { font-weight: 600; }
.tt-cep-res.ok { color: var(--cor-verde-esc); border-color: var(--cor-verde); background: var(--cor-cinza-050); }
.tt-cep-res.nao { color: var(--cor-vermelho); border-color: var(--cor-vermelho); }
.tt-aviso { color: var(--cor-vermelho) !important; }
.tt-btn-projeto { height: 44px; border: 1px solid var(--cor-preto); background: var(--cor-branco); color: var(--cor-preto); font: 600 13px/1 var(--font-body); cursor: pointer; width: 100%; }
.tt-btn-projeto:hover { background: var(--cor-cinza-050); }
/* quantidade + comprar (no mockup era style inline; aqui em classe) */
.tt-cart-row { display: flex; gap: 8px; align-items: stretch; }
.tt-cart-row .ark-perfil-qty { display: grid; grid-template-columns: 32px 44px 32px; height: 48px; border: 1px solid #ddd; background: #fff; flex: 0 0 auto; }
.tt-cart-row .qty-btn { border: 0; background: transparent; cursor: pointer; line-height: 1; }
.tt-cart-row .qty-input { width: 100%; height: 100%; border: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center; background: transparent; outline: none; -moz-appearance: textfield; }
.tt-cart-row .single_add_to_cart_button { flex: 1 1 auto; }
.tt-cart-row .single_add_to_cart_button[disabled] { opacity: .5; cursor: not-allowed; }
/* galeria da esquerda — a foto troca com modelo + formato */
.tt-cfg-foto { border: 1px solid var(--border-default); background: var(--cor-cinza-050); aspect-ratio: 4/3; overflow: hidden; }
.tt-cfg-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-cfg-legenda { font: 400 12px/1.4 var(--font-body); color: var(--text-secondary); margin: 8px 0 12px; }
.tt-cfg-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tt-cfg-thumbs button { border: 1px solid var(--border-default); padding: 0; background: var(--cor-branco); aspect-ratio: 4/3; overflow: hidden; cursor: pointer; width: 100%; }
.tt-cfg-thumbs button.on { border-color: var(--cor-preto); }
.tt-cfg-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-cfg-ambientes { margin-top: 18px; }
.tt-cfg-ambientes p { font: 600 11px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); margin: 0 0 8px; }
.tt-cfg-ambientes .tt-cfg-thumbs { grid-template-columns: repeat(8, 1fr); }
.tt-cfg-ambientes figure { margin: 0; }
.tt-cfg-ambientes figcaption { font: 400 11px/1.2 var(--font-body); color: var(--text-secondary); margin-top: 4px; text-align: center; }
/* modal do projeto (cadastro só aqui — fatia 5) */
.tt-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(10,10,10,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tt-modal[hidden] { display: none; }
.tt-modal-caixa { background: var(--cor-branco); width: min(440px, 100%); padding: 24px; position: relative; }
.tt-modal-caixa h3 { font: 500 18px/1.3 var(--font-body); margin: 0 0 6px; text-transform: uppercase; letter-spacing: -0.01em; }
.tt-modal-caixa p { font: 400 13px/1.5 var(--font-body); color: var(--cor-cinza-700); margin: 0 0 12px; }
.tt-modal-caixa label { display: block; font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); margin: 12px 0 6px; }
.tt-modal-caixa input { width: 100%; box-sizing: border-box; border: 1px solid var(--border-default); padding: 9px 10px; font: 400 14px var(--font-body); }
.tt-modal-fechar { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--cor-cinza-500); }
@media (max-width: 1024px) { .tt-cfg-ambientes .tt-cfg-thumbs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) {
  .tt-configurador .chip-group.c4 { --cols: 2; } .tt-configurador .chip-group.c5, .tt-configurador .chip-group.c6 { --cols: 3; }
  .tt-medidas { flex-wrap: wrap; } .tt-medidas .chip-tamanho { flex: 1 1 45%; }
  .tt-cep { grid-template-columns: 1fr; }
}