/* ============================================================
   Grupo Ecopartners — sistema de design
   Paleta da marca na linguagem estrutural do Tiendanube:
   tipo grande, copy curta, botao pilula, muito respiro.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* marca */
  --navy:        #1A2643;
  --blue:        #1C3661;
  --blue-royal:  #244F8E;
  --green:       #23D962;
  --green-deep:  #15B94E;
  --green-water: #29C49A;

  /* superficies */
  --bg:          #F6FAF8;
  --mint:        #E7F5EC;
  --surface:     #FFFFFF;
  --border:      #E4E7EB;

  /* texto */
  --ink:         #1A2643;
  --ink-soft:    #5A6270;
  --ink-mute:    #8A9199;
  --on-dark:     #FFFFFF;
  --on-dark-soft: rgba(255,255,255,.78);

  /* o degrade oficial da marca */
  --gradient: linear-gradient(145deg, #1C3661 38%, #23D962 100%);

  /* forma */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(26,38,67,.05);
  --shadow-md: 0 10px 30px rgba(26,38,67,.08);
  --shadow-lg: 0 24px 60px rgba(26,38,67,.12);

  --wrap: 1200px;
  --gut: 24px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 'clip' contem o estouro lateral igual ao 'hidden', mas sem virar um
     container de rolagem -- e e isso que faz o position:sticky voltar a
     funcionar (a jornada da home depende dele). O 'hidden' acima fica de
     reserva para navegador que nao conhece 'clip'. */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

/* ---------- tipografia ---------- */
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.25; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-soft); line-height: 1.55; }
.hl { color: var(--green); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 116px); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
.section--mint { background: var(--mint); }
.section--bg   { background: var(--bg); }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--navy .lead { color: var(--on-dark-soft); }

.head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.head--center { margin-inline: auto; text-align: center; }
.head h2 + .lead { margin-top: 18px; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .98rem; letter-spacing: -.01em;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary { background: var(--green); color: var(--navy); box-shadow: 0 6px 18px rgba(35,217,98,.32); }
.btn--primary:hover { background: var(--green-deep); color: #fff; box-shadow: 0 12px 26px rgba(35,217,98,.38); }

.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--blue); }

.btn--white { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.btn--white:hover { box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--navy); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn--lg { padding: 18px 38px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--border); box-shadow: 0 4px 20px rgba(26,38,67,.05); }
.nav__inner { display: flex; align-items: center; gap: 18px; height: 78px; }
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 38px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__links a {
  padding: 9px 13px; border-radius: var(--r-pill);
  font-size: .94rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.nav__links a:hover { color: var(--navy); background: var(--bg); }
.nav__cta { flex: none; }
.nav__cta .btn { padding: 13px 24px; font-size: .94rem; }

/* O CTA existe duas vezes no markup: dentro de .nav__links (para o menu
   mobile) e em .nav__cta (para o desktop). Cada breakpoint mostra so um. */
.nav__links > .btn { display: none; }

/* Dentro do menu o botao e um <a>, entao `.nav__links a` (0,1,1) vencia
   `.btn--primary` (0,1,0) e o texto saia cinza sobre o verde. Estes dois
   seletores tem 0,2,0 e devolvem o branco. */
.nav__links > .btn--primary,
.nav__links > .btn--primary:hover,
.nav__links > .btn--primary:focus { color: #fff; }
.nav__burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; border-radius: var(--r-sm);
}
.nav__burger span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  margin: 5px auto; border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--gradient); color: var(--on-dark); overflow: hidden; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: url('../img/marca/padronagem.png') right -12% top 50% / 62% no-repeat;
  opacity: .07; pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  /* a coluna da imagem e a maior: a pessoa domina o hero */
  display: grid; grid-template-columns: 1fr 1.18fr; align-items: center; gap: 40px;
  padding-block: clamp(56px, 7vw, 92px);
}
.hero h1 { color: #fff; max-width: 16ch; }
.hero .lead { color: var(--on-dark-soft); margin-top: 22px; max-width: 46ch; }
.hero .btn-row { margin-top: 34px; }
.hero__note { margin-top: 26px; font-size: .9rem; color: var(--on-dark-soft); display: flex; align-items: center; gap: 9px; }
.hero__note svg { width: 17px; height: 17px; flex: none; }

/* A pessoa recortada nasce do rodape da secao, em vez de flutuar no meio.
   O margin-bottom negativo cancela exatamente o padding inferior de
   .hero__inner — se aquele padding mudar, este valor muda junto.
   Os dois PNGs de hero tem 0px de vazio embaixo, entao encostam de fato. */
/* Grande e ancorada a direita: cresce para dentro da area sangrada do
   degrade, nao para cima do texto. O recorte tem ~15% de margem transparente
   a esquerda, o que garante folga extra entre a pessoa e o titulo. */
/* O par width + margin-right negativos com o mesmo valor faz a imagem crescer
   SO para a direita, entrando na area sangrada do degrade: a borda direita
   avanca e a esquerda fica presa na coluna, sem nunca invadir o texto. */
.hero__art {
  --bleed: clamp(0px, 13vw, 290px);  /* quanto a imagem avanca para fora do container */
  position: relative; justify-self: end; max-width: 940px;
  width: calc(100% + var(--bleed));
  align-self: end;
  margin-bottom: calc(-1 * clamp(56px, 7vw, 92px));
  margin-right: calc(-1 * var(--bleed));
}
.hero__art img { width: 100%; display: block; filter: drop-shadow(0 18px 40px rgba(0,0,0,.26)); }
.hero__badge {
  position: absolute; background: #fff; color: var(--navy);
  border-radius: var(--r-md); padding: 13px 18px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px;
}
.hero__badge strong { display: block; font-size: 1.02rem; line-height: 1.15; }
.hero__badge span { font-size: .74rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.hero__badge i { display: grid; place-items: center; flex: none; line-height: 0; }
.hero__badge i svg { width: 24px; height: 24px; color: var(--green-deep); }
/* Altura escolhida para o badge nao cobrir o rosto da pessoa recortada.
   O badge da direita desconta a sangria: sem isso ele acompanha a imagem
   para fora do container e sai da tela em viewports de ~900 a 1280px. */
.hero__badge--a { left: -34px; top: 34%; }
.hero__badge--b { right: calc(var(--bleed, 0px) - 24px); bottom: 14%; }

/* ---------- faixa de numeros ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: var(--r-lg); overflow: hidden; }
.stats > div { background: var(--surface); padding: 30px 26px; text-align: center; }
.stats b { display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.035em; color: var(--navy); line-height: 1; }
.stats span { display: block; margin-top: 8px; font-size: .92rem; color: var(--ink-soft); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex; flex-direction: column; height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
/* Sem caixa atras do icone: o glifo cresce e se sustenta sozinho. */
.card__ico { margin-bottom: 18px; flex: none; line-height: 0; }
.card__ico svg { width: 32px; height: 32px; color: var(--green-deep); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-soft); font-size: .98rem; }
.card__link { margin-top: auto; padding-top: 20px; font-weight: 700; font-size: .94rem; color: var(--green-deep); display: inline-flex; align-items: center; gap: 7px; }
.card__link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.card:hover .card__link svg { transform: translateX(4px); }

.card--photo { padding: 0; overflow: hidden; }
.card--photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card--photo .card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }

/* card numerado (passos) */
.step { display: flex; gap: 20px; align-items: flex-start; }
.step__n {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 1rem;
}
.step h3 { margin-bottom: 7px; }
.step p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- tabela comparativa (LP) ---------- */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.compare__item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 26px;
}
.compare__item span { display: block; font-size: .87rem; font-weight: 700; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.compare__item b { display: block; font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 800; letter-spacing: -.03em; color: var(--navy); line-height: 1.15; }
.compare__item--hero { background: var(--navy); border-color: var(--navy); color: #fff; }
.compare__item--hero span { color: rgba(255,255,255,.6); }
.compare__item--hero b { color: var(--green); }

/* ---------- lista de checks ---------- */
/* Em todas as 9 ocorrencias a lista vem logo apos um paragrafo, entao o
   respiro superior vale sempre — evita o texto colar no primeiro item. */
.checks { display: grid; gap: 15px; margin-top: 30px; }
.checks li { display: flex; gap: 13px; align-items: flex-start; font-size: 1rem; }
.checks svg { width: 21px; height: 21px; flex: none; color: var(--green-deep); margin-top: 2px; }
.section--navy .checks svg { color: var(--green); }

/* ---------- marcas ---------- */
.brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; }
.brands span {
  font-weight: 800; font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  letter-spacing: -.02em; color: var(--ink-mute); opacity: .75;
}

/* ---------- split (texto + imagem) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split__media img { border-radius: var(--r-lg); width: 100%; object-fit: cover; box-shadow: var(--shadow-md); }
.split__media--tall img { aspect-ratio: 3/4; }
.split__media--wide img { aspect-ratio: 4/3; }
/* as fotos de quiosque sao 4:5; recortar para 4:3 cortaria o movel pela metade */
.split__media--retrato img { aspect-ratio: 4/5; }

/* ---------- faixa CTA ---------- */
.band {
  background: var(--gradient); color: #fff; border-radius: var(--r-lg);
  padding: clamp(40px, 5.5vw, 66px); text-align: center; position: relative; overflow: hidden;
}
/* simbolo da marca sangrando no canto, bem apagado. O .band ja tinha
   position:relative e overflow:hidden, entao basta o ::after -- nenhum
   HTML muda e a marca d'agua aparece em todos os cartoes de CTA do site. */
.band::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  /* a sangria sai pelo canto, mas o "e" precisa caber inteiro: ele ocupa
     ate ~82% da altura do simbolo, entao o que fica para fora da borda e
     so a moldura arredondada */
  right: -4%; bottom: -8%;
  width: clamp(260px, 32%, 420px); aspect-ratio: 800 / 785;
  background: url('../img/marca/simbolo-branco.png') center / contain no-repeat;
  opacity: .12;
}
/* o ::after pinta depois do conteudo: sem isto o simbolo passa por cima do texto */
.band > * { position: relative; z-index: 1; }
.band h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.band .lead { color: var(--on-dark-soft); margin: 18px auto 0; max-width: 52ch; }
.band .btn-row { justify-content: center; margin-top: 32px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-weight: 700; font-size: 1.02rem; color: var(--navy);
}
.faq__q svg { width: 20px; height: 20px; flex: none; color: var(--green-deep); transition: transform .25s ease; }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq__a > div { padding: 0 26px 24px; color: var(--ink-soft); font-size: .99rem; }

/* ---------- formulario ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .88rem; font-weight: 700; color: var(--navy); }
.field label .req { color: var(--green-deep); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); background: #fff; font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px rgba(35,217,98,.14);
}
.field textarea { resize: vertical; min-height: 110px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #E5484D; }
.field__err { font-size: .82rem; color: #E5484D; display: none; }
.field.has-error .field__err { display: block; }
.form__note { font-size: .84rem; color: var(--ink-mute); }
.form__ok {
  display: none; background: var(--mint); border: 1.5px solid var(--green);
  border-radius: var(--r-md); padding: 22px 24px; color: var(--navy); font-weight: 600;
}
.form__ok.is-on { display: block; }

.form-card { background: var(--surface); border-radius: var(--r-lg); padding: clamp(26px, 3.4vw, 40px); box-shadow: var(--shadow-lg); }

/* ---------- rodape ---------- */
.footer { background: var(--navy); color: var(--on-dark-soft); padding-block: 64px 34px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer__logo img { height: 60px; margin-bottom: 22px; }
.footer p { font-size: .95rem; max-width: 34ch; }
.footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; font-weight: 800; }
.footer li + li { margin-top: 10px; }
.footer a { font-size: .95rem; transition: color .16s ease; overflow-wrap: anywhere; }
.footer a:hover { color: var(--green); }
.footer__base {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  justify-content: space-between; font-size: .86rem;
}

/* ---------- animacao de entrada ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsivo ---------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* O menu desktop precisa de ~1173px (a logo de 38px ocupa 196px) para caber sem espremer (logo + 6 links
   + CTA). Abaixo disso vira burger — por isso este breakpoint e maior que o
   do resto do layout. */
@media (max-width: 1220px) {
  .nav__links {
    position: fixed; inset: 78px 0 auto; flex-direction: column; align-items: stretch;
    background: #fff; padding: 18px var(--gut) 26px; gap: 4px; margin: 0;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
    transform: translateY(-140%); transition: transform .3s ease; max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .nav.is-open .nav__links { transform: none; }
  .nav__links a { padding: 14px 12px; font-size: 1.02rem; }
  .nav__links > .btn { display: inline-flex; margin-top: 10px; }
  .nav__burger { display: block; margin-left: auto; }
  .nav__cta { display: none; }
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero h1, .hero .lead { margin-inline: auto; }
  .hero .btn-row, .hero__note { justify-content: center; }
  /* em coluna unica a imagem volta ao centro, sem avancar para a direita:
     zerar a sangria resolve width, margin e a posicao do badge de uma vez */
  .hero__art { --bleed: 0px; max-width: 400px; justify-self: center; }
  .hero__badge--a { left: -10px; }
  .hero__badge--b { right: -10px; }

  .grid--3, .grid--2, .compare { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .form__row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .grid--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .hero__badge { padding: 10px 14px; }
  .hero__badge strong { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- hero com foto de largura inteira (home) ----------
   A foto da home ja vem com o degrade da marca e a padronagem embutidos:
   ela E o fundo da secao, nao um recorte para a coluna da direita. Por isso
   .hero--foto desliga o ::after (a padronagem ficaria duplicada) e nao usa
   .hero__art. A foto entra como <img> e nao como background-image para
   poder declarar width/height (sem salto de layout) e ser o LCP da pagina.
   Os selinhos moram DENTRO de .hero__foto: assim eles acompanham a foto
   tanto quando ela e fundo (desktop) quanto quando vira faixa (celular). */
.hero--foto::after { display: none; }

.hero__foto { position: absolute; inset: 0; z-index: 0; }
.hero__foto img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* ancorada no topo: quando sobra altura o corte sai sempre embaixo
     (chao e balcao) e nunca nas cabecas, que comecam a ~7% da foto */
  object-position: 50% 0;
}

@media (min-width: 861px) {
  /* 896/1776 = 50.45%. Nessa altura a foto cabe inteira, sem corte algum --
     e por isso o texto precisa caber dentro desses 50.45vw: se o titulo
     estourar, a secao cresce, a foto passa a ser cortada pelas laterais e as
     duas pessoas aparecem com zoom. Daqui sai o tamanho da fonte do h1. */
  .hero--foto { min-height: min(50.45vw, 880px); display: grid; align-content: center; }
  /* sem .hero__art, o texto ocupa so a primeira coluna do grid de .hero__inner */
  .hero--foto .hero__inner { grid-template-columns: 1.05fr 1fr; padding-block: clamp(48px, 5vw, 78px); }
  .hero--foto h1 { font-size: clamp(2.1rem, 3.5vw, 3.3rem); max-width: 24ch; }
  .hero--foto .lead { max-width: 38ch; }
  /* medidos sobre a foto: os dois ficam nos bracos cruzados e na vitrine,
     nunca nos rostos nem sobre o logo bordado nas camisas */
  .hero__foto .hero__badge--a { left: 54%; top: 66%; right: auto; bottom: auto; }
  .hero__foto .hero__badge--b { right: 4%; bottom: 10%; left: auto; top: auto; }
}

@media (max-width: 860px) {
  /* em coluna unica a foto desce para uma faixa abaixo do texto, para o
     titulo nunca cair em cima dos rostos. O <div class="hero__foto"> ja
     vem depois de .hero__inner no HTML, entao basta tirar o absolute. */
  .hero--foto .hero__inner { padding-bottom: clamp(26px, 5vw, 42px); }
  .hero__foto { position: relative; inset: auto; height: clamp(240px, 48vw, 330px); }
  .hero__foto img { object-position: 72% center; }
  .hero__foto .hero__badge--a { left: 14px; top: 14px; right: auto; bottom: auto; }
  .hero__foto .hero__badge--b { right: 14px; bottom: 14px; left: auto; top: auto; }
}

/* ---------- faixa de numeros (home) ----------
   Icone a esquerda, numero e rotulo empilhados a direita, sem cartao: os
   numeros carregam a secao sozinhos. A contagem e feita no main.js e so
   dispara quando a faixa entra na tela; o valor final ja esta no HTML,
   entao sem JS (ou com "reduzir movimento" ligado) a faixa aparece pronta. */
.numeros {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: space-between; align-items: center;
  gap: 30px 40px; list-style: none; margin: 0; padding: 0;
}
.numero { display: flex; align-items: center; gap: 16px; }
.numero i { flex: none; line-height: 0; color: var(--navy); }
.numero svg { width: clamp(44px, 4.6vw, 66px); height: auto; display: block; }
.numero p { margin: 0; }
.numero b {
  display: block; color: var(--navy); font-weight: 800; line-height: 1;
  font-size: clamp(1.55rem, 2.5vw, 2.05rem); letter-spacing: -.03em;
  /* numeros de largura fixa: o rotulo ao lado nao treme durante a contagem */
  font-variant-numeric: tabular-nums;
}
.numero span {
  display: block; margin-top: 4px; color: var(--navy); font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.35rem); line-height: 1.14; letter-spacing: -.02em;
}

@media (max-width: 920px) {
  .numeros { grid-template-columns: repeat(2, auto); justify-content: center; gap: 30px 44px; }
}
@media (max-width: 440px) {
  .numeros { grid-template-columns: 1fr; justify-items: start; gap: 22px; }
}

/* ---------- cards de solucao (home) ----------
   Variante dos .card. O "criativo" vem de duas coisas, nao de enfeite:
   uma regua com o degrade da marca que corre da esquerda no hover, e uma
   marca d'agua do proprio icone no canto, que da profundidade ao cartao.
   Sem caixa colorida atras do icone -- ele se sustenta sozinho, maior. */
.solucao { position: relative; overflow: hidden; padding-top: 34px; }
.solucao::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.solucao:hover::before,
.solucao:focus-within::before { transform: scaleX(1); }
.solucao__marca {
  position: absolute; right: -28px; bottom: -28px; z-index: 0;
  width: 148px; height: 148px; color: var(--mint);
  pointer-events: none; line-height: 0;
  transition: transform .45s ease;
}
.solucao__marca svg { width: 100%; height: 100%; stroke-width: 1; }
.solucao:hover .solucao__marca { transform: translate(-6px, -8px) rotate(-7deg); }
/* o conteudo precisa ser posicionado para ficar acima da marca d'agua */
.solucao > :not(.solucao__marca) { position: relative; z-index: 1; }
.solucao .card__ico svg { width: 38px; height: 38px; }
.solucao h3 { font-size: 1.16rem; }

/* ---------- jornada do cliente ----------
   Os cartoes azuis se empilham ao rolar: cada um e sticky, com um topo
   alguns pixels abaixo do anterior, entao o seguinte sobe e cobre o de
   cima deixando so uma faixa a mostra. Cada cartao mora dentro de um
   "slot" alto, que e o que cria a distancia de rolagem do efeito.
   A foto tambem fica presa, para nao sobrar um vazio do lado. */
.jornada { list-style: none; margin: 38px 0 0; padding: 0; }
.passo {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg); padding: 26px 30px;
  /* o filete claro no topo e o que faz a pilha ser lida: empilhados, os
     cartoes sao navy sobre navy e a faixa que sobra sumiria sem ele */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 -10px 30px rgba(26,38,67,.30);
}
.passo__n {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green); color: var(--navy);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.passo h3 { color: #fff; font-size: 1.14rem; margin-bottom: 7px; }
.passo p { color: var(--on-dark-soft); font-size: .96rem; }

@media (min-width: 861px) {
  /* o grid precisa alinhar no topo: centralizado, as colunas encolhem
     para a altura do conteudo e o sticky fica sem distancia para correr */
  .split--jornada { align-items: start; }
  .split--jornada .split__media { position: sticky; top: 100px; }
  /* a foto do quiosque e 4:5; o 3/4 padrao do --tall cortaria as bordas */
  .split--jornada .split__media img { aspect-ratio: 4/5; }
  /* o cartao gruda e so solta quando a <ol> inteira termina -- por isso o
     sticky mora no proprio <li>, sem wrapper: um wrapper por cartao prende
     cada um ao seu proprio pedaco e ele escapa antes do seguinte chegar.
     A margem entre eles e a distancia de rolagem que o efeito consome. */
  .passo { position: sticky; }
  /* 40px e a distancia pedida entre os cartoes parados. Ela tambem e o que
     o efeito consome: com 40px de folga e 156px de altura, cada cartao tem
     ~170px de rolagem ate o seguinte subir por cima. Aumentar aqui afasta
     os cartoes e faz o empilhamento demorar mais; diminuir, o contrario. */
  .jornada > .passo + .passo { margin-top: 40px; }
  .jornada > .passo:nth-child(1) { top: 100px; }
  .jornada > .passo:nth-child(2) { top: 126px; }
  .jornada > .passo:nth-child(3) { top: 152px; }
}

@media (max-width: 860px) {
  /* no celular os cartoes sao altos demais para empilhar sem cobrir
     o texto: viram uma lista normal */
  .jornada > .passo + .passo { margin-top: 16px; }
  .passo { padding: 22px 24px; }
}

/* ---------- linha do tempo e pilares (secao navy da home) ----------
   Tres marcos separados por filetes verticais e, abaixo, os pilares em
   caixas de 2 por 2. Tudo sobre o fundo navy, entao os filetes e as caixas
   usam branco com pouca opacidade em vez de --border, que sumiria. */
.marcos {
  list-style: none; margin: 34px 0 0; padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.marcos li { padding: 0 22px; }
.marcos li:first-child { padding-left: 0; }
.marcos li + li { border-left: 1px solid rgba(255,255,255,.16); }
.marcos b {
  display: block; color: var(--green); font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1; letter-spacing: -.02em;
}
.marcos span {
  display: block; margin-top: 9px; color: var(--on-dark-soft);
  font-size: .88rem; line-height: 1.4;
}

.marcos__rotulo {
  margin: 32px 0 14px; color: rgba(255,255,255,.55);
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
}
.pilares {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.pilares li {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 18px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.25;
}
.pilares svg { width: 17px; height: 17px; flex: none; color: var(--green); }

@media (max-width: 560px) {
  .marcos { grid-template-columns: 1fr; gap: 20px; }
  .marcos li { padding: 0; }
  .marcos li + li { border-left: 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
  .pilares { grid-template-columns: 1fr; }
}

/* ---------- ecossistema: diagrama + os quatro publicos ----------
   A arte ja vem com fundo quase branco, entao a secao usa --bg: o quadro
   claro do diagrama aparece sozinho contra o tom da secao, sem precisar de
   um painel extra por tras dele. */
.rotulo {
  margin-bottom: 12px; color: var(--green-deep);
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
}
.split--ciclo { grid-template-columns: .95fr 1.05fr; }
.ciclo__arte img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.ciclo { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; }
.ciclo li { display: flex; gap: 15px; align-items: flex-start; }
.ciclo i { flex: none; line-height: 0; color: var(--navy); margin-top: 2px; }
.ciclo svg { width: 29px; height: 29px; display: block; }
.ciclo p { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.52; }
.ciclo strong { color: var(--navy); font-weight: 700; }

@media (max-width: 860px) {
  .split--ciclo { grid-template-columns: 1fr; }
  .ciclo svg { width: 26px; height: 26px; }
}

/* ============================================================
   Componentes das paginas internas
   ============================================================ */

/* ---------- hero interno (menor que o da home) ---------- */
.phero { background: var(--gradient); color: var(--on-dark); position: relative; overflow: hidden; }
.phero::after {
  content: ''; position: absolute; inset: 0;
  background: url('../img/marca/padronagem.png') right -8% center / 46% no-repeat;
  opacity: .07; pointer-events: none;
}
/* Nao usar max-width aqui: esta classe divide a tag com .wrap e sobrescreveria
   os 1200px do container, desalinhando o hero do resto do site. O limite de
   leitura vai nos elementos de texto. */
.phero__inner { position: relative; z-index: 1; padding-block: clamp(48px, 6vw, 84px); }
.phero h1 { color: #fff; max-width: 17ch; }
.phero .lead { color: var(--on-dark-soft); margin-top: 18px; max-width: 52ch; }
.phero .btn-row { margin-top: 30px; }

/* ---------- migalha ---------- */
.crumb { font-size: .87rem; color: var(--on-dark-soft); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumb a { color: var(--on-dark-soft); }
.crumb a:hover { color: #fff; }
.crumb span { opacity: .5; }

/* ---------- faixa de parceiros ---------- */
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 56px; }
/* Os PNGs vem com proporcoes muito diferentes (de 2.33 a 5.00). Limitar
   altura E largura ao mesmo tempo equilibra opticamente: os logos largos
   sao contidos pela largura, os compactos pela altura. Cor original. */
.partners img {
  max-height: 48px; max-width: 172px; width: auto; height: auto;
  object-fit: contain;
  transition: transform .22s ease;
}
.partners img:hover { transform: scale(1.05); }

/* Sobre o navy, os logos ganham um chip branco em vez de virarem silhueta:
   assim mantem a cor da marca (o da Ponto Frio e preto e sumiria no escuro). */
.partners--dark img {
  background: #fff; padding: 12px 18px; border-radius: 14px;
  max-height: 68px; max-width: 200px;
}
.partners__label { text-align: center; font-size: .88rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 28px; }

/* ---------- video ---------- */
.video {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--navy); box-shadow: var(--shadow-lg); max-width: 760px; margin-inline: auto;
}
.video video { display: block; width: 100%; height: auto; }

/* ---------- linha do tempo ---------- */
.timeline { display: grid; gap: 0; position: relative; }
.timeline__item { display: grid; grid-template-columns: 116px 1fr; gap: 28px; padding-bottom: 38px; position: relative; }
.timeline__item::before {
  content: ''; position: absolute; left: 7px; top: 34px; bottom: 0; width: 2px; background: var(--border);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__year { font-weight: 800; font-size: 1.15rem; color: var(--green-deep); position: relative; padding-left: 28px; }
.timeline__year::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--mint);
}
.timeline h3 { margin-bottom: 7px; }
.timeline p { color: var(--ink-soft); font-size: .99rem; }

/* ---------- tabela de comparacao lado a lado ---------- */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs__col { border-radius: var(--r-lg); padding: 30px; border: 1px solid var(--border); background: var(--surface); }
.vs__col--win { background: var(--navy); border-color: var(--navy); color: #fff; }
.vs__col h3 { margin-bottom: 20px; }
.vs__col--win h3 { color: var(--green); }
.vs__col li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); font-size: .97rem; }
.vs__col--win li { border-top-color: rgba(255,255,255,.14); }
.vs__col li:first-of-type { border-top: 0; }
.vs__col svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.vs__col--win svg { color: var(--green); }
.vs__col--lose svg { color: #C9CDD3; }

/* ---------- destaque de numero grande ---------- */
.bignum { text-align: center; }
.bignum b { display: block; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--green); }
.bignum span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 1rem; }
.section--navy .bignum span { color: var(--on-dark-soft); }

/* ---------- CTA fixo no rodape da LP (mobile) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: #fff; border-top: 1px solid var(--border); padding: 12px var(--gut);
  box-shadow: 0 -6px 24px rgba(26,38,67,.1);
  transform: translateY(120%); transition: transform .3s ease; display: none;
}
.sticky-cta.is-on { transform: none; }
@media (max-width: 860px) {
  .sticky-cta { display: block; }
  body.has-sticky { padding-bottom: 76px; }
}

@media (max-width: 860px) {
  .vs { grid-template-columns: 1fr; }
  .timeline__item { grid-template-columns: 1fr; gap: 10px; }
  .timeline__item::before { display: none; }
}

/* ---------- item ativo no menu ---------- */
.nav__links a.is-active { color: var(--navy); background: var(--mint); }
@media (max-width: 860px) { .nav__links a.is-active { background: var(--mint); } }

/* Recorte da LP: a pessoa esta mais alta e maior no quadro que a da home
   (cabeca de 16% a ~50% da altura), entao o badge superior desce para a
   altura do peito para nao cobrir o rosto. */
.hero__art--lp .hero__badge--a { top: 54%; }
.hero__art--lp .hero__badge--b { bottom: 10%; }

/* O titulo da LP vem da copy original que converte e e longo (73 caracteres).
   Com a proporcao da home ele quebrava em 6 linhas, entao esta pagina da mais
   coluna ao texto e reduz um pouco o corpo — sem encurtar a copy. */
/* Dentro de min-width: sem isso esta regra (0,2,0) venceria a do mobile
   (0,1,0) e a LP continuaria em duas colunas no celular, esmagando a foto. */
@media (min-width: 861px) {
  .hero--lp .hero__inner { grid-template-columns: 1.18fr 1fr; }
}
.hero--lp h1 { font-size: clamp(2rem, 4vw, 3.05rem); max-width: 19ch; }

/* ---------- credito da agencia no rodape ---------- */
.footer__by {
  display: inline-flex; align-items: center; gap: 14px;
  opacity: .78; transition: opacity .2s ease;
}
.footer__by:hover { opacity: 1; }
.footer__by span { font-size: .8rem; letter-spacing: .02em; white-space: nowrap; }
.footer__by img { height: 38px; width: auto; }   /* assinatura discreta, nao concorre com a marca */
@media (max-width: 620px) {
  .footer__base { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   Tres formas distintas para as tres secoes da LP que antes
   repetiam o mesmo card. Cada uma segue o que o conteudo e:
   soma (extrato), hierarquia (bento) e sequencia (stepper).
   ============================================================ */

/* ---------- 1. extrato: fontes de receita que se somam ---------- */
.ledger { border-top: 1px solid rgba(26,38,67,.12); }
.ledger__row {
  display: grid; grid-template-columns: 62px 1fr; gap: 26px; align-items: start;
  padding: 26px 20px 26px 8px;
  border-bottom: 1px solid rgba(26,38,67,.12);
  transition: background .22s ease, transform .22s ease;
}
.ledger__row:hover { background: rgba(255,255,255,.7); transform: translateX(5px); }
.ledger__n {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--green-deep); line-height: 1.1;
}
.ledger__body { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 10px 32px; align-items: baseline; }
.ledger__body h3 { margin: 0; }
.ledger__body p { color: var(--ink-soft); font-size: .99rem; }
.ledger__total {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px 20px 8px 8px; flex-wrap: wrap;
}
.ledger__total b { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -.03em; }

/* ---------- 2. bento: por que da certo ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento__item {
  grid-column: span 2; border-radius: var(--r-lg); padding: 30px;
  background: var(--bg); border: 1px solid transparent;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px;
  transition: transform .22s ease;
}
.bento__item:hover { transform: translateY(-4px); }
.bento__item svg { width: 30px; height: 30px; color: var(--green-deep); margin-bottom: auto; }
.bento__item h3 { margin-bottom: 8px; }
.bento__item p { color: var(--ink-soft); font-size: .97rem; }
.bento__item--wide { grid-column: span 4; }
.bento__item--stat {
  grid-column: span 2; background: var(--navy); color: #fff;
  justify-content: center; align-items: flex-start; text-align: left;
}
.bento__item--stat b {
  display: block; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; color: var(--green); margin-bottom: 10px;
}
.bento__item--stat span { color: var(--on-dark-soft); font-size: 1rem; }
.bento__item--stat svg { display: none; }
.bento__item--green { background: var(--mint); }

/* ---------- 3. stepper: como comecar ---------- */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.stepper::before {
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 27px; height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 60%, rgba(26,38,67,.16) 100%);
}
.stepper__item { position: relative; padding: 0 16px; text-align: center; }
.stepper__dot {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center; font-weight: 800; font-size: 1.15rem;
  background: var(--navy); color: #fff; position: relative; z-index: 1;
  box-shadow: 0 0 0 8px var(--bg);
}
.stepper__item:first-child .stepper__dot { background: var(--green); color: var(--navy); }
.stepper h3 { margin-bottom: 8px; }
.stepper p { color: var(--ink-soft); font-size: .97rem; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__item, .bento__item--wide, .bento__item--stat { grid-column: span 1; }
  .stepper { grid-template-columns: 1fr; gap: 26px; }
  .stepper::before { display: none; }
  .stepper__item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; text-align: left; padding: 0; }
  .stepper__dot { margin: 0; box-shadow: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; gap: 12px; }
  .ledger__body { grid-template-columns: 1fr; }
}

/* ============================================================
   Formulario do Elementor dentro do .form-card
   O HTML do formulario vem de um Modelo (Elementor > Modelos), entao
   a marcacao e a do Elementor. Estas regras a vestem com o visual do
   formulario estatico: mesma grade de 16px, mesmo foco verde, mesmo
   botao pilula. Os seletores repetem .elementor-form-fields-wrapper e
   .elementor-field-group de proposito: e o que basta para passar a
   frente das regras do proprio Elementor sem recorrer a !important.
   ============================================================ */
.form-card .elementor,
.form-card .elementor .e-con,
.form-card .elementor .e-con-inner { --gap: 0px; padding: 0; margin: 0; width: auto; max-width: none; }
.form-card .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* grade: duas colunas, igual ao .form + .form__row */
.form-card .elementor-widget-form .elementor-form-fields-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin: 0;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group {
  grid-column: span 2; width: auto; max-width: none; flex: none;
  padding: 0; margin: 0; display: grid; gap: 7px; align-content: start;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group.elementor-col-50 {
  grid-column: span 1; width: auto;
}
.form-card .elementor-form-fields-wrapper .elementor-field-type-hidden { display: none; }

/* rotulos */
.form-card .elementor-form-fields-wrapper .elementor-field-group > .elementor-field-label {
  font-size: .88rem; font-weight: 700; color: var(--navy);
  padding: 0; margin: 0; line-height: 1.4;
}
.form-card .elementor-form-fields-wrapper .elementor-field-required > .elementor-field-label::after {
  content: " *"; color: var(--green-deep);
}
.form-card .elementor-form-fields-wrapper .elementor-field-type-acceptance > .elementor-field-label { display: none; }

/* campos */
.form-card .elementor-form-fields-wrapper .elementor-field-group .elementor-field-textual {
  width: 100%; padding: 14px 16px; height: auto; min-height: 0;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); box-shadow: none;
  font-family: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group .elementor-field-textual::placeholder {
  color: var(--ink-mute); opacity: 1;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group .elementor-field-textual:focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px rgba(35,217,98,.14);
}
.form-card .elementor-form-fields-wrapper .elementor-field-group textarea.elementor-field-textual {
  resize: vertical; min-height: 110px; display: block;
}

/* select: some a seta nativa e usa a do Elementor, alinhada a direita */
.form-card .elementor-form-fields-wrapper .elementor-field-group .elementor-select-wrapper {
  position: relative; display: block; width: auto;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group .elementor-select-wrapper select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 44px; cursor: pointer;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group .select-caret-down-wrapper {
  position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
  inset-inline-end: 17px; pointer-events: none; line-height: 0;
  color: var(--ink-mute); width: 11px; height: 11px;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group .select-caret-down-wrapper svg {
  width: 11px; height: 11px; fill: currentColor;
}

/* aceite da LGPD */
.form-card .elementor-form-fields-wrapper .elementor-field-type-acceptance .elementor-field-subgroup { display: block; }
.form-card .elementor-form-fields-wrapper .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; }
.form-card .elementor-form-fields-wrapper .elementor-field-option input[type="checkbox"] {
  width: 18px; height: 18px; flex: none; margin: 3px 0 0;
  accent-color: var(--green-deep); cursor: pointer;
}
.form-card .elementor-form-fields-wrapper .elementor-field-option label {
  font-size: .84rem; font-weight: 500; line-height: 1.5; color: var(--ink-mute);
}
.form-card .elementor-form-fields-wrapper .elementor-field-option label a {
  color: var(--green-deep); text-decoration: underline;
}

/* botao: o mesmo .btn--primary .btn--lg .btn--block */
.form-card .elementor-form-fields-wrapper .e-form__buttons { display: block; margin-top: 4px; }
.form-card .elementor-form-fields-wrapper .elementor-button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 18px 38px; border: 2px solid transparent;
  border-radius: var(--r-pill);
  background-color: var(--green); color: var(--navy);
  font-family: inherit; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  box-shadow: 0 6px 18px rgba(35,217,98,.32); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.form-card .elementor-form-fields-wrapper .elementor-button[type="submit"]:hover {
  background-color: var(--green-deep); color: #fff;
  box-shadow: 0 12px 26px rgba(35,217,98,.38); transform: translateY(-2px);
}
.form-card .elementor-form-fields-wrapper .elementor-button[type="submit"]:active { transform: translateY(0); }
.form-card .elementor-form-fields-wrapper .elementor-button[type="submit"]:focus-visible {
  outline: 3px solid var(--green); outline-offset: 3px;
}

/* mensagens: sucesso igual ao .form__ok, erro igual ao .field__err */
.form-card .elementor-message {
  grid-column: span 2; margin: 0; padding: 22px 24px;
  border-radius: var(--r-md); font-size: .95rem; font-weight: 600; line-height: 1.5;
}
.form-card .elementor-message::before { display: none; }
.form-card .elementor-message.elementor-message-success {
  background: var(--mint); border: 1.5px solid var(--green); color: var(--navy);
}
.form-card .elementor-message.elementor-message-danger {
  background: #FDECEC; border: 1.5px solid #E5484D; color: #8E1F22;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group .elementor-form-help-inline {
  font-size: .82rem; font-weight: 500; color: #E5484D; margin: 0;
}
.form-card .elementor-form-fields-wrapper .elementor-field-group.elementor-error .elementor-field-textual {
  border-color: #E5484D;
}

@media (max-width: 860px) {
  .form-card .elementor-widget-form .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
  .form-card .elementor-form-fields-wrapper .elementor-field-group,
  .form-card .elementor-form-fields-wrapper .elementor-field-group.elementor-col-50,
  .form-card .elementor-message { grid-column: span 1; }
}

/* ============================================================
   Quem somos
   ============================================================ */

/* trecho em verde dentro de um titulo, como no esboco do cliente */
.hero h1 em, .section h2 em { font-style: normal; color: var(--green); }
.section--navy h2 em { color: var(--green); }

/* filete verde que separa o titulo do subtitulo no hero */
.regua {
  display: block; width: 92px; height: 4px; border-radius: 999px;
  background: var(--green); margin: 26px 0 0;
}
.hero--quem .lead { margin-top: 20px; }
.hero--quem .crumb { margin-bottom: 22px; }

@media (min-width: 861px) {
  /* mesma trava da home: a altura segue a proporcao da arte (1776x896),
     entao a foto nunca e cortada nem ganha zoom */
  .hero--quem h1 { max-width: 20ch; }
  .hero--quem .lead { max-width: 44ch; }
}
@media (max-width: 860px) {
  /* a arte de celular e vertical, com a foto em cima e area navy embaixo:
     ela vira o fundo e o texto se apoia na parte navy, em vez de virar
     faixa abaixo do texto como acontece na home */
  .hero--quem .hero__foto { position: absolute; inset: 0; height: auto; }
  .hero--quem .hero__foto img { height: 100%; object-position: center top; }
  .hero--quem { min-height: 178vw; }
  .hero--quem .hero__inner { padding-top: 60vw; align-content: end; }
}

/* ---------- sobre a Ecopartners ---------- */
.split--sobre { grid-template-columns: 1.08fr .92fr; align-items: center; }
.prosa { margin-top: 20px; display: grid; gap: 15px; }
.prosa p { color: var(--ink-soft); font-size: 1rem; line-height: 1.62; }

.publicos {
  list-style: none; margin: 32px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.publicos li { display: grid; justify-items: center; gap: 10px; text-align: center; }
.publicos li + li { border-left: 1px solid var(--border); }
.publicos i { line-height: 0; color: var(--green-deep); }
.publicos svg { width: 27px; height: 27px; }
.publicos span { font-size: .84rem; font-weight: 700; color: var(--navy); line-height: 1.25; }

/* ---------- compromisso + missao e visao ---------- */
.split--mv { grid-template-columns: 1.05fr .95fr; align-items: center; }
.compromisso { position: relative; padding-bottom: 76px; }
.compromisso__quadro {
  width: 100%; display: block; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
/* a foto dos post-its encaixa no canto do quadro, como no esboco */
.compromisso__postit {
  position: absolute; right: 0; bottom: 0; width: 37%;
  display: block; border-radius: var(--r-md);
  border: 5px solid var(--bg); box-shadow: var(--shadow-md);
}

.mvs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.mv {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--navy); color: #fff;
  border-radius: var(--r-lg); padding: 28px 30px;
}
.mv i { flex: none; line-height: 0; color: var(--green); }
.mv svg { width: 34px; height: 34px; }
.mv h3 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
/* o tracinho verde antes do rotulo, como no esboco */
.mv h3::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--green); margin-right: 10px;
}
.mv p { color: var(--on-dark-soft); font-size: .97rem; line-height: 1.55; }
.mv strong { color: #fff; font-weight: 700; }
.mv em { font-style: italic; }

/* ---------- pilares (bento) ---------- */
.pilares {
  display: grid; gap: 18px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}
.pilar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px;
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pilar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.pilar i { line-height: 0; color: var(--green-deep); margin-bottom: 18px; }
.pilar svg { width: 32px; height: 32px; }
.pilar__n {
  display: block; font-size: .82rem; font-weight: 800; letter-spacing: .1em;
  color: var(--ink-mute); margin-bottom: 7px;
}
.pilar h3 { font-size: 1.22rem; margin-bottom: 9px; }
.pilar p { color: var(--ink-soft); font-size: .97rem; }
/* 01 e 04 ocupam as duas linhas; 02 e 03 se empilham no meio */
/* sem posicao explicita o grid encaixa o 04 na sobra do meio, e nao na
   terceira coluna: por isso cada pilar diz onde fica */
.pilar--1 {
  grid-column: 1; grid-row: 1 / span 2; border-color: #D6EFE0;
  /* a arte entra como camada de fundo sobre o verde claro: o cartao ja tem
     o espaco vazio no topo reservado para ela */
  background-image: url('../img/quem-somos/pilar-tecnologia.webp'),
                    linear-gradient(180deg, #F3FBF6 0%, #E9F7EF 100%);
  background-repeat: no-repeat;
  background-size: 128% auto, auto;
  background-position: 50% 22%, 0 0;
}
.pilar--2 { grid-column: 2; grid-row: 1; }
.pilar--3 { grid-column: 2; grid-row: 2; }
.pilar--4 {
  grid-column: 3; grid-row: 1 / span 2; border-color: var(--navy);
  background-color: var(--navy);
  /* o veu escuro por cima da arte garante o contraste do texto branco */
  background-image: linear-gradient(180deg, rgba(26,38,67,0) 28%, rgba(26,38,67,.92) 80%),
                    url('../img/quem-somos/pilar-parceria.jpg');
  background-repeat: no-repeat;
  background-size: auto, cover;
  background-position: center, center;
}
/* nos dois cards altos o icone fica no topo e o texto desce para a base */
.pilar--1 i, .pilar--4 i { margin-bottom: auto; padding-bottom: 18px; }
.pilar--4 i { color: var(--green); }
.pilar--4 .pilar__n { color: rgba(255,255,255,.55); }
.pilar--4 h3 { color: #fff; }
.pilar--4 p { color: var(--on-dark-soft); }
.pilar--4:hover { border-color: var(--navy); }

/* ---------- linha do tempo ---------- */
.linha { list-style: none; margin: 0; padding: 0; position: relative; }
/* o trilho vertical: no desktop no meio, no celular na esquerda */
.linha::before {
  content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--navy), var(--green));
}
.marco { position: relative; width: calc(50% - 46px); }
.marco + .marco { margin-top: 26px; }
.marco:nth-child(even) { margin-left: auto; }
/* a bolinha do marco fica sobre o trilho */
.marco i {
  position: absolute; top: 24px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; line-height: 0;
  background: var(--navy); color: #fff; border: 4px solid var(--bg);
}
.marco svg { width: 19px; height: 19px; }
.marco:nth-child(odd) i { right: -67px; }
.marco:nth-child(even) i { left: -67px; background: var(--green-deep); }
.marco__cartao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 24px 26px;
}
.marco b {
  display: block; font-size: 1.3rem; font-weight: 800; line-height: 1;
  letter-spacing: -.02em; color: var(--navy);
}
.marco:nth-child(even) b { color: var(--green-deep); }
.marco h3 { font-size: 1rem; margin: 7px 0 10px; }
.marco p { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }

.linha__lema {
  margin: 44px auto 0; text-align: center; max-width: 30ch;
  font-size: .84rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-mute); line-height: 1.9;
}

@media (max-width: 860px) {
  .linha::before { left: 21px; margin-left: 0; }
  .marco, .marco:nth-child(even) { width: auto; margin-left: 62px; }
  .marco:nth-child(odd) i, .marco:nth-child(even) i { left: -62px; right: auto; }
}

/* ---------- atuacao em numeros ---------- */
.atuacao { position: relative; overflow: hidden; }
/* a arte cobre so a direita; a mascara dissolve a borda esquerda dela no
   navy da secao, entao nao aparece emenda entre os dois azuis */
.atuacao__foto {
  position: absolute; top: 0; right: 0; bottom: 0; width: 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}
.atuacao__foto img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
/* veu navy por cima da foto: sem ele o quarto numero cai na parte iluminada
   da imagem e o texto branco some */
.atuacao::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(26,38,67,.94) 40%, rgba(26,38,67,0) 72%);
}
.atuacao__foto { z-index: 0; }
.atuacao__wrap { position: relative; z-index: 2; }
.atuacao__wrap > div { max-width: 640px; }
.atuacao h2 { color: #fff; max-width: 15ch; }
.atuacao .lead { margin-top: 16px; max-width: 48ch; }

.rotulo--claro { color: rgba(255,255,255,.6); }
.numeros--claro { margin-top: 34px; gap: 26px clamp(26px, 3.4vw, 48px); justify-content: start; }
.numeros--claro .numero i { color: var(--green); }
.numeros--claro .numero svg { width: clamp(32px, 2.8vw, 40px); }
.numeros--claro .numero b { color: #fff; font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
.numeros--claro .numero span {
  color: var(--on-dark-soft); font-size: .84rem; font-weight: 600; max-width: 14ch;
}

.parceiros-faixa {
  position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 64px);
  background: var(--surface); border-radius: var(--r-lg);
  padding: 26px clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 20px clamp(24px, 4vw, 54px);
}
.parceiros-faixa__titulo { border-right: 1px solid var(--border); padding-right: clamp(20px, 3vw, 44px); }
.parceiros-faixa .rotulo { margin-bottom: 6px; }
.parceiros-faixa strong { display: block; color: var(--navy); font-size: 1.1rem; line-height: 1.25; letter-spacing: -.02em; }
.parceiros-faixa .partners { margin: 0; justify-content: space-around; }

@media (max-width: 860px) {
  .split--sobre, .split--mv { grid-template-columns: 1fr; }
  .publicos { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .publicos li:nth-child(3) { border-left: 0; }
  .compromisso { padding-bottom: 42px; }
  .compromisso__postit { width: 48%; }
  .pilares { grid-template-columns: 1fr; }
  /* precisa zerar grid-column tambem: as colunas fixas do bento criariam
     colunas implicitas aqui e a secao estouraria a largura da tela */
  .pilares .pilar { grid-column: auto; grid-row: auto; }
  /* o cartao encolhe e some o espaco vazio do topo: sem um veu a arte fica
     atras do texto. O veu apaga o fundo onde o texto comeca. */
  .pilar--1 {
    background-image: linear-gradient(180deg, rgba(243,251,246,0) 0%, #EFF8F2 58%),
                      url('../img/quem-somos/pilar-tecnologia.webp'),
                      linear-gradient(180deg, #F3FBF6 0%, #E9F7EF 100%);
    background-size: auto, 150% auto, auto;
    background-position: 0 0, 50% 0, 0 0;
  }
  .pilar--4 {
    background-image: linear-gradient(180deg, rgba(26,38,67,0) 0%, rgba(26,38,67,.94) 52%),
                      url('../img/quem-somos/pilar-parceria.jpg');
  }
  .pilar--1 i, .pilar--4 i { margin-bottom: 18px; padding-bottom: 0; }
  /* no celular a arte vira uma faixa no topo da secao, sem mascara. A versao
     mobile do arquivo e vertical, com o quiosque no terco de cima: a faixa
     precisa ser alta o bastante para mostrar essa parte, e a ancora vai no
     topo para o corte sobrar no piso */
  .atuacao__foto {
    position: relative; inset: auto; width: auto;
    height: clamp(290px, 86vw, 420px); margin-bottom: 34px;
    -webkit-mask-image: none; mask-image: none;
  }
  .atuacao__foto img { object-position: center top; }
  .atuacao::before { display: none; }
  .parceiros-faixa { grid-template-columns: 1fr; }
  .parceiros-faixa__titulo { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 20px; }
}

/* ============================================================
   Vagas
   ============================================================ */

/* ---------- lista de vagas ---------- */
.vagas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vaga-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px;
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vaga-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.vaga-card h2 { font-size: 1.45rem; letter-spacing: -.02em; margin-bottom: 10px; }
.vaga-card h2 a { color: inherit; }
.vaga-card h2 a:hover { color: var(--green-deep); }
.vaga-card__resumo { color: var(--ink-soft); font-size: .99rem; }
.vaga-card__locais {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  color: var(--green-deep); font-size: .9rem; font-weight: 700;
}
.vaga-card__locais svg { width: 17px; height: 17px; flex: none; }
.vaga-card .card__link { margin-top: auto; padding-top: 22px; }

/* ---------- corpo da vaga ---------- */
.vaga-corpo {
  display: grid; grid-template-columns: 1.35fr .85fr;
  gap: clamp(32px, 4vw, 56px); align-items: start;
}

/* o miolo vem do editor do WordPress, entao e preciso estilizar as tags
   soltas que o cliente vai gerar: titulos, paragrafos e listas */
.vaga-texto > :first-child { margin-top: 0; }
.vaga-texto h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem); letter-spacing: -.02em;
  margin: 42px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.vaga-texto h3 { font-size: 1.1rem; margin: 30px 0 10px; }
.vaga-texto p { color: var(--ink-soft); margin-bottom: 14px; line-height: 1.65; }
.vaga-texto ul, .vaga-texto ol { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
/* o visto verde no lugar do marcador: mesma linguagem das listas .checks */
.vaga-texto li {
  position: relative; padding-left: 32px;
  color: var(--ink-soft); line-height: 1.6;
}
.vaga-texto li::before {
  content: ''; position: absolute; left: 0; top: .34em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315B94E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.vaga-texto strong { color: var(--navy); font-weight: 700; }

/* ---------- coluna lateral ---------- */
.vaga-lado { display: grid; gap: 18px; position: sticky; top: 100px; }
.vaga-bloco {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px;
}
.vaga-bloco h2 { font-size: 1.1rem; margin-bottom: 12px; }
.vaga-bloco p { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }
.vaga-bloco--contato { background: var(--navy); border-color: var(--navy); }
.vaga-bloco--contato h2 { color: #fff; }

.vaga-convite {
  background: var(--mint); border-radius: var(--r-md);
  padding: 22px 24px; color: var(--navy);
  font-weight: 700; font-size: 1rem; line-height: 1.5;
}

.vaga-contato { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vaga-contato li { display: grid; gap: 3px; }
.vaga-contato span {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.vaga-contato a { color: var(--green); font-weight: 700; font-size: 1.02rem; word-break: break-word; }
.vaga-contato a:hover { color: #fff; }

/* ---------- localidades ---------- */
.locais {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.locais li {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill); padding: 13px 20px;
  color: #fff; font-size: .95rem; line-height: 1.2;
}
.locais svg { width: 17px; height: 17px; flex: none; color: var(--green); }
.locais strong { font-weight: 700; }
.locais span { color: var(--on-dark-soft); font-weight: 500; }

/* ---------- paginacao ---------- */
.pagination { margin-top: 44px; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  color: var(--navy); font-weight: 700; font-size: .95rem;
}
.pagination .page-numbers:hover { border-color: var(--green); color: var(--green-deep); }
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }

@media (max-width: 860px) {
  .vagas { grid-template-columns: 1fr; }
  .vaga-corpo { grid-template-columns: 1fr; }
  /* grudado nao faz sentido em coluna unica: a lateral vira o fim da leitura */
  .vaga-lado { position: static; }
  .locais { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .locais { grid-template-columns: 1fr; }
  .vaga-card { padding: 26px; }
}

/* ---------- categorias homologadas (Para fornecedores) ----------
   Pilulas verdes com icone a esquerda e o rotulo em duas linhas, como no
   material do cliente. Centralizadas e com quebra livre: a quantidade de
   categorias muda com o tempo e a faixa precisa se reorganizar sozinha. */
.categorias {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.categorias li {
  display: flex; align-items: center; gap: 13px;
  background: var(--green-deep); color: #fff;
  border-radius: var(--r-pill); padding: 15px 26px 15px 22px;
  box-shadow: 0 6px 18px rgba(21,185,78,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.categorias li:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21,185,78,.3); }
.categorias i { flex: none; line-height: 0; }
.categorias svg { width: 26px; height: 26px; display: block; }
/* o filete claro separa o icone do rotulo, como no material */
.categorias p {
  margin: 0; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.34);
  line-height: 1.28;
}
.categorias strong { display: block; font-weight: 700; font-size: .95rem; }
.categorias span { display: block; font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.85); }

/* a foto quadrada do mix de acessorios */
.split--como { grid-template-columns: 1.05fr .95fr; align-items: center; }
.split--como .split__media img { aspect-ratio: 1/1; border-radius: var(--r-lg); }

@media (max-width: 860px) {
  .split--como { grid-template-columns: 1fr; }
  .categorias { justify-content: stretch; }
  .categorias li { width: 100%; }
}

/* ============================================================
   O ecossistema
   ============================================================ */

/* o filete verde tambem em secao clara */
.regua--esc { margin: 20px 0 0; }

/* quadro do diagrama dos quatro publicos */
.ciclo-quadro { max-width: 860px; margin-inline: auto; }
.ciclo-quadro img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* ---------- os quatro publicos ---------- */
.split--publico { grid-template-columns: 1fr 1fr; align-items: center; }
.split--publico h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -.03em; }
.split--publico .prosa { margin-top: 22px; }
.split--publico .split__media img { aspect-ratio: 4/3; border-radius: var(--r-lg); }

/* faixa escura com os destaques de cada publico */
.destaques {
  list-style: none; margin: 30px 0 0; padding: 22px 24px;
  background: var(--navy); border-radius: var(--r-lg);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.destaques li { display: grid; gap: 9px; align-content: start; }
.destaques li + li { border-left: 1px solid rgba(255,255,255,.14); padding-left: 18px; }
.destaques i { line-height: 0; color: var(--green); }
.destaques svg { width: 24px; height: 24px; }
.destaques p { margin: 0; line-height: 1.3; }
.destaques strong { display: block; color: #fff; font-weight: 700; font-size: .84rem; }
.destaques span { display: block; color: var(--on-dark-soft); font-weight: 500; font-size: .84rem; }

@media (max-width: 1100px) {
  /* quatro colunas num texto de meia largura ficam estreitas demais */
  .destaques { grid-template-columns: 1fr 1fr; gap: 20px; }
  .destaques li:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .split--publico { grid-template-columns: 1fr; }
  /* a foto vem antes do texto em todos, para a leitura nao alternar no celular */
  .split--publico .split__media { order: -1; }
}
@media (max-width: 420px) {
  .destaques { grid-template-columns: 1fr; }
  .destaques li + li { border-left: 0; padding-left: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
}

/* ============================================================
   Para varejistas
   ============================================================ */

/* a foto de "como funciona" e 16:9; recortar para quadrado como em
   fornecedores cortaria a atendente e a cliente pelas bordas */
.split--loja { grid-template-columns: .95fr 1.05fr; align-items: center; }
.split--loja .split__media img { aspect-ratio: 16/10; }

/* os quatro ganhos em 2x2 ao lado da foto, que acompanha a altura do bloco */
.split--valor { grid-template-columns: 1.12fr .88fr; align-items: stretch; }
.split--valor .split__media img { height: 100%; }

.valor {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.valor li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.valor li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.valor i { display: block; line-height: 0; color: var(--green-deep); margin-bottom: 16px; }
.valor svg { width: 30px; height: 30px; }
.valor h3 { font-size: 1.1rem; margin-bottom: 8px; }
.valor p { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }

@media (max-width: 1024px) {
  /* a foto encolhe demais ao lado de dois cards; vai para baixo, em faixa larga */
  .split--valor { grid-template-columns: 1fr; }
  .split--valor .split__media img { height: auto; aspect-ratio: 16/9; }
}
@media (max-width: 860px) {
  .split--loja { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .valor { grid-template-columns: 1fr; }
  .valor li { padding: 24px; }
}

/* ============================================================
   Hero interno com foto de fundo
   ============================================================ */

/* A foto vai no ::before, e nao numa tag <img>: como o ::before e o primeiro
   filho gerado, um <img> na marcacao pintaria por cima do veu. Aqui foto e
   veu sao camadas do mesmo background, na ordem certa. */
.phero--foto {
  --veu: linear-gradient(100deg,
          rgba(26,38,67,.95) 0%, rgba(26,38,67,.86) 40%,
          rgba(24,52,80,.76) 70%, rgba(27,96,94,.66) 100%);
}
.phero--foto::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* a padronagem do hero padrao vira ruido por cima da foto */
.phero--foto::after { display: none; }

.phero--licenciados::before { background-image: var(--veu), url('../img/eco/hero-licenciados.jpg'); }
.phero--ecossistema::before { background-image: var(--veu), url('../img/eco/hero-ecossistema.jpg'); }
.phero--varejistas::before  { background-image: var(--veu), url('../img/eco/hero-varejistas.jpg'); }

/* o simbolo da marca no lugar da padronagem, para o hero do contato */
.phero--marca::after {
  /* inteiro dentro do quadro: o simbolo cortado na borda ja foi recusado antes */
  inset: auto; right: 2%; top: 50%; transform: translateY(-50%);
  width: clamp(190px, 22%, 310px); aspect-ratio: 800 / 785;
  background: url('../img/marca/simbolo-branco.png') center / contain no-repeat;
  opacity: .1;
}

@media (max-width: 760px) {
  /* no celular o texto ocupa a largura toda, entao o veu precisa ser parelho */
  .phero--foto {
    --veu: linear-gradient(180deg, rgba(26,38,67,.92) 0%, rgba(26,38,67,.82) 100%);
  }
  .phero--marca::after { right: -16%; opacity: .07; }
}