:root {
   --color-salvia: #597755;
   --color-areia: #FFF7E7;
   --color-lavanda: #D1CEF3;
   --color-alecrim: #ACB79E;
   --color-nogueira: #57524B;
   --color-pinheiro: #303424;

   --brand-primary: var(--color-salvia);
   --brand-text: var(--color-areia);
   --brand-support: var(--color-areia);

   --bg-primary: var(--color-areia);
   --title-primary: var(--color-salvia);
   --text-primary: var(--color-nogueira);
   --support-primary: var(--color-nogueira);

   --bg-secondary: var(--color-alecrim);
   --title-secondary: var(--color-pinheiro);
   --text-secondary: var(--color-pinheirro);
   --support-secondary: var(--color-areia);

   --text-link: var(--color-lavanda);
}

* {
   box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
   margin: 0;
   font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#site-header,
#site-footer {
   width: 100%;
   padding: 1rem 1.5rem;
   color: var(--brand-text);
   background: var(--brand-primary);
}

#site-header {
   position: sticky;
   top: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
   font-size: 20px;
   
   border-radius: 0 0 5px 5px;
}

#site-footer {
   text-align: center;
   border-radius: 5px 5px 0 0;
}

#logo {
   height: 75px;
}

#landing {
   width: 80vw;
   height: auto;
}

#site-nav {
   display: flex;
   gap: 1.25rem;
   flex-wrap: wrap;

   a {
      color: var(--brand-support);
      font-weight: 600;
   }
}

#home {
   background-color: var(--bg-primary);

   .title {
      color: var(--title-primary);
   }

   .eyebrow {
      color: var(--support-text);
   }

   .content {
      color: var(--text-primary);
   }
}

#btnSchedule {
   background: var(--title-primary);
   color: var(--bg-primary);
}

#btnContact {
   background: transparent;
   color: var(--support-primary);
   border: 2px solid var(--support-primary);
}

#about {
   background-color: var(--bg-secondary);

   .title {
      color: var(--title-secondary);
   }

   .eyebrow {
      color: var(--text-secondary);
   }

   .about-text {
      font-size: 1.25rem;
      text-align: center;
      color: var(--text-secondary);
   }

   .staff-card {
      max-width: 450px;
      background: var(--title-secondary);
      color: var(--support-secondary)
   }
}

#contact{
   background-color: var(--bg-primary);

   .eyebrow {
      color: var(--text-secondary);
   }

   .content {
      color: var(--text-secondary);
   }

   .card {
      background: var(--bg-secondary);
      color: var(--text-secondary);
   }
}

#btnWhatsApp {
   background: var(--title-secondary);
   color: var(--bg-primary);
   align-self: center;
}

/* Generic styles */
section {
   width: 100%;
   min-height: 99vh;
   padding: 4rem 1.5rem;
   display: flex;
   justify-content: center;
}

.section-content {
   max-width: 900px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.eyebrow {
   margin: 0 0 1rem;
   text-transform: uppercase;
   letter-spacing: 0.16em;
   font-size: 0.85rem;
}

.title {
   margin: 0 0 1rem;
   font-size: clamp(2.4rem, 4vw, 3.6rem);
   line-height: 1.05;
}

.subtitle {
   margin: 0;
   font-size: 2rem;
   margin-bottom: 1rem;
}

.highlight {
   margin: 0;
   font-size: 1.15rem;
   margin-bottom: 0.6rem;
}

.staff-card,
.card {
   border-radius: 1.5rem;
   padding: 2rem;
   border-radius: 1.5rem;
   padding: 2rem;
   margin: 0.8rem 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

   p {
      margin: 0;
      line-height: 1.7;
   }
}

.cards {
   display: grid;
   padding: 1.5rem;   
   grid-template-columns: 1.04fr 1fr;
   gap: 2rem;
   align-items: stretch;
}

img {
   max-width: 100%;
}

a {
   color: var(--text-link);
   text-decoration: none;
}

iframe {
   width: 100%;
   min-height: 360px;
   border: 0;
   border-radius: 1.25rem;
}

.button {
   border: none;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.9rem 1.6rem;
   border-radius: 999px;
   font-weight: 600;
   width: 250px;
   transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.button:hover,
button:hover {
   transform: translateY(-1px);
}

.button-group {
   display: flex;
   gap: 1rem;
   margin-top: 2rem;
}


@media (max-width: 800px) {
   #site-header {
      flex-direction: column;
   }

   #site-nav {
      justify-content: center;
   }

   .cards {
      grid-template-columns: 1fr;
      padding: 1.5rem;
   }

   .button-group {
      flex-direction: column;
   }
}