/*
 * Redesign da LP (REQ-016+) — estilos do novo layout da agência.
 *
 * A migração visual acontece seção por seção: cada seção redesenhada tem seu
 * bloco antigo removido do site.css e recriado aqui com os tokens --rd-* do
 * tokens.css. Ao final da migração este arquivo passa a ser o CSS único do
 * site público.
 *
 * Referência: Figma LP-Positivo-Tecnologia, node 2:13 (design de 2560px,
 * lido como 2× um layout de 1280px).
 */

/* ===========================================================================
   Botão pílula — CTA outline do novo tema escuro
   =========================================================================== */

.botao-pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 2.25rem;
  border: 2px solid var(--rd-acento);
  border-radius: 999px;
  background: transparent;
  color: var(--color-brand-white);
  font-size: 0.9375rem;
  font-weight: 700;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out;
}

.botao-pilula:hover {
  background: var(--rd-acento);
  color: var(--rd-preto);
}

.botao-pilula:focus-visible {
  outline: 2px solid var(--rd-acento);
  outline-offset: 3px;
}

/* ===========================================================================
   Cabeçalho — barra clara com a marca e a presença global (sem navegação)
   =========================================================================== */

.cabecalho {
  background: var(--rd-cinza-claro);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 5.75rem;
}

.cabecalho__marca {
  display: block;
  flex-shrink: 0;
}

.cabecalho__logo {
  height: 2.25rem;
  width: auto;
}

.cabecalho__info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cabecalho__tagline {
  color: var(--rd-preto);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
}

.cabecalho__globos {
  height: 1.75rem;
  width: auto;
}

/*
 * No mobile os três elementos continuam na mesma linha: a frase cabe
 * apertando os espaçamentos e reduzindo um pouco a fonte e os globos.
 * (Antes ela era escondida por falta de espaço.)
 */
@media (max-width: 639px) {
  .cabecalho__barra {
    height: 4.5rem;
    gap: 1rem;
  }

  .cabecalho__logo {
    height: 2rem;
  }

  .cabecalho__info {
    gap: 0.75rem;
  }

  .cabecalho__tagline {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .cabecalho__globos {
    height: 1.5rem;
  }
}

/* ===========================================================================
   Hero — tema escuro, headline em dois tons e foto full-bleed à direita
   =========================================================================== */

.hero {
  position: relative;
  background: var(--rd-preto);
  color: var(--color-brand-white);
}

.hero__conteudo {
  padding-block: 3rem 3.5rem;
}

.hero__titulo {
  font-size: clamp(2.25rem, 1.2rem + 3.3vw, 3rem);
  font-weight: 400;
  line-height: 1.22;
}

.hero__titulo-cinza {
  color: var(--rd-cinza-texto);
}

.hero__apoio {
  margin-top: 1.75rem;
  max-width: 27rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.hero__destaque {
  font-weight: 700;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero__midia {
  margin-top: 2.5rem;
}

.hero__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1023px) {
  /* Sem as quebras fixas do desktop, a headline flui naturalmente */
  .hero__titulo br {
    display: none;
  }

  .hero__midia .hero__imagem {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: 35.125rem;
  }

  .hero__conteudo {
    max-width: 48%;
    padding-block: 4.25rem 4rem;
  }

  /* Foto colada no topo e na borda direita da viewport (cantos retos) */
  .hero__midia {
    position: absolute;
    inset: 0 0 0 auto;
    width: 51.35%;
    margin-top: 0;
  }
}

/* ===========================================================================
   Tag pill — etiqueta de seção do novo tema (POR QUE..., JORNADA etc.)
   =========================================================================== */

.tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--rd-acento);
  color: var(--rd-preto);
  padding: 0.625rem 1.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===========================================================================
   Barra de números — 5 indicadores sobre o fundo escuro contínuo
   =========================================================================== */

.numeros {
  background: var(--rd-preto);
  color: var(--color-brand-white);
}

.numeros__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2.25rem;
  padding-block: 3.5rem;
}

.numeros__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.numeros__icone {
  flex-shrink: 0;
  width: 2.75rem;
  height: 3.125rem;
  object-fit: contain;
}

.numeros__titulo {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.numeros__descricao {
  margin-top: 0.375rem;
  font-size: 0.84375rem;
  line-height: 1.45;
}

@media (max-width: 559px) {
  .numeros__lista {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .numeros__lista {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-block: 4.25rem;
  }
}

/* ===========================================================================
   Filme — thumbnail com play à esquerda, headline em dois tons à direita
   =========================================================================== */

.filme {
  background: var(--rd-preto);
  color: var(--color-brand-white);
}

.filme__container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-block: 2rem 4.5rem;
}

.filme__thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--rd-preto);
}

.filme__imagem {
  width: 100%;
  aspect-ratio: 15 / 8;
  object-fit: cover;
}

/*
 * O play fica a 37% da altura, não no centro (REQ-035). A arte escolhida
 * pelo cliente é o cartão de encerramento do filme, e ela já tem elementos
 * centralizados: a logo ocupa de 11% a 22% da altura e a frase "Inovação
 * que move o seu mundo", de 51% a 54% — medido na própria imagem. No centro
 * exato o botão cobria a palavra "move"; a 33%, cobria o "TECNOLOGIA" da
 * logo. Em 37% ele fica dentro da faixa livre (23%-50%) com folga nos dois
 * lados. Se a arte mudar, refaça a medição.
 */
.filme__play {
  position: absolute;
  top: 37%;
  left: 50%;
  /*
   * Tamanho em proporção da imagem, não em rem: a faixa livre da arte tem
   * 27 pontos percentuais de altura, e um valor fixo estourava esse espaço
   * nas telas pequenas, onde a imagem encolhe mas o botão não. Com 11% da
   * largura (≈21% da altura, porque a caixa é 15/8), ele cabe na faixa em
   * qualquer viewport.
   */
  width: 11%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform 150ms ease-out;
}

.filme__thumb:hover .filme__play,
.filme__thumb:focus-visible .filme__play {
  transform: translate(-50%, -50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .filme__thumb:hover .filme__play,
  .filme__thumb:focus-visible .filme__play {
    transform: translate(-50%, -50%);
  }
}

.filme__thumb:focus-visible {
  outline: 2px solid var(--rd-acento);
  outline-offset: 3px;
}

.filme__titulo {
  font-size: clamp(2.25rem, 1.2rem + 3.3vw, 3rem);
  font-weight: 400;
  line-height: 1.22;
}

.filme__titulo-cinza {
  color: var(--rd-cinza-texto);
}

.filme__texto {
  margin-top: 1.75rem;
  max-width: 24rem;
  display: grid;
  gap: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .filme__container {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }

  .filme__thumb {
    width: 58%;
    flex-shrink: 0;
  }

  /* No desktop o botão já cresce junto com a imagem — ver .filme__play */
}

/* ===========================================================================
   Por que Positivo Tecnologia — painel claro arredondado com 3 cards
   =========================================================================== */

.porque {
  /* O escuro por trás é o que aparece nos cantos arredondados do painel */
  background: var(--rd-preto);
}

.porque__painel {
  background: var(--rd-cinza-claro);
  border-radius: 2.75rem 2.75rem 0 0;
  color: var(--rd-preto);
  padding-block: 4rem 5rem;
}

.porque__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.porque__globos {
  height: 1.75rem;
  width: auto;
}

.porque__titulo {
  margin-top: 1.75rem;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.25;
}

.porque__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.cartao-solucao {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--rd-cinza-borda);
  border-radius: 1.5rem;
  padding: 0.9375rem 0.9375rem 1.75rem;
  text-align: center;
}

.cartao-solucao__foto {
  width: 100%;
  aspect-ratio: 626 / 363;
  object-fit: cover;
  border-radius: 1rem;
}

.cartao-solucao__titulo {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cartao-solucao__descricao {
  margin-top: 0.75rem;
  max-width: 26rem;
  font-size: 0.84375rem;
  line-height: 1.5;
}

/* Linha de apoio abaixo dos cards (REQ-021) */
.porque__nota {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9375rem;
}

.botao-saiba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  border-radius: 999px;
  background: var(--rd-verde-botao);
  color: var(--color-brand-white);
  padding: 0.5625rem 1.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 150ms ease-out;
}

/* Nos cards, o botão ancora na base — os três ficam alinhados entre cards */
.cartao-solucao .botao-saiba {
  margin-top: auto;
}

.botao-saiba:hover {
  background: #33685c;
}

.botao-saiba:focus-visible {
  outline: 2px solid var(--rd-verde-botao);
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  .porque__titulo br {
    display: none;
  }
}

@media (min-width: 900px) {
  .porque__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.125rem;
  }
}

/* ===========================================================================
   Jornada — painel escuro arredondado com 6 etapas + "Onde estratégia"
   =========================================================================== */

.jornada {
  /* O claro por trás é o que aparece nos cantos arredondados do painel */
  background: var(--rd-cinza-claro);
}

.jornada__painel {
  background: var(--rd-preto);
  border-radius: 2.75rem 2.75rem 0 0;
  color: var(--color-brand-white);
  padding-block: 5rem 5.5rem;
}

.jornada__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 2.5rem;
}

.jornada__apoio {
  font-size: 0.75rem;
  line-height: 1.5;
  padding-top: 0.5rem;
}

.jornada__globos {
  height: 1.75rem;
  width: auto;
  margin-left: auto;
}

.jornada__titulo {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.25;
}

.jornada__etapas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}

.etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.etapa__circulo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border: 2px solid var(--rd-acento);
  border-radius: 50%;
  /* Fundo opaco: mascara a borda do card que passa por trás do círculo */
  background: var(--rd-preto);
}

.etapa__icone {
  width: 3rem;
  height: 3.25rem;
  object-fit: contain;
}

.etapa__card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin-top: -3.25rem;
  padding: 4.25rem 0.875rem 1.5rem;
  border: 1px solid rgb(89 217 192 / 0.4);
  border-radius: 1rem;
  text-align: center;
}

.etapa__titulo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
}

.etapa__descricao {
  margin-top: 1rem;
  font-size: 0.78125rem;
  line-height: 1.5;
}

/* Seta entre círculos — só no layout de 6 colunas */
.etapa__seta {
  display: none;
  position: absolute;
  top: 2.625rem;
  right: calc(-0.5rem - 0.625rem);
  width: 1.25rem;
  height: 1.25rem;
}

.jornada__divisor {
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.35);
  margin-block: 4.5rem 0;
}

.jornada__onde-titulo {
  margin-top: 4.5rem;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.25;
}

/* Corpo e entrelinha maiores a pedido do cliente (REQ-021) */
.jornada__onde-texto {
  margin-top: 2rem;
  max-width: 48rem;
  display: grid;
  gap: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* ===========================================================================
   Diferenciais de mercado (REQ-021) — fecha o painel escuro da jornada
   =========================================================================== */

.diferenciais-mercado {
  margin-top: 4rem;
}

.diferenciais-mercado__chamada {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.diferenciais-mercado__apoio {
  margin-top: 0.5rem;
  max-width: 48rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.diferenciais-mercado__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 1.5rem;
  margin-top: 2.5rem;
}

.diferenciais-mercado__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 500;
}

.diferenciais-mercado__icone {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.5rem;
  object-fit: contain;
}

@media (min-width: 640px) {
  .diferenciais-mercado__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .diferenciais-mercado__lista {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
  }

  /* Em 5 colunas o rótulo quebra em várias linhas: ícone acima do texto */
  .diferenciais-mercado__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .jornada__etapas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
}

@media (max-width: 1023px) {
  .jornada__titulo br,
  .jornada__onde-titulo br {
    display: none;
  }

  .jornada__apoio br {
    display: none;
  }
}

@media (min-width: 1024px) {
  .jornada__etapas {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 3.5rem;
  }

  .etapa__seta {
    display: block;
  }

  .etapa:last-child .etapa__seta {
    display: none;
  }
}

/* ===========================================================================
   Ecossistema — barra com a marca e 6 frentes sobre a textura de chevrons
   =========================================================================== */

/*
 * A textura tem perspectiva: escurece para cima/esquerda e os chevrons
 * crescem em direção ao canto inferior direito. No Figma a seção mostra a
 * faixa de ~23% a ~79% da altura da arte — que, com `cover`, é justamente
 * o centro. Ancorar no topo deixava só a parte escura à vista; no rodapé,
 * os chevrons ficavam grandes demais.
 */
.ecossistema {
  background: var(--rd-preto) url("../../images/textura-ecossistema-2560.webp") center center / cover no-repeat;
  color: var(--color-brand-white);
  padding-block: 0 3.5rem;
}

.ecossistema__divisor {
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.35);
  margin: 0;
}

.ecossistema__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 2.5rem;
  margin-top: 4.25rem;
}

.ecossistema__apoio {
  font-size: 0.75rem;
  line-height: 1.5;
  padding-top: 0.5rem;
}

.ecossistema__titulo {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.25;
}

.ecossistema__barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  padding: 0.5rem;
  border: 1px solid rgb(89 217 192 / 0.5);
  border-radius: 1.5rem;
  background: var(--rd-preto);
}

.ecossistema__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 1.125rem;
  background: var(--rd-acento);
}

.ecossistema__logo {
  width: 8.5rem;
  height: auto;
}

.ecossistema__itens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 0.5rem;
  padding: 0.75rem 0.25rem;
}

.ecossistema__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-align: center;
}

.ecossistema__icone {
  height: 2.25rem;
  width: auto;
}

.ecossistema__label {
  font-size: 0.6875rem;
  line-height: 1.35;
  font-weight: 500;
}

/* O respiro grande antes dos globos é do design: é onde a textura aparece */
.ecossistema__globos {
  display: block;
  height: 2.25rem;
  width: auto;
  margin: 12rem auto 0;
}

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

@media (max-width: 1023px) {
  .ecossistema__titulo br {
    display: none;
  }
}

@media (min-width: 900px) {
  .ecossistema__barra {
    grid-template-columns: 14.75rem minmax(0, 1fr);
    gap: 0;
  }

  .ecossistema__itens {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding: 0.875rem 0;
  }

  /* Divisores verticais entre as frentes */
  .ecossistema__item + .ecossistema__item {
    border-left: 1px solid rgb(89 217 192 / 0.3);
  }

  .ecossistema__item {
    padding-inline: 0.5rem;
    justify-content: center;
  }
}

/* Variação escura da tag — usada nos painéis claros do fim da página */
.tag-pill--escura {
  background: var(--rd-preto);
  color: var(--rd-acento);
}

/* ===========================================================================
   FAQ — painel claro arredondado com acordeão nativo (details/summary)
   =========================================================================== */

.faq {
  /* O escuro por trás é o que aparece nos cantos arredondados do painel */
  background: var(--rd-preto);
}

.faq__painel {
  background: var(--rd-cinza-claro);
  border-radius: 2.75rem 2.75rem 0 0;
  color: var(--rd-preto);
  padding-block: 4.5rem 0;
}

.faq__titulo {
  margin-top: 1.75rem;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.25;
}

.faq__lista {
  margin-top: 2.5rem;
}

.faq__item {
  border: 1px solid rgb(19 19 18 / 0.8);
}

.faq__item + .faq__item {
  margin-top: -1px;
}

.faq__item:first-child {
  border-radius: 0.625rem 0.625rem 0 0;
}

.faq__item:last-child {
  border-radius: 0 0 0.625rem 0.625rem;
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}

.faq__pergunta::-webkit-details-marker {
  display: none;
}

.faq__pergunta:focus-visible {
  outline: 2px solid var(--rd-preto);
  outline-offset: -4px;
  border-radius: inherit;
}

/* Ícone +/− em círculo, desenhado por pseudo-elementos */
.faq__icone {
  position: relative;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--rd-preto);
  border-radius: 50%;
}

.faq__icone::before,
.faq__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: var(--rd-preto);
}

.faq__icone::before {
  width: 0.625rem;
  height: 1px;
}

.faq__icone::after {
  width: 1px;
  height: 0.625rem;
}

.faq__item[open] .faq__icone::after {
  display: none;
}

.faq__resposta {
  padding: 0.25rem 1.25rem 1.25rem;
  max-width: 56rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ===========================================================================
   Fale Conosco — superfície clara contínua ao FAQ, foto + cartão do form
   =========================================================================== */

/*
 * O respiro antes do divisor é padding da seção, não margem do <hr>: com
 * padding-top zero a margem do filho colapsaria para fora da seção e abriria
 * uma faixa branca entre o painel do FAQ e este (as duas superfícies claras
 * precisam ser contínuas).
 */
/* Painel claro arredondado, como os demais: o escuro da seção é o que
   aparece nos cantos, revelando a seção que ficou atrás. */
.contato {
  background: var(--rd-preto);
}

.contato__painel {
  background: var(--rd-cinza-claro);
  border-radius: 2.75rem 2.75rem 0 0;
  color: var(--rd-preto);
  padding-block: 4rem 4.5rem;
}

.contato__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 2.5rem;
}

.contato__apoio {
  font-size: 0.75rem;
  line-height: 1.5;
  padding-top: 0.5rem;
}

/*
 * No mobile vale a ordem do documento: headline → formulário → marcas.
 * O formulário vem logo depois da chamada, sem obrigar o visitante a
 * rolar por toda a lista de canais para encontrá-lo.
 */
.contato__colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 1.5rem;
}

.contato__titulo {
  font-size: clamp(2rem, 1.1rem + 2.9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.25;
}

/* Canais de venda online (REQ-021) — no lugar da foto do notebook */
/* O respiro acima vem do row-gap do grid — não some aqui, senão dobra */
.canais-venda {
  max-width: 30rem;
}

.canais-venda__titulo {
  font-size: 1.125rem;
  font-weight: 700;
}

.canais-venda__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  margin-top: 1.75rem;
}

/*
 * Alinhado pelo TOPO, não pelo centro (REQ-032): as artes têm alturas
 * diferentes (duas ou três linhas de texto sob o letreiro) e, centralizadas,
 * os letreiros POSITIVO de uma mesma linha saíam em alturas diferentes. Pelo
 * topo eles caem todos na mesma altura, que é o alinhamento pedido.
 * O `min-height` continua garantindo a área de toque de 44px.
 */
.canais-venda__item {
  display: flex;
  align-items: flex-start;
  min-height: 2.75rem;
  transition: opacity 150ms ease-out;
}

/*
 * O tamanho de exibição vem dos atributos width/height de cada <img>,
 * calculados na view para igualar a largura do letreiro POSITIVO entre as
 * artes (REQ-032). Aqui só garantimos que a arte encolha junto com a coluna
 * sem distorcer — limitar por altura, como era antes, é justamente o que
 * deixava os letreiros de tamanhos diferentes.
 */
.canais-venda__item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.canais-venda__item:hover {
  opacity: 0.65;
}

.canais-venda__item:focus-visible {
  outline: 2px solid var(--rd-preto);
  outline-offset: 4px;
}

/* Respiro maior: a assinatura não pode ser lida como mais um canal de venda */
/*
 * Assinatura da marca: centralizada na largura da seção, separada dos dois
 * blocos por uma linha (REQ-032). Fica fora do grid das colunas.
 */
.contato__assinatura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 3.75rem;
  border-top: 1px solid rgb(19 19 18 / 0.25);
  padding-top: 3rem;
}

.contato__assinatura-logo {
  width: 8.125rem;
  height: auto;
}

.contato__assinatura-tagline {
  font-size: 0.75rem;
  line-height: 1.45;
}

.contato__assinatura-globos {
  height: 1.75rem;
  width: auto;
}

.contato__cartao {
  border: 1px solid rgb(19 19 18 / 0.8);
  border-radius: 1rem;
  padding: 1.5rem;
}

/* ===========================================================================
   Formulário do RD Station (REQ-025)
   O RD monta os campos por JavaScript com as classes `bricks-form__*` e
   injeta ~30 KB de CSS próprio. Aqui recriamos o visual da agência sobre
   esse markup: pílulas verdes, rótulos só para leitor de tela e botão
   outline. O RD estiliza por IDs gerados a cada carga (#rd-form-xxxx), com
   especificidade 1,1,0 — por isso prefixamos com #contato .contato__cartao
   (1,2,0), que ganha sem precisar de !important.
   =========================================================================== */

/* zera molduras e fundos que o RD traz */
#contato .contato__cartao .bricks--component,
#contato .contato__cartao .bricks--section,
#contato .contato__cartao .bricks--row,
#contato .contato__cartao .bricks--column,
#contato .contato__cartao .bricks-form {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
  width: auto;
  font-family: var(--font-sans);
}

/* mesma grade de duas colunas dos campos originais */
#contato .contato__cartao .bricks-form__fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
  padding: 0;
  border: 0;
  margin: 0;
}

@media (min-width: 768px) {
  #contato .contato__cartao .bricks-form__fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* o envio ocupa a linha inteira, abaixo dos seis campos */
  #contato .contato__cartao .bricks-form__submit {
    grid-column: 1 / -1;
  }

  /*
   * Campo de texto longo também ocupa a linha inteira (REQ-037). A mira é o
   * `textarea`, não o nome do campo: vale para qualquer campo de mensagem
   * que o cliente crie no painel, e não quebra se ele renomear o
   * `cf_mensagem_institucional`. Onde `:has()` não existir, o campo
   * simplesmente fica em meia largura — degrada sem quebrar.
   */
  #contato .contato__cartao .bricks-form__field:has(textarea) {
    grid-column: 1 / -1;
  }
}

#contato .contato__cartao .bricks-form__field {
  margin: 0;
  padding: 0;
  width: auto;
}

/*
 * O rótulo existe para leitor de tela, mas o design usa placeholder —
 * mesmo recurso do .sr-only, sem escondê-lo com display:none (que o
 * tiraria da leitura).
 */
#contato .contato__cartao .bricks-form__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* o campo-pílula do design */
#contato .contato__cartao .bricks-form__input,
#contato .contato__cartao input.bricks-form__input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--rd-verde-botao);
  color: var(--color-brand-white);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: none;
}

/*
 * Área de texto do campo de mensagem (REQ-037): mais alta que os campos de
 * uma linha, e com o canto do cartão em vez do raio de pílula — 999px numa
 * caixa alta viraria uma cápsula. O redimensionamento fica só na vertical,
 * para o horizontal não estourar a grade.
 */
#contato .contato__cartao textarea.bricks-form__input {
  min-height: 7rem;
  padding: 0.875rem 1.5rem;
  border-radius: 1.5rem;
  resize: vertical;
}

#contato .contato__cartao .bricks-form__input::placeholder {
  color: rgb(255 255 255 / 0.78);
  opacity: 1;
}

#contato .contato__cartao .bricks-form__input:focus,
#contato .contato__cartao .bricks-form__input:focus-visible {
  outline: 2px solid var(--rd-preto);
  outline-offset: 2px;
  border: 0;
  box-shadow: none;
}

/* botão outline centralizado, como o "Fale com um especialista" */
#contato .contato__cartao .bricks-form__submit {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: auto;
}

/*
 * Mesma altura dos campos (3rem) e o mesmo respiro que separa os inputs,
 * acima e abaixo — sem a margem inferior o botão encostava no aviso de
 * consentimento que o RD acrescenta logo depois.
 */
#contato .contato__cartao .rd-button,
#contato .contato__cartao button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 3rem;
  min-height: 3rem;
  margin: 0.875rem 0;
  padding: 0 2.5rem;
  border: 2px solid var(--rd-preto);
  border-radius: 999px;
  background: transparent;
  color: var(--rd-preto);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out;
}

#contato .contato__cartao .rd-button:hover,
#contato .contato__cartao button[type="submit"]:hover {
  background: var(--rd-preto);
  color: var(--color-brand-white);
}

/*
 * Aviso de consentimento (LGPD) que o RD acrescenta abaixo do botão: vem
 * em branco, o que o tornava invisível sobre o painel claro. É texto com
 * valor legal — deixamos legível em vez de escondê-lo.
 */
/*
 * A mensagem de consentimento de dentro do formulário fica oculta
 * (REQ-036): a mesma frase é copiada pelo site.js para o texto abaixo do
 * botão, no lugar da frase antiga que sobrou de outra campanha no painel.
 * O input de base legal que mora neste bloco continua sendo enviado —
 * `display: none` não desliga campo, só `disabled` desligaria.
 * Quando o cliente apagar o texto antigo no painel, esta regra sai junto.
 */
#contato .contato__cartao .bricks-form__terms {
  display: none;
}

#contato .contato__cartao .rd-text,
#contato .contato__cartao .rd-text *,
#contato .contato__cartao .bricks--component-text a {
  color: var(--color-brand-gray-500);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

/*
 * Único !important do arquivo: o RD pinta este link de branco por um
 * seletor com ID gerado a cada carga (#rd-form-xxxxx), então não há
 * seletor estável que ganhe dele. Sem isto, o aviso fica invisível.
 */
#contato .contato__cartao .rd-text a,
#contato .contato__cartao .bricks--component-text a {
  color: var(--color-brand-gray-500) !important;
  text-decoration: underline;
}

/* mensagens de validação do RD na tipografia e na cor da marca */
#contato .contato__cartao .bricks-form__field .form-error,
#contato .contato__cartao span[class*="error"] {
  display: block;
  margin: 0.375rem 0 0 1.5rem;
  color: var(--color-brand-error);
  font-family: var(--font-sans);
  font-size: 0.75rem;
}

/*
 * Botão pílula outline sobre superfície clara. Nasceu no formulário do
 * REQ-019 e hoje é usado pela página de obrigado; o botão do formulário
 * em si é o do RD, estilizado acima com o mesmo desenho.
 */
.botao-especialista {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  border: 2px solid var(--rd-preto);
  border-radius: 999px;
  background: transparent;
  color: var(--rd-preto);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out;
}

.botao-especialista:hover {
  background: var(--rd-preto);
  color: var(--color-brand-white);
}

.botao-especialista:focus-visible {
  outline: 2px solid var(--rd-preto);
  outline-offset: 3px;
}

.contato__sem-js {
  font-size: 0.875rem;
  line-height: 1.6;
}

.contato__sem-js a {
  text-decoration: underline;
}

.contato__privacidade {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-brand-gray-500);
}

.contato__sucesso {
  border: 1px solid rgb(19 19 18 / 0.8);
  border-radius: 1rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.contato__sucesso svg {
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto;
  color: var(--rd-verde-botao);
}

.contato__sucesso h3 {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.contato__sucesso p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

/* Honeypot — invisível para humanos, presente para bots */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .contato__titulo br {
    display: none;
  }
}

@media (min-width: 1024px) {
  /*
   * No desktop o grid recoloca os três blocos: headline e marcas na
   * coluna da esquerda, formulário ocupando a direita inteira. O layout
   * volta a ser o da agência, sem depender da ordem do documento.
   */
  .contato__colunas {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    column-gap: 4rem;
    row-gap: 2.5rem;
    margin-top: 2rem;
  }

  .contato__titulo {
    grid-column: 1;
    grid-row: 1;
  }

  .contato__marcas {
    grid-column: 1;
    grid-row: 2;
  }

  /* A coluna da direita leva o formulário e, logo abaixo, as lojas —
     é o que preenche o vazio que sobrava sob o formulário. */
  .contato__coluna-form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .contato__cartao {
    padding: 1.75rem;
  }
}

/* ===========================================================================
   Rodapé — portado do site institucional (REQ-020), visual do WordPress
   =========================================================================== */

.rodape {
  background: var(--color-brand-gray-300);
  border-top: 20px solid var(--color-brand-gray-500);
  color: var(--color-brand-gray-800);
  padding-block: 2.5rem 1.5rem;
  font-size: 0.8125rem;
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.rodape__selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}

/* A primeira faixa abre o rodapé — o respiro vem do padding da seção */
.rodape__selos:first-child {
  margin-top: 0;
}

/*
 * Sem a newsletter (REQ-024), os selos ocupam a largura inteira do rodapé —
 * distribuídos, como no site institucional, em vez de amontoados à esquerda.
 */
@media (min-width: 900px) {
  .rodape__selos {
    justify-content: space-between;
    gap: 1.5rem 1rem;
  }
}

.rodape__selos img {
  max-height: 6.5rem;
  width: auto;
}

.rodape__selos--linha img {
  max-height: 5.5rem;
}

.rodape__canal-aberto {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.rodape__canal-aberto img {
  max-height: 5.9375rem;
}

.rodape__canal-aberto p {
  font-size: 0.75rem;
  line-height: 1.35;
}

.rodape__lei {
  font-weight: 600;
  text-decoration: underline;
}

.rodape__lei:hover,
.rodape__termos a:hover {
  color: var(--color-brand-gray-900);
  text-decoration: underline;
}

/* O embed do Reclame Aqui injeta um iframe — reservar respiro sem travar altura */
#reputation-ra {
  margin-top: 1.5rem;
  min-height: 2rem;
}

.rodape__notas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
}

.rodape__termos {
  font-size: 0.75rem;
}

.rodape__copyright {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
}

.rodape__redes {
  display: flex;
  gap: 0.5rem;
}

.rodape__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  background: var(--color-brand-gray-500);
  color: var(--color-brand-white);
  transition: background-color 150ms ease-out;
}

.rodape__redes a:hover,
.rodape__redes a:focus-visible {
  background: var(--color-brand-gray-800);
}

.rodape__redes svg {
  width: 1rem;
  height: 1rem;
}




/* ===========================================================================
   Empilhamento no scroll (REQ-023)
   Cada seção trava e a seguinte desliza por cima dela, como cartas
   empilhando — o gesto que os cantos arredondados dos painéis já sugerem.
   Para desligar, basta remover este bloco inteiro.
   =========================================================================== */

@media (min-width: 1024px) {
  /*
   * Seções que cabem na tela travam pelo TOPO: param assim que chegam ao
   * alto e a próxima sobe cobrindo.
   */
  .filme,
  .porque,
  .ecossistema {
    position: sticky;
    top: 0;
  }

  /*
   * Jornada (1539px) e contato (933px) NÃO travam: são mais altas que a
   * tela e, presas pelo topo, teriam o próprio fim inalcançável — na
   * jornada some o bloco "Onde estratégia" e os diferenciais. Elas rolam
   * normalmente e cobrem a seção travada anterior, que é o que importa.
   * (`sticky bottom` também não serve: gruda o elemento no rodapé da tela
   * *antes* de o leitor chegar nele, cobrindo o resto da página.)
   */
  .jornada,
  .contato {
    position: relative;
  }

  /*
   * Ordem de cobertura. Também resolve a pegadinha de pintura: uma seção
   * travada vira elemento posicionado e, sem z-index crescente, passaria a
   * pintar por cima das seguintes (que seriam estáticas). Todas têm fundo
   * opaco, então a que fica atrás some por completo.
   */
  .filme { z-index: 1; }
  .porque { z-index: 2; }
  .jornada { z-index: 3; }
  .ecossistema { z-index: 4; }
  .faq { position: relative; z-index: 5; }
  .contato { z-index: 6; }
  .rodape { position: relative; z-index: 7; }

  /*
   * Em posições fracionárias de scroll, o arredondamento de subpixel abria
   * uma fresta de 1px entre a seção travada e a que a cobre — e o branco do
   * body aparecia como um risco. Sobrepor 1px fecha a costura; o
   * deslocamento é imperceptível e some sob o canto arredondado do painel.
   */
  .porque,
  .jornada,
  .contato {
    margin-top: -1px;
  }
}

/* ===========================================================================
   Página de obrigado (REQ-025) — fundo escuro, como as seções da campanha
   =========================================================================== */

.obrigado {
  background: var(--rd-preto);
  color: var(--color-brand-white);
}

.obrigado__painel {
  padding-block: 6rem 7rem;
}

.obrigado__conteudo {
  max-width: 44rem;
  text-align: center;
}

.obrigado__selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--rd-acento);
  color: var(--rd-preto);
}

.obrigado__selo svg {
  width: 2.25rem;
  height: 2.25rem;
}

.obrigado__titulo {
  margin-top: 2rem;
  font-size: clamp(2rem, 1.1rem + 2.9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.25;
}

.obrigado__texto {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}


.obrigado__acoes {
  margin-top: 2.5rem;
}

/* Sobre o escuro, o botão inverte: contorno e texto claros */
.obrigado__acoes .botao-especialista {
  display: inline-block;
  margin: 0;
  border-color: var(--color-brand-white);
  color: var(--color-brand-white);
  text-decoration: none;
}

.obrigado__acoes .botao-especialista:hover {
  background: var(--color-brand-white);
  color: var(--rd-preto);
}

.obrigado__acoes .botao-especialista:focus-visible {
  outline-color: var(--color-brand-white);
}

/* ===========================================================================
   Lojas online — segundo bloco de marcas (REQ-027), abaixo do formulário
   Os rótulos sob cada logo saíram a pedido do cliente em 10/08 (REQ-031),
   e com eles o layout em coluna que existia só para acomodá-los.
   =========================================================================== */

.lojas-online {
  margin-top: 2.75rem;
}

/*
 * As três lojas lado a lado quando couber. O `auto-fit` decide pela largura
 * real disponível em vez de por breakpoint, porque aqui a largura não cresce
 * junto com a janela: em 1024px a coluna do formulário encolhe para 396px e
 * só cabem duas, enquanto em 768px o bloco ocupa a linha inteira (480px) e
 * cabem três.
 *
 * O piso de 8rem e o respiro menor entre colunas são calibrados pela maior
 * logo do conjunto (129px): garantem que a coluna resultante nunca fique
 * abaixo disso, do desktop até 360px, onde ainda cabem duas. Com o gap de
 * 2rem do bloco de marcas, a tela de 360px caía para uma logo por linha.
 */
.lojas-online .canais-venda__lista {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  column-gap: 1.5rem;
}