/* LUNAM — site público (lunam.com.br). Segue /srv/projects/lunam/DESIGN.md (seção "Site público"). Tema claro da marca. */
:root{
  --bg:#fbf8f4; --creme:#f4ede4; --creme-2:#ece2d6; --branco:#fff; --borda:#e6dccf; --texto:#2f251e; --texto-2:#6b5a4c; --muted:#9a8a7d;
  --marrom:#7a5c48; --marrom-esc:#5e4535; --dourado:#b8925a; --ok:#2f7d32; --promo:#a8463a;
  --serif:'Gilda Display',Georgia,'Times New Roman',serif; --sans:'Jost','Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --max:1320px; --raio:2px; --sombra:0 18px 40px -24px rgba(60,40,25,.35);
  color-scheme:light;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--texto);font:400 15px/1.6 var(--sans);letter-spacing:.01em;font-feature-settings:'lnum' 1}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--marrom);outline-offset:3px}

/* faixa de aviso + cabeçalho */
.aviso{background:var(--marrom);color:#f6ede4;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px}
header.topo{position:sticky;top:0;z-index:20;background:rgba(251,248,244,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--borda)}
.topo .linha{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px}
.topo .marca img{height:40px;width:auto}
.menu{display:flex;gap:28px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.menu a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s}.menu a:hover,.menu a.ativo{border-color:var(--marrom)}
.acoes{display:flex;justify-content:flex-end;gap:14px;align-items:center}
.icone-btn{background:none;border:0;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}.icone-btn:hover{background:var(--creme)}
.icone-btn svg{width:20px;height:20px}.so-mobile{display:none}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:min(78vh,720px);background:var(--creme)}
.hero .foto{position:relative;overflow:hidden}.hero .foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero .texto{display:flex;flex-direction:column;justify-content:center;padding:64px clamp(24px,6vw,96px)}
.sobretitulo{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--texto-2)}
.hero h1{font:400 clamp(44px,6vw,86px)/1.02 var(--serif);margin:18px 0 18px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--marrom)}
.hero p{font-size:17px;color:var(--texto-2);max-width:440px;margin:0 0 34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 34px;border:1px solid var(--texto);background:var(--texto);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s;border-radius:var(--raio)}
.btn:hover{background:var(--marrom);border-color:var(--marrom)}.btn.claro{background:transparent;color:var(--texto)}.btn.claro:hover{background:var(--texto);color:#fff}
.btn.ml{background:#2d3277;border-color:#2d3277}.btn.ml:hover{background:#1f2357;border-color:#1f2357}

/* faixa de benefícios */
.beneficios{border-bottom:1px solid var(--borda);background:var(--bg)}
.beneficios .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:26px;padding-bottom:26px}
.beneficio{display:flex;gap:14px;align-items:center}.beneficio svg{width:26px;height:26px;flex:none;color:var(--marrom)}
.beneficio b{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}.beneficio span{font-size:13px;color:var(--texto-2)}

/* seções */
section.bloco{padding:clamp(56px,8vw,104px) 0}
.titulo-secao{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
.titulo-secao h2{font:400 clamp(34px,4.2vw,54px)/1.1 var(--serif);margin:10px 0 10px}
.titulo-secao p{color:var(--texto-2);max-width:560px;margin:0 auto}

/* categorias */
.categorias{display:flex;justify-content:center;gap:clamp(18px,4vw,56px);flex-wrap:wrap}
.categoria{text-align:center;width:170px;cursor:pointer;background:none;border:0;padding:0}
.categoria .circ{width:170px;height:170px;border-radius:50%;overflow:hidden;background:var(--creme);margin-bottom:14px;transition:transform .35s}
.categoria:hover .circ{transform:scale(1.04)}.categoria .circ img{width:100%;height:100%;object-fit:cover}
.categoria b{font:400 22px var(--serif)}.categoria span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}

/* grade de produtos */
.ferramentas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:26px;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);padding:14px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--borda);background:transparent;padding:8px 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:999px}
.chip[aria-pressed=true]{background:var(--texto);color:#fff;border-color:var(--texto)}
.ferramentas .dir{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.busca{position:relative}.busca input{height:42px;width:240px;max-width:100%;padding:0 14px 0 38px;border:1px solid var(--borda);background:var(--branco);font:inherit;font-size:14px;border-radius:999px;outline:none}
.busca input:focus{border-color:var(--marrom)}.busca svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
select.ordenar{height:42px;padding:0 14px;border:1px solid var(--borda);background:var(--branco);font:inherit;font-size:13px;border-radius:999px;color:var(--texto)}
.grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px) clamp(12px,1.6vw,22px)}
.produto{position:relative;cursor:pointer;display:block;background:none;border:0;padding:0;text-align:left}
.produto .img{position:relative;aspect-ratio:1/1;background:var(--creme);overflow:hidden}
.produto .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .9s}
.produto .img img.alt{opacity:0}.produto:hover .img img.alt{opacity:1}.produto:hover .img img{transform:scale(1.03)}
.selo{position:absolute;top:12px;left:12px;z-index:2;background:var(--branco);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
.selo.promo{background:var(--promo);color:#fff;left:auto;right:12px}
.produto .info{padding:14px 2px 0}.produto h3{font:500 15px/1.35 var(--sans);margin:0 0 6px;letter-spacing:.01em}
.preco{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.preco b{font-size:16px;font-weight:500}.preco s{color:var(--muted);font-size:13px}
.onde{font-size:12px;color:var(--texto-2);margin-top:4px;letter-spacing:.04em}
.vazio{grid-column:1/-1;text-align:center;padding:40px;color:var(--texto-2)}

/* editorial */
.editorial{display:grid;grid-template-columns:1fr 1fr;background:var(--creme)}
.editorial .foto{min-height:520px;position:relative}.editorial .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.editorial .texto{padding:clamp(40px,7vw,110px);display:flex;flex-direction:column;justify-content:center}
.editorial h2{font:400 clamp(34px,4vw,52px)/1.1 var(--serif);margin:14px 0 18px}.editorial p{color:var(--texto-2);max-width:480px}
.editorial ul{list-style:none;padding:0;margin:20px 0 30px;display:grid;gap:10px}.editorial li{display:flex;gap:10px;align-items:center}.editorial li .ic{color:var(--dourado);width:14px;height:14px}

/* cuidados */
.cuidados{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.cuidados img{width:100%;box-shadow:var(--sombra)}
.dicas{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;margin-top:22px}.dica b{font:400 21px var(--serif);display:block;margin-bottom:4px}.dica p{margin:0;color:var(--texto-2);font-size:14px}

/* onde comprar (marketplaces) */
.canais{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.canal{border:1px solid var(--borda);background:var(--branco);padding:18px 26px;min-width:220px;text-align:center}
.canal b{display:block;font:400 22px var(--serif)}.canal span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}.canal.breve{opacity:.55}

/* rodapé */
footer{background:#2a201a;color:#e9ddd0;padding:64px 0 28px;margin-top:0}
footer .colunas{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer img{height:56px;width:auto;margin-bottom:14px}footer h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px;color:#fff;font-weight:500}
footer p,footer li{font-size:14px;color:#cdbdae;margin:0 0 8px}footer ul{list-style:none;padding:0;margin:0}footer a:hover{color:#fff}
footer .legal{border-top:1px solid #4a3a2f;margin-top:40px;padding-top:20px;font-size:12px;color:#a8978a;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* detalhe do produto (modal e página) */
.modal{position:fixed;inset:0;z-index:50;display:none}.modal.aberto{display:block}
.modal .fundo{position:absolute;inset:0;background:rgba(30,22,16,.55);backdrop-filter:blur(2px)}
.modal .caixa{position:absolute;inset:4vh 4vw;background:var(--bg);overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal .fechar{position:sticky;top:0;margin-left:auto;display:flex;justify-content:flex-end;padding:10px;z-index:2}
.detalhe{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);padding:0 clamp(16px,4vw,56px) clamp(24px,4vw,56px)}
.galeria{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start}
.galeria .miniaturas{display:flex;flex-direction:column;gap:10px;max-height:640px;overflow:auto}
.galeria .miniaturas button{border:1px solid transparent;padding:0;background:var(--creme);cursor:pointer;aspect-ratio:1/1}.galeria .miniaturas button[aria-current=true]{border-color:var(--texto)}
.galeria .principal{aspect-ratio:1/1;background:var(--creme)}.galeria .principal img{width:100%;height:100%;object-fit:cover}
.detalhe h1,.detalhe h2.nome{font:400 clamp(30px,3.2vw,44px)/1.12 var(--serif);margin:6px 0 10px}
.detalhe .preco b{font-size:24px}.detalhe .preco s{font-size:15px}
.ofertas{margin:24px 0;border-top:1px solid var(--borda)}.ofertas h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin:20px 0 12px}
.oferta{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;border:1px solid var(--borda);background:var(--branco);padding:14px 16px;margin-bottom:10px}
.oferta .nome-canal{font-weight:500}.oferta .det{font-size:12.5px;color:var(--texto-2)}.oferta .btn{height:46px;padding:0 22px;grid-row:1/3;grid-column:2}
.seguro{font-size:12.5px;color:var(--texto-2);display:flex;gap:8px;align-items:flex-start}
.detalhe .descricao p{color:var(--texto-2);margin:0 0 12px}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;margin:8px 0 0}.specs dt{color:var(--texto-2)}.specs dd{margin:0}
details.secao{border-top:1px solid var(--borda);padding:14px 0}details.secao summary{cursor:pointer;font-size:12px;letter-spacing:.2em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
details.secao summary::after{content:"+";font-size:18px}details.secao[open] summary::after{content:"–"}details.secao summary::-webkit-details-marker{display:none}
.relacionados{margin-top:40px}

/* responsivo */
@media (max-width:1100px){.grade{grid-template-columns:repeat(3,minmax(0,1fr))}.beneficios .wrap{grid-template-columns:repeat(2,1fr)}footer .colunas{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .menu{display:none}.so-mobile{display:grid}.topo .linha{height:64px}.topo .marca img{height:32px}
  .hero{grid-template-columns:1fr;min-height:0}.hero .foto{aspect-ratio:4/5;max-height:72vh}.hero .texto{padding:36px 24px 48px}
  .editorial,.cuidados{grid-template-columns:1fr}.editorial .foto{min-height:0;aspect-ratio:1/1}
  .detalhe{grid-template-columns:1fr}.galeria{grid-template-columns:1fr}.galeria .miniaturas{flex-direction:row;order:2;max-height:none;overflow-x:auto}.galeria .miniaturas button{width:68px;flex:none}
  .modal .caixa{inset:0}
}
@media (max-width:640px){
  .wrap{padding:0 16px}.grade{grid-template-columns:repeat(2,minmax(0,1fr))}.beneficios .wrap{grid-template-columns:1fr;gap:14px}
  .categoria{width:104px}.categoria .circ{width:104px;height:104px}.categoria b{font-size:18px}
  .ferramentas{flex-direction:column;align-items:stretch}.ferramentas .dir{display:grid;grid-template-columns:1fr auto}.busca input{width:100%}.chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.chip{flex:none}
  .dicas{grid-template-columns:1fr}footer .colunas{grid-template-columns:1fr}.produto h3{font-size:13.5px}.preco b{font-size:14.5px}
  .oferta{grid-template-columns:1fr}.oferta .btn{grid-row:auto;grid-column:auto;width:100%}
  .aviso{font-size:10.5px;letter-spacing:.1em}
}
.menu-mobile{position:fixed;inset:0;z-index:40;display:none;background:var(--bg);padding:90px 28px 28px}.menu-mobile.aberto{display:block}
.menu-mobile a{display:block;font:400 32px var(--serif);padding:10px 0;border-bottom:1px solid var(--borda)}
@media (max-width:640px){.selo{font-size:9px;letter-spacing:.06em;padding:4px 7px;top:8px;left:8px;max-width:calc(100% - 66px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selo.promo{left:auto;right:8px}}
.galeria .miniaturas{scrollbar-width:thin}
/* âncoras param logo abaixo do cabeçalho fixo */
:root{--hdr:79px;--chev:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m6%209%206%206%206-6%22%20/%3E%20%3C/svg%3E")}[id]{scroll-margin-top:calc(var(--hdr) + 16px)}
.cuidados img{aspect-ratio:1/1;object-fit:cover;height:auto}
/* hero ocupa exatamente a tela visível abaixo da faixa e do cabeçalho; a foto se ajusta ao espaço */
:root{--aviso:35px}
.hero{height:calc(100svh - var(--hdr) - var(--aviso));min-height:560px;max-height:980px}
.hero .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
@media (max-width:860px){.hero{height:auto;min-height:0;max-height:none}.hero .foto{aspect-ratio:4/5;max-height:calc(78svh - var(--hdr))}}
.hero{min-height:420px}.hero h1{font-size:min(clamp(44px,6vw,86px),11.5svh)}.hero .texto{padding-top:min(64px,6svh);padding-bottom:min(64px,6svh)}.hero p{margin-bottom:min(34px,4svh)}

/* ícones Lucide (sprite #i-nome); nunca emoji */
.ic{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.18em;flex:none;stroke-width:1.5}
.beneficio svg.ic{width:26px;height:26px;stroke-width:1.3}.icone-btn .ic{width:20px;height:20px;stroke-width:1.6}.busca .ic{width:16px;height:16px}
.dica .ic{width:22px;height:22px;color:var(--marrom);stroke-width:1.4;margin-bottom:6px;display:block}.seguro .ic{color:var(--marrom);width:15px;height:15px;margin-top:2px}
.canal span .ic{width:12px;height:12px;vertical-align:-1px}
details.secao summary::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform .2s}details.secao[open] summary::after{content:"";transform:rotate(180deg)}