/* =========================================================
   BASE.CSS
   Variáveis de cor, reset e tipografia — usado por TODAS as páginas.
   Se quiser mudar a cor principal do site inteiro, mexa aqui.
========================================================= */

:root{
  /* Cores da marca */
  --wine: #5B2C29;        /* vinho escuro — cor principal */
  --wine-deep: #3D1E1B;   /* vinho ainda mais escuro — headers/footers */
  --green: #8FB37B;       /* verde-sálvia — acentos */
  --green-dark: #6C9459;  /* verde mais escuro — texto/hover */
  --green-soft: #E4EEDC;  /* verde clarinho — fundos suaves */

  /* Neutros */
  --cream: #FBF7F0;       /* fundo principal do site */
  --cream-2: #F3ECDD;     /* fundo alternativo (seções) */
  --white: #FFFFFF;
  --text: #3E2E24;        /* texto principal */
  --text-soft: #8C7C6C;   /* texto secundário/descrições */
  --line: #E8DFD0;        /* linhas e bordas */
}

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

html{ scroll-behavior: smooth; }

body{
  background: var(--cream);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

/* Container central usado em quase toda seção */
.wrap{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Títulos usam a fonte serifada Fraunces */
h1, h2, h3, .display{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Logotipo cursivo "lavie café" — reaproveitado em vários lugares */
.brand-script{
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--green-dark);
}

/* Logo em imagem (assets/logo-lavie.png) — reaproveitado em vários lugares */
.brand-logo{ height: 30px; width: auto; display: block; }

/* Fundo clarinho atrás da logo quando ela fica sobre uma área escura (vinho) */
.brand-logo-chip{
  display: inline-flex; align-items: center;
  background: var(--cream); padding: 6px 16px; border-radius: 999px;
}

/* Balão flutuante do WhatsApp — presente em todas as páginas */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:999;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .2s, box-shadow .2s;
}
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 10px 22px rgba(0,0,0,.3); }
@media (max-width:600px){
  .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
}