/**
 * Bridge3 — Página "Valores". Estilos por seção, fiéis ao protótipo Figma
 * (desktop node 410-25439). Reaproveita tokens e os primitivos de base.css
 * (.section, .container, .screen-reader-text).
 *
 * Tipografia: H1 Medium 56 / H5 SemiBold 32 / H7 Medium 20 / B1 Regular 18 lh 1.3.
 */

/* Cores auxiliares locais. */
:root {
  --val-ciano-light: #76cccf;
}

/* ============ HERO ============ */
.val-hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(122deg, var(--c-navy) 0%, var(--c-teal) 100%);
  color: var(--c-on-dark);
  text-align: center;
  overflow: hidden;
  /* espaço extra no topo para a pílula do header sobreposta (fixed) */
  padding-top: clamp(9rem, 6rem + 10vw, 13rem);
  padding-bottom: 64px;
}
.val-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/textura.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
}
.val-hero__title {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  /* ~48px no celular → 56px no desktop (protótipo). */
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  line-height: 1.3;
  color: var(--CInza-50, #f3f3f3);
  text-shadow: 0 4px 2px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
  max-width: 15em;
}

/* ============ O QUE NOS MOVE (Figma 410:25829) ============ */
.val-move.section {
  padding-block: 64px;
  background: var(--CInza-100, #ebebeb);
}
.val-move__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: calc(1001px + 2 * var(--container-pad));
}
.val-move__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 32px;
  line-height: normal;
  color: var(--c-navy, #294458);
}
.val-move__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 80px;
  width: 100%;
}
.val-move__text {
  display: flex;
  flex-direction: column;
  gap: 1.3em;
  flex: 1 1 280px;
  max-width: 484px;
}
.val-move__text p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1.3;
  color: var(--CInza-950, #1a1a1a);
}

.val-move__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 0 1 437px;
  width: 100%;
  max-width: 437px;
}

/* Card com gradiente Bridge3 + textura, ícone branco e rótulo. */
.val-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  color: #fefefe;
  box-shadow: none;
}
.val-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(125deg, var(--c-navy) 0%, var(--c-teal) 100%);
}
.val-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/textura.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.25;
  pointer-events: none;
  border-radius: inherit;
}
.val-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  color: #fff;
}
.val-card__icon .icon,
.val-card__icon .icon--val {
  display: block;
  width: 60px;
  height: 60px;
}
.val-card__icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.val-card__label {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: normal;
  color: #fefefe;
  max-width: 15em;
}

/* ============ MISSÃO · VISÃO · VALORES ============ */
.val-missao {
  position: relative;
  isolation: isolate;
  background: linear-gradient(124deg, var(--c-navy) 0%, var(--c-teal) 100%);
  color: var(--c-on-dark);
  overflow: hidden;
  padding-block: 64px;
}
.val-missao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/textura.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.2;
  pointer-events: none;
}
.val-missao__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
}
.val-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  max-width: 280px;
  text-align: center;
}
.val-pillar__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 36px;
  color: #fff;
}
.val-pillar__text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 28px;
  color: #d1d5dc;
}
.val-pillar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 28px;
  color: #d1d5dc;
}

/* ============ PARCERIAS (Figma 410:25976) ============ */
.val-parcerias.section {
  padding-block: 64px;
  background: var(--CInza-50, #f3f3f3);
}
.val-parcerias__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(1020px + 2 * var(--container-pad));
}
.val-parcerias__groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
  width: 100%;
  max-width: 1020px;
}
.val-parcerias__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}
.val-parcerias__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: normal;
  color: var(--c-navy, #294458);
  text-align: left;
}
.val-parcerias__strip {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.val-parcerias__strip--institutional {
  width: 526px;
  max-width: min(526px, 100%);
}
.val-parcerias__strip--software {
  width: 236px;
  max-width: min(236px, 100%);
}
.val-parcerias__link {
  display: inline-flex;
  line-height: 0;
}

/* ============ RESPONSIVO ============ */
@media (max-width: 860px) {
  .val-move.section {
    padding-block: 48px;
  }
  .val-move__body {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .val-move__text {
    max-width: none;
  }
  .val-move__cards {
    max-width: 437px;
    margin-inline: auto;
  }
  .val-move__title {
    font-size: 28px;
  }
  .val-missao__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  /* flex-basis 200px is for desktop columns (width); in a column stack it
     forces short pillars (Visão) to 200px tall and inflates the visual gap. */
  .val-pillar {
    flex: 0 0 auto;
    width: 100%;
  }
  .val-parcerias__groups {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }
  .val-parcerias__group {
    align-items: flex-start;
    gap: 24px;
    width: 100%;
  }
}

@media (max-width: 520px) {
  .val-card {
    gap: 16px;
    padding: 20px;
  }
  .val-card__label {
    font-size: 18px;
  }
  .val-pillar__title {
    font-size: 24px;
    line-height: 32px;
  }
  .val-move__text p,
  .val-pillar__text,
  .val-pillar__list {
    font-size: 16px;
  }
}