/* KIWELL · seções abaixo da hero. Base: ds2 (kiwell-ds.css) + CSS da SIX.
   Aqui só o que o ds2 não tem. */

/* botão padrão do site: mesma altura e letra do botão da nav (45 px, 10 px) */
.btn.kw-btn-std {
  font-size: .625rem; letter-spacing: .18em;
  height: 45px; min-height: 45px; padding: 0 2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border-radius: var(--kw-r-0); white-space: nowrap;
}

/* entra animado só quando a seção aparece na tela */
.kw-manifesto:not(.animate) .ai,
.kw-manifesto:not(.animate) .kw-line > span { animation-play-state: paused; }

/* ---------- 3 · Manifesto ---------- */
.kw-manifesto { padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 8vw, 6.5rem); }
.kw-manifesto__in { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kw-manifesto__eyebrow { color: var(--kiwell-navy); margin: 0; }
.kw-manifesto__eyebrow::after { content: ""; display: block; width: 56px; height: 1px; background: var(--kiwell-navy); margin: 1.4rem auto 0; }
.kw-manifesto__title { color: var(--kiwell-navy); margin: 2rem 0 0; }
.kw-manifesto__title .kw-line--light > span { font-weight: 400; letter-spacing: -.03em; }
.kw-manifesto__text { max-width: 46rem; text-wrap: balance; margin: 1.75rem auto 2.75rem; }

/* "o movimento." se dissolve conforme o scroll (secoes.js escreve --v em cada letra).
   --f = quanto cada letra some no fim (0 em "o mo", 1 no ponto final);
   sem JS ou com movimento reduzido, --v = --f: estado final parado. */
.kw-dissolve { display: inline; }
.kw-nowrap { white-space: nowrap; }
.kw-ch {
  --v: var(--f);
  display: inline-block;
  opacity: calc(1 - .86 * var(--v));
  filter: blur(calc(var(--v) * 1.2px));
  transform: translateY(calc(var(--v) * -.06em));
  transition: opacity .12s linear, filter .12s linear, transform .12s linear;
  will-change: opacity, filter, transform;
}

/* ---------- 4 · Método: 4 cards em xadrez (sem linha do tempo, só entrada e hover) ----------
   Refino 10/11: borda igual à nav, escala de fonte nova do ds2 (H1 44, H2 26, corpo 15), cards com altura igual por linha.
   O card 03 (escuro) fica como foi aprovado: só herda a escala de fonte. */
.kw-metodo { } /* padding de cima e de baixo iguais: o --sec-y do .section do ds2 */
.kw-metodo:not(.animate) .ai { animation-play-state: paused; }
.kw-metodo .container.kw-metodo__wrap { max-width: none; } /* mesma borda da nav: só o padding var(--lado) do ds2 */
.kw-metodo__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kw-eyebrow-rule { color: var(--kiwell-navy); margin: 0; }
.kw-eyebrow-rule::after { content: ""; display: block; width: 56px; height: 1px; background: var(--kiwell-navy); margin-top: 1.4rem; }
.kw-metodo__title { color: var(--kiwell-navy); margin: 1.5rem 0 0; max-width: 24rem; text-wrap: balance; }
.kw-metodo__side { justify-self: end; max-width: 22rem; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.kw-metodo__lead { margin: 0 0 1.25rem; text-wrap: pretty; }

.kw-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(1rem, 1.6vw, 1.5rem); }
.kw-card { grid-column: span 6; position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.25rem); background: var(--kiwell-white); border: 1px solid var(--kw-line-light); border-radius: var(--kw-r-3); box-shadow: var(--kw-shadow-2); transition: translate var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.kw-card:nth-child(1), .kw-card:nth-child(4) { grid-column: span 5; }
.kw-card:nth-child(2), .kw-card:nth-child(3) { grid-column: span 7; }
.kw-card:hover { translate: 0 -4px; box-shadow: var(--kw-shadow-4); }
/* numeral: proporcional ao título novo, alinhado ao topo do quadrado do ícone */
.kw-card__num { position: absolute; top: clamp(1.5rem, 2.4vw, 2.25rem); right: clamp(1.5rem, 2.4vw, 2.25rem); font-family: var(--kiwell-font-title); font-size: clamp(2.25rem, 3.3vw, 3rem); line-height: .8; letter-spacing: -.04em; color: var(--ice-40); transition: color var(--dur-med) var(--ease-out); }
.kw-card__icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: var(--kw-r-2); background: var(--ice-20); color: var(--kiwell-navy); transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.kw-card__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kw-card__title { color: var(--kiwell-navy); margin: auto 0 .5rem; padding-top: 2rem; } /* título e texto: mesmo grupo, colados */
.kw-card__text { color: var(--kw-text-light-2); font-weight: 300; margin: 0 0 2.25rem; max-width: 36ch; text-wrap: pretty; } /* texto e chip: grupos diferentes, 36px */
.kw-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kw-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .7rem; border-radius: var(--kw-r-pill); background: var(--ice-12); color: var(--kiwell-navy); font-family: var(--kiwell-font-text); font-weight: 500; font-size: .6875rem; letter-spacing: .06em; }
.kw-chip svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kw-card__link { font-family: var(--kiwell-font-text); font-weight: 500; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--kiwell-white); text-decoration: none; border-bottom: 1px solid var(--ice-40); padding-bottom: .3rem; transition: border-color var(--dur-fast); }
.kw-card__link:hover { border-bottom-color: var(--kiwell-white); }

/* cards claros: quadrado do ícone mais limpo (borda fina) e hover do DS
   (.plan-card: sobe 6px, sombra 4, borda marinho 20; .kw-icon-btn: fundo marinho, ícone branco) */
.kw-card:not(.kw-card--escuro) { transition: translate var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.kw-card:not(.kw-card--escuro) { box-shadow: var(--kw-shadow-1); } /* repouso: borda + sombra leve do DS; a 4 só no hover */
.kw-card:not(.kw-card--escuro):hover { box-shadow: var(--kw-shadow-4); }
.kw-card:not(.kw-card--escuro) .kw-card__icon { background: var(--ice-12); box-shadow: inset 0 0 0 1px var(--navy-06); }
.kw-card:not(.kw-card--escuro):hover { translate: 0 -6px; border-color: var(--navy-20); }
.kw-card:not(.kw-card--escuro):hover .kw-card__icon { background: var(--kiwell-navy); color: var(--kiwell-white); box-shadow: none; }
.kw-card:not(.kw-card--escuro):hover .kw-card__num { color: var(--kiwell-ice); }

/* card escuro (03): elo com a seção Tecnologias */
.kw-card--escuro :focus-visible { outline-color: var(--kiwell-ice); } /* foco visível no marinho (a .kw-light pinta de marinho) */
.kw-card--escuro { background: var(--kiwell-navy); border-color: transparent; box-shadow: var(--kw-shadow-3); overflow: hidden; isolation: isolate; }
.kw-card--escuro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("grao-tecnologias.png") repeat 0 0 / 256px 256px; opacity: .16; pointer-events: none; }
.kw-card--escuro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 100% 100%, rgba(193, 217, 229, .16), transparent 60%); pointer-events: none; }
.kw-card--escuro .kw-card__num { color: var(--ice-20); }
.kw-card--escuro .kw-card__icon { background: var(--ice-12); color: var(--kiwell-ice); }
.kw-card--escuro .kw-card__title { color: var(--kiwell-white); }
.kw-card--escuro .kw-card__text { color: var(--ice-80); }
.kw-card--escuro .kw-chip { background: var(--ice-12); color: var(--kiwell-ice); }

@media (max-width: 899.98px) {
  .kw-metodo__head { grid-template-columns: 1fr; gap: 1.75rem; }
  .kw-metodo__side { justify-self: start; }
  .kw-cards { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .kw-card, .kw-card:nth-child(n) { grid-column: auto; }
  .kw-card__num { font-size: 2.25rem; }
  .kw-card__title { margin-top: 0; padding-top: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kw-manifesto .ai, .kw-manifesto .kw-line > span, .kw-metodo .ai { animation: none !important; opacity: 1 !important; transform: none !important; }
}