/* VitaaQuantum — tema preto (publicado em 10/11/2026).
   Carregado depois do styles.css, junto com <html class="t-preto"> no index.html (a classe traz as cores).
   Para voltar ao site claro: tire a classe t-preto e a linha deste arquivo do index.html
   (cópia do index claro em DESIGN SYSTEM./backup-site-claro). */

html.t-preto{
  --soft:#0B0B0B; --white:#161616; --ink:#F2F2F2; --gray:#9A9A9A;
  --chip:#262626; --line:rgba(255,255,255,.12); --dash:rgba(255,255,255,.18);
  --fade:11,11,11; --panel:rgba(255,255,255,.05); --deep:#000000;
  /* fundo "de fora" (o que o iPhone mostra ao esticar a página no topo e no fim, e atrás das barras do Safari): preto puro, igual ao topo e ao rodapé */
  color-scheme:dark; background:#000;
}

/* botões: o escuro vira claro (texto escuro), como um negativo */
@media (hover:hover) and (pointer:fine){.pill-dark:hover{background:#D9D9D9}.pill-gray:hover{background:color-mix(in srgb,var(--chip) 80%,#fff)}}
.added{background:#CFCFCF}

/* topo */
.hdr.scrolled{background:rgba(var(--fade),.72)}
.nav{background:rgba(255,255,255,.07)}
.burger{background:var(--ink)}

/* hero escuro: a mesma foto do conta-gotas do site claro, em negativo (img/hero-conta-gotas-preto) */
.hero{background:var(--deep)}
.hero::after{background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.35) 34%,rgba(0,0,0,0) 58%),linear-gradient(180deg,rgba(var(--fade),0) 78%,var(--soft) 100%)}
.hero p.lead{color:var(--gray)}
/* botões do topo em vidro líquido: desfocam a foto por trás, borda de luz e um leve arco-íris nas laterais */
.hero .ctas .pill{position:relative;isolation:isolate;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.03));backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.08),inset 2px 0 3px -2px rgba(255,170,120,.35),inset -2px 0 3px -2px rgba(120,190,255,.4),0 12px 30px -14px rgba(0,0,0,.8)}
.hero .ctas .pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(255,255,255,.75),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* "Conheça os produtos": vidro líquido branco, leitoso, com texto escuro */
.hero .ctas .pill-dark{color:#111;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.62));backdrop-filter:blur(18px) saturate(1.8);-webkit-backdrop-filter:blur(18px) saturate(1.8);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(255,255,255,.5),inset 2px 0 4px -2px rgba(255,170,120,.5),inset -2px 0 4px -2px rgba(120,190,255,.55),0 14px 34px -14px rgba(0,0,0,.85)}
.hero .ctas .pill-dark::before{background:linear-gradient(140deg,#fff,rgba(255,255,255,.35) 40%,rgba(255,255,255,.15) 60%,#fff)}
@media (hover:hover) and (pointer:fine){
  .hero .ctas .pill-gray:hover{background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.1))}
  .hero .ctas .pill-dark:hover{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.74))}
}

/* cartões dos produtos: cinza mais claro que a página, para destacar */
html.t-preto .card{background:#2C2C2C}
/* cartões cinza lisos com só um risco branco bem sutil em volta (um pouco mais visível em cima) */
html.t-preto .card{position:relative}
html.t-preto .card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.09) 40%,rgba(255,255,255,.09));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html.t-preto .card .kit-badge{background:#1A1A1A}
/* botões cinza dentro dos cartões ("Detalhes", "Ler mais"): um tom acima do cartão para a pílula aparecer */
html.t-preto .card .pill-gray,html.t-preto .card .more-btn{background:#3A3A3A}
@media (hover:hover) and (pointer:fine){html.t-preto .card .pill-gray:not([aria-disabled=true]):hover{background:#4A4A4A}}

/* painéis translúcidos que eram brancos */
.sheet-vol,.kit-steps,.dose,.ship{background:var(--panel)}
.arch,.ci img{background:#E9EAEA}

/* faixa preta "Vamos conversar" e rodapé: ficam mais fundos que a página */
/* dentro deles as cores voltam ao original: botão branco com texto preto, ícones brancos */
.cta-in{--white:#FFFFFF;--ink:#111111;background:var(--deep);color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
footer{--white:#FFFFFF;--ink:#111111;background:var(--deep);color:#fff;box-shadow:0 -1px 0 var(--line)}

/* ficha do produto e carrinho: vidro transparente com desfoque (a página aparece borrada por trás),
   num tom CINZA (não preto), com a página de trás só um pouco escurecida */
.scrim{background:rgba(0,0,0,.28)}
.sheet{background:linear-gradient(160deg,rgba(62,62,64,.72),rgba(44,44,46,.8));backdrop-filter:blur(16px) saturate(1.5) brightness(.85);-webkit-backdrop-filter:blur(16px) saturate(1.5) brightness(.85);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.sheet::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12) 40%,rgba(255,255,255,.1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sheet-foot{background:rgba(255,255,255,.03);border-top-color:var(--line)}
.sheet .more-btn,.sheet-foot .pill-gray{background:rgba(255,255,255,.12)}
/* quadros da ficha ("Conteúdo", "Como funciona o kit", "10 gotas...") e avisos do carrinho (Pix, frete):
   cinza claro liso, texto branco e só um risco branco fino em volta (igual aos cartões dos produtos) */
.sheet .sheet-vol,.sheet .kit-steps,.sheet .dose,.sheet .ship{--gray:#C4C4C4;position:relative;background:rgba(255,255,255,.15)}
.sheet .sheet-vol::after,.sheet .kit-steps::after,.sheet .dose::after,.sheet .ship::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.09) 40%,rgba(255,255,255,.09));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* fechar (X) da ficha e do carrinho: bolha clara sólida com o X escuro, visível no vidro escuro e sobre a foto */
.sheet .x{background:rgba(242,242,242,.92);box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.sheet .x::before{display:none}
.gal-btn{color:#111}
.gal-dots button{background:rgba(17,17,17,.25)}
.gal-dots button.on{background:#111}
@media (hover:hover) and (pointer:fine){.qty button:hover{background:var(--chip)}}

/* menu do celular: vidro espelhado (transparente, borda de luz forte, reflexo diagonal e arco-íris nas laterais) */
.mnav{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(0,0,0,.22));backdrop-filter:blur(22px) saturate(1.8) brightness(.9);-webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),inset 4px 0 8px -4px rgba(255,168,104,.5),inset -4px 0 8px -4px rgba(104,178,255,.55),0 30px 70px -24px rgba(0,0,0,.75)}
.mnav::before{background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 32%,rgba(255,255,255,0) 55%,rgba(120,180,255,.45) 80%,rgba(255,190,140,.6))}
.mnav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.12) 30%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.06) 68%,rgba(255,255,255,0) 76%)}
.mnav a:not(.pill){position:relative;z-index:1;border-bottom-color:rgba(255,255,255,.14);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.mnav a:not(.pill)::after{color:rgba(255,255,255,.7)}
/* botão do WhatsApp no menu: vidro branco, igual ao "Conheça os produtos" */
.mnav .pill-dark{position:relative;z-index:1;color:#111;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.66));box-shadow:inset 0 1px 0 #fff,inset 2px 0 4px -2px rgba(255,170,120,.5),inset -2px 0 4px -2px rgba(120,190,255,.55),0 12px 28px -14px rgba(0,0,0,.8)}

@media (max-width:760px){
  .hero{background:var(--deep)}
  .hero-bg{object-position:67% 100%}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.35) 24%,rgba(0,0,0,0) 38%),linear-gradient(0deg,var(--soft) 0,rgba(var(--fade),0) 14%)}
  .hero p.lead{color:#C9C9C9}
  .sheet::before{background:rgba(255,255,255,.25)}
}
/* celular em pé: usa o recorte próprio da foto (img/hero-preto-celular.webp), já centrado no conta-gotas */
@media (max-width:760px) and (orientation:portrait){
  .hero-bg{object-position:50% 100%}
}