/*
  Página Eventos Corporativos (/eventos-corporativos/) — rules/figma.md, arquivo
  IKdVIU3lEznWQXXH6UBjWz, root desktop 162:2742, root mobile 314:2625.
  Página de "solução/segmento" — estrutura própria, não reaproveita page-paulista.php/.css
  diretamente (CSS é por página, rules/html-css-js.md), mas replica o PADRÃO visual de
  componentes já estabelecidos (stats-bar, feature-row, final-cta, FAQ chevron, scroll-reveal).
*/

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

.stats-bar__list,
.feature-row__inner,
.diff-pills__inner,
.social-proof__inner,
.final-cta__inner,
.eventos-corporativos-faq__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---- 2. Stats bar (mesmo padrão de page-paulista.css) ---- */

.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: 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 — mesmo padrão de template-parts/page-paulista/section-2-stats.php e
   css/page-paulista.css (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. Unidades (3 cards) — bloco novo, node 162:2774 ---- */

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

.unit-cards__inner {
  max-width: 940px;
  margin-inline: auto;
  padding-inline: 20px;
}

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

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

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

.unit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #e1ddd7;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.unit-card:hover,
.unit-card: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);
}

.unit-card__icon {
  display: block;
  margin-bottom: 12px;
}

.unit-card__title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #11161f;
}

.unit-card__address {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  color: #4f5661;
}

.unit-card__capacity {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-brand-orange);
}

.unit-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-brand-orange);
}

/* ---- 4. Mini CTA banner — bloco novo, node 162:2810 ---- */

.mini-cta-banner {
  background-color: rgba(19, 33, 57, 0.05);
  border-block: 1px solid rgba(19, 33, 57, 0.1);
  padding-block: 48px;
  text-align: center;
}

.mini-cta-banner__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: 20px;
}

.mini-cta-banner__text {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #11161f;
}

.mini-cta-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding-inline: 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;
  white-space: nowrap;
}

/* ---- 5. Formatos (feature-row, 3 colunas — modificador de largura) ---- */

.feature-row {
  background-color: #ffffff;
  padding-block: 96px;
}

.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 48px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4f5661;
  text-align: center;
}

.feature-row--formatos .feature-row__inner {
  max-width: 940px;
}

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

.feature-row__list--3col {
  grid-template-columns: repeat(3, 1fr);
}

.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: 22px;
  height: 22px;
}

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

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

/* ---- 6. Diferenciais (8 pills, grid 4x2) — bloco novo, node 162:2873 ---- */

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

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

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

.diff-pills__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding-inline: 16px;
  background-color: #ffffff;
  border-radius: 16px;
}

.diff-pills__item img {
  display: block;
  flex: 0 0 auto;
}

.diff-pills__item span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: #11161f;
}

/* ---- 7. FAQ (mesmo padrão chevron single-open, SEM CTA final) ---- */

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

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

.eventos-corporativos-faq__list {
  max-width: 704px;
  margin: 0 auto;
}

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

.eventos-corporativos-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;
}

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

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

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

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

/* ---- 8. Social proof — SÓ grid de logos (sem depoimentos texto/vídeo) ---- */

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

/* Header + grid num bloco único com fundo bege (Figma node 160:1526, mesmo padrão de
   paulista/cascavel/foz-do-iguaçu) — antes soltos direto no fundo branco da seção, sem o
   "cartão" visual do Figma. Sem margin-bottom aqui (variante --logos-only, é o último
   elemento da seção — o padding-block:96px do .social-proof já dá o respiro final). */
.social-proof__logos-block {
  background-color: #f9f4ee;
  border-radius: 24px;
  padding: 64px 40px;
}

.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 {
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
}

.feature-row__desktop,
.social-proof__logos-desktop {
  display: block;
}

.feature-row__mobile,
.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;
  padding: 0;
  max-width: 840px;
  margin-inline: auto;
}

/* 15 logos (esta página) — grid mais alto que o padrão de unidade (9/6/5 logos). */
.social-proof__logos-grid--15 {
  max-width: 900px;
}

.social-proof__logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 8px;
  height: 200px;
  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 e das páginas de unidade (pedido do usuário, 2026-08-24). */
.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;
  }
}

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

/* ---- 9. Final CTA (mesmo padrão de page-paulista.css) ---- */

.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: 36px;
  line-height: 40px;
  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;
}

/* ---- Footer variante Eventos Corporativos — só copyright, sem endereço ---- */

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

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

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

/* =====================================================================
   Responsivo — hero/stats/unidades/mini-banner têm frame mobile real (314:2625);
   formatos/diferenciais/FAQ/social-proof interpolados por julgamento de engenharia
   (rules/responsive.md seção 2/3.3) a partir da mesma estrutura HTML.
   ===================================================================== */

@media (max-width: 1024px) {
  .unit-cards__grid,
  .feature-row__list,
  .feature-row__list--3col {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .social-proof__logos-grid--15 {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .stats-bar__mobile {
    display: block;
  }

  .unit-cards__grid,
  .feature-row__list,
  .feature-row__list--3col,
  .diff-pills__grid,
  .social-proof__logos-grid,
  .social-proof__logos-grid--15 {
    grid-template-columns: 1fr;
  }

  .unit-cards__heading,
  .feature-row__heading,
  .diff-pills__heading,
  .social-proof__logos-heading,
  .final-cta__heading,
  .eventos-corporativos-faq__heading {
    font-size: 26px;
    line-height: 1.3;
  }

  .mini-cta-banner__text {
    font-size: 16px;
  }

  .final-cta {
    background-color: #ffffff;
  }

  .social-proof {
    padding-block: 0;
  }

  .diff-pills {
    padding-block: 50px;
  }

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

  /* Formatos e logos: grid estático vira Swiper no mobile — decisão do usuário 2026-08-19
     (rules/html-css-js.md seção 7.1, mesmo padrão já usado na paulista/cascavel/foz). */
  .feature-row__desktop,
  .social-proof__logos-desktop {
    display: none;
  }

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

  /* Card do carrossel de formatos — mesmo layout do why-choose (Figma node 315:3184, mesmo
     componente 350x350 quadrado, fundo bege #f9f4ee, sem borda — diferente do card branco
     com borda do desktop). Texto mantido, só layout/fonte/fundo mudam (pedido do usuário
     2026-08-31). Confirmado via export real do nó (não estimado): ícone continua tint
     laranja claro (rgba(241,87,53,.1), igual ao já usado), título 20px/600, descrição
     16px/400 — maiores que os 18/14 do desktop. */
  .feature-row__swiper .swiper-slide {
    width: 350px;
  }

  /* Sem os margin de ícone/título (desktop) — o gap:15px do .feature-row__card já cuida do
     espaço entre eles, margin duplicaria. */
  .feature-row__swiper .feature-row__icon,
  .feature-row__swiper .feature-row__card-title {
    margin: 0;
  }

  .feature-row__swiper .feature-row__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 350px;
    height: 350px;
    padding-inline: 37.5px;
    background-color: #f9f4ee;
    border: none;
  }

  .feature-row__swiper .feature-row__card-title {
    font-size: 20px;
  }

  .feature-row__swiper .feature-row__card-description {
    font-size: 16px;
  }

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

  /* Mesmo ajuste já feito em paulista/cascavel/foz-do-iguaçu (pedido do usuário 2026-08-31)
     pro bloco de logos de prova social — essa página não tem depoimentos em texto/vídeo
     (variante --logos-only), só o que se aplica aqui: full-bleed do bloco, fonte menor,
     margem do carrossel e sem cinza no mobile. */
  .social-proof__logos-block {
    margin-inline: -20px;
    padding-inline: 0;
    border-radius: 0;
  }

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

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

  .social-proof__logos-mobile {
    margin-left: 20px;
  }

  .social-proof__logos-swiper .social-proof__logo-card img {
    filter: none;
    opacity: 1;
  }
}

/*
  Scroll reveal (fade + slide de baixo pra cima ao entrar na viewport) — mesmo padrão já usado em
  page-paulista.css/page-cascavel.css/page-foz-do-iguacu.css, seletores adaptados pros nomes de
  classe desta página. Hero (seção 1) fica de fora de propósito (acima da dobra).
*/

.stats-bar__item,
.unit-cards__heading,
.unit-cards__description,
.unit-card,
.mini-cta-banner__text,
.feature-row__heading,
.feature-row__description,
.feature-row__card,
.diff-pills__heading,
.diff-pills__item,
.eventos-corporativos-faq__heading,
.eventos-corporativos-faq__item,
.social-proof__logos-header,
.social-proof__logo-card,
.final-cta__inner {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.stats-bar__item.is-visible,
.unit-cards__heading.is-visible,
.unit-cards__description.is-visible,
.unit-card.is-visible,
.mini-cta-banner__text.is-visible,
.feature-row__heading.is-visible,
.feature-row__description.is-visible,
.feature-row__card.is-visible,
.diff-pills__heading.is-visible,
.diff-pills__item.is-visible,
.eventos-corporativos-faq__heading.is-visible,
.eventos-corporativos-faq__item.is-visible,
.social-proof__logos-header.is-visible,
.social-proof__logo-card.is-visible,
.final-cta__inner.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,
  .unit-cards__heading,
  .unit-cards__description,
  .unit-card,
  .mini-cta-banner__text,
  .feature-row__heading,
  .feature-row__description,
  .feature-row__card,
  .diff-pills__heading,
  .diff-pills__item,
  .eventos-corporativos-faq__heading,
  .eventos-corporativos-faq__item,
  .social-proof__logos-header,
  .social-proof__logo-card,
  .final-cta__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}