/* =========================================================
   GASSEN — overrides & correções sobre o export do Framer
   Substitui os blocos <style> inline (gassen-overrides / gassen-fixes).
   Mantém o HTML do Framer intacto; só ajusta apresentação.

   Nota: classes do Framer usam o sufixo "-container" nos wrappers e
   contêm maiúsculas. Selecionar a classe errada faz a regra não aplicar.
   ========================================================= */

/* --- 1. Sobras do template imobiliário (real-estate) escondidas --- */
[data-framer-name="Bedrooms"],
[data-framer-name="Bathrooms"],
[data-framer-name="Living Space"],
[data-framer-name="Testimonial"] { display: none !important; }
.framer-1ki11zn { display: none !important; }

/* fragmentos/cards decorativos do template */
.framer-1etxuwd, .framer-1e9vqo6, .framer-133lduy, .framer-2rw5da,
.framer-9dmt2k, .framer-1r8q05x, .framer-f0ffwf, .framer-1dtfy7r,
.framer-1uvlwy9, .framer-qav41k { display: none !important; }

/* --- 1b. HERO título: evitar "viúva" (palavra "padrão" sozinha na última
   linha). O h1 tem largura fixa (923px); text-wrap:balance redistribui as
   linhas pra ficarem equilibradas sem palavra solta. --- */
.framer-4skvtv .framer-text { text-wrap: balance; }

/* --- 2. HERO: cards de vídeo decorativos (esq .framer-12x4gow-container /
   dir .framer-8vteu5-container). São position:absolute dentro do bloco de
   texto centralizado, então acompanham o título em qualquer largura.
   No export o card da esquerda invadia o título (sobreposição ~73px em todas
   as larguras) e o da direita estourava a viewport abaixo de ~1700px.
   Acima de 1700px reposicionamos: esquerda sai de cima do título, direita
   não estoura a borda. Abaixo de 1700px não cabem dois cards de 327px ao
   lado do título de 923px → escondemos (são decorativos; o hero fica com
   texto + vídeo central, limpo). --- */
@media (min-width: 1700px) {
  .framer-12x4gow-container { margin-left: 34px !important; }   /* esq: tira do título */
  .framer-8vteu5-container { margin-left: -156px !important; }  /* dir: não estoura a borda */
}
@media (max-width: 1699px) {
  .framer-12x4gow-container,
  .framer-8vteu5-container { display: none !important; }
}

/* --- 2b. Botão play/pause PERSISTENTE no vídeo central do hero. Os controles
   nativos somem quando o mouse sai; este botão fica sempre visível no canto
   do vídeo (injetado pelo script #gassen-hero-video). --- */
.gassen-vid-toggle {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  width: 52px; height: 52px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(5, 16, 26, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.gassen-vid-toggle:hover { background: rgba(5, 16, 26, 0.82); }
.gassen-vid-toggle:active { transform: scale(0.94); }
.gassen-vid-toggle svg { display: block; }

/* As "Lines" são uma camada decorativa do Framer que fica POR CIMA do hero e
   interceptava o clique no botão (e podia roubar cliques de CTAs sob as
   linhas). São puramente visuais → deixamos clique passar. --- */
[data-framer-name="Lines"] { pointer-events: none !important; }

/* --- 3. HERO stats: o vídeo (923px, centralizado) transborda o hero e
   cobria o topo da grade de stats (.framer-1bii4yy, 1200px). Empurramos a
   grade pra baixo do vídeo. --- */
@media (min-width: 810px) {
  .framer-1bii4yy { margin-top: 210px !important; }
}
/* No desktop (>=1200px) as 4 colunas eram 1fr e esticavam para preencher os
   1200px da grade, espalhando os cards. Travamos a largura das colunas e
   apertamos o gap — o justify-content:center do grid agrupa o bloco no centro. */
@media (min-width: 1200px) {
  .framer-1bii4yy {
    grid-template-columns: repeat(4, 230px) !important;
    gap: 16px !important;
    justify-content: center !important;
  }
}
/* No mobile (<810px) o hero .framer-zvqpvc tem altura FIXA (806px), mas o
   conteudo interno (.framer-16qd2v8: badge + titulo PT longo + texto + botoes
   + video) cresce e transborda pra baixo, cobrindo a grade de stats — quanto
   mais estreita a tela, maior o transbordo (244px @320, 58px @375). Liberar a
   altura faz o hero conter o video e a grade fluir abaixo com o espacamento
   de secao natural, em qualquer largura. --- */
@media (max-width: 809px) {
  .framer-zvqpvc { height: auto !important; }
}

/* --- 4. Glow roxo/laranja do template (SVG decorativo) vazando atrás da
   foto em "Nossa História". Wrapper .framer-16ai653 --- */
.framer-16ai653 { display: none !important; }

/* --- 4b. Seção "Nossa missão / Nossa garantia": no card de garantia
   (.framer-banxir) o corpo do texto (.framer-17b4xg6) estava em top:39px,
   na MESMA altura do título (top:37px) → sobrepunha. Empurramos o corpo
   pra baixo do título e damos altura suficiente ao card pro texto PT. --- */
.framer-banxir { height: 345px !important; }
.framer-17b4xg6 { top: 88px !important; }

/* --- 4c. Seção "Visão da Empresa" (#vision): removido o selo "Desde 1999"
   (.framer-2qcwae) e o ícone/SVG decorativo do prédio (.framer-1uqwlsw)
   acima do título "Qualidade desde o começo". A pedido. --- */
.framer-2qcwae, .framer-1uqwlsw { display: none !important; }

/* --- 5. FAQ tinha "Vai ter custo extra durante a obra?" duplicado (último
   item). O FAQ é renderizado pelo JS (2 entradas no bundle); escondemos a
   2ª ocorrência pelo container único do item duplicado. O 1º permanece. --- */
.framer-1fhq00-container { display: none !important; }

/* --- 6. Seção "Como funciona" (How it works): nos cards de etapa o padding
   interno (28px) estava grosso e o vão número↔texto (32px) deixava uma coluna
   vazia larga sob o número. Afinamos o padding e aproximamos o conteúdo. --- */
[data-framer-name="Card"] { padding: 22px !important; gap: 18px !important; }

/* --- 7. Modal do formulário de orçamento (gassen-form.js). Captura nome,
   CPF/CNPJ, endereço da obra e contato antes de abrir o WhatsApp. --- */
.gassen-form-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(5, 16, 26, 0.72);
  backdrop-filter: blur(4px);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: gassen-fade 0.18s ease-out;
}
.gassen-form-overlay[hidden] { display: none; }
@keyframes gassen-fade { from { opacity: 0; } to { opacity: 1; } }

/* Dropdown de sugestões de endereço (Photon). Fica em fluxo, abaixo do
   input, pra não ser cortado pelo overflow-y do card. */
.gassen-ac-list {
  margin: 6px 0 0; padding: 6px; list-style: none;
  max-height: 220px; overflow-y: auto;
  background: #ffffff;
  border: 1.5px solid #e7ecef; border-radius: 12px;
}
.gassen-ac-list[hidden] { display: none; }
.gassen-ac-opt {
  padding: 9px 10px; border-radius: 9px;
  font-size: 14px; font-weight: 500; line-height: 1.35; color: #0a1119;
  cursor: pointer;
}
.gassen-ac-opt:hover { background: #f0f3f6; }
.gassen-ac-opt[aria-selected="true"] { background: #0a1119; color: #ffffff; }

.gassen-form-card {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: #ffffff;
  color: #0a1119;
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 60px rgba(5, 16, 26, 0.45);
  animation: gassen-rise 0.22s ease-out;
}
@keyframes gassen-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.gassen-form-close {
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px;
  border: none; background: transparent;
  font-size: 26px; line-height: 1; color: #6b7785;
  cursor: pointer; border-radius: 8px;
}
.gassen-form-close:hover { background: #f0f2f6; color: #0a1119; }

.gassen-form-card h2 {
  margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #0a1119;
}
.gassen-form-sub {
  margin: 0 0 20px; font-size: 14px; line-height: 1.45; color: #56606b;
}

.gassen-form { display: flex; flex-direction: column; gap: 14px; }
.gassen-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: #0a1119;
}
.gassen-form input {
  width: 100%; box-sizing: border-box;
  height: 46px; margin: 0; padding: 0 13px;
  font-size: 15px; line-height: 1.4; font-family: inherit; color: #0a1119;
  background: #f6f8fa;
  border: 1.5px solid #e7ecef; border-radius: 10px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, background 0.15s;
}
.gassen-form input:focus {
  outline: none; border-color: #0a1119; background: #ffffff;
}

/* Dropdown "o que você busca" — listbox com miniatura (substitui o campo WhatsApp).
   Lista em fluxo (não absoluta) pra não ser cortada pelo overflow do card. */
.gassen-form-field { display: flex; flex-direction: column; gap: 6px; }
.gassen-select-label { font-size: 13px; font-weight: 600; color: #0a1119; }

.gassen-select {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  min-height: 46px; padding: 0 13px;
  font-size: 15px; font-family: inherit; color: #0a1119; text-align: left;
  background: #f6f8fa;
  border: 1.5px solid #e7ecef; border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gassen-select:hover { background: #eef1f4; }
.gassen-select:focus-visible,
.gassen-select[aria-expanded="true"] { outline: none; border-color: #0a1119; background: #ffffff; }
.gassen-select[aria-invalid="true"] { border-color: #c0535b; }

.gassen-select-thumb { width: 30px; height: 30px; flex: 0 0 auto; object-fit: cover; border-radius: 7px; }
.gassen-select-val { flex: 1 1 auto; line-height: 1.3; }
.gassen-select-ph { color: #8b95a0; }

.gassen-select-caret {
  flex: 0 0 auto; width: 9px; height: 9px; margin-left: 4px;
  border-right: 2px solid #6b7785; border-bottom: 2px solid #6b7785;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s;
}
.gassen-select[aria-expanded="true"] .gassen-select-caret { transform: rotate(-135deg) translateY(2px); }

.gassen-select-list {
  margin: 6px 0 0; padding: 6px; list-style: none;
  max-height: 252px; overflow-y: auto;
  background: #ffffff;
  border: 1.5px solid #e7ecef; border-radius: 12px;
}
.gassen-select-list[hidden] { display: none; }

.gassen-select-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 8px; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; color: #0a1119;
  cursor: pointer;
}
.gassen-select-opt img { width: 44px; height: 34px; flex: 0 0 auto; object-fit: cover; border-radius: 7px; background: #eef1f4; }
.gassen-select-opt:hover { background: #f0f3f6; }
.gassen-select-opt[aria-selected="true"] { background: #0a1119; color: #ffffff; }

.gassen-form-erro {
  margin: 2px 0 0; padding: 9px 12px;
  font-size: 13px; color: #832930;
  background: #fbe9ea; border-radius: 8px;
}
.gassen-form-erro[hidden] { display: none; }

.gassen-form-enviar {
  margin-top: 6px; padding: 13px 16px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  color: #ffffff; background: #0a1119;
  border: none; border-radius: 10px; cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.gassen-form-enviar:hover { background: #1a2733; }
.gassen-form-enviar:active { transform: scale(0.99); }

/* --- 8. Seção "Como nos Encontrar" (Onde Estamos): subtítulo da cidade
   abaixo do título. --- */
.framer-1qmgqfc::after {
  content: "Dois Irmãos \2013  RS";
  display: block;
  text-align: center;
  font-family: "Switzer", "Switzer Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(5, 16, 26, 0.55);
  margin-top: 12px;
}

/* --- 9. "Nossa História": removida a foto da fachada à direita. A seção tem
   duas variantes de breakpoint com classes distintas: SSR/base usa
   .framer-6ntvev (coluna) dentro de .framer-1gggyy0; o desktop hidratado usa
   .framer-milre8 (texto) + .framer-19n77lu (imagem) dentro de .framer-1ilwik0.
   .framer-19n77lu é o componente Image (compartilhado por todas as variantes),
   então escondê-lo remove a fachada em qualquer breakpoint. O texto passa a
   ocupar a linha sozinho, alinhado à esquerda. A pedido. --- */
.framer-19n77lu { display: none !important; }            /* fachada (todas variantes) */
.framer-6ntvev { display: none !important; }             /* coluna-imagem variante SSR/base */
.framer-1gggyy0 { justify-content: flex-start !important; }
.framer-1sxo5w1-container { flex: 1 1 auto !important; max-width: none !important; }
.framer-1ilwik0 { justify-content: flex-start !important; }
/* Sem a foto, o texto ocupa o card inteiro (era max-width:860px → sobrava ~490px
   de branco à direita, já que o card vai até 1350px). A pedido: texto "fill". */
.framer-milre8 { flex: 1 1 auto !important; max-width: none !important; width: 100% !important; }

/* --- 10. Galeria de projetos: botão "Ver todos" removido (não há página de
   listagem). Os cards viram clicáveis e abrem um modal com a imagem à esquerda
   e as informações do projeto à direita (ver gassen-projetos.js). --- */
.framer-qasvjc { display: none !important; }          /* botão "Ver todos" */

a.framer-lux5qc[href="./"] { cursor: zoom-in; }

/* overlay */
.gassen-proj-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 16, 26, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: gassen-proj-fade 0.18s ease;
}
.gassen-proj-overlay[hidden] { display: none; }

@keyframes gassen-proj-fade { from { opacity: 0; } to { opacity: 1; } }

/* card horizontal: imagem à esquerda, infos à direita */
.gassen-proj-card {
  position: relative;
  display: flex;
  flex-direction: row;
  width: min(980px, 100%);
  height: min(600px, calc(100vh - 48px));
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  animation: gassen-proj-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gassen-proj-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.gassen-proj-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(5, 16, 26, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gassen-proj-close:hover { background: rgba(5, 16, 26, 0.85); }

.gassen-proj-img {
  flex: 1 1 54%;
  min-width: 0;
  background: #0a1119;
  display: flex;
  flex-direction: column;
}
.gassen-proj-img-main {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  object-fit: cover;
}

/* tira de miniaturas (só quando o projeto tem mais de uma foto) */
.gassen-proj-thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #0a1119;
  overflow-x: auto;
}
.gassen-proj-thumbs[hidden] { display: none; }
.gassen-proj-thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 50px;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gassen-proj-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gassen-proj-thumb:hover { opacity: 1; }
.gassen-proj-thumb.is-active { opacity: 1; border-color: #fff; }

.gassen-proj-info {
  flex: 1 1 46%;
  min-width: 0;
  padding: 36px 34px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.gassen-proj-tag {
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 4px 10px;
  font-family: "Switzer", "Switzer Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #0a1119;
  border-radius: 999px;
}
.gassen-proj-titulo {
  margin: 0 0 20px;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  color: #092034;
}
.gassen-proj-meta {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gassen-proj-meta .gp-row { margin: 0; }
.gassen-proj-meta dt {
  font-family: "Switzer", "Switzer Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(5, 16, 26, 0.45);
  margin-bottom: 3px;
}
.gassen-proj-meta dd {
  margin: 0;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #092034;
}
.gassen-proj-descricao {
  margin: 4px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(5, 16, 26, 0.08);
  font-family: "Switzer", "Switzer Placeholder", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(5, 16, 26, 0.7);
}

@media (max-width: 760px) {
  .gassen-proj-overlay { padding: 12px; }
  .gassen-proj-card { flex-direction: column; max-height: calc(100vh - 24px); }
  .gassen-proj-img { flex: none; }
  .gassen-proj-img-main { min-height: 0; max-height: 38vh; }
  .gassen-proj-info { flex: 1 1 auto; padding: 24px 22px; }
  .gassen-proj-titulo { font-size: 22px; }
}

/* --- 11. Galeria de projetos em grade 3×2 (3 colunas, 2 linhas) no desktop.
   O Framer exporta 2 colunas; aqui forçamos 3. Abaixo de 810px o próprio
   Framer já colapsa para 1 coluna, então não mexemos no mobile. --- */
@media (min-width: 810px) {
  .framer-tsjbzw { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* --- 12. Remove o card "Estrutura metálica sob medida" da galeria.
   Mira o wrapper que contém a imagem desse card (seletor por conteúdo, não
   por ordem, então não quebra se a grade for reordenada). --- */
.framer-tsjbzw > div:has(img[src*="wAdSPQGdzEABwWjwwWOqCZX5pQ"]) {
  display: none !important;
}

/* --- 13. Títulos dos cards da galeria: o Framer usa white-space:pre (linha
   única), o que corta títulos longos ("Novo Hamburgo/RS") na borda do card
   estreito da grade 3-col. Permite quebrar em 2 linhas. --- */
a.framer-lux5qc .framer-165q7om {
  white-space: normal !important;
}

/* =========================================================
   14–19. RESPONSIVIDADE + ACESSIBILIDADE (WCAG 2.2 AA)
   Auditoria 20–21/06/2026 (varredura 320→1920 + a11y).
   Filosofia: "corrigir o que quebra" — mantém o sistema de
   breakpoints do Framer; só ajusta onde texto/layout quebram ou
   falham contraste/foco/toque. Não altera a paleta da marca.
   ========================================================= */

/* --- 14. P0 responsivo — HERO cortado no celular (≤479px).
   O selo "27 Anos Fabricando..." (.framer-1m4ugx9) usa
   white-space:pre e o wrapper .framer-1lzn3hd é
   width:min-content + overflow:clip → a frase fica numa única
   linha de ~462px e é cortada nas DUAS bordas abaixo de ~440px.
   Liberamos o selo a quebrar em linhas e o wrapper a ocupar a
   largura disponível. (O subtítulo .framer-hij921 já é pre-wrap /
   width:100%, então não precisa de ajuste.) --- */
@media (max-width: 479px) {
  .framer-1lzn3hd {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
  }
  /* white-space:normal sozinho não basta: um flex item flex:none/width:auto
     dimensiona por max-content (ignora a quebra). Capamos a largura à
     viewport (menos a margem do hero) p/ forçar a quebra de fato. */
  .framer-1m4ugx9,
  .framer-1m4ugx9 .framer-text {
    white-space: normal !important;
    max-width: calc(100vw - 40px) !important;
    text-align: center;
  }
}

/* --- 15. P1 — quebra no MEIO da palavra em telas estreitas.
   Causa real: no card "Nosso Diferencial" (.framer-z5cxx6, vidro
   escuro) o padding interno de 40px SOMA com o gutter de 40px da
   seção → no celular sobra só ~215px e "metalúrgica." (≈230px) não
   cabe, então quebra no meio. Afinamos o padding do card no mobile
   (40→22px, ainda confortável) e trocamos word-break:break-word
   (legado, parte no meio) por word-break:normal + overflow-wrap.
   hyphens:auto (lang=pt-BR → Chrome hifeniza em PT) é a rede de
   segurança: se ainda não couber, quebra com hífen de verdade
   ("meta-/lúrgica") em vez de "metalúrgic/a.". text-wrap:pretty
   evita a órfã do "?" em "Como nos Encontrar?". --- */
@media (max-width: 810px) {
  .framer-z5cxx6 { padding: 22px !important; }
  .framer-xltav9 .framer-text,      /* "Não é qualquer metalúrgica." */
  .framer-1qmgqfc .framer-text {    /* "Como nos Encontrar?"         */
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: pretty;
  }
}
/* No celular pequeno (≤360px) o heading de 40px não cabe "metalúrgica."
   na coluna estreita e ainda quebrava no meio. Aqui — e só aqui — vale
   um toque de escala fluida: reduz o heading proporcional à viewport
   (clamp 28→40px) p/ a palavra caber inteira. 375px+ fica intacto. */
@media (max-width: 360px) {
  .framer-xltav9 .framer-text {
    font-size: clamp(28px, 8.6vw, 40px) !important;
    line-height: 1.12 !important;
  }
}
/* "Como nos Encontrar?" é 48px e "Encontrar?" (~264px) não cabe na
   coluna de ~242px no celular → quebrava órfão ("?" sozinho). Em ≥768px
   cabe (mantém 48px). Escala fluida no mobile (48→34px) faz a palavra
   caber inteira: "Como nos / Encontrar?". */
@media (max-width: 810px) {
  .framer-1qmgqfc .framer-text {
    font-size: clamp(34px, 6.25vw, 48px) !important;
    line-height: 1.1 !important;
  }
}

/* --- 16. P0 a11y — CONTRASTE (WCAG 1.4.3). Cinzas que falhavam AA
   sobre branco, levados ao tom legível mais próximo da navy da
   marca (sem trocar a cor). --- */
.gassen-proj-meta dt { color: rgba(5, 16, 26, 0.75) !important; }  /* era 0.45 → ~1.7:1; agora ~5.2:1 */
.framer-1qmgqfc::after { color: rgba(5, 16, 26, 0.72); }           /* subtítulo cidade: era 0.55 */
.gassen-proj-descricao { color: rgba(5, 16, 26, 0.75); }           /* era 0.7: margem de segurança AA */

/* --- 17. P0/P2 a11y — FOCO VISÍVEL por teclado (WCAG 2.4.7).
   Os inputs do form removiam o outline; os botões custom não
   tinham indicador. :focus-visible só aparece em navegação por
   teclado (não polui o clique de mouse). Contornos claros sobre
   fundo escuro, escuros sobre fundo claro. --- */
.gassen-form input:focus-visible {
  outline: 2px solid #0a1119;
  outline-offset: 2px;
}
.gassen-form-close:focus-visible,
.gassen-form-enviar:focus-visible {
  outline: 2px solid #0a1119;
  outline-offset: 2px;
}
.gassen-vid-toggle:focus-visible,
.gassen-proj-close:focus-visible,
.gassen-proj-thumb:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(5, 16, 26, 0.55);
}

/* --- 18. P1 a11y — ALVOS DE TOQUE ≥44px (WCAG 2.5.8). Botões de
   fechar dos modais (eram 32 e 38px). --- */
.gassen-form-close {
  width: 44px !important; height: 44px !important;
  display: flex !important; align-items: center; justify-content: center;
}
.gassen-proj-close { width: 44px !important; height: 44px !important; }

/* --- 19. P1 a11y — respeitar prefers-reduced-motion (WCAG 2.3.3).
   Desliga as animações de entrada de modais/overlays para quem
   pediu menos movimento no sistema. --- */
@media (prefers-reduced-motion: reduce) {
  .gassen-form-overlay, .gassen-form-card,
  .gassen-proj-overlay, .gassen-proj-card {
    animation: none !important;
  }
}

/* --- 20. P0 mobile — Seção "Visão da Empresa" (#vision): cards "Nossa missão"
   e "Nossa garantia" sumiam no celular. A faixa .framer-pp116t tem 572px de
   largura (mais que a viewport) e os dois cards são position:absolute com
   offsets fixos de desktop: missão (.framer-1d6ryb) em left:-296px e garantia
   (.framer-banxir) em left:+428px → ambos caem FORA da viewport de ~390px e a
   seção (overflow:hidden) os recorta. Além disso a regra 4b força height:345px
   global na garantia, quebrando o card de 180px no mobile.
   Correção: no mobile reconstruímos a faixa em coluna (foto → missão → garantia)
   e tiramos o conteúdo interno dos cards do absoluto pro fluxo normal. --- */
@media (max-width: 809px) {
  .framer-wqoygq { height: auto !important; overflow: visible !important; }
  .framer-1tqgybe { height: auto !important; }
  .framer-pp116t {
    width: 100% !important; height: auto !important; left: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 16px !important;
  }
  /* foto da seção */
  .framer-krz8g8 {
    position: relative !important; inset: auto !important;
    width: 100% !important; height: 220px !important; overflow: hidden !important;
  }
  /* os dois cards: do absoluto pro fluxo, largura total, altura pelo conteúdo.
     transform:none zera o translateX do Framer (missão -289px / garantia +241px)
     que jogava os cards pra fora da tela. */
  .framer-1d6ryb, .framer-banxir {
    position: relative !important; inset: auto !important; transform: none !important;
    width: 100% !important; height: auto !important;
    padding: 22px !important;
    display: flex !important; flex-direction: column !important; gap: 8px !important;
  }
  /* conteúdo interno dos cards (título + corpo) tb estava absoluto. O corpo da
     garantia (.framer-17b4xg6) ainda recebe um translateX(-138px) do JS do Framer
     que jogava o texto pra fora da tela pela esquerda → transform:none zera. */
  .framer-1tshuoq, .framer-1pgv3i1,   /* missão: título / corpo  */
  .framer-1a9ld6f, .framer-17b4xg6 {  /* garantia: título / corpo */
    position: relative !important; inset: auto !important; transform: none !important;
    width: 100% !important; max-width: 100% !important;
  }
}

/* --- 21. P0 mobile — Seção "Como funciona": o 4º card de etapa
   ("Fabricação, instalação e entrega") era cortado no rodapé. Cada [Card] tem
   height:184px fixo + overflow:hidden, e a cadeia toda (.framer-1dqvr20 "How it
   works" → .framer-kunkra → .framer-12eo4ac → .framer-wtfl3v "Card container")
   tem alturas fixas com overflow recortando. O texto PT (mais longo que o EN
   original) estoura os 184px e some. Correção: altura pelo conteúdo em toda a
   cadeia. Vale até o tablet (≤1199px), onde o mesmo recorte aparecia (~6px no
   rodapé de cada card); no desktop (≥1200px) o texto já cabe, então não mexe. */
@media (max-width: 1199px) {
  .framer-1dqvr20 { height: auto !important; overflow: visible !important; }
  .framer-kunkra,
  .framer-12eo4ac { height: auto !important; overflow: visible !important; }
  .framer-wtfl3v { height: auto !important; overflow: visible !important; }
  .framer-wtfl3v > div { height: auto !important; }   /* wrappers de cada card */
  [data-framer-name="Card"] {
    height: auto !important; min-height: 184px !important; overflow: visible !important;
  }
}

/* --- 22. P0 mobile — CTA "Nossa fila está aberta": o mockup (homem + celular
   com a conversa do WhatsApp) ficava CORTADO no rodapé da seção. No layout
   mobile (.framer-v-1mekbp6) a "Mobile Image Wrapper" (.framer-rlcd0s) tem
   janela fixa de 358×371 com overflow:hidden, e o componente do celular
   (.framer-f88a97-container, ~198×393) é position:absolute em bottom:-74px /
   right:-25px → o topo (~130px) e o rodapé (~74px) do mockup eram recortados,
   cortando exatamente o celular que mostra a conversa. No desktop esse recorte
   é um "peek" intencional (layout em linha, imagem espiando do canto); no mobile
   (coluna) o mockup é o ponto da seção e precisa aparecer inteiro.
   Correção: a janela cresce pela altura do mockup (overflow visível) e o
   componente sai do absoluto pro fluxo, centralizado abaixo do botão. --- */
@media (max-width: 809px) {
  .framer-02fzv.framer-v-1mekbp6 .framer-rlcd0s {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }
  .framer-02fzv.framer-v-1mekbp6 .framer-f88a97-container {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
  }
}

/* --- 23. Topbar — conteúdo com max-width igual ao do corpo do site.
   A nav desktop (.framer-6TlVy.framer-v-1fxaug) é full-bleed (width:100%) e tem
   3 filhos flex: logo (.framer-1aajq5a, flex:1) | menu central (377px fixo) |
   botão "Pedir orçamento" (.framer-7pnoh4, flex:1). Como os dois lados crescem
   sozinhos, em telas largas a logo é empurrada até x≈11 (canto) e o botão até a
   borda direita — desalinhados do corpo, cujas seções vivem num frame de 1200px
   centrado (em 1920px: 360→1560). Correção: manter a barra escura full-bleed e
   empurrar só o conteúdo para a mesma faixa de 1200px centrada, via padding
   calculado. Abaixo de ~1222px o calc fica ≤11px → cai no piso e nada muda
   (tablet ≤1199px usa a mesma variante e não deve ser afetado). --- */
.framer-6TlVy.framer-v-1fxaug {
  padding-left: max(11px, calc((100% - 1200px) / 2)) !important;
  padding-right: max(11px, calc((100% - 1200px) / 2)) !important;
}

/* --- 24. Seção "Nosso Diferencial" — o título grande passou a ser
   "Nosso diferencial" (antes "Não é qualquer metalúrgica."). O kicker pequeno
   "— Nosso Diferencial" (.framer-4jsqya-container, instância única no DOM)
   virou redundante com o novo título, então é ocultado. --- */
.framer-4jsqya-container {
  display: none !important;
}

/* --- 25. Modal de catálogos (gassen-catalogo.js). O botão "Ver Catálogo
   completo" abre este modal: lista de catálogos à esquerda + pré-visualização
   do PDF (iframe) à direita. Os PDFs carregam só ao abrir (lazy). Reusa a
   linguagem visual do modal de orçamento (bloco 7): backdrop escuro, card
   branco, Sora, radius 16px. --- */
.gassen-cat-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(5, 16, 26, 0.72);
  backdrop-filter: blur(4px);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: gassen-fade 0.18s ease-out;
}
.gassen-cat-overlay[hidden] { display: none; }

.gassen-cat-card {
  position: relative;
  display: flex;
  width: 100%; max-width: 1000px;
  height: min(86vh, 760px);
  background: #ffffff;
  color: #0a1119;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(5, 16, 26, 0.45);
  animation: gassen-rise 0.22s ease-out;
}

.gassen-cat-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 36px; height: 36px;
  border: none; background: rgba(255, 255, 255, 0.9);
  font-size: 26px; line-height: 1; color: #6b7785;
  cursor: pointer; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.gassen-cat-close:hover { background: #f0f2f6; color: #0a1119; }

/* coluna esquerda — lista de catálogos */
.gassen-cat-side {
  flex: 0 0 300px;
  padding: 28px 22px;
  background: #f6f8fa;
  border-right: 1px solid #e6eaef;
  overflow-y: auto;
}
.gassen-cat-side h2 {
  margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #0a1119;
}
.gassen-cat-sub {
  margin: 0 0 18px; font-size: 13px; line-height: 1.45; color: #56606b;
}
.gassen-cat-list { display: flex; flex-direction: column; gap: 12px; }

.gassen-cat-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 12px; margin: 0;
  text-align: left; cursor: pointer;
  background: #ffffff;
  border: 1.5px solid #e2e7ec; border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gassen-cat-item:hover {
  border-color: #c2ccd6;
  box-shadow: 0 6px 18px rgba(5, 16, 26, 0.10);
  transform: translateY(-1px);
}
.gassen-cat-item[aria-selected="true"] {
  border-color: #0a1119;
  box-shadow: 0 8px 22px rgba(5, 16, 26, 0.16);
}
.gassen-cat-thumb {
  flex: 0 0 auto;
  width: 58px; height: 82px;
  object-fit: cover; border-radius: 6px;
  background: #e6eaef;
  box-shadow: 0 2px 6px rgba(5, 16, 26, 0.18);
}
.gassen-cat-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gassen-cat-nome { font-size: 14.5px; font-weight: 700; color: #0a1119; line-height: 1.25; }
.gassen-cat-meta { font-size: 12px; font-weight: 500; color: #6b7785; }

/* coluna direita — pré-visualização */
.gassen-cat-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.gassen-cat-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 62px 16px 20px;   /* reserva o canto direito p/ o botão fechar */
  border-bottom: 1px solid #e6eaef;
}
.gassen-cat-atual { font-size: 14px; font-weight: 700; color: #0a1119; }
.gassen-cat-baixar {
  flex: 0 0 auto;
  padding: 9px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: #ffffff; background: #0a1119;
  transition: background 0.15s ease;
}
.gassen-cat-baixar:hover { background: #1b2733; }
.gassen-cat-viewer { position: relative; flex: 1 1 auto; background: #525659; min-height: 0; }
.gassen-cat-frame { width: 100%; height: 100%; border: 0; display: block; }

/* estado de carregamento — fica sobre o iframe até o PDF renderizar */
.gassen-cat-load {
  position: absolute; inset: 0; z-index: 1;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #525659; color: #cfd6dd;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.gassen-cat-load.is-on { display: flex; }
.gassen-cat-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #ffffff;
  animation: gassen-cat-spin 0.8s linear infinite;
}
@keyframes gassen-cat-spin { to { transform: rotate(360deg); } }

/* a11y — foco visível */
.gassen-cat-close:focus-visible,
.gassen-cat-item:focus-visible,
.gassen-cat-baixar:focus-visible {
  outline: 2px solid #0a1119; outline-offset: 2px;
}
.gassen-cat-baixar:focus-visible { outline-color: #ffffff; }

/* mobile — empilha: lista em cima (linha rolável), preview embaixo */
@media (max-width: 720px) {
  .gassen-cat-overlay { padding: 0; }
  .gassen-cat-card {
    flex-direction: column;
    max-width: 100%; height: 100%; border-radius: 0;
  }
  .gassen-cat-side {
    flex: 0 0 auto;
    padding: 18px 16px 14px;
    border-right: 0; border-bottom: 1px solid #e6eaef;
  }
  .gassen-cat-sub { margin-bottom: 12px; }
  .gassen-cat-list { flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
  .gassen-cat-item { flex: 0 0 auto; width: auto; }
  .gassen-cat-thumb { width: 40px; height: 56px; }
}

/* respeita prefers-reduced-motion (complementa o bloco 19) */
@media (prefers-reduced-motion: reduce) {
  .gassen-cat-overlay, .gassen-cat-card, .gassen-cat-item { animation: none !important; transition: none !important; }
  .gassen-cat-spin { animation: none !important; border-top-color: rgba(255, 255, 255, 0.22); }
}