/* =========================================================================
   Sincronia — identidade visual completa e psicologia das cores
   Aplica em todas as páginas a mesma linguagem do banner do topo: fundos
   claros e quentes para respirar, preto só no topo, no rodapé e nos
   destaques de luxo, verde luminoso só onde leva à compra, verde profundo
   para confiança e economia, vinho para promoção e âmbar para escassez.
   ========================================================================= */

/* ------------------------------------------------------ Faixa das páginas
   Clara e baixa, para a cliente chegar logo nas peças; o verde e o itálico
   da marca continuam. A variante escura fica para a comemoração do pedido. */
.faixa-pagina {
  position: relative; overflow: hidden; isolation: isolate; color: var(--tinta);
  background: radial-gradient(640px 280px at 100% 0%, rgba(43, 170, 102, .16), transparent 70%),
              linear-gradient(180deg, #edf6ef 0%, var(--fundo) 100%);
  padding: 22px 0 20px;
}
.faixa-pagina::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(22, 128, 74, .2) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 90% at 90% 10%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 90% 10%, #000 10%, transparent 70%);
  animation: pontos-deriva 24s linear infinite;
}
@keyframes pontos-deriva { to { background-position: 22px 44px; } }
@media (min-width: 900px) {
  .faixa-pagina { margin-top: -84px; padding: 116px 0 40px; }
}
.faixa-pagina h1 {
  color: var(--tinta); font-size: clamp(30px, 5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; margin: 0 0 6px;
}
.faixa-pagina h1 em { font-style: normal; color: var(--verde); }
.faixa-pagina h1 .italico { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; letter-spacing: -.01em; color: var(--verde); }
/* O degradê vai em cada palavra: palavras animadas separadas quebram o recorte do texto no elemento pai. */
.faixa-pagina h1 .italico .palavra, .faixa-pagina h1 .italico:not(:has(.palavra)) {
  background: linear-gradient(100deg, var(--verde), var(--verde-marca) 55%, var(--verde-escuro));
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em;
}
.faixa-pagina p { color: var(--tinta-2); font-size: 18px; max-width: 640px; margin: 0; }
@media (min-width: 900px) { .faixa-pagina p { font-size: 19px; } }
.faixa-pagina .migalhas { color: var(--tinta-3); margin-bottom: 6px; }
.faixa-pagina .migalhas a { color: var(--verde); }
.faixa-pagina .selo-pilula { margin-bottom: 14px; }
.faixa-pagina--compacta { padding-bottom: 18px; }
@media (min-width: 900px) { .faixa-pagina--compacta { padding-bottom: 32px; } }
.faixa-pagina .passos { margin: 16px 0 0; max-width: 560px; }

/* Variante escura: comemoração do pedido, com confete */
.faixa-pagina--escura {
  color: #fff; padding: 36px 0 40px;
  background: radial-gradient(900px 380px at 85% -20%, rgba(63, 209, 127, .2), transparent 65%),
              radial-gradient(600px 300px at 0% 120%, rgba(43, 170, 102, .14), transparent 60%), var(--luxo);
}
@media (min-width: 900px) { .faixa-pagina--escura { padding: 124px 0 56px; } }
.faixa-pagina--escura::before { background-image: radial-gradient(rgba(63, 209, 127, .28) 1px, transparent 1.4px); }
.faixa-pagina--escura h1 { color: #fff; }
.faixa-pagina--escura h1 em, .faixa-pagina--escura h1 .italico { color: var(--verde-brilho); }
.faixa-pagina--escura h1 .italico .palavra, .faixa-pagina--escura h1 .italico:not(:has(.palavra)) {
  background: linear-gradient(100deg, var(--verde-brilho), #9ef0c0 55%, var(--verde-marca));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.faixa-pagina--escura p { color: rgba(255, 255, 255, .75); }
.faixa-pagina--escura strong { color: #fff; }

/* Filtros sobre o fundo creme logo abaixo da faixa */
.faixa-pagina + .container .filtros { margin-top: 24px; }

/* ------------------------------------------------------------- Selos */
.selo--promo { background: var(--urgencia); color: #fff; }
.selo--unica {
  background: var(--luxo); color: var(--verde-brilho); letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(63, 209, 127, .35), 0 4px 12px rgba(0, 0, 0, .2);
}
.selo--ultimas { background: var(--escassez-fundo); color: var(--escassez); display: inline-flex; align-items: center; gap: 6px; }
.selo--ultimas::before, .estoque-aviso:not(:empty)::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--escassez); flex: none;
  box-shadow: 0 0 0 0 rgba(180, 83, 9, .6); animation: pulso-escassez 1.8s infinite;
}
@keyframes pulso-escassez { 70% { box-shadow: 0 0 0 8px rgba(180, 83, 9, 0); } 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); } }
.selo--esgotado { background: rgba(27, 38, 32, .85); }

/* ------------------------------------------------------------ Preços */
.card .preco__atual { color: var(--tinta); }
.card:has(.selo--promo) .preco__atual { color: var(--urgencia); }
.produto__preco:has(.preco__de) .preco__atual { color: var(--urgencia); }
.produto__pix { background: var(--confianca-fundo); color: var(--confianca); border: 1px solid rgba(22, 128, 74, .18); }
.produto__pix strong { color: var(--verde-escuro); font-size: 1.08em; }

/* Escassez real na página da peça */
.estoque-aviso { color: var(--escassez); display: flex; align-items: center; gap: 10px; }

/* Recomendação do provador: confiança */
.recomendacao { background: var(--confianca-fundo); border: 1px solid rgba(22, 128, 74, .18); }
.tamanho-opcao.recomendado::after { background: var(--acao); color: var(--acao-texto); box-shadow: 0 4px 12px -4px rgba(47, 194, 111, .8); }
.tamanho-opcao[aria-pressed="true"] { background: var(--luxo); border-color: var(--luxo); box-shadow: 0 8px 20px -10px rgba(11, 15, 13, .7); }
.cor-opcao[aria-pressed="true"] { border-color: var(--luxo); box-shadow: inset 0 0 0 1px var(--luxo), 0 8px 20px -12px rgba(11, 15, 13, .6); }

/* Garantias em cartão de confiança */
.garantias { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.garantias svg { color: var(--confianca); }
.produto__info h1 { font-weight: 800; letter-spacing: -.025em; }
.produto__categoria {
  display: inline-block; font-family: var(--fonte-titulo); font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verde); text-decoration: none; margin-bottom: 8px;
}

/* ------------------------------------------- Vitrines sobre fundo escuro */
.secao--escura .card__nome { color: #fff; }
.secao--escura .card .preco__atual { color: #fff; }
.secao--escura .card:has(.selo--promo) .preco__atual { color: #ff9fb8; }
.secao--escura .preco__de { color: rgba(255, 255, 255, .5); }
.secao--escura .preco__parcelas { color: rgba(255, 255, 255, .62); }
.secao--escura .card__foto { background: #151c18; box-shadow: 0 0 0 1px var(--borda-escura); }
.secao--escura .sobretitulo { color: var(--verde-brilho); }
.secao--escura .link-seta { color: var(--verde-brilho); }

/* ------------------------------------------------------ Sacola e compra */
.frete-gratis { border-color: rgba(22, 128, 74, .2); background: linear-gradient(180deg, #fff, var(--confianca-fundo)); }
.frete-gratis strong { color: var(--confianca); }
.barra-progresso span { background: linear-gradient(90deg, var(--verde-marca), var(--verde-brilho)); box-shadow: 0 0 12px rgba(63, 209, 127, .6); }
.frete-gratis--conquistado { background: var(--confianca); border-color: var(--confianca); color: #fff; }
.frete-gratis--conquistado strong { color: #fff; }
.frete-gratis--conquistado .barra-progresso { background: rgba(255,255,255,.25); }

.resumo--escuro {
  background: radial-gradient(420px 220px at 100% 0%, rgba(63, 209, 127, .16), transparent 70%), var(--luxo);
  color: rgba(255, 255, 255, .86); border-color: transparent; box-shadow: 0 24px 60px -30px rgba(11, 15, 13, .7);
}
.resumo--escuro h2 { color: #fff; }
.resumo--escuro .resumo__linha--desconto { color: var(--verde-brilho); }
.resumo--escuro .resumo__total { color: #fff; border-color: rgba(255, 255, 255, .14); font-size: 24px; }
.resumo--escuro .resumo__parcelas, .resumo--escuro .campo__ajuda { color: rgba(255, 255, 255, .6); }
.resumo--escuro .remover, .resumo--escuro summary { color: rgba(255, 255, 255, .85); }
.resumo--escuro .campo__erro { color: #ff9f9f; }
.resumo--escuro .produto__pix { background: rgba(63, 209, 127, .1); color: var(--verde-brilho); border-color: rgba(63, 209, 127, .3); }
.resumo--escuro .selos-seguranca { color: rgba(255, 255, 255, .65); }
.resumo--escuro .selos-seguranca svg { color: var(--verde-brilho); }
.resumo--escuro .cupom-aplicado { background: rgba(63, 209, 127, .12); color: #fff; }
.resumo--escuro .itens strong { color: #fff; }
.resumo--escuro .item__foto { background: #151c18; }
.resumo--escuro .cupom-form .campo__entrada { background: rgba(255,255,255,.95); }
.resumo--escuro .botao--preto { background: #fff; color: var(--tinta); }
.resumo--escuro .botao[disabled] { background: rgba(255,255,255,.14); color: rgba(255,255,255,.55); }

/* Etapas da finalização */
.etapa { transition: box-shadow .3s, border-color .3s; }
.etapa:not(.bloqueada):not(.fechada) { border-color: rgba(22, 128, 74, .35); box-shadow: 0 18px 40px -28px rgba(22, 128, 74, .6); }
.etapa__numero { background: var(--luxo); }
.etapa.concluida .etapa__numero { background: var(--confianca); }
.opcao-radio:has(input:checked) { border-color: var(--confianca); background: var(--confianca-fundo); box-shadow: 0 10px 24px -18px rgba(22, 128, 74, .8); }
.opcao-radio__valor.gratis { color: var(--confianca); }
.opcao-radio__selo { background: var(--confianca); }

/* --------------------------------------------- Confirmação do pedido */
.celebracao { text-align: center; }
.celebracao .confirmacao__icone {
  width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(63, 209, 127, .14); color: var(--verde-brilho); box-shadow: 0 0 0 10px rgba(63, 209, 127, .06), 0 0 60px rgba(63, 209, 127, .45);
  animation: surgir-check .8s var(--curva) both;
}
.celebracao .confirmacao__icone svg { width: 48px; height: 48px; stroke-dasharray: 40; stroke-dashoffset: 40; animation: desenhar-check .6s .35s var(--curva) forwards; }
@keyframes surgir-check { from { transform: scale(.4); opacity: 0; } }
@keyframes desenhar-check { to { stroke-dashoffset: 0; } }
.celebracao h1 { margin-inline: auto; }
.celebracao p { margin-inline: auto; }
.celebracao .botao { margin-top: 20px; }
.confete { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .9; animation: cair linear forwards; pointer-events: none; }
@keyframes cair { to { transform: translateY(560px) rotate(720deg); opacity: 0; } }
.linha-tempo li.feito::before { background: var(--confianca); border-color: var(--confianca); box-shadow: 0 0 0 4px var(--confianca-fundo); }

/* ------------------------------------------------------- Aviso da sacola */
.aviso-sacola { background: var(--luxo); color: #fff; border: 1px solid var(--borda-escura); }
.aviso-sacola strong { color: var(--verde-brilho); }
.aviso-sacola .botao--claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }

/* ---------------------------------------------------------------- Rodapé */
.rodape { position: relative; margin-top: 0; }
.rodape::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verde-brilho), transparent); opacity: .6;
}

/* Provador e páginas de ajuda: cartões com a mesma linguagem */
.provador__resultado strong { color: var(--confianca); }
.perguntas details[open] { border-color: rgba(22, 128, 74, .35); box-shadow: 0 14px 30px -24px rgba(22, 128, 74, .7); }
.perguntas summary::after { content: "+"; margin-left: auto; font-size: 26px; color: var(--verde); transition: transform .3s var(--curva); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.chip[aria-current="true"] { background: var(--luxo); border-color: var(--luxo); box-shadow: 0 8px 20px -12px rgba(11, 15, 13, .7); }

@media (prefers-reduced-motion: reduce) {
  .faixa-pagina::before, .selo--ultimas::before, .estoque-aviso::before { animation: none !important; }
  .confete { display: none; }
}

/* Na sacola e na finalização o WhatsApp vira um círculo discreto: ajuda sem cobrir o resumo. */
/* Também na peça e no pedido, onde o botão largo cobria o frete grátis e o valor das peças. */
@media (min-width: 900px) {
  .pagina-sacola .whats-flutuante, .pagina-finalizar .whats-flutuante,
  .pagina-produto .whats-flutuante, .pagina-pedido .whats-flutuante { width: 60px; padding: 0; justify-content: center; }
  .pagina-sacola .whats-flutuante span, .pagina-finalizar .whats-flutuante span,
  .pagina-produto .whats-flutuante span, .pagina-pedido .whats-flutuante span { display: none; }
  dialog.modal--convite { width: min(94vw, 760px); }
}

/* ------------------------------------------- Categoria carro-chefe */
.nav-destaque { display: inline-flex !important; align-items: center; gap: 6px; color: #fff !important; }
.nav-destaque__estrela { color: var(--verde-brilho); font-size: 13px; animation: brilhar-estrela 3s ease-in-out infinite; }
@keyframes brilhar-estrela { 50% { opacity: .45; transform: scale(.8) rotate(20deg); } }
.gaveta__selo {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--luxo); color: var(--verde-brilho); vertical-align: 2px;
}
.categoria-card--destaque { grid-column: span 2; min-height: 220px; }
.categoria-card--destaque span { font-size: 28px; }
@media (min-width: 900px) {
  /* Cinco colunas: o carro-chefe ocupa duas, em qualquer posição que a loja escolher. */
  .categorias:has(.categoria-card--destaque) { grid-template-columns: repeat(5, 1fr); }
  .categorias:has(.categoria-card--destaque) .categoria-card { min-height: 320px; }
  .categoria-card--destaque { grid-column: span 2; }
  .categoria-card--destaque span { font-size: 34px; }
}
.categoria-card__selo {
  position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(11, 15, 13, .78); color: var(--verde-brilho); border: 1px solid rgba(63, 209, 127, .4); backdrop-filter: blur(6px);
}

/* Campo do cupom no resumo escuro: texto escuro sobre fundo claro (antes ficava branco no branco). */
.resumo--escuro .cupom-form .campo__entrada,
.resumo--escuro input.campo__entrada { color: var(--tinta); background: #fff; caret-color: var(--verde); }
.resumo--escuro .cupom-form .campo__entrada::placeholder { color: var(--tinta-3); opacity: 1; }
.resumo--escuro .cupom-form .botao--preto { background: var(--acao); color: var(--acao-texto); border-color: var(--acao); }