/* ==========================================================================
   KRYON — pages.css
   Secoes especificas de cada pagina: hero da home, bloco do mascote,
   contadores, timeline, galeria masonry, blog editorial e contato.
   Carregar depois de base.css e components.css.
   ========================================================================== */

/* ==========================================================================
   1. HOME — HERO FULLSCREEN
   ========================================================================== */
.hero {
  align-items: center;
  display: flex;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 3rem) calc(6rem + var(--diag));
  position: relative;
}

/* --- Camada de fotografia ------------------------------------------------ */
.hero__media {
  inset: -8% 0 0;           /* folga superior: o parallax desloca a imagem */
  position: absolute;
  z-index: -2;
}

.hero__media img {
  height: 116%;
  object-fit: cover;
  object-position: center 42%;
  width: 100%;
  /* Fotografia em tons frios, conforme direcao de arte */
  filter: saturate(0.55) contrast(1.06);
}

/* --- Veu institucional ---------------------------------------------------
   Dois gradientes sobrepostos: um vertical para legibilidade do texto e um
   diagonal em azul Kryon, que traz o corte do logotipo para dentro do hero.
   ------------------------------------------------------------------------- */
.hero__overlay {
  inset: 0;
  position: absolute;
  z-index: -1;
}

.hero__overlay::before {
  background: linear-gradient(
      104deg,
      var(--c-primary-900) 8%,
      rgba(29, 47, 79, 0.92) 42%,
      rgba(38, 60, 101, 0.62) 70%,
      rgba(38, 60, 101, 0.38) 100%
    );
  content: '';
  inset: 0;
  position: absolute;
}

.hero__overlay::after {
  background: linear-gradient(
    108deg,
    transparent 52%,
    color-mix(in srgb, var(--c-blue) 42%, transparent) 52%,
    color-mix(in srgb, var(--c-blue) 22%, transparent) 74%,
    transparent 74%
  );
  content: '';
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.5;
  position: absolute;
}

/* Corte diagonal na base, emendando com a secao seguinte */
.hero::after {
  background: var(--c-bg);
  bottom: -1px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  content: '';
  height: var(--diag);
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

/* --- Conteudo ------------------------------------------------------------ */
.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 1024px) {
  /* Duas colunas: texto a esquerda, espaco do mascote a direita */
  .hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }
}

/* Largura em px, e nao em `ch`: a unidade `ch` seria medida na fonte deste
   container (Poppins, 17px), resultando numa coluna estreita demais para uma
   headline de 72px em Montserrat. */
.hero__content {
  max-width: min(100%, 660px);
}

.hero h1 {
  color: var(--c-white);
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  text-shadow: 0 2px 30px rgba(11, 19, 35, 0.35);
}

.hero h1 .hl {
  color: var(--c-support);
  display: block;
}

.hero__sub {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-lead);
  line-height: 1.62;
  margin-top: 1.75rem;
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.75rem;
}

/* Selos de credibilidade abaixo dos CTAs */
/* --------------------------------------------------------------------------
   Grid de 3 colunas, e nao flex-wrap.
   Com flex + `max-width` por item, os tres selos somavam mais que a largura da
   coluna do hero (3 x 215px + gaps = 733px contra 660px disponiveis) e o
   terceiro caia para a linha de baixo. Em grid, cada selo recebe exatamente um
   terco do espaco e a linha nunca quebra.
   -------------------------------------------------------------------------- */
.hero__trust {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 1.35rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 3rem;
  padding-top: 1.75rem;
}

/* Abaixo disso a coluna ficaria estreita demais e os titulos quebrariam em
   duas linhas cada — melhor empilhar. */
@media (min-width: 700px) {
  .hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hero__trust li {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* Sem `white-space: nowrap`: por volta de 1024px a coluna do hero encolhe para
   ~150px por selo e "Ambientes críticos" transbordava por cima do vizinho.
   Deixando quebrar, o titulo passa a ocupar duas linhas dentro da propria
   celula — os tres selos continuam lado a lado, que era o objetivo. */
.hero__trust strong {
  color: var(--c-white);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.85rem + 0.55vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
  text-transform: none;
  text-wrap: balance;
}

/* --- Indicador de scroll ------------------------------------------------- */
.scroll-indicator {
  align-items: center;
  bottom: calc(var(--diag) + 1.5rem);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  font-size: 0.6875rem;
  gap: 0.75rem;
  left: 50%;
  letter-spacing: var(--ls-label);
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: color var(--t) var(--ease);
  z-index: 3;
}

.scroll-indicator:hover {
  color: var(--c-white);
}

.scroll-indicator__line {
  background: rgba(255, 255, 255, 0.35);
  height: 54px;
  overflow: hidden;
  position: relative;
  width: 2px;
}

/* Traco que desce em loop dentro da linha */
.scroll-indicator__line::after {
  animation: scroll-drop 2.1s var(--ease) infinite;
  background: var(--c-white);
  content: '';
  height: 22px;
  left: 0;
  position: absolute;
  top: -22px;
  width: 100%;
}

@keyframes scroll-drop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(76px);
  }
}

@media (max-width: 900px) {
  .scroll-indicator {
    display: none;
  }
}

/* ==========================================================================
   2. MASCOTE 3D (Spline)
   --------------------------------------------------------------------------
   Estrategia de carga (ver js/mascote.js):
   · A cena tem ~8,4 MB. Ela so e baixada em telas >=1024px e apenas quando a
     secao entra no viewport, via IntersectionObserver.
   · Abaixo de 1024px e com prefers-reduced-motion, fica o fallback estatico
     em WebP — sem WebGL, sem download pesado, sem quebra de layout.
   ========================================================================== */
.mascote {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

/* Halo radial atras do mascote, dando profundidade */
.mascote::before {
  background: radial-gradient(
    circle at 50% 55%,
    color-mix(in srgb, var(--c-blue) 34%, transparent) 0%,
    transparent 68%
  );
  content: '';
  inset: -12%;
  position: absolute;
  z-index: 0;
}

.mascote__stage {
  aspect-ratio: 3 / 4;
  position: relative;
  width: min(100%, 460px);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   O container ignora o mouse para nao roubar cliques dos CTAs que ficam
   atras/ao redor dele. O <spline-viewer> em si volta a receber eventos, de
   modo que o mouse tracking da cena continua funcionando exatamente na area
   onde o mascote e o elemento principal.
   -------------------------------------------------------------------------- */
.mascote__stage {
  pointer-events: none;
}

.mascote__stage spline-viewer {
  pointer-events: auto;
}

.mascote__stage spline-viewer,
.mascote__fallback {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.mascote__fallback {
  object-fit: contain;
  transition: opacity var(--t-slow) var(--ease);
}

/* Flutuacao suave do fallback, ecoando o "recepciona/flutua" da cena 3D */
.mascote__fallback {
  animation: mascote-float 5.5s ease-in-out infinite;
}

@keyframes mascote-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Quando o Spline assume, o fallback sai de cena */
.mascote__stage.is-3d-ready .mascote__fallback {
  opacity: 0;
  pointer-events: none;
}

/* O selo "Built with Spline" fica no shadow DOM e nao e exposto por ::part(),
   entao nao da para escondê-lo daqui. O tratamento (desligado por padrao, por
   causa da licenca) esta em js/mascote.js — ver OCULTAR_MARCA_SPLINE. */

/* Estado de carregamento */
/* Fica ABAIXO do palco, e nao por cima do mascote — o rotulo sobre os pes da
   ilustracao parecia erro de layout. */
.mascote__loading {
  bottom: -1.75rem;
  color: var(--c-body);
  font-size: var(--fs-label);
  left: 50%;
  letter-spacing: 0.08em;
  opacity: 0;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: opacity var(--t) var(--ease);
}

.mascote__stage.is-loading .mascote__loading {
  opacity: 1;
}

@media (max-width: 1023px) {
  /* Tablet/mobile: mascote menor, centralizado e sem WebGL */
  .mascote__stage {
    width: min(72%, 320px);
  }
}

@media (max-width: 600px) {
  .mascote__stage {
    width: min(60%, 240px);
  }
}

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

/* --- Bloco "Como trabalhamos": mascote + 4 cards de etapa ---------------- */
.processo__grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 1024px) {
  /* Desktop em 2 colunas, com destaque para o mascote */
  .processo__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  /* Mascote a esquerda, cards a direita */
  .processo__mascote {
    order: -1;
  }
}

.processo__steps {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.processo__step {
  align-items: flex-start;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  cursor: default;
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 1.65rem;
  position: relative;
  text-align: left;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease), background-color var(--t) var(--ease);
  width: 100%;
}

.processo__step:hover,
.processo__step:focus-visible,
.processo__step.is-active {
  border-color: color-mix(in srgb, var(--c-blue) 45%, var(--c-line));
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* Numero da etapa em paralelogramo — a pastilha do manual de marca */
.processo__num {
  align-items: center;
  background: var(--c-bg);
  color: var(--c-cta);
  display: flex;
  flex: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  height: 48px;
  justify-content: center;
  transform: skewX(-14deg);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
  width: 52px;
}

.processo__num span {
  transform: skewX(14deg);
}

.processo__step:hover .processo__num,
.processo__step:focus-visible .processo__num,
.processo__step.is-active .processo__num {
  background: var(--c-cta);
  color: var(--c-white);
}

.processo__step h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.3rem;
}

.processo__step p {
  color: var(--c-body);
  font-size: var(--fs-small);
  line-height: 1.62;
  margin: 0;
}

/* ==========================================================================
   2.1 PREVIEW DE SOLUÇÕES (home)
   --------------------------------------------------------------------------
   São 5 cards. Num auto-grid comum eles caem como 3 + 2, e a segunda linha
   fica com um buraco do tamanho de um card à direita.

   A base de 6 colunas resolve sem media query frágil: no desktop os três
   primeiros ocupam 2 colunas cada (linha cheia) e os dois últimos ocupam 3
   cada — também linha cheia, com cards maiores fechando o bloco.
   ========================================================================== */
.solucoes-preview {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .solucoes-preview {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* Dois por linha; o quinto, sozinho, ocupa a largura inteira */
  .solucoes-preview > * {
    grid-column: span 3;
  }

  .solucoes-preview > *:last-child {
    grid-column: span 6;
  }
}

@media (min-width: 1000px) {
  .solucoes-preview > * {
    grid-column: span 2;
  }

  .solucoes-preview > *:nth-last-child(2),
  .solucoes-preview > *:last-child {
    grid-column: span 3;
  }

  /* Os dois cards largos ficariam desproporcionalmente altos mantendo 16:9.
     Um recorte mais panorâmico iguala a altura visual das duas linhas. */
  .solucoes-preview > *:nth-last-child(-n + 2) .card__media {
    aspect-ratio: 21 / 9;
  }
}

/* ==========================================================================
   3. CONTADORES ANIMADOS
   ========================================================================== */
.stats {
  position: relative;
}

.stats__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.stat {
  border-left: 3px solid color-mix(in srgb, var(--c-blue) 55%, transparent);
  padding-left: clamp(1.25rem, 2vw, 2rem);
  position: relative;
}

.stat__value {
  align-items: baseline;
  color: var(--c-white);
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.8rem + 3.2vw, 4.5rem);
  font-weight: 800;
  gap: 0.06em;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* Azul claro: o azul puro da marca só alcança 2.6:1 sobre o azul institucional
   do fundo — invisível para quem tem baixa visão. */
.stat__suffix {
  color: var(--c-blue-light);
  font-size: 0.55em;
}

.stat__label {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  line-height: 1.5;
  margin-top: 0.85rem;
  max-width: 22ch;
}

/* ==========================================================================
   4. FAIXA DE CTA FINAL
   ========================================================================== */
.cta-band {
  background: linear-gradient(
    118deg,
    var(--c-primary) 0%,
    var(--c-primary-600) 48%,
    var(--c-cta) 100%
  );
  color: var(--c-white);
  overflow: hidden;
  position: relative;
}

/* Blocos diagonais decorativos, no espirito das pecas de rede social */
.cta-band::before {
  background: rgba(255, 255, 255, 0.07);
  clip-path: polygon(72% 0, 100% 0, 100% 100%, 52% 100%);
  content: '';
  inset: 0;
  position: absolute;
}

.cta-band__inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.3fr) auto;
  }
}

.cta-band h2 {
  color: var(--c-white);
  max-width: 20ch;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-lead);
  margin-top: 1.1rem;
  max-width: 48ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ==========================================================================
   5. EMPRESA — valores e timeline
   ========================================================================== */
.valores__grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* --- Timeline ------------------------------------------------------------ */
.timeline {
  position: relative;
}

/* Trilho vertical */
.timeline::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--c-support) 8%,
    var(--c-support) 92%,
    transparent 100%
  );
  content: '';
  left: 9px;
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
}

.timeline__item {
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
  padding-left: 3rem;
  position: relative;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* Marcador losango, girado 45deg — geometria da marca */
.timeline__item::before {
  background: var(--c-white);
  border: 3px solid var(--c-cta);
  content: '';
  height: 20px;
  left: 0;
  position: absolute;
  top: 4px;
  transform: rotate(45deg);
  transition: background-color var(--t) var(--ease),
    transform var(--t) var(--ease);
  width: 20px;
}

.timeline__item:hover::before {
  background: var(--c-cta);
  transform: rotate(45deg) scale(1.15);
}

.timeline__year {
  color: var(--c-cta);
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.timeline__item h3 {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.timeline__item p {
  color: var(--c-body);
  font-size: var(--fs-small);
  line-height: 1.68;
  max-width: 56ch;
}

@media (min-width: 900px) {
  .timeline--split .timeline__item {
    padding-left: 0;
    width: 50%;
  }

  .timeline--split::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline--split .timeline__item:nth-child(odd) {
    padding-right: 3.5rem;
    text-align: right;
  }

  .timeline--split .timeline__item:nth-child(odd)::before {
    left: auto;
    right: -10px;
  }

  .timeline--split .timeline__item:nth-child(even) {
    margin-left: 50%;
    padding-left: 3.5rem;
  }

  .timeline--split .timeline__item:nth-child(even)::before {
    left: -10px;
  }

  .timeline--split .timeline__item:nth-child(odd) p {
    margin-left: auto;
  }
}

/* --- Bloco de historia: titulo a esquerda, texto corrido a direita ------- */
.historia {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}

@media (min-width: 900px) {
  .historia {
    align-items: start;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  /* O titulo acompanha o texto durante a rolagem do bloco */
  .historia__titulo {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
  }
}

.historia__titulo .section-head {
  margin-bottom: 0;
}

.historia__texto {
  max-width: 62ch;
}

/* --- Bloco missao / visao ------------------------------------------------ */
.mv-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.mv-card {
  background: var(--c-white);
  border-radius: var(--r-card);
  border-top: 4px solid var(--c-blue);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
}

.mv-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: 0.9rem;
}

.mv-card p {
  color: var(--c-body);
  font-size: var(--fs-small);
  line-height: 1.72;
}

/* Imagem com recorte diagonal, usada nas paginas institucionais */
.clip-figure {
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
}

.clip-figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.clip-figure--diag {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
}

/* Cartao de dado sobreposto a imagem */
.figure-badge {
  background: var(--c-primary);
  border-radius: var(--r-card);
  bottom: clamp(-1rem, -2vw, -2rem);
  box-shadow: var(--shadow-hover);
  color: var(--c-white);
  left: clamp(-1rem, -2vw, -2rem);
  max-width: 260px;
  padding: 1.5rem 1.75rem;
  position: absolute;
}

.figure-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.figure-badge span {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-label);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .figure-badge {
    bottom: 1rem;
    left: 1rem;
    padding: 1.15rem 1.35rem;
  }
}

/* ==========================================================================
   6. SOLUCOES — cards grandes
   ========================================================================== */
/* Pilha de cards de solucao, um por linha, com respiro generoso entre eles */
.solucoes-lista {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
}

.solucao-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  display: grid;
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.solucao-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

@media (min-width: 860px) {
  .solucao-card {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  /* Alterna o lado da imagem, criando ritmo na pagina */
  .solucao-card:nth-child(even) .solucao-card__media {
    order: 2;
  }
}

.solucao-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.solucao-card__media img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  width: 100%;
}

.solucao-card:hover .solucao-card__media img {
  transform: scale(1.05);
}

/* Corte diagonal na juncao entre foto e texto */
@media (min-width: 860px) {
  .solucao-card__media::after {
    background: var(--c-white);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    content: '';
    height: 100%;
    position: absolute;
    right: -1px;
    top: 0;
    width: 46px;
  }

  .solucao-card:nth-child(even) .solucao-card__media::after {
    clip-path: polygon(0 0, 100% 0, 0 100%);
    left: -1px;
    right: auto;
  }
}

.solucao-card__body {
  align-content: center;
  display: grid;
  gap: 1rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
}

.solucao-card__body h2,
.solucao-card__body h3 {
  font-size: var(--fs-h3);
}

.solucao-card__list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.solucao-card__list li {
  align-items: flex-start;
  color: var(--c-body);
  display: flex;
  font-size: var(--fs-small);
  gap: 0.65rem;
  line-height: 1.6;
}

/* Marcador em diagonal no lugar do bullet redondo */
.solucao-card__list li::before {
  background: var(--c-blue);
  content: '';
  flex: none;
  height: 10px;
  margin-top: 0.5em;
  transform: skewX(-20deg);
  width: 10px;
}

/* ==========================================================================
   7. SEGMENTOS — cards grandes com foto e icone
   ========================================================================== */
.segmento-card {
  border-radius: var(--r-card);
  display: block;
  isolation: isolate;
  min-height: 380px;
  overflow: hidden;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  position: relative;
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.segmento-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.segmento-card img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform var(--t-slow) var(--ease);
  width: 100%;
  z-index: -2;
}

.segmento-card:hover img {
  transform: scale(1.07);
}

/* Veu azul: garante contraste do texto e unifica a fotografia */
.segmento-card::before {
  background: linear-gradient(
    170deg,
    rgba(22, 35, 61, 0.35) 0%,
    rgba(22, 35, 61, 0.72) 52%,
    rgba(22, 35, 61, 0.94) 100%
  );
  content: '';
  inset: 0;
  position: absolute;
  transition: background-color var(--t) var(--ease);
  z-index: -1;
}

/* Corte diagonal no rodape do card, revelando o azul Kryon */
.segmento-card::after {
  background: var(--c-blue);
  bottom: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  content: '';
  height: 0;
  left: 0;
  position: absolute;
  transition: height var(--t) var(--ease);
  width: 100%;
  z-index: -1;
}

.segmento-card:hover::after {
  height: 34px;
}

.segmento-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  min-height: inherit;
  position: relative;
}

.segmento-card__icon {
  align-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  color: var(--c-white);
  display: inline-flex;
  height: 54px;
  justify-content: center;
  margin-bottom: auto;
  transition: background-color var(--t) var(--ease);
  width: 54px;
}

.segmento-card:hover .segmento-card__icon {
  background: var(--c-blue);
  border-color: var(--c-blue);
}

.segmento-card__icon svg {
  height: 26px;
  width: 26px;
}

.segmento-card h2,
.segmento-card h3 {
  color: var(--c-white);
  font-size: var(--fs-h3);
  margin-top: 1.5rem;
}

.segmento-card p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-small);
  line-height: 1.62;
  margin-top: 0.65rem;
}

/* ==========================================================================
   8. PROJETOS — filtros, masonry e cards
   ========================================================================== */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

.filtro {
  background: transparent;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-primary);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  transition: background-color var(--t) var(--ease),
    border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.filtro:hover {
  border-color: var(--c-blue);
  color: var(--c-cta);
}

.filtro[aria-pressed='true'] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

/* opacity 0.6 misturava o numero com o fundo e reprovava em contraste */
.filtro__count {
  font-variant-numeric: tabular-nums;
  margin-left: 0.4rem;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Masonry em CSS columns: mantem o ritmo irregular tipico de galeria sem
   depender de JS de posicionamento. `break-inside: avoid` impede que um card
   seja partido entre duas colunas.
   -------------------------------------------------------------------------- */
.masonry {
  column-gap: var(--gutter);
  columns: 1;
}

@media (min-width: 640px) {
  .masonry {
    columns: 2;
  }
}

@media (min-width: 1100px) {
  .masonry {
    columns: 3;
  }
}

.projeto-card {
  background: var(--c-primary-900);
  border: 0;
  border-radius: var(--r-card);
  break-inside: avoid;
  cursor: zoom-in;
  display: block;
  margin-bottom: var(--gutter);
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    opacity var(--t) var(--ease);
  width: 100%;
}

.projeto-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.projeto-card img {
  display: block;
  transition: transform var(--t-slow) var(--ease), filter var(--t) var(--ease);
  width: 100%;
  filter: saturate(0.72);
}

.projeto-card:hover img {
  filter: saturate(1);
  transform: scale(1.05);
}

.projeto-card__overlay {
  background: linear-gradient(
    180deg,
    transparent 30%,
    rgba(11, 19, 35, 0.55) 62%,
    rgba(11, 19, 35, 0.92) 100%
  );
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: flex-end;
  padding: clamp(1.25rem, 2vw, 1.85rem);
  position: absolute;
}

/* Fundo em --c-cta e nao --c-blue: o texto tem 11px em bold, e branco sobre o
   azul puro da marca fica em 4.17:1 — abaixo do mínimo AA. */
.projeto-card__tag {
  align-self: flex-start;
  background: var(--c-cta);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.85rem;
  text-transform: uppercase;
  transform: skewX(-14deg);
}

.projeto-card__tag span {
  display: block;
  transform: skewX(14deg);
}

.projeto-card__title {
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.projeto-card__meta {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-label);
  margin-top: 0.35rem;
}

/* Lupa que aparece no hover */
.projeto-card__zoom {
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  color: var(--c-white);
  display: flex;
  height: 44px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  right: clamp(1.25rem, 2vw, 1.85rem);
  top: clamp(1.25rem, 2vw, 1.85rem);
  transform: scale(0.8);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  width: 44px;
}

.projeto-card:hover .projeto-card__zoom,
.projeto-card:focus-visible .projeto-card__zoom {
  opacity: 1;
  transform: scale(1);
}

/* Card oculto pelo filtro */
.projeto-card.is-filtered {
  display: none;
}

/* Mensagem de "nenhum resultado" */
/* 17–21px sem bold ainda conta como texto normal (large text so a partir
   de 24px), entao --c-muted nao serve aqui. */
.filtro-vazio {
  color: var(--c-body);
  display: none;
  font-size: var(--fs-lead);
  padding-block: 3rem;
  text-align: center;
}

.filtro-vazio.is-visible {
  display: block;
}

/* ==========================================================================
   9. BLOG — layout editorial
   ========================================================================== */
.post-destaque {
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  display: grid;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.post-destaque:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

@media (min-width: 900px) {
  .post-destaque {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.post-destaque__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.post-destaque__media img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  width: 100%;
}

.post-destaque:hover .post-destaque__media img {
  transform: scale(1.05);
}

.post-destaque__body {
  align-content: center;
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
}

.post-destaque__body h2 {
  font-size: var(--fs-h3);
}

/* --- Card de post -------------------------------------------------------- */
.post-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.post-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.post-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-card__media img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  width: 100%;
}

.post-card:hover .post-card__media img {
  transform: scale(1.06);
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.4rem, 1rem + 1vw, 1.9rem);
}

.post-card__body h3 {
  font-size: 1.1875rem;
  transition: color var(--t-fast) var(--ease);
}

.post-card:hover h3 {
  color: var(--c-cta);
}

.post-card__excerpt {
  color: var(--c-body);
  font-size: var(--fs-small);
  line-height: 1.66;
}

/* Metadados do post — --c-body pelo mesmo motivo do .form-note: 13px conta
   como texto normal e --c-muted não alcança 4.5:1. */
.post-meta {
  align-items: center;
  color: var(--c-body);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-label);
  gap: 0.55rem;
}

.post-meta__cat {
  background: color-mix(in srgb, var(--c-blue) 14%, transparent);
  border-radius: var(--r-sm);
  color: var(--c-link);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.65rem;
  text-transform: uppercase;
}

.post-meta time {
  font-variant-numeric: tabular-nums;
}

/* --- Artigo completo ----------------------------------------------------- */

/* Barra de progresso de leitura, fixada logo abaixo do header */
.leitura-progresso {
  background: color-mix(in srgb, var(--c-support) 45%, transparent);
  height: 3px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: calc(var(--z-header) + 1);
}

.leitura-progresso__barra {
  background: linear-gradient(90deg, var(--c-cta), var(--c-blue));
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  width: 100%;
}

/* Metadados sob o título do post, dentro do hero escuro */
.artigo__meta {
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-label);
  gap: 0.55rem;
  margin-top: 1.85rem;
}

.artigo__meta time {
  font-variant-numeric: tabular-nums;
}

/* Capa do post, sobreposta ao corte diagonal do hero */
.artigo__capa {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  margin-top: calc(-1 * clamp(2rem, 5vw, 5rem));
  overflow: hidden;
}

.artigo__capa img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.artigo {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4.5rem);
}

@media (min-width: 1080px) {
  .artigo {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.artigo__conteudo {
  font-size: 1.0625rem;
  line-height: 1.85;
  max-width: 72ch;
}

.artigo__conteudo > * + * {
  margin-top: 1.35em;
}

.artigo__conteudo h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  margin-top: 2.5em;
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.artigo__conteudo h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin-top: 2em;
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.artigo__conteudo ul,
.artigo__conteudo ol {
  display: grid;
  gap: 0.7rem;
  padding-left: 0;
}

.artigo__conteudo li {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
}

.artigo__conteudo ul li::before {
  background: var(--c-blue);
  content: '';
  flex: none;
  height: 9px;
  margin-top: 0.62em;
  transform: skewX(-20deg);
  width: 9px;
}

.artigo__conteudo ol {
  counter-reset: passo;
}

.artigo__conteudo ol li::before {
  color: var(--c-cta);
  content: counter(passo);
  counter-increment: passo;
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  min-width: 1.4em;
}

/* Citacao destacada */
.artigo__conteudo blockquote {
  border-left: 4px solid var(--c-blue);
  color: var(--c-primary);
  font-size: 1.1875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  padding: 0.5rem 0 0.5rem 1.75rem;
}

/* Caixa de alerta tecnico */
.callout {
  background: color-mix(in srgb, var(--c-blue) 8%, var(--c-white));
  border: 1px solid color-mix(in srgb, var(--c-blue) 25%, transparent);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
}

.callout strong {
  color: var(--c-primary);
  display: block;
  font-family: var(--font-display);
  margin-bottom: 0.4rem;
}

.callout p {
  font-size: var(--fs-small);
  line-height: 1.7;
  margin: 0;
}

/* --- Barra lateral do artigo --------------------------------------------- */
.artigo__aside {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1080px) {
  .artigo__aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.sumario {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 1.6rem;
}

.sumario h2 {
  font-size: 0.8125rem;
  letter-spacing: var(--ls-label);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.sumario ol {
  display: grid;
  gap: 0.7rem;
}

.sumario a {
  color: var(--c-body);
  display: block;
  font-size: var(--fs-small);
  line-height: 1.45;
  padding-left: 0.85rem;
  position: relative;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.sumario a::before {
  background: var(--c-support);
  content: '';
  height: 7px;
  left: 0;
  position: absolute;
  top: 0.55em;
  transform: skewX(-20deg);
  transition: background-color var(--t-fast) var(--ease);
  width: 7px;
}

.sumario a:hover,
.sumario a.is-current {
  color: var(--c-cta);
}

.sumario a:hover::before,
.sumario a.is-current::before {
  background: var(--c-cta);
}

/* Card de conversao na lateral */
.aside-cta {
  background: var(--c-primary);
  border-radius: var(--r-card);
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  padding: 1.75rem;
  position: relative;
}

.aside-cta::before {
  background: var(--c-cta);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: '';
  height: 70px;
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  opacity: 0.55;
}

.aside-cta h2 {
  color: var(--c-white);
  font-size: 1.125rem;
  margin-bottom: 0.7rem;
  position: relative;
}

.aside-cta p {
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-bottom: 1.35rem;
}

/* ==========================================================================
   10. CONTATO
   ========================================================================== */
.contato__grid {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
}

@media (min-width: 1000px) {
  .contato__grid {
    align-items: start;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.form-card {
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  position: relative;
}

.form-grid {
  display: grid;
  gap: 1.35rem;
}

@media (min-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid .field--full {
    grid-column: 1 / -1;
  }
}

/* Aceite de LGPD: caixa de selecao alinhada ao topo da primeira linha */
.field__consent {
  align-items: flex-start;
  color: var(--c-body);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-small);
  gap: 0.75rem;
  line-height: 1.55;
}

.field__consent input[type='checkbox'] {
  accent-color: var(--c-cta);
  flex: none;
  height: 20px;
  margin-top: 0.15em;
  width: 20px;
}

.form-acoes {
  margin-top: 1.75rem;
}

.form-note {
  margin-top: 1rem;
}

/* O mascote na pagina de contato entra abaixo dos canais diretos e some em
   telas medias, onde a coluna vira estreita demais para ele. */
.contato__mascote {
  margin-top: 2.5rem;
}

.contato__mascote .mascote__stage {
  width: min(100%, 340px);
}

@media (max-width: 999px) {
  .contato__mascote {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10.1 Retorno do formulário: painel de sucesso e alternativa por WhatsApp
   -------------------------------------------------------------------------- */
.form-sucesso {
  background: var(--c-white);
  border: 1px solid color-mix(in srgb, var(--c-success) 35%, transparent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  text-align: center;
}

.form-sucesso:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 4px;
}

.form-sucesso__icone {
  align-items: center;
  background: color-mix(in srgb, var(--c-success) 12%, transparent);
  border-radius: 50%;
  color: var(--c-success);
  display: inline-flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 1.5rem;
  width: 64px;
}

.form-sucesso__icone svg {
  height: 30px;
  width: 30px;
}

.form-sucesso h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.85rem;
}

.form-sucesso p {
  color: var(--c-body);
  line-height: 1.7;
  margin-inline: auto;
  max-width: 46ch;
}

.form-sucesso__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2rem;
}

.form-sucesso__nota {
  color: var(--c-body);
  font-size: var(--fs-label);
  margin-top: 1.25rem;
}

/* Só aparece quando o envio falha (js/contato.js) */
.form-whatsapp {
  margin-top: 1.25rem;
}

/* Cartoes de canal de contato */
.contato-canais {
  display: grid;
  gap: 1rem;
}

.canal {
  align-items: flex-start;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  display: flex;
  gap: 1.15rem;
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.canal:hover {
  border-color: color-mix(in srgb, var(--c-blue) 45%, var(--c-line));
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.canal__icon {
  align-items: center;
  background: color-mix(in srgb, var(--c-blue) 12%, transparent);
  border-radius: 12px;
  color: var(--c-cta);
  display: inline-flex;
  flex: none;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.canal__icon svg {
  height: 22px;
  width: 22px;
}

.canal h3 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.canal p {
  color: var(--c-body);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.canal--whatsapp .canal__icon {
  background: rgba(37, 211, 102, 0.14);
  color: #128c4a;
}

/* Mapa incorporado */
.mapa {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}

.mapa iframe {
  aspect-ratio: 16 / 10;
  background: var(--c-support);
  border: 0;
  display: block;
  filter: grayscale(0.35) contrast(1.05);
  width: 100%;
}

/* Sem JS o iframe fica vazio; o link do <noscript> assume o lugar */
.mapa__fallback {
  padding: 2rem;
  text-align: center;
}

@media (min-width: 1000px) {
  .mapa iframe {
    aspect-ratio: 21 / 9;
  }
}

/* ==========================================================================
   11. PAGINA 404 / ESTADOS VAZIOS
   ========================================================================== */
.estado-vazio {
  padding-block: clamp(4rem, 8vw, 8rem);
  text-align: center;
}

.estado-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Mesmo decorativo e com aria-hidden, o "404" continua sendo texto visível e
   entra na regra de contraste. Com 176px em bold o mínimo AA é 3:1, e o azul
   de apoio da marca chegava a apenas 1.24:1 — ilegível para baixa visão.
   Este tom passa em 3.3:1 e ainda lê como marca d'água atrás do título.
   -------------------------------------------------------------------------- */
.estado-vazio__code {
  color: #7186a6;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* ==========================================================================
   12. PÁGINAS INTERNAS DE SOLUÇÃO (/solucoes/*)
   Blocos usados pelas 5 páginas. Cards, botões e tipografia vêm dos arquivos
   anteriores — aqui ficam só os layouts que ainda não existiam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 Hero: texto à esquerda, visual à direita
   -------------------------------------------------------------------------- */
.solucao-hero {
  background: linear-gradient(
    118deg,
    var(--c-primary-900) 0%,
    var(--c-primary) 52%,
    var(--c-primary-600) 100%
  );
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem))
    calc(clamp(3rem, 2rem + 4vw, 6rem) + var(--diag));
  position: relative;
}

/* Bloco diagonal em azul Kryon atravessando o hero */
.solucao-hero::before {
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, var(--c-blue) 55%, transparent) 100%
  );
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 34% 100%);
  content: '';
  inset: 0;
  opacity: 0.5;
  position: absolute;
}

/* Emenda diagonal com a seção seguinte */
.solucao-hero::after {
  background: var(--c-bg);
  bottom: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  content: '';
  height: var(--diag);
  left: 0;
  position: absolute;
  width: 100%;
}

.solucao-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 3vw, 3.5rem);
  position: relative;
  z-index: 1;
}

@media (min-width: 1000px) {
  .solucao-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.solucao-hero h1 {
  color: var(--c-white);
  font-size: var(--fs-h1);
  margin-top: 0.35rem;
}

.solucao-hero__sub {
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--fs-lead);
  line-height: 1.62;
  margin-top: 1.5rem;
  max-width: 56ch;
}

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

.solucao-hero .breadcrumbs {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1.5rem;
}

/* Visual do hero: foto recortada em diagonal com o mascote sobreposto */
.solucao-hero__visual {
  position: relative;
}

.solucao-hero__figura {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-hover);
  clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
  overflow: hidden;
}

.solucao-hero__figura img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* O mascote aqui é decorativo: pointer-events off para não roubar cliques */
.solucao-hero__mascote {
  animation: mascote-float 5.5s ease-in-out infinite;
  bottom: -6%;
  left: -7%;
  pointer-events: none;
  position: absolute;
  width: clamp(110px, 15vw, 190px);
  z-index: 2;
}

@media (max-width: 999px) {
  .solucao-hero__mascote {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12.2 Bloco de duas colunas (texto + imagem)
   -------------------------------------------------------------------------- */
.bloco-duplo {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
}

@media (min-width: 900px) {
  .bloco-duplo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Inverte a ordem visual sem mexer no HTML: a leitura por voz e por teclado
     continua seguindo a ordem do código. */
  .bloco-duplo--invertido .bloco-duplo__visual {
    order: -1;
  }
}

.bloco-duplo__texto p {
  max-width: 60ch;
}

.bloco-duplo__visual {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  overflow: hidden;
}

.bloco-duplo__visual img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* --------------------------------------------------------------------------
   12.3 Grid de aplicações (10–12 itens com ícone)
   -------------------------------------------------------------------------- */
.aplicacoes {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
}

.aplicacao {
  align-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.aplicacao:hover {
  border-color: color-mix(in srgb, var(--c-blue) 45%, var(--c-line));
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

.aplicacao__icone {
  align-items: center;
  background: color-mix(in srgb, var(--c-blue) 12%, transparent);
  border-radius: 10px;
  color: var(--c-cta);
  display: inline-flex;
  flex: none;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.aplicacao__icone svg {
  height: 20px;
  width: 20px;
}

.aplicacao span {
  color: var(--c-primary);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   12.4 Timeline horizontal (8–9 etapas)
   --------------------------------------------------------------------------
   Trilho rolável na horizontal, com scroll-snap. Com 9 etapas não existe
   largura de tela que caiba tudo em linha sem espremer o texto, então a
   rolagem é assumida como parte do desenho — e o container recebe tabindex
   com role/aria-label para que quem navega por teclado consiga rolá-lo.
   -------------------------------------------------------------------------- */
.etapas {
  margin-inline: calc(var(--pad-x) * -1);
  overflow-x: auto;
  padding-bottom: 1.25rem;
  padding-inline: var(--pad-x);
  /* Sem `scroll-padding`, o snap alinha a primeira etapa com a borda do
     scrollport e engole o padding do container: a etapa 01 nascia colada na
     borda da tela. Recuar o snapport pelo mesmo valor do padding resolve, e
     de quebra impede que as etapas seguintes parem meio escondidas. */
  scroll-padding-inline: var(--pad-x);
  scroll-snap-type: x proximity;
  scrollbar-color: var(--c-support) transparent;
  scrollbar-width: thin;
}

.etapas:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 4px;
}

/* 160px é a largura em que as 8 etapas ainda cabem sem rolagem num container
   de 1440px. Com 9 etapas o trilho passa a rolar — e aí a rolagem é mesmo
   inevitável sem espremer o texto. */
.etapas__trilho {
  display: grid;
  gap: 0;
  grid-auto-columns: minmax(160px, 1fr);
  grid-auto-flow: column;
  min-width: 100%;
}

.etapa {
  padding: 0 1rem;
  position: relative;
  scroll-snap-align: start;
}

.etapa:first-child {
  padding-left: 0;
}

/* Linha que conecta as etapas, atrás dos marcadores */
.etapa::before {
  background: var(--c-support);
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 17px;
}

.etapa:first-child::before {
  left: 18px;
}

.etapa:last-child::before {
  right: calc(100% - 18px);
}

/* Marcador numerado em losango — geometria da marca */
.etapa__marcador {
  align-items: center;
  background: var(--c-white);
  border: 2px solid var(--c-cta);
  color: var(--c-cta);
  display: flex;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
  height: 36px;
  justify-content: center;
  margin-bottom: 1.15rem;
  position: relative;
  transform: rotate(45deg);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
  width: 36px;
  z-index: 1;
}

.etapa__marcador span {
  transform: rotate(-45deg);
}

.etapa:hover .etapa__marcador {
  background: var(--c-cta);
  color: var(--c-white);
}

.etapa h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.etapa p {
  color: var(--c-body);
  font-size: 0.875rem;
  line-height: 1.55;
}

.etapas-dica {
  color: var(--c-body);
  font-size: var(--fs-label);
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   12.5 Engenharia Kryon: mascote central + cards com marca de verificação
   -------------------------------------------------------------------------- */
.engenharia {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}

@media (min-width: 1080px) {
  /* Coluna de cards / mascote / coluna de cards */
  .engenharia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1fr);
  }

  .engenharia__mascote {
    order: 2;
  }

  .engenharia__coluna--fim {
    order: 3;
  }
}

.engenharia__coluna {
  display: grid;
  gap: 0.85rem;
}

.check-card {
  align-items: flex-start;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  display: flex;
  gap: 0.9rem;
  padding: 1.25rem 1.4rem;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.check-card:hover,
.check-card:focus-within,
.check-card.is-active {
  border-color: color-mix(in srgb, var(--c-blue) 45%, var(--c-line));
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.check-card__check {
  align-items: center;
  background: color-mix(in srgb, var(--c-success) 12%, transparent);
  border-radius: 50%;
  color: var(--c-success);
  display: inline-flex;
  flex: none;
  height: 28px;
  justify-content: center;
  margin-top: 2px;
  width: 28px;
}

.check-card__check svg {
  height: 15px;
  width: 15px;
}

.check-card h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.check-card p {
  color: var(--c-body);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12.6 Tecnologias aplicadas: imagem + lista
   -------------------------------------------------------------------------- */
.tec-lista {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
  margin-top: 1.75rem;
}

.tec-lista li {
  align-items: center;
  background: var(--c-white);
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-primary);
  display: flex;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  transition: transform var(--t) var(--ease);
}

.tec-lista li:hover {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   12.7 CTA final com mascote apontando para o botão
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .cta-band--mascote .cta-band__inner {
    align-items: center;
    grid-template-columns: auto minmax(0, 1.2fr) auto;
  }
}

.cta-band__mascote {
  flex: none;
  width: clamp(120px, 14vw, 200px);
}

.cta-band__mascote img {
  animation: mascote-float 5.5s ease-in-out infinite;
  width: 100%;
}

@media (max-width: 899px) {
  .cta-band__mascote {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12.8 Cards de navegação entre soluções
   -------------------------------------------------------------------------- */
.solucoes-links {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.solucao-link {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  position: relative;
  text-decoration: none;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.solucao-link:hover {
  border-color: color-mix(in srgb, var(--c-blue) 45%, var(--c-line));
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* Recorte diagonal no canto, assinatura da marca */
.solucao-link::before {
  background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-primary) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  content: '';
  height: 48px;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity var(--t) var(--ease);
  width: 48px;
}

.solucao-link:hover::before {
  opacity: 1;
}

.solucao-link h3 {
  font-size: 1.0625rem;
}

.solucao-link p {
  color: var(--c-body);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.solucao-link__seta {
  align-items: center;
  color: var(--c-link);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.solucao-link__seta svg {
  height: 15px;
  transition: transform var(--t) var(--ease);
  width: 15px;
}

.solucao-link:hover .solucao-link__seta svg {
  transform: translateX(4px);
}