/*
  Página Paulista (/paulista/) — rules/figma.md.
  Assets reais inseridos (2026-08-18) — ícones/fotos/logos/vídeo das 10 seções baixados do
  Figma (ver comentário de cabeçalho de cada section-N-*.php pros node ids).
  Responsivo mobile aqui ainda é INTERPOLADO por julgamento de engenharia (empilhar/reduzir
  fonte) — não foi extraído nó a nó do frame mobile (306:365) ainda, só o screenshot da página
  inteira (rules/responsive.md seção 2/3.3) — pendência conhecida, revisar numa próxima etapa.
*/

/* ---- container comum (mesmo padrão de header/footer/cta-hero) ---- */

.stats-bar__list,
.feature-row__inner,
.why-choose__inner,
.gallery__inner,
.cta-banner__inner,
.social-proof__inner,
.final-cta__inner,
.trust-bar__list,
.paulista-faq__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---- 2. Stats bar ---- */

.stats-bar {
  background-color: var(--color-navy);
}

.stats-bar__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  /* margin-block só (não margin:0 — isso zerava o margin-inline:auto do bloco compartilhado
     no topo do arquivo, que centraliza a lista; margin:0 já causou essa regressão uma vez). */
  margin-block: 0;
  padding-block: 34px;
  flex-wrap: wrap;
}

.stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-inline: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-bar__item:last-child {
  border-right: none;
}

.stats-bar__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: #ffffff;
}

.stats-bar__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
}

.stats-bar__star {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

.stats-bar__mobile {
  display: none;
}

/* Marquee mobile — Figma node 306:1199 (rules/responsive.md 3.1, estrutura própria).
   Track duplicado 2x lado a lado (width: max-content), anima translateX(-50%) em loop —
   ao completar metade do percurso mostra a 2ª cópia idêntica, looping sem "salto" visível. */
.stats-bar__marquee {
  overflow: hidden;
}

.stats-bar__marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: stats-bar-marquee 22s linear infinite;
}

.stats-bar__marquee-item {
  flex-shrink: 0;
  padding: 20px;
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

.stats-bar__marquee-item strong {
  font-weight: 700;
}

@keyframes stats-bar-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

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

/* ---- 3. Feature row (4 cards) ---- */

.feature-row {
  background-color: #f9f4ee;
  padding-block: 80px;
}

.feature-row__heading {
  max-width: 688px;
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
  text-align: center;
}

.feature-row__description {
  max-width: 627px;
  margin: 0 auto 60px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

.feature-row__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-row__card {
  background-color: #ffffff;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.feature-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background-color: rgba(241, 87, 53, 0.1);
}

.feature-row__icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.feature-row__card-title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: #11161f;
}

.feature-row__card-description {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  line-height: 16.5px;
  color: #4f5661;
}

.feature-row__desktop {
  display: block;
}

.feature-row__mobile {
  display: none;
}

/* Carrossel mobile — Figma mostra card ativo/central maior (170,06px → 229,64px, fator 1.35x
   uniforme em ícone/título/descrição) com peek dos vizinhos nas bordas (rules/responsive.md
   3.1). Mesmo Swiper de page-eventos-corporativos/section-5-formatos.php, com centeredSlides +
   escala do slide ativo via classe nativa `.swiper-slide-active` (nunca em `.swiper-slide`
   direto — o Swiper escreve transform inline nele a cada frame, rules/html-css-js.md 7.1). */
.feature-row__swiper-wrap {
  overflow: hidden;
}

/* Padding vertical fica na .feature-row__swiper (não no wrap) — o overflow:hidden que clipa
   é o do PRÓPRIO .swiper (swiper-bundle.min.css), na borda da sua padding-box. Padding só no
   wrap externo não alcança essa borda: o card ativo escalado (1.35x) ficava cortado em cima/
   embaixo mesmo com espaço sobrando ao redor (bug real, cards com título/ícone cortados). */
.feature-row__swiper.swiper {
  /* .swiper.swiper — dupla classe pra vencer .swiper{padding:0} do swiper-bundle.min.css,
     que enfileira DEPOIS de page-<slug>.css e teria a mesma especificidade (1 classe) que
     .feature-row__swiper sozinho, ganhando por ordem de carregamento (bug real, causava
     card ativo escalado cortado em cima/embaixo mesmo com padding definido). */
  padding-block: 36px;
}

.feature-row__swiper .swiper-slide {
  width: 170.065px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Geometria real do card mobile (Figma nós 306:1543/306:1544 na Paulista, mesmo componente
   reutilizado em cascavel/foz — get_design_context confirmado byte-idêntico nas 3 páginas,
   2026-08-31) — card QUADRADO, sem padding (conteúdo centralizado por flex, não por padding).
   Desktop usa um card retangular 356x142 com padding:24px — NÃO é o mesmo componente escalado,
   é um design mobile compacto à parte. Radius/ícone/fonte têm valor próprio, bem menor que o
   desktop; escala 1.35x do slide ativo (regra abaixo) já reproduz esses valores no card maior. */
.feature-row__swiper .feature-row__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 170.065px;
  height: 170.065px;
  padding: 0;
  border-radius: 7.774px;
  border-width: 0.486px;
  transition: transform 0.3s ease;
}

.feature-row__swiper .feature-row__icon {
  width: 23.323px;
  height: 23.323px;
  margin: 0;
  border-radius: 7.774px;
}

.feature-row__swiper .feature-row__icon img {
  width: 11.662px;
  height: 11.662px;
}

.feature-row__swiper .feature-row__card-title {
  margin: 0;
  margin-top: 5.831px; /* ícone → bloco de texto, gap do Figma 306:1498 */
  font-size: 9.718px;
}

.feature-row__swiper .feature-row__card-description {
  margin: 0;
  margin-top: 2.915px; /* título → descrição, gap do Figma 306:1505 */
  font-size: 7.774px;
  line-height: 8.017px;
}

.feature-row__swiper .swiper-slide-active .feature-row__card {
  position: relative;
  z-index: 2;
  transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
  .feature-row__swiper .feature-row__card {
    transition: none;
  }
}

/* ---- 4. Why choose us (grid 3x3) ---- */

.why-choose {
  background-color: #ffffff;
  padding-block: 96px;
}

.why-choose__heading {
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
  text-align: center;
}

.why-choose__description {
  margin: 0 auto 44px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

.why-choose__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.why-choose__card {
  display: flex;
  gap: 20px;
  background-color: #f9f4ee;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  padding: 20px;
}

.why-choose__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: rgba(241, 87, 53, 0.1);
}

.why-choose__icon img {
  display: block;
  width: 22px;
  height: 22px;
}

/* Wrapper novo pro título+descrição — sem ele os dois ficavam soltos como irmãos do ícone
   no flex row (lado a lado), errado (Figma mostra ícone + coluna título/descrição). */
.why-choose__card-text {
  flex: 1;
  min-width: 0;
}

.why-choose__card-title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: #11161f;
}

.why-choose__card-description {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  color: #4f5661;
}

.why-choose__desktop {
  display: block;
}

.why-choose__mobile {
  display: none;
}

/* Carrossel mobile — Figma node 306:1618 "CARROSSEL" (mesmo componente em cascavel/foz,
   get_design_context confirmado byte-idêntico). Cards quadrados 350x350, SEM card "ativo"
   maior (diferente do feature-row — aqui todos os cards têm o mesmo tamanho), conteúdo
   centralizado (ícone em cima, texto embaixo — desktop é linha ícone+texto à esquerda,
   estrutura própria pro mobile, rules/responsive.md 3.1). Valores reais confirmados via
   get_design_context (nó 306:1362): largura de conteúdo 275px (= padding-inline 37.5px em
   350px), gap ícone→texto 15px, gap título→descrição 10px, título 20px, descrição 16px —
   ícone/radius/cor iguais ao desktop, sem mudança. */
.why-choose__swiper-wrap {
  overflow: hidden;
}

.why-choose__swiper .swiper-slide {
  width: 350px;
}

.why-choose__swiper .why-choose__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 350px;
  height: 350px;
  padding-inline: 37.5px;
}

.why-choose__swiper .why-choose__card-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  text-align: center;
}

.why-choose__swiper .why-choose__card-title {
  margin: 0;
  font-size: 20px;
}

.why-choose__swiper .why-choose__card-description {
  font-size: 16px;
}

.why-choose__link {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-brand-orange);
  text-decoration: none;
}

.why-choose__link img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

/* ---- 5. Gallery (3x3, estático) ---- */

.gallery {
  background-color: #f9f4ee;
  padding-block: 96px;
}

.gallery__heading {
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
  text-align: center;
}

.gallery__description {
  max-width: 655px;
  margin: 0 auto 48px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
}

/*
  .gallery__card (li) é só um wrapper de lista — o cartão visual (fundo, borda, sombra, hover)
  vive em .gallery__card-button, o botão inteiro clicável que abre o popup de imagem (sem
  frame Figma — replicado do popup de referência, ver comentário no topo do .php).
*/

.gallery__card-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  background-color: #ffffff;
  overflow: hidden;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.gallery__card-button:hover,
.gallery__card-button:focus-visible {
  border-color: rgba(241, 87, 53, 0.3);
  box-shadow:
    0px 20px 25px -5px rgba(0, 0, 0, 0.1),
    0px 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.gallery__card-button:focus-visible {
  outline: 2px solid var(--color-brand-orange);
  outline-offset: 2px;
}

.gallery__photo {
  position: relative;
  height: 263px;
  overflow: hidden;
  background-color: #e5e1da;
}

.gallery__photo-bg {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}

.gallery__card-button:hover .gallery__photo-bg,
.gallery__card-button:focus-visible .gallery__photo-bg {
  transform: scale(1.05);
}

.gallery__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}

.gallery__tag,
.gallery__count {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 15px;
}

.gallery__tag img,
.gallery__count img {
  display: block;
  width: 10px;
  height: 10px;
}

.gallery__tag {
  bottom: 10px;
  left: 10px;
  background-color: rgba(241, 87, 53, 0.9);
  font-weight: 600;
}

.gallery__count {
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

.gallery__card-title {
  margin: 16px 16px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: #11161f;
}

.gallery__card-description {
  margin: 8px 16px 16px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: #4f5661;
}

.gallery__cta {
  display: block;
  width: max-content;
  margin-inline: auto;
  padding: 14px 28px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  box-shadow:
    0px 10px 15px -3px rgba(236, 90, 0, 0.3),
    0px 4px 6px -4px rgba(236, 90, 0, 0.3);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.gallery__cta img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

/*
  Popup de imagem da galeria — SEM frame no Figma, layout/comportamento replicado de
  https://uneeventos-28fah4rq.manus.space/paulista (pedido explícito do usuário, 2026-08-18).
  1 modal só no DOM, reaproveitado pelas 9 salas (JS troca o conteúdo via data-* do botão
  clicado — page-paulista.js).
*/

.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.gallery-modal[hidden] {
  display: none;
}

.gallery-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  animation: gallery-modal-fade 0.2s ease;
}

.gallery-modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 896px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: gallery-modal-zoom 0.2s ease;
}

@keyframes gallery-modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gallery-modal-zoom {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.gallery-modal__header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e1ddd7;
}

.gallery-modal__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.gallery-modal__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  background-color: rgba(241, 87, 53, 0.1);
  color: var(--color-brand-orange);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
}

.gallery-modal__tag-icon {
  display: block;
}

.gallery-modal__floor {
  font-family: var(--font-body);
  font-size: 11px;
  color: #4f5661;
}

.gallery-modal__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: #11161f;
}

.gallery-modal__description {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: #4f5661;
}

.gallery-modal__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 9999px;
  background-color: #f1efec;
  color: #11161f;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gallery-modal__close:hover {
  background-color: #e1ddd7;
}

.gallery-modal__carousel {
  position: relative;
}

.gallery-modal__track-wrap {
  overflow: hidden;
}

.gallery-modal__track {
  display: flex;
  transition: transform 0.3s ease;
}

.gallery-modal__slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
}

.gallery-modal__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  color: #11161f;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.gallery-modal__nav:hover {
  background-color: #ffffff;
}

.gallery-modal__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.gallery-modal__nav--prev {
  left: 12px;
}

.gallery-modal__nav--next {
  right: 12px;
}

/*
  Sala com foto única (maioria, até fotos adicionais serem fornecidas) — JS marca nav/dots
  como hidden (js/page-paulista.js, buildSlides()). display:flex acima venceria o [hidden]
  nativo do navegador (author style sempre prevalece sobre UA style), então precisa de regra
  explícita aqui — 2026-08-28.
*/
.gallery-modal__nav[hidden],
.gallery-modal__dots[hidden] {
  display: none;
}

.gallery-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid #e1ddd7;
}

.gallery-modal__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.gallery-modal__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(79, 86, 97, 0.3);
  transition: all 0.2s ease;
}

.gallery-modal__dot--active {
  width: 20px;
  background-color: var(--color-brand-orange);
}

.gallery-modal__cta-wrap {
  text-align: center;
}

.gallery-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 9999px;
  background-color: var(--color-brand-orange);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.gallery-modal__cta:hover {
  filter: brightness(1.1);
}

/* Trava o scroll do body enquanto o popup está aberto — JS liga/desliga (page-paulista.js). */
body.gallery-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .gallery-modal__header {
    padding: 14px 16px;
  }

  .gallery-modal__footer {
    padding: 14px 16px;
  }

  .gallery-modal__title {
    font-size: 18px;
  }
}

/* ---- 6. Dark CTA banner ---- */

.cta-banner {
  background-color: var(--color-navy);
  padding-block: 90px;
  text-align: center;
}

.cta-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 25px;
  padding: 8px 20px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
}

.cta-banner__badge img {
  display: block;
  flex: 0 0 auto;
}

.cta-banner__heading {
  max-width: 520px;
  margin: 0 auto 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 45px;
  color: #ffffff;
}

.cta-banner__description {
  margin: 0 auto 30px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.6);
}

.cta-banner__cta {
  display: inline-block;
  margin-bottom: 32px;
  padding: 14px 40px;
  border-radius: 9999px;
  background-color: #00a63e;
  box-shadow:
    0px 10px 15px -3px rgba(0, 166, 62, 0.3),
    0px 4px 6px -4px rgba(0, 166, 62, 0.3);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

.cta-banner__trust {
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

.cta-banner__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cta-banner__trust img {
  display: block;
  flex: 0 0 auto;
}

/* ---- 7. Social proof (logos + depoimentos texto + depoimentos vídeo) ---- */

.social-proof {
  background-color: #ffffff;
  padding-block: 96px;
}

.social-proof__heading {
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  color: #11161f;
  text-align: center;
}

.social-proof__description {
  max-width: 700px;
  margin: 0 auto 60px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

/* Header + grid num bloco único com fundo bege (Figma node 160:1526) — antes soltos direto no
   fundo branco da seção, sem o "cartão" visual do Figma. */
.social-proof__logos-block {
  background-color: #f9f4ee;
  border-radius: 24px;
  padding: 64px 40px;
  margin-bottom: 48px;
}

.social-proof__logos-header {
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}

.social-proof__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: #4f5661;
  text-transform: uppercase;
  letter-spacing: 2.8px;
}

.social-proof__logos-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
}

.social-proof__logos-desktop {
  display: block;
}

.social-proof__logos-mobile {
  display: none;
}

.social-proof__logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 0 64px;
  padding: 0;
  max-width: 840px;
  margin-inline: auto;
}

.social-proof__logo-card {
  background-color: #e5e1da;
  border-radius: 8px;
  height: 200px;
}

.social-proof__logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0px 1px 1.5px rgba(0, 0, 0, 0.04);
  padding: 20px;
}

.social-proof__logo-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

/* Logo em cinza por padrão, cor original no hover — mesmo efeito do brands-grid__card da
   home (pedido do usuário, 2026-08-21). */
.social-proof__logo-card:hover img,
.social-proof__logo-card:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .social-proof__logo-card img {
    transition: none;
  }
}

.social-proof__video-placeholder {
  background-color: #000000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  height: 620px;
}

.social-proof__text-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0 0 64px;
  padding: 0;
}

.social-proof__text-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  padding: 25px;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.social-proof__quote-icon {
  display: block;
  margin-bottom: 16px;
}

.social-proof__quote {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 22.75px;
  color: rgba(17, 22, 31, 0.7);
}

.social-proof__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.social-proof__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: rgba(241, 87, 53, 0.1);
  color: var(--color-brand-orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}

.social-proof__author-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #11161f;
}

.social-proof__author-company {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: #4f5661;
}

.social-proof__stars {
  display: inline-flex;
  gap: 2px;
}

.social-proof__stars img {
  display: block;
}

.social-proof__videos-header {
  text-align: center;
  margin-bottom: 40px;
}

.social-proof__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: #f9f4ee;
  color: var(--color-brand-orange);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.social-proof__videos-heading {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: #11161f;
}

.social-proof__videos-description {
  max-width: 400px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 14px;
  color: #4f5661;
}

.social-proof__videos-desktop {
  display: block;
}

.social-proof__videos-mobile {
  display: none;
}

.social-proof__videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.social-proof__video-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-proof__video-caption {
  padding: 12px;
  background-color: #ffffff;
}

.social-proof__video-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
}

.social-proof__video-company {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #4f5661;
}

.social-proof__link {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-brand-orange);
  text-decoration: none;
}

.social-proof__link img {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

/* Swiper — só usado no mobile (rules/html-css-js.md seção 7.1) */
.social-proof__logos-swiper .swiper-slide,
.social-proof__videos-swiper .swiper-slide {
  width: auto;
}

/* ---- 8. Final CTA ---- */

.final-cta {
  background-color: #f9f4ee;
  padding-block: 90px;
  text-align: center;
}

.final-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px 16px;
  border-radius: 9999px;
  background-color: rgba(0, 201, 80, 0.2);
  color: #4f5661;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
}

.final-cta__badge img,
.final-cta__cta img {
  display: block;
  flex: 0 0 auto;
}

.final-cta__heading {
  margin: 0 auto 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: #11161f;
}

.final-cta__description {
  max-width: 700px;
  margin: 0 auto 32px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
}

.final-cta__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  padding-inline: 32px;
  margin-bottom: 32px;
  border-radius: 9999px;
  background-color: var(--color-brand-green);
  box-shadow:
    0px 20px 25px -5px rgba(0, 201, 80, 0.3),
    0px 8px 10px -6px rgba(0, 201, 80, 0.3);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

.final-cta__trust {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  color: #4f5661;
}

.final-cta__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.final-cta__trust img {
  display: block;
  flex: 0 0 auto;
}

/* ---- 9. Trust bar (verde, 3 itens) ---- */

.trust-bar {
  background-color: #f0fdf4;
  border-block: 1px solid #dcfce7;
}

.trust-bar__list {
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
  padding-block: 32px;
  flex-wrap: wrap;
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: #dcfce7;
}

.trust-bar__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.trust-bar__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: #0d542b;
}

.trust-bar__description {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 130, 84, 0.7);
}

/* ---- 10. FAQ ---- */

.paulista-faq {
  background-color: #ffffff;
  padding-block: 96px;
}

.paulista-faq__heading {
  margin: 0 auto 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  color: #11161f;
  text-align: center;
}

.paulista-faq__description {
  max-width: 700px;
  margin: 0 auto 40px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

.paulista-faq__list {
  max-width: 704px;
  margin: 0 auto 40px;
}

.paulista-faq__item {
  border-bottom: 1px solid #e1ddd7;
}

.paulista-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: #11161f;
}

.paulista-faq__answer {
  max-height: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  color: #4f5661;
  transition: max-height 0.25s ease;
}

.paulista-faq__item.active .paulista-faq__answer {
  max-height: 200px;
  padding-bottom: 20px;
}

.paulista-faq__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.paulista-faq__item.active .paulista-faq__icon {
  transform: rotate(180deg);
}

.paulista-faq__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-inline: auto;
  padding: 14px 32px;
  border-radius: 9999px;
  background-color: #00a63e;
  box-shadow:
    0px 10px 15px -3px rgba(0, 166, 62, 0.3),
    0px 4px 6px -4px rgba(0, 166, 62, 0.3);
  color: #eaeaea;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.paulista-faq__cta img {
  display: block;
  flex: 0 0 auto;
}

/* ---- Footer variante Paulista (bem mais enxuto que footer.php da home) ---- */

.site-footer-paulista {
  background-color: var(--color-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer-paulista__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding: 24px 20px;
  text-align: center;
}

.site-footer-paulista__address {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
}

.site-footer-paulista__copyright {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 12px;
  color: #ffffff;
}

/* =====================================================================
   Responsivo — interpolado (rules/responsive.md seção 2/3.3), refinar
   quando o frame mobile 306:365 for lido seção a seção na etapa de assets.
   ===================================================================== */

@media (max-width: 1024px) {
  .feature-row__list,
  .why-choose__grid,
  .gallery__grid,
  .social-proof__text-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-proof__videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .stats-bar__desktop {
    display: none;
  }

  .stats-bar__mobile {
    display: block;
  }

  .gallery__grid,
  .social-proof__text-testimonials,
  .social-proof__logos-grid {
    grid-template-columns: 1fr;
  }

  .why-choose__desktop {
    display: none;
  }

  .why-choose__mobile {
    display: block;
    /* Espaço até o botão "Conheça nossa história" logo abaixo (pedido do usuário 2026-08-31) —
       mesmo valor do margin-bottom do .why-choose__grid no desktop. */
    margin-bottom: 40px;
  }

  /* Carrossel colado nas laterais do viewport no mobile (pedido do usuário 2026-08-31), mesmo
     padrão do feature-row__inner — tira o padding-inline:20px herdado do container comum. */
  .why-choose__inner {
    padding-inline: 0;
  }

  .feature-row__desktop {
    display: none;
  }

  .feature-row__mobile {
    display: block;
  }

  /* Carrossel colado nas laterais do viewport no mobile (pedido do usuário 2026-08-31) — tira
     o padding-inline:20px herdado do container comum (seção "container comum" no topo do
     arquivo), que também vale pra .feature-row__heading/.feature-row__description. */
  .feature-row__inner {
    padding-inline: 0;
  }

  .feature-row__heading,
  .why-choose__heading,
  .gallery__heading,
  .social-proof__heading,
  .final-cta__heading,
  .paulista-faq__heading,
  .cta-banner__heading {
    font-size: 26px;
    line-height: 1.3;
  }

  /* Padding de volta só nesses dois (o resto do .feature-row__inner continua colado nas
     laterais) — pedido do usuário 2026-08-31. Sobrescreve o line-height:1.3 do bloco acima. */
  .feature-row__heading {
    padding: 0 30px;
    line-height: 1;
  }

  .feature-row__description {
    padding: 0 30px;
    font-size: 14px;
    line-height: 20px;
  }

  .why-choose__heading {
    padding: 0 30px;
    line-height: 1;
  }

  .why-choose__description {
    padding: 0 30px;
    font-size: 14px;
    line-height: 20px;
  }

  .social-proof__heading {
    padding: 0 30px;
    line-height: 1;
  }

  .social-proof__description {
    padding: 0 30px;
    font-size: 14px;
    line-height: 20px;
  }

  .social-proof__eyebrow {
    padding: 0 30px;
    line-height: 1;
  }

  .social-proof__logos-heading {
    padding: 0 30px;
    line-height: 1;
  }

  .cta-banner__trust,
  .final-cta__trust {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Logos e vídeos: grid estático vira Swiper no mobile — decisão do usuário 2026-08-17
     (rules/html-css-js.md seção 7.1). Galeria (seção 5) e depoimentos em texto continuam
     estáticos em todos os breakpoints (decisão do usuário: "estático" pra galeria). */
  .social-proof__logos-desktop,
  .social-proof__videos-desktop {
    display: none;
  }

  .social-proof__logos-mobile,
  .social-proof__videos-mobile {
    display: block;
  }

  .social-proof__logos-swiper .swiper-slide {
    width: 160px;
  }

  /* Sem efeito cinza no carrossel mobile (pedido do usuário 2026-08-31) — não tem hover em
     touch, então o logo ficava sempre apagado (filter:grayscale + opacity:0.7 do desktop). */
  .social-proof__logos-swiper .social-proof__logo-card img {
    filter: none;
    opacity: 1;
  }

  .paulista-faq__inner {
    padding-inline: 50px;
  }

  .paulista-faq__question,
  .paulista-faq__answer {
    font-size: 12px;
  }

  .site-footer-paulista__inner {
    padding: 50px 60px;
  }

  .gallery__cta {
    font-size: 14px;
  }

  /* Tamanho real do card de vídeo mobile (pedido do usuário 2026-08-31) — Figma node 306:928
     (card "Background+Shadow" dentro do depoimento em vídeo), 285x444. O card aqui é
     placeholder (vídeo) + legenda ABAIXO num box separado (não overlay como no Figma) — a
     legenda já fica perto de 71px de altura com o conteúdo atual (nome+empresa+estrelas+
     padding), quase igual ao overlay do Figma (71,5px), então a altura do placeholder é
     444 - 71 ≈ 373px pra manter a altura total do card próxima do Figma. */
  .social-proof__videos-swiper .swiper-slide {
    width: 285px;
  }

  .social-proof__videos-swiper .social-proof__video-placeholder {
    height: 373px;
  }

  /* Espaço entre o carrossel de vídeos e o botão "Seja o próximo..." logo abaixo (pedido do
     usuário 2026-08-31) — não havia margin nenhum entre os dois no mobile. Mesmo valor do
     gap desktop entre .social-proof__videos-grid e o link (margin-bottom:40px). */
  .social-proof__link {
    margin-top: 40px;
  }

  /* Só o bloco de fundo bege (logos) cola nas laterais — CORREÇÃO 2026-08-31: a 1ª versão
     zerava o padding do `.social-proof__inner` inteiro, o que também tirava o padding dos
     depoimentos em texto/vídeo logo abaixo (bug real, reportado pelo usuário). `.inner`
     mantém o padding-inline:20px normal (container comum, topo do arquivo); só o
     `.logos-block` quebra pra fora dele via margin-inline negativo (mesmo valor, invertido) —
     técnica padrão de "full-bleed" sem mexer no pai. Sem radius (esquinas retas encostando na
     borda do viewport) e sem o "cartão" flutuante que a borda arredondada dava no desktop.
     Padding vertical mantido (respiro em cima/embaixo); horizontal zerado, o carrossel dentro
     dele fica colado nas laterais por tabela. */
  .social-proof__logos-block {
    margin-inline: -20px;
    padding-inline: 0;
    border-radius: 0;
  }

  /* Fontes menores nessa seção no mobile (pedido do usuário 2026-08-31). */
  .social-proof__description {
    font-size: 15px;
  }

  .social-proof__eyebrow {
    font-size: 12px;
  }

  .social-proof__logos-heading {
    font-size: 24px;
    line-height: 1.3;
  }

  .social-proof__videos-heading {
    font-size: 20px;
  }

  .social-proof__videos-description {
    font-size: 13px;
  }

  .social-proof__quote {
    font-size: 13px;
  }

  /* videos-header aparece ANTES de text-testimonials só no mobile (pedido do usuário
     2026-08-31) — desktop mantém a ordem do DOM (texto antes de vídeo, inalterado).
     Reordenado via flex `order` em vez de mover o HTML — mesma estrutura nos dois
     breakpoints (rules/html-css-js.md, "não duplicar pra simular responsividade"), só a
     ordem visual muda. Todo filho direto de .social-proof__inner precisa de `order`
     explícito aqui, senão os que ficam em branco (default 0) saltam pro início da lista. */
  .social-proof__inner {
    display: flex;
    flex-direction: column;
  }

  .social-proof__heading {
    order: 1;
  }

  .social-proof__description {
    order: 2;
  }

  .social-proof__logos-block {
    order: 3;
  }

  .social-proof__videos-header {
    order: 4;
  }

  .social-proof__text-testimonials {
    order: 5;
  }

  .social-proof__videos-desktop {
    order: 6;
  }

  .social-proof__videos-mobile {
    order: 7;
  }

  .social-proof__link {
    order: 8;
  }

  .trust-bar__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-inline: 24px;
  }
}

/*
  Scroll reveal (fade + slide de baixo pra cima ao entrar na viewport) — SEM frame no Figma,
  replicado do comportamento de rolagem de https://uneeventos-28fah4rq.manus.space/paulista
  (pedido explícito do usuário, 2026-08-18). Referência anima via framer-motion (JS puro, sem
  CSS transition/keyframe pra copiar 1:1) — aqui reproduzido com IntersectionObserver +
  CSS transition vanilla (page-paulista.js), mesmos valores observados na referência:
  opacity 0→1, translateY(30px)→0.

  Hero (seção 1) fica de fora de propósito — está acima da dobra, revelar ele com atraso
  pioraria a primeira impressão em vez de melhorar.

  Sem fallback de <noscript>: se JS falhar/for bloqueado, os elementos abaixo ficam com
  opacity:0 permanentemente — mesmo trade-off que a página de referência (também 100%
  dependente de JS pra renderizar) e de libs de scroll-reveal padrão de mercado (AOS etc.).
*/

.stats-bar__item,
.feature-row__heading,
.feature-row__description,
.feature-row__card,
.why-choose__heading,
.why-choose__description,
.why-choose__card,
.gallery__heading,
.gallery__description,
.gallery__card,
.cta-banner__inner,
.social-proof__heading,
.social-proof__description,
.social-proof__logo-card,
.social-proof__text-card,
.social-proof__video-card,
.final-cta__inner,
.trust-bar__item,
.paulista-faq__heading,
.paulista-faq__description,
.paulista-faq__item {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.stats-bar__item.is-visible,
.feature-row__heading.is-visible,
.feature-row__description.is-visible,
.feature-row__card.is-visible,
.why-choose__heading.is-visible,
.why-choose__description.is-visible,
.why-choose__card.is-visible,
.gallery__heading.is-visible,
.gallery__description.is-visible,
.gallery__card.is-visible,
.cta-banner__inner.is-visible,
.social-proof__heading.is-visible,
.social-proof__description.is-visible,
.social-proof__logo-card.is-visible,
.social-proof__text-card.is-visible,
.social-proof__video-card.is-visible,
.final-cta__inner.is-visible,
.trust-bar__item.is-visible,
.paulista-faq__heading.is-visible,
.paulista-faq__description.is-visible,
.paulista-faq__item.is-visible {
  opacity: 1;
  transform: none;
}

/* Quem pede menos movimento não espera nem anima — conteúdo aparece direto (acessibilidade). */
@media (prefers-reduced-motion: reduce) {
  .stats-bar__item,
  .feature-row__heading,
  .feature-row__description,
  .feature-row__card,
  .why-choose__heading,
  .why-choose__description,
  .why-choose__card,
  .gallery__heading,
  .gallery__description,
  .gallery__card,
  .cta-banner__inner,
  .social-proof__heading,
  .social-proof__description,
  .social-proof__logo-card,
  .social-proof__text-card,
  .social-proof__video-card,
  .final-cta__inner,
  .trust-bar__item,
  .paulista-faq__heading,
  .paulista-faq__description,
  .paulista-faq__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}