/* =========================================================
   STYLES — VERSÃO PROFISSIONAL / INSTITUCIONAL
   ========================================================= */

/* ================== VARIÁVEIS ================== */
:root{
  --bg:#fbfaf7;
  --card:#ffffff;

  --text:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.10);

  --primary:#b88900;
  --primary2:#d8b15a;
  --whats:#16a34a;

  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --radius: 18px;
}

/* ================== RESET ================== */
*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;

  background:
    radial-gradient(900px 500px at 10% -10%, rgba(184,137,0,.07), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(184,137,0,.05), transparent 60%),
    var(--bg);

  color:var(--text);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit;text-decoration:none}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 18px
}

.muted{color:var(--muted)}

hr{
  border:0;
  border-top:1px solid var(--line);
  margin:14px 0
}

/* ================== TOPBAR ================== */
.topbar{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92)
}

.topbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  flex-wrap:wrap
}

.topbar__item{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:13px
}

.dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(22,163,74,.85);
  display:inline-block
}

.topbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.topbar__link{
  color:var(--muted);
  font-size:13px;
  border-bottom:1px dashed rgba(17,24,39,.25)
}

/* ================== HEADER ================== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0
}

.brand{
  display:flex;
  align-items:center;
  gap:12px
}

.brand__mark{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(184,137,0,.22);
  display:grid;
  place-items:center
}

.brand__name{
  font-weight:900;
  letter-spacing:.1px
}

.brand__meta{
  font-size:12px;
  color:var(--muted);
  margin-top:2px
}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}

.nav a{
  font-size:14px;
  color:rgba(17,24,39,.75)
}

.nav a:hover{
  color:var(--text)
}

.menuBtn{
  display:none;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  font-size:18px
}

.mobileNav{
  display:none;
  border-top:1px solid var(--line);
  padding:10px 0;
  background:rgba(255,255,255,.95)
}

.mobileNav a{
  display:block;
  padding:10px 0;
  color:rgba(17,24,39,.75)
}

/* ================== BOTÕES ================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:.15s ease;
  gap:8px
}

.btn:hover{
  filter:brightness(.98)
}

.btn--primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#1a1a1a;
  border:1px solid rgba(184,137,0,.35);
  box-shadow:0 10px 20px rgba(184,137,0,.12)
}

.btn--outline{
  border-color:rgba(17,24,39,.16);
  background:transparent
}

.btn--whats{
  background:rgba(22,163,74,.10);
  border-color:rgba(22,163,74,.25)
}

/* ================== HERO ================== */
.hero{
  padding:44px 0 22px
}

.hero__grid{
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:18px;
  align-items:stretch
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(184,137,0,.20);
  font-size:12px
}

.hero h1{
  font-family:"Source Serif 4", Georgia, serif;
  font-size:42px;
  line-height:1.1;
  margin:14px 0 12px
}

.hero p{
  font-size:16px;
  max-width:62ch
}

.hero__cta{
  display:flex;
  gap:12px;
  margin:18px 0;
  flex-wrap:wrap
}

.hero__stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.stat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  min-width:150px;
  box-shadow:var(--shadow)
}

.stat__num{
  font-weight:900;
  font-size:18px
}

.stat__lbl{
  font-size:12px;
  margin-top:2px
}

/* ================== HERO CARD ================== */
.heroCard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow)
}

.heroCard h3{
  font-family:"Source Serif 4", Georgia, serif;
  margin:0 0 8px
}

.heroCard__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 14px
}

.heroCard__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px
}

.mini{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(17,24,39,.02);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px
}

.mini__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(184,137,0,.20);
  display:grid;
  place-items:center
}

.disclaimer{
  display:block;
  font-size:12px;
  margin-top:12px
}

/* ================== SEÇÕES ================== */
.section{
  padding:40px 0
}

.section--alt{
  background:rgba(184,137,0,.035);
  border-top:1px solid rgba(184,137,0,.12);
  border-bottom:1px solid rgba(184,137,0,.12)
}

.section__title{
  margin-bottom:16px
}

.section__title h2{
  font-family:"Source Serif 4", Georgia, serif;
  margin:0 0 6px
}

/* ================== GRIDS ================== */
.grid{
  display:grid;
  gap:14px
}

.grid--3{
  grid-template-columns:repeat(3,1fr)
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow)
}

.card:hover{
  border-color:rgba(184,137,0,.30)
}

.card h3{
  margin:10px 0 6px
}

.card__link{
  margin-top:12px;
  color:var(--primary);
  font-weight:800
}

/* ================== SOBRE ================== */
.twoCol{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px
}

.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow)
}
/* Remove efeito de card no Sobre */
#sobre .aboutText{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0; /* opcional: tira espaço interno extra */
}



.tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.tag{
  font-size:12px;
  padding:7px 10px;
  border:1px solid rgba(184,137,0,.22);
  border-radius:999px;
  background:rgba(184,137,0,.06)
}

/* ===== Sobre / Quem Somos ===== */

.aboutText{
  max-width: 620px;     /* largura confortável de leitura */
}

.aboutText h2{
  margin-bottom: 14px;
}

.aboutText p{
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 14px;
  color: rgba(0,0,0,.75);
}

.aboutText p.muted{
  font-size: 15px;
  color: rgba(0,0,0,.65);
}

.aboutText ul{
  margin-top: 18px;
  padding-left: 18px;
}

.aboutText li{
  font-size: 15px;
  margin-bottom: 8px;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}

/* Responsivo */
@media (max-width: 900px){
  .twoCol{
    grid-template-columns: 1fr;
  }

  .aboutText{
    max-width: 100%;
  }
}

/* ================== CAIXAS ================== */
.service,.feature,.quote,.box,.form{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow)
}

.quote p{
  line-height:1.6;
  margin:0 0 10px
}

/* ================== CONTATO ================== */
.contactBoxes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px
}

.form h3{
  font-family:"Source Serif 4", Georgia, serif;
  margin:0 0 12px
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:10px 0;
  font-size:14px
}

input, textarea{
  background:#fff;
  border:1px solid rgba(17,24,39,.18);
  border-radius:12px;
  padding:11px 12px;
  outline:none
}

input:focus, textarea:focus{
  border-color:rgba(184,137,0,.55);
  box-shadow:0 0 0 3px rgba(184,137,0,.12)
}

/* ================== FOOTER ================== */
.footer{
  border-top:1px solid var(--line);
  padding:18px 0;
  background:rgba(255,255,255,.92)
}

.footer__row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap
}

/* ================== RESPONSIVO ================== */
@media (max-width:900px){

  .nav{display:none}

  .menuBtn{display:inline-flex}

  .hero__grid{grid-template-columns:1fr}

  .grid--3{grid-template-columns:1fr}

  .twoCol{grid-template-columns:1fr}

  .contactBoxes{grid-template-columns:1fr}

  .hero h1{font-size:34px}
}

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

/* ===== Foto + legenda (Sobre) ===== */
.aboutPhoto{
  max-width: 360px;
  width: 100%;
  margin-left: auto;
  text-align: center;
}

/* O recorte (quadrado) fica só no frame */
.aboutPhoto__frame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;

  aspect-ratio: 1 / 1; /* você escolheu 1/1 */
}

/* A imagem ocupa o frame */
.aboutPhoto__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 70%; /* sobe o rosto */
  display: block;
}

/* Legenda fora do recorte */
.aboutPhoto__caption{
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 10px;

  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.aboutPhoto__caption span{
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* Botão flutuante WhatsApp */
.whatsFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  width:54px;
  height:54px;
  border-radius:999px;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-size:22px;
  z-index:9999;
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.28);
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}
.whatsFloat:hover{ filter: brightness(.98); }


/* Mobile */
@media (max-width: 900px){
  .aboutPhoto{
    max-width: 420px;
    margin: 18px auto 0;
  }
}
/* ===== Fix definitivo: fonte igual no Sobre ===== */
#sobre .aboutText,
#sobre .aboutText *{
  font-family: inherit !important;
}

/* Padroniza parágrafos, incluindo o .muted */
#sobre .aboutText p,
#sobre .aboutText p.muted{
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: rgba(0,0,0,.75) !important;
  margin: 0 0 14px !important;
}

/* Se quiser o primeiro parágrafo um pouco mais “intro” */
#sobre .aboutText p.muted{
  color: rgba(0,0,0,.68) !important;
}

/* Bullets */
#sobre .aboutText li{
  font-size: 15px !important;
  line-height: 1.5 !important;
}
/* ================= LOGO ================= */
.brand__mark{
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;        /* corta o que passar */
  border-radius: 16px;     /* ou 50% se quiser redondo */
  background: #fff;        /* opcional */
  flex-shrink: 0;
}

.brand__logo{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* preenche e corta o excesso */
  display: block;
}
@media (max-width: 768px){
  .brand__mark{
    width: 70px;
    height: 70px;
  }
}