/* pa: frente 3 da home v3 — tiles, confiança, casas, ocasião, FAQ, rodapé (28/09/2026).
   Carregado DEPOIS do pa.css: aqui só entra o que muda ou nasce nesta frente.
   pa.css é de outra frente e não pode ser tocado — tudo abaixo vence por
   ordem ou por especificidade. Régua: conhecimento/padrao-ui.md §1 (tokens),
   §2, §3.9, §3.10, §3.11, §3.14; plano/2026-09-28-home-v3-tasks.md. */

/* =========================================================================
   Task 12 + decisão 2 — FAIXA DE CONFIANÇA ÚNICA
   Funde a antiga faixa de 5 garantias (.pa-garantias, removida do HTML) com
   os 3 cards escuros (.pa-provas, idem). Forma: régua §3.10 com 4 itens.
   ========================================================================= */
/* O pa.css em produção ainda traz --pa-tinta-2: #736E79, que dá 4,34:1 no
   marfim e REPROVA no AA (a régua §1 já fixou #6A6570, 4,95:1, mas o token
   vive no pa.css, que é de outra frente). Aqui o valor da régua entra
   escopado nesta seção — nada de hex solto no corpo das regras. */
.pa-confianca-faixa {
  --pa-tinta-2: #6A6570;
  background: var(--pa-marfim);
  color: var(--pa-tinta);
  padding: var(--pa-e-32) var(--pa-gutter);
  text-align: center;
}
.pa-confianca-faixa ul {
  display: flex;
  gap: var(--pa-e-16);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--pa-max);
}
.pa-confianca-faixa ul::-webkit-scrollbar { display: none; }
.pa-confianca-faixa li { flex: 0 0 150px; }
/* ícone: conjunto A, traço fino âmbar (§3.14), 40x40, stroke 1,5 */
.pa-confianca-faixa svg {
  width: 40px; height: 40px;
  display: block; margin: 0 auto;
  stroke: var(--pa-ambar);
  stroke-width: 1.5;
  fill: none;
}
.pa-confianca-faixa h3 {
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pa-tinta);            /* 13,06:1 sobre o marfim */
  margin: var(--pa-e-12) 0 0;
  line-height: 1.35;
}
.pa-confianca-faixa p {
  font-size: var(--pa-fs-14);
  color: var(--pa-tinta-2);          /* 4,95:1 sobre o marfim */
  margin: var(--pa-e-4) 0 0;
  line-height: 1.35;
}
.pa-confianca-faixa__acao { display: flex; justify-content: center; }
.pa-confianca-faixa .pa-vertodos { margin-top: var(--pa-e-24); }

/* =========================================================================
   Task 13 — casas: todas na mesma cor
   O pa.css pinta a casa sem página em --pa-tinta-2 (cinza), o que lê como
   "desabilitado". Gate visual do arquiteto: mesmo visual para as seis; só
   muda o fato de ser link ou texto (e o hover, que só o link tem).
   ========================================================================= */
.pa-casas > li > .pa-wordmark { color: var(--pa-tinta); }

/* =========================================================================
   Task 14 — "Escolha pela ocasião": abas + trilho de cards
   Abas, trilho e card reusam .pa-abas / .pa-pista / .pa-card do pa.css (mesmo
   componente da vitrine). Só falta a regra de painel escondido: .pa-pista é
   display:flex e, sem isto, o atributo [hidden] não esconde nada.
   ========================================================================= */
.pa-ocasiao [role="tabpanel"][hidden] { display: none; }

/* =========================================================================
   Task 16 — rodapé escuro
   ========================================================================= */
/* 13px e 11px são tamanhos proibidos pela régua §1; sobem para a escala. */
.pa-rodape { font-size: var(--pa-fs-14); }
.pa-rodape .pa-rodape__legal { font-size: var(--pa-fs-12); }
/* área de toque §5: cada link do rodapé vira alvo de 44px de altura */
.pa-rodape .pa-rodape__grade li { margin-bottom: 0; }
.pa-rodape .pa-rodape__grade li a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* a grade tinha 4 colunas fixas; com 2 colunas no ar as faixas ficavam
   estreitas demais. Coluna de largura fixa: a 3ª volta sem mexer no CSS. */
@media (min-width: 768px) {
  .pa-rodape .pa-rodape__grade { grid-template-columns: repeat(auto-fit, 220px); }
}

/* =========================================================================
   Desktop (>= 900px)
   ========================================================================= */
@media (min-width: 900px) {
  .pa-confianca-faixa { padding: var(--pa-e-40) var(--pa-gutter-desk); }
  .pa-confianca-faixa ul { justify-content: center; gap: 0; overflow: visible; }
  .pa-confianca-faixa li {
    flex: 1 1 0;
    padding: 0 var(--pa-e-24);
    border-right: 1px solid var(--pa-linha);
  }
  .pa-confianca-faixa li:last-child { border-right: 0; }

}

/* =========================================================================
   Rodapé no desenho do dono (28/09) — mockups em agents/shots/2026-09-28-rodape/
   Mobile: marca → ofertas → lista com ícones (Marcas em acordeão) → garantias
   2×2 → institucional em linha → pagamento → copyright.
   Desktop: marca+garantias · categorias · marcas · institucional · ofertas;
   faixa pagamento/segurança/envio/atendimento; copyright.
   A foto de fundo entra por --pa-rodape-bg (url(...)); vazia = só o degradê.
   ========================================================================= */
/* Fundos: o tpl define --pa-rodape-bg (desktop) e --pa-rodape-bg-mob (mobile)
   com static_url; sem eles fica só o degradê vinho→noite. */
footer.pa-rodape {
  background: linear-gradient(180deg, var(--pa-vinho) 0%, var(--pa-noite) 420px);
  color: var(--pa-marfim);
  font-size: var(--pa-fs-14);
  line-height: 1.5;
  interpolate-size: allow-keywords;
}
.pa-rodape .pa-rodape__topo {
  padding-left: max(var(--pa-gutter), env(safe-area-inset-left));
  padding-right: max(var(--pa-gutter), env(safe-area-inset-right));
}
@media (max-width: 899px) {
  .pa-rodape .pa-rodape__faixa,
  .pa-rodape .pa-rodape__base {
    margin-left: max(var(--pa-gutter), env(safe-area-inset-left));
    margin-right: max(var(--pa-gutter), env(safe-area-inset-right));
  }
}
/* abre/fecha suave onde o navegador anima <details> (::details-content) */
.pa-rodape .pa-rodape__grupo::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .22s ease, content-visibility .22s allow-discrete;
}
.pa-rodape .pa-rodape__grupo[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .pa-rodape .pa-rodape__grupo::details-content,
  .pa-rodape .pa-rodape__mais::after { transition: none; }
}
.pa-rodape .pa-rodape__ico {
  width: 24px; height: 24px; flex: 0 0 24px;
  fill: none; stroke: var(--pa-ambar); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.pa-rodape h2 { margin: 0; }
.pa-rodape p { margin: 0; }
.pa-rodape ul { list-style: none; margin: 0; padding: 0; }
.pa-rodape li { margin: 0; }
.pa-rodape .pa-rodape__titulo,
.pa-rodape .pa-rodape__rotulo {
  font-family: var(--pa-sans);
  font-size: var(--pa-fs-12);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pa-marfim);
}
.pa-rodape .pa-rodape__rotulo { font-weight: 500; color: var(--pa-areia); margin-bottom: 12px; }

/* ---------- mobile (base) ---------- */
.pa-rodape .pa-rodape__topo {
  display: flex;
  flex-direction: column;
  padding-top: 32px; padding-bottom: 0;
}
.pa-rodape .pa-rodape__marca { display: contents; }
.pa-rodape .pa-rodape__hero {
  order: 1;
  background:
    linear-gradient(180deg, rgba(14, 11, 20, .2) 0%, rgba(14, 11, 20, .1) 55%, var(--pa-noite) 100%),
    linear-gradient(rgba(14, 11, 20, .7), rgba(14, 11, 20, .7)),
    var(--pa-rodape-bg-mob, none) 70% 58% / cover no-repeat;
  min-height: 320px;
  margin: -32px calc(-1 * var(--pa-gutter)) 0;
  padding: 48px var(--pa-gutter) 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.pa-rodape .pa-rodape__logo { display: block; width: 220px; max-width: 70%; height: auto; margin: 0 auto 16px; }
.pa-rodape .pa-rodape__frase {
  font-family: var(--pa-serif); font-size: var(--pa-fs-22); line-height: 1.3;
  color: var(--pa-marfim);
}
.pa-rodape .pa-rodape__newsletter { order: 3; margin: 0 0 24px; padding: 0; max-width: none; text-align: left; }
.pa-rodape .pa-rodape__mnav { order: 4; }
.pa-rodape .pa-rodape__garantias { order: 5; }
.pa-rodape .pa-rodape__col--inst { order: 6; }
.pa-rodape .pa-rodape__col--cat,
.pa-rodape .pa-rodape__col--marcas { display: none; }

/* divisor com losango */
.pa-rodape .pa-rodape__mnav,
.pa-rodape .pa-rodape__garantias,
.pa-rodape .pa-rodape__col--inst { position: relative; border-top: 1px solid var(--pa-linha-noite); }
.pa-rodape .pa-rodape__mnav::before,
.pa-rodape .pa-rodape__garantias::before,
.pa-rodape .pa-rodape__col--inst::before {
  content: ""; position: absolute; top: -4px; left: 50%;
  width: 7px; height: 7px; margin-left: -4px;
  background: var(--pa-noite); border: 1px solid var(--pa-ambar);
  transform: rotate(45deg);
}

/* newsletter nativa, em linha */
.pa-rodape .pa-rodape__newsletter .pa-rodape__titulo { margin-bottom: 6px; }
.pa-rodape .pa-rodape__newsletter .newsletter-footer { background: transparent !important; }
.pa-rodape .pa-rodape__newsletter .newsletter,
.pa-rodape .pa-rodape__newsletter .newsletter > .row { padding: 0 !important; margin: 0 !important; max-width: none; }
.pa-rodape .pa-rodape__newsletter .newsletter > .row { display: block; text-align: left !important; }
.pa-rodape .pa-rodape__newsletter .row > .col-md:has(.h2),
.pa-rodape .pa-rodape__newsletter .row > .col-md:has(.font-small) { display: none; }
.pa-rodape .pa-rodape__news-texto { font-size: var(--pa-fs-14); color: var(--pa-areia); margin-bottom: 16px; }
.pa-rodape .pa-rodape__newsletter .row > .col-md,
.pa-rodape .pa-rodape__newsletter form { padding: 0; margin: 0 !important; max-width: none; flex: none; width: auto; }
.pa-rodape .pa-rodape__newsletter .newsletter-form {
  display: flex; flex-wrap: nowrap; margin: 0;
  border: 1px solid rgba(216, 198, 168, .35); border-radius: var(--pa-r-pill);
  overflow: hidden;
}
.pa-rodape .pa-rodape__newsletter .newsletter-form > div { padding: 0; margin: 0 !important; }
.pa-rodape .pa-rodape__newsletter .newsletter-form > .col-md { flex: 1 1 0; width: auto; min-width: 0; }
.pa-rodape .pa-rodape__newsletter .newsletter-form > .col-md-auto { flex: 0 0 auto; width: auto; }
.pa-rodape .pa-rodape__newsletter .newsletter-form .form-control {
  width: 100%; min-height: 46px; border: 0; border-radius: 0;
  background: transparent; color: var(--pa-marfim);
  padding: 0 var(--pa-e-16); font-size: var(--pa-fs-16);
}
.pa-rodape .pa-rodape__newsletter .newsletter-form .form-control::placeholder { color: rgba(216, 198, 168, .65); }
.pa-rodape .pa-rodape__newsletter .newsletter-form .btn {
  min-height: 46px; padding: 0 24px; border-radius: var(--pa-r-pill);
  background: linear-gradient(90deg, #B98A4A, var(--pa-ambar));
  color: var(--pa-noite); text-decoration: none; letter-spacing: .14em;
}
.pa-rodape .pa-rodape__social { display: flex; gap: 12px; margin-top: 12px; }
.pa-rodape .pa-rodape__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid rgba(216, 198, 168, .45);
  border-radius: 50%; color: var(--pa-marfim);
}

/* lista com ícones */
.pa-rodape .pa-rodape__mnav > ul > li { border-bottom: 1px solid var(--pa-linha-noite); }
.pa-rodape .pa-rodape__mnav > ul > li:last-child { border-bottom: 0; }
.pa-rodape .pa-rodape__mnav a,
.pa-rodape .pa-rodape__mnav summary {
  display: flex; align-items: center; gap: 16px;
  min-height: 48px; color: var(--pa-marfim); font-size: var(--pa-fs-16);
  list-style: none; cursor: pointer;
}
.pa-rodape .pa-rodape__mnav summary::-webkit-details-marker { display: none; }
.pa-rodape .pa-rodape__mnav a > span:not(.pa-rodape__seta),
.pa-rodape .pa-rodape__mnav summary > span:not(.pa-rodape__mais) { flex: 1; }
.pa-rodape .pa-rodape__seta { color: var(--pa-areia); font-size: var(--pa-fs-22); line-height: 1; padding-right: 4px; }
.pa-rodape .pa-rodape__mais { position: relative; width: 14px; height: 14px; margin-right: 2px; }
.pa-rodape .pa-rodape__mais::before,
.pa-rodape .pa-rodape__mais::after {
  content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: var(--pa-areia);
}
.pa-rodape .pa-rodape__mais::after { transform: rotate(90deg); transition: transform .2s; }
.pa-rodape .pa-rodape__grupo[open] .pa-rodape__mais::after { transform: rotate(0); }
.pa-rodape .pa-rodape__grupo ul { padding: 0 0 8px 40px; }
.pa-rodape .pa-rodape__grupo ul a { min-height: 40px; color: var(--pa-areia); font-size: var(--pa-fs-14); }

/* garantias 2×2 */
.pa-rodape .pa-rodape__garantias {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 20px 0;
}
.pa-rodape .pa-rodape__garantias li { display: flex; gap: 10px; align-items: flex-start; }
.pa-rodape .pa-rodape__garantias span { font-size: var(--pa-fs-12); color: var(--pa-areia); line-height: 1.4; }
.pa-rodape .pa-rodape__garantias strong {
  display: block; font-weight: 500; font-size: var(--pa-fs-14); color: var(--pa-marfim); margin-bottom: 2px;
}

/* institucional em linha com "|" */
.pa-rodape .pa-rodape__col--inst { padding: 16px 0; }
.pa-rodape .pa-rodape__col--inst .pa-rodape__titulo { display: none; }
.pa-rodape .pa-rodape__col--inst ul { display: flex; flex-wrap: wrap; justify-content: center; }
.pa-rodape .pa-rodape__col--inst li + li::before { content: "|"; color: var(--pa-linha-noite); padding: 0 10px; }
.pa-rodape .pa-rodape__col--inst li { display: flex; align-items: center; }
.pa-rodape .pa-rodape__col--inst a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pa-areia); font-size: var(--pa-fs-12); }
.pa-rodape .pa-rodape__col--inst li + li::before { padding: 0 8px; }
.pa-rodape a:hover { color: var(--pa-ambar); }
.pa-rodape .pa-rodape__so-desk { display: none; }

/* faixa: no mobile só o pagamento */
.pa-rodape .pa-rodape__faixa { margin: 0 var(--pa-gutter); padding: 16px 0; border-top: 1px solid var(--pa-linha-noite); }
.pa-rodape .pa-rodape__faixa-item:not(.pa-rodape__faixa-item--pag) { display: none; }
.pa-rodape .pa-rodape__faixa-item--pag .pa-rodape__rotulo { text-align: center; }
.pa-rodape .pa-rodape__bandeiras { justify-content: center; gap: 8px; }
.pa-rodape .pa-rodape__bandeiras img { height: 24px; width: auto; }
.pa-rodape .pa-rodape__faixa p { display: flex; gap: 12px; align-items: center; color: var(--pa-areia); }

.pa-rodape .pa-rodape__base {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  max-width: none; margin: 0 var(--pa-gutter); padding: 20px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--pa-linha-noite); text-align: center;
}
.pa-rodape .pa-rodape__legal { margin: 0; font-size: var(--pa-fs-12); color: rgba(216, 198, 168, .6); }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  footer.pa-rodape {
    background:
      linear-gradient(180deg, rgba(14, 11, 20, 0) 35%, rgba(14, 11, 20, .94) 66%, var(--pa-noite) 78%),
      linear-gradient(90deg, rgba(14, 11, 20, .5) 0%, rgba(14, 11, 20, .25) 50%, rgba(14, 11, 20, 0) 100%),
      linear-gradient(rgba(14, 11, 20, .7), rgba(14, 11, 20, .7)),
      var(--pa-rodape-bg, none) right center / cover no-repeat,
      var(--pa-noite);
  }
  .pa-rodape .pa-rodape__topo {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto auto auto minmax(0, 1.5fr);
    column-gap: 32px;
    max-width: var(--pa-max); margin: 0 auto;
    padding: 72px var(--pa-gutter-desk) 48px;
    align-items: start;
  }
  .pa-rodape .pa-rodape__marca { display: block; }
  .pa-rodape .pa-rodape__topo > * { order: 0; }
  .pa-rodape .pa-rodape__hero { min-height: 0; margin: 0 0 32px; padding: 0; align-items: flex-start; text-align: left; background: none; }
  .pa-rodape .pa-rodape__logo { width: 230px; max-width: 100%; margin: 0 0 12px; }
  .pa-rodape .pa-rodape__frase { font-size: var(--pa-fs-18); color: var(--pa-areia); }
  .pa-rodape .pa-rodape__faixa-item--pag .pa-rodape__rotulo { text-align: left; }
  .pa-rodape .pa-rodape__bandeiras { justify-content: flex-start; }
  .pa-rodape .pa-rodape__frase br { display: inline; }
  .pa-rodape .pa-rodape__mnav { display: none; }
  .pa-rodape .pa-rodape__col--cat,
  .pa-rodape .pa-rodape__col--marcas { display: block; }
  .pa-rodape .pa-rodape__col { padding: 12px 0 0; border: 0; }
  .pa-rodape .pa-rodape__col::before,
  .pa-rodape .pa-rodape__garantias::before { display: none; }
  .pa-rodape .pa-rodape__col .pa-rodape__titulo { display: block; margin-bottom: 12px; font-size: var(--pa-fs-14); }
  .pa-rodape .pa-rodape__newsletter .pa-rodape__titulo { font-size: var(--pa-fs-14); }
  .pa-rodape .pa-rodape__news-texto { font-size: var(--pa-fs-16); }
  .pa-rodape .pa-rodape__col ul { display: block; }
  .pa-rodape .pa-rodape__col li { display: block; }
  .pa-rodape .pa-rodape__col li + li::before { content: none; }
  .pa-rodape .pa-rodape__col a {
    display: inline-flex; min-height: 32px; align-items: center;
    color: var(--pa-marfim); font-size: var(--pa-fs-16); font-weight: 500;
  }
  .pa-rodape .pa-rodape__col--inst { max-width: 200px; }
  .pa-rodape .pa-rodape__so-desk { display: inline; }
  .pa-rodape .pa-rodape__so-mob { display: none; }
  .pa-rodape .pa-rodape__newsletter { padding-top: 12px; margin: 0; }
  .pa-rodape .pa-rodape__newsletter .pa-rodape__titulo { margin-bottom: 16px; }
  .pa-rodape .pa-rodape__garantias {
    display: flex; flex-direction: column; gap: 20px; padding: 0; border: 0;
  }
  .pa-rodape .pa-rodape__garantias .pa-rodape__ico { width: 32px; height: 32px; flex-basis: 32px; }
  .pa-rodape .pa-rodape__garantias strong { font-size: var(--pa-fs-16); }
  .pa-rodape .pa-rodape__garantias span { font-size: var(--pa-fs-14); }

  .pa-rodape .pa-rodape__faixa {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
    max-width: min(calc(var(--pa-max) - 2 * var(--pa-gutter-desk)), calc(100% - 2 * var(--pa-gutter-desk))); margin: 0 auto; padding: 32px 0;
    border-top: 1px solid var(--pa-linha-noite);
  }
  .pa-rodape .pa-rodape__faixa-item:not(.pa-rodape__faixa-item--pag) { display: block; }
  .pa-rodape .pa-rodape__faixa .pa-rodape__ico { width: 32px; height: 32px; flex-basis: 32px; }
  .pa-rodape .pa-rodape__base {
    flex-direction: row; justify-content: space-between;
    max-width: min(calc(var(--pa-max) - 2 * var(--pa-gutter-desk)), calc(100% - 2 * var(--pa-gutter-desk))); margin: 0 auto; padding: 20px 0 28px;
  }
  .pa-rodape .pa-rodape__legal + .pa-rodape__legal { border: 0; padding: 0; }
}

/* Faixa branca entre a última seção da home e o rodapé (28/09): era a seção
   nativa de banners (.section-banners-home, snipplets/home/home-section-switch.tpl)
   renderizada VAZIA — sem banner cadastrado, sobra só o padding nativo
   (60px + 10px) sobre o fundo branco do body. Seção de banner sem imagem some. */
.js-home-sections-container > .section-banners-home:not(:has(img)) { display: none; }
/* 900–1199px: 5 colunas não cabem; ofertas desce para a 2ª linha, ao lado da marca */
@media (min-width: 900px) and (max-width: 1199px) {
  .pa-rodape .pa-rodape__topo { grid-template-columns: minmax(0, 1.3fr) auto auto auto; row-gap: 40px; }
  .pa-rodape .pa-rodape__marca { grid-row: span 2; }
  .pa-rodape .pa-rodape__newsletter { grid-column: 2 / -1; max-width: 520px; }
}
/* crédito Nuvemshop (obrigatório pelos termos) e claim-info, vindos do footer nativo */
.pa-rodape .pa-rodape__obrigatorio { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }
.pa-rodape .pa-rodape__obrigatorio a { color: rgba(216, 198, 168, .75); }
.pa-rodape .pa-rodape__obrigatorio svg { height: 12px; width: auto; fill: currentColor; }
.pa-rodape .pa-rodape__obrigatorio .powered-by-logo { color: rgba(216, 198, 168, .75); }
@media (min-width: 900px) {
  .pa-rodape .pa-rodape__base { flex-wrap: wrap; }
  .pa-rodape .pa-rodape__obrigatorio { flex-basis: 100%; justify-content: flex-end; }
}