/* ==========================================================
IMPORTS
========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* ==========================================================
VARIÁVEIS
========================================================== */

:root {
--dourado: #c7a248;
--dourado-escuro: #a07f30;
--branco: #ffffff;
--cinza-claro: #f5f5f5;
--preto: #222222;

--fonte: "Segoe UI", sans-serif;

--sombra-card: 0 4px 12px rgba(0,0,0,.06);
--sombra-hover: 0 8px 20px rgba(0,0,0,.12);
}

/* ==========================================================
RESET
========================================================== */

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

html {
scroll-behavior: smooth;
}

body {
font-family: var(--fonte);
background: var(--branco);
color: var(--preto);
line-height: 1.7;
overflow-x: hidden;
}

img {
display: block;
max-width: 100%;
height: auto;
}

a {
text-decoration: none;
}

/* ==========================================================
ESTRUTURA GLOBAL
========================================================== */

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}

section {
padding: 2.5rem 1rem;
}

section:nth-child(even) {
background: var(--cinza-claro);
}

h2 {
text-align: center;
color: var(--dourado);
font-size: 2rem;
margin-bottom: 1.5rem;
}

.btn {
display: inline-block;
padding: .9rem 2rem;
border-radius: 999px;
background: var(--dourado);
color: white;
font-weight: 600;
transition: .3s ease;
}

.btn:hover {
background: var(--dourado-escuro);
transform: translateY(-3px);
}

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

.hero {
background: white;
text-align: center;
padding: 4rem 1rem 3rem;
border-bottom: 1px solid var(--cinza-claro);
}

.hero__image {
width: 180px;
height: 180px;

object-fit: cover;
border-radius: 50%;
border: 5px solid var(--dourado);

margin: 0 auto 1.5rem;
}

.hero__name {
font-size: 2.2rem;
color: var(--dourado);
font-weight: bold;
}

.hero__title {
font-size: 1.3rem;
margin-top: .3rem;
}

.hero__tagline {
margin: 1rem 0 2rem;
color: #666;
font-style: italic;
}



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

.sobre p {
text-align: center;
max-width: 900px;
margin: 0 auto;
}

/* ======================================================
   NÚMEROS DE CONFIANÇA
====================================================== */

.trust-section {
  padding: 2rem 1rem;
  background: #ffffff;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.trust-card {
  background: #ffffff;
  border: 1px solid rgba(199, 162, 72, 0.25);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;

  box-shadow: 0 4px 12px rgba(0,0,0,.05);

  transition: .3s;
}

.trust-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

.trust-number {
  display: block;

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

  color: var(--dourado);

  margin-bottom: .5rem;
}

.trust-label {
  display: block;

  color: #555;

  font-size: .95rem;

  line-height: 1.4;
}

/* ==========================================================
MÉTODO LEVEZA
========================================================== */

.metodo-leveza {
background: #fff8f1;
padding: 0.5rem 1rem 0;
overflow: hidden;
}

.metodo-leveza__content {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
padding: 1.5rem;
}

.metodo-leveza__text {
flex: 1;
min-width: 280px;
padding-bottom: 0;
}

.metodo-leveza__logo {
width: 100%;
max-width: 280px;
margin-bottom: 1.5rem;
}

.metodo-leveza__image {
flex: 1;
text-align: center;
align-self: flex-end;
margin-bottom: -30px;
}

.metodo-leveza__image img {
display: block;
margin: 0 auto;
max-height: 500px;
width: auto;
}

/* ==========================================================
SERVIÇOS
========================================================== */

.servicos h4 {
text-align: center;

font-family: "Tangerine", cursive;
font-size: 3rem;
font-weight: 500;

color: #9e8d7f;
margin-bottom: -10px;
}

.servicos h5 {
text-align: center;

font-family: "Tangerine", cursive;
font-size: 4rem;
font-weight: 700;

color: #2c1e17;
line-height: 4.5rem;
}

.cards {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 2rem;
margin-top: 2rem;
}

.card {
background: white;
border: 1px solid rgba(199,162,72,.4);

border-radius: 16px;
padding: 2rem;

box-shadow: var(--sombra-card);

transition: .3s ease;
}

.card:hover {
transform: translateY(-6px);
}

.card h3 {
margin-bottom: 1rem;
color: var(--dourado);
}

/* ==========================================================
DEPOIMENTOS
========================================================== */

.depoimentos {
text-align: center;
}

.depoimentos-carousel {
display: flex;
gap: 1.5rem;

overflow-x: auto;
scroll-snap-type: x mandatory;

padding-bottom: 1rem;

scrollbar-width: none;
}

.depoimentos-carousel::-webkit-scrollbar {
display: none;
}

.depoimento-card {
flex: 0 0 calc(33.333% - 1rem);

background: white;
padding: 2rem;

border-radius: 16px;
box-shadow: var(--sombra-card);

scroll-snap-align: start;

transition: .3s ease;
}

.depoimento-card:hover {
transform: translateY(-6px);
}

.depoimento-card p {
font-style: italic;
color: #555;
margin-bottom: 1rem;
}

.depoimento-card span {
color: var(--dourado);
font-size: 1.2rem;
}

/* ==========================================================
FAQ
========================================================== */

.faq-carousel {
display: flex;
gap: 1.5rem;

overflow-x: auto;
scroll-snap-type: x mandatory;

scrollbar-width: none;

}

.faq-carousel::-webkit-scrollbar {
display: none;
}

.faq-item {
text-align: center;
flex: 0 0 calc(33.333% - 1rem);

background: white;
border-radius: 16px;

box-shadow: var(--sombra-card);

overflow: hidden;
scroll-snap-align: start;
padding: 1.5rem;
}

.faq-item h3 {
  margin-bottom: 1.5rem;
}



.faq-item.active {
display: block;
}

.faq-item.active {
transform: rotate(180deg);
}

/* ==========================================================
CAROUSEL
========================================================== */

.carousel-wrapper {
  position: relative;
}

.carousel-btn {

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 48px;
  height: 48px;

  border: none;
  border-radius: 50%;

  background: #c7a248;
  color: white;

  cursor: pointer;

  font-size: 1.3rem;

  z-index: 10;

  transition: .3s;
}

.carousel-btn:hover {
  background: #a07f30;
}

.prev-btn,
.faq-prev {
  left: -24px;
}

.next-btn,
.faq-next {
  right: -24px;
}

/* ==========================================================
AGENDAMENTOS
========================================================== */

.agendamentos {
text-align: center;
}

/* ==========================================================
BBOX
========================================================== */

.integracao-box {
text-align: center;
}

.integracao-box p {
  padding: 1.5rem;
}

/* ==========================================================
INSTAGRAM
========================================================== */

.instagram-section {
text-align: center;
}

.instagram-link {
display: inline-flex;
align-items: center;
gap: .5rem;

padding: .9rem 1.6rem;

border-radius: 999px;

background: var(--dourado);
color: white;

font-weight: 600;

box-shadow: var(--sombra-card);

transition: .3s ease;
}

.instagram-link:hover {
transform: translateY(-3px);
box-shadow: var(--sombra-hover);
}

/* ==========================================================
FOOTER
========================================================== */

.footer {
text-align: center;
padding: 1rem;
background: var(--cinza-claro);
color: var(--dourado-escuro);
}

/* ==========================================================
WHATSAPP FLUTUANTE
========================================================== */

.whatsapp-float {
position: fixed;

right: 25px;
bottom: 25px;

width: 65px;
height: 65px;

border-radius: 50%;

background: #25d366;
color: white;

display: flex;
justify-content: center;
align-items: center;

font-size: 2rem;

z-index: 9999;

box-shadow: 0 6px 20px rgba(37,211,102,.4);

transition: .3s ease;
}

.whatsapp-float:hover {
transform: scale(1.1);
}

.whatsapp-float::after {
content: "";

position: absolute;
inset: -8px;

border-radius: 50%;
border: 2px solid #25d366;

animation: pulse 2.3s infinite;
}

/* ==========================================================
ANIMAÇÕES
========================================================== */

.hidden {
opacity: 0;
transform: translateY(25px);
transition: .6s ease;
}

.hidden.show {
opacity: 1;
transform: translateY(0);
}

@keyframes pulse {
0% {
transform: scale(.8);
opacity: .6;
}

100% {
transform: scale(1.7);
opacity: 0;
}
}

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

@media (max-width: 1024px) {

.trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

.depoimento-card {
flex: 0 0 calc(50% - .75rem);
}

.faq-item {
flex: 0 0 calc(50% - .75rem);
}
}

@media (max-width:980px) {



.metodo-leveza__content {
flex-direction:column;
align-items:center;
justify-content:center;
gap:1rem;
}

.metodo-leveza__text {
text-align:center;
width:100%;
}

.metodo-leveza__logo {
margin:0 auto 1rem;
}

.metodo-leveza__image{
width:100%;
display:flex;
justify-content:center;
}

.metodo-leveza__image img {
max-height:420px;
}

}

@media (max-width: 768px) {

section {
padding: 1rem 1rem;
}

.hero__name {
font-size: 1.9rem;
}

.trust-grid {
  grid-template-columns: 1fr;
}

.trust-number {
  font-size: 1.8rem;
}

.depoimento-card {
flex: 0 0 100%;
}

.faq-item {
flex: 0 0 100%;
}

.servicos h5 {
font-size: 3rem;
line-height: 3.5rem;
}
}