/* =========================================================================
   PÁGINAS INSTITUCIONAIS

   Texto corrido longo — política de privacidade, termos, trocas — e as duas
   páginas de serviço que têm lógica própria: Fale conosco e Rastreamento.

   Carrega só nelas. A folha global não precisa carregar regra de documento
   jurídico em toda visita à loja.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Texto corrido
   ------------------------------------------------------------------------- */

/*
 * .prose existia como classe sem nenhuma regra: o conteúdo das páginas saía
 * com a tipografia crua do navegador, títulos colados no parágrafo anterior
 * e listas sem respiro. Documento jurídico é feito para ser consultado, não
 * lido de ponta a ponta — o que ajuda é hierarquia visível e linha curta.
 */
.prose{
  color:var(--c-body);
  line-height:var(--lh-loose);
}

/* A medida de leitura: acima de ~70 caracteres o olho perde a linha ao voltar. */
.prose > *{max-width:68ch}

.prose > * + *{margin-top:var(--s-4)}

.prose h2{
  margin-top:var(--s-7);
  font-size:var(--t-lg);
  color:var(--c-ink);
}
.prose h3{
  margin-top:var(--s-6);
  font-size:var(--t-md);
  letter-spacing:normal;
  color:var(--c-ink);
}

/*
 * O primeiro título não empurra: ele já vem depois do cabeçalho da página,
 * que tem a própria margem embaixo.
 */
.prose > :first-child{margin-top:0}

.prose ul,
.prose ol{padding-left:1.25em}
.prose li + li{margin-top:var(--s-2)}
.prose li::marker{color:var(--c-faint)}

.prose a{
  color:var(--c-green-300);
  text-decoration:underline;
  text-underline-offset:.18em;
}
.prose a:hover{color:var(--c-green-700)}

.prose strong{color:var(--c-ink)}

/* Bloco de destaque para o que a pessoa não pode deixar de ler. */
.prose blockquote{
  margin-top:var(--s-5);
  padding:var(--s-5);
  border-left:3px solid var(--c-green-200);
  background:var(--c-green-50);
  font-size:var(--t-sm);
}
.prose blockquote > *{margin-top:0}
.prose blockquote > * + *{margin-top:var(--s-3)}

.prose hr{
  margin-block:var(--s-7);
  border:0;
  border-top:var(--hairline);
}

/* Data de atualização — obrigatória num documento que muda com o tempo. */
.doc-date{
  margin-bottom:var(--s-6);
  color:var(--c-muted);
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
}


/* -------------------------------------------------------------------------
   Canais de atendimento
   ------------------------------------------------------------------------- */
.channels{
  list-style:none;margin:0 0 var(--s-7);padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
}
@media (max-width:760px){.channels{grid-template-columns:1fr}}

.channel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-2);
  padding:var(--s-5);
  border:var(--hairline);
}
.channel__icon{color:var(--c-green-700);line-height:0;margin-bottom:var(--s-1)}
.channel__label{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
}
.channel__text{font-size:var(--t-sm);color:var(--c-muted);line-height:var(--lh-snug)}

/*
 * O link do canal é empurrado para o pé do cartão, para que os três fiquem
 * alinhados entre si mesmo com textos de alturas diferentes.
 */
.channel__link,
.channel .btn{margin-top:auto;padding-top:var(--s-3)}

.channel__link{
  color:var(--c-green-700);
  text-decoration:underline;
  text-underline-offset:.2em;
  overflow-wrap:anywhere;
}
/*
 * O botão ocupa a largura do cartão. Com largura automática ele coube em
 * 150px na coluna de três, e "Abrir conversa" quebrou em duas linhas.
 */
.channel .btn{
  padding-top:0;
  margin-top:var(--s-4);
  width:100%;
  justify-content:center;
  white-space:nowrap;
}

/* O WhatsApp responde na hora; os outros dois não. O fundo diz isso. */
.channel--primary{
  background:var(--c-green-50);
  border-color:var(--c-green-200);
}


/* -------------------------------------------------------------------------
   Horário
   ------------------------------------------------------------------------- */
.hours{
  margin-bottom:var(--s-7);
  padding:var(--s-5);
  border:var(--hairline);
  background:var(--c-canvas);
}
.hours__title{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-ink);
  margin-bottom:var(--s-3);
}
.hours__list{list-style:none;margin:0;padding:0;font-size:var(--t-sm);color:var(--c-body)}
.hours__list li + li{margin-top:var(--s-1)}


/* -------------------------------------------------------------------------
   Atalhos de autoatendimento
   ------------------------------------------------------------------------- */
.shortcuts{margin-bottom:var(--s-7)}
.shortcuts__title{
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--s-4);
}
.shortcuts__list{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
}
@media (max-width:760px){.shortcuts__list{grid-template-columns:1fr}}

.shortcut{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:var(--s-3);
  align-items:center;
  padding:var(--s-4);
  border:var(--hairline);
  height:100%;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.shortcut:hover{border-color:var(--c-green-700);background:var(--c-green-50)}
.shortcut__icon{grid-row:1 / 3;color:var(--c-green-700);line-height:0}
.shortcut__label{font-size:var(--t-sm);color:var(--c-ink)}
.shortcut__text{font-size:var(--t-xs);color:var(--c-muted)}


/* -------------------------------------------------------------------------
   Sanfona das dúvidas frequentes

   <details>/<summary> nativos, e não uma sanfona de JavaScript: abrem sem
   script, o teclado já navega neles, e a busca do navegador (Ctrl+F) encontra
   texto dentro de item fechado — coisa que uma div com display:none esconde.
   ------------------------------------------------------------------------- */
/*
 * A sanfona ocupa a largura do container, e não a medida de leitura.
 *
 * Com o teto de 68ch herdado de .prose > *, ela saía com 608px numa página
 * onde todo o resto tinha 740 — a caixa de busca ia até a borda e a sanfona
 * parava antes, o que dava a impressão de erro de alinhamento. A pergunta é
 * uma linha curta; quem precisa de medida curta é a resposta, e ela recebe
 * a sua logo abaixo.
 */
.prose details{
  max-width:none;
  border-bottom:var(--hairline);
}
.prose details:first-of-type{border-top:var(--hairline)}

.prose summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding:var(--s-4) 0;
  cursor:pointer;
  list-style:none;
  color:var(--c-ink);
  font-size:var(--t-md);
  line-height:var(--lh-snug);
  transition:color var(--dur-fast) var(--ease);
}
/* O triângulo padrão do WebKit, que list-style:none sozinho não remove. */
.prose summary::-webkit-details-marker{display:none}

.prose summary:hover{color:var(--c-green-700)}
.prose summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

/*
 * O sinal de mais vira menos girando 45°, e não trocando de glifo: assim a
 * transição é contínua e não há um segundo caractere para carregar.
 */
.prose summary::after{
  content:"";
  flex:0 0 auto;
  width:14px;
  height:14px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  color:var(--c-muted);
  transition:rotate var(--dur-fast) var(--ease);
}
.prose details[open] > summary::after{rotate:45deg}

/*
 * A resposta, dentro do item aberto.
 *
 * Ela encostava na pergunta: as duas caixas se tocavam, sem um pixel entre
 * elas. E mantém a medida de leitura, que a pergunta abriu mão de ter — a
 * resposta é texto corrido e esticaria até a borda da página.
 */
.prose details > :not(summary){
  margin-top:0;
  padding-bottom:var(--s-5);
  max-width:68ch;
  color:var(--c-body);
  font-size:var(--t-sm);
}
.prose details > summary + *{margin-top:var(--s-2)}
.prose details > :not(summary) + :not(summary){margin-top:var(--s-3)}

@media (prefers-reduced-motion:reduce){
  .prose summary,
  .prose summary::after{transition:none}
}


/* =========================================================================
   RASTREAMENTO
   ========================================================================= */

/* ---- As duas buscas ---- */
.track{
  margin-bottom:var(--s-7);
  border:var(--hairline);
}

.track__tabs{display:flex;border-bottom:var(--hairline)}

.track__tab{
  flex:1;
  padding:var(--s-4) var(--s-3);
  border:0;
  border-bottom:2px solid transparent;
  background:var(--c-canvas);
  color:var(--c-muted);
  font-family:inherit;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.track__tab:hover{color:var(--c-ink)}
.track__tab.is-on{
  background:var(--c-surface);
  border-bottom-color:var(--c-green-700);
  color:var(--c-ink);
}

.track__form{padding:var(--s-5)}

/*
 * Sem JavaScript os dois formulários aparecem, e os dois funcionam — a busca
 * é um GET comum. O script marca <html class="js"> e a partir daí só um fica
 * visível. Esconder por padrão deixaria a página inútil se o arquivo falhar.
 */
.js .track__form{display:none}
.js .track__form.is-on{display:block}

/*
 * Os campos param antes da borda mesmo com a página larga: número de pedido
 * tem três dígitos, e um campo de 600px para ele seria só espaço vazio com
 * uma borda em volta. A caixa continua ocupando a largura toda — o que se
 * limita é o conteúdo dela.
 */
.track__row,
.track__pair{max-width:720px}

.track__row{display:flex;align-items:flex-end;gap:var(--s-4)}
.track__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}

@media (max-width:560px){
  .track__row{flex-direction:column;align-items:stretch}
  .track__pair{grid-template-columns:1fr}
}

.track__field{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  margin:0;
  min-width:0;
  flex:1;
  max-width:none;
}
.track__field label{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.track__field input{
  width:100%;
  height:var(--control-h);
  padding-inline:var(--s-4);
  border:var(--hairline);
  background:var(--c-surface);
  color:var(--c-ink);
  font-family:inherit;
  font-size:var(--t-base);
}
.track__field input:focus{border-color:var(--c-green-700);outline:none}
.track__field input:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px}

.track .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  height:var(--control-h);
  flex:0 0 auto;
}

.track__hint{
  margin:var(--s-3) 0 0;
  max-width:none;
  color:var(--c-muted);
  font-size:var(--t-xs);
}

.track__foot{
  display:flex;
  align-items:center;
  gap:var(--s-5);
  margin-top:var(--s-4);
  flex-wrap:wrap;
}


/* ---- O resultado ---- */
.result{
  margin-bottom:var(--s-7);
  padding:var(--s-6);
  border:var(--hairline);
  background:var(--c-canvas);
}

.result__head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s-4);
  padding-bottom:var(--s-5);
  border-bottom:var(--hairline);
}
@media (max-width:560px){
  .result__head{grid-template-columns:auto 1fr;row-gap:var(--s-3)}
  .result__head .badge{grid-column:2}
}

.result__icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--c-green-50);
  color:var(--c-green-700);
}
.result__title{font-size:var(--t-lg);color:var(--c-ink)}
.result__sub{margin:var(--s-1) 0 0;max-width:none;color:var(--c-muted);font-size:var(--t-sm)}

/* Entregue é a única boa notícia: só ela ganha cor. */
.result--entregue .result__icon{background:var(--c-green-700);color:#FFFFFF}
.result--cancelado .result__icon{background:#FAEFED;color:var(--c-error)}

/* ---- Os três fatos ---- */
.result__facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
  margin:var(--s-5) 0 0;
  padding-bottom:var(--s-5);
  border-bottom:var(--hairline);
}
@media (max-width:640px){.result__facts{grid-template-columns:1fr}}

.result__facts dt{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--s-1);
}
.result__facts dd{margin:0;color:var(--c-ink);font-size:var(--t-sm)}

.result__code{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}

.result__copy{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  padding:2px 4px;
  border:0;
  background:none;
  color:var(--c-muted);
  cursor:pointer;
  line-height:0;
  transition:color var(--dur-fast) var(--ease);
}
.result__copy:hover{color:var(--c-green-700)}

/*
 * A confirmação ocupa lugar só quando aparece. Reservar a largura dela o
 * tempo todo abriria um vão ao lado do código, e mostrá-la com position
 * absolute a faria pular por cima do texto vizinho em tela estreita.
 */
.result__copied{
  display:none;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-success);
}
.result__copy.is-copied .result__copied{display:inline}

/* ---- Linha do tempo ---- */
.result__timeline{margin-top:var(--s-5)}
.result__label{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:var(--s-4);
}

.steps{list-style:none;margin:0;padding:0}

.steps__item{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--s-4);
  padding-bottom:var(--s-5);
}
.steps__item:last-child{padding-bottom:0}

/*
 * O fio que liga as etapas sai do próprio item, e não de um pseudo-elemento
 * no <ol>: assim ele para no penúltimo, sem sobrar um traço solto embaixo do
 * último ponto.
 */
.steps__item::before{
  content:"";
  position:absolute;
  left:15px;
  top:32px;
  bottom:0;
  width:1px;
  background:var(--c-line);
}
.steps__item:last-child::before{display:none}

/*
 * O fio que sai de uma etapa concluída é verde; o das que ainda não
 * aconteceram fica cinza. É assim que a barra mostra até onde o pedido
 * chegou sem precisar de mais nenhum elemento — todo cinza, a linha do
 * tempo dizia só que existem quatro etapas.
 */
.steps__item--feito::before{background:var(--c-green-700)}

.steps__dot{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--c-line);
  background:var(--c-surface);
  color:var(--c-faint);
  grid-row:1 / 3;
  z-index:1;
}
.steps__title{color:var(--c-faint);font-size:var(--t-sm);align-self:center}
.steps__meta{color:var(--c-faint);font-size:var(--t-xs)}

.steps__item--feito .steps__dot{
  border-color:var(--c-green-700);
  background:var(--c-green-700);
  color:#FFFFFF;
}
.steps__item--feito .steps__title{color:var(--c-ink)}
.steps__item--feito .steps__meta{color:var(--c-muted)}

/* A etapa atual: anel em vez de preenchimento, para diferenciar do concluído. */
.steps__item--agora .steps__dot{
  border-color:var(--c-green-700);
  box-shadow:0 0 0 3px var(--c-green-50);
  color:var(--c-green-700);
}
.steps__item--agora .steps__title{color:var(--c-ink)}
.steps__item--agora .steps__meta{color:var(--c-muted)}

/* ---- Pé do resultado ---- */
.result__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:var(--hairline);
  flex-wrap:wrap;
}
.result__foot p{margin:0;max-width:46ch;color:var(--c-muted);font-size:var(--t-sm)}
.result__foot .btn{display:inline-flex;align-items:center;gap:var(--s-2);flex:0 0 auto}

/* ---- Sem resultado ---- */
.result--vazio{text-align:center}
.result--vazio .result__icon{margin:0 auto var(--s-4)}
.result--vazio .result__sub{margin-inline:auto;max-width:52ch}
.result--vazio .btn{margin-top:var(--s-5)}
.result--vazio .steps{
  margin:var(--s-6) auto 0;
  max-width:340px;
  text-align:left;
}

/* ---- O pedido, quando a busca foi por ele ---- */
.track-order{margin-bottom:var(--s-7)}

/* ---- Transportadoras ---- */
.track-carriers{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  flex-wrap:wrap;
  margin-bottom:var(--s-7);
  padding-top:var(--s-5);
  border-top:var(--hairline);
}
.track-carriers > span{
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}
.track-carriers ul{
  display:flex;
  gap:var(--s-2);
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.track-carriers li{
  padding:var(--s-1) var(--s-3);
  border:var(--hairline);
  color:var(--c-muted);
  font-size:var(--t-xs);
}