/* ============================================================
   TREND — solutions.css
   /solutions/ — os três sistemas de marca própria.
   Raiz `.sol` no <main>. Plano: docs/plano-solutions.md.
   ------------------------------------------------------------
   Duas coisas que esta folha decide, e o porquê:

   1. UM efeito de scroll na página inteira: a FOTO de cada sistema
      fica presa (`position: sticky`) enquanto o texto passa ao lado.
      Só acima de 1060px, CSS puro — sem GSAP, sem Lenis, sem JS. A
      /our-services/, que é a vizinha no menu, já usa painéis presos
      de 100vh; repetir aquilo aqui faria as duas lerem como a mesma
      página. Prender o TÍTULO foi a primeira tentativa e ficou errado:
      a coluna dele é a curta, e sobrava meia tela de vazio embaixo.
   2. A cadência vem do FUNDO, não do movimento: creme → branco →
      escuro → branco, e o fechamento escuro. É o que o DESIGN.md pede
      e é de graça.

   Nenhum valor de marca hard-coded: tudo sai dos tokens.
   ============================================================ */

.sol {
  --sol-gap: clamp(2rem, 4vw, var(--space-9));
  /* O header é fixo; o título preso precisa parar abaixo dele. */
  --sol-stick: 120px;
}

/* A seleção de texto é uma superfície do navegador como outra
   qualquer — sem isto ela sai azul de sistema no meio da marca. */
.sol ::selection {
  background: var(--brand-accent);
  color: var(--neutral-900);
}

/* ============================================================
   0. HERO — uma conversa depois do fechamento (01/10/2026, TRED-133)
   ------------------------------------------------------------
   No lugar do `page-hero` das internas: o produto trabalhando. Título
   em Bebas à esquerda; à direita um painel de tinta com o relógio da
   cena, o status da loja e a conversa, que entra fala por fala. A
   chave Dealership | Restaurant são rádios nativos; quem troca a cena
   é o `:has()` e a sequência é `animation-delay` — sem JS de página.
   As duas cenas moram na mesma célula da grade: a inativa fica
   `visibility: hidden`, então o painel não muda de altura ao trocar e
   o leitor de tela só lê a cena da vez. A sequência inteira dura ~4s,
   uma vez por troca: abaixo dos 5s em que a WCAG 2.2.2 pede pausa.
   ============================================================ */

.sol-hero {
  background: var(--surface-page);
  padding: clamp(140px, 18vh, 200px) 0 var(--section-y);
}

.sol-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--sol-gap);
}

/* a trilha no fundo claro (a do `page-hero` é para fundo escuro) */
.sol-hero .breadcrumb a { color: var(--text-muted); }
.sol-hero .breadcrumb a:hover { color: var(--brand-primary); }
.sol-hero .breadcrumb [aria-current] { color: var(--brand-primary); }
.sol-hero .breadcrumb__sep { color: var(--border-strong); }

.sol-hero__title {
  margin: 0;
  max-width: 18ch;   /* duas linhas no desktop: YOUR SITE ANSWERS / WHILE YOU SLEEP. */
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--title-call);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--brand-ink);
  text-wrap: balance;
}

.sol-hero__lead {
  margin: var(--space-5) 0 0;
  max-width: 40ch;
  font-size: var(--title-lead);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--text-body);
}

/* — o painel — */

.sol-chat {
  justify-self: end;
  width: 100%;
  max-width: 30rem;
  /* conversa é conversa: o visitante à direita, o sistema à esquerda,
     texto alinhado no balão — também no celular, onde o resto centra */
  text-align: left;
}

.sol-chat__switch {
  display: flex;
  width: fit-content;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
}
.sol-chat__switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.sol-chat__switch label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--brand-ink);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.sol-chat__switch label:hover { color: var(--brand-primary); }
.sol-chat__switch input:checked + label { background: var(--brand-ink); color: var(--white); }
.sol-chat__switch input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.sol-chat__panel {
  display: grid;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--site-dark);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-lg);
}
.sol-chat__scene { grid-area: 1 / 1; min-width: 0; }
.sol-chat__scene--restaurant,
.sol-chat:has(#sol-scene-restaurant:checked) .sol-chat__scene--dealer { visibility: hidden; }
.sol-chat:has(#sol-scene-restaurant:checked) .sol-chat__scene--restaurant { visibility: visible; }

/* relógio da cena e o status: a hora É o argumento — a loja fechou */
.sol-chat__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--on-dark-rule);
}
.sol-chat__clock {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display-m);
  line-height: 0.85;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--surface-page);
}
.sol-chat__day,
.sol-chat__status {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.sol-chat__day { display: block; margin-bottom: var(--space-2); }
.sol-chat__status {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  text-align: right;
}
/* turquesa sobre a tinta — permitido; é o único ponto aceso do painel */
.sol-chat__open { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--brand-accent-bright); }
.sol-chat__open::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.sol-chat__thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sol-chat__msg {
  max-width: 86%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: var(--text-base);
  line-height: 1.4;
  text-wrap: pretty;   /* sem "10?" sozinho na última linha */
}
.sol-chat__msg--visitor {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--white);
  color: var(--brand-ink);
}
.sol-chat__msg--bot {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--brand-primary);
  color: var(--white);
}
.sol-chat__booked {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: var(--brand-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.sol-chat__booked svg { flex: none; width: 14px; height: 14px; }

.sol-chat__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  /* `--neutral-600`: o `--text-muted` dava 4,3:1 a 12px sobre o painel (TRED-141) */
  color: var(--neutral-600);
}

/* a conversa entra fala por fala, e de novo a cada troca de cena: a
   animação só existe na cena ativa, então ligar a outra a reinicia */
@media (prefers-reduced-motion: no-preference) {
  .sol-chat__scene--dealer :is(.sol-chat__msg, .sol-chat__booked),
  .sol-chat:has(#sol-scene-restaurant:checked) .sol-chat__scene--restaurant :is(.sol-chat__msg, .sol-chat__booked) {
    animation: sol-msg 0.5s var(--ease-out) both;
    animation-delay: calc(0.35s + var(--i) * 0.85s);
  }
  .sol-chat:has(#sol-scene-restaurant:checked) .sol-chat__scene--dealer :is(.sol-chat__msg, .sol-chat__booked) { animation: none; }
}
@keyframes sol-msg {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

@media (max-width: 1060px) {
  .sol-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sol-chat { justify-self: start; }
}
@media (max-width: 760px) {
  .sol-hero__title,
  .sol-hero__lead,
  .sol-chat,
  .sol-chat__switch { margin-inline: auto; }
  .sol-chat { justify-self: center; }
  .sol-chat__panel { padding: var(--space-5); }
  .sol-chat__caption { text-align: center; }
}

/* ============================================================
   1. ABERTURA — o que Solutions é, e o que não é
   ============================================================ */

/* o fio separa a abertura do hero, que tem o mesmo chão (DESIGN.md:
   dois vizinhos do mesmo fundo se separam) */
.sol-intro {
  background: var(--surface-cream);
  border-top: 1px solid var(--border-subtle);
}

/* Coluna única em qualquer largura (26/09/2026). Em 7/12 + 5/12 a
   Declaração quebrava cada frase em duas; inteira, cada frase é uma
   linha e o paralelo "Services… / Solutions…" se lê de relance. */
.sol-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.sol-intro__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--title-statement);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

/* uma frase por bloco: é o que deixa o `balance` trabalhar em cada uma */
.sol-intro__title span {
  display: block;
  text-wrap: balance;
}

.sol-intro__lede {
  font-size: var(--title-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--text-body);
  max-width: 62ch;
  margin: 0;
}

/* As âncoras são navegação, não filtro: os três sistemas servem aos
   dois nichos, então um seletor "Dealers | Restaurants" mostraria a
   mesma coisa nas duas abas. O nicho aparece DENTRO de cada sistema. */
.sol-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.sol-anchors__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px; /* piso de alvo de toque */
  touch-action: manipulation;
  padding: 0 var(--space-5);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.sol-anchors__link::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.55;
  transition: transform var(--dur-base) var(--ease-out);
}

.sol-anchors__link:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.sol-anchors__link:hover::after { transform: rotate(45deg) translate(1px, 1px); }

.sol-anchors__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sol-intro__for {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   2. OS TRÊS SISTEMAS
   ============================================================ */

.sol-system {
  background: var(--surface-card);
  /* Âncora do topo: o header fixo é coberto pelo `scroll-padding-top` do
     html (theme.css, 112px, TRED-141); estes 8px devolvem o pouso de antes,
     a 120px (`--sol-stick`). Com os 120px aqui, os dois somariam. */
  scroll-margin-top: calc(var(--sol-stick) - 112px);
}

.sol-system--dark {
  background: var(--site-dark);
  color: var(--text-on-dark);
}

.sol-system__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sol-gap);
}

.sol-system__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--title-section);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: var(--space-4) 0 0;
  text-wrap: balance;
  max-width: 22ch;
}

.sol-system--dark .sol-system__title { color: var(--text-on-dark); }

.sol-system__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-body);
  max-width: 46ch;
  margin: var(--space-5) 0 0;
}

.sol-system--dark .sol-system__lede { color: var(--on-dark-body); }

/* As linhas-chave (17/10/2026, TRED-142): o que o sistema faz, uma por
   linha, com a seta curta da marca de marcador — o desenho das entregas
   da /our-services/, para a mesma ideia ter a mesma cara no site. A seta
   é máscara sobre a cor do token: no claro, o turquesa escuro dos rótulos
   de nicho; na tinta, o vivo (turquesa só não pode sobre o roxo). */
.sol-keys {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  /* a medida do lede (46ch) quebrava cada linha em duas, com "take it."
     sozinho embaixo; com 64ch cada uma cabe inteira no desktop */
  max-width: 64ch;
}

.sol-keys li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--text-strong);
  text-wrap: pretty;
}

.sol-keys li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.7em - 5px);   /* o meio da seta no meio da 1ª linha */
  width: 16px;
  height: 10px;
  background: var(--teal-700);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sol-system--dark .sol-keys li { color: var(--on-dark-strong); }
.sol-system--dark .sol-keys li::before { background: var(--brand-accent-bright); }

.sol-system__figure {
  margin: 0 0 var(--space-7);
}

.sol-system__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.sol-system--dark .sol-system__media { box-shadow: none; }

/* As duas leituras de nicho — o "agrupado por nicho" pedido pelo
   cliente, resolvido dentro do sistema em vez de duplicar o card. */
.sol-niches {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--neutral-200);
}

.sol-system--dark .sol-niches { border-top-color: var(--on-dark-rule); }

.sol-niche__label {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: var(--space-2);
}

.sol-system--dark .sol-niche__label { color: var(--on-dark-muted); }

.sol-niche p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-strong);
  max-width: 44ch;
}

.sol-system--dark .sol-niche p { color: var(--on-dark-strong); }

/* Celular: tudo centrado (01/10/2026, ver o fim do theme.css). As
   medidas em `ch` vão para o meio junto com o texto. */
@media (max-width: 760px) {
  .sol-intro__lede,
  .sol-system__title,
  .sol-system__lede,
  .sol-niche p { margin-inline: auto; }

  /* TRED-140 (10/10/2026): o hero mais baixo, as pílulas como abas e os
     três sistemas em SLIDES. Empilhados eram 2,9 telas; a página, 6,4. */
  /* o mock do chat: a mesma conversa com menos ar — relógio, balões e
     respiros um degrau menores */
  .sol-chat__panel { padding: var(--space-4); border-radius: var(--radius-lg); }
  .sol-chat__clock { font-size: calc(var(--text-display-m) * 0.8); }
  .sol-chat__head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
  .sol-chat__thread { gap: var(--space-2); }
  .sol-chat__msg { padding: 8px 12px; font-size: var(--text-sm); }
  /* as pílulas numa linha só, rolável de borda a borda; a do slide à vista
     fica preenchida (aria-current, site.js) */
  .sol-anchors {
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* a linha é rolável, mas a célula da grade da abertura cresceria até o
       conteúdo dela e a página ganhava 54px de rolagem lateral (medido a
       390); com a contenção, a largura intrínseca da linha é zero */
    contain: inline-size;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    /* a linha corta o que passa da caixa: sem o respiro, o anel da pílula
       saía com 1 ou 2 dos 4 lados (TRED-141). A margem de cima é a de
       sempre (`--space-5`) menos o respiro. */
    padding-block: 6px;
    margin-block: calc(var(--space-5) - 6px) -6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .sol-anchors::-webkit-scrollbar { display: none; }
  .sol-anchors li { flex: none; scroll-snap-align: center; }
  .sol-anchors__link[aria-current="true"] {
    border-color: var(--brand-ink);
    background: var(--brand-ink);
    color: var(--white);
  }
  /* a fila dos sistemas ocupa a tela inteira (sem a margem negativa do
     utilitário: o pai é o <main>, e ela estouraria a largura), no chão
     creme da abertura; cada sistema é um cartão de 88%, com o seguinte
     aparecendo na borda */
  .sol-systems {
    --swipe-card: 88%;
    margin-inline: 0;
    margin-block: 0;   /* o respiro do anel (theme.css) já está no padding-block abaixo */
    padding-block: var(--space-7);
    background: var(--surface-cream);
  }
  .sol-systems__rule { background: var(--surface-cream); padding-bottom: var(--space-7); }
  .sol-systems__rule .swipe-rule { margin-top: 0; }
  .sol-system {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .sol-system--dark { border-color: transparent; }
  .sol-system > .wrap { padding: var(--space-4) var(--space-4) var(--space-5); }
  .sol-system__figure { margin-bottom: var(--space-5); }
  .sol-system__media { aspect-ratio: 16 / 9; border-radius: var(--radius-md); box-shadow: none; }
  .sol-system__lede { margin-top: var(--space-3); font-size: var(--text-base); }
  /* a seta sai da margem e vira glifo na linha, antes da primeira palavra:
     com o texto centrado, na margem ela ficaria longe da frase (como nas
     entregas da /our-services/) */
  .sol-keys { margin: var(--space-5) auto 0; gap: var(--space-2); }
  .sol-keys li { padding-left: 0; }
  .sol-keys li::before {
    position: static;
    display: inline-block;
    margin-right: var(--space-2);
    vertical-align: 0.02em;
  }
  /* dealership e restaurant lado a lado, como no tablet */
  .sol-niches { grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); }
  .sol-niche p { max-width: none; }
}

/* ============================================================
   3. ≥760px — duas colunas onde cabem duas
   ============================================================ */

@media (min-width: 760px) {
  .sol-niches { grid-template-columns: 1fr 1fr; gap: var(--space-6); }

  /* Entre o tablet e o desktop a foto ainda ocupa a largura toda, e em
     3:2 isso são ~650px de altura só de abertura. Panorâmica até as
     colunas entrarem. */
  .sol-system__media { aspect-ratio: 2 / 1; }
}

/* ============================================================
   4. ≥1061px — o único efeito de scroll da página
   ============================================================ */

@media (min-width: 1061px) {
  .sol-system__inner {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-9);
    align-items: start;
  }

  /* O efeito, e o único da página: a foto acompanha a leitura do bloco.
     Sem pin de tela inteira e sem sequestrar o scroll — a página rola
     normalmente, o retrato do sistema é que fica em cena enquanto o
     texto passa. */
  .sol-system__figure {
    position: sticky;
    top: var(--sol-stick);
    margin: 0;
  }

  .sol-system__media { aspect-ratio: 3 / 2; }

  /* O escuro inverte, para os três blocos não baterem no mesmo eixo.
     A proporção inverte junto — o texto é que precisa da coluna larga,
     de qualquer lado que ele caia. */
  .sol-system--flip .sol-system__inner { grid-template-columns: 7fr 5fr; }
  .sol-system--flip .sol-system__figure { order: 2; }
  .sol-system--flip .sol-system__body { order: 1; }
}

/* Quem pede menos movimento não perde nada aqui: o conteúdo é o
   mesmo, só deixa de acompanhar — e a pílula deixa de subir no hover,
   mudando só a borda e a sombra. */
@media (prefers-reduced-motion: reduce) {
  .sol-system__figure { position: static; }
  .sol-anchors__link,
  .sol-anchors__link::after { transition: none; }
  .sol-anchors__link:hover { transform: none; }
  .sol-anchors__link:hover::after { transform: rotate(45deg) translate(-1px, -1px); }
}