/* =======================================================================
   V2F — STYLE SHEET (CONSOLIDADO, ORGANIZADO E DOCUMENTADO)
   Versão: 2.0.0
   Data: 2025-10-07
   Autor: V2F
   Licença: Interna
   =======================================================================
   TABELA DE CONTEÚDO
   00) CHANGELOG & CONVENÇÕES
   01) TOKENS / THEME (cores, spacing, radius, shadow, timing, z-index)
   02) BASE / RESET LEVE / TIPOGRAFIA / UTILITÁRIOS
   03) COMPONENTES GERAIS (Navbar, Botões, Ícones)
   04) INDEX — GALERIA (grid + efeito "pf-meta")
   05) PORTFÓLIO (hero, grid, cards, meta)
   06) SOBRE (hero, grids, marcas, stats, bloco final)
   07) SERVIÇOS (hero, lista, cards, seção escura)
   08) CONTATO (hero, mapa, info, FAQ, cards)
   09) FOOTER (top, nav, bottom)
   10) ACESSIBILIDADE / MOTION / FALLBACKS
   11) RESPONSIVIDADE (complementos globais)
   12) DARK MODE (opcional via .theme-dark)
   13) PRINT STYLES
   ======================================================================= */


/* =======================================================================
   00) CHANGELOG & CONVENÇÕES
   -----------------------------------------------------------------------
   CHANGELOG 2.0.0
   - Reordenação total por seções, com comentários extensivos.
   - Correções: .portfolio-grid (classe com ponto), grid .pf-grid responsiva.
   - Galeria (index): efeito "pf-meta" nativo; removidos conflitos.
   - Tokens ampliados: spacing, radius, shadow, timing/easing, z-index.
   - Acessibilidade: focus-ring unificado; skip-link; motion-reduced.
   - Dark mode opcional e estilos de impressão básicos.
   - Manutenção: estrutura e nomes estáveis (BEM-ish).

   CONVENÇÕES
   - Nomes de classe: estilo BEM simplificado (ex.: .pf-card, .svc-item).
   - Tokens centralizados em :root (use-os sempre que possível).
   - Ajustes responsivos preferencialmente junto ao módulo; globais no §11.
   - Evitar !important; usar ordem/escopo e especificidade consciente.
   - Breakpoints (Bootstrap):
       xs <576 | sm ≥576 | md ≥768 | lg ≥992 | xl ≥1200 | xxl ≥1400
   ======================================================================= */


/* =======================================================================
   01) TOKENS / THEME
   -----------------------------------------------------------------------
   Editar aqui propaga para todo o site.
   ======================================================================= */
:root{
  /* CORES */
  --brand-ink: #0F3D3D; /* Títulos/links fortes */
  --brand:      #0E4F4F; /* Primária */
  --brand-acc:  #22A08A; /* Acento/Foco */
  --bg:         #FFFFFF; /* Fundo base */
  --surface:    #F5F7F6; /* Cartões */
  --text:       #1A1F1D; /* Corpo de texto */
  --muted:      #677370; /* Texto secundário */

  /* TIPOGRAFIA (base + escala) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --fs-100: .75rem;
  --fs-200: .875rem;
  --fs-300: .95rem;
  --fs-400: 1rem;       /* base */
  --fs-500: 1.125rem;
  --fs-600: 1.25rem;
  --fs-700: 1.5rem;
  --fs-800: 2rem;
  --fs-900: clamp(2.2rem, 1rem + 6vw, 5rem);

  /* ESPAÇAMENTO (4px grid) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 56px;
  --space-14: 64px;
  --space-16: 80px;

  /* RAIO (bordas) */
  --radius-0: 0;
  --radius-1: 8px;
  --radius-2: 10px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-5: 20px;
  --radius-pill: 999px;

  /* SOMBRAS (elevação leve) */
  --shadow-1: 0 8px 24px rgba(0,0,0,.06);
  --shadow-2: 0 10px 30px rgba(0,0,0,.06);
  --shadow-3: 0 16px 40px rgba(0,0,0,.16);
  --shadow-4: 0 24px 60px rgba(0,0,0,.08);

  /* TEMPO/EASING (animações/transições) */
  --dur-1: .18s;
  --dur-2: .25s;
  --dur-3: .35s;
  --dur-4: .6s;
  --ease-std: cubic-bezier(.2,.8,.2,1);

  /* Z-INDEX (camadas) */
  --z-base: 1;
  --z-overlay: 10;
  --z-nav: 1000;

  /* LAYOUT NAVBAR */
  --nav-h: 72px;

  /* GALERIA (index) */
  --grid-gap:    28px;
  --grid-row:    360px;
  --grid-row-md: 220px;
  --big-h:       calc(var(--grid-row) * 2 + var(--grid-gap));
  --big-h-md:    calc(var(--grid-row-md) * 2 + var(--grid-gap));
}


/* =======================================================================
   02) BASE / RESET LEVE / TIPOGRAFIA / UTILITÁRIOS
   ======================================================================= */

/* Reset essencial e caixa de layout consistente */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body.theme-light{
  background: var(--bg);
  color: var(--text);
  padding-top: var(--nav-h);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Mídia embutida nunca extravasa */
img, svg, video, canvas, audio, iframe{
  display: block;
  max-width: 100%;
}

/* Links herdam cor por padrão; componentes definem variações */
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--brand); }

/* Utilitários rápidos */
.fw-800{ font-weight: 800; }
.text-brand-ink{ color: var(--brand-ink); }
.fullscreen-first{
  min-height: calc(100vh - var(--nav-h));
  display: grid; place-items: center;
}
.text-titu-font{
  font-size: .95rem;
}

/* Acessibilidade: link para pular conteúdo */
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  position: fixed; left: var(--space-4); top: var(--space-4);
  width: auto; height: auto; padding: var(--space-3) var(--space-4);
  background: #000; color:#fff; border-radius: var(--radius-3);
  z-index: var(--z-nav);
}

/* Esconder visualmente mantendo leitura por leitores de tela */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); border:0; white-space: nowrap;
}


/* =======================================================================
   03) COMPONENTES GERAIS (Navbar, Botões, Ícones)
   ======================================================================= */

/* Navbar Bootstrap com tokens do tema */
.bl-navbar{
  --bs-navbar-color: var(--brand-ink);
  --bs-navbar-hover-color: var(--brand);
  --bs-navbar-brand-color: var(--brand-ink);
  --bs-navbar-brand-hover-color: var(--brand);
}

.navbar .navbar-toggler{ border-color: rgba(0,0,0,.1); }

/* Tipografia do menu (responsiva) */
.bl-navbar .navbar-nav .nav-link a{
  font-size: clamp(4.95rem, 10.8rem + 0.6vw, 3.125rem);
  font-family: 'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;
}
@media (min-width: 992px){ .bl-navbar .navbar-nav .nav-link{ font-size: 1.425rem; } }
@media (max-width: 991.98px){ .bl-navbar .navbar-nav .nav-link{ font-size: 1rem; } }

/* Botão primário do tema (sobrepõe vars do Bootstrap) */
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #0b3e3e;
  --bs-btn-hover-border-color: #0b3e3e;
  color: #fff;
  border-radius: var(--radius-3);
}

/* Ícones circulares (footer e afins) */
.foot-icon{
  color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: rgba(14,79,79,.06);
  transition: transform var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease;
}
.foot-icon:hover{
  transform: translateY(-2px);
  background: rgba(14,79,79,.12);
  color: var(--brand);
}
.color-simbol{ color: var(--brand-acc); }


/* =======================================================================
   04) INDEX — GALERIA (grid + efeito "pf-meta")
   ======================================================================= */

/* Grade principal (desktop-first) */
.gallery-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr; /* 1ª coluna maior */
  gap: var(--grid-gap);
  grid-auto-rows: var(--grid-row);
}

/* Card base de imagem (container do overlay) */
.gallery-item{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-4);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  display: block;
}

/* Imagem ocupa todo o card (cover) */
.gallery-item > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform var(--dur-4) var(--ease-std), filter var(--dur-4) ease;
}

/* Hover/Focus: leve zoom e mais saturação */
.gallery-item:hover > img,
.gallery-item:focus-within > img{
  transform: scale(1.04);
  filter: saturate(1.05);
}

/* Card grande (ocupa 2 linhas) */
.gallery-item--big{
  grid-row: span 2;
  min-height: var(--big-h);
}

/* Layout alternado: card grande à direita (>= 993px) */
@media (min-width: 993px){
  .gallery-grid.gallery-grid--invert .gallery-item--big{
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* Degradê do overlay (rodapé) */
.gallery-item::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-4);
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);
  opacity: 0;
  transition: opacity var(--dur-3) ease;
  z-index: var(--z-base);
}
.gallery-item:hover::after,
.gallery-item:focus-within::after{ opacity: 1; }

/* Caption interno ao estilo "pf-meta" */
.gallery-caption{
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: calc(var(--z-base) + 1);
  color: #fff;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(12px);
  opacity: 5; /* aparece no hover/focus (desktop) */
  transition: transform var(--dur-3) ease, opacity var(--dur-3) ease;
  pointer-events: none; /* não bloqueia clique do link */
}
.gallery-item:hover .gallery-caption,
.gallery-item:focus-within .gallery-caption{
  transform: translateY(0);
  opacity: 1;
}

/* Título e tags do caption */
.gallery-caption .gc-title{
  font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  margin: 0;
}
.gallery-caption .gc-tags{
  font-size: .85rem;
  opacity: .9;
  margin: 0;
}

/* Pill opcional (categoria) */
.gallery-caption .pill{
  align-self: flex-start;
  background: rgba(0,0,0,.45);
  backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  padding: .35rem .6rem;
  border-radius: var(--radius-pill);
  font-size: .75rem; letter-spacing: .02em; font-weight: 700;
}

/* Acessibilidade de foco */
.gallery-item:focus{ outline: none; }
.gallery-item:focus-visible{
  outline: 2px solid var(--brand-acc);
  outline-offset: 2px;
}

/* Responsividade da galeria */
@media (max-width: 1200px){
  .gallery-grid{
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-auto-rows: var(--grid-row-md);
  }
  .gallery-item--big{ min-height: var(--big-h-md); }
}
@media (max-width: 992px){
  .gallery-grid{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: var(--grid-row-md);
  }
  .gallery-grid.gallery-grid--invert .gallery-item--big{
    grid-column: span 2; grid-row: auto;
  }
  .gallery-item--big{ min-height: calc(var(--grid-row-md) * 0); }
}
@media (max-width: 576px){
  /* Mobile: uma coluna; imagem não corta e caption sempre visível */
  .gallery-grid{
    grid-template-columns: 1fr;
    gap: 16px;
    grid-auto-rows: auto;
  }
  .gallery-item{
    background: transparent;
    contain: paint; /* otimiza repaint do overlay */
  }
  .gallery-item > img{
    position: static; width: 100%; height: auto; display: block;
    border-radius: var(--radius-4);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  }
  .gallery-item::after{ opacity: 1; }
  .gallery-caption{
    left: 10px; right: 10px; bottom: 10px;
    opacity: 1; transform: none; pointer-events: none;
  }
}


/* =======================================================================
   05) PORTFÓLIO
   ======================================================================= */
.portfolio-hero{
  padding: calc(var(--nav-h,64px) + 48px) 0 36px;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(34,160,138,.06), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(14,79,79,.05), transparent 60%),
    #f6f7f7;
}
.portfolio-hero h1{ color: var(--brand-ink); font-weight: 800; }

.portfolio-down{
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: 18px auto 0;
  color: var(--brand-ink); opacity: .8;
}
.portfolio-down:hover{ opacity: 1; color: var(--brand); }

/* Área da grid (classe corrigida) */
.portfolio-grid{ padding: 24px 0 56px; background: #fff; }

.pf-grid{
  display: grid; gap: 22px; grid-template-columns: 1fr;
}
@media (min-width: 768px){ .pf-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .pf-grid{ grid-template-columns: repeat(3, 1fr); } }
/* 4 colunas (opcional)
@media (min-width: 1400px){ .pf-grid{ grid-template-columns: repeat(4, 1fr); } } */

.pf-card{
  --rad: var(--radius-3);
  position: relative; overflow: hidden; border-radius: var(--rad);
  background: #111; aspect-ratio: 16/11; box-shadow: var(--shadow-3);
  transform: translateZ(0);
}
.pf-card img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform var(--dur-4) cubic-bezier(.2,.6,.2,1);
}

/* Meta branco central sobre a imagem */
.pf-meta{
  --pad-x: 24px; --pad-y: 16px;
  position: absolute; left: 50%; bottom: 8%;
  transform: translate(-50%, 16px);
  background: var(--surface);
  color: var(--brand-ink);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius-2);
  min-width: min(82%, 460px);
  box-shadow: 0 18px 40px rgba(0,0,0,.20), inset 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-3) ease, opacity var(--dur-3) ease;
}
.pf-title{ margin: 0 0 4px; font-weight: 800; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
.pf-tags{ margin: 0; font-size: .95rem; color: var(--muted); }

/* Interações */
.pf-card:hover img{ transform: scale(1.03); }
.pf-card:hover .pf-meta,
.pf-card:focus-within .pf-meta{
  opacity: 1; transform: translate(-50%, 0);
}
.pf-link{ position: absolute; inset: 0; border: 0; outline: none; }
.pf-card:focus-within{ outline: 2px solid var(--brand-acc); outline-offset: 2px; }

/* Variante compacta (sem gaps e sem bordas) */
.portfolio-grid.compact{ padding: 0; }
.portfolio-grid.compact .container-fluid{ padding: 0 !important; }
.portfolio-grid.compact .pf-grid{ gap: 0; }
.portfolio-grid.compact .pf-card{
  --rad: 0; border-radius: 0; margin: 0; box-shadow: none;
}
.portfolio-grid.compact .pf-card img{ border-radius: 0; }

@media (max-width: 575.98px){
  .pf-meta{ min-width: 86%; left: 50%; bottom: 6%; }
}


/* =======================================================================
   06) SOBRE
   ======================================================================= */
.about-hero{
  padding: calc(var(--nav-h) + 24px) 0 48px;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(34,160,138,.10), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(14,79,79,.08), transparent 60%),
    #fff;
}
.about-hero h1{color: var(--brand-ink); font-weight: 800;}
.about-kicker{
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; font-size: .85rem;
}
.about-title{ color: var(--brand-ink); font-weight: 800; }
.about-lead{ color: var(--muted); max-width: 720px; }

.about-grid{
  --gap: 20px;
  display: grid; gap: var(--gap);
  grid-template-columns: 1.2fr 1fr 1fr;
}
.about-card{
  position: relative; border-radius: var(--radius-4); overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  min-height: 260px;
}
.about-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.about-card--tall{ grid-row: span 2; min-height: 560px; }

.about-text{
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.125rem);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.brand-row{
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 24px; align-items: center;
}
.brand{
  height: 48px; display:flex; align-items:center; justify-content:center;
  background: var(--surface); border-radius: var(--radius-3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  color: var(--brand-ink); font-weight:600;
}

.stats{ display:grid; gap:24px; grid-template-columns: repeat(4,1fr); }
.stat{
  background:#fff; border-radius:var(--radius-4); padding:24px; text-align:center;
  box-shadow: var(--shadow-2);
}
.stat .num{ font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight:800; color: var(--brand-ink); }
.stat .label{ color: var(--muted); font-weight:600; }

.about-final{
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(34,160,138,.12), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(14,79,79,.08), transparent 60%),
    #fff;
  border-top: 1px solid rgba(0,0,0,.06);
}
.about-hero .color-simbol {
  text-align: center;
}


/* =======================================================================
   07) SERVIÇOS
   ======================================================================= */
.services-hero{
  padding: calc(var(--nav-h,64px) + 28px) 0 36px;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(34,160,138,.10), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(14,79,79,.08), transparent 60%),
    #fff;
}
.services-hero h1{ color: var(--brand-ink); font-weight: 800; }

/* Lista 01–06 (faixa clara) */
.svc-list{
  padding: 40px 0 48px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(14,79,79,.05), transparent 55%),
    #fff;
}
.svc-item{
  display: grid; grid-template-columns: auto 1fr;
  gap: 16px 24px; padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.svc-item:last-child{ border-bottom: none; }

.svc-nr{
  font-weight: 800; color: var(--brand);
  letter-spacing: .02em; min-width: 54px;
  font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); line-height: 1.2;
}
.svc-text p{ color: var(--brand-ink); margin: 0; }
.svc-tag{
  margin: 6px 0 0; color: var(--muted); font-weight: 700;
  letter-spacing: .02em; font-size: .95rem;
}

/* Cards auxiliares (ex.: Residencial, Incorporação) */
.svc-area{
  background: var(--surface); border-radius: var(--radius-4);
  padding: 18px 20px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), var(--shadow-2);
}
.svc-area-title{
  color: var(--brand-ink); font-weight: 800; margin: 0 0 6px;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
}
.svc-area-desc{ color: var(--muted); margin: 0; }

/* Seção escura “Criação e Desenvolvimento” */
.svc-create{
  padding: clamp(48px, 6vw, 96px) 0;
  background: #151515; color: #fff;
}
.svc-eyebrow{
  margin: 0 0 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; font-size: .85rem; color: var(--brand);
}
.svc-hero-title{
  margin: 0; font-weight: 800; line-height: .98; letter-spacing: -0.01em;
  font-size: var(--fs-900); max-width: 14ch;
}
.svc-cols{
  display: grid; grid-template-columns: 1fr;
  gap: 28px 56px; margin-top: clamp(24px, 2vw, 12px);
}
@media (min-width: 992px){
  .svc-cols{ grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
}
.svc-col-title{
  margin: 0 0 6px; font-weight: 800;
  font-size: clamp(1.15rem, 1rem + .4vw, 1.4rem); color: #fff;
}
.svc-col-desc{
  margin: 0; color: rgba(255,255,255,.75); line-height: 1.6;
  font-size: clamp(.95rem, .92rem + .2vw, 1.05rem);
}

/* Cards visuais “estilo print” (sobre fotos) */
.svc-grid{
  display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 768px){ .svc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .svc-grid{ grid-template-columns: repeat(3, 1fr); } }

.svc-card{
  position: relative; border-radius: var(--radius-3); overflow: hidden;
  aspect-ratio: 4 / 5; 
  background: #111; 
  box-shadow: 0 10px 26px rgba(0,0,0,.2);
  transform: translateZ(0);
}
.svc-card img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.9) contrast(1.1);
  transition: transform .5s ease;
}
.svc-card::after{
  content:""; position: absolute; inset: 0;
  pointer-events: none;
}
.svc-overlay{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 18px 18px 20px; color: #fff;
  
}
.svc-num{
  font-weight: 800; letter-spacing: .02em;
  font-size: clamp(1.1rem, .9rem + .6vw, 1.4rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.svc-title{
  margin: 6px 0 0; font-weight: 800; color: #fff; letter-spacing: .01em;
  font-size: clamp(1.1rem, 1.0rem + .5vw, 1.35rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
   background: #000;
  text-align: center;
}
.svc-desc{
  margin-top: auto; color: rgba(255,255,255,99);
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  line-height: 1.55;
  display: -webkit-box; -webkit-lin-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  background: black;
  text-align: center;

}
.svc-card:hover img{ transform: scale(1.03); }
.svc-card:hover::after{
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.22) 38%, rgba(0,0,0,.66) 100%);
  transition: background .5s ease;
}
.svc-card:focus-within{ outline: 2px solid var(--brand-acc); outline-offset: 2px; }


/* =======================================================================
   08) CONTATO
   ======================================================================= */
.contact-hero{
  padding: calc(var(--nav-h,64px) + 32px) 0 48px;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(34,160,138,.10), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(14,79,79,.08), transparent 60%),
    #fff;
}
.contact-hero .container{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.125rem);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.contact-kicker{
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; font-size: .85rem;
}
.contact-title{ color: var(--brand-ink); font-weight: 800; }
.contact-sub{ color: var(--brand-ink); margin-top: -6px; }
.contact-lead{ color: var(--muted); max-width: 720px; }
.contact-hero .color-simbol{
  display:inline-flex; align-items:center; justify-content:center; line-height:1; margin-top:.25rem; color: var(--brand);
}
.contact-hero .color-simbol svg{ width:16px; height:16px; }

/* Seções com fundo e respiro */
.contact-hero,
.contact-map-embed,
.contact-info,
.contact-faq,
.contact-city{
  position: relative; isolation: isolate; padding: var(--space-12) 0;
}

.contact-map-embed{
  background:
    radial-gradient(90% 70% at 10% 10%, rgba(34,160,138,.06), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fafefd 100%);
}
.contact-map-embed iframe{
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-4), inset 0 0 0 1px rgba(0,0,0,.05);
}

/* Info com malha sutil */
.contact-info{
  background:
    radial-gradient(85% 60% at 100% 0%, rgba(14,79,79,.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(14,79,79,.025) 0 2px, transparent 2px 12px),
    #fff;
}

/* FAQ */
.contact-faq{
  background:
    radial-gradient(80% 65% at 0% 100%, rgba(34,160,138,.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%);
}
.contact-faq .accordion-item{ background: transparent; border: none; }
.contact-faq .accordion-button{
  background: transparent; color: var(--brand-ink);
  font-weight: 600; padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: clamp(1.05rem, 0.98rem + 0.40vw, 1.25rem);
}
.contact-faq .accordion-button:not(.collapsed){ color: var(--brand); box-shadow: none; }
.contact-faq .accordion-body{
  padding: .75rem 0 1.25rem; color: var(--muted);
  font-size: clamp(1.05rem, 0.98rem + 0.40vw, 1.25rem);
}

/* Cartões e botões */
.contact-card{
  background: var(--surface); border-radius: var(--radius-4);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), var(--shadow-2);
}
.contact-city h4{ font-weight: 800; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); }
.contact-city .btn-brand{
  background: var(--brand); color:#fff; border: none;
  padding: .5rem .875rem; border-radius: var(--radius-2); font-weight: 700;
}
.contact-city .btn-brand:hover{ filter: brightness(.95); }

/* Divisórias suaves entre seções */
.contact-map-embed::before,
.contact-info::before,
.contact-faq::before,
.contact-city::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; top:0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
}
.contact-info::after,
.contact-faq::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
}


/* =======================================================================
   09) FOOTER
   ======================================================================= */
.site-footer{
  background: #fff; color: var(--brand-ink);
  border-top: 1px solid rgba(0,0,0,.06);
}
.footer-top{
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(34,160,138,.10), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(14,79,79,.08), transparent 60%),
    #fff;
}
.footer-nav{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start;
}
.footer-nav a{ text-decoration: none; color: var(--brand-ink); font-weight: 600; }
.footer-nav a:hover{ color: var(--brand); }
.footer-bottom{ border-top: 1px solid rgba(0,0,0,.06); background: #fff; }
.footer-mid .foot-title{ font-weight: 700; color: var(--brand); margin-bottom: .25rem; }


/* =======================================================================
   10) ACESSIBILIDADE / MOTION / FALLBACKS
   ======================================================================= */

/* Focus ring consistente para elementos focáveis */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{
  outline: 2px solid var(--brand-acc);
  outline-offset: 2px;
}

/* Movimento reduzido (respeita preferências do usuário) */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pf-card img, .pf-meta,
  .svc-card img, .svc-card::after,
  .gallery-item > img, .gallery-item::after, .gallery-caption{
    transition: none !important;
  }
}

/* Fallback quando backdrop-filter não existe */
@supports not (backdrop-filter: blur(8px)){
  .gallery-caption .pill{ backdrop-filter: none; }
}


/* =======================================================================
   11) RESPONSIVIDADE (complementos globais)
   - A maioria das media queries está junto a cada seção.
   - Aqui ficam apenas complementos gerais.
   ======================================================================= */

/* SOBRE — responsivo */
@media (max-width: 992px){
  .about-grid{ grid-template-columns: 1fr 1fr; }
  .about-card--tall{ grid-row: auto; min-height: 360px; }
  .brand-row{ grid-template-columns: repeat(3,1fr); }
  .stats{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 576px){
  .about-grid{ grid-template-columns: 1fr; }
  .brand-row{ grid-template-columns: repeat(2,1fr); gap:16px; }
  .stat{ padding:18px; }
}


/* =======================================================================
   12) DARK MODE (opcional)
   - Ative adicionando .theme-dark no <body>.
   ======================================================================= */
.theme-dark{
  color-scheme: dark;
  --bg: #0e0f0f;
  --surface: #151717;
  --text: #e7ecea;
  --muted: #9aa6a2;
  --brand-ink: #d2f2ea;
  --brand: #1a6a6a;
  --brand-acc: #2ec4b6;
}
.theme-dark body{ background: var(--bg); color: var(--text); }
.theme-dark .site-footer,
.theme-dark .footer-top,
.theme-dark .portfolio-hero,
.theme-dark .contact-hero,
.theme-dark .contact-faq,
.theme-dark .contact-info,
.theme-dark .contact-city{
  background: var(--bg);
}
.theme-dark .gallery-item{ background: #0c0d0d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.theme-dark .pf-card{ background: #0c0d0d; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.theme-dark .contact-card,
.theme-dark .svc-area{ background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow-2); }
.theme-dark .footer-nav a{ color: var(--text); }
.theme-dark .footer-nav a:hover{ color: var(--brand-acc); }
.theme-dark .pf-meta{ background: #1a1d1c; color: var(--text); box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); }


/* =======================================================================
   13) PRINT STYLES
   - Enxuga cores de fundo e sombras; foca em conteúdo.
   ======================================================================= */
@media print{
  :root{ --bg:#fff; --text:#000; }
  body{ background:#fff; color:#000; }
  .navbar, .site-footer, .portfolio-down, .foot-icon{ display:none !important; }
  .gallery-item::after, .svc-card::after{ display:none !important; }
  img{ max-width: 100%; height: auto; }
  a::after{ content: " (" attr(href) ")"; font-size: .85em; color:#444; }
}