/*
  ETAPA 2 — CSS: a APARÊNCIA da página.
  O CSS escolhe elementos do HTML (pela etiqueta, pela classe ".nome" ou pelo id "#nome")
  e diz como eles devem parecer: cor, tamanho, espaçamento, posição.

  Ordem deste arquivo:
    1. Cores do tema claro (variáveis)
    2. Cores do tema escuro (as mesmas variáveis, com outros valores)
    3. Base: regras gerais da página
    4. Partes da página, pensadas primeiro para o CELULAR
    5. Ajustes para telas largas (computador, tablet deitado)
*/


/* =========================================================
   1. CORES DO TEMA CLARO
   ========================================================= */
/*
  ":root" é o elemento <html>. Variáveis CSS começam com "--" e são usadas
  depois com var(--nome). A vantagem: a cor fica definida num lugar só.
  Para trocar o tema, basta dar outros valores a estas variáveis (parte 2).
*/
:root {
  --fundo: #FFFFFF;          /* fundo da página */
  --fundo-alt: #F3F5F8;      /* fundo das seções alternadas */
  --cartao: #FFFFFF;         /* fundo dos cartões */
  --texto: #1C2430;          /* texto principal */
  --texto-suave: #4A5563;    /* texto secundário */
  --titulo: #2D375A;         /* títulos: o azul-marinho da marca */
  --link: #3A4672;           /* links */
  --linha: #D9DEE5;          /* bordas e divisórias */
  --destaque: #00A859;       /* verde da marca: só para detalhes, nunca para texto */
  --botao-whatsapp: #1B6F45; /* verde escuro: tem contraste com texto branco */
  --botao-whatsapp-hover: #155937;
  --foco: #F2B705;           /* contorno amarelo de quem navega pelo teclado */

  /* Medidas reaproveitadas */
  --raio: 10px;              /* cantos arredondados */
  --largura-maxima: 1080px;  /* largura máxima do conteúdo em telas grandes */

  /* Avisa o navegador sobre o tema: barras de rolagem e campos acompanham */
  color-scheme: light;
}


/* =========================================================
   2. CORES DO TEMA ESCURO
   ========================================================= */
/*
  As mesmas cores aparecem DUAS vezes, de propósito:

  a) @media (prefers-color-scheme: dark): vale quando o celular ou computador
     da pessoa está no modo escuro. ":not([data-theme="light"])" significa
     "a não ser que a pessoa tenha escolhido o claro no botão".
     Funciona mesmo sem JavaScript.

  b) [data-theme="dark"]: vale quando a pessoa escolhe o escuro no botão.
     Quem coloca esse atributo no <html> é o script.js (etapa 3).
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #121726;
    --fundo-alt: #1A2033;
    --cartao: #212842;
    --texto: #E8ECF3;
    --texto-suave: #B4BDCC;
    --titulo: #C9D3EC;
    --link: #A9BDF2;
    --linha: #343C58;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fundo: #121726;
  --fundo-alt: #1A2033;
  --cartao: #212842;
  --texto: #E8ECF3;
  --texto-suave: #B4BDCC;
  --titulo: #C9D3EC;
  --link: #A9BDF2;
  --linha: #343C58;
  color-scheme: dark;
}


/* =========================================================
   3. BASE
   ========================================================= */

/* Faz largura e altura incluírem a borda e o espaçamento interno.
   Sem isso, somar tamanhos fica confuso. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Rolagem suave ao clicar no menu, só para quem não pediu menos movimento */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;                         /* tira a margem padrão do navegador */
  background: var(--fundo);
  color: var(--texto);
  /* Fonte do próprio sistema: não precisa baixar nada */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;              /* 17px: confortável no celular */
  line-height: 1.6;                  /* espaço entre linhas */
}

/* Imagens nunca passam da largura de quem as contém */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--link);
}

/* Contorno visível para quem navega com a tecla Tab */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

h1, h2, h3 {
  color: var(--titulo);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

/* "Caixa" que centraliza o conteúdo e limita a largura */
.container {
  max-width: var(--largura-maxima);
  margin: 0 auto;                    /* "auto" nas laterais = centralizado */
  padding: 0 16px;                   /* respiro nas bordas do celular */
}


/* =========================================================
   4. PARTES DA PÁGINA (celular primeiro)
   ========================================================= */

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky;                  /* fica grudado no topo ao rolar */
  top: 0;
  z-index: 10;                       /* fica por cima do resto */
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.topo-conteudo {
  display: flex;                     /* coloca os itens lado a lado */
  flex-wrap: wrap;                   /* se não couber, quebra a linha */
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.marca img {
  width: auto;
  height: 40px;
}

/* No tema escuro o logo (letras azul-marinho) sumiria no fundo escuro.
   Por isso ganha uma "plaquinha" branca. Aparece nos dois casos do tema escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca img {
    background: #FFFFFF;
    padding: 4px 8px;
    border-radius: 6px;
  }
}
:root[data-theme="dark"] .marca img {
  background: #FFFFFF;
  padding: 4px 8px;
  border-radius: 6px;
}

.menu {
  display: flex;
  gap: 16px;
  order: 3;                          /* no celular, o menu desce para a 2ª linha */
  width: 100%;
}

.menu a {
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 0;
}

.menu a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Botão de tema: redondo, com o ícone no meio */
.botao-tema {
  width: 44px;
  height: 44px;                      /* 44px: tamanho mínimo confortável para o dedo */
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: var(--fundo-alt);
  color: var(--texto);
  font-size: 1.25rem;
  cursor: pointer;
}

/* O atributo "hidden" esconde o botão até o JavaScript liberá-lo */
.botao-tema[hidden] {
  display: none;
}

/* ---------- Botões ---------- */
.botao {
  display: inline-block;
  padding: 12px 20px;
  border-radius: var(--raio);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.botao-whatsapp {
  background: var(--botao-whatsapp);
  color: #FFFFFF;
}

.botao-whatsapp:hover {
  background: var(--botao-whatsapp-hover);
}

/* ---------- Abertura ---------- */
.abertura {
  padding: 40px 0;
  border-bottom: 6px solid var(--destaque);  /* faixa verde da marca */
}

.abertura-grade {
  display: grid;                     /* no celular: uma coluna só */
  gap: 32px;
}

.abertura h1 {
  font-size: 2rem;
  margin-bottom: 4px;
}

.cargo {
  margin: 0 0 16px;
  color: var(--texto-suave);
  font-weight: 600;
}

.chamada {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.abertura-texto .botao {
  margin-top: 8px;
}

.abertura-foto {
  margin: 0;                         /* <figure> tem margem padrão; tiramos */
}

.abertura-foto img {
  border-radius: var(--raio);
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;                 /* preenche o espaço sem deformar a foto */
}

/* ---------- Seções ---------- */
.secao {
  padding: 48px 0;
}

/* Ao clicar no menu, a página rola até a seção. Como o cabeçalho fica grudado
   no topo, ele cobriria o título. "scroll-margin-top" manda parar a rolagem
   um pouco antes, na altura do cabeçalho (no celular ele tem duas linhas). */
section[id] {
  scroll-margin-top: 110px;
}

.secao-alt {
  background: var(--fundo-alt);
}

.secao h2 {
  font-size: 1.6rem;
}

.introducao {
  color: var(--texto-suave);
  margin: 0 0 24px;
}

/* ---------- Cartões de serviço ---------- */
.cartoes {
  list-style: none;                  /* tira as bolinhas da lista */
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;                         /* no celular: um cartão por linha */
}

.cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-top: 4px solid var(--destaque);
  border-radius: var(--raio);
  padding: 20px;
}

.cartao h3 {
  font-size: 1.15rem;
}

.cartao p {
  margin: 0;
  color: var(--texto-suave);
}

/* ---------- Contato ---------- */
.lista-contato {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.lista-contato strong {
  display: block;                    /* o rótulo fica numa linha, o dado na outra */
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

.lista-contato a {
  overflow-wrap: anywhere;           /* o e-mail longo quebra em vez de vazar da tela */
}

address {
  font-style: normal;                /* o navegador põe <address> em itálico; tiramos */
}

/* ---------- Rodapé ---------- */
.rodape {
  background: #2D375A;               /* marinho da marca nos dois temas */
  color: #DCE4EF;
  padding: 32px 0;
  font-size: 0.9rem;
}

.rodape-conteudo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.rodape-simbolo {
  width: 48px;
  flex: none;                        /* não deixa o símbolo encolher */
  background: #FFFFFF;
  border-radius: 6px;
  padding: 4px;
}

.rodape p {
  margin: 0 0 6px;
}


/* =========================================================
   5. TELAS LARGAS
   ========================================================= */
/*
  "min-width: 760px" quer dizer: "a partir de 760px de largura".
  Tudo acima continua valendo; aqui só acrescentamos o que muda.
  Essa é a ideia do "celular primeiro".
*/
@media (min-width: 760px) {
  .menu {
    order: 0;                        /* o menu volta para a mesma linha do logo */
    width: auto;
    margin-left: auto;               /* empurra o menu para a direita */
    gap: 24px;
  }

  .marca img {
    height: 48px;
  }

  .abertura {
    padding: 64px 0;
  }

  .abertura-grade {
    grid-template-columns: 1.1fr 1fr; /* duas colunas: texto e foto */
    align-items: center;
  }

  .abertura h1 {
    font-size: 2.75rem;
  }

  .secao {
    padding: 64px 0;
  }

  section[id] {
    scroll-margin-top: 72px;         /* aqui o cabeçalho tem uma linha só */
  }

  .cartoes {
    grid-template-columns: repeat(2, 1fr);  /* dois cartões por linha */
  }

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

@media (min-width: 1000px) {
  .cartoes {
    grid-template-columns: repeat(3, 1fr);  /* três cartões por linha */
  }

  .lista-contato {
    grid-template-columns: repeat(3, 1fr);
  }
}