/* ===================================================================
   Páginas de solução (/solucoes/*) — usa os tokens de styles.css.
   Carregado DEPOIS de styles.css, nunca antes.
=================================================================== */

/* cabeçalho da página */
.sol-hero{
  position:relative;overflow:hidden;padding:150px 0 72px;
  background:linear-gradient(150deg,var(--navy-700) 0%,var(--navy-800) 45%,var(--navy-900) 110%);
  color:var(--white);
}
.sol-hero::after{
  content:"";position:absolute;right:-140px;top:-90px;width:560px;height:560px;
  background:var(--gold);
  -webkit-mask:url("assets/gwm-hex.svg") no-repeat center/contain;
  mask:url("assets/gwm-hex.svg") no-repeat center/contain;
  opacity:.07;pointer-events:none;
}
.sol-hero__inner{position:relative;z-index:1;max-width:62em} /* 3.7: era 44em */
.sol-hero h1{
  font-family:var(--serif);font-weight:600;color:var(--white);
  font-size:clamp(1.9rem,3.4vw,2.75rem);line-height:1.16;margin:0 0 20px;text-wrap:pretty;
}
.sol-hero__lead{font-size:1.1rem;font-weight:300;color:#c3cadb;margin:0;text-wrap:pretty;max-width:40em}  /* 3.11: ~80 caracteres por linha; o título continua na largura toda */

/* trilha de navegação */
.crumb{position:relative;z-index:1;font-size:.82rem;margin:0 0 18px;color:#aab3c9}
.crumb a{color:var(--gold-300);border-bottom:1px solid transparent;transition:.2s}
.crumb a:hover{border-bottom-color:var(--gold-300)}
.crumb span{color:#7f889f;margin:0 8px}

/* blocos de conteúdo */
.sol{padding:80px 0}
.sol--soft{background:var(--off-2)}
.sol__title{
  font-family:var(--serif);font-weight:600;color:var(--navy-800);
  font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 28px;text-wrap:balance;
}

/* dores */
.pain{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pain li{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:4px;padding:18px 22px;
  color:var(--muted);line-height:1.65;
}

/* mecanismo */
.how{display:grid;gap:20px;counter-reset:h}
/* 3.5: em tela larga as caixas e as dores ocupam a margem em duas colunas,
   em vez de uma coluna estreita e comprida */
/* 3.7: todos os blocos das soluções (entregas, nota honesta, FAQ) na mesma
   largura das caixas; parágrafo solto segue com teto de leitura; caixa larga
   divide o texto em duas colunas para a linha não passar de ~70 caracteres */
@media (min-width:1000px){
  .sol .container--narrow{max-width:1080px}
  .sol .container--narrow>p{max-width:880px}
  .how{grid-template-columns:1fr 1fr;align-items:start}
  .pain{grid-template-columns:1fr 1fr}
  .sol .deliver{grid-template-columns:1fr 1fr 1fr;gap:18px 28px}
  .honest p,.sol-faq .faq__item p{max-width:none;columns:2;column-gap:40px}
}
.how__item{
  background:var(--white);border:1px solid var(--line);border-radius:4px;padding:26px 28px;
}
.how__item h3{
  font-size:1.08rem;color:var(--navy-800);margin:0 0 10px;
  display:flex;align-items:baseline;gap:12px;
}
.how__item h3::before{
  counter-increment:h;content:counter(h,decimal-leading-zero);
  font-family:var(--serif);font-size:.95rem;font-weight:700;color:var(--gold-800);flex-shrink:0;
}
.how__item p{margin:0;color:var(--muted);line-height:1.7}

/* entregas */
.deliver{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.deliver li{position:relative;padding-left:30px;color:var(--navy-800);line-height:1.6}
.deliver li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--gold-800);font-weight:700;
}

/* nota honesta — o que a solução NÃO resolve */
.honest{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--navy-700);
  border-radius:4px;padding:24px 26px;
}
.honest h3{font-size:1.05rem;color:var(--navy-800);margin:0 0 10px}
.honest p{margin:0;color:var(--muted);line-height:1.7}

/* faq */
.sol-faq{display:flex;flex-direction:column;gap:12px}

/* cta */
.sol-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 120%);
  color:var(--off);padding:76px 0;text-align:center;
}
.sol-cta__inner{position:relative;z-index:1;max-width:52em;margin:0 auto}
.sol-cta h2{font-family:var(--serif);font-weight:600;color:var(--white);font-size:clamp(1.6rem,2.8vw,2.1rem);margin:0 0 14px;text-wrap:balance}
.sol-cta p{color:#c3cadb;font-weight:300;margin:0 0 28px}
.sol-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* outras soluções */
.sol-more{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.sol-more a{
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:16px 18px;font-size:.92rem;font-weight:700;color:var(--navy-800);transition:.22s;
}
.sol-more a:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.sol-more a[aria-current]{background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}

@media (max-width:860px){
  .deliver,.sol-more{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* 3.14: títulos balanceados no celular (ver styles.css) */
  .sol-hero h1,.sol__title,.sol-cta h2{text-wrap:balance}
  .sol-hero{padding:130px 0 56px}
  .sol{padding:60px 0}
  .deliver,.sol-more{grid-template-columns:1fr}
  .sol-cta__btns .btn{width:100%}
}

/* ===================================================================
   /metodo — página de case (estudo de reestruturação operacional)
=================================================================== */

/* números de destaque */
.mx-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 40px;
  list-style:none;padding:0;
}
.mx-stat{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:4px;padding:20px 22px;
}
.mx-stat__n{
  display:block;font-family:var(--serif);font-weight:700;color:var(--navy-800);
  font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.05;letter-spacing:-.01em;
}
.mx-stat__l{display:block;margin-top:8px;font-size:.84rem;color:var(--muted);line-height:1.45}

/* figura do gráfico */
.mx-fig{margin:0;background:var(--white);border:1px solid var(--line);border-radius:4px;padding:26px 26px 20px}
.mx-fig__head{margin:0 0 4px;font-size:1.02rem;color:var(--navy-800);font-weight:700}
.mx-fig__sub{margin:0 0 22px;font-size:.86rem;color:var(--muted)}
.mx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mx-chart{width:100%;min-width:520px;height:auto;display:block}

.mx-grid{stroke:var(--line-soft);stroke-width:1}
.mx-axis{stroke:var(--line);stroke-width:1}
.mx-ytick{fill:var(--muted);font-size:11px;text-anchor:end;font-family:var(--sans)}
.mx-xtick{fill:var(--muted);font-size:12px;text-anchor:middle;font-family:var(--sans)}
.mx-val{fill:var(--white);font-size:13.5px;font-weight:700;text-anchor:middle;font-family:var(--sans)}

.mx-bar--over{fill:var(--alert)}
.mx-bar--under{fill:var(--positive)}
.mx-bar{transition:opacity .18s}
.mx-chart:hover .mx-bar{opacity:.62}
.mx-chart .mx-bar:hover{opacity:1}

.mx-meta{stroke:var(--gold-800);stroke-width:2;stroke-dasharray:5 4}
.mx-metalab{fill:var(--gold-800);font-size:11.5px;font-weight:700;text-anchor:end;font-family:var(--sans)}

.mx-after{fill:var(--navy-900);opacity:.035}
.mx-mark{stroke:var(--navy-700);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.mx-marklab{fill:var(--navy-700);font-size:11px;font-weight:700;font-family:var(--sans);letter-spacing:.04em}

/* legenda + tabela */
.mx-key{display:flex;flex-wrap:wrap;gap:18px;margin:18px 0 0;font-size:.82rem;color:var(--muted)}
.mx-key span{display:inline-flex;align-items:center;gap:7px}
.mx-key i{width:12px;height:12px;border-radius:3px;display:inline-block;flex-shrink:0}
.mx-key i.over{background:var(--alert)}
.mx-key i.under{background:var(--positive)}
.mx-key i.meta{height:0;border-top:2px dashed var(--gold-800);border-radius:0}

.mx-table{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;overflow-x:auto}
.mx-table summary{cursor:pointer;font-size:.86rem;font-weight:700;color:var(--gold-800)}
.mx-table table{width:100%;min-width:330px;border-collapse:collapse;margin-top:14px;font-size:.86rem}
.mx-table th,.mx-table td{padding:8px 10px;white-space:nowrap;text-align:right;border-bottom:1px solid var(--line-soft)}
.mx-table th:first-child,.mx-table td:first-child{text-align:left}
.mx-table thead th{color:var(--navy-800);font-weight:700;border-bottom:1px solid var(--line)}
.mx-table td{color:var(--muted)}
.mx-table tbody th{color:var(--navy-800);font-weight:400}

/* prosa da seção-ponte */
.mx-prose{color:var(--muted);line-height:1.75;margin:0 0 18px}
.mx-prose:last-child{margin-bottom:0}

/* fonte do dado */
.mx-source{margin:14px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}

@media (max-width:900px){ .mx-stats{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
  .mx-fig{padding:20px 16px 16px}
  /* 3.14: "6.511 → 2.120" não cabe em meia coluna de 331px; uma coluna por número */
  .mx-stats{gap:10px;grid-template-columns:1fr}
  .mx-stat__n{white-space:nowrap}
}

/* reveal ao rolar nas páginas de solução: o script marca .reveal só nos
   blocos abaixo da dobra, então nada pisca no carregamento */
.how.reveal,.pain.reveal,.deliver.reveal,.sol-faq.reveal{opacity:1;transform:none}
.how.reveal .how__item,.pain.reveal li,.deliver.reveal li,.sol-faq.reveal .faq__item{
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;
}
.how.reveal.is-in .how__item,.pain.reveal.is-in li,.deliver.reveal.is-in li,.sol-faq.reveal.is-in .faq__item{opacity:1;transform:none}
.how.reveal>:nth-child(2),.pain.reveal>:nth-child(2),.deliver.reveal>:nth-child(2),.sol-faq.reveal>:nth-child(2){transition-delay:.06s}
.how.reveal>:nth-child(3),.pain.reveal>:nth-child(3),.deliver.reveal>:nth-child(3),.sol-faq.reveal>:nth-child(3){transition-delay:.12s}
.how.reveal>:nth-child(4),.pain.reveal>:nth-child(4),.deliver.reveal>:nth-child(4),.sol-faq.reveal>:nth-child(4){transition-delay:.18s}
.pain.reveal>:nth-child(5),.deliver.reveal>:nth-child(5),.sol-faq.reveal>:nth-child(5){transition-delay:.24s}
.deliver.reveal>:nth-child(6),.sol-faq.reveal>:nth-child(6){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .how.reveal .how__item,.pain.reveal li,.deliver.reveal li,.sol-faq.reveal .faq__item{opacity:1;transform:none;transition:none;transition-delay:0s}
}

/* 3.6: sequência ilustrada (story) abaixo do hero — três quadros, uma frase cada.
   No celular vira rolagem lateral com encaixe, como story. */
.story{margin:0}
.story__track{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none}
.story__card{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-img);overflow:hidden}
.story__card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--blue-50)}
.story__card figcaption{display:flex;gap:10px;align-items:baseline;padding:14px 16px 16px;font-size:.95rem;color:var(--navy-800);font-weight:500;line-height:1.45;text-wrap:pretty}
.story__n{font-size:.78rem;color:var(--blue-500);font-weight:600;letter-spacing:.04em;flex-shrink:0}
@media (max-width:860px){
  .story__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .story__track::-webkit-scrollbar{display:none}
  .story__card{flex:0 0 82%;scroll-snap-align:start}
}

/* 3.6: texto longo das caixas fica atrás de "Continuar lendo" (só com JS;
   sem JS o texto aparece inteiro) */
.how__item.is-clamp p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.how__item.is-open p{display:block;-webkit-line-clamp:unset}
.how__more{margin:12px 0 0;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;color:var(--blue-500)}
.how__more:hover{color:var(--blue-600)}
.how__more::after{content:" ↓";font-weight:400}
.how__item.is-open .how__more::after{content:" ↑"}