/* Visual oficial do site: fundo preto, destaques em branco, cartões em destaque e os balões da logo
   (js/baloes-logo.js). Todas as cores ficam nas variáveis abaixo; a versão de fundo branco
   (index.html?fundo=branco) só troca esses valores — ver "Versão de fundo branco" no fim do arquivo. */

.tema {
  --destaque: #FFFFFF;
  --contraste: #000000;          /* texto sobre o destaque */
  --texto-forte: #FFFFFF;        /* títulos dentro dos cartões */
  --superficie: #121212;
  --superficie-2: #1b1b1b;
  --superficie-hover: #2a2a2a;
  --linha: #2a2a2a;
  --linha-forte: #3a3a3a;
  --claro: #F4F4F4;              /* texto normal */
  --suave: #B4B4B4;              /* texto secundário */
  --sombra-clara: rgba(255, 255, 255, .16);
  --borda-acesa: rgba(255, 255, 255, .55);
  --reflexo: rgba(255, 255, 255, .12);
  --vidro: rgba(0, 0, 0, .84);   /* menu e barra de filtros fixos */
  --hover-nav: rgba(255, 255, 255, .08);
  --chip-texto: #d6d6d6;
  --sombra-logo: drop-shadow(0 10px 28px rgba(0, 0, 0, .7));
  --cor-fio: rgba(235, 235, 235, .7);   /* fios dos balões (lido pelo js/baloes-logo.js) */
  --rodape-painel: #0a0a0a;
  --sublinhado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 70 18, 106 9 S 168 5, 197 12' fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --icone-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");

  color: var(--claro);
  color-scheme: dark;
}
.tema :focus-visible { outline-color: var(--destaque); }
.tema .etiqueta { color: var(--destaque); }
.tema .secao-cabeca p:not(.etiqueta) { color: var(--suave); }
.tema .marca-texto { background: none; color: var(--destaque); padding: 0; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .14em; }

/* Sublinhado desenhado na cor do destaque */
.tema .sublinhado::after { background-image: var(--sublinhado); }

/* ---------- Fundo com profundidade (opção D, escolhida em 05/10) ----------
   Luz cinza suave no alto à direita e luzes discretas nas seções, alternando o lado.
   Os balões não iluminam o fundo (--brilho-baloes: 0; ver js/baloes-logo.js). */
.tema {
  --luz: rgba(255, 255, 255, .045);
  --fundo: #000 radial-gradient(70% 55% at 80% 18%, #1f1f1f 0%, #0a0a0a 55%, #000 100%) no-repeat;
  --linha-topo: rgba(255, 255, 255, .3);
  background: var(--fundo);
  background-size: 100% 1100px;
}
.tema .baloes-logo { --brilho-baloes: 0; }
.tema .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linha-topo), transparent);
}
.tema .secao, .tema .final { position: relative; isolation: isolate; }
.tema .secao::before, .tema .final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--brilho, none);
}
.tema #como-funciona { --brilho: radial-gradient(560px 420px at 8% 65%, var(--luz), transparent 70%); }
.tema #catalogo {
  --brilho:
    radial-gradient(640px 500px at 92% 240px, var(--luz), transparent 70%),
    radial-gradient(600px 520px at 4% 2400px, var(--luz), transparent 70%),
    radial-gradient(600px 520px at 96% 4800px, var(--luz), transparent 70%),
    radial-gradient(600px 520px at 4% 7200px, var(--luz), transparent 70%),
    radial-gradient(600px 520px at 96% 9600px, var(--luz), transparent 70%);
}
.tema #vitrine { --brilho: radial-gradient(620px 460px at 6% 55%, var(--luz), transparent 70%); }
.tema #porque { --brilho: radial-gradient(600px 460px at 94% 50%, var(--luz), transparent 70%); }
.tema #duvidas { --brilho: radial-gradient(560px 460px at 6% 40%, var(--luz), transparent 70%); }
.tema .final { --brilho: radial-gradient(620px 360px at 50% 22%, var(--luz), transparent 70%); }

/* ---------- Botões ---------- */
.tema .botao { border-color: transparent; box-shadow: 4px 4px 0 var(--sombra-clara); }
.tema .botao:hover { box-shadow: 6px 6px 0 var(--sombra-clara); }
.tema .botao:active { box-shadow: 1px 1px 0 var(--sombra-clara); }
.tema .botao--primario { --cor: var(--destaque); --texto: var(--contraste); }
.tema .botao--primario::before { color: var(--destaque); }
.tema .botao--secundario { --cor: transparent; --texto: var(--destaque); border-color: var(--destaque); }
.tema .botao--whats { --texto: #000; } /* verde do WhatsApp com texto preto nas duas versões */

/* Seções que na V1 são escuras: na V2 seguem o fundo preto */
.tema .secao--tinta { background: transparent; color: var(--claro); }
.tema .secao--tinta .etiqueta { color: var(--destaque); }
.tema .secao--tinta .marca-texto { background: none; color: var(--destaque); }
.tema .secao--tinta .botao { border-color: transparent; box-shadow: 4px 4px 0 var(--sombra-clara); }
.tema .secao--tinta .botao--secundario { border-color: var(--destaque); }

/* ---------- Header ---------- */
.tema .topo--rolado { background: var(--vidro); box-shadow: 0 1px 0 var(--linha); }
.tema .topo__nav a:hover { background: var(--hover-nav); }
.tema .topo__nav a.ativo { background: var(--destaque); color: var(--contraste); }

/* ---------- Hero ---------- */
/* logo sem a bolinha preta (tools/recortar_logo.py): os balões animados passam por trás sem aparecer o círculo */
.tema .hero__selo { width: clamp(220px, 26vw, 340px); filter: var(--sombra-logo); }
.tema .hero__titulo { font-size: clamp(2rem, 9vw, 4.9rem); }
.tema .hero__lead { color: var(--suave); }
/* Coluna direita vazia: é onde os balões formam o buquê */
.tema .hero__buque { align-self: stretch; min-height: clamp(380px, 52vh, 560px); }
/* atrás do texto (z 2), na frente do fundo: parece um vídeo ocupando a tela */
.tema .baloes-logo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* No celular o buquê se forma ao lado da logo */
@media (max-width: 860px) {
  .tema .hero__selo { width: 170px; }
  .tema .hero__buque { position: absolute; top: 0; right: 0; width: 50%; min-height: 0; height: 160px; }
}

/* ---------- Cartões em destaque (mesmo padrão em toda a V2) ----------
   Um pouco mais claros que o fundo, borda visível, sombra e uma linha de luz no alto. */
.tema {
  --cartao: linear-gradient(180deg, #1d1d1d 0%, #121212 100%);
  --borda-cartao: #343434;
  --sombra-cartao: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 34px rgba(0, 0, 0, .6);
  --sombra-cartao-alta: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 44px rgba(0, 0, 0, .7), 0 0 32px rgba(255, 255, 255, .07);
}

/* ---------- Como funciona ---------- */
.tema #como-funciona { margin-top: 0; padding-top: clamp(24px, 4vw, 48px); }
.tema .passo h3 { color: var(--texto-forte); }
.tema .passo p { color: #d6d6d6; }

/* ---------- Cartões coloridos (Como funciona e Por que) ----------
   Opção B aprovada pelo Anderson: fundo escuro com borda, brilho e número/ícone na cor dos balões da logo
   (vermelho, amarelo, azul e o ciano de "LOCAÇÃO"). Um cartão de cada vez acende, da esquerda para a direita,
   com um reflexo de luz passando. */
.tema .passo,
.tema .motivo,
.tema .motivo:nth-child(n) {
  --c: #E8261B; --c-texto: #FFFFFF;
  --atraso: 0s;
  --giro: 0deg;
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #161616), #121212 70%);
  border: 2px solid var(--c);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 35%, transparent), 0 14px 34px rgba(0, 0, 0, .6);
  animation: cartao-vez 8s var(--atraso) ease-in-out infinite;
}
.tema .passo:nth-child(2), .tema .motivo:nth-child(2) { --c: #FDBA04; --c-texto: #1A1300; --atraso: 2s; }
.tema .passo:nth-child(3), .tema .motivo:nth-child(3) { --c: #01A0E1; --c-texto: #FFFFFF; --atraso: 4s; }
.tema .motivo:nth-child(4) { --c: #44E4F6; --c-texto: #00323A; --atraso: 6s; }
/* reflexo de luz passando (no ::before: o ::after dos passos é a setinha) */
.tema .passo::before,
.tema .motivo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, var(--reflexo) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: cartao-reflexo 8s var(--atraso) ease-in-out infinite;
}
@keyframes cartao-vez {
  0%, 40%, 100% { transform: none; box-shadow: 0 0 22px color-mix(in srgb, var(--c) 35%, transparent), 0 14px 34px rgba(0, 0, 0, .6); }
  13%, 27% { transform: translateY(-6px); box-shadow: 0 0 40px color-mix(in srgb, var(--c) 70%, transparent), 0 20px 44px rgba(0, 0, 0, .7); }
}
@keyframes cartao-reflexo {
  0%, 8% { background-position: 100% 0; }
  32%, 100% { background-position: 0 0; }
}
.tema .passo .passo__num,
.tema .passo:nth-child(n) .passo__num {
  position: relative;
  background: var(--c);
  color: var(--c-texto);
  border: 2px solid var(--c);
  animation: cartao-num 8s var(--atraso) ease-in-out infinite;
}
@keyframes cartao-num {
  0%, 40%, 100% { background: var(--c); color: var(--c-texto); }
  13%, 27% { background: #FFFFFF; color: #111111; }
}

/* ---------- Catálogo ---------- */
.tema .catalogo__barra { background: var(--vidro); }
.tema .catalogo__contagem, .tema .catalogo__carregando, .tema .grupo__desc { color: var(--suave); }
.tema .grupo__qtd { background: var(--destaque); color: var(--contraste); border-color: var(--destaque); }
.tema .chip { background: transparent; border-color: var(--linha-forte); color: var(--chip-texto); }
.tema .chip[aria-pressed="true"] { background: var(--destaque); border-color: var(--destaque); color: var(--contraste); }
/* no computador os filtros quebram linha: todas as categorias (inclusive Toalhas) ficam à vista */
@media (min-width: 861px) {
  /* filtros e busca no mesmo fluxo: a busca ocupa o resto da última linha (2 linhas no total) */
  .tema .catalogo__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .tema .chips { display: contents; }
  .tema .chip { padding: 5px 13px; font-size: .88rem; }
  .tema .busca { flex: 1 1 240px; }
  .tema .busca input { padding-block: 7px; }
}
.tema .busca input {
  border: 2px solid var(--linha-forte);
  color: var(--claro);
  background: var(--superficie) var(--icone-busca) 16px 50% / 20px no-repeat;
}
.tema .busca input:focus { border-color: var(--destaque); }

/* Cards de produto brancos, como cartões de loja: a foto (fundo branco) e o card viram uma peça só
   e saltam do fundo preto. */
.tema {
  --sombra-produto: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .65);
  --sombra-produto-alta: 0 0 0 3px rgba(255, 255, 255, .4), 0 26px 54px rgba(0, 0, 0, .75);
}
.tema .card { background: #fff; color: #111; border: 0; box-shadow: var(--sombra-produto); --giro: 0deg; overflow: hidden; }
.tema .card:hover { box-shadow: var(--sombra-produto-alta); translate: 0 -6px; }
.tema .card__foto, .tema .detalhe__foto, .tema .kit__abrir img { background: #fff; }
.tema .card__corpo { border-top: 1px solid #ececec; }
.tema .card__nome { color: #111; }
.tema .card__selo { background: #111; color: #fff; border-color: #111; }
.tema .preco, .tema .detalhe__preco, .tema .painel__total strong, .tema .item__preco { color: var(--destaque); }
.tema .card .preco { color: #000; font-size: 1.4rem; }
.tema .card .preco--consulta, .tema .kit .preco--consulta { color: #666; font-size: .9rem; }
.tema .card .botao-mais { background: #111; border-color: #111; color: #fff; }
.tema .card .botao-mais:hover { background: #333; border-color: #333; }
.tema .card .botao-mais.adicionado { background: #25D366; border-color: #25D366; color: #000; }
.tema .foto-vazia { background: #f2f2f2; }

/* Toalhas: seletor de cor — foto grande da escolhida, bolinhas de cor, quantidade e adicionar */
.toalhas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  color: #111;
  box-shadow: var(--sombra-produto);
}
.toalhas__vitrine { display: grid; place-items: center; min-height: 360px; padding: 24px; background: #fff; }
.toalhas__vitrine img { width: 100%; max-height: 420px; object-fit: contain; }
.toalhas__vitrine.trocou img { animation: toalha-troca .45s var(--ease-suave); }
@keyframes toalha-troca { from { opacity: 0; transform: scale(.96); } }
.toalhas__info { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 36px); border-left: 1px solid #ececec; }
.toalhas__rotulo { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #777; }
.toalhas__nome { font-size: clamp(1.8rem, 3vw, 2.4rem); color: #111; }
.toalhas__detalhe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: #555; }
.toalhas__detalhe strong { font-family: var(--fonte-titulo); font-size: 1.35rem; color: #000; }
.toalhas__grupo-nome { display: block; margin-bottom: 8px; font-size: .85rem; font-weight: 800; color: #444; }
.toalhas__cores { display: flex; flex-wrap: wrap; gap: 10px; }
.toalha-cor {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .15);
  background: var(--cor);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .15);
  transition: transform .2s var(--ease-quique);
}
.toalha-cor:hover { transform: scale(1.12); }
.toalha-cor[aria-pressed="true"] { outline: 3px solid #111; outline-offset: 3px; }
.toalha-cor--xadrez {
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--cor) 75%, transparent) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, var(--cor) 0 6px, #fff 6px 12px);
}
.toalhas__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.tema .toalhas .qtd { background: #f2f2f2; border: 2px solid #ddd; color: #111; }
.tema .toalhas .qtd button:hover { background: #e4e4e4; }
.tema .toalhas .botao--primario { --cor: #111; --texto: #fff; box-shadow: 4px 4px 0 rgba(0, 0, 0, .15); }
.tema .toalhas .botao--primario::before { color: #111; }
@media (max-width: 760px) {
  .toalhas { grid-template-columns: 1fr; }
  .toalhas__vitrine { min-height: 0; padding: 16px; }
  .toalhas__vitrine img { max-height: 260px; }
  .toalhas__info { border-left: 0; border-top: 1px solid #ececec; }
}

/* ---------- Vitrine Pegue e Monte ---------- */
.tema .vitrine { background: transparent; border-block: 1px solid var(--linha); }
.tema .seta { background: transparent; border: 2px solid var(--destaque); color: var(--destaque); box-shadow: none; }
.tema .kit, .tema .kit:nth-child(n) { rotate: none; }
.tema .kit__abrir { background: #fff; color: #111; border: 0; box-shadow: var(--sombra-produto); transition: box-shadow .2s, translate .25s var(--ease-quique); }
.tema .kit__abrir:hover { box-shadow: var(--sombra-produto-alta); translate: 0 -6px; }
.tema .kit__legenda { border-top: 1px solid #ececec; color: #111; }
.tema .kit__legenda .preco { color: #000; font-size: 1.25rem; }

/* ---------- Por que (cores e animação nos "Cartões coloridos", acima) ---------- */
.tema .motivo h3 { color: var(--texto-forte); }
.tema .motivo p { color: #d6d6d6; }
.tema .motivo__icone {
  position: relative;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  padding: 12px;
  border: 2px solid var(--c);
  border-radius: 50%;
  background: var(--c);
  stroke: var(--c-texto);
  animation: cartao-icone 8s var(--atraso) ease-in-out infinite;
}
@keyframes cartao-icone {
  0%, 40%, 100% { background: var(--c); stroke: var(--c-texto); }
  13%, 27% { background: #FFFFFF; stroke: #111111; }
}
.tema .porque__feedback a { color: var(--destaque); }

/* ---------- Balõezinhos de fundo (js/baloes-logo.js) ----------
   Camada fixa atrás do conteúdo, poucos balões subindo devagar pelos cantos. Só transform e opacity
   (animação leve, feita pela placa de vídeo). Somem enquanto o topo está na tela. */
.tema main { position: relative; z-index: 1; }
.baloes-fundo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity .8s; }
.baloes-fundo.escondido { opacity: 0; }
.baloes-fundo.escondido .balao-fundo,
.baloes-fundo.escondido .balao-fundo > span { animation-play-state: paused; }
.balao-fundo {
  position: absolute;
  left: min(var(--x), calc(100% - var(--tam) - 8px)); /* nunca cortado pela borda direita */
  top: 100%;
  width: var(--tam);
  aspect-ratio: 1 / 2;
  animation: fundo-sobe var(--dur) linear var(--atraso) infinite;
  will-change: transform;
}
.balao-fundo > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--img) center top / contain no-repeat;
  opacity: .55;
  animation: balao-ginga 3.6s ease-in-out infinite alternate;
}
@keyframes fundo-sobe {
  0% { transform: translateY(0); opacity: 0; }
  8%, 90% { opacity: 1; }
  100% { transform: translateY(calc(-100vh - 120%)); opacity: 0; }
}
@keyframes balao-ginga {
  from { transform: translateX(-6px) rotate(-7deg); }
  to { transform: translateX(6px) rotate(7deg); }
}

/* ---------- Dúvidas: cada pergunta vira um cartão ---------- */
.tema .perguntas { display: grid; gap: 12px; }
.tema .pergunta {
  padding: 0 20px;
  border: 1px solid var(--borda-cartao);
  border-radius: 16px;
  background: var(--cartao);
  box-shadow: var(--sombra-cartao);
  transition: border-color .2s, box-shadow .2s;
}
.tema .pergunta:hover { border-color: #5a5a5a; }
.tema .pergunta[open] { border-color: var(--borda-acesa); box-shadow: var(--sombra-cartao-alta); }
.tema .pergunta summary { padding: 18px 0; color: var(--texto-forte); }
.tema .pergunta summary::after { border: 2px solid var(--destaque); color: var(--destaque); }
.tema .pergunta[open] summary::after { background: var(--destaque); color: var(--contraste); }
.tema .pergunta p { color: var(--suave); }

/* ---------- Depoimentos (prints do WhatsApp passando devagar) ---------- */
.tema {
  --print-fundo: #0b141a;
  --print-balao: #202c33;
  --print-texto: #e9edef;
  --print-avatar: #2a3942;
  --print-nome: #FFFFFF;
}
.tema #depoimentos { --brilho: radial-gradient(620px 420px at 50% 60%, var(--luz), transparent 70%); padding-bottom: clamp(48px, 7vw, 88px); }
.tema .secao-cabeca .depoimentos__aviso { font-size: .9rem; font-style: italic; }
.depoimentos__faixa {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
}
.depoimentos__trilho { display: flex; width: max-content; animation: rolar 70s linear infinite; }
.depoimentos__faixa:hover .depoimentos__trilho { animation-play-state: paused; }
.depoimentos__lista { display: flex; gap: 20px; padding: 10px 10px 24px; margin: 0; list-style: none; }
.print {
  flex: none;
  width: 300px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--borda-cartao);
  background: var(--print-fundo);
  box-shadow: var(--sombra-cartao);
}
.print__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.print__avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--print-avatar); color: var(--print-nome); font-weight: 800; }
.print__quem { display: grid; line-height: 1.2; }
.print__quem strong { color: var(--print-nome); font-size: .95rem; }
.print__quem small { color: var(--suave); font-size: .78rem; }
.print__estrelas { margin-left: auto; color: var(--print-nome); letter-spacing: 1px; font-size: .85rem; }
.print__balao {
  position: relative;
  margin: 0;
  padding: 10px 12px 22px;
  border-radius: 0 12px 12px 12px;
  background: var(--print-balao);
  color: var(--print-texto);
  font-size: .95rem;
  line-height: 1.45;
}
.print__hora { position: absolute; right: 10px; bottom: 5px; font-size: .7rem; color: #8696a0; }
@media (max-width: 560px) {
  .print { width: 260px; }
}

/* ---------- Final + rodapé ---------- */
.tema .final > .container > p { color: var(--suave); }

/* ---------- Diálogos ---------- */
.tema dialog::backdrop { background: rgba(0, 0, 0, .7); }
.tema .detalhe__caixa { background: var(--superficie); color: var(--claro); border: 1px solid var(--linha-forte); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
.tema .detalhe__resumo, .tema .detalhe__credito { color: var(--suave); }
.tema .detalhe__inclui li::before { background: var(--destaque); border: 0; }
.tema .fechar { background: var(--superficie-2); border: 2px solid var(--linha-forte); color: var(--claro); }
.tema .qtd { background: var(--superficie-2); border: 2px solid var(--linha-forte); }
.tema .qtd button:hover { background: var(--superficie-hover); }

.tema .painel__caixa { background: var(--superficie); color: var(--claro); border-left: 1px solid var(--linha-forte); }
.tema .painel__cabeca { border-bottom-color: var(--linha-forte); }
.tema .painel__vazio, .tema .painel__limpar, .tema .item__cat, .tema .item__remover { color: var(--suave); }
.tema .painel__rodape { background: var(--rodape-painel); border-top-color: var(--linha-forte); }
.tema .campo input { background: var(--superficie-2); border-color: var(--linha-forte); color: var(--claro); }
.tema .campo input:focus { border-color: var(--destaque); }
.tema .receber input { accent-color: var(--destaque); }
.tema .painel__entrega, .tema .painel__contas { color: var(--suave); }
.tema .painel__entrega strong { color: var(--claro); }
.tema .item { background: var(--superficie-2); border: 1px solid var(--linha); }
.tema .item__foto { background: #fff; }

/* ---------- Sacolinha ---------- */
.tema .sacolinha { background: var(--destaque); color: var(--contraste); border-color: var(--contraste); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.tema .sacolinha__contador { background: var(--vermelho); color: #fff; border-color: #000; }
.tema .sacolinha__dica { background: var(--destaque); color: var(--contraste); }

@media (max-width: 700px) {
  .tema .painel__caixa { border-left: 0; border-top: 1px solid var(--linha-forte); }
  .tema .detalhe__caixa { border-bottom: 0; }
}

/* ---------- Celular compacto (aprovado em 05/10/2026) ----------
   Tamanhos mais compactos no celular, padrão de apps e sites de loja.
   Texto 16 px (o mínimo para o iPhone não dar zoom nos campos), títulos de seção ~28 px,
   cartões com menos respiro e ícones/números de 44 px (tamanho mínimo confortável para o dedo). */
@media (max-width: 560px) {
  body { font-size: 1rem; line-height: 1.55; }
  h2 { font-size: 1.85rem; line-height: 1.05; }
  .secao { padding-block: 56px; }
  .secao-cabeca { margin-bottom: 26px; }
  .secao-cabeca p:not(.etiqueta) { font-size: 1rem; margin-top: 10px; }
  .hero__titulo { font-size: 2.6rem; }
  .hero__lead { font-size: 1rem; margin-top: 14px; }
  .hero__selo { width: 140px !important; }
  .passos, .motivos { gap: 14px !important; }
  .passo, .motivo { padding: 18px 18px 20px !important; }
  .passo__num { width: 44px !important; height: 44px !important; font-size: 1.35rem !important; margin-bottom: 12px !important; }
  .motivo__icone { width: 44px !important; height: 44px !important; padding: 10px !important; margin-bottom: 10px; }
  .passo h3, .motivo h3 { font-size: 1.22rem !important; margin-bottom: 4px !important; }
  .passo p, .motivo p { font-size: .95rem !important; line-height: 1.5; }
  .grupo { margin-top: 36px; }
  .grupo__titulo { font-size: 1.45rem; }
  .card__nome { font-size: .95rem !important; }
  .card__corpo { gap: 6px; }
  .botao { font-size: 1rem; }
  .final h2 { font-size: 2.2rem; }
  .pergunta summary { font-size: 1rem; }
}