/* ==========================================================================
   40-ds-layer.css — camada própria do valleria.ia Design System.
   Extraído do <style id="ds-layer"> de index.html sem nenhuma alteração.
   Carregue-o SEMPRE por último, depois dos quatro bundles em css/, porque ele
   assume que os tokens --gold / --primary / --bronze já existem em :root.
   Convenção: tudo prefixado .ds-* para não colidir com as folhas originais.
   Exceções deliberadas: .sparkle e .floating-decor (marcados UPGRADE).
   ========================================================================== */
/* ==========================================================================
   #ds-layer — acréscimos deste design system.
   Convenção: tudo prefixado .ds-* para nunca colidir com as duas folhas
   originais. Exceção deliberada: .sparkle e .floating-decor, que são
   "upgrades" de classes já existentes (ver blocos marcados UPGRADE).
   ========================================================================== */

:root{
  --ds-ease:        cubic-bezier(.16,1,.3,1);
  --ds-ease-back:   cubic-bezier(.175,.885,.32,1.275);
  --ds-nav-h:       66px;
  --ds-glow-gold:   0 0 0 1px hsl(var(--gold)/.30), 0 14px 40px -14px hsl(var(--gold)/.55);
  --ds-glow-rose:   0 0 0 1px hsl(var(--primary)/.30), 0 16px 44px -16px hsl(var(--primary)/.55);
  --ds-glow-bronze: 0 0 0 1px hsl(var(--bronze)/.22), 0 18px 50px -18px hsl(var(--bronze)/.45);
}

/* utilitários que não existem em nenhum dos dois bundles compilados --------- */
.ds-abs-fill{position:absolute;inset:0}
.ds-clip{overflow:hidden}
.ds-op-30{opacity:.3}.ds-op-40{opacity:.4}.ds-op-60{opacity:.6}
.ds-mono{font-family:Geist Mono,JetBrains Mono,monospace}
.ds-nowrap{white-space:nowrap}
.ds-r2{border-radius:2rem}
.ds-grid-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ds-grid-5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (min-width:768px){
  .ds-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ds-grid-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem}
}

/* Utilitários usados neste documento que NÃO existem em nenhuma das duas
   builds Tailwind (elas só contêm as classes das suas páginas de origem).
   Mesmos nomes e mesmos valores da escala do Tailwind, para que o markup
   continue legível por quem conhece o framework. */
.gap-0\.5{gap:.125rem}
.gap-x-8{column-gap:2rem}
.gap-x-9{column-gap:2.25rem}
.gap-y-4{row-gap:1rem}
.gap-y-5{row-gap:1.25rem}
.mb-1\.5{margin-bottom:.375rem}
.mb-7{margin-bottom:1.75rem}
.mb-9{margin-bottom:2.25rem}
.mb-14{margin-bottom:3.5rem}
.my-4{margin-top:1rem;margin-bottom:1rem}
.my-5{margin-top:1.25rem;margin-bottom:1.25rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.p-2\.5{padding:.625rem}
.pb-8{padding-bottom:2rem}
.pr-4{padding-right:1rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem}
.px-9{padding-left:2.25rem;padding-right:2.25rem}
.scroll-mt-20{scroll-margin-top:5rem}
@media (min-width:768px){.md\:inline-flex{display:inline-flex}}

/* O seletor arbitrário [&[data-state=open]>svg]:rotate-180 aparece no markup
   do accordion do bundle femme, mas ficou de fora da build compilada — o
   chevron nunca girava. Reescrito aqui com a mesma semântica. */
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg{transform:rotate(180deg)}
/* ==========================================================================
   1. KEYFRAMES
   ========================================================================== */
/* fundo: manchas de luz que respiram e passeiam */
@keyframes ds-aurora{
  0%  {transform:translate3d(0,0,0) scale(1)}
  33% {transform:translate3d(7%,-5%,0) scale(1.15)}
  66% {transform:translate3d(-6%,6%,0) scale(.9)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
/* fundo: varredura cônica lenta */
@keyframes ds-spin{to{transform:rotate(360deg)}}
/* fundo: malha de pontos deslizando na diagonal */
@keyframes ds-drift{to{background-position:280px 280px}}
/* fundo: linhas de grade em perspectiva subindo */
@keyframes ds-grid-up{to{background-position:0 -60px}}
/* UPGRADE .sparkle: no bundle original ela é um ponto estático */
@keyframes ds-twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.7)}}
/* botão: brilho que atravessa a superfície */
@keyframes ds-sheen{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(260%) skewX(-18deg)}}
/* botão: onda no clique */
@keyframes ds-ripple{to{transform:translate(-50%,-50%) scale(3);opacity:0}}
/* surgimento: palavra por palavra, subindo e desfocando */
@keyframes ds-word{from{opacity:0;transform:translateY(.9em) rotate(1.5deg);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
/* surgimento: foco */
@keyframes ds-blur-in{from{opacity:0;filter:blur(16px);transform:scale(1.05)}to{opacity:1;filter:blur(0);transform:none}}
/* surgimento: máscara vertical revelando de baixo pra cima */
@keyframes ds-mask-up{from{clip-path:inset(100% 0 0 0);transform:translateY(24px)}to{clip-path:inset(0 0 0 0);transform:none}}
/* imagens flutuando com amplitudes diferentes */
@keyframes ds-float-a{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(0,-18px,0) rotate(-1.4deg)}}
@keyframes ds-float-b{0%,100%{transform:translate3d(0,0,0) rotate(2.5deg)}50%{transform:translate3d(0,-13px,0) rotate(4deg)}}
@keyframes ds-float-c{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-24px,0) rotate(1deg)}}
/* faixa infinita */
@keyframes ds-marquee{to{transform:translate3d(-50%,0,0)}}
/* respiração de glow (CTA, anéis) */
@keyframes ds-breathe{
  0%,100%{box-shadow:0 0 0 0 hsl(var(--gold)/.38), 0 12px 34px -16px hsl(var(--gold)/.55)}
  50%    {box-shadow:0 0 0 12px hsl(var(--gold)/0),  0 20px 52px -14px hsl(var(--gold)/.7)}
}
/* texto: gradiente correndo */
@keyframes ds-sweep{to{background-position:220% center}}
/* imagem: linha de scanner descendo */
@keyframes ds-scan{0%{transform:translateY(-120%)}100%{transform:translateY(520%)}}
/* filete que corre no separador */
@keyframes ds-hair{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
/* seta de rolagem */
@keyframes ds-cue{0%{transform:translateY(0);opacity:.25}45%{opacity:1}100%{transform:translateY(11px);opacity:.25}}
/* tooltip / modal / badge */
@keyframes ds-tip-in{from{opacity:0;transform:translate(-50%,7px) scale(.95)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes ds-pop{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ds-badge-in{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:none}}
/* ponto de status pulsando */
@keyframes ds-ping{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(2.6);opacity:0}}
/* cursor de digitação */
@keyframes ds-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* barra de skeleton / loading */
@keyframes ds-slide-bg{to{background-position:200% 0}}

/* ==========================================================================
   2. FUNDOS ANIMADOS (reaproveitados em TODAS as dobras)
   ========================================================================== */
/* .ds-bg é o palco: sempre atrás do conteúdo, nunca clicável */
.ds-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ds-bg > *{position:absolute;pointer-events:none}

/* manchas de luz */
.ds-orb{border-radius:9999px;filter:blur(64px);will-change:transform;animation:ds-aurora 26s ease-in-out infinite}
.ds-orb--gold  {background:radial-gradient(circle at 50% 50%, hsl(var(--gold)/.30) 0%, transparent 70%)}
.ds-orb--rose  {background:radial-gradient(circle at 50% 50%, hsl(var(--primary)/.26) 0%, transparent 70%)}
.ds-orb--bronze{background:radial-gradient(circle at 50% 50%, hsl(var(--bronze)/.20) 0%, transparent 70%)}
.ds-orb--cream {background:radial-gradient(circle at 50% 50%, hsl(var(--champagne)/.75) 0%, transparent 70%)}

/* malha de pontos do bundle glass (.particle-dots) posta em movimento */
.ds-drift{animation:ds-drift 34s linear infinite}

/* grade em perspectiva */
.ds-grid{
  inset:auto 0 -10% 0;height:60%;
  background-image:
    linear-gradient(to right, hsl(var(--bronze)/.10) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--bronze)/.10) 1px, transparent 1px);
  background-size:60px 60px;
  transform:perspective(520px) rotateX(62deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 0%, transparent 85%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 85%);
  animation:ds-grid-up 5.5s linear infinite;
}

/* varredura cônica (raio de luz girando) */
.ds-conic{
  inset:-45%;
  background:conic-gradient(from 0deg, transparent 0 68%, hsl(var(--gold)/.16) 82%, transparent 100%);
  animation:ds-spin 30s linear infinite;
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
}

/* véu de vinheta que amarra as bordas da seção */
.ds-vignette{inset:0;background:radial-gradient(ellipse 90% 70% at 50% 42%, transparent 0%, hsl(var(--background)/.85) 100%)}

/* UPGRADE .sparkle — mantém tamanho/cor do bundle e ganha cintilância + halo */
.sparkle{
  animation:ds-twinkle 3.4s var(--ds-ease) infinite;
  box-shadow:0 0 10px 2px hsl(var(--gold)/.55);
}
/* UPGRADE .floating-decor — o bundle glass a esconde com display:none!important.
   Reabilitamos só quando marcada explicitamente com .ds-on. */
.floating-decor.ds-on{display:block!important}

/* separador com filete correndo (usa .hairline do bundle glass como base) */
.ds-hairline{position:relative;overflow:hidden}
.ds-hairline::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,hsl(var(--gold)/.9),transparent);
  animation:ds-hair 4.5s var(--ds-ease) infinite;
}

/* ==========================================================================
   3. SURGIMENTO / ENTRADA
   ========================================================================== */
/* .ds-word: h1 palavra por palavra. O stagger vem de style="--i:n" no markup */
.ds-word{display:inline-block;animation:ds-word .95s var(--ds-ease) both;animation-delay:calc(var(--i,0)*80ms)}
.ds-in-blur{animation:ds-blur-in 1.1s var(--ds-ease) both;animation-delay:calc(var(--i,0)*80ms)}
.ds-in-mask{animation:ds-mask-up 1.05s var(--ds-ease) both;animation-delay:calc(var(--i,0)*90ms)}
.ds-in-pop {animation:ds-pop .8s var(--ds-ease-back) both;animation-delay:calc(var(--i,0)*80ms)}

/* ==========================================================================
   4. INTERAÇÃO (glow, sheen, ímã, holofote, tilt)
   ========================================================================== */
/* brilho que atravessa o botão no hover — some em .btn-rose/.cta-gradient */
.ds-shine{position:relative;overflow:hidden;isolation:isolate}
.ds-shine::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-130%) skewX(-18deg);pointer-events:none;z-index:2;
}
.ds-shine:hover::after,.ds-shine:focus-visible::after{animation:ds-sheen 1.15s var(--ds-ease)}

/* halo que acende no hover/foco */
.ds-glow{transition:box-shadow .35s var(--ds-ease), transform .35s var(--ds-ease)}
.ds-glow:hover,.ds-glow:focus-visible{box-shadow:var(--ds-glow-rose);transform:translateY(-2px)}
.ds-glow--gold:hover,.ds-glow--gold:focus-visible{box-shadow:var(--ds-glow-gold)}
.ds-breathe{animation:ds-breathe 3.4s ease-in-out infinite}

/* onda de clique (o <span> é injetado pelo JS de #ds-boot) */
.ds-ripple{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:9999px;
  background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(0);
  animation:ds-ripple .62s var(--ds-ease) forwards;pointer-events:none;z-index:3}

/* ímã: o JS escreve --mx/--my a partir da posição do cursor */
.ds-magnet{transition:transform .25s var(--ds-ease)}
.ds-magnet:hover{transform:translate3d(var(--mx,0),var(--my,0),0)}

/* holofote que segue o cursor dentro do card (--x/--y vêm do JS) */
.ds-spot{position:relative;isolation:isolate}
.ds-spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  transition:opacity .4s var(--ds-ease);pointer-events:none;z-index:0;
  background:radial-gradient(320px circle at var(--x,50%) var(--y,50%), hsl(var(--gold)/.16), transparent 62%);
}
.ds-spot:hover::before{opacity:1}
.ds-spot > *{position:relative;z-index:1}

/* borda em gradiente animado (mesma técnica de máscara de .testimonial-card) */
.ds-gborder{position:relative}
.ds-gborder::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from 0deg, hsl(var(--gold)), hsl(var(--primary)), hsl(var(--bronze)), hsl(var(--gold)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.35;transition:opacity .35s var(--ds-ease);pointer-events:none;
  animation:ds-spin 8s linear infinite;
}
.ds-gborder:hover::before{opacity:1}

/* levantar no hover */
.ds-lift{transition:transform .45s var(--ds-ease-back), box-shadow .45s var(--ds-ease)}
.ds-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-elegant)}

/* cena com parallax de mouse: o JS escreve --px/--py em .ds-scene */
.ds-scene{position:relative}
.ds-layer{transition:transform .5s var(--ds-ease);will-change:transform}
.ds-layer{transform:translate3d(calc(var(--px,0)*var(--d,10px)), calc(var(--py,0)*var(--d,10px)), 0)}

/* moldura de imagem com anel de luz + scanner */
.ds-frame{position:relative;overflow:hidden;border-radius:1rem;border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-elegant);background:hsl(var(--card))}
.ds-frame::after{
  content:"";position:absolute;top:0;left:0;right:0;height:18%;
  background:linear-gradient(180deg,transparent,hsl(var(--gold)/.28),transparent);
  animation:ds-scan 6.5s linear infinite;pointer-events:none;
}
.ds-frame img{display:block;width:100%;height:100%;object-fit:cover}
.ds-ring{position:absolute;inset:-10px;border-radius:1.4rem;border:1px solid hsl(var(--gold)/.35);
  animation:ds-breathe 4.2s ease-in-out infinite;pointer-events:none}

.ds-f-a{animation:ds-float-a 7s ease-in-out infinite}
.ds-f-b{animation:ds-float-b 8.5s ease-in-out infinite}
.ds-f-c{animation:ds-float-c 9.5s ease-in-out infinite}

/* ==========================================================================
   5. TIPOGRAFIA — escala nomeada (o bundle só define family/weight nos h1..h6)
   ========================================================================== */
.ds-h1{font-family:Newsreader,"Source Serif 4",Georgia,serif;font-weight:500;font-size:clamp(2.5rem,6.4vw,4.75rem);line-height:1.05;letter-spacing:-.025em;text-transform:none}
.ds-h2{font-family:Newsreader,"Source Serif 4",Georgia,serif;font-weight:500;font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;letter-spacing:-.025em}
.ds-h3{font-family:Newsreader,"Source Serif 4",Georgia,serif;font-weight:600;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.2;letter-spacing:-.02em}
.ds-h4{font-family:Newsreader,"Source Serif 4",Georgia,serif;font-weight:600;font-size:1.25rem;line-height:1.3;letter-spacing:-.015em}
.ds-h5{font-family:Geist,Inter,system-ui,sans-serif;font-weight:600;font-size:1.0625rem;line-height:1.4;letter-spacing:-.01em}
.ds-h6{font-family:Geist Mono,JetBrains Mono,monospace;font-weight:500;font-size:.8125rem;line-height:1.4;letter-spacing:.18em;text-transform:uppercase}
.ds-body-lg{font-family:Geist,Inter,system-ui,sans-serif;font-weight:400;font-size:1.125rem;line-height:1.75;letter-spacing:-.005em}
.ds-body   {font-family:Geist,Inter,system-ui,sans-serif;font-weight:400;font-size:1rem;line-height:1.65;letter-spacing:0}
.ds-body-sm{font-family:Geist,Inter,system-ui,sans-serif;font-weight:400;font-size:.875rem;line-height:1.6;letter-spacing:0}
.ds-caption{font-family:Geist,Inter,system-ui,sans-serif;font-weight:400;font-size:.75rem;line-height:1.5;letter-spacing:.01em}
.ds-label  {font-family:Geist Mono,JetBrains Mono,monospace;font-weight:500;font-size:.6875rem;line-height:1.2;letter-spacing:.22em;text-transform:uppercase}
.ds-helper {font-family:Geist,Inter,system-ui,sans-serif;font-weight:400;font-size:.8125rem;line-height:1.5;letter-spacing:0}
.ds-quote  {font-family:Newsreader,"Source Serif 4",Georgia,serif;font-style:italic;font-weight:400;font-size:1.25rem;line-height:1.7;letter-spacing:-.01em}
.ds-script {font-family:Dancing Script,cursive;font-weight:600;font-size:2rem;line-height:1.2;letter-spacing:0}

/* texto com gradiente correndo (variação animada de .text-gradient-gold) */
.ds-text-sweep{
  background:linear-gradient(100deg,hsl(var(--bronze)),hsl(var(--gold)),hsl(var(--primary)),hsl(var(--gold)),hsl(var(--bronze)));
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ds-sweep 7s linear infinite;
}
/* cursor de digitação */
.ds-caret::after{content:"";display:inline-block;width:.06em;height:.95em;margin-left:.12em;
  background:hsl(var(--primary));vertical-align:-.12em;animation:ds-caret 1.05s step-end infinite}

/* ==========================================================================
   6. COMPONENTES NOVOS
   ========================================================================== */
/* --- navbar fixa em vidro ------------------------------------------------ */
.ds-nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--ds-nav-h);
  border-bottom:1px solid hsl(var(--border)/.7);transition:box-shadow .35s var(--ds-ease)}
.ds-nav.is-stuck{box-shadow:0 10px 30px -22px hsl(var(--foreground)/.5)}
.ds-navlink{position:relative;padding:.35rem 0;color:hsl(var(--muted-foreground));transition:color .25s var(--ds-ease)}
.ds-navlink:hover,.ds-navlink[aria-current="true"]{color:hsl(var(--foreground))}
.ds-navlink::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--gradient-gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ds-ease)}
.ds-navlink:hover::after,.ds-navlink[aria-current="true"]::after{transform:scaleX(1)}
/* barra de progresso do scroll */
.ds-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:hsl(var(--border)/.5)}
.ds-progress > span{display:block;height:100%;width:0;background:var(--gradient-gold);
  box-shadow:0 0 12px hsl(var(--gold)/.7)}

/* --- campo de formulário ------------------------------------------------- */
.ds-field{position:relative}
.ds-input{
  width:100%;border-radius:var(--radius);border:1px solid hsl(var(--input));
  background:hsl(var(--card));color:hsl(var(--foreground));
  font-family:Geist,Inter,system-ui,sans-serif;font-size:1rem;line-height:1.5;
  padding:1.45rem .95rem .6rem;letter-spacing:-.01em;
  transition:border-color .25s var(--ds-ease), box-shadow .25s var(--ds-ease), background-color .25s var(--ds-ease);
  box-shadow:var(--shadow-soft);
}
.ds-input::placeholder{color:transparent}
.ds-input:hover{border-color:hsl(var(--primary)/.45)}
.ds-input:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 4px hsl(var(--ring)/.16), var(--shadow-soft)}
.ds-input:disabled{opacity:.5;cursor:not-allowed;background:hsl(var(--muted))}
.ds-input[aria-invalid="true"]{border-color:hsl(var(--destructive));box-shadow:0 0 0 4px hsl(var(--destructive)/.14)}
.ds-input[data-valid="true"]{border-color:hsl(var(--success));box-shadow:0 0 0 4px hsl(var(--success)/.14)}
textarea.ds-input{min-height:118px;resize:vertical;line-height:1.6}
/* rótulo flutuante */
.ds-flabel{
  position:absolute;left:.95rem;top:.95rem;pointer-events:none;
  font-family:Geist Mono,JetBrains Mono,monospace;font-size:.8125rem;letter-spacing:.06em;
  color:hsl(var(--muted-foreground));
  transition:transform .22s var(--ds-ease), color .22s var(--ds-ease), font-size .22s var(--ds-ease);
  transform-origin:left top;
}
.ds-input:focus + .ds-flabel,
.ds-input:not(:placeholder-shown) + .ds-flabel{transform:translateY(-.62rem) scale(.78);color:hsl(var(--primary));letter-spacing:.16em;text-transform:uppercase}
/* barra de foco que cresce do centro */
.ds-field::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;border-radius:2px;
  background:var(--gradient-rose);transition:left .3s var(--ds-ease),right .3s var(--ds-ease)}
.ds-field:focus-within::after{left:.5rem;right:.5rem}

/* --- badges -------------------------------------------------------------- */
.ds-badge{display:inline-flex;align-items:center;gap:.4rem;border-radius:9999px;
  padding:.3rem .7rem;border:1px solid transparent;
  font-family:Geist Mono,JetBrains Mono,monospace;font-size:.625rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;line-height:1;white-space:nowrap;
  animation:ds-badge-in .55s var(--ds-ease-back) both;
  transition:transform .25s var(--ds-ease-back), box-shadow .25s var(--ds-ease)}
.ds-badge:hover{transform:translateY(-1px) scale(1.04)}
.ds-badge--rose   {background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.ds-badge--gold   {background:var(--gradient-gold);color:#fff;box-shadow:0 6px 18px -10px hsl(var(--gold)/.8)}
.ds-badge--soft   {background:hsl(var(--rose-light));color:hsl(var(--rose-dark))}
.ds-badge--outline{background:transparent;border-color:hsl(var(--border));color:hsl(var(--muted-foreground))}
.ds-badge--ink    {background:hsl(var(--foreground));color:hsl(var(--background))}
.ds-badge--success{background:hsl(var(--success)/.14);color:hsl(var(--success));border-color:hsl(var(--success)/.35)}
.ds-badge--warning{background:hsl(var(--warning)/.16);color:hsl(35 60% 32%);border-color:hsl(var(--warning)/.4)}
.ds-badge--danger {background:hsl(var(--destructive)/.14);color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.35)}
.ds-badge--glass  {background:hsl(var(--background)/.7);backdrop-filter:blur(10px);border-color:hsl(var(--gold)/.35);color:hsl(var(--bronze))}
/* ponto de status com ping */
.ds-dot{position:relative;width:.4rem;height:.4rem;border-radius:9999px;background:currentColor;flex:none}
.ds-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;
  animation:ds-ping 1.8s cubic-bezier(0,0,.2,1) infinite}

/* --- tooltip (CSS puro, sem JS) ------------------------------------------ */
.ds-tt{position:relative;display:inline-flex}
.ds-tt > .ds-tip{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,7px) scale(.95);
  opacity:0;visibility:hidden;z-index:40;
  background:hsl(var(--foreground));color:hsl(var(--background));
  border-radius:.6rem;padding:.45rem .65rem;max-width:15rem;
  font-family:Geist,Inter,system-ui,sans-serif;font-size:.75rem;line-height:1.45;
  letter-spacing:0;text-transform:none;white-space:normal;text-align:center;
  box-shadow:0 12px 30px -14px hsl(var(--foreground)/.75);
  transition:opacity .18s var(--ds-ease), visibility .18s;
}
.ds-tt > .ds-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:hsl(var(--foreground))}
.ds-tt:hover > .ds-tip,.ds-tt:focus-within > .ds-tip{opacity:1;visibility:visible;animation:ds-tip-in .24s var(--ds-ease-back) forwards}
.ds-tt--right > .ds-tip{left:auto;right:0;transform:translate(0,7px) scale(.95)}
.ds-tt--right:hover > .ds-tip{transform:none;animation:none;opacity:1}
.ds-tt--right > .ds-tip::after{left:auto;right:14px;transform:none}

/* --- faixa infinita ------------------------------------------------------ */
.ds-marquee{position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ds-marquee-track{display:flex;width:max-content;animation:ds-marquee 34s linear infinite}
.ds-marquee:hover .ds-marquee-track{animation-play-state:paused}
.ds-marquee--fast .ds-marquee-track{animation-duration:20s}
.ds-marquee--rev .ds-marquee-track{animation-direction:reverse}

/* --- tabela de especificação -------------------------------------------- */
.ds-table{width:100%;border-collapse:collapse;font-family:Geist Mono,JetBrains Mono,monospace;font-size:.75rem}
.ds-table th,.ds-table td{text-align:left;padding:.62rem .7rem;border-bottom:1px solid hsl(var(--border)/.7);vertical-align:top}
.ds-table thead th{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:hsl(var(--muted-foreground));
  background:hsl(var(--secondary)/.6);white-space:nowrap}
.ds-table tbody tr{transition:background-color .2s var(--ds-ease)}
.ds-table tbody tr:hover{background:hsl(var(--gold)/.07)}
.ds-table td:first-child{color:hsl(var(--foreground));font-weight:500;white-space:nowrap}
.ds-scrollx{overflow-x:auto;border:1px solid hsl(var(--border)/.7);border-radius:var(--radius);background:hsl(var(--card))}

/* --- amostra de cor ----------------------------------------------------- */
.ds-swatch{border-radius:var(--radius);overflow:hidden;border:1px solid hsl(var(--border)/.7);
  background:hsl(var(--card));box-shadow:var(--shadow-soft);
  transition:transform .4s var(--ds-ease-back), box-shadow .4s var(--ds-ease)}
.ds-swatch:hover{transform:translateY(-4px);box-shadow:var(--shadow-elegant)}
.ds-swatch-chip{height:88px;position:relative;overflow:hidden}
.ds-swatch-chip::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-130%) skewX(-18deg)}
.ds-swatch:hover .ds-swatch-chip::after{animation:ds-sheen 1.2s var(--ds-ease)}
/* escada de opacidade */
.ds-ramp{display:flex;height:26px;border-radius:.4rem;overflow:hidden;border:1px solid hsl(var(--border)/.7)}
.ds-ramp > i{flex:1}

/* --- chip de código ----------------------------------------------------- */
.ds-code{font-family:Geist Mono,JetBrains Mono,monospace;font-size:.6875rem;
  background:hsl(var(--secondary));color:hsl(var(--rose-dark));
  border:1px solid hsl(var(--border)/.7);border-radius:.35rem;padding:.1rem .34rem;white-space:nowrap}

/* --- seta de rolagem ---------------------------------------------------- */
.ds-cue{animation:ds-cue 1.9s var(--ds-ease) infinite}

/* --- skeleton ----------------------------------------------------------- */
.ds-skeleton{border-radius:.5rem;
  background:linear-gradient(100deg,hsl(var(--muted)) 25%,hsl(var(--secondary)) 50%,hsl(var(--muted)) 75%);
  background-size:200% 100%;animation:ds-slide-bg 1.5s linear infinite}

/* ==========================================================================
   7. ACESSIBILIDADE — desliga tudo que se move
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .ds-word,.ds-in-blur,.ds-in-mask,.ds-in-pop{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px;border-radius:4px}