:root{--azul:#016cf5;--ciano:#00c3fe;--escuro:#1e3369;--amarelo:#ffe45b;--laranja:#ff9900;--fundo:#f4f8ff}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1b2333;background:var(--fundo);line-height:1.5}
a{color:var(--azul)}
.topo{background:linear-gradient(135deg,var(--azul),var(--ciano));padding:10px 16px;position:sticky;top:0;z-index:5;box-shadow:0 2px 8px #0002}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem}
.marca img{border-radius:50%;background:#fff}
main{max-width:960px;margin:0 auto;padding:16px}
.intro{text-align:center;padding:12px 0 20px}
.intro img{border-radius:50%;box-shadow:0 4px 14px #016cf533}
.intro h1{margin:8px 0 0;color:var(--escuro);font-size:1.7rem}
.intro p{margin:4px 0 14px;font-size:1.1rem;color:#44506a}
.insta{display:inline-block;padding:10px 16px;border-radius:999px;background:#fff;border:2px solid var(--azul);font-weight:700;text-decoration:none}
main{max-width:600px}
.grade{display:flex;flex-direction:column;gap:0}
.card{background:#fff;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 2px 10px #1e336915;display:flex;flex-direction:row;align-items:stretch}
.card>img,.card>.semfoto{width:38%;max-width:200px;flex:none;align-self:center}
.card img,.produto img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.semfoto{aspect-ratio:1/1;display:grid;place-items:center;background:#e3ecfb;color:#667}
.info{padding:12px;min-width:0;display:flex;flex-direction:column;gap:6px;flex:1}
.info h2{font-size:1.1rem;margin:0;color:var(--escuro)}
.tipo{align-self:flex-start;background:var(--amarelo);color:#1b2333;font-weight:800;font-size:.75rem;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
.tipo.grande{display:inline-block;font-size:.95rem;padding:6px 12px}
.btn-sec{margin-top:auto;text-align:center;background:var(--azul);color:#fff;font-weight:700;padding:8px;border-radius:8px;font-size:.9rem}
.produto{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 10px #1e336915;max-width:620px;margin:0 auto}
.produto h1{margin:8px 0 12px;color:var(--escuro);font-size:1.6rem}
.produto img{border-radius:12px}
.destaque{font-size:1.1rem;font-weight:600;margin-top:16px}
.beneficios{list-style:none;padding:0;margin:0 0 12px}
.beneficios li{padding:8px 0;border-bottom:1px solid #e8eef8}
.btn-comprar{display:block;text-align:center;background:var(--laranja);color:#111;font-weight:800;font-size:1.2rem;padding:16px;border-radius:12px;text-decoration:none;box-shadow:0 4px 0 #c67600;margin:18px 0 10px}
.btn-comprar:active{transform:translateY(2px);box-shadow:0 2px 0 #c67600}
.aviso{font-size:.85rem;color:#556;text-align:center}
.voltar{font-weight:700;text-decoration:none}
.rodape{text-align:center;padding:24px 16px 32px;color:#44506a;font-size:.9rem;background:#fff;margin-top:24px;border-top:4px solid var(--ciano)}
.rodape p{margin:6px 0}
.preco{margin:4px 0;color:#0b7a2e}
.preco strong{font-size:1.15rem}
.preco small{display:block;color:#667;font-size:.75rem}
.produto .preco{text-align:center;margin-top:16px}
.produto .preco strong{font-size:1.6rem}
.codigo{font-size:.8rem;color:#556;font-weight:600;margin:0}
.produto .codigo{margin:-6px 0 12px;font-size:.9rem}
.buscar{margin:0 0 16px}
.buscar label{display:block;font-weight:700;color:var(--escuro);margin-bottom:6px}
.buscar input{width:100%;font-size:1.05rem;padding:12px 14px;border:2px solid #c9d8f2;border-radius:12px;background:#fff}
.buscar input:focus{outline:none;border-color:var(--azul)}
.card[hidden]{display:none}
.vazio{text-align:center;font-weight:700;color:#556;padding:24px;background:#fff;border-radius:12px}
/* Linha divisória clara entre os produtos (não aparece depois do último, nem em itens escondidos pela busca) */
.grade .card{position:relative;overflow:visible}
.grade .card>img,.grade .card>.semfoto{border-radius:14px 0 0 14px}
.grade .card:not([hidden]) ~ .card:not([hidden]){margin-top:33px}
.grade .card:not([hidden]) ~ .card:not([hidden])::before{content:"";position:absolute;left:8px;right:8px;top:-17px;height:1px;background:#e3e8ef}