/* =====================================================================
   Grupo Zen: FIM DE TODA PÁGINA (/...): bloco da rede + faixa de contato
   O HTML é gerado por tools/novo/rede.mjs (dados em tools/novo/rede-dados.json)
   entre <!-- REDE:INICIO --> e <!-- REDE:FIM -->. Carregue depois do base.css
   e do CSS da página. O movimento fica no rede.js.

   Ordem: bloco da rede (Piche) → faixa de contato (Bordô chapado) →
   rodapé (base.css). No ESTÁTICO (sem JS ou com "reduzir movimento") tudo está
   no lugar: lista com miniatura e a VITRINE (a foto grande da 1ª unidade) no
   computador, tira de cartões no celular. Na página do próprio grupo, ele vira
   uma linha só (.unidades__grupo--aqui).

   Rodada v4: sem fio, sem sobretítulo, sem número em Brasa no título, sem
   "01 / 08", sem degradê, sem brilho. Escala de tipo e de espaço da base.
   ===================================================================== */

/* largura da letra do nome (Anybody, eixo wdth 50..150). Registrada para a
   transição andar no CSS; --entra é o que o rede.js anima na entrada. */
@property --wdth { syntax: '<number>'; inherits: true; initial-value: 112; }
@property --entra { syntax: '<number>'; inherits: true; initial-value: 0; }

.unidades {
  --u-foto: clamp(96px, 7.4vw, 120px);      /* miniatura 4:3 da linha (computador) */
  --u-cartao: min(76vw, 320px);             /* cartão 4:5 da tira (celular) */
  position: relative; isolation: isolate;
  background: var(--grao), var(--fundo-2); color: var(--texto);
  padding: var(--respiro) var(--m);
}

/* ---------- cabeça: "8 postos, 5 restaurantes." ---------- */
.unidades__cabeca { margin-bottom: var(--vao); }
.unidades__titulo {
  /* a frase enche a largura: tamanho calculado entre --t-titulo e --t-display (exceção de palco do
     BASE.md). "5 restaurantes," cabe com folga de 320 px (28 px de letra) a 1920 px (144 px). */
  font-size: clamp(var(--t-titulo), 8vw, 144px); line-height: .9; letter-spacing: -.025em;
  white-space: nowrap;
}
/* cada metade é uma linha com máscara (o rede.js faz subir e abrir a letra) */
.unidades__frase { display: block; overflow-x: visible; overflow-y: clip; padding-block: .1em; margin-block: -.1em; }
.unidades__frase-in { display: inline-block; font-stretch: calc((var(--wdth) + var(--entra)) * 1%); }

/* ---------- grupos ---------- */
.unidades__grupo + .unidades__grupo, .unidades__tambem { margin-top: var(--vao); }
/* cabeça de grupo: só mudança de escala e 32 px de espaço (sem fio) */
.unidades__topo {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  margin-bottom: 32px;
}
.unidades__sub {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-titulo); line-height: .95; letter-spacing: -.012em; text-wrap: balance;
}
.unidades__nota { color: var(--texto-2); font-size: var(--t-corpo); line-height: 1.45; max-width: 56ch; }
/* o link do fim do grupo ("Ver os oito postos") é uma chamada, não uma legenda: no tamanho de
   chamada o inspetor não o lê como sobretítulo do grupo seguinte */
.unidades__mais { display: inline-block; margin-top: var(--passo); font-size: var(--t-chamada); line-height: 1.2; }
/* o grupo da própria página: uma linha (as unidades já estão acima) */
.unidades__aqui { color: var(--texto-2); font-size: var(--t-corpo); line-height: 1.45; }
.unidades__aqui .link { margin-left: .4em; color: var(--texto); }

/* ---------- uma unidade ---------- */
.unidade__link { display: block; position: relative; color: var(--texto); text-decoration: none; }
.unidade__foto { display: block; --quadro-r: 4 / 3; }
.unidade__img { transition: transform .8s var(--curva); }
.unidade__nome {
  display: block;
  font-family: var(--f-titulo); font-weight: 700; letter-spacing: -.01em;
  font-size: var(--t-chamada); line-height: 1.05;
  font-stretch: calc((var(--wdth) + var(--entra)) * 1%);
}
/* cidade e fato em duas linhas (sem ponto médio) */
.unidade__info { display: block; margin-top: 4px; font-size: var(--t-legenda); line-height: 1.4; }
.unidade__onde, .unidade__linha { display: block; }
.unidade__onde { color: var(--texto-2); }
.unidade__linha { color: var(--texto); margin-top: 2px; font-size: var(--t-corpo); line-height: 1.4; }   /* o fato é texto corrido: corpo, tinta cheia */
.unidade__seta {
  width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2;
  color: var(--texto-2);
  transition: transform .35s var(--curva), color .2s ease;
}

/* ---------- COMPUTADOR: a lista à esquerda e a VITRINE presa à direita ---------- */
.unidades__vitrine { display: none; }
@media (min-width: 1024px) {
  .unidades__corpo {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g);
    align-items: start;
  }
  /* sem fio entre as linhas: o vão de 4 px deixa o degrau de tom (Grafite) ler como linha da vez */
  .unidades__lista { grid-column: 1 / span 8; display: grid; row-gap: 4px; }
  .unidade__link {
    display: grid; grid-template-columns: var(--u-foto) minmax(0, 1fr) 40px;
    align-items: center; column-gap: clamp(20px, 2vw, 32px);
    padding: 12px clamp(12px, 1.4vw, 24px) 12px 12px;
    transition: background-color .25s ease;
  }
  .unidade__foto { width: var(--u-foto); transition: opacity .3s ease; }
  .unidade__nome { white-space: nowrap; transition: opacity .3s ease; }
  /* a linha que a vitrine mostra: o nome acende e a seta anda (mouse, foco ou rolagem) */
  .unidade__link.vez .unidade__seta { color: var(--acento); transform: translateX(6px); }
  .unidade__link.vez { background: var(--superficie); }

  .unidades__vitrine {
    display: block; position: sticky; top: calc(var(--cab-h) + 24px);
    grid-column: 9 / -1; color: var(--texto); text-decoration: none;
  }
  .unidades__vitrine-foto { display: block; --quadro-r: 4 / 5; aspect-ratio: 4 / 5; }
  .unidades__vitrine-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .unidades__vitrine-txt { display: grid; gap: 4px; margin-top: 16px; }
  .unidades__vitrine-nome {
    font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
    font-size: var(--t-chamada); line-height: 1.05;
  }
  .unidades__vitrine-onde { color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
  /* camadas da troca (rede.js): a nova abre por máscara por cima da anterior */
  .unidades__vitrine-foto > .vitrine__camada { position: absolute; inset: 0; overflow: hidden; }
  .unidades__vitrine-foto > .vitrine__camada > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .unidade__link:hover, .unidade__link:focus-visible { background: var(--superficie); }
  .unidade__link:hover .unidade__seta, .unidade__link:focus-visible .unidade__seta { color: var(--acento); transform: translateX(6px); }
  .unidade__link:hover .unidade__img { transform: scale(1.06); }
  .unidades__pe { display: none !important; }
}

/* ---------- CELULAR E TABLET: tira de cartões 4:5 do mesmo tamanho ---------- */
@media (max-width: 1023.98px) {
  .unidades__lista {
    display: flex; gap: 12px;
    margin-inline: calc(-1 * var(--m)); padding: 24px var(--m) 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
    scrollbar-width: none;
  }
  .unidades__lista::-webkit-scrollbar { display: none; }
  .unidades__lista.arrastando { scroll-snap-type: none; cursor: grabbing; }
  .unidade { flex: none; width: var(--u-cartao); scroll-snap-align: start; }
  .unidade__link { display: flex; flex-direction: column; -webkit-user-drag: none; }
  .unidade__img { -webkit-user-drag: none; }
  .unidade__foto { order: 0; width: 100%; --quadro-r: 4 / 5; }
  .unidade__texto { order: 2; display: block; margin-top: 14px; }
  .unidade__info { margin-top: 6px; }
  .unidade__seta { display: none; }
  .unidades__pe { display: none; align-items: center; gap: 16px; margin-top: 14px; }
  .unidades--viva .unidades__pe { display: flex; }
  /* contador "1 de 8": só onde a tira esconde cartões e o número informa */
  .unidades__conta { flex: none; color: var(--texto-2); font: 400 var(--t-legenda)/1 var(--f-texto); font-variant-numeric: tabular-nums; }
  /* barra de 4 px, trilho Grafite */
  .unidades__barra { position: relative; flex: 1; height: 4px; background: var(--superficie); overflow: hidden; }
  .unidades__barra > span { position: absolute; inset: 0; background: var(--texto); transform-origin: 0 50%; transform: scaleX(.12); }
}

/* ---------- "Também no grupo": fileira uniforme (tira no celular) ---------- */
.tambem { margin-top: 28px; }
.tambem__link { display: block; color: var(--texto); text-decoration: none; }
.tambem__foto { --quadro-r: 4 / 3; aspect-ratio: 4 / 3; display: block; }
.tambem__img { transition: transform .8s var(--curva); }
.tambem__nome {
  display: block; margin-top: 14px;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700; font-size: var(--t-chamada); line-height: 1.1;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em;
  transition: text-decoration-color .2s ease;
}
.tambem__linha { display: block; margin-top: 6px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; max-width: 36ch; }
/* no computador a descrição é texto corrido (corpo); abaixo de 1024 px fica em legenda: com o nome a
   22 px, uma descrição de 17 px faria o inspetor ler nome e descrição como um bloco só de fontes mistas */
@media (min-width: 1024px) { .tambem__linha { font-size: var(--t-corpo); } }
.tambem__link:hover .tambem__img { transform: scale(1.05); }
.tambem__link:hover .tambem__nome { text-decoration-color: var(--acento); }
@media (max-width: 1023.98px) {
  .tambem.fileira--rolar { padding-block: 6px 10px; }        /* o anel de foco não é cortado */
  .tambem__img { -webkit-user-drag: none; }
}

/* ---------- a foto da unidade toma o fundo do bloco (computador, com movimento) ---------- */
.unidades__fundo { display: none; }
@media (min-width: 1024px) {
  .mov .unidades__fundo {
    display: block; position: sticky; top: 0; z-index: -1;
    height: 100lvh;
    margin: calc(-1 * var(--respiro)) calc(-1 * var(--m)) calc(var(--respiro) - 100lvh);
    overflow: hidden; pointer-events: none; opacity: 0;
  }
  .unidades__fundo > img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: cover; opacity: 0;
  }
  /* véu CHAPADO de Piche a 80%: a Prata segue acima de 4,5:1 mesmo sobre céu branco */
  .unidades__fundo::after { content: ""; position: absolute; z-index: 2; inset: 0; background: rgb(30 27 25 / .8); }
}

/* ---------- destaque da linha (só com movimento) ---------- */
.mov .unidade__nome { transition: --wdth .55s var(--curva), opacity .3s ease; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* as outras linhas apagam (o nome é texto grande: segue acima de 3:1) e a da vez abre a letra */
  .mov .unidades__lista:hover .unidade__link:not(:hover) .unidade__nome { opacity: .5; }
  .mov .unidades__lista:hover .unidade__link:not(:hover) .unidade__foto { opacity: .4; }
  .mov .unidade__link:hover .unidade__nome { --wdth: 126; }
}
/* a linha da vez pela rolagem (sem mouse em cima nem foco): a letra abre um pouco */
@media (min-width: 1024px) {
  .mov .unidades__lista:not(:hover) .unidade__link.vez .unidade__nome { --wdth: 120; }
}
@media (min-width: 1024px) {
  .mov .unidades__lista:has(.unidade__link:focus-visible) .unidade__link:not(:focus-visible) .unidade__nome { opacity: .5; }
  .mov .unidades__lista:has(.unidade__link:focus-visible) .unidade__link:not(:focus-visible) .unidade__foto { opacity: .4; }
  .mov .unidade__link:focus-visible .unidade__nome { --wdth: 126; }
}

/* =====================================================================
   FAIXA DE CONTATO: Bordô CHAPADO (#780103). A "luz de freio" continua, sem brilho:
   com movimento, o campo Bordô (::before) sobe de baixo conforme a faixa chega
   (clip-path, comandado por --freio, 0 a 1, no rede.js). Sem movimento, já está no lugar.
   Aqui dentro o texto é só Cal e o botão principal é a pílula Cal (base.css).
   Título na coluna inteira (sem max-width em ch): dá o máximo de caracteres por linha.
   ===================================================================== */
.contato-fim {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao);
  padding: var(--respiro) var(--m);
  background: var(--destaque);
}
.mov .contato-fim { background: var(--fundo-2); }   /* o campo Bordô sobe por cima do Piche do bloco acima */
.contato-fim::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--destaque);
  clip-path: inset(0);
}
.mov .contato-fim::before { clip-path: inset(calc((1 - var(--freio, 1)) * 100%) 0 0 0); }
.contato-fim__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-titulo); line-height: .95; letter-spacing: -.012em;
  text-wrap: balance;
}
.contato-fim__apoio { margin-top: var(--passo); font-size: var(--t-corpo); max-width: 40ch; }
.contato-fim__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--passo); }
/* o rótulo pode passar para a 2ª linha em 320 px (nunca sai da tela) */
.contato-fim__botao { width: 100%; padding: 12px; height: auto; min-height: 48px; white-space: normal; text-align: center; line-height: 1.2; }
.contato-fim__numero { color: var(--texto); font-size: var(--t-corpo); }
/* frase do próprio cliente (postos e hotel): as palavras ficam; a medida é a coluna inteira e, só em
   celular estreito (abaixo de ~470 px), o tamanho cai abaixo do token para a frase caber em 2 linhas */
.contato-fim__titulo--cliente { font-size: min(var(--t-titulo), 7.2vw); }
@media (min-width: 1024px) {
  /* título na largura inteira (mais caracteres por linha) e as ações embaixo, em linha */
  .contato-fim__acoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--passo) 32px; }
  .contato-fim__botao { width: auto; padding: 12px 28px; min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .unidade__img, .tambem__img, .unidade__seta, .unidade__link, .unidade__nome, .unidade__foto, .tambem__nome { transition: none; }
  .unidade__link.vez .unidade__seta { transform: none; }
  .unidade__link:hover .unidade__img, .tambem__link:hover .tambem__img { transform: none; }
}