/* ===== Reset ===== */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Montserrat', sans-serif; color: #333; }

/* Consistência visual global */
:root{
  --container-pad: 6%;
  --container-max: 1200px;
  --cta-btn: #d0a933; /* fallback global para qualquer .cta-btn */
}

/* Imagens previsíveis (sem “saltos” de linha) */
img{ display:block; max-width:100%; height:auto; }

/* ========= HERO ========= */
/* Vars exclusivas da seção Hero */
.hero{
  --hero-gold: #d0a933;
  --photo-size: 620px;
  --photo-right: -16%;
  --photo-top: -3%;
  position: relative;

  /* 🔽 Fundo com foto + leve escurecimento (opcional) */
  background:           /* overlay suave */
    url("./images/background_inicio.png") center / cover no-repeat, #fff;  /* caminho da sua imagem */

  padding: 40px var(--container-pad) 0;
  overflow: hidden;
}

.sanitaria { color: #727160; }

.hero-inner{
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  
  position: relative;
  z-index: 2;
}

/* ===== Coluna esquerda ===== */
.hero-content { position: relative; max-width: 620px; z-index: 5; }
.logo-wrap { position: relative; display: inline-block; }
.logo { width: 180px; display: block; position: relative; z-index: 2; }


.hero h1 { position: relative; z-index: 2; }

/* Título e texto */
.title { margin: 40px 0 16px; line-height: 1.06; text-transform: uppercase; }
.title span { display: block; font-weight: 900; letter-spacing: .5px; }
.title span:nth-child(1),
.title span:nth-child(2),
.title span:nth-child(3) { font-size: 80px; }
.desc { font-size: 16px; color: #555; margin: 0 0 20px; text-align: justify; }

/* Botão + estrelas do HERO */
.btn {
  display: inline-block;
  background: var(--hero-gold);
  color: #fff;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 6px;
}
.rating { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stars { color: var(--hero-gold); font-size: 18px; letter-spacing: 2px; }
.stars-element { color: yellow }
.rating-text { font-size: 16px; }
.stars-primera-section { color: var(--hero-gold); font-size: 18px; letter-spacing: 2px; }

/* ===== Coluna direita ===== */
.visual {
  position: relative;
  width: var(--photo-size);
  height: var(--photo-size);
  flex: 0 0 var(--photo-size);
  isolation: isolate;
  background: transparent;
  z-index: 3;
  margin-bottom: -12px;
}
.visual::before{ display:none !important; }

/* Foto em losango */
.diamond-photo {
  position: absolute;
  right: var(--photo-right);
  top: var(--photo-top);
  width: var(--photo-size);
  height: var(--photo-size);
  transform: rotate(45deg);
  overflow: hidden;
  background: transparent;
  z-index: 2;
}
.diamond-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-45deg) scale(1.48);
  transform-origin: center;
}

/* ===== Responsivo ===== */
@media (max-width:1100px){
  .title span{font-size:56px;}
}
@media (max-width:900px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .visual{width:100%;height:480px;margin-bottom:-6px;}
}
@media (max-width:520px){
  .logo{width:110px}
  .title span{font-size:44px;}
}

/* ========= SEGMENTS ========= */
:root{
  --seg-gold:#cdaa52;
  --seg-dark:#3a3a3a;
  --seg-radius:18px;
}
.segments{ padding:40px var(--container-pad) 40px; background:#fff; color:#2d2d2d; }
.segments-inner{ max-width: var(--container-max); margin:0 auto; }
.segments-title{ margin:0 0 8px; text-align:center; font-size:38px; font-family: 'Montserrat', sans-serif; color:var(--seg-gold); text-transform: uppercase;}
.segments-sub{ text-align:center; margin:0 0 32px; font-size:16px; color:#4a4a4a; }

/* ↓ Cards menores (altura), sem mexer na tipografia */
.segments-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 32px; /* levemente menor que antes */
}
.seg-media{
  position: relative;
  border-radius: var(--seg-radius) var(--seg-radius) 0 0;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  height: clamp(190px, 22vw, 260px); /* redução de altura */
}
.seg-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  filter: grayscale(100%);
}
.seg-pill{
  position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  background:var(--seg-dark); color:var(--seg-gold); font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  padding:12px 18px;           /* ajuste sutil de padding */
  text-align:center; min-width:100%; box-shadow:0 4px 10px rgba(0,0,0,.15);
  font-family: 'Montserrat', sans-serif;
  font-size:16px;              /* mantém 16px */
}
.seg-desc{
  background:var(--seg-gold); color:#2b2b2b; text-align:center;
  border-radius:0 0 var(--seg-radius) var(--seg-radius);
  font-size:16px;              /* mantém 16px */
  line-height:1.35;
  min-height:60px;             /* um pouco mais compacto */
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:1100px){
  .segments-title{font-size:42px}
  .segments-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .segments-title{font-size:36px}
  .segments-sub{font-size:16px}
  .segments-grid{grid-template-columns:1fr;}
  .seg-media{ height: 196px; }
}

/* ========= CTA (aprovação sanitária) ========= */
.cta{
  --cta-bg: #b6a27b;
  --cta-text:#1f1f1f;
  --cta-muted:#383838;
  --cta-btn:#d0a933;
  --cta-star:#d0a933;
  --cta-radius:14px;
  margin:0; padding:0;
  background: var(--cta-bg); color: var(--cta-text);
}
.cta-inner{
  margin: 0 auto;
  padding: 72px var(--container-pad);
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 40px;
  align-items: flex-start;
}
.cta-media{ margin:0; border-radius: var(--cta-radius); overflow: hidden; }
.cta-media img{ width:80%; height:520px; object-fit:cover; border-radius: 14px;}
.cta .cta-media, .cta .cta-content { align-self: start; }

.cta-title{ margin:120px 0 24px; font-family: 'Montserrat' sans-serif; font-weight:700; line-height:1.15; font-size: 38px; color:#343434; text-transform: uppercase; }
.cta-sub{ margin:0 0 24px; font-size:16px; line-height:1.6; color: var(--cta-muted); }

/* ✅ Correção definitiva do tamanho do .cta-btn */
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--cta-btn, #d0a933);
  color:#fff;
  text-decoration:none;
  border-radius:12px;          /* volta ao raio original */
  padding:10px 16px;           /* proporcional e compacto */
  font-size:16px;              /* tipografia fixa a 16px */
  line-height:1.15;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  white-space: nowrap;
}

.cta-rating{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.stars{ color: var(--cta-star); letter-spacing:4px; font-size:18px; }
.rate-text{ font-size:16px; color: var(--cta-muted); }

@media (max-width: 980px){
  .cta-inner{ grid-template-columns:1fr; gap:28px; }
  .cta-media img{ height:400px; }
  .cta-content{ max-width:720px }
}
@media (max-width: 520px){
  .cta-media img{ height:320px; }
  .cta-sub{ font-size:20px; } /* (não mexe no body/textos padrão) */
}

/* ========= ABOUT (QUEM SOMOS) ========= */
/* Estratégia: trocar a grade por FLEX para igualar alturas facilmente.
   A coluna de texto vira flex-col e o botão cola no rodapé com margin-top:auto. */
.about{
  --about-gold:#c7b07a; --about-gold-dark:#b39a63; --about-ink:#2f2f2f; --about-muted:#555; --about-chip:#343434; --about-radius:18px;
  --about-photo-h: 520px; /* referência para a altura da foto */
  padding: 40px var(--container-pad) 40px; color: var(--about-ink); background:#fff;
}
.about-inner{
  max-width: var(--container-max);
  margin:0 auto 40px;

  /* ⬇️ FLEX no lugar de grid para alinhar bottoms */
  display:flex;
  align-items:stretch;     /* iguala alturas das colunas */
  gap:48px;
}
.about-text{
  flex:1 1 0%;
  display:flex;
  flex-direction:column;   /* permite empurrar o botão pro rodapé */
  min-height: var(--about-photo-h);
}
.about-text h2{ font-size:38px; color: #b39a63; line-height:1.15; margin:0 0 12px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; }
.about-text p{ margin:0 0 10px; color: var(--about-muted); line-height:1.6; text-align:justify; }

/* Botão da seção QUEM SOMOS (sem alterar HTML) */
.about .cta-btn{
  margin-top:auto;         /* cola no bottom da coluna */
  align-self:flex-start;
}
.about .cta-btn:hover{ background: var(--about-gold-dark); }

.about-media{
  flex:0 0 440px;          /* mesma largura da sua coluna de imagem */
  position:relative;
}
.about-media img{
  width:100%;
  height: var(--about-photo-h);
  object-fit:cover;
  border-radius:16px;
  display:block;
  filter:none;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.about-stats{ position:absolute; left:-28px; bottom:56px; background: var(--about-gold); border-radius:14px; padding:14px 16px 12px; box-shadow:0 10px 24px rgba(0,0,0,.18); width:360px; }

/* === ALINHAMENTO CORRIGIDO DOS NÚMEROS/LEGENDAS === */
.stats-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:6px;
  justify-items:center;
}
.stat-chip{
  background: var(--about-chip);
  color:#e8ddc2;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  width:100%;
  max-width:170px;
  height:48px;
  line-height:1;
}
.stat-chip.small{ max-width:110px; }
.stat-chip strong{
  font-size:22px;
  letter-spacing:.5px;
  line-height:1;
  transform: translateY(1px);
}
.stats-labels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  font-size:14px;
  color:#2d2d2d;
  text-align:center;
}

/* === TEAM (membros): caixas alinhadas e com menos espaço interno === */
.team{
  max-width: var(--container-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:34px;
  align-items: stretch;
}
.member{
  display:flex;
  flex-direction:column;
  height:100%;
}
.avatar{ width:280px; height:280px; margin:0 auto 12px; border-radius:50%; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.15);}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.member-name{ background:#333; color: var(--about-gold); text-align:center; font-weight:700; letter-spacing:.6px; padding:10px 12px; border-radius:10px; margin:0 20px 8px; }
.member-desc{
  background: var(--about-gold);
  color:#2b2b2b;
  border-radius:10px;
  padding:10px 12px;         /* menos respiro interno */
  text-align:center;
  line-height:1.4;
  margin:0 20px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: unset;
}

@media (max-width: 1000px){
  .about-inner{
    flex-direction:column;  /* stack */
    gap:28px;
  }
  .about-media{ flex: none; width:100%; }
  .about { --about-photo-h: 460px; }
  .about-media img{ height: var(--about-photo-h); }
  .about-text{ min-height: unset; }
  .about .cta-btn{ margin-top: 14px; } /* volta ao fluxo normal em 1 coluna */
  .about-stats{ left:12px; bottom:22px; }
}
@media (max-width: 760px){
  .team{ grid-template-columns:1fr; }
  .avatar{ width:260px; height:260px; }
  .about { --about-photo-h: auto; }
  .about-media img{ height:auto; }
}

/* ========= TESTIMONIALS ========= */
.testimonials{
  --t-bg:#343434; --t-ink:#e8ddc2; --t-gold:#cdb57a; --t-gold-2:#bda165; --t-muted:#bda165; --t-radius:6px;
  background: var(--t-bg); color: var(--t-ink); padding:56px var(--container-pad) 80px;
}
.t-wrap{ max-width: var(--container-max); margin:0 auto; }
.t-title{ margin:0 0 28px; text-align:center; font-family: Georgia, "Times New Roman", Times, serif; font-weight:700; color: var(--t-gold); letter-spacing:.5px; line-height:1.15; font-size: 38px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; }
.t-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px; }
.t-card{ position:relative; border:1px solid var(--t-gold-2); border-radius: var(--t-radius); padding:42px 34px 26px; text-align:center; background:transparent; }
.t-quote{ font-family: Georgia, "Times New Roman", Times, serif; color: var(--t-gold); font-size:38px; line-height:1; }
.t-quote-top{ position:absolute; top:18px; left:0; right:0; margin:0 auto; width:max-content; }
.t-quote-bottom{ margin:14px auto 0; width:max-content; font-size:34px; }
.t-text{ font-family: 'Montserrat', sans-serif; font-size:16px; line-height:1.05; color: var(--t-muted); margin:18px 0 18px; }
.t-stars{ color: var(--t-gold); letter-spacing:6px; font-size:18px; margin-top:8px; }
.t-name{ color:#ffffff; margin-top:6px; font-weight:600; }
@media (max-width: 1024px){ .t-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .t-grid{ grid-template-columns:1fr; } .t-card{ padding:36px 22px 22px; } .t-text{ font-size:16px; } }

/* ========= Seção Contato CTA (FINAL) ========= */
.contact-cta{
  position: relative;
  /* foto + overlay suave (opcional) */
  background:
    url("../images/background_final.png") center / cover no-repeat, #fff;
}

.contact-cta .cta-inner{
  position: relative;
  z-index: 2;
}

.contact-cta .cta-inner{
  max-width: var(--container-max);
  margin:0 auto;
  padding:40px 0 28px;
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:50px;
  align-items:flex-start;
  position:relative;
}

/* Foto com moldura atrás e ícones */
.photo-wrap { position: relative; width: 100%; z-index: 2; }
.contact-cta .photo-wrap{ width:100%; max-width: 520px; margin-left: auto; }
.photo-wrap img { position: relative; z-index: 1; width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }

/* Retângulo preto proporcional */
.frame { position: absolute; top: -28px; right: -28px; width: 88%; height: 88%; background: #333; border-radius: 10px; z-index: 0; }
.contact-cta .frame{ top: -14px; right: -14px; width: 78%; height: 78%; }

/* Pontos */
.dots { position: absolute; top: -10px; right: 6px; width: 88px; height: 70px; z-index: 3; background-image: radial-gradient(#d6c27c 1.4px, transparent 1.4px); background-size: 10px 10px; opacity: 0.9; }
.contact-cta .dots{ top: -18px; right: -16px; width: 60px; height: 48px; }

/* Ícones */
.contact-cta .item{ display:flex; align-items:center; gap:12px; }
.contact-cta .icon{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:#cdb56f; color:#fff; display:grid; place-items:center; box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.contact-cta .icon svg{ width:22px; height:22px; display:block; }

/* Waves decorativas */
.waves{ position:absolute; inset:0; right:-18%; top:-6%; pointer-events:none; z-index:0; opacity:.45; background-repeat:no-repeat; background-position:center right; background-size: 560px 560px; }

/* Logos da seção de contato */
.brands{ max-width: var(--container-max); margin:0 auto; padding:14px 0 48px; text-align:center; }
.brands-title{ margin:8px 0 18px; color:#2f2f2f; }
.brands-row{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:22px; align-items:center; }
.brands-row img{ max-width:100%; max-height:44px; object-fit:contain; filter:grayscale(100%); opacity:.85; }

/* ===== Responsivo final ===== */
@media (max-width:1050px){
  .cta-inner{ grid-template-columns:1fr; gap:28px; }
  .contact-cta .cta-inner{ grid-template-columns:1fr; gap:28px; }
  .contact-cta .photo-wrap{ max-width: min(520px, 78vw); margin: 0 auto; }
  .frame{ display:none } .dots{ display:none }
  .waves{ right:-6%; background-size:460px 460px }
  .brands-row{ grid-template-columns:repeat(5,1fr) }
}
@media (max-width:640px){
  .brands-row{ grid-template-columns:repeat(3,1fr) }
}

/* === Alinho final da 3ª seção na mesma régua das demais === */
.cta { padding-left: var(--container-pad) !important; padding-right: var(--container-pad) !important; }
.cta .cta-inner { padding: 40px 0 !important; grid-template-columns: 627px 1fr !important; align-items: flex-start !important; }
.cta .cta-media, .cta .cta-content { align-self: start !important; }
@media (max-width: 980px){
  .cta .cta-inner{ grid-template-columns: 1fr !important; padding: 56px 0 !important; }
}

/* ================================
   AJUSTES FINAIS — Contact CTA
   ================================ */
.contact-cta .cta-h2 { color: #cdb56f; font-size: clamp(36px, 4.8vw, 38px); line-height: 1.08; margin: 0 0 16px; font-family: 'Montserrat', sans-serif; text-transform: uppercase;}
.contact-cta .cta-lead { color: #343434; font-size: 16px; line-height: 1.55; margin: 0 0 40px; text-align: justify;}
.contact-cta .photo-wrap { width: 100%; max-width: clamp(280px, 36vw, 420px); margin-left: auto; margin-top: 36px}
.contact-cta .frame { width: 90%; height: 95%; top: -34px; right: -2px; }
.contact-cta .dots { width: 80px; height: 48px; top: -16px; right: 12px; }
.contact-cta .photo-wrap img { width: 92%; height: auto; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.contact-cta .cta-left { margin: 0; padding: 0; }
.contact-cta .cta-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; row-gap: 22px; }
.contact-cta .cta-list .item { display: flex; align-items: center; column-gap: 16px; }
.contact-cta .icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #cdb56f; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0,0,0, 0.12); }
.contact-cta .icon svg { width: 20px; height: 20px; }
.contact-cta .cta-list span { font-size: 16px; }
@media (max-width: 800px) {
  .contact-cta .photo-wrap { max-width: min(360px, 80vw); margin: 0 auto; }
  .contact-cta .frame, .contact-cta .dots { display: none; }
}

/* ================= FOOTER ================= */
.footer {
  --footer-bg: #343434;
  --footer-ink: #cdb56f;
  --footer-gold: #cdb56f;
  --footer-muted: #cdb56f;
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding: 42px 6% 20px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.footer-logo-col { display: flex; align-items: flex-start; justify-content: flex-start; }
.footer-logo { width: 180px; height: auto; display: block; filter: brightness(1.05); }
.footer-title { margin: 0 0 12px; color: var(--footer-gold); font-size: 16px; letter-spacing: 0.4px; text-transform: uppercase; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-link { color: var(--footer-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.footer-link:hover { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.25); }
.footer-muted { color: var(--footer-muted); }
.footer-bottom { max-width: 1200px; margin: 26px auto 0; padding-top: 16px; border-top: 1px solid rgba(205, 181, 111, 0.28); text-align: center; }
.footer-bottom .copy { margin: 0; color: var(--footer-muted); font-size: 14px; }

/* ===================== BRANDS SHOWCASE ===================== */
.brands-showcase { background: #fff; padding: 20px 6% 40px; text-align: center; }
.contact-cta + .brands-showcase { margin-top: 0; }
.brands-inner { max-width: 1200px; margin: 0 auto; }
.brands-title { font-size: 24px; color: #cdb56f; margin: 0 0 25px; font-family: 'Montserrat', sans-serif; text-transform: uppercase;}
.brands-sub { color: #555; font-size: 18px; margin: 0 0 50px; }
.brands-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 36px 50px; align-items: center; justify-items: center; margin-top: 40px; }
.brands-logos img { max-width: 160px; max-height: 80px; object-fit: contain; transition: all 0.3s ease; }
.brands-logos img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }

/* ===================== Dourados (triângulos) ===================== */
.gold-triangle.top-right {
  position: absolute;
  background: #d0a933;
  z-index: 1;
  transform-origin: center;
  top: -140px;
  right: -180px;
  width: 900px;
  height: 700px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
@media (max-width: 900px) {
  .gold-triangle.top-right {
    top: -90px;
    right: -120px;
    width: 560px;
    height: 480px;
  }
}
.gold-triangle.pillar-left {
  position: absolute;
  background: rgba(208, 169, 51, 0.65);
  z-index: 6;
  transform-origin: center;
  mix-blend-mode: multiply;
  bottom: -8px;
  left: 40px;
  width: 440px;
  height: 210px;
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
          clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
@media (max-width: 900px) {
  .gold-triangle.pillar-left {
    bottom: -6px;
    left: 30px;
    width: 320px;
    height: 150px;
    background: rgba(208, 169, 51, 0.6);
  }
}

/* === Testimonials: texto justificado e estrelas alinhadas ao rodapé === */
.t-grid { align-items: stretch; }
.t-card { display: flex; flex-direction: column; height: 100%; }
.t-text { text-align: justify; text-align-last: center; }
.t-stars { margin-top: auto; }

/* ===== Restaurar estilo original do botão da seção CTA ===== */
.cta-btn {
  padding: 14px 22px !important; /* volta ao tamanho original */
  border-radius: 6px !important; /* volta ao formato original */
  font-size: 16px !important;    /* mantém a tipografia padrão */
  background: var(--cta-btn, #d0a933);
  color: #fff;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  white-space: nowrap;
}

/* ===== Ajuste individual do enquadramento dos avatares ===== */
/* Base: garante cobertura total sem faixas */
.team .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none !important;
}

/* João Marcos (1º card) – referência de altura */
.team .member:nth-child(1) .avatar img{
  /* sobe um pouco o enquadramento para mostrar mais do corpo */
  object-position: 80% 80%;
}

/* Pedro Henrique (2º card) – ajusta para casar com o João */
.team .member:nth-child(2) .avatar img{
  object-position: 0% 50%;
}

/* Pollyana Cristina (3º card) – ajuste fino */
.team .member:nth-child(3) .avatar img{
  object-position: 50% 90%;
}

.team .avatar img {
  transform: translateX(2%) scale(1.10) !important; /* move e dá zoom leve */
  transform-origin: center center; /* mantém o foco central */
}

/* Força as caixas da equipe a ocuparem 100% da coluna (mesma largura dos depoimentos) */
.about .team .member-name,
.about .team .member-desc{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Garante que o card da pessoa não tenha recuos laterais que “estreitem” a coluna */
.about .team .member{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mantém o grid das 3 colunas exatamente como o dos depoimentos */
.about .team{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 34px !important;
}

/* ===== Reset ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #222;
  line-height: 1.6;
  background-color: #fff;
}

/* ===== Seção Contato ===== */
.contato{
  padding: 20px 20px;                 /* sem padding lateral no wrapper */
  background: #fff;
}

.contato-inner{
  max-width: var(--container-max); /* mesma régua das fotos */
  margin: 0 auto;/* mesmas margens horizontais */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 60px;
}

.contato-info {
  flex: 1 1 40%;
  min-width: 280px;
}

.contato-info h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: clamp(28px, 4.2vw, 38px);
  margin: 0 0 16px;
  color: #cdb56f;                  /* mesma cor dos títulos da seção CTA */
}

.contato-info p {
  margin-bottom: 16px;
  color: #333;
}

.contato-links p {
  margin: 8px 0;
}

.contato-links a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: 0.2s;
}

.contato-links a:hover {
  border-bottom: 1px solid #000;
}

/* ===== Formulário ===== */
.contato-form {
  flex: 1 1 50%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.linha {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.contato-form input,
.contato-form select,
.contato-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #ccc;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.contato-form input:focus,
.contato-form select:focus,
.contato-form textarea:focus {
  border-color: #000;
}

/* ===== HR alinhadas (não 100% da largura) ===== */
.section-hr{
  border: 0;
  height: 1px;
  background: #d0a933;
  /* alinhado à régua do site */
  width: calc(100% - 2 * var(--container-pad));
  max-width: var(--container-max);
  margin: 28px auto;
  border-radius: 1px;
}

/* ===== Título do formulário com Montserrat e mesma “cara” ===== */
.contato-info h2{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;       /* combina com os demais títulos */
  letter-spacing: .5px;
  font-size: clamp(28px, 4.2vw, 38px);
  margin: 0 0 16px;
  color: #d0a933;
}

/* ===== Botão ENVIAR com a mesma cor do “Falar com um especialista” ===== */
.contato-form button{
  background: var(--cta-btn, #d0a933) !important;
  color: #fff;
  border: none;
  padding: 14px 22px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  transition: filter .2s ease, transform .02s ease;
}
.contato-form button:hover{ filter: brightness(.95); }
.contato-form button:active{ transform: translateY(1px); }

/* garante que o botão “Falar com um especialista” na coluna use o mesmo estilo */
.contato .cta-btn{
  background: var(--cta-btn, #d0a933);
  color:#fff;
  text-decoration:none;
  padding:14px 22px;
  border-radius:6px;
  display:inline-block;
  text-align: center;
}
.contato .cta-btn:hover{ filter: brightness(.95); }

/* Lista de contatos com os MESMOS ícones */
.contato-list{ display: grid; row-gap: 14px; margin-top: 8px;margin-bottom: 10px; }
.contato-list .item{ display: flex; align-items: center; column-gap: 12px; }

.contato .icon{
  flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 50%;
  background: #cdb56f;             /* mesmo dourado da seção CTA */
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.contato .icon svg{ width: 20px; height: 20px; fill: currentColor; display:block; }

.contato-list a{
  color: #343434;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.contato-list a:hover{ border-bottom-color: rgba(0,0,0,.35); }
.contato-form button{
  background: var(--cta-btn, #d0a933) !important;
  color: #fff;
  border: none;
  padding: 14px 22px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  transition: filter .2s ease, transform .02s ease;
}
.contato-form button:hover{ filter: brightness(.95); }
.contato-form button:active{ transform: translateY(1px); }
@media (max-width: 900px){
  .contato-inner{ flex-direction: column; }
}

/* ===== Ajuste individual do tamanho dos logos ===== */

/* Aumenta proporcionalmente Ambev (1ª imagem) e Multinacional (5ª imagem) */
.brands-logos img:nth-child(1),
.brands-logos img:nth-child(5) {
  max-width: 200px;   /* mesmo tamanho da JJC */
  max-height: 100px;
  transform: scale(1.20); /* dá um leve zoom para equilibrar visualmente */
}

/* =========================================
   👥 TEAM — FIX DEFINITIVO (EMPILHAR NO MOBILE)
   Cole no FINAL do CSS
   ========================================= */

/* 1) Corrige “quebra” em ~1480px (ex.: Pollyana) */
@media (max-width: 1480px){
  /* remove zoom/translate e posições personalizadas que deformam o avatar */
  .team .avatar img,
  .about .team .avatar img{
    transform: none !important;
    object-position: center center !important;
  }
  /* garante que a descrição não “suba” do lado da foto */
  .member{
    position: relative !important;
  }
}

/* 2) Tablet: 2 colunas estáveis */
@media (max-width: 980px){
  .team, .about .team{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 24px !important;
    align-items: start !important;
    justify-items: center !important;
  }
  .member{
    width: 100% !important;
    min-width: 0 !important;   /* evita overflow do conteúdo interno */
  }
}

/* 3) Mobile: 1 coluna (uma embaixo da outra, SEM sobrepor) */
@media (max-width: 640px){
  /* fallback “à prova de bala”: troca GRID por FLEX em 1 coluna */
  .team, .about .team{
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  /* cada card ocupa 100% e centraliza conteúdo */
  .member{
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  /* avatar sempre dentro do card, sem “estourar” */
  .avatar{
    width: min(260px, 80vw) !important;
    height: min(260px, 80vw) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 12px !important;
    flex: 0 0 auto !important;
  }
  .avatar img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;             /* remove zooms anteriores */
    object-position: center center !important;
    display: block !important;
  }

  /* textos e botões alinhados e com largura do card */
  .member-name,
  .member-desc{
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
}

/* 4) Segurança extra (em QUALQUER largura): nada sobrepõe */
.team *, .about .team *{
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

/* ==============================================
   🖼️ HERO — REMOVER FOTO E CENTRALIZAR CONTEÚDO
   ============================================== */

/* Some a foto losango (visual e diamond-photo) em telas menores */
@media (max-width: 1280px) {
  .hero .visual,
  .hero .diamond-photo {
    display: none !important;
  }

  /* Centraliza todo o conteúdo do hero */
  .hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  .hero-content {
    max-width: 90% !important;
    margin: 0 auto !important;
  }

  .hero .title {
    text-align: center !important;
  }

  .desc {
    text-align: justify !important;
    max-width: 700px !important;
    margin: 0 auto 16px !important;
  }

  .hero .btn {
    display: inline-block !important;
    margin: 12px auto 0 auto !important;
    text-align: center !important;
  }
}

/* ==============================================
   📌 CTA ("Precisa de aprovação sanitária?")
   ============================================== */

/* Centraliza texto e botão quando virar 1 coluna */
@media (max-width: 980px) {
  .cta-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 22px !important;
  }

  .cta-media {
    display: none !important; /* oculta a imagem da direita */
  }

  .cta-title,
  .cta-sub {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }

  .cta-btn {
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}

/* ==============================================
   📞 CONTACT CTA ("Pronto para iniciar seu projeto")
   ============================================== */
@media (max-width: 1024px) {
  .contact-cta .photo-wrap {
    display: none !important; /* remove imagem lateral */
  }

  .contact-cta .cta-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  .contact-cta .cta-h2,
  .contact-cta .cta-lead {
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }

  .contact-cta .cta-btn {
    display: inline-block !important;
    margin: 12px auto 0 auto !important;
    text-align: center !important;
  }
}

/* ==============================================
   💡 ALINHAMENTO GLOBAL DE BOTÕES
   ============================================== */

/* Força botões a ficarem sempre centralizados no fluxo */
.cta-btn,
.hero .btn,
.contato-form button {
  display: inline-block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Garante centralização vertical onde houver grids */
section, .cta-inner, .contact-cta .cta-inner, .hero-inner {
  justify-content: center !important;
}
/* ==============================================
   📱 CORREÇÃO FINAL — MOBILE < 500px
   ============================================== */

/* 1️⃣ Garante que nada ultrapasse a tela */
@media (max-width: 500px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  section, header, footer, div {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  img, video {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 2️⃣ Ajuste de texto do HERO */
  .hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px var(--container-pad) !important;
  }

  .hero .title {
    font-size: clamp(28px, 8vw, 46px) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }

  .desc {
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: justify !important;
    margin: 0 auto 20px auto !important;
    max-width: 90% !important;
  }

  /* 3️⃣ Espaçamento adequado entre texto e botões */
  .hero .btn,
  .cta-btn,
  .contact-cta .cta-btn,
  .contato-form button {
    display: inline-block !important;
    margin: 16px auto 26px auto !important; /* respiro acima/abaixo */
    padding: 14px 22px !important;
    border-radius: 6px !important;
  }

  /* 4️⃣ CTA e Contact centralizados com folga */
  .cta-inner,
  .contact-cta .cta-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 30px 6% !important;
    gap: 22px !important;
  }

  .cta-title,
  .cta-sub,
  .contact-cta .cta-h2,
  .contact-cta .cta-lead {
    text-align: center !important;
    margin: 0 auto 10px auto !important;
    max-width: 90% !important;
  }

  /* 5️⃣ Remove qualquer resquício de imagem lateral */
  .visual,
  .diamond-photo,
  .cta-media,
  .contact-cta .photo-wrap {
    display: none !important;
  }

  /* 6️⃣ Team e outros grids empilhados */
  .team,
  .about .team {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
  }
  .member { width: 100% !important; max-width: 360px !important; }
}

/* ==============================================
   ✅ AJUSTES FINAIS — RESPONSIVIDADE GERAL
   ============================================== */

/* ===== TELA INTERMEDIÁRIA (~1480px) ===== */
@media (max-width: 1480px) {
  .team .avatar img,
  .about .team .avatar img {
    transform: none !important;
    object-position: center center !important;
  }
}

/* ===== TABLET ===== */
@media (max-width: 980px) {
  /* HERO */
  .hero .visual,
  .hero .diamond-photo {
    display: none !important;
  }
  .hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 22px !important;
  }
  .hero-content {
    max-width: 90% !important;
    margin: 0 auto !important;
  }
  .hero .btn {
    margin: 12px auto 0 auto !important;
    text-align: center !important;
  }

  /* CTA */
  .cta-media {
    display: none !important;
  }
  .cta-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 22px !important;
  }

  /* CONTACT CTA */
  .contact-cta .photo-wrap {
    display: none !important;
  }
  .contact-cta .cta-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  /* TEAM (mantém visível e organizado) */
  .team,
  .about .team {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    justify-items: center !important;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* HERO */
  .hero .visual,
  .hero .diamond-photo {
    display: none !important;
  }
  .hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px var(--container-pad) !important;
  }
  .hero .title span {
    font-size: clamp(28px, 9vw, 46px) !important;
    line-height: 1.15 !important;
  }
  .desc {
    max-width: 90% !important;
    margin: 0 auto 20px auto !important;
    text-align: justify !important;
  }

  /* CTA */
  .cta-media {
    display: none !important;
  }
  .cta-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 30px 6% !important;
    gap: 22px !important;
  }

  /* CONTACT CTA */
  .contact-cta .photo-wrap {
    display: none !important;
  }
  .contact-cta .cta-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
  }

  /* TEAM — mantém uma coluna */
  .team,
  .about .team {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
  }
  .member {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .avatar {
    width: min(260px, 80vw) !important;
    height: min(260px, 80vw) !important;
  }

  /* BOTÕES CENTRALIZADOS */
  .cta-btn,
  .hero .btn,
  .contact-cta .cta-btn,
  .contato-form button {
    display: inline-block !important;
    margin: 16px auto 26px auto !important;
    text-align: center !important;
  }
}

/* =======================================================
   🔒 ANTI-OVERFLOW GLOBAL — corta qualquer bleed lateral
   ======================================================= */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
section, header, footer { max-width: 100%; overflow-x: clip; }

/* Clipa seções que têm elementos absolutos/decorativos */
.hero, .cta, .about, .contact-cta, .segments, .testimonials,
.brands-showcase, .footer { overflow-x: clip; }

/* Decorações que mais sangram; isola pintura */
.gold-triangle.top-right,
.gold-triangle.pillar-left,
.waves, .frame, .dots { contain: paint; }

/* Outra faixa crítica (>=600px) onde voltava o bleed */
@media (min-width: 600px) and (max-width: 1100px){
  .contact-cta { overflow: clip; }
  .frame, .dots { right: 0; } /* evita estourar lateral */
}

/* =======================================================
   📌 CTA — “Precisa de aprovação sanitária?” centralizado
   ======================================================= */
@media (max-width: 1280px){
  /* neutraliza regra anterior 627px que estourava a régua */
  .cta .cta-inner{ grid-template-columns: 420px 1fr !important; }
}
@media (max-width: 980px){
  .cta .cta-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 24px !important;
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }
  .cta-media{ display: none !important; }
  .cta-title, .cta-sub{
    margin: 0 auto !important;
    max-width: 700px !important;
    text-align: center !important;
  }
  .cta-btn{ margin: 16px auto 0 !important; }
}

/* =======================================================
   👥 TEAM — 2 em cima + 1 centralizado embaixo (tablet)
   ======================================================= */
@media (max-width: 980px){
  .team{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(260px,1fr)) !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 28px !important;
  }
  /* o 3º membro ocupa a linha inteira e vai ao centro */
  .team > .member:nth-child(3){
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
}
/* Mobile: 1 por linha, tudo no centro */
@media (max-width: 640px){
  .team{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 22px !important;
  }
  .team .member{ max-width: 360px !important; margin: 0 auto !important; }
}

/* =======================================================
   💬 TESTIMONIALS — 2 em cima + 1 centralizado embaixo
   ======================================================= */
@media (max-width: 980px){
  .t-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(300px,1fr)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 28px !important;
  }
  .t-grid > .t-card:nth-child(3){
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    margin: 0 auto !important;
    max-width: 640px !important;
  }
}
@media (max-width: 640px){
  .t-grid{ display: flex !important; flex-direction: column !important; align-items: center !important; gap: 22px !important; }
  .t-card{ width: 100% !important; max-width: 560px !important; }
}

/* =======================================================
   🏢 BRANDS — grid centrado e sem “sobrar” à esquerda
   ======================================================= */
@media (max-width: 980px){
  .brands-logos{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(120px,1fr)) !important;
    place-items: center !important;
    gap: 28px !important;
  }
}
@media (max-width: 640px){
  .brands-logos{
    grid-template-columns: repeat(2, minmax(120px,1fr)) !important;
  }
}
.brands-logos img{ margin: 0 auto !important; display: block !important; }

/* =======================================================
   🖼️ FOTOS GRANDES OFF NO MOBILE (mantém só membros)
   ======================================================= */
@media (max-width: 700px){
  .hero .visual, .hero .diamond-photo,
  .cta .cta-media,
  .contact-cta .photo-wrap { display: none !important; }
}

/* =======================================================
   ✨ Refinos: títulos, estrelas e botões centralizados
   ======================================================= */
@media (max-width: 700px){
  .hero-inner{ flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .hero .title span{ font-size: clamp(28px, 9vw, 46px) !important; line-height: 1.15 !important; }
  .rating, .stars, .cta-rating{ justify-content: center !important; text-align: center !important; }
  .btn, .cta-btn{ margin: 14px auto 0 !important; display: inline-block !important; }
}

/* =======================================================
   🧯 Segurança extra contra overflow em QUALQUER largura
   ======================================================= */
* { min-width: 0; }
.team *, .t-grid *, .brands-logos * { max-width: 100%; }

/* =======================================================
   📱 FORMULÁRIO — alinhamento correto no mobile (≤400 px)
   ======================================================= */
@media (max-width: 400px) {
  .contato-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 22px !important;
    padding: 0 6% !important;
  }

  .contato-info {
    width: 100% !important;
    text-align: center !important;
  }

  .contato-info h2,
  .contato-info p {
    text-align: center !important;
    margin: 0 auto 12px auto !important;
    max-width: 90% !important;
  }

  .contato-form {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }

  .contato-form input,
  .contato-form textarea,
  .contato-form select {
    width: 100% !important;
  }

  .contato-form button {
    display: inline-block !important;
    margin: 16px auto 0 auto !important;
    text-align: center !important;
  }
}

/* Base responsiva e reset leve */
* { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
html { 
  /* Tipografia fluida entre 14px e 18px */
  font-size: clamp(14px, 1.2vw, 18px);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; line-height: 1.5; }

/* Contêiner fluido com limites */
.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

/* Grid utilitário simples */
.grid { display: grid; gap: 1rem; }
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Colunas quebram para 1fr em telas pequenas por padrão */
@media (min-width: 480px) {
  .sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sm-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .md-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .container { width: min(100% - 4rem, 1200px); }
}
@media (min-width: 1024px) {
  .lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Títulos e espaçamentos fluidos */
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 .75em; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0 0 .6em; }
p  { margin: 0 0 1em; }

/* Botões e inputs elásticos */
/* não inclua .btn aqui */
button, input, select, textarea {
  font: inherit;
  padding: clamp(.55rem, 1.2vw, .8rem) clamp(.9rem, 2vw, 1.2rem);
  border: 1px solid #ddd;
  border-radius: .5rem;
  background: #fff;
}

/* garante a cor do primeiro botão (hero) */
.hero .btn { background: var(--hero-gold) !important; color:#fff !important; }


/* Tabelas roláveis em mobile */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 600px; }
th, td { padding: .6rem .8rem; border-bottom: 1px solid #eee; }

/* Mídia de fundo */
.cover { object-fit: cover; width: 100%; height: 100%; }

/* Helpers */
.hidden-sm { display: none; }
@media (min-width: 768px) { .hidden-sm { display: initial; } }

/* HERO: alinhar estrelas e texto na mesma linha e baseline */
.hero .rating{
  display: inline-flex;
  align-items: center;    /* centraliza verticalmente */
  gap: 8px;
  flex-wrap: nowrap;      /* evita quebra entre estrelas e texto */
}
.hero .rating .stars{
  line-height: 1; 
  display: inline-flex; 
  align-items: center;
  letter-spacing: 2px;    /* mantém o espaçamento do HERO */
  color: var(--hero-gold);
}
.hero .rating .rating-text{
  line-height: 1; 
  margin-top: 1px;        /* micro-ajuste ótico */
}

/* evita conflito com outras seções que também usam .stars */
.cta .stars, .testimonials .t-stars { letter-spacing: 4px; }

/* =========================================================
   ✅ PATCH GLOBAL DE ALINHAMENTO DE BOTÕES
   ========================================================= */

/* 1️⃣ DESKTOP (≥1025px) — todos alinhados à ESQUERDA */
@media (min-width: 1025px) {
  .cta-btn,
  .btn,
  button,
  .contato .contato-form button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
    text-align: left !important;
  }
}

/* 2️⃣ MOBILE (≤1024px) — todos CENTRALIZADOS */
@media (max-width: 1024px) {
  .cta-btn,
  .btn,
  button,
  .contato .contato-form button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    text-align: center !important;
  }
}

/* 3️⃣ Mantém aparência e tamanho consistentes em todas as seções */
.cta-btn,
.btn,
button,
.contato .contato-form button {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 26px !important;
  min-height: 48px !important;
  border-radius: 6px !important;
  border: none !important;
  background: var(--cta-btn, #d0a933) !important;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* =========================================================
   🎯 PATCH FINAL — alinhamento de textos
   ========================================================= */

/* 🖥️ DESKTOP (≥1025px) — títulos e textos à ESQUERDA */
@media (min-width: 1025px) {
  .about .about-text,
  .contato .contato-info {
    text-align: left !important;
    align-items: flex-start !important;
  }
  .about .about-text h2,
  .about .about-text p,
  .contato .contato-info h2,
  .contato .contato-info p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* 📱 MOBILE / TABLET (≤1024px) — títulos e textos CENTRALIZADOS */
@media (max-width: 1024px) {
  /* Seção "Quem Somos" */
  .about .about-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .about .about-text h2,
  .about .about-text p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Seção "Tem Alguma Pergunta?" (formulário) */
  .contato .contato-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .contato .contato-info h2,
  .contato .contato-info p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============ AJUSTES FINOS ============ */

/* 1) Triângulo do pilar MAIS PARA BAIXO (todas as larguras) */
.gold-triangle.pillar-left{
  bottom: -86px !important;   /* estava -8px/-6px — desce ~20px */
}

/* ajustes sutis por breakpoint, mantendo a intenção */
@media (max-width: 900px){
  .gold-triangle.pillar-left{ bottom: -22px !important; }
}
@media (max-width: 520px){
  .gold-triangle.pillar-left{ bottom: -16px !important; }
}

/* 2) Foto “Forma Arquitetura” UM POUCO PARA A DIREITA
   (losango do HERO) */
.hero .diamond-photo{
  right: calc(var(--photo-right) - 3%) !important;  /* move ~3% para a direita */
}

/* Se preferir um ajuste mais leve/forte, troque -3% por -2% ou -4% */

/* 📱 HERO — no mobile, texto em cima e estrelas abaixo */
@media (max-width: 640px){
  .hero .rating{
    display: flex !important;
    flex-direction: column !important;   /* empilha */
    align-items: center !important;       /* troque p/ flex-start se preferir à esquerda */
    gap: 6px !important;
  }
  .hero .rating .rating-text{
    order: 0 !important;
    text-align: center !important;        /* troque p/ left se quiser */
    line-height: 1.3 !important;
  }
  .hero .rating :is(.stars, .stars-primera-section, .stars-element){
    order: 1 !important;
    flex: 0 0 auto !important;            /* evita encolher/cortar */
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    letter-spacing: 1.6px !important;     /* leve ajuste p/ telas estreitas */
  }
}
/* ✅ Experiência (segments) — mesmo corte em TODAS as resoluções */
.segments .seg-media{
  /* escolha 4/3 (padrão) — mude para 16/9 se for o seu corte de desktop */
  aspect-ratio: 4 / 3 !important;
  height: auto !important;        /* anula alturas forçadas por breakpoint */
  overflow: hidden !important;
}

.segments .seg-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* mesmo corte do desktop */
  object-position: center !important;
  transform: none !important;
}

/* anula a regra do seu CSS que colocava 196px no mobile */
@media (max-width: 640px){
  .segments .seg-media{ height: auto !important; }
}

/* =============================================
   ✅ FOOTER — ALINHADO EM TODAS AS RESOLUÇÕES
   ============================================= */

/* 🖥️ Desktop mantém 3 colunas como já está */
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 36px;
  align-items: start;
}

/* 📱 Mobile — tudo CENTRALIZADO */
@media (max-width: 900px){
  .footer-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  /* Todos os blocos centralizados */
  .footer-inner > *{
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
  }

  /* Logo centralizado e escalado */
  .footer-logo-col{
    display: flex !important;
    justify-content: center !important;
  }
  .footer-logo{
    width: clamp(140px, 40vw, 180px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Títulos e listas centralizados */
  .footer-title{
    text-align: center !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
    margin-bottom: 10px !important;
  }

  .footer-links, 
  .footer-contact{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
  }

  .footer-link{
    text-align: center !important;
    font-size: clamp(14px, 3.5vw, 15px) !important;
  }

  /* Rodapé final centralizado */
  .footer-bottom{
    margin-top: 24px !important;
    text-align: center !important;
    border-top: 1px solid rgba(205, 181, 111, 0.28);
    padding-top: 14px !important;
  }

  .footer-bottom .copy{
    font-size: clamp(12px, 3.2vw, 14px) !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* ===============================================
   ✅ AJUSTE FINAL — Seção "Quem Somos" (Estatísticas)
   =============================================== */

/* 📱 Mobile: centraliza tudo visualmente */
@media (max-width: 700px){
  .about-stats{
    position: relative !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 24px auto 0 auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* As “pílulas” (chips de números) centralizadas */
  .stats-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .stat-chip{
    width: auto !important;
    min-width: 160px !important;
    text-align: center !important;
  }

  /* Legendas centralizadas logo abaixo */
  .stats-labels{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 14px !important;
    text-align: center !important;
  }
}
/* ============================
   📱 MOBILE AJUSTES CIRÚRGICOS
   ============================ */

/* 1) CTA — texto em cima, estrelas embaixo (≤640px) */
@media (max-width: 640px){
  .cta-rating{
    display: flex !important;
    flex-direction: column !important;  /* empilha */
    align-items: center !important;
    gap: 6px !important;
  }
  .cta-rating .rate-text{
    order: 0 !important;                /* texto primeiro */
    text-align: center !important;
  }
  .cta-rating .stars{
    order: 1 !important;                /* estrelas abaixo */
    display: inline-block !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    letter-spacing: 1.6px !important;
  }
}

/* 2) Quem Somos — 220+ e 5 com suas legendas embaixo (≤700px) */
@media (max-width: 700px){
  /* O bloco inteiro vira um grid 2x2: [220+] [5] / [leg1] [leg2] */
  .about-stats{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px 16px !important;
    justify-items: center !important;
    text-align: center !important;
    left: 0 !important; bottom: 0 !important; /* evita deslocamentos */
    width: 100% !important;
    transform: none !important;
    margin: 16px auto 0 !important;
  }

  /* “Achata” os wrappers para podermos posicionar cada célula */
  .stats-row{ display: contents !important; }
  .stats-labels{ display: contents !important; }

  /* Linha 1: números (chips) */
  .stats-row .stat-chip:nth-child(1){
    grid-column: 1 !important; grid-row: 1 !important;
  }
  .stats-row .stat-chip:nth-child(2){
    grid-column: 2 !important; grid-row: 1 !important;
  }

  /* Linha 2: legendas correspondentes */
  .stats-labels > :nth-child(1){
    grid-column: 1 !important; grid-row: 2 !important;
  }
  .stats-labels > :nth-child(2){
    grid-column: 2 !important; grid-row: 2 !important;
  }

  /* Aparência dos chips no mobile (mantém número em destaque) */
  .stat-chip{
    min-width: 120px !important;
    height: auto !important;
    padding: 10px 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .stat-chip strong{
    display: block !important;
    margin: 0 !important;
  }
}

@media (max-width: 1400px){
  /* O bloco inteiro vira um grid 2x2: [220+] [5] / [leg1] [leg2] */
  .about-stats{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 8px 16px !important;
    justify-items: center !important;
    text-align: center !important;
    left: 0 !important; bottom: 0 !important; /* evita deslocamentos */
    width: 100% !important;
    transform: none !important;
    margin: 16px auto 0 !important;
  }

  /* “Achata” os wrappers para podermos posicionar cada célula */
  .stats-row{ display: contents !important; }
  .stats-labels{ display: contents !important; }

  /* Linha 1: números (chips) */
  .stats-row .stat-chip:nth-child(1){
    grid-column: 1 !important; grid-row: 1 !important;
  }
  .stats-row .stat-chip:nth-child(2){
    grid-column: 2 !important; grid-row: 1 !important;
  }

  /* Linha 2: legendas correspondentes */
  .stats-labels > :nth-child(1){
    grid-column: 1 !important; grid-row: 2 !important;
  }
  .stats-labels > :nth-child(2){
    grid-column: 2 !important; grid-row: 2 !important;
  }

  /* Aparência dos chips no mobile (mantém número em destaque) */
  .stat-chip{
    min-width: 120px !important;
    height: auto !important;
    padding: 10px 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .stat-chip strong{
    display: block !important;
    margin: 0 !important;
  }

  .gold-triangle.pillar-left {
    bottom: -26px !important;
    left: 50px;
  }

  .hero{
  --hero-gold: #d0a933;
  --photo-size: 620px;
  --photo-top: -3%;
  position: relative;

  /* 🔽 Fundo com foto + leve escurecimento (opcional) */
  background:           /* overlay suave */
    url("../images/background_inicio.png") center / cover no-repeat, #fff;  /* caminho da sua imagem */

  padding: 8px var(--container-pad) 0;
  overflow: hidden;
  }

  .cta-media img {
    width: 80%;
    height: 520px;
    object-fit: cover;
    border-radius: 14px;
  }
}

@media (min-width: 981px) {

  /* A seção .cta toda vai respeitar a mesma régua horizontal do resto */
  .cta {
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }

  .cta-inner {
    /* igualar às outras seções */
    max-width: var(--container-max) !important;   /* 1200px, mesma régua */
    margin: 0 auto !important;

    /* espaçamento vertical confortável */
    padding: 72px 0 !important;

    /* DUAS colunas lado a lado: imagem + texto */
    display: grid !important;
    grid-template-columns: 420px 1fr !important;  /* volta pro 420px que vc já definia */
    gap: 40px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Garante que a mídia (foto) apareça no desktop */
  .cta-media {
    display: block !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .cta-media img {
    width: 100% !important;
    height: 520px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
  }

  /* Texto continua alinhado à esquerda em desktop */
  .cta-content {
    text-align: left !important;
  }

  .cta-title,
  .cta-sub,
  .cta-rating,
  .cta-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* Botão fica alinhado à esquerda em desktop */
  .cta-btn {
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }
}


/* MOBILE / TABLET (≤980px)
   Você já tinha um comportamento bom:
   - some a imagem lateral
   - texto centralizado
   - botão centralizado
   - 1 coluna
   Nós só reforçamos a largura máxima também aqui.
*/
@media (max-width: 980px) {

  .cta {
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }

  .cta-inner {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    gap: 24px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .cta-media {
    display: none !important;
  }

  .cta-content {
    max-width: 700px !important;
  }

  .cta-title,
  .cta-sub {
    max-width: 700px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .cta-btn {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}


@media (min-width: 1400px) {
  .hero {
    background: url("../images/background_inicio.png") center / cover no-repeat, #fff;
  }

  .hero .gold-triangle.pillar-left {
  transform: scale(1.5);   /* aumenta 50 % */
  opacity: 0.65;            /* mantém semi-transparente */
  z-index: 6;               /* continua por cima do losango */
  }

  .hero .visual::after {
    content: "";
    position: absolute;
    top: 0;
    right: -260px;      /* encosta na borda da tela */
    width: 80px;      /* cobre apenas a pontinha que sai */
    height: 100%;
    background: #fff; /* mesma cor do fundo da hero */
    z-index: 10;      /* acima do losango */
    pointer-events: none;
  }

}