/* ==============================================================
   SERVIÇOS — página servicos.html: hero, os três eixos de serviço
   (.axis*) e o CTA de fechamento. Não listado no pedido original de
   separação de CSS, mas segue a mesma lógica (página com volume
   próprio de estilo) — se um dia a página ganhar subpáginas, o
   padrão de projetos.css/conteudo.css se aplica igual.
   ============================================================== */

.services-page { background: #f5f5f5; }

/* ===== Hero (mesma estrutura do .about-hero em quem-somos.css — classes
   próprias porque servicos.css não deve depender de quem-somos.css,
   mesma lógica do .services-talk mais abaixo). Sem imagem — só
   eyebrow/título/apoio, por isso título e apoio usam o reveal-wipe/
   reveal-rise genérico (ver script.js) em vez da sequência orquestrada
   de Quem somos, que depende de uma mídia como alvo de alinhamento. */
/* 270px (não os 300px de .page-hero em componentes.css) porque o eyebrow
   acima do título ocupa 30px (20px de font-size × 1.5 de line-height do
   body) — título e eyebrow juntos somam os mesmos 300px do topo do H1 em
   Projetos/Conteúdos, então o título fica na mesma altura nas 3 páginas. */
.services-hero {
  padding: 270px 0 80px;
}

.services-hero-intro {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.services-hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  font-size: 20px;
  color: var(--gray-07);
}

.services-hero-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

/* .page-hero-title/.page-hero-info (componentes.css, compartilhadas com
   Projetos/Conteúdos) já dão font-size/line-height/cor corretos — aqui só
   ajusta pro grid de 12 colunas desta página (span 6/5) e zera o padding
   lateral de 80px que elas carregam por padrão. */
.services-hero-title {
  grid-column: 1 / span 6;
  margin: 0;
  padding: 0;
}

.services-hero-info {
  grid-column: 7 / span 5;
  padding: 0;
}

/* Cada eixo é uma faixa de largura total, sem background próprio — herda
   o #f5f5f5 de .services-page, igual nos três. */
.axis {
  padding: 100px 0;
}

/* Título+descrição+lista de serviços (colunas 1-5) ao lado da imagem
   (colunas 7-11) — align-items:start pra imagem ficar à altura do
   título, no topo da coluna, e não centralizada contra o bloco inteiro
   (que fica bem mais alto que a imagem por causa da lista de serviços
   abaixo da descrição). Mesmo grid de 12 colunas/48px do resto do site. */
.axis-inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

/* Mesmo tamanho/proporção do .about-team-media em quem-somos.css
   (620/770), só que nas colunas 7 a 11 em vez de 1 a 5. position:relative
   pra ancorar a seta local (ver .axis-media-arrow abaixo). background
   cinza é o placeholder dos eixos que ainda não têm asset (some por
   baixo assim que o <img> carrega). */
.axis-media {
  position: relative;
  grid-column: 7 / span 5;
  aspect-ratio: 620 / 770;
  background: var(--gray-04);
  border-radius: 8px;
}

.axis-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Seta da marca ao passar o mouse sobre a imagem — via JS (script.js:
   initLocalArrow), mesmo mecanismo de .about-team-arrow em
   quem-somos.css. Três instâncias (uma por eixo), por isso o JS usa
   querySelectorAll em vez do querySelector único dos outros lugares. */
.axis-media-arrow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  transition: transform .3s ease-out;
  will-change: transform;
}

.axis-media-arrow-inner {
  transform: translate(-50%, -50%) rotate(-45deg) scale(0);
  color: var(--orange-accent);
  opacity: 0;
  will-change: transform, opacity;
}

.axis-media-arrow-icon {
  display: block;
  width: clamp(60px, 10vw, 190px);
  height: auto;
}

.axis-media-arrow.is-active .axis-media-arrow-inner {
  animation: local-arrow-appear .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.axis-media-arrow.is-leaving .axis-media-arrow-inner {
  animation: local-arrow-disappear .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (pointer: fine) {
  .axis-media { cursor: none; }
}

.axis-intro {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
}

/* Eixo 2: imagem à esquerda, texto à direita — inverte só as colunas do
   grid, o resto (align-items:start etc.) continua igual. */
.axis--reverse .axis-media {
  grid-column: 1 / span 5;
}

.axis--reverse .axis-intro {
  grid-column: 7 / span 5;
}

/* Abaixo da descrição, dentro de .axis-intro (mesma coluna do
   título/descrição, não ao lado da imagem). */
.axis-services-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.axis-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  color: var(--gray-07);
  margin-top: 80px;
  margin-bottom: 24px;
}

.axis-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: var(--gray-06);
}

/* Lista de serviços: itens empilhados, cada um separado por uma
   divisória fina no topo, no espírito editorial do site. */
.axis-services {
  display: flex;
  flex-direction: column;
}

.service-item {
  padding: 16px 0;
}

.service-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  font-size: 24px;
  line-height: 1.25;
  color: var(--gray-07);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.service-item:hover .service-name,
.service-item:has(:focus-visible) .service-name {
  color: var(--orange);
}

/* Mesmo SVG e mesmas animações do .services-faq-arrow (ver mais abaixo):
   rotaciona ao abrir e muda de cor no hover/foco do item. */
.service-name-arrow {
  flex-shrink: 0;
  width: 14px;
  height: auto;
  color: var(--gray-05);
  transition: transform 0.3s ease, color 0.2s ease;
}

.service-item.is-open .service-name-arrow {
  transform: rotate(180deg);
}

.service-item:hover .service-name-arrow,
.service-item:has(:focus-visible) .service-name-arrow {
  color: var(--orange);
}

/* Fechada por padrão: some via grid-template-rows (0fr -> 1fr) em vez de
   um max-height chutado, então a altura acompanha o texto real de cada
   serviço em qualquer breakpoint. O <span> interno é o que precisa do
   overflow:hidden para o truque funcionar (ver .service-desc > span). */
.service-desc {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  max-width: 620px;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}

.service-desc > span {
  display: block;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--gray-07);
}

.service-item.is-open .service-desc {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 10px;
}

/* ===== Vamos conversar (igual à seção da home, ver .home-talk em
   home.css — classes próprias porque servicos.css não deve depender de
   home.css, mas o resultado visual é o mesmo) ===== */
.services-talk {
  background: var(--gray-07);
}

.services-talk-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: flex-start;
  padding: 120px 0;
  border-bottom: 2px solid var(--gray-06);
}

.services-talk-content {
  grid-column: 1 / span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
}

.services-talk-content h2 {
  font-size: 40px;
  line-height: 1.1;
  color: var(--gray-01);
}

.services-talk-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 32px;
}

.services-talk-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray-01);
}

.services-talk-sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray-05);
  max-width: 578px;
}

.services-talk-whatsapp {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 2px solid var(--gray-06);
  font-size: 20px;
  color: var(--gray-01);
}

.services-talk-whatsapp:hover {
  border-bottom: 2px solid var(--gray-01);
}

.services-talk-whatsapp:hover .seta-svg-link {
  color: var(--gray-01);
  transform: translateX(4px);
}

.services-talk-form {
  grid-column: 7 / span 5;
  min-width: 0;
}

.services-talk-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-talk .form-field { margin-bottom: 0; max-width: 570px; }
.services-talk .form-field label { color: var(--gray-01); }
.services-talk .form-submit { max-width: 570px; }
.services-talk .form-feedback { text-align: left; color: var(--gray-04); }
.services-talk .form-feedback.is-success { color: var(--orange); }

/* ===== Estrutura (etapas do processo, ver quem-somos.html — mesmas
   classes, movida de lá pra cá) ===== */
.about-structure {
  padding: 56px 0 40px;
}

.about-structure-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 938px;
  margin-bottom: 72px;
}

.about-structure-heading h2 { margin: 0; }

.about-structure-heading p {
  font-size: 20px;
  color: var(--gray-07);
}

.about-structure-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  row-gap: 32px;
  margin-bottom: 40px;
}

.about-structure-card {
  grid-column: span 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--white);
  border-radius: 10px;
  padding: 24px;
  min-height: 287px;
  /* Sobrescreve o transition de .reveal (opacity/transform em 0.8s): mesma
     curva, mas transform e box-shadow em 0.4s pra levantar no hover sem
     herdar a cadência lenta da entrada por scroll. Opacity continua 0.8s
     pra não mudar o fade-in. */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-structure-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 32px rgba(35, 36, 40, 0.12);
}

.about-structure-card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  color: var(--gray-07);
}

.about-structure-card-desc {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 20px;
  color: var(--gray-06);
}

.about-structure-number {
  font-family: var(--font-heading);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  font-size: 32px;
  color: var(--gray-03);
  transition: color 0.3s ease;
}

.about-structure-card:hover .about-structure-number { color: var(--orange); }

/* ===== Projetos Desenvolvidos (mesma mecânica do .home-projects em
   home.css — classes próprias porque servicos.css não deve depender de
   home.css, mesma lógica do .services-talk acima). Só 3 cards (ver JS),
   span 4/12 cada — nunca quebra linha, sem precisar de override mobile
   (mesmo comportamento do grid da home, que também não tem um). ===== */
.services-projects {
  padding: 80px 0;
}

.services-projects-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 80px;
}

.services-projects-heading p {
  font-size: 20px;
  color: var(--gray-06);
}

.services-projects-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter) var(--grid-gutter);
  row-gap: 80px;
  margin-bottom: 80px;
}

.services-project-card {
  grid-column: span 4;
  display: block;
  position: relative;
  isolation: isolate;
}

.services-project-card::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0);
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-project-card:hover::before,
.services-project-card:focus-visible::before {
  background: var(--white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

@media (pointer: fine) {
  .services-project-card { cursor: none; }
}

.services-project-card-image {
  aspect-ratio: 421 / 329;
  overflow: hidden;
  margin-bottom: 40px;
}

.services-project-card-image.is-placeholder {
  background: var(--gray-04);
}

.services-project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-project-card:hover .services-project-card-image img,
.services-project-card:focus-visible .services-project-card-image img {
  transform: scale(1.04);
  filter: blur(5px);
}

.services-project-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.services-project-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  font-size: 32px;
  line-height: 1;
  color: var(--gray-07);
}

.services-project-card-excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-07);
}

.services-project-card-tags {
  font-weight: 300;
  font-size: 16px;
  color: var(--gray-06);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.services-project-card:hover .services-project-card-tags,
.services-project-card:focus-visible .services-project-card-tags {
  opacity: 1;
}

/* Mesmo tratamento visual do .section-more-link (home.css), classe
   própria pelo mesmo motivo do bloco acima. */
.services-projects-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 16px;
  padding: 0;
  margin: 0 auto;
  border-bottom: 2px solid var(--gray-04);
  font-size: 20px;
  color: var(--gray-07);
  transition: border-color 0.3s ease;
}

.services-projects-link .seta-svg-link {
  color: var(--gray-04);
}

.services-projects-link:hover {
  border-bottom-color: var(--gray-07);
}

.services-projects-link:hover .seta-svg-link {
  color: var(--gray-07);
  transform: translateX(4px);
}

/* ===== FAQ (mesma mecânica do .home-faq em home.css — classes próprias
   porque servicos.css não deve depender de home.css, mesma lógica do
   .services-talk acima) ===== */
.services-faq {
  background: #f5f5f5;
  padding: 80px 0;
}

.services-faq-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.services-faq-heading {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-faq-heading p {
  font-size: 20px;
  max-width: 538px;
  color: var(--gray-06);
}

.services-faq-list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-faq-item {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0);
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-faq-item:hover,
.services-faq-item:has(:focus-visible) {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.services-faq-item:hover .services-faq-arrow,
.services-faq-item:has(:focus-visible) .services-faq-arrow {
  color: var(--orange);
}

.services-faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 40px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  color: var(--gray-07);
}

.services-faq-question span {
  flex: 1 0 0;
}

.services-faq-arrow {
  flex: none;
  width: 14px;
  height: auto;
  color: var(--gray-04);
  transition: transform 0.3s ease, color 0.2s ease;
}

.services-faq-question[aria-expanded="true"] .services-faq-arrow {
  transform: rotate(180deg);
}

/* Fechada por padrão: some via grid-template-rows (0fr -> 1fr) — a altura
   acompanha o texto real em qualquer tamanho de resposta. O <p> interno
   precisa do overflow:hidden pra clipar durante a animação. */
.services-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 40px;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease, padding-bottom 0.4s ease;
}

.services-faq-item.is-open .services-faq-answer {
  grid-template-rows: 1fr;
  padding-bottom: 24px;
  opacity: 1;
}

.services-faq-answer p {
  overflow: hidden;
  font-size: 16px;
  font-weight: 300;
  color: var(--gray-06);
}

@media (max-width: 1100px) {
  .axis-title,
  .about-structure-heading h2 {
    font-size: 30px;
  }

  .services-hero-title { font-size: 44px; }
}

@media (max-width: 900px) {
  /* Mesma lógica do comentário acima: .page-hero cai pra padding-top:56px
     nesse breakpoint (componentes.css) — aqui é 56 - 30 (altura do eyebrow). */
  .services-hero { padding: 26px 0 56px; }

  .services-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .services-hero-title,
  .services-hero-info { grid-column: 1 / -1; }

  .axis { padding: 64px 0; }

  .axis-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Sem duas colunas, intro e imagem voltam a ocupar a largura cheia da
     coluna única (.axis-services-list não é item do grid, continua dentro
     de .axis-intro). Repete o seletor com .axis--reverse porque essas
     duas classes têm a mesma especificidade da regra normal (2 classes) —
     sem isso, o eixo 2 ficaria preso nas colunas 7-11 mesmo em 1 coluna só. */
  .axis-intro,
  .axis-media,
  .axis--reverse .axis-intro,
  .axis--reverse .axis-media {
    grid-column: 1 / -1;
  }

  .about-structure-heading { margin-bottom: 48px; }
  .about-structure-grid { grid-template-columns: repeat(2, 1fr); }
  .about-structure-card { grid-column: span 1; }

  .services-faq-layout { flex-direction: column; }
}

@media (max-width: 640px) {
  .axis-title,
  .about-structure-heading h2 {
    font-size: 24px;
  }
  .service-name { font-size: 20px; }
  .service-desc > span { font-size: 16px; }

  .about-structure-grid { grid-template-columns: 1fr; }
  .about-structure-card { grid-column: span 1; }
}