/* ---------------------------------------------------------------------------
   0. Trilha — só o que diverge da vitrine

   As oito regras comuns mudaram para pood-base.css, sob os dois escopos numa
   lista só. Aqui fica exclusivamente o que é diferente nestas páginas.
--------------------------------------------------------------------------- */
.page-wrapper:has(.inst) .breadcrumbs {
  padding: 40px 0 0;
  margin: 0;
}
/* o respiro do topo passou para a faixa da trilha; o que separa a trilha do
   título o próprio .inst já dá com o padding-top. */
.page-wrapper:has(.inst) .page-main {
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   1. Grade: índice à esquerda, texto à direita
--------------------------------------------------------------------------- */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 64px;
  align-items: start;
  /* 1140 e nao 1080: no modelo o .inst tem 1080 de CONTEUDO, e o recuo de 40px
     vem da .folha, por FORA dele. Aqui o recuo esta dentro, entao a caixa
     precisa dos 1080 mais os 2 x 30 - senao sobram 1020 de conteudo e a coluna
     de texto cai de 786 para 726px, comprimindo a leitura.
     Os 30 daqui somam com os 10 do .page-main e dao os 40 do modelo. */
  max-width: 1140px;
  padding: 52px 30px 88px;
}

/* ---------------------------------------------------------------------------
   2. Índice lateral
--------------------------------------------------------------------------- */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__ind {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .ind__g {
  display: flex;
  flex-direction: column;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .ind__t {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__ind a {
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pood-tinta-2);
  text-decoration: none;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__ind a:hover {
  color: var(--pood-tinta);
}

/* As 11 regras que marcam o item ativo a partir da classe do <body>.
   $= casa o FIM do href, entao funciona com URL relativa ou absoluta.

   O filete no acento entra por box-shadow, e nao por border-left, para nao
   empurrar o texto dos outros itens - so o marcado ganha o recuo, compensado
   pela margem negativa. */
.cms-next-trading            .inst__ind a[href$="/next-trading"],
.cms-produtos-servicos       .inst__ind a[href$="/produtos-servicos"],
.cms-sobre-pood-fitness      .inst__ind a[href$="/sobre-pood-fitness"],
.cms-envio-entregas          .inst__ind a[href$="/envio-entregas"],
.cms-formas-de-pagamento     .inst__ind a[href$="/formas-de-pagamento"],
.cms-frete-regras            .inst__ind a[href$="/frete-regras"],
.cms-nota-fiscal-eletronica  .inst__ind a[href$="/nota-fiscal-eletronica"],
.cms-politica-de-privacidade .inst__ind a[href$="/politica-de-privacidade"],
.cms-termos-condicoes        .inst__ind a[href$="/termos-condicoes"],
/* a Contato não entra: ela é a única sem o índice, então não há item para
   marcar. Uma regra aqui seria letra morta. */
.cms-trocas-devolucoes       .inst__ind a[href$="/trocas-devolucoes"] {
  color: var(--pood-tinta);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--pood-acento);
  padding-left: 11px;
  margin-left: -13px;
}

/* ---------------------------------------------------------------------------
   3. Coluna de texto

   A largura trava em 68 caracteres, e nao em pixels: linha longa demais cansa
   a leitura, e o numero de caracteres e o que governa isso - nao a medida da
   tela.
--------------------------------------------------------------------------- */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt {
  max-width: 68ch;
}
/* A pagina Sobre NAO usa o cap de 68ch: no modelo, cada bloco dela declara o
   proprio limite (62ch na abertura, 56 na missao, 64 na linha do tempo, 66 no
   pood) e os blocos de imagem ficam ao lado do texto. Travar a coluna inteira
   em 68ch espremia tudo e foi o que me levou a tirar as 10 imagens da pagina -
   erro que esta regra desfaz. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt:has(.sb__abre) {
  max-width: none;
}
/* .rotulo mora no pood-base.css, junto com o primitivo .pood-rotulo. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .h-pagina {
  margin: 6px 0 0;
  font-size: var(--pood-t-display);
  font-weight: var(--pood-p-normal);
  line-height: var(--pood-lh-display);
  letter-spacing: var(--pood-ls-display);
  color: var(--pood-tinta);
}
/* o <b> dentro do titulo e do h2 e enfase de marca, nao negrito de leitura:
   600 sobre o 400 do titulo, sem virar bloco. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .h-pagina b,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt h2 b {
  font-weight: 600;
}
/* margin-top ZERO, como no modelo. Quem dá o respiro é o bloco anterior - nas
   páginas legais é o .leg__id, com 26px embaixo. Margem de irmãos adjacentes
   colapsa, então um valor aqui não somaria com o de lá: só brigaria com ele. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .abertura {
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pood-tinta-2);
}
/* o caso em que não há bloco anterior: a abertura logo abaixo do título. Sem
   isto os dois encostam, porque o h1 do gabarito não tem margem de baixo. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .h-pagina + .abertura {
  margin-top: 24px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt h2 {
  margin: 44px 0 14px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--pood-tinta);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt h3 {
  margin: 28px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pood-tinta);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt h2 + h3 {
  margin-top: 16px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--pood-tinta);
}
/* ligacao dentro do texto: sublinhada na tinta, NUNCA no acento - o acento
   nesta direcao e reservado para acao, e um link de texto nao e acao. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt a:not(.btn) {
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   4. Lista, tabela, aviso e passos
--------------------------------------------------------------------------- */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .lista li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.65;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pood-acento);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .tab {
  width: 100%;
  margin: 0 0 8px;
  border-collapse: collapse;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .tab th {
  padding: 0 14px 9px 0;
  border-bottom: 1px solid var(--pood-linha);
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .tab td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--pood-linha);
  font-size: 14px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .tab .num {
  padding-right: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* prazo, excecao ou condicao legal - o unico bloco com destaque de fundo */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .aviso-inst {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 26px 0;
  padding: 16px 18px;
  background: var(--pood-papel);
  border-left: 2px solid var(--pood-acento);
  border-radius: 0 8px 8px 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .aviso-inst b {
  font-size: 12.5px;
  font-weight: 600;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .aviso-inst span {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pood-tinta-2);
}
/* a numeracao vem de counter, e nao de <ol> nativo: o circulo cinza precisa
   ser um pseudo-elemento posicionado, que o marcador nativo nao permite. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .passos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: p;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .passos li {
  counter-increment: p;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 0 14px 44px;
  border-bottom: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .passos li::before {
  content: counter(p);
  position: absolute;
  left: 0;
  top: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pood-bloco);
  font-size: 12px;
  font-weight: 600;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .passos b {
  font-size: 14px;
  font-weight: 500;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .passos span {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pood-tinta-2);
}

/* ---------------------------------------------------------------------------
   4b. Componentes da página "Sobre a Pood Fitness"

   A tela-sobre do design system foi desenhada em largura CHEIA (1080px), sem
   índice lateral, com dois blocos de imagem de 300px ao lado do texto. O
   gabarito institucional, que é o que vale para as 11 páginas, gasta 230px + 64
   de gap com o índice - sobram ~786 para o texto, e a coluna trava em 68ch.

   Por isso os grids de duas colunas viram uma só, e os dois quadrados de
   imagem saem: eles hoje são espaço reservado cinza, sem foto atrás. Quando
   houver imagem de verdade, ela entra no fluxo do texto, não ao lado.
--------------------------------------------------------------------------- */
/* abertura: texto e botao lado a lado, alinhados pela BASE (align-items:end),
   como no modelo. O primeiro paragrafo vem em 18px e o ultimo em 16px na tinta
   secundaria - sao dois pesos de abertura, nao um so. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__abre {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__abre p {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.6;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__abre p:last-of-type {
  margin-bottom: 0;
  font-size: 16px;
  color: var(--pood-tinta-2);
}

/* MISSAO, VISAO e VALORES nao sao h2 de secao: no modelo sao rotulos de 11px
   em caixa alta NA COR DO ACENTO, com o texto logo abaixo em 17px. Era aqui
   que a pagina mais destoava - eu tinha usado o h2 generico de 19px. */
/* texto a esquerda, imagem quadrada a direita - como no modelo. A coluna da
   imagem e 220px e nao os 300 do modelo: com o indice lateral sobram 726px em
   vez de 1080, e 300 deixariam so 370 para o texto. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__mvv,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__pood {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 56px;
  align-items: start;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__marca {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pood-bloco);
}
/* O cinza e o ESPACO RESERVADO do modelo, para quando nao ha foto. Havendo
   imagem de verdade, ele nao deve aparecer: a caixa perde o fundo e o
   aspect-ratio, e a propria imagem define a altura - senao sobra uma faixa
   cinza embaixo de toda logo que nao for quadrada. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__marca:has(img) {
  aspect-ratio: auto;
  background: transparent;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__marca img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__abre p {
  max-width: 62ch;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__mvv h2 + p {
  max-width: 56ch;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__linha p {
  max-width: 64ch;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__pood p {
  max-width: 66ch;
}
/* a miniatura de cada marco, a coluna de 88px do modelo */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__th {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pood-bloco);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__mvv {
  padding: 44px 0;
  border-bottom: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__mvv h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pood-acento);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__mvv h2 + p {
  margin: 0 0 30px;
  font-size: 17px;
  line-height: 1.6;
}
/* três colunas de valores separadas por fio de 1px - o fio é o próprio fundo
   do grid aparecendo pelo gap, truque que evita borda em cada item. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__val {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__val li {
  padding: 14px 4px 14px 0;
  background: var(--pood-fundo);
  font-size: 14px;
  font-weight: 500;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__hist {
  padding: 44px 0;
  border-bottom: 1px solid var(--pood-linha);
}
/* "Nossa Historia" e "O que e pood?" sao titulo de SECAO - 22px/500 -, e nao o
   h2 de 19px do gabarito generico nem o rotulo de 11px do bloco de missao. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__hist > h2,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__pood > h2 {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--pood-tinta);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__pood {
  padding: 44px 0 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__pood > h2 {
  margin-bottom: 14px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__pood p {
  font-size: 15px;
  line-height: 1.75;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__linha {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--pood-linha);
}
/* Largura FIXA, e nao minmax(96px,auto): cada <li> e um grid proprio, entao
   com auto cada linha dimensionava sua coluna sozinha - medido, "2020 — hoje"
   dava 125px e "2019" dava 96, e os anos nao alinhavam na vertical.

   150px e nao os 96 do modelo porque o ano vem em 26px e a primeira entrada e
   "2020 — hoje", nao um ano de quatro digitos. A segunda coluna, de 88px, e a
   miniatura - e sao TRES colunas, nao duas: com duas, o <p> caia para a linha
   de baixo e a miniatura esticava para 608px de lado. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__linha li {
  display: grid;
  grid-template-columns: 150px 88px 1fr;
  gap: 28px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__ano {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__linha p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width: 640px) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__val {
    grid-template-columns: repeat(2, 1fr);
  }
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sb__linha li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---------------------------------------------------------------------------
   4c. Componentes da página "Next Trading"

   A tela-next-trading do design system também foi desenhada em largura CHEIA,
   sem índice. As adaptações são as mesmas da Sobre: a coluna de imagem encolhe
   (260 -> 220, como 300 -> 220 lá) porque o índice consome 230 + 64 de gap.

   ATENÇÃO À ESPECIFICIDADE. No modelo, .nx__lead e .nx__ct usam !important
   porque .inst__txt p (0,2,0) vence .nx__lead (0,1,0). Aqui o escopo é maior
   dos dois lados, e .inst__txt .nx__bl p chega a 0,4,0 - um p.nx__lead escrito
   como 0,3,1 PERDERIA. Por isso os dois vêm como
   :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl p.nx__lead, que é 0,4,1 e vence sem
   !important.
--------------------------------------------------------------------------- */
/* o rodízio de palavras do título. A caixa recorta uma linha e a coluna
   desliza por dentro dela em passos - steps(1,end), não interpolação: a
   palavra troca, não escorrega. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .nx__rot {
  display: inline-block;
  height: 1.05em;
  overflow: hidden;
  vertical-align: bottom;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .nx__rol {
  display: flex;
  flex-direction: column;
  animation: nxrol 12.5s steps(1, end) infinite;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .nx__rol b {
  height: 1.05em;
  line-height: 1.05;
  font-weight: 600;
  color: var(--pood-acento);
  white-space: nowrap;
}
@keyframes nxrol {
  0%, 16%  { transform: translateY(0); }
  20%, 36% { transform: translateY(-1.05em); }
  40%, 56% { transform: translateY(-2.1em); }
  60%, 76% { transform: translateY(-3.15em); }
  80%, 96% { transform: translateY(-4.2em); }
  100%     { transform: translateY(0); }
}
/* movimento em laço infinito é o caso clássico de gatilho vestibular. Quem
   pediu menos movimento fica com a primeira palavra, parada - a frase continua
   fazendo sentido, que é o requisito. */
@media (prefers-reduced-motion: reduce) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .nx__rol {
    animation: none;
  }
}

/* o modelo declara margin-bottom:34px no h1 DESTA tela, e só dela. A regra é
   presa à classe que o Magento põe no <body> para não empurrar o título das
   outras dez páginas, que já estão no espaçamento delas. */
.cms-next-trading .inst .h-pagina {
  margin-bottom: 34px;
}

:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 56px;
  align-items: start;
  padding: 40px 0;
  border-bottom: 1px solid var(--pood-linha);
}
/* o modelo não tem pé de página - é tela de largura cheia e termina no rodapé
   do site. O gabarito com índice tem .inst__pe, que já traz o próprio filete;
   mantendo o do último bloco sairiam DUAS linhas separadas por 48px de vazio. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl:last-of-type {
  border-bottom: 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  max-width: 64ch;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl p.nx__lead {
  font-size: 16px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl p.nx__ct {
  margin-top: 18px;
  font-size: 14px;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl b {
  font-weight: 600;
}
@media (max-width: 900px) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nx__bl {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------------------------------------------------------------------------
   4d. Documento numerado (.leg__*)

   Cláusula com número no acento à esquerda e corpo à direita. Usado na
   "Produtos e Serviços" (algarismos romanos) e, adiante, nas três páginas
   legais.

   Aqui também os !important do modelo caem: lá .leg__b h2 (0,2,0) empata com
   .inst__txt h2 (0,2,0) e depende da ordem; com o escopo deste arquivo
   :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b h2 chega a 0,4,0 e vence por
   especificidade, que é o mecanismo certo.

   Só entrou o que a Produtos e Serviços usa de fato. .leg__id, .leg__s e
   .tab--ck entram junto com a página que os exercitar - CSS que nunca foi
   medido numa tela real é dívida, não adiantamento.
--------------------------------------------------------------------------- */
/* um h2 logo abaixo do título da página não precisa dos 44px de respiro que
   separa uma seção da anterior: não há seção anterior. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .h-pagina + h2 {
  margin-top: 0;
}

:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__c {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 16px;
  padding: 26px 0;
  border-top: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__n {
  padding-top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--pood-acento);
  font-variant-numeric: tabular-nums;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b h3 {
  margin: 22px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b h3 + p {
  margin-bottom: 8px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b p {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.75;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b p:last-child {
  margin-bottom: 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b .lista {
  margin: 4px 0 16px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__b .lista li {
  font-size: 14px;
}
/* a linha de fecho do documento - despedida, não parágrafo de leitura */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt p.ps__bv {
  margin-top: 34px;
  font-size: 17px;
  font-weight: 500;
}
@media (max-width: 900px) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__c {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------------
   4e. Documento legal recolhível (.leg__id, .leg__s, details.sec)

   As três páginas de política têm de 11 a 20 cláusulas e passam de 15 KB de
   texto. Empilhadas, o leitor rola por metros para achar a que interessa; em
   <details>, ele vê o índice inteiro numa tela e abre só a sua.

   <details> nativo e não JS: o navegador já dá o recolher, o teclado e o leitor
   de tela de graça, e o Ctrl+F do Chrome procura dentro de seção fechada e a
   abre sozinho. O JS entra apenas para o "Expandir tudo", que é o que o HTML
   não faz - e a página continua inteiramente utilizável sem ele.
--------------------------------------------------------------------------- */
/* a identificação da empresa, no alto do documento */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__id {
  margin: 0 0 26px;
  padding: 16px 18px;
  background: var(--pood-papel);
  border: 1px solid var(--pood-linha);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}
/* subcláusula: "III.II - ..." O <b> leva o número, em tabular para os pontos
   alinharem na vertical de uma linha para a outra. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__s {
  color: var(--pood-tinta);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .leg__s b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* tabela de cookies: a primeira coluna é o nome técnico, que não deve competir
   com a explicação por largura. 34% e alinhamento ao topo, porque a explicação
   quase sempre ocupa mais linhas que o nome. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .tab--ck td:first-child {
  width: 34%;
  vertical-align: top;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .tab--ck td {
  font-size: 13px;
  line-height: 1.55;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: -.01em;
  word-break: break-all;
}

:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 34px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__barra > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__tudo {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__tudo:hover {
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .secoes {
  display: flex;
  flex-direction: column;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt details.sec {
  border-bottom: 1px solid var(--pood-linha);
}
/* list-style:none mata o triângulo no Firefox; o ::-webkit-details-marker
   cuida do Chrome antigo. Os dois são necessários. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__t {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 0;
  list-style: none;
  cursor: pointer;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__t::-webkit-details-marker {
  display: none;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__t > span:not(.leg__n) {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--pood-tinta);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__t:hover > span:not(.leg__n) {
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec--leg .leg__n {
  flex: none;
  width: 44px;
  padding-top: 0;
  font-size: 12px;
}
/* o sinal de mais que vira menos: duas barras cruzadas, e a vertical encolhe
   ao abrir. Um glifo de fonte não daria a transição, e uma seta giratória
   diria "vai para", não "mostra mais". */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__i {
  flex: none;
  position: relative;
  width: 11px;
  height: 11px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__i::before,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__i::after {
  content: "";
  position: absolute;
  background: var(--pood-tinta-2);
  transition: transform .18s, opacity .18s;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__i::before {
  left: 0;
  top: 5px;
  width: 11px;
  height: 1.5px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__i::after {
  left: 4.75px;
  top: 0;
  width: 1.5px;
  height: 11px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt details.sec[open] .sec__i::after {
  transform: scaleY(0);
  opacity: 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt details.sec[open] .sec__t > span:not(.leg__n) {
  font-weight: 600;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__b {
  padding: 0 0 26px;
}
/* o corpo alinha com o título, não com o número: 44 da coluna do número mais
   os 14 do gap. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec--leg .sec__b {
  padding-left: 58px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__b > *:first-child {
  margin-top: 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__b > *:last-child {
  margin-bottom: 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__b .lista {
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec--leg .sec__b {
    padding-left: 0;
  }
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec--leg .leg__n {
    width: 34px;
  }
}
/* imprimir um documento legal com as cláusulas fechadas entrega uma folha de
   títulos. Na impressão tudo abre, e o botão sai. */
@media print {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt details.sec > .sec__b {
    display: block !important;
  }
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .sec__barra .sec__tudo {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   4f. Fale conosco (.ct__*)

   A Contato é a única das 11 que NÃO é página CMS: é a rota /contact, e o
   <body> dela leva `contact-index-index` em vez de `cms-page-view`. Por isso o
   escopo deste arquivo inteiro é `:is(.cms-page-view,.contact-index-index,.sales-guest-form)` —
   a especificidade de `:is()` é a do argumento mais específico, ou seja UMA
   classe, exatamente o que `.cms-page-view` valia sozinho. A troca não moveu
   nada nas outras dez, e foi medido.

   Ela também é a única SEM O ÍNDICE LATERAL (decisão do Will): a barra desta
   tela já leva onde o leitor precisa, e o rodapé lista todas as páginas. Sem o
   índice a coluna vira uma só, e a página fica com os 1080px do modelo — o que
   dispensa qualquer adaptação de largura.
--------------------------------------------------------------------------- */
/* sem o índice, o <article> cairia na coluna de 230px que o gabarito reserva
   para ele. Uma coluna só. */
.contact-index-index .inst {
  grid-template-columns: 1fr;
}
/* o teto de 68 caracteres é para TEXTO. Num formulário ele espremeria os
   campos a 597px dentro de 786 disponíveis. Mesma escapatória do :has(.sb__abre). */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt:has(.ct) {
  max-width: none;
}

/* o modelo declara margin-bottom:8px no h1 DESTA tela, e a linha de campos
   obrigatórios logo abaixo em 12px, com os 40px de respiro antes do formulário. */
.contact-index-index .inst .h-pagina {
  margin-bottom: 8px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__obrig {
  margin: 0 0 40px;
  font-size: 12px;
  color: var(--pood-tinta-2);
}

:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__col {
  display: flex;
  flex-direction: column;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__leg {
  margin: 0 0 22px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__pe {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__lado {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__dados h2 {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__item {
  display: flex;
  gap: 11px;
  padding: 0 0 16px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pood-fundo);
  color: var(--pood-tinta);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__item > span:not(.ct__ic) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__item b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__at {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct__ajuda {
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}
/* O .ct entra no seletor de propósito, e não por gosto de aninhar: sem ele a
   regra empata em (0,3,1) com o `.inst__txt a:not(.btn)` que sublinha os links
   de texto, e o desempate ficaria por ordem no arquivo — frágil demais para um
   link que não pode aparecer sublinhado. Com o .ct são (0,4,1) e vence. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct .ct__ajuda a {
  padding: 9px 0;
  border-bottom: 1px solid var(--pood-linha);
  font-size: 13.5px;
  color: var(--pood-tinta);
  text-decoration: none;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct .ct__ajuda a:hover {
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct .ct__item a,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct .ct__item em {
  font-style: normal;
  font-size: 15px;
  color: var(--pood-tinta);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* campo de formulário */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-width: 0;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--pood-tinta-2);
}
/* o asterisco de obrigatório é o único uso do acento em texto nesta direção,
   e é justificável: ele não é leitura, é sinalização. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo label i {
  font-style: normal;
  color: var(--pood-acento);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo input,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo select {
  height: var(--pood-h);
  padding: 0 14px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-papel);
  font-family: var(--pood-fonte);
  font-size: 13.5px;
  color: var(--pood-tinta);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo--alto {
  display: flex;
  flex-direction: column;
  height: 100%;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo--alto textarea {
  flex: 1;
  min-height: 158px;
  padding: 11px 14px;
  border: 1px solid var(--pood-linha);
  border-radius: var(--pood-r-campo);
  background: var(--pood-papel);
  font-family: var(--pood-fonte);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pood-tinta);
  resize: vertical;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo input:focus,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo select:focus,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo--alto textarea:focus {
  outline: 2px solid var(--pood-acento);
  outline-offset: -1px;
  border-color: var(--pood-acento);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo input::placeholder,
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo--alto textarea::placeholder {
  color: var(--pood-tinta-2);
}
/* o aviso de validação do Magento. Sem isto ele herda o estilo do Porto e
   aparece como caixa vermelha de largura total, fora da direção. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .campo div.mage-error {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--pood-acento);
}

@media (max-width: 900px) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .ct {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   4g. Rastrear meu pedido (.login, .nota, .beneficios, .pd__aj)

   A rota /sales/guest/form, do Magento_Sales. Como a Contato, não é página CMS
   — o <body> dela leva `sales-guest-form`, e por isso a classe entrou na lista
   do `:is()` deste arquivo.

   Sem índice lateral, como a Contato: quem chega aqui quer consultar um pedido,
   não navegar pela institucional.

   ⚠️ A LARGURA NÃO SEGUE O MODELO DESTA TELA, e é decisão consciente. O
   `tela-pedidos-devolucoes.html` declara `.folha` com `max-width:960px`, ou
   seja 880 de conteúdo — mas ele é uma página SOLTA, desenhada sozinha. Aqui
   ela entra numa família de 11 páginas que já estão no ar com 1080, e medido
   em 15/08/2026 as duas começam no mesmo x=375: a diferença aparece só na
   ponta direita, onde esta terminava 200px antes das irmãs e do rodapé. O
   efeito é exatamente o que o Will relatou duas vezes — "a página está
   estreita". Coerência entre telas vizinhas vale mais que fidelidade a um
   modelo isolado.

   Por isso NÃO há max-width aqui: herda os 1140 da regra base, como a Contato,
   que já foi aprovada com essa mesma largura. Só a coluna muda.
--------------------------------------------------------------------------- */
.sales-guest-form .inst {
  grid-template-columns: 1fr;
}
/* O teto de 68ch da linha 99 é para TEXTO CORRIDO, e aqui não há nenhum: são
   dois cartões lado a lado. Sem esta linha eles saem com 287px cada dentro dos
   880 disponíveis — a página fica estreita, com metade da largura vazia à
   direita. Mesma escapatória do `:has(.ct)` da Contato e do `:has(.sb__abre)`
   da Sobre; as três são formulário ou composição, não leitura. */
.sales-guest-form .inst__txt {
  max-width: none;
}

:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .nota {
  margin: 0 0 24px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pood-tinta-2);
}
/* o segundo cartão é vazado: ele convida, não recebe dado. Fundo branco nos
   dois faria a página parecer ter dois formulários. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .cartao--novo {
  background: transparent;
}
/* e o botão dele desce até o rodapé do cartão, para os dois alinharem pela
   base mesmo com quantidades de texto diferentes. */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .cartao--novo .btn {
  margin-top: auto;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .beneficios {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .beneficios li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .beneficios li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--pood-acento);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .pd__aj {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--pood-tinta-2);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .pd__aj a {
  color: var(--pood-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* O INVÓLUCRO QUE O WIDGET LIGA E DESLIGA.
   O `ordersReturns` do core alterna os dois campos com `$(el).toggle()`. O
   `.show()` do jQuery, quando o elemento está escondido por CSS, não devolve o
   display anterior: ele grava `display:block` INLINE, e isso destruiria o
   `display:flex` do `.campo`. Por isso o id fica num invólucro, cujo display
   natural JÁ é block - o widget escreve exatamente o que ele valia. O `.campo`
   por dentro continua intocado. */
.sales-guest-form .campo-alterna {
  display: block;
}
.sales-guest-form #oar-zip {
  display: none;
}
.sales-guest-form .campo-alterna .campo {
  margin-bottom: 16px;
}
/* o aviso de validação do Magento, que sem isto herda a caixa vermelha de
   largura total do Porto */
.sales-guest-form .campo div.mage-error {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--pood-acento);
}

@media (max-width: 900px) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__txt .login {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   5. Pé da página
--------------------------------------------------------------------------- */
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__pe {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--pood-linha);
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__pe p {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 500;
}
:is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* O BOTÃO MORA NO pood-base.css. `.inst .btn` entra lá na mesma lista de
   seletores do primitivo `.pood-btn`, em vez de repetir as 15 declarações aqui
   - foi a duplicação da trilha que ensinou que "manter as duas em sincronia"
   não sobrevive à segunda pessoa que mexe. O !important da altura, que existe
   por causa de uma regra do Porto para <a>, também está lá, restrito a este
   escopo. */

/* ---------------------------------------------------------------------------
   6. Respostas

   Abaixo de 900px o indice deixa de ser coluna e vira uma faixa de links no
   topo. Ele PERDE o sticky de proposito: grudado, comeria metade da tela do
   celular.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 34px 12px 64px;
  }
  /* O ÍNDICE SOME NO CELULAR (decisão do Will, 14/08/2026).
     Como faixa horizontal ele custava ~11 linhas antes do conteúdo — o leitor
     rolava um menu inteiro para chegar ao que veio ler. As mesmas páginas
     continuam alcançáveis pelo rodapé, que já lista as 14 e está em todas. */
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst__ind {
    display: none;
  }
  :is(.cms-page-view,.contact-index-index,.sales-guest-form) .inst .h-pagina {
    font-size: 30px;
  }
}