/* layout.css — seções e componentes da página. */

/* --- Cabeçalho fixo ------------------------------------------------------ */
.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
/* .topo--rolado é adicionada por ui.js assim que a página sai do topo */
.topo--rolado { border-bottom-color: var(--cor-borda); box-shadow: var(--sombra); }

.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 4.5rem;
}

.topo__marca {
  font-weight: var(--peso-forte);
  font-size: var(--texto-medio);
  letter-spacing: -0.03em;
  color: var(--cor-texto);
  text-decoration: none;
}
.topo__marca span { color: var(--cor-primaria); margin-left: 0.3em; }

.menu__lista { display: flex; gap: var(--esp-5); }
.menu__lista a {
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-weight: var(--peso-medio);
  font-size: var(--texto-base);
}
.menu__lista a:hover { color: var(--cor-primaria); }

.menu { display: flex; align-items: center; gap: var(--esp-6); }

/* Botão de menu: escondido no desktop, vira hambúrguer no celular */
.menu-abrir {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu-abrir__barra {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background: var(--cor-texto);
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
/* Vira um "X" quando o menu está aberto */
.menu-abrir[aria-expanded="true"] .menu-abrir__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-abrir[aria-expanded="true"] .menu-abrir__barra:nth-child(2) { opacity: 0; }
.menu-abrir[aria-expanded="true"] .menu-abrir__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .menu-abrir { display: flex; }
  .menu {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--esp-4);
    padding: var(--esp-5);
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
    box-shadow: var(--sombra);
    /* Escondido por padrão; ui.js alterna .menu--aberto */
    display: none;
  }
  .menu--aberto { display: flex; }
  .menu__lista { flex-direction: column; gap: var(--esp-4); }
  .menu__lista a { display: block; padding-block: var(--esp-2); font-size: var(--texto-medio); }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding-block: clamp(3rem, 9vw, 6.5rem) clamp(3rem, 8vw, 5.5rem);
  background:
    radial-gradient(60% 70% at 88% 0%, rgba(34, 197, 140, 0.13), transparent 70%),
    radial-gradient(48% 60% at 0% 8%, rgba(11, 122, 87, 0.07), transparent 70%);
}

.hero__interno { max-width: 56rem; }

.hero__titulo { font-size: var(--texto-hero); margin-bottom: var(--esp-5); }
.hero__titulo em {
  font-style: normal;
  color: var(--cor-primaria);
  /* Traço sob a palavra destacada, que não corta as descidas das letras */
  background: linear-gradient(transparent 78%, rgba(34, 197, 140, 0.32) 0);
}

.hero__texto {
  font-size: var(--texto-medio);
  color: var(--cor-texto-suave);
  max-width: 54ch;
  margin-bottom: var(--esp-6);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-4); }

.hero__nota {
  margin-top: var(--esp-4);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-suave);
}

/* --- Serviços ------------------------------------------------------------ */
.cards {
  display: grid;
  /* Colunas que se acomodam sozinhas: 1 no celular, 2 no tablet, 4 no desktop
     largo, sem uma única media query */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--esp-5);
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--esp-6);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  transition: border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.card:hover {
  border-color: var(--cor-primaria-clara);
  transform: translateY(-4px);
  box-shadow: var(--sombra-forte);
}

.card__icone {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--esp-4);
  border-radius: var(--raio);
  background: rgba(34, 197, 140, 0.14);
  color: var(--cor-primaria);
}
.card__icone svg { width: 24px; height: 24px; }

.card__titulo { font-size: var(--texto-grande); margin-bottom: var(--esp-3); }

.card__texto {
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-5);
  /* Empurra o link para a base, alinhando os CTAs entre cards de alturas
     diferentes */
  flex-grow: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-weight: var(--peso-medio);
  text-decoration: none;
  /* Leva ao WhatsApp: precisa do alvo de toque mínimo de 44px */
  min-height: 44px;
}
.card__link::after { content: " →"; transition: opacity var(--transicao); }
.card__link:hover { text-decoration: underline; }

/* --- Tecnologias --------------------------------------------------------- */
.tecs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--esp-5);
}

.tec {
  padding-left: var(--esp-5);
  border-left: 3px solid var(--cor-primaria-clara);
}

.tec__nome {
  font-size: var(--texto-medio);
  font-weight: var(--peso-medio);
  margin-bottom: var(--esp-2);
  color: var(--cor-primaria-escura);
}

.tec__texto { color: var(--cor-texto-suave); }

/* --- Sobre --------------------------------------------------------------- */
.sobre {
  display: grid;
  /* Foto e texto lado a lado quando cabe; empilhados quando não cabe */
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(var(--esp-5), 5vw, var(--esp-8));
  align-items: start;
}

@media (max-width: 780px) {
  .sobre { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .sobre__foto { max-width: 13rem; }
}

.sobre__foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  /* Recorte circular: elimina os cantos pretos remanescentes da foto original */
  border-radius: 50%;
  border: 4px solid var(--cor-fundo);
  box-shadow: 0 0 0 2px var(--cor-primaria-clara), var(--sombra-forte);
}

.sobre__texto > p { color: var(--cor-texto-suave); margin-bottom: var(--esp-4); }
.sobre__texto > p:first-of-type { color: var(--cor-texto); font-size: var(--texto-medio); }

.sobre__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}
.sobre__marcas li {
  padding: var(--esp-2) var(--esp-4);
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-suave);
}
.sobre__marcas strong { color: var(--cor-primaria-escura); font-weight: var(--peso-medio); }

/* --- Contato ------------------------------------------------------------- */
.contato {
  padding: clamp(var(--esp-6), 6vw, var(--esp-8)) var(--esp-5);
  text-align: center;
  border-radius: var(--raio-grande);
  color: #fff;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(34, 197, 140, 0.42), transparent 65%),
    linear-gradient(160deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
}

.rotulo--claro { color: rgba(255, 255, 255, 0.85); }

.contato__titulo { font-size: var(--texto-titulo); margin-bottom: var(--esp-4); }

.contato__texto {
  max-width: 46ch;
  margin: 0 auto var(--esp-6);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--texto-medio);
}

/* Botão branco sobre fundo verde: o inverso do resto da página, para o CTA
   final não se dissolver no bloco colorido */
.contato__botao { background: #fff; color: var(--cor-primaria-escura); box-shadow: var(--sombra-forte); }
.contato__botao:hover { background: var(--cor-fundo-alt); color: var(--cor-primaria-escura); transform: translateY(-2px); }

.contato__alternativas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-5);
  margin-top: var(--esp-6);
  font-size: var(--texto-base);
}
.contato__alternativas a { color: rgba(255, 255, 255, 0.92); }
.contato__alternativas a:hover { color: #fff; }
.contato__alternativas :focus-visible { outline-color: #fff; }

/* --- Rodapé -------------------------------------------------------------- */
.rodape {
  padding-block: var(--esp-6);
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: var(--texto-pequeno);
}
.rodape__interno {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-3);
}
.rodape p { margin: 0; }

/* --- Animação de entrada -------------------------------------------------- */
/* O estado escondido depende da classe .js, adicionada por ui.js. Sem
   JavaScript, .revelar nunca fica invisível. */
.js .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.js .revelar--visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; transition: none; }
}

/* --- Página 404 ----------------------------------------------------------- */
.erro {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh; /* evita o corte causado pela barra do navegador móvel */
  text-align: center;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(34, 197, 140, 0.14), transparent 70%);
}
.erro__interno { max-width: 40rem; }
.erro__codigo {
  font-size: clamp(4rem, 16vw, 7rem);
  font-weight: var(--peso-forte);
  line-height: 1;
  color: var(--cor-primaria-clara);
  margin-bottom: var(--esp-4);
}
.erro__titulo { font-size: var(--texto-titulo); margin-bottom: var(--esp-4); }
.erro__texto { color: var(--cor-texto-suave); font-size: var(--texto-medio); margin-bottom: var(--esp-6); }
.erro__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-4); justify-content: center; }