/* ================================================================
   AlfamaWeb — estilos da página SOLUÇÕES (listagem)
   ================================================================ */

/* ================================================================
   TOPO
   ================================================================ */

.solucoes-topo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-4xl) var(--space-4xl);
}

/* O céu do Figma vira gradiente, como no hero da home. */
.solucoes-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 520px at 14% 30%, rgba(249, 116, 21, .16), transparent 70%),
    radial-gradient(760px 560px at 86% 70%, rgba(59, 62, 186, .20), transparent 70%);
  pointer-events: none;
}

.solucoes-topo__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.solucoes-topo__titulo {
  max-width: 900px;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--text-primary);
}

.solucoes-topo__descricao { max-width: 760px; }

.solucoes-topo__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* ================================================================
   OS SERVIÇOS — cards largos
   ================================================================ */

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

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

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

.servicos-lista__descricao { max-width: 640px; }

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

/* O <li> não pinta nada: quem é o cartão é a âncora dentro dele. */
.servicos-lista__cards > li { display: flex; }
.servicos-lista__cards > li > .servico-largo { flex: 1 1 auto; }

/* Texto à esquerda, imagem à direita — a imagem é uma coluna do grid, não
   um fundo. O card INTEIRO é a âncora (ver solucoes.php): como o <a> é o
   próprio card, não há mais o truque do link esticado por ::after. */
.servico-largo {
  display: grid;
  color: inherit;
  grid-template-columns: minmax(0, 1fr) minmax(0, 660px);
  align-items: stretch;
  /* O card tem altura própria. Sem isto a imagem (424×358 natural) esticaria
     a linha do grid para ~557px e o card viraria um bloco alto demais. */
  min-height: 330px;
  border: var(--border-thin) solid var(--border-medium);
  border-radius: var(--radius-xl);
  background: var(--bg-tertiary);
  overflow: hidden;
  transition: border-color var(--transition);
}
.servico-largo:hover { border-color: var(--brand-primary); }

.servico-largo__conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-2xl);
}

.servico-largo__titulo {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  transition: color var(--transition);
}
.servico-largo:hover .servico-largo__titulo { color: var(--brand-primary); }

.servico-largo__texto {
  max-width: 520px;
  color: var(--text-secondary);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
}

.servico-largo__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* A etiqueta pequena de tecnologia. Não é a `.tag` das seções: aquela é
   um rótulo de seção, esta é um item de lista. */
.etiqueta {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-thin) solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  white-space: nowrap;
}

.servico-largo__seta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: auto;
  border: var(--border-thin) solid var(--border-medium);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.servico-largo:hover .servico-largo__seta {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--black);
  transform: translate(2px, -2px);
}
.servico-largo__seta svg { width: 24px; height: 24px; fill: currentColor; }

/* O mockup do notebook vem do Figma com fundo TRANSPARENTE — o degradê
   laranja→azul era uma camada separada da prancha. Ele volta aqui como
   background do contêiner, e não achatado dentro do PNG: assim a cor
   fica sob controle do CSS (e sai de um token) em vez de estar cozida
   na imagem. */
.servico-largo__midia {
  position: relative;
  overflow: hidden;
  /* As paradas saíram de uma amostragem da própria prancha do Figma
     (escuro → laranja queimado → escuro → azul), e não de um chute: o
     degradê do design é bem mais contido do que parece na miniatura. */
  background: linear-gradient(90deg, #100c0b 0%, #542607 28%, #16161a 58%, #062a70 100%);
}
/* A imagem é ABSOLUTA dentro da coluna. Se ficasse no fluxo, o navegador
   usaria a proporção natural dela (424×358) para calcular a altura da
   linha do grid: a 660px de largura isso dava 557px, e o `min-height` do
   card virava letra morta. Fora do fluxo, quem dita a altura é a coluna
   de texto — que é o certo. */
.servico-largo__midia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  transition: transform 400ms var(--ease);
}
.servico-largo:hover .servico-largo__midia img { transform: scale(1.04); }

/* ================================================================
   METODOLOGIA
   ================================================================ */

.metodologia { background: var(--bg-surface); }

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

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

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

.metodologia__descricao { max-width: 720px; }

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

.etapa {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: var(--border-thin) solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  transition: border-color var(--transition), transform var(--transition);
}
.etapa:hover {
  border-color: var(--brand-primary);
  transform: translateY(-4px);
}

.etapa__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

/* O número é decorativo: quem dá a ordem é a <ol>. Por isso ele é
   aria-hidden no HTML — o leitor de tela já anuncia "item 1 de 4". */
.etapa__numero {
  color: var(--brand-primary);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
}

.etapa__icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.etapa:hover .etapa__icone { color: var(--brand-primary); }
.etapa__icone svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

.etapa__titulo {
  color: var(--text-primary);
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.3;
}

.etapa__texto {
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}

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

@media (max-width: 1200px) {
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* A imagem desce para baixo do texto e ganha altura fixa — sem isso
     ela viraria uma faixa achatada. */
  .servico-largo { grid-template-columns: 1fr; }
  .servico-largo__midia { order: -1; height: 240px; }
}

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

  .solucoes-topo__acoes { flex-direction: column; align-items: stretch; width: 100%; }
  .solucoes-topo__acoes .btn { width: 100%; }

  .servico-largo__conteudo { padding: var(--space-lg); }
}