/* =========================================================
   TaskZap — TESTE VISUAL v2 (preview, não é o site oficial)
   ---------------------------------------------------------
   Este arquivo é carregado POR CIMA de style.css e portfolio.css.
   Ele NÃO altera HTML, textos, links, número de WhatsApp ou os
   projetos do portfólio — apenas retina as variáveis de cor já
   usadas em todo o site e adiciona fundos de seção em "faixas"
   (escuro → claro → verde suave → escuro), conforme direção
   visual aprovada.
   ========================================================= */

:root {
  /* Paleta aprovada — substitui as variáveis originais de style.css.
     Como quase todo o CSS existente já usa essas variáveis, o site
     inteiro é retintado sem precisar tocar em style.css/portfolio.css. */
  --dark: #041f14; /* verde escuro principal */
  --dark-2: #0a4a2b; /* verde escuro secundário */
  --primary: #0f6b3d; /* verde médio */
  --primary-2: #22c55e; /* verde destaque */
  --mint: #86efac; /* verde neon suave (só para texto/detalhes) */
  --mint-soft: #eef8f1; /* fundo verde muito suave */
  --border-soft: #dce9e1; /* bordas suaves */

  /* Tokens novos, específicos do teste visual */
  --tz-bg-light: #f7faf8;
  --tz-text-dark: #0f172a;
  --tz-hero-glow: rgba(34, 197, 94, 0.18);

  --shadow-btn: 0 14px 28px rgba(34, 197, 94, 0.32);
}

/* A página inteira usa um fundo claro neutro por baixo das faixas
   full-bleed; nunca fica visível fundo escuro na página inteira. */
body {
  background: var(--tz-bg-light);
}

/* Remove o respiro vertical do container estreito no topo/rodapé,
   para o hero começar exatamente no topo da viewport (efeito de
   "faixa" cheia, sem barra clara acima). O rodapé mantém seu respiro
   original — não fazia parte do pedido de mudança visual. */
.page {
  padding-top: 0;
}

@media (min-width: 720px) {
  .page {
    padding-top: 0;
  }
}

/* ---------------------------------------------------------
   Técnica "full-bleed" reutilizável: faz a seção escapar do
   container estreito (.page, max-width 560px) e ocupar 100% da
   largura da viewport, mantendo o conteúdo interno alinhado a uma
   coluna central de até 940px (mesma lógica já usada com segurança
   no portfolio.css, testada sem rolagem horizontal).
   --------------------------------------------------------- */
.header,
.section--cta-primary,
.section--cta-primary + .section,
.section--portfolio,
.section--commercial {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(20px, calc((100vw - 940px) / 2));
  padding-right: max(20px, calc((100vw - 940px) / 2));
  width: auto;
  box-sizing: border-box;
}

/* =========================================================
   1. HERO / TOPO — header + botão principal de WhatsApp
   ========================================================= */
.header {
  background: radial-gradient(circle at top right, var(--tz-hero-glow), transparent 30%),
    linear-gradient(135deg, #041f14 0%, #0a4a2b 55%, #062417 100%);
  padding-top: 40px;
  padding-bottom: 36px;
  margin-bottom: 0;
}

.header__logo {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}

.header__title {
  color: #ffffff;
}

.header__subtitle {
  color: var(--mint);
  font-weight: 600;
}

.header__portfolio-link {
  color: var(--mint);
}

.header__portfolio-link:hover {
  color: #ffffff;
}

.header a:focus-visible,
.section--cta-primary a:focus-visible,
.section--commercial a:focus-visible {
  outline-color: var(--mint);
}

/* Continuação sólida do degradê do hero, para o botão de WhatsApp
   principal ficar sobre o mesmo "bloco escuro" do topo, sem costura
   visível entre header e esta seção. */
.section--cta-primary {
  background: linear-gradient(180deg, #062417 0%, #0a4a2b 100%);
  padding-top: 4px;
  padding-bottom: 44px;
  margin-bottom: 0;
}

/* =========================================================
   2. SEÇÃO DE SERVIÇOS — fundo claro, cards com contraste suave
   ========================================================= */
.section--cta-primary + .section {
  background: var(--tz-bg-light);
  padding-top: 44px;
  padding-bottom: 44px;
  margin-bottom: 0;
}

.card {
  transition: transform var(--transition-med, 260ms ease),
    box-shadow var(--transition-med, 260ms ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(4, 31, 20, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover {
    transform: none;
  }
}

/* =========================================================
   3. SEÇÃO "PROJETOS E DEMONSTRAÇÕES" — fundo verde-menta suave
   ========================================================= */
.section--portfolio {
  background: #eef8f1;
  padding-top: 44px;
  padding-bottom: 48px;
  margin-bottom: 0;
}

/* Os cards de projeto já são brancos (portfolio.css); aqui apenas
   reforçamos a separação visual do fundo menta com uma borda um
   pouco mais nítida e sombra levemente maior no hover. */
.portfolio-card {
  border-color: var(--border-soft);
}

.portfolio-card:hover {
  box-shadow: 0 18px 36px rgba(4, 31, 20, 0.18);
}

/* =========================================================
   4. CTA FINAL — fundo escuro novamente, visual premium
   ========================================================= */
.section--commercial {
  background: linear-gradient(135deg, #041f14 0%, #0a4a2b 100%);
  border-radius: 0;
  box-shadow: none;
  padding-top: 48px;
  padding-bottom: 48px;
  margin-bottom: 0;
}

.section--commercial .btn--primary {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}

.section--commercial .btn--primary:hover {
  background: var(--mint-soft);
}

/* =========================================================
   Pequenos ajustes finos de espaçamento entre faixas
   ========================================================= */
.section--cta-primary + .section .section__title {
  margin-top: 0;
}

.section--portfolio .section__title {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card:hover {
    box-shadow: var(--shadow-soft);
  }
}