/* ==========================================================================
   RESERVA — o desenho das secções que saíram da Home a 14/09/2026

   ESTA FOLHA NÃO É CARREGADA POR PÁGINA NENHUMA, e é o par de
   `assets/js/home-reserva.js`. Está aqui porque a instrução que tirou estas
   secções da Home diz, na mesma folha, para não apagar componentes nem
   código reutilizável — e porque três delas vão fazer falta nas páginas
   internas.

   O que guarda:

   · o grid dos dez PROBLEMAS, em fichas compactas;
   · o COMPARATIVO, nos seus dois estados — a matriz completa e o estado
     verificável, que é o que se mostra enquanto as gradações do briefing não
     forem validadas;
   · o QUADRO DE ESCOLHA por situação, com a régua de acento do produto;
   · os CASES, na sequência problema, transformação, resultado.

   Depende dos tokens de `vazto.css` — cores, tipos, `--ease` — e de mais
   nada. Para voltar a usar um destes blocos: carregar esta folha e
   `home-reserva.js` na página, e pôr lá o contentor que o bloco procura
   (`#probsG`, `#compPalco`, `#escolha` ou `#cases`).

   O CHÃO QUE CADA UM ASSUME está escrito no bloco: os problemas foram
   desenhados para chão claro; o comparativo e a escolha para chão escuro; o
   cartão de case é claro e foi feito para chão claro.
   ========================================================================== */

/* ==========================================================================
   03 · SUA EMPRESA ESTÁ PRONTA PARA DAR O PRÓXIMO PASSO?

   Dez problemas em dez fichas. NÃO SÃO CARTÕES: não têm fundo próprio, não
   têm sombra e não têm borda em repouso — o que as separa é o espaço e um
   traço fino. Dez cartões a sério somavam quase mil pixéis de altura e
   faziam desta secção o assunto da página, quando o papel dela é durar três
   segundos e passar.

   Cinco colunas por duas filas no desktop; duas colunas no telemóvel, que é
   onde uma palavra como "Projetos que não saem do papel" precisa de duas
   linhas para não ficar ilegível.
   ========================================================================== */
.probs__g{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.1vw,14px);
}
@media (min-width:680px){ .probs__g{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:1000px){ .probs__g{ grid-template-columns:repeat(5,minmax(0,1fr)) } }

.prob{
  display:flex; align-items:center; gap:clamp(10px,1vw,13px);
  min-inline-size:0;
  padding:clamp(13px,1.3vw,16px) clamp(12px,1.2vw,16px);
  border-radius:14px;
  border:1px solid transparent;
  background:linear-gradient(168deg,rgba(2,115,115,.045),rgba(2,115,115,.015));
  transition:border-color .3s ease, background-color .3s ease, transform .3s var(--ease);
}
.prob:hover{ border-color:rgba(2,115,115,.18); transform:translateY(-2px) }

.prob__ico{
  flex:none; display:grid; place-items:center;
  inline-size:clamp(34px,3.2vw,40px); block-size:clamp(34px,3.2vw,40px);
  border-radius:11px;
  color:var(--teal);
  background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(2,115,115,.14), 0 8px 18px -14px rgba(1,46,53,.55);
}
/* Um `<span>` é inline e um `<svg>` dentro dele cai para 300×150 e estica a
   ficha inteira. O contentor tem de declarar tamanho, e o desenho também. */
.prob__ico .ico{ inline-size:clamp(21px,2vw,24px); block-size:clamp(21px,2vw,24px) }

.prob__t{
  min-inline-size:0;
  font-size:clamp(13.5px,1.25vw,14.5px); line-height:1.32;
  font-weight:600; color:var(--text);
  letter-spacing:-.005em;
}


/* ==========================================================================
   06 · COMPARATIVO

   Duas formas, e quem decide é o conteúdo. Ver `home-2026.js` e o comentário
   de `COMPARATIVO` em `home-dados.js`: enquanto as gradações não estiverem
   validadas, esta secção mostra o que é verificável e não desenha a matriz.
   ========================================================================== */
.comp__palco{ max-inline-size:960px; margin-inline:auto }

/* --- os quatro modelos nomeados ------------------------------------------- */
.comp__modelos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(8px,1vw,12px);
}
.comp__modelos li{
  padding:clamp(9px,.95vw,12px) clamp(14px,1.5vw,20px);
  border-radius:100px;
  font-size:clamp(13px,1.3vw,14.5px); font-weight:600;
  color:var(--on-dark-soft);
  border:1px solid var(--rule-dark);
  background:rgba(241,247,247,.03);
}
/* O separador não é uma etiqueta: é o sinal da comparação, e por isso não
   leva chapa nem borda. */
.comp__modelos li.comp__x{
  padding:0; border:0; background:none;
  align-self:center; color:var(--rule-dark);
  font-size:clamp(13px,1.4vw,16px); font-weight:400;
}
.comp__modelos li.is-vazto{
  color:var(--ink); border-color:transparent;
  background:linear-gradient(135deg,var(--cyan-lit),var(--cyan));
  box-shadow:0 12px 28px -16px rgba(7,210,210,.65);
}

.comp__nota{
  margin-block-start:clamp(22px,2.4vw,30px);
  margin-inline:auto; max-inline-size:64ch; text-align:center;
  font-size:clamp(15px,1.5vw,17px); line-height:1.56; color:var(--on-dark-soft);
}

/* --- as oito capacidades --------------------------------------------------
   Quatro colunas por duas filas. Cada uma leva um visto, e o visto é sobre a
   VAZTO — é a única coluna da matriz do PDF cujo conteúdo não depende de
   validar o que terceiros fazem. */
.comp__caps{
  margin-block-start:clamp(30px,3.4vw,44px);
  display:grid; gap:clamp(10px,1.1vw,14px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:700px){ .comp__caps{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.comp__caps li{
  display:flex; align-items:center; gap:10px; min-inline-size:0;
  padding:clamp(13px,1.3vw,16px) clamp(13px,1.4vw,17px);
  border-radius:13px;
  font-size:clamp(13.5px,1.3vw,15px); font-weight:600; color:var(--on-dark);
  border:1px solid var(--rule-dark);
  background:linear-gradient(168deg,rgba(241,247,247,.05),rgba(241,247,247,.015));
}
.comp__caps li i{
  flex:none; display:grid; place-items:center;
  inline-size:22px; block-size:22px; border-radius:50%;
  color:var(--ink); background:var(--cyan);
}
.comp__caps li i svg{ inline-size:12px; block-size:12px }

/* --- a matriz, para quando as gradações existirem -------------------------
   Uma grelha e não um `<table>`: a mesma marcação tem de virar cartões no
   telemóvel, e uma tabela não se reflui. Os papéis de tabela vão por ARIA,
   para quem lê por leitor de ecrã continuar a ouvir uma tabela. */
.mtz{ display:grid; gap:2px }
.mtz__l{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr)); gap:2px }
.mtz__c{ display:flex; align-items:center; padding:clamp(11px,1.2vw,15px) clamp(10px,1.1vw,14px) }
.mtz__c--cap{ font-size:clamp(13px,1.3vw,14.5px); font-weight:600; color:var(--on-dark) }
.mtz__c--mod{
  justify-content:center; text-align:center;
  font-size:clamp(11.5px,1.15vw,13px); font-weight:700;
  letter-spacing:.02em; color:var(--on-dark-soft);
}
.mtz__c--mod.is-vazto{ color:var(--cyan-lit) }
.mtz__v{ justify-content:center; background:rgba(241,247,247,.035); border-radius:8px }
.mtz__v.is-vazto{ background:rgba(7,210,210,.1) }
.mtz__v i{
  inline-size:10px; block-size:10px; border-radius:50%;
  background:var(--rule-dark);
}
.mtz__v--1 i{ background:rgba(241,247,247,.4) }
.mtz__v--2 i{ background:var(--cyan); box-shadow:0 0 0 4px rgba(7,210,210,.16) }
.mtz__v--3 i{ background:var(--cyan-lit); box-shadow:0 0 0 5px rgba(110,245,245,.2) }
/* O rótulo da gradação existe para quem lê por leitor de ecrã e para o
   telemóvel; no desktop o que fala é o disco. */
.mtz__v em{
  position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
@media (max-width:760px){
  .mtz__l{ grid-template-columns:minmax(0,1fr) }
  .mtz__l--cab{ display:none }
  .mtz__c--cap{ padding-block-end:4px }
  .mtz__v{ justify-content:flex-start; gap:10px }
  .mtz__v::before{ content:attr(data-mod); font-size:12.5px; color:var(--on-dark-soft); flex:1 }
  .mtz__v em{ position:static; inline-size:auto; block-size:auto; clip-path:none;
              font-style:normal; font-size:12.5px; color:var(--on-dark) }
}

/* ==========================================================================
   08 · O QUADRO DE ESCOLHA

   Quatro linhas: a situação na voz de quem chega, e a solução que lhe
   responde. Vive por cima da montra, e não dentro dos cartões — ver o
   comentário de `ESCOLHA` em `home-dados.js` para a razão.
   ========================================================================== */
.escolha{
  margin-block-end:clamp(34px,4vw,52px);
  display:grid; gap:clamp(8px,.9vw,12px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){ .escolha{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

.esc{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(12px,1.4vw,20px);
  padding:clamp(15px,1.5vw,19px) clamp(16px,1.7vw,22px);
  border-radius:14px;
  border:1px solid var(--rule-dark);
  background:linear-gradient(168deg,rgba(241,247,247,.05),rgba(241,247,247,.015));
  transition:border-color .3s ease, transform .3s var(--ease);
}
/* A cor do produto entra por uma régua fina na aresta de arranque, e não por
   fundo: um bloco inteiro tingido de lavanda ou de âmbar deixa de ser Vazto. */
.esc::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0;
  inline-size:3px; background:var(--c);
}
.esc:hover{ border-color:var(--c); transform:translateY(-2px) }
.esc__q{
  min-inline-size:0;
  font-size:clamp(14px,1.4vw,15.5px); line-height:1.4; color:var(--on-dark);
}
.esc__r{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(13px,1.3vw,14.5px); color:var(--c);
}
.esc__r b{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; white-space:nowrap }
.esc__r svg{ inline-size:14px; block-size:14px; transition:transform .22s }
.esc:hover .esc__r svg{ transform:translateX(3px) }

@media (max-width:520px){
  .esc{ flex-direction:column; align-items:flex-start; gap:10px }
  .esc__r{ align-self:flex-end }
}


/* ==========================================================================
   13 · CASES

   Cada case conta a mesma história em três tempos — problema, transformação,
   resultado —, e é essa a sequência que o briefing pede. Os três tempos são
   colunas no desktop e uma coluna no telemóvel, com o fio a ligá-los.

   A SECÇÃO SÓ EXISTE QUANDO HOUVER CASES. Enquanto `CASES` estiver vazio em
   `home-dados.js`, o `hidden` no HTML mantém-na fora da página — ver o
   comentário em `home-2026.js`.
   ========================================================================== */
.cases__g{ display:grid; gap:clamp(16px,1.8vw,24px) }
@media (min-width:1000px){ .cases__g{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

.case{
  display:flex; flex-direction:column;
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) clamp(20px,2.2vw,26px);
  border-radius:clamp(16px,1.8vw,22px);
  background:linear-gradient(168deg,#ffffff,#f5f9fa);
  border:1px solid rgba(11,29,31,.08);
  box-shadow:0 26px 50px -36px rgba(1,20,24,.45);
}
.case__cab{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-block-end:clamp(16px,1.8vw,22px);
  border-block-end:1px solid var(--rule);
}
.case__logo{ block-size:clamp(24px,2.4vw,30px); inline-size:auto }
.case__cli{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(17px,1.8vw,21px); color:var(--text);
}
.case__setor{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal);
}

.case__linha{
  margin-block-start:clamp(18px,2vw,24px);
  display:grid; gap:clamp(14px,1.6vw,20px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:620px){ .case__linha{ grid-template-columns:repeat(3,minmax(0,1fr)) } }

.case__p{ position:relative; min-inline-size:0; padding-block-start:16px }
/* O fio entre os três tempos: uma régua no topo de cada um, que se acende no
   terceiro. É o que transforma três parágrafos numa sequência. */
.case__p::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  block-size:2px; border-radius:2px; background:var(--rule);
}
.case__p--3::before{ background:linear-gradient(90deg,var(--teal),var(--cyan)) }
.case__rot{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-soft);
}
.case__p--3 .case__rot{ color:var(--teal) }
.case__p p{ margin-block-start:8px; font-size:14px; line-height:1.55; color:var(--text-soft) }
.case__p--3 p{ color:var(--text); font-weight:600 }

.case__go{
  margin-block-start:auto; padding-block-start:clamp(18px,2vw,24px);
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-size:14px; font-weight:600; color:var(--teal);
}
.case__go svg{ inline-size:14px; block-size:14px; transition:transform .22s }
.case__go:hover svg{ transform:translateX(3px) }


/* ==========================================================================
   A HISTÓRIA — a linha do tempo

   Seis momentos. TRÊS TÊM UMA LINHA E TRÊS NÃO TÊM, e isso é conteúdo, não
   descuido: as que têm são frases oficiais que já existem escritas no site,
   as outras esperam pelo cliente. Ver `HISTORIA` em `sobre-dados.js`.

   O último é o que ainda não aconteceu e leva o nó aberto.
   ========================================================================== */
.hist__lista{
  margin-block-start:clamp(34px,4vw,52px);
  display:grid; gap:clamp(18px,2.2vw,26px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){
  .hist__lista{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px) }
}

.hm{ position:relative; min-inline-size:0; padding-block-start:clamp(18px,2vw,24px) }
.hm__no{
  position:absolute; z-index:1; inset-block-start:0; inset-inline-start:0;
  inline-size:11px; block-size:11px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 4px rgba(2,115,115,.14);
}
/* O momento que ainda não aconteceu: anel em vez de disco. */
.hm--aberto .hm__no{ background:transparent; box-shadow:inset 0 0 0 2px var(--cyan), 0 0 0 4px rgba(7,210,210,.14) }

@media (min-width:760px){
  .hm::before{
    content:""; position:absolute; z-index:0;
    inset-block-start:5px; inset-inline-start:11px;
    inline-size:100%; block-size:1.5px;
    background:rgba(2,115,115,.22);
  }
  .hm:last-child::before{ display:none }
  /* O troço que chega ao futuro perde-se, em vez de acabar a direito. */
  .hm:nth-last-child(2)::before{
    background:linear-gradient(90deg, rgba(2,115,115,.22), rgba(7,210,210,.3));
  }
}
@media (max-width:759px){
  .hm{ padding-inline-start:28px; padding-block-start:0; min-block-size:34px }
  .hm__no{ inset-block-start:4px }
  .hm::before{
    content:""; position:absolute; z-index:0;
    inset-block:14px -22px; inset-inline-start:5px;
    inline-size:1.5px; background:rgba(2,115,115,.22);
  }
  .hm:last-child::before{ display:none }
}

.hm b{
  display:block;
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(14.5px,1.5vw,17px); line-height:1.16; color:var(--text);
}
.hm p{ margin-block-start:7px; font-size:13px; line-height:1.48; color:var(--text-soft) }
.hm--aberto b{ color:var(--teal) }