/* =========================================================
   Vintage Cortinas — Fortaleza/CE
   Folha de estilos principal
   ========================================================= */

:root{
  /* Paleta "Clean High-End" — linho/areia claro, detalhes em champanhe fosco,
     verde do WhatsApp reservado exclusivamente ao botão do WhatsApp. */
  --preto: #1c1a17;
  --preto-suave: #24211d;
  --carvao: #2c2822;
  --dourado: #ab8a4f;
  --dourado-claro: #d9c9a3;
  --rosa: #e2cd9a;
  --creme: #fbf9f5;
  --creme-suave: #f1ece3;
  --texto-claro: #f7f3ea;
  --texto-suave: #c9bfa9;
  --texto-corpo: #332c24;
  --texto-corpo-suave: #6b6153;
  --linha: rgba(43,38,32,.12);
  --linha-clara: rgba(244,237,224,.16);
  --sombra: 0 20px 50px rgba(30,26,20,.12);
  --raio: 6px;
  --fonte-titulo: "Playfair Display", Georgia, serif;
  --fonte-corpo: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%;}
body{
  margin:0;
  max-width:100%;
  overflow-x:clip;
  font-family:var(--fonte-corpo);
  background:var(--creme);
  color:#2b2620;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
svg{width:1em;height:1em;flex:none;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--fonte-titulo);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:#1d1812;
  /* Evita "viúvas" — uma ou duas palavras isoladas sozinhas na última linha.
     Sem suporte (navegadores mais antigos), a quebra cai no comportamento
     normal — não quebra nada, só perde o refinamento. */
  text-wrap:balance;
}
.lead, .secao-subtitulo{text-wrap:balance;}
/* O subtítulo nunca deve ultrapassar a largura do título logo acima */
.secao-subtitulo{
  max-width:fit-content;
  margin-left:auto;
  margin-right:auto;
}
h1{font-size:clamp(2.6rem,5.2vw,4.4rem);font-weight:800;}
.hero h1{
  font-size:clamp(2.15rem,4.1vw,3.55rem);
  line-height:1.07;
  margin-bottom:.42em;
}
.acento{
  font-style:italic;
  font-weight:600;
  color:var(--dourado);
}
.hero .acento, .hero-interna .acento{color:var(--dourado-claro);}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:800;}
h3{font-size:1.35rem;font-weight:700;}
p{margin:0 0 1em;}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.eyebrow{
  display:inline-block;
  font-family:var(--fonte-corpo);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:600;
  color:var(--dourado);
  margin-bottom:14px;
}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.section--escura{
  background:linear-gradient(160deg,var(--creme-suave) 0%,#ecdfc7 100%);
  color:var(--texto-corpo);
}
.section--escura h2, .section--escura h3{color:var(--texto-corpo);}
/* Cabeçalho clássico e centralizado: nome direto da seção + subtítulo de apoio */
.secao-escura-cabecalho{text-align:center;margin-bottom:48px;}
.secao-escura-cabecalho h2{
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-size:clamp(2rem,3.8vw,2.6rem);
  font-weight:600;
  color:#2B2620;
  letter-spacing:-0.01em;
  margin-bottom:12px;
}
.secao-subtitulo{
  font-family:var(--fonte-sans, sans-serif);
  font-size:1.05rem;
  font-weight:300;
  color:#6B6255;
  max-width:560px;
  margin:0 auto;
  line-height:1.5;
}
.secao-subtitulo--claro{
  color:#6B6255;
  font-size:1.1rem;
  margin-bottom:44px;
}
.section--creme{background:var(--creme-suave);}
.center{text-align:center;}
.lead{
  font-size:1.15rem;
  color:var(--texto-corpo-suave);
  max-width:680px;
}
.center .lead{margin-left:auto;margin-right:auto;}
.section--escura .lead{color:var(--texto-corpo-suave);}

/* ---------- Botões ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:3px;
  font-weight:600;
  font-size:.98rem;
  border:1px solid transparent;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
  text-decoration:none;
}
.btn::before{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.btn:hover::before{transform:translateX(120%);}
/* Botões ficam fisicamente parados no hover — sem deslocamento em Y,
   ritmo de ateliê: só o brilho/realce reage */

/* ==========================================================================
   Botões de ação/conversão — .btn-primario e .btn-whatsapp
   Tratamento único, premium, em pílula, com brilho líquido contínuo.
   Usados em qualquer fundo (claro ou escuro) sem perder contraste, já que
   todo botão primário do site aponta para o WhatsApp.
   ========================================================================== */
.btn-primario,
.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 30px;
  border-radius:50px;
  border:none;
  background:linear-gradient(135deg, #25D366 0%, #1EBE5D 50%, #128C7E 100%);
  color:#fff !important;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.3px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 8px 24px rgba(37,211,102,.35);
  transition:all .3s cubic-bezier(.25,1,.5,1);
}
.btn-primario svg,
.btn-whatsapp svg{width:20px;height:20px;flex:none;}
/* Neutraliza o brilho genérico de .btn — este botão tem o seu próprio, contínuo */
.btn-primario::before,
.btn-whatsapp::before{content:none;}
/* Feixe de luz líquida: reflexo suave de cetim/champagne, lento e
   contemplativo — sem pressa, ritmo de ateliê */
.btn-primario::after,
.btn-whatsapp::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:linear-gradient(-45deg, transparent 0%, rgba(247,231,206,.4) 50%, transparent 100%);
  transform:skewX(-20deg);
  animation:brilho-liquido 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes brilho-liquido{
  0%{left:-60%;}
  55%{left:130%;}
  100%{left:130%;}
}
/* Botão fica fisicamente parado — só o glow "respira" no hover, sem saltos */
.btn-primario:hover,
.btn-whatsapp:hover{
  box-shadow:0 12px 30px rgba(37,211,102,.5);
}
@media (prefers-reduced-motion: reduce){
  .btn-primario::after, .btn-whatsapp::after{animation:none;}
}

/* Botão secundário (ghost) — mesma proporção de pílula, sem preencher */
.btn-secundario{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 30px;
  border-radius:50px;
  background:transparent;
  border:1.5px solid var(--preto);
  color:var(--preto);
  font-weight:600;
  font-size:.98rem;
}
.btn-secundario:hover{background:rgba(28,26,23,.06);}
/* Sobre fundos escuros (hero-interna, cta-final, section--escura): borda e texto claros */
.hero-interna .btn-secundario,
.cta-final .btn-secundario,
.section--escura .btn-secundario{
  border-color:rgba(244,237,224,.55);
  color:var(--texto-claro);
  background:rgba(244,237,224,.04);
}
.hero-interna .btn-secundario:hover,
.cta-final .btn-secundario:hover,
.section--escura .btn-secundario:hover{
  background:rgba(244,237,224,.14);
  border-color:var(--creme);
}
/* (regra .cta-final .btn-primario consolidada mais abaixo, junto ao redesign do card) */
.section--escura .btn-secundario:hover{background:rgba(28,26,23,.06);}
.btn-claro{
  background:var(--preto);
  color:var(--creme);
}
.btn-bloco{width:100%;justify-content:center;}
.grupo-botoes{display:flex;gap:16px;flex-wrap:wrap;}
.center .grupo-botoes{justify-content:center;}

/* ---------- Cabeçalho / Navegação ---------- */
.topo-aviso{
  background:var(--preto);
  color:var(--texto-suave);
  font-size:.8rem;
  text-align:center;
  padding:7px 12px;
  letter-spacing:.02em;
}
.topo-aviso a{color:var(--dourado);font-weight:600;}
header.cabecalho{
  position:sticky;top:0;z-index:1000;
  background:rgba(251,249,245,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow .25s ease, background .25s ease;
  will-change:box-shadow;
  transform:translateZ(0);
}
header.cabecalho.rolado{
  box-shadow:0 8px 24px rgba(30,26,20,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  max-width:1180px;
  margin:0 auto;
}
.marca{
  display:flex;
  align-items:center;
  color:var(--texto-corpo);
  flex:none;
  margin-right:20px;
  padding:8px 0;
}
.marca .anel{
  width:46px;height:46px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--rosa),var(--dourado-claro),var(--dourado),var(--rosa));
  display:flex;align-items:center;justify-content:center;
  padding:2px;
  flex:none;
}
.marca .anel span{
  width:100%;height:100%;border-radius:50%;
  background:var(--preto);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-titulo);
  font-weight:700;
  color:var(--dourado-claro);
  font-size:1.05rem;
}
.marca .logo-nav{height:70px;width:auto;aspect-ratio:200/169;flex:none;display:block;}
.icone-social{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--linha-clara);
  color:var(--creme);
  transition:background .2s,color .2s,border-color .2s;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:0 !important;
  padding:0 !important;
}
.icone-social svg{
  display:block !important;
  margin:0 !important;
  width:20px;height:20px;flex:none;
}
.icone-social:hover{background:var(--creme);color:var(--preto);border-color:var(--creme);transform:translateY(-2px);}
.marca .texto-marca{display:flex;flex-direction:column;line-height:1.1;justify-content:center;}
.marca .texto-marca strong{
  font-family:var(--fonte-titulo);
  font-size:1.3rem;
  letter-spacing:.02em;
  color:var(--texto-corpo);
  white-space:nowrap;
}
.marca .texto-marca small{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dourado);
}
.menu{display:flex;gap:16px;align-items:center;margin-right:20px;}
.menu a{
  color:var(--texto-corpo-suave);
  font-size:.88rem;
  font-weight:500;
  white-space:nowrap;
  transition:color .15s;
}
.menu a:hover, .menu a.ativo{color:var(--dourado);}
.menu-item-cta{display:none;} /* só aparece no menu mobile aberto */
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-tel{color:var(--texto-corpo-suave);font-size:.85rem;white-space:nowrap;}
.nav-tel strong{color:var(--texto-corpo);display:block;font-size:.95rem;}
@media (max-width:1240px){.nav-tel{display:none;}}
/* Botão do cabeçalho: verde WhatsApp original, elegante e compacto —
   ainda assim discreto o bastante pra não competir com o botão dourado
   da Hero, que é o destaque principal de conversão da página */
.nav-cta .btn-whatsapp{
  padding:10px 20px !important;
  font-size:.9rem !important;
  background:#25D366 !important;
  border:1px solid #25D366 !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(37,211,102,.3) !important;
  font-weight:600 !important;
  white-space:nowrap;
}
.nav-cta .btn-whatsapp svg{fill:#fff !important;}
.nav-cta .btn-whatsapp:hover{
  background:#1fb955 !important;
  box-shadow:0 8px 20px rgba(37,211,102,.4) !important;
}

/* Botão principal da Hero: ouro 3D com halo pulsante contínuo — é o
   destaque de conversão nº1 da página, por isso um tratamento mais rico
   que o botão discreto do cabeçalho */
.hero-esquerda .btn-primario{
  background:linear-gradient(135deg,#C5A059 0%,#A67C37 100%) !important;
  color:#1A1613 !important;
  font-weight:700 !important;
  border-radius:50px;
  padding:16px 36px;
  box-shadow:0 14px 32px rgba(197,160,89,.45) !important;
}
.hero-esquerda .btn-primario svg{fill:#1A1613 !important;}
.hero-esquerda .btn-primario::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:60px;
  border:2px solid rgba(197,160,89,.5);
  animation:pulsoDourado 6s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes pulsoDourado{
  0%{transform:scale(1);opacity:.5;}
  100%{transform:scale(1.12);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .hero-esquerda .btn-primario::before{animation:none;}
}
.menu-toggle{
  display:none;
  background:none;border:1px solid var(--linha);border-radius:8px;
  color:var(--texto-corpo);
  width:44px;height:44px;
  font-size:1.3rem;
  cursor:pointer;
}

@media (max-width:1080px){
  .menu{
    position:absolute;top:100%;left:0;right:0;
    width:100%;
    background:rgba(251,249,245,.98);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 20px 40px rgba(20,17,13,.15);
    flex-direction:column;
    gap:0;
    padding:24px 20px 32px;
    display:none;
  }
  .menu.aberto{display:flex;}
  .menu li{width:100%;list-style:none;}
  .menu a{
    display:block;
    width:100%;
    text-align:center;
    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,.04);
    font-size:1.05rem;
    font-weight:500;
    letter-spacing:1px;
    color:#2B2620;
    text-decoration:none;
  }
  .menu a.ativo{
    font-family:var(--fonte-serifa, "Playfair Display", serif);
    font-size:1.15rem;
    font-weight:600;
    color:#A67C37 !important;
  }
  /* Ação direta no rodapé do menu — não herda o estilo de link de navegação */
  .menu li.menu-item-cta{display:list-item;text-align:center;}
  .menu li.menu-item-cta a{
    border-bottom:none;
    padding:12px 18px;
    width:90%;
    max-width:280px;
    margin:18px auto 0 auto;
    display:inline-flex;
    justify-content:center;
    align-items:center;
  }
  .nav-tel{display:none;}
  .menu-toggle{
    display:flex;flex:none;
    align-items:center;justify-content:center;
    background:transparent;
    border:1px solid rgba(0,0,0,.14);
    border-radius:8px;
    width:44px;height:44px;
    font-size:1.3rem;
    color:#2B2620;
  }
}

@media (max-width:600px){
  .nav{padding:12px 16px;}
  .nav-cta{gap:10px;}
  .nav-cta .btn-primario{display:none !important;}
  .marca{margin-right:auto;}
  .marca .logo-nav{height:52px;}
  .topo-aviso{font-size:.7rem;line-height:1.5;padding:6px 10px;}
}

/* ---------- Hero ---------- */
.hero h1, .hero h2, .hero h3, .hero p{color:var(--texto-claro);}
.hero-interna h1, .hero-interna h2, .hero-interna h3, .hero-interna p{color:var(--texto-claro);}
/* ---------- Nova Hero (estilo Hirekit: duas colunas, loop vertical de fotos) ---------- */
.hero.hero-nova{
  position:relative;
  overflow:hidden;
  background-color:var(--creme);
  /* Foto da cortina como fundo, com um véu creme suave por cima pra manter
     o texto sempre legível sem esconder a textura do tecido */
  background-image:
    linear-gradient(160deg, rgba(251,249,245,.9) 0%, rgba(251,249,245,.8) 55%, rgba(251,249,245,.92) 100%),
    url('img/hero-bg.webp');
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  padding:76px 0 64px;
}
@media (max-width:768px){
  .hero.hero-nova{
    background-image:
      linear-gradient(160deg, rgba(251,249,245,.92) 0%, rgba(251,249,245,.82) 55%, rgba(251,249,245,.94) 100%),
      url('img/hero-bg-mobile.webp');
  }
}
.hero-nova .hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero-esquerda, .hero-direita{min-width:0;}
.hero-prova-social{
  display:inline-block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--dourado);
  background:rgba(171,138,79,.1);
  border:1px solid rgba(197,160,89,.3);
  border-radius:30px;
  padding:8px 16px;
  margin-bottom:22px;
}
.hero-esquerda h1{
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-size:clamp(2.1rem,4vw,3.2rem);
  font-weight:700;
  line-height:1.15;
  color:#2B2620;
  margin:0 0 .45em;
}
.hero-esquerda .lead{
  font-size:1.1rem;
  color:var(--texto-corpo-suave);
  max-width:480px;
}
.hero-metricas{
  display:flex;
  gap:40px;
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid rgba(0,0,0,.08);
}
.hero-metrica{display:flex;flex-direction:column;gap:4px;}
.hero-metrica-numero{
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-size:1.7rem;
  font-weight:700;
  color:var(--dourado);
}
.hero-metrica-legenda{font-size:.85rem;color:var(--texto-corpo-suave);max-width:150px;line-height:1.35;}

/* Coluna direita: duas trilhas verticais em loop contínuo */
.hero-direita{position:relative;height:100%;}
.vertical-loop{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  height:600px;
  position:relative;
  overflow:hidden;
  contain:layout;
  mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}
.coluna-loop{position:relative;overflow:hidden;height:100%;min-width:0;}
.loop-grupo{display:flex;flex-direction:column;gap:16px;}
.loop-img{
  width:100%;
  height:auto; /* mesmo motivo: libera o aspect-ratio de calcular a
                  altura real em vez de travar no atributo height do HTML */
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:14px;
  display:block;
  flex:none;
  align-self:flex-start; /* impede o stretch padrão do flex column */
}
.coluna-loop-1 .loop-grupo{animation:loopVertical 30s linear infinite;}
.coluna-loop-2{margin-top:-70px;}
.coluna-loop-2 .loop-grupo{animation:loopVerticalReverso 34s linear infinite;}
@keyframes loopVertical{
  0%{transform:translateY(0);}
  100%{transform:translateY(-50%);}
}
@keyframes loopVerticalReverso{
  0%{transform:translateY(-50%);}
  100%{transform:translateY(0);}
}
@media (hover:hover) and (pointer:fine){
  .vertical-loop:hover .loop-grupo{animation-play-state:paused;}
}
@media (prefers-reduced-motion: reduce){
  .coluna-loop-1 .loop-grupo, .coluna-loop-2 .loop-grupo{animation:none;}
}

/* Tablet (769px–1100px): mantém a estrutura de 2 colunas do desktop,
   só ajusta gap/altura de forma fluida pra caber melhor */
@media (max-width:1100px){
  .hero-nova .hero-grid{gap:32px;}
  .vertical-loop{height:480px;}
}
@media (max-width:768px){
  .hero-nova .hero-grid{grid-template-columns:1fr;}
  .vertical-loop{height:420px;}
}

/* Desktop: mostra o loop vertical duplo; esconde a moldura mobile */
.hero-moldura-mobile{display:none;}

/* Mobile: texto primeiro; o loop vertical duplo é substituído por um
   card único com dissolvência cruzada entre fotos + selo flutuante */
@media (max-width:768px){
  .hero-nova{padding:48px 0 40px;}
  .hero-esquerda{text-align:center;}
  .hero-esquerda .lead{margin-left:auto;margin-right:auto;}
  .hero-metricas{justify-content:center;border-top:none;padding-top:0;}
  .hero-direita{order:2;margin-top:32px;}
  .vertical-loop{display:none !important;}

  .hero-moldura-mobile{
    display:block !important;
    position:relative;
    aspect-ratio:3/4;
    max-width:320px;
    margin:0 auto;
    border-radius:20px;
    border:1px solid rgba(197,160,89,.35);
    overflow:hidden;
    box-shadow:0 20px 45px rgba(30,26,20,.18);
  }
  .moldura-slide{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1.5s ease;
  }
  .moldura-slide.ativo{opacity:1;}
  .selo-moldura-hero{
    position:absolute;
    left:14px;bottom:14px;
    z-index:2;
    background:rgba(20,17,13,.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2);
    border-radius:30px;
    padding:8px 16px;
    font-size:.78rem;
    font-weight:600;
    color:#F7E7CE;
  }
}

/* ---------- Fita de confiança ---------- */
/* ---------- Fita de confiança — esteira contínua (marquee em CSS puro) ---------- */
.fita{
  overflow:hidden;
  display:flex;
  align-items:center;
  height:54px;
  background:var(--creme-suave);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.fita-trilho{
  display:flex;
  width:max-content;
  animation:fita-rolar 32s linear infinite;
}
/* Pausa no hover só em dispositivos com mouse de verdade — em touch,
   :hover pode "grudar" depois de um toque e travar a animação */
@media (hover:hover) and (pointer:fine){
  .fita:hover .fita-trilho{animation-play-state:paused;}
}
.fita-grupo{display:flex;align-items:center;flex:none;}
.fita-grupo span{
  font-size:.88rem;
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#5C5247;
  white-space:nowrap;
  padding:0 18px;
}
.fita-sep{color:rgba(92,82,71,.35) !important;padding:0 !important;font-weight:400 !important;}
@keyframes fita-rolar{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .fita-trilho{animation:none;}
  .fita{overflow-x:auto;}
}
/* Reforço explícito: garante que a esteira de texto continue rodando no
   mobile, independentemente de qualquer engine/navegador específico */
@media (max-width:768px){
  .fita{overflow:hidden !important;width:100% !important;}
  .fita-trilho{
    display:flex !important;
    width:max-content !important;
    animation:fita-rolar 22s linear infinite !important;
    will-change:transform;
  }
}

/* ---------- Grade de produtos (clean, compacta, ícone de traço fino) ---------- */
.grid-produtos{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  margin-top:48px;
}
@media (max-width:1080px){.grid-produtos{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.grid-produtos{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.grid-produtos{grid-template-columns:1fr;}}

.card-produto{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius:16px;
  padding:32px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,.03);
}
/* Desktop: elevação e salto suave no hover
   (seletor com "a." para vencer .reveal.reveal-visivel em especificidade,
   já que .card-produto também carrega a classe .reveal) */
@media (min-width:769px){
  .card-produto{
    transition:transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease, border-color .35s ease;
  }
  a.card-produto:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 36px rgba(43,38,32,.12);
    border-color:rgba(197,160,89,.4);
  }
  a.card-produto:hover .saiba-mais{
    transform:translateX(5px);
    color:#A67C37;
  }
}
/* Mobile: o card que cruza o centro da tela "salta" — o resto fica em repouso */
@media (max-width:768px){
  .card-produto{
    transition:transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease, border-color .35s ease;
    transform:scale(1);
  }
  a.card-produto.card-em-foco{
    transform:scale(1.03);
    box-shadow:0 14px 30px rgba(43,38,32,.14);
    border-color:rgba(197,160,89,.45);
  }
}
.card-produto-icone{
  width:52px;height:52px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  color:#4A3F2D;
  transition:background .2s, color .2s;
}
.card-produto-icone svg{width:26px;height:26px;}
/* Variação sutil de cor por card — paleta de tecidos e minerais */
.card-produto-icone--1{background:#F5EFEB;} /* Linho Cru */
.card-produto-icone--2{background:#EFECE6;} /* Fendi Areia */
.card-produto-icone--3{background:#EDE5DE;} /* Argila Suave */
.card-produto-icone--4{background:#EBE1D8;} /* Tear Nobre */
.card-produto-icone--5{background:#E8E5E1;} /* Metal Champanhe */
.card-produto:hover .card-produto-icone{background:var(--dourado);color:#fff;}
.card-produto h3{font-family:var(--fonte-titulo);font-size:1.25rem;line-height:1.3;margin-bottom:12px;}
.card-produto p{color:#666;font-size:.95rem;line-height:1.6;margin-bottom:24px;}
.card-produto .saiba-mais{
  margin-top:auto;
  font-size:.9rem;font-weight:500;color:var(--dourado);
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .2s ease, transform .3s cubic-bezier(.25,1,.5,1), color .3s ease;
}

/* ---------- Grid de serviços (páginas internas — mantém ícone + texto) ---------- */
.grid-servicos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:48px;
}
@media (max-width:900px){.grid-servicos{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-servicos{grid-template-columns:1fr;}}

.card-servico{
  background:#fff;
  border:1px solid #e9e0cb;
  border-radius:var(--raio);
  padding:30px 26px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.card-servico:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 34px rgba(31,25,10,.1);
  border-color:var(--dourado);
}
.card-servico .icone{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--preto);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  color:var(--creme);
  transition:background .18s;
}
.card-servico .icone svg{width:24px;height:24px;}
.card-servico:hover .icone{background:var(--dourado);}
.card-servico h3{margin-bottom:8px;}
.card-servico p{color:#5b5347;font-size:.95rem;margin-bottom:14px;}
.card-servico .saiba-mais{
  font-size:.85rem;font-weight:600;color:var(--dourado);
  display:inline-flex;align-items:center;gap:6px;
}

/* ---------- Mosaico visual (substitui fotos reais) ---------- */
.mosaico{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:130px;
  gap:14px;
  margin-top:44px;
}
.mosaico .peca{
  border-radius:4px;
  position:relative;
  overflow:hidden;
  display:flex;align-items:flex-end;
  padding:14px;
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.mosaico .peca span{position:relative;z-index:2;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.mosaico .peca::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55));}
.mosaico .g1{grid-column:span 2;grid-row:span 2;background:linear-gradient(150deg,#4a3f2d,#8c7d63);}
.mosaico .g2{background:linear-gradient(150deg,#cabfa8,#eae0c9);}
.mosaico .g3{background:linear-gradient(150deg,#2a2420,#5a4c34);}
.mosaico .g4{background:linear-gradient(150deg,#948366,#d6c9ac);}
.mosaico .g5{grid-column:span 2;background:linear-gradient(150deg,#1d1912,#3a2f1e);}

@media (max-width:760px){
  .mosaico{grid-template-columns:repeat(2,1fr);}
  .mosaico .g1{grid-column:span 2;}
  .mosaico .g5{grid-column:span 2;}
}

/* ---------- Passos / Processo — fundo com parallax, cards em liquid glass ---------- */
#como-funciona.section-como-funciona{
  position:relative;
  isolation:isolate;
  padding:110px 0;
}
/* Fundo fixo robusto: pseudo-elemento absoluto contido na seção (sem
   overflow:hidden no pai, que quebra background-attachment:fixed em
   vários navegadores). A imagem em si usa fixed p/ o efeito parallax. */
#como-funciona.section-como-funciona::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(180deg, rgba(20,16,13,.4) 0%, rgba(20,16,13,.55) 100%),
    url('img/bg-como-funciona.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* Android (Chrome/Samsung Internet): o motor Blink engasga e quebra
   camadas com background-attachment:fixed em pseudo-elemento durante o
   scroll — força "scroll" abaixo de 768px. Perde o parallax no mobile,
   mas ganha estabilidade de renderização (troca que vale a pena). */
@media (max-width:768px){
  #como-funciona.section-como-funciona::before{
    background-attachment:scroll !important;
  }
}
.secao-como-funciona-cabecalho h2{
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-size:clamp(2.8rem,5vw,3.8rem);
  font-weight:700;
  color:#FFFFFF !important;
  text-shadow:0 4px 20px rgba(0,0,0,.6);
  margin-bottom:12px;
  letter-spacing:-0.01em;
}
#como-funciona .secao-subtitulo{
  font-size:1.05rem;
  color:#F7E7CE;
  font-weight:400;
  max-width:fit-content;
  margin:0 auto;
  text-wrap:balance;
}

.passos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:48px;
  position:relative;
}
/* Tablet (769px–1100px): mantém as 4 colunas lado a lado, só com gap
   um pouco mais justo pra caber com folga */
@media (max-width:1100px){.passos{gap:16px;}.card-passo{padding:28px 18px;}}
@media (max-width:900px){.passos{gap:14px;}.card-passo{padding:24px 14px;}}
/* Destaque itálico do H2 "em 4 etapas" */
.destaque-etapas{
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-style:italic;
  font-weight:600;
  color:#C5A059;
  text-shadow:0 2px 14px rgba(197,160,89,.25);
  display:inline-block;
}

/* Cards em Liquid Glass nobre */
.card-passo{
  background:rgba(20,16,13,.45) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(197,160,89,.32);
  border-radius:20px;
  padding:36px 26px;
  box-shadow:0 20px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  position:relative;
  z-index:3;
  transition:border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.25,1,.5,1);
}
.card-passo .numero{
  display:block;
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-size:2.4rem;font-weight:700;
  color:#C5A059;
  line-height:1;
  margin-bottom:18px;
}
.card-passo h3{
  font-size:1.2rem;font-weight:600;
  color:#FFFFFF;
  margin-bottom:10px;
}
.card-passo p{
  font-size:.94rem;
  color:rgba(247,231,206,.82);
  line-height:1.6;
  text-wrap:pretty;
  margin:0;
}
/* Card "ativo": a linha de progresso já passou por ele */
.card-passo.ativo{
  border-color:#C5A059;
  box-shadow:0 20px 40px rgba(0,0,0,.4), 0 0 25px rgba(197,160,89,.2);
}

/* ---------- Desktop: trilha horizontal, linha preenchida pelo scroll (JS) ---------- */
@media (min-width:769px){
  .trilha-conectiva-mobile{display:none;}
  .trilha-conectiva-desktop{
    position:absolute;
    top:65px;
    left:40px;
    width:calc(100% - 80px);
    height:2px;
    background:rgba(197,160,89,.2);
    border-radius:2px;
    overflow:hidden;
    z-index:1;
  }
  .trilha-conectiva-desktop .linha-ativa{
    display:block;
    height:100%;
    width:0%;
    background:#C5A059;
    box-shadow:0 0 10px rgba(197,160,89,.6);
  }
  .card-passo:hover{
    transform:translateY(-6px);
    border-color:#C5A059;
    box-shadow:0 20px 40px rgba(0,0,0,.4), 0 0 24px rgba(197,160,89,.3);
  }
}

/* ---------- Mobile: cards empilhados, trilha vertical preenchida pelo scroll (JS) ---------- */
@media (max-width:768px){
  .passos{
    display:flex !important;
    flex-direction:column !important;
    gap:28px;
    position:relative;
    padding-left:28px;
    text-align:left !important;
  }
  .passos .card-passo,
  .passos .card-passo h3,
  .passos .card-passo p{
    text-align:left !important;
  }
  .trilha-conectiva-desktop{display:none;}
  .trilha-conectiva-mobile{
    position:absolute;
    left:0;top:6px;bottom:6px;
    width:1.5px;
    background:rgba(197,160,89,.2);
    z-index:1;
    overflow:hidden;
  }
  .trilha-conectiva-mobile .linha-ativa-mobile{
    display:block;
    width:100%;
    height:0%;
    background:#C5A059;
  }
  .card-passo{opacity:.6;}
}

/* ---------- Diferenciais — visual clássico, leve e editorial ---------- */
.grid-diferenciais{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px 48px;
  margin-top:40px;
}
@media (max-width:700px){.grid-diferenciais{grid-template-columns:1fr;}}
.diferencial{
  display:flex;gap:18px;align-items:flex-start;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.diferencial .marcador{
  flex:none;
  width:38px;height:38px;border-radius:50%;
  background:transparent;
  border:1px solid var(--dourado);
  color:var(--dourado);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-size:1rem;
  font-weight:700;
  transition:all .35s ease;
}
.diferencial h3{font-size:1.1rem;font-weight:600;margin-bottom:6px;color:#2B2620;transition:color .3s ease;}
.diferencial p{font-size:.95rem;color:#6B6255;line-height:1.55;margin:0;transition:color .3s ease;}
/* Desktop: hover acende o círculo do marcador */
@media (min-width:769px){
  .diferencial:hover .marcador{
    background:var(--dourado);
    color:#fff;
    box-shadow:0 0 16px rgba(197,160,89,.4);
  }
  .diferencial:hover h3{color:var(--dourado);}
}
/* Mobile: o item que cruza o centro da tela acende — os demais ficam apagados
   (seletor composto pra vencer .reveal-grupo.reveal-visivel > * em
   especificidade, que senão travaria a opacidade em 1 sempre) */
@media (max-width:768px){
  .grid-diferenciais.reveal-grupo .diferencial{opacity:.45 !important;transition:opacity .3s ease;}
  .grid-diferenciais.reveal-grupo .diferencial.diferencial-ativo{opacity:1 !important;}
  .diferencial.diferencial-ativo .marcador{
    background:var(--dourado);
    color:#fff;
    box-shadow:0 0 16px rgba(197,160,89,.4);
  }
}

/* Botão em ouro nobre — identidade visual para fundos claros da marca */
.btn-dourado{
  background:linear-gradient(135deg,#C5A059 0%,#A67C37 100%) !important;
  color:#1A1613 !important;
  font-weight:600 !important;
  border-radius:50px;
  padding:16px 36px;
  white-space:nowrap;
  letter-spacing:.5px;
  box-shadow:0 10px 25px rgba(197,160,89,.25) !important;
}
.btn-dourado svg{fill:#1A1613 !important;}
.btn-dourado:hover{box-shadow:0 14px 32px rgba(197,160,89,.35) !important;}

/* ---------- Depoimentos / prova social ---------- */
.grid-prova{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:44px;
}
@media (max-width:860px){.grid-prova{grid-template-columns:1fr;}}
.prova{
  background:#fff;
  border:1px solid #e9e0cb;
  border-radius:var(--raio);
  padding:26px;
  text-align:center;
}
.prova .num{
  font-family:var(--fonte-titulo);
  font-size:2.6rem;
  color:var(--dourado);
  display:block;
}
.prova .rotulo{font-size:.85rem;color:#5b5347;text-transform:uppercase;letter-spacing:.05em;}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:44px auto 0;}
.faq-item{
  border-bottom:1px solid #e2d7bb;
  padding:22px 0;
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  color:#1d1812;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  font-size:1.6rem;
  color:var(--dourado);
  flex:none;
  transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin-top:14px;color:#5b5347;}

/* ---------- CTA final ---------- */
.secao-cta{padding:90px 0;}
.cta-final{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg, #221d19 0%, #151311 100%);
  color:var(--texto-claro);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  padding:56px 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
/* Iluminação indireta âmbar/dourada no canto superior — clima de cortineiro */
.cta-final::before{
  content:"";
  position:absolute;
  top:-30%;left:-10%;
  width:65%;height:140%;
  background:radial-gradient(ellipse at top left, rgba(201,162,75,.16) 0%, rgba(201,162,75,0) 70%);
  pointer-events:none;
}
.cta-final-texto{position:relative;z-index:1;}
.cta-final-texto h2{
  font-size:2.1rem;
  line-height:1.25;
  color:#FAF7F2;
  margin-bottom:8px;
}
.cta-final-texto p{
  font-size:1.05rem;
  color:#D1C7BD;
  line-height:1.5;
  max-width:480px;
  margin:0;
}
.cta-final .btn-primario{position:relative;z-index:1;flex:none;}
@media (max-width:768px){
  .cta-final{
    padding:32px 20px !important;
    min-height:auto !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:20px !important;
    text-align:center;
  }
  .cta-final-texto{margin-bottom:0 !important;flex:none !important;}
  .cta-final-texto p{max-width:none;margin-bottom:0 !important;}
}
.cta-final h2{color:var(--texto-claro);margin-bottom:6px;font-size:clamp(1.6rem,2.6vw,2.1rem);}
.cta-final p{color:var(--texto-suave);margin:0;}
.cta-final > div:first-child{flex:1 1 360px;min-width:0;}
/* (flex:none já aplicado na seção de botões acima) */

/* ---------- Correção definitiva: nenhum botão quebra linha ---------- */
.btn, .btn-primario, .btn-secundario, .btn-whatsapp{
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
@media (max-width:768px){
  .btn, .btn-primario, .btn-secundario, .btn-whatsapp{
    font-size:.9rem !important;
    padding:12px 18px !important;
    gap:8px !important;
  }
}

/* ---------- Formulário de contato (gera WhatsApp) ---------- */
.form-contato{
  background:#fff;
  border:1px solid #e9e0cb;
  border-radius:var(--raio);
  padding:36px;
  box-shadow:var(--sombra);
}
.campo{margin-bottom:18px;}
.campo label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:6px;
  color:#3a3226;
}
.campo input, .campo select, .campo textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #d8cba3;
  border-radius:4px;
  font-family:var(--fonte-corpo);
  font-size:.95rem;
  background:#fdfbf5;
  color:#241c0c;
}
.campo textarea{min-height:110px;resize:vertical;}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:2px solid var(--dourado);
  outline-offset:1px;
}
.linha-campos{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:600px){.linha-campos{grid-template-columns:1fr;}}

.info-contato{display:flex;flex-direction:column;gap:22px;}
.info-item{display:flex;gap:16px;align-items:flex-start;}
.info-item .icone{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:rgba(201,162,75,.15);
  border:1px solid var(--dourado);
  display:flex;align-items:center;justify-content:center;
  color:var(--dourado-claro);
}
.info-item .icone svg{width:20px;height:20px;}

/* Canais interativos (WhatsApp/Instagram) — card inteiro clicável */
.canal-card-link{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(197,160,89,.28);
  transition:all .35s ease;
}
.canal-card-link .icone{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:rgba(201,162,75,.15);
  border:1px solid var(--dourado);
  display:flex;align-items:center;justify-content:center;
  color:var(--dourado-claro);
}
.canal-card-link .icone svg{width:20px;height:20px;}
.canal-card-texto{flex:1;min-width:0;}
.canal-card-texto h3{font-size:.98rem;margin-bottom:2px;color:var(--texto-corpo);}
.canal-card-texto span{font-size:.88rem;color:var(--texto-corpo-suave);}
.canal-card-seta{
  flex:none;
  font-size:1.1rem;
  color:var(--dourado);
  transition:transform .35s ease;
}
.canal-card-link:hover{
  transform:translateY(-3px);
  border-color:var(--dourado);
  box-shadow:0 10px 24px rgba(197,160,89,.16);
}
.canal-card-link:hover .canal-card-seta{transform:translateX(4px);}
.info-item h3{font-size:1rem;margin-bottom:2px;color:#1d1812;}
.info-item p, .info-item a{font-size:.92rem;color:#5b5347;}
.info-item a:hover{color:var(--dourado);}
.section--escura .info-item h3{color:var(--texto-corpo);}
.section--escura .info-item p, .section--escura .info-item a{color:var(--texto-corpo-suave);}
.section--escura .info-item a:hover{color:var(--dourado);}

/* ---------- Rodapé ---------- */
footer.rodape{
  background:var(--preto);
  color:var(--texto-suave);
  padding:60px 0 26px;
}
.rodape-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(28px,5vw,64px);
  padding-bottom:36px;
  border-bottom:1px solid var(--linha-clara);
}
@media (max-width:760px){.rodape-grid{grid-template-columns:1fr;}}
.rodape-col--marca{min-width:0;}
.rodape-logo{width:150px;max-width:100%;height:auto;margin-bottom:16px;}
.rodape-texto{max-width:340px;font-size:.92rem;line-height:1.6;}
.rodape-social{display:flex;gap:12px;margin-top:16px;}
.rodape h4{color:var(--creme);font-family:var(--fonte-corpo);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
.rodape-col--nav{display:flex;flex-direction:column;}
.rodape-grid a{display:block;padding:6px 0;font-size:.9rem;color:var(--texto-suave);}
.rodape-grid a:hover{color:var(--dourado-claro);}
.rodape-horario{display:block;padding:6px 0;font-size:.9rem;color:var(--texto-suave);line-height:1.5;}
.rodape-baixo{
  padding-top:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  font-size:.8rem;
  color:#847a63;
}

/* ---------- Botão flutuante WhatsApp ---------- */
.whatsapp-flutuante{
  position:fixed;
  right:22px;bottom:22px;
  z-index:60;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:transform .15s;
}
.whatsapp-flutuante svg{width:30px;height:30px;position:relative;z-index:2;flex:none;}
.whatsapp-flutuante:hover{transform:scale(1.08);}
.whatsapp-flutuante::before{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  background:#25D366;
  z-index:1;
  animation:whatsapp-pulso 2.6s ease-out infinite;
}
@keyframes whatsapp-pulso{
  0%{transform:scale(1);opacity:.55;}
  75%{transform:scale(1.7);opacity:0;}
  100%{transform:scale(1.7);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-flutuante::before{animation:none;}
}

/* ---------- Página interna (hero simples) ---------- */
.hero-interna{
  background:linear-gradient(160deg,var(--preto) 0%,var(--preto-suave) 55%,var(--carvao) 100%);
  color:var(--creme);
  padding:64px 0 56px;
}
.migalha{font-size:.82rem;color:var(--texto-suave);margin-bottom:14px;}
.migalha a{color:var(--dourado-claro);}
.hero-interna .lead{color:var(--texto-suave);}

.duas-colunas{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:start;
}
@media (max-width:900px){.duas-colunas{grid-template-columns:1fr;}}
.lista-check{margin-top:18px;}

/* ---------- Galeria editorial das páginas de serviço ---------- */
.galeria-servico{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:48px 0;
  align-items:start; /* impede o comportamento padrão do Grid (stretch) de
                        esticar as imagens verticalmente pra preencher a
                        altura da linha quando o aspect-ratio não "pega" */
}
.galeria-servico img{
  width:100%;
  height:auto; /* crítico: sem isso, o atributo height="800" do HTML
                  vence o aspect-ratio e trava a altura, ignorando a
                  largura real do card — era a causa do "9:16" */
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:16px;
  display:block;
  border:1px solid rgba(0,0,0,.06);
}
@media (max-width:700px){.galeria-servico{grid-template-columns:repeat(2,1fr);gap:12px;}}
.lista-check li{
  display:flex;gap:12px;align-items:flex-start;
  padding:9px 0;
  font-size:.97rem;
  color:#3a3226;
}
.section--escura .lista-check li{color:var(--texto-corpo-suave);}
.lista-check li::before{
  content:"✓";
  flex:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--dourado);
  color:#241c0c;
  font-size:.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.caixa-lateral{
  background:#fff;
  border:1px solid #e9e0cb;
  border-radius:var(--raio);
  padding:30px;
  box-shadow:var(--sombra);
}
.caixa-lateral h3{margin-bottom:10px;}
.caixa-lateral p{font-size:.92rem;color:#5b5347;}

/* ---------- Seção fundador ---------- */
.secao-fundador{background:var(--creme-suave);}
.duas-colunas--fundador{align-items:center;gap:32px;}
@media (min-width:901px){.duas-colunas--fundador{grid-template-columns:.8fr 1.2fr;gap:64px;}}

/* ---------- Consultoria Autoral (Jason Marques) ---------- */
.duas-colunas--consultoria{align-items:center;gap:36px;}
@media (min-width:901px){.duas-colunas--consultoria{grid-template-columns:.85fr 1.15fr;gap:64px;}}
.eyebrow-destaque{
  display:inline-block;
  font-family:var(--fonte-titulo);
  font-size:1.05rem;
  font-weight:600;
  font-style:italic;
  color:#A67C37;
  margin-bottom:14px;
}
.consultoria-foto{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(197,160,89,.4);
  box-shadow:0 25px 55px rgba(30,26,20,.16);
}
.consultoria-foto img{
  width:100%;height:100%;
  aspect-ratio:4/4.6;
  object-fit:cover;
  display:block;
}
/* Acabamento Liquid Glass: um leve reflexo diagonal sobre a foto */
.consultoria-foto::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%);
  pointer-events:none;
}
.consultoria-foto::after{
  content:"";
  position:absolute;inset:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;
  pointer-events:none;
}
.consultoria-texto h2{margin-bottom:.4em;}
.consultoria-texto p{color:#5b5347;margin-bottom:1em;}
.assinatura-autor{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:20px 0 4px;
  padding-top:16px;
  border-top:1px solid rgba(197,160,89,.25);
}
.assinatura-autor strong{
  font-family:var(--fonte-serifa, "Playfair Display", serif);
  font-style:italic;
  font-size:1.15rem;
  font-weight:600;
  color:#2B2620;
}
.assinatura-autor span{
  font-size:.82rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#A67C37;
}
.fundador-foto{
  position:relative;
  border-radius:var(--raio);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.fundador-foto img{
  width:100%;height:100%;
  aspect-ratio:4/4.3;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.fundador-foto::after{
  content:"";
  position:absolute;inset:0;
  border:1px solid rgba(244,237,224,.35);
  border-radius:var(--raio);
  pointer-events:none;
}
.fundador-texto h2{margin-bottom:.35em;}
.fundador-texto .lead{color:#5b5347;}

/* ---------- Persiana de madeira em tela cheia (preloader motorizado) ---------- */
.persiana-abertura{
  position:fixed;
  /* "inset" isoladamente tem suporte inconsistente em Safari mais antigo —
     reforça com as propriedades por extenso + largura/altura explícitas,
     que é o que faltava para o efeito aparecer em alguns celulares reais. */
  inset:0;
  top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;
  z-index:999999;
  overflow:hidden;
  /* Transparente: quem cobre a tela é a textura de madeira das lâminas
     (.persiana-laminas) — ao encolher, revela o site ao vivo por trás.
     Um fundo sólido aqui mascarava esse efeito e escondia o site até o
     display:none final. */
  background:transparent !important;
  pointer-events:none; /* nunca trava clique, mesmo com atraso de JS */
  /* Rede de segurança 100% em CSS, sem depender de JavaScript: se o
     site.js não carregar por qualquer motivo (rede instável, extensão
     de terceiros, bloqueio de conteúdo etc.), a persiana some sozinha
     depois de 4s. Evita que o visitante fique com a tela travada na
     persiana pra sempre caso o JS falhe. */
  animation:persianaOcultarAuto 0s linear 4s forwards;
}
@keyframes persianaOcultarAuto{
  to{visibility:hidden;}
}
/* Bandô superior — acabamento de madeira nobre com chanfro e sombra projetada */
.persiana-bando{
  height:44px;width:100%;
  position:absolute;top:0;left:0;
  z-index:10;
  background:linear-gradient(180deg, #422a1d 0%, #2b1a11 100%);
  border-bottom:2px solid rgba(0,0,0,.5);
  box-shadow:0 6px 14px rgba(0,0,0,.4);
  /* Sai de cena só depois que as lâminas terminam de recolher (aos 2.0s) */
  transition:transform .4s ease;
  transition-delay:1.8s;
}
/* Corpo de lâminas horizontais em nogueira — textura via degradê repetido */
.persiana-laminas{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:5;
  background:repeating-linear-gradient(
    180deg,
    #4e3222 0px,
    #5a3a28 8px,
    #472d1f 28px,
    #352015 30px,
    #1f130c 32px
  );
  transform-origin:top center;
  /* 0.4s a 2.0s: recolhe para cima (1.6s de duração, começando em 0.4s) */
  transition:transform 1.6s cubic-bezier(.4,0,.2,1);
  transition-delay:.4s;
}
/* Cordões técnicos verticais */
.persiana-cordoes{
  position:absolute;
  top:44px;bottom:0;left:0;
  width:100%;
  z-index:6;
  pointer-events:none;
  transition:transform 1.6s cubic-bezier(.4,0,.2,1), opacity 1s ease;
  transition-delay:.4s;
}
.persiana-cordoes .cordao{
  position:absolute;top:0;bottom:0;
  width:2px;
  background:rgba(255,255,255,.18);
}
.persiana-cordoes .cordao:nth-child(1){left:20%;}
.persiana-cordoes .cordao:nth-child(2){left:50%;}
.persiana-cordoes .cordao:nth-child(3){left:80%;}
/* Haste de acionamento em acrílico translúcido */
.persiana-haste{
  position:absolute;
  right:8%;top:44px;
  width:8px;height:380px;
  z-index:7;
  background:linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.7), rgba(255,255,255,.2));
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:transform 1.6s cubic-bezier(.4,0,.2,1), opacity 1s ease;
  transition-delay:.4s;
}
/* Classe adicionada via JS: recolhimento motorizado para cima, como uma
   persiana de verdade subindo em direção ao bandô */
.persiana-abertura.cortina-abrir .persiana-laminas{transform:scaleY(0);}
.persiana-abertura.cortina-abrir .persiana-cordoes,
.persiana-abertura.cortina-abrir .persiana-haste{
  transform:translateY(-100%);
  opacity:0;
}
.persiana-abertura.cortina-abrir .persiana-bando{transform:translateY(-100%);}
@media (prefers-reduced-motion: reduce){
  .persiana-laminas, .persiana-cordoes, .persiana-haste, .persiana-bando{transition-duration:.3s;transition-delay:0s;}
}
/* Persiana otimizada para mobile — bandô mais baixo, haste oculta em
   telas muito estreitas, e o TIMING recalibrado: no celular a subida
   precisa durar mais pra ser percebida com clareza (pausa inicial maior
   + subida mais lenta e só depois o bandô sai de cena). */
@media (max-width:768px){
  .persiana-abertura{background:transparent !important;}
  .persiana-bando{height:36px;}
  .persiana-cordoes{top:36px;}
  .persiana-haste{top:36px;}

  /* Pausa inicial de 0.4s de olho na persiana fechada, depois 2.2s de
     subida com curva de motor elétrico */
  .persiana-laminas{
    transition:transform 2.2s cubic-bezier(.35,0,.25,1) !important;
    transition-delay:.4s !important;
  }
  /* Cordões acompanham exatamente o mesmo tempo das lâminas */
  .persiana-cordoes{
    transition:transform 2.2s cubic-bezier(.35,0,.25,1) !important;
    transition-delay:.4s !important;
  }
  /* Bandô só sai depois que as lâminas terminam de subir (0.4s + 2.2s = 2.6s) */
  .persiana-bando{
    transition:transform .4s ease !important;
    transition-delay:2.6s !important;
  }
}
@media (max-width:480px){
  .persiana-haste{display:none;}
}


/* ---------- Scroll reveal — perceptível, com deslocamento amplo ---------- */
.reveal, .reveal-up,
.reveal-left, .reveal-right,
.reveal-sobe, .reveal-desce,
.reveal-esquerda, .reveal-direita,
.reveal-zoom{
  opacity:0;
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.reveal, .reveal-up, .reveal-sobe{transform:translateY(45px);}
.reveal-desce{transform:translateY(-35px);}
.reveal-left, .reveal-esquerda{transform:translateX(-50px);}
.reveal-right, .reveal-direita{transform:translateX(50px);}
.reveal-zoom{transform:scale(.92);}

.reveal.reveal-visivel, .reveal-up.reveal-visivel,
.reveal-left.reveal-visivel, .reveal-right.reveal-visivel,
.reveal-sobe.reveal-visivel, .reveal-desce.reveal-visivel,
.reveal-esquerda.reveal-visivel, .reveal-direita.reveal-visivel,
.reveal-zoom.reveal-visivel{
  opacity:1 !important;
  transform:translate(0,0) scale(1) !important;
}

/* Stagger dos cards de "Como funciona" — os 2 primeiros filhos de .passos
   são as trilhas conectivas (desktop/mobile), por isso a contagem
   começa em nth-child(3). Faixa de 0.12s a 0.72s, bem perceptível. */
.passos .reveal-zoom:nth-child(3){transition-delay:0ms;}
.passos .reveal-zoom:nth-child(4){transition-delay:120ms;}
.passos .reveal-zoom:nth-child(5){transition-delay:240ms;}
.passos .reveal-zoom:nth-child(6){transition-delay:360ms;}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-up, .reveal-left, .reveal-right,
  .reveal-sobe, .reveal-desce, .reveal-esquerda, .reveal-direita, .reveal-zoom{
    opacity:1;transform:none;transition:none;
  }
}

.reveal-grupo.reveal-visivel > *{opacity:1;transform:translateY(0);}
.reveal-grupo > *{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
/* Efeito escalonado (stagger) — de 0.12s a 0.72s entre cada item da grade */
.reveal-grupo.reveal-visivel > *:nth-child(1){transition-delay:0ms;}
.reveal-grupo.reveal-visivel > *:nth-child(2){transition-delay:120ms;}
.reveal-grupo.reveal-visivel > *:nth-child(3){transition-delay:240ms;}
.reveal-grupo.reveal-visivel > *:nth-child(4){transition-delay:360ms;}
.reveal-grupo.reveal-visivel > *:nth-child(5){transition-delay:480ms;}
.reveal-grupo.reveal-visivel > *:nth-child(6){transition-delay:600ms;}
.reveal-grupo.reveal-visivel > *:nth-child(7){transition-delay:720ms;}
.reveal-grupo.reveal-visivel > *:nth-child(8){transition-delay:720ms;}
.reveal-grupo.reveal-visivel > *:nth-child(9){transition-delay:720ms;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-grupo > *{opacity:1;transform:none;transition:none;}
}

/* Scroll reveal no mobile — mesma duração de 0.9s, cascata de 120ms
   entre os cards de produtos */
@media (max-width:768px){
  .reveal, .reveal-up, .reveal-left, .reveal-right,
  .card-produto, .diferencial, .passo, .cta-final{
    transition-duration:.9s;
    transition-timing-function:cubic-bezier(.16,1,.3,1);
  }
  .grid-produtos .card-produto:nth-child(1){transition-delay:0ms;}
  .grid-produtos .card-produto:nth-child(2){transition-delay:120ms;}
  .grid-produtos .card-produto:nth-child(3){transition-delay:240ms;}
  .grid-produtos .card-produto:nth-child(4){transition-delay:360ms;}
  .grid-produtos .card-produto:nth-child(5){transition-delay:480ms;}
}

/* ---------- Contadores animados (Sobre Nós) ---------- */
.grid-contadores{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-top:64px;
  padding-top:48px;
  border-top:1px solid var(--linha);
}
@media (max-width:760px){.grid-contadores{grid-template-columns:1fr;gap:36px;text-align:center;}}
.contador-item{display:flex;flex-direction:column;gap:6px;}
.contador-numero{
  font-family:var(--fonte-titulo);
  font-size:2.6rem;
  font-weight:700;
  color:var(--dourado);
  line-height:1;
}
.contador-numero.contador-texto{font-size:2rem;}
.contador-legenda{font-size:.92rem;color:var(--texto-corpo-suave);max-width:220px;}
@media (max-width:760px){.contador-legenda{max-width:none;margin:0 auto;}}

/* ---------- Esteira contínua de projetos (marquee em CSS puro) ---------- */
.esteira-wrap{
  overflow:hidden;
  width:100%;
  contain:layout;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.esteira-trilho{
  display:flex;
  width:max-content;
  animation:esteira-rolar 34s linear infinite;
}
/* Pausa no hover só em dispositivos com mouse de verdade — em touch,
   :hover pode "grudar" depois de um toque e travar a animação */
@media (hover:hover) and (pointer:fine){
  .esteira-wrap:hover .esteira-trilho{animation-play-state:paused;}
}
.esteira-grupo{display:flex;align-items:flex-start;gap:20px;padding:0 10px;flex:none;}
.esteira-img{
  width:280px;height:373px;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:12px;
  flex:none;
  align-self:flex-start;
  border:1px solid rgba(43,38,32,.1);
}
@keyframes esteira-rolar{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (max-width:700px){
  .esteira-img{width:200px !important;height:267px !important;}
  .esteira-trilho{animation-duration:24s;}
}
/* Reforço explícito: garante que a esteira de fotos continue rodando no
   mobile, independentemente de qualquer engine/navegador específico */
@media (max-width:768px){
  .esteira-wrap{overflow:hidden !important;width:100% !important;}
  .esteira-trilho{
    display:flex !important;
    width:max-content !important;
    animation:esteira-rolar 26s linear infinite !important;
    will-change:transform;
  }
}
@media (prefers-reduced-motion: reduce){
  .esteira-trilho{animation:none;}
  .esteira-wrap{overflow-x:auto;}
}


/* ===========================================================
   PADRÃO GLOBAL MOBILE (Até 768px) - Centralização Absoluta
   =========================================================== */
@media (max-width: 768px) {
  /* 1. Títulos, textos e parágrafos do Hero e seções */
  .hero-esquerda,
  .hero-esquerda h1,
  .hero-esquerda p,
  .hero-prova-social,
  .center,
  .section h2,
  .section p,
  .cta-final-texto {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 2. Grupos de botões e métricas no Hero */
  .hero-esquerda .grupo-botoes {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .hero-esquerda .grupo-botoes .btn {
    width: 100% !important;
    max-width: 320px !important;
  }
  .hero-metricas {
    justify-content: center !important;
    text-align: center !important;
    margin: 24px auto 0 !important;
  }
  /* 3. Cards de serviços (O que fazemos) */
  .grid-produtos {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .card-produto {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 360px !important;
  }
  .card-produto .card-produto-icone {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .card-produto .saiba-mais {
    margin: 16px auto 0 !important;
  }
  /* 4. Diferenciais (a trilha de .passo agora tem layout próprio, definido
        mais abaixo — não deve mais ser forçado ao centro aqui) */
  .diferencial {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .marcador {
    margin: 0 auto 12px !important;
  }
  /* 5. Banner Final de Conversão (CTA) */
  .cta-final {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 36px 20px !important;
  }
  .cta-final a.btn {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  /* 6. Rodapé */
  .rodape-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .rodape-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .rodape-logo {
    margin: 0 auto 16px !important;
  }
  .rodape-social {
    justify-content: center !important;
  }
}