/* ================================================================
   AlfamaWeb — estilos da HOME
   Só o que é exclusivo desta página. Tokens, reset, tipografia,
   navbar, rodapé, botões e o banner de CTA estão em styles.css e
   NÃO se repetem aqui.
   ================================================================ */

/* ================================================================
   HERO
   ================================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 786px;
  padding: var(--space-4xl) var(--gutter-x) var(--space-3xl);
  background: var(--bg-primary);
  overflow: hidden;
}

/* O céu estrelado do Figma é um `mix-blend-hard-light` a 25% sobre o
   fundo. Aqui ele é um gradiente radial: o arquivo original era uma
   textura de 1596×1060 que custava mais do que o efeito entrega. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 78% 18%, rgba(249, 116, 21, .10), transparent 65%),
    radial-gradient(700px 500px at 12% 72%, rgba(59, 62, 186, .10), transparent 70%);
  pointer-events: none;
}

.hero__conteudo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4xl);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.hero__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.hero__texto-bloco {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero__titulo {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  color: var(--text-primary);
}

.hero__descricao {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

/* A lua e o astronauta. A lua é o elemento que dita a altura; o
   astronauta é posicionado por cima em percentuais do contêiner,
   então os dois continuam alinhados quando a coluna encolhe. */
.hero__visual {
  position: relative;
  aspect-ratio: 593 / 500;
}

.hero__lua {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__astronauta {
  position: absolute;
  top: 52%;
  right: 5%;
  width: 69%;
  transform: translateY(-50%) rotate(7deg);
  animation: flutuar 6s ease-in-out infinite;
}

/* O "Breathe" do Figma (plugin Animate It) — sobe e desce de leve. */
@keyframes flutuar {
  0%, 100% { transform: translateY(-50%) rotate(7deg); }
  50%      { transform: translateY(calc(-50% - 14px)) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__astronauta { animation: none; }
}

.hero__divisor { margin-top: var(--space-3xl); }

/* ================================================================
   QUEM SOMOS
   ================================================================ */

.quem-somos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.quem-somos__colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.quem-somos__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.quem-somos__titulo {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

.quem-somos__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}

.quem-somos__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--text-primary);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
}

/* O quadradinho laranja. `::before` em vez de um <span> vazio: é
   marcador, não conteúdo — some do leitor de tela sozinho. */
.quem-somos__item::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: calc((1em * var(--lh-body) - 8px) / 2);
  background: var(--brand-primary);
  border-radius: var(--radius-xs);
}

.quem-somos__midia {
  width: 100%;
  aspect-ratio: 1320 / 500;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.quem-somos__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================
   SERVIÇOS — carrossel horizontal de cards
   ================================================================ */

.servicos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.servicos__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.servicos__titulo {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.servicos__descricao { max-width: 560px; }

/* O carrossel é scroll nativo com `scroll-snap`: sem JS, funciona
   com dedo, trackpad, roda e teclado, e degrada para uma lista
   rolável se o CSS falhar. O JS só acrescenta o avanço sozinho,
   empurrando o `scrollLeft`. */
.servicos__carrossel {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* O sangramento lateral faz o card "sair" pela margem da seção,
     como no Figma, sem quebrar o alinhamento do resto. */
  margin-inline: calc(var(--gutter-x) * -1);
  padding-inline: var(--gutter-x);
  /* O snap mede a partir do SCROLLPORT, que ignora o padding acima: sem
     isto o primeiro card encosta na borda da janela em vez de alinhar
     com o resto da seção, e a posição de repouso nunca é o zero. */
  scroll-padding-inline: var(--gutter-x);
  padding-bottom: var(--space-xs);
}
.servicos__carrossel::-webkit-scrollbar { display: none; }

/* Enquanto o mouse arrasta a trilha: o cursor diz o que está
   acontecendo e a seleção de texto sai da frente — sem isso o arrasto
   pinta de azul os títulos dos cards pelo caminho. */
.servicos__carrossel--arrastando {
  cursor: grabbing;
  user-select: none;
}

.servico {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 424px;
  height: 532px;
  flex: none;
  padding-top: var(--space-lg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
}

/* Cada card tem seu gradiente. São os três do Figma, do azul da
   marca ao laranja, girando o ângulo a cada card. */
.servico--sites       { background: linear-gradient(180deg, #1b2f8a 0%, #3b3eba 42%, #b4561f 100%); }
.servico--aplicativos { background: linear-gradient(180deg, #3b3eba 0%, #5b3fbd 45%, #c25f18 100%); }
.servico--simulador   { background: linear-gradient(180deg, #2a2f9e 0%, #7a4aa8 48%, #d06a15 100%); }

.servico__cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-inline: var(--space-lg);
  color: var(--text-primary);
}

.servico__titulo {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
}

.servico__texto {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--text-primary);
  opacity: .92;
}

.servico__midia {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.servico__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* O círculo com a seta diagonal, no canto da imagem. */
.servico__seta {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  transition: background-color var(--transition), transform var(--transition);
}
.servico:hover .servico__seta,
.servico:focus-visible .servico__seta {
  background: var(--brand-primary);
  color: var(--black);
  transform: translate(2px, -2px);
}
.servico__seta svg { width: 24px; height: 24px; fill: currentColor; }

/* O quarto card — "E muito mais", com foto de fundo e CTA. */
.servico--cta {
  justify-content: space-between;
  padding: var(--space-2xl);
  background: var(--bg-surface);
}

.servico__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  mix-blend-mode: lighten;
}

.servico--cta .servico__titulo { color: var(--text-primary); }

/* O card inteiro é o link, então é ele que acende o botão — senão o
   botão só reagiria com o ponteiro parado em cima do retângulo, e
   mentiria sobre onde se pode clicar. */
.servico--cta:hover .btn--primario,
.servico--cta:focus-visible .btn--primario { background: var(--btn-primario-hover); }

.servico__cta-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ================================================================
   PROJETOS
   ================================================================ */

.projetos {
  position: relative;
  border-radius: var(--radius-2xl);
  background: var(--bg-tertiary);
  overflow: hidden;
  isolation: isolate;
}

/* Os dois brilhos de fundo. Eram SVGs com `feGaussianBlur` de 90px;
   como gradiente radial custam zero bytes e o borrão é o mesmo. */
.projetos::before,
.projetos::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.projetos::before {
  top: 24%;
  left: -18%;
  width: 640px;
  height: 900px;
  background: radial-gradient(closest-side, rgba(249, 116, 21, .16), transparent);
}
.projetos::after {
  top: 52%;
  right: -16%;
  width: 640px;
  height: 900px;
  background: radial-gradient(closest-side, rgba(59, 62, 186, .18), transparent);
}

.projetos__interno {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.projetos__cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 761px) minmax(0, 536px);
  gap: var(--space-lg);
  align-items: center;
  justify-content: space-between;
}

.projetos__titulo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
}

.projetos__titulo {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

/* Duas colunas com alturas de imagem diferentes — o escalonamento
   do Figma vem da proporção de cada card, não de deslocamento por
   pixel, então ele sobrevive à mudança de largura. */
/* --- rodapé da seção: contador + "mais projetos" --- */

.projetos__rodape {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: var(--border-thin) solid var(--surface-dark);
}

.projetos__rodape-conteudo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
}

/* O contador de projetos, com a revelação slideUp da referência
   (redstone.software, `project-counter-wrap slideUp animated`): o
   número mora duas vezes numa coluna de altura de UMA linha, com
   `overflow: hidden`; o hover sobe a coluna em 100% e a segunda
   cópia toma o lugar da primeira.

   As duas cópias são idênticas de propósito — o efeito é o
   deslizamento, não uma troca de conteúdo. Isso também é o que
   permite trocar o número em UM lugar quando ele vier da API: o
   JS duplica o texto (ver home.js). */
.projetos__contador {
  display: inline-block;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  transition: color var(--transition);
}
.projetos__contador:hover { color: var(--brand-primary); }

.projetos__contador-rolo {
  display: flex;
  flex-direction: column;
  /* A janela tem a altura de uma linha; a segunda cópia fica fora
     dela até o hover. `1em` porque o line-height do contador é 1. */
  height: 1em;
  overflow: hidden;
}

.projetos__contador-linha {
  display: block;
  flex: none;
  height: 1em;
  transition: transform 420ms var(--ease);
  /* `tabular-nums` é o que segura a largura enquanto o número sobe de
     0 a 215 — sem ele os parênteses tremem a cada dígito trocado. */
  font-variant-numeric: tabular-nums;
}

/* Os parênteses são decoração e ficam FORA do nó que o contador
   escreve: assim o JS troca só o número, e não há como ele apagar o
   "(" ou o ")" por engano. Mesma solução da referência. */
.projetos__contador-linha::before { content: "("; }
.projetos__contador-linha::after  { content: ")"; }

.projetos__contador:hover .projetos__contador-linha,
.projetos__contador:focus-visible .projetos__contador-linha {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .projetos__contador-linha { transition: none; }
  .projetos__contador:hover .projetos__contador-linha,
  .projetos__contador:focus-visible .projetos__contador-linha { transform: none; }
}

.projetos__mais {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.projetos__mais-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-primary);
  font-size: var(--fs-h5);
  font-weight: 500;
  transition: color var(--transition);
}
.projetos__mais-link:hover { color: var(--brand-primary); }
.projetos__mais-link svg {
  width: 12px;
  height: 15px;
  fill: currentColor;
  transform: rotate(90deg);
  transition: transform var(--transition);
}
.projetos__mais-link:hover svg { transform: rotate(90deg) translateY(-3px); }

/* A galeria de miniaturas, no papel do `footer-media` da referência:
   uma faixa que roda sozinha e leva ao portfólio. Lá é um GIF; aqui
   são as miniaturas reais numa trilha animada, para o conteúdo
   continuar sendo imagem de projeto e poder vir do CMS. */
.projetos__galeria {
  display: block;
  max-width: 648px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Apaga as pontas, como a máscara da esteira de clientes: sem isso a
     emenda do laço aparece como um corte seco na borda. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.projetos__galeria-trilha {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  animation: galeria 26s linear infinite;
}

/* A segunda metade da trilha é o que fecha o laço; ela precisa herdar
   o mesmo flex da trilha, senão os quatro itens da cópia viram um
   bloco só e o passo de -50% deixa de bater. */
.projetos__galeria-copia {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.projetos__galeria:hover .projetos__galeria-trilha,
.projetos__galeria:focus-visible .projetos__galeria-trilha {
  animation-play-state: paused;
}

@keyframes galeria {
  from { transform: translateX(0); }
  /* -50% porque a trilha tem exatamente duas cópias do conjunto. A
     metade do `gap` extra é o que evita o "pulo" de um vão na volta. */
  to   { transform: translateX(calc(-50% - var(--space-sm))); }
}

@media (prefers-reduced-motion: reduce) {
  .projetos__galeria-trilha { animation: none; }
}

.projetos__miniatura {
  display: block;
  width: 200px;
  height: 120px;
  flex: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.projetos__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.projetos__galeria:hover .projetos__miniatura img { transform: scale(1.05); }

/* ================================================================
   BLOG (a seção da home; o card está no styles.css)
   ================================================================ */

.blog {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

.blog__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.blog__titulo {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.blog__descricao { max-width: 640px; }

.blog__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

/* ================================================================
   RESPONSIVO
   ================================================================ */

@media (max-width: 1200px) {
  .projetos__cabecalho {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .blog__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Hero: o texto sobe, a imagem desce. */
  .hero {
    min-height: 0;
    padding-block: var(--space-3xl);
  }
  .hero__conteudo {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .hero__acoes { gap: var(--space-sm); }

  .quem-somos__colunas { grid-template-columns: 1fr; }

}

@media (max-width: 768px) {
  .blog__grade { grid-template-columns: 1fr; }

  .projetos__rodape-conteudo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  /* A galeria ocupa a largura toda da coluna em vez de travar em 648. */
  .projetos__galeria { max-width: none; }
}

@media (max-width: 560px) {
  .hero__acoes { flex-direction: column; align-items: stretch; }
  .hero__acoes .btn { width: 100%; }

  .servico { width: min(84vw, 340px); height: auto; min-height: 460px; }

}