/* Rodada de 17/10: fundo vivo, cards de vidro e paleta azul e violeta nas páginas da loja.
   Carregado por último nas cinco páginas públicas; administração e recuperação não usam. */
@property --skin-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--skin-violet:#a78bff;--skin-blue:#176ff2;--skin-cyan:#43baff;--skin-line:#ffffff1a;--skin-ease:cubic-bezier(.2,.8,.2,1);
  --skin-glass:linear-gradient(160deg,#ffffff12,#ffffff05 60%);--skin-grad:linear-gradient(135deg,#176ff2,#a78bff)}
html{background:#050817}
body.skin{background:transparent}

/* Fundo vivo: gradiente profundo, três luzes que derivam devagar e grade sutil. */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(140deg,#060717 0%,#0b1640 36%,#1a0f4a 66%,#0a0a24 100%)}
.sky i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(80px);opacity:.5;mix-blend-mode:screen}
.sky i:nth-child(1){left:-18vmax;top:-22vmax;background:radial-gradient(circle,#176ff2,transparent 62%);animation:sky-drift-1 26s ease-in-out infinite alternate}
.sky i:nth-child(2){right:-20vmax;top:10vh;background:radial-gradient(circle,#8b5cff,transparent 62%);opacity:.35;animation:sky-drift-2 32s ease-in-out infinite alternate}
.sky i:nth-child(3){left:20vw;bottom:-30vmax;background:radial-gradient(circle,#3b1fd1,transparent 62%);opacity:.45;animation:sky-drift-3 28s ease-in-out infinite alternate}
@keyframes sky-drift-1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes sky-drift-2{to{transform:translate(-22vw,30vh) scale(.9)}}
@keyframes sky-drift-3{to{transform:translate(-14vw,-26vh) scale(1.2)}}
.sky::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 80%)}

/* Cabeçalhos translúcidos sobre o fundo. */
body.skin>header{background:#06081acc;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--skin-line)}
body.skin>header.is-scrolled{background:#06081ae6}

/* Botões principais em degradê azul e violeta. */
body.skin :is(.primary,.button:not(.secondary),.nav-cta),.store-page #products .product>button{background:var(--skin-grad);border-color:transparent;color:#fff;box-shadow:0 12px 30px -12px #176ff2}
body.skin :is(.primary,.button:not(.secondary),.nav-cta):hover,.store-page #products .product>button:hover{background:var(--skin-grad);filter:brightness(1.12);box-shadow:0 16px 36px -10px #5b6bff}
body.skin .button.secondary,body.skin .panels-toggle{background:#ffffff0d;border:1px solid var(--skin-line);color:#f3f7ff}
body.skin #accountArea .ghost{background:#ffffff0d;border-color:var(--skin-line)}

/* Palavras de destaque com brilho correndo e rótulos em pílula. */
body.skin :is(.stage h1 em,.seo-hero h1 em){background:linear-gradient(100deg,#43baff 20%,#fff 45%,#a78bff 60%,#43baff 85%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:skin-shine 5s linear infinite}
@keyframes skin-shine{to{background-position:-250% 0}}
body.skin .eyebrow,.stage .stage-copy:before{display:inline-flex;width:fit-content;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid #8b9cff40;background:#7d8cff14;color:#c9d6ff;letter-spacing:.12em}

/* Vidro: cards, painéis e blocos de conteúdo. */
.store-page :is(#products .product,#meus-paineis,.stats article,.services article,.category-intro,.direct-offer,.orders .order,.faq-grid details),
body.skin:not(.store-page) :is(.card,.signal,.commend-preview,.cta,.notice,.plan){
  background:radial-gradient(380px circle at var(--mx,-400px) var(--my,-400px),#7d8cff1f,transparent 60%),var(--skin-glass);
  border:1px solid var(--skin-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px #ffffff14,0 20px 50px -30px #000}
.store-page #products .product:hover,body.skin:not(.store-page) :is(.card,.plan):hover{background:radial-gradient(380px circle at var(--mx,-400px) var(--my,-400px),#7d8cff2e,transparent 60%),var(--skin-glass);border-color:#ffffff2e;box-shadow:inset 0 1px #ffffff1f,0 30px 60px -28px #2a1a7a}
body.skin:not(.store-page) :is(.card,.plan){transition:transform .35s var(--skin-ease),border-color .35s,box-shadow .35s}
body.skin:not(.store-page) :is(.card,.plan):hover{transform:translateY(-4px)}
.store-page #meus-paineis button{background:transparent}
.store-page #meus-paineis button:hover{background:#ffffff0d}
.store-page #meus-paineis button i,.store-page #products .product-visual>span{color:#c9d6ff;background:linear-gradient(135deg,#176ff233,#a78bff26);border:1px solid #8b9cff40}
.store-page #products .product .price{background:linear-gradient(100deg,#fff 40%,#c9d6ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Faixa de cada produto: luz por baixo e uma ilustração animada própria. */
.store-page #products .product-visual{position:relative;height:96px;justify-content:space-between;background:radial-gradient(circle at 70% 130%,#176ff259,transparent 70%),linear-gradient(180deg,#ffffff08,transparent);border-bottom-color:var(--skin-line);overflow:hidden}
.product-art{position:absolute;right:14px;top:50%;height:70px;width:auto;translate:0 -50%;pointer-events:none}
.product-art .o{fill:none;stroke:#43baff;stroke-width:1.6;stroke-dasharray:10 7;opacity:.7;transform-box:fill-box;transform-origin:center;animation:art-spin 8s linear infinite}
.product-art .f{fill:#0d1636;stroke:#8b9cff55}
.product-art .ic{fill:none;stroke:#43baff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.product-art .bob{transform-box:fill-box;transform-origin:center;animation:art-pop 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .8s)}
.product-art .ring-bg{fill:none;stroke:#ffffff14;stroke-width:7}
.product-art .ring{fill:none;stroke:#a78bff;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.1;transform-box:fill-box;transform-origin:center;rotate:-90deg;animation:art-ring 5s var(--skin-ease) infinite}
@keyframes art-spin{to{rotate:360deg}}
@keyframes art-pop{0%,100%{scale:1}12%{scale:1.12}24%{scale:1}}
@keyframes art-ring{0%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:.1}}

/* O mais escolhido ganha borda de luz correndo. */
.store-page #products .product.featured{border-color:transparent}
.border-flow{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--skin-angle),transparent 0 60%,#43baff,#a78bff,transparent 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:skin-spin 4s linear infinite}
@keyframes skin-spin{to{--skin-angle:360deg}}

/* Pílula dos filtros no mesmo degradê. */
.store-page .store-tabs .tab-pill{background:var(--skin-grad);box-shadow:0 8px 24px -8px #5b6bff}

/* Topo: escolha de serviço com dois botões iguais e pílula que desliza. */
.stage .stage-selector{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;max-width:480px;padding:4px;border:1px solid var(--skin-line);border-radius:14px;background:#ffffff0a}
.stage .stage-selector:before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:10px;background:var(--skin-grad);box-shadow:0 12px 30px -10px #176ff2;transition:transform .45s var(--skin-ease)}
.stage[data-service=hours] .stage-selector:before{transform:translateX(calc(100% + 4px))}
.stage .stage-selector button,.stage .stage-selector button[aria-pressed=true],.stage .stage-selector button:hover{position:relative;z-index:1;background:transparent;box-shadow:none;border:0;border-radius:10px;min-height:50px;padding:12px;font-weight:800;color:#a9bbd1;transition:color .3s}
.stage .stage-selector button[aria-pressed=true]{color:#fff}
.stage .stage-selector button:not([aria-pressed=true]):hover{color:#f3f7ff;background:#ffffff0a}
.stage #stage-action{background:none;box-shadow:none;padding:0;min-height:44px;color:#f3f7ff;border-bottom:1px solid #ffffff33;border-radius:0;transition:border-color .2s,gap .3s var(--skin-ease)}
.stage #stage-action:hover{filter:none;border-color:#43baff;transform:none}
.stage #stage-action::after{display:none}

/* Topo: janela própria com borda de luz, cantos de mira, linha de leitura e selos. */
.stage .stage-visual{overflow:visible;border:1px solid transparent;border-radius:22px;background:radial-gradient(ellipse 60% 55% at 50% 45%,#176ff240,transparent 70%) padding-box,linear-gradient(160deg,#0d1636f2,#070b1ef2) padding-box,conic-gradient(from var(--skin-angle),#ffffff14,#43baff,#ffffff14 30%,#a78bff,#ffffff14 70%) border-box;animation:skin-spin 6s linear infinite,stage-rise .9s .15s var(--ease-out,ease) both}
.stage .stage-visual:before,.stage .stage-visual:after{display:none}
.stage .stage-art img{mix-blend-mode:screen;--fade:radial-gradient(ellipse 56% 58% at 50% 50%,#000 42%,#0009 66%,transparent 92%);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
.stage .emblem-shine{-webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 50%,#000 50%,transparent 90%);mask-image:radial-gradient(ellipse 50% 52% at 50% 50%,#000 50%,transparent 90%)}
.stage-corner{position:absolute;width:26px;height:26px;border:0 solid #43baff;opacity:.85;animation:corner-pulse 3s ease-in-out infinite;pointer-events:none}
.stage-corner.tl{top:16px;left:16px;border-top-width:2px;border-left-width:2px;border-top-left-radius:8px}
.stage-corner.tr{top:16px;right:16px;border-top-width:2px;border-right-width:2px;border-top-right-radius:8px}
.stage-corner.bl{bottom:66px;left:16px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:8px}
.stage-corner.br{bottom:66px;right:16px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:8px}
@keyframes corner-pulse{50%{opacity:.35;scale:.9}}
.stage-scan{position:absolute;left:8%;right:8%;top:10%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#43baff,transparent);box-shadow:0 0 14px #43baff;opacity:.5;pointer-events:none;animation:stage-scan 4.5s ease-in-out infinite alternate}
@keyframes stage-scan{to{top:78%}}
.stage .stage-label{left:0;right:0;bottom:0;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;border-top:1px solid var(--skin-line);border-radius:0 0 21px 21px;background:#ffffff06}
.stage .stage-label b{display:flex;align-items:center;gap:10px;font:700 15px/1 var(--font-display,inherit);letter-spacing:.14em}
.stage .stage-label b:before{content:"";width:8px;height:8px;border-radius:50%;background:#6ce4ba;animation:live-ping 1.8s ease-out infinite}
.stage .stage-label span{font-size:10px;font-weight:800;letter-spacing:.16em;color:#43baff}
@keyframes live-ping{0%{box-shadow:0 0 0 0 #6ce4ba99}70%,100%{box-shadow:0 0 0 7px #6ce4ba00}}
.stage-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--skin-line);border-radius:14px;background:#0a0f30d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -16px #000;white-space:nowrap;animation:chip-float 5s ease-in-out infinite}
.stage-chip i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#43baff1f;color:#43baff}
.stage-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stage-chip span{display:grid}
.stage-chip small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a9bbd1}
.stage-chip b{font-size:13px;color:#f3f7ff}
.stage-chip.chip-pix{top:-20px;right:-16px}
.stage-chip.chip-pix i{background:#6ce4ba1f;color:#6ce4ba}
.stage-chip.chip-delivery{bottom:96px;left:-30px;animation-delay:-1.6s}
.stage-chip.chip-panel{top:36%;right:-28px;animation-delay:-3.1s}
.stage-chip.chip-panel i{background:#a78bff24;color:#a78bff}
@keyframes chip-float{50%{translate:0 -10px}}

@media(max-width:1100px){.stage-chip.chip-panel{display:none}}
@media(max-width:760px){
  .stage-chip.chip-delivery{display:none}
  .stage-chip.chip-pix{right:-4px;top:-14px}
  .stage-corner.bl,.stage-corner.br{bottom:56px}
  .stage .stage-label{padding:12px 16px}
  .stage .stage-selector{max-width:none}
  .stage .stage-selector button{font-size:13px;padding:10px 8px}
}
@media(max-width:420px){.stage-chip{padding:8px 10px}.stage-chip i{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.sky i,.border-flow,.stage .stage-visual{animation:none}}

/* Barra superior: vidro, linha de luz e atalhos fixos para os dois painéis. */
body.skin>header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#43baff,#a78bff,transparent);background-size:200% 100%;opacity:.8;pointer-events:none;animation:skin-line 6s linear infinite}
@keyframes skin-line{to{background-position:-200% 0}}
.header-panels{display:flex;align-items:center;gap:8px;margin-left:auto}
.quick-panel{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:5px 14px 5px 5px;border:1px solid var(--skin-line);border-radius:12px;background:linear-gradient(160deg,#ffffff12,#ffffff05);color:#f3f7ff;font:inherit;text-decoration:none;cursor:pointer;transition:transform .25s var(--skin-ease),border-color .25s,box-shadow .25s}
.quick-panel:hover{transform:translateY(-2px);border-color:#8b9cff66;box-shadow:0 10px 26px -12px #176ff2}
.quick-panel:focus-visible{outline:2px solid #8bd6ff;outline-offset:3px}
.quick-panel i{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--skin-grad);color:#fff}
.quick-panel i::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#6ce4ba;border:2px solid #0a0f30;animation:live-ping 1.8s ease-out infinite}
.quick-panel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.quick-panel span{display:grid;line-height:1.15;text-align:left}
.quick-panel small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#a9bbd1}
.quick-panel b{font-size:14px}
.store-page .header-panels+#accountArea{margin-left:0}

/* Celular: a barra de baixo segue fixa com os dois painéis, no mesmo vidro. */
.store-page .mobile-service-dock{background:#06081ae6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--skin-line)}
.store-page .mobile-service-dock button{background:linear-gradient(135deg,#176ff238,#a78bff30);border:1px solid #8b9cff40}
@media(max-width:760px){
  .store-page .header-panels{display:none}
  .quick-panel{padding:5px 10px 5px 5px;gap:8px}
  .quick-panel small{display:none}
  .quick-panel b{font-size:12px}
}
@media(max-width:480px){body.skin:not(.store-page)>header .brand{font-size:0;gap:0}}
@media(prefers-reduced-motion:reduce){body.skin>header::after,.quick-panel i::after{animation:none}}