/* ==========================================================================
   WP SOLUÇÕES — página de Soluções (catálogo por segmento)
   Carregada só nesta página (push('head') em pages/projects.blade.php).
   Usa os tokens de theme.css; não redefine nenhum.
   ========================================================================== */

:root{
  /* Altura do cabeçalho quando ele vira fixo (production-site.css: 66px).
     Tudo que precisa parar embaixo dele — o menu de segmentos e o alvo das
     âncoras — sai daqui, para não haver três números soltos discordando. */
  --seg-topo:66px;
}

/* ------------------------------------------------- menu de segmentos ---- */

.seg-nav{
  position:sticky;
  top:var(--seg-topo);
  z-index:150;                       /* abaixo do cabeçalho (200) */
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--slate-100);
  box-shadow:0 8px 24px rgba(10,27,66,.05);
}
.seg-nav__inner{display:flex;align-items:center;gap:18px;min-height:64px}
.seg-nav__label{
  flex:none;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-500);
}
.wp-site .seg-nav__list{
  display:flex;align-items:center;gap:8px;margin:0;padding:10px 0;list-style:none;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  /* Some a barra de rolagem e deixa a última pílula "vazar" no celular,
     que é o sinal de que a lista continua para o lado. */
  scroll-snap-type:x proximity;
}
.seg-nav__list::-webkit-scrollbar{display:none}
.seg-nav__list>li{flex:none;scroll-snap-align:start}
.seg-nav__list a{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:650;line-height:1;white-space:nowrap;
  color:var(--slate-700);background:var(--slate-100);
  border:1px solid transparent;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.seg-nav__list a i{font-size:.8rem;color:var(--blue-600);transition:color var(--fast)}
.seg-nav__list a:hover{background:#fff;border-color:var(--slate-200);color:var(--navy-800);transform:translateY(-1px)}
.seg-nav__list a.esta-na-tela{
  background:linear-gradient(120deg,var(--blue-700),var(--blue-500));
  color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(15,98,254,.28);
}
.seg-nav__list a.esta-na-tela i{color:#fff}
.seg-nav__list a:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}

@media(max-width:640px){
  .seg-nav__label{display:none}
  .seg-nav__inner{gap:0}
  .seg-nav__list{padding:12px 0}
}

/* ------------------------------------------------------- os segmentos --- */

.seg{
  position:relative;
  padding-block:clamp(56px,6vw,96px);
  scroll-margin-top:calc(var(--seg-topo) + 72px);   /* + a altura do menu */
  background:var(--paper);
}
.seg:nth-child(even){background:var(--mist)}

/* Um brilho frio bem de leve atrás do visual, para a página não virar uma
   pilha de faixas chapadas. Fica atrás de tudo e não intercepta clique. */
.seg::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 55% at 78% 18%,rgba(0,212,255,.07),transparent 70%);
}
.seg--invertido::before{background:radial-gradient(60% 55% at 22% 18%,rgba(15,98,254,.07),transparent 70%)}

.seg__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,68px);align-items:start;
}
.seg--invertido .seg__copy{order:2}
.seg--invertido .seg__visual{order:1}

.seg__marca{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.seg__icone{
  width:52px;height:52px;flex:none;border-radius:15px;
  display:grid;place-items:center;font-size:1.15rem;color:#fff;
  background:linear-gradient(135deg,var(--navy-800),var(--blue-600));
  box-shadow:0 14px 30px rgba(11,79,209,.28);
}
.seg__nome{
  font-size:.78rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-700);line-height:1.25;
}

.wp-site .seg h2{
  font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.1;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 22px;max-width:19ch;
}

/* A dor do cliente. É o parágrafo que faz alguém se reconhecer e continuar
   lendo, então ganha peso, corpo maior e uma barra que o separa do resto. */
.wp-site .seg__dor{
  position:relative;margin:0 0 18px;padding-left:20px;
  font-size:clamp(1.02rem,.98rem + .25vw,1.1875rem);line-height:1.55;
  font-weight:600;color:var(--navy-800);
}
.seg__dor::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--blue-600),var(--cyan-400));
}

/* `seg__resumo` saiu do bloco: a descricao virou o proprio titulo. A regra
   fica porque um segmento antigo, cadastrado antes desta mudanca, ainda pode
   trazer o paragrafo pelo painel. */
.wp-site .seg__resumo{margin:0 0 26px;font-size:1rem;line-height:1.7;color:var(--slate-500)}

.wp-site .seg__lista{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.wp-site .seg__lista li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.seg__lista i{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:.62rem;color:var(--success);background:rgba(19,185,102,.12);margin-top:.15em;
}
.wp-site .seg__lista span{font-size:.9375rem;line-height:1.6;color:var(--slate-700)}

/* -------------------------------------------- sistemas que resolvem ----- */

.seg__sistemas{margin-bottom:30px}
.wp-site .seg__sistemas-titulo{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate-500);margin:0 0 12px;
}
.seg__chips{display:flex;flex-wrap:wrap;gap:12px}

.seg-chip{
  display:flex;align-items:center;gap:13px;
  padding:9px 18px 9px 9px;border-radius:14px;
  background:var(--paper);border:1px solid var(--slate-200);
  box-shadow:var(--shadow-xs);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.seg-chip>img,.seg-chip__marca{
  width:62px;height:44px;flex:none;border-radius:9px;overflow:hidden;
  object-fit:cover;object-position:top center;   /* o alto da tela é o que se reconhece */
  background:var(--slate-100);display:block;
}
.seg-chip__marca{display:grid;place-items:center;color:var(--blue-600);font-size:.9rem}
.seg-chip__texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.wp-site .seg-chip__texto b{font-size:.9375rem;font-weight:700;color:var(--ink);line-height:1.2}
.wp-site .seg-chip__texto small{
  font-size:.78rem;font-weight:600;color:var(--blue-600);
  display:inline-flex;align-items:center;gap:6px;
}
.seg-chip__texto small i{font-size:.65rem;transition:transform var(--fast) var(--ease)}
.seg-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--sky-300)}
.seg-chip:hover .seg-chip__texto small i{transform:translateX(3px)}
.seg-chip:focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}

.seg-chip--simples{
  padding:11px 16px;color:var(--slate-700);font-size:.9rem;font-weight:650;
  background:var(--slate-100);border-color:transparent;box-shadow:none;
}
.seg-chip--simples:hover{transform:none;box-shadow:none;border-color:transparent}

.seg__cta{align-self:flex-start}
.seg__cta i{margin-left:4px;transition:transform var(--fast) var(--ease)}
.seg__cta:hover i{transform:translateX(4px)}

/* ------------------------------------------------------------ a tela --- */

.seg__visual{position:relative}
@media(min-width:1024px){
  /* A imagem acompanha a leitura da coluna de texto, que é mais alta. Sem
     isto, o print some da tela no meio da lista de destaques. */
  .wp-site .seg__tela{position:sticky;top:calc(var(--seg-topo) + 96px)}
}

.wp-site .seg__tela{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);border:1px solid var(--slate-200);
  box-shadow:0 30px 70px rgba(10,27,66,.16);
}
.seg__barra{
  display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:linear-gradient(180deg,#F7FAFF,#EEF3FB);border-bottom:1px solid var(--slate-100);
}
.seg__barra span{width:10px;height:10px;border-radius:50%;background:var(--slate-300)}
.seg__barra span:first-child{background:#FF8A8A}
.seg__barra span:nth-child(2){background:#FFC46B}
.seg__barra span:nth-child(3){background:#7BD98F}
.seg__tela img{display:block;width:100%;height:auto}
.wp-site .seg__tela figcaption{
  padding:13px 18px;font-size:.8125rem;font-weight:600;color:var(--slate-500);
  border-top:1px solid var(--slate-100);background:var(--paper);
}

.wp-site .seg__tela--vazia{
  display:grid;place-items:center;gap:12px;min-height:260px;padding:40px;
  color:var(--slate-500);text-align:center;box-shadow:var(--shadow-sm);
}
.seg__tela--vazia i{font-size:2.4rem;color:var(--slate-300)}
.seg__tela--vazia b{font-size:1rem;color:var(--slate-700)}

/* ---------------------------------------------------------- jornada ----- */

.seg-jornada{padding-block:clamp(56px,6vw,92px);background:var(--paper)}
.wp-site .seg-jornada__passos{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
}
.wp-site .seg-jornada__passos>li{
  position:relative;padding:30px 26px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,#fff,var(--mist));
  border:1px solid var(--slate-200);box-shadow:var(--shadow-sm);
}
/* A linha que liga um passo ao seguinte: mostra que é um caminho, não três
   caixas soltas. Só no desktop, onde os passos ficam lado a lado. */
@media(min-width:900px){
  .wp-site .seg-jornada__passos>li:not(:last-child)::after{
    content:"";position:absolute;top:56px;right:-22px;width:22px;height:2px;
    background:linear-gradient(90deg,var(--slate-200),var(--sky-300));
  }
}
.seg-jornada__numero{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;
  border-radius:14px;font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--navy-800),var(--blue-600));
  box-shadow:0 12px 26px rgba(11,79,209,.26);
}
.wp-site .seg-jornada__passos h3{font-size:1.0625rem;font-weight:750;color:var(--ink);margin:0 0 9px}
.wp-site .seg-jornada__passos p{margin:0;font-size:.9125rem;line-height:1.65;color:var(--slate-500)}

/* --------------------------------------------------------- respostas ---- */

@media(max-width:1023px){
  .seg__grid{grid-template-columns:1fr;gap:34px}
  /* No empilhado a tela vem sempre depois do texto: alternar a ordem em
     coluna única só faz o leitor perder o fio. */
  .seg--invertido .seg__copy,
  .seg--invertido .seg__visual{order:initial}
  .wp-site .seg-jornada__passos{grid-template-columns:1fr}
}

@media(max-width:560px){
  .seg-chip{width:100%}
  .seg__cta{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .seg-nav__list a,.seg-chip,.seg__cta i,.seg-chip__texto small i{transition:none}
  .seg-nav__list a:hover,.seg-chip:hover{transform:none}
  .wp-site .seg__tela{position:static}
}

@media print{
  .seg-nav{display:none}
  .seg::before{display:none}
  .seg__grid{grid-template-columns:1fr}
}