/* Calibre Relojoaria — tokens do guia de identidade visual v1 */
:root {
  --surface: #FFFFFF;
  --surface-raised: #F8F4F3;
  --ink: #1A1012;
  --ink-muted: #6B5A5D;
  --line: #EADFDD;
  --brand: #651424;
  --on-brand: #FFFFFF;
  --accent: #FF5825;
  --accent-ink: #C43A0E;
  --ok: #2F6B4F;
  --ok-bg: #E4EFE7;
  --erro: #9B2C2C;
  --erro-bg: #F7E4E1;
  --alerta-bg: #FFF0E9;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: Inter, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --radius-sm: 2px;
  --toque: 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #140A0C; --surface-raised: #1F1215; --ink: #F7EEEE; --ink-muted: #B3A2A4;
    --line: #3B2428; --brand: #8A1F33; --accent: #FF6B3D; --accent-ink: #FF8A63;
    --ok: #7FC4A0; --ok-bg: #1D2D24; --erro: #E58A8A; --erro-bg: #3A2120; --alerta-bg: #2E281C;
  }
}
:root[data-theme="dark"] {
  --surface: #140A0C; --surface-raised: #1F1215; --ink: #F7EEEE; --ink-muted: #B3A2A4;
  --line: #3B2428; --brand: #8A1F33; --accent: #FF6B3D; --accent-ink: #FF8A63;
  --ok: #7FC4A0; --ok-bg: #1D2D24; --erro: #E58A8A; --erro-bg: #3A2120; --alerta-bg: #2E281C;
}


/* Faixas e metais: as cores das áreas de destaque (topo, slides, coleções, rodapé). Trocar a paleta = mudar só estes tokens e os de cima. */
:root {
  --palco-1: #651424; --palco-2: #2A070E; --palco-3: #F6EEEC;
  --on-palco: #FFFFFF; --on-palco-2: #EBCFD2;
  --metal: #FF5825; --metal-claro: #FF8F66; --metal-escuro: #C43A0E;
}

/* Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--ink-muted); }
.pequeno { font-size: 13px; line-height: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; }
h1 { font-size: 44px; line-height: 48px; }
h2 { font-size: 36px; line-height: 40px; }
h3 { font-size: 24px; line-height: 30px; font-weight: 600; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 8px; }
.rotulo { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.filete { width: 48px; height: 2px; background: var(--accent); margin: 20px 0; }

/* Botões (Fitts: 48 px; Semelhança: um estilo por função) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--toque); padding: 0 22px; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 15px; border: 1px solid var(--brand); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; text-align: center; transition: transform .15s ease; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
.btn.sec { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.claro { background: var(--on-palco); color: var(--palco-1); border-color: var(--on-palco); }
.btn.largo { width: 100%; }
.btn.perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.link { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.carregando::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Faixa de topo e cabeçalho */
.aviso-topo { background: var(--palco-2); color: var(--on-palco-2); font-size: 12px; letter-spacing: .06em; text-align: center; padding: 8px 16px; }
.topo { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.topo-in { display: flex; align-items: center; gap: 20px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: var(--toque); }
.marca svg { flex: none; }
.marca b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 22px; letter-spacing: .14em; }
.marca small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .32em; color: var(--ink-muted); }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { display: inline-flex; align-items: center; min-height: var(--toque); padding: 0 12px; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ink); }
.btn-icone { display: inline-flex; align-items: center; gap: 8px; min-height: var(--toque); min-width: var(--toque); justify-content: center; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; }
.btn-icone:hover { border-color: var(--ink-muted); }
.btn-menu { display: none; }
.contador { background: var(--brand); color: var(--on-brand); font-size: 12px; min-width: 22px; height: 22px; line-height: 22px; border-radius: 999px; text-align: center; padding: 0 6px; }
.contador.pulsa { animation: pulsa .3s ease; }
@keyframes pulsa { 50% { transform: scale(1.25); } }
.menu-movel { display: none; border-top: 1px solid var(--line); padding: 8px 16px 16px; }
.menu-movel a { display: flex; align-items: center; min-height: var(--toque); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.topo-checkout .seguro { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }

/* Faixa de pedido pendente (Zeigarnik) */
.faixa-pendente { background: var(--alerta-bg); border-bottom: 1px solid var(--line); font-size: 14px; }
.faixa-pendente .wrap { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 48px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }

/* Hero */
.hero { background: var(--palco-1); color: var(--on-palco); }
.hero-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(46px, 7.5vw, 84px); line-height: .98; letter-spacing: .01em; }
.hero .eyebrow { color: var(--metal-claro); }
.hero-txt { color: var(--on-palco-2); max-width: 460px; margin: 16px 0 0; font-size: 17px; line-height: 26px; }
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-acoes a.link { color: var(--on-palco-2); }
.hero-rel { justify-self: center; width: min(280px, 70vw); text-decoration: none; text-align: center; color: var(--on-palco-2); }
.hero-rel svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); transition: transform .3s ease; }
.hero-rel:hover svg { transform: rotate(-3deg) scale(1.02); }
.hero-rel span { font-size: 13px; letter-spacing: .08em; }

/* Benefícios */
.beneficios { border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.beneficios-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.beneficio { display: flex; gap: 12px; align-items: flex-start; padding: 18px 16px; border-left: 1px solid var(--line); }
.beneficio:first-child { border-left: 0; padding-left: 0; }
.beneficio svg { flex: none; color: var(--accent-ink); margin-top: 2px; }
.beneficio b { display: block; font-size: 14px; line-height: 20px; }
.beneficio span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Seções */
.secao { padding-top: 64px; }
.aviso-demo { border: 1px solid var(--accent); background: var(--alerta-bg); padding: 12px 16px; font-size: 14px; margin-bottom: 24px; }
.cab-secao { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.controles { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 40px; padding: 0 16px; background: none; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink-muted); }
.chip:hover { border-color: var(--ink-muted); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip .n { font-weight: 400; opacity: .7; margin-left: 4px; }
.seletor { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-muted); }
.seletor select { min-height: 40px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 10px; }

/* Cartão de produto (o cartão inteiro é o link: Fitts) */
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { position: relative; background: var(--surface-raised); border: 1px solid var(--line); display: flex; flex-direction: column; }
.card:hover { border-color: var(--ink-muted); }
.card-img { display: block; background: var(--surface); border-bottom: 1px solid var(--line); padding: 20px 0 12px; }
.card-img svg { width: 120px; height: 156px; display: block; margin: 0 auto; transition: transform .25s ease; }
.card:hover .card-img svg { transform: scale(1.04); }
.card-corpo { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin: 4px 0 10px; }
.card h3 a { text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card .btn { position: relative; z-index: 2; margin-top: 16px; }
.selo-estoque { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--surface-raised); border: 1px solid var(--line); padding: 3px 8px; }
.selo-estoque.esgotado { color: var(--ink-muted); }
.precos { display: flex; flex-direction: column; gap: 2px; }
.preco { font-size: 20px; line-height: 24px; font-weight: 600; margin: 0; }
.preco-pix { font-size: 14px; line-height: 20px; color: var(--ok); font-weight: 600; }
.parc { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.selo { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--accent); padding: 4px 8px; }

/* Esqueleto (Doherty) */
.esq { background: linear-gradient(90deg, var(--line) 0%, var(--surface-raised) 50%, var(--line) 100%); background-size: 200% 100%; animation: brilho 1.2s ease infinite; opacity: .55; }
@keyframes brilho { to { background-position: -200% 0; } }
.card-esq .card-img { height: 189px; }
.card-esq .l { height: 14px; margin: 6px 0; }

/* Serviços e dúvidas */
.servicos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cartao { background: var(--surface-raised); border: 1px solid var(--line); padding: 20px; }
.cartao h3 { margin-bottom: 8px; }
.cartao p { margin: 0; }
.duvidas { max-width: 760px; }
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; font-weight: 600; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 22px; color: var(--ink-muted); transition: transform .2s ease; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin: 0 0 16px; color: var(--ink-muted); }

/* Rodapé */
.rodape { background: var(--palco-1); color: var(--on-palco-2); margin-top: 80px; font-size: 14px; }
.rodape-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.rodape h2 { margin: 0 0 8px; font-family: var(--font-sans); font-weight: 600; line-height: 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-palco); }
.rodape a { display: flex; align-items: center; min-height: 36px; color: var(--on-palco-2); text-decoration: none; }
.rodape a:hover { color: var(--on-palco); text-decoration: underline; }
.rodape-marca { font-family: var(--font-display); font-size: 32px; letter-spacing: .14em; color: var(--on-palco); }
.rodape-sub { font-size: 10px; font-weight: 600; letter-spacing: .3em; margin-bottom: 12px; }
.rodape-base { border-top: 1px solid rgba(217,207,188,.2); padding-top: 16px; padding-bottom: 24px; font-size: 12px; }

/* Sacola (gaveta) */
.fundo { position: fixed; inset: 0; background: rgba(10, 14, 12, .45); z-index: 40; opacity: 0; transition: opacity .2s ease; }
.fundo.visivel { opacity: 1; }
.sacola { position: fixed; top: 0; right: 0; height: 100%; height: 100dvh; width: min(420px, 100%); background: var(--surface-raised); border-left: 1px solid var(--line); z-index: 41; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; visibility: hidden; }
.sacola.aberta { transform: none; visibility: visible; }
.sacola-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.fechar { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; min-width: var(--toque); min-height: var(--toque); color: var(--ink-muted); }
.fechar:hover { color: var(--ink); }
.sacola-itens { padding: 4px 20px; overflow-y: auto; flex: 1; }
.sacola-pe { border-top: 1px solid var(--line); padding: 16px 20px 20px; background: var(--surface-raised); }
.item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; }
.item svg { width: 56px; height: 72px; }
.item .nome { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 22px; text-decoration: none; }
.item-acoes { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.qtd button { background: none; border: 0; width: 40px; height: 40px; cursor: pointer; font-size: 18px; }
.qtd button:disabled { opacity: .35; cursor: not-allowed; }
.qtd span { min-width: 28px; text-align: center; font-size: 15px; font-weight: 600; }
.vazio { text-align: center; padding: 48px 0; }
.vazio p { color: var(--ink-muted); margin: 12px 0 20px; }

/* Resumo de valores */
.linhas { font-size: 14px; }
.linhas .l { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.linhas .l.desc { color: var(--ok); }
.linhas .total { font-size: 18px; font-weight: 600; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.linhas .nota { font-size: 13px; color: var(--ink-muted); margin: 4px 0 0; }

/* Página de produto */
.trilha { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); padding: 20px 0 0; }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.produto { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; padding-top: 20px; align-items: start; }
.produto-img { background: var(--surface-raised); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 40px; position: sticky; top: 92px; }
.produto-img svg { width: 100%; max-width: 300px; height: auto; }
.produto h1 { margin: 6px 0 12px; }
.produto .descricao { font-size: 17px; line-height: 26px; margin: 0 0 20px; }
.bloco-preco { background: var(--surface-raised); border: 1px solid var(--line); padding: 20px; margin-bottom: 16px; }
.bloco-preco .preco { font-size: 28px; line-height: 32px; }
.bloco-preco .preco-pix { font-size: 16px; margin-top: 6px; }
.bloco-preco .parc { font-size: 14px; margin-top: 2px; }
.estoque-info { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 14px 0; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.ponto.pouco { background: var(--accent); }
.ponto.zero { background: var(--ink-muted); }
.garantias { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.garantias li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.garantias svg { flex: none; color: var(--accent-ink); margin-top: 2px; }
.ficha { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.ficha th, .ficha td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ficha th { width: 45%; color: var(--ink-muted); font-weight: 400; }
.barra-produto { visibility: hidden; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface-raised); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; transform: translateY(100%); transition: transform .2s ease, visibility 0s linear .2s; }
.barra-produto.visivel { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
.barra-produto .preco { font-size: 17px; }
.barra-produto .btn { flex: 1; }
@media (max-width: 900px) { body.com-barra { padding-bottom: 84px; } }

/* Checkout */
.etapas { list-style: none; display: flex; padding: 0; margin: 24px 0 32px; counter-reset: etapa; }
.etapas li { flex: 1; position: relative; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.etapas li::before { counter-increment: etapa; content: counter(etapa); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto 6px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-raised); position: relative; z-index: 1; }
.etapas li + li::after { content: ""; position: absolute; top: 16px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.etapas li.feita::before { content: "✓"; background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.etapas li.feita + li::after, .etapas li.atual::after { background: var(--brand); }
.etapas li.atual { color: var(--ink); }
.etapas li.atual::before { border: 2px solid var(--brand); color: var(--ink); }
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.passo { background: var(--surface-raised); border: 1px solid var(--line); padding: 24px; }
.passo h2 { font-size: 28px; line-height: 32px; margin-bottom: 4px; }
.passo > p.muted { margin: 0 0 8px; }
.campo { display: block; margin-top: 16px; }
.campo > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.campo > span small { font-weight: 400; color: var(--ink-muted); }
.campo input, .campo select { display: block; width: 100%; min-height: var(--toque); padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 16px; }
.campo input:focus, .campo select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); }
.campo input[aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 1px var(--erro); }
.campo .dica-erro { display: block; color: var(--erro); font-size: 13px; line-height: 18px; margin-top: 6px; }
.campo .dica { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; margin-top: 6px; }
.grupo { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.grupo .inteiro { grid-column: 1 / -1; }
.grupo-cep { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: end; }
.endereco-achado { margin-top: 16px; padding: 12px 14px; background: var(--ok-bg); font-size: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.opcoes-pag { display: grid; gap: 12px; margin-top: 16px; }
.opcao { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-height: 64px; }
.opcao:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--surface-raised); }
.opcao input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.opcao b { display: block; }
.opcao .muted { font-size: 13px; }
.opcao .valor { font-weight: 600; text-align: right; }
.opcao .valor small { display: block; font-weight: 400; color: var(--ok); font-size: 12px; }
.passo-acoes { display: flex; gap: 12px; margin-top: 24px; align-items: center; flex-wrap: wrap-reverse; }
.passo-acoes .btn:not(.sec) { flex: 1; min-width: 220px; }
.revisao { display: grid; gap: 12px; margin-top: 16px; }
.revisao section { border: 1px solid var(--line); padding: 14px 16px; background: var(--surface); }
.revisao header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.revisao h3 { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.revisao p { margin: 4px 0 0; font-size: 14px; color: var(--ink-muted); }
.consentimento { font-size: 13px; line-height: 19px; color: var(--ink-muted); margin: 16px 0 0; }
.resumo-lateral { background: var(--surface-raised); border: 1px solid var(--line); padding: 20px; position: sticky; top: 92px; }
.resumo-lateral h2 { font-size: 24px; line-height: 30px; margin-bottom: 8px; }
.mini-itens { display: grid; gap: 10px; margin: 8px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mini-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; font-size: 14px; line-height: 18px; }
.mini-item svg { width: 40px; height: 52px; }
.resumo-movel { display: none; }
.alerta { padding: 12px 16px; font-size: 14px; margin-top: 16px; border-left: 3px solid var(--erro); background: var(--erro-bg); }
.alerta.ok { border-color: var(--ok); background: var(--ok-bg); }

/* Página do pedido (Pico-Fim) */
.confirmacao { text-align: center; padding: 40px 0 8px; }
.confirmacao .icone-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; animation: aparece .4s ease; }
@keyframes aparece { from { transform: scale(.6); opacity: 0; } }
.confirmacao h1 { margin-bottom: 8px; }
.linha-tempo { list-style: none; padding: 0; margin: 32px auto; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 720px; }
.linha-tempo li { text-align: center; font-size: 13px; position: relative; color: var(--ink-muted); }
.linha-tempo li::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 8px; border: 2px solid var(--line); background: var(--surface); position: relative; z-index: 1; }
.linha-tempo li + li::after { content: ""; position: absolute; top: 7px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.linha-tempo li.feito::before { background: var(--brand); border-color: var(--brand); }
.linha-tempo li.feito::after { background: var(--brand); }
.linha-tempo li.agora { color: var(--ink); font-weight: 600; }
.linha-tempo li.agora::before { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ok-bg); }
.pedido-grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; max-width: 960px; margin: 0 auto; }
.proximo { border-left: 3px solid var(--accent); }
.proximo ol { margin: 8px 0 0; padding-left: 20px; }
.proximo li { margin: 6px 0; }

/* Páginas legais */
.legal { max-width: 760px; padding-top: 40px; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: 26px; line-height: 32px; margin: 32px 0 8px; }
.legal p, .legal li { color: var(--ink); }
.legal .entre { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

/* Aviso flutuante (toast) */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: var(--surface); padding: 12px 18px; font-size: 14px; z-index: 60; opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; max-width: calc(100% - 32px); }
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

/* Responsivo */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 40px; gap: 16px; }
  .hero-rel { width: 170px; justify-self: start; order: -1; }
  .hero-rel span { display: none; }
  .beneficios-in { grid-template-columns: 1fr 1fr; }
  .beneficio { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .beneficio:nth-child(-n+2) { border-top: 0; }
  .produto { grid-template-columns: 1fr; gap: 20px; }
  .produto-img { position: static; padding: 24px; }
  .produto-img svg { max-width: 180px; }
  .barra-produto { display: flex; }
  .checkout { grid-template-columns: 1fr; gap: 0; }
  .resumo-lateral { display: none; }
  .resumo-movel { display: block; background: var(--surface-raised); border: 1px solid var(--line); margin-bottom: 16px; }
  .resumo-movel summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; cursor: pointer; font-weight: 600; list-style: none; }
  .resumo-movel summary::-webkit-details-marker { display: none; }
  .resumo-movel > div { padding: 0 16px 16px; }
  .pedido-grade { grid-template-columns: 1fr; }
  .rodape-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  h1 { font-size: 36px; line-height: 40px; }
  h2 { font-size: 30px; line-height: 34px; }
  .menu { display: none; }
  .btn-menu { display: inline-flex; margin-left: auto; }
  .menu-movel.aberto { display: block; }
  .topo-in { gap: 8px; }
  .marca small { display: none; }
  .grade { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-img svg { width: 88px; height: 114px; }
  .card-corpo { padding: 12px; }
  .card h3 { font-size: 19px; line-height: 23px; }
  .preco { font-size: 17px; line-height: 22px; }
  .preco-pix { font-size: 13px; }
  .card .btn { padding: 0 8px; font-size: 14px; }
  .card .rotulo { letter-spacing: .08em; font-size: 11px; }
  .hero-rel { width: 132px; }
  .etapas li { font-size: 11px; }
  .passo { padding: 20px 16px; }
  .grupo { grid-template-columns: 1fr; }
  .grupo-cep { grid-template-columns: 1fr; gap: 0; }
  .linha-tempo li { font-size: 11px; }
  .rodape-in { grid-template-columns: 1fr; gap: 20px; }
  .bloco-preco .preco { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Vitrine editorial (inspirada em lojas de relógio premium, com a identidade Calibre) ===== */

/* Menu "Relógios" com painel de marcas e tipos */
.menu-item { position: static; display: flex; }
.menu-gatilho { display: inline-flex; align-items: center; gap: 6px; min-height: var(--toque); padding: 0 12px; background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.menu-gatilho:hover, .menu-gatilho[aria-expanded="true"], .menu-gatilho[aria-current="page"] { color: var(--ink); }
.menu-gatilho span { font-size: 10px; letter-spacing: 0; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-raised); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px -16px rgba(0,0,0,.25); }
.mega-in { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 32px; padding-top: 24px; padding-bottom: 28px; }
.mega-col { display: flex; flex-direction: column; }
.mega-col .rotulo { margin-bottom: 6px; }
.mega-col a { display: flex; align-items: center; min-height: 40px; text-decoration: none; font-size: 15px; }
.mega-col a:hover { color: var(--accent-ink); }
.menu-movel-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 8px 0; }
.menu-movel-grupos .mega-col:last-child { grid-column: 1 / -1; }
.menu-movel-grupos a { border-bottom: 0; font-weight: 400; }

/* Carrossel do topo */
.carrossel { position: relative; }
.carrossel-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide-verde { background: var(--palco-1); color: var(--on-palco); }
.slide-escuro { background: var(--palco-2); color: var(--on-palco); }
.slide-marfim { background: var(--palco-3); color: var(--palco-2); }
.slide-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; min-height: 520px; padding-top: 48px; padding-bottom: 88px; }
.slide h1, .slide h2 { font-size: clamp(44px, 6.5vw, 76px); line-height: 1; letter-spacing: .01em; }
.slide-txt p:not(.eyebrow) { max-width: 460px; font-size: 17px; line-height: 26px; margin: 18px 0 28px; opacity: .85; }
.slide-verde .eyebrow, .slide-escuro .eyebrow { color: var(--metal-claro); }
.slide-marfim .eyebrow { color: var(--metal-escuro); }
.slide-rel { justify-self: center; width: min(300px, 60vw); aspect-ratio: 200 / 260; position: relative; }
.slide-rel svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 32px rgba(0,0,0,.28)); transition: transform .4s ease; }
.slide-rel:hover svg { transform: rotate(-4deg) scale(1.03); }
.carrossel-controles { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; align-items: center; gap: 4px; }
.pontos { display: flex; }
.ponto-slide { width: 32px; height: 44px; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ponto-slide::after { content: ""; width: 22px; height: 2px; background: currentColor; opacity: .35; transition: opacity .2s ease, transform .2s ease; }
.ponto-slide[aria-current="true"]::after { opacity: 1; transform: scaleX(1.27); background: var(--metal); }
.seta, .pausa { width: 44px; height: 44px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-size: 22px; line-height: 1; opacity: .7; }
.seta:hover, .pausa:hover { opacity: 1; }
.pausa { font-size: 11px; margin-left: auto; border: 0; }
.carrossel-controles { color: var(--on-palco); }

/* Abas de seleção */
.abas-loja { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.abas-loja button { min-height: var(--toque); padding: 0 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink-muted); white-space: nowrap; }
.abas-loja button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Trilho rolável de produtos */
.trilho-caixa { position: relative; }
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
.seta-trilho { position: absolute; top: 34%; z-index: 3; background: var(--surface-raised); color: var(--ink); border-color: var(--line); opacity: 1; }
.seta-trilho.ant { left: -22px; } .seta-trilho.prox { right: -22px; }

/* Cartão de produto sem borda, foto em destaque */
.card { background: transparent; border: 0; }
.card:hover { border-color: transparent; }
.card-img { position: relative; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); padding: 28px 0 22px; }
.card:hover .card-img { border-color: var(--ink-muted); }
.card-fundo { position: absolute; inset: auto 15% -40% 15%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,88,37,.14), transparent); }
.card-img svg { position: relative; width: 132px; height: 172px; transition: transform .35s ease; }
.card:hover .card-img svg { transform: scale(1.06) rotate(-3deg); }
.card-corpo { padding: 14px 2px 0; }
.card h3 { margin: 4px 0 8px; font-size: 22px; line-height: 26px; }
.card-acao { margin-top: auto; padding-top: 14px; position: relative; z-index: 2; }
.card .btn { margin-top: 0; }
.selo-card { position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--brand); color: var(--on-brand); padding: 4px 9px; }
.selo-card.oferta { background: var(--metal); color: var(--palco-2); }
.selo-card.esgotado { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--line); }
.preco-antigo { font-size: 14px; font-weight: 400; color: var(--ink-muted); margin-right: 8px; }
.oferta-linha { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; }

/* Mosaico de coleções */
.colecoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3 / 4; overflow: hidden; text-decoration: none; padding: 20px; }
.tile-verde { background: var(--palco-1); color: var(--on-palco); }
.tile-escuro { background: var(--palco-2); color: var(--on-palco); }
.tile-marfim { background: var(--palco-3); color: var(--palco-2); }
.tile-latao { background: var(--metal); color: var(--palco-2); }
.tile-rel { flex: 1; display: flex; align-items: center; justify-content: center; }
.tile-rel svg { width: 62%; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.28)); transition: transform .4s ease; }
.tile:hover .tile-rel svg { transform: translateY(-6px) rotate(-4deg); }
.tile-txt b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 34px; letter-spacing: .04em; }
.tile-txt span { font-size: 13px; opacity: .85; }

/* Histórias alternadas */
.historias .wrap { display: grid; gap: 56px; }
.historia { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.historia.invertida .historia-img { order: 2; }
.historia-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; }
.historia-img svg { width: 42%; height: auto; filter: drop-shadow(0 22px 30px rgba(0,0,0,.3)); transition: transform .4s ease; }
.historia-img:hover svg { transform: rotate(-4deg) scale(1.03); }
.hist-verde { background: var(--palco-1); } .hist-escuro { background: var(--palco-2); } .hist-marfim { background: var(--palco-3); }
.historia-txt h2 { margin-bottom: 14px; }
.historia-txt p:not(.eyebrow) { font-size: 17px; line-height: 27px; color: var(--ink-muted); margin: 0 0 24px; max-width: 460px; }

/* Faixa de garantias antes do rodapé e newsletter */
.garantias-faixa { margin-top: 80px; border-top: 1px solid var(--line); background: var(--surface-raised); }
.garantias-faixa-in { display: grid; grid-template-columns: repeat(3, 1fr); }
.garantias-faixa-in > div { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding: 24px 16px; border-left: 1px solid var(--line); align-items: center; }
.garantias-faixa-in > div:first-child { border-left: 0; }
.garantias-faixa-in svg { grid-row: span 2; color: var(--accent-ink); width: 26px; height: 26px; }
.garantias-faixa-in b { font-size: 15px; }
.garantias-faixa-in span { font-size: 13px; color: var(--ink-muted); }
.garantias-faixa + .rodape { margin-top: 0; }
.news { display: flex; gap: 8px; }
.news input { flex: 1; min-width: 0; min-height: var(--toque); padding: 0 12px; background: rgba(246,241,231,.08); border: 1px solid rgba(217,207,188,.4); color: var(--on-palco); font-size: 15px; }
.news input::placeholder { color: rgba(217,207,188,.7); }
.news .btn { padding: 0 16px; }
.rodape-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.rodape-base a { display: inline-flex; min-height: 32px; }

@media (max-width: 900px) {
  .slide-in { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding-top: 24px; padding-bottom: 80px; }
  .slide-rel { width: 150px; justify-self: start; order: -1; }
  .slide h1, .slide h2 { font-size: 40px; line-height: 44px; }
  .slide-txt p:not(.eyebrow) { font-size: 16px; line-height: 24px; margin: 12px 0 20px; }
  .trilho { grid-auto-columns: 44%; }
  .seta-trilho { display: none; }
  .colecoes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .historia, .historia.invertida { grid-template-columns: 1fr; gap: 20px; }
  .historia.invertida .historia-img { order: 0; }
  .historias .wrap { gap: 40px; }
  .garantias-faixa-in { grid-template-columns: 1fr; }
  .garantias-faixa-in > div { border-left: 0; border-top: 1px solid var(--line); padding: 16px 0; }
  .garantias-faixa-in > div:first-child { border-top: 0; }
}
@media (max-width: 640px) {
  .trilho { grid-auto-columns: 62%; gap: 12px; }
  .card-img svg { width: 96px; height: 125px; }
  .card h3 { font-size: 19px; line-height: 23px; }
  .tile { padding: 14px; }
  .tile-txt b { font-size: 24px; line-height: 26px; }
  .tile-txt span { font-size: 12px; }
  .cab-secao { align-items: start; }
  .abas-loja { width: 100%; }
}
.card .btn.sec:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); filter: none; }
.menu .mega-col a { min-height: 40px; padding: 0; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.menu .mega-col a:hover { color: var(--accent-ink); }
.seta-trilho[disabled] { display: none; }
@media (max-width: 1200px) { .seta-trilho.ant { left: 4px; } .seta-trilho.prox { right: 4px; } }

/* Cartão com revelação ao passar o mouse (adaptado do "Product Reveal Card", 21st.dev) */
.card { transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.revelar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); }
  .card:hover .card-img { box-shadow: 0 18px 30px -18px rgba(20,23,26,.35); }
  .revelar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: rgba(255,253,248,.94); backdrop-filter: blur(8px); border-top: 1px solid var(--line); transform: translateY(100%); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .25s ease; text-align: left; }
  .card:hover .revelar { transform: none; opacity: 1; }
  .card:hover .card-img:has(.revelar) svg { transform: translateY(-30px) scale(.92) rotate(-3deg); }
  .revelar-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .revelar-fichas > span { font-size: 12px; line-height: 15px; color: var(--ink); background: var(--surface); padding: 6px 8px; transform: translateY(8px); opacity: 0; transition: transform .3s ease .08s, opacity .3s ease .08s; }
  .card:hover .revelar-fichas > span { transform: none; opacity: 1; }
  .revelar-fichas small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .revelar-ir { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
}
:root[data-theme="dark"] .revelar { background: rgba(28,32,29,.94); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .revelar { background: rgba(28,32,29,.94); } }

/* Mosaico de coleções com degradê e seta (adaptado do "Shop by Category Grid", 21st.dev) */
.tile::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); pointer-events: none; }
.tile-marfim::after { background: linear-gradient(to top, rgba(246,238,236,.95), transparent); }
.tile-latao::after { background: linear-gradient(to top, rgba(122,94,51,.5), transparent); }
.tile-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.tile-desc { font-size: 14px !important; opacity: .9; }
.tile-ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.seta-ir { display: inline-block; transition: transform .25s ease; }
.tile:hover .seta-ir { transform: translateX(5px); }
.tile:hover .tile-rel svg { transform: translateY(-6px) rotate(-4deg) scale(1.05); }
.tile-latao { color: var(--palco-2); }
.tile-latao::after { background: linear-gradient(to top, rgba(246,241,231,.35), transparent); }
@media (max-width: 640px) { .tile-desc { font-size: 12px !important; line-height: 15px; } .tile-ir { margin-top: 4px; } }

/* ===== Movimento: tokens do transitions.dev aplicados à Calibre ===== */
:root {
  --dur-micro: 80ms; --dur-quick: 150ms; --dur-fast: 250ms; --dur-medium: 350ms; --dur-slow: 400ms; --dur-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
}
/* Sacola: painel abre em 400 ms e fecha em 350 ms */
.sacola { transition: transform var(--dur-medium) var(--ease-smooth-out), visibility 0s linear var(--dur-medium); }
.sacola.aberta { transition: transform var(--dur-slow) var(--ease-smooth-out), visibility 0s; }
.fundo { transition: opacity var(--dur-medium) var(--ease-smooth-out); }
/* Menu Relógios: abre do topo, escala 0,97 → 1 */
.mega:not([hidden]) { animation: mega-abre var(--dur-fast) var(--ease-smooth-out); transform-origin: top center; }
@keyframes mega-abre { from { opacity: 0; transform: scaleY(.97) translateY(-4px); } }
.menu-movel.aberto { animation: mega-abre var(--dur-fast) var(--ease-smooth-out); transform-origin: top center; }
/* Contador da sacola: pop com mola */
.contador.pulsa { animation: badge-pop var(--dur-very-slow) var(--ease-bounce); }
@keyframes badge-pop { 0% { transform: scale(.4); opacity: .4; } 100% { transform: none; opacity: 1; } }
/* Abas com indicador que desliza */
.abas-loja { position: relative; }
.abas-loja button[aria-selected="true"] { border-bottom-color: transparent; }
.abas-indicador { position: absolute; bottom: -1px; left: 0; height: 2px; background: var(--accent); width: 1px; transform-origin: left; transition: transform var(--dur-fast) var(--ease-smooth-out); pointer-events: none; }
/* Erro no formulário: tremida curta */
.campo input.treme { animation: treme calc(var(--dur-micro) * 5) cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes treme { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
/* Troca do esqueleto pelos cartões */
.entra > .card { animation: revela var(--dur-slow) ease-in-out both; }
.entra > .card:nth-child(2) { animation-delay: 40ms; } .entra > .card:nth-child(3) { animation-delay: 80ms; }
.entra > .card:nth-child(4) { animation-delay: 120ms; } .entra > .card:nth-child(n+5) { animation-delay: 160ms; }
@keyframes revela { from { opacity: 0; transform: translateY(6px); } }
/* Confirmação do pedido: check com giro */
.confirmacao .icone-ok { animation: check-ok var(--dur-very-slow) var(--ease-bounce); }
.confirmacao .icone-ok svg { animation: check-ok-icone var(--dur-very-slow) var(--ease-smooth-out) 120ms both; }
@keyframes check-ok { from { transform: scale(.6); opacity: 0; } }
@keyframes check-ok-icone { from { transform: rotate(-45deg) scale(.6); opacity: 0; } }
/* Avisos flutuantes: saem em 350 ms */
.toast { transition: opacity var(--dur-medium) var(--ease-smooth-out), transform var(--dur-medium) var(--ease-smooth-out); }

/* Logo nova (marca/): caixa do relógio em "C" com a coroa de latão */
.marca .logo-img { height: 46px; width: auto; display: block; }
.logo-escuro { display: none !important; }
:root[data-theme="dark"] .logo-claro { display: none !important; }
:root[data-theme="dark"] .logo-escuro { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none !important; }
  :root:not([data-theme="light"]) .logo-escuro { display: block !important; }
}
.rodape-logo { height: 62px; width: 220px; object-fit: contain; object-position: left; display: block; margin-bottom: 14px; }
.painel-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); border-left: 1px solid var(--line); padding-left: 14px; }
@media (max-width: 640px) { .marca .logo-img { height: 38px; } .painel-rotulo { display: none; } }

/* ===== Revisão de interface (Web Interface Guidelines) ===== */
:root { color-scheme: light; --foco: var(--accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
/* Foco com contraste de pelo menos 3:1 em cada fundo */
.slide-verde, .slide-escuro, .tile-verde, .tile-escuro, .rodape { --foco: var(--on-palco); }
.slide-marfim, .tile-marfim, .tile-latao { --foco: var(--palco-2); }
.carrossel-controles :focus-visible { outline-color: currentColor; }
/* Atalho para pular ao conteúdo (só aparece com o foco do teclado) */
.pular { position: absolute; left: 16px; top: 8px; z-index: 70; padding: 12px 16px; background: var(--surface-raised); color: var(--ink); font-weight: 600; border: 1px solid var(--line); transform: translateY(-200%); }
.pular:focus { transform: none; }
/* O cabeçalho fixo não pode cobrir o que recebe foco ou é aberto por link */
html { scroll-padding-top: 84px; -webkit-tap-highlight-color: rgba(101, 20, 36, .12); }
.secao { scroll-margin-top: -48px; }
.menu-movel.aberto { max-height: calc(100dvh - 69px); overflow-y: auto; overscroll-behavior: contain; }
a, button, input, select, summary, label { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
.preco, .preco-pix, .parc, .preco-antigo, .linhas .l, .opcao .valor, .qtd span, .ficha td { font-variant-numeric: tabular-nums; }
/* Margens seguras do celular (notch e barra do sistema) */
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.sacola-cab { padding-top: calc(10px + env(safe-area-inset-top)); }
.sacola-pe { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.sacola-itens { overscroll-behavior: contain; }
.toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
/* Conteúdo longo não pode alargar a página */
.rodape-in > * { min-width: 0; }
.revisao p, .confirmacao h1 { overflow-wrap: anywhere; }
/* Estados de hover que faltavam */
.link:hover { text-decoration-thickness: 2px; }
.qtd button:hover:not(:disabled) { background: var(--surface); }
.ponto-slide:not([aria-current="true"]):hover::after { opacity: .7; }
.abas-loja button:hover { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .card:has(:focus-visible) .revelar, .card:has(:focus-visible) .revelar-fichas > span { transform: none; opacity: 1; }
}

/* Fotos oficiais dos produtos (fundo branco; o desenho continua para quem ainda não tem foto) */
.card-img:has(.foto-produto) { background: #fff; padding: 0; }
.card-img:has(.foto-produto) .card-fundo { display: none; }
.card-img .foto-produto { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .35s ease; }
.card:hover .card-img .foto-produto { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-img:has(.revelar) .foto-produto { transform: translateY(-18px) scale(.94); }
}
.item-foto { display: flex; align-items: center; justify-content: center; width: 56px; height: 72px; background: #fff; flex: none; }
.item-foto img { width: 56px; height: 56px; object-fit: contain; }
.item-foto svg { width: 56px; height: 72px; }
.mini-item .item-foto { width: 40px; height: 52px; }
.mini-item .item-foto img { width: 40px; height: 40px; }
.mini-item .item-foto svg { width: 40px; height: 52px; }
.produto-galeria { position: sticky; top: 92px; display: grid; gap: 12px; }
.produto-img:has(.foto-produto) { background: #fff; padding: 0; position: static; }
.produto-img .foto-produto { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 1; object-fit: contain; }
.miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.miniatura { width: 72px; height: 72px; padding: 0; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.miniatura[aria-pressed="true"] { border: 2px solid var(--brand); }
.miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 900px) {
  .produto-galeria { position: static; }
  .produto-img:has(.foto-produto) .foto-produto { max-width: 420px; margin: 0 auto; }
}
/* Área da imagem sempre quadrada: cartões com foto e com desenho ficam do mesmo tamanho */
.card-img { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }