/* Archivo é variável no eixo 400–600. Sem o descritor font-weight o navegador
   trava o eixo em 400 e finge negrito: nenhum peso acima de 600 neste arquivo. */
@font-face{font-family:Archivo;src:url('/fonts/archivo-var-latin.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Barlow;src:url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --laranja:#b8530f;--preto:#1c1612;--borda:#e6e1d8;--cinza:#6b6560;
  --creme:#f4efe7;--fundo:#fff;--pix:#2f5d32;
  --eixo:1392px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:148px}
body{margin:0;font:400 15px/1.5 Archivo,Arial,sans-serif;color:var(--preto);background:var(--fundo)}
a{color:inherit;text-underline-offset:4px}
strong,b{font-weight:600}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:1px solid var(--borda);background:white;padding:11px 16px;min-height:44px}
button:disabled{cursor:not-allowed;opacity:.4}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #1763c0;outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Barlow,Impact,sans-serif;font-weight:700;line-height:1;text-transform:uppercase}
h1{font-size:clamp(36px,5vw,64px);margin-bottom:18px}
h2{font-size:32px}
h3{font-size:16px;line-height:1.3;margin-bottom:8px;font-weight:600}
h3 a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.eixo{max-width:calc(var(--eixo) + 48px);margin:auto;padding:0 24px}
.skip{position:absolute;top:-100px}
/* Só para leitor de tela: mantém a escada de headings sem mexer no desenho. */
.oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{top:0;background:white;z-index:100;padding:15px}

.faixa{padding:8px 20px;background:var(--preto);color:#fff;text-align:center;font-size:11px;font-weight:600;letter-spacing:.08em}
.masthead,.topo{background:#fff;color:var(--preto);border-bottom:1px solid var(--borda)}
.masthead{position:sticky;top:0;z-index:30}
.topo-util{background:#f6f3ee;border-bottom:1px solid var(--borda);font-size:12px}
.topo-util-in{display:flex;justify-content:space-between;gap:16px;padding:8px 0;color:var(--cinza)}
.topo-util a{display:inline-flex;align-items:center;min-height:36px;padding:2px 0;text-decoration:none}
.nav,.topo-in{min-height:96px;display:flex;align-items:center;gap:20px;position:relative}
.marca{display:flex;align-items:center;min-height:44px;gap:14px;font-family:Barlow,Impact,sans-serif;font-size:40px;font-weight:700;text-transform:uppercase;text-decoration:none;letter-spacing:.12em;color:var(--preto)}
.marca img{height:66px;width:auto}
.nav>button,.topo-in>button,.btn-carrinho{color:var(--preto);background:transparent;border:1px solid var(--borda);margin-left:0}
.busca{display:flex;align-items:center;margin-left:auto;position:relative}
.busca-lupa{border:0;background:transparent;padding:10px;min-width:44px;min-height:44px;color:var(--preto);display:inline-flex;align-items:center;justify-content:center}
.busca-lupa:hover{color:var(--laranja)}
.busca input{width:0;opacity:0;padding:0;border:0;background:#faf8f4;pointer-events:none;transition:width 200ms ease,opacity 200ms ease}
.busca.busca-aberta input{width:min(320px,58vw);opacity:1;padding:12px 14px;border:1px solid var(--borda);pointer-events:auto}
.faixa-frete{background:var(--laranja);color:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 26px;padding:16px 20px;font-family:Barlow,Impact,sans-serif;font-size:clamp(20px,3.4vw,34px);letter-spacing:.1em;text-transform:uppercase;line-height:1}
.faixa-frete strong{font-weight:700}
.faixa-frete-item{display:inline-flex;align-items:center;gap:10px}
.faixa-frete-item .ico{flex:0 0 auto}
.faixa-frete-sep{width:6px;height:6px;background:currentColor;transform:rotate(45deg)}
/* O icone acompanha a manchete: nasce do mesmo clamp, nunca de um px fixo. */
.ico{width:1em;height:1em;vertical-align:middle}

/* Menu: só o clique na palavra. Sem dropdown de REF no hover. */
.menu-sollu{border-top:1px solid var(--borda);background:#fff;position:relative;z-index:20}
.menu-sollu-in{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:0;overflow:visible}
.menu-sollu a{text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600;color:var(--preto)}
.menu-sollu .menu-link{display:flex;align-items:center;min-height:44px;padding:11px 22px;white-space:nowrap}
.menu-sollu .menu-link:hover{color:var(--laranja)}
.subnav{display:flex;gap:28px;padding:0 0 14px;overflow:auto}
.subnav a{font-size:13px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.subnav a:hover{color:var(--laranja)}

/* Hero: a copy mora numa caixa branca, nunca solta sobre a fotografia. */
.hero,.hero-paisagem,.hero-slide{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;min-height:420px;background:var(--creme);overflow:hidden}
.hero-carrossel{position:relative;background:var(--creme)}
.hero-slides{position:relative}
.hero-slide{display:none}
.hero-slide[data-ativo]{display:grid}
.hero-paisagem>.foto-pendente,.hero-paisagem>img,.hero-slide>.foto-pendente,.hero-slide>img{grid-area:1/1;width:100%;height:100%;min-height:420px;aspect-ratio:auto;max-height:none;object-fit:cover}
.hero-paisagem img,.hero img,.hero-slide img{width:100%;height:100%;max-height:520px;object-fit:cover;object-position:right center}
.hero-controles{position:absolute;left:0;right:0;bottom:16px;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.hero-controles>*{pointer-events:auto}
/* O ponto media 10x10: um alvo de 100px2 no primeiro controle do site, e no
   celular o dedo cobre uns 9mm. O ponto cresce um pouco, o espaco entre eles
   cresce mais, e a area de toque vai a 28x44 por um pseudo-elemento — que nao
   mexe em nada do layout. Cinco pontos lado a lado nao cabem com 44 de largura
   cada; 28 passa o piso de 24x24 da WCAG 2.5.8 com folga. */
.hero-dots{display:flex;gap:16px}
.hero-dots button{position:relative;width:12px;height:12px;min-height:12px;min-width:12px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--preto)}
.hero-dots button::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:44px}
.hero-dots button[aria-current=true]{background:var(--laranja);border-color:var(--laranja)}
.hero-seta{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:#fff;border:1px solid var(--borda);position:relative}
.hero-seta::before{content:"";display:block;width:10px;height:10px;border-right:2px solid var(--preto);border-bottom:2px solid var(--preto);margin:auto}
/* Mesmo corpo das setas: o controle de pausa e um irmao delas, nao um enfeite. */
.hero-pausa{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:#fff;
  border:1px solid var(--borda);display:inline-flex;align-items:center;justify-content:center;color:var(--preto)}
.hero-pausa:hover{border-color:var(--laranja);color:var(--laranja)}
.hero-pausa .ico-play{display:none}
.hero-pausa[aria-pressed="true"] .ico-pausa{display:none}
.hero-pausa[aria-pressed="true"] .ico-play{display:block}
.hero-seta[data-hero-dir="-1"]::before{transform:rotate(135deg)}
.hero-seta[data-hero-dir="1"]::before{transform:rotate(-45deg)}
.hero-copy{grid-area:1/1;z-index:1;display:flex;align-items:center;width:100%;max-width:calc(var(--eixo) + 48px);margin:0 auto;padding:36px 24px}
.hero-caixa{background:#fff;border:1px solid var(--borda);padding:32px;width:100%;max-width:520px}
.hero-caixa>:last-child{margin-bottom:0}
.foto-pendente{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:220px;background:repeating-linear-gradient(-45deg,#f4efe7,#f4efe7 12px,#efe8dc 12px,#efe8dc 24px);border:1px dashed #cbbfae;color:var(--preto);text-align:center;padding:24px}
.foto-pendente p{margin:0;font-family:Barlow,Impact,sans-serif;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.foto-pendente small{color:var(--cinza);font-size:12px;max-width:280px;line-height:1.4}
.foto-pendente-paisagem{min-height:420px;aspect-ratio:1920/900}
.foto-pendente-catalogo{aspect-ratio:1;min-height:0}
.foto-pendente-retrato{aspect-ratio:4/5;min-height:0}
.foto-pendente-macro{aspect-ratio:3/2;min-height:0}
/* Blocos de imagem conceitual: calcado no pe, materia e ambiente. */
.faixa-conceito{position:relative;margin:56px 0 0;background:var(--creme)}
.faixa-conceito .foto-pendente,.faixa-conceito img{width:100%;aspect-ratio:1920/900;object-fit:cover;border:0}
.faixa-conceito figcaption{position:absolute;left:0;bottom:0;max-width:520px;background:#fff;border-top:3px solid var(--laranja);padding:22px 26px}
.faixa-conceito h2{font-size:30px;margin-bottom:8px}
.faixa-conceito p{margin:0;font-size:13px;color:var(--cinza)}
.duo-conceito{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:22px;margin-top:22px;align-items:stretch}
.duo-conceito figure{margin:0;display:flex;flex-direction:column}
.duo-conceito .foto-pendente,.duo-conceito img{border:0;width:100%;object-fit:cover}
.duo-conceito figcaption{padding:12px 2px 0;font-size:12px;color:var(--cinza)}
.duo-conceito figcaption b{display:block;font-family:Barlow,Impact,sans-serif;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--preto);margin-bottom:2px}
/* Galeria da PDP: a foto manda, a ficha vem depois. */
.pdp-galeria{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.pdp-galeria>*{grid-column:span 1}
.pdp-galeria>.larga{grid-column:1/-1}
.pdp-galeria img,.pdp-galeria .foto-pendente{width:100%;border:0}
.pdp-foto .foto-pendente,.foto-card .foto-pendente{border:0;background:#f4efe7}
/* Dentro de caixa com altura própria o slot preenche; solto, quem manda é o aspect-ratio. */
.foto-card .foto-pendente,.galeria-cores .foto-pendente{height:100%;min-height:0;padding:8px;gap:0}
.galeria-cores .foto-pendente p{font-size:11px}
.hero .foto-hero{order:2}
.eyebrow,.ref{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.hero h1 em,.hero-copy h1 em{font-style:normal;color:var(--laranja)}
.cta{background:var(--laranja);color:#fff;border:1px solid var(--laranja);display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:14px 22px;min-height:44px;text-decoration:none;font-weight:600;gap:12px}
.cta:hover{background:#96430c}
.hero .cta,.hero-copy .cta{width:auto;min-width:240px;margin-top:18px}
.secundario{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--preto);padding:11px 14px;min-height:44px;text-decoration:none;font-size:13px;background:white;color:var(--preto)}

/* Condições: mesma altura de voz da faixa de frete — Barlow, caixa alta, faixa
   inteira. Frete grátis não repete aqui: ele é a faixa laranja logo acima. */
.condicoes{display:grid;grid-template-columns:repeat(3,1fr);background:var(--preto);color:#fff;
  text-align:center;border-bottom:3px solid var(--laranja)}
.condicoes>div{padding:17px 18px;font-size:13px;line-height:1.35;color:#efe7db}
.condicoes .ico{width:30px;height:30px;margin:0 auto 7px;color:var(--laranja);display:block}
.condicoes>div+div{border-left:1px solid rgba(255,255,255,.16)}
.condicoes span{display:block;margin-bottom:5px;color:#fff;font-family:Barlow,Impact,sans-serif;
  font-size:clamp(20px,2.9vw,33px);font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.prova-loja{width:calc(100% + 48px);margin:0 -24px;background:linear-gradient(115deg,#f4eadc 0%,#fff 48%,#efe4d4 100%);border-bottom:1px solid #ddcdb9;color:var(--preto);overflow:hidden}
.prova-conteudo{position:relative;display:flex;align-items:center;max-width:var(--eixo);margin:auto;padding:13px 24px;white-space:nowrap}
.prova-intro{flex:0 0 auto;padding-right:22px}
.prova-intro span{font-family:Barlow,Impact,sans-serif;color:var(--laranja);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.prova-intro strong{display:none}
.prova-destaques{display:flex;flex:1;border-left:1px solid #ddcdb9}
.prova-card{position:relative;display:flex;gap:9px;align-items:center;flex:1;padding:4px 20px;isolation:isolate}
.prova-card+.prova-card{border-left:1px solid #ddcdb9}
.prova-figura{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--preto);color:#ff9b46;font-size:17px;box-shadow:0 5px 14px rgba(31,25,20,.14)}
.prova-card b{font-family:Barlow,Impact,sans-serif;font-size:29px;line-height:.9;letter-spacing:.02em}
.prova-card small{color:var(--cinza);font-size:11px;margin:0}
.prova-fonte{flex:0 0 auto;margin:0;padding-left:20px;border-left:1px solid #ddcdb9;color:var(--cinza);font-size:11px;text-transform:none}
.prova-pdp small{display:block;font-size:11px;margin-top:4px;font-weight:400}
.prova-pdp{font-size:13px;color:var(--cinza);margin:-6px 0 18px;line-height:1.5}
.guia-numero{display:grid;gap:10px;max-width:360px;margin:22px 0}
.guia-numero input{min-height:44px}
.guia-numero .cta{width:100%}
.guia-numero-out{min-height:1.5em;font-size:15px;line-height:1.5}
.tabelas-guia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.tabela-scroll{overflow-x:auto;margin:18px 0}
.tabela-guia,.tabela-comparar{width:100%;border-collapse:collapse;font-size:14px}
.tabela-guia th,.tabela-guia td,.tabela-comparar th,.tabela-comparar td{text-align:left;border-bottom:1px solid var(--borda);padding:10px 8px;font-weight:400}
.tabela-guia th,.tabela-comparar thead th,.tabela-comparar th[scope=row]{font-weight:600}
.tabela-guia caption,.tabela-comparar caption{text-align:left;font-size:12px;color:var(--cinza);padding-bottom:8px}
@media(max-width:720px){.tabelas-guia{grid-template-columns:minmax(0,1fr)}}
.atalhos{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;padding:28px 0 8px}
.atalho{position:relative;display:block;min-height:220px;background:var(--creme);overflow:hidden;text-decoration:none}
.atalho img{width:100%;height:220px;object-fit:contain;object-position:center;padding:18px}
.atalho span{position:absolute;left:18px;bottom:16px;background:var(--preto);color:#fff;padding:8px 14px;font-family:Barlow,Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.atalho .foto-pendente{min-height:220px;aspect-ratio:1920/900;border:0}

.cabecalho-secao{display:flex;align-items:end;justify-content:space-between;gap:16px;padding-top:42px;margin-bottom:18px}
.cabecalho-secao a{display:inline-flex;align-items:center;min-height:44px}
.cabecalho-secao h2{margin-bottom:0}
.filtros{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 24px}
.filtros label{display:flex;gap:10px;align-items:center}
.filtros select{border:1px solid var(--borda);padding:10px;min-height:44px}
/* A foto e o produto. 4 por linha no desktop para o calcado ocupar mais area. */
.grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px;padding-bottom:60px;min-height:220px}
.card{min-width:0;background:white;display:flex;flex-direction:column}
.foto-card{display:block;aspect-ratio:1;background:#faf8f4;padding:0;overflow:hidden}
.foto-card:focus{outline:none}
.foto-card img{width:100%;height:100%;object-fit:contain;transition:transform 300ms}
.card:hover .foto-card img{transform:scale(1.04)}
.body{padding:16px 2px 8px;display:flex;flex-direction:column;flex:1}
.cores-card{font-size:12px;min-height:22px;color:var(--cinza)}
.oferta{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.de{font-size:13px;color:var(--cinza);font-weight:400}
.de s{font-size:14px}
.de small{font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.preco{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.preco small{font-size:12px;font-weight:400;letter-spacing:0}
.parcela{font-size:13px;color:var(--cinza)}
.pix{font-size:16px;color:var(--pix);font-weight:600;line-height:1.2}
.pix small{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pix em{font-style:normal;font-size:12px;font-weight:400;color:var(--cinza)}
.pix b{font-size:11px;background:#edf3e7;padding:3px 5px;color:#37521e}
.selo-off{position:absolute;top:10px;left:10px;z-index:2;background:#b42318;color:#fff;font-family:Barlow,Impact,sans-serif;font-size:18px;letter-spacing:.04em;padding:7px 10px;line-height:1;text-transform:uppercase}
.foto-card{position:relative}
.cores-thumbs{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 0}
.cores-thumbs button{width:44px;height:44px;min-width:44px;min-height:44px;padding:2px;background:#fff;border:1px solid var(--borda)}
.cores-thumbs button:hover,.cores-thumbs button[aria-pressed=true]{border-color:var(--preto)}
.cores-thumbs img{width:100%;height:100%;object-fit:contain}
.cores-thumbs .foto-pendente{min-height:0;padding:2px;aspect-ratio:1}
.cores-thumbs .foto-pendente p{font-size:8px}
/* Card leva para a PDP; numero e cor se escolhem la, com a foto grande do lado. */
.card-compra{margin-top:auto;padding-top:12px}
.cta-card{width:100%;padding:12px;font-size:13px}
.esgotado{margin:auto 0 0;padding:12px 0 0;font-size:12px;font-weight:600;color:var(--cinza);text-transform:uppercase;letter-spacing:.06em}
.card-esgotado .foto-card{opacity:.55}

.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;padding:28px 0 60px}
.pdp>div{min-width:0}
.pdp>div:first-child img{width:100%;max-height:570px;object-fit:contain;background:#faf8f4}
/* Slot solto em coluna de grid: altura pelo aspect-ratio, senão o track explode. */
.pdp .foto-pendente{height:auto}
.pdp h1{font-size:44px;margin-bottom:14px}
.pdp .preco{font-size:42px;color:var(--laranja)}
.pdp .de s{font-size:18px}
.pdp .pix{font-size:20px}
.pdp .oferta{margin-bottom:22px}
.pdp-foto{position:relative}
.pdp-videos,.pdp-historia{margin:48px 0 0;padding-top:8px}
.pdp-videos h2,.pdp-historia h2{font-size:32px}
.grade-videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.video-pendente{margin:0;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:repeating-linear-gradient(-45deg,#f4efe7,#f4efe7 12px,#efe8dc 12px,#efe8dc 24px);border:1px dashed #cbbfae;text-align:center;padding:16px}
.video-pendente p{margin:0;font-family:Barlow,Impact,sans-serif;font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.video-pendente small{color:var(--cinza);font-size:12px;max-width:220px;line-height:1.4}
.historia-fotos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.historia-fotos .larga{grid-column:1/-1}
.historia-fotos img,.historia-fotos .foto-pendente{width:100%;border:0}
.pdp-historia dl{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--borda);margin:28px 0 16px}
.pdp-historia dl div{padding:12px;border-bottom:1px solid var(--borda)}
.pdp-historia dt{font-size:11px;color:var(--cinza);text-transform:uppercase}
.pdp-historia dd{margin:4px 0 0;font-weight:600}
.trilha{font-size:12px;margin-top:22px}
.trilha a{display:inline-flex;align-items:center;min-height:24px}
.tamanhos,.cores{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 22px}
.tamanhos button{min-width:44px;min-height:44px;padding:10px}
.tamanhos button[aria-pressed=true],.cores button[aria-pressed=true]{background:var(--preto);color:white;border-color:var(--preto)}
.tamanhos button:disabled{text-decoration:line-through}
.aviso{font-size:12px;color:var(--cinza);line-height:1.6}
#cep-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:24px}
#cep-form label{grid-column:1/-1}
input,select,textarea{border:1px solid var(--borda);padding:12px;min-width:0}
details{border-top:1px solid var(--borda);padding:16px 0}
summary{cursor:pointer;font-weight:600}
.galeria-cores{display:flex;gap:9px;overflow:auto;margin-top:14px;padding:4px}
.galeria-cores button{width:74px;min-width:74px;height:74px;min-height:74px;padding:3px;background:white;border:1px solid var(--borda)}
.galeria-cores button[aria-pressed=true]{border:2px solid var(--laranja)}
.galeria-cores img{width:100%!important;height:100%!important;object-fit:contain}
.ambiente-teste{background:#fff4d6;border:1px solid #e6bd54;color:#684d00;font-size:11px;font-weight:600;padding:9px 12px;margin:10px 0}
.ficha-produto{border-top:1px solid var(--borda);margin-top:28px;padding-top:26px}
.ficha-produto h2{font-size:28px}
.ficha-produto dl{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--borda);margin:20px 0}
.ficha-produto dl div{padding:12px;border-bottom:1px solid var(--borda)}
.ficha-produto dt{font-size:11px;color:var(--cinza);text-transform:uppercase}
.ficha-produto dd{margin:4px 0 0;font-weight:600}

/* 100% (não 100vw): a barra de rolagem não pode desalinhar o rodapé do .eixo. */
.rodape{background:var(--preto);color:white;padding:0 max(24px,calc((100% - var(--eixo))/2)) 30px;font-size:13px}
.rodape .marca{color:#fff}
.rodape .marca img{height:56px}
.rodape a:not(.marca):not(.social):not(.whats-flutuante){display:flex;align-items:center;min-height:40px;margin-bottom:2px;color:#e7e2da;text-decoration:none}
.rodape a:not(.marca):hover{color:#fff;text-decoration:underline}
.link{border:0;background:transparent;padding:0;min-height:44px;text-align:left;text-decoration:underline;color:inherit;font-size:13px}
.rodape p{color:#c4c4bf}

/* Selos de serviço: a mesma promessa da vitrine, repetida onde a decisão fecha. */
.rodape-selos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  margin:0 calc(-1 * max(24px,calc((100% - var(--eixo))/2)));border-bottom:3px solid var(--laranja)}
.rodape-selos>div{background:var(--preto);display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:22px 18px}
.rodape-selos .ico{width:30px;height:30px;color:var(--laranja)}
.rodape-selos b{font-size:14px}
.rodape-selos span{color:#b6b0a8;font-size:12px}

.rodape-colunas{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding:38px 0 30px}
.rodape-col h3{font-family:Barlow,Impact,sans-serif;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.rodape-marca p{max-width:34ch;margin:14px 0 16px}
.rodape-social{display:flex;flex-wrap:wrap;gap:10px}
.social{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.3);padding:10px 14px;min-height:44px;text-decoration:none;color:#fff;font-size:13px}
.social:hover{border-color:var(--laranja);color:var(--laranja)}
.rodape-contato a{gap:9px}
.rodape-contato .ico{color:var(--laranja);flex:0 0 auto}
.rodape-contato p{margin:10px 0 0;font-size:12px}

.rodape-pagamento{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);padding:18px 0}
.rodape-pagamento b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b6b0a8;margin-bottom:9px}
.rodape-pagamento>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rodape-pagamento>div>b{flex:0 0 100%}
.selo-pgto{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.05);padding:8px 12px;font-size:12px}
.selo-pgto .ico{width:22px;height:22px;color:var(--laranja)}

.rodape-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;padding-top:18px;font-size:12px}
.rodape-base p{margin:0 0 4px}
.rodape-base-links{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* Botão flutuante: fora do fluxo do rodapé, visível em qualquer rolagem. */
.whats-flutuante{position:fixed;right:18px;bottom:18px;z-index:35;display:inline-flex;align-items:center;gap:9px;
  background:var(--pix);color:#fff;padding:13px 17px;min-height:52px;border-radius:999px;text-decoration:none;
  font-size:14px;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.whats-flutuante:hover{background:#25462a}
.whats-flutuante .ico{width:24px;height:24px}

/* Página de condições: índice no topo e FAQ em lista de definição. */
.politicas-resumo{font-size:16px;color:var(--cinza)}
.politicas-indice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:16px;background:var(--creme);border:1px solid var(--borda)}
.politicas-indice a{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;background:#fff;border:1px solid var(--borda);font-size:13px;text-decoration:none}
.politicas-indice a:hover{border-color:var(--laranja);color:var(--laranja)}
.politicas h3{margin-top:24px;font-size:15px}
.politicas ul{padding-left:20px;margin-bottom:16px}
.politicas li{margin-bottom:7px}
.politicas-faq dt{font-weight:600;margin-top:14px}
.politicas-faq dd{margin:5px 0 0;color:var(--cinza)}

/* Conta do cliente */
.btn-conta{display:inline-flex;align-items:center;min-height:44px;padding:11px 14px;border:1px solid var(--borda);text-decoration:none;font-size:13px;white-space:nowrap}
.btn-conta:hover{border-color:var(--preto)}
.conta-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:34px 0 70px;align-items:start}
.caixa-conta{border:1px solid var(--borda);padding:30px}
.caixa-conta h1,.caixa-conta h2{font-size:30px}
.caixa-conta form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.caixa-conta label{display:flex;flex-direction:column;gap:6px;font-size:12px}
.recuperar-conta{margin-top:20px;padding-top:18px;border-top:1px solid var(--borda)}
.conta-painel{display:grid;grid-template-columns:minmax(320px,.75fr) minmax(0,1.25fr);gap:42px;padding:22px 0 70px;align-items:start}
.confirmacao-pendente{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff5e8;border:1px solid var(--laranja);padding:14px 18px}
.confirmacao-pendente .secundario{margin-left:auto}
.conta-token{max-width:620px;margin:50px auto 80px}
.erro-form{margin:0;font-size:13px;color:#9b2410;min-height:1px}
.pedido-linha{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--borda);padding:18px 0}
.pedido-linha p{margin:2px 0 0}
/* Ficha vinda do anúncio: títulos de seção e bullets em vez de um parágrafo só. */
.ficha-titulo{font-family:Barlow,Impact,sans-serif;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);margin:20px 0 8px;font-weight:700}
.ficha-lista{margin:0 0 12px;padding-left:20px}
.ficha-lista li{margin-bottom:5px}
#descricao-produto>p{margin-bottom:10px}

.drawer{position:fixed;inset:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(470px,100%);max-width:100%;margin:0;padding:24px;border:0;overflow:auto}
.drawer::backdrop{background:#0008}
.drawer header{display:flex;align-items:center;justify-content:space-between}
.drawer header h2{margin:0}
.drawer .cta{margin:24px 0 12px}
.drawer>.secundario{width:100%;justify-content:center}
.item-carrinho-antigo{display:flex;justify-content:space-between;gap:12px;padding:24px 0;border-bottom:1px solid var(--borda)}
.item-carrinho-antigo label{font-size:11px;width:90px}
.item-carrinho-antigo select{width:100%;min-height:44px}
.item-carrinho-antigo p{font-size:13px;margin:4px 0}
.linha{display:flex;justify-content:space-between;gap:16px;margin:12px 0}
.total{border-top:1px solid var(--borda);padding-top:18px;font-size:21px}
.checkout-layout{display:grid;grid-template-columns:1fr .75fr;gap:60px;padding:30px 0 60px}
.checkout{display:block}
.checkout h2{font-size:25px;margin:10px 0 0}
.checkout input[type=radio]{accent-color:var(--laranja);width:24px;height:24px;margin:0 8px 0 0}
.checkout>.cta,.checkout>.secundario{width:100%;justify-content:center}
.checkout aside{align-self:start}
#resumo{border:1px solid var(--borda);padding:22px;align-self:start;position:sticky;top:24px}
#resumo h2{font-size:28px}
.qr{max-width:220px;margin:20px auto}
textarea{width:100%;min-height:100px}
.conteudo{max-width:780px;padding:40px 0 70px}
.conteudo h2{font-size:28px;margin-top:35px}
.erro-pagina{padding:40px 0 70px}
/* Oferta de entrada: um convite, não um pedágio. Abre uma vez por visitante,
   nunca sobre o carrinho ou o checkout, e o "Agora não" é tão clicável quanto o
   botão principal — quem fecha por engano não vira cliente. */
.cupom-aviso{background:#fff;border:1px solid var(--laranja);padding:13px 15px;font-size:13px;margin-bottom:14px}
.cupom-aviso b{display:block;margin-bottom:3px;font-family:Barlow,Impact,sans-serif;font-size:19px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--laranja)}
.oferta-entrada{border:0;padding:0;max-width:min(560px,calc(100% - 32px));width:100%;
  background:var(--creme);color:var(--preto);box-shadow:0 24px 60px -12px rgba(28,22,18,.45);
  display:grid;grid-template-columns:168px minmax(0,1fr)}
.oferta-entrada:not([open]){display:none}
.oferta-entrada::backdrop{background:rgba(28,22,18,.62);backdrop-filter:blur(3px)}
.oferta-selo{background:var(--laranja);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:28px 16px;text-align:center}
.oferta-selo b{font-family:Barlow,Impact,sans-serif;font-size:64px;font-weight:700;line-height:.9;letter-spacing:.02em}
.oferta-selo span{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.oferta-corpo{padding:34px 32px 28px;position:relative}
.oferta-corpo h2{font-size:30px;margin-bottom:10px;max-width:16ch}
.oferta-corpo p{font-size:14px;color:var(--cinza);margin-bottom:18px;max-width:44ch}
.oferta-corpo .cta{width:100%}
.oferta-corpo .link{display:block;margin:12px auto 0;color:var(--cinza);font-size:13px}
.oferta-corpo .link:hover{color:var(--preto)}
.oferta-regra{font-size:11px;line-height:1.45;color:var(--cinza);margin:16px 0 0;border-top:1px solid var(--borda);padding-top:12px}
/* z-index e obrigatorio aqui: o botao vem antes de .oferta-corpo no DOM e os
   dois sao posicionados sem camada. Em empate de z-index quem pinta por cima e
   o ultimo do DOM, entao acima de 560px — quando o dialogo vira grid de duas
   colunas e o corpo ocupa o canto onde o X mora — o corpo engolia o clique e o
   X nao fechava nada. No celular a coluna unica poe o selo debaixo do botao e
   o bug nao aparecia. */
.oferta-fechar{position:absolute;top:6px;right:6px;z-index:2;width:44px;height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--cinza);padding:0}
.oferta-fechar:hover{color:var(--laranja)}
.oferta-entrada[open]{animation:oferta-entra 320ms cubic-bezier(.16,1,.3,1) both}
.oferta-entrada[open]::backdrop{animation:oferta-fundo 320ms ease-out both}
@keyframes oferta-entra{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes oferta-fundo{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .oferta-entrada[open],.oferta-entrada[open]::backdrop{animation-duration:1ms}
}
@media(max-width:560px){
  .oferta-entrada{grid-template-columns:minmax(0,1fr)}
  .oferta-selo{flex-direction:row;gap:12px;padding:16px;justify-content:flex-start}
  .oferta-selo b{font-size:40px}
  .oferta-corpo{padding:24px 20px 20px}
  /* No celular o botao de fechar cai sobre a faixa laranja: cinza sobre laranja
     nao passa em contraste, entao ele fica branco. */
  .oferta-fechar{color:#fff}
  .oferta-fechar:hover{color:var(--creme)}
  .oferta-corpo h2{font-size:26px}
}

.consent{position:fixed;inset:auto 16px 16px auto;max-width:430px;width:calc(100% - 32px);margin:0;border:1px solid var(--borda);padding:24px;box-shadow:0 8px 40px #0002;z-index:30;font-size:12px}
.consent h2{font-size:26px}
.consent label{display:block;margin:10px 0}
.consent input{accent-color:var(--laranja);width:24px;height:24px;margin-right:8px;vertical-align:-4px}
.acoes{display:flex;gap:8px;margin:16px 0}
.acoes button{font-size:12px;padding:11px;flex:1}
.mensagem{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--preto);color:white;padding:16px 24px;z-index:100;max-width:90vw}

@media(max-width:1180px){
  .grade{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eixo{padding:0 20px}
  .duo-conceito{grid-template-columns:minmax(0,1fr)}
  .faixa-conceito figcaption{position:static;max-width:none;border-top:3px solid var(--laranja)}
  .pdp{gap:28px}
  .nav,.topo-in{gap:16px}
  .checkout-layout{gap:25px}
  .hero,.hero-paisagem{grid-template-columns:minmax(0,1fr)}
  .hero-copy{padding:24px 20px}
  .atalhos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:650px){
  .eixo{padding:0 16px}
  .faixa{font-size:11.5px;padding:8px}
  .nav,.topo-in{min-height:72px;flex-wrap:nowrap;gap:8px 10px;padding:8px 0}
  .marca{font-size:26px;gap:8px;letter-spacing:.08em}
  .marca img{height:48px}
  .busca{margin-left:auto}
  .busca.busca-aberta{position:absolute;left:12px;right:12px;z-index:32;background:#fff;padding:6px;border:1px solid var(--borda)}
  .busca.busca-aberta input{width:100%}
  .nav>button,.topo-in>button{padding:8px 12px;font-size:12px}
  .btn-conta{padding:8px 10px;font-size:12px}
  .subnav{gap:0;padding:0}
  .menu-sollu-in{gap:0;padding:0;justify-content:center}
  .menu-sollu .menu-link{padding:10px 6px;font-size:11px;letter-spacing:.04em}
  .grade-videos{grid-template-columns:1fr 1fr}
  .historia-fotos{grid-template-columns:1fr}
  .pdp-historia dl{grid-template-columns:1fr}
  .faixa-frete{padding:14px 12px;font-size:22px}
  .condicoes{grid-template-columns:1fr}
  .condicoes>div{padding:10px 14px;display:flex;gap:9px;align-items:baseline;justify-content:center;text-align:left}
  .condicoes>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .condicoes span{margin:0;font-size:19px;flex:0 0 auto}
  /* A copy desce para baixo da foto: nada de manchete solta sobre a imagem. */
  .hero,.hero-paisagem,.hero-slide{min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
  .foto-pendente,.foto-pendente-paisagem{min-height:0}
  .atalho,.atalho .foto-pendente{min-height:0}
  .hero-paisagem>.foto-pendente,.hero-paisagem>img,.hero-slide>.foto-pendente,.hero-slide>img{grid-area:1/1;min-height:0;height:auto}
  .hero-paisagem>.foto-pendente,.hero-slide>.foto-pendente{aspect-ratio:1920/900}
  .hero img,.hero-paisagem img{max-height:280px;object-fit:cover}
  .hero-copy{grid-area:2/1;padding:0;display:block}
  .hero-controles{position:static;padding:10px 0 4px;background:#fff}
  .hero-caixa{border:0;border-top:1px solid var(--borda);padding:24px 16px;max-width:none}
  .hero h1,.hero-copy h1{font-size:34px}
  .atalhos{grid-template-columns:minmax(0,1fr)}
  /* A prova e a experiência 529 abrem a parte editorial; os produtos vêm logo depois. */
  .home{display:flex;flex-direction:column}
  .home .prova-loja{order:1}
  .home .experiencia-529-home{order:2}
  .home .cabecalho-secao{order:3}
  .home .grade{order:4}
  .home .atalhos{order:5;padding:28px 0 0}
  .home .faixa-conceito{order:6}
  .home .duo-conceito{order:7}
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:30px}
  .pdp{grid-template-columns:1fr;gap:12px}
  .pdp-galeria{grid-template-columns:1fr}
  .faixa-conceito{margin-top:32px}
  .pdp h1{font-size:34px}
  .rodape{padding:0 20px 24px}
  .rodape-selos{grid-template-columns:1fr 1fr;margin:0 -20px}
  .rodape-selos>div{padding:16px 12px}
  .rodape-colunas{grid-template-columns:1fr;gap:26px;padding:28px 0 22px}
  .rodape-base{gap:12px}
  .whats-flutuante span{display:none}
  .whats-flutuante{padding:14px;border-radius:50%}
  .faixa-frete{gap:8px 16px;padding:13px 12px;font-size:20px}
  .politicas-indice{gap:6px;padding:12px}
  .checkout{grid-template-columns:1fr}
  .conta-layout,.conta-painel{grid-template-columns:minmax(0,1fr);gap:20px}
  .caixa-conta{padding:22px 18px}
  .pedido-linha{flex-direction:column;align-items:stretch;gap:10px}
  .checkout-layout{grid-template-columns:1fr}
  #resumo{position:static;grid-row:1}
}

@media(max-width:760px){
  .prova-conteudo{overflow-x:auto;padding:11px 18px;-webkit-overflow-scrolling:touch}
  .prova-intro{padding-right:16px}
  .prova-intro span{font-size:13px}
  .prova-destaques{flex:none}
  .prova-card{flex:none;padding:3px 16px}
  .prova-fonte{padding-left:16px;padding-right:4px}
}

@media(prefers-reduced-motion:no-preference){
  .prova-card{animation:prova-entrada linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  .prova-card:nth-child(2){animation-range:entry 12% cover 34%}
  .prova-card:nth-child(3){animation-range:entry 19% cover 40%}
  .prova-figura{animation:prova-figura-entrada linear both;animation-timeline:view();animation-range:entry 8% cover 27%}
  .prova-card:nth-child(2) .prova-figura{animation-range:entry 15% cover 34%}
  .prova-card:nth-child(3) .prova-figura{animation-range:entry 22% cover 41%}
}
@keyframes prova-entrada{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes prova-figura-entrada{from{opacity:0;transform:rotate(-14deg) scale(.72)}to{opacity:1;transform:none}}

/* ==================================================================
   MOVIMENTO — §8.2: 180–350 ms, nada em loop, nada que atrase o LCP.
   Tudo aqui e progressivo: sem suporte, o site fica exatamente como
   estava. O bloco de prefers-reduced-motion no fim desliga todos.
   ================================================================== */

/* A foto do card continua na PDP em vez de recarregar do zero.
   So o Chrome/Edge fazem hoje; nos outros e uma navegacao normal. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms}
/* Um nome visivel por vez: so o card clicado e a foto da PDP o carregam. */
.foto-card.saindo img.frente,.pdp-foto img{view-transition-name:foto-produto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Cartao: a foto cresce, a sombra levanta e o CTA acorda. */
.card{transition:transform 220ms ease,box-shadow 220ms ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px #1c161214}
.card .cta-card{background:transparent;color:var(--preto);border-color:var(--borda);
  transition:background 200ms ease,color 200ms ease,border-color 200ms ease}
.card:hover .cta-card,.card:focus-within .cta-card{background:var(--laranja);color:#fff;border-color:var(--laranja)}
/* Segunda cor aparece por cima no hover: mostra a variacao sem sair da grade. */
.foto-card{position:relative}
.foto-card img{transition:transform 300ms ease,opacity 260ms ease}
.foto-card .verso{position:absolute;inset:0;opacity:0;padding:inherit}
.card:has(.foto-card .verso):hover .foto-card .verso{opacity:1}
.card:has(.foto-card .verso):hover .foto-card .frente{opacity:0}

/* Preco sobe junto: micro-hierarquia, nao enfeite. */
.card .preco{transition:color 200ms ease}
.card:hover .preco{color:var(--laranja)}

/* Entrada por rolagem, em CSS puro. Sem JS, sem observer, sem conteudo
   preso em opacity:0 — @supports garante que so entra onde funciona. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    @keyframes surgir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    .card,.atalho,.faixa-conceito,.duo-conceito figure,.pdp-galeria figure{
      animation:surgir linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  }
}

/* Numero e cor: alvo cresce ao tocar, e o escolhido afunda um fio. */
.tamanhos button,.cores button{transition:background 160ms ease,color 160ms ease,
  border-color 160ms ease,transform 160ms ease}
.tamanhos button:not(:disabled):hover,.cores button:hover{border-color:var(--preto);transform:translateY(-2px)}
.tamanhos button[aria-pressed=true],.cores button[aria-pressed=true]{transform:none}

/* Lupa na PDP: o couro e a costura de perto — o motivo de a foto ser grande. */
.pdp-foto{position:relative;overflow:hidden;cursor:zoom-in}
.pdp-foto img{transition:transform 320ms ease;transform-origin:var(--lx,50%) var(--ly,50%)}
.pdp-foto:hover img{transform:scale(1.9)}
@media(hover:none){.pdp-foto{cursor:default}.pdp-foto:hover img{transform:none}}

/* Esqueleto enquanto a grade nao chega: sem salto de layout, sem texto solto. */
.esqueleto{display:grid;grid-template-columns:subgrid;grid-column:1/-1;gap:inherit}
.osso{background:#faf8f4;position:relative;overflow:hidden}
.osso::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#faf8f400,#ffffffcc 45%,#faf8f400);
  transform:translateX(-100%);animation:varrer 1.25s ease-in-out infinite}
@keyframes varrer{to{transform:translateX(100%)}}
.osso-foto{aspect-ratio:1}
.osso-linha{height:12px;margin-top:9px;width:70%}
.osso-linha.curta{width:44%}
.osso-linha.preco{height:20px;width:56%;margin-top:13px}

/* Sacola: o contador pulsa uma vez quando o par entra. */
@keyframes bater{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1)}}
.btn-carrinho[data-mudou]{animation:bater 340ms ease}
.mensagem{animation:subir 260ms ease}
@keyframes subir{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* Barra de compra fixa no celular depois que a numeracao foi escolhida (§8.3). */
.barra-compra{position:fixed;inset:auto 0 0;z-index:25;display:none;gap:14px;align-items:center;
  background:#fff;border-top:1px solid var(--borda);padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 26px #1c16121a;transform:translateY(100%);transition:transform 260ms ease}
.barra-compra[data-visivel]{transform:none}
.barra-compra .info{flex:1;min-width:0;font-size:12px;line-height:1.3}
.barra-compra .info b{display:block;font-size:15px;font-weight:600}
.barra-compra .cta{flex:0 0 auto}
@media(max-width:650px){.barra-compra{display:flex}body:has(.barra-compra[data-visivel]){padding-bottom:78px}}

/* ============ CARRINHO: drawer, página e checkout ============ */
/* O drawer é a mesma linguagem da página: muda a densidade, não o vocabulário. */
.drawer{width:min(468px,100%);padding:0;display:flex;flex-direction:column}
.drawer header{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--borda);padding:18px 24px}
.drawer header h2{font-size:22px}
.drawer header .contagem{font-family:Archivo,Arial,sans-serif;font-size:14px;font-weight:400;color:var(--cinza);text-transform:none;letter-spacing:0}
.fechar-drawer{border:0;background:none;font-size:26px;line-height:1;padding:4px 10px;min-height:40px}
.drawer .lista-itens{padding:0 24px}
.drawer #carrinho-cross-drawer{flex:1}
.drawer .cross-sell{padding:0 24px}
.drawer-rodape{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--borda);padding:16px 24px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 24px #1c161210}
.drawer-rodape .cta{width:100%;justify-content:center;margin:12px 0 8px;text-align:center}
.drawer-rodape .secundario{width:100%;justify-content:center}
.carrinho-vazio-drawer{padding:40px 0;text-align:center}
.carrinho-vazio-drawer a{display:inline-block;margin-top:12px}

/* Item: foto sempre. Sem foto pronta, o slot listrado avisa em vez de sumir. */
.item-carrinho{display:grid;grid-template-columns:var(--foto-item,88px) minmax(0,1fr) auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--borda);align-items:start}
.item-carrinho .foto-item{display:block;width:var(--foto-item,88px);background:var(--creme);border:1px solid var(--borda);overflow:hidden}
.item-carrinho .foto-item img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.item-carrinho .foto-item .foto-pendente{width:100%;aspect-ratio:1;display:grid;place-items:center;margin:0}
.item-carrinho .foto-item .foto-pendente p{font-size:9px;line-height:1.2;margin:0;padding:4px;text-align:center}
.item-corpo{min-width:0}
.item-corpo h3{margin:2px 0 6px;font-size:15px}
.item-corpo h3 a{text-decoration:none;min-height:24px}
.item-ref{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.item-atributos{margin:0 0 6px;font-size:13px;color:var(--cinza);display:flex;flex-wrap:wrap;gap:4px 14px}
.item-atributos b{color:var(--preto)}
.item-estoque{margin:0;font-size:12px}
.item-estoque.bom{color:var(--pix)}
.item-estoque.atencao{color:var(--laranja)}
.item-estoque.ruim{color:#a3231b}
.item-estoque.neutro{color:var(--cinza)}
.item-unitario{margin:6px 0 0;font-size:12px;color:var(--cinza)}
.item-acoes{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.item-total{margin:0;font-size:16px;white-space:nowrap}
.item-total s{font-size:12px;color:var(--cinza)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--borda)}
.stepper button{border:0;background:none;min-height:44px;min-width:44px;padding:0;font-size:17px;line-height:1}
.stepper output{min-width:34px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px}
.remover{font-size:12px;color:var(--cinza)}
button.link{border:0;background:none;padding:0;min-height:32px;text-decoration:underline;text-underline-offset:3px}

/* Totais: mesma tabela no drawer, no carrinho e no checkout. */
.resumo-valores .linha{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14px}
.resumo-valores .linha.desconto b{color:var(--pix)}
.resumo-valores .linha.total{border-top:1px solid var(--borda);margin-top:6px;padding-top:12px;font-size:18px}
.resumo-valores .linha b{white-space:nowrap}
.resumo-valores .gratis{color:var(--pix);font-style:normal;font-weight:600}
.resumo-valores .pendente{color:var(--cinza);font-style:normal;font-weight:400;font-size:13px}
.resumo-valores .linha-nota{margin:0 0 6px;font-size:12px;color:var(--cinza)}
.resumo-valores .linha-nota.alerta{color:var(--laranja)}
.resumo-valores .linha-nota.politica{color:var(--pix)}
.faixa-conquista.parcial{background:#fdf3e8;border-color:#f0d9bd;color:var(--laranja);font-weight:600}
.total-pix{margin:8px 0 0;font-size:15px;color:var(--pix)}
.total-pix b{font-size:19px}
.total-pix small{color:var(--cinza);font-size:12px}
.total-parcela{margin:4px 0 0;font-size:13px;color:var(--cinza)}
.economia{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--pix);background:#eef5ee;border:1px solid #d6e6d7;padding:8px 12px}
.resumo-valores .aviso{margin:8px 0 0;font-size:12px;color:var(--cinza)}
.carregando{color:var(--cinza);font-size:13px}
.selo-seguro{margin:10px 0 0;font-size:11px;letter-spacing:.04em;color:var(--cinza);text-align:center}
.faixa-conquista{margin:0;padding:12px 24px;background:#eef5ee;border-bottom:1px solid #d6e6d7;color:var(--pix);font-size:13px;font-weight:600}
.faixa-conquista.pendente{background:var(--creme);border-color:var(--borda);color:var(--cinza);font-weight:400}

/* Cross-sell: trilho horizontal, sem carrossel automático. */
.cross-sell{padding:24px 0 8px}
.cross-sell h2{font-size:20px;margin-bottom:14px}
.cross-trilho{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.cross-card{flex:0 0 168px;scroll-snap-align:start}
.cross-foto{display:block;background:var(--creme);border:1px solid var(--borda)}
.cross-foto img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.cross-foto .foto-pendente{aspect-ratio:1;display:grid;place-items:center;margin:0}
.cross-card h3{font-size:13px;margin:4px 0 6px}
.cross-card h3 a{text-decoration:none;min-height:24px}
.cross-preco{margin:0 0 8px;font-size:14px;font-weight:600}
.cross-preco small{display:block;font-weight:400;font-size:11px;color:var(--cinza)}
.cross-cta{display:block;text-align:center;font-size:12px;padding:9px;text-decoration:none;border:1px solid var(--borda)}

/* Página do carrinho: itens à esquerda, resumo colado à direita. */
.carrinho-layout{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:40px;align-items:start}
.cabecalho-tabela{display:grid;grid-template-columns:1fr 132px 132px;gap:16px;padding:0 0 10px;border-bottom:2px solid var(--preto);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.cabecalho-tabela span+span{text-align:center}
/* A página alinha item e cabeçalho em quatro colunas; o drawer fica em três. */
.carrinho-itens .item-carrinho{grid-template-columns:var(--foto-item,120px) minmax(0,1fr) 132px 132px;row-gap:6px}
.carrinho-itens .item-acoes{display:contents}
.carrinho-itens .stepper{grid-column:3;grid-row:1;justify-self:center;align-self:start}
.carrinho-itens .item-total{grid-column:4;grid-row:1;justify-self:end;align-self:start;text-align:right}
.carrinho-itens .item-total s{display:block}
.carrinho-itens .remover{grid-column:4;grid-row:2;justify-self:end;align-self:start}
.carrinho-itens .item-carrinho{--foto-item:120px}
.carrinho-resumo{position:sticky;top:168px;border:1px solid var(--borda);background:var(--creme);padding:22px}
.carrinho-resumo h2{font-size:20px}
.carrinho-resumo .cta,.carrinho-resumo .secundario{display:block;width:100%;text-align:center;text-decoration:none;margin-top:12px}
.carrinho-resumo .cta{padding:15px}
.carrinho-resumo .secundario{padding:13px;border:1px solid var(--borda);background:#fff}
.resumo-nota{margin:10px 0 0;font-size:12px;color:var(--cinza)}
.carrinho-ferramentas{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--borda)}
.ferramenta label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);margin-bottom:8px}
.campo-botao{display:flex;gap:8px}
.campo-botao input{flex:1;min-width:0;padding:12px;border:1px solid var(--borda);min-height:46px}
.campo-botao button{flex:0 0 auto}
.ferramenta-nota{margin:8px 0 0;font-size:12px}
.ferramenta p[role=status]{margin:8px 0 0;font-size:13px}
.carrinho-vazio{text-align:center;padding:64px 0 40px}
.carrinho-vazio .cta{display:inline-block;margin-top:8px;text-decoration:none;padding:15px 32px}
.cabecalho-secao .contagem{font-family:Archivo,Arial,sans-serif;font-size:14px;font-weight:400;color:var(--cinza);text-transform:none;letter-spacing:0}
.barra-carrinho{position:fixed;inset:auto 0 0;z-index:25;display:none;gap:14px;align-items:center;background:#fff;border-top:1px solid var(--borda);padding:11px 16px calc(11px + env(safe-area-inset-bottom));box-shadow:0 -8px 26px #1c16121a}
.barra-carrinho div{flex:1;min-width:0;line-height:1.25}
.barra-carrinho b{display:block;font-size:17px}
.barra-carrinho span{font-size:12px;color:var(--cinza)}
.barra-carrinho .cta{flex:0 0 auto;text-decoration:none}

/* Checkout: passos visíveis, campos agrupados e o pedido com foto ao lado. */
.passos{display:flex;gap:8px;list-style:none;margin:24px 0 0;padding:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cinza);counter-reset:passo}
.passos li{counter-increment:passo;display:flex;align-items:center;gap:8px}
.passos li::before{content:counter(passo);display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--borda);border-radius:50%;font-size:11px}
.passos li+li::after{content:'';order:-1;width:22px;height:1px;background:var(--borda)}
.passos li[aria-current]{color:var(--preto);font-weight:600}
.passos li[aria-current]::before{background:var(--preto);color:#fff;border-color:var(--preto)}
.passos a{text-decoration:none}
.bloco-form{border:1px solid var(--borda);padding:20px;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bloco-form legend{font-family:Barlow,Impact,sans-serif;font-size:19px;text-transform:uppercase;padding:0 8px;display:flex;align-items:center;gap:8px}
.passo-num{display:grid;place-items:center;width:24px;height:24px;background:var(--preto);color:#fff;border-radius:50%;font-family:Archivo,Arial,sans-serif;font-size:12px}
.bloco-form label{display:block;font-size:12px;letter-spacing:.04em;color:var(--cinza)}
.bloco-form label.inteiro{grid-column:1/-1}
.bloco-form input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--borda);min-height:46px;color:var(--preto)}
.bloco-form small{display:block;margin-top:5px;font-size:11px;color:var(--cinza)}
.meios{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.meio{display:flex;align-items:center;gap:10px;border:1px solid var(--borda);padding:14px;cursor:pointer}
.meio:has(input:checked){border-color:var(--preto);background:var(--creme)}
.meio input{width:auto;min-height:0;margin:0}
.meio span{display:block;line-height:1.3}
.meio b{display:block;font-size:14px;color:var(--preto)}
.meio small{margin-top:2px}
.bloco-form .aviso{grid-column:1/-1;margin:0;font-size:12px;color:var(--cinza)}
.checkout-resumo{position:sticky;top:168px;border:1px solid var(--borda);background:var(--creme);padding:22px}
.checkout-resumo h2{font-size:20px}
.lista-itens.compacta .item-carrinho{--foto-item:64px;grid-template-columns:var(--foto-item) minmax(0,1fr);padding:12px 0}

.lista-itens.compacta .item-acoes{display:none}
.lista-itens.compacta h3{font-size:13px}

@media(max-width:1000px){
  .carrinho-layout{grid-template-columns:1fr;gap:28px}
  .carrinho-resumo,.checkout-resumo{position:static}
  .cabecalho-tabela{display:none}
}
@media(max-width:650px){
  .carrinho-ferramentas{grid-template-columns:1fr;gap:20px}
  .bloco-form,.meios{grid-template-columns:1fr}
  .item-carrinho,.carrinho-itens .item-carrinho{grid-template-columns:var(--foto-item,92px) minmax(0,1fr);gap:12px}
  .item-acoes{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .carrinho-itens .item-acoes{display:flex}
  .carrinho-itens .stepper,.carrinho-itens .item-total,.carrinho-itens .remover{grid-column:auto;grid-row:auto;justify-self:auto}
  .carrinho-itens .item-total s{display:inline}
  .carrinho-itens .item-carrinho{--foto-item:92px}
  .barra-carrinho{display:flex}
  body:has(.barra-carrinho:not([hidden])){padding-bottom:80px}
  .passos{font-size:11px;gap:4px;letter-spacing:.04em}
  .passos li+li::after{width:12px}
}

/* Quem pediu menos movimento nao ganha zoom de card nem transicao nenhuma. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;animation-timeline:auto!important;scroll-behavior:auto!important}
  .card:hover,.card:hover .foto-card img,.pdp-foto:hover img,
  .tamanhos button:hover,.cores button:hover,.btn-favorito:hover{transform:none}
  .osso::after{display:none}
  .card:has(.foto-card .verso):hover .foto-card .verso{opacity:1}
  .card:has(.foto-card .verso):hover .foto-card .frente{opacity:0}
}

/* ============ LEVA DE 08/09/2026 ============
   Carrinho e favorito no cabeçalho, seções por categoria na home, galeria por
   variação de cor na PDP, preço sugerido em vermelho e o bloco de avaliação
   com peso de página que vende. */

:root{--vermelho:#b42318;--estrela:#c9791a;--estrela-vazia:#ddd3c4;
  /* O laranja da marca sobre o creme da faixa de prova da 3,8:1 — abaixo do
     piso da WCAG AA. Este tom de terra passa de 5:1 no mesmo fundo. */
  --terra:#9c430a}

/* ---- cabeçalho: carrinho e favoritos ---- */
.nav>.btn-carrinho,.nav>.btn-favoritos{display:inline-flex;align-items:center;gap:8px;position:relative;
  min-height:44px;padding:9px 14px;text-decoration:none;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--preto);background:transparent;border:1px solid var(--borda)}
.nav>.btn-favoritos:hover,.nav>.btn-carrinho:hover{border-color:var(--preto)}
.nav>.btn-carrinho .ico,.nav>.btn-favoritos .ico{width:22px;height:22px}
.pino{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;background:var(--laranja);color:#fff;border-radius:11px;
  font-family:Archivo,Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:0}
.pino[data-mudou]{animation:bater 340ms ease}
/* display:grid vence o [hidden] do agente do usuario: sem isto o contador
   mostra um "0" laranja permanente no topo de toda pagina. */
.pino[hidden]{display:none}
@media(max-width:860px){.nav>.btn-carrinho .btn-rotulo,.nav>.btn-favoritos .btn-rotulo{display:none}
  .nav>.btn-carrinho,.nav>.btn-favoritos{padding:9px 12px}}

/* ---- o preço sugerido é vermelho: o risco tem que ser lido como corte ---- */
.de s{color:var(--vermelho);text-decoration-thickness:2px;text-decoration-color:var(--vermelho)}
.item-total s,.economia{color:var(--vermelho)}

/* ---- estrelas desenhadas ---- */
.estrelas{width:100px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:-4px}
.estrelas .trilho{fill:var(--estrela-vazia)}
.estrelas .cheia{fill:var(--estrela)}
.estrelas-pequena{width:80px;height:16px}
.estrelas-grande{width:150px;height:30px}

/* ---- Pottro em números: a nota é a protagonista, não um cartãozinho ---- */
.prova-loja{background:linear-gradient(118deg,#efe3d2 0%,#fdfaf5 46%,#eee1cf 100%);border-top:1px solid #ddcdb9;padding:30px 0 34px}
.prova-titulo{max-width:var(--eixo);margin:auto;padding:0 24px;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.06em;color:var(--terra)}
.prova-conteudo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px 44px;
  max-width:var(--eixo);margin:auto;padding:16px 24px 0;white-space:normal}
.prova-nota{display:flex;align-items:center;gap:18px;padding-right:44px;border-right:1px solid #ddcdb9}
.prova-nota b{font-family:Barlow,Impact,sans-serif;font-size:clamp(54px,7vw,86px);line-height:.82;letter-spacing:.01em}
.prova-nota-corpo{display:grid;gap:6px}
.prova-nota-corpo span{font-size:13px;color:var(--cinza)}
.prova-medidas{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0}
.prova-medidas div{display:grid;gap:2px}
.prova-medidas dt{font-family:Barlow,Impact,sans-serif;font-size:clamp(26px,3.4vw,38px);line-height:.9;letter-spacing:.02em}
.prova-medidas dd{margin:0;font-size:12px;color:var(--cinza);line-height:1.4;max-width:16ch}
.prova-fonte{grid-column:1/-1;margin:0;padding:0;border:0;color:var(--cinza);font-size:11px}
@media(max-width:860px){
  .prova-conteudo{grid-template-columns:minmax(0,1fr);gap:16px}
  .prova-nota{padding:0 0 16px;border-right:0;border-bottom:1px solid #ddcdb9}
  .prova-medidas{gap:10px 24px}
}

/* ---- prova da PDP: estrela + nota + link para as avaliações ---- */
.prova-pdp{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:14px;margin:-4px 0 20px}
.prova-pdp b{font-size:17px;color:var(--preto)}
.prova-pdp a{color:var(--preto)}
.prova-pares{color:var(--cinza)}
.prova-pdp small{flex-basis:100%}

/* ---- home: uma seção por categoria, na ordem do menu ---- */
.secao-categoria+.secao-categoria{border-top:1px solid var(--borda)}
.secao-categoria .cabecalho-secao{padding-top:52px;align-items:end}
.linha-categoria{margin:8px 0 0;font-size:13px;color:var(--cinza);max-width:56ch}
.topo-modelos h2{margin-bottom:0}
#grade-categorias .grade{padding-bottom:44px;min-height:0}

/* ---- card: foto leva ao anúncio, coração salva a REF ---- */
.card-midia{position:relative}
.btn-favorito{position:absolute;top:10px;right:10px;z-index:3;width:44px;height:44px;min-height:44px;
  display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--borda);
  background:rgba(255,255,255,.92);color:var(--preto);backdrop-filter:blur(3px);
  transition:transform 160ms ease,color 160ms ease,border-color 160ms ease}
.btn-favorito:hover{border-color:var(--vermelho);color:var(--vermelho);transform:scale(1.06)}
.btn-favorito[aria-pressed=true]{color:var(--vermelho);border-color:var(--vermelho)}
.btn-favorito[aria-pressed=true] .ico path{fill:var(--vermelho)}
.btn-favorito .ico{width:22px;height:22px}
.pdp-foto .btn-favorito{top:14px;right:14px}
.btn-favorito-linha{display:inline-flex;align-items:center;gap:10px;margin-top:10px}
.btn-favorito-linha[aria-pressed=true]{border-color:var(--vermelho);color:var(--vermelho)}
.btn-favorito-linha[aria-pressed=true] .ico path{fill:var(--vermelho)}

/* ---- PDP: cada cor com o seu jogo de fotos ---- */
.pdp-midia{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start}
.pdp-thumbs-coluna{min-width:0}
.pdp-thumbs{display:flex;flex-direction:column;gap:10px}
.pdp-thumb{width:84px;height:84px;min-height:84px;padding:3px;background:#fff;border:1px solid var(--borda);
  display:grid;place-items:center;overflow:hidden;transition:border-color 140ms ease}
.pdp-thumb img{width:100%;height:100%;object-fit:contain}
.pdp-thumb:hover{border-color:var(--preto)}
.pdp-thumb[aria-pressed=true]{border:2px solid var(--laranja);padding:2px}
.pdp-thumb-pendente{cursor:default;background:repeating-linear-gradient(-45deg,#f4efe7,#f4efe7 8px,#eae2d5 8px,#eae2d5 16px);
  border:1px dashed #cbbfae;text-align:center}
.pdp-thumb-pendente p{margin:0;font-size:9px;line-height:1.25;color:var(--cinza);padding:4px;text-transform:uppercase;letter-spacing:.04em}
.pdp-cores{margin-top:4px}
.rotulo-cor{margin:0 0 8px;font-size:14px}
.pdp-cores .cores{gap:10px;margin:0 0 22px}
.pdp-cores .cores button{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;background:#fff;color:var(--preto)}
.pdp-cores .cores button img,.pdp-cores .cores button .foto-pendente{width:38px;height:38px;flex:0 0 38px;object-fit:contain;min-height:0;padding:0;margin:0}
.pdp-cores .cores button span{font-size:14px}
.pdp-cores .cores button small{font-size:10px;color:var(--cinza);text-transform:uppercase;letter-spacing:.04em}
.pdp-cores .cores button[aria-pressed=true]{background:#fff;color:var(--preto);border-color:var(--preto);box-shadow:inset 0 0 0 1px var(--preto)}
@media(max-width:900px){
  .pdp-midia{grid-template-columns:minmax(0,1fr)}
  .pdp-thumbs{flex-direction:row;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
  .pdp-thumb{flex:0 0 72px;width:72px;height:72px;min-height:72px;scroll-snap-align:start}
  .pdp-midia>.pdp-thumbs-coluna{order:2}
}

/* ---- vídeos: sem número obrigatório ---- */
.grade-videos-vazia{grid-template-columns:minmax(0,1fr)}
.grade-videos-vazia .video-pendente{aspect-ratio:auto;min-height:180px}
.video-item{margin:0}
.video-item video{width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}
.video-item figcaption{font-size:12px;color:var(--cinza);padding-top:8px}

/* ---- avaliações: a seção que fecha a dúvida antes do botão ---- */
.avaliacoes{border-top:1px solid var(--borda);margin-top:52px;padding-top:34px}
.avaliacoes h2{font-size:32px}
.avaliacoes-resumo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px 48px;align-items:center;
  background:var(--creme);border:1px solid var(--borda);padding:26px 28px;margin-bottom:26px}
.avaliacoes-nota{display:grid;justify-items:start;gap:8px}
.avaliacoes-nota b{font-family:Barlow,Impact,sans-serif;font-size:64px;line-height:.82}
.avaliacoes-nota span{font-size:13px;color:var(--cinza)}
.avaliacoes-fonte{margin:0;font-size:11px;color:var(--cinza);max-width:34ch;line-height:1.5}
.avaliacoes-barras{display:grid;gap:7px;min-width:0}
.barra-nota{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12px;color:var(--cinza)}
.barra-rotulo{width:1ch;text-align:right;font-variant-numeric:tabular-nums}
.barra{width:100%;height:8px}
.barra .trilho{fill:var(--estrela-vazia)}
.barra .cheia{fill:var(--estrela)}
.barra-nota .qtd{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.avaliacoes-pares{font-size:13px;color:var(--cinza);margin-bottom:18px}
.avaliacoes-lista{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.avaliacao{border:1px solid var(--borda);padding:18px 20px}
.avaliacao-topo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:8px}
.avaliacao-topo b{font-size:14px}
.avaliacao-topo time{font-size:12px;color:var(--cinza)}
.selo-verificada{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--pix);
  border:1px solid var(--pix);padding:3px 7px;line-height:1}
.avaliacao p{margin:0;font-size:14px;line-height:1.6;max-width:72ch}
.avaliacao .sem-texto{color:var(--cinza);font-style:italic}
.avaliacoes-vazio{font-size:14px;color:var(--cinza);line-height:1.6;max-width:72ch;
  border-left:1px solid var(--borda);padding-left:16px}
@media(max-width:760px){
  .avaliacoes-resumo{grid-template-columns:minmax(0,1fr);padding:20px}
  .avaliacoes-nota{justify-items:center;text-align:center}
}

/* ---- favoritos: a página da lista salva ---- */
#favoritos-grade:empty{display:none}