:root {
  --salvia: #8c9e88;
  --salvia-dark: #6e7d6b;
  --creme: #f5f5f0;
  --texto: #333a31;
  --branco: #ffffff;
  --whatsapp: #25D366;
}

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

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--texto);
  background-color: var(--branco);
  line-height: 1.6;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; color: var(--salvia-dark); }

/* HERO SECTION */
/*.hero {
  display: flex; flex-direction: column;
  background-color: var(--creme);
  padding: 60px 20px;
  align-items: center;
  gap: 40px;
}
@media(min-width: 900px) {
  .hero { flex-direction: row; justify-content: center; padding: 100px 5%; height: 90vh; }
  .hero-content, .hero-image { flex: 1; max-width: 500px; }
} */

.hero {  
    display: flex;   
    flex-direction: column;   
    align-items: center;   
    text-align: center;   
    padding: 80px 20px;    /* MÁGICA DO FUNDO AQUI */  /* O linear-gradient cria uma película na cor "creme" com 85% de opacidade por cima da foto */  
    background-image: linear-gradient(      rgba(245, 245, 240, 0.85),       rgba(245, 245, 240, 0.85)    ),     url('fotos/hero-v2.png');      
    background-size: cover; /* Faz a imagem cobrir todo o espaço */  
    background-position: center; /* Centraliza a imagem */  background-repeat: no-repeat; /* Evita que a imagem se repita como um mosaico */
}
/* Mantém o comportamento para telas maiores (computador) */@media(min-width: 768px) {  .hero {     flex-direction: row;     justify-content: space-around;     text-align: left;     padding: 100px 5%; /* Dá um respiro maior nas laterais */  }}

.hero-content h1 { font-size: 2.8rem; margin-bottom: 20px; line-height: 1.2; }
.hero-content p { font-size: 1.1rem; margin-bottom: 30px; color: #555; }

.btn-primary {
  display: inline-block; background-color: var(--salvia); color: var(--branco);
  padding: 16px 32px; border-radius: 5px; text-decoration: none;
  font-weight: 600; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem;
}
.btn-primary:hover { background-color: var(--salvia-dark); }

.hero-image img {
  width: 100%; border-radius: 20px;
  box-shadow: 10px 10px 0px color-mix(in srgb, var(--salvia) 50%, transparent);
  object-fit: cover;
}

/* SERVIÇOS */
.servicos { padding: 80px 20px; text-align: center; background-color: var(--branco); }
.servicos h2 { font-size: 2.2rem; margin-bottom: 50px; }

.cards-grid {
  display: flex; flex-direction: column; gap: 30px;
  max-width: 1000px; margin: 0 auto;
}
@media(min-width: 768px) { .cards-grid { flex-direction: row; } }

.card {
  background: var(--creme); padding: 40px 30px;
  border-radius: 10px; border-top: 5px solid var(--salvia);
  flex: 1; text-align: left;
}
.card h3 { font-size: 1.4rem; margin-bottom: 15px; }

/* SOBRE MIM */
.sobre-mim {
  display: flex; flex-direction: column; gap: 40px;
  padding: 80px 20px; background-color: var(--salvia); color: var(--branco);
  align-items: center;
}
@media(min-width: 900px) {
  .sobre-mim { flex-direction: row; justify-content: center; padding: 100px 5%; }
  .sobre-texto, .sobre-image { flex: 1; max-width: 500px; }
}

.img-sobre {  
    width: 100%;  
    aspect-ratio: 1/1; /* Mantém ela quadrada */  
    object-fit: cover;  
    border-radius: 20px;  
    box-shadow: -15px 15px 0px var(--salvia-dark); /* Um efeitinho de sombra combinando com a cor de fundo */
}


.sobre-texto h2 { color: var(--branco); font-size: 2.2rem; margin-bottom: 20px; }
.sobre-texto p { margin-bottom: 15px; font-size: 1.05rem; }

.placeholder-foto {
  width: 100%; aspect-ratio: 1/1; background: var(--salvia-dark);
  border-radius: 20px; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 5rem; color: var(--salvia);
}

/* CTA FINAL */
.cta-final { padding: 100px 20px; text-align: center; background-color: var(--creme); }
.cta-final h2 { font-size: 2.2rem; margin-bottom: 20px; }
.cta-final p { max-width: 600px; margin: 0 auto 40px; font-size: 1.1rem; }

.btn-whatsapp {
  display: inline-block; background-color: var(--whatsapp); color: var(--branco);
  padding: 18px 40px; border-radius: 50px; text-decoration: none;
  font-weight: 600; font-size: 1.1rem; transition: 0.3s;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}
.btn-whatsapp:hover { background-color: #20bd5a; transform: translateY(-5px); }

footer { background: var(--salvia-dark); color: var(--creme); text-align: center; padding: 30px; font-size: 0.9rem; }