/* ============================================================
   blocos.css — estilos dos MODELOS (variantes) de bloco.
   Carregado por TODAS as páginas do tema, depois de style.css /
   shop.css, para poder sobrescrever o layout base.

   Por que um arquivo só: navbar e rodapé têm CSS duplicado em
   style.css (home) e shop.css (loja). Se cada modelo novo tivesse
   de entrar nos dois, a chance de divergirem seria alta. Todo
   modelo novo escreve aqui — um lugar só.

   Convenção: o modelo v1 de cada família NÃO tem CSS aqui (ele é o
   layout base, que já vive no style.css/shop.css). Aqui só entram
   as diferenças dos modelos v2, v3, ...
   ============================================================ */

/* ============================================================
   HEADER v2 — CENTRALIZADO (marca em cima, menu embaixo)
   A altura da barra é maior; o --nav-h correspondente é emitido
   pelo próprio bloco (blocos/_header.asp), porque o body usa
   padding-top: var(--nav-h).
   ============================================================ */
.navbar--v2 .nav-inner--v2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  padding-bottom: 4px;
}
.navbar--v2 .nav-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.navbar--v2 .nav-row--marca {
  justify-content: center;
  position: relative;
}
/* as ações ficam ancoradas à direita, deixando a marca no centro óptico */
.navbar--v2 .nav-row--marca .nav-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.navbar--v2 .nav-row--marca .hamburger {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.navbar--v2 .nav-logo--center { margin: 0 auto; }
.navbar--v2 .nav-row--links { justify-content: center; }
.navbar--v2 .nav-links--center {
  justify-content: center;
  gap: 26px;
  margin: 0;
}

/* No mobile o v2 volta ao formato de uma linha (marca + hambúrguer):
   duas linhas empilhadas comeriam metade da tela. */
@media (max-width: 820px) {
  .navbar--v2 .nav-inner--v2 { flex-direction: row; padding-top: 0; padding-bottom: 0; }
  .navbar--v2 .nav-row--links { display: none; }
  .navbar--v2 .nav-row--marca { justify-content: space-between; }
  .navbar--v2 .nav-logo--center { margin: 0; }
}


/* ============================================================
   RODAPÉ v2 — COMPACTO (uma faixa em 3 colunas)
   ============================================================ */
.footer--v2 .ftr2-linha {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) auto minmax(200px, 1fr);
  gap: 40px;
  align-items: start;
  padding: 8px 0;
}
.footer--v2 .ftr2-marca .footer-logo { display: block; margin-bottom: 14px; height: auto; max-width: 150px; }
.footer--v2 .ftr2-marca p { font-size: .86rem; line-height: 1.6; opacity: .82; margin: 0; }

.footer--v2 .ftr2-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer--v2 .ftr2-nav a {
  font-size: .86rem;
  opacity: .85;
  text-decoration: none;
  color: inherit;
}
.footer--v2 .ftr2-nav a:hover { opacity: 1; text-decoration: underline; }

.footer--v2 .ftr2-contato {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .86rem;
}
.footer--v2 .ftr2-contato a { color: inherit; text-decoration: none; opacity: .85; }
.footer--v2 .ftr2-contato a:hover { opacity: 1; text-decoration: underline; }
.footer--v2 .ftr2-contato .footer-social { margin-top: 12px; }

@media (max-width: 900px) {
  .footer--v2 .ftr2-linha { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   PLANOS v2 — LINHA COMPARATIVA
   Cada plano é uma faixa horizontal em vez de um card na grade.
   O .plan-card continua existindo (o updatePlanPrice do script.js
   usa input.closest('.plan-card') para achar .plan-num e .btn--plan),
   só muda a disposição interna.
   ============================================================ */
.plano--v2 .plans-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.plano--v2 .plan-card--row {
  display: grid;
  /* foto ocupando 60% da linha; info e ação empilham nos 40% restantes.
     grid-template-areas evita mexer no markup: os três filhos continuam
     na mesma ordem, só mudam de célula. */
  grid-template-columns: 6fr 4fr;
  grid-template-areas:
    "img info"
    "img acao";
  gap: 18px 28px;
  align-items: start;
  text-align: left;
  padding: 20px 24px;
  /* neutraliza o destaque do card do meio herdado da v1 */
  transform: none;
}
.plano--v2 .plan-card--row > .pl2-img  { grid-area: img; }
.plano--v2 .plan-card--row > .pl2-info { grid-area: info; align-self: end; }
.plano--v2 .plan-card--row > .pl2-acao { grid-area: acao; align-self: start; }
.plano--v2 .plan-card--row::before,
.plano--v2 .plan-card--row::after { content: none; }

.plano--v2 .pl2-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  position: relative;   /* âncora das setas e dos pontos do slide */
}
.plano--v2 .pl2-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* a foto agora é o elemento principal: preenche */
  display: block;
}

/* ---- slide (só quando o plano tem mais de uma foto) ---- */
.plano--v2 .pl2-track {
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.plano--v2 .pl2-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plano--v2 .pl2-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #1e1e1e;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .2s, background .2s;
}
.plano--v2 .pl2-arrow svg { width: 20px; height: 20px; }
.plano--v2 .pl2-arrow--prev { left: 12px; }
.plano--v2 .pl2-arrow--next { right: 12px; }
/* aparecem no hover no desktop; no toque ficam sempre visíveis (regra abaixo) */
.plano--v2 .pl2-img:hover .pl2-arrow,
.plano--v2 .pl2-arrow:focus-visible { opacity: 1; }
.plano--v2 .pl2-arrow:hover { background: #fff; }

.plano--v2 .pl2-dots {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.plano--v2 .pl2-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.plano--v2 .pl2-dot.is-on { background: #fff; transform: scale(1.3); }

@media (hover: none) {
  .plano--v2 .pl2-arrow { opacity: 1; }
}

.plano--v2 .pl2-info { min-width: 0; }
.plano--v2 .pl2-info .plan-title { margin: 0 0 6px; }
.plano--v2 .pl2-info .plan-desc  { margin: 0 0 10px; }
.plano--v2 .pl2-info .plan-options { margin-top: 12px; }
.plano--v2 .pl2-info .plan-option-group { justify-content: flex-start; }

.plano--v2 .pl2-acao {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  text-align: center;
}
.plano--v2 .pl2-acao .plan-price { margin: 0; }
.plano--v2 .pl2-acao .btn--plan { width: 100%; justify-content: center; }

/* Tablet e abaixo: a foto vira a faixa de cima, em largura cheia.
   Lado a lado com 70/30 numa tela estreita sobraria uma coluna de texto
   de ~200px, com o preço quebrando em duas linhas. */
@media (max-width: 900px) {
  .plano--v2 .plan-card--row {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "info" "acao";
    gap: 16px;
  }
  .plano--v2 .plan-card--row > .pl2-info,
  .plano--v2 .plan-card--row > .pl2-acao { align-self: auto; }
  .plano--v2 .pl2-img { aspect-ratio: 16 / 9; }
  .plano--v2 .pl2-acao {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 14px;
  }
  .plano--v2 .pl2-acao .btn--plan { width: auto; }
}

/* Mobile: preço e botão também empilham */
@media (max-width: 560px) {
  .plano--v2 .plan-card--row { padding: 16px; }
  .plano--v2 .pl2-img { aspect-ratio: 4 / 3; }
  .plano--v2 .pl2-acao { flex-direction: column; align-items: stretch; }
  .plano--v2 .pl2-acao .btn--plan { width: 100%; justify-content: center; }
}

/* ============================================================
   VANTAGENS v2 — ENXUTA (número + texto, sem foto de fundo)
   Mesmos itens da v1; a imagem simplesmente não é exibida.
   ============================================================ */
.vantagens--v2 .virtues-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px 40px;
  margin-top: 10px;
}
.vantagens--v2 .virtue-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  text-align: left;
  padding: 4px 0;
}
.vantagens--v2 .virtue-item-no {
  font-family: var(--display, inherit);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold, #a86b3c);
  opacity: .45;
  font-variant-numeric: tabular-nums;
}
.vantagens--v2 .virtue-item-txt h3 {
  font-size: 1.06rem;
  line-height: 1.35;
  margin: 0 0 6px;
}
.vantagens--v2 .virtue-item-txt p {
  font-size: .9rem;
  line-height: 1.65;
  opacity: .82;
  margin: 0;
}

@media (max-width: 560px) {
  .vantagens--v2 .virtues-lista { gap: 24px; }
  .vantagens--v2 .virtue-item { gap: 14px; }
  .vantagens--v2 .virtue-item-no { font-size: 1.6rem; }
}

/* ============================================================
   APRESENTAÇÃO v1 — texto à esquerda · arte à direita
   Título grande, parágrafo e três destaques com marcador; a arte ocupa
   a coluna da direita.

   A FOLGA DA NAVBAR é condicional, e por isso mora nas duas regras logo
   abaixo do .apr: esta seção pode ser arrastada para qualquer posição.
   O style.css reserva a navbar no body e a dispensa em páginas com banner
   no topo. Quando a apresentação é o PRIMEIRO bloco, ela assume esse
   papel — o creme passa por baixo da navbar transparente, como num
   banner. Em qualquer outra posição as duas regras não casam, o body
   volta a reservar e a seção fica com o padding normal, sem um vão de
   navbar de altura no meio da página.
   ============================================================ */
.apr {
  /* cor fixa, NÃO var(--paper): o painel sobrescreve --paper em :root
     a partir de cor_paper, e com ele cinza a seção inteira ficava cinza. */
  background: #fffcf6;
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Primeiro bloco da página: a seção assume a folga da navbar fixa e o
   body deixa de reservá-la — o mesmo acordo que o style.css faz para as
   páginas com banner no topo. */
body:has(#conteudo > .apr:first-child) { padding-top: 0; }
#conteudo > .apr:first-child { padding-top: var(--nav-h, 72px); }
.apr .apr-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;   /* a arte pede um respiro a mais */
  gap: 56px;
  align-items: center;
}

/* ---- coluna do texto ---- */
/* Mesmo tratamento do título da seção "Como funciona" (.section-head h2):
   família, peso, entrelinha, letter-spacing e cor vêm da regra base
   h1..h5 do style.css; aqui só entra o que o .section-head h2 acrescenta. */
.apr .apr-txt h1,
.apr .apr-txt h2 {
  font-size: var(--fs-3xl);
  margin: 0 0 16px;
}
.apr .apr-txt h1 em,
.apr .apr-txt h2 em {
  display: inline;
  font-style: italic;
}
.apr .apr-sub {
  font-family: var(--font-body);
  color: var(--text-mute, #555);
  font-size: 1.04rem;
  line-height: 1.75;
  opacity: .8;
  margin: 0 0 26px;
  max-width: 46ch;
}
.apr .apr-cta { margin-bottom: 26px; }

/* ---- os três destaques ---- */
.apr .apr-destaques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 33rem;
}
.apr .apr-dest {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-body);
  background: #f3eee1;
  border-radius: 14px;
  padding: 14px 18px;
}
.apr .apr-dest-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--gold, #a86b3c);
  display: grid;
  place-items: center;   /* centraliza nos dois eixos */
  color: #fff;
}
.apr .apr-dest-ic svg {
  display: block;        /* sem isto o svg é inline e ganha folga de baseline embaixo */
  width: 19px;
  height: 19px;
  /* currentColor, e não #fff: assim o traço do check acompanha o `color`
     do .apr-dest-ic — que é justamente o que o editor de estilo altera.
     Com a cor cravada aqui, mudar a cor no painel não surtia efeito
     nenhum (CSS vence o stroke="currentColor" do atributo no SVG). */
  stroke: currentColor;
}
.apr .apr-dest strong {
  display: block;
  color: var(--ink, #1e1e1e);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
}
/* `> div > span` e NÃO `.apr-dest span`: o ícone também é um <span>
   dentro do .apr-dest, e com (0,2,1) contra (0,2,0) esta regra vencia a
   do ícone — trocava o `display:grid` por `block` (matava a centralização)
   e a cor branca pela cor de texto (deixava o check escuro). */
.apr .apr-dest > div > span {
  display: block;
  color: var(--text-mute, #555);
  font-size: .88rem;
  line-height: 1.5;
}

/* ---- coluna da arte ---- */
.apr .apr-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

/* Tablet: a arte vai para cima e o texto centraliza — lado a lado abaixo
   de ~900px espremeria as duas colunas. */
@media (max-width: 900px) {
  .apr .apr-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    justify-items: center;
    text-align: center;
  }
  .apr .apr-img { order: -1; max-width: 520px; }
  .apr .apr-sub { margin-left: auto; margin-right: auto; }
  /* o destaque volta a alinhar à esquerda: texto corrido centralizado
     com ícone ao lado fica ilegível */
  .apr .apr-destaques { text-align: left; width: 100%; max-width: 520px; }
}
@media (max-width: 560px) {
  .apr { padding-bottom: 36px; }
  .apr .apr-dest { padding: 12px 14px; gap: 11px; }
  .apr .apr-dest-ic { width: 30px; height: 30px; border-radius: 9px; }
}

/* ============================================================
   DEPOIMENTOS v2 — GRADE (sem a faixa animada da v1)
   Reaproveita o card .t-card; muda só o container.
   ============================================================ */
.depoimentos--v2 .t-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 12px;
}
.depoimentos--v2 .t-card {
  width: auto;          /* na v1 o card tem largura fixa dentro da faixa */
  flex: none;
  margin: 0;
  height: 100%;
}

@media (max-width: 560px) {
  .depoimentos--v2 .t-grade { gap: 16px; }
}

/* ============================================================
   BARRA DE AVISO (família própria — blocos/_aviso.asp)
   Antes era o modelo v3 do header; virou bloco independente.

   COMO A ALTURA SE COMPÕE: a barra é fixa no topo e a navbar (também
   fixa) desce para baixo dela. A barra publica sua altura em
   --aviso-h; aqui a navbar ganha `top` e o corpo ganha o espaço.
   Sem barra, --aviso-h = 0 e tudo fica exatamente como era — por isso
   estas regras podem ficar sempre ativas.
   ============================================================ */
:root { --aviso-h: 0px; }

.hdr-aviso {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;                 /* acima da navbar */
  height: var(--aviso-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--gold, #a86b3c);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  padding: 0 16px;
  line-height: 1.3;
}
.hdr-aviso a { color: #fff; }
.hdr-aviso-cta {
  text-decoration: underline;
  white-space: nowrap;
  font-weight: 700;
}

/* a navbar fixa desce a altura da barra; o corpo acompanha */
.navbar { top: var(--aviso-h); }
body { padding-top: calc(var(--nav-h) + var(--aviso-h)); }
/* páginas com banner no topo continuam colando o conteúdo atrás da
   navbar transparente — mas nunca atrás da barra de aviso, que é opaca */
body:has(.hero), body:has(.loja-banner) { padding-top: var(--aviso-h); }

@media (max-width: 560px) {
  .hdr-aviso { font-size: .72rem; padding: 0 12px; gap: 8px; }
}

/* ============================================================
   HEADER v3 — LOJA (uma linha) + MEGAMENU
   Ordem: logo · Todas as categorias · links · busca · conta ·
   carrinho · CTA. Altura (--nav-h) é emitida pelo próprio bloco.
   ============================================================ */
.navbar--v3 .nav-inner--v3 {
  display: flex;
  align-items: center;
  /* a base usa space-between; aqui a ordem é fixa e o espaço sobra na busca */
  justify-content: flex-start;
  flex-wrap: nowrap;
  /* v3 é a navbar mais cheia do tema (logo + categorias + links + busca +
     2 ícones + CTA). Tudo aqui é compactado para a linha caber inteira em
     ~1250px — foi o estouro dessa linha que espremia a busca até sumir. */
  gap: 10px;
  padding-left: 20px;
  padding-right: 20px;
  height: 100%;
}
.navbar--v3 .nav-logo--v3 { flex: 0 1 auto; min-width: 0; }
.navbar--v3 .nav-logo--v3 .logo-img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; }

/* Links: nunca encolhem nem quebram. O <a> da base é `inline-block`, e um
   inline-block que não cabe na linha do <li> desce inteiro para a linha de
   baixo — era o que jogava um item (ex.: "Planos") para baixo dos outros.
   Virando flex, o texto do link não participa mais de line-box nenhuma. */
.navbar--v3 .nav-links--v3 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  flex: 0 0 auto;
  /* a cor dos links mora AQUI, no <ul>, que é o elemento estilizável.
     O style.css pinta `.nav-links a` direto, e com cor própria no <a> a
     cor escolhida no painel nunca desceria até ele. */
  color: rgba(255,255,255,.7);
}
.navbar--v3 .nav-links--v3 li { display: flex; align-items: center; flex: none; }
.navbar--v3 .nav-links--v3 a {
  display: flex;
  align-items: center;
  padding: 8px 9px;
  white-space: nowrap;
  color: inherit;       /* vence o `.nav-links a` do style.css (0,2,1 > 0,1,1) */
}
/* o hover precisa ser reescrito aqui: com a regra acima empatando em
   especificidade com o `.nav-links a:hover` do style.css, quem vem depois
   ganha — e blocos.css carrega depois. */
.navbar--v3 .nav-links--v3 a:hover { color: #fff; }

/* ---- botão "Todas as categorias" ---- */
.navbar--v3 .nav3-cats { position: static; flex: 0 0 auto; }
.navbar--v3 .nav3-cats-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  /* NÃO usar `color: inherit`: a .navbar define color escuro (o mesmo do
     próprio fundo) e o botão sumiria. */
  color: rgba(255,255,255,.92);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 12px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.navbar--v3 .nav3-cats-btn:hover,
.navbar--v3 .nav3-cats-btn[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; }
.navbar--v3 .nav3-cats-btn svg { width: 17px; height: 17px; flex: none; }
.navbar--v3 .nav3-cats-btn[aria-expanded="true"] .nav3-cats-seta { transform: rotate(180deg); }
.navbar--v3 .nav3-cats-seta { transition: transform .18s; }

/* ---- busca (à direita, antes das ações) ----
   flex-basis com PISO: era `flex:1 1 auto; min-width:0`, e como todo o resto
   da linha tem tamanho fixo, a busca virava a única a encolher — sumia num
   filete de poucos pixels quando a logo era larga. Agora ela tem um mínimo
   e quem sai de cena antes são os links (que continuam no menu lateral). */
.navbar--v3 .nav3-busca {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 320px;
  margin-left: auto;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  overflow: hidden;
  /* cor do texto no <form> (o elemento estilizável); o input, a lupa e o
     placeholder herdam dela em vez de cravarem branco. */
  color: #fff;
}
.navbar--v3 .nav3-busca input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: .84rem;
  color: inherit;
  padding: 9px 4px 9px 16px;
}
/* opacity, e não uma cor fixa: assim placeholder e lupa acompanham a cor
   escolhida no painel em vez de ficarem brancos sobre fundo claro. */
.navbar--v3 .nav3-busca input::placeholder { color: inherit; opacity: .45; }
.navbar--v3 .nav3-busca button {
  border: 0; background: transparent; cursor: pointer;
  color: inherit; opacity: .7;
  padding: 0 13px; align-self: stretch;
  display: grid; place-items: center;
}
.navbar--v3 .nav3-busca button:hover { opacity: 1; }
.navbar--v3 .nav3-busca svg { width: 17px; height: 17px; }

/* ---- carrinho com contador ---- */
.navbar--v3 .nav-actions--v3 { gap: 2px; margin-left: 0; flex: 0 0 auto; }
.navbar--v3 .nav-actions--v3 .nav-icon-btn { width: 38px; height: 38px; }
.navbar--v3 .nav-actions--v3 .btn--nav { padding: 10px 16px; font-size: .82rem; white-space: nowrap; }
.navbar--v3 .nav3-cart { position: relative; }
.navbar--v3 .nav3-cart-n {
  position: absolute; top: -2px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--gold, #a86b3c); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.navbar--v3 .nav3-cart-n[data-empty="true"] { display: none; }

/* ============================================================
   MEGAMENU — painel full-width sob a navbar
   3 áreas: card promocional | colunas de categoria | vantagens
   ============================================================ */
.nav3-mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--ink, #1e1e1e);
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.55);
  z-index: 1002;
}
.nav3-mega[hidden] { display: none; }
.nav3-mega-in {
  max-width: 1224px;
  margin: 0 auto;
  padding: 24px 24px 26px;
  display: grid;
  grid-template-columns: 260px 1fr 210px;
  gap: 32px;
  align-items: start;
}

/* banner (esquerda) — só a imagem, inteira, sem corte */
.mega-promo { display: block; }
.mega-promo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* colunas de categoria (centro)
   Grade FIXA de 4 colunas: com `auto-fit` a última categoria caía sozinha
   numa 2ª linha desalinhada das demais. Com 4 fixas, 4 categorias ocupam
   uma linha e, acima disso, as linhas ficam alinhadas entre si. */
.mega-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  align-content: start;
}
.mega-col { min-width: 0; }
.mega-col h4 {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.mega-col h4 a { color: var(--gold, #a86b3c); text-decoration: none; }
.mega-col h4 a:hover { text-decoration: underline; }
.mega-col a {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  text-decoration: none;
  padding: 3px 0;
}
.mega-col a:hover { color: #fff; }
.mega-col .mega-vermais {
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold, #a86b3c);
}
.mega-col .mega-vermais:hover { color: var(--gold, #a86b3c); text-decoration: underline; }

/* vantagens (direita)
   A cor mora no .mega-vant — que é o elemento estilizável — e desce por
   herança. Antes, título, apoio e ícone cravavam a própria cor, então o
   controle do painel pintava só o container e nada mudava na tela. */
.mega-vant {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid rgba(255,255,255,.10);
  padding-left: 26px;
  color: #fff;
}
.mega-vant-i { display: flex; align-items: flex-start; gap: 11px; }
.mega-vant-i svg { width: 22px; height: 22px; flex: none; color: inherit; opacity: .6; margin-top: 1px; }
.mega-vant-i strong {
  display: block;
  color: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.25;
}
.mega-vant-i span {
  display: block;
  /* opacity em vez de cor fixa: acompanha a cor escolhida no painel */
  color: inherit;
  opacity: .55;
  font-size: .76rem;
  line-height: 1.3;
}

/* ---- v3 responsivo ---- */
@media (max-width: 1120px) {
  /* links somem ANTES da busca apertar — numa loja a busca vale mais que
     os links de marketing, que continuam no menu lateral (hambúrguer) */
  .navbar--v3 .nav-links--v3 { display: none; }
  .navbar--v3 .nav3-busca { max-width: 300px; }
  /* as colunas de categoria continuam 4: cair para 3 deixa a 4ª categoria
     órfã numa 2ª linha — foi exatamente a queixa do layout anterior.
     Quem estreita são o banner e as vantagens. */
  .nav3-mega-in { grid-template-columns: 200px 1fr 186px; gap: 22px; }
  .mega-cats { gap: 26px 18px; }
  .mega-vant { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.10); }
  .mega-vant-i { flex: 1 1 200px; }
}
@media (max-width: 820px) {
  /* só o padding VERTICAL: a base define `padding: 0 28px` e o atalho
     `padding: 6px 0` zeraria o recuo lateral (logo e busca colando na borda) */
  .navbar--v3 .nav-inner--v3 {
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .navbar--v3 .nav3-cats { display: none; }       /* categorias vão p/ o menu lateral */
  .navbar--v3 .nav3-busca { order: 3; flex: 1 0 100%; max-width: none; margin-left: 0; }
  .nav3-mega { display: none; }
  /* logo larga (marca + assinatura) tomaria a linha toda e empurraria
     ícones e busca para uma 3ª linha — teto em vw resolve */
  .navbar--v3 .nav-logo--v3 .logo-img { max-height: 36px; max-width: 46vw; }

  /* o style.css esconde .nav-actions no mobile; numa loja o carrinho não pode sumir */
  .navbar--v3 .nav-actions--v3 {
    display: flex !important; align-items: center; gap: 4px; margin-left: auto;
  }
  .navbar--v3 .nav-actions--v3 .btn--nav { display: none; }
}

/* ============================================================
   LANÇAMENTOS — novidades da loja
   Reaproveita inteiramente o cartão e o carrossel da vitrine
   (.vitrine-*): só muda quantos cabem por vez. A seção leva as
   duas classes (.loja-vitrine .lancamentos) justamente para
   herdar o CSS da vitrine e sobrescrever apenas o necessário.
   ============================================================ */
.lancamentos .vitrine-grid .search-card {
  /* 5 visíveis = 4 gaps de 20px descontados */
  flex: 0 0 calc((100% - 80px) / 5);
}

/* Abaixo do desktop largo, 5 cartões ficariam estreitos demais para o
   nome do produto e o bloco de preço; converge para o mesmo escalonamento
   da vitrine. */
@media (max-width: 1200px) {
  .lancamentos .vitrine-grid .search-card { flex-basis: calc((100% - 60px) / 4); }
}
@media (max-width: 1024px) {
  .lancamentos .vitrine-grid .search-card { flex-basis: calc((100% - 40px) / 3); }
}
@media (max-width: 820px) {
  .lancamentos .vitrine-grid .search-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
  .lancamentos .vitrine-grid .search-card { flex-basis: 86%; }
}

/* ============================================================
   CASHBACK DO PLANO — destaque no card
   Fica entre o preco e o botao: o visitante le quanto custa, quanto
   volta e entao decide. Troca junto com a opcao (js/script.js).
   Usa o --gold do tema em vez de um verde novo: o "dinheiro de volta"
   entra como recompensa da marca, nao como um alerta de sistema.
   ============================================================ */
.plan-cashback {
  /* Verde proprio do destaque, e nao o --gold do tema: o cashback e a
     unica coisa do card que devolve dinheiro, e o verde separa isso do
     resto sem competir com o dourado da marca. Os dois tons ficam aqui,
     num lugar so, para afinar sem procurar cor pelo arquivo.
     Tons dessaturados de proposito: verde vivo em fundo escuro puxa para
     "alerta de sistema"; este puxa para menta. */
  --cb-verde: #7fcfa4;
  --cb-verde-forte: #3e9e70;
  display: flex;
  align-items: center;
  gap: 10px;
  /* o .plan-body tem align-items:center, entao os filhos encolhem para o
     tamanho do conteudo. O botao vence isso com width:100% — aqui vale o
     mesmo, senao o destaque fica mais estreito que o botao logo abaixo. */
  width: 100%;
  box-sizing: border-box;
  /* ancora do balao */
  position: relative;
  cursor: help;
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: 12px;
  /* rgba fixo, e nao color-mix com o --gold: aqui o verde e proposital e
     independente da cor que o lojista escolhe no painel. Alfa baixo para
     o fundo do card continuar aparecendo por tras. */
  background: rgba(127, 207, 164, .13);
  border: 1px solid rgba(127, 207, 164, .30);
  font-family: var(--font-body);
  line-height: 1.3;
  /* branco, e NAO var(--ink): o .plan-card e escuro (gradiente #2a2a2a ->
     #141414) e a tinta do tema e escura — com --ink o texto ficava preto
     no preto, invisivel. Os vizinhos do card usam rgba(255,255,255,...)
     pelo mesmo motivo. */
  color: rgba(255,255,255,.92);
  /* o .plan-body centraliza tudo (titulo, descricao, preco). Herdando
     isso, o texto ao lado do icone ficava centralizado no espaco que
     sobrava e abria um vao entre os dois. Aqui o bloco alinha a esquerda,
     encostado no icone. */
  text-align: left;
}
.plan-cashback[hidden] { display: none; }
.plan-cb-ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--cb-verde-forte);
  color: #fff;
}
.plan-cb-ic svg { width: 17px; height: 17px; display: block; }
/* duas linhas de proposito: valor em cima, cadencia embaixo. Antes era
   uma frase unica que quebrava sozinha no meio, e a quebra caia em lugar
   diferente conforme o valor. */
.plan-cb-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-cb-txt b {
  font-size: .95rem;
  font-weight: 700;
  color: var(--cb-verde);
  /* o nowrap fica SO no numero (.plan-cb-val), nao na frase toda: com
     nowrap aqui, um cashback de 4 digitos ("Cashback de R$ 1.250,00")
     estourava a largura do bloco em grade de 3 colunas. Assim "Cashback
     de" quebra para a linha de cima e o valor nunca parte no meio. */
  white-space: normal;
}
.plan-cb-val { white-space: nowrap; }
.plan-cb-quando {
  font-size: .78rem;
  color: rgba(255,255,255,.62);
}
.plan-cb-quando { white-space: nowrap; }

/* entrada: sobe e acende. Reaplicada a cada troca de opcao para o
   destaque chamar atencao de novo sem piscar a tela. */
@keyframes plan-cb-entra {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.plan-cashback.is-novo { animation: plan-cb-entra .28s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .plan-cashback.is-novo { animation: none; }
}

/* balao do cashback: explica que o saldo acumula e onde se usa.
   Aparece no hover e tambem no foco por teclado. O .plan-card tem
   overflow:visible, entao o balao pode passar da borda do card. */
.plan-cb-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.75);
  font-family: var(--font-body);
  font-size: .76rem;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.plan-cb-tip b { color: var(--cb-verde, #7fcfa4); font-weight: 700; }
/* bico do balao */
.plan-cb-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 22px;
  width: 9px;
  height: 9px;
  background: #1a1a1a;
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  transform: translateY(-5px) rotate(45deg);
}
/* :focus junto do :hover cobre o celular. Touch nao tem hover, e
   :focus-visible normalmente nao casa com toque — sem o :focus puro o
   balao simplesmente nunca apareceria para quem entra pelo telefone,
   que e a maioria. O preco por isso e o balao ficar aberto depois de um
   clique de mouse, e ele fecha ao clicar em qualquer outro lugar. */
.plan-cashback:hover .plan-cb-tip,
.plan-cashback:focus .plan-cb-tip,
.plan-cashback:focus-visible .plan-cb-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.plan-cashback:focus-visible {
  outline: 2px solid var(--cb-verde, #7fcfa4);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .plan-cb-tip { transition: none; }
}

/* ============================================================
   "Mais Detalhes" — botao do card + modal (#pbModal)
   Botao, CSS e JS viviam inline no index.asp do tema-cafe e ficaram
   para tras quando o tema novo virou a raiz: o botao ficou sem estilo
   (button cru, colado no texto de cima e na caixa de baixo) e o clique
   chamava uma funcao inexistente. O JS voltou para blocos/_planos.asp
   (Sub PlanosModal); o visual e este.
   ============================================================ */

.plan-benefits-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* o .plan-body espaca os filhos com margin-bottom proprio (nao ha gap
     no flex): .plan-desc ja fecha com 22px, entao margin-top 0 herda
     esse respiro por cima e os 22px de baixo repetem o mesmo ritmo ate
     a caixa de opcoes. Era aqui que faltava tudo. */
  margin: 0 0 22px;
  /* padding vertical so para engordar a area de clique do link, que e
     texto pequeno; nao desloca nada porque o elemento e inline-flex */
  padding: 3px 2px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--gold, #a86b3c);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .16s ease;
}
/* branco, e NAO var(--ink) como no tema-cafe: la o card era claro; aqui
   o .plan-card e escuro e --ink (#1e1e1e) sumiria no fundo */
.plan-benefits-link:hover { color: #fff; }
.plan-benefits-link:focus-visible {
  outline: 2px solid var(--gold, #a86b3c);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- a modal em si ----
   Card CLARO sobre a pagina escura, de proposito: e texto longo de
   leitura (a descricao 2 do plano), e fundo claro e o que se le melhor. */
.pb-modal[hidden] { display: none; }
.pb-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30,20,10,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pb-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-pale, #f8f4ea);
  color: var(--ink, #1e1e1e);
  border: 1px solid var(--line, #d4cab5);
  border-radius: 16px;
  max-width: 580px;
  width: 100%;
  max-height: 86vh;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
}
.pb-modal-head { position: relative; padding: 26px 28px 4px; }
.pb-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  /* --ink-soft: o tema-cafe usava --ink-mute, que NAO existe neste tema
     (cairia no fallback marrom do cafe) */
  color: var(--ink-soft, #3a3a3a);
  cursor: pointer;
  padding: 4px 8px;
}
.pb-modal-close:hover { color: var(--ink, #1e1e1e); }
.pb-modal-title { margin: 0 34px 0 0; font-size: 1.35rem; color: var(--ink, #1e1e1e); }
.pb-modal-body {
  padding: 12px 28px 20px;
  overflow: auto;
  flex: 1;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--ink-soft, #3a3a3a);
}
.pb-modal-body img { max-width: 100%; height: auto; border-radius: 8px; }
/* o reset do tema zera list-style em ul/ol. Aqui dentro o conteudo e
   HTML escrito pelo lojista (descricao 2 do plano), onde lista tem de
   parecer lista — por isso o marcador volta so neste escopo. */
.pb-modal-body ul, .pb-modal-body ol { padding-left: 22px; margin: 0 0 10px; }
.pb-modal-body ul { list-style: disc; }
.pb-modal-body ol { list-style: decimal; }
.pb-modal-body li { margin: 0 0 4px; }
.pb-modal-body p { margin: 0 0 10px; }
.pb-modal-body :last-child { margin-bottom: 0; }
.pb-modal-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line, #d4cab5);
  background: rgba(30,30,30,.03);
  flex-wrap: wrap;
}
.pb-foot-select {
  height: 42px;
  padding: 0 34px 0 12px;
  max-width: 45%;
  border: 1px solid var(--line-strong, #c2b89f);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: .9rem;
  color: var(--ink, #1e1e1e);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233a3a3a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.pb-foot-price {
  flex: 1;
  text-align: center;
  font-family: var(--font-display, 'Bricolage Grotesque', system-ui, sans-serif);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink, #1e1e1e);
  white-space: nowrap;
  min-width: 90px;
}
.pb-foot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 10px;
  background: var(--gold, #a86b3c);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pb-foot-btn:hover { filter: brightness(.95); }
body.pb-open { overflow: hidden; }
@media (max-width: 520px) {
  .pb-foot-select, .pb-foot-price, .pb-foot-btn { flex: 1 1 100%; max-width: none; text-align: center; }
}