/* ==========================================================================
   Jungle — base, layout e componentes
   Todas as medidas vêm do Figma (breakpoint 1200 px). Ver _ref/LAYOUT.md.
   ========================================================================== */

/* ------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  background: var(--bg-pagina);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--c-verde-claro); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular-para-conteudo {
  position: absolute; top: -100%; left: var(--e-4); z-index: calc(var(--z-menu) + 1);
  background: var(--c-verde); color: var(--texto-escuro);
  padding: var(--e-3) var(--e-5); border-radius: var(--raio-pilula); font-weight: 700;
}
.pular-para-conteudo:focus { top: var(--e-4); }

/* ----------------------------- Tipografia -------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 700; }

h1 { font-size: var(--t-h1); line-height: 1.1; }
h2 { font-size: var(--t-h2); line-height: 1.1; }
h3 { font-size: var(--t-h3); line-height: 1.1; }
h4 { font-size: var(--t-h4); line-height: 1.4; }

/* Trechos em verde dentro dos títulos — o padrão do design */
.verde { color: var(--c-verde-claro); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead); line-height: 1.5;
  color: var(--texto-suave); max-width: 46rem;
}

/* Pílula de rótulo acima dos títulos ("Serviços profissionais" etc.) */
.badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 16px;
  border: 1px solid var(--c-verde-claro); border-radius: var(--raio-pilula);
  background: var(--bg-badge);
  font-size: var(--t-chapeu); line-height: 22.4px; letter-spacing: -0.28px;
  color: var(--c-verde-claro);
}
.badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.badge--escuro { border-color: var(--texto-escuro); color: var(--texto-escuro); }

/* ------------------------------- Layout ---------------------------------- */
.container {
  width: 100%; max-width: calc(var(--largura-max) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
}
.secao { padding-block: var(--secao-y); }
.secao--clara { background: var(--c-creme); color: var(--texto-escuro); }
.secao--clara .lead { color: rgba(18, 18, 18, 0.7); }

/* Cabeçalho de seção — sempre centralizado no design.
   Figma: bloco de 176 px (badge 27 + 16 + H2 53 + 16 + lead 64) e 48 px
   até o conteúdo da seção. */
.cabecalho-secao {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
  margin-bottom: 48px;
}
/* Depoimentos e Perguntas aproximam o conteúdo em 32 px */
.cabecalho-secao--junto { margin-bottom: 32px; }
/* Nas seções o lead é 20/32; o 24/36 fica só no hero.
   No design cada seção tem a sua própria largura de texto — daí o
   --lead-w definido por seção, para a quebra de linha bater com o Figma. */
.cabecalho-secao .lead {
  font-size: var(--t-lead-p); line-height: 32px;
  max-width: var(--lead-w, 44rem);
}
/* +4 px de folga: as larguras do Figma são a medida exata do texto, então
   usá-las como max-width deixa a linha no limite e provoca quebra. */
#servicos     { --lead-w: 538px; }
#metodologia  { --lead-w: 570px; }
#trabalhos    { --lead-w: 752px; }
#depoimentos  { --lead-w: 661px; }
#faq          { --lead-w: 682px; }

/* Rótulo pequeno acima de um H1 (páginas internas sem o badge com ícone) */
.olho {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-micro); font-weight: 600; color: var(--c-verde-claro);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: var(--e-3);
}

/* Grades genéricas de conteúdo (cards de trabalho, cards de página interna).
   Sempre repeat(N, 1fr) — nunca auto-fit, que vira 4 colunas acima de 1300px. */
.grid { display: grid; gap: var(--e-5); list-style: none; padding: 0; margin: 0; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* Card genérico de conteúdo (páginas internas: designer, trabalhos) */
.card {
  background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio); padding: var(--e-6);
  display: flex; flex-direction: column; gap: var(--e-3);
}
.card__titulo { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h4); line-height: 1.2; color: var(--texto); }
.card__texto { font-size: var(--t-corpo); line-height: 25.6px; color: var(--texto-suave); }
.card__texto p + p { margin-top: var(--e-4); }

/* Variante centralizada, com ícone acima do título (usada em trios de fatos) */
.card--central { align-items: center; text-align: center; }
.card--central .card__icone { color: var(--c-verde-claro); }
.card--central .card__icone svg { width: 24px; height: 24px; }

/* Caixa que agrupa um conjunto de cards centralizados (ex.: "Sobre a vaga") */
.caixa-suave { background: rgba(0, 0, 0, 0.13); border-radius: var(--raio); padding: var(--e-5); }

/* Título de card com ícone ao lado (usada em "Instruções aos candidatos") */
.card__titulo-com-icone { display: flex; align-items: center; gap: var(--e-3); }
.card__titulo-com-icone svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--c-verde-claro); }

/* Lista com marcador em check — usada em instruções e termos */
.lista-marcada { display: flex; flex-direction: column; gap: var(--e-3); list-style: none; padding: 0; margin: 0; }
.lista-marcada li {
  position: relative; padding-left: 30px;
  font-size: var(--t-corpo); line-height: 25.6px; color: var(--texto-suave);
}
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px;
  background-color: var(--c-verde-claro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.lista-marcada code {
  font-family: var(--f-mono); font-size: 0.9em;
  background: var(--bg-card-claro); padding: 2px 6px; border-radius: 4px;
}

/* -------------------------------- Hero verde (páginas de processo seletivo) */
.hero-processo {
  background: var(--c-verde); color: var(--texto-escuro);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e-5); padding: 160px var(--gutter) 80px;
}
.hero-processo img.logo { height: 44px; }
.hero-processo h1 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h2); line-height: 1.1; color: var(--texto-escuro); }
.hero-processo__moldura {
  position: relative; display: inline-block;
  margin-block: var(--e-5);
  padding: 28px 44px;
  border: 1px solid rgba(18, 18, 18, 0.4);
  transform: rotate(-4deg);
}
.hero-processo__marca {
  font-family: var(--f-display); font-weight: 700; color: var(--texto-escuro);
  text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 6.5rem); line-height: 1; letter-spacing: -0.02em;
}
.hero-processo__canto {
  position: absolute; width: 10px; height: 10px;
  background: var(--c-verde); border: 1px solid rgba(18, 18, 18, 0.6);
}
.hero-processo__canto--tl { top: -5px; left: -5px; }
.hero-processo__canto--tr { top: -5px; right: -5px; }
.hero-processo__canto--bl { bottom: -5px; left: -5px; }
.hero-processo__canto--br { bottom: -5px; right: -5px; }
.hero-processo__cursor {
  position: absolute; top: 3px; left: 4px; width: 20px; height: 20px; max-width: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.hero-processo p.lead { color: rgba(18, 18, 18, 0.75); max-width: 34rem; }
@media (max-width: 620px) { .hero-processo { padding-top: 128px; } }

/* ------------------------------- Botões ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: 13.25px 16px 14px;
  border: 1px solid transparent; border-radius: var(--raio-pilula);
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-ui); line-height: 19.2px;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-saida),
              background-color var(--dur-rapida) var(--ease-padrao),
              border-color var(--dur-rapida) var(--ease-padrao),
              color var(--dur-rapida) var(--ease-padrao);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }

.btn--primario { background: var(--c-verde); color: var(--texto-escuro); }
.btn--primario:hover { background: var(--c-verde-claro); }

.btn--secundario { background: var(--c-creme); color: var(--texto-escuro); }
.btn--secundario:hover { background: var(--c-branco); }

.btn--terciario {
  border-color: var(--c-verde); color: var(--c-verde);
  backdrop-filter: blur(4px);
}
.btn--terciario:hover { background: rgba(52, 229, 123, 0.1); }

.btn--fantasma {
  border-color: var(--texto-fraco); color: var(--texto-fraco);
  backdrop-filter: blur(4px);
}
.btn--fantasma:hover { border-color: var(--c-creme); color: var(--c-creme); }

/* ------------------------- Header (pílula flutuante) --------------------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  padding-block: 8px;
}

.header__pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px;
  background: var(--bg-nav); backdrop-filter: blur(5px);
  border-radius: var(--raio-nav);
}

.logo img { height: 44px; width: auto; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav__link {
  padding: 8px;
  font-size: var(--t-corpo); line-height: 25.6px; letter-spacing: -0.32px;
  color: var(--texto-nav);
  transition: color var(--dur-rapida) var(--ease-padrao);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-creme); }

.menu-toggle {
  display: none; background: none; border: 0; padding: var(--e-2);
  color: var(--c-creme); cursor: pointer;
}

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: var(--z-menu);
    flex-direction: column; justify-content: center;
    background: var(--c-preto); gap: var(--e-5);
    transform: translateY(-100%);
    transition: transform var(--dur-media) var(--ease-saida);
  }
  .nav.is-open { transform: none; }
  .nav__link { font-family: var(--f-display); font-size: var(--t-h4); color: var(--c-creme); }
}

/* ================================ HERO =================================== */
.hero {
  padding-top: 112px; padding-bottom: 0;
  background: var(--bg-hero);
}

.hero__grid {
  display: flex; align-items: center;
  min-height: 487px;
}
/* Medido no site no ar: a coluna da imagem ocupa metade do conteúdo
   (544 px a 1200, 664 px a 1440) e a altura inteira do hero. */
.hero__texto { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; }
.hero h1 { line-height: 1.1; max-width: 12ch; }
.hero .lead {
  margin-top: 16px;   /* Figma: 16 px do H1 ao subtítulo */
  font-size: var(--t-lead); line-height: 1.5;
  max-width: none;    /* preenche a coluna de texto (metade do conteúdo);
                         travar em 519 px é o valor do breakpoint de 1200 */
}
.hero__acoes {
  margin-top: 46px;   /* medido no site no ar (subtítulo → pílula do botão) */
  display: flex; flex-wrap: wrap; gap: 16px;
}

/* Coluna direita: lâmpada + badges flutuantes ----------------------------- */
.hero__visual { position: relative; width: 50%; height: 487px; flex-shrink: 0; }
.hero__lampada {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
}

/* Os 4 cartões que orbitam a lâmpada. Posições em % do bloco 544×487. */
.hero__card {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  padding: 12px;
  background: var(--c-grafite); border-radius: var(--raio-peq);
  font-weight: 600; font-size: var(--t-corpo); line-height: 24px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.hero__card svg { width: 18px; height: 18px; flex-shrink: 0; }
.hero__card--presenca  { top: 19.07%; left: 6.42%; }
.hero__card--verbal    { top: 11.07%; left: 60.33%; }
.hero__card--marketing { top: 64.07%; left: 62.08%; }
.hero__card--visual    { bottom: 96px; left: 57px; }

/* Régua de logos de clientes (dentro do hero) ----------------------------- */
/* Régua de logos: no Figma faz parte do hero (y 623→723 dentro dos 723 px). */
.clientes {
  padding-top: 24px; padding-bottom: 0;
  background: var(--bg-hero);
}
.clientes .marquee { height: 100px; align-items: center; }
.clientes .marquee { --marquee-dur: 40s; }
.logos { display: flex; align-items: center; gap: var(--e-8); }
.logos img {
  height: 32px; width: auto; object-fit: contain;
  opacity: 0.5;
  transition: opacity var(--dur-media) var(--ease-padrao);
}
.logos img:hover { opacity: 1; }

/* ============================== SERVIÇOS ================================= */
.secao--servicos { padding-block: 80px var(--secao-y); }

.grid-servicos {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .grid-servicos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-servicos { grid-template-columns: 1fr; } }
.card-servico {
  display: flex; flex-direction: column; gap: 24px;
  min-height: 298px; padding: 32px;
  background: var(--bg-card); border-radius: var(--raio);
  transition: background-color var(--dur-media) var(--ease-padrao),
              transform var(--dur-media) var(--ease-saida);
}
.card-servico:hover { background: rgba(18, 18, 18, 0.85); transform: translateY(-4px); }

.card-servico__icone {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; flex-shrink: 0;
  background: var(--c-grafite); border-radius: var(--raio-pilula);
  color: var(--c-creme);
}
.card-servico__icone svg { width: 24px; height: 24px; }

.card-servico h3 { font-size: var(--t-h4); line-height: 33.6px; color: var(--c-creme); }
.card-servico p {
  font-size: var(--t-corpo); line-height: 25.6px; letter-spacing: -0.32px;
  color: var(--texto-suave);
}
.card-servico__texto { display: flex; flex-direction: column; gap: 16px; }


/* ==================== METODOLOGIA (timeline por scroll) ==================
   Medidas do Figma (card 758×358). A revelação está em anim.js §3b —
   ver _ref/ANIMACOES.md §6.
   ========================================================================= */
.etapas {
  --linha-altura: 250px;
  --etapa-dur: 400ms;
  --etapa-ease: cubic-bezier(0.44, 0, 0.56, 1);
  display: grid; gap: 64px; margin-top: var(--e-8);
}

.etapa { display: flex; gap: 48px; justify-content: center; align-items: flex-start; }

.etapa__barra {
  display: flex; flex-direction: column; align-items: center;
  gap: 24px; width: 100px; flex-shrink: 0;
}
.etapa__numero {
  font-family: var(--f-display); font-weight: 700;
  font-size: 56px; line-height: 84px; letter-spacing: -0.06em;
  color: var(--c-verde-claro);
  opacity: 0.05;
  transition: opacity var(--etapa-dur) var(--etapa-ease);
}
.etapa__linha {
  width: 3px; height: var(--linha-altura);
  background: rgba(52, 229, 123, 0.05); overflow: hidden;
}
.etapa__preenchimento {
  display: block; width: 100%; height: var(--linha-altura);
  background: var(--c-verde-medio);
  transform: translateY(calc(-1 * var(--linha-altura)));
  transition: transform var(--etapa-dur) var(--etapa-ease);
}

.etapa__conteudo {
  max-width: 610px;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 25px;
  opacity: 0; transform: translateY(32px);
  transition: opacity var(--etapa-dur) var(--etapa-ease),
              transform var(--etapa-dur) var(--etapa-ease);
}
.etapa__rotulo {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--t-corpo); line-height: 25.6px; letter-spacing: -0.32px;
  color: rgba(122, 252, 174, 0.8);
}
.etapa__icone { width: 14px; height: 13px; flex-shrink: 0; }
.etapa__titulo { font-size: var(--t-h4); line-height: 33.6px; color: var(--c-creme); }
.etapa__texto {
  margin-top: 8px;
  font-size: var(--t-lead-p); line-height: 32px; color: var(--texto-suave);
}

.etapa.is-ativa .etapa__numero { opacity: 1; }
.etapa.is-ativa .etapa__preenchimento { transform: translateY(0); }
.etapa.is-ativa .etapa__conteudo { opacity: 1; transform: none; }

html:not(.js) .etapa__numero { opacity: 1; }
html:not(.js) .etapa__preenchimento { transform: translateY(0); }
html:not(.js) .etapa__conteudo { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .etapas { --linha-altura: 500px; }
  .etapa { gap: 24px; }
  .etapa__barra { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .etapa__numero { opacity: 1; }
  .etapa__preenchimento { transform: translateY(0); }
  .etapa__conteudo { opacity: 1; transform: none; }
}

/* ============================= TRABALHOS ================================= */
.slideshow { position: relative; border-radius: var(--raio-peq); overflow: hidden; }
.slideshow__trilho { display: flex; transition: transform 600ms var(--ease-saida); }
.slide {
  position: relative; flex: 0 0 100%;
  min-height: 600px;
  display: flex; align-items: flex-end; gap: 16px;
  padding: 48px 48px 72px;
}
.slide__fundo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.slide__gradiente {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 26%, rgba(18, 18, 18, 0.92) 100%);
}
.slide__texto { position: relative; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.slide__texto h3 { font-size: var(--t-h3); line-height: 1.1; color: var(--c-creme); }
.slide__texto p { font-size: var(--t-lead-p); line-height: 32px; color: var(--texto-suave); }
.slide__acoes { position: relative; display: flex; align-items: flex-end; gap: 16px; flex-shrink: 0; }

.slideshow__seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(0, 0, 0, 0.5); border: 0; border-radius: 40px;
  color: var(--c-creme); cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-padrao);
}
.slideshow__seta:hover { background: rgba(0, 0, 0, 0.75); }
.slideshow__seta--anterior { left: 20px; }
.slideshow__seta--proxima { right: 20px; }
.slideshow__seta svg { width: 40px; height: 40px; }
.slideshow__seta[hidden] { display: none; }

/* ============================ DEPOIMENTOS ================================ */
.secao--depoimentos { background: var(--bg-depoimentos); }
.grid-depoimentos {
  display: grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .grid-depoimentos { grid-template-columns: 1fr; } }
.card-depoimento {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: 386px; padding: 32px;
  background: var(--bg-card-claro); border-radius: var(--raio);
}
.card-depoimento__topo { display: flex; flex-direction: column; gap: 32px; }

.autor {
  display: flex; align-items: center; gap: 8px;
  padding: 4px;
  background: var(--bg-chip); border-radius: var(--raio-pilula);
}
.autor img {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: var(--raio-pilula); object-fit: cover;
  border: 1px solid rgba(251, 156, 76, 0.5);
}
.autor__nome {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-ui); line-height: 19.2px; color: var(--c-branco);
}
.autor__empresa {
  font-size: var(--t-ui); line-height: 25.6px; letter-spacing: -0.32px;
  color: var(--texto-suave);
}

.card-depoimento blockquote p {
  font-size: var(--t-depoimento); line-height: 28.8px; letter-spacing: -0.36px;
  color: var(--texto-suave);
}
.card-depoimento blockquote p + p { margin-top: 7.4px; }

.estrelas { display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--c-laranja); }
.estrelas svg { width: 14px; height: 13px; }

/* ============================== PERGUNTAS ================================ */
.secao--perguntas { background: var(--bg-perguntas); }
.caixa-faq h2 { font-size: var(--t-h3); line-height: 1.1; }
.caixa-faq {
  background: var(--c-grafite); border-radius: var(--raio);
  padding: 64px 16px 16px;
}
/* Fora da seção --perguntas (fundo cinza), o cinza-grafite não contrasta com
   a página — usa o mesmo escurecido dos cards dessa página. */
#faq-designer .caixa-faq { background: var(--bg-card); }
.acordeao { display: flex; flex-direction: column; gap: 10px; }
.acordeao__item {
  background: var(--bg-card-claro); border-radius: var(--raio);
  overflow: hidden;
}
.acordeao__pergunta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 14px 16px 18px;
  font-family: var(--f-display); font-weight: 300;
  font-size: var(--t-corpo); line-height: 19.2px; letter-spacing: -0.16px;
  color: var(--texto-faq);
  text-align: left; cursor: pointer; list-style: none;
}
.acordeao__pergunta::-webkit-details-marker { display: none; }
.acordeao__pergunta:hover { color: var(--c-branco); }

.acordeao__icone {
  position: relative; flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--bg-chip); border-radius: 100px;
}
/* O "+" é feito de duas barras, como no design */
.acordeao__icone::before, .acordeao__icone::after {
  content: ""; position: absolute; background: var(--c-verde-claro);
  transition: transform var(--dur-media) var(--ease-saida), opacity var(--dur-media) var(--ease-padrao);
}
.acordeao__icone::before { left: 8px; top: 13px; width: 12px; height: 2px; }
.acordeao__icone::after { left: 13px; top: 8px; width: 2px; height: 12px; }
.acordeao__item[open] .acordeao__icone::after { transform: rotate(90deg); opacity: 0; }

.acordeao__resposta { overflow: hidden; }
.acordeao__resposta > p {
  padding: 0 18px 18px;
  font-size: var(--t-corpo); line-height: 25.6px; letter-spacing: -0.32px;
  color: var(--texto-suave);
}

/* ================================= CTA =================================== */
.secao--cta { background: var(--bg-cta); }
.cta-card {
  display: flex; align-items: center; gap: 10px;
  padding-left: 64px;
  border-radius: var(--raio); overflow: hidden;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(171, 171, 171, 0.05));
}
.cta-card__texto {
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
  padding-block: var(--e-6);
}
.cta-card__texto h2 { font-size: var(--t-h3); line-height: 1.1; color: var(--c-creme); }
.cta-card__texto p {
  font-size: var(--t-lead-p); line-height: 32px; color: var(--texto-suave); max-width: 386px;
}
.cta-card__texto .btn { align-self: flex-start; }
.cta-card__imagem { flex-shrink: 0; width: 373px; aspect-ratio: 1.0168 / 1; object-fit: cover; }

/* ================================ CONTATO ================================= */
.secao--contato,
.secao--trabalhos { padding-top: 112px; }
@media (max-width: 600px) {
  .secao--contato,
  .secao--trabalhos { padding-top: 96px; }
}

.contato__cabecalho {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-4);
  max-width: 560px; margin-inline: auto; margin-bottom: var(--e-7);
}
.contato__cabecalho h1 { line-height: 1.1; }

.contato__whatsapp { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.contato__whatsapp p { font-size: var(--t-corpo); color: var(--texto-suave); }
.contato__whatsapp a { color: var(--c-verde-claro); }
.contato__whatsapp a:hover { text-decoration: underline; }

.formulario {
  max-width: 560px; margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--e-5);
  padding: var(--e-6); border-radius: var(--raio);
  background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 620px) { .formulario { padding: var(--e-5); } }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label,
.campo legend {
  font-size: var(--t-micro); color: var(--texto-suave); padding: 0;
}
fieldset.campo { border: 0; margin: 0; min-width: 0; }

.campo input,
.campo textarea {
  width: 100%; padding: 11px 14px; border-radius: var(--raio-peq);
  background: var(--bg-card-claro); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--c-creme); font-family: var(--f-corpo); font-size: var(--t-corpo);
  transition: border-color var(--dur-rapida) var(--ease-padrao);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-fraco); }
.campo input:focus,
.campo textarea:focus { outline: none; border-color: var(--c-verde); }
.campo textarea { resize: vertical; min-height: 90px; }

.checkboxes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--e-5);
}
@media (max-width: 480px) { .checkboxes { grid-template-columns: 1fr; } }
.checkboxes label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-corpo); color: var(--texto-suave); cursor: pointer;
}
.checkboxes label:hover { color: var(--c-creme); }
.checkboxes input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--c-verde); cursor: pointer;
}

.formulario .btn { width: 100%; justify-content: center; }
.formulario__estado { font-size: var(--t-micro); color: var(--texto-suave); min-height: 1em; }

/* Modal de confirmação — aparece ao enviar o formulário, sem sair da página */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-6);
  background: rgba(18, 18, 18, 0.85); backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal__caixa {
  position: relative; max-width: 420px; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-4);
  background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio); padding: var(--e-7) var(--e-6);
}
.modal__icone {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 229, 123, 0.15); color: var(--c-verde-claro);
}
.modal__icone svg { width: 24px; height: 24px; }
.modal__caixa h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); color: var(--texto); }
.modal__caixa p { color: var(--texto-suave); font-size: var(--t-corpo); line-height: 25.6px; }
.modal__fechar {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 32px;
  background: rgba(255, 255, 255, 0.08); color: var(--c-creme); cursor: pointer;
}
.modal__fechar:hover { background: rgba(255, 255, 255, 0.16); }
.modal__fechar svg { width: 16px; height: 16px; }

/* ================================ CASE (POST) ============================ */
.post__cabecalho {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e-4); max-width: 640px; margin-inline: auto; margin-top: var(--e-6);
}
.post__data { font-size: var(--t-corpo); color: var(--texto-fraco); }
.post__cabecalho h1 {
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-h2);
  line-height: 1.1; color: var(--texto);
}
.post__cabecalho .lead { text-align: center; font-size: var(--t-lead-p); line-height: 32px; }

.post__capa {
  margin-top: var(--e-7); border-radius: var(--raio); overflow: hidden;
}
.post__capa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.galeria {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5);
  margin-top: var(--e-7); padding: 0; border: 0;
}
@media (max-width: 620px) { .galeria { grid-template-columns: 1fr; } }
.galeria__item {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--raio); overflow: hidden;
  background: var(--bg-card); border: 0; padding: 0; cursor: pointer;
}
.galeria__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-media) var(--ease-padrao);
}
.galeria__item:hover img { transform: scale(1.05); }

.post__texto {
  max-width: 46rem; margin-inline: auto; margin-top: var(--e-8);
  display: flex; flex-direction: column; gap: var(--e-5);
  font-size: var(--t-lead-p); line-height: 32px; color: var(--texto-suave);
}
.post__texto h2,
.post__texto h3 {
  font-size: var(--t-lead-p); line-height: 32px; font-weight: 700; color: var(--texto);
}

.post__rodape { max-width: 46rem; margin-inline: auto; margin-top: var(--e-7); }
.post__rodape p + p { margin-top: var(--e-2); }

/* --------------------------------- Lightbox ------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-6);
  background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox__figura { display: flex; flex-direction: column; gap: var(--e-3); max-width: 1100px; max-height: 100%; }
.lightbox__imagem {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--raio-peq); object-fit: contain; margin-inline: auto;
}
.lightbox__legenda { text-align: center; color: var(--texto-suave); font-size: var(--t-corpo); }
.lightbox__fechar {
  position: absolute; top: 20px; right: 20px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 40px;
  background: rgba(255, 255, 255, 0.1); color: var(--c-creme); cursor: pointer;
}
.lightbox__fechar:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__fechar svg { width: 18px; height: 18px; }
.lightbox__seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 48px;
  background: rgba(255, 255, 255, 0.1); color: var(--c-creme); cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-padrao);
}
.lightbox__seta:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__seta svg { width: 40px; height: 40px; }
.lightbox__seta--anterior { left: 20px; }
.lightbox__seta--proxima { right: 20px; }
@media (max-width: 620px) {
  .lightbox__seta { width: 40px; height: 40px; }
  .lightbox__seta--anterior { left: 8px; }
  .lightbox__seta--proxima { right: 8px; }
}

/* ============================== TRABALHOS (listagem) ====================== */
.grid-trabalhos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-6);
  list-style: none; padding: 0; margin: 0;
}
@media (max-width: 900px) { .grid-trabalhos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-trabalhos { grid-template-columns: 1fr; } }
.trabalho {
  background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio); padding: var(--e-5);
}
.trabalho a { display: flex; flex-direction: column; gap: var(--e-4); }
.trabalho img {
  width: 100%; aspect-ratio: 1.0168 / 1; object-fit: cover;
  border-radius: var(--raio-peq);
}
.trabalho__titulo { font-size: var(--t-h4); line-height: 33.6px; color: var(--c-creme); }

/* ================================ RODAPÉ ================================= */
.rodape { padding-block: 48px; }
.rodape__conteudo {
  display: flex; flex-direction: column; align-items: center;
  gap: 15.2px; text-align: center;
}
.rodape__logo img { height: 40px; width: auto; }
.rodape__endereco {
  font-style: normal;   /* <address> vem em itálico por padrão */
  font-size: var(--t-micro); line-height: 22.4px; letter-spacing: -0.28px;
  color: var(--texto-rodape);
}
.rodape__copy { font-size: var(--t-nano); line-height: 14.4px; color: var(--texto-fraco); }
.sociais { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sociais a {
  display: block; width: 24px; height: 24px; color: var(--texto-rodape);
  transition: color var(--dur-rapida) var(--ease-padrao);
}
.sociais a:hover { color: var(--c-verde-claro); }
.sociais svg { width: 24px; height: 24px; }

/* ------------------------------ Marquee ---------------------------------- */
.marquee {
  /* A duração é calculada em anim.js a partir da largura da trilha, para a
     velocidade ficar constante (60 px/s, medido no site no ar). */
  --marquee-dur: 30s;
  display: flex; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__trilha {
  display: flex; flex-shrink: 0; align-items: center;
  gap: var(--e-8); padding-right: var(--e-8);
  animation: marquee var(--marquee-dur) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__trilha { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ------------------------ Animações de entrada --------------------------- */
.js [data-anim] {
  opacity: 0.001; transform: translateY(150px) scale(1.1);
  will-change: transform, opacity;
}
.js [data-anim].is-visivel {
  opacity: 1; transform: none;
  transition: opacity var(--dur-lenta) var(--spring, var(--ease-saida)),
              transform var(--dur-lenta) var(--spring, var(--ease-saida));
  transition-delay: var(--anim-delay, 0ms);
}
.js [data-anim="subir"] { transform: translateY(40px) scale(1); }
.js [data-anim="fade"] { transform: none; }

/* ------------------------------ Responsivo ------------------------------- */
@media (max-width: 1000px) {
  .hero__grid { flex-direction: column; align-items: flex-start; }
  .hero__visual { width: 100%; max-width: 544px; height: 420px; margin-inline: auto; }
  .hero h1, .hero .lead { max-width: none; }
  .cta-card { flex-direction: column; padding-left: 0; }
  .cta-card__texto { padding: var(--e-6); }
  .cta-card__imagem { width: 100%; aspect-ratio: 16 / 9; }
  .slide { flex-direction: column; align-items: flex-start; min-height: 480px; padding: 32px 24px 40px; }
  .caixa-faq h2 { font-size: var(--t-h3); line-height: 1.1; }
.caixa-faq { padding: 32px 12px 12px; }
}

@media (max-width: 600px) {
  .hero { padding-top: 96px; }
  .hero__visual { height: 380px; }
  .hero__card { font-size: var(--t-micro); padding: 8px; }
  /* A 390 px o cartão de marketing (62 % da esquerda + 159 px de largura)
     passava 7 px da tela e criava rolagem horizontal. Ancorado à direita.
     No site no ar os 4 cartões nem aparecem abaixo de 810 px. */
  .hero__card--marketing { left: auto; right: 0; }
  .slide { min-height: 420px; }
  .slide__acoes { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anim] { opacity: 1 !important; transform: none !important; }
  .marquee__trilha { animation: none; }
  .slideshow__trilho { transition: none; }
}