/* =========================================================================
   BORDO COWORKING — style.css
   Site em página única (onepage). Fundo integral em bordô profundo,
   com o vinho vibrante da marca reservado para destaques/glow e um novo
   dourado como accent de sofisticação. Apenas duas famílias tipográficas:
   Zalando Sans Expanded 400 nos títulos (e nos destaques que antes usavam
   uma fonte manuscrita separada) e Roboto no restante — texto corrido,
   menus, botões e rótulos.
   ========================================================================= */

:root{
  /* ---- paleta de marca (manual: #A61E22 / #F9F7F0 / #65656B / #FFFFFF / #000) ---- */
  --wine:        #a61e22;   /* bordô vibrante — cor de identidade */
  --wine-bright: #d5383c;   /* vinho mais aceso, usado em glow/gradiente */
  --wine-deep:   #6c1216;   /* vinho escurecido, para painéis intermediários */
  --grey:        #9a9299;   /* cinza da marca, clareado para funcionar sobre fundo escuro */
  --cream:       #f9f7f0;   /* off-white da marca — texto principal sobre o bordô */
  --cream-dim:   rgba(249,247,240,.66);
  --cream-faint: rgba(249,247,240,.38);
  --ink:         #000000;

  /* ---- fundo integral do body, agora dentro da família bordô ---- */
  --bg:        #260c0e;   /* vinho quase preto — a "casa" do site */
  --bg-raised: #341416;   /* painéis levemente mais claros */
  --bg-deep:   #180608;   /* vinhetas / cantos mais escuros */

  /* ---- novo accent: dourado envelhecido, combina com o bordô ---- */
  --gold:      #c9a15a;
  --gold-soft: #e9d6a4;
  --gold-dim:  rgba(201,161,90,.5);

  --rule: 1px;
  --rule-lg: 1px;

  --f-display: "Roboto", Arial, sans-serif;                  /* menus, botões, rótulos */
  --f-heading: "Zalando Sans Expanded", Arial, sans-serif;   /* títulos e destaques (peso regular 400) */
  --f-body:    "Roboto", Arial, sans-serif;                  /* texto corrido */

  --container: 1600px;   /* página mais larga — usa mais da tela em monitores grandes */
  --pad-desktop: 56px;
  --pad-mobile: 24px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

@view-transition{
  navigation: auto;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }

section[id]{ scroll-margin-top: 104px; }

.wrap{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-desktop);
  position: relative;
}
@media (max-width: 600px){
  .wrap{ padding: 0 var(--pad-mobile); }
}

/* =========================================================================
   TIPOGRAFIA
   ========================================================================= */

h1, h2, h3, h4{
  font-family: var(--f-heading);
  font-weight: 400;
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--cream);
}

/* palavras de contraste dentro de títulos — mesma fonte do título, em dourado.
   font-style: normal é necessário porque <em> é itálico por padrão no
   navegador — nunca queremos itálico aqui, em nenhuma ocasião. */
em.accent{
  font-family: var(--f-heading);
  font-weight: 400;
  font-style: normal;
  color: var(--gold-soft);
}

/* "blend": gradiente vinho→dourado aplicado ao texto — reservado apenas
   para a palavra "crescem" no hero; nas demais palavras de destaque usar
   .accent (mesmo dourado sólido, sem gradiente) */
em.blend{
  font-family: var(--f-heading);
  font-weight: 400;
  font-style: normal;
  background: linear-gradient(100deg, var(--wine-bright) 0%, var(--gold) 55%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content: "//";
  font-family: var(--f-heading);
  font-weight: 400;
  color: var(--wine-bright);
}

.section-head{
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head h2{
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
}
.section-head p{
  font-family: var(--f-body);
  color: var(--cream-dim);
  font-size: 1.05rem;
  max-width: 46ch;
}
@media (max-width: 800px){
  .section-head{ grid-template-columns: 1fr; gap: 14px; }
}

/* =========================================================================
   TEXTURA — grão sutil sobre o fundo, para não ficar um flat de IA
   ========================================================================= */

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}
body > *{ position: relative; z-index: 1; }

/* =========================================================================
   HEADER / NAV — sempre sobre fundo escuro, texto creme constante
   ========================================================================= */

.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  padding: 24px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled{
  background: rgba(24,6,8,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,161,90,.22);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo{
  display: flex;
  align-items: center;
}
.logo-mark{
  height: 26px;
  width: auto;
  display: block;
}
.brandmark-word{ fill: var(--cream); transition: fill .2s ease; }
.brandmark-sub{ fill: var(--gold); }
.logo:hover .brandmark-word{ fill: var(--gold-soft); }

.main-nav{
  display: flex;
  align-items: center;
  gap: 40px;
}
.main-nav ul{
  list-style: none;
  display: flex;
  gap: 34px;
  margin: 0;
  padding: 0;
}
.main-nav a{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color .2s ease;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right .25s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{ color: var(--cream); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{
  right: 0;
}

.nav-cta{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  border-radius: 999px;
  padding: 11px 22px;
  transition: background .2s ease, color .2s ease;
}
.nav-cta:hover{
  background: var(--gold);
  color: var(--bg-deep);
}

.menu-toggle{
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
  content: "";
  position: absolute;
  left: 13px; right: 13px;
  height: 1px;
  background: var(--gold-soft);
  transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle span{ top: 22px; }
.menu-toggle span::before{ top: -7px; }
.menu-toggle span::after{ top: 7px; }

.nav-overlay{
  position: fixed;
  inset: 0;
  background: var(--wine);
  z-index: 480;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad-mobile);
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.7,0,.2,1);
}
.nav-overlay.is-open{ transform: translateY(0); }
.nav-overlay ul{
  list-style: none;
  margin: 0; padding: 0;
}
.nav-overlay a{
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.8rem);
  color: var(--cream);
  padding: 12px 0;
  border-bottom: 1px solid rgba(249,247,240,.25);
}
.nav-overlay .nav-overlay-foot{
  margin-top: 40px;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--gold-soft);
  font-size: 0.85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 900px){
  .main-nav ul, .nav-cta{ display: none; }
  .menu-toggle{ display: block; }
  .logo-mark{ height: 22px; }
}

/* =========================================================================
   BOTÕES — pílula, traço fino de 1px, inversão no hover
   ========================================================================= */

.btn-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: 1px solid var(--gold);
  padding: 14px 26px;
  color: var(--gold-soft);
  background: transparent;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-pill:hover{
  background: var(--gold);
  color: var(--bg-deep);
  transform: translateY(-2px);
}
.btn-pill.on-wine{ color: var(--cream); border-color: var(--cream); }
.btn-pill.on-wine:hover{ background: var(--cream); color: var(--wine); }
.btn-pill svg{ width: 16px; height: 16px; }

.ghost-link{
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ghost-link:hover{ color: var(--gold-soft); }

/* =========================================================================
   HERO — assinatura tipográfica: glifo gigante de fundo + título full-width
   quebrando a grade de duas colunas usada no resto do site
   ========================================================================= */

.hero{
  min-height: 96vh;
  display: flex;
  align-items: center;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle, rgba(213,56,60,.38) 0%, rgba(166,30,34,.18) 42%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.hero-spine{
  position: absolute;
  top: 130px;
  right: var(--pad-desktop);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--cream-faint);
  z-index: 1;
}
.hero .wrap{ z-index: 1; }

/* coluna de texto + caixa de foto 1:1 à direita. padding-right extra
   abre espaço para o .hero-spine, que fica ancorado na borda direita
   da .wrap — sem essa folga o texto vertical ficaria por cima da foto
   (margin no item de grid não empurra a track quando a largura é 100%,
   por isso o respiro entra como padding no próprio container do grid) */
/* clamp com vw (em vez de minmax fixo) faz a foto encolher
   proporcionalmente conforme a tela estreita — sem isso, em telas de
   notebook a coluna da foto não cabia e ela ficava cortada pelo
   overflow:hidden do .hero */
.hero-grid{
  display: grid;
  grid-template-columns: 1fr clamp(280px, 30vw, 528px);
  gap: 56px;
  align-items: center;
  padding-right: 100px;
}
.hero-copy{ min-width: 0; }

.hero-title{
  font-size: clamp(2.6rem, 5.6vw, 6rem);
  color: var(--cream);
  max-width: 14ch;
}
.hero-sub{
  margin-top: 40px;
  max-width: 820px;
}
.hero-sub p{
  font-family: var(--f-body);
  font-size: 1.15rem;
  color: var(--cream-dim);
  margin: 0;
}
.hero-ctas{
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.hero-photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-raised);
  overflow: hidden;
  position: relative;
}
.hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px){
  .hero{ padding-top: 140px; min-height: auto; align-items: flex-start; }
  .hero-spine{ display: none; }
  /* padding-right volta a ser o mesmo do .wrap (em vez de 0): o 0 aqui
     existia só para remover o respiro extra do .hero-spine (que some no
     mobile), mas como .hero-grid é o próprio .wrap, zerar o padding-right
     também tirava o recuo direito do texto — deixando-o sem "respiro"
     nessa borda */
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; padding-right: var(--pad-mobile); }
  /* sangra até a borda real da tela: largura da coluna + os dois lados do
     padding do .wrap, puxada de volta com margem negativa — mesma lógica
     já usada no .float-card antes de virar full-bleed */
  .hero-photo{
    max-width: none;
    width: calc(100% + var(--pad-mobile) * 2);
    margin-left: calc(-1 * var(--pad-mobile));
    margin-right: calc(-1 * var(--pad-mobile));
  }
}

/* =========================================================================
   CARROSSEL — dentro da seção Espaços, logo após o título; sangra até a
   borda da seção (fora do .wrap, mesmo padrão do .map-bleed). Sem fundo
   próprio: herda o bg-deep da seção pai (band deep) para ficar na mesma
   cor. Trilho com scroll-snap e placeholders, sem biblioteca externa.
   ========================================================================= */

.carousel-section{
  padding: 0;
  margin-bottom: 128px;
  height: 84vh;
  min-height: 480px;
  display: flex;
}
.carousel{ position: relative; width: 100%; }
.carousel-track{
  display: flex;
  gap: 5px;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--pad-desktop);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar{ display: none; }
.carousel-slide{
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  scroll-snap-align: center;
}
/* cada slide mantém a proporção real da foto (retrato ou paisagem) — a
   largura vem do aspect-ratio intrínseco da própria imagem, não de um
   padrão fixo alternado, para não distorcer nem cortar as fotos */
.carousel-slide img{
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--bg-deep);
  color: var(--gold-soft);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
  z-index: 2;
}
.carousel-btn:hover{ background: var(--gold); color: var(--bg-deep); }
.carousel-btn.prev{ left: 14px; }
.carousel-btn.next{ right: 14px; }
@media (max-width: 700px){
  .carousel-btn{ display: none; }
  /* margin-bottom original (128px) ficava toda entre a foto e as bolinhas
     recém-adicionadas, deixando um vão vazio enorme — reduz aqui e devolve
     o respiro como padding-bottom do próprio .carousel-dots, depois delas */
  .carousel-section{ height: 60vh; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce){
  .carousel-track{ scroll-behavior: auto; }
}

/* bolinhas abaixo do carrossel — só no mobile (onde as setas somem e o
   arraste é a única forma de navegar), como sinal de que há mais fotos.
   Preenchidas via JS (uma por slide), com a ativa destacada em dourado
   conforme o scroll do trilho. */
.carousel-dots{
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--pad-mobile) 64px;
}
.carousel-dots button{
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(249,247,240,.28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.carousel-dots button.is-active{
  background: var(--gold);
  transform: scale(1.5);
}
@media (max-width: 700px){
  .carousel-dots{ display: flex; }
}

/* =========================================================================
   FAIXAS DE COR CHEIAS
   ========================================================================= */

.band{ padding: 110px 0; position: relative; }
.band.wine{
  background: linear-gradient(155deg, var(--wine) 0%, var(--wine-deep) 100%);
  color: var(--cream);
}
.band.deep{ background: var(--bg-deep); }
.band.raised{ background: var(--bg-raised); }
.band.wine .eyebrow{ color: var(--gold-soft); }
.band.wine .eyebrow::before{ color: var(--cream); }

.band-grid{
  display: grid;
  grid-template-columns: 0.8fr 1.6fr;
  gap: 48px;
  align-items: start;
}
/* variação: conteúdo largo à esquerda + selo circular à direita — usada na
   faixa "Instale sua empresa", para não repetir o mesmo formato do hero */
.band-grid-rev{
  display: grid;
  grid-template-columns: 1.5fr 0.7fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px){
  .band-grid{ grid-template-columns: 1fr; gap: 20px; }
  .band-grid-rev{ grid-template-columns: 1fr; gap: 40px; }
  .band{ padding: 72px 0; }
}

.band-badge{ display: flex; justify-content: center; }
.badge-ring{
  width: clamp(169px, 14.3vw, 221px);
  height: clamp(169px, 14.3vw, 221px);
  animation: spin 34s linear infinite;
}
.badge-ring text{ fill: var(--cream); }
@keyframes spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .badge-ring{ animation: none; }
}

.band h2{
  font-size: clamp(1.9rem, 3.2vw, 3rem);
}
.band .lede{
  font-family: var(--f-body);
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 62ch;
  color: var(--cream-dim);
}
.band.wine .lede{ color: rgba(249,247,240,.88); }
.band .lede strong{
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--cream);
  display: block;
  margin-top: 16px;
}

/* =========================================================================
   ESPAÇOS & PLANOS — linhas numeradas, sem cards com sombra
   ========================================================================= */

.service-list{
  border-top: 1px solid rgba(249,247,240,.18);
}
.model-row{
  display: grid;
  grid-template-columns: 90px 1fr 1.4fr;
  gap: 28px;
  align-items: center;
  padding: 38px 0;
  border-bottom: 1px solid rgba(249,247,240,.18);
}
.num{
  font-family: var(--f-heading);
  font-size: 1.4rem;
  color: var(--gold);
}
.model-row h3{
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 400;
}
.model-row p{
  font-family: var(--f-body);
  color: var(--cream-dim);
  margin: 0;
  font-size: 1rem;
}

@media (max-width: 900px){
  .model-row{ grid-template-columns: 50px 1fr; row-gap: 10px; }
  .model-row h3{ grid-column: 2; }
  .model-row p{ grid-column: 1 / -1; }
}

/* espaços em destaque — três blocos grandes com numeral fantasma, para
   quebrar a monotonia de uma lista única de 8 linhas idênticas */
.tile-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(249,247,240,.18);
  margin-bottom: 128px;
}
.tile{
  background: var(--bg-deep);
  padding: 44px 32px 36px;
  position: relative;
}
.tile h3{
  font-size: clamp(1.25rem, 1.4vw, 1.5rem);
  margin-bottom: 14px;
}
.tile p{
  font-family: var(--f-body);
  color: var(--cream-dim);
  font-size: .96rem;
  margin: 0;
}
@media (max-width: 900px){
  .tile-grid{ grid-template-columns: 1fr; }
}

.list-sub-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}
.list-sub-head h3{
  font-family: var(--f-heading);
  font-weight: 400;
  color: var(--gold-soft);
  font-size: 1.3rem;
}
/* CTA único ao final da seção Planos, no lugar dos links "Consultar"
   repetidos em cada linha/tile — sem divisor acima, texto com a mesma
   hierarquia dos numerais da lista (.num) */
.planos-cta{
  margin-top: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.planos-cta .num{
  max-width: 46ch;
  margin: 0;
}
@media (max-width: 700px){
  .planos-cta{ flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   MAPA / LOCALIZAÇÃO — texto logo abaixo do título, mapa sangrando até a
   borda da seção (full-bleed) logo em seguida. Altura do mapa mais baixa
   no desktop (3/1) do que era antes (21/9), só para não dominar a seção.
   ========================================================================= */

.map-frame{
  aspect-ratio: 4 / 3;
  background: var(--bg-raised);
  border: 1px solid rgba(201,161,90,.3);
  overflow: hidden;
}
.map-frame iframe{
  width: 100%; height: 100%; border: 0; filter: grayscale(.2) invert(.92) contrast(.9) hue-rotate(180deg);
}

.map-bleed{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
}
.map-bleed iframe{
  width: 100%; height: 100%; border: 0;
  filter: grayscale(.2) invert(.92) contrast(.9) hue-rotate(180deg);
}
@media (max-width: 900px){
  .map-bleed{ aspect-ratio: 4 / 3; }
}

/* =========================================================================
   PLACEHOLDER DE IMAGEM (diretriz seção 8 — nunca <img> quebrado)
   ========================================================================= */

.img-placeholder{
  position: relative;
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--gold-dim);
}
.img-placeholder svg{ width: 20%; min-width: 34px; max-width: 64px; opacity: .6; position: relative; }
.img-placeholder .ph-tag{
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--bg-deep);
  color: var(--gold-soft);
  padding: 6px 10px;
}
.img-placeholder.ratio-portrait{ aspect-ratio: 3 / 4; }
.img-placeholder.ratio-wide{ aspect-ratio: 16 / 9; }
.img-placeholder.ratio-square{ aspect-ratio: 1 / 1; }

/* duas colunas de 50% — a seção "Sobre Nós" zera o padding vertical
   herdado de .band (quem dá espaço vertical ao texto é o padding do
   próprio .about-panel) e a grade fica FORA do .wrap, para a foto poder
   sangrar até a borda direita real da página. A coluna de texto recebe
   um recuo esquerdo equivalente ao do .wrap (via max(), que continua
   correto mesmo além do --container em telas muito largas). A foto não
   tem altura própria: fica com position:absolute + inset:0 dentro de uma
   caixa relative, então não influencia a altura da linha do grid — quem
   define a altura é o texto (+ seu padding), e a foto só é esticada (e
   cortada via object-fit) para ocupar exatamente essa altura. */
#sobre{ padding: 0; }
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.about-panel{
  display: flex;
  align-items: center;
  padding: 90px 48px 90px max(var(--pad-desktop), calc((100vw - var(--container)) / 2 + var(--pad-desktop)));
}
.about-text p{ font-size: 1.08rem; color: var(--cream-dim); margin: 0 0 22px; max-width: 56ch; }
.about-text p:first-of-type{ color: var(--cream); font-size: 1.22rem; }
.about-photo{
  position: relative;
  overflow: hidden;
}
.about-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-panel{ padding: 64px var(--pad-mobile); }
  .about-photo{ aspect-ratio: 3 / 4; }
}
@media (max-width: 600px){
  .about-panel{ padding: 56px var(--pad-mobile); }
}

/* =========================================================================
   CTA BAND
   ========================================================================= */

.cta-band{
  padding: 90px 0;
  background: var(--bg-deep);
  border-top: 1px solid rgba(201,161,90,.2);
  border-bottom: 1px solid rgba(201,161,90,.2);
}
.cta-band .wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta-band h2{
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
  max-width: 20ch;
}

/* =========================================================================
   CONTATO + LOCALIZAÇÃO
   ========================================================================= */

.contact-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
}
.contact-card{
  border-top: 1px solid rgba(249,247,240,.22);
  padding-top: 20px;
  margin-bottom: 32px;
}
.contact-card h4{
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  color: var(--gold);
  margin-bottom: 10px;
}
.contact-card a, .contact-card p{
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  margin: 0;
}
.contact-card a:hover{ color: var(--gold-soft); }
@media (max-width: 800px){
  .contact-grid{ grid-template-columns: 1fr; gap: 30px; }
}

/* fechamento centralizado — troca a grade de duas colunas por uma
   declaração única e grande, com os dados de contato numa faixa abaixo */
.contact-close{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.contact-close h2{
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  max-width: 18ch;
  margin: 18px auto 0;
}
.contact-strip{
  margin-top: 64px;
  display: flex;
  justify-content: center;
  gap: 70px;
  flex-wrap: wrap;
  text-align: left;
  border-top: 1px solid rgba(249,247,240,.22);
  padding-top: 36px;
}
.contact-strip h4{
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  color: var(--gold);
  margin: 0 0 10px;
}
.contact-strip a, .contact-strip p{
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 4px;
  display: block;
}
.contact-strip a:hover{ color: var(--gold-soft); }
.contact-strip .footer-social{ margin-top: 6px; }

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer{
  background: var(--bg-deep);
  padding: 80px 0 34px;
  border-top: 1px solid rgba(201,161,90,.2);
}
.footer-grid{
  display: grid;
  grid-template-columns: clamp(200px, 22vw, 440px) 1.2fr 1fr 1fr;
  column-gap: 0;
  row-gap: 40px;
  align-items: start;
}
/* espaçamento individual entre colunas (em vez do gap uniforme do grid):
   mais espaço entre a marca e "Fale conosco", menos entre "Fale conosco"
   e "Endereço" — diretriz do rodapé */
.footer-grid > div:nth-child(2){ padding-left: 88px; }
.footer-grid > div:nth-child(3){ padding-left: 16px; }
.footer-grid > div:nth-child(4){ padding-left: 40px; }
.footer-grid h4{
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-grid p, .footer-grid a{
  font-family: var(--f-body);
  font-size: 1.02rem;
  display: block;
  margin: 0 0 8px;
  color: var(--cream-dim);
}
.footer-grid a:hover{ color: var(--gold-soft); }
.footer-brand{ min-width: 0; }
.footer-brandmark{
  width: clamp(200px, 22vw, 440px);
  height: auto;
  display: block;
  opacity: .94;
  margin: 0;
  user-select: none;
}
.footer-brandmark .brandmark-word{ fill: var(--cream); }
.footer-brandmark .brandmark-sub{ fill: var(--gold); }
.footer-social{
  display: flex;
  gap: 18px;
  margin-top: 18px;
}
.footer-social a{
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.footer-social a:hover{ color: var(--gold-soft); }
.footer-bottom{
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(249,247,240,.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .72rem;
  color: var(--cream-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
}
@media (max-width: 1000px){
  .footer-grid{ grid-template-columns: 1fr 1fr 1fr; column-gap: 40px; }
  .footer-brand{ grid-column: 1 / -1; margin-bottom: 8px; }
  /* nesta largura a marca fica numa linha só, acima das 3 colunas — o
     espaçamento assimétrico do desktop (marca vs. Fale conosco) deixa de
     fazer sentido, então volta tudo ao gap uniforme do grid */
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(4){ padding-left: 0; }
}
@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .footer-brand{ grid-column: auto; }
}

/* =========================================================================
   UTILITÁRIOS
   ========================================================================= */

.mt-0{ margin-top: 0; }

/* .reveal só começa invisível quando confirmamos (via script inline no
   <head>, antes do CSS carregar) que o JavaScript está disponível — assim,
   se o JS falhar ou demorar, o conteúdo nunca fica escondido permanentemente. */
html.js .reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js .reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* leve fade no carregamento da página inteira — mesmo princípio de
   segurança do .reveal: só fica invisível se o JS confirmar que vai
   remover a classe logo em seguida (ver setupPageFade em script.js) */
html.js body{
  opacity: 0;
  transition: opacity .5s ease;
}
html.js body.is-loaded{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity: 1; transform: none; transition: none; }
  html.js body{ opacity: 1; transition: none; }
  html{ scroll-behavior: auto; }
}

/* =========================================================================
   AVISO DE COOKIES — barra fixa simples, some ao aceitar e não volta mais
   (persistido via localStorage, ver setupCookieNotice em script.js)
   ========================================================================= */

.cookie-notice{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: rgba(24,6,8,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201,161,90,.28);
  padding: 18px 0;
}
.cookie-notice[hidden]{ display: none; }
.cookie-notice-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-notice p{
  font-family: var(--f-body);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--cream-dim);
  margin: 0;
  max-width: 68ch;
}
.cookie-notice a{ color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; }
.cookie-notice a:hover{ color: var(--cream); }
.cookie-notice .btn-pill{
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}
@media (max-width: 600px){
  .cookie-notice-inner{ justify-content: center; text-align: center; }
}

/* =========================================================================
   PÁGINA — POLÍTICA DE PRIVACIDADE (politica-de-privacidade.html)
   ========================================================================= */

.legal-page{
  background: var(--bg-deep);
  padding: 168px 0 130px;
}
.legal-title{
  margin-top: 18px;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}
.legal-updated{
  font-family: var(--f-body);
  color: var(--cream-faint);
  font-size: .92rem;
  margin-top: 14px;
}
.legal-content{
  margin-top: 56px;
  max-width: 74ch;
}
.legal-content h2{
  font-family: var(--f-heading);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  color: var(--gold-soft);
  margin-top: 44px;
  margin-bottom: 14px;
}
.legal-content h2:first-child{ margin-top: 0; }
.legal-content p{
  font-family: var(--f-body);
  color: var(--cream-dim);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 16px;
}
.legal-content ul{
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-content li{
  font-family: var(--f-body);
  color: var(--cream-dim);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 8px;
}
.legal-content a{ color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover{ color: var(--cream); }
.legal-back{
  display: inline-block;
  margin-top: 56px;
}
@media (max-width: 600px){
  .legal-page{ padding: 140px 0 80px; }
}