/* Atleta Store — vitrine. Mobile primeiro (390px), abre em grade a partir de 768px. */
:root { color-scheme: dark; }
body { background: var(--ink); color: var(--paper); overflow-x: hidden; }
body.travado { overflow: hidden; }
a { color: inherit; }
.titulo-secao { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); text-transform: uppercase; letter-spacing: .01em; line-height: 1; margin: 0; }

/* Barra de aviso */
.aviso { background: var(--paper); color: var(--ink); overflow: hidden; height: 32px; display: flex; align-items: center; }
.aviso__trilho { display: flex; gap: var(--s-6); white-space: nowrap; animation: marquee 28s linear infinite; font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-left: var(--s-4); }
.aviso__trilho span::before { content: "●"; color: var(--g-400); margin-right: var(--s-3); font-size: 8px; vertical-align: middle; }
.aviso:hover .aviso__trilho { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Topo */
.topo { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: var(--s-2) var(--s-3); background: rgba(0,0,0,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topo__logo { grid-column: 2; justify-self: center; }
.sacola-btn { grid-column: 3; }
.topo__logo img { height: 44px; width: auto; mix-blend-mode: lighten; }
.icone-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: inherit; border-radius: var(--r-pill); font-size: 18px; }
.icone-btn:hover { background: var(--ink-3); }
.sacola-btn { position: relative; justify-self: end; }
.sacola-btn__qtd { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--branco); color: var(--preto); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.sacola-btn.pula { animation: pula var(--dur-3) var(--ease-spring); }
@keyframes pula { 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.95); } }

/* Hero */
.hero { position: relative; min-height: min(88svh, 720px); display: flex; align-items: flex-end; padding: var(--s-7) var(--s-4) var(--s-7); overflow: hidden; isolation: isolate; }
.hero__fundo { position: absolute; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: 0; opacity: .07; font-family: var(--font-display); font-size: 42vw; line-height: .82; white-space: nowrap; }
.hero__fundo span { animation: deriva 22s linear infinite alternate; }
.hero__fundo span:nth-child(2) { transform: translateX(-18%); -webkit-text-stroke: 2px var(--paper); color: transparent; animation-direction: alternate-reverse; }
@keyframes deriva { to { transform: translateX(-30%); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 80% 10%, rgba(255,255,255,.10), transparent 60%), linear-gradient(to top, var(--ink) 10%, transparent 60%); }
.hero__script { font-family: var(--font-script); font-size: 56px; line-height: 1; margin: 0 0 -8px; color: var(--branco); transform: rotate(-6deg); transform-origin: left; }
.hero__titulo { font-family: var(--font-display); font-weight: 400; font-size: var(--t-3xl); line-height: .9; text-transform: uppercase; margin: 0; letter-spacing: .005em; }
.hero__titulo em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--branco); }
@supports not (-webkit-text-stroke: 2px white) { .hero__titulo em { color: var(--g-300); } }
.hero__sub { max-width: 34ch; color: var(--soft); margin: var(--s-4) 0 var(--s-5); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__acoes .btn { flex: 1 1 100%; white-space: nowrap; }
.rodape img, .loja-fisica__marca img { mix-blend-mode: lighten; }

/* Cupom */
.cupom { margin: 0 var(--s-4); padding: var(--s-4); border: 1px dashed var(--g-500); border-radius: var(--r-md); display: grid; gap: var(--s-3); background: rgba(255,255,255,.03); }
.cupom p { margin: 0; font-size: var(--t-sm); }
.cupom__codigo { display: flex; border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--branco); }
.cupom__codigo span { flex: 1; padding: var(--s-3) var(--s-4); font-weight: 800; letter-spacing: .08em; }
.cupom__copiar:focus-visible { outline: 2px solid var(--preto); outline-offset: -5px; }
.cupom__copiar { border: 0; background: var(--branco); color: var(--preto); font-weight: 800; text-transform: uppercase; font-size: var(--t-xs); letter-spacing: .06em; padding: 0 var(--s-5); }

/* Benefícios */
.beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin: var(--s-6) 0; border-block: 1px solid var(--line); }
.beneficio { background: var(--ink); padding: var(--s-5) var(--s-3); display: grid; justify-items: center; text-align: center; gap: 2px; }
.beneficio svg { width: 28px; height: 28px; margin-bottom: var(--s-2); color: var(--branco); }
.beneficio strong { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .03em; }
.beneficio span { font-size: var(--t-xs); color: var(--mute); }

/* Vitrines */
.vitrine, .catalogo { padding: var(--s-5) 0; }
.vitrine__cabeca { padding: 0 var(--s-4); margin-bottom: var(--s-4); }
.vitrine__apoio { color: var(--mute); margin: var(--s-2) 0 0; font-size: var(--t-sm); }
.carrossel { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-4); padding: 4px var(--s-4) var(--s-2); scrollbar-width: none; }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel > * { scroll-snap-align: start; }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); padding: 0 var(--s-4); }
.vazio { padding: var(--s-6) var(--s-4); color: var(--mute); text-align: center; }

/* Cartão de produto */
.card { position: relative; display: flex; flex-direction: column; gap: var(--s-2); background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.card__foto { position: relative; aspect-ratio: 4/5; border-radius: var(--r-md); overflow: hidden; background: var(--ink-2); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.card:hover .card__foto img { transform: scale(1.04); }
.selo { position: absolute; top: var(--s-2); left: var(--s-2); padding: 3px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.selo--desc { background: var(--branco); color: var(--preto); }
.selo--novo { background: var(--preto); color: var(--branco); box-shadow: inset 0 0 0 1px var(--branco); }
.selo--esgotado { background: var(--g-800); color: var(--g-300); }
.selo + .selo { top: 34px; }
.card__nome { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card__cor { font-size: var(--t-xs); color: var(--mute); margin-top: -4px; }
.preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s-2); }
.preco__atual { font-family: var(--font-display); font-size: 22px; letter-spacing: .01em; }
.preco__de { color: var(--mute); text-decoration: line-through; font-size: var(--t-xs); }
.preco__parcela { width: 100%; font-size: var(--t-xs); color: var(--mute); }
.card__tams { display: flex; flex-wrap: wrap; gap: 4px; }
.card__tams span { font-size: 10px; font-weight: 700; min-width: 24px; padding: 2px 4px; text-align: center; border: 1px solid var(--line); border-radius: 4px; color: var(--soft); }
.card__tams span.off { color: var(--g-600); text-decoration: line-through; }

/* Filtros */
.filtros { position: sticky; top: 61px; z-index: 20; background: var(--ink); padding: var(--s-3) 0; display: grid; gap: var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.busca { margin: 0 var(--s-4); display: flex; align-items: center; gap: var(--s-2); background: var(--ink-3); border: 1px solid var(--line-ui); border-radius: var(--r-pill); padding: 0 var(--s-4); color: var(--mute); }
.busca:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.busca input { flex: 1; border: 0; background: transparent; height: 44px; color: var(--paper); outline: none; font-size: var(--t-md); }
.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding: 4px var(--s-4); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line-ui); background: transparent; color: var(--soft); font-size: var(--t-sm); font-weight: 600; }
.chip[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Loja em preparo (produção sem banco) */
.em-preparo { margin: var(--s-6) var(--s-4); padding: var(--s-6) var(--s-5); border: 1px solid var(--line-ui); border-radius: var(--r-lg); display: grid; gap: var(--s-4); text-align: center; justify-items: center; }
.em-preparo p { margin: 0; color: var(--soft); max-width: 42ch; }
.em-preparo__acoes { display: grid; gap: var(--s-3); width: 100%; max-width: 420px; }

/* Loja física */
.loja-fisica { margin: var(--s-7) var(--s-4) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: grid; background: var(--ink-2); }
.loja-fisica__marca { background: var(--preto-logo); display: grid; place-items: center; padding: var(--s-6) var(--s-5); }
.loja-fisica__marca img { width: min(320px, 90%); }
.loja-fisica__info { padding: var(--s-5); }
.loja-fisica dl { margin: var(--s-4) 0 var(--s-5); display: grid; gap: var(--s-3); }
.loja-fisica dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.loja-fisica dd { margin: 0; font-weight: 600; }
.loja-fisica__acoes { display: grid; gap: var(--s-3); }

/* Rodapé */
.rodape { border-top: 1px solid var(--line); padding: var(--s-7) var(--s-4) calc(var(--s-7) + env(safe-area-inset-bottom)); display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
.rodape img { height: 56px; width: auto; }
.rodape__slogan { margin: 0; color: var(--mute); font-size: var(--t-sm); }
.rodape__links { display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: center; }
.rodape__links a { font-size: var(--t-sm); font-weight: 600; text-decoration: none; padding: var(--s-2) 0; }
.rodape__fino { color: var(--g-500); font-size: var(--t-xs); margin: 0; }

/* Camadas: sheet, drawer */
.camada { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; animation: esmaecer var(--dur-2) var(--ease-out); }
@keyframes esmaecer { from { opacity: 0; } }
.folha { position: relative; width: 100%; max-height: 92svh; overflow-y: auto; background: var(--ink-2); border-radius: var(--r-lg) var(--r-lg) 0 0; animation: sobe var(--dur-3) var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
@keyframes sobe { from { transform: translateY(100%); } }
.folha__fechar { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; background: rgba(0,0,0,.55); }
.folha__foto { aspect-ratio: 1/1; background: var(--ink); }
.folha__foto img { width: 100%; height: 100%; object-fit: cover; }
.folha__corpo, .checkout, .sucesso { padding: var(--s-5) var(--s-4) var(--s-6); display: grid; gap: var(--s-4); }
.folha__cat { margin: 0; font-size: var(--t-xs); color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
.folha__nome { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; margin: -8px 0 0; }
.folha__desc { margin: 0; color: var(--soft); font-size: var(--t-sm); }
.folha__desc:empty { display: none; }
.folha .preco__atual { font-size: 32px; }
/* Erro sem vermelho: ícone "!" + texto branco em negrito. */
.folha__erro { margin: 0; color: var(--branco); font-weight: 600; font-size: var(--t-sm); min-height: 1em; display: flex; gap: var(--s-2); align-items: flex-start; }
.folha__erro::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--branco); color: var(--preto); font-weight: 800; font-size: 13px; line-height: 20px; text-align: center; }
.folha__erro:empty { display: none; }

.tamanhos { border: 0; padding: 0; margin: 0; }
.tamanhos legend { font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s-2); }
.tamanhos__aviso { font-weight: 600; color: var(--branco); margin-left: var(--s-2); }
.tamanhos__aviso:not(:empty)::before { content: "· "; color: var(--g-400); }
.tamanhos__lista { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tam { min-width: 48px; height: 48px; padding: 0 var(--s-3); border-radius: var(--r-md); border: 1px solid var(--line-ui); background: transparent; color: var(--paper); font-weight: 700; }
.tam[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tam[aria-disabled="true"] { border-color: var(--line); color: var(--g-600); text-decoration: line-through; cursor: not-allowed; }
.qtd { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-sm); font-weight: 700; }
.qtd__ctrl { display: flex; align-items: center; border: 1px solid var(--line-ui); border-radius: var(--r-pill); }
.qtd__ctrl button { width: 44px; height: 44px; border: 0; background: none; font-size: 20px; }
.qtd__ctrl output { min-width: 28px; text-align: center; font-weight: 800; }

.painel-lateral { margin-left: auto; width: min(420px, 100%); height: 100%; background: var(--ink-2); display: flex; flex-direction: column; animation: entra-dir var(--dur-3) var(--ease-out); }
.painel-lateral--esq { margin-left: 0; margin-right: auto; animation-name: entra-esq; }
@keyframes entra-dir { from { transform: translateX(100%); } }
@keyframes entra-esq { from { transform: translateX(-100%); } }
.painel-lateral__topo { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.painel-lateral__topo strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; }
.menu-lista { display: grid; padding: var(--s-2) 0; }
.menu-lista a { padding: var(--s-4); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.menu-lista a span { color: var(--mute); font-weight: 500; }

.sacola__itens { flex: 1; overflow-y: auto; padding: var(--s-2) var(--s-4); }
.item { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); animation: esmaecer var(--dur-2); }
.item img { width: 72px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-sm); }
.item__nome { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.item__meta { font-size: var(--t-xs); color: var(--mute); }
.item__ctrl { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.item__ctrl button { width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-ui); background: none; }
.item__preco { font-weight: 700; font-size: var(--t-sm); text-align: right; }
.item__remover { border: 0; background: none; color: var(--mute); font-size: var(--t-xs); text-decoration: underline; padding: var(--s-2) 0; }
.sacola__vazia { text-align: center; padding: var(--s-8) var(--s-4); color: var(--mute); display: grid; gap: var(--s-4); justify-items: center; }
.sacola__rodape { border-top: 1px solid var(--line); padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); display: grid; gap: var(--s-3); }
.sacola__cupom { display: flex; gap: var(--s-2); }
.sacola__cupom input { flex: 1; min-width: 0; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-ui); background: var(--ink-3); padding: 0 var(--s-4); text-transform: uppercase; }
.sacola__msgcupom { margin: 0; font-size: var(--t-xs); }
.sacola__msgcupom:empty { display: none; }
.sacola__msgcupom.ok { color: var(--branco); font-weight: 600; }
.sacola__msgcupom.ok::before { content: "✓ "; }
.sacola__msgcupom.erro { color: var(--soft); }
.sacola__msgcupom.erro::before { content: "✕ "; color: var(--branco); font-weight: 800; }
.resumo { margin: 0; display: grid; gap: var(--s-1); font-size: var(--t-sm); }
.resumo div { display: flex; justify-content: space-between; }
.resumo dt { color: var(--mute); }
.resumo dd { margin: 0; }
.resumo .total { font-size: var(--t-lg); font-weight: 800; padding-top: var(--s-2); border-top: 1px solid var(--line); margin-top: var(--s-1); }
.resumo .total dt { color: var(--paper); }
.resumo .desc dd { color: var(--branco); font-weight: 700; }

/* Checkout */
.checkout__apoio { margin: -8px 0 0; color: var(--mute); font-size: var(--t-sm); }
.campo { display: grid; gap: var(--s-1); font-size: var(--t-sm); font-weight: 600; }
.campo small { color: var(--mute); font-weight: 400; }
.campo input, .campo textarea { width: 100%; min-height: 48px; border-radius: var(--r-md); border: 1px solid var(--line-ui); background: var(--ink-3); padding: var(--s-3) var(--s-4); font-size: var(--t-md); font-weight: 400; }
/* Inválido: borda branca de 2px + fundo mais claro (o foco é contorno por FORA). */
.campo input[aria-invalid="true"] { border: 2px solid var(--branco); background: var(--g-800); }
.opcoes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.opcoes legend { font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s-2); }
.opcoes label { display: flex; gap: var(--s-3); align-items: center; border: 1px solid var(--line-ui); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); cursor: pointer; }
.opcoes label:has(input:checked) { border-color: var(--branco); background: rgba(255,255,255,.06); }
.opcoes input { accent-color: var(--branco); width: 18px; height: 18px; }
.opcoes span { display: grid; }
.opcoes small { color: var(--mute); font-size: var(--t-xs); }
.opcoes--linha { grid-template-columns: repeat(3, 1fr); }
.opcoes--linha legend { grid-column: 1 / -1; }
.opcoes--linha label { justify-content: center; padding: var(--s-3) var(--s-2); }
.sucesso { text-align: center; justify-items: center; padding-top: var(--s-7); }
.sucesso__selo { width: 72px; height: 72px; border-radius: 50%; background: var(--branco); color: var(--preto); display: grid; place-items: center; font-size: 36px; font-weight: 800; animation: carimbo var(--dur-3) var(--ease-spring); }
@keyframes carimbo { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
.sucesso p { color: var(--soft); margin: 0; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 60; background: var(--paper); color: var(--ink); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-sm); box-shadow: var(--sh-2); pointer-events: none; transition: all var(--dur-2) var(--ease-out); max-width: calc(100% - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Revelar ao rolar */
.revela { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; } }

/* Tablet / desktop */
@media (min-width: 768px) {
  .topo { grid-template-columns: 1fr auto 1fr; padding: var(--s-2) var(--s-6); }
  .topo__logo img { height: 52px; }
  .filtros { top: 69px; }
  .hero { padding: var(--s-8) var(--s-7); align-items: center; }
  .hero__fundo { font-size: 30vw; }
  .hero__script { font-size: 80px; }
  .hero__acoes .btn { flex: 0 0 auto; }
  .cupom { max-width: var(--wrap); margin: 0 auto; grid-template-columns: 1fr auto; align-items: center; padding: var(--s-4) var(--s-5); }
  .beneficios { grid-template-columns: repeat(4, 1fr); }
  .vitrine__cabeca, .grade, .carrossel, .filtros > * { max-width: var(--wrap); margin-inline: auto; }
  .vitrine__cabeca { padding: 0 var(--s-6); }
  .busca { width: calc(100% - 48px); }
  .carrossel { grid-auto-columns: calc((100% - 3 * var(--s-4)) / 4.2); padding: 4px var(--s-6) var(--s-2); gap: var(--s-4); }
  .grade { grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-4); padding: 0 var(--s-6); }
  .loja-fisica { max-width: var(--wrap); margin: var(--s-8) auto; grid-template-columns: 1fr 1fr; }
  .loja-fisica__info { padding: var(--s-7); }
  .camada { align-items: center; justify-content: center; }
  .camada:has(.painel-lateral) { align-items: stretch; justify-content: stretch; }
  .folha { width: min(920px, 94vw); border-radius: var(--r-lg); display: grid; grid-template-columns: 1fr 1fr; max-height: 88vh; animation-name: surge; }
  .folha--form { width: min(560px, 94vw); display: block; }
  .folha__foto { aspect-ratio: auto; min-height: 100%; }
  @keyframes surge { from { transform: translateY(24px) scale(.98); opacity: 0; } }
}
@media (min-width: 1100px) { .grade { grid-template-columns: repeat(4, 1fr); } }