:root{
  --bg:#FBFFEF;          /* pedido */
  --ink:#1b2a28;
  --muted:#6b7c79;
  --brand:#1D3530;
  --brand-2:#909D6C;
  --card:#F5F6E5;        /* pedido para cards das áreas */
  --card-2:#f0f3ed;
  --white:#ffffff;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --title-on-dark:#FBFFEF;  /* pedido */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
	line-height:1.4;
  color:var(--ink);
  background:var(--bg);  /* pedido */
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* 400 = regular */
}

a {
  color: inherit;           /* herda a cor do pai */
  text-decoration: none;    /* remove o sublinhado */
}

img {
  border: none;
  outline: none;
}

a img {
  border: none;
  outline: none;
}

a:focus img {
  outline: none;
}

/* Utilities */
.container{width:min(1120px, 92%); margin-inline:auto}
.narrow{width:min(840px, 92%)}
.small{font-size:.95rem}
.muted{color:var(--muted)}
.sr-only{position:absolute;left:-9999px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem 1.2rem; border-radius:14px;
  text-decoration:none; font-weight:600; transition:.2s ease; border:1px solid transparent;
}
.btn-primary{background:var(--brand); color:var(--white)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-outline{background:transparent; border-color:var(--brand); color:var(--brand)}
.btn-outline:hover{background:var(--brand); color:var(--white)}
.btn-whatsapp{background:var(--brand-2); color:var(--white)}
.btn-whatsapp:hover{filter:brightness(1.08)}
.btn.wide{width:100%;}

/* Header transparente sobre hero */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:30;     background: #fbffef; color:var(--white);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand img{height:45px; display:block; filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.nav-toggle{background:none; border:0; cursor:pointer; padding:.2rem .1rem}
.nav-toggle .bar{display:block; width:26px; height:2px; background:#909D6C; margin:.3rem 0}

/* Menu suspenso (desktop e mobile) */
.nav-panel{
  position:fixed; top:56px; right:4%; width:min(320px, 92%);
  background:rgba(18,58,53,.96); color:#1D3530;
  border-radius:14px; box-shadow:var(--shadow);
  padding: .6rem; display:none; overflow:hidden;
}
.nav-panel a{display:block; padding:.8rem 1rem; color:#e9f2ef; text-decoration:none; border-radius:10px}
.nav-panel a:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{position:relative; isolation:isolate; overflow:hidden; padding-top:64px}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
 z-index:-1;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:2rem;
  padding:3.6rem 0 2.6rem;
}
.hero-copy h1{
  font-family:"DM Serif Text", serif; font-size:clamp(1.8rem, 3.2vw, 2.6rem); line-height:1.2; margin:0 0 .8rem
}
.hero-copy .lead{font-size:1.05rem; color:#2e3c39; margin:0 0 1.4rem}
.hero-photo img{width:min(420px,100%); height:auto; display:block; filter:drop-shadow(var(--shadow))}

/* Sections */
.section{padding:3.6rem 0}
.section.dark{background:var(--brand); color:#e9f2ef}
.section.dark h2{color:var(--title-on-dark)}   /* pedido */

/* Headings */
h2{font-family:"DM Serif Text", serif; font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 1.2rem; text-align: center;}
h3{font-family:"DM Serif Text", serif; font-size:1.2rem; margin:.2rem 0 .6rem}

/* Cards (áreas) */
.cards{
  display:grid; gap:1rem;
  grid-template-columns: repeat(4, 1fr);
}
.card{
  background:var(--card); color:#1e2c29;      /* pedido */
  border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow);
}
.card .list{margin:.4rem 0 0 1.1rem; padding:0}
.card .list li{margin:.25rem 0}

/* FAQ (com animação via JS) */
.faq{display:grid; gap:.8rem}
details{
  /* background:rgba(255,255,255,.06); border-radius:12px; padding:.3rem .6rem; */
}
/* .dark details{background:#0f332e; color:#e9f2ef} */
summary{
  cursor:pointer; outline:none; list-style:none; padding: .2rem .6rem; color: #909D6C;font-family:"DM Serif Text", serif; font-size:clamp(1.2rem,1.2vw,1.6rem); line-height:1.4; margin:0
}
summary::-webkit-details-marker{display:none}
.dd{padding:0 .6rem 0}

/* Depoimentos */
.testimonials{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
.t-card{
  background:var(--card); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow)
}
.t-card blockquote{margin:0 0 .6rem; color:#2a3a37}
.t-card figcaption{font-weight: 600; color: var(--brand); font-size: 15px;}

.btn-tesimonials{
	margin: 0px auto;
    display: table;
    margin-top: 25px;
}

.division{
	text-align: center;
    max-width: 240px;
    margin: 0px auto;
    DISPLAY: block;
    margin-bottom: 25px;
}

.section-duvidas{
    padding-bottom: 5px;	
}

/* CTA final + palavras Abuget */
/* CTA – mantém o fundo e evita a foto subir para a seção anterior */
/* ==== CTA RESPONSIVO ROBUSTO ==== */
.cta{
  position: relative;
  width: 100%;

  /* Proporção base da sua arte */
  aspect-ratio: 1895 / 768;

  /* Garantias de altura para evitar cortar/esticar */
  min-height: 520px;                /* nunca menor que isso */
  max-height: 820px;                /* limita em telas muito largas */

  overflow: hidden;
  background: var(--bg);
}

.cta-bg{
  position:absolute; inset:0;
  background: url("../images/bg-hero.jpg") center / cover no-repeat;
  z-index:0;
}

/* Conteúdo em grid: 1) foto encostando no box  2) box */
.cta-content{
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: center;

  /* respiro inferior adaptativo */
  padding: 0 4% clamp(16px, 3vw, 28px);
}

/* Overlap controlado por variável responsiva
   NEGATIVO = encosta no box; 0 = sem overlap (mobile) */
.cta{
  --overlap: clamp(-70px, -10vw, -140px);
}

/* Tamanho da foto adaptativo */
.cta-photo{
  grid-row: 1;
  align-self: end;
  justify-self: center;

  height: clamp(220px, 30vw, 420px);
  width: auto;
  margin-bottom: var(--overlap);   /* sobreposição suave */
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
  
   /* max-width: 650px; */
}


/* Box */
.cta-box{
  grid-row: 2;
  position: relative;
  z-index: 3;
  max-width: 700px;
  width: min(92%, 700px);
  padding: clamp(16px, 3vw, 32px);
  background: var(--brand);
  border-radius: 24px;
  text-align: center;
  color: #FBFFEF;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.cta-box h2{
	color: var(--brand-2);
	margin-bottom: 0;
    line-height: 1;
}

.btn-box{
	background-color: var(--brand-2);
	color: var(--brand);
}

/* ===== BREAKPOINTS ===== */

/* Tablet: overlap menos agressivo e limite de altura maior */
@media (max-width: 1024px){
  .cta{ --overlap: clamp(-40px, -6vw, -80px); max-height: 760px; padding-bottom: 20px; }
  .cta-photo{ height: clamp(200px, 34vw, 360px); }
}

/* Mobile: remove overlap e garante que a foto apareça inteira acima do box */
@media (max-width: 720px){
  .cta{
    /* Em telas bem estreitas, prefiro trocar aspect-ratio por altura mínima */
    aspect-ratio: auto;
    min-height: 560px;
	 padding-bottom: 20px;
  }
  .cta-content{
    grid-template-rows: auto auto;       /* empilha sem pressão */
    align-items: center;
    padding: 18px 5% 22px;
  }
  .cta{ --overlap: 0px; }                 /* sem sobreposição */
  .cta-photo{
    margin-bottom: 12px;                  /* pequeno respiro */
    height: clamp(220px, 46vw, 300px);    /* visível por completo */
  }
  .cta-box{
    width: 94%;
    border-radius: 18px;
  }
}


/* responsivo – reduz a sobreposição em telas pequenas */
@media (max-width: 720px){
  .cta-photo{ margin-bottom: -80px; height: clamp(200px, 42vw, 320px); }
  .cta-box{ padding: 1.5rem; }
  .hero-grid{
	padding-top: 10px;
  }
}


/* Footer */
.footer{background:#0e2c27; color:#dbe7e4; padding:2rem 0; font-size: 15px;}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:1rem}
/* Estilização do nav do footer */
.footer .social-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 0.4rem 6.4px;
  margin-top:1rem;
}

.footer .social-icons a{
  display:inline-flex;            /* caixa do link = tamanho do ícone */
  align-items:center;
  justify-content:center;
  width:32px; height:32px;        /* hit area consistente */
  color:#E6EDE6;
  text-decoration:none;           /* remove underline */
  line-height:0;                  /* evita “pulo” vertical */
  transition:transform .2s ease, color .2s ease;
}

.footer .social-icons a:hover{
  color:#909D6C;
  transform:scale(1.12);
}

.footer .social-icons i{
  font-size:24px;                 /* todos com o mesmo tamanho visual */
  line-height:1;
}

.center{
	margin: 30px auto;
    display: table;
    margin-bottom: 0px;
}

/* Hover bonito */
.footer .social a:hover {
  color: #909D6C;            /* muda cor */
  transform: scale(1.15);    /* leve zoom */
}


/* Responsivo */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-photo{order:-1}
  .cards{grid-template-columns: repeat(2,1fr)}
  .testimonials{grid-template-columns:1fr 1fr}
  .hero-grid{
	padding-top: 10px;
  }
}
@media (max-width: 720px){
  .cards{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .footer-grid{flex-direction:column; text-align:center}
}

@media (max-width: 1024px){ .cta{ --overlap: -48px; min-height: initial; } .cta-content{display: initial; padding: 0;} .cta-box{width: 90%; margin: 0 5%; } .cta-photo{max-width: 100%;} }
@media (max-width: 720px){  .cta{ --overlap: 0px; min-height: initial; } .cta-content{display: initial; padding: 0;} .cta-box{width: 90%; margin: 0 5%; } }