/*
  Página Ecossistema de Soluções (/solucoes-extras/) — rules/figma.md, node raiz 112:5330
  (desktop, nome de camada desatualizado "08 - Desktop - Quem Somos") / 318:4556 (mobile).

  Container padrão do site (max-width 1520px) reaproveitado — mesmo princípio de
  header/footer/cta-hero/página Paulista. O layout original do Figma (1920px) usa larguras de
  coluna próprias por bloco (texto ~404-443px, card 384px, gap ~200px) que não preenchem o
  container padrão inteiro — mantido com justify-content: space-between dentro do container,
  decisão de engenharia registrada aqui (rules/responsive.md seção 2, breakpoints intermediários
  interpolados).
*/

.solucoes-intro__inner,
.partner-block__inner,
.solucoes-final-cta__inner {
  max-width: 1027px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---- 1. Intro ---- */

.solucoes-intro {
  background-color: var(--color-navy);
  padding-block: 90px;
  overflow: hidden;
}

.solucoes-intro__inner {
  max-width: 1027px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.solucoes-intro__content {
  flex: 1 1 480px;
}

.solucoes-intro__media {
  flex: 0 1 762px;
  max-width: 7620px;
  width: 100%;
}

.solucoes-intro__collage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 762 / 441;
}

.solucoes-intro__heading {
  max-width: 825px;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 75px;
  color: #ffffff;
}

.solucoes-intro__description {
  max-width: 643px;
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 29.25px;
  color: rgba(255, 255, 255, 0.8);
}

.solucoes-intro__subtext {
  max-width: 404px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- 2-6. Partner blocks (Comuniq, Vertex Filmes, UniScale, Faculdade Uniguaçu, Uplay Hub) ---- */

.partner-block {
  padding-block: 80px;
  background-color: #ffffff;
}

.partner-block:nth-of-type(even) {
  background-color: #f9f4ee;
}

.partner-block__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: wrap;
}

/* DOM é sempre media→content (rules/html-css-js.md); row normal = imagem à esquerda, texto à
   direita (Vertex Filmes, Faculdade Uniguaçu). .partner-block--reverse inverte visualmente pra
   texto à esquerda, imagem à direita (Comuniq, UniScale, Uplay Hub) sem duplicar estrutura. */
.partner-block--reverse .partner-block__inner {
  flex-direction: row-reverse;
}

.partner-block__media {
  width: 100%;
  max-width: 384px;
}

.partner-block__content {
  flex: 1 1 380px;
  min-width: 280px;
  max-width: 460px;
}

.partner-card {
  position: relative;
  width: 100%;
  aspect-ratio: 384 / 288;
  border-radius: 16px;
  overflow: hidden;
}

.partner-card__logo {
  position: absolute;
  display: block;
}

.partner-card--comuniq {
  background-color: #404040;
}
.partner-card--comuniq .partner-card__logo {
  left: 9.375%;
  top: 42.708%;
  width: 81.25%;
  height: auto;
}

.partner-card--vertex {
  background-image: linear-gradient(143.13deg, #ec5a00 0%, #fb2c36 100%);
}
.partner-card--vertex .partner-card__logo {
  left: 28.125%;
  top: 30.288%;
  width: 43.49%;
  height: auto;
}

.partner-card--uniscale {
  background-image: linear-gradient(143.13deg, #9810fa 0%, #7008e7 100%);
}
.partner-card--uniscale .partner-card__logo {
  left: 16.927%;
  top: 40.868%;
  width: 66.146%;
  height: auto;
}

.partner-card--faculdade {
  background-color: #f5333f;
}
.partner-card--faculdade .partner-card__logo {
  left: 21.09%;
  top: 22.121%;
  width: 57.552%;
  height: auto;
}

.partner-card--uplay {
  background-image: linear-gradient(to right, #eb53ad 0%, #6f3be0 48%, #16cbfa 100%);
}
.partner-card--uplay .partner-card__logo {
  left: 14.583%;
  top: 24.39%;
  width: 71.09%;
  height: auto;
}

.partner-block__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin: 0 0 16px;
  padding: 0 16px 0 12px;
  border-radius: 9999px;
  background-color: rgba(241, 87, 53, 0.1);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-brand-orange);
  white-space: nowrap;
}

.partner-block__heading {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 36px;
  line-height: 40px;
  color: #11161f;
}

/* Comuniq usa peso bold nesse heading no Figma (as demais usam medium) — divergência real do
   design, preservada (rules/figma.md, Fidelidade). */
.partner-block--comuniq .partner-block__heading {
  font-weight: 700;
}

.partner-block__text {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #4f5661;
}

.partner-block__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.partner-block__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #11161f;
}

.partner-block__list li img {
  flex: 0 0 auto;
  margin-top: 1px;
}

.partner-block__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-inline: 24px;
  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: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- 7. CTA final (versão curta — sem badge WhatsApp, sem trust items) ---- */

.solucoes-final-cta {
  background-color: rgba(249, 244, 238, 0.2);
  padding-block: 88px;
  text-align: center;
}

.solucoes-final-cta__inner {
  max-width: 700px;
}

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

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

.solucoes-final-cta__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 60px;
  padding-inline: 32px;
  border-radius: 9999px;
  background-color: #00c950;
  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;
  line-height: 28px;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- tablet/notebook — sem frame Figma nessa faixa, interpolado (rules/responsive.md seção 2) ---- */

@media (max-width: 1366px) {
  .solucoes-intro__heading {
    font-size: 48px;
    line-height: 56px;
  }

  .partner-block__inner {
    gap: 40px;
  }
}

@media (max-width: 1024px) {
  .partner-block__inner {
    flex-direction: column !important;
    align-items: center;
  }

  /* Mobile empilha texto ANTES da imagem (confirmado no Figma mobile — todos os blocos
     "MARCA X" têm "FRASE COMPLETA" antes de "Background"/logo). DOM continua media→content
     (rules/html-css-js.md); order inverte só a exibição, sem duplicar estrutura. */
  .partner-block__media {
    order: 2;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Empilhado, o bloco inteiro é centralizado (confirmado via get_design_context do node
     318:4602 — wrapper "items-center", badge/heading/parágrafo/CTA todos centralizados). A
     LISTA em si mantém os itens (ícone+texto) alinhados à esquerda internamente — só o bloco
     <ul> como um todo fica centralizado dentro do container mais largo (rules/figma.md,
     Fidelidade — não inventar alinhamento, seguir o node). */
  .partner-block__content {
    order: 1;
    max-width: 100%;
    text-align: center;
  }

  .partner-block__list {
    width: 240px;
    margin-inline: auto;
  }

  /* .partner-block__content vira text-align:center pra badge/heading/parágrafo — mas o
     texto de cada item da lista não pode herdar isso (quebra pra 2 linhas centralizado fica
     errado, texto some do alinhamento left do ícone). */
  .partner-block__list li {
    text-align: left;
  }

  .solucoes-intro__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* flex-basis (762px/480px) é largura no row do desktop — em column vira ALTURA e sobra
     espaço vazio embaixo da imagem/texto (caixa esticada além do conteúdo real). Reset pro
     empilhado, largura passa a ser só as regras de width/max-width abaixo. */
  .solucoes-intro__content,
  .solucoes-intro__media {
    flex-basis: auto;
  }

  .solucoes-intro__media {
    max-width: 380px;
    margin-inline: auto;
  }

  .solucoes-intro {
    padding-block: 56px;
  }

  .solucoes-intro__heading {
    font-size: 32px;
    line-height: 1.25;
  }
}

/* ---- mobile real (frame 318:4556, ~430px) ---- */

@media (max-width: 767px) {
  /* Colagem "sangra" pra fora do viewport no mobile — node 318:4600 confirmado no Figma
     ("Banner A paixão por eventos nos UNE - Web 1", w=762 x=-166 dentro do frame 430 de
     largura), cortada pelo overflow:hidden de .solucoes-intro. Sem equivalente confirmado no
     desktop (node nunca localizado lá — ver comentário em section-1-intro.php), então esse
     tamanho fixo/overflow só se aplica aqui, não herda do breakpoint anterior. */
  .solucoes-intro__media {
    width: 762px;
    max-width: none;
    margin-left: calc(50% - 381px);
    margin-right: calc(50% - 381px);
  }

  .solucoes-intro {
    padding-block: 40px;
  }

  .solucoes-intro__heading {
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 15px;
  }

  .solucoes-intro__description {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px;
  }

  .solucoes-intro__subtext {
    max-width: 207px;
  }

  .partner-block {
    padding-block: 48px;
  }

  .partner-block__heading {
    font-size: 24px;
    line-height: 30px;
  }

  .partner-block__text {
    font-size: 14px;
    line-height: 20px;
  }

  .solucoes-final-cta {
    padding-block: 56px;
  }

  .solucoes-final-cta__heading {
    font-size: 24px;
    line-height: 30px;
  }

  .solucoes-final-cta__description {
    font-size: 16px;
    line-height: 24px;
  }

  .solucoes-final-cta__cta {
    width: 100%;
    max-width: 328px;
    margin-inline: auto;
  }
}

/* ---- Scroll reveal (fade + slide de baixo pra cima) — SEM frame no Figma, mesmo padrão já
   usado em css/page-paulista.css (reaproveitado aqui, seletores ajustados). ---- */

.solucoes-intro__inner,
.partner-block__media,
.partner-block__content,
.solucoes-final-cta__inner {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.solucoes-intro__inner.is-visible,
.partner-block__media.is-visible,
.partner-block__content.is-visible,
.solucoes-final-cta__inner.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .solucoes-intro__inner,
  .partner-block__media,
  .partner-block__content,
  .solucoes-final-cta__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}