:root{
  /* ===== CORE BRAND ===== */
  --bronze:#A66A21;          /* identidade principal */
  --bronze-soft:#C08A3A;     /* brilho leve / hover */
  --gold:#E2C36B;            /* destaque premium (uso raro) */

  /* ===== TONS TERROSOS ===== */
  --rust:#8C3503;            /* apoio visual quente */
  --conker:#592202;
  --choco:#3A160A;
  --rosewood:#A67360;

  /* ===== BASE DARK (mais neutra) ===== */
  --bg-dark:#0A0A0E;         /* fundo principal */
  --bg-dark-2:#121218;       /* camadas / cortes */
  --bg-warm:#1B120C;         /* uso pontual (hero, detalhes) */

  /* ✅ FUNDO ÚNICO (SITE INTEIRO, exceto o polígono) */
  --bg-body:#583216;

  /* ===== SURFACES ===== */
  --surface-1:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.06);
  --surface-3:rgba(255,255,255,.08);

  /* ===== TEXTOS ===== */
  --text:#F5F7FA;            /* títulos */
  --text-2:rgba(215,220,228,.88);
  --text-3:rgba(215,220,228,.65);

  /* ===== UI FEEDBACK ===== */
  --border-soft:rgba(255,255,255,.10);
  --border-bronze:rgba(166,106,33,.35);

  /* ===== LIGHT MODE FUTURO ===== */
  --light-bg:#F7F8FA;

  /* ===== PADRONIZAÇÃO DE ALTURAS ===== */
  --header-h:92px;           /* altura única do header */
  --hero-h:100svh;           /* viewport estável (mobile-friendly) */
  --hero-h-fallback:100vh;   /* fallback */
  --cut-h:620px;             /* altura fixa do polígono */
  --seam-h:110px;            /* altura da faixa de emenda */
  --seam-radius:999px;       /* raio da emenda */
  --flow-overlap:clamp(160px, 18vh, 260px); /* overlap padronizado */

  /* ===== PADRONIZAÇÃO DE CONTAINERS (RITMO) ===== */
  --container-w:1200px;                 /* largura padrão */
  --container-x:clamp(16px, 3vw, 32px); /* padding lateral padrão */
  --stack-1:clamp(14px, 1.8vh, 18px);   /* respiro pequeno */
  --stack-2:clamp(22px, 2.8vh, 28px);   /* respiro médio */
  --stack-3:clamp(34px, 4.2vh, 44px);   /* respiro grande */
  --section-pad-y:clamp(56px, 7vh, 92px); /* padding vertical padrão */
  --grid-gap:clamp(28px, 5vw, 80px);    /* gap proporcional do grid */

  /* ===== SIMPLE TREE PROPORCIONAL ===== */
  --tree-h: clamp(420px, 48vh, 520px);   /* altura proporcional do “simple-tree” */
  --trunk-h: clamp(260px, 30vh, 340px);  /* tronco proporcional */
  --trunk-top: clamp(54px, 7vh, 72px);   /* topo proporcional */
}

/* RESET */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  font-family: "Inter", -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  overflow-x: hidden;

  /* ✅ apenas COR sólida (sem gradiente/efeitos) */
  background: var(--bg-body);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      1200px 900px at 15% 10%,
      rgba(166,106,33,.10),
      transparent 60%
    ),
    radial-gradient(
      1000px 800px at 85% 30%,
      rgba(166,106,33,.06),
      transparent 65%
    );
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(
      circle at center,
      transparent 55%,
      rgba(0,0,0,.35) 100%
    );
}


/* =========================================================
   HERO (SECTION 1)
   ========================================================= */

.hero{
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: var(--hero-h-fallback);
  z-index: 2;
  padding-bottom: calc(var(--seam-h) * 0.55);
}

@supports (height: 100svh){
  .hero{ min-height: var(--hero-h); }
}

/* ================= HEADER ================= */

.header{
  position:absolute;
  top:0; left:0;
  width:100%;
  z-index: 9999;

  background: linear-gradient(180deg, rgba(7,7,9,.78), rgba(7,7,9,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.header-inner{
  max-width:var(--container-w);
  margin:0 auto;
  height:var(--header-h);
  padding:0 var(--container-x);

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:50px;
   padding: 10px 12px;
}


.logo{ display:flex; align-items:center; }
.logo img{
height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ================= NAV ================= */

.navbar{
  display:flex;
  align-items:center;
  gap:50px;
}

.navbar a{
  font-size:14px;
  font-weight:500;
  color:var(--text-2);
  text-decoration:none;

  padding:10px 12px;
  border-radius:10px;

  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.navbar a:hover{
  color:var(--text);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.navbar a.is-active{
  color:var(--text);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(166,106,33,.35);
}
.navbar .nav-cta{
  color: var(--text);
  background: rgba(201,162,77,.10);
  border: 1px solid rgba(201,162,77,.25);
}
.navbar .nav-cta:hover{
  background: rgba(201,162,77,.14);
}
/* ================= AMBIENTE (glow/noise) ================= */
/* ✅ removidos (não renderizam) */
.glow,
.noise{ display:none !important; }

/* ================= HERO CONTENT ================= */

.hero-content{
  position:relative;
  z-index:3;

  max-width:var(--container-w);
  margin:0 auto;

  padding-top: calc(var(--header-h) + var(--section-pad-y));
  padding-bottom: var(--section-pad-y);

  min-height: var(--hero-h-fallback);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--grid-gap);

  padding-left: var(--container-x);
  padding-right: var(--container-x);
}

@supports (height: 100svh){
  .hero-content{ min-height: var(--hero-h); }
}

.hero-left{
  position: relative;
  z-index: 4;
  max-width: 640px;
  display: inline-block;
  padding: 10px 6px;
}

@media (min-width: 901px){
  .hero-left{ transform: translateY(-90px); }
}

/* ✅ sem blur, sem vinheta forte (mantém legibilidade mas não cria “outra cor”) */
.hero-left::before{
  content:"";
  position:absolute;
  left:-34px;
  top:-26px;
  width: calc(100% + 68px);
  height: calc(100% + 54px);
  z-index:-1;

  background: radial-gradient(closest-side,
    rgba(0,0,0,.78),
    rgba(0,0,0,.32) 58%,
    rgba(0,0,0,0) 78%
  );

  filter: blur(2px);
  pointer-events:none;
}

/* ================= TÍTULO ================= */

.hero-title{
  margin: 0 0 var(--stack-1);
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  line-height: 1.14;
  font-weight: 800;
  color: #ffffff;

  text-shadow:
    0 2px 0 rgba(0,0,0,.70),
    0 10px 24px rgba(0,0,0,.55);
}

.hero-title .highlight{
  color: var(--gold);
  text-shadow:
    0 2px 0 rgba(0,0,0,.70),
    0 10px 26px rgba(0,0,0,.55);
}

/* ===== HERO META ===== */

.hero-meta{
  margin-top: var(--stack-1);
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 640px;
}

.hero-pill{
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(201,162,77,.10);
  border: 1px solid rgba(201,162,77,.22);
  color: rgba(201,162,77,.95);
  font-size: 12px;
  letter-spacing: .03em;
  line-height: 1;
}

.hero-dot{
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.32);
}

.hero-small{
  font-size: 12.5px;
  color: rgba(255,255,255,.68);
}

/* ================= FOTO ================= */

.hero-right{ position: relative; z-index: 4; }

.photo-card{
  position: relative;
  border-radius: 18px;
}

.hero-photo{
  position: relative;
  width: 100%;
  max-width: 420px;
  height: auto;
  z-index: 5;
  border-radius:18px;
  display:block;

  box-shadow:0 30px 80px rgba(0,0,0,.45);
  outline:1px solid rgba(166,106,33,.22);
  outline-offset:6px;
}

/* ================= CORTE (preso ao HERO) ================= */
/* ✅ mantém cor própria do polígono (como você pediu) */
.hero-cut-shape{
  position:absolute;
  top:-1px;
  bottom:auto;
  left:0;
  width:100%;
  height: var(--cut-h);
  z-index: 0;
  pointer-events:none;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(166,106,33,.20), transparent 55%),
    radial-gradient(1100px 700px at 95% 15%, rgba(166,115,96,.16), transparent 58%),
    linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 60%, #0a0a0f 100%);

  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 42%);
}

/* ✅ EXTENSÃO: agora sem escurecer o resto do site */
.hero-cut-shape::after{
  /* mantém seu gradient existente, mas “empilha” uma fumaça leve por cima */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    /* SUA TRANSIÇÃO (fica por baixo) */
    linear-gradient(
      180deg,
      rgba(10,10,14,0) 0%,
      rgba(10,10,14,.55) 55%,
      rgba(10,10,14,1) 100%
    ),
    /* fumaça “passando” */
    radial-gradient(520px 420px at 14% 64%, rgba(166,106,33,.14), transparent 68%),
    radial-gradient(560px 480px at 52% 58%, rgba(140,53,3,.12),  transparent 70%),
    radial-gradient(540px 420px at 84% 46%, rgba(166,115,96,.12), transparent 70%);

  filter: blur(10px) saturate(1.05);
  mix-blend-mode: lighten;
  opacity: .55;

  animation: smokeDriftB 9s ease-in-out infinite alternate;
}

@keyframes smokeDriftA{
  0%   { transform: translate3d(-3%, 4%, 0) scale(1.03) rotate(-1deg); }
  50%  { transform: translate3d( 2%, 2%, 0) scale(1.05) rotate( 1deg); }
  100% { transform: translate3d( 4%, 1%, 0) scale(1.03) rotate( 0deg); }
}

@keyframes smokeDriftB{
  0%   { transform: translate3d( 0%, 0%, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1%, 0) scale(1.02); }
  100% { transform: translate3d( 2%, 0%, 0) scale(1.01); }
}

/* opção: reduzir movimento para acessibilidade */
@media (prefers-reduced-motion: reduce){
  .hero-cut-shape::before,
  .hero-cut-shape::after{
    animation: none !important;
  }
}
.hero-cut-shape::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index: 0;             /* atrás do conteúdo, dentro do shape */
  pointer-events:none;

  /* “bolhas” marrons em radial + uma névoa geral */
  background:
    radial-gradient(520px 380px at 18% 72%, rgba(166,106,33,.22), transparent 62%),
    radial-gradient(520px 420px at 44% 58%, rgba(140,53,3,.20),  transparent 66%),
    radial-gradient(560px 420px at 70% 66%, rgba(166,115,96,.18), transparent 66%),
    radial-gradient(640px 520px at 86% 42%, rgba(89,34,2,.18),   transparent 70%),
    radial-gradient(900px 700px at 50% 105%, rgba(192,138,58,.12), transparent 68%),
    radial-gradient(1200px 900px at 40% 60%, rgba(0,0,0,.18), transparent 70%);

  filter: blur(18px) saturate(1.08);
  mix-blend-mode: screen;
  opacity: .85;

  transform: translate3d(-2%, 3%, 0) scale(1.02);
  animation: smokeDriftA 12s ease-in-out infinite alternate;
}
/* =========================================================
   FLOW (SECTION 2)
   ========================================================= */

.flow{
  position: relative;
  z-index: 1;

  --overlap: var(--flow-overlap);
  margin-top: 0 !important;
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y);
}

/* ✅ seam desativada (sem blur, sem tinta) */
.flow-seam{
  display:none !important;
}
.flow-seam::before{
  content:none !important;
}

/* ================= FLOW CONTAINER ================= */

.flow-simple-container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  position: relative;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  align-items: center;
  z-index: 3;
}

/* =========================================================
   SIMPLE TREE
   ========================================================= */

.simple-tree{
  position: relative;
  height: var(--tree-h);
}

.inputs{
  position:absolute;
  top: 0;
  left:50%;
  transform: translateX(-50%);
  pointer-events:none;
}

/* ===== BALÃO ===== */
/* ✅ sólido (sem blur) */
.client-bubble{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;

  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
}

/* Texto "cliente" */
.client-label{
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,247,250,.75);
  line-height: 1;
}

/* ===== DIGITANDO ===== */
.typing{
  display:flex;
  align-items:center;
  gap: 6px;
  height: 14px;
}

.typing i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245,247,250,.65);

  animation: dotBounce 1s ease-in-out infinite;
}

.typing i:nth-child(1){ animation-delay: 0s; }
.typing i:nth-child(2){ animation-delay: .14s; }
.typing i:nth-child(3){ animation-delay: .28s; }

@keyframes dotBounce{
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: .55;
  }
  40% {
    transform: translateY(-6px);
    opacity: .95;
  }
}

/* ===== ACESSIBILIDADE ===== */
@media (prefers-reduced-motion: reduce){
  .typing i{ animation:none !important; }
}

.trunk{
  position: absolute;
  top: var(--trunk-top);
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: var(--trunk-h);

  background: linear-gradient(
    180deg,
    rgba(201,162,77,.0),
    rgba(201,162,77,.8),
    rgba(201,162,77,.0)
  );
}

.decision{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.decision-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #C9A24D;
  box-shadow: 0 0 20px rgba(201,162,77,.6);
  margin: 0 auto 8px;

  animation: sign-pulse 6s ease-in-out infinite;
}

.decision-label{
  font-size: .9rem;
  color: rgba(201,162,77,.9);
}

@keyframes sign-pulse{
  0%,55%  { box-shadow: 0 0 20px rgba(201,162,77,.35); }
  70%     { box-shadow: 0 0 28px rgba(201,162,77,.65); }
  85%     { box-shadow: 0 0 20px rgba(201,162,77,.35); }
  100%    { box-shadow: 0 0 20px rgba(201,162,77,.35); }
}

/* =========================
   ASSUNTOS (tags animadas)
   ========================= */

.topics{
  position:absolute;
  inset: 0;
  pointer-events:none;
}

.topic{
  position:absolute;
  padding: 7px 10px;
  border-radius: 999px;

  font-size: 12.5px;
  color: rgba(245,247,250,.78);

  /* ✅ sólido (sem blur) */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow: 0 12px 24px rgba(0,0,0,.22);

  opacity: 0;
  transform: translate3d(0,0,0);
}

.t1{ left: 10px;  top: 12px;  }
.t2{ left: 90px;  top: 52px;  }
.t3{ right: 18px; top: 38px;  }
.t4{ right: 14px; bottom: 76px; }
.t5{ left: 16px; bottom: 92px; }

@keyframes topic-in{
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.98); }
  15%  { opacity: .85; }
  55%  { opacity: .75; }
  72%  { opacity: .0; }
  100% { opacity: 0; }
}

.t1{ animation: topic-in 6s ease-in-out infinite; animation-delay: .0s; }
.t2{ animation: topic-in 6s ease-in-out infinite; animation-delay: .6s; }
.t3{ animation: topic-in 6s ease-in-out infinite; animation-delay: 1.2s; }
.t4{ animation: topic-in 6s ease-in-out infinite; animation-delay: 1.8s; }
.t5{ animation: topic-in 6s ease-in-out infinite; animation-delay: 2.4s; }

.t1{ --dx: 150px; --dy: 70px; }
.t2{ --dx: 90px;  --dy: 35px; }
.t3{ --dx: -150px; --dy: 60px; }
.t4{ --dx: -140px; --dy: -40px; }
.t5{ --dx: 140px; --dy: -55px; }

.t1, .t2, .t3, .t4, .t5{
  animation-name: topic-in, topic-move;
  animation-duration: 6s, 6s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

@keyframes topic-move{
  0%   { transform: translate3d(0,0,0) scale(.98); }
  60%  { transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
  78%  { transform: translate3d(calc(var(--dx) * 1.02), calc(var(--dy) * 1.02), 0) scale(.98); }
  100% { transform: translate3d(calc(var(--dx) * 1.02), calc(var(--dy) * 1.02), 0) scale(.98); }
}

/* =========================================================
   TEXTO / COPY (lado direito)
   ========================================================= */

.service-copy h2{
  margin: 0 0 var(--stack-1);
  font-size: clamp(2rem, 2.6vw, 2.4rem);
  font-weight: 800;
  color: #fff;
}

.service-copy .highlight{
  color: var(--gold);
}

.service-copy p{
  margin: 0 0 var(--stack-1);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(245,247,250,.78);
}

.service-copy .lead{
  font-size: 1.05rem;
  color: rgba(245,247,250,.9);
}

.service-copy strong{
  color: #fff;
  font-weight: 600;
}

.service-copy .accent{
  color: rgba(201,162,77,.95);
}

/* CTA */

.cta-group{
  margin-top: var(--stack-2);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Botão primário */
.btn-primary{
  padding: 12px 18px;
  border-radius: 12px;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  color: #1b120c;
  background: linear-gradient(
    135deg,
    var(--gold),
    var(--bronze-soft)
  );

  box-shadow:
    0 14px 30px rgba(201,162,77,.35),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition: transform .18s ease, box-shadow .18s ease;
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(201,162,77,.45),
    inset 0 1px 0 rgba(255,255,255,.4);
}

/* Botão secundário */
/* ✅ sem blur */
.btn-ghost{
  padding: 12px 18px;
  border-radius: 12px;

  font-size: 14px;
  font-weight: 500;
  text-decoration: none;

  color: rgba(245,247,250,.9);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);

  transition: background .18s ease, transform .18s ease;
}

.btn-ghost:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

/* =========================================================
   MOBILE
   ========================================================= */


@media (max-width: 700px){
  .hero-cut-shape{ height: var(--cut-h); }
}

/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .topic,
  .decision-dot{ animation: none !important; opacity: .85; }
  .t1,.t2,.t3,.t4,.t5{ transform:none !important; }
}
.hero-origin{
  position: absolute;
  left: 0;
  top: calc(100% + 10px); /* nasce “abaixo do bloco do texto” */
  width: 520px;
  height: 220px;

  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

/* Pílulas */
.origin-topic{
  position: absolute;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(245,247,250,.72);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  opacity: 0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

/* Posições iniciais (logo abaixo do texto) */
.origin-topic:nth-child(1){ left: 0;    top: 0; }
.origin-topic:nth-child(2){ left: 90px; top: 24px; }
.origin-topic:nth-child(3){ left: 190px; top: 8px; }
.origin-topic:nth-child(4){ left: 60px; top: 58px; }
.origin-topic:nth-child(5){ left: 210px; top: 54px; }

/* Vetores: descem para “buscar” a árvore */
.origin-topic:nth-child(1){ --dx: 40px;  --dy: 220px; animation-delay: .0s; }
.origin-topic:nth-child(2){ --dx: 80px;  --dy: 240px; animation-delay: .6s; }
.origin-topic:nth-child(3){ --dx: 20px;  --dy: 260px; animation-delay: 1.2s; }
.origin-topic:nth-child(4){ --dx: 100px; --dy: 280px; animation-delay: 1.8s; }
.origin-topic:nth-child(5){ --dx: 60px;  --dy: 300px; animation-delay: 2.4s; }

.origin-topic{
  animation: origin-fly 6.5s ease-in-out infinite;
}

@keyframes origin-fly{
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.98); }
  15%  { opacity: .85; }
  60%  { opacity: .55; transform: translate3d(calc(var(--dx)*.75), calc(var(--dy)*.75), 0); }
  85%  { opacity: 0;  transform: translate3d(var(--dx), var(--dy), 0); }
  100% { opacity: 0; }
}


/* =========================================================
   HISTÓRIA / AUTORIDADE (SECTION 3)
   ========================================================= */

.history{
  position: relative;
  z-index: 2;
  padding: calc(var(--section-pad-y) + 10px) 0;
}

.history-container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);

  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: clamp(18px, 3.4vw, 46px);
  align-items: center;
}

/* COLUNAS DE IMAGEM */
.history-media{
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}

.history-media img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;

  filter: saturate(.95) contrast(1.02);
  transform: scale(1.01);
}

/* leve moldura bronze discreta */
.history-media::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(166,106,33,.18);
}

/* TEXTO CENTRAL */
.history-content{
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;

  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);
}

.history-eyebrow{
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
}

.history-title{
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
}

.history-highlight{
  color: var(--gold);
}

.history-text{
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(245,247,250,.86);
}

.history-text.subtle{
  color: rgba(245,247,250,.72);
}

.history-proof{
  margin: 14px 0 14px;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 10px;
}

.history-proof li{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: .95rem;
  color: rgba(245,247,250,.82);
}

.history-proof .dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(201,162,77,.85);
  box-shadow: 0 0 18px rgba(201,162,77,.35);
}

.history-cta{
  margin-top: 18px;
}


/* RESPONSIVO */
@media (max-width: 980px){
 .history-container{
    grid-template-columns: 1fr 1.25fr 1fr; /* mantém o texto no meio */
    gap: 18px;
    align-items: center;
  }

  .history-media img{
    height: 420px;
  }

  .history-content{
    order: 0;
  }
}
/* =========================================================
   AVALIAÇÕES (SECTION 4)
   ========================================================= */

.reviews{
  position: relative;
  z-index: 2;
  padding: var(--section-pad-y) 0;
}

.reviews-container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}

.reviews-head{
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.reviews-eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
}

.reviews-title{
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.reviews-meta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.reviews-score{
  display:flex;
  align-items: baseline;
  gap: 10px;
  color: rgba(245,247,250,.86);
}

.reviews-score .score{
  font-size: 26px;
  font-weight: 900;
  color: #fff;
}

.reviews-score .stars{
  color: rgba(201,162,77,.95);
  letter-spacing: .08em;
}

.reviews-score .count{
  color: rgba(245,247,250,.65);
  font-size: 13px;
}

.reviews-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,247,250,.9);
  transition: transform .18s ease, background .18s ease;
}

.reviews-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

/* CARROSSEL */
.reviews-shell{
  position: relative;
  border-radius: 18px;
  padding: 18px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 26px 60px rgba(0,0,0,.28);
}

.reviews-viewport{
  overflow-x: auto;
  overflow-y: hidden;

  /* ✅ CONTÍNUO: scroll-snap atrapalha o marquee */
  scroll-snap-type: none;

  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  width: 100%;
  scroll-behavior: auto !important;
}

.reviews-viewport::-webkit-scrollbar{
  display:none;                   /* Chrome/Safari */
}


/* track não precisa mais de transform */
.reviews-track{
  display: flex;
  gap: 16px;
  padding: 6px;
  will-change: auto;
  transition: none;
  width: max-content;
}

.review-card{
  flex: 0 0 clamp(320px, 34vw, 420px); /* <<< estável */
  border-radius: 16px;
  padding: 16px 16px 14px;

  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.review-card:focus,
.review-card:hover{
  border-color: rgba(201,162,77,.28);
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
  transform: translateY(-2px);
}

.review-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  color: rgba(255,255,255,.92);
  font-weight: 800;

  background: linear-gradient(135deg, rgba(201,162,77,.22), rgba(166,106,33,.10));
  border: 1px solid rgba(201,162,77,.18);
}

.who{
  flex: 1;
  min-width: 0;
}

.name{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  font-size: 14px;
}

.sub{
  font-size: 12px;
  color: rgba(245,247,250,.62);
  margin-top: 2px;
}

.rate{
  color: rgba(201,162,77,.95);
  letter-spacing: .08em;
  font-size: 12px;
  white-space: nowrap;
}

.review-text{
  margin: 0;
  color: rgba(245,247,250,.82);
  line-height: 1.65;
  font-size: 14px;
  min-height: 92px;
}

.review-foot{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.tag{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(201,162,77,.10);
  border: 1px solid rgba(201,162,77,.18);
  color: rgba(201,162,77,.92);
  font-size: 12px;
}

.date{
  color: rgba(245,247,250,.58);
  font-size: 12px;
}

/* botões */
.rev-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.92);

  cursor: pointer;
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease;
  z-index: 10;
}

.rev-btn:hover{ background: rgba(0,0,0,.42); transform: translateY(-50%) scale(1.03); }
.rev-btn.prev{ left: 12px; }
.rev-btn.next{ right: 12px; }

/* dots */
.reviews-dots{
  display:flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.reviews-dots button{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.20);
  cursor: pointer;
}

.reviews-dots button.is-active{
  background: rgba(201,162,77,.85);
  box-shadow: 0 0 18px rgba(201,162,77,.25);
}

/* responsivo */


@media (prefers-reduced-motion: reduce){
  .reviews-track{ transition: none !important; }
}
.site-footer{
  background: var(--bg-dark-2);
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-container{
  max-width: 1200px;
  margin: auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 48px;
}

.footer-title{
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 16px;
}

.footer-text{
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-2);
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li{
  margin-bottom: 10px;
}

.footer-links a{
  color: var(--text-2);
  text-decoration: none;
  transition: color .3s ease;
}

.footer-links a:hover{
  color: var(--bronze-soft);
}

.footer-legal{
  margin-top: 12px;
  font-size: .8rem;
  color: var(--text-3);
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 20px;
  text-align: center;
  font-size: .8rem;
  color: var(--text-3);
}
.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-contact li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--text-2);
}

.footer-contact .icon{
  opacity: .85;
}

/* =========================================================
   MOBILE — UNIFICADO (MLINO)
   ========================================================= */

@media (max-width: 900px){

  /* anti overflow */
  html, body{ overflow-x:hidden; }
  .hero, .flow, .history, .reviews, .site-footer{ overflow-x: clip; }

  :root{
    --header-h: 72px;
    --cut-h: 820px; /* ✅ agora alto o suficiente para gravata */
    --section-pad-y: clamp(40px, 6vh, 68px);
    --grid-gap: clamp(18px, 4vw, 28px);
  }

  /* garante que o absolute do shape se ancora no hero */
  .hero{ position: relative; }

  /* HEADER */
  .header{
     position:absolute;
     top:0; left:0;
    width:100%;
    z-index: 9999;

    background: linear-gradient(180deg, rgba(7,7,9,.78), rgba(7,7,9,0));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .header-inner{
    height: var(--header-h);
    gap: 10px;
    justify-content: space-between;
  }

  /* NAV container */
  .navbar{
    display:flex;
    align-items:center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: nowrap; /* ✅ não quebrar o CTA */
  }

  /* links (dropdown) */
  .nav-links{
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    display: none;
    flex-direction: column;
    gap: 0;
    background: rgba(10,10,14,.98);
    border-bottom: 1px solid rgba(255,255,255,.10);
    z-index: 9998;
  }

  .nav-links a{
    color: rgba(245,247,250,.92);
    padding: 16px 18px;
    text-align: center;
    font-weight: 700;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    background: transparent;
    transform: none !important;
  }
  .nav-links a:hover{ background: rgba(255,255,255,.06); }

  /* abre o dropdown */
  .header.is-open .nav-links{ display:flex; }

  /* CTA (classe, não last-child) */
  .nav-cta{
    white-space: nowrap;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text);
    background: rgba(201,162,77,.10);
    border: 1px solid rgba(201,162,77,.25);
    text-decoration:none;
    font-size: 12.5px;
    font-weight: 600;
  }

  /* HAMBURGER */
  .nav-toggle{
    display: inline-flex;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(201,162,77,.25);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    cursor: pointer;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
  }

  .nav-toggle span{
    width: 22px;
    height: 2px;
    background: rgba(245,247,250,.85);
    border-radius: 999px;
    display: block;
    transition: transform .2s ease, opacity .2s ease;
  }

  .header.is-open .nav-toggle span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  .header.is-open .nav-toggle span:nth-child(2){ opacity: 0; }
  .header.is-open .nav-toggle span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  /* HERO layout */
  .hero{ padding-bottom: 24px; }

  .hero-content{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;

    padding-top: calc(var(--header-h) + 22px);
    padding-bottom: 34px;
    min-height: unset;
  }

  .hero-left{
    transform: none !important;
    max-width: 680px;
    padding: 0;
  }

  .hero-title{
    font-size: clamp(1.85rem, 7vw, 2.25rem);
    line-height: 1.08;
  }

  .hero-right{
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }

  /* ✅ CORTE: chega na região da gravata */
  .hero-cut-shape{
    top: 0;
    left: 0;
    width: 100%;
    height: var(--cut-h);

    /* chave: desce MUITO o ponto esquerdo e mantém a inclinação controlada */
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 42%);
  }

  .hero-cut-shape::after{ height: 90px; }

  .hero-origin{ display:none !important; }

  /* FLOW */
  .flow-simple-container{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .simple-tree{
    height: clamp(360px, 46vh, 440px);
  }

  .topic{
    font-size: 12px;
    padding: 6px 9px;
  }

  .cta-group{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn-primary, .btn-ghost{
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* HISTORY */
   .history{ padding: var(--section-pad-y) 0; }
  .history-container{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .history-content{ padding: 18px; }

  /* ✅ Doutor (esquerda): corpo inteiro */
   .history-media--left img{
    width: 100%;
    height: auto !important;

    /* “moldura” vertical tipo a do WP */
    aspect-ratio: 2 / 3;          /* ajuste aqui se quiser mais alto: 3/4 */
    max-height: 520px;            /* impede ficar gigante */
    margin: 0 auto;

    object-fit: contain !important;     /* ✅ mostra inteiro */
    object-position: center bottom;     /* dá “chão” */
    transform: none !important;         /* tira o scale do desktop */
    filter: none;                       /* opcional: remove ajustes do desktop */
    background: rgba(0,0,0,.22);        /* “moldura” quando sobrar lateral */
  }

  /* ✅ Escritório (direita): ambiente bonito */
  .history-media--right img{
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover !important;
    object-position: center;
  }


  /* REVIEWS */
  .reviews-shell{ padding: 14px; }
  .rev-btn{
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  /* FOOTER */
  .footer-container{
    padding: 44px 16px;
    gap: 26px;
  }
}

@media (max-width: 900px){

  /* cards não podem ficar gigantes no celular */
  .history-media{
    max-width: min(520px, 92vw);
    margin: 0 auto;
  }

  .history-media--left{
    max-height: 520px;
     display: grid;
  place-items: center;  /* ✅ trava o “gigante” */
  }

  .history-media--right{
    max-height: none;
    
  }
  
  
}
/* Desktop: esconde o hambúrguer SEMPRE */
@media (min-width: 901px){
  .nav-toggle{ display: none !important; }
}

/* Mobile: mostra o hambúrguer */
@media (max-width: 900px){
  .nav-toggle{ display: inline-flex !important; }
}
/* ==========================================
   REVIEWS — MOBILE (mais parecido com o desktop)
   Cards menores, com “respiro” e preview do próximo
   ========================================== */
@media (max-width: 640px){

  /* shell um pouco mais compacto */
  .reviews-shell{
    padding: 12px;
  }

  /* viewport com respiro lateral (pra não grudar) */
  .reviews-viewport{
    padding: 0 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory; /* sensação de “carrossel premium” */
  }

  /* track com gap menor */
  .reviews-track{
    gap: 12px !important;
    padding: 6px 0 !important;
  }

  /* FORÇA o card menor (mata clamp / min-width antigos) */
  .reviews .review-card{
    flex: 0 0 78vw !important;     /* <<< tamanho do card no mobile */
    width: 78vw !important;
    min-width: 78vw !important;
    max-width: 78vw !important;

    border-radius: 14px !important;
    padding: 14px !important;
    scroll-snap-align: start;
  }

  /* texto não “estica” o card */
  .reviews .review-text{
    min-height: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;

    display: -webkit-box;
           /* ajuste 4/5 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* botões atrapalham no mobile (melhor swipe) */
  .reviews .rev-btn{
    display: none !important;
  }
}
/* =========================================================
   BLOG (página)
   ========================================================= */

.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.blog-hero{
  position: relative;
  padding: calc(var(--header-h) + 44px) 0 34px;
}

.blog-hero-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}

.blog-eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
  margin-bottom: 12px;
}

.blog-title{
  margin: 0 0 10px;
  font-size: clamp(2.0rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.blog-subtitle{
  margin: 0 0 18px;
  color: rgba(245,247,250,.78);
  line-height: 1.6;
  max-width: 68ch;
}

.blog-controls{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.blog-search input{
  width: min(520px, 92vw);
  height: 46px;
  border-radius: 14px;
  padding: 0 14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,247,250,.92);
  outline: none;
}

.blog-search input:focus{
  border-color: rgba(201,162,77,.35);
  box-shadow: 0 0 0 3px rgba(201,162,77,.10);
}

.blog-select select{
  height: 46px;
  border-radius: 14px;
  padding: 0 14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,247,250,.92);
  outline: none;
}

.blog-main{
  padding: 10px 0 var(--section-pad-y);
}

.blog-container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}

/* GRID de cards */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.blog-card{
  grid-column: span 6;
  display:block;
  text-decoration:none;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 54px rgba(0,0,0,.22);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.blog-card:hover{
  transform: translateY(-3px);
  border-color: rgba(201,162,77,.22);
  box-shadow: 0 28px 66px rgba(0,0,0,.26);
}

.blog-card-media{
  height: 220px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.blog-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.blog-card-body{
  padding: 16px 16px 18px;

}

.blog-card-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(245,247,250,.62);
  font-size: 12.5px;
  margin-bottom: 10px;
}

.blog-card-meta .dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(245,247,250,.25);
}

.blog-card-title{
  margin: 0 0 10px;
  color: rgba(255,255,255,.95);
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 900;
}

.blog-card-excerpt{
  margin: 0 0 12px;
  color: rgba(245,247,250,.78);
  line-height: 1.6;
}

.blog-card-tags{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-tag{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(201,162,77,.10);
  border: 1px solid rgba(201,162,77,.18);
  color: rgba(201,162,77,.92);
  font-size: 12px;
}

/* ===== Blog Select – Versão Mais Clara ===== */
#blogTag {
  background: linear-gradient(135deg, #2B1A10, #3A2315);
  color: #F8F3EA;
  border: 1px solid rgba(226, 195, 107, .35);
  border-radius: 14px;
  padding: 10px 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: all .2s ease;
}

/* Hover */
#blogTag:hover {
  background: linear-gradient(135deg, #3A2315, #4A2C1A);
}

/* Focus */
#blogTag:focus {
  border-color: rgba(226,195,107,.6);
  box-shadow: 0 0 0 3px rgba(226,195,107,.15);
}

/* Options */
#blogTag option {
  background: #3A2315;
  color: #F8F3EA;
}

/* Paginação */
.blog-pager{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

.pager-inner{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
}

.pager-btn{
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(245,247,250,.92);
  cursor: pointer;
}

.pager-btn:hover{ background: rgba(255,255,255,.10); }
.pager-btn:disabled{ opacity: .45; cursor: not-allowed; }
.pager-btn.is-active{
  border-color: rgba(201,162,77,.28);
  background: rgba(201,162,77,.10);
}

/* Estado vazio */
.blog-empty{
  grid-column: 1 / -1;
  padding: 22px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.blog-empty h3{
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: #fff;
}
.blog-empty p{
  margin: 0;
  color: rgba(245,247,250,.75);
}

/* ================= POST CONTAINER ================= */

.blog-post{  

  border-radius: 18px; 
  overflow: hidden;

  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.06);

  box-shadow: 
    0 20px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);

  backdrop-filter: blur(6px);
}

/* ================= HEADER ================= */

.blog-post-head{
  padding: 26px 28px 0;
}

/* ================= BOTÃO VOLTAR ================= */

.blog-back{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  text-decoration:none;
  font-size: 13px;

  color: rgba(255,255,255,.75);

  padding: 10px 14px;
  border-radius: 12px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  margin-bottom: 18px;

  transition: all .25s ease;
}

.blog-back:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* ================= META ================= */

.blog-post-meta{
  display:flex;
  gap: 10px;
  align-items:center;

  color: rgba(255,255,255,.5);
  font-size: 12.5px;

  margin-bottom: 12px;
}

.blog-post-meta .dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}

/* ================= TÍTULO ================= */

.blog-post-title{
  margin: 0 0 14px;

  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: 1.15;

  font-weight: 800;
  letter-spacing: -0.4px;

  color: #fff;

  max-width: 26ch;
}

/* ================= EXCERPT ================= */

.blog-post-excerpt{
  margin: 0 0 18px;

  color: rgba(255,255,255,.75);
  line-height: 1.75;

  font-size: 15.5px;

  max-width: 58ch;
}

/* ================= TAGS ================= */

.blog-post-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;

  padding-bottom: 20px;
}

/* ================= IMAGEM ================= */

.blog-post-cover{
  margin: 0;

  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);

  background: rgba(0,0,0,.25);
}

.blog-post-cover img{
  width: 100%;
  height: min(420px, 45vh);
  object-fit: cover;
  display:block;

  filter: contrast(1.05) brightness(.95);
}

/* ================= CONTEÚDO ================= */

.blog-post-content{
  padding: 30px;

  font-size: 16.5px;
  line-height: 1.85;

  color: rgba(255,255,255,.88);
}

/* 🔥 largura ideal de leitura */

.blog-post-content p,
.blog-post-content li{
  max-width: 200ch;
}

/* ================= TÍTULOS INTERNOS ================= */

.blog-post-content h2{
  margin-top: 44px;
  margin-bottom: 14px;

  font-size: 1.55rem;
  line-height: 1.3;

  font-weight: 800;

  color: #fff;
}

.blog-post-content h3{
  margin-top: 30px;
  margin-bottom: 12px;

  font-size: 1.22rem;
  font-weight: 700;

  color: rgba(255,255,255,.92);
}

/* ================= PARÁGRAFOS ================= */

.blog-post-content p{
  margin-bottom: 18px;
}

/* melhora ritmo visual */
.blog-post-content p + p{
  margin-top: 6px;
}

/* ================= LISTAS ================= */

.blog-post-content ul{
  margin: 18px 0 20px 20px;
  padding: 0;
}

.blog-post-content li{
  margin-bottom: 8px;
}

/* ================= LINKS ================= */

.blog-post-content a{
  color: rgba(201,162,77,.95);
  text-decoration: none;

  transition: all .2s ease;
}

.blog-post-content a:hover{
  text-decoration: underline;
  opacity: .9;
}

/* ================= DIVISOR ================= */

.blog-post-content hr{
  border: none;
  height: 1px;

  margin: 44px 0;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.2),
    transparent
  );
}

/* ================= MOBILE ================= */

@media (max-width: 768px){

  .blog-post{
    margin: 30px 16px;
  }

  .blog-post-head{
    padding: 20px 20px 0;
  }

  .blog-post-content{
    padding: 22px;
    font-size: 15.8px;
    line-height: 1.75;
  }

  .blog-post-title{
    max-width: 100%;
  }

  .blog-post-excerpt{
    max-width: 100%;
  }

  .blog-post-content p,
  .blog-post-content li{
    max-width: 100%;
  }
}

/* Responsivo */
@media (max-width: 900px){
  .blog-card{ grid-column: span 12; }
  .blog-card-media{ height: 190px; }
}
#blogPost {
  display: none;
}

#blogPost.is-active {
  display: block;
}

#blogList.is-hidden {
  display: none;
}
/* ===== SOCIAL ICONS (HEADER + FOOTER) ===== */
.social-header,
.footer-social{
  display:flex;
  gap:14px;
  align-items:center;
}

.social-header{
  margin-left:16px;
}

.social-link{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--bronze-soft);
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
  opacity:.9;
}

.social-link:hover{
  color: var(--gold);
  transform: translateY(-2px);
  opacity:1;
}

.social-link svg{
  width:100%;
  height:100%;
}

@media (max-width: 900px){

  /* container dentro do dropdown */
  .header.is-open .nav-links .social-header{
    display:flex !important;
    justify-content:center;
    align-items:center;
    gap:14px; /* igual ao seu base */
    margin-top:16px;
    padding:16px 0 6px;
    border-top:1px solid rgba(255,255,255,.08);
  }

  /* ✅ links sociais no dropdown: mantém identidade (bronze-soft) */
  .header.is-open .nav-links .social-header .social-link{
    /* neutraliza estilos de .nav-links a */
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    text-align:initial !important;
    font-weight:inherit !important;
    border-radius:999px !important;

    /* mantém seu estilo original */
    color: var(--bronze-soft) !important;
    opacity:.9 !important;
    transform:none !important;
    text-decoration:none !important;

    /* só melhora toque no mobile */
    width:46px !important;
    height:46px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* tamanho real do ícone no mobile */
  .header.is-open .nav-links .social-header .social-link svg{
    width:28px !important;
    height:28px !important;
    display:block !important;
  }

  /* hover igual ao desktop */
  .header.is-open .nav-links .social-header .social-link:hover{
    color: var(--gold) !important;
    transform: translateY(-2px) !important;
    opacity:1 !important;
  }

  /* foco visível */
  .header.is-open .nav-links .social-header .social-link:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  /* ✅ Instagram (stroke): mantém “peso” semelhante ao desktop */
  .header.is-open .nav-links .social-header .social-link svg[fill="none"]{
    stroke: currentColor !important;
    stroke-width: 1.6 !important; /* igual ao seu SVG original */
  }
}
/* =========================================================
   SERVIÇOS (página)
   ========================================================= */

.services-page{
  padding-top: var(--header-h);
}

/* HERO */
.services-hero{
  position: relative;
  padding: 44px 0 24px;
}

.services-hero-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}

.services-eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
  margin-bottom: 12px;
}

.services-title{
  margin: 0 0 12px;
  font-size: clamp(2.0rem, 3.2vw, 2.7rem);
  line-height: 1.1;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
  max-width: 22ch;
}

.services-highlight{
  color: var(--gold);
}

.services-subtitle{
  margin: 0 0 18px;
  color: rgba(245,247,250,.78);
  line-height: 1.6;
  max-width: 72ch;
}

.services-hero-cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* CONTAINER padrão */
.services-container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}

/* HEAD */
.services-areas{
  padding: var(--section-pad-y) 0;
}

.services-head{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.services-h2{
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.services-lead{
  margin: 0;
  color: rgba(245,247,250,.78);
  line-height: 1.6;
  max-width: 80ch;
}

/* GRID */
.services-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.service-card{
  grid-column: span 6;
  border-radius: 18px;
  padding: 16px 16px 14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 54px rgba(0,0,0,.22);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.service-card:hover{
  transform: translateY(-3px);
  border-color: rgba(201,162,77,.22);
  box-shadow: 0 28px 66px rgba(0,0,0,.26);
}

.service-card--special{
  grid-column: span 6;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.service-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.service-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;

  background: linear-gradient(135deg, rgba(201,162,77,.18), rgba(166,106,33,.08));
  border: 1px solid rgba(201,162,77,.18);
  color: rgba(255,255,255,.92);
}

.service-tag{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(201,162,77,.10);
  border: 1px solid rgba(201,162,77,.18);
  color: rgba(201,162,77,.92);
  font-size: 12px;
}

.service-title{
  margin: 0 0 8px;
  color: rgba(255,255,255,.95);
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 900;
}

.service-text{
  margin: 0 0 12px;
  color: rgba(245,247,250,.78);
  line-height: 1.6;
}

.service-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(245,247,250,.78);
  line-height: 1.7;
}

.service-steps{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}

.service-steps li{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(245,247,250,.82);
}

.service-steps .n{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  background: rgba(201,162,77,.10);
  border: 1px solid rgba(201,162,77,.18);
  color: rgba(201,162,77,.95);
  font-weight: 900;
  font-size: 13px;
}

.service-actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-start;
}

.service-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  text-decoration:none;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,247,250,.92);

  transition: transform .18s ease, background .18s ease;
}

.service-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
}

.service-btn--gold{
  color: #1b120c;
  background: linear-gradient(135deg, var(--gold), var(--bronze-soft));
  border: 0;
  box-shadow: 0 14px 30px rgba(201,162,77,.30), inset 0 1px 0 rgba(255,255,255,.30);
}

.service-btn--gold:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(201,162,77,.42), inset 0 1px 0 rgba(255,255,255,.35);
}

/* HOW */
.services-how{
  padding: 0 0 var(--section-pad-y);
}

.how-card{
  border-radius: 18px;
  padding: 18px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 26px 60px rgba(0,0,0,.28);
}

.how-eyebrow{
  display:inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
}

.how-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.how-item{
  grid-column: span 6;
  padding: 14px;
  border-radius: 16px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.how-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(201,162,77,.85);
  box-shadow: 0 0 18px rgba(201,162,77,.25);
  margin-bottom: 10px;
}

.how-item h3{
  margin: 0 0 6px;
  color: rgba(255,255,255,.95);
  font-size: 1rem;
  font-weight: 900;
}

.how-item p{
  margin: 0;
  color: rgba(245,247,250,.78);
  line-height: 1.6;
}

.how-cta{
  margin-top: 16px;
}

/* RESPONSIVO */
@media (max-width: 900px){
  .services-title{ max-width: 100%; }
  .service-card{ grid-column: span 12; }
  .how-item{ grid-column: span 12; }
  .services-hero-cta{
    flex-direction: column;
    align-items: stretch;
  }
  .services-hero-cta .btn{ width: 100%; text-align:center; }
}
/* =========================================================
   O ESCRITÓRIO (página) — MLINO
   (para escritorio.html)
   ========================================================= */

.office-page{
  padding-top: var(--header-h);
}

/* helpers */
.office-container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
}

.office-eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .92;
}

.office-title,
.office-page h1,
.office-page h2{
  color:#fff;
  text-shadow: 0 12px 30px rgba(0,0,0,.30);
}

.office-page .highlight{
  color: var(--gold);
}

/* base botão (seu HTML usa btn + btn-primary) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  border: 0;
  text-decoration:none;
  user-select:none;
}

/* =========================
   HERO INSTITUCIONAL
   ========================= */

.office-hero{
  position: relative;
  padding: calc(var(--header-h) + 48px) 0 32px;
}

.office-hero::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(1200px 900px at 12% 8%, rgba(166,106,33,.14), transparent 58%),
    radial-gradient(900px 700px at 88% 28%, rgba(226,195,107,.10), transparent 62%);
  opacity: .75;
}

.office-hero-container{
  position: relative;
  z-index: 1;

  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);

  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--grid-gap);
  align-items:center;
}

.office-hero-left{
  position: relative;
  max-width: 720px;
}

.office-hero-left::before{
  content:"";
  position:absolute;
  left:-34px;
  top:-26px;
  width: calc(100% + 68px);
  height: calc(100% + 54px);
  z-index:-1;
  filter: blur(2px);
  pointer-events:none;
}

.office-title{
  margin: 10px 0 var(--stack-1);
  font-size: clamp(2.0rem, 3.0vw, 3.1rem);
  line-height: 1.12;
  font-weight: 900;
}

.office-lead{
  margin: 0;
  max-width: 64ch;
  color: rgba(245,247,250,.82);
  line-height: 1.7;
  font-size: 1.02rem;
}

.office-hero-right{
  justify-self: end;
}

.office-hero-right img{
  width: 100%;
  max-width: 520px;
  height: auto;
  display:block;
  border-radius: 18px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.42);

  /* proteção contra recorte feio */
  object-fit: cover;
}

/* =========================
   SEÇÕES BASE
   ========================= */

.office-history,
.office-method,
.office-structure,
.office-cta{
  padding: var(--section-pad-y) 0;
}

.office-history{
  padding-top: calc(var(--section-pad-y) - 10px);
}

.section-header{
  margin-bottom: 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.section-header h2{
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  font-weight: 900;
}

/* =========================
   BLOCO 2 COLUNAS
   ========================= */

.two-columns{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--grid-gap);
  align-items:center;
}

.two-columns.reverse{
  grid-template-columns: 1.05fr 1fr;
}

.two-columns.reverse .office-content{
  order: 0;
}
.two-columns.reverse .office-image{
  order: 1;
}

.office-image{
  margin: 0;
  border-radius: 18px;
  overflow:hidden;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 26px 60px rgba(0,0,0,.28);
}

.office-image img{
  width: 100%;
  height: min(520px, 52vh);
  display:block;
  object-fit: cover;
  object-position: center;

  filter: saturate(.98) contrast(1.02);
  transform: scale(1.01);
}

.office-content{
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 28px);

  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}

.office-content h2{
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.0vw, 1.8rem);
  line-height: 1.18;
  font-weight: 900;
}

.office-content p{
  margin: 0 0 12px;
  color: rgba(245,247,250,.80);
  line-height: 1.7;
}

.office-content p:last-child{
  margin-bottom: 0;
}

/* =========================
   METODOLOGIA (cards)
   ========================= */

.method-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.method-card{
  grid-column: span 6;
  border-radius: 18px;
  padding: 16px 16px 14px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 54px rgba(0,0,0,.22);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.method-card:hover{
  transform: translateY(-3px);
  border-color: rgba(201,162,77,.22);
  box-shadow: 0 28px 66px rgba(0,0,0,.26);
}

.method-card h3{
  margin: 0 0 8px;
  color: rgba(255,255,255,.95);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 900;
}

.method-card p{
  margin: 0;
  color: rgba(245,247,250,.78);
  line-height: 1.65;
}

/* =========================
   CTA FINAL
   ========================= */

.office-cta{
  padding-bottom: calc(var(--section-pad-y) + 10px);
}

.cta-center{
  text-align:center;

  border-radius: 18px;
  padding: clamp(20px, 2.8vw, 34px);

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 26px 60px rgba(0,0,0,.26);
}

.cta-center h2{
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.4vw, 2.0rem);
  font-weight: 900;
}

.cta-center p{
  margin: 0 auto 18px;
  max-width: 70ch;
  color: rgba(245,247,250,.78);
  line-height: 1.7;
}

/* =========================
   RESPONSIVO
   ========================= */

@media (max-width: 900px){
  .office-hero{
    padding: calc(var(--header-h) + 26px) 0 18px;
  }

  .office-hero-container{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .office-hero-right{
    justify-self: start;
    width: 100%;
    max-width: 560px;
  }

  .office-hero-left::before{
    left: -18px;
    top: -16px;
    width: calc(100% + 36px);
    height: calc(100% + 32px);
  }

  .two-columns,
  .two-columns.reverse{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .two-columns.reverse .office-content{ order: 0; }
  .two-columns.reverse .office-image{ order: 1; }

  .office-image{
    max-width: min(560px, 92vw);
    margin: 0 auto;
  }

  .office-image img{
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transform: none;
    filter: none;
  }

  .method-card{ grid-column: span 12; }

  .cta-center{
    text-align: left;
  }

  .cta-center .btn{
    width: 100%;
  }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .method-card{ transition:none !important; }
  .method-card:hover{ transform:none !important; }
}