/* =====================================
   Padrão de Cores da Indentidade Visual
   =====================================
:root {
  --cor-celestial-blue: #0B93CD;  // Usar em botões, títulos, links principais
  --cor-baby-blue:      #66C2EA;  // Pode usar em hover, background de seções claras
  --cor-alice-blue:     #E3F3F9;  // Fundo suave para cards ou seções secundárias
  --cor-rich-black:     #122027;  // Texto principal escuro, fundo de rodapé
  --cor-gunmetal:       #24363F;  // Borda de formulários, textos neutros
  --cor-charcoal:       #364A53;  // Texto secundário, legendas
  --cor-white:          #FFFFFF;  // Fundo geral e textos sobre cores escuras
  --cor-sinopia:        #C64825;  // Acento quente (botões de ação, destaques urgentes)
  --cor-brown-sugar:    #C6745E;  // Acento secundário, sublinhados, micro-detalhes
}
*/

/* ======================
   1) VARIÁVEIS DE COR
   (use exatamente os hex informados no manual)
   ====================== */
:root {
  /* Azuis da identidade */
  --cor-celestial-blue: #0B93CD;  /* Celestial Blue */
  --cor-baby-blue:      #66C2EA;  /* Baby Blue */
  --cor-alice-blue:     #E3F3F9;  /* Alice Blue (rgb(227,243,249)) */

  /* Neutros e escuros */
  --cor-rich-black:     #122027;    /* Rich Black */
  --cor-gunmetal:       #24363F;    /* Gunmetal */
  --cor-charcoal:       #364A53;    /* Charcoal */
  --cor-white:          #FFFFFF;    /* White */

  /* Cores de destaque secundário */
  --cor-sinopia:        #C64825;   /* Sinopia */
  --cor-brown-sugar:    #C6745E;   /* Brown Sugar */
}

/* ======================
   2) @font-face: registrar Linear Grotesk (Medium e SemiBold)
   ====================== */
@font-face {
  font-family: "Linear Grotesk";
  src: url("../fonts/LinearGrotesk-Medium.woff2") format("woff2"),
       url("../fonts/LinearGrotesk-Medium.woff")  format("woff");
  font-weight: 500;    /* peso MEDIUM */
  font-style: normal;
}
@font-face {
  font-family: "Linear Grotesk";
  src: url("../fonts/LinearGrotesk-SemiBold.woff2") format("woff2"),
       url("../fonts/LinearGrotesk-SemiBold.woff")  format("woff");
  font-weight: 600;    /* peso SEMIBOLD */
  font-style: normal;
}

/* ======================
   3) @font-face: registrar Inter (Regular e Medium)
   ====================== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
       url("../fonts/Inter-Regular.woff")  format("woff");
  font-weight: 400;    /* peso REGULAR */
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-500.woff2") format("woff2"),
       url("../fonts/Inter-500.woff")  format("woff");
  font-weight: 500;    /* peso MEDIUM */
  font-style: normal;
}

/* ======================
   4) RESET BÁSICO
   ====================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ======================
   5) Estilos Globais
   ====================== */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;      /* texto padrão em Inter */
  font-weight: 400;
  background-color: var(--cor-white);
  color: var(--cor-rich-black);          /* texto principal com Rich Black */
  line-height: 1.6;
}

/* Links padrão */
a {
  text-decoration: none;
  color: var(--cor-celestial-blue);
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.8;
}

/* ======================
   6) HEADER FIXO
   ====================== */
.header {
  width: 100%;
  background-color: var(--cor-white);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  border-bottom: 1px solid var(--cor-alice-blue);
}
.header .container {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
}
.header__logo img {
  max-height: 50px;
}
.header__nav {
  display: flex;
  gap: 1.5rem;
}
.header__nav a {
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 500;    /* Medium */
  font-size: 0.95rem;
  color: var(--cor-rich-black);
}
.header__nav a:hover {
  color: var(--cor-celestial-blue);
}

/* ======================
   7) HERO / BANNER
   ====================== */
.hero {
  width: 100%;
  min-height: 65vh;
  background-color: var(--cor-celestial-blue);
  color: var(--cor-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1rem 7rem;
}
.hero h1 {
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 600;     /* SemiBold */
  font-size: 2.8rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.hero p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}
.hero .btn {
  display: inline-block;
  margin-top: 2rem;
  background-color: var(--cor-sinopia);
  color: var(--cor-white);
  padding: 0.9rem 1.8rem;
  border-radius: 4px;
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.hero .btn:hover {
  opacity: 0.9;
}

/* ======================
   8) SEÇÃO SOBRE
   ====================== */
.sobre {
  padding: 6rem 1rem;
  background-color: var(--cor-alice-blue);
}
.sobre .container {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
/* Envolvendo foto + texto lado a lado */
.sobre__content {
  display: flex;
  align-items: flex-start;    /* alinha topo da foto com topo do texto */
  gap: 2rem;                  /* espaço entre coluna de foto e texto */
  padding: 4rem 1rem;         /* ajuste de espaçamento superior/inferior */
}
/* Defina largura fixa ou percentual para foto */
.sobre__image {
  flex: 0 0 300px;            /* foto com até 300px de largura */
}
.sobre__image img {
  width: 100%;
  border-radius: 8px;
}

/* Texto ocupa o restante do espaço */
.sobre__texto {
  flex: 1;                    /* cresce para preencher o container */
  color: var(--cor-charcoal);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}

/* Responsividade: empilha no mobile */
@media (max-width: 768px) {
  .sobre__content {
    flex-direction: column;
    text-align: center;
  }
  .sobre__image {
    margin-bottom: 1.5rem;
  }
}
.sobre__img {
  flex: 1 1 300px;
  text-align: center;
}
.sobre__img img {
  max-width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.sobre__texto {
  flex: 2 1 400px;
}
.sobre__texto h2 {
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 600;   /* SemiBold */
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--cor-rich-black);
}
.sobre__texto p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--cor-charcoal);
}

/* ======================
   9) SEÇÃO SERVIÇOS
   ====================== */
.servicos {
  background-color: var(--cor-white); /* fundo branco ou very light */
  padding: 6rem 1rem;
}
.servicos .container {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
}
.card-servico {
  background-color: var(--cor-alice-blue);
  border: 1px solid var(--cor-alice-blue);
  border-radius: 8px;
  padding: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-servico:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.card-servico h3 {
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 600;
  color: var(--cor-celestial-blue);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.card-servico p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: var(--cor-charcoal);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ======================
   10) SEÇÃO DEPOIMENTOS
   ====================== */
.depoimentos {
  padding: 6rem 1rem;
  background-color: var(--cor-baby-blue);
  color: var(--cor-rich-black);
}
.depoimentos .container {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}
.depoimentos h2 {
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--cor-rich-black);
}
.depoimentos__item {
  margin-bottom: 1.5rem;
  font-family: "Inter", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--cor-rich-black);
}
.depoimentos__autor {
  margin-top: 0.5rem;
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 500;
  color: var(--cor-sinopia);
}

/* ======================
   11) SEÇÃO CONTATO
   ====================== */
.contato {
  background-color: var(--cor-white);
  padding: 6rem 1rem;
}
.contato .container {
  max-width: 600px;
  margin: 0 auto;
}
.contato h2 {
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--cor-rich-black);
}
.form-contato {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-contato input,
.form-contato textarea {
  padding: 0.8rem;
  border: 1px solid var(--cor-gunmetal);
  border-radius: 4px;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  color: var(--cor-rich-black);
  background-color: var(--cor-alice-blue);
  transition: border-color 0.2s ease;
}
.form-contato input:focus,
.form-contato textarea:focus {
  outline: none;
  border-color: var(--cor-celestial-blue);
}
.form-contato button {
  background-color: var(--cor-sinopia);
  color: var(--cor-white);
  border: none;
  padding: 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: "Linear Grotesk", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  transition: opacity 0.2s ease;
}
.form-contato button:hover {
  opacity: 0.9;
}
.contato .info-adicional {
  margin-top: 1.5rem;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  text-align: center;
  color: var(--cor-charcoal);
}

/* ======================
   12) RODAPÉ (FOOTER)
   ====================== */
.footer {
  background-color: var(--cor-rich-black);
  color: var(--cor-alice-blue);
  padding: 2.5rem 1rem;
}
.footer .container {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
}
.footer .social-icons {
  display: flex;
  gap: 1rem;
}
.footer .social-icons a {
  color: var(--cor-alice-blue);
  font-size: 1.2rem;
  transition: opacity 0.2s ease;
}
.footer .social-icons a:hover {
  opacity: 0.8;
}

/* ======================
   13) RESPONSIVIDADE
   ====================== */
@media (max-width: 992px) {
  .sobre .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sobre__texto {
    flex: 1 1 100%;
  }
  .sobre__img {
    flex: 1 1 100%;
  }
}

@media (max-width: 768px) {
  /* Ajustes do header */
  .header .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .header__nav {
    flex-direction: column;
    width: 100%;
    display: none; /* por padrão fica oculto no mobile */
    background-color: var(--cor-white);
    padding: 1rem 0;
    border-top: 1px solid var(--cor-alice-blue);
  }
  .header__nav.open {
    display: flex;
  }
  .header__nav a {
    padding: 0.5rem 1rem;
  }

  /* Ajuste do hero */
  .hero h1 {
    font-size: 2.2rem;
  }
  .hero p {
    font-size: 1rem;
  }

  /* Fonte nos cards de serviço */
  .card-servico {
    padding: 1rem;
  }
  .card-servico h3 {
    font-size: 1.1rem;
  }
}

/* Se for ainda menor */
@media (max-width: 480px) {
  .hero {
    padding: 4rem 1rem 5rem;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
}

/* BOTÃO HAMBURGER (aparece só até 768px) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .header__nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--cor-white);
    padding: 1rem 0;
    border-top: 1px solid var(--cor-alice-blue);
  }
  .header__nav.open {
    display: flex;
  }
  .header__nav a {
    padding: 0.5rem 1rem;
  }
}
